From fb626ebf7e3fd95e2186c1fa06919ae4b3c7f7de Mon Sep 17 00:00:00 2001
From: Sabe Jones <sabe@habitica.com>
Date: Tue, 3 Sep 2024 17:03:21 -0500
Subject: [PATCH] Squashed commit of the following:

commit 613e6af7f0dfa3862dff117fadbb7194a29b8dbd
Author: Sabe Jones <sabe@habitica.com>
Date:   Tue Sep 3 16:57:02 2024 -0500

    feat(promo): add canonical dates for gem sales

commit 8e2fbebf3c663b0d5af5c10f3019726dbed1ca31
Author: Sabe Jones <sabe@habitica.com>
Date:   Fri Aug 23 17:08:20 2024 -0500

    fix(gems): correct Gem amounts during sale

commit 85853c697ba8eb5e6d0e053e1fe1eab295028f23
Author: Sabe Jones <sabe@habitica.com>
Date:   Fri Aug 16 16:57:02 2024 -0500

    fix(event): show user timezone to compare to UTC

commit a0a312a315cb2efad0db9370109cb036a8af0b0a
Author: Sabe Jones <sabe@habitica.com>
Date:   Fri Aug 16 15:49:08 2024 -0500

    refactor(promo): add UTC parenthetical
---
 website/client/package-lock.json              | 12 +++
 website/client/package.json                   |  1 +
 .../src/components/payments/buyGemsModal.vue  | 86 ++++++++++---------
 website/common/locales/en/limited.json        |  2 +-
 .../common/script/content/constants/events.js | 20 ++---
 5 files changed, 68 insertions(+), 53 deletions(-)

diff --git a/website/client/package-lock.json b/website/client/package-lock.json
index 017f4c2aa9..0d24373560 100644
--- a/website/client/package-lock.json
+++ b/website/client/package-lock.json
@@ -35,6 +35,7 @@
         "lodash": "^4.17.21",
         "moment": "^2.29.4",
         "moment-locales-webpack-plugin": "^1.2.0",
+        "moment-timezone": "^0.5.45",
         "nconf": "^0.12.1",
         "sass": "^1.63.4",
         "sass-loader": "^14.1.1",
@@ -9622,6 +9623,17 @@
         "webpack": "^1 || ^2 || ^3 || ^4 || ^5"
       }
     },
