Separated out modal components (#10545)

* Seprated out modal components

* Removed extra css

* Fixed import case

website/client/components/inventory/stable/hatchingModal.vue

@@ -0,0 +1,84 @@
+<template lang="pug">
+b-modal#hatching-modal(@change="resetHatchablePet($event)")
+  div.content(v-if="hatchablePet")
+    div.potionEggGroup
+      div.potionEggBackground
+        div(:class="'Pet_HatchingPotion_'+hatchablePet.potionKey")
+      div.potionEggBackground
+        div(:class="'Pet_Egg_'+hatchablePet.eggKey")
+    h4.title {{ hatchablePet.name }}
+    div.text(v-html="$t('hatchDialogText', { potionName: hatchablePet.potionName, eggName: hatchablePet.eggName, petName: hatchablePet.name })")
+  span.svg-icon.icon-10(v-html="icons.close", slot="modal-header", @click="closeHatchPetDialog()")
+  div(slot="modal-footer")
+    button.btn.btn-primary(@click="hatchPet(hatchablePet)") {{ $t('hatch') }}
+    button.btn.btn-secondary.btn-flat(@click="closeHatchPetDialog()") {{ $t('cancel') }}
+</template>
+
+<style lang="scss">
+  @import '~client/assets/scss/modal.scss';
+
+  #hatching-modal {
+    @include centeredModal();
+
+    .modal-dialog {
+      width: 310px;
+    }
+
+    .content {
+      text-align: center;
+      margin: 9px;
+    }
+
+    .title {
+      margin-top: 24px;
+      font-size: 20px;
+      font-weight: bold;
+      line-height: 1.2;
+      text-align: center;
+      color: #4e4a57;
+    }
+
+    .text {
+      height: 60px;
+      font-size: 14px;
+      line-height: 1.43;
+      text-align: center;
+      color: #686274;
+    }
+
+    span.svg-icon.icon-10 {
+      position: absolute;
+      right: 10px;
+      top: 10px;
+    }
+
+    .modal-footer {
+      justify-content: center;
+    }
+  }
+</style>
+
+<script>
+import svgClose from 'assets/svg/close.svg';
+
+import petMixin from 'client/mixins/petMixin';
+
+export default {
+  props: ['hatchablePet'],
+  mixins: [petMixin],
+  data () {
+    return {
+      icons: Object.freeze({
+        close: svgClose,
+      }),
+    };
+  },
+  methods: {
+    resetHatchablePet ($event) {
+      if (!$event) {
+        this.hatchablePet = null;
+      }
+    },
+  },
+};
+</script>

website/client/components/inventory/stable/index.vue

@@ -1,245 +1,205 @@
 <template lang="pug">
-  // @TODO: breakdown to componentes and use some SOLID
+.row.stable(v-mousePosition="30", @mouseMoved="mouseMoved($event)")
-  .row.stable(v-mousePosition="30", @mouseMoved="mouseMoved($event)")
+  .standard-sidebar.d-none.d-sm-block
-    .standard-sidebar.d-none.d-sm-block
+    div
-      div
+      #npmMattStable.npc_matt
-        #npmMattStable.npc_matt
+      b-popover(
-        b-popover(
+        triggers="hover",
-          triggers="hover",
+        placement="right",
-          placement="right",
+        target="npmMattStable"
-          target="npmMattStable"
+      )
-        )
+        h4.popover-content-title(v-once) {{ $t('mattBoch') }}
-          h4.popover-content-title(v-once) {{ $t('mattBoch') }}
+        .popover-content-text(v-once) {{ $t('mattBochText1') }}
-          .popover-content-text(v-once) {{ $t('mattBochText1') }}
+    .form-group
-
+      input.form-control.input-search(type="text", v-model="searchText", :placeholder="$t('search')")
+    .form
+      h2(v-once) {{ $t('filter') }}
+      h3(v-once) {{ $t('pets') }}
       .form-group
