Update Party / Group Sidebar / Quest states (#12793)

* move groups/sidebar to groupSidebar.vue

* lint files

* extract group/party sidebar to rightSidebar.vue

* wip stories with example data

* update stories - wip sidebar re-styling

* message party / group leader + move items to the menu

* update paddings /place for quest section

* invite to party / guild

* update labels (* Party / Guild )

* guild-background to group-background

* correct menu order + missing a label based on the group type

* no quest - styles / layout applied

* quest owner / not started - styles applied   + extracted questActions from questDetailsModal.vue to a mixin

* no challenge style

* hover with underlines

* quest-pending area layout / margins

* "Collection Quest/Quest Owner Participating" Styling Done

* group sidebar menu with icons / background

* remove most participate button styles

* fix quest-invite panel

* move "Start Quest" + add "Leave Quest"

* Not Participating + Boss + Rage Quests restyling

* party quest changes - invitedToQuest + button styles + no-items style + view details

* fix icons + rage value + colors

* fix duplicate key

* hide items label if 0 items found + hide pending damage if there is none + sidebar section margin + fix percent calculation 0 => 0%

* combine quest abandon / cancel to one call + hide begin if quest has already started + close modal if quest was canceled

* remove unused translate string

* allow leaving an accepted but inactive quest + disable leave when user is quest leader

* update "are you sure" questions - remove "doubleSureAbort" - add "sureLeaveInactive"

* sidebar margins + menu icon color

* refactored css rules

* improve some styles

* fix button spacing

* fix dropmenu with icon hover

* hide leave quest for leaders + fix quest buttons spacing

* add pending items label

* remove "X items found" label

* first round of fixes

* last v-once

* Update Quest Dialogs (#13112)

* new quest rewards panel + extract questPopover and itemWithLabel

* WIP: questInfo still not applying the row-height..

* split up start-quest-modal into select and detail modal - also rename the current quest-details to be the group-quest-details modal

* remove start-quest-modal from modal-scss

* update package-lock

* WIP before using the quest sidebar branch as a base

* move quest detail actions to the "new" details dialog

* quest details layout for owner / participant

* fix quest rewards - open details modal from sidebar

* apply quest-details dialog styles to the buyQuestModal one

* fix quest reward icons / popover / texts

* WIP back to quest selection

* fix lint

* merge selectQuestModal.vue with questDetailModal.vue + UI for the select quest

* fix margins / layout / labels

* fix quest detail + wip invitationListModal.vue / participantListModal.vue

* fix questmodal user label centered

* fix centered reward items + grouping items and adding a count-badge

* sort quests by AZ or quantity

* invitations modal

* remove console.info

* complete participantListModal.vue + extracted getClassName

* missed a file for getClassName extraction

* fix invitations

* select the actual quest on details

* fix margins on invite to party / start quest buttons

* replace buyQuestModal close button and title

* fix recursion due to the same name

* missing import

* sort quantity by highest first

* fix "Can't find a Quest to start" styles

* fix "your balance" padding

* fix quest collections / drop items

* fix member details in participants list

* fix quest info

* remove nullable because the build doesn't like it (on this file..)

* add questCompleted to the stories + fix getDropName

* replace quest-rewards in questCompleted.vue

* fix questCompleted.vue style

* delete obsolete components

* add missing spritesheets to storebook

* requested pr changes

* refactored fetchMember

* revert optional chaining

* fix merge conflicts

* fix rightSidebar hover colors - $scss var to css var

* overflow auto instead of scroll

* prevent wrapping of quest collections

* rollback to multi line quest items

* use min-width for the quest popover

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

@@ -219,39 +219,7 @@
                 @click="selectItem(item)"
               >
                 <span slot="popoverContent">
-                  <div class="questPopover">
-                    <div></div>
-                    <h4
-                      v-if="item.locked"
-                      class="popover-content-title"
-                    >{{ `${$t('lockedItem')}` }}</h4>
-                    <h4
-                      v-else
-                      class="popover-content-title"
-                    >{{ item.text }}</h4>
-                    <div
-                      v-if="item.locked && item.key === 'lostMasterclasser1'"
-                      class="popover-content-text"
-                    >{{ `${$t('questUnlockLostMasterclasser')}` }}</div>
-                    <div
-                      v-if="item.locked && item.unlockCondition
-                        && item.unlockCondition.incentiveThreshold"
-                      class="popover-content-text"
-                    >{{ `${$t('loginIncentiveQuest', {
-                      count: item.unlockCondition.incentiveThreshold})}` }}</div>
-                    <div
-                      v-if="item.locked && item.previous && isBuyingDependentOnPrevious(item)"
-                      class="popover-content-text"
-                    >{{ `${$t('unlockByQuesting', {title: item.previous})}` }}</div>
-                    <div
-                      v-if="item.lvl > user.stats.lvl"
-                      class="popover-content-text"
-                    >{{ `${$t('mustLvlQuest', {level: item.lvl})}` }}</div>
-                    <questInfo
-                      v-if="!item.locked"
-                      :quest="item"
-                    />
-                  </div>
+                  <quest-popover :item="item" />
                 </span>
                 <template
                   slot="itemBadge"
@@ -456,10 +424,12 @@ import isPinned from '@/../../common/script/libs/isPinned';
 import FilterSidebar from '@/components/ui/filterSidebar';
 import FilterGroup from '@/components/ui/filterGroup';
 import SelectTranslatedArray from '@/components/tasks/modal-controls/selectTranslatedArray';
+import QuestPopover from './questPopover';
 
 
 export default {
   components: {
+    QuestPopover,
     SelectTranslatedArray,
     FilterGroup,
     FilterSidebar,
@@ -597,11 +567,6 @@ export default {
 
       this.$root.$emit('bv::show::modal', 'buy-quest-modal');
     },
-    isBuyingDependentOnPrevious (item) {
-      const questsNotDependentToPrevious = ['moon2', 'moon3'];
-      if (item.key in questsNotDependentToPrevious) return false;
-      return true;
-    },
   },
 };
 </script>