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/creatorIntro.vue

@@ -6,7 +6,15 @@
     :hide-header="true"
     :hide-footer="true"
     :modal-class="{'page-2':modalPage > 1 && !editing}"
+    :no-close-on-esc="!editing"
+    :no-close-on-backdrop="!editing"
   >
+    <span
+      v-if="editing"
+      class="close-icon svg-icon inline icon-10"
+      @click="close()"
+      v-html="icons.close"
+    ></span>
     <div
       v-if="modalPage === 1 && !editing"
       class="section row welcome-section"
@@ -1099,6 +1107,7 @@ import gold from '@/assets/svg/gold.svg';
 import pin from '@/assets/svg/pin.svg';
 import arrowRight from '@/assets/svg/arrow_right.svg';
 import arrowLeft from '@/assets/svg/arrow_left.svg';
+import svgClose from '@/assets/svg/close.svg';
 import isPinned from '@/../../common/script/libs/isPinned';
 import { avatarEditorUtilies } from '../mixins/avatarEditUtilities';
 
@@ -1138,6 +1147,7 @@ export default {
         gold,
         arrowRight,
         arrowLeft,
+        close: svgClose,
       }),
       modalPage: 1,
       activeTopPage: 'body',
@@ -1158,8 +1168,6 @@ export default {
   },
   computed: {
     ...mapState({ user: 'user.data' }),
-
-
     editing () {
       return this.$store.state.avatarEditorOptions.editingUser;
     },
@@ -1228,6 +1236,9 @@ export default {
     this.$root.$on('buyModal::boughtItem', this.backgroundPurchased);
   },
   methods: {
+    close () {
+      this.$root.$emit('bv::hide::modal', 'avatar-modal');
+    },
     purchase (type, key) {
       this.$store.dispatch('shops:purchase', {
         type,
@@ -1278,6 +1289,9 @@ export default {
       if (this.$route.path !== '/') {
         this.$router.push('/');
       }
+
+      // NOTE: it's important this flag is set AFTER the onboarding default tasks
+      // have been created or it'll break the onboarding guide achievement for creating a task
       this.$store.dispatch('user:set', {
         'flags.welcomed': true,
       });