new client misc fixes (#9033)

* show quests and open quest dialog on click

* extract questDialogContent/Drops to separate components & use those in startQuestModal & buyQuestModal

* fix market search

* remove & readd pinned gear on revive

* remove listener once destroyed

website/client/components/groups/startQuestModal.vue

@@ -3,43 +3,20 @@
     .left-panel.content
       h3.text-center Quests
       .row
-        .col-4.quest-col(v-for='(value, key, index) in user.items.quests', @click='selectQuest(key)', :class="{selected: key === selectedQuest}", v-if='value > 0')
+        .col-4.quest-col(v-for='(value, key, index) in user.items.quests', @click='selectQuest({key})', :class="{selected: key === selectedQuest}", v-if='value > 0')
           .quest-wrapper
             .quest(:class="'inventory_quest_scroll_' + key")
       .row
         .col-10.offset-1.text-center
-          span.description Can’t find a quest to start? Try checking out the Quest Shop in the Market for new releases!
+          span.description(v-once) {{ $t('noQuestToStart') }}
     div(v-if='questData')
-      .quest-image(:class="'quest_' + questData.key")
-      h2.text-center {{questData.text()}}
-      //- span by: Keith Holliday @TODO: Add author
-      p(v-html="questData.notes()")
-      div.quest-details
-        div(v-if=' questData.collect')
-          Strong {{$t('collect')}}:  
-          span(v-for="(value, key, index) in questData.collect")
-            | {{$t('collectionItems', { number: questData.collect[key].count, items: questData.collect[key].text() })}}
-        div
-          Strong {{$t('difficulty')}}:  
-          span
-            .svg-icon.difficulty-star(v-html="icons.difficultyStarIcon")
+      questDialogContent(:item="questData")
     div.text-center
       button.btn.btn-primary(@click='questInit()') {{$t('inviteToPartyOrQuest')}}
     div.text-center
       p {{$t('inviteInformation')}}
     .side-panel(v-if='questData')
-      h4.text-center {{$t('rewards')}}
-      .box
-        .svg-icon.rewards-icon(v-html="icons.starIcon")
-        strong {{questData.drop.exp}} {{$t('experience')}}
-      .box
-        .svg-icon.rewards-icon(v-html="icons.goldIcon")
-        strong {{questData.drop.gp}} {{$t('gold')}}
-      h4.text-center(v-if='questData.drop.items') {{$t('questOwnerRewards')}}
-      .box(v-for='item in questData.drop.items')
-        .rewards-icon(v-if='item.type === "quest"', :class="'quest_' + item.key")
-        .drop-rewards-icon(v-if='item.type === "gear"', :class="'shop_' + item.key")
-        strong.quest-reward-text {{item.text()}}
+      questDialogDrops(:item="questData")
 </template>
 
 <style lang='scss' scoped>
@@ -54,11 +31,7 @@
     }
   }
 
-  .quest-image {
-    margin: 0 auto;
-    margin-bottom: 1em;
-    margin-top: 1.5em;
-  }
+
 
   .quest-details {
     margin: 0 auto;
@@ -96,7 +69,7 @@
 
     .quest-col .quest-wrapper {
       background: $white;
-      padding: .7em;
+      padding: .2em;
       margin-bottom: 1em;
       border-radius: 3px;
     }
@@ -109,52 +82,18 @@
   }
 
   .side-panel {
-    background: #edecee;
     position: absolute;
-    height: 460px;
-    width: 320px;
-    top: 2.5em;
-    left: 35em;
+    right: -350px;
+    top: 25px;
+    border-radius: 8px;
+    background-color: $gray-600;
+    box-shadow: 0 2px 16px 0 rgba(26, 24, 29, 0.32);
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    width: 364px;
     z-index: -1;
-    padding-top: 1em;
-    border-radius: 4px;
-
-    .drop-rewards-icon {
-      width: 35px;
-      height: 35px;
-      float: left;
-    }
-
-    .rewards-icon {
-      float: left;
-      width: 30px;
-      height: 30px;
-
-      svg {
-        width: 30px;
-        height: 30px;
-      }
-    }
-
-    .quest-reward-text {
-      font-size: 12px;
-    }
-
-    .box {
-      width: 220px;
-      height: 64px;
-      border-radius: 2px;
-      background-color: #ffffff;
-      margin: 0 auto;
-      margin-bottom: 1em;
-      padding: 1em;
-    }
-  }
-
-  .difficulty-star {
-    width: 20px;
-    display: inline-block;
-    vertical-align: bottom;
+    height: 93%;
   }
 </style>
 
@@ -174,10 +113,16 @@ import starIcon from 'assets/svg/star.svg';
 import goldIcon from 'assets/svg/gold.svg';
 import difficultyStarIcon from 'assets/svg/difficulty-star.svg';
 
+
+import questDialogDrops from '../shops/quests/questDialogDrops';
+import questDialogContent from '../shops/quests/questDialogContent';
+
 export default {
   props: ['group'],
   components: {
     bModal,
+    questDialogDrops,
+    questDialogContent,
   },
   data () {
     return {
@@ -198,6 +143,11 @@ export default {
   mounted () {
     let questKeys = Object.keys(this.user.items.quests);
     this.selectedQuest = questKeys[0];
+
+    this.$root.$on('selectQuest', this.selectQuest);
+  },
+  destroyed () {
+    this.$root.$off('selectQuest', this.selectQuest);
   },
   computed: {
     ...mapState({user: 'user.data'}),
@@ -207,8 +157,9 @@ export default {
   },
   methods: {
     selectQuest (quest) {
-      this.selectedQuest = quest;
+      this.selectedQuest = quest.key;
     },
+
     async questInit () {
       Analytics.updateUser({
         partyID: this.group._id,