Promotion Admin panel

src/components/PromoBanner.vue

@@ -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/Tiers.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/router/routes.js

@@ -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/services/promotions.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();
+	}
+}