-        input.form-control.input-search(type="text", v-model="searchText", :placeholder="$t('search')")
+        .form-check(
-
+          v-for="petGroup in petGroups",
-      .form
+          :key="petGroup.key"
-        h2(v-once) {{ $t('filter') }}
-        h3(v-once) {{ $t('pets') }}
-        .form-group
-          .form-check(
-            v-for="petGroup in petGroups",
-            :key="petGroup.key"
-          )
-            .custom-control.custom-checkbox
-              input.custom-control-input(
-                type="checkbox",
-                v-model="viewOptions[petGroup.key].selected",
-                :disabled="viewOptions[petGroup.key].animalCount == 0",
-                :id="petGroup.key",
-              )
-              label.custom-control-label(v-once, :for="petGroup.key") {{ petGroup.label }}
-        h3(v-once) {{ $t('mounts') }}
-        .form-group
-          .form-check(
-            v-for="mountGroup in mountGroups",
-            :key="mountGroup.key"
-          )
-            .custom-control.custom-checkbox
-              input.custom-control-input(
-                type="checkbox",
-                v-model="viewOptions[mountGroup.key].selected",
-                :disabled="viewOptions[mountGroup.key].animalCount == 0",
-                :id="mountGroup.key",
-              )
-              label.custom-control-label(v-once, :for="mountGroup.key") {{ mountGroup.label }}
-
-        div.form-group.clearfix
-          h3.float-left {{ $t('hideMissing') }}
-          toggle-switch.float-right(
-            :checked="hideMissing",
-            @change="updateHideMissing"
-          )
-    .standard-page
-      .clearfix
-        h1.float-left.mb-4.page-header(v-once) {{ $t('stable') }}
-
-        div.float-right
-          span.dropdown-label {{ $t('sortBy') }}
-          b-dropdown(:text="$t(selectedSortBy)", right=true)
-            b-dropdown-item(
-              v-for="sort in sortByItems",
-              @click="selectedSortBy = sort",
-              :active="selectedSortBy === sort",
-              :key="sort"
-            ) {{ $t(sort) }}
-
-      h2.mb-3
-        | {{ $t('pets') }}
-        |
-        span.badge.badge-pill.badge-default {{countOwnedAnimals(petGroups[0], 'pet')}}
-
-      div(
-        v-for="(petGroup, index) in petGroups",
-        v-if="viewOptions[petGroup.key].selected",
-        :key="petGroup.key"
-      )
-        h4(v-if="viewOptions[petGroup.key].animalCount !== 0") {{ petGroup.label }}
-
-        .pet-row.d-flex(
-          v-for="(group, key, index) in pets(petGroup, hideMissing, selectedSortBy, searchTextThrottled)",
-          v-if='index === 0 || $_openedItemRows_isToggled(petGroup.key)')
-          .pet-group(
-            v-for='item in group'
-            v-drag.drop.food="item.key",
-            @itemDragOver="onDragOver($event, item)",
-            @itemDropped="onDrop($event, item)",
-            @itemDragLeave="onDragLeave()",
-            :class="{'last': item.isLastInRow}"
-          )
-            petItem(
-              :item="item",
-              :itemContentClass="getPetItemClass(item)",
-              :popoverPosition="'top'",
-              :progress="item.progress",
-              :emptyItem="!item.isOwned()",
-              :showPopover="currentDraggingFood == null",
-              :highlightBorder="highlightPet == item.key",
-              @click="petClicked(item)"
-            )
-              span(slot="popoverContent")
-                div.hatchablePopover(v-if="item.isHatchable()")
-                  h4.popover-content-title {{ item.name }}
-                  div.popover-content-text(v-html="$t('haveHatchablePet', { potion: item.potionName, egg: item.eggName })")
-                  div.potionEggGroup
-                    div.potionEggBackground
-                      div(:class="'Pet_HatchingPotion_'+item.potionKey")
-                    div.potionEggBackground
-                      div(:class="'Pet_Egg_'+item.eggKey")
-                div(v-else)
-                  h4.popover-content-title {{ item.name }}
-              template(slot="itemBadge", slot-scope="context")
-                starBadge(:selected="item.key === currentPet", :show="item.isOwned()", @click="selectPet(item)")
-
-        .btn.btn-flat.btn-show-more(@click="setShowMore(petGroup.key)", v-if='petGroup.key !== "specialPets"')
-          | {{ $_openedItemRows_isToggled(petGroup.key) ? $t('showLess') : $t('showMore') }}
-
-      h2
-        | {{ $t('mounts') }}
-        |
-        span.badge.badge-pill.badge-default {{countOwnedAnimals(mountGroups[0], 'mount')}}
-
-      div(
-        v-for="mountGroup in mountGroups",
-        v-if="viewOptions[mountGroup.key].selected",
-        :key="mountGroup.key"
-      )
-        h4(v-if="viewOptions[mountGroup.key].animalCount != 0") {{ mountGroup.label }}
-
-        .pet-row.d-flex(v-for="(group, key, index) in mounts(mountGroup, hideMissing, selectedSortBy, searchTextThrottled)"
-          v-if='index === 0 || $_openedItemRows_isToggled(mountGroup.key)')
-          .pet-group(v-for='item in group')
-            mountItem(
-              :item="item",
-              :itemContentClass="item.isOwned() ? ('Mount_Icon_' + item.key) : 'PixelPaw GreyedOut'",
-              :key="item.key",
-              :popoverPosition="'top'",
-              :emptyItem="!item.isOwned()",
-              :showPopover="true",
-              @click="selectMount(item)"
-            )
-              span(slot="popoverContent")
-                h4.popover-content-title {{ item.name }}
-              template(slot="itemBadge", slot-scope="context")
-                starBadge(
-                  :selected="item.key === currentMount",
-                  :show="item.isOwned()",
-                  @click="selectMount(item)",
-                )
-
-        .btn.btn-flat.btn-show-more(@click="setShowMore(mountGroup.key)", v-if='mountGroup.key !== "specialMounts"')
-          | {{ $_openedItemRows_isToggled(mountGroup.key) ? $t('showLess') : $t('showMore') }}
-
-      drawer(
-        :title="$t('quickInventory')",
-        :errorMessage="(!hasDrawerTabItems(selectedDrawerTab)) ? ((selectedDrawerTab === 0) ?  $t('noFoodAvailable') : $t('noSaddlesAvailable')) : null"
-      )
-        div(slot="drawer-header")
-          .drawer-tab-container
-            .drawer-tab.text-right
-              a.drawer-tab-text(
-                @click="selectedDrawerTab = 0",
-                :class="{'drawer-tab-text-active': selectedDrawerTab === 0}",
-              ) {{ drawerTabs[0].label }}
-            .clearfix
-              .drawer-tab.float-left
-                a.drawer-tab-text(
-                  @click="selectedDrawerTab = 1",
-                  :class="{ 'drawer-tab-text-active': selectedDrawerTab === 1 }",
-                )  {{ drawerTabs[1].label }}
-
-              #petLikeToEatStable.drawer-help-text(v-once)
-                | {{ $t('petLikeToEat') + ' ' }}
-                span.svg-icon.inline.icon-16(v-html="icons.information")
-              b-popover(
-                target="petLikeToEatStable"
-                placement="top"
-              )
-                .popover-content-text(v-html="$t('petLikeToEatText')", v-once)
-        drawer-slider(
-          :items="drawerTabs[selectedDrawerTab].items",
-          :scrollButtonsVisible="hasDrawerTabItems(selectedDrawerTab)",
-          slot="drawer-slider",
-          :itemWidth=94,
-          :itemMargin=24,
-          :itemType="selectedDrawerTab"
         )
-          template(slot="item", slot-scope="context")
+          .custom-control.custom-checkbox
-            foodItem(
+            input.custom-control-input(
-              :item="context.item",
+              type="checkbox",
-              :itemCount="userItems.food[context.item.key]",
+              v-model="viewOptions[petGroup.key].selected",
-              :active="currentDraggingFood == context.item",
+              :disabled="viewOptions[petGroup.key].animalCount == 0",
-              @itemDragEnd="onDragEnd()",
+              :id="petGroup.key",
-              @itemDragStart="onDragStart($event, context.item)",
-              @itemClick="onFoodClicked($event, context.item)"
             )
-    b-modal#welcome-modal(
+            label.custom-control-label(v-once, :for="petGroup.key") {{ petGroup.label }}
-      :ok-only="true",
+      h3(v-once) {{ $t('mounts') }}
-      :ok-title="$t('gotIt')",
+      .form-group
-      :visible="!hideDialog",
+        .form-check(
-      :hide-header="true",
+          v-for="mountGroup in mountGroups",
-      @hide="hideFlag()"
+          :key="mountGroup.key"
-    )
+        )
-      div.content
+          .custom-control.custom-checkbox
-        div.npc_matt
+            input.custom-control-input(
-        h1.page-header(v-once) {{ $t('welcomeStable') }}
+              type="checkbox",
-        div.content-text(v-once) {{ $t('welcomeStableText') }}
+              v-model="viewOptions[mountGroup.key].selected",
-    b-modal#hatching-modal(
+              :disabled="viewOptions[mountGroup.key].animalCount == 0",
-      @change="resetHatchablePet($event)"
+              :id="mountGroup.key",
-    )
+            )
-      div.content(v-if="hatchablePet")
+            label.custom-control-label(v-once, :for="mountGroup.key") {{ mountGroup.label }}
-        div.potionEggGroup
-          div.potionEggBackground
-            div(:class="'Pet_HatchingPotion_'+hatchablePet.potionKey")
-          div.potionEggBackground
-            div(:class="'Pet_Egg_'+hatchablePet.eggKey")
-        h4.title {{ hatchablePet.name }}
-        div.text(v-html="$t('hatchDialogText', { potionName: hatchablePet.potionName, eggName: hatchablePet.eggName, petName: hatchablePet.name })")
 
