multiple fixes sep 24 (#9073)

* pin purchase-gems + orb of rebirth

* show questInfo in items inventory and reward column

* un-equip gear using the star / clicking on the drawer

website/client/components/inventory/equipment/index.vue

@@ -66,7 +66,7 @@
             )
               .popover-content-text {{ $t(drawerPreference+'PopoverText') }}
       .items.items-one-line(slot="drawer-slider")
-        item(
+        item.pointer(
           v-for="(label, group) in gearTypesToStrings",
           :key="group",
           :item="flatGear[activeItems[group]]",
@@ -74,6 +74,7 @@
           :emptyItem="!flatGear[activeItems[group]] || flatGear[activeItems[group]].key.indexOf('_base_0') !== -1",
           :label="label",
           :popoverPosition="'top'",
+          @click="equipItem(flatGear[activeItems[group]])",
         )
           template(slot="popoverContent", scope="context")
             equipmentAttributesPopover(:item="context.item")
@@ -113,7 +114,7 @@
               starBadge(
                 :selected="activeItems[context.item.type] === context.item.key",
                 :show="!costume || user.preferences.costume",
-                @click="openEquipDialog(context.item)",
+                @click="equipItem(context.item)",
               )
             template(slot="popoverContent", scope="context")
               equipmentAttributesPopover(:item="context.item")
@@ -127,6 +128,12 @@
   )
 </template>
 
+<style lang="scss">
+.pointer {
+  cursor: pointer;
+}
+</style>
+
 <script>
 import { mapState } from 'client/libs/store';
 import each from 'lodash/each';

website/client/components/inventory/items/index.vue

@@ -114,6 +114,11 @@
             @click="itemClicked(group.key, context.item)",
           )
             template(slot="popoverContent", scope="context")
+              div.questPopover(v-if="group.key === 'quests'")
+                h4.popover-content-title {{ context.item.text }}
+                questInfo(:quest="context.item")
+
+              div(v-else)
                 h4.popover-content-title {{ context.item.text }}
                 .popover-content-text(v-html="context.item.notes")
             template(slot="itemBadge", scope="context")
@@ -191,6 +196,8 @@ import startQuestModal from '../../groups/startQuestModal';
 
 import createAnimal from 'client/libs/createAnimal';
 
+import QuestInfo from '../../shops/quests/questInfo.vue';
+
 import moment from 'moment';
 
 const allowedSpecialItems = ['snowball', 'spookySparkles', 'shinySeed', 'seafoam'];
@@ -228,6 +235,7 @@ export default {
     CountBadge,
     startQuestModal,
     cardsModal,
+    QuestInfo,
   },
   directives: {
     drag: DragDropDirective,

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

@@ -150,9 +150,6 @@
             span(slot="popoverContent")
               h4.popover-content-title {{ item.text }}
 
-            template(slot="itemImage", scope="scope")
-              span.svg-icon.inline.icon-48(v-if="scope.item.key == 'gem'", v-html="icons.gem")
-
             template(slot="itemBadge", scope="ctx")
               countBadge(
                 v-if="item.showCount != false",
@@ -491,29 +488,20 @@ export default {
           let specialItems = [];
 
           if (this.user.purchased.plan.customerId) {
+            let gemItem = getItemInfo(this.user, 'gem');
+
             specialItems.push({
+              ...gemItem,
               showCount: false,
-              key: 'gem',
-              class: 'gem',
-              pinKey: 'gems',
-              purchaseType: 'gems',
-              text: this.$t('subGemName'),
-              notes: this.$t('subGemPop'),
-              currency: 'gold',
-              value: 20,
             });
           }
 
           if (this.user.flags.rebirthEnabled) {
+            let rebirthItem = getItemInfo(this.user, 'rebirth_orb');
+
             specialItems.push({
               showCount: false,
-              key: 'rebirth_orb',
-              class: 'rebirth_orb',
-              purchaseType: 'rebirth_orb',
-              text: this.$t('rebirthName'),
-              notes: this.$t('rebirthPop'),
-              currency: 'gems',
-              value: this.user.stats.lvl < 100 ? 6 : 0,
+              ...rebirthItem,
             });
           }
 

website/client/components/shops/shopItem.vue

@@ -17,6 +17,8 @@ div
         div.image
           div(:class="item.class", v-once)
           slot(name="itemImage", :item="item")
+          span.svg-icon.inline.icon-48(v-if="item.key == 'gem'", v-html="icons.gems")
+
 
         div.price
           span.svg-icon.inline.icon-16(v-html="icons[currencyClass]")
@@ -33,6 +35,9 @@ div
         v-if="item.purchaseType==='gear'",
         :item="item"
       )
+      div.questPopover(v-else-if="item.purchaseType === 'quests'")
+        h4.popover-content-title {{ item.text }}
+        questInfo(:quest="item")
       div(v-else)
         h4.popover-content-title(v-once) {{ item.text }}
         .popover-content-text(v-if="showNotes", v-once) {{ item.notes }}
@@ -142,6 +147,11 @@ div
     top: 8px;
     margin-top: 0;
   }
+
+  .icon-48 {
+    width: 48px;
+    height: 48px;
+  }
 </style>
 
 <script>
@@ -156,6 +166,8 @@ div
 
   import EquipmentAttributesPopover from 'client/components/inventory/equipment/attributesPopover';
 
+  import QuestInfo from './quests/questInfo.vue';
+
   import moment from 'moment';
 
   import seasonalShopConfig from 'common/script/libs/shops-seasonal.config';
@@ -164,6 +176,7 @@ div
     components: {
       bPopover,
       EquipmentAttributesPopover,
+      QuestInfo,
     },
     data () {
       return Object.freeze({

website/client/components/ui/starBadge.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 span.badge.badge-pill.badge-item.badge-star(
   :class="{'item-selected-badge': selected === true}",
-  @click="click",
+  @click.stop="click",
   v-if="show",
 ) &#9733;
 </template>

website/common/script/libs/getItemInfo.js

@@ -269,6 +269,36 @@ module.exports = function getItemInfo (user, type, item, officialPinnedItems, la
       };
       break;
     }
+    case 'gem': {
+      itemInfo = {
+        key: 'gem',
+        purchaseType: 'gems',
+        class: 'gem',
+        text: i18n.t('subGemName'),
+        notes: i18n.t('subGemPop'),
+        value: 20,
+        currency: 'gold',
+        path: 'special.gems',
+        pinType: 'gem',
+        locked: !user.purchased.plan.customerId,
+      };
+      break;
+    }
+    case 'rebirth_orb': {
+      itemInfo = {
+        key: 'rebirth_orb',
+        purchaseType: 'rebirth_orb',
+        class: 'rebirth_orb',
+        text: i18n.t('rebirthName'),
+        notes: i18n.t('rebirthPop'),
+        value: user.stats.lvl < 100 ? 6 : 0,
+        currency: 'gems',
+        path: 'special.rebirth_orb',
+        pinType: 'rebirth_orb',
+        locked: !user.flags.rebirthEnabled,
+      };
+      break;
+    }
   }
 
   if (itemInfo) {