Hourglass Quest (#11325)

* feat(content): Hourglass Quest

* fix(hourglasses): NaN from undefined

* fix(quests): sanity check for negative scrolls

* fix(hourglasses): don't show quantity selection for binary items

* fix(route): validate number, use body not params

* test(timetrav): add quest tests

website/client/components/shops/buyModal.vue

@@ -306,7 +306,7 @@
   const hideAmountSelectionForPurchaseTypes = [
     'gear', 'backgrounds', 'mystery_set', 'card',
     'rebirth_orb', 'fortify', 'armoire', 'keys',
-    'debuffPotion',
+    'debuffPotion', 'pets', 'mounts',
   ];
 
   export default {

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

@@ -23,7 +23,7 @@
             strong {{ $t('howManyToBuy') }}
           .box
             input(type='number', min='0', step='1', v-model.number='selectedAmountToBuy')
-          span.svg-icon.inline.icon-32(aria-hidden="true", v-html="(priceType  === 'gems') ? icons.gem : icons.gold")
+          span.svg-icon.inline.icon-32(aria-hidden="true", v-html="currencyIcon")
           span.value(:class="priceType") {{ item.value }}
 
         button.btn.btn-primary(
@@ -44,6 +44,7 @@
     div.clearfix(slot="modal-footer")
       span.balance.float-left {{ $t('yourBalance') }}
       balanceInfo(
+        :withHourglass="priceType === 'hourglasses'",
         :currencyNeeded="priceType",
         :amountNeeded="item.value"
       ).float-right
@@ -202,6 +203,7 @@
   import svgGem from 'assets/svg/gem.svg';
   import svgPin from 'assets/svg/pin.svg';
   import svgExperience from 'assets/svg/experience.svg';
+  import svgHourglasses from 'assets/svg/hourglass.svg';
 
   import BalanceInfo  from '../balanceInfo.vue';
   import currencyMixin from '../_currencyMixin';
@@ -229,6 +231,7 @@
           gem: svgGem,
           pin: svgPin,
           experience: svgExperience,
+          hourglass: svgHourglasses,
         }),
 
         isPinned: false,
@@ -258,6 +261,11 @@
           return this.item.notes;
         }
       },
+      currencyIcon () {
+        if (this.priceType === 'gold') return this.icons.gold;
+        if (this.priceType === 'hourglasses') return this.icons.hourglass;
+        return this.icons.gem;
+      },
     },
     methods: {
       onChange ($event) {

website/client/components/shops/timeTravelers/index.vue

@@ -68,9 +68,13 @@
               :emptyItem="false",
               @click="selectItemToBuy(ctx.item)"
             )
-              span(slot="popoverContent", slot-scope="ctx")
+              span(slot="popoverContent", slot-scope="ctx", v-if="category !== 'quests'")
                 div
                   h4.popover-content-title {{ ctx.item.text }}
+              span(slot="popoverContent", slot-scope="ctx", v-if="category === 'quests'")
+                div.questPopover
+                  h4.popover-content-title {{ item.text }}
+                  questInfo(:quest="item")
 
               template(slot="itemBadge", slot-scope="ctx")
                 span.badge.badge-pill.badge-item.badge-svg(
@@ -79,6 +83,18 @@
                   @click.prevent.stop="togglePinned(ctx.item)"
                 )
                   span.svg-icon.inline.icon-12.color(v-html="icons.pin")
+    buyQuestModal(
+      :item="selectedItemToBuy || {}",
+      :priceType="selectedItemToBuy ? selectedItemToBuy.currency : ''",
+      :withPin="true",
+      @change="resetItemToBuy($event)",
+    )
+      template(slot="item", slot-scope="ctx")
+        item.flat(
+          :item="ctx.item",
+          :itemContentClass="ctx.item.class",
+          :showPopover="false"
+        )
 </template>
 
 <style lang="scss">
@@ -225,8 +241,10 @@
   import ItemRows from 'client/components/ui/itemRows';
   import toggleSwitch from 'client/components/ui/toggleSwitch';
   import Avatar from 'client/components/avatar';
+  import QuestInfo from '../quests/questInfo.vue';
 
   import BuyModal from '../buyModal.vue';
+  import BuyQuestModal from '../quests/buyQuestModal.vue';
 
   import svgPin from 'assets/svg/pin.svg';
   import svgHourglass from 'assets/svg/hourglass.svg';
@@ -250,9 +268,11 @@
       CountBadge,
       ItemRows,
       toggleSwitch,
+      QuestInfo,
 
       Avatar,
       BuyModal,
+      BuyQuestModal,
     },
     watch: {
       searchText: _throttle(function throttleSearch () {
@@ -274,6 +294,8 @@
         sortItemsBy: ['AZ', 'sortByNumber'],
         selectedSortItemsBy: 'AZ',
 
+        selectedItemToBuy: null,
+
         hidePinned: false,
 
         backgroundUpdate: new Date(),
@@ -303,11 +325,11 @@
         let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
 
         let normalGroups = _filter(apiCategories, (c) => {
-          return c.identifier === 'mounts' || c.identifier === 'pets';
+          return c.identifier === 'mounts' || c.identifier === 'pets' || c.identifier === 'quests';
         });
 
         let setGroups = _filter(apiCategories, (c) => {
-          return c.identifier !== 'mounts' && c.identifier !== 'pets';
+          return c.identifier !== 'mounts' && c.identifier !== 'pets' && c.identifier !== 'quests';
         });
 
         let setCategory = {
@@ -375,7 +397,18 @@
         return _groupBy(entries, 'group');
       },
       selectItemToBuy (item) {
-        this.$root.$emit('buyModal::showItem', item);
+        if (item.purchaseType === 'quests') {
+          this.selectedItemToBuy = item;
+
+          this.$root.$emit('bv::show::modal', 'buy-quest-modal');
+        } else {
+          this.$root.$emit('buyModal::showItem', item);
+        }
+      },
+      resetItemToBuy ($event) {
+        if (!$event) {
+          this.selectedItemToBuy = null;
+        }
       },
     },
     created () {