feat(event): more datetime countdown improvements

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;

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 () {

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 () {

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;

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 () {

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 () {

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."
 }

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"
 }

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'),