fix(quest): call out limited time

website/client/src/components/shops/quests/buyQuestModal.vue

@@ -82,6 +82,16 @@
     >
       <questDialogDrops :item="item" />
     </div>
+    <div
+      v-if="item.limited"
+      class="limitedTime"
+    >
+      <span
+        class="svg-icon inline icon-16 clock-icon"
+        v-html="icons.clock"
+      ></span>
+      <span class="limitedString">{{ limitedString }}</span>
+    </div>
     <div
       slot="modal-footer"
       class="clearfix"
@@ -121,6 +131,9 @@
       margin: 33px auto auto;
     }
 
+    .modal-body {
+      padding-bottom: 0px;
+    }
 
     .questInfo {
       width: 70%;
@@ -208,6 +221,27 @@
       }
     }
 
+    .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;
@@ -247,14 +281,17 @@
 </style>
 
 <script>
+import moment from 'moment';
 import { mapState } from '@/libs/store';
+import seasonalShopConfig from '@/../../common/script/libs/shops-seasonal.config';
 
+import svgClock from '@/assets/svg/clock.svg';
 import svgClose from '@/assets/svg/close.svg';
-import svgGold from '@/assets/svg/gold.svg';
-import svgGem from '@/assets/svg/gem.svg';
-import svgPin from '@/assets/svg/pin.svg';
 import svgExperience from '@/assets/svg/experience.svg';
+import svgGem from '@/assets/svg/gem.svg';
+import svgGold from '@/assets/svg/gold.svg';
 import svgHourglasses from '@/assets/svg/hourglass.svg';
+import svgPin from '@/assets/svg/pin.svg';
 
 import BalanceInfo from '../balanceInfo.vue';
 import currencyMixin from '../_currencyMixin';
@@ -286,12 +323,13 @@ export default {
   data () {
     return {
       icons: Object.freeze({
+        clock: svgClock,
         close: svgClose,
-        gold: svgGold,
-        gem: svgGem,
-        pin: svgPin,
         experience: svgExperience,
+        gem: svgGem,
+        gold: svgGold,
         hourglass: svgHourglasses,
+        pin: svgPin,
       }),
 
       isPinned: false,
@@ -319,6 +357,9 @@ export default {
       if (this.priceType === 'hourglasses') return this.icons.hourglass;
       return this.icons.gem;
     },
+    limitedString () {
+      return this.$t('limitedOffer', { date: moment(seasonalShopConfig.dateRange.end).format('LL') });
+    },
   },
   watch: {
     item: function itemChanged () {

website/client/src/components/shops/quests/questInfo.vue

@@ -1,40 +1,45 @@
 <template>
-  <div
-    class="row"
-    :class="{'small-version': smallVersion}"
-  >
+  <div>
     <div
-      v-if="quest.collect"
-      class="table-row"
+      class="row"
+      :class="{'small-version': smallVersion}"
     >
-      <dt>{{ $t('collect') + ':' }}</dt>
-      <dd>
-        <div
-          v-for="(collect, key) of quest.collect"
-          :key="key"
-        >
-          <span>{{ collect.count }} {{ getCollectText(collect) }}</span>
-        </div>
-      </dd>
+      <div
+        v-if="quest.collect"
+        class="table-row"
+      >
+        <dt>{{ $t('collect') + ':' }}</dt>
+        <dd>
+          <div
+            v-for="(collect, key) of quest.collect"
+            :key="key"
+          >
+            <span>{{ collect.count }} {{ getCollectText(collect) }}</span>
+          </div>
+        </dd>
+      </div>
+      <div
+        v-if="quest.boss"
+        class="table-row"
+      >
+        <dt>{{ $t('bossHP') + ':' }}</dt>
+        <dd>{{ quest.boss.hp }}</dd>
+      </div>
+      <div class="table-row">
+        <dt>{{ $t('difficulty') + ':' }}</dt>
+        <dd>
+          <div
+            v-for="star of stars()"
+            :key="star"
+            class="svg-icon inline"
+            :class="smallVersion ? 'icon-12' : 'icon-16'"
+            v-html="icons[star]"
+          ></div>
+        </dd>
+      </div>
     </div>
-    <div
-      v-if="quest.boss"
-      class="table-row"
-    >
-      <dt>{{ $t('bossHP') + ':' }}</dt>
-      <dd>{{ quest.boss.hp }}</dd>
-    </div>
-    <div class="table-row">
-      <dt>{{ $t('difficulty') + ':' }}</dt>
-      <dd>
-        <div
-          v-for="star of stars()"
-          :key="star"
-          class="svg-icon inline"
-          :class="smallVersion ? 'icon-12' : 'icon-16'"
-          v-html="icons[star]"
-        ></div>
-      </dd>
+    <div v-if="quest.limited">
+      {{ limitedString }}
     </div>
   </div>
 </template>
@@ -115,10 +120,14 @@ dt {
 </style>
 
 <script>
+import moment from 'moment';
+
 import svgStar from '@/assets/svg/difficulty-star.svg';
 import svgStarHalf from '@/assets/svg/difficulty-star-half.svg';
 import svgStarEmpty from '@/assets/svg/difficulty-star-empty.svg';
 
+import seasonalShopConfig from '@/../../common/script/libs/shops-seasonal.config';
+
 export default {
   props: {
     quest: {
@@ -146,6 +155,9 @@ export default {
 
       return 1;
     },
+    limitedString () {
+      return this.$t('limitedOffer', { date: moment(seasonalShopConfig.dateRange.end).format('LL') });
+    },
   },
   methods: {
     stars () {

website/common/script/content/quests.js

@@ -3584,6 +3584,7 @@ const quests = {
     completion: t('questWaffleCompletion'),
     value: 4,
     category: 'hatchingPotion',
+    limited: true,
     boss: {
       name: t('questWaffleBoss'),
       hp: 500,

website/common/script/libs/getItemInfo.js

@@ -133,6 +133,7 @@ export default function getItemInfo (user, type, item, officialPinnedItems, lang
         notes: item.notes(language),
         addlNotes: item.addlNotes ? item.addlNotes(language) : null,
         group: item.group,
+        limited: item.limited ? item.limited : false,
         value: item.goldValue ? item.goldValue : item.value,
         locked,
         previous: content.quests[item.previous]