-      span.svg-icon.icon-10(v-html="icons.close", slot="modal-header", @click="closeHatchPetDialog()")
+      div.form-group.clearfix
+        h3.float-left {{ $t('hideMissing') }}
+        toggle-switch.float-right(
+          :checked="hideMissing",
+          @change="updateHideMissing"
+        )
+  .standard-page
+    .clearfix
+      h1.float-left.mb-4.page-header(v-once) {{ $t('stable') }}
 
-      div(slot="modal-footer")
+      div.float-right
-        button.btn.btn-primary(@click="hatchPet(hatchablePet)") {{ $t('hatch') }}
+        span.dropdown-label {{ $t('sortBy') }}
-        button.btn.btn-secondary.btn-flat(@click="closeHatchPetDialog()") {{ $t('cancel') }}
+        b-dropdown(:text="$t(selectedSortBy)", right=true)
+          b-dropdown-item(
+            v-for="sort in sortByItems",
+            @click="selectedSortBy = sort",
+            :active="selectedSortBy === sort",
+            :key="sort"
+          ) {{ $t(sort) }}
 
-    hatchedPetDialog(
+    h2.mb-3
-      :hideText="true",
+      | {{ $t('pets') }}
-    )
+      |
+      span.badge.badge-pill.badge-default {{countOwnedAnimals(petGroups[0], 'pet')}}
 
