Fix: Quest Rewards (#13327)

* Fix: Add Pets / Mounts to Quest-Rewards

* add other popover labels

* fix: quest drop equipment popover

* fix quest reward popover padding

* custom position for pet rewards

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

@@ -158,28 +158,6 @@
       vertical-align: middle;
     }
 
-    .value {
-      width: 28px;
-      height: 32px;
-      font-family: Roboto;
-      font-size: 24px;
-      font-weight: bold;
-      line-height: 1.33;
-      vertical-align: middle;
-
-      &.gems {
-        color: $green-10;
-      }
-
-      &.gold {
-        color: $yellow-10;
-      }
-
-      &.hourglasses {
-        color: $hourglass-color;
-      }
-    }
-
     button.btn.btn-primary {
       margin-top: 24px;
       margin-bottom: 24px;
@@ -257,6 +235,32 @@
   }
 </style>
 
+<style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+
+  .value {
+    width: 28px;
+    height: 32px;
+    font-family: Roboto;
+    font-size: 24px;
+    font-weight: bold;
+    line-height: 1.33;
+    vertical-align: middle;
+
+    &.gems {
+      color: $green-10;
+    }
+
+    &.gold {
+      color: $yellow-10;
+    }
+
+    &.hourglasses {
+      color: $hourglass-color;
+    }
+  }
+</style>
+
 <script>
 import { mapState } from '@/libs/store';
 import seasonalShopConfig from '@/../../common/script/libs/shops-seasonal.config';

website/client/src/components/shops/quests/quest-dialog.stories.js

@@ -17,13 +17,17 @@ stories
     data () {
       return {
         quest: quests.goldenknight2,
-        questWithDrop: quests.moon1,
+        questWithDrop: quests.stressbeast,
+        questWithGear: quests.moon1,
+        evilsanta: quests.evilsanta,
       };
     },
     template: `  
       <div>
         <quest-rewards :quest="quest"></quest-rewards>
         <quest-rewards :quest="questWithDrop"></quest-rewards>
+        <quest-rewards :quest="questWithGear"></quest-rewards>
+        <quest-rewards :quest="evilsanta"></quest-rewards>
       </div>
     `,
   }))

website/client/src/components/shops/quests/quest-helper.mixin.js

@@ -18,6 +18,10 @@ export const QuestHelperMixin = {
           return `Pet_Egg_${drop.key}`;
         case 'quests':
           return `inventory_quest_scroll_${drop.key}`;
+        case 'mounts':
+          return `rewards_mount Mount_Icon_${drop.key}`;
+        case 'pets':
+          return `rewards_pet Pet-${drop.key}`;
         default:
           return `shop_${drop.key}`;
       }

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

@@ -65,6 +65,7 @@
       </item-with-label>
 
       <item-with-label
+        v-if="quest.drop.gp > 0"
         :item="{}"
         label-class="yellow"
       >
@@ -81,8 +82,9 @@
 
       <item-with-label
         v-for="drop in getDropsList(quest.drop.items, false)"
-        :key="drop.key"
+        :key="drop.type+'_'+drop.key"
         :item="{}"
+        class="item-with-label"
       >
         <countBadge
           slot="badges"
@@ -92,13 +94,26 @@
         <div slot="itemImage">
           <div :class="getDropIcon(drop)"></div>
         </div>
-        <div
-          v-if="drop.klass"
-          slot="popoverContent"
-        >
+        <div slot="popoverContent">
           <equipmentAttributesPopover
+            v-if="drop.klass"
             :item="drop"
           />
+          <div v-else>
+            <h4
+              v-once
+              class="popover-content-title"
+              :class="{'mb-0': !Boolean(drop.notes)}"
+            >
+              {{ drop.text }}
+            </h4>
+            <div
+              v-once
+              class="popover-content-text"
+            >
+              {{ drop.notes }}
+            </div>
+          </div>
         </div>
         <div slot="label">
           {{ $t('newItem') }}
@@ -213,4 +228,13 @@ export default {
 
     padding-bottom: 1rem;
   }
+
+  .item-with-label ::v-deep .image {
+    height: 68px;
+    width: 68px;
+
+    .rewards_pet {
+      margin-top: -20px
+    }
+  }
 </style>