fix(potions): call out limited time

website/client/src/components/shops/market/categoryRow.vue

@@ -11,6 +11,12 @@
       <span slot="popoverContent">
         <strong v-if="item.key === 'gem' && gemsLeft === 0">{{ $t('maxBuyGems') }}</strong>
         <h4 class="popover-content-title">{{ item.text }}</h4>
+        <div
+          v-if="item.event"
+          class="mt-2"
+        >
+          {{ limitedString }}
+        </div>
       </span>
       <template
         slot="itemBadge"
@@ -26,14 +32,15 @@
 import _filter from 'lodash/filter';
 import _sortBy from 'lodash/sortBy';
 import _map from 'lodash/map';
+import moment from 'moment';
 import { mapState } from '@/libs/store';
 import pinUtils from '@/mixins/pinUtils';
 import planGemLimits from '@/../../common/script/libs/planGemLimits';
+import seasonalShopConfig from '@/../../common/script/libs/shops-seasonal.config';
 
 import ShopItem from '../shopItem';
 import CategoryItem from './categoryItem';
 
-
 export default {
   components: {
     CategoryItem,
@@ -53,6 +60,9 @@ export default {
       return planGemLimits.convCap
         + this.user.purchased.plan.consecutive.gemCapExtra - this.user.purchased.plan.gemsBought;
     },
+    limitedString () {
+      return this.$t('limitedOffer', { date: moment(seasonalShopConfig.dateRange.end).format('LL') });
+    },
     sortedMarketItems () {
       let result = _map(this.category.items, e => ({
         ...e,

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

@@ -299,7 +299,10 @@
             <span slot="popoverContent">
               <div class="questPopover">
                 <h4 class="popover-content-title">{{ item.text }}</h4>
-                <questInfo :quest="item" />
+                <questInfo
+                  :quest="item"
+                  :popoverVersion="true"
+                />
               </div>
             </span>
             <template

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

@@ -2,7 +2,6 @@
   <div>
     <div
       class="row"
-      :class="{'small-version': smallVersion}"
     >
       <div
         v-if="quest.collect"
@@ -31,14 +30,13 @@
           <div
             v-for="star of stars()"
             :key="star"
-            class="svg-icon inline"
+            class="svg-icon inline icon-16"
-            :class="smallVersion ? 'icon-12' : 'icon-16'"
             v-html="icons[star]"
           ></div>
         </dd>
       </div>
     </div>
-    <div v-if="quest.limited">
+    <div v-if="quest.limited && popoverVersion">
       {{ limitedString }}
     </div>
   </div>
@@ -133,7 +131,7 @@ export default {
     quest: {
       type: Object,
     },
-    smallVersion: {
+    popoverVersion: {
       type: Boolean,
       default: false,
     },

website/client/src/components/shops/shopItem.vue

@@ -104,7 +104,7 @@
         </div>
         <div
           v-if="item.event"
-          class="mt-4"
+          :class="item.purchaseType === 'gear' ? 'mt-4' : 'mt-2'"
         >
           {{ limitedString }}
         </div>

website/common/script/content/hatching-potions.js

@@ -3,6 +3,9 @@ import defaults from 'lodash/defaults';
 import each from 'lodash/each';
 import moment from 'moment';
 import t from './translation';
+import {
+  EVENTS,
+} from './constants';
 
 function hasQuestAchievementFunction (key) {
   return user => user.achievements.quests
@@ -70,6 +73,7 @@ const premium = {
     value: 2,
     text: t('hatchingPotionShimmer'),
     limited: true,
+    event: EVENTS.spring2020,
     _addlNotes: t('eventAvailabilityReturning', {
       availableDate: t('dateEndMarch'),
       previousDate: t('marchYYYY', { year: 2018 }),
@@ -205,6 +209,7 @@ const premium = {
     value: 2,
     text: t('hatchingPotionCelestial'),
     limited: true,
+    event: EVENTS.spring2020,
     _addlNotes: t('eventAvailabilityReturning', {
       availableDate: t('dateEndMarch'),
       previousDate: t('marchYYYY', { year: 2019 }),
@@ -271,6 +276,7 @@ const premium = {
     value: 2,
     text: t('hatchingPotionBirchBark'),
     limited: true,
+    event: EVENTS.spring2020,
     canBuy () {
       return moment().isBefore('2020-05-02');
     },
@@ -284,6 +290,7 @@ const wacky = {
   Veggie: {
     text: t('hatchingPotionVeggie'),
     limited: true,
+    event: EVENTS.spring2020,
     _addlNotes: t('eventAvailabilityReturning', {
       availableDate: t('dateEndMarch'),
       previousDate: t('marchYYYY', { year: 2019 }),

website/common/script/libs/getItemInfo.js

@@ -94,6 +94,7 @@ export default function getItemInfo (user, type, item, officialPinnedItems, lang
         purchaseType: 'hatchingPotions',
         path: item.wacky ? `wackyHatchingPotions.${item.key}` : `premiumHatchingPotions.${item.key}`,
         pinType: 'premiumHatchingPotion',
+        event: item.event,
       };
       break;
     case 'food':