default theme 1.5 to 1.6 migration

src/themes/migration/components/core/AddToCart.vue

@@ -4,22 +4,21 @@
   </button-full>
 </template>
 
-<script lang="ts">
-import Product from '@vue-storefront/store/types/product/Product'
-import { formatProductMessages } from '@vue-storefront/core/filters/product-messages/typed'
+<script>
+import { formatProductMessages } from '@vue-storefront/core/filters/product-messages'
 import focusClean from 'theme/components/theme/directives/focusClean'
 import ButtonFull from 'theme/components/theme/ButtonFull.vue'
-import addToCart from '@vue-storefront/core/components/AddToCart'
+import { AddToCart } from '@vue-storefront/core/modules/cart/components/AddToCart'
 
 export default {
-  mixins: [addToCart],
+  mixins: [AddToCart],
   directives: { focusClean },
   components: { ButtonFull },
   methods: {
     onAfterRemovedVariant () {
       this.$forceUpdate()
     },
-    canBeAdded (product: Product): boolean {
+    canBeAdded (product) {
       return formatProductMessages(product.errors) !== ''
     }
   },

src/themes/migration/components/core/Breadcrumbs.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import Breadcrumbs from '@vue-storefront/core/components/Breadcrumbs'
+import Breadcrumbs from '@vue-storefront/core/compatibility/components/Breadcrumbs'
 
 export default {
   mixins: [Breadcrumbs]

src/themes/migration/components/core/ColorSelector.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import GenericSelector from '@vue-storefront/core/components/GenericSelector'
+import GenericSelector from '@vue-storefront/core/compatibility/components/GenericSelector'
 
 export default {
   mixins: [GenericSelector],

src/themes/migration/components/core/GenericSelector.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import GenericSelector from '@vue-storefront/core/components/GenericSelector'
+import GenericSelector from '@vue-storefront/core/compatibility/components/GenericSelector'
 export default {
   mixins: [GenericSelector]
 }

src/themes/migration/components/core/Loader.vue

@@ -16,10 +16,35 @@
 </template>
 
 <script>
-import Loader from '@vue-storefront/core/components/Loader'
+import { mapState } from 'vuex'
 
 export default {
-  mixins: [Loader]
+  name: 'Loader',
+  data () {
+    return {
+      message: null
+    }
+  },
+  methods: {
+    show (message = null) {
+      this.message = message
+      this.$store.commit('ui/setLoader', true)
+    },
+    hide () {
+      this.$store.commit('ui/setLoader', false)
+    }
+  },
+  computed: mapState({
+    isVisible: state => state.ui.loader
+  }),
+  beforeMount () {
+    this.$bus.$on('notification-progress-start', this.show)
+    this.$bus.$on('notification-progress-stop', this.hide)
+  },
+  beforeDestroy () {
+    this.$bus.$off('notification-progress-start', this.show)
+    this.$bus.$off('notification-progress-stop', this.hide)
+  }
 }
 </script>
 

src/themes/migration/components/core/Modal.vue

@@ -20,9 +20,8 @@
               </i>
               <slot name="header"/>
             </header>
-            <div class="modal-content pt30 pb60 px65" v-if="$slots.content || staticData">
+            <div class="modal-content pt30 pb60 px65" v-if="$slots.content">
               <slot name="content"/>
-              <static-content :file="staticData" v-if="staticData"/>
             </div>
             <slot/>
           </div>
@@ -33,18 +32,63 @@
 </template>
 
 <script>
-import StaticContent from 'theme/components/theme/StaticContent'
-import Modal from '@vue-storefront/core/components/Modal'
+import { mapMutations } from 'vuex'
+import onEscapePress from '@vue-storefront/core/mixins/onEscapePress'
 
 export default {
-  components: {
-    StaticContent
+  name: 'Modal',
+  data () {
+    return {
+      isVisible: false
+    }
+  },
+  methods: {
+    onHide (name, state, params) {
+      return name === this.name ? this.toggle(false) : false
+    },
+    onShow (name, state, params) {
+      return name === this.name ? this.toggle(true) : false
+    },
+    onToggle (name, state, params) {
+      if (name === this.name) {
+        state = typeof state === 'undefined' ? !this.isVisible : state
+        this.toggle(state)
+      }
+    },
+    onEscapePress () {
+      this.close()
+    },
+    ...mapMutations('ui', [
+      'setOverlay'
+    ]),
+    toggle (state) {
+      this.isVisible = state
+      state ? this.setOverlay(state) : setTimeout(() => this.setOverlay(state), this.delay)
+    },
+    close () {
+      this.toggle(false)
+    }
+  },
+  beforeMount () {
+    this.$bus.$on('modal-toggle', this.onToggle)
+    this.$bus.$on('modal-show', this.onShow)
+    this.$bus.$on('modal-hide', this.onHide)
   },
-  mixins: [Modal],
+  beforeDestroy () {
+    this.$bus.$off('modal-toggle', this.onToggle)
+    this.$bus.$off('modal-show', this.onShow)
+    this.$bus.$off('modal-hide', this.onHide)
+  },
+  mixins: [onEscapePress],
   props: {
-    staticData: {
-      type: String,
-      default: ''
+    name: {
+      required: true,
+      type: String
+    },
+    delay: {
+      required: false,
+      type: Number,
+      default: 300
     },
     width: {
       type: Number,

src/themes/migration/components/core/NewsletterPopup.vue

@@ -41,7 +41,7 @@
   </modal>
 </template>
 <script>
-import { Subscribe } from '@vue-storefront/core/modules/mailchimp/components/Subscribe'
+import { Subscribe } from 'src/modules/mailchimp/components/Subscribe'
 import i18n from '@vue-storefront/i18n'
 
 import ButtonFull from 'theme/components/theme/ButtonFull.vue'
@@ -54,10 +54,10 @@ export default {
   },
   methods: {
     onSuccesfulSubmission () {
-      this.$bus.$emit('notification', {
+      this.$store.dispatch('notification/spawnNotification', {
         type: 'success',
         message: i18n.t('You have been successfully subscribed to our newsletter!'),
-        action1: { label: i18n.t('OK'), action: 'close' }
+        action1: { label: i18n.t('OK') }
       })
       this.$bus.$emit('modal-hide', 'modal-newsletter')
     }

src/themes/migration/components/core/Notification.vue

@@ -8,7 +8,7 @@
         :class="notification.type"
       >
         <div
-          @click="action(notification.action1.action, index)"
+          @click="execAction(notification.action1, index)"
           class="message p20"
           data-testid="notificationMessage"
         >
@@ -20,15 +20,15 @@
             :class="`border-${notification.type}`"
             id="notificationAction1"
             data-testid="notificationAction1"
-            @click="action(notification.action1.action, index, notification)"
+            @click="execAction(notification.action1, index)"
           >
             {{ notification.action1.label }}
           </div>
           <div
             class="py10 px20 pointer weight-400 notification-action uppercase"
             id="notificationAction2"
             data-testid="notificationAction2"
-            @click="action(notification.action2.action, index, notification)"
+            @click="execAction(notification.action2, index)"
             v-if="notification.action2"
           >
             {{ notification.action2.label }}
@@ -40,10 +40,23 @@
 </template>
 
 <script>
-import Notification from '@vue-storefront/core/components/Notification'
+import { Notification } from '@vue-storefront/core/modules/notification/components/Notification'
 
 export default {
-  mixins: [Notification]
+  mixins: [Notification],
+  methods: {
+    execAction (action, index) {
+      if (action.action) {
+        // for backward compatibility
+        if (action.action === 'close') {
+          this.$store.dispatch('notification/removeNotification', index)
+        } else {
+          action.action()
+        }
+      }
+      this.$store.dispatch('notification/removeNotification', index)
+    }
+  }
 }
 </script>
 

src/themes/migration/components/core/Overlay.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import Overlay from '@vue-storefront/core/components/Overlay'
+import Overlay from '@vue-storefront/core/compatibility/components/Overlay'
 
 export default {
   mixins: [Overlay],

src/themes/migration/components/core/PriceSelector.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import PriceSelector from '@vue-storefront/core/components/PriceSelector'
+import PriceSelector from '@vue-storefront/core/compatibility/components/PriceSelector'
 
 export default {
   mixins: [PriceSelector]

src/themes/migration/components/core/ProductAttribute.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import ProductAttribute from '@vue-storefront/core/components/ProductAttribute'
+import { ProductAttribute } from '@vue-storefront/core/modules/catalog/components/ProductAttribute.ts'
 
 export default {
   mixins: [ProductAttribute]