Use Timezones in Active Promotion

src/components/PromoBanner.vue

@@ -62,12 +62,13 @@ export default {
 			return this.active_promotion && (this.tier?.price === "Free" || !this.tier);
 		},
 		days_remaining() {
-			const diff = new Date(this.active_promotion.active_until) - this.now;
+			const diff = this.active_promotion.active_until - this.now;
+			console.log(diff, this.active_promotion.active_until);
 			const days = Math.floor(diff / (1000 * 60 * 60 * 24));
 			return days >= 1 ? days : undefined;
 		},
 		hours_remaining() {
-			const diff = new Date(this.active_promotion.active_until) - this.now;
+			const diff = this.active_promotion.active_until - this.now;
 			const hours = Math.floor(diff / (1000 * 60 * 60));
 			return hours;
 		},

src/services/promotions.js

@@ -5,6 +5,9 @@ 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();
@@ -18,11 +21,12 @@ export class promotionService {
 		const promotions = (await PROMOTION_REF.once("value")).val();
 		const server_time = await serverUtils.getServerTime();
 		return Object.values(promotions).filter((promotion) => {
-			const active_from = new Date(promotion.active_from);
-			const active_until = new Date(promotion.active_until);
-			active_until.setDate(active_until.getDate() + 1);
+			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 < active_until && server_time > active_from
+				promotion.disabled === undefined &&
+				server_time < promotion.active_until &&
+				server_time > promotion.active_from
 			);
 		});
 	}

src/views/Admin/Promotions.vue

@@ -119,15 +119,15 @@
 									filled
 									square
 									v-model="newPromotion.active_from"
-									label="Active From (MM/DD/YYYY)"
+									label="Active From (YYYY-MM-DD)"
 									:rules="[(val) => !!val || 'Field is required']"
 								>
 									<template v-slot:append>
 										<q-icon name="event" class="cursor-pointer">
 											<q-popup-proxy cover transition-show="scale" transition-hide="scale">
 												<q-date
 													v-model="newPromotion.active_from"
-													mask="MM/DD/YYYY"
+													mask="YYYY-MM-DD"
 													:dark="$store.getters.theme === 'dark'"
 													filled
 													square
@@ -147,15 +147,15 @@
 									filled
 									square
 									v-model="newPromotion.active_until"
-									label="Active Until (MM/DD/YYYY)"
+									label="Active Until (YYYY-MM-DD)"
 									:rules="[(val) => !!val || 'Field is required']"
 								>
 									<template v-slot:append>
 										<q-icon name="event" class="cursor-pointer">
 											<q-popup-proxy cover transition-show="scale" transition-hide="scale">
 												<q-date
 													v-model="newPromotion.active_until"
-													mask="MM/DD/YYYY"
+													mask="YYYY-MM-DD"
 													:dark="$store.getters.theme === 'dark'"
 													filled
 													square