From de02678290e91b0aa59a2fe5d3c03d4558f20ba5 Mon Sep 17 00:00:00 2001
From: Alexander Devitsky <alexander.devitsky@gmail.com>
Date: Fri, 27 Mar 2020 00:21:49 +0200
Subject: [PATCH 01/15] Updated general modules, homepage and plp

---
 README.md                                     |   2 +-
 components/core/Breadcrumbs.vue               |   6 +-
 components/core/ColorSelector.vue             |  20 ++-
 components/core/CookieNotification.vue        |   6 +-
 components/core/GenericSelector.vue           |  13 +-
 components/core/LanguageSwitcher.vue          |   2 +-
 components/core/PriceSelector.vue             |  13 +-
 components/core/ProductGalleryCarousel.vue    |   7 +-
 .../core/ProductGalleryZoomCarousel.vue       |   7 +-
 components/core/ProductTile.vue               |  30 ++--
 components/core/ProductsSlider.vue            |   6 +-
 components/core/SizeSelector.vue              |  12 +-
 components/core/SortBy.vue                    |  36 ++++-
 components/core/blocks/Category/Sidebar.vue   |  66 +++++---
 .../core/blocks/MainSlider/MainSlider.vue     |   6 +-
 .../blocks/PromotedOffers/PromotedOffers.vue  |   5 +-
 index.js                                      |  16 +-
 mixins/filterMixin.ts                         |  22 +++
 mixins/index.js                               |   0
 package.json                                  |   4 +-
 pages/Category.vue                            | 151 +++++++++++++++---
 pages/CmsData.vue                             |   2 -
 pages/Error.vue                               |   7 +-
 pages/Home.vue                                |  14 +-
 pages/PageNotFound.vue                        |   7 +-
 router/index.js                               |   2 -
 store/claims.ts                               |  33 ++++
 store/homepage.ts                             |  50 ++++++
 store/promoted-offers.ts                      |  58 +++++++
 store/ui.js                                   |   9 --
 store/ui.ts                                   |  70 ++++++++
 31 files changed, 529 insertions(+), 153 deletions(-)
 create mode 100644 mixins/filterMixin.ts
 delete mode 100644 mixins/index.js
 create mode 100644 store/claims.ts
 create mode 100644 store/homepage.ts
 create mode 100644 store/promoted-offers.ts
 delete mode 100644 store/ui.js
 create mode 100644 store/ui.ts

