From 23f6e9b91114cc0eec53e2a82ed6115d31117169 Mon Sep 17 00:00:00 2001
From: Sabe Jones <sabrecat@gmail.com>
Date: Thu, 8 Apr 2021 15:43:47 -0500
Subject: [PATCH] feat(event): more datetime countdown improvements

---
 .../client/src/components/shops/buyModal.vue  | 21 -----------
 .../src/components/shops/countdownBanner.vue  | 35 +++++++++++++++----
 .../components/shops/market/categoryRow.vue   | 13 +++++--
 .../components/shops/quests/buyQuestModal.vue | 21 -----------
 .../src/components/shops/quests/questInfo.vue | 13 +++++--
 .../client/src/components/shops/shopItem.vue  | 13 +++++--
 website/common/locales/en/limited.json        |  3 +-
 website/common/locales/en/npc.json            |  3 +-
 website/common/script/content/quests.js       |  5 +--
 9 files changed, 65 insertions(+), 62 deletions(-)

diff --git a/website/client/src/components/shops/buyModal.vue b/website/client/src/components/shops/buyModal.vue
index 13e4b7ac05..e591f58fd4 100644
--- a/website/client/src/components/shops/buyModal.vue
+++ b/website/client/src/components/shops/buyModal.vue
@@ -318,27 +318,6 @@
       opacity: 0.55;
     }
 
-    .limitedTime {
-      height: 32px;
-      background-color: $purple-300;
-      width: calc(100% + 30px);
-      margin: 0 -15px; // the modal content has its own padding
-
-      font-size: 12px;
-      line-height: 1.33;
-      text-align: center;
-      color: $white;
-
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      .limitedString {
-        height: 16px;
-        margin-left: 8px;
-      }
-    }
-
     .attributesGrid {
       margin-top: 8px;
       border-radius: 2px;
diff --git a/website/client/src/components/shops/countdownBanner.vue b/website/client/src/components/shops/countdownBanner.vue
index 7bb29e7a92..dee2380f72 100644
--- a/website/client/src/components/shops/countdownBanner.vue
+++ b/website/client/src/components/shops/countdownBanner.vue
@@ -1,8 +1,11 @@
 <template>
-  <div class="limitedTime">
+  <div
+    class="limitedTime"
+    :class="availabilityClass"
+  >
     <span
       class="svg-icon inline icon-16"
-      v-html="icons.clock"
+      v-html="availabilityClass === 'expired' ? icons.clockWhite : icons.clock"
     ></span>
     <span class="limitedString"> {{ limitedString }} </span>
   </div>
@@ -13,7 +16,6 @@
 
   .limitedTime {
     height: 32px;
-    background-color: $purple-300;
     width: calc(100% + 30px);
     margin: 0 -15px; // the modal content has its own padding
 
@@ -31,46 +33,65 @@
       margin-left: 8px;
     }
   }
+
+  .available {
+    background-color: $purple-300;
+  }
+  .expired {
+    background-color: $gray-200;
+  }
 </style>
 
 <script>
 import moment from 'moment';
 import svgClock from '@/assets/svg/clock.svg';