+    "node_modules/moment-timezone": {
+      "version": "0.5.45",
+      "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.45.tgz",
+      "integrity": "sha512-HIWmqA86KcmCAhnMAN0wuDOARV/525R2+lOLotuGFzn4HO+FH+/645z2wx0Dt3iDv6/p61SIvKnDstISainhLQ==",
+      "dependencies": {
+        "moment": "^2.29.4"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/mrmime": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
diff --git a/website/client/package.json b/website/client/package.json
index 9d785ec6d3..56ca15d26d 100644
--- a/website/client/package.json
+++ b/website/client/package.json
@@ -37,6 +37,7 @@
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "moment-locales-webpack-plugin": "^1.2.0",
+    "moment-timezone": "^0.5.45",
     "nconf": "^0.12.1",
     "sass": "^1.63.4",
     "sass-loader": "^14.1.1",
diff --git a/website/client/src/components/payments/buyGemsModal.vue b/website/client/src/components/payments/buyGemsModal.vue
index fbafc981ca..447dd87b3b 100644
--- a/website/client/src/components/payments/buyGemsModal.vue
+++ b/website/client/src/components/payments/buyGemsModal.vue
@@ -4,7 +4,7 @@
       id="buy-gems"
       :hide-footer="true"
       size="md"
-      :modal-class="eventClass"
+      :modal-class="eventInfo?.class"
     >
       <div
         slot="modal-header"
@@ -21,7 +21,7 @@
             class="col-12 text-center"
           >
             <img
-              v-if="eventName === 'fall_extra_gems'"
+              v-if="eventInfo?.name === 'fall_extra_gems'"
               :alt="$t('supportHabitica')"
               srcset="
           ~@/assets/images/gems/fall-header.png,
@@ -30,7 +30,7 @@
               src="~@/assets/images/gems/fall-header.png"
             >
             <img
-              v-else-if="eventName === 'spooky_extra_gems'"
+              v-else-if="eventInfo?.name === 'spooky_extra_gems'"
               :alt="$t('supportHabitica')"
               srcset="
           ~@/assets/images/gems/spooky-header.png,
@@ -51,7 +51,7 @@
         </div>
       </div>
       <div
-        v-if="currentEvent && currentEvent.promo && currentEvent.promo === 'g1g1'"
+        v-if="eventInfo?.promo === 'g1g1'"
         class="gift-promo-banner d-flex justify-content-around align-items-center px-4"
         @click="showSelectUser"
       >
@@ -162,24 +162,32 @@
           :amazon-data="{type: 'single', gemsBlock: selectedGemsBlock}"
         />
         <div
-          v-if="eventName === 'fall_extra_gems' || eventName === 'spooky_extra_gems'"
+          v-if="eventInfo?.name === 'fall_extra_gems' || eventInfo?.name === 'spooky_extra_gems'"
           class="d-flex flex-column justify-content-center"
         >
           <h4 class="mt-3 mx-auto">
             {{ $t('howItWorks') }}
           </h4>
           <small class="text-center">
-            {{ $t('gemSaleHow', { eventStartMonth, eventStartOrdinal, eventEndOrdinal }) }}
+            {{ $t('gemSaleHow', {
+              eventStartMonth: eventInfo.startMonth,
+              eventStartOrdinal: eventInfo.startOrdinal,
+              eventEndOrdinal: eventInfo.endOrdinal,
+            }) }}
           </small>
           <h4 class="mt-3 mx-auto">
             {{ $t('limitations') }}
           </h4>
           <small class="text-center">
-            {{ $t('gemSaleLimitations', {
-              eventStartMonth,
-              eventStartOrdinal,
-              eventEndMonth,
-              eventEndOrdinal,
+            {{ $t('gemSaleLimitationsText', {
+              eventStartMonth: eventInfo.startMonth,
+              eventStartOrdinal: eventInfo.startOrdinal,
+              eventStartTime: eventInfo.startTime,
+              eventStartUTC: eventInfo.startUTC,
+              eventEndMonth: eventInfo.endMonth,
+              eventEndOrdinal: eventInfo.endOrdinal,
+              eventEndTime: eventInfo.endTime,
+              eventEndUTC: eventInfo.endUTC,
             }) }}
           </small>
         </div>
@@ -385,7 +393,7 @@
 
 <script>
 import find from 'lodash/find';
-import moment from 'moment';
+import moment from 'moment-timezone';
 import { mapState } from '@/libs/store';
 import markdown from '@/directives/markdown';
 import paymentsMixin from '@/mixins/payments';
@@ -431,37 +439,31 @@ export default {
       originalGemsBlocks: 'content.gems',
       currentEventList: 'worldState.data.currentEventList',
     }),
-    currentEvent () {
-      return find(this.currentEventList, event => Boolean(event.gemsPromo) || Boolean(event.promo));
-    },
-    eventName () {
-      return this.currentEvent && this.currentEvent.event;
-    },
-    eventClass () {
-      if (this.currentEvent && this.currentEvent.gemsPromo) {
-        return `event-${this.eventName}`;
-      }
-      return '';
-    },
-    eventStartMonth () {
-      return moment(this.currentEvent.start).format('MMMM');
-    },
-    eventStartOrdinal () {
-      return moment(this.currentEvent.start).format('Do');
-    },
-    eventEndMonth () {
-      return moment(this.currentEvent.end).format('MMMM');
-    },
-    eventEndOrdinal () {
-      return moment(this.currentEvent.end).format('Do');
+    eventInfo () {
+      const currentEvent = find(
+        this.currentEventList, event => Boolean(event.gemsPromo) || Boolean(event.promo),
+      );
+      if (!currentEvent) return null;
+
+      const zone = moment.tz.guess();
+
+      return {
+        name: currentEvent.event,
+        class: currentEvent.gemsPromo ? `event-${currentEvent.event}` : '',
+        gemsPromo: currentEvent.gemsPromo,
+        promo: currentEvent.promo,
+        startMonth: moment(currentEvent.start).format('MMMM'),
+        startOrdinal: moment(currentEvent.start).format('Do'),
+        startTime: moment.tz(currentEvent.start, zone).format('hh:mm A z'),
+        startUTC: moment(currentEvent.start).utc().format('hh:mm A'),
+        endMonth: moment(currentEvent.end).format('MMMM'),
+        endOrdinal: moment(currentEvent.end).format('Do'),
+        endTime: moment.tz(currentEvent.end, zone).format('hh:mm A z'),
+        endUTC: moment(currentEvent.end).utc().format('hh:mm A'),
+      };
     },
     isGemsPromoActive () {
-      const currEvt = this.currentEvent;
-      if (currEvt && currEvt.gemsPromo && moment().isBefore(currEvt.end)) {
-        return true;
-      }
-
-      return false;
+      return Boolean(this.eventInfo);
     },
     gemsBlocks () {
       // We don't want to modify the original gems blocks when a promotion is running
@@ -476,7 +478,7 @@ export default {
         if (this.isGemsPromoActive) {
           newBlock.originalGems = originalBlock.gems;
           newBlock.gems = (
-            this.currentEvent.gemsPromo[gemsBlockKey] || originalBlock.gems
+            this.eventInfo.gemsPromo[gemsBlockKey] || originalBlock.gems
           );
         }
       });
diff --git a/website/common/locales/en/limited.json b/website/common/locales/en/limited.json
index a9ba90debe..cb1ebb8442 100644
--- a/website/common/locales/en/limited.json
+++ b/website/common/locales/en/limited.json
@@ -238,7 +238,7 @@
   "g1g1Limitations": "This is a limited time event that starts on <%= promoStartMonth %> <%= promoStartOrdinal %> at <%= promoStartTime %> and will end <%= promoEndMonth %> <%= promoEndOrdinal %> at <%= promoEndTime %>. This promotion only applies when you gift to another Habitican. If you or your gift recipient already have a subscription, the gifted subscription will add months of credit that will only be used after the current subscription is canceled or expires.",
   "noLongerAvailable": "This item is no longer available.",
   "gemSaleHow": "Between <%= eventStartMonth %> <%= eventStartOrdinal %> and <%= eventEndOrdinal %>, simply purchase any Gem bundle like usual and your account will be credited with the promotional amount of Gems. More Gems to spend, share, or save for any future releases!",
-  "gemSaleLimitations": "This promotion only applies during the limited time event. This event starts on <%= eventStartMonth %> <%= eventStartOrdinal %> at 8:00 AM EDT (12:00 UTC) and will end <%= eventEndMonth %> <%= eventEndOrdinal %> at 8:00 PM EDT (00:00 UTC). The promo offer is only available when buying Gems for yourself.",
+  "gemSaleLimitationsText": "This promotion only applies during the limited time event. This event starts on <%= eventStartMonth %> <%= eventStartOrdinal %> at <%= eventStartTime %> (<%= eventStartUTC %> UTC) and will end <%= eventEndMonth %> <%= eventEndOrdinal %> at <%= eventEndTime %> (<%= eventEndUTC %> UTC) . The promo offer is only available when buying Gems for yourself.",
   "anniversaryLimitations": "This is a limited time event that starts on January 30th at 8:00 AM ET (13:00 UTC) and will end February 8th at 11:59 PM ET (04:59 UTC). The Limited Edition Jubilant Gryphatrice and ten Magic Hatching Potions will be available to buy during this time. The other Gifts listed in the Four for Free section will be automatically delivered to all accounts that were active in the 30 days prior to day the gift is sent. Accounts created after the gifts are sent will not be able to claim them.",
   "anniversaryLimitedDates": "January 30th to February 8th",
   "limitedEvent": "Limited Event",
diff --git a/website/common/script/content/constants/events.js b/website/common/script/content/constants/events.js
index 507cb7c3a5..f079206da1 100644
--- a/website/common/script/content/constants/events.js
+++ b/website/common/script/content/constants/events.js
@@ -83,6 +83,16 @@ export const REPEATING_EVENTS = {
     season: 'habitoween',
     npcImageSuffix: '_halloween',
   },
+  fallGemSale: {
+    start: new Date('1970-09-23T04:00-04:00'),
+    end: new Date('1970-09-27T23:59-04:00'),
+    event: 'fall_extra_gems',
+  },
+  spookyGemSale: {
+    start: new Date('1970-10-28T04:00-04:00'),
+    end: new Date('1970-11-01T23:59-04:00'),
+    event: 'spooky_extra_gems',
+  },
   harvestFeast: {
     start: new Date('1970-11-22T08:00-05:00'),
     end: new Date('1970-11-27T20:00-05:00'),
@@ -186,11 +196,6 @@ export const EVENTS = {
     start: '2023-11-09T08:00-04:00',
     end: '2023-11-30T23:59-04:00',
   },
-  spooky_extra_gems: {
-    start: '2023-10-24T08:00-04:00',
-    end: '2023-10-31T23:59-04:00',
-    gemsPromo,
-  },
   bundle202310: {
     start: '2023-10-17T08:00-04:00',
     end: '2023-10-31T23:59-04:00',
@@ -308,11 +313,6 @@ export const EVENTS = {
     season: 'fall',
     gear: true,
   },
-  fall_extra_gems: {
-    start: '2022-10-06T08:00-04:00',
-    end: '2022-10-13T20:00-04:00',
-    gemsPromo,
-  },
   bundle202210: {
     start: '2022-10-13T08:00-04:00',
     end: '2022-10-31T20:00-04:00',