diff --git a/README.md b/README.md
index 09e3934..4365e47 100644
--- a/README.md
+++ b/README.md
@@ -3,7 +3,7 @@
 A [Vue Storefront](https://www.vuestorefront.io) Theme for Passionate Developers with larger catalogs in mind, based on the
 wonderful [Tailwind](https://tailwindcss.com) CSS framework.
 
-Latest tested Vue Storefront version - [1.10.3](https://github.com/DivanteLtd/vue-storefront/tree/v1.10.3)
+Latest tested Vue Storefront version - [1.11.2](https://github.com/DivanteLtd/vue-storefront/tree/v1.11.2)
 
 ## Installing
 
diff --git a/components/core/Breadcrumbs.vue b/components/core/Breadcrumbs.vue
index bcf8627..871c762 100644
--- a/components/core/Breadcrumbs.vue
+++ b/components/core/Breadcrumbs.vue
@@ -1,20 +1,20 @@
 <template>
   <div class="bg-grey-lightest">
     <div class="container text-xs text-grey leading-normal truncate py-4 breadcrumbs">
-      <span v-for="link in routes" :key="link.route_link">
+      <span v-for="link in paths" :key="link.route_link">
         <router-link :to="localizedRoute(link.route_link)" class="text-grey">
           {{ link.name | htmlDecode }}
         </router-link> <span class="px-2">&rsaquo;</span>
       </span>
       <span class="text-grey-dark">
-        {{ activeRoute | htmlDecode }}
+        {{ current | htmlDecode }}
       </span>
     </div>
   </div>
 </template>
 
 <script>
-import Breadcrumbs from '@vue-storefront/core/compatibility/components/Breadcrumbs'
+import { Breadcrumbs } from '@vue-storefront/core/modules/breadcrumbs/components/Breadcrumbs.ts'
 
 export default {
   mixins: [Breadcrumbs]
diff --git a/components/core/ColorSelector.vue b/components/core/ColorSelector.vue
index 837471c..b9cdef1 100644
--- a/components/core/ColorSelector.vue
+++ b/components/core/ColorSelector.vue
@@ -1,24 +1,32 @@
 <template>
   <button
     :class="['border border-transparent opacity-50 hover:opacity-100 rounded-full relative inline-flex pointer color mr-3 mb-3', active ? 'active' : '']"
-    @click="switchFilter(id, label)"
-    :aria-label="$t('Select color ') + label"
+    @click="$emit('change', variant)"
+    :aria-label="$t('Select color ') + variant.label"
   >
     <div
       class="absolute rounded-full color-inside"
-      :class="{'border border-grey': label === 'White'}"
-      :style="colorFrom(label)"
+      :class="{'border border-grey': variant.label === 'White'}"
+      :style="colorFrom(variant.label)"
     />
   </button>
 </template>
 
 <script>
-import GenericSelector from '@vue-storefront/core/compatibility/components/GenericSelector'
+import config from 'config'
+import filterMixin from 'theme/mixins/filterMixin.ts'
 
 export default {
-  mixins: [GenericSelector],
+  mixins: [filterMixin],
   methods: {
     colorFrom (label) {
+      if (!label) return ''
+      if (config.products.colorMappings) {
+        if (typeof config.products.colorMappings[label] !== 'undefined') {
+          label = config.products.colorMappings[label]
+        }
+      }
+      if (label.indexOf('/') >= 0) label = label.replace('/', ',') // to be honest - this is a hack for colors like "ink/white"
       if (label && label.toString().indexOf(',') >= 0) {
         return 'background: linear-gradient(' + label + ')'
       } else {
diff --git a/components/core/CookieNotification.vue b/components/core/CookieNotification.vue
index 84e33e3..e26904c 100644
--- a/components/core/CookieNotification.vue
+++ b/components/core/CookieNotification.vue
@@ -6,7 +6,7 @@
           <b>
             {{ message }}
           </b>
-          <router-link :to="localizedRoute('detailsLink')" :title="detailsLinkText" class="ml-1 align-middle whitespace-no-wrap">
+          <router-link :to="localizedRoute(detailsLink)" :title="detailsLinkText" class="ml-1 align-middle whitespace-no-wrap">
             {{ detailsLinkText }}
             <i
               class="material-icons icon cursor-pointer align-middle"
@@ -61,7 +61,7 @@ export default {
       this.$store.dispatch('claims/set', {claimCode: 'cookiesAccepted', value: true})
     }
   },
-  created () {
+  mounted () {
     this.$store.dispatch('claims/check', {claimCode: 'cookiesAccepted'}).then((cookieClaim) => {
       if (!cookieClaim) {
         this.isOpen = true
@@ -75,8 +75,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~theme/css/variables/colors';
-@import '~theme/css/helpers/functions/color';
 $color-icon: color(black);
 $bg-icon: color(suva-gray);
 
diff --git a/components/core/GenericSelector.vue b/components/core/GenericSelector.vue
index 079df8d..0efac3f 100644
--- a/components/core/GenericSelector.vue
+++ b/components/core/GenericSelector.vue
@@ -1,18 +1,19 @@
 <template>
   <button
-    :class="{'active': active}"
+    :class="{'active': isActive}"
     class="border border-grey-light font-medium text-xs text-grey-dark generic-selector"
-    @click="switchFilter(id, label)"
-    :aria-label="$t('Select ' + label)"
+    @click="$emit('change', variant)"
+    :aria-label="$t('Select ' + variant.label)"
   >
-    {{ label }}
+    {{ variant.label }}
   </button>
 </template>
 
 <script>
-import GenericSelector from '@vue-storefront/core/compatibility/components/GenericSelector'
+import filterMixin from 'theme/mixins/filterMixin.ts'
+
 export default {
-  mixins: [GenericSelector]
+  mixins: [filterMixin]
 }
 </script>
 
diff --git a/components/core/LanguageSwitcher.vue b/components/core/LanguageSwitcher.vue
index bdb0375..74be8e7 100644
--- a/components/core/LanguageSwitcher.vue
+++ b/components/core/LanguageSwitcher.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import { currentStoreView } from '@vue-storefront/core/store/lib/multistore'
+import { currentStoreView } from '@vue-storefront/core/lib/multistore'
 
 export default {
   data () {
diff --git a/components/core/PriceSelector.vue b/components/core/PriceSelector.vue
index a0989ed..1b00984 100644
--- a/components/core/PriceSelector.vue
+++ b/components/core/PriceSelector.vue
@@ -1,21 +1,22 @@
 <template>
-  <div @click="switchFilter(id, from, to)" class="price-select flex items-center cursor-pointer">
+  <div @click="$emit('change', variant)"
+       class="price-select flex items-center cursor-pointer">
     <button
       class="relative border-grey border mr-3 pointer price-selector"
-      :class="{ active: active }"
-      :aria-label="$t('Price ') + content"
+      :class="{ active: isActive }"
+      :aria-label="$t('Price {variant}', { variant: variant.label })"
     >
       <div class="absolute block square"/>
     </button>
-    <span>{{ content }}</span>
+    <span>{{ variant.label }}</span>
   </div>
 </template>
 
 <script>
-import PriceSelector from '@vue-storefront/core/compatibility/components/PriceSelector'
+import filterMixin from 'theme/mixins/filterMixin.ts'
 
 export default {
-  mixins: [PriceSelector]
+  mixins: [filterMixin]
 }
 </script>
 
diff --git a/components/core/ProductGalleryCarousel.vue b/components/core/ProductGalleryCarousel.vue
index 7ce8288..a9e0f2b 100644
--- a/components/core/ProductGalleryCarousel.vue
+++ b/components/core/ProductGalleryCarousel.vue
@@ -68,16 +68,15 @@
 
 <script>
 import store from '@vue-storefront/core/store'
-import { Carousel, Slide } from 'vue-carousel'
 import ProductVideo from './ProductVideo'
 import { onlineHelper } from '@vue-storefront/core/helpers'
 
 export default {
   name: 'ProductGalleryCarousel',
   components: {
-    Carousel,
-    Slide,
-    ProductVideo
+    ProductVideo,
+    'Carousel': () => import('vue-carousel').then(Slider => Slider.Carousel),
+    'Slide': () => import('vue-carousel').then(Slider => Slider.Slide)
   },
   props: {
     gallery: {
diff --git a/components/core/ProductGalleryZoomCarousel.vue b/components/core/ProductGalleryZoomCarousel.vue
index 1c3e956..5fb5a72 100644
--- a/components/core/ProductGalleryZoomCarousel.vue
+++ b/components/core/ProductGalleryZoomCarousel.vue
@@ -50,7 +50,6 @@
 </template>
 
 <script>
-import { Carousel, Slide } from 'vue-carousel'
 import ProductVideo from './ProductVideo'
 
 export default {
@@ -78,9 +77,9 @@ export default {
     }
   },
   components: {
-    Carousel,
-    Slide,
-    ProductVideo
+    ProductVideo,
+    'Carousel': () => import('vue-carousel').then(Slider => Slider.Carousel),
+    'Slide': () => import('vue-carousel').then(Slider => Slider.Slide)
   },
   mounted () {
     this.navigate(this.currentSlide)
diff --git a/components/core/ProductTile.vue b/components/core/ProductTile.vue
index 27e84db..315a03f 100644
--- a/components/core/ProductTile.vue
+++ b/components/core/ProductTile.vue
@@ -71,6 +71,7 @@
 <script>
 import rootStore from '@vue-storefront/core/store'
 import { ProductTile } from '@vue-storefront/core/modules/catalog/components/ProductTile.ts'
+import config from 'config'
 
 export default {
   mixins: [ProductTile],
@@ -118,21 +119,24 @@ export default {
       }
     },
     visibilityChanged (isVisible, entry) {
-      if (isVisible) {
-        if (rootStore.state.config.products.configurableChildrenStockPrefetchDynamic && rootStore.products.filterUnavailableVariants) {
-          const skus = [this.product.sku]
-          if (this.product.type_id === 'configurable' && this.product.configurable_children && this.product.configurable_children.length > 0) {
-            for (const confChild of this.product.configurable_children) {
-              const cachedItem = rootStore.state.stock.cache[confChild.id]
-              if (typeof cachedItem === 'undefined' || cachedItem === null) {
-                skus.push(confChild.sku)
-              }
-            }
-            if (skus.length > 0) {
-              rootStore.dispatch('stock/list', { skus: skus }) // store it in the cache
-            }
+      if (
+        isVisible &&
+        config.products.configurableChildrenStockPrefetchDynamic &&
+        config.products.filterUnavailableVariants &&
+        this.product.type_id === 'configurable' &&
+        this.product.configurable_children &&
+        this.product.configurable_children.length > 0
+      ) {
+        const skus = [this.product.sku]
+        for (const confChild of this.product.configurable_children) {
+          const cachedItem = rootStore.state.stock.cache[confChild.id]
+          if (typeof cachedItem === 'undefined' || cachedItem === null) {
+            skus.push(confChild.sku)
           }
         }
+        if (skus.length > 0) {
+          rootStore.dispatch('stock/list', { skus: skus }) // store it in the cache
+        }
       }
     }
   },
diff --git a/components/core/ProductsSlider.vue b/components/core/ProductsSlider.vue
index 5aaab40..5b6582c 100644
--- a/components/core/ProductsSlider.vue
+++ b/components/core/ProductsSlider.vue
@@ -24,8 +24,6 @@
 
 <script>
 import NoSSR from 'vue-no-ssr'
-import { Carousel, Slide } from 'vue-carousel'
-
 import ProductTile from 'theme/components/core/ProductTile'
 
 export default {
@@ -45,9 +43,9 @@ export default {
     }
   },
   components: {
-    Slide,
-    Carousel,
     ProductTile,
+    'Carousel': () => import('vue-carousel').then(Slider => Slider.Carousel),
+    'Slide': () => import('vue-carousel').then(Slider => Slider.Slide),
     'no-ssr': NoSSR
   },
   data () {
diff --git a/components/core/SizeSelector.vue b/components/core/SizeSelector.vue
index 73ca297..a873646 100644
--- a/components/core/SizeSelector.vue
+++ b/components/core/SizeSelector.vue
@@ -1,19 +1,19 @@
 <template>
   <button
     class="mr-3 mb-3 size-selector"
-    :class="{ active: active }"
-    @click="switchFilter(id, label)"
-    :aria-label="$t('Select size ') + label"
+    :class="{ active: isActive }"
+    @click="$emit('change', variant)"
+    :aria-label="$t('Select size {variant}', { variant: variant.label })"
   >
-    {{ label }}
+    {{ variant.label }}
   </button>
 </template>
 
 <script>
-import GenericSelector from '@vue-storefront/core/compatibility/components/GenericSelector'
+import filterMixin from 'theme/mixins/filterMixin.ts'
 
 export default {
-  mixins: [GenericSelector]
+  mixins: [filterMixin]
 }
 </script>
 
diff --git a/components/core/SortBy.vue b/components/core/SortBy.vue
index 3f9279c..dcc0d2c 100644
--- a/components/core/SortBy.vue
+++ b/components/core/SortBy.vue
@@ -5,8 +5,12 @@
       class="w-full border p-3"
       v-model="sortby"
       @change="changeOrder">
-      <option selected="selected" disabled value="">{{ $t('Sort By') }}</option>
-      <option v-for="(option, label) in sortByAttribute" :disabled="sortby === option" :value="option" :key="option" >{{ $t(label) }}</option>
+      <option selected="selected" disabled value="" v-if="!hasLabel">
+        {{ $t('Sort By') }}
+      </option>
+      <option v-for="variant in sortingVariants" :value="variant" :key="variant.id">
+        {{ $t(variant.label) }}
+      </option>
     </select>
     <svg viewBox="0 0 25 25" class="vt-icon--sm">
       <use xlink:href="#down"/>
@@ -16,8 +20,34 @@
 
 <script>
 import SortBy from '@vue-storefront/core/compatibility/components/SortBy'
+import { products } from 'config'
 export default {
-  mixins: [SortBy]
+  mixins: [SortBy],
+  props: {
+    hasLabel: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      sortby: null
+    }
+  },
+  watch: {
+    value: {
+      handler () {
+        const defaultVariant = this.value && this.value.length ? this.value : products.defaultSortBy.attribute
+        this.sortby = this.sortingVariants.find(variant => variant.id.includes(defaultVariant))
+      },
+      immediate: true
+    }
+  }
 }
 </script>
 
diff --git a/components/core/blocks/Category/Sidebar.vue b/components/core/blocks/Category/Sidebar.vue
index 835a144..a455be9 100644
--- a/components/core/blocks/Category/Sidebar.vue
+++ b/components/core/blocks/Category/Sidebar.vue
@@ -2,7 +2,7 @@
   <div class="sidebar">
     <div>
       <Accordion
-        v-for="(filter, filterIndex) in filters"
+        v-for="(filter, filterIndex) in availableFilters"
         :key="filterIndex"
         v-if="filter.length"
         :title="$t(filterIndex + '_filter')"
@@ -10,29 +10,29 @@
         <template v-if="filterIndex==='color'">
           <color-selector
             context="category"
-            :attribute_code="color"
             code="color"
             v-for="(color, index) in filter"
             :key="index"
-            :id="color.id"
+            :variant="color"
             :label="color.label"
+            :selected-filters="getCurrentFilters"
+            @change="$emit('changeFilter', $event)"
           />
         </template>
         <template v-else-if="filterIndex==='size'">
           <size-selector
             context="category"
-            :attribute_code="size"
             code="size"
             v-for="(size, index) in sortById(filter)"
             :key="index"
-            :id="size.id"
-            :label="size.label"
+            :variant="size"
+            :selected-filters="getCurrentFilters"
+            @change="$emit('changeFilter', $event)"
           />
         </template>
         <template v-else-if="filterIndex==='price'">
           <price-selector
             context="category"
-            :attribute_code="price"
             class="mb-3"
             code="price"
             v-for="(price, index) in filter"
@@ -40,8 +40,9 @@
             :id="price.id"
             :from="price.from"
             :to="price.to"
-            :content="price.label"
-            :label="price.label"
+            :variant="price"
+            :selected-filters="getCurrentFilters"
+            @change="$emit('changeFilter', $event)"
           />
         </template>
         <template v-else>
@@ -52,8 +53,9 @@
             :code="filterIndex"
             v-for="(option, index) in filter"
             :key="index"
-            :id="option.id"
-            :label="option.label"
+            :variant="option"
+            :selected-filters="getCurrentFilters"
+            @change="$emit('changeFilter', $event)"
           />
         </template>
       </Accordion>
@@ -82,15 +84,14 @@
 </template>
 
 <script>
-import Sidebar from '@vue-storefront/core/compatibility/components/blocks/Category/Sidebar'
-
+import { mapGetters } from 'vuex'
 import ColorSelector from 'theme/components/core/ColorSelector'
 import SizeSelector from 'theme/components/core/SizeSelector'
 import PriceSelector from 'theme/components/core/PriceSelector'
 import GenericSelector from 'theme/components/core/GenericSelector'
 import Accordion from 'theme/components/theme/Accordion'
-
 import ButtonFull from 'theme/components/theme/ButtonFull.vue'
+import pickBy from 'lodash-es/pickBy'
 
 export default {
   components: {
@@ -101,20 +102,35 @@ export default {
     Accordion,
     ButtonFull
   },
-  mixins: [Sidebar],
-  data () {
-    return {
-      openedFilters: []
+  props: {
+    filters: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    ...mapGetters('category', ['getActiveCategoryFilters']),
+    activeFilters () {
+      return this.getActiveCategoryFilters
+    },
+    hasActiveFilters () {
+      return this.$store.getters['category-next/hasActiveFilters']
+    },
+    getCurrentFilters () {
+      return this.$store.getters['category-next/getCurrentFilters']
+    },
+    availableFilters () {
+      return pickBy(this.filters, (filter, filterType) => {
+        return (filter.length && !this.$store.getters['category-next/getSystemFilterNames'].includes(filterType))
+      })
     }
   },
   methods: {
-    toggleFilters (filterIndex) {
-      let index = this.openedFilters.indexOf(filterIndex)
-      if (index === -1) {
-        this.openedFilters.push(filterIndex)
-      } else {
-        this.openedFilters.splice(index, 1)
-      }
+    resetAllFilters () {
+      this.$store.dispatch('category-next/resetSearchFilters')
+    },
+    sortById (filters) {
+      return [...filters].sort((a, b) => { return a.id - b.id })
     }
   }
 }
diff --git a/components/core/blocks/MainSlider/MainSlider.vue b/components/core/blocks/MainSlider/MainSlider.vue
index 5021d64..3cef608 100644
--- a/components/core/blocks/MainSlider/MainSlider.vue
+++ b/components/core/blocks/MainSlider/MainSlider.vue
@@ -25,9 +25,7 @@
 
 <script>
 import NoSSR from 'vue-no-ssr'
-import { Carousel, Slide } from 'vue-carousel'
 import sliderData from 'theme/resource/slider.json'
-
 import ButtonFull from 'theme/components/theme/ButtonFull'
 
 export default {
@@ -40,8 +38,8 @@ export default {
   },
   components: {
     ButtonFull,
-    Carousel,
-    Slide,
+    'Carousel': () => import('vue-carousel').then(Slider => Slider.Carousel),
+    'Slide': () => import('vue-carousel').then(Slider => Slider.Slide),
     'no-ssr': NoSSR
   },
   methods: {
diff --git a/components/theme/blocks/PromotedOffers/PromotedOffers.vue b/components/theme/blocks/PromotedOffers/PromotedOffers.vue
index abc4cbe..38886d1 100644
--- a/components/theme/blocks/PromotedOffers/PromotedOffers.vue
+++ b/components/theme/blocks/PromotedOffers/PromotedOffers.vue
@@ -26,7 +26,6 @@
 
 <script>
 import { mapGetters, mapActions } from 'vuex'
-import promotedOffers from 'theme/resource/promoted_offers.json'
 
 import ButtonFull from 'theme/components/theme/ButtonFull'
 
@@ -71,8 +70,8 @@ export default {
       }
     }
   },
-  created () {
-    this.updatePromotedOffers(promotedOffers)
+  async created () {
+    await this.updatePromotedOffers()
   },
   methods: {
     ...mapActions({
diff --git a/index.js b/index.js
index d98c73a..5fed8fb 100644
--- a/index.js
+++ b/index.js
@@ -7,8 +7,10 @@ import '@vue-storefront/core/lib/passive-listeners'
 import { RouterManager } from '@vue-storefront/core/lib/router-manager'
 import { once } from '@vue-storefront/core/helpers'
 
-import { extendModule } from '@vue-storefront/core/lib/module'
-import uiStore from 'theme/store/ui'
+import { claimsStore } from 'theme/store/claims'
+import { homepageStore } from 'theme/store/homepage'
+import { uiStore } from 'theme/store/ui'
+import { promotedStore } from 'theme/store/promoted-offers'
 
 once('__VUE_EXTEND_DROPPOINT_VPB__', () => {
   Vue.use(VueProgressBar)
@@ -22,14 +24,12 @@ function initTheme (app, router, store, config, ssrContext) {
   // { name: 'de-checkout', path: '/checkout', component: CheckoutCustomized },
   setupMultistoreRoutes(config, router, routes)
   RouterManager.addRoutes(routes, router)
+  store.registerModule('claims', claimsStore)
+  store.registerModule('homepage', homepageStore)
+  store.registerModule('ui', uiStore)
+  store.registerModule('promoted', promotedStore)
 }
 
-const uiExtend = {
-  key: 'ui',
-  store: { modules: [{ key: 'ui', module: uiStore }] }
-}
-extendModule(uiExtend)
-
 export {
   themeEntry,
   initTheme
diff --git a/mixins/filterMixin.ts b/mixins/filterMixin.ts
new file mode 100644
index 0000000..c9fa622
--- /dev/null
+++ b/mixins/filterMixin.ts
@@ -0,0 +1,22 @@
+import toString from 'lodash-es/toString'
+
+export default {
+  props: {
+    variant: {
+      type: Object,
+      default: () => ({})
+    },
+    selectedFilters: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    isActive () {
+      const selectedVariantFilter = this.selectedFilters[this.variant.type]
+      if (!selectedVariantFilter) return false
+      if (Array.isArray(selectedVariantFilter)) return !!selectedVariantFilter.find(variant => variant.id === this.variant.id)
+      return toString(selectedVariantFilter.id) === toString(this.variant.id)
+    }
+  }
+}
diff --git a/mixins/index.js b/mixins/index.js
deleted file mode 100644
index e69de29..0000000
diff --git a/package.json b/package.json
index f48c0b6..7c60f95 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vuetique",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Vuetique Theme for Vue Storefront",
   "main": "index.js",
   "scripts": {
@@ -13,7 +13,7 @@
     "bodybuilder": "2.2.13",
     "codyhouse-framework": "^1.0.3",
     "vue": "^2.6.6",
-    "vue-carousel": "^0.17.0",
+    "vue-carousel": "^0.18",
     "vue-no-ssr": "^0.2.2",
     "vue-progressbar": "^0.7.5",
     "vuelidate": "^0.6.2",
diff --git a/pages/Category.vue b/pages/Category.vue
index 2368216..d922030 100644
--- a/pages/Category.vue
+++ b/pages/Category.vue
@@ -1,19 +1,28 @@
 <template>
   <div id="category">
-    <breadcrumbs :routes="breadcrumbs.routes" :active-route="category.name" />
+    <breadcrumbs />
     <header class="pb-16 row bg-grey-lightest mb-6">
       <div class="container">
         <div class="row items-center mt-2">
-          <h1 class="col-10"> {{ category.name }} </h1>
+          <h1 class="col-10">
+            {{ getCurrentCategory.name }}
+          </h1>
           <div class="col-2 hidden lg:block"><sort-by /></div>
         </div>
       </div>
       <div class="container lg:hidden">
         <div class="row gutter-md mt-6">
           <div class="col-6">
-            <button-full class="w-full" @click.native="openFilters">{{ $t('Filters') }}</button-full>
+            <button-full class="w-full" @click.native="openFilters">
+              {{ $t('Filters') }}
+            </button-full>
+          </div>
+          <div class="col-6">
+            <sort-by
+              @change="changeFilter"
+              :value="getCurrentSearchQuery.sort"
+            />
           </div>
-          <div class="col-6"><sort-by /></div>
         </div>
       </div>
     </header>
@@ -28,19 +37,26 @@
           <use xlink:href="#close"/>
         </svg>
       </button>
-      <sidebar :filters="filters.available" @closeFilters="closeFilters"/>
+      <sidebar
+        :filters="getAvailableFilters"
+        @changeFilter="changeFilter"
+        @closeFilters="closeFilters"
+      />
     </div>
     <div class="container pb-16">
       <div class="row gutter-md">
         <div class="col-3 hidden lg:block">
-          <sidebar :filters="filters.available"/>
+          <sidebar :filters="getAvailableFilters" />
         </div>
         <div class="col-12 lg:col-9">
           <div v-if="isCategoryEmpty" class="hidden-xs">
             <h3 data-testid="noProductsInfo" class="mb-2">{{ $t('No products found!') }}</h3>
             <p class="text-grey-dark">{{ $t('Please change Your search criteria and try again. If you still can\'t find what you\'re looking for, try visiting our homepage to check out our bestsellers!') }}</p>
           </div>
-          <product-listing columns="3" :products="products" />
+          <lazy-hydrate :trigger-hydration="!loading" v-if="isLazyHydrateEnabled">
+            <product-listing :columns="defaultColumn" :products="getCategoryProducts" />
+          </lazy-hydrate>
+          <product-listing v-else :columns="defaultColumn" :products="getCategoryProducts" />
         </div>
       </div>
     </div>
@@ -48,14 +64,39 @@
 </template>
 
 <script>
-import Category from '@vue-storefront/core/pages/Category'
+import LazyHydrate from 'vue-lazy-hydration'
 import Sidebar from '../components/core/blocks/Category/Sidebar.vue'
 import ProductListing from '../components/core/ProductListing.vue'
 import Breadcrumbs from '../components/core/Breadcrumbs.vue'
 import SortBy from '../components/core/SortBy.vue'
-// import builder from 'bodybuilder'
+import { isServer } from '@vue-storefront/core/helpers'
+import { getSearchOptionsFromRouteParams } from '@vue-storefront/core/modules/catalog-next/helpers/categoryHelpers'
+import config from 'config'
+import ButtonFull from 'theme/components/theme/ButtonFull.vue'
+import { mapGetters } from 'vuex'
+import onBottomScroll from '@vue-storefront/core/mixins/onBottomScroll'
+import { catalogHooksExecutors } from '@vue-storefront/core/modules/catalog-next/hooks'
+import { localizedRoute, currentStoreView } from '@vue-storefront/core/lib/multistore'
+import { htmlDecode } from '@vue-storefront/core/filters'
+
+const THEME_PAGE_SIZE = 50
+
+const composeInitialPageState = async (store, route, forceLoad = false) => {
+  try {
+    const filters = getSearchOptionsFromRouteParams(route.params)
+    const cachedCategory = store.getters['category-next/getCategoryFrom'](route.path)
+    const currentCategory = cachedCategory && !forceLoad ? cachedCategory : await store.dispatch('category-next/loadCategory', { filters })
+    if (!store.getters['url/isBackRoute']) {
+      await store.dispatch('category-next/loadCategoryProducts', {route, category: currentCategory, pageSize: THEME_PAGE_SIZE})
+    }
+    const breadCrumbsLoader = store.dispatch('category-next/loadCategoryBreadcrumbs', { category: currentCategory, currentRouteName: currentCategory.name, omitCurrent: true })
 
-import ButtonFull from '../components/theme/ButtonFull.vue'
+    if (isServer) await breadCrumbsLoader
+    catalogHooksExecutors.categoryPageVisited(currentCategory)
+  } catch (e) {
+    console.error('Problem with setting Category initial data!', e)
+  }
+}
 
 export default {
   components: {
@@ -63,21 +104,52 @@ export default {
     Breadcrumbs,
     Sidebar,
     SortBy,
-    ButtonFull
+    ButtonFull,
+    LazyHydrate
   },
+  mixins: [onBottomScroll],
   data () {
     return {
-      mobileFilters: false
+      mobileFilters: false,
+      defaultColumn: 3,
+      loadingProducts: false,
+      loading: true
+    }
+  },
+  computed: {
+    ...mapGetters({
+      getCurrentSearchQuery: 'category-next/getCurrentSearchQuery',
+      getCategoryProducts: 'category-next/getCategoryProducts',
+      getCurrentCategory: 'category-next/getCurrentCategory',
+      getCategoryProductsTotal: 'category-next/getCategoryProductsTotal',
+      getAvailableFilters: 'category-next/getAvailableFilters'
+    }),
+    isLazyHydrateEnabled () {
+      return config.ssr.lazyHydrateFor.includes('category-next.products')
+    },
+    isCategoryEmpty () {
+      return this.getCategoryProductsTotal === 0
     }
   },
-  asyncData ({ store, route }) { // this is for SSR purposes to prefetch data - and it's always executed before parent component methods
-    return new Promise((resolve, reject) => {
-      store.dispatch('category/mergeSearchOptions', { // this is just an example how can you modify the search criteria in child components
-        sort: 'updated_at:desc'
-        // searchProductQuery: builder().query('range', 'price', { 'gt': 0 }).andFilter('range', 'visibility', { 'gte': 2, 'lte': 4 }) // this is an example on how to modify the ES query, please take a look at the @vue-storefront/core/helpers for refernce on how to build valid query
+  async asyncData ({ store, route }) { // this is for SSR purposes to prefetch data - and it's always executed before parent component methods
+    await composeInitialPageState(store, route)
+  },
+  async beforeRouteEnter (to, from, next) {
+    if (isServer) next() // SSR no need to invoke SW caching here
+    else if (!from.name) { // SSR but client side invocation, we need to cache products and invoke requests from asyncData for offline support
+      next(async vm => {
+        vm.loading = true
+        await composeInitialPageState(vm.$store, to, true)
+        await vm.$store.dispatch('category-next/cacheProducts', { route: to }) // await here is because we must wait for the hydration
+        vm.loading = false
+      })
+    } else { // Pure CSR, with no initial category state
+      next(async vm => {
+        vm.loading = true
+        vm.$store.dispatch('category-next/cacheProducts', { route: to })
+        vm.loading = false
       })
-      resolve()
-    })
+    }
   },
   methods: {
     openFilters () {
@@ -86,15 +158,42 @@ export default {
     closeFilters () {
       this.mobileFilters = false
     },
-    notify () {
-      this.$store.dispatch('notification/spawnNotification', {
-        type: 'error',
-        message: this.$t('Please select the field which You like to sort by'),
-        action1: { label: this.$t('OK') }
-      })
+    async changeFilter (filterVariant) {
+      this.$store.dispatch('category-next/switchSearchFilters', [filterVariant])
+    },
+    columnChange (column) {
+      this.defaultColumn = column
+    },
+    async onBottomScroll () {
+      if (this.loadingProducts) return
+      this.loadingProducts = true
+      try {
+        await this.$store.dispatch('category-next/loadMoreCategoryProducts')
+      } catch (e) {
+        console.error('Problem with fetching more products', e)
+      } finally {
+        this.loadingProducts = false
+      }
     }
   },
-  mixins: [Category]
+  metaInfo () {
+    const storeView = currentStoreView()
+    const { meta_title, meta_description, name, slug } = this.getCurrentCategory
+    const meta = meta_description ? [
+      { vmid: 'description', name: 'description', content: htmlDecode(meta_description) }
+    ] : []
+    const categoryLocaliedLink = localizedRoute({
+      name: 'category-amp',
+      params: { slug }
+    }, storeView.storeCode)
+    const ampCategoryLink = this.$router.resolve(categoryLocaliedLink).href
+
+    return {
+      link: [ { rel: 'amphtml', href: ampCategoryLink } ],
+      title: htmlDecode(meta_title || name),
+      meta
+    }
+  }
 }
 </script>
 
diff --git a/pages/CmsData.vue b/pages/CmsData.vue
index ab2a7a3..f6d1f59 100644
--- a/pages/CmsData.vue
+++ b/pages/CmsData.vue
@@ -14,14 +14,12 @@
 
 <script>
 import store from '@vue-storefront/core/store'
-import CmsData from 'src/modules/magento-2-cms/components/CmsData'
 import Breadcrumbs from 'theme/components/core/Breadcrumbs'
 
 export default {
   components: {
     Breadcrumbs
   },
-  mixins: [CmsData],
   computed: {
     data () {
       if (this.id) {
diff --git a/pages/Error.vue b/pages/Error.vue
index 2731609..b0c84e6 100644
--- a/pages/Error.vue
+++ b/pages/Error.vue
@@ -3,7 +3,7 @@
     <section class="bg-grey-lighter py-12 px-12">
       <div class="container">
         <div class="text-center mb-20">
-          <img src="/assets/icons/500.svg" alt="500">
+          <img class="mx-auto" src="/assets/icons/500.svg" alt="500">
         </div>
         <h2 class="text-center">
           {{ $t("Something went wrong ...") }}
@@ -59,7 +59,6 @@
 import Error from '@vue-storefront/core/pages/Error'
 import EventBus from '@vue-storefront/core/compatibility/plugins/event-bus'
 import { prepareQuery } from '@vue-storefront/core/modules/catalog/queries/common'
-import { Carousel, Slide } from 'vue-carousel'
 import NoSSR from 'vue-no-ssr'
 
 import ProductTile from 'theme/components/core/ProductTile.vue'
@@ -82,9 +81,9 @@ export default {
     }
   },
   components: {
-    Slide,
-    Carousel,
     ProductTile,
+    'Carousel': () => import('vue-carousel').then(Slider => Slider.Carousel),
+    'Slide': () => import('vue-carousel').then(Slider => Slider.Slide),
     'no-ssr': NoSSR
   },
   methods: {
diff --git a/pages/Home.vue b/pages/Home.vue
index 4718b5f..2fda4ac 100755
--- a/pages/Home.vue
+++ b/pages/Home.vue
@@ -1,6 +1,8 @@
 <template>
   <div id="home">
-    <main-slider />
+    <no-ssr>
+      <main-slider />
+    </no-ssr>
 
     <promoted-offers collection="smallBanners" :limit="2" :columns="2" class="mt-2 mb-16 sm:my-8" />
 
@@ -17,7 +19,9 @@
 
     <promoted-offers collection="smallBanners" :limit="2" :offset="2" :columns="2" class="mt-2 mb-16 sm:my-8" />
 
-    <products-slider class="mb-16" :title="$t('Sale and discount')" :products="salesCollection" :config="sliderConfig" />
+    <no-ssr>
+      <products-slider class="mb-16" :title="$t('Sale and discount')" :products="salesCollection" :config="sliderConfig" />
+    </no-ssr>
 
     <section class="container mb-16">
       <div class="justify-center">
@@ -49,6 +53,9 @@ import Onboard from 'theme/components/theme/blocks/Home/Onboard'
 import PromotedOffers from 'theme/components/theme/blocks/PromotedOffers/PromotedOffers'
 import TileLinks from 'theme/components/theme/blocks/TileLinks/TileLinks'
 import { Logger } from '@vue-storefront/core/lib/logger'
+
+import NoSSR from 'vue-no-ssr'
+
 export default {
   mixins: [Home],
   components: {
@@ -57,7 +64,8 @@ export default {
     ProductListing,
     ProductsSlider,
     PromotedOffers,
-    TileLinks
+    TileLinks,
+    'no-ssr': NoSSR
   },
   data () {
     return {
diff --git a/pages/PageNotFound.vue b/pages/PageNotFound.vue
index 2a38802..9a1ce6c 100644
--- a/pages/PageNotFound.vue
+++ b/pages/PageNotFound.vue
@@ -3,7 +3,7 @@
     <section class="bg-grey-lighter py-12 px-12">
       <div class="container">
         <div class="text-center mb-20">
-          <img src="/assets/icons/404.svg" alt="404">
+          <img class="mx-auto" src="/assets/icons/404.svg" alt="404">
         </div>
         <h2 class="text-center">
           {{ $t("We can't find the page") }}
@@ -65,7 +65,6 @@
 <script>
 import PageNotFound from '@vue-storefront/core/pages/PageNotFound'
 import ProductTile from 'theme/components/core/ProductTile.vue'
-import { Carousel, Slide } from 'vue-carousel'
 import NoSSR from 'vue-no-ssr'
 
 export default {
@@ -86,9 +85,9 @@ export default {
     }
   },
   components: {
-    Slide,
-    Carousel,
     ProductTile,
+    'Carousel': () => import('vue-carousel').then(Slider => Slider.Carousel),
+    'Slide': () => import('vue-carousel').then(Slider => Slider.Slide),
     'no-ssr': NoSSR
   },
   methods: {
diff --git a/router/index.js b/router/index.js
index 6ed3388..d989e8b 100644
--- a/router/index.js
+++ b/router/index.js
@@ -10,7 +10,6 @@ const Checkout = () => import(/* webpackChunkName: "vsf-checkout" */ 'theme/page
 const Compare = () => import(/* webpackChunkName: "vsf-compare" */ 'theme/pages/Compare.vue')
 const MyAccount = () => import(/* webpackChunkName: "vsf-my-account" */ 'theme/pages/MyAccount.vue')
 const Static = () => import(/* webpackChunkName: "vsf-static" */ 'theme/pages/Static.vue')
-const CustomCmsPage = () => import(/* webpackChunkName: "vsf-custom-cms" */ 'theme/pages/CustomCmsPage.vue')
 const CmsData = () => import(/* webpackChunkName: "vsf-data" */ 'theme/pages/CmsData')
 
 let routes = [
@@ -38,7 +37,6 @@ let routes = [
   { name: 'compare', path: '/compare', component: Compare, props: {title: 'Compare Products'} },
   { name: 'page-not-found', path: '/page-not-found', component: PageNotFound },
   { name: 'error', path: '/error', component: ErrorPage },
-  { name: 'custom-cms-page', path: '/custom-cms-page', component: CustomCmsPage },
   { name: 'cms-block-demo-page-ssr', path: '/cms-block-demo-page-ssr', component: CmsBlockDemoPageSsr },
   { name: 'about-us', path: '/about-us', component: CmsData, props: {identifier: 'about-us', type: 'Page', sync: true} }
 ]
diff --git a/store/claims.ts b/store/claims.ts
new file mode 100644
index 0000000..d0c47bc
--- /dev/null
+++ b/store/claims.ts
@@ -0,0 +1,33 @@
+import { StorageManager } from '@vue-storefront/core/lib/storage-manager'
+import { Logger } from '@vue-storefront/core/lib/logger'
+
+export const claimsStore = {
+  namespaced: true,
+  actions: {
+    set (context, { claimCode, value, description }) {
+      const claimCollection = StorageManager.get('claims')
+      claimCollection.setItem(claimCode, {
+        code: claimCode,
+        created_at: new Date(),
+        value: value,
+        description: description
+      }).catch((reason) => {
+        Logger.error(reason) // it doesn't work on SSR
+      })
+    },
+
+    unset (context, { claimCode }) {
+      const claimCollection = StorageManager.get('claims')
+      claimCollection.removeItem(claimCode).catch((reason) => {
+        Logger.error(reason) // it doesn't work on SSR
+      })
+    },
+
+    check (context, { claimCode }) {
+      const claimCollection = StorageManager.get('claims')
+      return claimCollection.getItem(claimCode).catch((reason) => {
+        Logger.error(reason) // it doesn't work on SSR
+      })
+    }
+  }
+}
diff --git a/store/homepage.ts b/store/homepage.ts
new file mode 100644
index 0000000..5607cec
--- /dev/null
+++ b/store/homepage.ts
@@ -0,0 +1,50 @@
+import { prepareQuery } from '@vue-storefront/core/modules/catalog/queries/common'
+
+export const homepageStore = {
+  namespaced: true,
+  state: {
+    new_collection: [],
+    bestsellers: []
+  },
+  actions: {
+    async fetchNewCollection ({ commit, dispatch }) {
+      const newProductsQuery = prepareQuery({ queryConfig: 'newProducts' })
+
+      const newProductsResult = await dispatch('product/list', {
+        query: newProductsQuery,
+        size: 8,
+        sort: 'created_at:desc'
+      }, { root: true })
+      const configuredProducts = await dispatch(
+        'category-next/configureProducts',
+        { products: newProductsResult.items
+        }, { root: true })
+      commit('SET_NEW_COLLECTION', configuredProducts)
+    },
+    async loadBestsellers ({ commit, dispatch }) {
+      const response = await dispatch('product/list', {
+        query: prepareQuery({ queryConfig: 'bestSellers' }),
+        size: 8,
+        sort: 'created_at:desc'
+      }, { root: true })
+
+      commit('SET_BESTSELLERS', response.items)
+    }
+  },
+  mutations: {
+    SET_NEW_COLLECTION (state, products) {
+      state.new_collection = products || []
+    },
+    SET_BESTSELLERS (state, bestsellers) {
+      state.bestsellers = bestsellers
+    }
+  },
+  getters: {
+    getEverythingNewCollection (state) {
+      return state.new_collection
+    },
+    getBestsellers (state) {
+      return state.bestsellers
+    }
+  }
+}
diff --git a/store/promoted-offers.ts b/store/promoted-offers.ts
new file mode 100644
index 0000000..a118f9b
--- /dev/null
+++ b/store/promoted-offers.ts
@@ -0,0 +1,58 @@
+import { Logger } from '@vue-storefront/core/lib/logger'
+
+export default interface PromotedOffersState {
+  banners: {
+    mainBanners: any[],
+    smallBanners: any[],
+    productBanners: any[]
+  },
+  headImage: Record<string, any>
+}
+
+export const promotedStore = {
+  namespaced: true,
+  state: {
+    banners: {
+      mainBanners: [],
+      smallBanners: [],
+      productBanners: []
+    },
+    headImage: null
+  },
+  getters: {
+    getPromotedOffers: state => {
+      return state.banners
+    },
+    getHeadImage: state => state.headImage
+  },
+  actions: {
+    async updatePromotedOffers ({commit, rootState}, data) {
+      let promotedBannersResource = rootState.storeView && rootState.storeView.storeCode ? `banners/${rootState.storeView.storeCode}_promoted_offers` : `promoted_offers`
+      try {
+        // Workaround to get jest --watch to work so don't change the import sting to a template string
+        const promotedOffersModule = await import(/* webpackChunkName: "vsf-promoted-offers-[request]" */ 'theme/resource/' + promotedBannersResource + '.json')
+        commit('updatePromotedOffers', promotedOffersModule)
+      } catch (err) {
+        Logger.debug('Unable to load promotedOffers' + err)()
+      }
+    },
+    async updateHeadImage ({commit, rootState}, data) {
+      let mainImageResource = rootState.storeView && rootState.storeView.storeCode ? `banners/${rootState.storeView.storeCode}_main-image` : `main-image`
+      try {
+        // Workaround to get jest --watch to work so don't change the import sting to a template string
+        const imageModule = await import(/* webpackChunkName: "vsf-head-img-[request]" */ 'theme/resource/' + mainImageResource + '.json')
+        commit('SET_HEAD_IMAGE', imageModule.image)
+      } catch (err) {
+        Logger.debug('Unable to load headImage' + err)()
+      }
+    }
+  },
+  mutations: {
+    updatePromotedOffers (state, data) {
+      state.banners = data
+    },
+    SET_HEAD_IMAGE (state, headImage) {
+      state.headImage = headImage
+    }
+  }
+}
diff --git a/store/ui.js b/store/ui.js
deleted file mode 100644
index d6f5634..0000000
--- a/store/ui.js
+++ /dev/null
@@ -1,9 +0,0 @@
-const actions = {
-  closeWishlist ({ commit, state }) {
-    commit('setWishlist', false)
-  }
-}
-
-export default {
-  actions
-}
diff --git a/store/ui.ts b/store/ui.ts
new file mode 100644
index 0000000..406e8e2
--- /dev/null
+++ b/store/ui.ts
@@ -0,0 +1,70 @@
+export const uiStore = {
+  namespaced: true,
+  state: {
+    sidebar: false,
+    microcart: false,
+    wishlist: false,
+    searchpanel: false,
+    newsletterPopup: false,
+    overlay: false,
+    loader: false,
+    authElem: 'login',
+    checkoutMode: false,
+    openMyAccount: false,
+    submenu: {
+      depth: false,
+      path: []
+    }
+  },
+  mutations: {
+    setCheckoutMode (state, action) {
+      state.checkoutMode = action === true
+    },
+    setMicrocart (state, action) {
+      state.microcart = action === true
+      state.overlay = action === true
+    },
+    setSidebar (state, action) {
+      state.sidebar = action === true
+      state.overlay = action === true
+    },
+    setSubmenu (state, { id, depth }) {
+      if (id) {
+        state.submenu.path.push(id)
+      } else if (state.submenu.path.length) {
+        setTimeout(() => {
+          state.submenu.path.pop()
+        }, 300)
+      }
+      state.submenu.depth = state.submenu.depth > 0 && depth
+    },
+    setSearchpanel (state, action) {
+      state.searchpanel = action === true
+      state.overlay = action === true
+    },
+    setWishlist (state, action) {
+      state.wishlist = action === true
+      state.overlay = action === true
+    },
+    setOverlay (state, action) {
+      state.overlay = action === true
+    },
+    setLoader (state, action) {
+      state.loader = action === true
+    },
+    setAuthElem (state, action) {
+      state.authElem = action
+    }
+  },
+  actions: {
+    toggleMicrocart ({ commit, state }) {
+      commit('setMicrocart', !state.microcart)
+    },
+    toggleWishlist ({ commit, state }) {
+      commit('setWishlist', !state.wishlist)
+    },
+    closeWishlist ({ commit, state }) {
+      commit('setWishlist', false)
+    }
+  }
+}

From 10d8c49441d986cd240bea8a4f69c79f88d8a9e4 Mon Sep 17 00:00:00 2001
From: Alexander Devitsky <alexander.devitsky@gmail.com>
Date: Sun, 29 Mar 2020 15:49:29 +0300
Subject: [PATCH 02/15] Category updated

---
 components/core/ColorSelector.vue           |  2 +-
 components/core/ProductTile.vue             | 18 +++++----
 components/core/blocks/Category/Sidebar.vue | 16 ++++----
 components/core/blocks/Search/Product.vue   | 42 +++++++++++++--------
 package.json                                |  8 ++--
 pages/Category.vue                          | 12 +++++-
 pages/Home.vue                              | 21 ++++++++++-
 7 files changed, 80 insertions(+), 39 deletions(-)

diff --git a/components/core/ColorSelector.vue b/components/core/ColorSelector.vue
index b9cdef1..25c30e3 100644
--- a/components/core/ColorSelector.vue
+++ b/components/core/ColorSelector.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-    :class="['border border-transparent opacity-50 hover:opacity-100 rounded-full relative inline-flex pointer color mr-3 mb-3', active ? 'active' : '']"
+    :class="['border border-transparent opacity-50 hover:opacity-100 rounded-full relative inline-flex pointer color mr-3 mb-3', isActive ? 'active' : '']"
     @click="$emit('change', variant)"
     :aria-label="$t('Select color ') + variant.label"
   >
diff --git a/components/core/ProductTile.vue b/components/core/ProductTile.vue
index 315a03f..12c2e5b 100644
--- a/components/core/ProductTile.vue
+++ b/components/core/ProductTile.vue
@@ -19,7 +19,7 @@
         class="product-image w-full relative"
         :class="[{ sale: labelsActive && isOnSale }, { new: labelsActive && isNew }]">
         <img
-          :alt="product.name"
+          :alt="product.name | htmlDecode"
           :src="thumbnailObj.loading"
           v-lazy="thumbnailObj"
           height="300"
@@ -29,7 +29,7 @@
         >
         <img
           v-if="hoverThumbnail !== null"
-          :alt="product.name"
+          :alt="product.name | htmlDecode"
           :src="hoverThumbnailObj.loading"
           v-lazy="hoverThumbnailObj"
           height="300"
@@ -48,20 +48,20 @@
           class="text-primary mr-2"
           v-if="product.special_price && parseFloat(product.special_price) > 0 && !onlyImage"
         >
-          {{ product.priceInclTax | price }}
+          {{ product.priceInclTax | price(storeView) }}
         </span>
 
         <span
           class="line-through"
-          v-if="product.special_price && parseFloat(product.originalPriceInclTax) > 0 && !onlyImage"
+          v-if="product.special_price && parseFloat(product.original_price_incl_tax) > 0 && !onlyImage"
         >
-          {{ product.originalPriceInclTax | price }}
+          {{ product.original_price_incl_tax | price(storeView) }}
         </span>
 
         <span
-          v-if="!product.special_price && parseFloat(product.priceInclTax) > 0 && !onlyImage"
+          v-if="!product.special_price && parseFloat(product.price_incl_tax) > 0 && !onlyImage"
         >
-          {{ product.priceInclTax | price }}
+          {{ product.price_incl_tax | price(storeView) }}
         </span>
       </div>
     </router-link>
@@ -72,6 +72,7 @@
 import rootStore from '@vue-storefront/core/store'
 import { ProductTile } from '@vue-storefront/core/modules/catalog/components/ProductTile.ts'
 import config from 'config'
+import { currentStoreView } from '@vue-storefront/core/lib/multistore'
 
 export default {
   mixins: [ProductTile],
@@ -110,6 +111,9 @@ export default {
         loading: this.thumbnail,
         error: this.thumbnail
       }
+    },
+    storeView () {
+      return currentStoreView()
     }
   },
   methods: {
diff --git a/components/core/blocks/Category/Sidebar.vue b/components/core/blocks/Category/Sidebar.vue
index a455be9..3595786 100644
--- a/components/core/blocks/Category/Sidebar.vue
+++ b/components/core/blocks/Category/Sidebar.vue
@@ -1,5 +1,13 @@
 <template>
   <div class="sidebar">
+    <span
+      class="sidebar__header__clear pointer sans-serif hidden lg:flex mb-3"
+      @click="resetAllFilters"
+      v-show="hasActiveFilters"
+    >
+      <i class="material-icons cl-accent mr-5">cancel</i>
+      {{ $t('Clear filters') }}
+    </span>
     <div>
       <Accordion
         v-for="(filter, filterIndex) in availableFilters"
@@ -14,7 +22,6 @@
             v-for="(color, index) in filter"
             :key="index"
             :variant="color"
-            :label="color.label"
             :selected-filters="getCurrentFilters"
             @change="$emit('changeFilter', $event)"
           />
@@ -66,7 +73,7 @@
         <button-full
           class="w-full"
           @click.native="resetAllFilters"
-          :disabled="Object.keys(activeFilters).length === 0"
+          :disabled="!hasActiveFilters"
         >
           {{ $t('Clear') }}
         </button-full>
@@ -84,7 +91,6 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
 import ColorSelector from 'theme/components/core/ColorSelector'
 import SizeSelector from 'theme/components/core/SizeSelector'
 import PriceSelector from 'theme/components/core/PriceSelector'
@@ -109,10 +115,6 @@ export default {
     }
   },
   computed: {
-    ...mapGetters('category', ['getActiveCategoryFilters']),
-    activeFilters () {
-      return this.getActiveCategoryFilters
-    },
     hasActiveFilters () {
       return this.$store.getters['category-next/hasActiveFilters']
     },
diff --git a/components/core/blocks/Search/Product.vue b/components/core/blocks/Search/Product.vue
index dd0ba12..cf49204 100644
--- a/components/core/blocks/Search/Product.vue
+++ b/components/core/blocks/Search/Product.vue
@@ -36,13 +36,13 @@
         </div>
         <div class="col-auto font-bold text-right">
           <span class="line-through text-grey mr-5" v-if="product.special_price && parseFloat(product.originalPriceInclTax) > 0">
-            {{ product.originalPriceInclTax | price }}
+            {{ product.originalPriceInclTax | price(storeView) }}
           </span>
           <span class="text-error" v-if="product.special_price && parseFloat(product.special_price) > 0">
-            {{ product.priceInclTax | price }}
+            {{ product.priceInclTax | price(storeView) }}
           </span>
           <span class="text-grey-dark" v-if="!product.special_price && parseFloat(product.priceInclTax) > 0" data-testid="productPrice">
-            {{ product.priceInclTax | price }}
+            {{ product.priceInclTax | price(storeView) }}
           </span>
         </div>
       </router-link>
@@ -53,9 +53,16 @@
 <script>
 import rootStore from '@vue-storefront/core/store'
 import { ProductTile } from '@vue-storefront/core/modules/catalog/components/ProductTile.ts'
+import config from 'config'
+import { currentStoreView } from '@vue-storefront/core/lib/multistore'
 
 export default {
   mixins: [ProductTile],
+  computed: {
+    storeView () {
+      return currentStoreView()
+    }
+  },
   methods: {
     onProductPriceUpdate (product) {
       if (product.sku === this.product.sku) {
@@ -63,21 +70,24 @@ export default {
       }
     },
     visibilityChanged (isVisible, entry) {
-      if (isVisible) {
-        if (rootStore.state.config.products.configurableChildrenStockPrefetchDynamic && rootStore.products.filterUnavailableVariants) {
-          const skus = [this.product.sku]
-          if (this.product.type_id === 'configurable' && this.product.configurable_children && this.product.configurable_children.length > 0) {
-            for (const confChild of this.product.configurable_children) {
-              const cachedItem = rootStore.state.stock.cache[confChild.id]
-              if (typeof cachedItem === 'undefined' || cachedItem === null) {
-                skus.push(confChild.sku)
-              }
-            }
-            if (skus.length > 0) {
-              rootStore.dispatch('stock/list', { skus: skus }) // store it in the cache
-            }
+      if (
+        isVisible &&
+        config.products.configurableChildrenStockPrefetchDynamic &&
+        config.products.filterUnavailableVariants &&
+        this.product.type_id === 'configurable' &&
+        this.product.configurable_children &&
+        this.product.configurable_children.length > 0
+      ) {
+        const skus = [this.product.sku]
+        for (const confChild of this.product.configurable_children) {
+          const cachedItem = rootStore.state.stock.cache[confChild.id]
+          if (typeof cachedItem === 'undefined' || cachedItem === null) {
+            skus.push(confChild.sku)
           }
         }
+        if (skus.length > 0) {
+          rootStore.dispatch('stock/list', { skus: skus }) // store it in the cache
+        }
       }
     }
   },
diff --git a/package.json b/package.json
index 7c60f95..4777889 100644
--- a/package.json
+++ b/package.json
@@ -10,14 +10,14 @@
   "author": "youanden <georgiy@absoluteweb.com> and contributors",
   "license": "MIT",
   "dependencies": {
-    "bodybuilder": "2.2.13",
+    "bodybuilder": "2.2.21",
     "codyhouse-framework": "^1.0.3",
-    "vue": "^2.6.6",
+    "vue": "^2.6.11",
     "vue-carousel": "^0.18",
     "vue-no-ssr": "^0.2.2",
     "vue-progressbar": "^0.7.5",
-    "vuelidate": "^0.6.2",
-    "vuex": "^3.0.1"
+    "vuelidate": "^0.7.5",
+    "vuex": "^3.1.2"
   },
   "publishConfig": {
     "access": "public"
diff --git a/pages/Category.vue b/pages/Category.vue
index d922030..4ab9389 100644
--- a/pages/Category.vue
+++ b/pages/Category.vue
@@ -7,7 +7,12 @@
           <h1 class="col-10">
             {{ getCurrentCategory.name }}
           </h1>
-          <div class="col-2 hidden lg:block"><sort-by /></div>
+          <div class="col-2 hidden lg:block">
+            <sort-by
+              @change="changeFilter"
+              :value="getCurrentSearchQuery.sort"
+            />
+          </div>
         </div>
       </div>
       <div class="container lg:hidden">
@@ -46,7 +51,10 @@
     <div class="container pb-16">
       <div class="row gutter-md">
         <div class="col-3 hidden lg:block">
-          <sidebar :filters="getAvailableFilters" />
+          <sidebar
+            :filters="getAvailableFilters"
+            @changeFilter="changeFilter"
+          />
         </div>
         <div class="col-12 lg:col-9">
           <div v-if="isCategoryEmpty" class="hidden-xs">
diff --git a/pages/Home.vue b/pages/Home.vue
index 2fda4ac..8d99ac4 100755
--- a/pages/Home.vue
+++ b/pages/Home.vue
@@ -13,7 +13,7 @@
         </header>
       </div>
       <div class="row center-xs">
-        <product-listing columns="4" :products="newCollection" />
+        <product-listing :columns="defaultColumn" :products="getEverythingNewCollection" />
       </div>
     </section>
 
@@ -55,6 +55,8 @@ import TileLinks from 'theme/components/theme/blocks/TileLinks/TileLinks'
 import { Logger } from '@vue-storefront/core/lib/logger'
 
 import NoSSR from 'vue-no-ssr'
+import {mapGetters} from 'vuex'
+import {isServer} from '@vue-storefront/core/helpers'
 
 export default {
   mixins: [Home],
@@ -75,10 +77,12 @@ export default {
         paginationEnabled: true,
         loop: false,
         paginationSize: 6
-      }
+      },
+      defaultColumn: 4
     }
   },
   computed: {
+    ...mapGetters('homepage', ['getEverythingNewCollection']),
     categories () {
       return this.$store.state.category.list
     },
@@ -89,6 +93,17 @@ export default {
       return this.$store.state.homepage.sales_collection
     }
   },
+  beforeRouteEnter (to, from, next) {
+    if (!isServer && !from.name) { // Loading products to cache on SSR render
+      next(vm =>
+        vm.$store.dispatch('homepage/fetchNewCollection').then(res => {
+          vm.loading = false
+        })
+      )
+    } else {
+      next()
+    }
+  },
   created () {
     // Load personal and shipping details for Checkout page from IndexedDB
     this.$store.dispatch('checkout/load')
@@ -111,6 +126,8 @@ export default {
       let newProductsQuery = prepareQuery({ queryConfig: 'newProducts' })
       let salesQuery = prepareQuery({ queryConfig: 'inspirations' })
 
+      store.dispatch('homepage/fetchNewCollection')
+
       store.dispatch('category/list', { includeFields: config.entities.optimize ? config.entities.category.includeFields : null }).then((categories) => {
         store.dispatch('product/list', {
           query: newProductsQuery,

From 17ea1ce57b5825c1c1adaf885c71118d631729d1 Mon Sep 17 00:00:00 2001
From: Alexander Devitsky <alexander.devitsky@gmail.com>
Date: Mon, 30 Mar 2020 22:57:19 +0300
Subject: [PATCH 03/15] Webpack config for tailwind

---
 README.md         | 29 -----------------------------
 webpack.config.js | 43 +++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 41 insertions(+), 31 deletions(-)

diff --git a/README.md b/README.md
index 4365e47..c67b53d 100644
--- a/README.md
+++ b/README.md
@@ -28,35 +28,6 @@ The result should look something like this:
   // ...
 ```
 
-
-## Tailwind Prerequisites
-
-You may need to run `yarn` from the vuetique theme directory.
-
-Add the following line to `core/build/webpack.base.config.js` in `postcssConfig` var
-
-```js
-require('tailwindcss')(path.join(themeRoot, 'tailwind.config.js')),
-```
-
-The result should look something like this:
-
-```js
-const postcssConfig =  {
-  loader: 'postcss-loader',
-  options: {
-    ident: 'postcss',
-    plugins: (loader) => [
-      require('tailwindcss')(path.join(themeRoot, 'tailwind.config.js')),
-      require('postcss-flexbugs-fixes'),
-      require('autoprefixer')({
-        flexbox: 'no-2009',
-      }),
-    ]
-  }
-};
-```
-
 ## Image hover support
 
 To make image hover function, you need to make a few changes to your Vue Storefront local.json file.
diff --git a/webpack.config.js b/webpack.config.js
index f31eabd..3df7804 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,4 +1,43 @@
-// You can extend default webpack build here. Read more on docs: https://github.com/DivanteLtd/vue-storefront/blob/master/doc/Working%20with%20webpack.md
+const themeRoot = require('@vue-storefront/core/build/theme-path');
+
+/**
+* @param {object} loader
+*/
+function addPlugins (loader) {
+  if(!loader) return
+
+  let options ={
+    ident: 'postcss',
+    plugins: (loader) => [
+      require('tailwindcss')(`${themeRoot}/tailwind.config.js`),
+      require('postcss-flexbugs-fixes'),
+      require('autoprefixer')({
+        flexbox: 'no-2009'
+      })
+    ]
+  };
+
+  loader.options = options;
+}
+
+/**
+ * @param {object} rules
+ */
+function addPostCSSPlugins (rules) {
+  const processedLoaders = [];
+
+  rules.forEach(rule => {
+    const loader = rule.use ? rule.use.find(item => item.loader === 'postcss-loader') : null;
+
+    if (!loader && processedLoaders.includes(loader)) return
+
+    addPlugins(loader);
+    processedLoaders.push(loader);
+  });
+}
+
 module.exports = function (config, { isClient, isDev }) {
-  return config
+  addPostCSSPlugins(config.module.rules);
+
+  return config;
 }

From 95971e4bfbf9fc25f797f77c38061ddbe87eedd8 Mon Sep 17 00:00:00 2001
From: Dmitry Kozachek <dmitry.kozachek@gmail.com>
Date: Fri, 17 Apr 2020 17:28:56 +0300
Subject: [PATCH 04/15] feat(modules): Add modules config to theme

---
 config/modules.ts | 48 +++++++++++++++++++++++++++++++++++++++
 webpack.config.js | 58 +++++++++++++++++++++++++----------------------
 2 files changed, 79 insertions(+), 27 deletions(-)
 create mode 100644 config/modules.ts

diff --git a/config/modules.ts b/config/modules.ts
new file mode 100644
index 0000000..994481e
--- /dev/null
+++ b/config/modules.ts
@@ -0,0 +1,48 @@
+import { VueStorefrontModule } from '@vue-storefront/core/lib/module'
+import { CatalogModule } from '@vue-storefront/core/modules/catalog'
+import { CatalogNextModule } from '@vue-storefront/core/modules/catalog-next'
+import { CartModule } from '@vue-storefront/core/modules/cart'
+import { CheckoutModule } from '@vue-storefront/core/modules/checkout'
+import { CompareModule } from '@vue-storefront/core/modules/compare'
+import { WishlistModule } from '@vue-storefront/core/modules/wishlist'
+import { NotificationModule } from '@vue-storefront/core/modules/notification'
+import { UrlModule } from '@vue-storefront/core/modules/url'
+import { BreadcrumbsModule } from '@vue-storefront/core/modules/breadcrumbs'
+import { UserModule } from '@vue-storefront/core/modules/user'
+import { CmsModule } from '@vue-storefront/core/modules/cms'
+import { GoogleTagManagerModule } from 'src/modules/google-tag-manager';
+import { AmpRendererModule } from 'src/modules/amp-renderer';
+import { PaymentBackendMethodsModule } from 'src/modules/payment-backend-methods'
+import { PaymentCashOnDeliveryModule } from 'src/modules/payment-cash-on-delivery'
+import { NewsletterModule } from '@vue-storefront/core/modules/newsletter'
+import { ReviewModule } from '@vue-storefront/core/modules/review'
+import { RecentlyViewedModule } from '@vue-storefront/core/modules/recently-viewed'
+
+import { registerModule } from '@vue-storefront/core/lib/modules'
+
+// TODO:distributed across proper pages BEFORE 1.11
+export function registerClientModules () {
+  registerModule(UrlModule)
+  registerModule(CatalogModule)
+  registerModule(CheckoutModule) // To Checkout
+  registerModule(CartModule)
+  registerModule(PaymentBackendMethodsModule)
+  registerModule(PaymentCashOnDeliveryModule)
+  registerModule(WishlistModule) // Trigger on wishlist icon click
+  registerModule(NotificationModule)
+  registerModule(UserModule) // Trigger on user icon click
+  registerModule(CatalogNextModule)
+  registerModule(CompareModule)
+  registerModule(BreadcrumbsModule)
+  registerModule(GoogleTagManagerModule)
+  registerModule(AmpRendererModule)
+  registerModule(CmsModule)
+  registerModule(NewsletterModule)
+  registerModule(ReviewModule)
+  registerModule(RecentlyViewedModule)
+}
+
+// Deprecated API, will be removed in 2.0
+export const registerModules: VueStorefrontModule[] = [
+  // Example
+]
diff --git a/webpack.config.js b/webpack.config.js
index 3df7804..89d0b9b 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,43 +1,47 @@
+// You can extend default webpack build here.
+// Read more in docs: https://github.com/DivanteLtd/vue-storefront/blob/master/docs/guide/core-themes/webpack.md
+const merge = require('webpack-merge');
 const themeRoot = require('@vue-storefront/core/build/theme-path');
 
-/**
-* @param {object} loader
-*/
-function addPlugins (loader) {
-  if(!loader) return
-
-  let options ={
-    ident: 'postcss',
-    plugins: (loader) => [
-      require('tailwindcss')(`${themeRoot}/tailwind.config.js`),
-      require('postcss-flexbugs-fixes'),
-      require('autoprefixer')({
-        flexbox: 'no-2009'
-      })
-    ]
-  };
-
-  loader.options = options;
+function addPostCSSPlugin (loader, plugin) {
+  const plugins = loader.options.plugins instanceof Function
+    ? loader.options.plugins()
+    : loader.options.plugins;
+
+  plugins.push(plugin);
+
+  loader.options.plugins = loader.options.plugins instanceof Function
+    ? () => plugins
+    : plugins;
 }
 
 /**
+ * Traverses webpack's module rules to find all PostCSS loaders. For each PostCSS loader
+ * the 'postcss-flexbugs-fixes' plugin has to be found and it has to be configured to skip
+ * @storefront-ui library from being processed.
+ *
  * @param {object} rules
  */
-function addPostCSSPlugins (rules) {
+function fixPostCSSPlugins (rules) {
   const processedLoaders = [];
 
   rules.forEach(rule => {
     const loader = rule.use ? rule.use.find(item => item.loader === 'postcss-loader') : null;
 
-    if (!loader && processedLoaders.includes(loader)) return
-
-    addPlugins(loader);
-    processedLoaders.push(loader);
+    if (loader && !processedLoaders.includes(loader)) {
+      addPostCSSPlugin(loader, require('tailwindcss')(`${themeRoot}/tailwind.config.js`));
+      processedLoaders.push(loader);
+    }
   });
 }
 
-module.exports = function (config, { isClient, isDev }) {
-  addPostCSSPlugins(config.module.rules);
+module.exports = function (config, { isClient }) {
+  const mergedConfig = merge(
+    { resolve: { alias: { 'src/modules/client': `${themeRoot}/config/modules` } } },
+    config
+  );
 
-  return config;
-}
+  fixPostCSSPlugins(mergedConfig.module.rules);
+
+  return mergedConfig;
+};

From def85b861463fe9c9e180949afdd461fe445b6c2 Mon Sep 17 00:00:00 2001
From: Dmitry Kozachek <dmitry.kozachek@gmail.com>
Date: Fri, 17 Apr 2020 17:29:23 +0300
Subject: [PATCH 05/15] fix(homepage): Fix featured products section width

---
 pages/Home.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/pages/Home.vue b/pages/Home.vue
index 8d99ac4..f5f8a0c 100755
--- a/pages/Home.vue
+++ b/pages/Home.vue
@@ -13,7 +13,9 @@
         </header>
       </div>
       <div class="row center-xs">
-        <product-listing :columns="defaultColumn" :products="getEverythingNewCollection" />
+        <div class="col-12">
+          <product-listing :columns="defaultColumn" :products="getEverythingNewCollection" />
+        </div>
       </div>
     </section>
 

From 8f20c82d209a56647013188e240e777e93309d33 Mon Sep 17 00:00:00 2001
From: Dmitry Kozachek <dmitry.kozachek@gmail.com>
Date: Fri, 17 Apr 2020 17:29:52 +0300
Subject: [PATCH 06/15] fix(product): Fix qty input buttons icon align

---
 components/theme/QtyInput.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/theme/QtyInput.vue b/components/theme/QtyInput.vue
index 97650fe..fd87b5b 100644
--- a/components/theme/QtyInput.vue
+++ b/components/theme/QtyInput.vue
@@ -19,10 +19,10 @@
       >
       <div class="input-number-controls">
         <button @click.prevent="incrementEvent">
-          <svg viewBox="0 0 15 15" class="vt-icon"><use xlink:href="#up"/></svg>
+          <svg viewBox="0 0 15 15" class="vt-icon mx-auto"><use xlink:href="#up"/></svg>
         </button>
         <button @click.prevent="decrementEvent">
-          <svg viewBox="0 0 25 25" class="vt-icon"><use xlink:href="#down"/></svg>
+          <svg viewBox="0 0 25 25" class="vt-icon mx-auto"><use xlink:href="#down"/></svg>
         </button>
       </div>
     </div>

From 5be98bb0aa997f41cedff8de335183626c7b7b81 Mon Sep 17 00:00:00 2001
From: Dmitry Kozachek <dmitry.kozachek@gmail.com>
Date: Fri, 17 Apr 2020 19:34:17 +0300
Subject: [PATCH 07/15] fix(pdp): Fix product details page

---
 components/core/ProductPrice.vue              |  90 +++++
 components/core/ProductQuantity.vue           | 249 ++++++++++++
 components/core/Spinner.vue                   |  19 +
 .../core/blocks/Compare/AddToCompare.vue      |  56 +++
 .../core/blocks/Form/BaseInputNumber.vue      |  99 +++++
 .../core/blocks/Form/ValidationMessages.vue   |  23 ++
 .../core/blocks/Wishlist/AddToWishlist.vue    |  48 ++-
 pages/Product.vue                             | 376 ++++++++++++------
 8 files changed, 821 insertions(+), 139 deletions(-)
 create mode 100644 components/core/ProductPrice.vue
 create mode 100644 components/core/ProductQuantity.vue
 create mode 100644 components/core/Spinner.vue
 create mode 100644 components/core/blocks/Compare/AddToCompare.vue
 create mode 100644 components/core/blocks/Form/BaseInputNumber.vue
 create mode 100644 components/core/blocks/Form/ValidationMessages.vue

diff --git a/components/core/ProductPrice.vue b/components/core/ProductPrice.vue
new file mode 100644
index 0000000..848b8ce
--- /dev/null
+++ b/components/core/ProductPrice.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="font-serif font-bold text-h1 pb-5 price">
+    <div
+      class="text-h1"
+      v-if="initialPrice.special && price.default && price.original"
+    >
+      <span
+        class="font-bold"
+      >{{ price.special | price(storeView) }}</span>&nbsp;
+      <span
+        class="text-h2 text-grey line-through"
+      >{{ price.original | price(storeView) }}</span>
+    </div>
+    <div
+      v-if="!initialPrice.special && price.default"
+    >
+      {{ price.default | price(storeView) }}
+    </div>
+  </div>
+</template>
+<script>
+import { getCustomOptionValues, getCustomOptionPriceDelta } from '@vue-storefront/core/modules/catalog/helpers/customOption'
+import { getBundleOptionsValues, getBundleOptionPrice } from '@vue-storefront/core/modules/catalog/helpers/bundleOptions'
+import get from 'lodash-es/get'
+import { currentStoreView } from '@vue-storefront/core/lib/multistore'
+
+export default {
+  name: 'ProductPrice',
+  props: {
+    product: {
+      type: Object,
+      default: () => ({})
+    },
+    customOptions: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    bundleOptionsPrice () {
+      const allBundeOptions = this.product.bundle_options || []
+      const selectedBundleOptions = Object.values(get(this.product, 'product_option.extension_attributes.bundle_options', {}))
+      const price = getBundleOptionPrice(
+        getBundleOptionsValues(selectedBundleOptions, allBundeOptions)
+      )
+      return price
+    },
+    customOptionsPriceDelta () {
+      const priceDelta = getCustomOptionPriceDelta(
+        getCustomOptionValues(Object.values(this.customOptions), this.product.custom_options),
+        this.product
+      )
+
+      return priceDelta
+    },
+    price () {
+      const customOptionPrice = this.customOptionsPriceDelta.priceInclTax
+      const special = (this.initialPrice.default + customOptionPrice) * this.product.qty
+      const original = (this.initialPrice.original + customOptionPrice) * this.product.qty
+      const defaultPrice = this.product.qty > 0
+        ? (this.initialPrice.default + customOptionPrice) * this.product.qty
+        : this.initialPrice.default
+
+      if (this.bundleOptionsPrice.priceInclTax > 0) {
+        return {
+          special,
+          original,
+          default: this.bundleOptionsPrice.priceInclTax
+        }
+      }
+
+      return {
+        special,
+        original,
+        default: defaultPrice
+      }
+    },
+    initialPrice () {
+      return {
+        default: this.product.price_incl_tax || this.product.priceInclTax || 0,
+        original: this.product.original_price_incl_tax || this.product.originalPriceInclTax || 0,
+        special: this.product.special_price || this.product.specialPrice || 0
+      }
+    },
+    storeView () {
+      return currentStoreView()
+    }
+  }
+}
+</script>
diff --git a/components/core/ProductQuantity.vue b/components/core/ProductQuantity.vue
new file mode 100644
index 0000000..be0a656
--- /dev/null
+++ b/components/core/ProductQuantity.vue
@@ -0,0 +1,249 @@
+<template>
+  <div class="product-quantity" :class="'qty-input__' + size">
+    <label class="pb-2 hidden" for="quantity">{{ $t('Quantity') }}</label>
+    <div class="flex h-full">
+      <input
+        id="quantity"
+        type="number"
+        :min="1"
+        :max="max"
+        :disabled="disabled"
+        :name="name"
+        :value="value"
+        @input="inputEvent"
+        @focus="$emit('focus')"
+        @blur="$v.$touch()"
+        @keyup.enter="keyupEnter"
+        @keyup.up="incrementEvent"
+        @keyup.down="decrementEvent"
+        @keyup="keyup"
+      >
+      <div class="input-number-controls">
+        <button @click.prevent="incrementEvent" :class="{ disabled }" :disabled="disabled">
+          <svg viewBox="0 0 15 15" class="vt-icon mx-auto"><use xlink:href="#up"/></svg>
+        </button>
+        <button @click.prevent="decrementEvent" :class="{ disabled }" :disabled="disabled">
+          <svg viewBox="0 0 25 25" class="vt-icon mx-auto"><use xlink:href="#down"/></svg>
+        </button>
+      </div>
+    </div>
+    <spinner v-if="loading" />
+  </div>
+</template>
+
+<script>
+import { minValue, maxValue, numeric, required } from 'vuelidate/lib/validators'
+import { onlineHelper } from '@vue-storefront/core/helpers'
+import BaseInputNumber from 'theme/components/core/blocks/Form/BaseInputNumber'
+import Spinner from 'theme/components/core/Spinner'
+
+export default {
+  components: {
+    Spinner,
+    BaseInputNumber
+  },
+  props: {
+    value: {
+      type: [Number, String],
+      required: true
+    },
+    showQuantity: {
+      type: Boolean,
+      default: false
+    },
+    maxQuantity: {
+      type: Number,
+      default: undefined
+    },
+    checkMaxQuantity: {
+      type: Boolean,
+      default: true
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    isSimpleOrConfigurable: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: 'md',
+      required: false
+    }
+  },
+  computed: {
+    isOnline (value) {
+      return onlineHelper.isOnline
+    },
+    max () {
+      if (!this.isOnline || !this.isSimpleOrConfigurable) {
+        return null
+      }
+
+      return this.maxQuantity
+    },
+    disabled () {
+      if (!this.isOnline) {
+        return false
+      }
+      return !this.maxQuantity && this.checkMaxQuantity && this.isSimpleOrConfigurable
+    },
+    name () {
+      if (this.isSimpleOrConfigurable && !this.loading && this.showQuantity) {
+        return this.$i18n.t(this.isOnline ? 'Quantity available' : 'Quantity available offline', { qty: this.maxQuantity })
+      }
+      return this.$i18n.t('Quantity')
+    }
+  },
+  validations () {
+    return {
+      value: {
+        minValue: minValue(1),
+        maxValue: maxValue(this.max) && !this.isSimpleOrConfigurable,
+        numeric,
+        required
+      }
+    }
+  },
+  watch: {
+    '$v.$invalid' (error) {
+      this.$emit('error', error)
+    }
+  },
+  methods: {
+    keyup ($event) {
+      this.$emit('keyup', $event)
+    },
+    keyupEnter ($event) {
+      if (this.disabled) {
+        return
+      }
+      let value = parseInt($event.target.value)
+      if (isNaN(value)) {
+        value = 0
+      }
+      this.$emit('keyup.enter', value)
+    },
+    inputEvent ($event) {
+      if (this.disabled) {
+        return
+      }
+      let value = parseInt($event.target.value, 10)
+      if (!isNaN(value)) {
+        this.$emit('input', value !== 0 ? Math.abs(value) : 1)
+      }
+    },
+    incrementEvent ($event) {
+      if (this.disabled) {
+        return
+      }
+      let value = parseInt(this.value)
+      if (isNaN(value)) {
+        value = 0
+      }
+      this.$emit('input', value + 1)
+    },
+    decrementEvent ($event) {
+      if (this.disabled) {
+        return
+      }
+      let value = parseInt(this.value)
+      if (isNaN(value)) {
+        value = 0
+      }
+      this.$emit('input', value > 1 ? value - 1 : 1)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.product-quantity {
+  position: relative;
+  /deep/ .spinner {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    margin: auto;
+  }
+}
+
+%qty-input {
+  @apply border border-grey text-center py-3 px-2 text-sm text-grey outline-none bg-white h-full;
+
+  &:focus {
+    @apply text-grey-dark;
+  }
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  &[type=number] {
+    -moz-appearance:textfield;
+  }
+}
+
+.qty-input {
+  &__lg {
+    height: 50px;
+
+    input {
+      @extend %qty-input;
+      width: 50px;
+    }
+  }
+
+  &__md {
+    height: 40px;
+
+    input {
+      @extend %qty-input;
+      width: 90px;
+    }
+
+    .input-number-controls button {
+      width: 25px;
+    }
+  }
+
+  &__sm {
+    height: 30px;
+
+    input {
+      @extend %qty-input;
+      width: 60px;
+    }
+
+    .input-number-controls button {
+      width: 20px;
+    }
+  }
+}
+
+.input-number-controls {
+  display: inline-block;
+
+  button {
+    @apply block border border-grey border-l-0 bg-white;
+
+    width: 30px;
+    height: 50%;
+
+    &:last-of-type {
+      border-top: none;
+    }
+
+    .vt-icon {
+      width: 8px;
+      height: 8px;
+    }
+  }
+}
+
+</style>
diff --git a/components/core/Spinner.vue b/components/core/Spinner.vue
new file mode 100644
index 0000000..fd44c6f
--- /dev/null
+++ b/components/core/Spinner.vue
@@ -0,0 +1,19 @@
+<template functional>
+  <div class="spinner flex justify-center items-center">
+    <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="22px" height="22px" viewBox="0 0 128 128" xml:space="preserve"><rect x="0" y="0" width="100%" height="100%" fill="transparent" /><g transform="rotate(135 64 64)"><circle cx="16" cy="64" r="16" fill="#000000" fill-opacity="1" /><circle cx="16" cy="64" r="16" fill="#555555" fill-opacity="0.67" transform="rotate(45,64,64)" /><circle cx="16" cy="64" r="16" fill="#949494" fill-opacity="0.42" transform="rotate(90,64,64)" /><circle cx="16" cy="64" r="16" fill="#cccccc" fill-opacity="0.2" transform="rotate(135,64,64)" /><circle cx="16" cy="64" r="16" fill="#e1e1e1" fill-opacity="0.12" transform="rotate(180,64,64)" /><circle cx="16" cy="64" r="16" fill="#e1e1e1" fill-opacity="0.12" transform="rotate(225,64,64)" /><circle cx="16" cy="64" r="16" fill="#e1e1e1" fill-opacity="0.12" transform="rotate(270,64,64)" /><circle cx="16" cy="64" r="16" fill="#e1e1e1" fill-opacity="0.12" transform="rotate(315,64,64)" /><animateTransform attributeName="transform" type="rotate" values="0 64 64;315 64 64;270 64 64;225 64 64;180 64 64;135 64 64;90 64 64;45 64 64" calcMode="discrete" dur="720ms" repeatCount="indefinite" /></g></svg>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Spinner',
+  functional: true
+}
+</script>
+
+<style lang="scss" scoped>
+.spinner {
+  background-color: rgba(255,255,255,0.5);
+  padding: 0 15px;
+}
+</style>
diff --git a/components/core/blocks/Compare/AddToCompare.vue b/components/core/blocks/Compare/AddToCompare.vue
new file mode 100644
index 0000000..e3b5cae
--- /dev/null
+++ b/components/core/blocks/Compare/AddToCompare.vue
@@ -0,0 +1,56 @@
+<template>
+  <button
+    @click="isOnCompare ? removeProduct(product) : addProduct(product)"
+    class="inline-flex items-center text-grey-dark"
+    type="button"
+    data-testid="addToCompare"
+  >
+    <slot>
+      <svg viewBox="0 0 25 25" class="vt-icon pr-1">
+        <use xlink:href="#compare"/>
+      </svg>
+      <template v-if="!isOnCompare">
+        {{ $t('Add to compare') }}
+      </template>
+      <template v-else>
+        {{ $t('Remove from compare') }}
+      </template>
+    </slot>
+  </button>
+</template>
+
+<script>
+import { IsOnCompare } from '@vue-storefront/core/modules/compare/components/IsOnCompare'
+import { AddToCompare } from '@vue-storefront/core/modules/compare/components/AddToCompare'
+import { RemoveFromCompare } from '@vue-storefront/core/modules/compare/components/RemoveFromCompare'
+import i18n from '@vue-storefront/i18n'
+import { htmlDecode } from '@vue-storefront/core/lib/store/filters'
+
+export default {
+  mixins: [IsOnCompare, AddToCompare, RemoveFromCompare],
+  props: {
+    product: {
+      required: true,
+      type: Object
+    }
+  },
+  methods: {
+    addProduct (product) {
+      this.addToCompare(product)
+      this.$store.dispatch('notification/spawnNotification', {
+        type: 'success',
+        message: i18n.t('Product {productName} has been added to the compare!', { productName: htmlDecode(product.name) }),
+        action1: { label: i18n.t('OK') }
+      }, { root: true })
+    },
+    removeProduct (product) {
+      this.removeFromCompare(product)
+      this.$store.dispatch('notification/spawnNotification', {
+        type: 'success',
+        message: i18n.t('Product {productName} has been removed from compare!', { productName: htmlDecode(product.name) }),
+        action1: { label: i18n.t('OK') }
+      }, { root: true })
+    }
+  }
+}
+</script>
diff --git a/components/core/blocks/Form/BaseInputNumber.vue b/components/core/blocks/Form/BaseInputNumber.vue
new file mode 100644
index 0000000..92c60ef
--- /dev/null
+++ b/components/core/blocks/Form/BaseInputNumber.vue
@@ -0,0 +1,99 @@
+<template>
+  <div class="relative">
+    <input
+      :id="getInputId"
+      type="number"
+      :min="min"
+      :max="max"
+      :disabled="disabled"
+      class="w-full border border-solid border-grey text-sm text-grey px-3 h-10 bg-transparent outline-none focus:text-grey-dark"
+      :class="{empty: value === '', 'has-error' : (isValid === false)}"
+      :focus="autofocus"
+      v-model="inputValue"
+      @blur="$emit('blur', $event.target.value)"
+      @keyup="$emit('keyup', $event)"
+    >
+    <ValidationMessages v-if="validations" :validations="validations" />
+  </div>
+</template>
+
+<script>
+import ValidationMessages from './ValidationMessages.vue'
+export default {
+  name: 'BaseInput',
+  components: {
+    ValidationMessages
+  },
+  props: {
+    value: {
+      type: [String, Number],
+      default: 0
+    },
+    name: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    min: {
+      type: Number,
+      default: 0
+    },
+    max: {
+      type: Number,
+      default: undefined
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    autofocus: {
+      type: Boolean,
+      default: false
+    },
+    validations: {
+      type: Array,
+      default: () => []
+    },
+    onlyPositive: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    isValid: function () {
+      // Single validation
+      if (typeof this.validation === 'object' && this.validation.condition === true) {
+        return false
+      }
+      // Multiple validation
+      if (this.validations.length > 0) {
+        let isValid = true
+        this.validations.forEach((item) => {
+          if (item.condition === true) isValid = false
+        })
+        return isValid
+      }
+
+      return true
+    },
+    getInputId () {
+      return `input_${this._uid}`
+    },
+    inputValue: {
+      get () {
+        return this.value
+      },
+      set (value) {
+        if (!this.onlyPositive) {
+          this.$emit('input', value)
+        } else {
+          const targetValue = parseInt(value, 10)
+          if (!isNaN(targetValue)) {
+            this.$emit('input', targetValue !== 0 ? Math.abs(targetValue) : 1)
+          }
+        }
+      }
+    }
+  }
+}
+</script>
diff --git a/components/core/blocks/Form/ValidationMessages.vue b/components/core/blocks/Form/ValidationMessages.vue
new file mode 100644
index 0000000..3f42c6a
--- /dev/null
+++ b/components/core/blocks/Form/ValidationMessages.vue
@@ -0,0 +1,23 @@
+<template>
+  <div v-if="validations">
+    <span
+      v-for="(validation, index) in validations"
+      :key="index"
+      v-if="validation.condition"
+      class="block cl-error h6 mt8"
+      data-testid="errorMessage"
+    >
+      {{ validation.text }}
+    </span>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    validations: {
+      type: Array,
+      default: () => []
+    }
+  }
+}
+</script>
diff --git a/components/core/blocks/Wishlist/AddToWishlist.vue b/components/core/blocks/Wishlist/AddToWishlist.vue
index 7bdc41e..7fd06c8 100644
--- a/components/core/blocks/Wishlist/AddToWishlist.vue
+++ b/components/core/blocks/Wishlist/AddToWishlist.vue
@@ -1,19 +1,16 @@
 <template>
-  <button
-    @click="isOnWishlist ? removeFromWishlist(product) : addToWishlist(product)"
-    class="inline-flex items-center text-grey-dark"
-    type="button"
-    data-testid="addToWishlist"
-  >
-    <svg viewBox="0 0 25 25" class="vt-icon pr-1">
-      <use xlink:href="#wishlist"/>
-    </svg>
-    <template v-if="!isOnWishlist">
-      {{ $t('Add to Wishlist') }}
-    </template>
-    <template v-else>
-      {{ $t('Remove') }}
-    </template>
+  <button @click="isOnWishlist ? removeProductFromWhishList(product) : addProductToWhishlist(product)" class="inline-flex items-center text-grey-dark" type="button" data-testid="addToWishlist">
+    <slot>
+      <svg viewBox="0 0 25 25" class="vt-icon pr-1">
+        <use xlink:href="#wishlist" />
+      </svg>
+      <template v-if="!isOnWishlist">
+        {{ $t('Add to Wishlist') }}
+      </template>
+      <template v-else>
+        {{ $t('Remove') }}
+      </template>
+    </slot>
   </button>
 </template>
 
@@ -21,12 +18,27 @@
 import { IsOnWishlist } from '@vue-storefront/core/modules/wishlist/components/IsOnWishlist'
 import { AddToWishlist } from '@vue-storefront/core/modules/wishlist/components/AddToWishlist'
 import { RemoveFromWishlist } from '@vue-storefront/core/modules/wishlist/components/RemoveFromWishlist'
+import i18n from '@vue-storefront/i18n'
+import { htmlDecode } from '@vue-storefront/core/lib/store/filters'
 
 export default {
   mixins: [ IsOnWishlist, AddToWishlist, RemoveFromWishlist ],
-  computed: {
-    favoriteIcon () {
-      return this.isOnWishlist ? 'favorite' : 'favorite_border'
+  methods: {
+    addProductToWhishlist (product) {
+      this.$store.dispatch('notification/spawnNotification', {
+        type: 'success',
+        message: i18n.t('Product {productName} has been added to wishlist!', { productName: htmlDecode(product.name) }),
+        action1: { label: i18n.t('OK') }
+      }, { root: true })
+      this.addToWishlist(product)
+    },
+    removeProductFromWhishList (product) {
+      this.$store.dispatch('notification/spawnNotification', {
+        type: 'success',
+        message: i18n.t('Product {productName} has been removed from wishlist!', { productName: htmlDecode(product.name) }),
+        action1: { label: i18n.t('OK') }
+      }, { root: true })
+      this.removeFromWishlist(product)
     }
   }
 }
diff --git a/pages/Product.vue b/pages/Product.vue
index 1679761..d732a8e 100644
--- a/pages/Product.vue
+++ b/pages/Product.vue
@@ -1,18 +1,15 @@
 <template>
   <div id="product" itemscope itemtype="http://schema.org/Product">
-    <breadcrumbs
-      :routes="breadcrumbs.routes"
-      :active-route="breadcrumbs.name"
-    />
+    <breadcrumbs />
     <section class="bg-grey-lightest">
       <div class="container">
         <section class="md:flex">
           <div class="w-full md:w-3/5">
             <div class="flex">
-              <div v-if="gallery.length > 1" class="product-thumbnails w-1/12 hidden md:block">
+              <div v-if="getProductGallery.length > 1" class="product-thumbnails w-1/12 hidden md:block">
                 <ul>
                   <li
-                    v-for="(images, key) in gallery"
+                    v-for="(images, key) in getProductGallery"
                     :key="images.src"
                     class="mb-1 bg-grey-lighter"
                   >
@@ -20,7 +17,7 @@
                       :src="images.src"
                       ref="images"
                       @click="$refs.gallery.$refs.carousel.navigate(key)"
-                      :alt="product.name"
+                      :alt="getCurrentProduct.name"
                       class="block border cursor-pointer"
                       :class="currentGalleryPage === key ? 'border-black' : 'border-grey-light'">
                   </li>
@@ -30,10 +27,10 @@
               <div class="w-full md:w-11/12">
                 <product-gallery
                   ref="gallery"
-                  :gallery="gallery"
-                  :offline="offlineImage"
-                  :configuration="configuration"
-                  :product="product"
+                  :offline="getOfflineImage"
+                  :gallery="getProductGallery"
+                  :configuration="getCurrentProductConfiguration"
+                  :product="getCurrentProduct"
                   @page-change="(page) => currentGalleryPage = page"
                 />
               </div>
@@ -41,65 +38,48 @@
           </div>
           <div class="w-full md:w-2/5 md:px-10">
             <h1 data-testid="productName" itemprop="name">
-              {{ product.name | htmlDecode }}
+              {{ getCurrentProduct.name | htmlDecode }}
             </h1>
             <div class="text-grey text-sm mb-3 uppercase">
-              sku: {{ product.sku }}
+              sku: {{ getCurrentProduct.sku }}
             </div>
             <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
-              <meta itemprop="priceCurrency" :content="currentStore.i18n.currencyCode">
-              <meta itemprop="price" :content="parseFloat(product.priceInclTax).toFixed(2)">
-              <div
-                class="font-serif font-bold text-h1 pb-5 price"
-                v-if="product.type_id !== 'grouped'"
-              >
-                <div
-                  class="text-h1"
-                  v-if="product.special_price && product.priceInclTax && product.originalPriceInclTax"
-                >
-                  <span class="font-bold">
-                    {{ product.priceInclTax * product.qty | price }}
-                  </span>&nbsp;
-                  <span class="text-h2 text-grey line-through">
-                    {{ product.originalPriceInclTax * product.qty | price }}
-                  </span>
-                </div>
-                <div
-                  v-if="!product.special_price && product.priceInclTax"
-                >
-                  {{ product.priceInclTax * product.qty | price }}
-                </div>
-              </div>
+              <meta itemprop="priceCurrency" :content="$store.state.storeView.i18n.currencyCode">
+              <meta itemprop="price" :content="parseFloat(getCurrentProduct.priceInclTax).toFixed(2)">
+              <meta itemprop="availability" :content="structuredData.availability">
+              <meta itemprop="url" :content="getCurrentProduct.url_path">
+              <product-price
+                class="mb40"
+                v-if="getCurrentProduct.type_id !== 'grouped'"
+                :product="getCurrentProduct"
+                :custom-options="getCurrentCustomOptions"
+              />
               <div
                 class="variants"
-                v-if="product.type_id =='configurable' && !loading"
+                v-if="getCurrentProduct.type_id =='configurable'"
               >
-                <div class="error" v-if="product.errors && Object.keys(product.errors).length > 0">
-                  {{ product.errors | formatProductMessages }}
+                <div class="error" v-if="getCurrentProduct.errors && Object.keys(getCurrentProduct.errors).length > 0">
+                  {{ getCurrentProduct.errors | formatProductMessages }}
                 </div>
                 <div
                   class="relative"
-                  v-for="(option, index) in product.configurable_options"
-                  v-if="(!product.errors || Object.keys(product.errors).length === 0) && Object.keys(configuration).length > 0"
-                  :key="index"
+                  v-for="option in getProductOptions"
+                  :key="option.id"
                 >
                   <div class="pt-4 pb-2" data-testid="variantsLabel">
                     <span class="font-bold">{{ option.label }}</span>:
                     <span>
-                      {{ configuration[option.attribute_code ? option.attribute_code : option.label.toLowerCase()] ? configuration[option.attribute_code ? option.attribute_code : option.label.toLowerCase()].label : null }}
+                      {{ getOptionLabel(option) }}
                     </span>
                   </div>
                   <div class="variants-wrapper">
                     <div v-if="option.label == 'Color'">
                       <color-selector
-                        v-for="(c, i) in options[option.attribute_code]"
-                        v-if="isOptionAvailable(c)"
-                        :key="i"
-                        :id="c.id"
-                        :label="c.label"
-                        context="product"
-                        :code="option.attribute_code"
-                        :class="{ active: c.id == configuration[option.attribute_code].id }"
+                        v-for="filter in getAvailableFilters[option.attribute_code]"
+                        :key="filter.id"
+                        :variant="filter"
+                        :selected-filters="getSelectedFilters"
+                        @change="changeFilter"
                       />
                     </div>
                     <div class="sizes" v-else-if="option.label == 'Size'">
@@ -112,30 +92,20 @@
                         {{ $t('Size guide') }}
                       </router-link>
                       <size-selector
-                        v-for="(s, i) in options[option.attribute_code]"
-                        v-if="isOptionAvailable(s)"
-                        :key="i"
-                        :id="s.id"
-                        :label="s.label"
-                        context="product"
-                        :code="option.attribute_code"
-
-                        :class="{ active: s.id == configuration[option.attribute_code].id }"
-                        v-focus-clean
+                        v-for="filter in getAvailableFilters[option.attribute_code]"
+                        :key="filter.id"
+                        :variant="filter"
+                        :selected-filters="getSelectedFilters"
+                        @change="changeFilter"
                       />
                     </div>
                     <div :class="option.attribute_code" v-else>
                       <generic-selector
-                        v-for="(s, i) in options[option.attribute_code]"
-                        v-if="isOptionAvailable(s)"
-                        :key="i"
-                        :id="s.id"
-                        :label="s.label"
-                        context="product"
-                        :code="option.attribute_code"
-
-                        :class="{ active: s.id == configuration[option.attribute_code].id }"
-                        v-focus-clean
+                        v-for="filter in getAvailableFilters[option.attribute_code]"
+                        :key="filter.id"
+                        :variant="filter"
+                        :selected-filters="getSelectedFilters"
+                        @change="changeFilter"
                       />
                     </div>
                   </div>
@@ -143,27 +113,34 @@
               </div>
             </div>
             <product-links
-              v-if="product.type_id =='grouped' && !loading"
-              :products="product.product_links"
+              v-if="getCurrentProduct.type_id =='grouped'"
+              :products="getCurrentProduct.product_links"
             />
             <product-bundle-options
-              v-if="product.bundle_options && product.bundle_options.length > 0 && !loading"
-              :product="product"
+              v-if="getCurrentProduct.bundle_options && getCurrentProduct.bundle_options.length > 0"
+              :product="getCurrentProduct"
             />
             <product-custom-options
-              v-else-if="product.custom_options && product.custom_options.length > 0 && !loading"
-              :product="product"
+              v-else-if="getCurrentProduct.custom_options && getCurrentProduct.custom_options.length > 0"
+              :product="getCurrentProduct"
             />
             <div class="flex mt-6 pb-5 border-b">
-              <qty-input
-                v-if="product.type_id !== 'grouped' && product.type_id !== 'bundle'"
-                v-model.number="product.qty"
+              <product-quantity
                 class="mr-5"
-                size="lg"/>
+                v-if="getCurrentProduct.type_id !== 'grouped' && getCurrentProduct.type_id !== 'bundle'"
+                v-model="getCurrentProduct.qty"
+                :max-quantity="maxQuantity"
+                :loading="isStockInfoLoading"
+                :is-simple-or-configurable="isSimpleOrConfigurable"
+                :show-quantity="manageQuantity"
+                :check-max-quantity="manageQuantity"
+                size="lg"
+                @error="handleQuantityError"
+              />
 
               <div class="flex-grow flex">
                 <add-to-cart
-                  :product="product"
+                  :product="getCurrentProduct"
                   class="py-3 text-sm"
                 />
               </div>
@@ -171,25 +148,10 @@
 
             <div class="row text-sm md:py-5 text-center add-to-buttons">
               <div class="col-6">
-                <wishlist-button :product="product" />
+                <AddToWishlist :product="getCurrentProduct" />
               </div>
               <div class="col-6">
-                <button
-                  @click="isOnCompare ? removeFromList('compare') : addToList('compare')"
-                  class="inline-flex items-center text-grey-dark"
-                  type="button"
-                  data-testid="addToCompare"
-                >
-                  <svg viewBox="0 0 25 25" class="vt-icon pr-1">
-                    <use xlink:href="#compare"/>
-                  </svg>
-                  <template v-if="!isOnCompare">
-                    {{ $t('Add to compare') }}
-                  </template>
-                  <template v-else>
-                    {{ $t('Remove from compare') }}
-                  </template>
-                </button>
+                <AddToCompare :product="getCurrentProduct" />
               </div>
             </div>
           </div>
@@ -217,7 +179,7 @@
               <div
                 class="text-h5 leading-loose"
                 itemprop="description"
-                v-html="product.description"
+                v-html="getCurrentProduct.description"
               />
               <div
                 class="details-overlay"
@@ -240,8 +202,8 @@
             <ul class="p-0 m-0 my-2 md:my-0 leading-normal attributes">
               <product-attribute
                 :key="attr.attribute_code"
-                v-for="attr in customAttributes"
-                :product="product"
+                v-for="attr in getCustomAttributes"
+                :product="getCurrentProduct"
                 :attribute="attr"
                 empty-placeholder="N/A"
               />
@@ -264,26 +226,44 @@
       </div>
     </div>
 
-    <related-products
-      type="upsell"
-      :heading="$t('We found other products you might like')"
-    />
-    <promoted-offers collection="productBanners" class="my-8 px-6" />
-    <related-products type="related" />
+    <lazy-hydrate when-idle>
+      <related-products
+        type="upsell"
+        :heading="$t('We found other products you might like')"
+      />
+    </lazy-hydrate>
+    <lazy-hydrate when-idle>
+      <promoted-offers collection="productBanners" class="my-8 px-6" />
+    </lazy-hydrate>
+    <lazy-hydrate when-idle>
+      <related-products type="related" />
+    </lazy-hydrate>
 
     <div class="container my-4">
-      <no-ssr>
+      <lazy-hydrate when-idle>
         <recently-viewed />
-      </no-ssr>
+      </lazy-hydrate>
     </div>
-
   </div>
 </template>
 
 <script>
-import NoSSR from 'vue-no-ssr'
-import Product from '@vue-storefront/core/pages/Product'
+import { mapGetters } from 'vuex'
 import VueOfflineMixin from 'vue-offline/mixin'
+import config from 'config'
+import LazyHydrate from 'vue-lazy-hydration'
+
+import { registerModule } from '@vue-storefront/core/lib/modules'
+import { ReviewModule } from '@vue-storefront/core/modules/review'
+import { RecentlyViewedModule } from '@vue-storefront/core/modules/recently-viewed'
+import { onlineHelper, isServer } from '@vue-storefront/core/helpers'
+import { ProductOption } from '@vue-storefront/core/modules/catalog/components/ProductOption.ts'
+import { catalogHooksExecutors } from '@vue-storefront/core/modules/catalog-next/hooks'
+import { htmlDecode } from '@vue-storefront/core/filters'
+import { isOptionAvailableAsync } from '@vue-storefront/core/modules/catalog/helpers/index'
+import { getAvailableFiltersByProduct, getSelectedFiltersByProduct } from '@vue-storefront/core/modules/catalog/helpers/filters'
+import { localizedRoute, currentStoreView } from '@vue-storefront/core/lib/multistore'
+
 import RelatedProducts from 'theme/components/core/blocks/Product/Related.vue'
 import Reviews from 'theme/components/core/blocks/Reviews/Reviews.vue'
 import AddToCart from 'theme/components/core/AddToCart.vue'
@@ -292,21 +272,22 @@ import ColorSelector from 'theme/components/core/ColorSelector.vue'
 import SizeSelector from 'theme/components/core/SizeSelector.vue'
 import Breadcrumbs from 'theme/components/core/Breadcrumbs.vue'
 import ProductAttribute from 'theme/components/core/ProductAttribute.vue'
-import ProductTile from 'theme/components/core/ProductTile.vue'
 import ProductLinks from 'theme/components/core/ProductLinks.vue'
 import ProductCustomOptions from 'theme/components/core/ProductCustomOptions.vue'
 import ProductBundleOptions from 'theme/components/core/ProductBundleOptions.vue'
 import ProductGallery from 'theme/components/core/ProductGallery'
 import RecentlyViewed from 'theme/components/core/blocks/MyAccount/RecentlyViewed'
+import ProductPrice from 'theme/components/core/ProductPrice'
+import AddToWishlist from 'theme/components/core/blocks/Wishlist/AddToWishlist'
+import AddToCompare from 'theme/components/core/blocks/Compare/AddToCompare'
+import ProductQuantity from 'theme/components/core/ProductQuantity.vue'
 
 import focusClean from 'theme/components/theme/directives/focusClean'
 import PromotedOffers from 'theme/components/theme/blocks/PromotedOffers/PromotedOffers'
-import QtyInput from 'theme/components/theme/QtyInput'
 
 export default {
   components: {
-    'no-ssr': NoSSR,
-    'WishlistButton': () => import(/* webpackChunkName: "wishlist" */'theme/components/core/blocks/Wishlist/AddToWishlist'),
+    LazyHydrate,
     AddToCart,
     Breadcrumbs,
     ColorSelector,
@@ -316,23 +297,124 @@ export default {
     ProductCustomOptions,
     ProductGallery,
     ProductLinks,
-    ProductTile,
     PromotedOffers,
     RelatedProducts,
     Reviews,
     SizeSelector,
     RecentlyViewed,
-    QtyInput
+    ProductPrice,
+    AddToWishlist,
+    AddToCompare,
+    ProductQuantity
+  },
+  mixins: [ProductOption, VueOfflineMixin],
+  directives: { focusClean },
+  beforeCreate () {
+    registerModule(ReviewModule)
+    registerModule(RecentlyViewedModule)
   },
-  mixins: [Product, VueOfflineMixin],
   data () {
     return {
       detailsOpen: false,
+      maxQuantity: 0,
+      quantityError: false,
+      isStockInfoLoading: false,
+      hasAttributesLoaded: false,
+      manageQuantity: true,
       detailsAccordion: null,
       currentGalleryPage: 0
     }
   },
-  directives: { focusClean },
+  computed: {
+    ...mapGetters({
+      getCurrentCategory: 'category-next/getCurrentCategory',
+      getCurrentProduct: 'product/getCurrentProduct',
+      getProductGallery: 'product/getProductGallery',
+      getCurrentProductConfiguration: 'product/getCurrentProductConfiguration',
+      getOriginalProduct: 'product/getOriginalProduct',
+      attributesByCode: 'attribute/attributeListByCode',
+      getCurrentCustomOptions: 'product/getCurrentCustomOptions'
+    }),
+    getOptionLabel () {
+      return (option) => {
+        const configName = option.attribute_code ? option.attribute_code : option.label.toLowerCase()
+        return this.getCurrentProductConfiguration[configName] ? this.getCurrentProductConfiguration[configName].label : configName
+      }
+    },
+    isOnline (value) {
+      return onlineHelper.isOnline
+    },
+    structuredData () {
+      return {
+        availability: this.getCurrentProduct.stock && this.getCurrentProduct.stock.is_in_stock ? 'InStock' : 'OutOfStock'
+      }
+    },
+    getProductOptions () {
+      if (
+        this.getCurrentProduct.errors &&
+        Object.keys(this.getCurrentProduct.errors).length &&
+        Object.keys(this.getCurrentProductConfiguration).length
+      ) {
+        return []
+      }
+      return this.getCurrentProduct.configurable_options
+    },
+    getOfflineImage () {
+      return {
+        src: this.getThumbnail(this.getCurrentProduct.image, config.products.thumbnails.width, config.products.thumbnails.height),
+        error: this.getThumbnail(this.getCurrentProduct.image, config.products.thumbnails.width, config.products.thumbnails.height),
+        loading: this.getThumbnail(this.getCurrentProduct.image, config.products.thumbnails.width, config.products.thumbnails.height)
+      }
+    },
+    getCustomAttributes () {
+      return Object.values(this.attributesByCode).filter(a => {
+        return a.is_visible && a.is_user_defined && (parseInt(a.is_visible_on_front) || a.is_visible_on_front === true) && this.getCurrentProduct[a.attribute_code]
+      }).sort((a, b) => { return a.attribute_id > b.attribute_id })
+    },
+    getAvailableFilters () {
+      return getAvailableFiltersByProduct(this.getCurrentProduct)
+    },
+    getSelectedFilters () {
+      return getSelectedFiltersByProduct(this.getCurrentProduct, this.getCurrentProductConfiguration)
+    },
+    isSimpleOrConfigurable () {
+      return ['simple', 'configurable'].includes(this.getCurrentProduct.type_id)
+    },
+    isAddToCartDisabled () {
+      if (this.quantityError || this.isStockInfoLoading) {
+        return false
+      }
+
+      return this.isOnline && !this.maxQuantity && this.manageQuantity && this.isSimpleOrConfigurable
+    }
+  },
+  async mounted () {
+    await this.$store.dispatch('recently-viewed/addItem', this.getCurrentProduct)
+  },
+  async asyncData ({ store, route }) {
+    const product = await store.dispatch('product/loadProduct', { parentSku: route.params.parentSku, childSku: route && route.params && route.params.childSku ? route.params.childSku : null })
+    const loadBreadcrumbsPromise = store.dispatch('product/loadProductBreadcrumbs', { product })
+    if (isServer) await loadBreadcrumbsPromise
+    catalogHooksExecutors.productPageVisited(product)
+  },
+  beforeRouteEnter (to, from, next) {
+    if (isServer) {
+      next()
+    } else {
+      next((vm) => {
+        vm.getQuantity()
+      })
+    }
+  },
+  watch: {
+    isOnline: {
+      handler (isOnline) {
+        if (isOnline) {
+          this.getQuantity()
+        }
+      }
+    }
+  },
   methods: {
     showDetails (event) {
       this.detailsOpen = true
@@ -351,6 +433,58 @@ export default {
         message: this.$t('No such configuration for the product. Please do choose another combination of attributes.'),
         action1: { label: this.$t('OK') }
       })
+    },
+    changeFilter (variant) {
+      this.$bus.$emit(
+        'filter-changed-product',
+        Object.assign({ attribute_code: variant.type }, variant)
+      )
+      this.getQuantity()
+    },
+    openSizeGuide () {
+      this.$bus.$emit('modal-show', 'modal-sizeguide')
+    },
+    isOptionAvailable (option) { // check if the option is available
+      const currentConfig = Object.assign({}, this.getCurrentProductConfiguration)
+      currentConfig[option.type] = option
+      return isOptionAvailableAsync(this.$store, { product: this.getCurrentProduct, configuration: currentConfig })
+    },
+    async getQuantity () {
+      if (this.isStockInfoLoading) return // stock info is already loading
+      this.isStockInfoLoading = true
+      try {
+        const res = await this.$store.dispatch('stock/check', {
+          product: this.getCurrentProduct,
+          qty: this.getCurrentProduct.qty
+        })
+
+        this.manageQuantity = res.isManageStock
+        this.maxQuantity = res.isManageStock ? res.qty : null
+      } finally {
+        this.isStockInfoLoading = false
+      }
+    },
+    handleQuantityError (error) {
+      this.quantityError = error
+    }
+  },
+  metaInfo () {
+    const storeView = currentStoreView()
+    return {
+      link: [
+        { rel: 'amphtml',
+          href: this.$router.resolve(localizedRoute({
+            name: this.getCurrentProduct.type_id + '-product-amp',
+            params: {
+              parentSku: this.getCurrentProduct.parentSku ? this.getCurrentProduct.parentSku : this.getCurrentProduct.sku,
+              slug: this.getCurrentProduct.slug,
+              childSku: this.getCurrentProduct.sku
+            }
+          }, storeView.storeCode)).href
+        }
+      ],
+      title: htmlDecode(this.getCurrentProduct.meta_title || this.getCurrentProduct.name),
+      meta: this.getCurrentProduct.meta_description ? [{ vmid: 'description', name: 'description', content: htmlDecode(this.getCurrentProduct.meta_description) }] : []
     }
   }
 }

From 64888abbf3b184c7628558767313ccdecc5dd9c5 Mon Sep 17 00:00:00 2001
From: Dmitry Kozachek <dmitry.kozachek@gmail.com>
Date: Fri, 17 Apr 2020 19:37:13 +0300
Subject: [PATCH 08/15] fix(modules): Register additional required modules

---
 components/core/blocks/Checkout/OrderReview.vue  |  6 ++++++
 components/core/blocks/Checkout/ThankYouPage.vue |  5 +++++
 config/modules.ts                                |  4 ----
 pages/Checkout.vue                               |  5 +++++
 pages/Home.vue                                   |  6 ++++++
 pages/MyAccount.vue                              | 13 +++++++++++--
 6 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/components/core/blocks/Checkout/OrderReview.vue b/components/core/blocks/Checkout/OrderReview.vue
index 7521d13..d87c0d3 100644
--- a/components/core/blocks/Checkout/OrderReview.vue
+++ b/components/core/blocks/Checkout/OrderReview.vue
@@ -119,6 +119,9 @@ import Modal from 'theme/components/core/Modal'
 import { OrderReview } from '@vue-storefront/core/modules/checkout/components/OrderReview'
 import ValidationError from 'theme/components/core/ValidationError'
 
+import { OrderModule } from '@vue-storefront/core/modules/order'
+import { registerModule } from '@vue-storefront/core/lib/modules'
+
 export default {
   components: {
     BaseCheckbox,
@@ -135,6 +138,9 @@ export default {
       }
     }
   },
+  beforeCreate () {
+    registerModule(OrderModule)
+  },
   methods: {
     onSuccess () {
       this.$store.dispatch('notification/spawnNotification', {
diff --git a/components/core/blocks/Checkout/ThankYouPage.vue b/components/core/blocks/Checkout/ThankYouPage.vue
index 733f18d..8a14ca0 100644
--- a/components/core/blocks/Checkout/ThankYouPage.vue
+++ b/components/core/blocks/Checkout/ThankYouPage.vue
@@ -81,6 +81,8 @@ import BaseTextarea from 'theme/components/core/blocks/Form/BaseTextarea'
 import ButtonOutline from 'theme/components/theme/ButtonOutline'
 import VueOfflineMixin from 'vue-offline/mixin'
 import { EmailForm } from '@vue-storefront/core/modules/mailer/components/EmailForm'
+import { registerModule } from '@vue-storefront/core/lib/modules'
+import { MailerModule } from '@vue-storefront/core/modules/mailer'
 
 export default {
   name: 'ThankYouPage',
@@ -90,6 +92,9 @@ export default {
       feedback: ''
     }
   },
+  beforeCreate () {
+    registerModule(MailerModule)
+  },
   computed: {
     lastOrderConfirmation () {
       return this.$store.state.order.last_order_confirmation ? this.$store.state.order.last_order_confirmation.confirmation : {}
diff --git a/config/modules.ts b/config/modules.ts
index 994481e..ed49f0b 100644
--- a/config/modules.ts
+++ b/config/modules.ts
@@ -15,8 +15,6 @@ import { AmpRendererModule } from 'src/modules/amp-renderer';
 import { PaymentBackendMethodsModule } from 'src/modules/payment-backend-methods'
 import { PaymentCashOnDeliveryModule } from 'src/modules/payment-cash-on-delivery'
 import { NewsletterModule } from '@vue-storefront/core/modules/newsletter'
-import { ReviewModule } from '@vue-storefront/core/modules/review'
-import { RecentlyViewedModule } from '@vue-storefront/core/modules/recently-viewed'
 
 import { registerModule } from '@vue-storefront/core/lib/modules'
 
@@ -38,8 +36,6 @@ export function registerClientModules () {
   registerModule(AmpRendererModule)
   registerModule(CmsModule)
   registerModule(NewsletterModule)
-  registerModule(ReviewModule)
-  registerModule(RecentlyViewedModule)
 }
 
 // Deprecated API, will be removed in 2.0
diff --git a/pages/Checkout.vue b/pages/Checkout.vue
index 65a3354..ac05558 100644
--- a/pages/Checkout.vue
+++ b/pages/Checkout.vue
@@ -36,6 +36,8 @@ import Payment from 'theme/components/core/blocks/Checkout/Payment'
 import OrderReview from 'theme/components/core/blocks/Checkout/OrderReview'
 import CartSummary from 'theme/components/core/blocks/Checkout/CartSummary'
 import ThankYouPage from 'theme/components/core/blocks/Checkout/ThankYouPage'
+import { registerModule } from '@vue-storefront/core/lib/modules'
+import { OrderModule } from '@vue-storefront/core/modules/order'
 
 export default {
   components: {
@@ -47,6 +49,9 @@ export default {
     ThankYouPage
   },
   mixins: [Checkout],
+  beforeCreate () {
+    registerModule(OrderModule)
+  },
   methods: {
     notifyEmptyCart () {
       this.$store.dispatch('notification/spawnNotification', {
diff --git a/pages/Home.vue b/pages/Home.vue
index f5f8a0c..db066f1 100755
--- a/pages/Home.vue
+++ b/pages/Home.vue
@@ -60,6 +60,9 @@ import NoSSR from 'vue-no-ssr'
 import {mapGetters} from 'vuex'
 import {isServer} from '@vue-storefront/core/helpers'
 
+import {registerModule} from '@vue-storefront/core/lib/modules'
+import {RecentlyViewedModule} from '@vue-storefront/core/modules/recently-viewed'
+
 export default {
   mixins: [Home],
   components: {
@@ -95,6 +98,9 @@ export default {
       return this.$store.state.homepage.sales_collection
     }
   },
+  beforeCreate () {
+    registerModule(RecentlyViewedModule)
+  },
   beforeRouteEnter (to, from, next) {
     if (!isServer && !from.name) { // Loading products to cache on SSR render
       next(vm =>
diff --git a/pages/MyAccount.vue b/pages/MyAccount.vue
index 3a4a2e6..58d4b61 100644
--- a/pages/MyAccount.vue
+++ b/pages/MyAccount.vue
@@ -20,7 +20,9 @@
           </nav>
         </div>
         <div class="col-12 md:col-9">
-          <component :is="this.$props.activeBlock" />
+          <no-ssr>
+            <component :is="this.$props.activeBlock" />
+          </no-ssr>
         </div>
       </div>
     </div>
@@ -36,6 +38,9 @@ import MyNewsletter from '../components/core/blocks/MyAccount/MyNewsletter'
 import MyOrders from '../components/core/blocks/MyAccount/MyOrders'
 import MyOrder from '../components/core/blocks/MyAccount/MyOrder'
 import MyRecentlyViewed from '../components/core/blocks/MyAccount/MyRecentlyViewed'
+import NoSSR from 'vue-no-ssr'
+import {RecentlyViewedModule} from '@vue-storefront/core/modules/recently-viewed'
+import {registerModule} from '@vue-storefront/core/lib/modules'
 
 export default {
   data () {
@@ -58,9 +63,13 @@ export default {
     MyNewsletter,
     MyOrders,
     MyOrder,
-    MyRecentlyViewed
+    MyRecentlyViewed,
+    'no-ssr': NoSSR
   },
   mixins: [MyAccount],
+  beforeCreate () {
+    registerModule(RecentlyViewedModule)
+  },
   methods: {
     notify (title) {
       if (title === 'My loyalty card' || title === 'My product reviews') {

From e8083f89be151575ee39b225248de2e866a16c5d Mon Sep 17 00:00:00 2001
From: Dmitry Kozachek <dmitry.kozachek@gmail.com>
Date: Fri, 17 Apr 2020 19:45:33 +0300
Subject: [PATCH 09/15] update(add-to-cart): Update add to cart component

---
 components/core/AddToCart.vue | 29 ++++++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/components/core/AddToCart.vue b/components/core/AddToCart.vue
index 9278d34..d47d041 100644
--- a/components/core/AddToCart.vue
+++ b/components/core/AddToCart.vue
@@ -14,16 +14,26 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 import { formatProductMessages } from '@vue-storefront/core/filters/product-messages'
+import { notifications } from '@vue-storefront/core/modules/cart/helpers'
 import focusClean from 'theme/components/theme/directives/focusClean'
 import ButtonFull from 'theme/components/theme/ButtonFull.vue'
-import { AddToCart } from '@vue-storefront/core/modules/cart/components/AddToCart'
 import { setTimeout } from 'timers'
 
 export default {
-  mixins: [AddToCart],
   directives: { focusClean },
   components: { ButtonFull },
+  props: {
+    product: {
+      required: true,
+      type: Object
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
   data () {
     return {
       added: false,
@@ -31,6 +41,9 @@ export default {
     }
   },
   computed: {
+    ...mapGetters({
+      isAddingToCart: 'cart/getIsAdding'
+    }),
     isProductDisabled () {
       return this.disabled || formatProductMessages(this.product.errors) !== '' || this.isAddingToCart
     }
@@ -57,7 +70,17 @@ export default {
       this.added = false
       this.failed = false
       this.addToCart(product)
-    }
+    },
+    async addToCart (product) {
+      try {
+        const diffLog = await this.$store.dispatch('cart/addItem', { productToAdd: product })
+        diffLog.clientNotifications.forEach(notificationData => {
+          this.notifyUser(notificationData)
+        })
+      } catch (message) {
+        this.notifyUser(notifications.createNotification({ type: 'error', message }))
+      }
+    },
   },
   beforeMount () {
     this.$bus.$on('product-after-removevariant', this.onAfterRemovedVariant)

From 5d774b3e3593f999357941e39e6e65e89d75f2af Mon Sep 17 00:00:00 2001
From: Dmitry Kozachek <dmitry.kozachek@gmail.com>
Date: Fri, 17 Apr 2020 19:51:33 +0300
Subject: [PATCH 10/15] update(store): Update theme stores

---
 index.js                                      |  2 ++
 store/cart/actions.ts                         | 28 ++++++++++++++++++
 store/cart/getters.ts                         | 20 +++++++++++++
 .../getCurrentConfigurationFromTotals.ts      | 12 ++++++++
 store/cart/index.ts                           | 15 ++++++++++
 store/cart/mutation-types.ts                  |  5 ++++
 store/cart/mutations.ts                       | 20 +++++++++++++
 store/cart/types/CartState.ts                 |  5 ++++
 store/cart/types/EditMode.ts                  |  6 ++++
 store/index.js                                | 12 --------
 store/social-tiles.js                         | 29 -------------------
 11 files changed, 113 insertions(+), 41 deletions(-)
 create mode 100644 store/cart/actions.ts
 create mode 100644 store/cart/getters.ts
 create mode 100644 store/cart/helpers/getCurrentConfigurationFromTotals.ts
 create mode 100644 store/cart/index.ts
 create mode 100644 store/cart/mutation-types.ts
 create mode 100644 store/cart/mutations.ts
 create mode 100644 store/cart/types/CartState.ts
 create mode 100644 store/cart/types/EditMode.ts
 delete mode 100644 store/index.js
 delete mode 100644 store/social-tiles.js

diff --git a/index.js b/index.js
index 5fed8fb..b37e583 100644
--- a/index.js
+++ b/index.js
@@ -6,6 +6,7 @@ import VueProgressBar from 'vue-progressbar'
 import '@vue-storefront/core/lib/passive-listeners'
 import { RouterManager } from '@vue-storefront/core/lib/router-manager'
 import { once } from '@vue-storefront/core/helpers'
+import { module as cartModule } from './store/cart'
 
 import { claimsStore } from 'theme/store/claims'
 import { homepageStore } from 'theme/store/homepage'
@@ -18,6 +19,7 @@ once('__VUE_EXTEND_DROPPOINT_VPB__', () => {
 
 const themeEntry = App
 function initTheme (app, router, store, config, ssrContext) {
+  store.registerModule('themeCart', cartModule)
   // if youre' runing multistore setup this is copying the routed above adding the 'storeCode' prefix to the urls and the names of the routes
   // You can do it on your own and then be able to customize the components used for example for German storeView checkout
   // To do so please execlude the desired storeView from the config.storeViews.mapStoreUrlsFor and map the urls by Your own like:
diff --git a/store/cart/actions.ts b/store/cart/actions.ts
new file mode 100644
index 0000000..ccc3f7c
--- /dev/null
+++ b/store/cart/actions.ts
@@ -0,0 +1,28 @@
+import * as types from './mutation-types'
+import getCurrentConfigurationFromTotals from './helpers/getCurrentConfigurationFromTotals'
+
+const actions = {
+  async configureProduct (context, { product }) {
+    if (product.type_id === 'simple') {
+      const configuration = getCurrentConfigurationFromTotals(product)
+      const parentProduct = await context.dispatch('product/findConfigurableParent', { product, configuration }, { root: true })
+      return context.dispatch('cart/updateItem', { product: parentProduct }, { root: true })
+    }
+
+    return Promise.resolve()
+  },
+  openEditMode (context, { product, selectedOptions }) {
+    context.commit(types.CART_OPEN_EDIT_MODE, { productId: product.id, qty: product.qty, selectedOptions })
+  },
+  editModeSetFilters ({ commit }, { filterOptions }) {
+    commit(types.CART_EDIT_MODE_SET_FILTERS, { filterOptions })
+  },
+  editModeSetQty ({ commit }, { qty }) {
+    commit(types.CART_EDIT_QTY, { qty })
+  },
+  closeEditMode ({ commit }) {
+    commit(types.CART_CLOSE_EDIT_MODE)
+  }
+}
+
+export default actions
diff --git a/store/cart/getters.ts b/store/cart/getters.ts
new file mode 100644
index 0000000..6e95a31
--- /dev/null
+++ b/store/cart/getters.ts
@@ -0,0 +1,20 @@
+import { GetterTree } from 'vuex'
+import RootState from '@vue-storefront/core/types/RootState'
+import CartState from './types/CartState'
+
+const getters: GetterTree<CartState, RootState> = {
+  isEditMode (state) {
+    return state.editMode !== null
+  },
+  getEditingProductId (state, getters) {
+    return getters.isEditMode && state.editMode.productId
+  },
+  getSelectedOptions (state, getters) {
+    return getters.isEditMode && state.editMode.selectedOptions
+  },
+  getEditingQty (state, getters) {
+    return getters.isEditMode && state.editMode.qty
+  }
+}
+
+export default getters
diff --git a/store/cart/helpers/getCurrentConfigurationFromTotals.ts b/store/cart/helpers/getCurrentConfigurationFromTotals.ts
new file mode 100644
index 0000000..ac0e579
--- /dev/null
+++ b/store/cart/helpers/getCurrentConfigurationFromTotals.ts
@@ -0,0 +1,12 @@
+const getCurrentConfigurationFromTotals = (product) => {
+  const { options } = product.totals
+  const colorLabel = options.find(opt => opt.label === 'Color').value
+  const sizeLabel = options.find(opt => opt.label === 'Size').value
+
+  return {
+    size: { id: product.size, attribute_code: 'size', label: sizeLabel },
+    color: { id: product.color, attribute_code: 'color', label: colorLabel }
+  }
+}
+
+export default getCurrentConfigurationFromTotals
diff --git a/store/cart/index.ts b/store/cart/index.ts
new file mode 100644
index 0000000..e6ca2c7
--- /dev/null
+++ b/store/cart/index.ts
@@ -0,0 +1,15 @@
+import { Module } from 'vuex'
+import getters from './getters'
+import actions from './actions'
+import mutations from './mutations'
+import CartState from './types/CartState'
+
+export const module: Module<CartState, any> = {
+  namespaced: true,
+  state: {
+    editMode: null
+  },
+  getters,
+  actions,
+  mutations
+}
diff --git a/store/cart/mutation-types.ts b/store/cart/mutation-types.ts
new file mode 100644
index 0000000..20185d7
--- /dev/null
+++ b/store/cart/mutation-types.ts
@@ -0,0 +1,5 @@
+export const SN_CART = 'cart'
+export const CART_OPEN_EDIT_MODE = SN_CART + '/CART_OPEN_EDIT_MODE'
+export const CART_EDIT_MODE_SET_FILTERS = SN_CART + '/CART_EDIT_MODE_SET_FILTERS'
+export const CART_EDIT_QTY = SN_CART + '/CART_EDIT_QTY'
+export const CART_CLOSE_EDIT_MODE = SN_CART + '/CART_CLOSE_EDIT_MODE'
diff --git a/store/cart/mutations.ts b/store/cart/mutations.ts
new file mode 100644
index 0000000..60c1db4
--- /dev/null
+++ b/store/cart/mutations.ts
@@ -0,0 +1,20 @@
+import * as types from './mutation-types'
+import { MutationTree } from 'vuex'
+import CartState from './types/CartState'
+
+const mutations: MutationTree<CartState> = {
+  [types.CART_OPEN_EDIT_MODE] (state, { productId, selectedOptions, qty }) {
+    state.editMode = { productId, selectedOptions, qty }
+  },
+  [types.CART_EDIT_MODE_SET_FILTERS] (state, { filterOptions }) {
+    state.editMode.selectedOptions[filterOptions.type] = filterOptions
+  },
+  [types.CART_EDIT_QTY] (state, { qty }) {
+    state.editMode.qty = qty
+  },
+  [types.CART_CLOSE_EDIT_MODE] (state) {
+    state.editMode = null
+  }
+}
+
+export default mutations
diff --git a/store/cart/types/CartState.ts b/store/cart/types/CartState.ts
new file mode 100644
index 0000000..80bc71b
--- /dev/null
+++ b/store/cart/types/CartState.ts
@@ -0,0 +1,5 @@
+import EditMode from './EditMode'
+
+export default interface CartState {
+  editMode: EditMode | null
+}
diff --git a/store/cart/types/EditMode.ts b/store/cart/types/EditMode.ts
new file mode 100644
index 0000000..34c7d65
--- /dev/null
+++ b/store/cart/types/EditMode.ts
@@ -0,0 +1,6 @@
+
+export default interface EditMode {
+  productId: number | string,
+  selectedOptions: Record<string, any>,
+  qty: number
+}
diff --git a/store/index.js b/store/index.js
deleted file mode 100644
index 08eafa7..0000000
--- a/store/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-// Here you can place theme-specific stores that will be added to the core stores.
-// Everything that you will export here will be treated as a Vuex module
-// The good practice is to keep all modulase separated in this folder.
-
-// Below you can find commented exaple for additional theme store
-
-// DEPRECIATED, will be removed in 1.7, use module.extend() instead
-import social from './social-tiles'
-
-export default {
-  social
-}
diff --git a/store/social-tiles.js b/store/social-tiles.js
deleted file mode 100644
index 243f88c..0000000
--- a/store/social-tiles.js
+++ /dev/null
@@ -1,29 +0,0 @@
-const state = {
-  tiles: []
-}
-
-const actions = {
-  updateSocialTiles ({commit}, data) {
-    commit('updateSocialTiles', data)
-  }
-}
-
-const mutations = {
-  updateSocialTiles (state, data) {
-    state.tiles = data
-  }
-}
-
-const getters = {
-  getSocialTiles: state => {
-    return state.tiles
-  }
-}
-
-export default {
-  namespaced: true,
-  state,
-  actions,
-  getters,
-  mutations
-}

From 72cef8051120c8118673b5136419134d0a20cf42 Mon Sep 17 00:00:00 2001
From: Dmitry Kozachek <dmitry.kozachek@gmail.com>
Date: Sat, 18 Apr 2020 13:55:59 +0300
Subject: [PATCH 11/15] update(pdp): Add size guide modal

---
 components/core/blocks/Product/SizeGuide.vue | 44 ++++++++++++++++++++
 pages/Product.vue                            | 14 ++++---
 2 files changed, 52 insertions(+), 6 deletions(-)
 create mode 100644 components/core/blocks/Product/SizeGuide.vue

diff --git a/components/core/blocks/Product/SizeGuide.vue b/components/core/blocks/Product/SizeGuide.vue
new file mode 100644
index 0000000..60ff69d
--- /dev/null
+++ b/components/core/blocks/Product/SizeGuide.vue
@@ -0,0 +1,44 @@
+<template>
+  <modal name="modal-sizeguide" :width="620">
+    <div slot="header">
+      Size Guide
+    </div>
+    <div slot="content">
+      <SizeGuideContent />
+    </div>
+  </modal>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import Modal from 'theme/components/core/Modal'
+import SizeGuideContent from 'theme/components/theme/blocks/Static/Example'
+
+export default {
+  name: 'SizeGuide',
+  computed: {
+    ...mapState({
+      activeElem: state => state.ui.authElem
+    })
+  },
+  components: {
+    Modal,
+    SizeGuideContent
+  },
+  methods: {
+    close (e) {
+      if (e) localStorage.removeItem('redirect')
+      this.$bus.$emit('modal-hide', 'modal-sizeguide')
+    }
+  }
+}
+</script>
+
+<style scoped>
+    .modal {
+        font-size: 18px;
+    }
+    .modal-content {
+        max-height: 80%;
+    }
+</style>
diff --git a/pages/Product.vue b/pages/Product.vue
index d732a8e..3a88321 100644
--- a/pages/Product.vue
+++ b/pages/Product.vue
@@ -83,14 +83,13 @@
                       />
                     </div>
                     <div class="sizes" v-else-if="option.label == 'Size'">
-                      <router-link
-                        to="/size-guide"
-                        target="_blank"
+                      <span
                         v-if="option.label == 'Size'"
-                        class="text-sm font-medium text-black pt-4 absolute top-0 right-0"
+                        @click="openSizeGuide"
+                        class="text-sm font-medium text-black pt-4 absolute top-0 right-0 cursor-pointer"
                       >
                         {{ $t('Size guide') }}
-                      </router-link>
+                      </span>
                       <size-selector
                         v-for="filter in getAvailableFilters[option.attribute_code]"
                         :key="filter.id"
@@ -244,6 +243,7 @@
         <recently-viewed />
       </lazy-hydrate>
     </div>
+    <SizeGuide />
   </div>
 </template>
 
@@ -281,6 +281,7 @@ import ProductPrice from 'theme/components/core/ProductPrice'
 import AddToWishlist from 'theme/components/core/blocks/Wishlist/AddToWishlist'
 import AddToCompare from 'theme/components/core/blocks/Compare/AddToCompare'
 import ProductQuantity from 'theme/components/core/ProductQuantity.vue'
+import SizeGuide from 'theme/components/core/blocks/Product/SizeGuide'
 
 import focusClean from 'theme/components/theme/directives/focusClean'
 import PromotedOffers from 'theme/components/theme/blocks/PromotedOffers/PromotedOffers'
@@ -305,7 +306,8 @@ export default {
     ProductPrice,
     AddToWishlist,
     AddToCompare,
-    ProductQuantity
+    ProductQuantity,
+    SizeGuide
   },
   mixins: [ProductOption, VueOfflineMixin],
   directives: { focusClean },

From d1d043e9cb9fa8ae461244fca508503a78774415 Mon Sep 17 00:00:00 2001
From: Dmitry Kozachek <dmitry.kozachek@gmail.com>
Date: Sat, 18 Apr 2020 13:57:25 +0300
Subject: [PATCH 12/15] update(microcart): Update microcart functionality to
 feat vsf 1.11.2

---
 components/core/ProductImage.vue              | 131 ++++++
 .../core/blocks/Microcart/EditButton.vue      |   9 +-
 components/core/blocks/Microcart/EditMode.vue |  48 +++
 .../core/blocks/Microcart/Microcart.vue       | 137 +++++--
 components/core/blocks/Microcart/Product.vue  | 386 +++++++++++++-----
 .../core/blocks/Microcart/RemoveButton.vue    |   4 +-
 6 files changed, 571 insertions(+), 144 deletions(-)
 create mode 100644 components/core/ProductImage.vue
 create mode 100644 components/core/blocks/Microcart/EditMode.vue

diff --git a/components/core/ProductImage.vue b/components/core/ProductImage.vue
new file mode 100644
index 0000000..21ebacf
--- /dev/null
+++ b/components/core/ProductImage.vue
@@ -0,0 +1,131 @@
+<template>
+  <div
+    class="product-image"
+    :class="{'product-image--height': basic, 'product-image--width': !basic}"
+    :style="style"
+    v-on="$listeners"
+  >
+    <img
+      v-show="showPlaceholder"
+      src="/assets/placeholder.svg"
+      :alt="alt"
+      class="product-image__placeholder"
+    >
+    <img
+      v-if="!lowerQualityImageError || isOnline"
+      v-show="showLowerQuality"
+      v-lazy="image.loading"
+      :alt="alt"
+      @load="imageLoaded('lower', true)"
+      @error="imageLoaded('lower', false)"
+      ref="lQ"
+      class="product-image__thumb"
+    >
+    <img
+      v-if="!highQualityImageError || isOnline"
+      v-show="showHighQuality"
+      v-lazy="image.src"
+      :alt="alt"
+      @load="imageLoaded('high', true)"
+      @error="imageLoaded('high', false)"
+      class="product-image__thumb"
+    >
+  </div>
+</template>
+
+<script>
+import { onlineHelper } from '@vue-storefront/core/helpers'
+
+export default {
+  props: {
+    calcRatio: {
+      type: Boolean,
+      default: true
+    },
+    image: {
+      type: Object,
+      default: () => ({
+        src: '',
+        loading: ''
+      })
+    },
+    alt: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      lowerQualityImage: false,
+      lowerQualityImageError: false,
+      highQualityImage: false,
+      highQualityImageError: false,
+      basic: true
+    }
+  },
+  watch: {
+    lowerQualityImage (state) {
+      if (state) {
+        this.basic = this.$refs.lQ.naturalWidth < this.$refs.lQ.naturalHeight;
+      }
+    }
+  },
+  computed: {
+    showPlaceholder () {
+      return !this.showLowerQuality && !this.showHighQuality
+    },
+    showLowerQuality () {
+      return this.lowerQualityImage && !this.showHighQuality
+    },
+    showHighQuality () {
+      return this.highQualityImage
+    },
+    imageRatio () {
+      const {width, height} = this.$store.state.config.products.gallery
+      return `${height / (width / 100)}%`
+    },
+    style () {
+      return this.calcRatio ? {paddingBottom: this.imageRatio} : {}
+    },
+    isOnline (value) {
+      return onlineHelper.isOnline
+    }
+  },
+  methods: {
+    imageLoaded (type, success = true) {
+      this[`${type}QualityImage`] = success
+      this[`${type}QualityImageError`] = !success
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .product-image{
+    position: relative;
+    width: 100%;
+    max-width: 100%;
+    height: 0;
+    mix-blend-mode: multiply;
+    &__placeholder,
+    &__thumb {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+    &__placeholder {
+      max-width: 50%;
+    }
+    &--height {
+      .product-image__thumb {
+        height: 100%;
+      }
+    }
+    &--width {
+      .product-image__thumb {
+        width: 100%;
+      }
+    }
+  }
+</style>
diff --git a/components/core/blocks/Microcart/EditButton.vue b/components/core/blocks/Microcart/EditButton.vue
index 9e6d9b5..cfd1e27 100644
--- a/components/core/blocks/Microcart/EditButton.vue
+++ b/components/core/blocks/Microcart/EditButton.vue
@@ -1,11 +1,18 @@
 <template>
   <button
+    @click="$emit('click')"
     class="border-0 bg-transparent p-0 inline-flex"
     data-testid="editButton"
   >
     <span class="hidden">
       {{ $t('Edit') }}
     </span>
-    <i class="material-icons text-h4 text-grey-dark">mode_edit</i>
+    <i class="edit-icon material-icons text-h4 text-grey-dark">mode_edit</i>
   </button>
 </template>
+
+<style lang="scss" scoped>
+.edit-icon {
+  font-size: 20px;
+}
+</style>
diff --git a/components/core/blocks/Microcart/EditMode.vue b/components/core/blocks/Microcart/EditMode.vue
new file mode 100644
index 0000000..41ee04b
--- /dev/null
+++ b/components/core/blocks/Microcart/EditMode.vue
@@ -0,0 +1,48 @@
+<script>
+import { mapGetters } from 'vuex'
+import get from 'lodash-es/get'
+
+export default {
+  name: 'EditMode',
+  computed: {
+    ...mapGetters('themeCart', ['isEditMode', 'getEditingProductId', 'getSelectedOptions', 'getEditingQty'])
+  },
+  methods: {
+    openEditMode () {
+      this.$store.dispatch('themeCart/configureProduct', { product: this.product }).then(() => {
+        const selectedOptions = Object.assign({}, this.getSelectedFilters)
+        this.$store.dispatch('themeCart/openEditMode', { product: this.product, selectedOptions })
+      })
+    },
+    editModeSetFilters (filterOptions) {
+      this.$store.dispatch('themeCart/editModeSetFilters', { filterOptions })
+    },
+    editModeSetQty (qty) {
+      this.$store.dispatch('themeCart/editModeSetQty', { qty })
+    },
+    closeEditMode () {
+      this.$store.dispatch('themeCart/closeEditMode')
+    },
+    updateVariant () {
+      const { size, color } = this.getSelectedOptions
+      const configuration = {
+        size: { id: size.id, attribute_code: size.type, label: size.label },
+        color: { id: color.id, attribute_code: color.type, label: color.label }
+      }
+      this.product.qty = this.getEditingQty
+      this.$store.dispatch('cart/configureItem', { product: this.product, configuration })
+    },
+    getEditedProduct (filter = {}) {
+      const selectedFilters = {...this.getSelectedOptions, [filter.type]: filter}
+      const sizeId = get(selectedFilters, 'size.id', '')
+      const colorId = get(selectedFilters, 'color.id', '')
+      const children = this.product.configurable_children || []
+
+      return children.find((child) =>
+        Number(child.color) === Number(colorId) &&
+        Number(child.size) === Number(sizeId)
+      ) || this.product
+    }
+  }
+}
+</script>
diff --git a/components/core/blocks/Microcart/Microcart.vue b/components/core/blocks/Microcart/Microcart.vue
index 38b1667..52990ba 100644
--- a/components/core/blocks/Microcart/Microcart.vue
+++ b/components/core/blocks/Microcart/Microcart.vue
@@ -1,9 +1,11 @@
 <template>
   <div
     class="right-sidebar microcart max-w-full fixed p-8 pt-10"
-    :class="{ active: showMicrocart }"
     data-testid="microcart"
   >
+    <transition name="fade">
+      <div v-if="isEditMode" class="overlay absolute top-0 bottom-0 left-0 right-0 z-overlay" @click="closeEditMode" />
+    </transition>
     <button
       type="button"
       :aria-label="$t('Close')"
@@ -12,7 +14,7 @@
       data-testid="closeMicrocart"
     >
       <svg viewBox="0 0 25 25" class="vt-icon--sm">
-        <use xlink:href="#close"/>
+        <use xlink:href="#close" />
       </svg>
     </button>
 
@@ -31,7 +33,7 @@
       {{ $t('to find something beautiful for You!') }}
     </div>
     <ul v-if="productsInCart.length" class="products p-0 m-0">
-      <product v-for="product in productsInCart" :key="product.sku" :product="product" />
+      <product v-for="product in productsInCart" :key="product.server_item_id || product.id" :product="product" />
     </ul>
     <div v-if="productsInCart.length" class="summary pt-8">
       <div v-for="(segment, index) in totals" :key="index" class="flex justify-between py-2 text-grey-dark font-medium" v-if="segment.code !== 'grand_total'">
@@ -42,7 +44,7 @@
           </button>
         </div>
         <div v-if="segment.value != null" class="" :class="{'text-primary': segment.code === 'discount'}">
-          {{ segment.value | price }}
+          {{ segment.value | price(storeView) }}
         </div>
       </div>
 
@@ -60,64 +62,74 @@
           {{ segment.title }}
         </div>
         <div class="col-auto total-price-value">
-          {{ segment.value | price }}
+          {{ segment.value | price(storeView) }}
         </div>
       </div>
     </div>
 
-    <div
-      class="row justify-between items-center py-4 actions"
-      v-if="productsInCart.length && !isCheckoutMode"
-    >
-      <div class="col-12 md:col-auto">
-        <router-link :to="localizedRoute('/')" class="no-underline text-grey link back-to-shopping font-medium">
-          <span @click="closeMicrocartExtend" class="block align-middle">
-            <svg viewBox="0 0 25 25" class="vt-icon--xs align-middle"><use xlink:href="#left" /></svg>
-            <span class="align-middle">{{ $t('Back to shopping') }}</span>
-          </span>
-        </router-link>
+    <div v-if="productsInCart.length && !isCheckoutMode">
+      <div
+        class="row justify-between items-center py-4 actions"
+      >
+        <div class="col-12 md:col-auto">
+          <router-link :to="localizedRoute('/')" class="no-underline text-grey link back-to-shopping font-medium flex items-center" @click.native="closeMicrocartExtend">
+            <svg viewBox="0 0 25 25" class="vt-icon--xs mr-1"><use xlink:href="#left" /></svg>
+            <span>{{ $t('Back to shopping') }}</span>
+          </router-link>
+        </div>
+        <div class="col-12 md:col-auto">
+          <button-full
+            class="btn-primary py-3 px-6"
+            :link="{ name: 'checkout' }"
+            @click.native="closeMicrocartExtend"
+          >
+            {{ $t('Go to checkout') }}
+          </button-full>
+        </div>
       </div>
-      <div class="col-12 md:col-auto">
-        <button-full
-          class="btn-primary py-3 px-6"
-          :link="{ name: 'checkout' }"
-          @click.native="closeMicrocartExtend"
-        >
-          {{ $t('Go to checkout') }}
-        </button-full>
+
+      <div v-if="isInstantCheckoutRegistered" class="py-4">
+        <instant-checkout class="block w-full border-none rounded-none bg-primary px-4 py-2 ripple tracking-md text-sm text-white font-medium leading-base uppercase" />
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import { mapGetters, mapActions } from 'vuex'
 import i18n from '@vue-storefront/i18n'
-import Microcart from '@vue-storefront/core/compatibility/components/blocks/Microcart/Microcart'
+import { isModuleRegistered } from '@vue-storefront/core/lib/modules'
+import { currentStoreView } from '@vue-storefront/core/lib/multistore'
+
 import VueOfflineMixin from 'vue-offline/mixin'
 import onEscapePress from '@vue-storefront/core/mixins/onEscapePress'
+import InstantCheckout from 'src/modules/instant-checkout/components/InstantCheckout.vue'
+import { registerModule } from '@vue-storefront/core/lib/modules'
 
 import BaseInput from 'theme/components/core/blocks/Form/BaseInput'
 import ButtonFull from 'theme/components/theme/ButtonFull'
-import ButtonOutline from 'theme/components/theme/ButtonOutline'
 import Product from 'theme/components/core/blocks/Microcart/Product'
+import EditMode from './EditMode'
+import { InstantCheckoutModule } from 'src/modules/instant-checkout'
 
 export default {
   components: {
     Product,
     ButtonFull,
-    ButtonOutline,
-    BaseInput
+    BaseInput,
+    InstantCheckout
   },
   mixins: [
-    Microcart,
     VueOfflineMixin,
+    EditMode,
     onEscapePress
   ],
   data () {
     return {
       addCouponPressed: false,
       couponCode: '',
-      componentLoaded: false
+      componentLoaded: false,
+      isInstantCheckoutRegistered: isModuleRegistered('InstantCheckoutModule')
     }
   },
   props: {
@@ -127,43 +139,73 @@ export default {
       default: () => false
     }
   },
-  computed: {
-    showMicrocart () {
-      return this.isMicrocartOpen && this.componentLoaded
-    }
+  beforeCreate () {
+    registerModule(InstantCheckoutModule)
   },
   mounted () {
     this.$nextTick(() => {
       this.componentLoaded = true
     })
   },
+  computed: {
+    ...mapGetters({
+      productsInCart: 'cart/getCartItems',
+      appliedCoupon: 'cart/getCoupon',
+      totals: 'cart/getTotals',
+      isOpen: 'cart/getIsMicroCartOpen'
+    }),
+    storeView () {
+      return currentStoreView()
+    }
+  },
   methods: {
+    ...mapActions({
+      applyCoupon: 'cart/applyCoupon'
+    }),
     addDiscountCoupon () {
       this.addCouponPressed = true
     },
     clearCoupon () {
-      this.removeCoupon()
+      this.$store.dispatch('cart/removeCoupon')
       this.addCouponPressed = false
     },
-    setCoupon () {
-      this.applyCoupon(this.couponCode).then(() => {
-        this.addCouponPressed = false
-        this.couponCode = ''
-      }).catch(() => {
+    toggleMicrocart () {
+      this.$store.dispatch('ui/toggleMicrocart')
+    },
+    async setCoupon () {
+      const couponApplied = await this.applyCoupon(this.couponCode)
+      this.addCouponPressed = false
+      this.couponCode = ''
+      if (!couponApplied) {
         this.$store.dispatch('notification/spawnNotification', {
           type: 'warning',
           message: i18n.t("You've entered an incorrect coupon code. Please try again."),
           action1: { label: i18n.t('OK') }
         })
-      })
+      }
     },
     closeMicrocartExtend () {
-      this.closeMicrocart()
+      this.toggleMicrocart()
       this.$store.commit('ui/setSidebar', false)
       this.addCouponPressed = false
     },
     onEscapePress () {
       this.closeMicrocart()
+    },
+    clearCart () {
+      this.$store.dispatch('notification/spawnNotification', {
+        type: 'warning',
+        message: i18n.t('Are you sure you would like to remove all the items from the shopping cart?'),
+        action1: { label: i18n.t('Cancel'), action: 'close' },
+        action2: { label: i18n.t('OK'),
+          action: async () => {
+            // We just need to clear cart on frontend and backend.
+            // but cart token can be reused
+            await this.$store.dispatch('cart/clear', { disconnect: false })
+          }
+        },
+        hasNoTimeout: true
+      })
     }
   }
 }
@@ -176,4 +218,15 @@ export default {
       font-size: 24px;
     }
   }
+
+  .overlay {
+    background:rgba(0, 0, 0, 0.4);
+  }
+
+  .fade-enter-active, .fade-leave-active {
+    transition: opacity .4s;
+  }
+  .fade-enter, .fade-leave-to {
+    opacity: 0;
+  }
 </style>
diff --git a/components/core/blocks/Microcart/Product.vue b/components/core/blocks/Microcart/Product.vue
index df0d19e..d502b29 100644
--- a/components/core/blocks/Microcart/Product.vue
+++ b/components/core/blocks/Microcart/Product.vue
@@ -1,101 +1,147 @@
 <template>
   <transition name="fade" appear>
-    <li class="flex mb-3 pb-3 border-b border-grey-light relative">
-      <router-link
-        class="mr-4 bg-grey-lightest self-start"
-        :to="localizedRoute({
-          name: product.type_id + '-product',
-          params: {
-            parentSku: product.parentSku ? product.parentSku : product.sku,
-            slug: product.slug,
-            childSku: product.sku
-          }
-        })"
-        data-testid="productLink"
-      >
-        <img class="image" v-lazy="thumbnail" alt="" >
-      </router-link>
-      <div class="flex-grow flex-col justify-start sm:justify-between">
-        <div>
-          <router-link
-            class="font-medium leading-6 product-title text-black"
-            :to="localizedRoute({
-              name: product.type_id + '-product',
-              params: {
-                parentSku: product.parentSku ? product.parentSku : product.sku,
-                slug: product.slug,
-                childSku: product.sku
-              }
-            })"
-            data-testid="productLink"
-          >
-            {{ product.name | htmlDecode }}
-          </router-link>
-          <div class="text-sm text-grey leading-normal mb-2" data-testid="productSku">
-            {{ product.sku }}
+    <li class="mb-3 px-2 pb-3 border-b border-grey-light relative bg-white" :class="{ 'z-10': editMode }">
+      <div class="py-2 mb-4 border-b border-grey-light flex justify-between items-center" v-if="editMode">
+        <span class="text-grey-dark font-medium">Edit mode</span>
+        <button class="border-0 bg-transparent" @click="closeEditMode">
+          <svg viewBox="0 0 25 25" class="vt-icon--sm">
+            <use xlink:href="#close" />
+          </svg>
+        </button>
+      </div>
+      <div class="flex">
+        <router-link
+          v-if="!editMode"
+          class="mr-4 bg-grey-lightest self-start flex-grow"
+          :to="productLink"
+          data-testid="productLink"
+          @click.native="$store.commit('ui/setMicrocart', false)"
+        >
+          <div class="blend">
+            <product-image :image="image" />
           </div>
-          <div class="text-sm leading-normal" v-if="product.totals && product.totals.options">
-            <div v-for="opt in product.totals.options" :key="opt.label">
-              <span class="text-grey">{{ opt.label }}: </span>
-              <span class="text-grey-dark font-medium" v-html="opt.value" />
+        </router-link>
+        <div class="flex-grow flex-col justify-start sm:justify-between">
+          <div>
+            <router-link
+              class="font-medium leading-6 product-title text-black"
+              :to="productLink"
+              data-testid="productLink"
+              @click.native="$store.commit('ui/setMicrocart', false)"
+            >
+              {{ product.name | htmlDecode }}
+            </router-link>
+            <div class="text-sm text-grey leading-normal mb-2" data-testid="productSku">
+              {{ product.sku }}
             </div>
-          </div>
-          <div class="text-sm leading-normal" v-else-if="product.options">
-            <div v-for="opt in product.options" :key="opt.label">
-              <span class="text-grey">{{ opt.label }}: </span>
-              <span class="text-grey-dark font-medium" v-html="opt.value" />
+            <div class="text-sm leading-normal" v-if="isTotalsActive">
+              <div v-for="opt in product.totals.options" :key="opt.label">
+                <span class="text-grey">{{ opt.label }}: </span>
+                <span class="text-grey-dark font-medium" v-html="opt.value" />
+              </div>
+            </div>
+            <div class="h6 cl-bg-tertiary pt5 options" v-else-if="!editMode && product.options">
+              <div v-for="opt in product.options" :key="opt.label">
+                <span class="opn">{{ opt.label }}: </span>
+                <span class="opv" v-html="opt.value" />
+              </div>
+            </div>
+            <div class="text-sm text-error font-medium" v-if="hasProductErrors">
+              {{ product.errors | formatProductMessages }}
+            </div>
+            <div class="text-sm text-success font-medium" v-if="hasProductInfo && !hasProductErrors">
+              {{ product.info | formatProductMessages }}
             </div>
           </div>
-          <div class="text-sm text-error font-medium" v-if="product.errors && Object.keys(product.errors).length > 0">
-            {{ product.errors | formatProductMessages }}
-          </div>
-        </div>
-        <div class="text-sm qty">
-          <span class="text-grey">
-            {{ $t('Qty') }}:
-          </span>
-          <span class="text-grey-dark font-medium" :class="{ hidden: isEditing }" data-testid="productQty">
-            {{ product.qty }}
-          </span>
-          <div v-show="isEditing" class="inline-flex">
-            <qty-input
-              :value="product.qty"
-              @input="val => product.qty = val"
-              :id="'qty-' + product.sku"
-              data-testid="productQtyInput"
-              size="sm" />
-            <apply-button @click.native="applyQuantity" class="ml-1" />
-          </div>
-          <edit-button v-show="!isEditing" @click.native="switchEdit" class="align-text-bottom ml-1" />
-        </div>
-      </div>
-      <div class="col-auto font-bold text-right leading-6">
-        <div v-if="!product.totals">
-          <div class="text-error" v-if="product.special_price">
-            {{ product.priceInclTax * product.qty | price }}
-          </div>
-          <div class="line-through text-sm text-grey-dark" v-if="product.special_price">
-            {{ product.originalPriceInclTax * product.qty | price }}
+          <div class="pb-4 flex flex-wrap items-end" v-if="editMode">
+            <div class="flex flex-wrap filters" v-if="productsAreReconfigurable">
+              <div class="h5 pt5 w-100" v-for="(option, index) in product.configurable_options" :key="index">
+                <div class="h6 cl-bg-tertiary mr10">
+                  {{ option.label }}:
+                </div>
+                <div class="flex flex-wrap pt-1" v-if="option.label == 'Color' && editMode">
+                  <color-selector
+                    v-for="filter in getAvailableFilters[option.attribute_code]"
+                    v-if="isOptionAvailable(filter)"
+                    :key="filter.id"
+                    :variant="filter"
+                    :selected-filters="getSelectedOptions"
+                    @change="changeEditModeFilter"
+                  />
+                </div>
+                <div class="flex flex-wrap pt-1" v-else-if="option.label == 'Size' && editMode">
+                  <size-selector
+                    class="mr10 mb10"
+                    v-for="filter in getAvailableFilters[option.attribute_code]"
+                    v-if="isOptionAvailable(filter)"
+                    :key="filter.id"
+                    :variant="filter"
+                    :selected-filters="getSelectedOptions"
+                    @change="changeEditModeFilter"
+                  />
+                </div>
+              </div>
+            </div>
           </div>
-          <div class="text-grey-dark" v-if="!product.special_price" data-testid="productPrice">
-            {{ product.priceInclTax * product.qty | price }}
+          <div class="text-sm qty">
+            <span class="text-grey">
+              {{ $t('Qty') }}:
+            </span>
+            <span class="text-grey-dark font-medium" :class="{ hidden: editMode }" data-testid="productQty">
+              {{ product.qty }}
+            </span>
+            <div v-show="editMode" class="inline-flex">
+              <product-quantity
+                :value="productQty"
+                :max-quantity="maxQuantity"
+                :loading="isStockInfoLoading"
+                :is-simple-or-configurable="isSimpleOrConfigurable"
+                @input="updateProductQty"
+                @error="handleQuantityError"
+              />
+            </div>
           </div>
         </div>
-        <div v-if="product.totals">
-          <div class="text-error" v-if="product.totals.discount_amount">
-            {{ product.totals.row_total_incl_tax - product.totals.discount_amount | price }}
+        <div class="col-auto font-bold text-right leading-6">
+          <div v-if="!displayItemDiscounts || !isOnline">
+            <div class="text-error" v-if="product.special_price">
+              {{ product.price_incl_tax * product.qty | price(storeView) }}
+            </div>
+            <div class="line-through text-sm text-grey-dark" v-if="product.special_price">
+              {{ product.original_price_incl_tax * product.qty | price(storeView) }}
+            </div>
+            <div class="text-grey-dark" v-else data-testid="productPrice">
+              {{ (product.original_price_incl_tax ? product.original_price_incl_tax : product.price_incl_tax) * product.qty | price(storeView) }}
+            </div>
           </div>
-          <div class="line-through text-sm text-grey-dark" v-if="product.totals.discount_amount">
-            {{ product.totals.row_total_incl_tax | price }}
+          <div v-else-if="isOnline && product.totals">
+            <div class="text-error" v-if="product.totals.discount_amount">
+              {{ product.totals.row_total - product.totals.discount_amount + product.totals.tax_amount | price(storeView) }}
+            </div>
+            <div class="line-through text-sm text-grey-dark" v-if="product.totals.discount_amount">
+              {{ product.totals.row_total_incl_tax | price(storeView) }}
+            </div>
+            <div class="text-grey-dark" v-if="!product.totals.discount_amount">
+              {{ product.totals.row_total_incl_tax | price(storeView) }}
+            </div>
           </div>
-          <div class="text-grey-dark" v-if="!product.totals.discount_amount">
-            {{ product.totals.row_total_incl_tax | price }}
+          <div v-else class="text-grey-dark">
+            {{ (product.regular_price || product.price_incl_tax) * product.qty | price(storeView) }}
           </div>
         </div>
-      </div>
-      <div class="absolute bottom-0 right-0 mb-3">
-        <div @click="removeItem">
-          <remove-button />
+        <div class="absolute bottom-0 right-0 mb-3 mr-2 flex">
+          <template v-if="!editMode">
+            <edit-button v-if="productsAreReconfigurable" @click="openEditMode" class="align-text-bottom mr-1" />
+            <remove-button @click="removeItem" />
+          </template>
+          <button-full
+            v-else
+            class="update-button mb10 mr10"
+            @click.native="updateProductVariant"
+            :disabled="isUpdateCartDisabled"
+          >
+            {{ $t('Update') }}
+          </button-full>
         </div>
       </div>
     </li>
@@ -103,35 +149,177 @@
 </template>
 
 <script>
+import { mapActions } from 'vuex'
+import config from 'config'
+import { currentStoreView } from '@vue-storefront/core/lib/multistore'
+import { formatProductLink } from '@vue-storefront/core/modules/url/helpers'
 import Product from '@vue-storefront/core/compatibility/components/blocks/Microcart/Product'
 
-import EditButton from './EditButton'
+import ProductQuantity from 'theme/components/core/ProductQuantity.vue'
+import ProductImage from 'theme/components/core/ProductImage'
+import ColorSelector from 'theme/components/core/ColorSelector.vue'
+import SizeSelector from 'theme/components/core/SizeSelector.vue'
 import RemoveButton from './RemoveButton'
-import ApplyButton from './ApplyButton'
-
-import QtyInput from 'theme/components/theme/QtyInput'
+import EditButton from './EditButton'
+import { onlineHelper } from '@vue-storefront/core/helpers'
+import { ProductOption } from '@vue-storefront/core/modules/catalog/components/ProductOption'
+import { getThumbnailForProduct, getProductConfiguration } from '@vue-storefront/core/modules/cart/helpers'
+import ButtonFull from 'theme/components/theme/ButtonFull'
+import EditMode from './EditMode'
 
 export default {
   components: {
-    EditButton,
     RemoveButton,
-    ApplyButton,
-    QtyInput
+    ProductImage,
+    ColorSelector,
+    SizeSelector,
+    EditButton,
+    ButtonFull,
+    ProductQuantity
+  },
+  mixins: [Product, ProductOption, EditMode],
+  props: {
+    product: {
+      type: Object,
+      required: true
+    }
   },
-  mixins: [Product],
   data () {
     return {
-      isEditing: false
+      maxQuantity: 0,
+      quantityError: false,
+      isStockInfoLoading: false
+    }
+  },
+  computed: {
+    hasProductInfo () {
+      return this.product.info && Object.keys(this.product.info).length > 0
+    },
+    hasProductErrors () {
+      const errors = this.product.errors || {}
+      const errorsValuesExists = Object.keys(errors).filter(errorKey => errors[errorKey]).length > 0
+      return errorsValuesExists
+    },
+    isTotalsActive () {
+      return this.isOnline && !this.editMode && this.product.totals && this.product.totals.options
+    },
+    isOnline () {
+      return onlineHelper.isOnline
+    },
+    productsAreReconfigurable () {
+      return config.cart.productsAreReconfigurable && this.product.type_id === 'configurable' && this.isOnline
+    },
+    displayItemDiscounts () {
+      return config.cart.displayItemDiscounts
+    },
+    image () {
+      return {
+        loading: this.thumbnail,
+        src: this.thumbnail
+      }
+    },
+    thumbnail () {
+      return getThumbnailForProduct(this.product)
+    },
+    configuration () {
+      return getProductConfiguration(this.product)
+    },
+    productLink () {
+      return formatProductLink(this.product, currentStoreView().storeCode)
+    },
+    editMode () {
+      return this.getEditingProductId === this.product.id
+    },
+    productQty () {
+      return this.editMode ? this.getEditingQty : this.product.qty
+    },
+    isSimpleOrConfigurable () {
+      return ['simple', 'configurable'].includes(this.product.type_id)
+    },
+    isUpdateCartDisabled () {
+      return this.quantityError ||
+        this.isStockInfoLoading ||
+        (this.isOnline && !this.maxQuantity && this.isSimpleOrConfigurable)
+    },
+    storeView () {
+      return currentStoreView()
     }
   },
   methods: {
-    switchEdit () {
-      this.isEditing = !this.isEditing
+    updateProductVariant () {
+      this.updateVariant()
+      this.closeEditMode()
+    },
+    updateProductQty (qty) {
+      if (this.editMode) {
+        this.editModeSetQty(qty)
+        return
+      }
+
+      this.updateQuantity(qty)
+    },
+    removeFromCart () {
+      this.$store.dispatch('cart/removeItem', { product: this.product })
+    },
+    updateQuantity (quantity) {
+      this.$store.dispatch('cart/updateQuantity', { product: this.product, qty: quantity })
     },
-    applyQuantity () {
-      this.updateQuantity(this.product.qty)
-      this.isEditing = false
+    async getQuantity (product) {
+      if (this.isStockInfoLoading) return // stock info is already loading
+      this.isStockInfoLoading = true
+      try {
+        const validProduct = product || this.product
+        const res = await this.$store.dispatch('stock/check', {
+          product: validProduct,
+          qty: this.productQty
+        })
+        return res.qty
+      } finally {
+        this.isStockInfoLoading = false
+      }
+    },
+    handleQuantityError (error) {
+      this.quantityError = error
+    },
+    async changeEditModeFilter (filter) {
+      const editedProduct = this.getEditedProduct(filter)
+      const maxQuantity = await this.getQuantity(editedProduct)
+      if (!maxQuantity) {
+        this.$store.dispatch('notification/spawnNotification', {
+          type: 'error',
+          message: this.$t(
+            'The product is out of stock and cannot be added to the cart!'
+          ),
+          action1: { label: this.$t('OK') }
+        })
+      } else if (maxQuantity < this.productQty) {
+        this.$store.dispatch('notification/spawnNotification', {
+          type: 'error',
+          message: this.$t('Only {maxQuantity} products of this type are available!', { maxQuantity }),
+          action1: { label: this.$t('OK') }
+        })
+      } else {
+        this.maxQuantity = maxQuantity
+        this.editModeSetFilters(filter)
+      }
+    }
+  },
+  watch: {
+    isOnline: {
+      async handler (isOnline) {
+        if (isOnline) {
+          const maxQuantity = await this.getQuantity()
+          this.maxQuantity = maxQuantity
+        }
+      },
+      immediate: true
     }
   }
 }
 </script>
+
+<style scoped>
+.blend {
+  mix-blend-mode: multiply;
+}
+</style>
diff --git a/components/core/blocks/Microcart/RemoveButton.vue b/components/core/blocks/Microcart/RemoveButton.vue
index d83cfd1..e826d0f 100644
--- a/components/core/blocks/Microcart/RemoveButton.vue
+++ b/components/core/blocks/Microcart/RemoveButton.vue
@@ -1,8 +1,8 @@
 <template>
-  <button class="border-0 bg-transparent text-grey hover:text-grey-dark">
+  <button @click="$emit('click')" class="border-0 bg-transparent text-grey hover:text-grey-dark">
     <span class="hidden">
       {{ $t('Remove') }}
     </span>
-    <svg viewBox="0 0 25 25" class="vt-icon--sm"><use xlink:href="#trash" /></svg>
+    <svg viewBox="0 0 25 25" class="material-icons vt-icon--sm"><use xlink:href="#trash" /></svg>
   </button>
 </template>

From 9d6ce6c2599c3353a72b7b3a240c63f2a86da6e8 Mon Sep 17 00:00:00 2001
From: Dmitry Kozachek <dmitry.kozachek@gmail.com>
Date: Sat, 18 Apr 2020 13:57:36 +0300
Subject: [PATCH 13/15] update(checkout): Update checkout functionality to feat
 vsf 1.11.2

---
 .../core/blocks/Checkout/CartSummary.vue      | 18 +++---
 .../core/blocks/Checkout/OrderReview.vue      | 10 +---
 components/core/blocks/Checkout/Payment.vue   | 57 ++++++++++++------
 components/core/blocks/Checkout/Product.vue   | 58 ++++++++++++++-----
 components/core/blocks/Checkout/Shipping.vue  | 35 +++++++----
 .../core/blocks/Checkout/ThankYouPage.vue     | 11 ++--
 components/core/blocks/Form/BaseCheckbox.vue  | 30 +++++-----
 .../core/blocks/Form/ValidationMessages.vue   |  2 +-
 pages/Checkout.vue                            |  8 +--
 9 files changed, 144 insertions(+), 85 deletions(-)

diff --git a/components/core/blocks/Checkout/CartSummary.vue b/components/core/blocks/Checkout/CartSummary.vue
index 4e71566..a34f00c 100644
--- a/components/core/blocks/Checkout/CartSummary.vue
+++ b/components/core/blocks/Checkout/CartSummary.vue
@@ -1,19 +1,17 @@
 <template>
   <div>
-    <div class="brdr-bottom-1 brdr-cl-primary pb60">
-      <h3 class="cl-accent mb-6 summary-title">
+    <div>
+      <h3 class="mb-6 summary-title">
         {{ $t('Order Summary') }}
       </h3>
-      <product v-for="product in productsInCart" :key="product.sku" :product="product"/>
-
+      <product v-for="product in productsInCart" :key="product.server_item_id || product.id" :product="product"/>
       <div v-if="productsInCart && productsInCart.length" class="checkout mt-8">
-
         <div v-for="(segment, index) in totals" :key="index" class="flex flex-wrap justify-between mb-3 text-grey-dark" v-if="segment.code !== 'grand_total'">
           <div class="w-3/4">
             {{ segment.title }}:
           </div>
           <div v-if="segment.value != null" class="w-1/4 text-right" :class="({ 'text-primary': (segment.code == 'discount') })">
-            {{ segment.value | price }}
+            {{ segment.value | price(storeView) }}
           </div>
         </div>
 
@@ -22,7 +20,7 @@
             {{ segment.title }}:
           </div>
           <div class="w-1/4 text-right text-h2 font-serif font-medium">
-            {{ segment.value | price }}
+            {{ segment.value | price(storeView) }}
           </div>
         </div>
       </div>
@@ -56,12 +54,18 @@
 
 <script>
 import { CartSummary } from '@vue-storefront/core/modules/checkout/components/CartSummary'
+import { currentStoreView } from '@vue-storefront/core/lib/multistore'
 import Product from './Product'
 
 export default {
   components: {
     Product
   },
+  computed: {
+    storeView () {
+      return currentStoreView()
+    }
+  },
   mixins: [CartSummary]
 }
 </script>
diff --git a/components/core/blocks/Checkout/OrderReview.vue b/components/core/blocks/Checkout/OrderReview.vue
index d87c0d3..3ff297f 100644
--- a/components/core/blocks/Checkout/OrderReview.vue
+++ b/components/core/blocks/Checkout/OrderReview.vue
@@ -40,7 +40,6 @@
               <base-checkbox
                 class="w-full"
                 id="acceptTermsCheckbox"
-                @click="orderReview.terms = !orderReview.terms"
                 @blur="$v.orderReview.terms.$touch()"
                 v-model="orderReview.terms"
                 :validation="{
@@ -80,7 +79,7 @@
       </div>
     </div>
 
-    <modal name="modal-terms" >
+    <modal name="modal-terms">
       <p slot="header">
         {{ $t('Terms and conditions') }}
       </p>
@@ -114,11 +113,8 @@ import Composite from '@vue-storefront/core/mixins/composite'
 
 import BaseCheckbox from 'theme/components/core/blocks/Form/BaseCheckbox'
 import ButtonFull from 'theme/components/theme/ButtonFull'
-import CartSummary from 'theme/components/core/blocks/Checkout/CartSummary'
 import Modal from 'theme/components/core/Modal'
 import { OrderReview } from '@vue-storefront/core/modules/checkout/components/OrderReview'
-import ValidationError from 'theme/components/core/ValidationError'
-
 import { OrderModule } from '@vue-storefront/core/modules/order'
 import { registerModule } from '@vue-storefront/core/lib/modules'
 
@@ -126,9 +122,7 @@ export default {
   components: {
     BaseCheckbox,
     ButtonFull,
-    CartSummary,
-    Modal,
-    ValidationError
+    Modal
   },
   mixins: [OrderReview, Composite],
   validations: {
diff --git a/components/core/blocks/Checkout/Payment.vue b/components/core/blocks/Checkout/Payment.vue
index 6b3bc07..11fb469 100644
--- a/components/core/blocks/Checkout/Payment.vue
+++ b/components/core/blocks/Checkout/Payment.vue
@@ -39,7 +39,7 @@
           class="w-full"
           id="sendToShippingAddressCheckbox"
           v-model="sendToShippingAddress"
-          @click="useShippingAddress"
+          v-if="!isVirtualCart"
         >
           {{ $t('Copy address data from shipping') }}
         </base-checkbox>
@@ -52,7 +52,6 @@
         class="w-full mb-3"
         id="sendToBillingAddressCheckbox"
         v-model="sendToBillingAddress"
-        @click="useBillingAddress"
       >
         {{ $t('Use my billing data') }}
       </base-checkbox>
@@ -298,12 +297,12 @@
                 name="payment-method"
                 :val="method.code"
                 :value="payment.paymentMethod == method.code"
-                @change="$v.payment.paymentMethod.$touch(); changePaymentMethod();"
+                @change="selectPaymentMethod(method.code)"
               >
                 {{ method.title ? method.title : method.name }}
               </base-radiobutton>
             </div>
-            <span class="validation-error" v-if="!$v.payment.paymentMethod.required">{{ $t('Field is required') }}</span>
+            <span class="text-error" v-if="!$v.payment.paymentMethod.required">{{ $t('Field is required') }}</span>
           </div>
         </div>
       </div>
@@ -359,12 +358,12 @@
         </div>
       </div>
     </div>
-
   </div>
 </template>
 
 <script>
 import { required, minLength } from 'vuelidate/lib/validators'
+import { unicodeAlpha, unicodeAlphaNum } from '@vue-storefront/core/helpers/validators'
 import { Payment } from '@vue-storefront/core/modules/checkout/components/Payment'
 
 import BaseCheckbox from 'theme/components/core/blocks/Form/BaseCheckbox'
@@ -394,30 +393,44 @@ export default {
       })
     }
   },
+  methods: {
+    selectPaymentMethod (method) {
+      this.$set(this.payment, 'paymentMethod', method)
+      this.$v.payment.paymentMethod.$touch()
+      this.changePaymentMethod()
+    }
+  },
   validations () {
     if (!this.generateInvoice) {
       return {
         payment: {
           firstName: {
             required,
-            minLength: minLength(3)
+            minLength: minLength(2),
+            unicodeAlpha
           },
           lastName: {
-            required
+            required,
+            unicodeAlpha
           },
           country: {
             required
           },
           streetAddress: {
-            required
+            required,
+            unicodeAlphaNum
+          },
+          apartmentNumber: {
+            unicodeAlphaNum
           },
-          apartmentNumber: {},
           zipCode: {
             required,
-            minLength: minLength(3)
+            minLength: minLength(3),
+            unicodeAlphaNum
           },
           city: {
-            required
+            required,
+            unicodeAlpha
           },
           paymentMethod: {
             required
@@ -429,13 +442,16 @@ export default {
         payment: {
           firstName: {
             required,
-            minLength: minLength(3)
+            minLength: minLength(2),
+            unicodeAlpha
           },
           lastName: {
-            required
+            required,
+            unicodeAlpha
           },
           company: {
-            required
+            required,
+            unicodeAlphaNum
           },
           taxId: {
             required,
@@ -445,15 +461,20 @@ export default {
             required
           },
           streetAddress: {
-            required
+            required,
+            unicodeAlphaNum
+          },
+          apartmentNumber: {
+            unicodeAlphaNum
           },
-          apartmentNumber: {},
           zipCode: {
             required,
-            minLength: minLength(4)
+            minLength: minLength(3),
+            unicodeAlphaNum
           },
           city: {
-            required
+            required,
+            unicodeAlpha
           },
           paymentMethod: {
             required
diff --git a/components/core/blocks/Checkout/Product.vue b/components/core/blocks/Checkout/Product.vue
index 220e7ba..5744b79 100644
--- a/components/core/blocks/Checkout/Product.vue
+++ b/components/core/blocks/Checkout/Product.vue
@@ -1,19 +1,31 @@
 <template>
   <div class="flex flex-wrap checkout-product-item  pb-3 mb-3 border-b">
     <div class="w-1/4 px-2">
-      <img class="blend" v-lazy="thumbnail">
+      <div class="blend">
+        <product-image :image="image" />
+      </div>
     </div>
     <div class="w-3/4">
       <div class="w-full flex flex-wrap">
         <div class="w-3/4">
-          <div class="font-medium cl-accent serif">{{ product.name | htmlDecode }}</div>
-          <div class="text-grey-dark text-sm mt-1">{{ product.sku }}</div>
+          <div class="font-medium cl-accent serif">
+            {{ product.name | htmlDecode }}
+          </div>
+          <div class="text-grey-dark text-sm mt-1">
+            {{ product.sku }}
+          </div>
           <div class="text-sm mt-2 options" v-if="product.totals && product.totals.options">
             <div v-for="opt in product.totals.options" :key="opt.label">
               <span class="opn text-grey">{{ opt.label }}: </span>
               <span class="opv text-grey-dark" v-html="opt.value" />
             </div>
           </div>
+          <div class="text-sm mt-2 options" v-else-if="product.options">
+            <div v-for="opt in product.options" :key="opt.label">
+              <span class="opn text-grey">{{ opt.label }}: </span>
+              <span class="opv text-grey-dark" v-html="opt.value" />
+            </div>
+          </div>
           <div>
             <span class="text-sm">
               <span class="text-grey">{{ $t('Qty') }}:</span>
@@ -24,29 +36,47 @@
           </div>
         </div>
         <div class="w-1/4 text-right">
-          <div v-if="!product.totals">
-            <span class="text-error block font-medium" v-if="product.special_price">{{ product.priceInclTax * product.qty | price }} </span>
-            <span class="price-original block text-sm text-grey-dark mt-1" v-if="product.special_price" >{{ product.originalPriceInclTax * product.qty | price }}</span>
-            <span v-if="!product.special_price" class="h4">{{ product.priceInclTax * product.qty | price }}</span>
+          <div v-if="isOnline && product.totals">
+            <span class="text-error font-medium block" v-if="product.totals.discount_amount">{{ product.totals.row_total - product.totals.discount_amount + product.totals.tax_amount | price(storeView) }} </span>
+            <span class="price-original block text-sm text-grey-dark mt-1" v-if="product.totals.discount_amount" >{{ product.totals.row_total_incl_tax | price(storeView) }}</span>
+            <span v-if="!product.totals.discount_amount" class="h4">{{ product.totals.row_total_incl_tax | price(storeView) }}</span>
           </div>
-          <div v-if="product.totals">
-            <span class="text-error font-medium block" v-if="product.totals.discount_amount">{{ product.totals.row_total_incl_tax - product.totals.discount_amount | price }} </span>
-            <span class="price-original block text-sm text-grey-dark mt-1" v-if="product.totals.discount_amount" >{{ product.totals.row_total_incl_tax | price }}</span>
-            <span v-if="!product.totals.discount_amount" class="h4">{{ product.totals.row_total_incl_tax | price }}</span>
+          <div v-else>
+            <span class="text-error block font-medium" v-if="product.special_price">{{ product.price_incl_tax * product.qty | price(storeView) }} </span>
+            <span class="price-original block text-sm text-grey-dark mt-1" v-if="product.special_price" >{{ product.original_price_incl_tax * product.qty | price(storeView) }}</span>
+            <span v-if="!product.special_price" class="h4">{{ product.price_incl_tax * product.qty | price(storeView) }}</span>
           </div>
         </div>
-
       </div>
     </div>
   </div>
-
 </template>
 
 <script>
 import { Product } from '@vue-storefront/core/modules/checkout/components/Product'
+import { onlineHelper } from '@vue-storefront/core/helpers'
+import ProductImage from 'theme/components/core/ProductImage'
+import { currentStoreView } from '@vue-storefront/core/lib/multistore'
 
 export default {
-  mixins: [Product]
+  computed: {
+    storeView () {
+      return currentStoreView()
+    },
+    isOnline () {
+      return onlineHelper.isOnline
+    },
+    image () {
+      return {
+        loading: this.thumbnail,
+        src: this.thumbnail
+      }
+    }
+  },
+  mixins: [Product],
+  components: {
+    ProductImage
+  }
 }
 </script>
 
diff --git a/components/core/blocks/Checkout/Shipping.vue b/components/core/blocks/Checkout/Shipping.vue
index 73d0290..4b14e23 100644
--- a/components/core/blocks/Checkout/Shipping.vue
+++ b/components/core/blocks/Checkout/Shipping.vue
@@ -182,7 +182,6 @@
             autocomplete="tel"
           />
         </div>
-
       </div>
 
       <div class="w-full md:w-11/12">
@@ -199,10 +198,10 @@
             :value="shipping.shippingMethod == method.method_code"
             @change="selectShippingMethod(method.method_code)"
           >
-            {{ method.method_title }} | {{ method.amount | price }}
+            {{ method.method_title }} | {{ method.amount | price(storeView) }}
           </base-radiobutton>
         </div>
-        <span class="validation-error" v-if="$v.shipping.shippingMethod.$error && !$v.shipping.shippingMethod.required">
+        <span class="text-error" v-if="$v.shipping.shippingMethod.$error && !$v.shipping.shippingMethod.required">
           {{ $t('Field is required') }}
         </span>
       </div>
@@ -253,7 +252,7 @@
           </div>
           <div class="v-full mt-3">
             <base-radiobutton id="shipping-selected" :value="true" :disabled="true">
-              {{ getShippingMethod().method_title }} | {{ getShippingMethod().amount | price }}
+              {{ getShippingMethod().method_title }} | {{ getShippingMethod().amount | price(storeView) }}
             </base-radiobutton>
           </div>
         </div>
@@ -263,8 +262,10 @@
 </template>
 
 <script>
-import {required, minLength} from 'vuelidate/lib/validators'
-import {Shipping} from '@vue-storefront/core/modules/checkout/components/Shipping'
+import { required, minLength } from 'vuelidate/lib/validators'
+import { unicodeAlpha, unicodeAlphaNum } from '@vue-storefront/core/helpers/validators'
+import { Shipping } from '@vue-storefront/core/modules/checkout/components/Shipping'
+import { currentStoreView } from '@vue-storefront/core/lib/multistore'
 
 import BaseCheckbox from 'theme/components/core/blocks/Form/BaseCheckbox'
 import BaseRadiobutton from 'theme/components/core/blocks/Form/BaseRadiobutton'
@@ -291,6 +292,9 @@ export default {
           label: item.name
         }
       })
+    },
+    storeView () {
+      return currentStoreView()
     }
   },
   methods: {
@@ -304,27 +308,34 @@ export default {
     shipping: {
       firstName: {
         required,
-        minLength: minLength(3)
+        minLength: minLength(2),
+        unicodeAlpha
       },
       lastName: {
-        required
+        required,
+        unicodeAlpha
       },
       country: {
         required
       },
       streetAddress: {
-        required
+        required,
+        unicodeAlphaNum
+      },
+      apartmentNumber: {
+        unicodeAlphaNum
       },
-      apartmentNumber: {},
       shippingMethod: {
         required
       },
       zipCode: {
         required,
-        minLength: minLength(3)
+        minLength: minLength(3),
+        unicodeAlphaNum
       },
       city: {
-        required
+        required,
+        unicodeAlpha
       }
     }
   }
diff --git a/components/core/blocks/Checkout/ThankYouPage.vue b/components/core/blocks/Checkout/ThankYouPage.vue
index 8a14ca0..31a15d8 100644
--- a/components/core/blocks/Checkout/ThankYouPage.vue
+++ b/components/core/blocks/Checkout/ThankYouPage.vue
@@ -23,21 +23,21 @@
           <h4 v-if="OfflineOnly" class="my-2">
             {{ $t('You are offline') }}
           </h4>
-          <p v-if="OfflineOnly && !isNotificationSupported" >
+          <p v-if="OfflineOnly && !isNotificationSupported">
             {{ $t('To finish the order just come back to our store while online. Your order will be sent to the server as soon as you come back here while online and then confirmed regarding the stock quantities of selected items') }}
           </p>
-          <p v-if="OfflineOnly && isNotificationSupported && !isPermissionGranted" >
+          <p v-if="OfflineOnly && isNotificationSupported && !isPermissionGranted">
             {{ $t("You can allow us to remind you about the order via push notification after coming back online. You'll only need to click on it to confirm.") }}
           </p>
-          <p v-if="OfflineOnly && isNotificationSupported && isPermissionGranted" >
+          <p v-if="OfflineOnly && isNotificationSupported && isPermissionGranted">
             <strong>{{ $t('You will receive Push notification after coming back online. You can confirm the order by clicking on it') }}</strong>
           </p>
           <p v-if="!isPermissionGranted && isNotificationSupported">
-            <button class="btn-grey-dark mt-5" @click.native="requestNotificationPermission()" >
+            <button class="btn-grey-dark mt-5" @click="requestNotificationPermission()">
               {{ $t('Keep me notified about this order') }}
             </button>
           </p>
-          <div id="thank-you-extensions"/>
+          <div id="thank-you-extensions" />
 
           <h3 class="border-t mt-10 pt-10 mb-5">
             {{ $t('What we can improve?') }}
@@ -58,7 +58,6 @@
               {{ $t('Give a feedback') }}
             </button>
           </form>
-
         </div>
         <div class="w-1/3">
           <div class="p-10 bg-grey-lighter">
diff --git a/components/core/blocks/Form/BaseCheckbox.vue b/components/core/blocks/Form/BaseCheckbox.vue
index 760f765..4fa52ce 100644
--- a/components/core/blocks/Form/BaseCheckbox.vue
+++ b/components/core/blocks/Form/BaseCheckbox.vue
@@ -9,28 +9,29 @@
         @keyup.enter="$emit('click')"
         @click="$emit('click')"
         @blur="$emit('blur')"
-        @change="$emit('change')"
+        @change="$emit('change', $event.target.checked)"
         :disabled="disabled"
       >
       <label :for="id" :class="{'cursor-pointer': !disabled }">
-        <slot/>
+        <slot />
       </label>
     </div>
-    <template v-if="validation">
-      <span
-        class="block text-error text-h6"
-        v-if="validation.condition"
-        data-testid="errorMessage"
-      >
-        {{ validation.text }}
-      </span>
-    </template>
+    <ValidationMessages v-if="validations" :validations="validations" />
   </div>
 </template>
 
 <script>
+import ValidationMessages from './ValidationMessages.vue'
+
 export default {
   name: 'BaseCheckbox',
+  components: {
+    ValidationMessages
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
   props: {
     id: {
       type: String,
@@ -40,10 +41,9 @@ export default {
       type: Boolean,
       required: true
     },
-    validation: {
-      type: Object,
-      required: false,
-      default: () => { }
+    validations: {
+      type: Array,
+      default: () => []
     },
     disabled: {
       type: Boolean,
diff --git a/components/core/blocks/Form/ValidationMessages.vue b/components/core/blocks/Form/ValidationMessages.vue
index 3f42c6a..716427c 100644
--- a/components/core/blocks/Form/ValidationMessages.vue
+++ b/components/core/blocks/Form/ValidationMessages.vue
@@ -4,7 +4,7 @@
       v-for="(validation, index) in validations"
       :key="index"
       v-if="validation.condition"
-      class="block cl-error h6 mt8"
+      class="block text-error text-h6"
       data-testid="errorMessage"
     >
       {{ validation.text }}
diff --git a/pages/Checkout.vue b/pages/Checkout.vue
index ac05558..2b44546 100644
--- a/pages/Checkout.vue
+++ b/pages/Checkout.vue
@@ -13,10 +13,10 @@
             :is-active="activeSection.personalDetails"
             :focused-field="focusedField"
           />
-          <shipping class="line relative" :is-active="activeSection.shipping"/>
-          <payment class="line relative" :is-active="activeSection.payment"/>
-          <order-review class="line relative" :is-active="activeSection.orderReview"/>
-          <div id="custom-steps"/>
+          <shipping class="line relative" :is-active="activeSection.shipping" />
+          <payment class="line relative" :is-active="activeSection.payment" />
+          <order-review class="line relative" :is-active="activeSection.orderReview" />
+          <div id="custom-steps" />
         </div>
         <div class="w-full md:w-2/5 mt-10 md:mt-0 px-4 py-4 lg:px-8 lg:py-8 bg-grey-lighter">
           <cart-summary />

From 8afe974b8913bd96fe556d6cfe35d12b4826c088 Mon Sep 17 00:00:00 2001
From: Dmitry Kozachek <dmitry.kozachek@gmail.com>
Date: Sat, 18 Apr 2020 14:09:17 +0300
Subject: [PATCH 14/15] fix(search): Fix search product image

---
 components/core/blocks/Search/Product.vue | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/components/core/blocks/Search/Product.vue b/components/core/blocks/Search/Product.vue
index cf49204..9f50f0b 100644
--- a/components/core/blocks/Search/Product.vue
+++ b/components/core/blocks/Search/Product.vue
@@ -18,13 +18,13 @@
       >
         <div class="col-auto mr-1 sm:mr-4 bg-grey-lightest">
           <div class="product-image w-full">
-            <img
-              :alt="product.name"
-              :src="thumbnailObj.loading"
-              v-lazy="thumbnailObj"
+            <product-image
               class="image"
+              :image="thumbnailObj"
+              :alt="product.name | htmlDecode"
+              :calc-ratio="false"
               data-testid="productImage"
-            >
+            />
           </div>
         </div>
         <div
@@ -55,9 +55,13 @@ import rootStore from '@vue-storefront/core/store'
 import { ProductTile } from '@vue-storefront/core/modules/catalog/components/ProductTile.ts'
 import config from 'config'
 import { currentStoreView } from '@vue-storefront/core/lib/multistore'
+import ProductImage from 'theme/components/core/ProductImage'
 
 export default {
   mixins: [ProductTile],
+  components: {
+    ProductImage
+  },
   computed: {
     storeView () {
       return currentStoreView()
@@ -109,6 +113,7 @@ export default {
   mix-blend-mode: multiply;
   vertical-align: top;
   width: 60px;
+  height: 75px;
 }
 
 %label {

From 8492b440a77948c2d22dab2d911a619ec6769b47 Mon Sep 17 00:00:00 2001
From: Dmitry Kozachek <dmitry.kozachek@gmail.com>
Date: Tue, 21 Apr 2020 17:13:15 +0300
Subject: [PATCH 15/15] feat(footer): Add "created by"

---
 components/core/blocks/Footer/Footer.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/components/core/blocks/Footer/Footer.vue b/components/core/blocks/Footer/Footer.vue
index 085b5fb..58e9b16 100644
--- a/components/core/blocks/Footer/Footer.vue
+++ b/components/core/blocks/Footer/Footer.vue
@@ -213,7 +213,7 @@
 
     <div class="container mx-auto">
       <div class="row items-center justify-between py-6">
-        <div class="col-12 md:col-6 flex mb-8 md:mb-0">
+        <div class="col-12 md:col-4 flex mb-8 md:mb-0">
           <span class="menu-link text-sm">© {{ currentYear }} Vuetique</span>
 
           <router-link class="menu-link ml-8 text-sm text-grey-dark" :to="localizedRoute('/terms')" exact>
@@ -226,7 +226,7 @@
 
         </div>
 
-        <div class="col-12 md:col-6 flex md:justify-end">
+        <div class="col-12 md:col-4 flex md:justify-center mb-8 md:mb-0">
           <div class="footer-pay-item">
             <img src="/assets/icons/pay-visa.png" alt="">
           </div>
@@ -244,6 +244,10 @@
           </div>
         </div>
 
+        <div class="col-12 md:col-4 flex md:justify-end">
+          <span class="text-sm mr-1">Created by</span>
+          <a class="menu-link text-sm text-grey-dark" href="https://www.absolutewebservices.com/">Absolute&nbsp;Web</a>
+        </div>
       </div>
     </div>