-    div.foodInfo(ref="dragginFoodInfo")
+    div(v-for="(petGroup, index) in petGroups",
-      div(v-if="currentDraggingFood != null")
+      v-if="viewOptions[petGroup.key].selected",
-        div.food-icon(:class="'Pet_Food_'+currentDraggingFood.key")
+      :key="petGroup.key")
-        div.popover
+      h4(v-if="viewOptions[petGroup.key].animalCount !== 0") {{ petGroup.label }}
-          div.popover-content {{ $t('dragThisFood', {foodName: currentDraggingFood.text() }) }}
 
-    div.foodInfo.mouse(ref="clickFoodInfo", v-if="foodClickMode")
+      .pet-row.d-flex(
-      div(v-if="currentDraggingFood != null")
+        v-for="(group, key, index) in pets(petGroup, hideMissing, selectedSortBy, searchTextThrottled)",
-        div.food-icon(:class="'Pet_Food_'+currentDraggingFood.key")
+        v-if='index === 0 || $_openedItemRows_isToggled(petGroup.key)')
-        div.popover
+        .pet-group(
-          div.popover-content {{ $t('clickOnPetToFeed', {foodName: currentDraggingFood.text() }) }}
+          v-for='item in group'
-    mount-raised-modal
+          v-drag.drop.food="item.key",
+          @itemDragOver="onDragOver($event, item)",
+          @itemDropped="onDrop($event, item)",
+          @itemDragLeave="onDragLeave()",
+          :class="{'last': item.isLastInRow}"
+        )
+          petItem(
+            :item="item",
+            :itemContentClass="getPetItemClass(item)",
+            :popoverPosition="'top'",
+            :progress="item.progress",
+            :emptyItem="!item.isOwned()",
+            :showPopover="currentDraggingFood == null",
+            :highlightBorder="highlightPet == item.key",
+            @click="petClicked(item)"
+          )
+            span(slot="popoverContent")
+              div.hatchablePopover(v-if="item.isHatchable()")
+                h4.popover-content-title {{ item.name }}
+                div.popover-content-text(v-html="$t('haveHatchablePet', { potion: item.potionName, egg: item.eggName })")
+                div.potionEggGroup
+                  div.potionEggBackground
+                    div(:class="'Pet_HatchingPotion_'+item.potionKey")
+                  div.potionEggBackground
+                    div(:class="'Pet_Egg_'+item.eggKey")
+              div(v-else)
+                h4.popover-content-title {{ item.name }}
+            template(slot="itemBadge", slot-scope="context")
+              starBadge(:selected="item.key === currentPet", :show="item.isOwned()", @click="selectPet(item)")
+
+      .btn.btn-flat.btn-show-more(@click="setShowMore(petGroup.key)", v-if='petGroup.key !== "specialPets"')
+        | {{ $_openedItemRows_isToggled(petGroup.key) ? $t('showLess') : $t('showMore') }}
+
+    h2
+      | {{ $t('mounts') }}
+      |
+      span.badge.badge-pill.badge-default {{countOwnedAnimals(mountGroups[0], 'mount')}}
+
+    div(v-for="mountGroup in mountGroups",
+      v-if="viewOptions[mountGroup.key].selected",
+      :key="mountGroup.key")
+      h4(v-if="viewOptions[mountGroup.key].animalCount != 0") {{ mountGroup.label }}
+
+      .pet-row.d-flex(v-for="(group, key, index) in mounts(mountGroup, hideMissing, selectedSortBy, searchTextThrottled)"
+        v-if='index === 0 || $_openedItemRows_isToggled(mountGroup.key)')
+        .pet-group(v-for='item in group')
+          mountItem(
+            :item="item",
+            :itemContentClass="item.isOwned() ? ('Mount_Icon_' + item.key) : 'PixelPaw GreyedOut'",
+            :key="item.key",
+            :popoverPosition="'top'",
+            :emptyItem="!item.isOwned()",
+            :showPopover="true",
+            @click="selectMount(item)"
+          )
+            span(slot="popoverContent")
+              h4.popover-content-title {{ item.name }}
+            template(slot="itemBadge", slot-scope="context")
+              starBadge(
+                :selected="item.key === currentMount",
+                :show="item.isOwned()",
+                @click="selectMount(item)",
+              )
+
+      .btn.btn-flat.btn-show-more(@click="setShowMore(mountGroup.key)", v-if='mountGroup.key !== "specialMounts"')
+        | {{ $_openedItemRows_isToggled(mountGroup.key) ? $t('showLess') : $t('showMore') }}
+
+    drawer(:title="$t('quickInventory')",
+      :errorMessage="(!hasDrawerTabItems(selectedDrawerTab)) ? ((selectedDrawerTab === 0) ?  $t('noFoodAvailable') : $t('noSaddlesAvailable')) : null")
+      div(slot="drawer-header")
+        .drawer-tab-container
+          .drawer-tab.text-right
+            a.drawer-tab-text(
+              @click="selectedDrawerTab = 0",
+              :class="{'drawer-tab-text-active': selectedDrawerTab === 0}",
+            ) {{ drawerTabs[0].label }}
+          .clearfix
+            .drawer-tab.float-left
+              a.drawer-tab-text(
+                @click="selectedDrawerTab = 1",
+                :class="{ 'drawer-tab-text-active': selectedDrawerTab === 1 }",
+              )  {{ drawerTabs[1].label }}
+
+            #petLikeToEatStable.drawer-help-text(v-once)
+              | {{ $t('petLikeToEat') + ' ' }}
+              span.svg-icon.inline.icon-16(v-html="icons.information")
+            b-popover(
+              target="petLikeToEatStable"
+              placement="top"
+            )
+              .popover-content-text(v-html="$t('petLikeToEatText')", v-once)
+      drawer-slider(
+        :items="drawerTabs[selectedDrawerTab].items",
+        :scrollButtonsVisible="hasDrawerTabItems(selectedDrawerTab)",
+        slot="drawer-slider",
+        :itemWidth=94,
+        :itemMargin=24,
+        :itemType="selectedDrawerTab"
+      )
+        template(slot="item", slot-scope="context")
+          foodItem(
+            :item="context.item",
+            :itemCount="userItems.food[context.item.key]",
+            :active="currentDraggingFood == context.item",
+            @itemDragEnd="onDragEnd()",
+            @itemDragStart="onDragStart($event, context.item)",
+            @itemClick="onFoodClicked($event, context.item)"
+          )
+  hatchedPetDialog(:hideText="true")
+  div.foodInfo(ref="dragginFoodInfo")
+    div(v-if="currentDraggingFood != null")
+      div.food-icon(:class="'Pet_Food_'+currentDraggingFood.key")
+      div.popover
+        div.popover-content {{ $t('dragThisFood', {foodName: currentDraggingFood.text() }) }}
+  div.foodInfo.mouse(ref="clickFoodInfo", v-if="foodClickMode")
+    div(v-if="currentDraggingFood != null")
+      div.food-icon(:class="'Pet_Food_'+currentDraggingFood.key")
+      div.popover
+        div.popover-content {{ $t('clickOnPetToFeed', {foodName: currentDraggingFood.text() }) }}
+  mount-raised-modal
+  welcome-modal
+  hatching-modal(:hatchablePet.sync='hatchablePet')
 </template>
 
 <style lang='scss' scoped>
