multiplefixes quest (#8964)

* add hourglass to header

* multiple quest fixes - show quest info in popover/modal

* pin backgrounds

* unpin gem-purchable items / change pinType of quest to quests

* check if hatching potion is allowed on egg - wide hatching info

* fix (perf): items - request text()/notes() only once

* change items margin to 23px

* list cards + open modal to choose a target + add space between market items

* buy card from task-list

* fix tests - unpin items on purchasing eggs / hatchingPotions

website/client/components/tasks/user.vue

@@ -105,6 +105,14 @@
           :item="ctx.item",
           v-if="ctx.item.purchaseType === 'gear'"
         )
+
+  selectMembersModal(
+    :card="selectedCardToBuy",
+    :group="user.party",
+    @change="resetCardToBuy($event)",
+    @memberSelected="memberSelectedToSendCard($event)",
+  )
+
   spells
 </template>
 
@@ -292,6 +300,7 @@ import BuyModal from 'client/components/shops/buyModal.vue';
 import Item from 'client/components/inventory/item.vue';
 import Avatar from 'client/components/avatar';
 import EquipmentAttributesGrid from 'client/components/shops/market/equipmentAttributesGrid.vue';
+import SelectMembersModal from 'client/components/shops/market/selectMembersModal.vue';
 
 export default {
   components: {
@@ -304,6 +313,7 @@ export default {
     Avatar,
     EquipmentAttributesGrid,
     spells,
+    SelectMembersModal,
   },
   data () {
     return {
@@ -329,6 +339,7 @@ export default {
       creatingTask: null,
 
       selectedItemToBuy: null,
+      selectedCardToBuy: null,
     };
   },
   computed: {
@@ -452,13 +463,20 @@ export default {
         this.selectedItemToBuy = null;
       }
     },
+    resetCardToBuy ($event) {
+      if (!$event) {
+        this.selectedCardToBuy = null;
+      }
+    },
     memberOverrideAvatarGear (gear) {
       return {
         [gear.type]: gear.key,
       };
     },
     buyItem (item) {
-      if (item.currency === 'gold') {
+      if (item.purchaseType === 'card') {
+        this.selectedCardToBuy = item;
+      } else if (item.currency === 'gold') {
         this.$store.dispatch('shops:buyItem', {key: item.key});
       } else {
         this.$store.dispatch('shops:purchase', {type: item.purchaseType, key: item.key});
@@ -467,6 +485,10 @@ export default {
     openBuyDialog (rewardItem) {
       this.selectedItemToBuy = rewardItem;
     },
+    memberSelectedToSendCard (member) {
+      this.$store.dispatch('user:castSpell', {key: this.selectedCardToBuy.key, targetId: member.id});
+      this.selectedCardToBuy = null;
+    },
   },
 };
 </script>