Onboarding guide and initial achievements refactoring (#11536)

* add achievements to user

* add placeholder strings

* add to achievements to common script

* add onboarding achievements category

* add notifications

* more notifications

* award achievements

* wip notification panel

* add achievements icons and copy

* do not count onboarding tasks for the created task achievement

* add notes

* sprites, fixes and completion status and reward

* add onboarding panel

* add toggle

* fix toggle size

* fix tests

* fix typo

* add notification

* start adding modal

* fix remove button positionin, timeout, progress bar

* modal + fixes

* disable broken social links from level up modal

* change toggle icon color on hover

* add border bottom to onboarding guide panel

* add collapse animation

* expanded onboarding on first open

* onboarding: flip toggle colors

* onboarding: show progress bar all the time

* onboarding: fix panel closing on click

* onboarding modal: add close icon and fix padding

* wip: add migration for existing users

* fix titles in guide

* fix achievements copy

* do not award completed task achievement when direction is down

* start implementing new achievements

* start migrating client

* remove social links from achievements modals

* prevent skipping tutorial + fix achievement notification

* sync fixes

* start redesign achievement modal

* misc fixes to achievements, polish generic achievement modal and hatched pet modal

* add special badge for onboarding

* fix badge condition

* modals fixes

* hatched pet modal: add close icon

* fix badge typo

* fix justin button

* new scrolling behavior for dropdowns

* fix strings capitalization

* add common tests

* add api unit tests

* add date check

* achievements modal polishing

* typos

* add toggle for achievements categories

* typo

* fix test

* fix edit avatar modal cannot be closed

* finish migration and correct launch date

* fix migration

* migration fixes

* fix tests

website/client/src/components/header/notificationsDropdown.vue

@@ -11,10 +11,11 @@
         :aria-label="$t('notifications')"
       >
         <message-count
-          v-if="notificationsCount > 0"
+          v-if="notificationsCount > 0 || hasSpecialBadge"
           :count="notificationsCount"
           :top="true"
-          :gray="!hasUnseenNotifications"
+          :gray="!hasUnseenNotifications && !hasSpecialBadge"
+          :badge="hasSpecialBadge ? icons.starBadge : null"
         />
         <div
           class="top-menu-icon svg-icon notifications"
@@ -22,7 +23,10 @@
         ></div>
       </div>
     </div>
-    <div slot="dropdown-content">
+    <div
+      v-if="openStatus === 1"
+      slot="dropdown-content"
+    >
       <div
         class="dropdown-item dropdown-separated
          d-flex justify-content-between dropdown-inactive align-items-center"
@@ -41,6 +45,10 @@
         >{{ $t('dismissAll') }}</a>
       </div>
       <world-boss />
+      <onboarding-guide
+        v-if="showOnboardingGuide"
+        :never-seen="hasSpecialBadge"
+      />
       <component
         :is="notification.type"
         v-for="notification in notifications"
@@ -49,7 +57,7 @@
         :can-remove="!isActionable(notification)"
       />
       <div
-        v-if="notificationsCount === 0"
+        v-if="notificationsCount === 0 && !showOnboardingGuide"
         class="dropdown-item dropdown-separated
          d-flex justify-content-center dropdown-inactive no-notifications flex-column"
       >
@@ -106,10 +114,16 @@
 <script>
 import { mapState, mapActions } from '@/libs/store';
 import * as quests from '@/../../common/script/content/quests';
+import {
+  hasCompletedOnboarding,
+  hasActiveOnboarding,
+} from '@/../../common/script/libs/onboarding';
 import notificationsIcon from '@/assets/svg/notifications.svg';
 import MenuDropdown from '../ui/customMenuDropdown';
 import MessageCount from './messageCount';
+import { CONSTANTS, getLocalSetting, setLocalSetting } from '@/libs/userlocalManager';
 import successImage from '@/assets/svg/success.svg';
+import starBadge from '@/assets/svg/star-badge.svg';
 
 // Notifications
 import NEW_STUFF from './notifications/newStuff';
@@ -132,6 +146,8 @@ import VERIFY_USERNAME from './notifications/verifyUsername';
 import ACHIEVEMENT_JUST_ADD_WATER from './notifications/justAddWater';
 import ACHIEVEMENT_LOST_MASTERCLASSER from './notifications/lostMasterclasser';
 import ACHIEVEMENT_MIND_OVER_MATTER from './notifications/mindOverMatter';
+import ONBOARDING_COMPLETE from './notifications/onboardingComplete';
+import OnboardingGuide from './onboardingGuide';
 
 export default {
   components: {
@@ -158,13 +174,17 @@ export default {
     ACHIEVEMENT_MIND_OVER_MATTER,
     WorldBoss: WORLD_BOSS,
     VERIFY_USERNAME,
+    OnboardingGuide,
+    ONBOARDING_COMPLETE,
   },
   data () {
     return {
       icons: Object.freeze({
         notifications: notificationsIcon,
         success: successImage,
+        starBadge,
       }),
+      hasSpecialBadge: false,
       quests,
       openStatus: undefined,
       actionableNotifications: [
@@ -177,11 +197,11 @@ export default {
       handledNotifications: [
         'NEW_STUFF', 'GROUP_TASK_NEEDS_WORK',
         'GUILD_INVITATION', 'PARTY_INVITATION', 'CHALLENGE_INVITATION',
-        'QUEST_INVITATION', 'GROUP_TASK_ASSIGNED', 'GROUP_TASK_APPROVAL', 'GROUP_TASK_APPROVED', 'GROUP_TASK_CLAIMED',
-        'NEW_MYSTERY_ITEMS', 'CARD_RECEIVED',
+        'QUEST_INVITATION', 'GROUP_TASK_ASSIGNED', 'GROUP_TASK_APPROVAL', 'GROUP_TASK_APPROVED',
+        'GROUP_TASK_CLAIMED', 'NEW_MYSTERY_ITEMS', 'CARD_RECEIVED',
         'NEW_INBOX_MESSAGE', 'NEW_CHAT_MESSAGE', 'UNALLOCATED_STATS_POINTS',
         'ACHIEVEMENT_JUST_ADD_WATER', 'ACHIEVEMENT_LOST_MASTERCLASSER', 'ACHIEVEMENT_MIND_OVER_MATTER',
-        'VERIFY_USERNAME',
+        'VERIFY_USERNAME', 'ONBOARDING_COMPLETE',
       ],
     };
   },
@@ -275,6 +295,20 @@ export default {
     hasClass () {
       return this.$store.getters['members:hasClass'](this.user);
     },
+    showOnboardingGuide () {
+      return hasActiveOnboarding(this.user) && !hasCompletedOnboarding(this.user);
+    },
+  },
+  mounted () {
+    const onboardingPanelState = getLocalSetting(CONSTANTS.keyConstants.ONBOARDING_PANEL_STATE);
+    if (
+      onboardingPanelState !== CONSTANTS.onboardingPanelValues.PANEL_OPENED
+      && this.showOnboardingGuide
+    ) {
+      // The first time the onboarding panel is opened a special
+      // badge for notifications should be used
+      this.hasSpecialBadge = true;
+    }
   },
   methods: {
     ...mapActions({
@@ -286,6 +320,18 @@ export default {
 
       // Mark notifications as seen when the menu is opened
       if (openStatus) this.markAllAsSeen();
+
+      // Reset the special notification badge as soon as it's opened
+      if (this.hasSpecialBadge) {
+        setLocalSetting(
+          CONSTANTS.keyConstants.ONBOARDING_PANEL_STATE,
+          CONSTANTS.onboardingPanelValues.PANEL_OPENED,
+        );
+
+        setTimeout(() => {
+          this.hasSpecialBadge = false;
+        }, 100);
+      }
     },
     markAllAsSeen () {
       const idsToSee = this.notifications.map(notification => {
@@ -318,5 +364,6 @@ export default {
       return this.actionableNotifications.indexOf(notification.type) !== -1;
     },
   },
+
 };
 </script>