@@ -328,79 +288,6 @@
     height: 114px;
   }
 
-  #welcome-modal {
-    @include centeredModal();
-
-    .npc_matt {
-      margin: 0 auto 21px auto;
-    }
-
-    .content {
-      text-align: center;
-
-      // the modal already has 15px padding
-      margin-left: 33px;
-      margin-right: 33px;
-      margin-top: 25px;
-    }
-
-    .content-text {
-      font-family: 'Roboto', sans-serif;
-      font-size: 14px;
-      font-weight: normal;
-      line-height: 1.43;
-
-      width: 400px;
-    }
-
-    .modal-footer {
-      justify-content: center;
-    }
-  }
-
-  #hatching-modal {
-    @include centeredModal();
-
-    .modal-dialog {
-      width: 310px;
-    }
-
-    .content {
-      text-align: center;
-      margin: 9px;
-    }
-
-    .title {
-      margin-top: 24px;
-      font-family: Roboto;
-      font-size: 20px;
-      font-weight: bold;
-      font-stretch: condensed;
-      line-height: 1.2;
-      text-align: center;
-      color: #4e4a57;
-    }
-
-    .text {
-      height: 60px;
-      font-family: Roboto;
-      font-size: 14px;
-      line-height: 1.43;
-      text-align: center;
-      color: #686274;
-    }
-
-    span.svg-icon.icon-10 {
-      position: absolute;
-      right: 10px;
-      top: 10px;
-    }
-
-    .modal-footer {
-      justify-content: center;
-    }
-  }
-
   .modal-backdrop.fade.show {
     background-color: $purple-50;
     opacity: 0.9;
@@ -476,7 +363,7 @@
 </style>
 
 <script>
-  import {mapState} from 'client/libs/store';
+  import { mapState } from 'client/libs/store';
 
   import _each from 'lodash/each';
   import _sortBy from 'lodash/sortBy';
@@ -492,6 +379,8 @@
   import FoodItem from './foodItem';
   import HatchedPetDialog from './hatchedPetDialog';
   import MountRaisedModal from './mountRaisedModal';
+  import WelcomeModal from './welcomeModal';
+  import HatchingModal from './hatchingModal';
   import Drawer from 'client/components/ui/drawer';
   import toggleSwitch from 'client/components/ui/toggleSwitch';
   import StarBadge from 'client/components/ui/starBadge';
@@ -505,10 +394,10 @@
   import createAnimal from 'client/libs/createAnimal';
 
   import svgInformation from 'assets/svg/information.svg';
-  import svgClose from 'assets/svg/close.svg';
 
   import notifications from 'client/mixins/notifications';
   import openedItemRowsMixin from 'client/mixins/openedItemRows';
+  import petMixin from 'client/mixins/petMixin';
 
   // TODO Normalize special pets and mounts
   // import Store from 'client/store';
@@ -518,7 +407,7 @@
   let lastMouseMoveEvent = {};
 
   export default {
-    mixins: [notifications, openedItemRowsMixin],
+    mixins: [notifications, openedItemRowsMixin, petMixin],
     components: {
       PetItem,
       Item,
@@ -532,12 +421,17 @@
       DrawerSlider,
       HatchedPetDialog,
       MountRaisedModal,
+      WelcomeModal,
+      HatchingModal,
     },
     directives: {
       resize: ResizeDirective,
       drag: DragDropDirective,
       mousePosition: MouseMoveDirective,
     },
+    mounted () {
+      this.$root.$emit('bv::show::modal', 'hatching-modal');
+    },
     data () {
       return {
         viewOptions: {},
@@ -554,7 +448,6 @@
         ],
         icons: Object.freeze({
           information: svgInformation,
-          close: svgClose,
         }),
 
         highlightPet: '',
@@ -578,7 +471,6 @@
         currentPet: 'user.data.items.currentPet',
         currentMount: 'user.data.items.currentMount',
         userItems: 'user.data.items',
-        hideDialog: 'user.data.flags.tutorial.common.mounts',
         user: 'user.data',
       }),
       petGroups () {
@@ -871,12 +763,6 @@
       selectMount (item) {
         this.$store.dispatch('common:equip', {key: item.key, type: 'mount'});
       },
-      hatchPet (pet) {
-        this.closeHatchPetDialog();
-
-        this.$store.dispatch('common:hatch', {egg: pet.eggKey, hatchingPotion: pet.potionKey});
-        this.text(this.$t('hatchedPet', {egg: pet.eggName, potion: pet.potionName}));
-      },
       onDragStart (ev, food) {
         this.currentDraggingFood = food;
 
@@ -952,14 +838,6 @@
           });
         }
       },