+import clockWhite from '@/assets/svg/clock-white.svg';
 
 export default {
   props: {
     endDate: {
-      type: String,
+      type: Object, // moment
     },
   },
   data () {
     return {
       icons: Object.freeze({
         clock: svgClock,
+        clockWhite,
       }),
       timer: '',
       limitedString: '',
+      availabilityClass: 'available',
     };
   },
   mounted () {
     this.countdownString();
-    this.timer = setInterval(this.countdownString, 30000);
+    this.timer = setInterval(this.countdownString, 1000);
   },
   methods: {
     countdownString () {
       const diffDuration = moment.duration(moment(this.endDate).diff(moment()));
 
-      if (diffDuration.days() > 0) {
+      if (moment(this.endDate).isBefore()) {
+        this.limitedString = this.$t('noLongerAvailable');
+        this.availabilityClass = 'expired';
+        this.cancelAutoUpdate();
+      } else if (diffDuration.days() > 0) {
         this.limitedString = this.$t('limitedAvailabilityDays', {
           days: diffDuration.days(),
           hours: diffDuration.hours(),
           minutes: diffDuration.minutes(),
         });
-      } else {
+      } else if (diffDuration.asMinutes() > 2) {
         this.limitedString = this.$t('limitedAvailabilityHours', {
           hours: diffDuration.hours(),
           minutes: diffDuration.minutes(),
         });
+      } else {
+        this.limitedString = this.$t('limitedAvailabilityMinutes', {
+          minutes: diffDuration.minutes(),
+          seconds: diffDuration.seconds(),
+        });
       }
     },
     cancelAutoUpdate () {
diff --git a/website/client/src/components/shops/market/categoryRow.vue b/website/client/src/components/shops/market/categoryRow.vue
index d63e92ded2..f34da10d0e 100644
--- a/website/client/src/components/shops/market/categoryRow.vue
+++ b/website/client/src/components/shops/market/categoryRow.vue
@@ -108,7 +108,7 @@ export default {
   },
   mounted () {
     this.countdownString();
-    this.timer = setInterval(this.countdownString, 30000);
+    this.timer = setInterval(this.countdownString, 1000);
   },
   methods: {
     itemSelected (item) {
@@ -117,17 +117,24 @@ export default {
     countdownString () {
       const diffDuration = moment.duration(moment(seasonalShopConfig.dateRange.end).diff(moment()));
 
-      if (diffDuration.days() > 0) {
+      if (diffDuration.asSeconds() <= 0) {
+        this.limitedString = this.$t('noLongerAvailable');
+      } else if (diffDuration.days() > 0) {
         this.limitedString = this.$t('limitedAvailabilityDays', {
           days: diffDuration.days(),
           hours: diffDuration.hours(),
           minutes: diffDuration.minutes(),
         });
-      } else {
+      } else if (diffDuration.asMinutes() > 2) {
         this.limitedString = this.$t('limitedAvailabilityHours', {
           hours: diffDuration.hours(),
           minutes: diffDuration.minutes(),
         });
+      } else {
+        this.limitedString = this.$t('limitedAvailabilityMinutes', {
+          minutes: diffDuration.minutes(),
+          seconds: diffDuration.seconds(),
+        });
       }
     },
     cancelAutoUpdate () {
diff --git a/website/client/src/components/shops/quests/buyQuestModal.vue b/website/client/src/components/shops/quests/buyQuestModal.vue
index da8bf6b1b7..f4dc300f9a 100644
--- a/website/client/src/components/shops/quests/buyQuestModal.vue
+++ b/website/client/src/components/shops/quests/buyQuestModal.vue
@@ -202,27 +202,6 @@
       display: block;
     }
 
-    .limitedTime {
-      height: 32px;
-      background-color: $purple-300;
-      width: calc(100% + 30px);
-      margin: 0 -15px; // the modal content has its own padding
-
-      font-size: 12px;
-      line-height: 1.33;
-      text-align: center;
-      color: $white;
-
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      .limitedString {
-        height: 16px;
-        margin-left: 8px;
-      }
-    }
-
     .notEnough {
       pointer-events: none;
       opacity: 0.55;
diff --git a/website/client/src/components/shops/quests/questInfo.vue b/website/client/src/components/shops/quests/questInfo.vue
index 681e8c4e37..c13c980c60 100644
--- a/website/client/src/components/shops/quests/questInfo.vue
+++ b/website/client/src/components/shops/quests/questInfo.vue
@@ -158,7 +158,7 @@ export default {
   },
   mounted () {
     this.countdownString();
-    this.timer = setInterval(this.countdownString, 30000);
+    this.timer = setInterval(this.countdownString, 1000);
   },
   methods: {
     stars () {
@@ -188,17 +188,24 @@ export default {
     countdownString () {
       const diffDuration = moment.duration(moment(seasonalShopConfig.dateRange.end).diff(moment()));
 
-      if (diffDuration.days() > 0) {
+      if (diffDuration.asSeconds() <= 0) {
+        this.limitedString = this.$t('noLongerAvailable');
+      } else if (diffDuration.days() > 0) {
         this.limitedString = this.$t('limitedAvailabilityDays', {
           days: diffDuration.days(),
           hours: diffDuration.hours(),
           minutes: diffDuration.minutes(),
         });
-      } else {
+      } else if (diffDuration.asMinutes() > 2) {
         this.limitedString = this.$t('limitedAvailabilityHours', {
           hours: diffDuration.hours(),
           minutes: diffDuration.minutes(),
         });
+      } else {
+        this.limitedString = this.$t('limitedAvailabilityMinutes', {
+          minutes: diffDuration.minutes(),
+          seconds: diffDuration.seconds(),
+        });
       }
     },
     cancelAutoUpdate () {
diff --git a/website/client/src/components/shops/shopItem.vue b/website/client/src/components/shops/shopItem.vue
index d2bc6c228c..cd9e97955d 100644
--- a/website/client/src/components/shops/shopItem.vue
+++ b/website/client/src/components/shops/shopItem.vue
@@ -319,7 +319,7 @@ export default {
   },
   mounted () {
     this.countdownString();
-    this.timer = setInterval(this.countdownString, 30000);
+    this.timer = setInterval(this.countdownString, 1000);
   },
   methods: {
     click () {
@@ -343,17 +343,24 @@ export default {
     countdownString () {
       const diffDuration = moment.duration(moment(seasonalShopConfig.dateRange.end).diff(moment()));
 
-      if (diffDuration.days() > 0) {
+      if (diffDuration.asSeconds() <= 0) {
+        this.limitedString = this.$t('noLongerAvailable');
+      } else if (diffDuration.days() > 0) {
         this.limitedString = this.$t('limitedAvailabilityDays', {
           days: diffDuration.days(),
           hours: diffDuration.hours(),
           minutes: diffDuration.minutes(),
         });
-      } else {
+      } else if (diffDuration.asMinutes() > 2) {
         this.limitedString = this.$t('limitedAvailabilityHours', {
           hours: diffDuration.hours(),
           minutes: diffDuration.minutes(),
         });
+      } else {
+        this.limitedString = this.$t('limitedAvailabilityMinutes', {
+          minutes: diffDuration.minutes(),
+          seconds: diffDuration.seconds(),
+        });
       }
     },
     cancelAutoUpdate () {
diff --git a/website/common/locales/en/limited.json b/website/common/locales/en/limited.json
index 6ffc6d37ed..7ad85cc377 100644
--- a/website/common/locales/en/limited.json
+++ b/website/common/locales/en/limited.json
@@ -199,5 +199,6 @@
     "howItWorks": "How it Works",
     "g1g1HowItWorks": "Type in the username of the account you’d like to gift to. From there, pick the sub length you’d like to gift and check out. Your account will automatically be rewarded with the same level of subscription you just gifted.",
     "limitations": "Limitations",
-    "g1g1Limitations": "This is a limited time event that starts on December 17th at 8:00 AM ET (13:00 UTC) and will end January 7th at 8:00 PM ET (1:00 UTC). 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."
+    "g1g1Limitations": "This is a limited time event that starts on December 17th at 8:00 AM ET (13:00 UTC) and will end January 7th at 8:00 PM ET (1:00 UTC). 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."
 }
diff --git a/website/common/locales/en/npc.json b/website/common/locales/en/npc.json
index d4461ec9fa..517491c71c 100644
--- a/website/common/locales/en/npc.json
+++ b/website/common/locales/en/npc.json
@@ -127,5 +127,6 @@
   "imReady": "Enter Habitica",
   "limitedOffer": "Available until <%= date %>",
   "limitedAvailabilityDays": "Available for <%= days %>d <%= hours %>h <%= minutes %>m",
-  "limitedAvailabilityHours": "Available for <%= hours %>h <%= minutes %>m"
+  "limitedAvailabilityHours": "Available for <%= hours %>h <%= minutes %>m",
+  "limitedAvailabilityMinutes": "Available for <%= minutes %>m <%= seconds %>s"
 }
diff --git a/website/common/script/content/quests.js b/website/common/script/content/quests.js
index 7c4a35ee7a..869cf00cdc 100644
--- a/website/common/script/content/quests.js
+++ b/website/common/script/content/quests.js
@@ -518,8 +518,9 @@ const quests = {
     completion: t('questEggHuntCompletion'),
     value: 1,
     category: 'pet',
+    event: EVENTS.spring2021,
     canBuy () {
-      return moment().isBefore('2021-04-30T20:00-05:00');
+      return moment().isBefore(EVENTS.spring2021.end);
     },
     collect: {
       plainEgg: {
@@ -3587,7 +3588,7 @@ const quests = {
     category: 'hatchingPotion',
     event: EVENTS.spring2021,
     canBuy () {
-      return moment().isBetween('2021-04-01T08:00-05:00', '2021-04-30T20:00-05:00');
+      return moment().isBefore(EVENTS.spring2021.end);
     },
     boss: {
       name: t('questWaffleBoss'),