Merge branch 'release/2.34.0' into main

Author: HarmlessHarm

package-lock.json

@@ -1,5 +1,5 @@
 {
-	"version": "2.33.2",
+	"version": "2.34.0",
 	"name": "shieldmaiden",
 	"description": "A Dungeons and Dragons Combat Tracker",
 	"productName": "Shieldmaiden",

package.json

@@ -12,19 +12,22 @@
 		</button>
 		<div class="promo-banner__body">
 			<div class="discount">
-				<div class="discount__percentage">{{ discount }}</div>
+				<div class="discount__percentage">{{ active_promotion.discount }}</div>
 				<div class="discount__off">OFF</div>
 			</div>
 			<div>
-				<div class="code">
+				<div class="code" @click="copyCode">
 					Use promo code
-					<div>{{ code }}</div>
+					<div>
+						{{ active_promotion.code }}
+						<hk-icon icon="fas fa-copy" class="ml-1" />
+					</div>
 				</div>
 			</div>
 		</div>
 		<div class="promo-banner__footer">
 			<div class="remaining">
-				Get your first month with a <strong>{{ discount }}%</strong> discount.
+				Get your first month with a <strong>{{ active_promotion.discount }}%</strong> discount.
 				<template v-if="hours_remaining <= 1">Less than </template>
 				<span class="remaining__count">{{
 					days_remaining ? days_remaining : hours_remaining
@@ -38,6 +41,7 @@
 
 <script>
 import { mapGetters } from "vuex";
+import { promotionService } from "src/services/promotions";
 
 export default {
 	name: "PromoBanner",
@@ -49,50 +53,50 @@ export default {
 	},
 	data() {
 		return {
+			active_promotion: undefined,
 			code: "SHIELDMAIDEN80",
-			discount: 80,
 			now: new Date(),
-			start: new Date("2024-11-15T00:00:00Z"),
-			end: new Date("2024-12-03T07:59:59Z"),
 			showSetter: undefined,
 			timer: null,
 		};
 	},
 	computed: {
 		...mapGetters(["tier"]),
-		show_banner: {
-			get() {
-				const show =
-					(this.tier?.price === "Free" || !this.tier) &&
-					this.now >= this.start &&
-					this.now <= this.end;
-				return this.showSetter !== undefined ? this.showSetter : show;
-			},
-			set(newVal) {
-				this.showSetter = newVal;
-			},
+		show_banner() {
+			return this.active_promotion && (this.tier?.price === "Free" || !this.tier);
 		},
 		days_remaining() {
-			const diff = this.end - this.now;
+			const diff = this.active_promotion.active_until - this.now;
 			const days = Math.floor(diff / (1000 * 60 * 60 * 24));
 			return days >= 1 ? days : undefined;
 		},
 		hours_remaining() {
-			const diff = this.end - this.now;
+			const diff = this.active_promotion.active_until - this.now;
 			const hours = Math.floor(diff / (1000 * 60 * 60));
 			return hours;
 		},
 	},
 	methods: {
+		copyCode(event) {
+			event.preventDefault();
+			navigator.clipboard.writeText(this.active_promotion.code);
+			this.$snotify.success("To clipboard", "Code Copied!", {
+				position: "rightTop",
+			});
+		},
+		async getActivePromotion() {
+			return await promotionService.getFirstActivePromotion();
+		},
 		purchaseEvent() {
 			this.$gtm.trackEvent({
 				event: "purchase",
 			});
 		},
 	},
-	mounted() {
-		if (this.show_banner) {
-			this.$emit("discount", this.discount);
+	async mounted() {
+		this.active_promotion = await this.getActivePromotion();
+		if (this.show_banner && this.active_promotion) {
+			this.$emit("discount", this.active_promotion.discount);
 		}
 		this.timer = setInterval(() => {
 			this.now = new Date();
@@ -137,6 +141,9 @@ export default {
 
 		.code {
 			color: $neutral-2;
+			:hover {
+				color: $primary;
+			}
 
 			> div {
 				color: $white;

src/components/PromoBanner.vue

@@ -33,7 +33,7 @@
 								>
 								<em v-if="t.price === 'Free'" class="neutral-2 sub">forever</em>
 								<em v-else class="neutral-2 sub">{{
-									discount ? "the first month" : "per month"
+									discount && !annually ? "the first month" : "per month"
 								}}</em>
 							</div>
 							<ul>

src/components/Tiers.vue

@@ -1,6 +1,6 @@
 <template>
 	<tag :is="cardView ? 'hk-card' : 'div'" :class="!cardView ? 'normal-view' : ''">
-		<div slot="header" class="pane__header top-menu">
+		<div slot="header" class="pane__header top-menu" :class="cardView && 'card-header'">
 			<div
 				class="money"
 				:class="{ red: currency >= maxCurrencyAmount }"
@@ -10,7 +10,7 @@
 								show: true,
 								type: 'drawers/party/Currency',
 								data: { current: currency },
-						  })
+							})
 						: null
 				"
 			>

src/components/campaign/Players.vue

@@ -116,7 +116,7 @@
 									</div>
 
 									<!-- CURRENCY -->
-									<div class="currency mb-3" v-if="encounter.currency">
+									<div class="currency mb-3">
 										<div class="currency-form">
 											<div v-for="(coin, key) in currencies" :key="key">
 												<img :src="require(`src/assets/_img/currency/${coin.color}.svg`)" />
@@ -235,7 +235,7 @@ export default {
 			campaign: {},
 			patreon: true,
 			tab: "loot",
-			editableEncounter: this.encounter,
+			editableEncounter: { ...this.encounter, currency: {} },
 		};
 	},
 	computed: {

src/components/combat/Finished.vue

@@ -3,7 +3,7 @@
 	<div v-if="current" tabindex="-1">
 		<h3 v-if="targeted.length === 0" class="red text-center">Select one or more targets</h3>
 		<template v-else-if="current.entityType !== 'player'">
-			<template v-if="['npc', 'environment'].includes(current.entityType)">
+			<template v-if="['npc', 'environment', 'companion'].includes(current.entityType)">
 				<!-- ACTIONS -->
 				<q-tabs
 					v-model="tab"
@@ -95,14 +95,14 @@
 																action.recharge === "rest"
 																	? "after a Short or Long Rest"
 																	: action.recharge
-														  })`
+															})`
 														: ``
 												}}
 												{{
 													action.limit
 														? `(${action.limit}/${
 																action.limit_type ? action.limit_type.capitalize() : `Day`
-														  })`
+															})`
 														: ``
 												}}
 												{{

src/components/combat/actions/Roll.vue

@@ -35,6 +35,7 @@ html body {
 
 	button {
 		all: unset;
+		text-align: center;
 		box-sizing: border-box;
 	}
 

src/css/styles.scss

@@ -1052,6 +1052,24 @@ const routes = [
 					},
 				],
 			},
+			{
+				path: "promotions",
+				component: {
+					render(c) {
+						return c("router-view");
+					},
+				},
+				meta: {
+					title: "Promotions",
+				},
+				children: [
+					{
+						path: "",
+						name: "Promotions",
+						component: () => import("src/views/Admin/Promotions.vue"),
+					},
+				],
+			},
 			{
 				path: "subscriptions",
 				component: {

src/router/routes.js

@@ -0,0 +1,55 @@
+import firebase from "firebase/app";
+import { db } from "src/firebase";
+import { serverUtils } from "src/services/serverUtils";
+
+const PROMOTION_REF = db.ref("promotions");
+const TIERS_REF = db.ref("tiers");
+
+const START_TZ = "Z"; // UTC
+const END_TZ = "-07:00"; // PACIFIC TIME
+
+export class promotionService {
+	static async getAllPromotions() {
+		return (await PROMOTION_REF.once("value")).val();
+	}
+
+	static getPromotionsWithCallback(callback) {
+		return PROMOTION_REF.on("value", callback);
+	}
+
+	static async getAllActivePromotions() {
+		const promotions = (await PROMOTION_REF.once("value")).val();
+		const server_time = await serverUtils.getServerTime();
+		return Object.values(promotions).filter((promotion) => {
+			promotion.active_from = new Date(`${promotion.active_from}T00:00:00${START_TZ}`);
+			promotion.active_until = new Date(`${promotion.active_until}T00:00:00${END_TZ}`);
+			return (
+				promotion.disabled === undefined &&
+				server_time < promotion.active_until &&
+				server_time > promotion.active_from
+			);
+		});
+	}
+
+	static async getFirstActivePromotion() {
+		const promotions = await this.getAllActivePromotions();
+		return promotions.length > 0 ? promotions[0] : undefined;
+	}
+
+	static async addNewPromotion(promotion_object) {
+		promotion_object.code = promotion_object.code.toUpperCase();
+		return PROMOTION_REF.child(promotion_object.code).set(promotion_object);
+	}
+
+	static async deletePromotion(promotion_code) {
+		return PROMOTION_REF.child(promotion_code).remove();
+	}
+
+	static async disablePromotion(promotion_code) {
+		return PROMOTION_REF.child(promotion_code).child("disabled").set(true);
+	}
+
+	static async enablePromotion(promotion_code) {
+		return PROMOTION_REF.child(promotion_code).child("disabled").remove();
+	}
+}