-      closeHatchPetDialog () {
-        this.$root.$emit('bv::hide::modal', 'hatching-modal');
-      },
-      resetHatchablePet ($event) {
-        if (!$event) {
-          this.hatchablePet = null;
-        }
-      },
       onFoodClicked ($event, food) {
         if (this.currentDraggingFood === null || this.currentDraggingFood !== food) {
           this.currentDraggingFood = food;
@@ -981,11 +859,6 @@
           lastMouseMoveEvent = $event;
         }
       },
-      hideFlag () {
-        this.$store.dispatch('user:set', {
-          'flags.tutorial.common.mounts': true,
-        });
-      },
     },
   };
 </script>

website/client/components/inventory/stable/welcomeModal.vue

@@ -0,0 +1,63 @@
+<template lang="pug">
+b-modal#welcome-modal(:ok-only="true",
+  :ok-title="$t('gotIt')",
+  :visible="!hideDialog",
+  :hide-header="true",
+  @hide="hideFlag()")
+  div.content
+    div.npc_matt
+    h1.page-header(v-once) {{ $t('welcomeStable') }}
+    div.content-text(v-once) {{ $t('welcomeStableText') }}
+</template>
+
+<style lang="scss" scoped>
+  @import '~client/assets/scss/modal.scss';
+
+  #welcome-modal {
+    @include centeredModal();
+
+    .npc_matt {
+      margin: 0 auto 21px auto;
+    }
+
+    .content {
+      text-align: center;
+
+      // the modal already has 15px padding
+      margin-left: 33px;
+      margin-right: 33px;
+      margin-top: 25px;
+    }
+
+    .content-text {
+      font-size: 14px;
+      font-weight: normal;
+      line-height: 1.43;
+
+      width: 400px;
+    }
+
+    .modal-footer {
+      justify-content: center;
+    }
+  }
+</style>
+
+<script>
+import { mapState } from 'client/libs/store';
+
+export default {
+  computed: {
+    ...mapState({
+      hideDialog: 'user.data.flags.tutorial.common.mounts',
+    }),
+  },
+  methods: {
+    hideFlag () {
+      this.$store.dispatch('user:set', {
+        'flags.tutorial.common.mounts': true,
+      });
+    },
+  },
+};
+</script>

website/client/mixins/petMixin.js

@@ -0,0 +1,13 @@
+export default {
+  methods: {
+    closeHatchPetDialog () {
+      this.$root.$emit('bv::hide::modal', 'hatching-modal');
+    },
+    hatchPet (pet) {
+      this.closeHatchPetDialog();
+
+      this.$store.dispatch('common:hatch', {egg: pet.eggKey, hatchingPotion: pet.potionKey});
+      this.text(this.$t('hatchedPet', {egg: pet.eggName, potion: pet.potionName}));
+    },
+  },
+};