From 209f53a1e9a371e99360a14ad0e8a509e77c2c44 Mon Sep 17 00:00:00 2001
From: Przemek Spaczek <pspaczek@divante.co>
Date: Mon, 16 Dec 2019 10:02:38 +0100
Subject: [PATCH 01/37] fix image loading styles

---
 src/themes/default/components/core/ProductImage.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/themes/default/components/core/ProductImage.vue b/src/themes/default/components/core/ProductImage.vue
index 5e4bb27e5..df95e2398 100644
--- a/src/themes/default/components/core/ProductImage.vue
+++ b/src/themes/default/components/core/ProductImage.vue
@@ -35,7 +35,6 @@
     >
   </div>
 </template>
-
 <script>
 import { onlineHelper } from '@vue-storefront/core/helpers'
 
@@ -83,7 +82,6 @@ export default {
   }
 }
 </script>
-
 <style lang="scss" scoped>
   .image{
     position: relative;
@@ -94,11 +92,11 @@ export default {
     mix-blend-mode: multiply;
     &__thumb{
       max-width: 100%;
+      width: 100%;
       height: auto;
       position: absolute;
       top: 50%;
       left: 50%;
-      width: auto;
       transform: translate3d(-50%, -50%, 0);
       &--placeholder{
         width: auto;

From 662cb1d708503a122d7a6d4ad7c7fbff64eee78e Mon Sep 17 00:00:00 2001
From: Przemek Spaczek <pspaczek@divante.co>
Date: Mon, 16 Dec 2019 10:16:29 +0100
Subject: [PATCH 02/37] update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 99fe057d6..7c2321fa2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Mount app in 'beforeResolve' if it's not dispatched in 'onReady' - @gibkigonzo (#3669)
 - change translation from jp-JP to ja-JP - @gibkigonzo (#3824)
 - Fix product images, my account link, warnings in console - @andrzejewsky (#3850)
+- Fix low-quality images styles - @przspa (#3906)
 
 ## [1.10.4] - 18.10.2019
 

From 1b5ba0eab8eed1ab7e8a8d42ba245b14b43f4bdf Mon Sep 17 00:00:00 2001
From: Patryk Andrzejewski <vox3r69@gmail.com>
Date: Thu, 26 Dec 2019 23:26:32 +0100
Subject: [PATCH 03/37] Update CHANGELOG.md

---
 CHANGELOG.md | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7c2321fa2..27ef11594 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+
+## [1.10.6] - UNRELEASED
+
+### Fixed
+- Fix low-quality images styles - @przspa (#3906)
+
+
 ## [1.10.5] - 28.11.2019
 
 ### Fixed
@@ -16,7 +23,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Mount app in 'beforeResolve' if it's not dispatched in 'onReady' - @gibkigonzo (#3669)
 - change translation from jp-JP to ja-JP - @gibkigonzo (#3824)
 - Fix product images, my account link, warnings in console - @andrzejewsky (#3850)
-- Fix low-quality images styles - @przspa (#3906)
 
 ## [1.10.4] - 18.10.2019
 

From de11e2221fc48a03515489dcdd35bbd986ffe337 Mon Sep 17 00:00:00 2001
From: tkostuch <tkostuch@divante.pl>
Date: Mon, 30 Dec 2019 13:29:21 +0100
Subject: [PATCH 04/37] update url/router/beforeEach based on 1.11

---
 core/modules/url/router/beforeEach.ts | 26 +++++++++++---------------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/core/modules/url/router/beforeEach.ts b/core/modules/url/router/beforeEach.ts
index 72ad0d74d..8e4b5b82d 100644
--- a/core/modules/url/router/beforeEach.ts
+++ b/core/modules/url/router/beforeEach.ts
@@ -28,8 +28,9 @@ export async function beforeEach (to: Route, from: Route, next) {
   const path = normalizeUrlPath(to.path)
   const hasRouteParams = to.hasOwnProperty('params') && Object.values(to.params).length > 0
   const isPreviouslyDispatchedDynamicRoute = to.matched.length > 0 && to.name && to.name.startsWith('urldispatcher')
-  if (!to.matched.length || (isPreviouslyDispatchedDynamicRoute && !hasRouteParams)) {
-    UrlDispatchMapper(to).then((routeData) => {
+  if (!to.matched.length || to.matched[0].name.endsWith('page-not-found') || (isPreviouslyDispatchedDynamicRoute && !hasRouteParams)) {
+    try {
+      const routeData = await UrlDispatchMapper(to)
       if (routeData) {
         let dynamicRoutes: LocalizedRoute[] = processDynamicRoute(routeData, path, !isPreviouslyDispatchedDynamicRoute)
         if (dynamicRoutes && dynamicRoutes.length > 0) {
@@ -39,28 +40,23 @@ export async function beforeEach (to: Route, from: Route, next) {
           })
         } else {
           Logger.error('Route not found ' + routeData['name'], 'dispatcher')()
-          next(localizedRoute('/page-not-found', currentStoreView().storeCode))
+          next()
         }
       } else {
         Logger.error('No mapping found for ' + path, 'dispatcher')()
-        next(localizedRoute('/page-not-found', currentStoreView().storeCode))
+        next()
       }
-    }).catch(e => {
+    } catch (e) {
       Logger.error(e, 'dispatcher')()
-      if (!isServer) {
-        next(localizedRoute('/page-not-found', currentStoreView().storeCode))
-      } else {
-        const storeCode = currentStoreView().storeCode
-        Vue.prototype.$ssrRequestContext.server.response.redirect((storeCode !== '' ? ('/' + storeCode) : '') + '/page-not-found') // TODO: Refactor this one after @filrak will give us a way to access ServerContext from Modules directly :-)
-        // ps. we can't use the next() call here as it's not doing the real redirect in SSR mode (just processing different component without changing the URL and that causes the CSR / SSR DOM mismatch while hydrating)
-      }
-    }).finally(() => {
-      routerHelper.popStateDetected = false
+      next()
+    } finally {
       RouterManager.unlockRoute()
-    })
+    }
   } else {
     next()
     RouterManager.unlockRoute()
     routerHelper.popStateDetected = false
   }
+
+  routerHelper.popStateDetected = false
 }

From d8130f6e8002851b9ec42c86fc5252ec7f60a98a Mon Sep 17 00:00:00 2001
From: tkostuch <tkostuch@divante.pl>
Date: Mon, 30 Dec 2019 13:31:42 +0100
Subject: [PATCH 05/37] update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 27ef11594..530a44f57 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 - Fix low-quality images styles - @przspa (#3906)
+- Fix page-not-found redirect in dispatcher - @gibkigonzo (#3956)
 
 
 ## [1.10.5] - 28.11.2019

From be83fc69f48bba35dd602aca1026a1f03ce0705e Mon Sep 17 00:00:00 2001
From: tkostuch <tkostuch@divante.pl>
Date: Tue, 7 Jan 2020 08:41:35 +0100
Subject: [PATCH 06/37] Fix hiding overlay for newsletter modal

---
 CHANGELOG.md                                                    | 1 +
 src/themes/default/components/core/blocks/Footer/Newsletter.vue | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 530a44f57..40f01b656 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 - Fix low-quality images styles - @przspa (#3906)
 - Fix page-not-found redirect in dispatcher - @gibkigonzo (#3956)
+- Fix hiding overlay for newsletter modal - @gibkigonzo (#3970)
 
 
 ## [1.10.5] - 28.11.2019
diff --git a/src/themes/default/components/core/blocks/Footer/Newsletter.vue b/src/themes/default/components/core/blocks/Footer/Newsletter.vue
index 697c59fc5..262d938a6 100644
--- a/src/themes/default/components/core/blocks/Footer/Newsletter.vue
+++ b/src/themes/default/components/core/blocks/Footer/Newsletter.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="newsletter py25 px15 bg-cl-secondary" v-if="!isSubscribed">
+  <div class="newsletter py25 px15 bg-cl-secondary" v-show="!isSubscribed">
     <div class="container">
       <div class="newsletter-content m0 row middle-sm start-md">
         <div class="col-md-8 col-xs-12">

From e8fb5ca292bcba994a89b1e5e2092b3f13e11231 Mon Sep 17 00:00:00 2001
From: tkostuch <tkostuch@divante.pl>
Date: Fri, 17 Jan 2020 11:56:01 +0100
Subject: [PATCH 07/37] create token only when its needed in offline and
 checkout

---
 core/modules/cart/store/actions.ts                          | 4 ++--
 core/modules/offline-order/helpers/onNetworkStatusChange.ts | 2 +-
 core/pages/Checkout.js                                      | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/core/modules/cart/store/actions.ts b/core/modules/cart/store/actions.ts
index b0b63c15c..3b6371dc1 100644
--- a/core/modules/cart/store/actions.ts
+++ b/core/modules/cart/store/actions.ts
@@ -226,7 +226,7 @@ const actions: ActionTree<CartState, RootState> = {
     return dispatch('sync', { forceClientState, dryRun })
   },
   /** @description this method is part of "public" cart API */
-  async load ({ getters, commit, rootGetters, dispatch }, { forceClientState = false }: {forceClientState?: boolean} = {}) {
+  async load ({ getters, commit, rootGetters, dispatch }, { forceClientState = false, createCartToken = false }: {forceClientState?: boolean, createCartToken?: boolean} = {}) {
     if (isServer) return
     const cartShippingMethod = getters.getShippingMethod
     if ((!cartShippingMethod || !cartShippingMethod.method_code) && (Array.isArray(rootGetters['shipping/shippingMethods']))) {
@@ -252,7 +252,7 @@ const actions: ActionTree<CartState, RootState> = {
         Logger.info('Cart token received from cache.', 'cache', token)()
         Logger.info('Syncing cart with the server.', 'cart')()
         dispatch('sync', { forceClientState, dryRun: !config.cart.serverMergeByDefault })
-      } else {
+      } else if (createCartToken && storedItems.length) { // create cart token only when it's needed and when there are any products
         Logger.info('Creating server cart token', 'cart')()
         await dispatch('connect', { guestCart: false })
       }
diff --git a/core/modules/offline-order/helpers/onNetworkStatusChange.ts b/core/modules/offline-order/helpers/onNetworkStatusChange.ts
index 3c4347965..dacd66fea 100644
--- a/core/modules/offline-order/helpers/onNetworkStatusChange.ts
+++ b/core/modules/offline-order/helpers/onNetworkStatusChange.ts
@@ -10,7 +10,7 @@ export function onNetworkStatusChange (store) {
 
   if (typeof navigator !== 'undefined' && navigator.onLine) {
     EventBus.$emit('sync/PROCESS_QUEUE', { config: config }) // process checkout queue
-    store.dispatch('cart/load', { forceClientState: true })
+    store.dispatch('cart/load', { forceClientState: true, createCartToken: true })
     if (config.orders.offline_orders.automatic_transmission_enabled || store.getters['checkout/isThankYouPage']) {
       EventBus.$emit('order/PROCESS_QUEUE', { config: config }) // process checkout queue
     } else {
diff --git a/core/pages/Checkout.js b/core/pages/Checkout.js
index e7fb12230..2f883aca5 100644
--- a/core/pages/Checkout.js
+++ b/core/pages/Checkout.js
@@ -61,7 +61,7 @@ export default {
     this.$bus.$on('checkout-after-shippingMethodChanged', this.onAfterShippingMethodChanged)
     this.$bus.$on('checkout-after-validationError', this.focusField)
     if (!this.isThankYouPage) {
-      this.$store.dispatch('cart/load', { forceClientState: true }).then(() => {
+      this.$store.dispatch('cart/load', { forceClientState: true, createCartToken: true }).then(() => {
         if (this.$store.state.cart.cartItems.length === 0) {
           this.notifyEmptyCart()
           this.$router.push(this.localizedRoute('/'))

From b9bc274fd270434836bdc99fbdafa1079588ace9 Mon Sep 17 00:00:00 2001
From: tkostuch <tkostuch@divante.pl>
Date: Fri, 17 Jan 2020 14:50:12 +0100
Subject: [PATCH 08/37] remove createing token when login, add updating
 payments methods in checkout after return to online

---
 core/modules/cart/components/AddToCart.ts     | 10 ++++----
 core/modules/cart/store/actions.ts            | 24 +++++++++----------
 core/modules/checkout/components/Payment.ts   |  6 +++++
 .../helpers/onNetworkStatusChange.ts          |  2 +-
 core/modules/user/store/actions.ts            |  2 --
 core/pages/Checkout.js                        |  2 +-
 6 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/core/modules/cart/components/AddToCart.ts b/core/modules/cart/components/AddToCart.ts
index e7ba46d47..1bb0a1587 100644
--- a/core/modules/cart/components/AddToCart.ts
+++ b/core/modules/cart/components/AddToCart.ts
@@ -22,12 +22,10 @@ export const AddToCart = {
       this.isAddingToCart = true
       try {
         const diffLog = await this.$store.dispatch('cart/addItem', { productToAdd: product })
-        if (diffLog) {
-          if (diffLog.clientNotifications && diffLog.clientNotifications.length > 0) {
-            diffLog.clientNotifications.forEach(notificationData => {
-              this.notifyUser(notificationData)
-            })
-          }
+        if (diffLog && diffLog.clientNotifications && diffLog.clientNotifications.length > 0) {
+          diffLog.clientNotifications.forEach(notificationData => {
+            this.notifyUser(notificationData)
+          })
         } else {
           this.notifyUser({
             type: 'success',
diff --git a/core/modules/cart/store/actions.ts b/core/modules/cart/store/actions.ts
index 3b6371dc1..86568a380 100644
--- a/core/modules/cart/store/actions.ts
+++ b/core/modules/cart/store/actions.ts
@@ -226,7 +226,7 @@ const actions: ActionTree<CartState, RootState> = {
     return dispatch('sync', { forceClientState, dryRun })
   },
   /** @description this method is part of "public" cart API */
-  async load ({ getters, commit, rootGetters, dispatch }, { forceClientState = false, createCartToken = false }: {forceClientState?: boolean, createCartToken?: boolean} = {}) {
+  async load ({ getters, commit, rootGetters, dispatch }, { forceClientState = false }: {forceClientState?: boolean} = {}) {
     if (isServer) return
     const cartShippingMethod = getters.getShippingMethod
     if ((!cartShippingMethod || !cartShippingMethod.method_code) && (Array.isArray(rootGetters['shipping/shippingMethods']))) {
@@ -252,10 +252,16 @@ const actions: ActionTree<CartState, RootState> = {
         Logger.info('Cart token received from cache.', 'cache', token)()
         Logger.info('Syncing cart with the server.', 'cart')()
         dispatch('sync', { forceClientState, dryRun: !config.cart.serverMergeByDefault })
-      } else if (createCartToken && storedItems.length) { // create cart token only when it's needed and when there are any products
-        Logger.info('Creating server cart token', 'cart')()
-        await dispatch('connect', { guestCart: false })
       }
+      await dispatch('createCartToken')
+    }
+  },
+  async createCartToken ({dispatch, getters}) {
+    const storedItems = getters['getCartItems'] || []
+    const cartToken = getters['getCartToken']
+    if (storedItems.length && !cartToken) {
+      Logger.info('Creating server cart token', 'cart')()
+      await dispatch('connect', { guestCart: false })
     }
   },
   /** Get one single item from the client's cart */
@@ -350,6 +356,7 @@ const actions: ActionTree<CartState, RootState> = {
       }
       productIndex++
     }
+    await dispatch('createCartToken')
     if (getters.isCartSyncEnabled && getters.isCartConnected && !forceServerSilence) {
       return dispatch('sync', { forceClientState: true })
     } else {
@@ -500,14 +507,7 @@ const actions: ActionTree<CartState, RootState> = {
   },
   /** authorize the cart after user got logged in using the current cart token */
   authorize ({ dispatch }) {
-    Vue.prototype.$db.usersCollection.getItem('last-cart-bypass-ts', (err, lastCartBypassTs) => {
-      if (err) {
-        Logger.error(err, 'cart')()
-      }
-      if (!config.cart.bypassCartLoaderForAuthorizedUsers || (Date.now() - lastCartBypassTs) >= (1000 * 60 * 24)) { // don't refresh the shopping cart id up to 24h after last order
-        dispatch('connect', { guestCart: false })
-      }
-    })
+    Logger.warn('deprecated - cart token is created when products is added to cart')
   },
   /** connect cart to the server and set the cart token */
   async connect ({ getters, dispatch, commit }, { guestCart = false, forceClientState = false }) {
diff --git a/core/modules/checkout/components/Payment.ts b/core/modules/checkout/components/Payment.ts
index fe7832786..86f28c8cb 100644
--- a/core/modules/checkout/components/Payment.ts
+++ b/core/modules/checkout/components/Payment.ts
@@ -1,6 +1,7 @@
 import { mapState, mapGetters } from 'vuex'
 import RootState from '@vue-storefront/core/types/RootState'
 import toString from 'lodash-es/toString'
+import debounce from 'lodash-es/debounce'
 const Countries = require('@vue-storefront/i18n/resource/countries.json')
 
 export const Payment = {
@@ -69,6 +70,11 @@ export const Payment = {
       handler () {
         this.useGenerateInvoice()
       }
+    },
+    paymentMethods: {
+      handler: debounce(function () {
+        this.$bus.$emit('checkout-payment-method-changed', this.payment.paymentMethod)
+      }, 500)
     }
   },
   methods: {
diff --git a/core/modules/offline-order/helpers/onNetworkStatusChange.ts b/core/modules/offline-order/helpers/onNetworkStatusChange.ts
index dacd66fea..3c4347965 100644
--- a/core/modules/offline-order/helpers/onNetworkStatusChange.ts
+++ b/core/modules/offline-order/helpers/onNetworkStatusChange.ts
@@ -10,7 +10,7 @@ export function onNetworkStatusChange (store) {
 
   if (typeof navigator !== 'undefined' && navigator.onLine) {
     EventBus.$emit('sync/PROCESS_QUEUE', { config: config }) // process checkout queue
-    store.dispatch('cart/load', { forceClientState: true, createCartToken: true })
+    store.dispatch('cart/load', { forceClientState: true })
     if (config.orders.offline_orders.automatic_transmission_enabled || store.getters['checkout/isThankYouPage']) {
       EventBus.$emit('order/PROCESS_QUEUE', { config: config }) // process checkout queue
     } else {
diff --git a/core/modules/user/store/actions.ts b/core/modules/user/store/actions.ts
index 109dde4bd..5546ef224 100644
--- a/core/modules/user/store/actions.ts
+++ b/core/modules/user/store/actions.ts
@@ -188,7 +188,6 @@ const actions: ActionTree<UserState, RootState> = {
             context.commit(types.USER_INFO_LOADED, res)
             context.dispatch('setUserGroup', res)
             Vue.prototype.$bus.$emit('user-after-loggedin', res)
-            rootStore.dispatch('cart/authorize')
 
             resolve(res)
             resolvedFromCache = true
@@ -214,7 +213,6 @@ const actions: ActionTree<UserState, RootState> = {
             }
             if (!resolvedFromCache && resp.resultCode === 200) {
               Vue.prototype.$bus.$emit('user-after-loggedin', resp.result)
-              rootStore.dispatch('cart/authorize')
               resolve(resp)
             } else {
               resolve(null)
diff --git a/core/pages/Checkout.js b/core/pages/Checkout.js
index 2f883aca5..e7fb12230 100644
--- a/core/pages/Checkout.js
+++ b/core/pages/Checkout.js
@@ -61,7 +61,7 @@ export default {
     this.$bus.$on('checkout-after-shippingMethodChanged', this.onAfterShippingMethodChanged)
     this.$bus.$on('checkout-after-validationError', this.focusField)
     if (!this.isThankYouPage) {
-      this.$store.dispatch('cart/load', { forceClientState: true, createCartToken: true }).then(() => {
+      this.$store.dispatch('cart/load', { forceClientState: true }).then(() => {
         if (this.$store.state.cart.cartItems.length === 0) {
           this.notifyEmptyCart()
           this.$router.push(this.localizedRoute('/'))

From fe5de3eeb9a7b681044814ab4f16aae048aed037 Mon Sep 17 00:00:00 2001
From: tkostuch <tkostuch@divante.pl>
Date: Fri, 17 Jan 2020 15:40:07 +0100
Subject: [PATCH 09/37] remove token creation after make order

---
 core/modules/cart/components/AddToCart.ts   | 10 ++++++----
 core/modules/cart/store/actions.ts          |  4 +++-
 core/modules/checkout/components/Payment.ts |  2 +-
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/core/modules/cart/components/AddToCart.ts b/core/modules/cart/components/AddToCart.ts
index 1bb0a1587..e7ba46d47 100644
--- a/core/modules/cart/components/AddToCart.ts
+++ b/core/modules/cart/components/AddToCart.ts
@@ -22,10 +22,12 @@ export const AddToCart = {
       this.isAddingToCart = true
       try {
         const diffLog = await this.$store.dispatch('cart/addItem', { productToAdd: product })
-        if (diffLog && diffLog.clientNotifications && diffLog.clientNotifications.length > 0) {
-          diffLog.clientNotifications.forEach(notificationData => {
-            this.notifyUser(notificationData)
-          })
+        if (diffLog) {
+          if (diffLog.clientNotifications && diffLog.clientNotifications.length > 0) {
+            diffLog.clientNotifications.forEach(notificationData => {
+              this.notifyUser(notificationData)
+            })
+          }
         } else {
           this.notifyUser({
             type: 'success',
diff --git a/core/modules/cart/store/actions.ts b/core/modules/cart/store/actions.ts
index 86568a380..44a3e886e 100644
--- a/core/modules/cart/store/actions.ts
+++ b/core/modules/cart/store/actions.ts
@@ -141,7 +141,6 @@ const actions: ActionTree<CartState, RootState> = {
     if (options.recreateAndSyncCart && getters.isCartSyncEnabled) {
       await commit(types.CART_LOAD_CART_SERVER_TOKEN, null)
       await commit(types.CART_SET_ITEMS_HASH, null)
-      await dispatch('connect', { guestCart: !config.orders.directBackendSync }) // guest cart when not using directBackendSync because when the order hasn't been passed to Magento yet it will repopulate your cart
     }
   },
   /** Refresh the payment methods with the backend */
@@ -256,6 +255,9 @@ const actions: ActionTree<CartState, RootState> = {
       await dispatch('createCartToken')
     }
   },
+  /**
+   * Create cart token only when there are products in cart and we don't have token already
+   */
   async createCartToken ({dispatch, getters}) {
     const storedItems = getters['getCartItems'] || []
     const cartToken = getters['getCartToken']
diff --git a/core/modules/checkout/components/Payment.ts b/core/modules/checkout/components/Payment.ts
index 86f28c8cb..b193f2eb9 100644
--- a/core/modules/checkout/components/Payment.ts
+++ b/core/modules/checkout/components/Payment.ts
@@ -73,7 +73,7 @@ export const Payment = {
     },
     paymentMethods: {
       handler: debounce(function () {
-        this.$bus.$emit('checkout-payment-method-changed', this.payment.paymentMethod)
+        this.changePaymentMethod()
       }, 500)
     }
   },

From 755f3ef23a089e4a8272763ce4ac4c7d1b4eed06 Mon Sep 17 00:00:00 2001
From: tkostuch <tkostuch@divante.pl>
Date: Fri, 17 Jan 2020 17:49:10 +0100
Subject: [PATCH 10/37] revert sync cart

---
 core/modules/cart/store/actions.ts | 29 +++++++++++++----------------
 core/modules/user/store/actions.ts |  2 ++
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/core/modules/cart/store/actions.ts b/core/modules/cart/store/actions.ts
index 44a3e886e..e5e4684b5 100644
--- a/core/modules/cart/store/actions.ts
+++ b/core/modules/cart/store/actions.ts
@@ -252,18 +252,7 @@ const actions: ActionTree<CartState, RootState> = {
         Logger.info('Syncing cart with the server.', 'cart')()
         dispatch('sync', { forceClientState, dryRun: !config.cart.serverMergeByDefault })
       }
-      await dispatch('createCartToken')
-    }
-  },
-  /**
-   * Create cart token only when there are products in cart and we don't have token already
-   */
-  async createCartToken ({dispatch, getters}) {
-    const storedItems = getters['getCartItems'] || []
-    const cartToken = getters['getCartToken']
-    if (storedItems.length && !cartToken) {
-      Logger.info('Creating server cart token', 'cart')()
-      await dispatch('connect', { guestCart: false })
+      await dispatch('authorize')
     }
   },
   /** Get one single item from the client's cart */
@@ -358,7 +347,7 @@ const actions: ActionTree<CartState, RootState> = {
       }
       productIndex++
     }
-    await dispatch('createCartToken')
+    await dispatch('authorize')
     if (getters.isCartSyncEnabled && getters.isCartConnected && !forceServerSilence) {
       return dispatch('sync', { forceClientState: true })
     } else {
@@ -507,9 +496,17 @@ const actions: ActionTree<CartState, RootState> = {
     }
     return false
   },
-  /** authorize the cart after user got logged in using the current cart token */
-  authorize ({ dispatch }) {
-    Logger.warn('deprecated - cart token is created when products is added to cart')
+  /**
+   * Create cart token when there are products in cart and we don't have token already
+   * or recreate cart for user
+   */
+  async authorize ({ dispatch, getters }, { force = false } = {}) {
+    const storedItems = getters['getCartItems'] || []
+    const cartToken = getters['getCartToken']
+    if (storedItems.length && !cartToken || force) {
+      Logger.info('Creating server cart token', 'cart')()
+      await dispatch('connect', { guestCart: false })
+    }
   },
   /** connect cart to the server and set the cart token */
   async connect ({ getters, dispatch, commit }, { guestCart = false, forceClientState = false }) {
diff --git a/core/modules/user/store/actions.ts b/core/modules/user/store/actions.ts
index 5546ef224..9b17f65c5 100644
--- a/core/modules/user/store/actions.ts
+++ b/core/modules/user/store/actions.ts
@@ -188,6 +188,7 @@ const actions: ActionTree<UserState, RootState> = {
             context.commit(types.USER_INFO_LOADED, res)
             context.dispatch('setUserGroup', res)
             Vue.prototype.$bus.$emit('user-after-loggedin', res)
+            context.dispatch('cart/authorize', { force: true }, { root: true })
 
             resolve(res)
             resolvedFromCache = true
@@ -213,6 +214,7 @@ const actions: ActionTree<UserState, RootState> = {
             }
             if (!resolvedFromCache && resp.resultCode === 200) {
               Vue.prototype.$bus.$emit('user-after-loggedin', resp.result)
+              context.dispatch('cart/authorize', { force: true }, { root: true })
               resolve(resp)
             } else {
               resolve(null)

From a301410b06bda81180540ab949af3916ace655ae Mon Sep 17 00:00:00 2001
From: tkostuch <tkostuch@divante.pl>
Date: Fri, 17 Jan 2020 18:11:41 +0100
Subject: [PATCH 11/37] remove force create and use authorize

---
 core/modules/cart/store/actions.ts | 20 +++++++++++++++-----
 core/modules/user/store/actions.ts |  4 ++--
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/core/modules/cart/store/actions.ts b/core/modules/cart/store/actions.ts
index e5e4684b5..52757fafa 100644
--- a/core/modules/cart/store/actions.ts
+++ b/core/modules/cart/store/actions.ts
@@ -252,7 +252,7 @@ const actions: ActionTree<CartState, RootState> = {
         Logger.info('Syncing cart with the server.', 'cart')()
         dispatch('sync', { forceClientState, dryRun: !config.cart.serverMergeByDefault })
       }
-      await dispatch('authorize')
+      await dispatch('create')
     }
   },
   /** Get one single item from the client's cart */
@@ -347,7 +347,7 @@ const actions: ActionTree<CartState, RootState> = {
       }
       productIndex++
     }
-    await dispatch('authorize')
+    await dispatch('create')
     if (getters.isCartSyncEnabled && getters.isCartConnected && !forceServerSilence) {
       return dispatch('sync', { forceClientState: true })
     } else {
@@ -498,16 +498,26 @@ const actions: ActionTree<CartState, RootState> = {
   },
   /**
    * Create cart token when there are products in cart and we don't have token already
-   * or recreate cart for user
    */
-  async authorize ({ dispatch, getters }, { force = false } = {}) {
+  async create ({ dispatch, getters }) {
     const storedItems = getters['getCartItems'] || []
     const cartToken = getters['getCartToken']
-    if (storedItems.length && !cartToken || force) {
+    if (storedItems.length && !cartToken) {
       Logger.info('Creating server cart token', 'cart')()
       await dispatch('connect', { guestCart: false })
     }
   },
+  /** authorize the cart after user got logged in using the current cart token */
+  authorize ({ dispatch }) {
+    Vue.prototype.$db.usersCollection.getItem('last-cart-bypass-ts', (err, lastCartBypassTs) => {
+      if (err) {
+        Logger.error(err, 'cart')()
+      }
+      if (!config.cart.bypassCartLoaderForAuthorizedUsers || (Date.now() - lastCartBypassTs) >= (1000 * 60 * 24)) { // don't refresh the shopping cart id up to 24h after last order
+        dispatch('connect', { guestCart: false })
+      }
+    })
+  },
   /** connect cart to the server and set the cart token */
   async connect ({ getters, dispatch, commit }, { guestCart = false, forceClientState = false }) {
     if (getters.isCartSyncEnabled) {
diff --git a/core/modules/user/store/actions.ts b/core/modules/user/store/actions.ts
index 9b17f65c5..69c40cd83 100644
--- a/core/modules/user/store/actions.ts
+++ b/core/modules/user/store/actions.ts
@@ -188,7 +188,7 @@ const actions: ActionTree<UserState, RootState> = {
             context.commit(types.USER_INFO_LOADED, res)
             context.dispatch('setUserGroup', res)
             Vue.prototype.$bus.$emit('user-after-loggedin', res)
-            context.dispatch('cart/authorize', { force: true }, { root: true })
+            context.dispatch('cart/authorize', null, { root: true })
 
             resolve(res)
             resolvedFromCache = true
@@ -214,7 +214,7 @@ const actions: ActionTree<UserState, RootState> = {
             }
             if (!resolvedFromCache && resp.resultCode === 200) {
               Vue.prototype.$bus.$emit('user-after-loggedin', resp.result)
-              context.dispatch('cart/authorize', { force: true }, { root: true })
+              context.dispatch('cart/authorize', null, { root: true })
               resolve(resp)
             } else {
               resolve(null)

From 451982521eae6b88a4b1098bdf307ece65e1ceee Mon Sep 17 00:00:00 2001
From: tkostuch <tkostuch@divante.pl>
Date: Mon, 20 Jan 2020 15:20:14 +0100
Subject: [PATCH 12/37] always clear cart after order

---
 core/modules/cart/store/actions.ts                     | 10 ++++------
 core/modules/checkout/store/checkout/actions.ts        |  2 +-
 core/modules/order/store/actions.ts                    |  2 +-
 core/modules/user/store/actions.ts                     |  2 +-
 .../instant-checkout/components/InstantCheckout.vue    |  2 +-
 .../components/core/blocks/Microcart/Microcart.vue     |  2 +-
 6 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/core/modules/cart/store/actions.ts b/core/modules/cart/store/actions.ts
index 52757fafa..926f1a7fa 100644
--- a/core/modules/cart/store/actions.ts
+++ b/core/modules/cart/store/actions.ts
@@ -135,13 +135,11 @@ const actions: ActionTree<CartState, RootState> = {
   async disconnect ({ commit }) {
     commit(types.CART_LOAD_CART_SERVER_TOKEN, null)
   },
-  /** Clear the cart content + re-connect to newly created guest cart */
-  async clear ({ commit, dispatch, getters }, options = { recreateAndSyncCart: true }) {
+  /** Clear the cart content */
+  async clear ({ commit, dispatch, getters }) {
     await commit(types.CART_LOAD_CART, [])
-    if (options.recreateAndSyncCart && getters.isCartSyncEnabled) {
-      await commit(types.CART_LOAD_CART_SERVER_TOKEN, null)
-      await commit(types.CART_SET_ITEMS_HASH, null)
-    }
+    await commit(types.CART_LOAD_CART_SERVER_TOKEN, null)
+    await commit(types.CART_SET_ITEMS_HASH, null)
   },
   /** Refresh the payment methods with the backend */
   async syncPaymentMethods ({ getters, rootGetters, dispatch }, { forceServerSync = false }) {
diff --git a/core/modules/checkout/store/checkout/actions.ts b/core/modules/checkout/store/checkout/actions.ts
index 58d1a02e7..e47b60b3f 100644
--- a/core/modules/checkout/store/checkout/actions.ts
+++ b/core/modules/checkout/store/checkout/actions.ts
@@ -16,7 +16,7 @@ const actions: ActionTree<CheckoutState, RootState> = {
       const result = await dispatch('order/placeOrder', order, {root: true})
       if (!result.resultCode || result.resultCode === 200) {
         Vue.prototype.$db.usersCollection.setItem('last-cart-bypass-ts', new Date().getTime())
-        await dispatch('cart/clear', { recreateAndSyncCart: true }, {root: true})
+        await dispatch('cart/clear', null, {root: true})
         if (state.personalDetails.createAccount) {
           commit(types.CHECKOUT_DROP_PASSWORD)
         }
diff --git a/core/modules/order/store/actions.ts b/core/modules/order/store/actions.ts
index cce27044a..707e35d19 100644
--- a/core/modules/order/store/actions.ts
+++ b/core/modules/order/store/actions.ts
@@ -32,7 +32,7 @@ const actions: ActionTree<OrderState, RootState> = {
     }
 
     Vue.prototype.$bus.$emit('order-before-placed', { order: order })
-    if (!config.orders.directBackendSync || !isOnline()) {
+    if (!isOnline()) {
       commit(types.ORDER_PLACE_ORDER, order)
       Vue.prototype.$bus.$emit('order-after-placed', { order: order })
       return {
diff --git a/core/modules/user/store/actions.ts b/core/modules/user/store/actions.ts
index 69c40cd83..00f53882d 100644
--- a/core/modules/user/store/actions.ts
+++ b/core/modules/user/store/actions.ts
@@ -297,7 +297,7 @@ const actions: ActionTree<UserState, RootState> = {
     context.dispatch('cart/disconnect', {}, { root: true })
       .then(() => { context.dispatch('clearCurrentUser') })
       .then(() => { Vue.prototype.$bus.$emit('user-after-logout') })
-      .then(() => { context.dispatch('cart/clear', { recreateAndSyncCart: true }, { root: true }) })
+      .then(() => { context.dispatch('cart/clear', null, { root: true }) })
     if (!silent) {
       rootStore.dispatch('notification/spawnNotification', {
         type: 'success',
diff --git a/src/modules/instant-checkout/components/InstantCheckout.vue b/src/modules/instant-checkout/components/InstantCheckout.vue
index 0fc41e0f8..77dad367a 100644
--- a/src/modules/instant-checkout/components/InstantCheckout.vue
+++ b/src/modules/instant-checkout/components/InstantCheckout.vue
@@ -143,7 +143,7 @@ export default {
               this.$store.dispatch('checkout/setThankYouPage', true)
               this.$store.commit('ui/setMicrocart', false)
               this.$router.push(this.localizedRoute('/checkout'))
-              this.$store.dispatch('cart/clear', { recreateAndSyncCart: true }, {root: true})
+              this.$store.dispatch('cart/clear', null, {root: true})
             }
           })
         })
diff --git a/src/themes/default/components/core/blocks/Microcart/Microcart.vue b/src/themes/default/components/core/blocks/Microcart/Microcart.vue
index 771906f8f..e3f0f5a87 100644
--- a/src/themes/default/components/core/blocks/Microcart/Microcart.vue
+++ b/src/themes/default/components/core/blocks/Microcart/Microcart.vue
@@ -204,7 +204,7 @@ export default {
         action1: { label: i18n.t('Cancel'), action: 'close' },
         action2: { label: i18n.t('OK'),
           action: async () => {
-            await this.$store.dispatch('cart/clear', { recreateAndSyncCart: false }) // just clear the items without sync
+            await this.$store.dispatch('cart/clear') // just clear the items without sync
             await this.$store.dispatch('cart/sync', { forceClientState: true })
           }
         },

From b25d9e871d1175fa73ad8c83391db45ff8d0671d Mon Sep 17 00:00:00 2001
From: tkostuch <tkostuch@divante.pl>
Date: Thu, 23 Jan 2020 09:45:23 +0100
Subject: [PATCH 13/37] update tests

---
 .../cart/test/unit/store/actions.spec.ts      | 61 +++++++++++--------
 1 file changed, 35 insertions(+), 26 deletions(-)

diff --git a/core/modules/cart/test/unit/store/actions.spec.ts b/core/modules/cart/test/unit/store/actions.spec.ts
index 572672cf0..d122aaa93 100644
--- a/core/modules/cart/test/unit/store/actions.spec.ts
+++ b/core/modules/cart/test/unit/store/actions.spec.ts
@@ -26,7 +26,8 @@ jest.mock('@vue-storefront/core/lib/logger', () => ({
     log: jest.fn(() => () => {}),
     debug: jest.fn(() => () => {}),
     warn: jest.fn(() => () => {}),
-    error: jest.fn(() => () => {})
+    error: jest.fn(() => () => {}),
+    info: jest.fn(() => () => {})
   }
 }));
 jest.mock('@vue-storefront/core/lib/sync', () => ({ TaskQueue: {
@@ -84,39 +85,47 @@ describe('Cart actions', () => {
     expect(contextMock.commit).toBeCalledWith(types.CART_LOAD_CART, []);
   });
 
-  it('clear dispatches creating a new cart on server with direct backend sync when its configured', async () => {
-    const contextMock = {
-      commit: jest.fn(),
-      dispatch: jest.fn(),
-      getters: { isCartSyncEnabled: true, isTotalsSyncRequired: true, isSyncRequired: true, isCartConnected: true }
-    };
+  describe('create', () => {
+    it('Create cart token when there are products in cart and we don\'t have token already', async () => {
+      const contextMock = {
+        commit: jest.fn(),
+        dispatch: jest.fn(),
+        getters: { getCartItems: [{id: 1}], getCartToken: '' }
+      };
 
-    config.cart = { synchronize: true };
-    config.orders = { directBackendSync: true };
+      const wrapper = (actions: any) => actions.create(contextMock);
+  
+      await wrapper(cartActions);
 
-    const wrapper = (actions: any) => actions.clear(contextMock);
+      expect(contextMock.dispatch).toBeCalledWith('connect', {guestCart: false});
+    })
+    it('doesn\'t create cart token when there are NO products in cart', async () => {
+      const contextMock = {
+        commit: jest.fn(),
+        dispatch: jest.fn(),
+        getters: { getCartItems: [], getCartToken: '' }
+      };
 
-    await wrapper(cartActions);
+      const wrapper = (actions: any) => actions.create(contextMock);
 
-    expect(contextMock.dispatch).toBeCalledWith('connect', {guestCart: false});
-  });
-
-  it('clear dispatches creating a new cart on server with queuing when direct backend sync is not configured', async () => {
-    const contextMock = {
-      commit: jest.fn(),
-      dispatch: jest.fn(),
-      getters: { isCartSyncEnabled: true, isTotalsSyncRequired: true, isSyncRequired: true, isCartConnected: true }
-    };
+      await wrapper(cartActions);
 
-    config.cart = { synchronize: true };
-    config.orders = { directBackendSync: false };
+      expect(contextMock.dispatch).toHaveBeenCalledTimes(0);
+    })
+    it('doesn\'t create cart token when there are products in cart but we have token already', async () => {
+      const contextMock = {
+        commit: jest.fn(),
+        dispatch: jest.fn(),
+        getters: { getCartItems: [{id: 1}], getCartToken: 'xyz' }
+      };
 
-    const wrapper = (actions: any) => actions.clear(contextMock);
+      const wrapper = (actions: any) => actions.create(contextMock);
 
-    await wrapper(cartActions);
+      await wrapper(cartActions);
 
-    expect(contextMock.dispatch).toBeCalledWith('connect', {guestCart: true});
-  });
+      expect(contextMock.dispatch).toHaveBeenCalledTimes(0);
+    })
+  })
 
   describe('sync', () => {
     it('doesn\'t update shipping methods if cart is empty', async () => {

From 176399601755dd3962fec30749bd0dfcea5c54be Mon Sep 17 00:00:00 2001
From: tkostuch <tkostuch@divante.pl>
Date: Thu, 23 Jan 2020 10:58:08 +0100
Subject: [PATCH 14/37] 3995 merge products quantity only when token is
 loaded/created

---
 core/modules/cart/store/actions.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/core/modules/cart/store/actions.ts b/core/modules/cart/store/actions.ts
index b0b63c15c..48d3c5322 100644
--- a/core/modules/cart/store/actions.ts
+++ b/core/modules/cart/store/actions.ts
@@ -184,7 +184,7 @@ const actions: ActionTree<CartState, RootState> = {
     }
   },
   /** Sync the shopping cart with server along with totals (when needed) and shipping / payment methods */
-  async sync ({ getters, rootGetters, commit, dispatch }, { forceClientState = false, dryRun = false }) { // pull current cart FROM the server
+  async sync ({ getters, rootGetters, commit, dispatch }, { forceClientState = false, dryRun = false, mergeQty = false }) { // pull current cart FROM the server
     const isUserInCheckout = rootGetters['checkout/isUserInCheckout']
     let diffLog = _getDifflogPrototype()
     if (isUserInCheckout) forceClientState = true // never surprise the user in checkout - #
@@ -201,7 +201,7 @@ const actions: ActionTree<CartState, RootState> = {
           silent: true
         }).then(async task => {
           if (task.resultCode === 200) {
-            diffLog = await dispatch('merge', { serverItems: task.result, clientItems: getters.getCartItems, dryRun: dryRun, forceClientState: forceClientState })
+            diffLog = await dispatch('merge', { serverItems: task.result, clientItems: getters.getCartItems, dryRun: dryRun, forceClientState: forceClientState, mergeQty })
           } else {
             Logger.error(task.result, 'cart') // override with guest cart()
             if (_connectBypassCount < MAX_BYPASS_COUNT) {
@@ -517,7 +517,7 @@ const actions: ActionTree<CartState, RootState> = {
         if (task.resultCode === 200) {
           Logger.info('Server cart token created.', 'cart', cartToken)()
           commit(types.CART_LOAD_CART_SERVER_TOKEN, cartToken)
-          return dispatch('sync', { forceClientState, dryRun: !config.cart.serverMergeByDefault })
+          return dispatch('sync', { forceClientState, dryRun: !config.cart.serverMergeByDefault, mergeQty: true })
         } else {
           let resultString = task.result ? toString(task.result) : null
           if (resultString && (resultString.indexOf(i18n.t('not authorized')) < 0 && resultString.indexOf('not authorized')) < 0) { // not respond to unathorized errors here
@@ -536,7 +536,7 @@ const actions: ActionTree<CartState, RootState> = {
     }
   },
   /**  merge shopping cart with the server results; if dryRun = true only the diff phase is being executed */
-  async merge ({ getters, dispatch, commit, rootGetters }, { serverItems, clientItems, dryRun = false, forceClientState = false }) {
+  async merge ({ getters, dispatch, commit, rootGetters }, { serverItems, clientItems, dryRun = false, forceClientState = false, mergeQty = false }) {
     const diffLog = _getDifflogPrototype()
     let totalsShouldBeRefreshed = getters.isTotalsSyncRequired // when empty it means no sync has yet been executed
     let serverCartUpdateRequired = false
@@ -642,7 +642,7 @@ const actions: ActionTree<CartState, RootState> = {
             })
           }
         }
-      } else if (serverItem.qty !== clientItem.qty) {
+      } else if (serverItem.qty !== clientItem.qty || mergeQty) {
         Logger.log('Wrong qty for ' + clientItem.sku, clientItem.qty, serverItem.qty)()
         diffLog.items.push({ 'party': 'server', 'sku': clientItem.sku, 'status': 'wrong-qty', 'client-qty': clientItem.qty, 'server-qty': serverItem.qty })
         if (!dryRun) {
@@ -651,7 +651,7 @@ const actions: ActionTree<CartState, RootState> = {
               cartServerToken: getters.getCartToken,
               cartItem: {
                 sku: clientItem.parentSku && config.cart.setConfigurableProductOptions ? clientItem.parentSku : clientItem.sku,
-                qty: clientItem.qty,
+                qty: mergeQty ? (clientItem.qty + serverItem.qty) : clientItem.qty,
                 item_id: serverItem.item_id,
                 quoteId: serverItem.quote_id,
                 product_option: clientItem.product_option

From d3debc4d457e07633f94db9efbac479a1821f05b Mon Sep 17 00:00:00 2001
From: tkostuch <tkostuch@divante.pl>
Date: Thu, 23 Jan 2020 15:07:21 +0100
Subject: [PATCH 15/37] remove bypassCartLoaderForAuthorizedUsers

---
 config/default.json                | 1 -
 core/modules/cart/store/actions.ts | 9 +--------
 docs/guide/basics/configuration.md | 7 -------
 docs/guide/cookbook/setup.md       | 1 -
 4 files changed, 1 insertion(+), 17 deletions(-)

diff --git a/config/default.json b/config/default.json
index 41ae29c79..18663c591 100644
--- a/config/default.json
+++ b/config/default.json
@@ -239,7 +239,6 @@
         "width": 150,
         "height": 150
       },
-      "bypassCartLoaderForAuthorizedUsers": true,
       "serverMergeByDefault": true,
       "serverSyncCanRemoveLocalItems": false,
       "serverSyncCanModifyLocalItems": false,
diff --git a/core/modules/cart/store/actions.ts b/core/modules/cart/store/actions.ts
index 926f1a7fa..259ba7b20 100644
--- a/core/modules/cart/store/actions.ts
+++ b/core/modules/cart/store/actions.ts
@@ -507,14 +507,7 @@ const actions: ActionTree<CartState, RootState> = {
   },
   /** authorize the cart after user got logged in using the current cart token */
   authorize ({ dispatch }) {
-    Vue.prototype.$db.usersCollection.getItem('last-cart-bypass-ts', (err, lastCartBypassTs) => {
-      if (err) {
-        Logger.error(err, 'cart')()
-      }
-      if (!config.cart.bypassCartLoaderForAuthorizedUsers || (Date.now() - lastCartBypassTs) >= (1000 * 60 * 24)) { // don't refresh the shopping cart id up to 24h after last order
-        dispatch('connect', { guestCart: false })
-      }
-    })
+    dispatch('connect', { guestCart: false })
   },
   /** connect cart to the server and set the cart token */
   async connect ({ getters, dispatch, commit }, { guestCart = false, forceClientState = false }) {
diff --git a/docs/guide/basics/configuration.md b/docs/guide/basics/configuration.md
index e157b2b6e..eb14e639a 100644
--- a/docs/guide/basics/configuration.md
+++ b/docs/guide/basics/configuration.md
@@ -256,13 +256,6 @@ Starting with Vue Storefront 1.7, we added a configuration option `config.entiti
 
 ## Cart
 
-```json
-"cart": {
-  "bypassCartLoaderForAuthorizedUsers": true,
-```
-
-The cart-loader bypass feature is there because we're posting orders to Magento asynchronously. It may happen that directly after placing an order, the Magento’s user still has the same quote ID, and after browsing through the VS store, old items will be restored to the shopping cart. Now you can disable this behavior by setting `bypassCartLoaderForAuthorizedUsers` option to `false`
-
 ```json
 "cart": {
   "serverMergeByDefault": true,
diff --git a/docs/guide/cookbook/setup.md b/docs/guide/cookbook/setup.md
index 81201c422..3e2b24b88 100644
--- a/docs/guide/cookbook/setup.md
+++ b/docs/guide/cookbook/setup.md
@@ -1097,7 +1097,6 @@ At [`vue-storefront/config/default.json`](https://github.com/DivanteLtd/vue-stor
   }
 },
 "cart": {
-  "bypassCartLoaderForAuthorizedUsers": true,
   "serverMergeByDefault": true,
   "serverSyncCanRemoveLocalItems": false,
   "serverSyncCanModifyLocalItems": false,

From 5a5bb2e40f59e93def410ca5e2dce597a34ac551 Mon Sep 17 00:00:00 2001
From: tkostuch <tkostuch@divante.pl>
Date: Fri, 24 Jan 2020 08:37:10 +0100
Subject: [PATCH 16/37] update changelog

---
 CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 40f01b656..a189992cc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [1.10.6] - UNRELEASED
 
+## Added
+- Add lazy create cart token - @gibkigonzo (#3994)
+
 ### Fixed
 - Fix low-quality images styles - @przspa (#3906)
 - Fix page-not-found redirect in dispatcher - @gibkigonzo (#3956)

From 525a884c0e204f710e06f45a6b107f9b709b0459 Mon Sep 17 00:00:00 2001
From: tkostuch <tkostuch@divante.pl>
Date: Thu, 2 Jan 2020 13:19:47 +0100
Subject: [PATCH 17/37] revert adding filters with app init

---
 core/app.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/core/app.ts b/core/app.ts
index 052a0d929..56ae80795 100755
--- a/core/app.ts
+++ b/core/app.ts
@@ -92,10 +92,10 @@ const createApp = async (ssrContext, config, storeCode = null): Promise<{app: Vu
     Object.keys(coreMixins).forEach(key => {
       Vue.mixin(coreMixins[key])
     })
+  })
 
-    Object.keys(coreFilters).forEach(key => {
-      Vue.filter(key, coreFilters[key])
-    })
+  Object.keys(coreFilters).forEach(key => {
+    Vue.filter(key, coreFilters[key])
   })
 
   // @todo remove this part when we'll get rid of global multistore mixin

From 1b97d87c6412a329bf89b61bb0bd334f50855c98 Mon Sep 17 00:00:00 2001
From: tkostuch <tkostuch@divante.pl>
Date: Fri, 24 Jan 2020 13:57:23 +0100
Subject: [PATCH 18/37] remove storeView as dependency from filters

---
 core/app.ts               |  6 +++---
 core/filters/date.js      |  7 ++++---
 core/filters/price.js     | 12 ++++++------
 core/lib/multistore.ts    | 35 ++++++++++++++++++++++++++---------
 core/mixins/multistore.js | 16 ++--------------
 5 files changed, 41 insertions(+), 35 deletions(-)

diff --git a/core/app.ts b/core/app.ts
index 56ae80795..052a0d929 100755
--- a/core/app.ts
+++ b/core/app.ts
@@ -92,10 +92,10 @@ const createApp = async (ssrContext, config, storeCode = null): Promise<{app: Vu
     Object.keys(coreMixins).forEach(key => {
       Vue.mixin(coreMixins[key])
     })
-  })
 
-  Object.keys(coreFilters).forEach(key => {
-    Vue.filter(key, coreFilters[key])
+    Object.keys(coreFilters).forEach(key => {
+      Vue.filter(key, coreFilters[key])
+    })
   })
 
   // @todo remove this part when we'll get rid of global multistore mixin
diff --git a/core/filters/date.js b/core/filters/date.js
index 17ef6af25..16adde8b8 100644
--- a/core/filters/date.js
+++ b/core/filters/date.js
@@ -12,9 +12,10 @@ once('__VUE_EXTEND_DAYJS_LOCALIZED_FORMAT__', () => {
  * @param {String} date
  * @param {String} format
  */
-export function date (date, format) {
-  const displayFormat = format || currentStoreView().i18n.dateFormat
-  let storeLocale = currentStoreView().i18n.defaultLocale.toLocaleLowerCase()
+export function date (date, format, storeView) {
+  const _storeView = storeView || currentStoreView()
+  const displayFormat = format || _storeView.i18n.dateFormat
+  let storeLocale = _storeView.i18n.defaultLocale.toLocaleLowerCase()
   const separatorIndex = storeLocale.indexOf('-')
   const languageCode = separatorIndex ? storeLocale.substr(0, separatorIndex) : storeLocale
 
diff --git a/core/filters/price.js b/core/filters/price.js
index a9e44c7cb..377a220f2 100644
--- a/core/filters/price.js
+++ b/core/filters/price.js
@@ -4,24 +4,24 @@ import { currentStoreView } from '@vue-storefront/core/lib/multistore'
  * Converts number to price string
  * @param {Number} value
  */
-export function price (value) {
+export function price (value, storeView) {
   if (isNaN(value)) {
     return value
   }
   let formattedVal = Math.abs(parseFloat(value)).toFixed(2)
-  const storeView = currentStoreView()
-  if (!storeView.i18n) {
+  const _storeView = storeView || currentStoreView();
+  if (!_storeView.i18n) {
     return value;
   }
   const prependCurrency = (price) => {
-    return storeView.i18n.currencySign + price
+    return _storeView.i18n.currencySign + price
   }
 
   const appendCurrency = (price) => {
-    return price + storeView.i18n.currencySign
+    return price + _storeView.i18n.currencySign
   }
 
-  if (storeView.i18n.currencySignPlacement === 'append') {
+  if (_storeView.i18n.currencySignPlacement === 'append') {
     formattedVal = appendCurrency(formattedVal)
   } else {
     formattedVal = prependCurrency(formattedVal)
diff --git a/core/lib/multistore.ts b/core/lib/multistore.ts
index dbf90e955..6d53ac54f 100644
--- a/core/lib/multistore.ts
+++ b/core/lib/multistore.ts
@@ -8,20 +8,32 @@ import VueRouter, { RouteConfig, RawLocation } from 'vue-router'
 import config from 'config'
 import { LocalizedRoute, StoreView } from './types'
 import storeCodeFromRoute from './storeCodeFromRoute'
+import cloneDeep from 'lodash-es/cloneDeep'
+import get from 'lodash-es/get'
+import { isServer } from '@vue-storefront/core/helpers'
+
+/**
+ * Returns base storeView object that can be created without storeCode
+ */
+function buildBaseStoreView (): StoreView {
+  return cloneDeep({
+    tax: config.tax,
+    i18n: config.i18n,
+    elasticsearch: config.elasticsearch,
+    storeCode: null,
+    storeId: config.defaultStoreCode && config.defaultStoreCode !== '' ? config.storeViews[config.defaultStoreCode].storeId : 1,
+    seo: config.seo
+  })
+}
 
 export function currentStoreView (): StoreView {
-  // TODO: Change to getter all along our code
-  return rootStore.state.storeView
+  const serverStoreView = get(global, 'process.storeView', undefined)
+  const clientStoreView = get(rootStore, 'state.storeView', undefined)
+  return (isServer ? serverStoreView : clientStoreView) || buildBaseStoreView()
 }
 
 export async function prepareStoreView (storeCode: string): Promise<StoreView> {
-  let storeView = { // current, default store
-    tax: Object.assign({}, config.tax),
-    i18n: Object.assign({}, config.i18n),
-    elasticsearch: Object.assign({}, config.elasticsearch),
-    storeCode: '',
-    storeId: config.defaultStoreCode && config.defaultStoreCode !== '' ? config.storeViews[config.defaultStoreCode].storeId : 1
-  }
+  let storeView: StoreView = buildBaseStoreView() // current, default store
   const storeViewHasChanged = !rootStore.state.storeView || rootStore.state.storeView.storeCode !== storeCode
   if (storeCode) { // current store code
     const currentStoreView = config.storeViews[storeCode]
@@ -38,6 +50,11 @@ export async function prepareStoreView (storeCode: string): Promise<StoreView> {
   }
   if (storeViewHasChanged) {
     rootStore.state.storeView = storeView
+
+    if (global && isServer) {
+      (global.process as any).storeView = storeView
+    }
+
     await loadLanguageAsync(storeView.i18n.defaultLocale)
   }
   if (storeViewHasChanged || Vue.prototype.$db.currentStoreCode !== storeCode) {
diff --git a/core/mixins/multistore.js b/core/mixins/multistore.js
index 4f8135e18..896456605 100644
--- a/core/mixins/multistore.js
+++ b/core/mixins/multistore.js
@@ -10,13 +10,7 @@ export const multistore = {
      * @param {Int} height
      */
     localizedRoute (routeObj) {
-      let storeView
-
-      if (isServer) {
-        storeView = this.$ssrContext.helpers.currentStoreView()
-      } else {
-        storeView = currentStoreView()
-      }
+      const storeView = currentStoreView()
 
       return localizedRouteHelper(routeObj, storeView.storeCode)
     },
@@ -27,13 +21,7 @@ export const multistore = {
      * @param {Int} height
      */
     localizedDispatcherRoute (routeObj) {
-      let storeView
-
-      if (isServer) {
-        storeView = this.$ssrContext.helpers.currentStoreView()
-      } else {
-        storeView = currentStoreView()
-      }
+      const storeView = currentStoreView()
 
       return localizedDispatcherRouteHelper(routeObj, storeView.storeCode)
     }

From f234875472a44e213a909dd152e5bf72584527aa Mon Sep 17 00:00:00 2001
From: tkostuch <tkostuch@divante.pl>
Date: Fri, 24 Jan 2020 14:07:38 +0100
Subject: [PATCH 19/37] update filters in components

---
 docs/guide/cookbook/theme.md                  | 16 +++++++--------
 .../components/core/ProductTile.vue           | 12 ++++++++---
 src/themes/default-amp/pages/Product.vue      | 12 ++++++++---
 .../default/components/core/ProductLinks.vue  | 12 ++++++++---
 .../default/components/core/ProductTile.vue   | 10 +++++++---
 .../core/blocks/Checkout/CartSummary.vue      | 12 ++++++++---
 .../blocks/Checkout/OrderConfirmation.vue     | 10 ++++++++--
 .../core/blocks/Checkout/Product.vue          | 16 +++++++++------
 .../core/blocks/Checkout/Shipping.vue         |  8 ++++++--
 .../core/blocks/Microcart/Microcart.vue       | 10 ++++++++--
 .../core/blocks/Microcart/Product.vue         | 18 ++++++++++-------
 .../core/blocks/MyAccount/MyOrder.vue         | 20 ++++++++++++-------
 .../core/blocks/MyAccount/MyOrders.vue        | 10 ++++++++--
 .../core/blocks/Wishlist/Product.vue          | 10 +++++++---
 src/themes/default/pages/Product.vue          | 10 +++++++---
 15 files changed, 129 insertions(+), 57 deletions(-)

diff --git a/docs/guide/cookbook/theme.md b/docs/guide/cookbook/theme.md
index 4283dee3f..f5d65eab8 100644
--- a/docs/guide/cookbook/theme.md
+++ b/docs/guide/cookbook/theme.md
@@ -762,7 +762,7 @@ Start with replacing _template_ at `2` as follows :
 
 </div>
 <script>
-var dMicroProd1 = Diff2Html.getPrettyHtml('--- a/src/themes/degi/components/core/blocks/Microcart/Product.vue\n+++ b/src/themes/degi/components/core/blocks/Microcart/Product.vue\n@@ -1,131 +1,312 @@\n <template>\n-  <li class=\"row flex-nowrap py10\">\n-    <div>\n+  <li class=\"row py10 bg-cl-white\" :class=\"{ \'relative\': editMode }\">\n+    <div class=\"mx10 w-100 py10 mb15 edit-mode flex between-xs middle-xs\" v-if=\"editMode\">\n+      Edit mode\n+      <button class=\"brdr-none bg-cl-transparent\" @click=\"closeEditMode\">\n+        <span class=\"cl-accent\">\n+          <i class=\"material-icons cl-accent mr5\">\n+            close\n+          </i>\n+        </span>\n+      </button>\n+    </div>\n+    <div class=\"blend\">\n       <div class=\"ml10 bg-cl-secondary\">\n         <product-image :image=\"image\" />\n       </div>\n     </div>\n-    <div class=\"col-xs flex pl35 py15 start-xs between-sm details\">\n-      <div>\n-        <router-link\n-          class=\"serif h4 name\"\n-          :to=\"localizedRoute({\n-            name: product.type_id + \'-product\',\n-            params: {\n-              parentSku: product.parentSku ? product.parentSku : product.sku,\n-              slug: product.slug,\n-              childSku: product.sku\n-            }\n-          })\"\n-          data-testid=\"productLink\"\n-          @click.native=\"$store.commit(\'ui/setMicrocart\', false)\"\n-        >\n-          {\{ product.name | htmlDecode }\}\n-        </router-link>\n-        <div class=\"h6 cl-bg-tertiary pt5 sku\" data-testid=\"productSku\">\n-          {\{ product.sku }\}\n-        </div>\n-        <div class=\"h6 cl-bg-tertiary pt5 options\" v-if=\"isOnline && product.totals && product.totals.options\">\n-          <div v-for=\"opt in product.totals.options\" :key=\"opt.label\">\n-            <span class=\"opn\">{\{ opt.label }\}: </span>\n-            <span class=\"opv\" v-html=\"opt.value\" />\n+    <div class=\"col-xs pt15 flex pl35 flex-wrap\">\n+      <div class=\"flex flex-nowrap details\">\n+        <div class=\"flex w-100 flex-wrap between-xs\">\n+          <div>\n+            <router-link\n+              class=\"serif h4 name\"\n+              :to=\"productLink\"\n+              data-testid=\"productLink\"\n+              @click.native=\"$store.commit(\'ui/setMicrocart\', false)\"\n+            >\n+              {\{ product.name | htmlDecode }\}\n+            </router-link>\n+            <div class=\"h6 cl-bg-tertiary pt5 sku\" data-testid=\"productSku\">\n+              {\{ product.sku }\}\n+            </div>\n+            <div class=\"h6 cl-bg-tertiary pt5 options\" v-if=\"isTotalsActive\">\n+              <div v-for=\"opt in product.totals.options\" :key=\"opt.label\">\n+                <span class=\"opn\">{\{ opt.label }\}: </span>\n+                <span class=\"opv\" v-html=\"opt.value\" />\n+              </div>\n+            </div>\n+            <div class=\"h6 cl-bg-tertiary pt5 options\" v-else-if=\"!editMode && product.options\">\n+              <div v-for=\"opt in product.options\" :key=\"opt.label\">\n+                <span class=\"opn\">{\{ opt.label }\}: </span>\n+                <span class=\"opv\" v-html=\"opt.value\" />\n+              </div>\n+            </div>\n+            <div class=\"h6 pt5 cl-error\" v-if=\"hasProductErrors\">\n+              {\{ product.errors | formatProductMessages }\}\n+            </div>\n+            <div class=\"h6 pt5 cl-success\" v-if=\"hasProductInfo && !hasProductErrors\">\n+              {\{ product.info | formatProductMessages }\}\n+            </div>\n           </div>\n+          <product-quantity\n+            class=\"h5 cl-accent lh25 qty\"\n+            v-if=\"product.type_id !== \'grouped\' && product.type_id !== \'bundle\'\"\n+            :value=\"productQty\"\n+            :max-quantity=\"maxQuantity\"\n+            :loading=\"isStockInfoLoading\"\n+            :is-simple-or-configurable=\"isSimpleOrConfigurable\"\n+            @input=\"updateProductQty\"\n+            @error=\"handleQuantityError\"\n+          />\n         </div>\n-        <div class=\"h6 cl-bg-tertiary pt5 options\" v-else-if=\"product.options\">\n-          <div v-for=\"opt in product.options\" :key=\"opt.label\">\n-            <span class=\"opn\">{\{ opt.label }\}: </span>\n-            <span class=\"opv\" v-html=\"opt.value\" />\n+        <div class=\"flex mr10 align-right start-xs between-sm prices\">\n+          <div class=\"prices\" v-if=\"!displayItemDiscounts || !isOnline\">\n+            <span class=\"h4 serif cl-error price-special\" v-if=\"product.special_price\">\n+              {\{ product.price_incl_tax * product.qty | price }\}\n+            </span>\n+            <span class=\"h6 serif price-original\" v-if=\"product.special_price\">\n+              {\{ product.original_price_incl_tax * product.qty | price }\}\n+            </span>\n+            <span class=\"h4 serif price-regular\" v-else data-testid=\"productPrice\">\n+              {\{ (product.original_price_incl_tax ? product.original_price_incl_tax : product.price_incl_tax) * product.qty | price }\}\n+            </span>\n+          </div>\n+          <div class=\"prices\" v-else-if=\"isOnline && product.totals\">\n+            <span class=\"h4 serif cl-error price-special\" v-if=\"product.totals.discount_amount\">\n+              {\{ product.totals.row_total - product.totals.discount_amount + product.totals.tax_amount | price }\}\n+            </span>\n+            <span class=\"h6 serif price-original\" v-if=\"product.totals.discount_amount\">\n+              {\{ product.totals.row_total_incl_tax | price }\}\n+            </span>\n+            <span class=\"h4 serif price-regular\" v-if=\"!product.totals.discount_amount\">\n+              {\{ product.totals.row_total_incl_tax | price }\}\n+            </span>\n+          </div>\n+          <div class=\"prices\" v-else>\n+            <span class=\"h4 serif price-regular\">\n+              {\{ (product.regular_price || product.price_incl_tax) * product.qty | price }\}\n+            </span>\n           </div>\n         </div>\n-        <div class=\"h6 pt5 cl-error\" v-if=\"product.errors && Object.keys(product.errors).length > 0\">\n-          {\{ product.errors | formatProductMessages }\}\n-        </div>\n-        <div class=\"h6 pt5 cl-success\" v-if=\"product.info && Object.keys(product.info).length > 0 && Object.keys(product.errors).length === 0\">\n-          {\{ product.info | formatProductMessages }\}\n-        </div>\n-      </div>\n-      <div class=\"h5 pt5 cl-accent lh25 qty\">\n-        <base-input-number\n-          :name=\"$t(\'Quantity\')\"\n-          :value=\"product.qty\"\n-          @input=\"updateQuantity\"\n-          :min=\"1\"\n-        />\n-      </div>\n-    </div>\n-    <div class=\"flex py15 mr10 align-right start-xs between-sm actions\">\n-      <div class=\"prices\" v-if=\"!displayItemDiscounts || !isOnline\">\n-        <span class=\"h4 serif cl-error price-special\" v-if=\"product.special_price\">\n-          {\{ product.priceInclTax * product.qty | price }\}&nbsp;\n-        </span>\n-        <span class=\"h6 serif price-original\" v-if=\"product.special_price\">\n-          {\{ product.originalPriceInclTax * product.qty | price }\}\n-        </span>\n-        <span class=\"h4 serif price-regular\" v-else data-testid=\"productPrice\">\n-          {\{ (product.originalPriceInclTax ? product.originalPriceInclTax : product.priceInclTax) * product.qty | price }\}\n-        </span>\n-      </div>\n-      <div class=\"prices\" v-else-if=\"isOnline && product.totals\">\n-        <span class=\"h4 serif cl-error price-special\" v-if=\"product.totals.discount_amount\">\n-          {\{ product.totals.row_total - product.totals.discount_amount + product.totals.tax_amount | price }\}&nbsp;\n-        </span>\n-        <span class=\"h6 serif price-original\" v-if=\"product.totals.discount_amount\">\n-          {\{ product.totals.row_total_incl_tax | price }\}\n-        </span>\n-        <span class=\"h4 serif price-regular\" v-if=\"!product.totals.discount_amount\">\n-          {\{ product.totals.row_total_incl_tax | price }\}\n-        </span>\n-      </div>\n-      <div class=\"prices\" v-else>\n-        <span class=\"h4 serif price-regular\">\n-          {\{ product.regular_price * product.qty | price }\}\n-        </span>\n       </div>\n-      <div class=\"links\">\n-        <div class=\"mt5\" @click=\"removeItem\">\n-          <remove-button />\n+      <div class=\"w-100 pb15 flex flex-wrap bottom-xs\" v-if=\"editMode\">\n+        <div class=\"ml0 flex flex-wrap filters\" v-if=\"productsAreReconfigurable\">\n+          <div class=\"h5 pt5 w-100\" v-for=\"(option, index) in product.configurable_options\" :key=\"index\">\n+            <div class=\"h6 cl-bg-tertiary mr10\">\n+              {\{ option.label }\}:\n+            </div>\n+            <div class=\"flex flex-wrap pt5\" v-if=\"option.label == \'Color\' && editMode\">\n+              <color-selector\n+                v-for=\"filter in getAvailableFilters[option.attribute_code]\"\n+                v-if=\"isOptionAvailable(filter)\"\n+                :key=\"filter.id\"\n+                :variant=\"filter\"\n+                :selected-filters=\"getSelectedOptions\"\n+                @change=\"changeEditModeFilter\"\n+              />\n+            </div>\n+            <div class=\"flex flex-wrap pt5\" v-else-if=\"option.label == \'Size\' && editMode\">\n+              <size-selector\n+                class=\"mr10 mb10\"\n+                v-for=\"filter in getAvailableFilters[option.attribute_code]\"\n+                v-if=\"isOptionAvailable(filter)\"\n+                :key=\"filter.id\"\n+                :variant=\"filter\"\n+                :selected-filters=\"getSelectedOptions\"\n+                @change=\"changeEditModeFilter\"\n+              />\n+            </div>\n+          </div>\n         </div>\n+        <button-full\n+          class=\"update-button mb10 mr10\"\n+          @click.native=\"updateProductVariant\"\n+          :disabled=\"isUpdateCartDisabled\"\n+        >\n+          {\{ $t(\'Update item\') }\}\n+        </button-full>\n+      </div>\n+      <div class=\"w-100 flex middle-xs actions\" v-if=\"!editMode\">\n+        <edit-button class=\"mx5\" @click=\"openEditMode\" v-if=\"productsAreReconfigurable && !editMode\" />\n+        <remove-button class=\"mx5\" @click=\"removeItem\" />\n       </div>\n     </div>\n   </li>\n </template>\n',
+var dMicroProd1 = Diff2Html.getPrettyHtml('--- a/src/themes/degi/components/core/blocks/Microcart/Product.vue\n+++ b/src/themes/degi/components/core/blocks/Microcart/Product.vue\n@@ -1,131 +1,312 @@\n <template>\n-  <li class=\"row flex-nowrap py10\">\n-    <div>\n+  <li class=\"row py10 bg-cl-white\" :class=\"{ \'relative\': editMode }\">\n+    <div class=\"mx10 w-100 py10 mb15 edit-mode flex between-xs middle-xs\" v-if=\"editMode\">\n+      Edit mode\n+      <button class=\"brdr-none bg-cl-transparent\" @click=\"closeEditMode\">\n+        <span class=\"cl-accent\">\n+          <i class=\"material-icons cl-accent mr5\">\n+            close\n+          </i>\n+        </span>\n+      </button>\n+    </div>\n+    <div class=\"blend\">\n       <div class=\"ml10 bg-cl-secondary\">\n         <product-image :image=\"image\" />\n       </div>\n     </div>\n-    <div class=\"col-xs flex pl35 py15 start-xs between-sm details\">\n-      <div>\n-        <router-link\n-          class=\"serif h4 name\"\n-          :to=\"localizedRoute({\n-            name: product.type_id + \'-product\',\n-            params: {\n-              parentSku: product.parentSku ? product.parentSku : product.sku,\n-              slug: product.slug,\n-              childSku: product.sku\n-            }\n-          })\"\n-          data-testid=\"productLink\"\n-          @click.native=\"$store.commit(\'ui/setMicrocart\', false)\"\n-        >\n-          {\{ product.name | htmlDecode }\}\n-        </router-link>\n-        <div class=\"h6 cl-bg-tertiary pt5 sku\" data-testid=\"productSku\">\n-          {\{ product.sku }\}\n-        </div>\n-        <div class=\"h6 cl-bg-tertiary pt5 options\" v-if=\"isOnline && product.totals && product.totals.options\">\n-          <div v-for=\"opt in product.totals.options\" :key=\"opt.label\">\n-            <span class=\"opn\">{\{ opt.label }\}: </span>\n-            <span class=\"opv\" v-html=\"opt.value\" />\n+    <div class=\"col-xs pt15 flex pl35 flex-wrap\">\n+      <div class=\"flex flex-nowrap details\">\n+        <div class=\"flex w-100 flex-wrap between-xs\">\n+          <div>\n+            <router-link\n+              class=\"serif h4 name\"\n+              :to=\"productLink\"\n+              data-testid=\"productLink\"\n+              @click.native=\"$store.commit(\'ui/setMicrocart\', false)\"\n+            >\n+              {\{ product.name | htmlDecode }\}\n+            </router-link>\n+            <div class=\"h6 cl-bg-tertiary pt5 sku\" data-testid=\"productSku\">\n+              {\{ product.sku }\}\n+            </div>\n+            <div class=\"h6 cl-bg-tertiary pt5 options\" v-if=\"isTotalsActive\">\n+              <div v-for=\"opt in product.totals.options\" :key=\"opt.label\">\n+                <span class=\"opn\">{\{ opt.label }\}: </span>\n+                <span class=\"opv\" v-html=\"opt.value\" />\n+              </div>\n+            </div>\n+            <div class=\"h6 cl-bg-tertiary pt5 options\" v-else-if=\"!editMode && product.options\">\n+              <div v-for=\"opt in product.options\" :key=\"opt.label\">\n+                <span class=\"opn\">{\{ opt.label }\}: </span>\n+                <span class=\"opv\" v-html=\"opt.value\" />\n+              </div>\n+            </div>\n+            <div class=\"h6 pt5 cl-error\" v-if=\"hasProductErrors\">\n+              {\{ product.errors | formatProductMessages }\}\n+            </div>\n+            <div class=\"h6 pt5 cl-success\" v-if=\"hasProductInfo && !hasProductErrors\">\n+              {\{ product.info | formatProductMessages }\}\n+            </div>\n           </div>\n+          <product-quantity\n+            class=\"h5 cl-accent lh25 qty\"\n+            v-if=\"product.type_id !== \'grouped\' && product.type_id !== \'bundle\'\"\n+            :value=\"productQty\"\n+            :max-quantity=\"maxQuantity\"\n+            :loading=\"isStockInfoLoading\"\n+            :is-simple-or-configurable=\"isSimpleOrConfigurable\"\n+            @input=\"updateProductQty\"\n+            @error=\"handleQuantityError\"\n+          />\n         </div>\n-        <div class=\"h6 cl-bg-tertiary pt5 options\" v-else-if=\"product.options\">\n-          <div v-for=\"opt in product.options\" :key=\"opt.label\">\n-            <span class=\"opn\">{\{ opt.label }\}: </span>\n-            <span class=\"opv\" v-html=\"opt.value\" />\n+        <div class=\"flex mr10 align-right start-xs between-sm prices\">\n+          <div class=\"prices\" v-if=\"!displayItemDiscounts || !isOnline\">\n+            <span class=\"h4 serif cl-error price-special\" v-if=\"product.special_price\">\n+              {\{ product.price_incl_tax * product.qty | price(storeView) }\}\n+            </span>\n+            <span class=\"h6 serif price-original\" v-if=\"product.special_price\">\n+              {\{ product.original_price_incl_tax * product.qty | price(storeView) }\}\n+            </span>\n+            <span class=\"h4 serif price-regular\" v-else data-testid=\"productPrice\">\n+              {\{ (product.original_price_incl_tax ? product.original_price_incl_tax : product.price_incl_tax) * product.qty | price(storeView) }\}\n+            </span>\n+          </div>\n+          <div class=\"prices\" v-else-if=\"isOnline && product.totals\">\n+            <span class=\"h4 serif cl-error price-special\" v-if=\"product.totals.discount_amount\">\n+              {\{ product.totals.row_total - product.totals.discount_amount + product.totals.tax_amount | price(storeView) }\}\n+            </span>\n+            <span class=\"h6 serif price-original\" v-if=\"product.totals.discount_amount\">\n+              {\{ product.totals.row_total_incl_tax | price(storeView) }\}\n+            </span>\n+            <span class=\"h4 serif price-regular\" v-if=\"!product.totals.discount_amount\">\n+              {\{ product.totals.row_total_incl_tax | price(storeView) }\}\n+            </span>\n+          </div>\n+          <div class=\"prices\" v-else>\n+            <span class=\"h4 serif price-regular\">\n+              {\{ (product.regular_price || product.price_incl_tax) * product.qty | price(storeView) }\}\n+            </span>\n           </div>\n         </div>\n-        <div class=\"h6 pt5 cl-error\" v-if=\"product.errors && Object.keys(product.errors).length > 0\">\n-          {\{ product.errors | formatProductMessages }\}\n-        </div>\n-        <div class=\"h6 pt5 cl-success\" v-if=\"product.info && Object.keys(product.info).length > 0 && Object.keys(product.errors).length === 0\">\n-          {\{ product.info | formatProductMessages }\}\n-        </div>\n-      </div>\n-      <div class=\"h5 pt5 cl-accent lh25 qty\">\n-        <base-input-number\n-          :name=\"$t(\'Quantity\')\"\n-          :value=\"product.qty\"\n-          @input=\"updateQuantity\"\n-          :min=\"1\"\n-        />\n-      </div>\n-    </div>\n-    <div class=\"flex py15 mr10 align-right start-xs between-sm actions\">\n-      <div class=\"prices\" v-if=\"!displayItemDiscounts || !isOnline\">\n-        <span class=\"h4 serif cl-error price-special\" v-if=\"product.special_price\">\n-          {\{ product.priceInclTax * product.qty | price(storeView) }\}&nbsp;\n-        </span>\n-        <span class=\"h6 serif price-original\" v-if=\"product.special_price\">\n-          {\{ product.originalPriceInclTax * product.qty | price(storeView) }\}\n-        </span>\n-        <span class=\"h4 serif price-regular\" v-else data-testid=\"productPrice\">\n-          {\{ (product.originalPriceInclTax ? product.originalPriceInclTax : product.priceInclTax) * product.qty | price(storeView) }\}\n-        </span>\n-      </div>\n-      <div class=\"prices\" v-else-if=\"isOnline && product.totals\">\n-        <span class=\"h4 serif cl-error price-special\" v-if=\"product.totals.discount_amount\">\n-          {\{ product.totals.row_total - product.totals.discount_amount + product.totals.tax_amount | price(storeView) }\}&nbsp;\n-        </span>\n-        <span class=\"h6 serif price-original\" v-if=\"product.totals.discount_amount\">\n-          {\{ product.totals.row_total_incl_tax | price(storeView) }\}\n-        </span>\n-        <span class=\"h4 serif price-regular\" v-if=\"!product.totals.discount_amount\">\n-          {\{ product.totals.row_total_incl_tax | price(storeView) }\}\n-        </span>\n-      </div>\n-      <div class=\"prices\" v-else>\n-        <span class=\"h4 serif price-regular\">\n-          {\{ product.regular_price * product.qty | price(storeView) }\}\n-        </span>\n       </div>\n-      <div class=\"links\">\n-        <div class=\"mt5\" @click=\"removeItem\">\n-          <remove-button />\n+      <div class=\"w-100 pb15 flex flex-wrap bottom-xs\" v-if=\"editMode\">\n+        <div class=\"ml0 flex flex-wrap filters\" v-if=\"productsAreReconfigurable\">\n+          <div class=\"h5 pt5 w-100\" v-for=\"(option, index) in product.configurable_options\" :key=\"index\">\n+            <div class=\"h6 cl-bg-tertiary mr10\">\n+              {\{ option.label }\}:\n+            </div>\n+            <div class=\"flex flex-wrap pt5\" v-if=\"option.label == \'Color\' && editMode\">\n+              <color-selector\n+                v-for=\"filter in getAvailableFilters[option.attribute_code]\"\n+                v-if=\"isOptionAvailable(filter)\"\n+                :key=\"filter.id\"\n+                :variant=\"filter\"\n+                :selected-filters=\"getSelectedOptions\"\n+                @change=\"changeEditModeFilter\"\n+              />\n+            </div>\n+            <div class=\"flex flex-wrap pt5\" v-else-if=\"option.label == \'Size\' && editMode\">\n+              <size-selector\n+                class=\"mr10 mb10\"\n+                v-for=\"filter in getAvailableFilters[option.attribute_code]\"\n+                v-if=\"isOptionAvailable(filter)\"\n+                :key=\"filter.id\"\n+                :variant=\"filter\"\n+                :selected-filters=\"getSelectedOptions\"\n+                @change=\"changeEditModeFilter\"\n+              />\n+            </div>\n+          </div>\n         </div>\n+        <button-full\n+          class=\"update-button mb10 mr10\"\n+          @click.native=\"updateProductVariant\"\n+          :disabled=\"isUpdateCartDisabled\"\n+        >\n+          {\{ $t(\'Update item\') }\}\n+        </button-full>\n+      </div>\n+      <div class=\"w-100 flex middle-xs actions\" v-if=\"!editMode\">\n+        <edit-button class=\"mx5\" @click=\"openEditMode\" v-if=\"productsAreReconfigurable && !editMode\" />\n+        <remove-button class=\"mx5\" @click=\"removeItem\" />\n       </div>\n     </div>\n   </li>\n </template>\n',
   {inputFormat: 'diff', showFiles: false, matching: 'none', outputFormat: 'line-by-line'}
 );
 document.getElementById('d-micro-prod-1').innerHTML = dMicroProd1;
@@ -957,7 +957,7 @@ document.getElementById('d-page-not').innerHTML = dPageNotFound;
 </div>
 <script>
 var dProductPage = Diff2Html.getPrettyHtml(
-  '--- a/src/themes/degi/pages/Product.vue\n+++ b/src/themes/degi/pages/Product.vue\n@@ -5,184 +5,152 @@\n         <section class=\"row m0 between-xs\">\n           <div class=\"col-xs-12 col-md-6 center-xs middle-xs image\">\n             <product-gallery\n-              :offline=\"image\"\n-              :gallery=\"gallery\"\n-              :configuration=\"configuration\"\n-              :product=\"product\"\n+              :offline=\"getOfflineImage\"\n+              :gallery=\"getProductGallery\"\n+              :configuration=\"getCurrentProductConfiguration\"\n+              :product=\"getCurrentProduct\"\n             />\n           </div>\n           <div class=\"col-xs-12 col-md-5 data\">\n             <breadcrumbs\n               class=\"pt40 pb20 hidden-xs\"\n-              :routes=\"breadcrumbs.routes\"\n-              :active-route=\"breadcrumbs.name\"\n+              :routes=\"getBreadcrumbs\"\n+              :active-route=\"getCurrentProduct.name\"\n             />\n-            <h1 class=\"mb20 mt0 cl-mine-shaft product-name\" data-testid=\"productName\" itemprop=\"name\">\n-              {\{ product.name | htmlDecode }\}\n-              <web-share :title=\"product.name | htmlDecode\" text=\"Check this product!\" class=\"web-share\" />\n+            <h1\n+              class=\"mb20 mt0 cl-mine-shaft product-name\"\n+              data-testid=\"productName\"\n+              itemprop=\"name\"\n+            >\n+              {\{ getCurrentProduct.name | htmlDecode }\}\n+              <web-share\n+                :title=\"getCurrentProduct.name | htmlDecode\"\n+                text=\"Check this product!\"\n+                class=\"web-share\"\n+              />\n             </h1>\n-            <div class=\"mb20 uppercase cl-secondary\" itemprop=\"sku\" :content=\"product.sku\">\n-              {\{ $t(\'SKU\') }\}: {\{ product.sku }\}\n+            <div\n+              class=\"mb20 uppercase cl-secondary\"\n+              itemprop=\"sku\"\n+              :content=\"getCurrentProduct.sku\"\n+            >\n+              {\{ $t(\'SKU: {sku}\', { sku: getCurrentProduct.sku }) }\}\n             </div>\n             <div itemprop=\"offers\" itemscope itemtype=\"http://schema.org/Offer\">\n-              <meta itemprop=\"priceCurrency\" :content=\"currentStore.i18n.currencyCode\">\n-              <meta itemprop=\"price\" :content=\"parseFloat(product.priceInclTax).toFixed(2)\">\n+              <meta itemprop=\"priceCurrency\" :content=\"$store.state.storeView.i18n.currencyCode\">\n+              <meta itemprop=\"price\" :content=\"parseFloat(getCurrentProduct.priceInclTax).toFixed(2)\">\n               <meta itemprop=\"availability\" :content=\"structuredData.availability\">\n-              <meta itemprop=\"url\" :content=\"product.url_path\">\n-              <div\n-                class=\"mb40 price serif\"\n-                v-if=\"product.type_id !== \'grouped\'\"\n-              >\n+              <meta itemprop=\"url\" :content=\"getCurrentProduct.url_path\">\n+              <div class=\"mb40 price serif\" v-if=\"getCurrentProduct.type_id !== \'grouped\'\">\n                 <div\n                   class=\"h3 cl-secondary\"\n-                  v-if=\"product.special_price && product.priceInclTax && product.originalPriceInclTax\"\n+                  v-if=\"getCurrentProduct.special_price && getCurrentProduct.priceInclTax && getCurrentProduct.original_price_incl_tax\"\n                 >\n-                  <span class=\"h2 cl-mine-shaft weight-700\">\n-                    {\{ product.priceInclTax * product.qty | price }\}\n-                  </span>&nbsp;\n-                  <span class=\"price-original h3\">\n-                    {\{ product.originalPriceInclTax * product.qty | price }\}\n-                  </span>\n+                  <span\n+                    class=\"h2 cl-mine-shaft weight-700\"\n+                  >{\{ getCurrentProduct.priceInclTax * getCurrentProduct.qty | price }\}</span>&nbsp;\n+                  <span\n+                    class=\"price-original h3\"\n+                  >{\{ getCurrentProduct.original_price_incl_tax * getCurrentProduct.qty | price }\}</span>\n                 </div>\n                 <div\n                   class=\"h2 cl-mine-shaft weight-700\"\n-                  v-if=\"!product.special_price && product.priceInclTax\"\n+                  v-if=\"!getCurrentProduct.special_price && getCurrentProduct.priceInclTax\"\n                 >\n-                  {\{ product.qty > 0 ? product.priceInclTax * product.qty : product.priceInclTax | price }\}\n+                  {\{ getCurrentProduct.qty > 0 ? getCurrentProduct.priceInclTax * getCurrentProduct.qty : getCurrentProduct.priceInclTax | price }\}\n                 </div>\n               </div>\n-              <div\n-                class=\"cl-primary variants\"\n-                v-if=\"product.type_id ==\'configurable\' && !loading\"\n-              >\n-                <div class=\"error\" v-if=\"product.errors && Object.keys(product.errors).length > 0\">\n-                  {\{ product.errors | formatProductMessages }\}\n-                </div>\n+              <div class=\"cl-primary variants\" v-if=\"getCurrentProduct.type_id ==\'configurable\'\">\n                 <div\n-                  class=\"h5\"\n-                  v-for=\"(option, index) in product.configurable_options\"\n-                  v-if=\"(!product.errors || Object.keys(product.errors).length === 0) && Object.keys(configuration).length > 0\"\n-                  :key=\"index\"\n+                  class=\"error\"\n+                  v-if=\"getCurrentProduct.errors && Object.keys(getCurrentProduct.errors).length > 0\"\n                 >\n+                  {\{ getCurrentProduct.errors | formatProductMessages }\}\n+                </div>\n+                <div class=\"h5\" v-for=\"option in getProductOptions\" :key=\"option.id\">\n                   <div class=\"variants-label\" data-testid=\"variantsLabel\">\n                     {\{ option.label }\}\n-                    <span class=\"weight-700\">\n-                      {\{ configuration[option.attribute_code ? option.attribute_code : option.label.toLowerCase()].label }\}\n-                    </span>\n+                    <span\n+                      class=\"weight-700\"\n+                    >{\{ getOptionLabel(option) }\}</span>\n                   </div>\n                   <div class=\"row top-xs m0 pt15 pb40 variants-wrapper\">\n                     <div v-if=\"option.label == \'Color\'\">\n                       <color-selector\n-                        v-for=\"(c, i) in options[option.attribute_code]\"\n-                        v-if=\"isOptionAvailable(c)\"\n-                        :key=\"i\"\n-                        :id=\"c.id\"\n-                        :label=\"c.label\"\n-                        context=\"product\"\n-                        :code=\"option.attribute_code\"\n-                        :class=\"{ active: c.id == configuration[option.attribute_code].id }\"\n+                        v-for=\"filter in getAvailableFilters[option.attribute_code]\"\n+                        :key=\"filter.id\"\n+                        :variant=\"filter\"\n+                        :selected-filters=\"getSelectedFilters\"\n+                        @change=\"changeFilter\"\n                       />\n                     </div>\n                     <div class=\"sizes\" v-else-if=\"option.label == \'Size\'\">\n                       <size-selector\n-                        v-for=\"(s, i) in options[option.attribute_code]\"\n-                        v-if=\"isOptionAvailable(s)\"\n-                        :key=\"i\"\n-                        :id=\"s.id\"\n-                        :label=\"s.label\"\n-                        context=\"product\"\n-                        :code=\"option.attribute_code\"\n                         class=\"mr10 mb10\"\n-                        :class=\"{ active: s.id == configuration[option.attribute_code].id }\"\n-                        v-focus-clean\n+                        v-for=\"filter in getAvailableFilters[option.attribute_code]\"\n+                        :key=\"filter.id\"\n+                        :variant=\"filter\"\n+                        :selected-filters=\"getSelectedFilters\"\n+                        @change=\"changeFilter\"\n                       />\n                     </div>\n                     <div :class=\"option.attribute_code\" v-else>\n                       <generic-selector\n-                        v-for=\"(s, i) in options[option.attribute_code]\"\n-                        v-if=\"isOptionAvailable(s)\"\n-                        :key=\"i\"\n-                        :id=\"s.id\"\n-                        :label=\"s.label\"\n-                        context=\"product\"\n-                        :code=\"option.attribute_code\"\n                         class=\"mr10 mb10\"\n-                        :class=\"{ active: s.id == configuration[option.attribute_code].id }\"\n-                        v-focus-clean\n+                        v-for=\"filter in getAvailableFilters[option.attribute_code]\"\n+                        :key=\"filter.id\"\n+                        :variant=\"filter\"\n+                        :selected-filters=\"getSelectedFilters\"\n+                        @change=\"changeFilter\"\n                       />\n                     </div>\n                     <span\n                       v-if=\"option.label == \'Size\'\"\n                       @click=\"openSizeGuide\"\n-                      class=\"\n-                        p0 ml30 inline-flex middle-xs no-underline h5\n-                        action size-guide pointer cl-secondary\n-                      \"\n+                      class=\"p0 ml30 inline-flex middle-xs no-underline h5 action size-guide pointer cl-secondary\"\n                     >\n                       <i class=\"pr5 material-icons\">accessibility</i>\n-                      <span>\n-                        {\{ $t(\'Size guide\') }\}\n-                      </span>\n+                      <span>{\{ $t(\'Size guide\') }\}</span>\n                     </span>\n                   </div>\n                 </div>\n               </div>\n             </div>\n             <product-links\n-              v-if=\"product.type_id ==\'grouped\' && !loading\"\n-              :products=\"product.product_links\"\n+              v-if=\"getCurrentProduct.type_id ==\'grouped\'\"\n+              :products=\"getCurrentProduct.product_links\"\n             />\n             <product-bundle-options\n-              v-if=\"product.bundle_options && product.bundle_options.length > 0 && !loading\"\n-              :product=\"product\"\n+              v-if=\"getCurrentProduct.bundle_options && getCurrentProduct.bundle_options.length > 0\"\n+              :product=\"getCurrentProduct\"\n             />\n             <product-custom-options\n-              v-else-if=\"product.custom_options && product.custom_options.length > 0 && !loading\"\n-              :product=\"product\"\n+              v-else-if=\"getCurrentProduct.custom_options && getCurrentProduct.custom_options.length > 0\"\n+              :product=\"getCurrentProduct\"\n+            />\n+            <product-quantity\n+              class=\"row m0 mb35\"\n+              v-if=\"getCurrentProduct.type_id !== \'grouped\' && getCurrentProduct.type_id !== \'bundle\'\"\n+              v-model=\"getCurrentProduct.qty\"\n+              :max-quantity=\"maxQuantity\"\n+              :loading=\"isStockInfoLoading\"\n+              :is-simple-or-configurable=\"isSimpleOrConfigurable\"\n+              show-quantity\n+              @error=\"handleQuantityError\"\n             />\n-            <div class=\"row m0 mb35\" v-if=\"product.type_id !== \'grouped\' && product.type_id !== \'bundle\'\">\n-              <base-input-number\n-                :name=\"$t(\'Quantity\')\"\n-                v-model=\"product.qty\"\n-                :min=\"1\"\n-                @blur=\"$v.$touch()\"\n-                :validations=\"[\n-                  {\n-                    condition: $v.product.qty.$error && !$v.product.qty.minValue,\n-                    text: $t(\'Quantity must be above 0\')\n-                  }\n-                ]\"\n-              />\n-            </div>\n             <div class=\"row m0\">\n               <add-to-cart\n-                :product=\"product\"\n-                :disabled=\"$v.product.qty.$error && !$v.product.qty.minValue\"\n+                :product=\"getCurrentProduct\"\n+                :disabled=\"isAddToCartDisabled\"\n                 class=\"col-xs-12 col-sm-4 col-md-6\"\n               />\n             </div>\n             <div class=\"row py40 add-to-buttons\">\n               <div class=\"col-xs-6 col-sm-3 col-md-6\">\n-                <wishlist-button :product=\"product\" />\n+                <AddToWishlist :product=\"getCurrentProduct\" />\n               </div>\n-              <div class=\"col-xs-6 col-sm-3 col-md-6 product__add-to-compare\">\n-                <button\n-                  @click=\"isOnCompare ? removeFromList(\'compare\') : addToList(\'compare\')\"\n-                  class=\"\n-                    p0 inline-flex middle-xs bg-cl-transparent brdr-none\n-                    action h5 pointer cl-secondary\n-                  \"\n-                  type=\"button\"\n-                  data-testid=\"addToCompare\"\n-                >\n-                  <i class=\"pr5 material-icons\">compare</i>\n-                  <template v-if=\"!isOnCompare\">\n-                    {\{ $t(\'Add to compare\') }\}\n-                  </template>\n-                  <template v-else>\n-                    {\{ $t(\'Remove from compare\') }\}\n-                  </template>\n-                </button>\n+              <div class=\"col-xs-6 col-sm-3 col-md-6\">\n+                <AddToCompare :product=\"getCurrentProduct\" />\n               </div>\n             </div>\n           </div>\n@@ -193,51 +161,51 @@\n       <h2 class=\"h3 m0 mb10 serif lh20 details-title\">\n         {\{ $t(\'Product details\') }\}\n       </h2>\n-      <div\n-        class=\"h4 details-wrapper\"\n-        :class=\"{\'details-wrapper--open\': detailsOpen}\"\n-      >\n+      <div class=\"h4 details-wrapper\" :class=\"{\'details-wrapper--open\': detailsOpen}\">\n         <div class=\"row between-md m0\">\n           <div class=\"col-xs-12 col-sm-6\">\n-            <div\n-              class=\"lh30 h5\"\n-              itemprop=\"description\"\n-              v-html=\"product.description\"\n-            />\n+            <div class=\"lh30 h5\" itemprop=\"description\" v-html=\"getCurrentProduct.description\" />\n           </div>\n           <div class=\"col-xs-12 col-sm-5\">\n             <ul class=\"attributes p0 pt5 m0\">\n               <product-attribute\n                 :key=\"attr.attribute_code\"\n-                v-for=\"attr in customAttributes\"\n-                :product=\"product\"\n+                v-for=\"attr in getCustomAttributes\"\n+                :product=\"getCurrentProduct\"\n                 :attribute=\"attr\"\n                 empty-placeholder=\"N/A\"\n               />\n             </ul>\n           </div>\n-          <div\n-            class=\"details-overlay\"\n-            @click=\"showDetails\"\n-          />\n+          <div class=\"details-overlay\" @click=\"showDetails\" />\n         </div>\n       </div>\n     </section>\n-    <reviews :product-id=\"originalProduct.id\" v-show=\"OnlineOnly\" />\n-    <related-products\n-      type=\"upsell\"\n-      :heading=\"$t(\'We found other products you might like\')\"\n-    />\n-    <promoted-offers single-banner />\n-    <related-products type=\"related\" />\n+    <lazy-hydrate when-idle>\n+      <reviews\n+        :product-name=\"getOriginalProduct.name\"\n+        :product-id=\"getOriginalProduct.id\"\n+        v-show=\"isOnline\"\n+      />\n+    </lazy-hydrate>\n+    <lazy-hydrate when-idle>\n+      <related-products type=\"upsell\" :heading=\"$t(\'We found other products you might like\')\" />\n+    </lazy-hydrate>\n+    <lazy-hydrate when-idle>\n+      <promoted-offers single-banner />\n+    </lazy-hydrate>\n+    <lazy-hydrate when-idle>\n+      <related-products type=\"related\" />\n+    </lazy-hydrate>\n     <SizeGuide />\n   </div>\n </template>\n',
+  '--- a/src/themes/degi/pages/Product.vue\n+++ b/src/themes/degi/pages/Product.vue\n@@ -5,184 +5,152 @@\n         <section class=\"row m0 between-xs\">\n           <div class=\"col-xs-12 col-md-6 center-xs middle-xs image\">\n             <product-gallery\n-              :offline=\"image\"\n-              :gallery=\"gallery\"\n-              :configuration=\"configuration\"\n-              :product=\"product\"\n+              :offline=\"getOfflineImage\"\n+              :gallery=\"getProductGallery\"\n+              :configuration=\"getCurrentProductConfiguration\"\n+              :product=\"getCurrentProduct\"\n             />\n           </div>\n           <div class=\"col-xs-12 col-md-5 data\">\n             <breadcrumbs\n               class=\"pt40 pb20 hidden-xs\"\n-              :routes=\"breadcrumbs.routes\"\n-              :active-route=\"breadcrumbs.name\"\n+              :routes=\"getBreadcrumbs\"\n+              :active-route=\"getCurrentProduct.name\"\n             />\n-            <h1 class=\"mb20 mt0 cl-mine-shaft product-name\" data-testid=\"productName\" itemprop=\"name\">\n-              {\{ product.name | htmlDecode }\}\n-              <web-share :title=\"product.name | htmlDecode\" text=\"Check this product!\" class=\"web-share\" />\n+            <h1\n+              class=\"mb20 mt0 cl-mine-shaft product-name\"\n+              data-testid=\"productName\"\n+              itemprop=\"name\"\n+            >\n+              {\{ getCurrentProduct.name | htmlDecode }\}\n+              <web-share\n+                :title=\"getCurrentProduct.name | htmlDecode\"\n+                text=\"Check this product!\"\n+                class=\"web-share\"\n+              />\n             </h1>\n-            <div class=\"mb20 uppercase cl-secondary\" itemprop=\"sku\" :content=\"product.sku\">\n-              {\{ $t(\'SKU\') }\}: {\{ product.sku }\}\n+            <div\n+              class=\"mb20 uppercase cl-secondary\"\n+              itemprop=\"sku\"\n+              :content=\"getCurrentProduct.sku\"\n+            >\n+              {\{ $t(\'SKU: {sku}\', { sku: getCurrentProduct.sku }) }\}\n             </div>\n             <div itemprop=\"offers\" itemscope itemtype=\"http://schema.org/Offer\">\n-              <meta itemprop=\"priceCurrency\" :content=\"currentStore.i18n.currencyCode\">\n-              <meta itemprop=\"price\" :content=\"parseFloat(product.priceInclTax).toFixed(2)\">\n+              <meta itemprop=\"priceCurrency\" :content=\"$store.state.storeView.i18n.currencyCode\">\n+              <meta itemprop=\"price\" :content=\"parseFloat(getCurrentProduct.priceInclTax).toFixed(2)\">\n               <meta itemprop=\"availability\" :content=\"structuredData.availability\">\n-              <meta itemprop=\"url\" :content=\"product.url_path\">\n-              <div\n-                class=\"mb40 price serif\"\n-                v-if=\"product.type_id !== \'grouped\'\"\n-              >\n+              <meta itemprop=\"url\" :content=\"getCurrentProduct.url_path\">\n+              <div class=\"mb40 price serif\" v-if=\"getCurrentProduct.type_id !== \'grouped\'\">\n                 <div\n                   class=\"h3 cl-secondary\"\n-                  v-if=\"product.special_price && product.priceInclTax && product.originalPriceInclTax\"\n+                  v-if=\"getCurrentProduct.special_price && getCurrentProduct.priceInclTax && getCurrentProduct.original_price_incl_tax\"\n                 >\n-                  <span class=\"h2 cl-mine-shaft weight-700\">\n-                    {\{ product.priceInclTax * product.qty | price(storeView) }\}\n-                  </span>&nbsp;\n-                  <span class=\"price-original h3\">\n-                    {\{ product.originalPriceInclTax * product.qty | price(storeView) }\}\n-                  </span>\n+                  <span\n+                    class=\"h2 cl-mine-shaft weight-700\"\n+                  >{\{ getCurrentProduct.priceInclTax * getCurrentProduct.qty | price(storeView) }\}</span>&nbsp;\n+                  <span\n+                    class=\"price-original h3\"\n+                  >{\{ getCurrentProduct.original_price_incl_tax * getCurrentProduct.qty | price(storeView) }\}</span>\n                 </div>\n                 <div\n                   class=\"h2 cl-mine-shaft weight-700\"\n-                  v-if=\"!product.special_price && product.priceInclTax\"\n+                  v-if=\"!getCurrentProduct.special_price && getCurrentProduct.priceInclTax\"\n                 >\n-                  {\{ product.qty > 0 ? product.priceInclTax * product.qty : product.priceInclTax | price(storeView) }\}\n+                  {\{ getCurrentProduct.qty > 0 ? getCurrentProduct.priceInclTax * getCurrentProduct.qty : getCurrentProduct.priceInclTax | price(storeView) }\}\n                 </div>\n               </div>\n-              <div\n-                class=\"cl-primary variants\"\n-                v-if=\"product.type_id ==\'configurable\' && !loading\"\n-              >\n-                <div class=\"error\" v-if=\"product.errors && Object.keys(product.errors).length > 0\">\n-                  {\{ product.errors | formatProductMessages }\}\n-                </div>\n+              <div class=\"cl-primary variants\" v-if=\"getCurrentProduct.type_id ==\'configurable\'\">\n                 <div\n-                  class=\"h5\"\n-                  v-for=\"(option, index) in product.configurable_options\"\n-                  v-if=\"(!product.errors || Object.keys(product.errors).length === 0) && Object.keys(configuration).length > 0\"\n-                  :key=\"index\"\n+                  class=\"error\"\n+                  v-if=\"getCurrentProduct.errors && Object.keys(getCurrentProduct.errors).length > 0\"\n                 >\n+                  {\{ getCurrentProduct.errors | formatProductMessages }\}\n+                </div>\n+                <div class=\"h5\" v-for=\"option in getProductOptions\" :key=\"option.id\">\n                   <div class=\"variants-label\" data-testid=\"variantsLabel\">\n                     {\{ option.label }\}\n-                    <span class=\"weight-700\">\n-                      {\{ configuration[option.attribute_code ? option.attribute_code : option.label.toLowerCase()].label }\}\n-                    </span>\n+                    <span\n+                      class=\"weight-700\"\n+                    >{\{ getOptionLabel(option) }\}</span>\n                   </div>\n                   <div class=\"row top-xs m0 pt15 pb40 variants-wrapper\">\n                     <div v-if=\"option.label == \'Color\'\">\n                       <color-selector\n-                        v-for=\"(c, i) in options[option.attribute_code]\"\n-                        v-if=\"isOptionAvailable(c)\"\n-                        :key=\"i\"\n-                        :id=\"c.id\"\n-                        :label=\"c.label\"\n-                        context=\"product\"\n-                        :code=\"option.attribute_code\"\n-                        :class=\"{ active: c.id == configuration[option.attribute_code].id }\"\n+                        v-for=\"filter in getAvailableFilters[option.attribute_code]\"\n+                        :key=\"filter.id\"\n+                        :variant=\"filter\"\n+                        :selected-filters=\"getSelectedFilters\"\n+                        @change=\"changeFilter\"\n                       />\n                     </div>\n                     <div class=\"sizes\" v-else-if=\"option.label == \'Size\'\">\n                       <size-selector\n-                        v-for=\"(s, i) in options[option.attribute_code]\"\n-                        v-if=\"isOptionAvailable(s)\"\n-                        :key=\"i\"\n-                        :id=\"s.id\"\n-                        :label=\"s.label\"\n-                        context=\"product\"\n-                        :code=\"option.attribute_code\"\n                         class=\"mr10 mb10\"\n-                        :class=\"{ active: s.id == configuration[option.attribute_code].id }\"\n-                        v-focus-clean\n+                        v-for=\"filter in getAvailableFilters[option.attribute_code]\"\n+                        :key=\"filter.id\"\n+                        :variant=\"filter\"\n+                        :selected-filters=\"getSelectedFilters\"\n+                        @change=\"changeFilter\"\n                       />\n                     </div>\n                     <div :class=\"option.attribute_code\" v-else>\n                       <generic-selector\n-                        v-for=\"(s, i) in options[option.attribute_code]\"\n-                        v-if=\"isOptionAvailable(s)\"\n-                        :key=\"i\"\n-                        :id=\"s.id\"\n-                        :label=\"s.label\"\n-                        context=\"product\"\n-                        :code=\"option.attribute_code\"\n                         class=\"mr10 mb10\"\n-                        :class=\"{ active: s.id == configuration[option.attribute_code].id }\"\n-                        v-focus-clean\n+                        v-for=\"filter in getAvailableFilters[option.attribute_code]\"\n+                        :key=\"filter.id\"\n+                        :variant=\"filter\"\n+                        :selected-filters=\"getSelectedFilters\"\n+                        @change=\"changeFilter\"\n                       />\n                     </div>\n                     <span\n                       v-if=\"option.label == \'Size\'\"\n                       @click=\"openSizeGuide\"\n-                      class=\"\n-                        p0 ml30 inline-flex middle-xs no-underline h5\n-                        action size-guide pointer cl-secondary\n-                      \"\n+                      class=\"p0 ml30 inline-flex middle-xs no-underline h5 action size-guide pointer cl-secondary\"\n                     >\n                       <i class=\"pr5 material-icons\">accessibility</i>\n-                      <span>\n-                        {\{ $t(\'Size guide\') }\}\n-                      </span>\n+                      <span>{\{ $t(\'Size guide\') }\}</span>\n                     </span>\n                   </div>\n                 </div>\n               </div>\n             </div>\n             <product-links\n-              v-if=\"product.type_id ==\'grouped\' && !loading\"\n-              :products=\"product.product_links\"\n+              v-if=\"getCurrentProduct.type_id ==\'grouped\'\"\n+              :products=\"getCurrentProduct.product_links\"\n             />\n             <product-bundle-options\n-              v-if=\"product.bundle_options && product.bundle_options.length > 0 && !loading\"\n-              :product=\"product\"\n+              v-if=\"getCurrentProduct.bundle_options && getCurrentProduct.bundle_options.length > 0\"\n+              :product=\"getCurrentProduct\"\n             />\n             <product-custom-options\n-              v-else-if=\"product.custom_options && product.custom_options.length > 0 && !loading\"\n-              :product=\"product\"\n+              v-else-if=\"getCurrentProduct.custom_options && getCurrentProduct.custom_options.length > 0\"\n+              :product=\"getCurrentProduct\"\n+            />\n+            <product-quantity\n+              class=\"row m0 mb35\"\n+              v-if=\"getCurrentProduct.type_id !== \'grouped\' && getCurrentProduct.type_id !== \'bundle\'\"\n+              v-model=\"getCurrentProduct.qty\"\n+              :max-quantity=\"maxQuantity\"\n+              :loading=\"isStockInfoLoading\"\n+              :is-simple-or-configurable=\"isSimpleOrConfigurable\"\n+              show-quantity\n+              @error=\"handleQuantityError\"\n             />\n-            <div class=\"row m0 mb35\" v-if=\"product.type_id !== \'grouped\' && product.type_id !== \'bundle\'\">\n-              <base-input-number\n-                :name=\"$t(\'Quantity\')\"\n-                v-model=\"product.qty\"\n-                :min=\"1\"\n-                @blur=\"$v.$touch()\"\n-                :validations=\"[\n-                  {\n-                    condition: $v.product.qty.$error && !$v.product.qty.minValue,\n-                    text: $t(\'Quantity must be above 0\')\n-                  }\n-                ]\"\n-              />\n-            </div>\n             <div class=\"row m0\">\n               <add-to-cart\n-                :product=\"product\"\n-                :disabled=\"$v.product.qty.$error && !$v.product.qty.minValue\"\n+                :product=\"getCurrentProduct\"\n+                :disabled=\"isAddToCartDisabled\"\n                 class=\"col-xs-12 col-sm-4 col-md-6\"\n               />\n             </div>\n             <div class=\"row py40 add-to-buttons\">\n               <div class=\"col-xs-6 col-sm-3 col-md-6\">\n-                <wishlist-button :product=\"product\" />\n+                <AddToWishlist :product=\"getCurrentProduct\" />\n               </div>\n-              <div class=\"col-xs-6 col-sm-3 col-md-6 product__add-to-compare\">\n-                <button\n-                  @click=\"isOnCompare ? removeFromList(\'compare\') : addToList(\'compare\')\"\n-                  class=\"\n-                    p0 inline-flex middle-xs bg-cl-transparent brdr-none\n-                    action h5 pointer cl-secondary\n-                  \"\n-                  type=\"button\"\n-                  data-testid=\"addToCompare\"\n-                >\n-                  <i class=\"pr5 material-icons\">compare</i>\n-                  <template v-if=\"!isOnCompare\">\n-                    {\{ $t(\'Add to compare\') }\}\n-                  </template>\n-                  <template v-else>\n-                    {\{ $t(\'Remove from compare\') }\}\n-                  </template>\n-                </button>\n+              <div class=\"col-xs-6 col-sm-3 col-md-6\">\n+                <AddToCompare :product=\"getCurrentProduct\" />\n               </div>\n             </div>\n           </div>\n@@ -193,51 +161,51 @@\n       <h2 class=\"h3 m0 mb10 serif lh20 details-title\">\n         {\{ $t(\'Product details\') }\}\n       </h2>\n-      <div\n-        class=\"h4 details-wrapper\"\n-        :class=\"{\'details-wrapper--open\': detailsOpen}\"\n-      >\n+      <div class=\"h4 details-wrapper\" :class=\"{\'details-wrapper--open\': detailsOpen}\">\n         <div class=\"row between-md m0\">\n           <div class=\"col-xs-12 col-sm-6\">\n-            <div\n-              class=\"lh30 h5\"\n-              itemprop=\"description\"\n-              v-html=\"product.description\"\n-            />\n+            <div class=\"lh30 h5\" itemprop=\"description\" v-html=\"getCurrentProduct.description\" />\n           </div>\n           <div class=\"col-xs-12 col-sm-5\">\n             <ul class=\"attributes p0 pt5 m0\">\n               <product-attribute\n                 :key=\"attr.attribute_code\"\n-                v-for=\"attr in customAttributes\"\n-                :product=\"product\"\n+                v-for=\"attr in getCustomAttributes\"\n+                :product=\"getCurrentProduct\"\n                 :attribute=\"attr\"\n                 empty-placeholder=\"N/A\"\n               />\n             </ul>\n           </div>\n-          <div\n-            class=\"details-overlay\"\n-            @click=\"showDetails\"\n-          />\n+          <div class=\"details-overlay\" @click=\"showDetails\" />\n         </div>\n       </div>\n     </section>\n-    <reviews :product-id=\"originalProduct.id\" v-show=\"OnlineOnly\" />\n-    <related-products\n-      type=\"upsell\"\n-      :heading=\"$t(\'We found other products you might like\')\"\n-    />\n-    <promoted-offers single-banner />\n-    <related-products type=\"related\" />\n+    <lazy-hydrate when-idle>\n+      <reviews\n+        :product-name=\"getOriginalProduct.name\"\n+        :product-id=\"getOriginalProduct.id\"\n+        v-show=\"isOnline\"\n+      />\n+    </lazy-hydrate>\n+    <lazy-hydrate when-idle>\n+      <related-products type=\"upsell\" :heading=\"$t(\'We found other products you might like\')\" />\n+    </lazy-hydrate>\n+    <lazy-hydrate when-idle>\n+      <promoted-offers single-banner />\n+    </lazy-hydrate>\n+    <lazy-hydrate when-idle>\n+      <related-products type=\"related\" />\n+    </lazy-hydrate>\n     <SizeGuide />\n   </div>\n </template>\n',
   {inputFormat: 'diff', showFiles: false, matching: 'none', outputFormat: 'line-by-line'}
 );
 document.getElementById('d-page-prod').innerHTML = dProductPage;
@@ -1078,7 +1078,7 @@ document.getElementById('d-cate-sidebar').innerHTML = dCateSidebar;
 </div>
 <script>
 var dCheckoutOrderConfirm = Diff2Html.getPrettyHtml(
-  '--- a/src/themes/degi/components/core/blocks/Checkout/OrderConfirmation.vue\n+++ b/src/themes/degi/components/core/blocks/Checkout/OrderConfirmation.vue\n@@ -6,7 +6,7 @@\n     <div slot=\"content\">\n       <p>{\{ $t(\'Please confirm order you placed when you was offline\') }\}</p>\n       <div class=\"mb40\" v-for=\"(order, key) in ordersData\" :key=\"key\">\n-        <h3>{\{ $t(\'Order #\') }\}{\{ key + 1 }\}</h3>\n+        <h3>{\{ $t(\'Order #{id}\', { id: key + 1}) }\}</h3>\n         <h4>{\{ $t(\'Items ordered\') }\}</h4>\n         <table class=\"brdr-1 brdr-cl-bg-secondary\">\n           <thead>\n@@ -34,13 +34,13 @@\n                 </span>\n               </td>\n               <td class=\"fs-medium lh25\" :data-th=\"$t(\'Price\')\">\n-                {\{ product.priceInclTax | price }\}\n+                {\{ product.price_incl_tax | price }\}\n               </td>\n               <td class=\"fs-medium lh25 align-right\" :data-th=\"$t(\'Qty\')\">\n                 {\{ product.qty }\}\n               </td>\n               <td class=\"fs-medium lh25\" :data-th=\"$t(\'Subtotal\')\">\n-                {\{ product.priceInclTax * product.qty | price }\}\n+                {\{ product.price_incl_tax * product.qty | price }\}\n               </td>\n             </tr>\n           </tbody>',
+  '--- a/src/themes/degi/components/core/blocks/Checkout/OrderConfirmation.vue\n+++ b/src/themes/degi/components/core/blocks/Checkout/OrderConfirmation.vue\n@@ -6,7 +6,7 @@\n     <div slot=\"content\">\n       <p>{\{ $t(\'Please confirm order you placed when you was offline\') }\}</p>\n       <div class=\"mb40\" v-for=\"(order, key) in ordersData\" :key=\"key\">\n-        <h3>{\{ $t(\'Order #\') }\}{\{ key + 1 }\}</h3>\n+        <h3>{\{ $t(\'Order #{id}\', { id: key + 1}) }\}</h3>\n         <h4>{\{ $t(\'Items ordered\') }\}</h4>\n         <table class=\"brdr-1 brdr-cl-bg-secondary\">\n           <thead>\n@@ -34,13 +34,13 @@\n                 </span>\n               </td>\n               <td class=\"fs-medium lh25\" :data-th=\"$t(\'Price\')\">\n-                {\{ product.priceInclTax | price(storeView) }\}\n+                {\{ product.price_incl_tax | price(storeView) }\}\n               </td>\n               <td class=\"fs-medium lh25 align-right\" :data-th=\"$t(\'Qty\')\">\n                 {\{ product.qty }\}\n               </td>\n               <td class=\"fs-medium lh25\" :data-th=\"$t(\'Subtotal\')\">\n-                {\{ product.priceInclTax * product.qty | price(storeView) }\}\n+                {\{ product.price_incl_tax * product.qty | price(storeView) }\}\n               </td>\n             </tr>\n           </tbody>',
   {inputFormat: 'diff', showFiles: false, matching: 'none', outputFormat: 'line-by-line'}
 );
 document.getElementById('d-checkout-order-confirm').innerHTML = dCheckoutOrderConfirm;
@@ -1122,7 +1122,7 @@ document.getElementById('d-checkout-payment').innerHTML = dCheckoutPayment ;
 </div>
 <script>
 var dCheckoutProduct = Diff2Html.getPrettyHtml(
-  '--- a/src/themes/degi/components/core/blocks/Checkout/Product.vue\n+++ b/src/themes/degi/components/core/blocks/Checkout/Product.vue\n@@ -1,6 +1,8 @@\n <template>\n   <div class=\"row p25 between-xs\">\n-    <product-image :image=\"image\" class=\"blend\" />\n+    <div class=\"blend\">\n+      <product-image :image=\"image\" />\n+    </div>\n     <div class=\"col-xs\">\n       <div class=\"row\">\n         <div class=\"col-xs-12 col-md-9 pb15\">\n@@ -45,9 +47,9 @@\n             <span v-if=\"!product.totals.discount_amount\" class=\"h4\">{\{ product.totals.row_total_incl_tax | price }\}</span>\n           </div>\n           <div v-else>\n-            <span class=\"h4 cl-error\" v-if=\"product.special_price\">{\{ product.priceInclTax * product.qty | price }\} </span>\n-            <span class=\"price-original h5\" v-if=\"product.special_price\">{\{ product.originalPriceInclTax * product.qty | price }\}</span>\n-            <span v-if=\"!product.special_price\" class=\"h4\">{\{ product.priceInclTax * product.qty | price }\}</span>\n+            <span class=\"h4 cl-error\" v-if=\"product.special_price\">{\{ product.price_incl_tax * product.qty | price }\} </span>\n+            <span class=\"price-original h5\" v-if=\"product.special_price\">{\{ product.original_price_incl_tax * product.qty | price }\}</span>\n+            <span v-if=\"!product.special_price\" class=\"h4\">{\{ product.price_incl_tax * product.qty | price }\}</span>\n           </div>\n         </div>\n       </div>\n@@ -84,9 +86,6 @@ export default {\n   text-decoration: line-through;\n }\n .blend {\n-  mix-blend-mode: multiply;\n-  align-self: center;\n   flex: 0 0 121px;\n-  padding-bottom: 32.68%;\n }\n </style>\n',
+  '--- a/src/themes/degi/components/core/blocks/Checkout/Product.vue\n+++ b/src/themes/degi/components/core/blocks/Checkout/Product.vue\n@@ -1,6 +1,8 @@\n <template>\n   <div class=\"row p25 between-xs\">\n-    <product-image :image=\"image\" class=\"blend\" />\n+    <div class=\"blend\">\n+      <product-image :image=\"image\" />\n+    </div>\n     <div class=\"col-xs\">\n       <div class=\"row\">\n         <div class=\"col-xs-12 col-md-9 pb15\">\n@@ -45,9 +47,9 @@\n             <span v-if=\"!product.totals.discount_amount\" class=\"h4\">{\{ product.totals.row_total_incl_tax | price(storeView) }\}</span>\n           </div>\n           <div v-else>\n-            <span class=\"h4 cl-error\" v-if=\"product.special_price\">{\{ product.priceInclTax * product.qty | price(storeView) }\} </span>\n-            <span class=\"price-original h5\" v-if=\"product.special_price\">{\{ product.originalPriceInclTax * product.qty | price(storeView) }\}</span>\n-            <span v-if=\"!product.special_price\" class=\"h4\">{\{ product.priceInclTax * product.qty | price(storeView) }\}</span>\n+            <span class=\"h4 cl-error\" v-if=\"product.special_price\">{\{ product.price_incl_tax * product.qty | price(storeView) }\} </span>\n+            <span class=\"price-original h5\" v-if=\"product.special_price\">{\{ product.original_price_incl_tax * product.qty | price(storeView) }\}</span>\n+            <span v-if=\"!product.special_price\" class=\"h4\">{\{ product.price_incl_tax * product.qty | price(storeView) }\}</span>\n           </div>\n         </div>\n       </div>\n@@ -84,9 +86,6 @@ export default {\n   text-decoration: line-through;\n }\n .blend {\n-  mix-blend-mode: multiply;\n-  align-self: center;\n   flex: 0 0 121px;\n-  padding-bottom: 32.68%;\n }\n </style>\n',
   {inputFormat: 'diff', showFiles: false, matching: 'none', outputFormat: 'line-by-line'}
 );
 document.getElementById('d-checkout-product').innerHTML = dCheckoutProduct ;
@@ -1363,7 +1363,7 @@ document.getElementById('d-mya-news').innerHTML = dMyNews;
 </div>
 <script>
 var dMyOrder = Diff2Html.getPrettyHtml(
-  '--- a/src/themes/degi/components/core/blocks/MyAccount/MyOrder.vue\n+++ b/src/themes/degi/components/core/blocks/MyAccount/MyOrder.vue\n@@ -1,5 +1,5 @@\n <template>\n-  <div class=\"mb35\">\n+  <div class=\"mb35\" v-if=\"order\">\n     <!-- My order header -->\n     <div class=\"row mb15\">\n       <div class=\"col-xs-12 col-md-2 col-lg-1\">\n@@ -7,7 +7,7 @@\n       </div>\n       <div class=\"col-xs-12 col-md-6\">\n         <h3 class=\"m0 mb5 mt5\">\n-          {\{ $t(\'Order #\') }\}{\{ order.increment_id }\}\n+          {\{ $t(\'Order #{id}\', { id: order.increment_id }) }\}\n           <span class=\"brdr-1 brdr-cl-bg-secondary py5 px10 ml20 sans-serif fs-medium-small weight-400 cl-secondary\">\n             {\{ order.status | capitalize }\}\n           </span>\n@@ -19,7 +19,7 @@\n       <div class=\"col-xs-12 h4\">\n         <p>{\{ order.created_at | date(\'LLL\') }\}</p>\n         <p class=\"mt35\">\n-          <a href=\"#\" class=\"underline\" @click.prevent=\"remakeOrder(skipGrouped(order.items))\">{\{ $t(\'Remake order\') }\}</a>\n+          <a href=\"#\" class=\"underline\" @click.prevent=\"remakeOrder(singleOrderItems)\">{\{ $t(\'Remake order\') }\}</a>\n         </p>\n       </div>\n     </div>\n@@ -44,10 +44,13 @@\n               <th class=\"serif lh20\">\n                 {\{ $t(\'Subtotal\') }\}\n               </th>\n+              <th class=\"serif lh20\">\n+                {\{ $t(\'Thumbnail\') }\}\n+              </th>\n             </tr>\n           </thead>\n           <tbody>\n-            <tr class=\"brdr-top-1 brdr-cl-bg-secondary\" v-for=\"item in skipGrouped(order.items)\" :key=\"item.item_id\">\n+            <tr class=\"brdr-top-1 brdr-cl-bg-secondary\" v-for=\"item in singleOrderItems\" :key=\"item.item_id\">\n               <td class=\"fs-medium lh25\" :data-th=\"$t(\'Product Name\')\">\n                 {\{ item.name }\}\n               </td>\n@@ -63,35 +66,38 @@\n               <td class=\"fs-medium lh25\" :data-th=\"$t(\'Subtotal\')\">\n                 {\{ item.row_total_incl_tax | price }\}\n               </td>\n+              <td class=\"fs-medium lh25\">\n+                <product-image :image=\"{src: itemThumbnail[item.sku]}\" />\n+              </td>\n             </tr>\n           </tbody>\n           <tfoot>\n             <tr class=\"brdr-top-1 brdr-cl-bg-secondary\">\n-              <td colspan=\"4\" class=\"align-right\">\n+              <td colspan=\"5\" class=\"align-right\">\n                 {\{ $t(\'Subtotal\') }\}\n               </td>\n               <td>{\{ order.subtotal | price }\}</td>\n             </tr>\n             <tr>\n-              <td colspan=\"4\" class=\"align-right\">\n+              <td colspan=\"5\" class=\"align-right\">\n                 {\{ $t(\'Shipping\') }\}\n               </td>\n               <td>{\{ order.shipping_amount | price }\}</td>\n             </tr>\n             <tr>\n-              <td colspan=\"4\" class=\"align-right\">\n+              <td colspan=\"5\" class=\"align-right\">\n                 {\{ $t(\'Tax\') }\}\n               </td>\n               <td>{\{ order.tax_amount + order.discount_tax_compensation_amount | price }\}</td>\n             </tr>\n             <tr v-if=\"order.discount_amount\">\n-              <td colspan=\"4\" class=\"align-right\">\n+              <td colspan=\"5\" class=\"align-right\">\n                 {\{ $t(\'Discount\') }\}\n               </td>\n               <td>{\{ order.discount_amount | price }\}</td>\n             </tr>\n             <tr>\n-              <td colspan=\"4\" class=\"align-right\">\n+              <td colspan=\"5\" class=\"align-right\">\n                 {\{ $t(\'Grand total\') }\}\n               </td>\n               <td>{\{ order.grand_total | price }\}</td>\n@@ -137,13 +143,37 @@\n </template>\n \n <script>\n+import Vue from \'vue\'\n import MyOrder from \'@vue-storefront/core/compatibility/components/blocks/MyAccount/MyOrder\'\n import ReturnIcon from \'theme/components/core/blocks/Header/ReturnIcon\'\n+import ProductImage from \'theme/components/core/ProductImage\'\n+import { getThumbnailPath, productThumbnailPath } from \'@vue-storefront/core/helpers\'\n+import { mapActions } from \'vuex\'\n \n export default {\n   mixins: [MyOrder],\n   components: {\n-    ReturnIcon\n+    ReturnIcon,\n+    ProductImage\n+  },\n+  data () {\n+    return {\n+      itemThumbnail: []\n+    }\n+  },\n+  methods: {\n+    ...mapActions({\n+      getProduct: \'product/single\'\n+    })\n+  },\n+  mounted () {\n+    this.singleOrderItems.forEach(async item => {\n+      if (!this.itemThumbnail[item.sku]) {\n+        const product = await this.getProduct({ options: { sku: item.sku }, setCurrentProduct: false, setCurrentCategoryPath: false, selectDefaultVariant: false })\n+        const thumbnail = productThumbnailPath(product)\n+        Vue.set(this.itemThumbnail, item.sku, getThumbnailPath(thumbnail, 280, 280))\n+      }\n+    })\n   }\n }\n <\/script>\n',
+  '--- a/src/themes/degi/components/core/blocks/MyAccount/MyOrder.vue\n+++ b/src/themes/degi/components/core/blocks/MyAccount/MyOrder.vue\n@@ -1,5 +1,5 @@\n <template>\n-  <div class=\"mb35\">\n+  <div class=\"mb35\" v-if=\"order\">\n     <!-- My order header -->\n     <div class=\"row mb15\">\n       <div class=\"col-xs-12 col-md-2 col-lg-1\">\n@@ -7,7 +7,7 @@\n       </div>\n       <div class=\"col-xs-12 col-md-6\">\n         <h3 class=\"m0 mb5 mt5\">\n-          {\{ $t(\'Order #\') }\}{\{ order.increment_id }\}\n+          {\{ $t(\'Order #{id}\', { id: order.increment_id }) }\}\n           <span class=\"brdr-1 brdr-cl-bg-secondary py5 px10 ml20 sans-serif fs-medium-small weight-400 cl-secondary\">\n             {\{ order.status | capitalize }\}\n           </span>\n@@ -19,7 +19,7 @@\n       <div class=\"col-xs-12 h4\">\n         <p>{\{ order.created_at | date(\'LLL\') }\}</p>\n         <p class=\"mt35\">\n-          <a href=\"#\" class=\"underline\" @click.prevent=\"remakeOrder(skipGrouped(order.items))\">{\{ $t(\'Remake order\') }\}</a>\n+          <a href=\"#\" class=\"underline\" @click.prevent=\"remakeOrder(singleOrderItems)\">{\{ $t(\'Remake order\') }\}</a>\n         </p>\n       </div>\n     </div>\n@@ -44,10 +44,13 @@\n               <th class=\"serif lh20\">\n                 {\{ $t(\'Subtotal\') }\}\n               </th>\n+              <th class=\"serif lh20\">\n+                {\{ $t(\'Thumbnail\') }\}\n+              </th>\n             </tr>\n           </thead>\n           <tbody>\n-            <tr class=\"brdr-top-1 brdr-cl-bg-secondary\" v-for=\"item in skipGrouped(order.items)\" :key=\"item.item_id\">\n+            <tr class=\"brdr-top-1 brdr-cl-bg-secondary\" v-for=\"item in singleOrderItems\" :key=\"item.item_id\">\n               <td class=\"fs-medium lh25\" :data-th=\"$t(\'Product Name\')\">\n                 {\{ item.name }\}\n               </td>\n@@ -63,35 +66,38 @@\n               <td class=\"fs-medium lh25\" :data-th=\"$t(\'Subtotal\')\">\n                 {\{ item.row_total_incl_tax | price(storeView) }\}\n               </td>\n+              <td class=\"fs-medium lh25\">\n+                <product-image :image=\"{src: itemThumbnail[item.sku]}\" />\n+              </td>\n             </tr>\n           </tbody>\n           <tfoot>\n             <tr class=\"brdr-top-1 brdr-cl-bg-secondary\">\n-              <td colspan=\"4\" class=\"align-right\">\n+              <td colspan=\"5\" class=\"align-right\">\n                 {\{ $t(\'Subtotal\') }\}\n               </td>\n               <td>{\{ order.subtotal | price(storeView) }\}</td>\n             </tr>\n             <tr>\n-              <td colspan=\"4\" class=\"align-right\">\n+              <td colspan=\"5\" class=\"align-right\">\n                 {\{ $t(\'Shipping\') }\}\n               </td>\n               <td>{\{ order.shipping_amount | price(storeView) }\}</td>\n             </tr>\n             <tr>\n-              <td colspan=\"4\" class=\"align-right\">\n+              <td colspan=\"5\" class=\"align-right\">\n                 {\{ $t(\'Tax\') }\}\n               </td>\n               <td>{\{ order.tax_amount + order.discount_tax_compensation_amount | price(storeView) }\}</td>\n             </tr>\n             <tr v-if=\"order.discount_amount\">\n-              <td colspan=\"4\" class=\"align-right\">\n+              <td colspan=\"5\" class=\"align-right\">\n                 {\{ $t(\'Discount\') }\}\n               </td>\n               <td>{\{ order.discount_amount | price(storeView) }\}</td>\n             </tr>\n             <tr>\n-              <td colspan=\"4\" class=\"align-right\">\n+              <td colspan=\"5\" class=\"align-right\">\n                 {\{ $t(\'Grand total\') }\}\n               </td>\n               <td>{\{ order.grand_total | price(storeView) }\}</td>\n@@ -137,13 +143,37 @@\n </template>\n \n <script>\n+import Vue from \'vue\'\n import MyOrder from \'@vue-storefront/core/compatibility/components/blocks/MyAccount/MyOrder\'\n import ReturnIcon from \'theme/components/core/blocks/Header/ReturnIcon\'\n+import ProductImage from \'theme/components/core/ProductImage\'\n+import { getThumbnailPath, productThumbnailPath } from \'@vue-storefront/core/helpers\'\n+import { mapActions } from \'vuex\'\n \n export default {\n   mixins: [MyOrder],\n   components: {\n-    ReturnIcon\n+    ReturnIcon,\n+    ProductImage\n+  },\n+  data () {\n+    return {\n+      itemThumbnail: []\n+    }\n+  },\n+  methods: {\n+    ...mapActions({\n+      getProduct: \'product/single\'\n+    })\n+  },\n+  mounted () {\n+    this.singleOrderItems.forEach(async item => {\n+      if (!this.itemThumbnail[item.sku]) {\n+        const product = await this.getProduct({ options: { sku: item.sku }, setCurrentProduct: false, setCurrentCategoryPath: false, selectDefaultVariant: false })\n+        const thumbnail = productThumbnailPath(product)\n+        Vue.set(this.itemThumbnail, item.sku, getThumbnailPath(thumbnail, 280, 280))\n+      }\n+    })\n   }\n }\n <\/script>\n',
   {inputFormat: 'diff', showFiles: false, matching: 'none', outputFormat: 'line-by-line'}
 );
 document.getElementById('d-mya-order').innerHTML = dMyOrder;
@@ -1580,7 +1580,7 @@ document.getElementById('d-wish-add-to').innerHTML = dWishAddTo;
 </div>
 <script>
 var dWishProd = Diff2Html.getPrettyHtml(
-  '--- a/src/themes/degi/components/core/blocks/Wishlist/Product.vue\n+++ b/src/themes/degi/components/core/blocks/Wishlist/Product.vue\n@@ -1,23 +1,13 @@\n <template>\n   <li class=\"row pr55 py20\">\n-    <div class=\"image\" @click=\"closeWishlist\">\n-      <router-link :to=\"localizedRoute({\n-        name: product.type_id + \'-product\',\n-        fullPath: product.url_path,\n-        params: { parentSku: product.parentSku ? product.parentSku : product.sku, slug: product.slug, childSku: product.sku }\n-      })\"\n-      >\n+    <div class=\"blend bg-cl-secondary\" @click=\"closeWishlist\">\n+      <router-link :to=\"productLink\">\n         <product-image :image=\"image\" />\n       </router-link>\n     </div>\n     <div class=\"col-xs between-xs flex pl40 py15\">\n       <div @click=\"closeWishlist\">\n-        <router-link :to=\"localizedRoute({\n-          name: product.type_id + \'-product\',\n-          fullPath: product.url_path,\n-          params: { parentSku: product.parentSku ? product.parentSku : product.sku, slug: product.slug, childSku: product.sku }\n-        })\"\n-        >\n+        <router-link :to=\"productLink\">\n           {\{ product.name | htmlDecode }\}\n         </router-link>\n         <div class=\"h6 cl-bg-tertiary pt5 sku\">\n@@ -27,16 +17,16 @@\n     </div>\n     <div class=\"col-xs flex py15 align-right\">\n       <div>\n-        <span class=\"price-special\" v-if=\"product.special_price\">{\{ product.priceInclTax | price }\}</span>&nbsp;\n-        <span class=\"price-original\" v-if=\"product.special_price\">{\{ product.originalPriceInclTax | price }\}</span>\n+        <span class=\"price-special\" v-if=\"product.special_price\">{\{ product.price_incl_tax | price }\}</span>&nbsp;\n+        <span class=\"price-original\" v-if=\"product.special_price\">{\{ product.original_price_incl_tax | price }\}</span>\n \n         <span v-if=\"!product.special_price\">\n-          {\{ product.priceInclTax | price }\}\n+          {\{ product.price_incl_tax | price }\}\n         </span>\n       </div>\n       <div>\n         <div class=\"mt5\">\n-          <span @click=\"removeFromWishlist(product)\"><remove-button class=\"cl-accent\" /></span>\n+          <span @click=\"removeProductFromWhishList(product)\"><remove-button class=\"cl-accent\" /></span>\n         </div>\n       </div>\n     </div>\n@@ -45,8 +35,12 @@\n \n <script>\n import Product from \'@vue-storefront/core/compatibility/components/blocks/Wishlist/Product\'\n-import RemoveButton from \'./RemoveButton\'\n+import { currentStoreView } from \'@vue-storefront/core/lib/multistore\'\n+import { formatProductLink } from \'@vue-storefront/core/modules/url/helpers\'\n import ProductImage from \'theme/components/core/ProductImage\'\n+import RemoveButton from \'./RemoveButton\'\n+import i18n from \'@vue-storefront/i18n\'\n+import { htmlDecode } from \'@vue-storefront/core/lib/store/filters\'\n \n export default {\n   components: {\n@@ -55,24 +49,49 @@ export default {\n   },\n   mixins: [Product],\n   computed: {\n+    productLink () {\n+      return formatProductLink(this.product, currentStoreView().storeCode)\n+    },\n     image () {\n       return {\n         loading: this.thumbnail,\n         src: this.thumbnail\n       }\n     }\n+  },\n+  methods: {\n+    removeProductFromWhishList (product) {\n+      this.$store.dispatch(\'notification/spawnNotification\', {\n+        type: \'success\',\n+        message: i18n.t(\'Product {productName} has been removed from wishlist!\', { productName: htmlDecode(product.name) }),\n+        action1: { label: i18n.t(\'OK\') }\n+      }, { root: true })\n+      this.removeFromWishlist(product)\n+    }\n   }\n }\n <\/script>\n \n-<style scoped>\n+<style lang=\"scss\" scoped>\n+@import \'~theme/css/animations/transitions\';\n+.blend {\n+  flex: 0 0 121px;\n+  opacity: .8;\n+  will-change: opacity;\n+  transition: .3s opacity $motion-main;\n+  &:hover{\n+     opacity: 1;\n+   }\n+}\n .col-xs {\n   flex-direction: column;\n }\n input {\n   width: 30px;\n }\n-.image{\n-  flex: 0 0 121px;\n+.price-original {\n+  text-decoration: line-through;\n+  color: #828282;\n+  font-size: .95rem;\n }\n </style>\n',
+  '--- a/src/themes/degi/components/core/blocks/Wishlist/Product.vue\n+++ b/src/themes/degi/components/core/blocks/Wishlist/Product.vue\n@@ -1,23 +1,13 @@\n <template>\n   <li class=\"row pr55 py20\">\n-    <div class=\"image\" @click=\"closeWishlist\">\n-      <router-link :to=\"localizedRoute({\n-        name: product.type_id + \'-product\',\n-        fullPath: product.url_path,\n-        params: { parentSku: product.parentSku ? product.parentSku : product.sku, slug: product.slug, childSku: product.sku }\n-      })\"\n-      >\n+    <div class=\"blend bg-cl-secondary\" @click=\"closeWishlist\">\n+      <router-link :to=\"productLink\">\n         <product-image :image=\"image\" />\n       </router-link>\n     </div>\n     <div class=\"col-xs between-xs flex pl40 py15\">\n       <div @click=\"closeWishlist\">\n-        <router-link :to=\"localizedRoute({\n-          name: product.type_id + \'-product\',\n-          fullPath: product.url_path,\n-          params: { parentSku: product.parentSku ? product.parentSku : product.sku, slug: product.slug, childSku: product.sku }\n-        })\"\n-        >\n+        <router-link :to=\"productLink\">\n           {\{ product.name | htmlDecode }\}\n         </router-link>\n         <div class=\"h6 cl-bg-tertiary pt5 sku\">\n@@ -27,16 +17,16 @@\n     </div>\n     <div class=\"col-xs flex py15 align-right\">\n       <div>\n-        <span class=\"price-special\" v-if=\"product.special_price\">{\{ product.priceInclTax | price(storeView) }\}</span>&nbsp;\n-        <span class=\"price-original\" v-if=\"product.special_price\">{\{ product.originalPriceInclTax | price(storeView) }\}</span>\n+        <span class=\"price-special\" v-if=\"product.special_price\">{\{ product.price_incl_tax | price(storeView) }\}</span>&nbsp;\n+        <span class=\"price-original\" v-if=\"product.special_price\">{\{ product.original_price_incl_tax | price(storeView) }\}</span>\n \n         <span v-if=\"!product.special_price\">\n-          {\{ product.priceInclTax | price(storeView) }\}\n+          {\{ product.price_incl_tax | price(storeView) }\}\n         </span>\n       </div>\n       <div>\n         <div class=\"mt5\">\n-          <span @click=\"removeFromWishlist(product)\"><remove-button class=\"cl-accent\" /></span>\n+          <span @click=\"removeProductFromWhishList(product)\"><remove-button class=\"cl-accent\" /></span>\n         </div>\n       </div>\n     </div>\n@@ -45,8 +35,12 @@\n \n <script>\n import Product from \'@vue-storefront/core/compatibility/components/blocks/Wishlist/Product\'\n-import RemoveButton from \'./RemoveButton\'\n+import { currentStoreView } from \'@vue-storefront/core/lib/multistore\'\n+import { formatProductLink } from \'@vue-storefront/core/modules/url/helpers\'\n import ProductImage from \'theme/components/core/ProductImage\'\n+import RemoveButton from \'./RemoveButton\'\n+import i18n from \'@vue-storefront/i18n\'\n+import { htmlDecode } from \'@vue-storefront/core/lib/store/filters\'\n \n export default {\n   components: {\n@@ -55,24 +49,49 @@ export default {\n   },\n   mixins: [Product],\n   computed: {\n+    productLink () {\n+      return formatProductLink(this.product, currentStoreView().storeCode)\n+    },\n     image () {\n       return {\n         loading: this.thumbnail,\n         src: this.thumbnail\n       }\n     }\n+  },\n+  methods: {\n+    removeProductFromWhishList (product) {\n+      this.$store.dispatch(\'notification/spawnNotification\', {\n+        type: \'success\',\n+        message: i18n.t(\'Product {productName} has been removed from wishlist!\', { productName: htmlDecode(product.name) }),\n+        action1: { label: i18n.t(\'OK\') }\n+      }, { root: true })\n+      this.removeFromWishlist(product)\n+    }\n   }\n }\n <\/script>\n \n-<style scoped>\n+<style lang=\"scss\" scoped>\n+@import \'~theme/css/animations/transitions\';\n+.blend {\n+  flex: 0 0 121px;\n+  opacity: .8;\n+  will-change: opacity;\n+  transition: .3s opacity $motion-main;\n+  &:hover{\n+     opacity: 1;\n+   }\n+}\n .col-xs {\n   flex-direction: column;\n }\n input {\n   width: 30px;\n }\n-.image{\n-  flex: 0 0 121px;\n+.price-original {\n+  text-decoration: line-through;\n+  color: #828282;\n+  font-size: .95rem;\n }\n </style>\n',
   {inputFormat: 'diff', showFiles: false, matching: 'none', outputFormat: 'line-by-line'}
 );
 document.getElementById('d-wish-prod').innerHTML = dWishProd;
@@ -1837,7 +1837,7 @@ document.getElementById('d-prod-img').innerHTML = dProdImg;
 </div>
 <script>
 var dProdLink = Diff2Html.getPrettyHtml(
-  '--- a/src/themes/degi/components/core/ProductLinks.vue\n+++ b/src/themes/degi/components/core/ProductLinks.vue\n@@ -7,12 +7,12 @@\n             {\{ productLink.product.name | htmlDecode }\}\n           </p>\n           <div class=\"col-xs-4 cl-bg-tertiary\">\n-            <div v-if=\"productLink.product.special_price && productLink.product.priceInclTax && productLink.product.originalPriceInclTax\">\n-              <span class=\"price-special\">{\{ productLink.product.priceInclTax | price }\}</span>&nbsp;\n-              <span class=\"price-original\">{\{ productLink.product.originalPriceInclTax | price }\}</span>\n+            <div v-if=\"productLink.product.special_price && productLink.product.price_incl_tax && productLink.product.original_price_incl_tax\">\n+              <span class=\"price-special\">{\{ productLink.product.price_incl_tax | price }\}</span>&nbsp;\n+              <span class=\"price-original\">{\{ productLink.product.original_price_incl_tax | price }\}</span>\n             </div>\n-            <div v-if=\"!productLink.product.special_price && productLink.product.priceInclTax\">\n-              {\{ productLink.product.priceInclTax | price }\}\n+            <div v-if=\"!productLink.product.special_price && productLink.product.price_incl_tax\">\n+              {\{ productLink.product.price_incl_tax | price }\}\n             </div>\n           </div>\n         </div>\n',
+  '--- a/src/themes/degi/components/core/ProductLinks.vue\n+++ b/src/themes/degi/components/core/ProductLinks.vue\n@@ -7,12 +7,12 @@\n             {\{ productLink.product.name | htmlDecode }\}\n           </p>\n           <div class=\"col-xs-4 cl-bg-tertiary\">\n-            <div v-if=\"productLink.product.special_price && productLink.product.priceInclTax && productLink.product.originalPriceInclTax\">\n-              <span class=\"price-special\">{\{ productLink.product.priceInclTax | price(storeView) }\}</span>&nbsp;\n-              <span class=\"price-original\">{\{ productLink.product.originalPriceInclTax | price(storeView) }\}</span>\n+            <div v-if=\"productLink.product.special_price && productLink.product.price_incl_tax && productLink.product.original_price_incl_tax\">\n+              <span class=\"price-special\">{\{ productLink.product.price_incl_tax | price(storeView) }\}</span>&nbsp;\n+              <span class=\"price-original\">{\{ productLink.product.original_price_incl_tax | price(storeView) }\}</span>\n             </div>\n-            <div v-if=\"!productLink.product.special_price && productLink.product.priceInclTax\">\n-              {\{ productLink.product.priceInclTax | price(storeView) }\}\n+            <div v-if=\"!productLink.product.special_price && productLink.product.price_incl_tax\">\n+              {\{ productLink.product.price_incl_tax | price(storeView) }\}\n             </div>\n           </div>\n         </div>\n',
   {inputFormat: 'diff', showFiles: false, matching: 'none', outputFormat: 'line-by-line'}
 );
 document.getElementById('d-prod-link').innerHTML = dProdLink;
@@ -1869,7 +1869,7 @@ document.getElementById('d-prod-qty').innerHTML = dProdQty;
 </div>
 <script>
 var dProdTile = Diff2Html.getPrettyHtml(
-  '--- a/src/themes/degi/components/core/ProductTile.vue\n+++ b/src/themes/degi/components/core/ProductTile.vue\n@@ -1,21 +1,39 @@\n <template>\n-  <div\n-    class=\"product align-center w-100 pb20\"\n-    v-observe-visibility=\"visibilityChanged\"\n-  >\n+  <div class=\"product align-center w-100 pb20\" v-observe-visibility=\"visibilityChanged\">\n+    <div class=\"product__icons\">\n+      <AddToWishlist :product=\"product\">\n+        <div\n+          class=\"product__icon\"\n+          :class=\"{\'product__icon--active\': isOnWishlist }\"\n+          :title=\"isOnWishlist ? $t(\'Remove\') : $t(\'Add to favorite\') \"\n+        >\n+          <i class=\"material-icons\">{\{ favoriteIcon }\}</i>\n+        </div>\n+      </AddToWishlist>\n+      <AddToCompare :product=\"product\">\n+        <div\n+          class=\"product__icon\"\n+          :class=\"{\'product__icon--active\':isOnCompare } \"\n+          :title=\"isOnCompare ? $t(\'Remove from compare\') : $t(\'Add to compare\')\"\n+        >\n+          <i class=\"material-icons\">compare</i>\n+        </div>\n+      </AddToCompare>\n+    </div>\n     <router-link\n       class=\"block no-underline product-link\"\n       :to=\"productLink\"\n       data-testid=\"productLink\"\n     >\n       <div\n-        class=\"product-image relative bg-cl-secondary\"\n+        class=\"product-cover bg-cl-secondary\"\n         :class=\"[{ sale: labelsActive && isOnSale }, { new: labelsActive && isNew }]\"\n       >\n         <product-image\n-          class=\"product-image__content\"\n+          class=\"product-cover__thumb\"\n           :image=\"thumbnailObj\"\n           :alt=\"product.name | htmlDecode\"\n+          :calc-ratio=\"false\"\n           data-testid=\"productImage\"\n         />\n       </div>\n@@ -26,24 +44,18 @@\n \n       <span\n         class=\"price-original mr5 lh30 cl-secondary\"\n-        v-if=\"product.special_price && parseFloat(product.originalPriceInclTax) > 0 && !onlyImage\"\n-      >\n-        {\{ product.originalPriceInclTax | price }\}\n-      </span>\n+        v-if=\"product.special_price && parseFloat(product.original_price_incl_tax) > 0 && !onlyImage\"\n+      >{\{ product.original_price_incl_tax | price }\}</span>\n \n       <span\n         class=\"price-special lh30 cl-accent weight-700\"\n         v-if=\"product.special_price && parseFloat(product.special_price) > 0 && !onlyImage\"\n-      >\n-        {\{ product.priceInclTax | price }\}\n-      </span>\n+      >{\{ product.price_incl_tax | price }\}</span>\n \n       <span\n         class=\"lh30 cl-secondary\"\n-        v-if=\"!product.special_price && parseFloat(product.priceInclTax) > 0 && !onlyImage\"\n-      >\n-        {\{ product.priceInclTax | price }\}\n-      </span>\n+        v-if=\"!product.special_price && parseFloat(product.price_incl_tax) > 0 && !onlyImage\"\n+      >{\{ product.price_incl_tax | price }\}</span>\n     </router-link>\n   </div>\n </template>\n@@ -53,11 +65,17 @@ import rootStore from \'@vue-storefront/core/store\'\n import { ProductTile } from \'@vue-storefront/core/modules/catalog/components/ProductTile.ts\'\n import config from \'config\'\n import ProductImage from \'./ProductImage\'\n+import AddToWishlist from \'theme/components/core/blocks/Wishlist/AddToWishlist\'\n+import AddToCompare from \'theme/components/core/blocks/Compare/AddToCompare\'\n+import { IsOnWishlist } from \'@vue-storefront/core/modules/wishlist/components/IsOnWishlist\'\n+import { IsOnCompare } from \'@vue-storefront/core/modules/compare/components/IsOnCompare\'\n \n export default {\n-  mixins: [ProductTile],\n+  mixins: [ProductTile, IsOnWishlist, IsOnCompare],\n   components: {\n-    ProductImage\n+    ProductImage,\n+    AddToWishlist,\n+    AddToCompare\n   },\n   props: {\n     labelsActive: {\n@@ -75,6 +93,9 @@ export default {\n         src: this.thumbnail,\n         loading: this.thumbnail\n       }\n+    },\n+    favoriteIcon () {\n+      return this.isOnWishlist ? \'favorite\' : \'favorite_border\'\n     }\n   },\n   methods: {\n@@ -84,21 +105,24 @@ export default {\n       }\n     },\n     visibilityChanged (isVisible, entry) {\n-      if (isVisible) {\n-        if (config.products.configurableChildrenStockPrefetchDynamic && rootStore.products.filterUnavailableVariants) {\n-          const skus = [this.product.sku]\n-          if (this.product.type_id === \'configurable\' && this.product.configurable_children && this.product.configurable_children.length > 0) {\n-            for (const confChild of this.product.configurable_children) {\n-              const cachedItem = rootStore.state.stock.cache[confChild.id]\n-              if (typeof cachedItem === \'undefined\' || cachedItem === null) {\n-                skus.push(confChild.sku)\n-              }\n-            }\n-            if (skus.length > 0) {\n-              rootStore.dispatch(\'stock/list\', { skus: skus }) // store it in the cache\n-            }\n+      if (\n+        isVisible &&\n+        config.products.configurableChildrenStockPrefetchDynamic &&\n+        config.products.filterUnavailableVariants &&\n+        this.product.type_id === \'configurable\' &&\n+        this.product.configurable_children &&\n+        this.product.configurable_children.length > 0\n+      ) {\n+        const skus = [this.product.sku]\n+        for (const confChild of this.product.configurable_children) {\n+          const cachedItem = rootStore.state.stock.cache[confChild.id]\n+          if (typeof cachedItem === \'undefined\' || cachedItem === null) {\n+            skus.push(confChild.sku)\n           }\n         }\n+        if (skus.length > 0) {\n+          rootStore.dispatch(\'stock/list\', { skus: skus }) // store it in the cache\n+        }\n       }\n     }\n   },\n@@ -121,9 +145,36 @@ $border-secondary: color(secondary, $colors-border);\n $color-white: color(white);\n \n .product {\n+  position: relative;\n   @media (max-width: 767px) {\n     padding-bottom: 10px;\n   }\n+  &__icons {\n+    position: absolute;\n+    top: 0;\n+    right: 0;\n+    display: flex;\n+    flex-direction: column;\n+    padding-right: 20px;\n+    padding-top: 10px;\n+  }\n+  &__icon {\n+    padding-top: 10px;\n+    opacity: 0;\n+    z-index: 2;\n+    transition: 0.3s opacity $motion-main;\n+    @media (max-width: 767px) {\n+      opacity: 1;\n+    }\n+    &--active {\n+      opacity: 1;\n+    }\n+  }\n+  &:hover {\n+    .product__icon {\n+      opacity: 1;\n+    }\n+  }\n }\n \n .price-original {\n@@ -145,45 +196,42 @@ $color-white: color(white);\n   font-size: 12px;\n }\n \n-.product-image{\n+.product-cover {\n   overflow: hidden;\n-  width:100%;\n-  height: 100%;\n   max-height: 300px;\n-\n-  &:hover{\n-    .product-image__content{\n-      opacity: 1;\n-      transform: scale(1.1);\n+  &__thumb {\n+    padding-bottom: calc(143.88% / (164.5 / 100));\n+    @media screen and (min-width: 768px) {\n+      padding-bottom: calc(250% / (276.5 / 100));\n     }\n-    &.sale::after,\n-    &.new::after{\n-      opacity: .8;\n+    @media screen and (min-width: 1024px) {\n+      padding-bottom: calc(200% / (276.5 / 100));\n     }\n+    opacity: 0.8;\n+    will-change: opacity, transform;\n+    transition: 0.3s opacity $motion-main, 0.3s transform $motion-main;\n   }\n-  &__content{\n \n-    padding-bottom: calc(300% / (257 / 100));\n-    mix-blend-mode: darken;\n-    opacity: .8;\n-    transform: scale(1);\n-    will-change: transform;\n-    transition: .3s opacity $motion-main, .3s transform $motion-main;\n-    @media (min-width: 768px) {\n-      padding-bottom: calc(208% / (168 / 100));\n-    }\n-    @media (min-width: 1200px) {\n-      padding-bottom: calc(300% / (276 / 100));\n+  @media screen and (min-width: 768px) {\n+    &:hover {\n+      .product-cover__thumb {\n+        opacity: 1;\n+        transform: scale(1.1);\n+      }\n+      &.sale::after,\n+      &.new::after {\n+        opacity: 0.8;\n+      }\n     }\n   }\n \n-  &.sale{\n+  &.sale {\n     &::after {\n       @extend %label;\n       content: \'Sale\';\n     }\n   }\n-  &.new{\n+  &.new {\n     &::after {\n       @extend %label;\n       content: \'New\';\n',
+  '--- a/src/themes/degi/components/core/ProductTile.vue\n+++ b/src/themes/degi/components/core/ProductTile.vue\n@@ -1,21 +1,39 @@\n <template>\n-  <div\n-    class=\"product align-center w-100 pb20\"\n-    v-observe-visibility=\"visibilityChanged\"\n-  >\n+  <div class=\"product align-center w-100 pb20\" v-observe-visibility=\"visibilityChanged\">\n+    <div class=\"product__icons\">\n+      <AddToWishlist :product=\"product\">\n+        <div\n+          class=\"product__icon\"\n+          :class=\"{\'product__icon--active\': isOnWishlist }\"\n+          :title=\"isOnWishlist ? $t(\'Remove\') : $t(\'Add to favorite\') \"\n+        >\n+          <i class=\"material-icons\">{\{ favoriteIcon }\}</i>\n+        </div>\n+      </AddToWishlist>\n+      <AddToCompare :product=\"product\">\n+        <div\n+          class=\"product__icon\"\n+          :class=\"{\'product__icon--active\':isOnCompare } \"\n+          :title=\"isOnCompare ? $t(\'Remove from compare\') : $t(\'Add to compare\')\"\n+        >\n+          <i class=\"material-icons\">compare</i>\n+        </div>\n+      </AddToCompare>\n+    </div>\n     <router-link\n       class=\"block no-underline product-link\"\n       :to=\"productLink\"\n       data-testid=\"productLink\"\n     >\n       <div\n-        class=\"product-image relative bg-cl-secondary\"\n+        class=\"product-cover bg-cl-secondary\"\n         :class=\"[{ sale: labelsActive && isOnSale }, { new: labelsActive && isNew }]\"\n       >\n         <product-image\n-          class=\"product-image__content\"\n+          class=\"product-cover__thumb\"\n           :image=\"thumbnailObj\"\n           :alt=\"product.name | htmlDecode\"\n+          :calc-ratio=\"false\"\n           data-testid=\"productImage\"\n         />\n       </div>\n@@ -26,24 +44,18 @@\n \n       <span\n         class=\"price-original mr5 lh30 cl-secondary\"\n-        v-if=\"product.special_price && parseFloat(product.originalPriceInclTax) > 0 && !onlyImage\"\n-      >\n-        {\{ product.originalPriceInclTax | price(storeView) }\}\n-      </span>\n+        v-if=\"product.special_price && parseFloat(product.original_price_incl_tax) > 0 && !onlyImage\"\n+      >{\{ product.original_price_incl_tax | price(storeView) }\}</span>\n \n       <span\n         class=\"price-special lh30 cl-accent weight-700\"\n         v-if=\"product.special_price && parseFloat(product.special_price) > 0 && !onlyImage\"\n-      >\n-        {\{ product.priceInclTax | price(storeView) }\}\n-      </span>\n+      >{\{ product.price_incl_tax | price(storeView) }\}</span>\n \n       <span\n         class=\"lh30 cl-secondary\"\n-        v-if=\"!product.special_price && parseFloat(product.priceInclTax) > 0 && !onlyImage\"\n-      >\n-        {\{ product.priceInclTax | price(storeView) }\}\n-      </span>\n+        v-if=\"!product.special_price && parseFloat(product.price_incl_tax) > 0 && !onlyImage\"\n+      >{\{ product.price_incl_tax | price(storeView) }\}</span>\n     </router-link>\n   </div>\n </template>\n@@ -53,11 +65,17 @@ import rootStore from \'@vue-storefront/core/store\'\n import { ProductTile } from \'@vue-storefront/core/modules/catalog/components/ProductTile.ts\'\n import config from \'config\'\n import ProductImage from \'./ProductImage\'\n+import AddToWishlist from \'theme/components/core/blocks/Wishlist/AddToWishlist\'\n+import AddToCompare from \'theme/components/core/blocks/Compare/AddToCompare\'\n+import { IsOnWishlist } from \'@vue-storefront/core/modules/wishlist/components/IsOnWishlist\'\n+import { IsOnCompare } from \'@vue-storefront/core/modules/compare/components/IsOnCompare\'\n \n export default {\n-  mixins: [ProductTile],\n+  mixins: [ProductTile, IsOnWishlist, IsOnCompare],\n   components: {\n-    ProductImage\n+    ProductImage,\n+    AddToWishlist,\n+    AddToCompare\n   },\n   props: {\n     labelsActive: {\n@@ -75,6 +93,9 @@ export default {\n         src: this.thumbnail,\n         loading: this.thumbnail\n       }\n+    },\n+    favoriteIcon () {\n+      return this.isOnWishlist ? \'favorite\' : \'favorite_border\'\n     }\n   },\n   methods: {\n@@ -84,21 +105,24 @@ export default {\n       }\n     },\n     visibilityChanged (isVisible, entry) {\n-      if (isVisible) {\n-        if (config.products.configurableChildrenStockPrefetchDynamic && rootStore.products.filterUnavailableVariants) {\n-          const skus = [this.product.sku]\n-          if (this.product.type_id === \'configurable\' && this.product.configurable_children && this.product.configurable_children.length > 0) {\n-            for (const confChild of this.product.configurable_children) {\n-              const cachedItem = rootStore.state.stock.cache[confChild.id]\n-              if (typeof cachedItem === \'undefined\' || cachedItem === null) {\n-                skus.push(confChild.sku)\n-              }\n-            }\n-            if (skus.length > 0) {\n-              rootStore.dispatch(\'stock/list\', { skus: skus }) // store it in the cache\n-            }\n+      if (\n+        isVisible &&\n+        config.products.configurableChildrenStockPrefetchDynamic &&\n+        config.products.filterUnavailableVariants &&\n+        this.product.type_id === \'configurable\' &&\n+        this.product.configurable_children &&\n+        this.product.configurable_children.length > 0\n+      ) {\n+        const skus = [this.product.sku]\n+        for (const confChild of this.product.configurable_children) {\n+          const cachedItem = rootStore.state.stock.cache[confChild.id]\n+          if (typeof cachedItem === \'undefined\' || cachedItem === null) {\n+            skus.push(confChild.sku)\n           }\n         }\n+        if (skus.length > 0) {\n+          rootStore.dispatch(\'stock/list\', { skus: skus }) // store it in the cache\n+        }\n       }\n     }\n   },\n@@ -121,9 +145,36 @@ $border-secondary: color(secondary, $colors-border);\n $color-white: color(white);\n \n .product {\n+  position: relative;\n   @media (max-width: 767px) {\n     padding-bottom: 10px;\n   }\n+  &__icons {\n+    position: absolute;\n+    top: 0;\n+    right: 0;\n+    display: flex;\n+    flex-direction: column;\n+    padding-right: 20px;\n+    padding-top: 10px;\n+  }\n+  &__icon {\n+    padding-top: 10px;\n+    opacity: 0;\n+    z-index: 2;\n+    transition: 0.3s opacity $motion-main;\n+    @media (max-width: 767px) {\n+      opacity: 1;\n+    }\n+    &--active {\n+      opacity: 1;\n+    }\n+  }\n+  &:hover {\n+    .product__icon {\n+      opacity: 1;\n+    }\n+  }\n }\n \n .price-original {\n@@ -145,45 +196,42 @@ $color-white: color(white);\n   font-size: 12px;\n }\n \n-.product-image{\n+.product-cover {\n   overflow: hidden;\n-  width:100%;\n-  height: 100%;\n   max-height: 300px;\n-\n-  &:hover{\n-    .product-image__content{\n-      opacity: 1;\n-      transform: scale(1.1);\n+  &__thumb {\n+    padding-bottom: calc(143.88% / (164.5 / 100));\n+    @media screen and (min-width: 768px) {\n+      padding-bottom: calc(250% / (276.5 / 100));\n     }\n-    &.sale::after,\n-    &.new::after{\n-      opacity: .8;\n+    @media screen and (min-width: 1024px) {\n+      padding-bottom: calc(200% / (276.5 / 100));\n     }\n+    opacity: 0.8;\n+    will-change: opacity, transform;\n+    transition: 0.3s opacity $motion-main, 0.3s transform $motion-main;\n   }\n-  &__content{\n \n-    padding-bottom: calc(300% / (257 / 100));\n-    mix-blend-mode: darken;\n-    opacity: .8;\n-    transform: scale(1);\n-    will-change: transform;\n-    transition: .3s opacity $motion-main, .3s transform $motion-main;\n-    @media (min-width: 768px) {\n-      padding-bottom: calc(208% / (168 / 100));\n-    }\n-    @media (min-width: 1200px) {\n-      padding-bottom: calc(300% / (276 / 100));\n+  @media screen and (min-width: 768px) {\n+    &:hover {\n+      .product-cover__thumb {\n+        opacity: 1;\n+        transform: scale(1.1);\n+      }\n+      &.sale::after,\n+      &.new::after {\n+        opacity: 0.8;\n+      }\n     }\n   }\n \n-  &.sale{\n+  &.sale {\n     &::after {\n       @extend %label;\n       content: \'Sale\';\n     }\n   }\n-  &.new{\n+  &.new {\n     &::after {\n       @extend %label;\n       content: \'New\';\n',
   {inputFormat: 'diff', showFiles: false, matching: 'none', outputFormat: 'line-by-line'}
 );
 document.getElementById('d-prod-tile').innerHTML = dProdTile;
diff --git a/src/themes/default-amp/components/core/ProductTile.vue b/src/themes/default-amp/components/core/ProductTile.vue
index 97ed4e9b7..7e90f34cb 100755
--- a/src/themes/default-amp/components/core/ProductTile.vue
+++ b/src/themes/default-amp/components/core/ProductTile.vue
@@ -28,21 +28,21 @@
         class="price-original mr5 lh30 cl-secondary"
         v-if="product.special_price && parseFloat(product.originalPriceInclTax) > 0 && !onlyImage"
       >
-        {{ product.originalPriceInclTax | price }}
+        {{ product.originalPriceInclTax | price(storeView) }}
       </span>
 
       <span
         class="price-special lh30 cl-accent weight-700"
         v-if="product.special_price && parseFloat(product.special_price) > 0 && !onlyImage"
       >
-        {{ product.priceInclTax | price }}
+        {{ product.priceInclTax | price(storeView) }}
       </span>
 
       <span
         class="lh30 cl-secondary"
         v-if="!product.special_price && parseFloat(product.priceInclTax) > 0 && !onlyImage"
       >
-        {{ product.priceInclTax | price }}
+        {{ product.priceInclTax | price(storeView) }}
       </span>
     </router-link>
   </div>
@@ -52,6 +52,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],
@@ -65,6 +66,11 @@ export default {
       default: false
     }
   },
+  computed: {
+    storeView () {
+      return currentStoreView()
+    }
+  },
   methods: {
     onProductPriceUpdate (product) {
       if (product.sku === this.product.sku) {
diff --git a/src/themes/default-amp/pages/Product.vue b/src/themes/default-amp/pages/Product.vue
index 410ac3121..43d8303e9 100755
--- a/src/themes/default-amp/pages/Product.vue
+++ b/src/themes/default-amp/pages/Product.vue
@@ -46,17 +46,17 @@
                   v-if="product.special_price && product.priceInclTax && product.originalPriceInclTax"
                 >
                   <span class="h2 cl-mine-shaft weight-700">
-                    {{ product.priceInclTax * product.qty | price }}
+                    {{ product.priceInclTax * product.qty | price(storeView) }}
                   </span>&nbsp;
                   <span class="price-original h3">
-                    {{ product.originalPriceInclTax * product.qty | price }}
+                    {{ product.originalPriceInclTax * product.qty | price(storeView) }}
                   </span>
                 </div>
                 <div
                   class="h2 cl-mine-shaft weight-700"
                   v-if="!product.special_price && product.priceInclTax"
                 >
-                  {{ product.priceInclTax * product.qty | price }}
+                  {{ product.priceInclTax * product.qty | price(storeView) }}
                 </div>
               </div>
               <div
@@ -138,6 +138,7 @@ 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 focusClean from 'theme/components/theme/directives/focusClean'
+import { currentStoreView } from '@vue-storefront/core/lib/multistore'
 
 export default {
   components: {
@@ -154,6 +155,11 @@ export default {
     }
   },
   directives: { focusClean },
+  computed: {
+    storeView () {
+      return currentStoreView()
+    }
+  },
   methods: {
     showDetails (event) {
       this.detailsOpen = true
diff --git a/src/themes/default/components/core/ProductLinks.vue b/src/themes/default/components/core/ProductLinks.vue
index 9b695b55e..2c09e0f15 100644
--- a/src/themes/default/components/core/ProductLinks.vue
+++ b/src/themes/default/components/core/ProductLinks.vue
@@ -8,11 +8,11 @@
           </p>
           <div class="col-xs-4 cl-bg-tertiary">
             <div v-if="productLink.product.special_price && productLink.product.priceInclTax && productLink.product.originalPriceInclTax">
-              <span class="price-special">{{ productLink.product.priceInclTax | price }}</span>&nbsp;
-              <span class="price-original">{{ productLink.product.originalPriceInclTax | price }}</span>
+              <span class="price-special">{{ productLink.product.priceInclTax | price(storeView) }}</span>&nbsp;
+              <span class="price-original">{{ productLink.product.originalPriceInclTax | price(storeView) }}</span>
             </div>
             <div v-if="!productLink.product.special_price && productLink.product.priceInclTax">
-              {{ productLink.product.priceInclTax | price }}
+              {{ productLink.product.priceInclTax | price(storeView) }}
             </div>
           </div>
         </div>
@@ -35,12 +35,18 @@
 </template>
 
 <script>
+import { currentStoreView } from '@vue-storefront/core/lib/multistore'
 export default {
   props: {
     products: {
       type: Array,
       required: true
     }
+  },
+  computed: {
+    storeView () {
+      return currentStoreView()
+    }
   }
 }
 </script>
diff --git a/src/themes/default/components/core/ProductTile.vue b/src/themes/default/components/core/ProductTile.vue
index 8d2aba3aa..0a941c6e9 100644
--- a/src/themes/default/components/core/ProductTile.vue
+++ b/src/themes/default/components/core/ProductTile.vue
@@ -28,21 +28,21 @@
         class="price-original mr5 lh30 cl-secondary"
         v-if="product.special_price && parseFloat(product.originalPriceInclTax) > 0 && !onlyImage"
       >
-        {{ product.originalPriceInclTax | price }}
+        {{ product.originalPriceInclTax | price(storeView) }}
       </span>
 
       <span
         class="price-special lh30 cl-accent weight-700"
         v-if="product.special_price && parseFloat(product.special_price) > 0 && !onlyImage"
       >
-        {{ product.priceInclTax | price }}
+        {{ product.priceInclTax | price(storeView) }}
       </span>
 
       <span
         class="lh30 cl-secondary"
         v-if="!product.special_price && parseFloat(product.priceInclTax) > 0 && !onlyImage"
       >
-        {{ product.priceInclTax | price }}
+        {{ product.priceInclTax | price(storeView) }}
       </span>
     </router-link>
   </div>
@@ -53,6 +53,7 @@ import rootStore from '@vue-storefront/core/store'
 import { ProductTile } from '@vue-storefront/core/modules/catalog/components/ProductTile.ts'
 import config from 'config'
 import ProductImage from './ProductImage'
+import { currentStoreView } from '@vue-storefront/core/lib/multistore'
 
 export default {
   mixins: [ProductTile],
@@ -75,6 +76,9 @@ export default {
         src: this.thumbnail,
         loading: this.thumbnail
       }
+    },
+    storeView () {
+      return currentStoreView()
     }
   },
   methods: {
diff --git a/src/themes/default/components/core/blocks/Checkout/CartSummary.vue b/src/themes/default/components/core/blocks/Checkout/CartSummary.vue
index 2cac03555..1fc415815 100644
--- a/src/themes/default/components/core/blocks/Checkout/CartSummary.vue
+++ b/src/themes/default/components/core/blocks/Checkout/CartSummary.vue
@@ -11,7 +11,7 @@
             {{ segment.title }}
           </div>
           <div v-if="segment.value != null" class="col-xs align-right cl-accent h4">
-            {{ segment.value | price }}
+            {{ segment.value | price(storeView) }}
           </div>
         </div>
 
@@ -20,7 +20,7 @@
             {{ segment.title }}
           </div>
           <div class="col-xs align-right">
-            {{ segment.value | price }}
+            {{ segment.value | price(storeView) }}
           </div>
         </div>
       </div>
@@ -53,13 +53,19 @@
 
 <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
   },
-  mixins: [CartSummary]
+  mixins: [CartSummary],
+  computed: {
+    storeView () {
+      return currentStoreView()
+    }
+  }
 }
 </script>
 
diff --git a/src/themes/default/components/core/blocks/Checkout/OrderConfirmation.vue b/src/themes/default/components/core/blocks/Checkout/OrderConfirmation.vue
index a85b94395..5d493aef3 100644
--- a/src/themes/default/components/core/blocks/Checkout/OrderConfirmation.vue
+++ b/src/themes/default/components/core/blocks/Checkout/OrderConfirmation.vue
@@ -34,13 +34,13 @@
                 </span>
               </td>
               <td class="fs-medium lh25" :data-th="$t('Price')">
-                {{ product.priceInclTax | price }}
+                {{ product.priceInclTax | price(storeView) }}
               </td>
               <td class="fs-medium lh25 align-right" :data-th="$t('Qty')">
                 {{ product.qty }}
               </td>
               <td class="fs-medium lh25" :data-th="$t('Subtotal')">
-                {{ product.priceInclTax * product.qty | price }}
+                {{ product.priceInclTax * product.qty | price(storeView) }}
               </td>
             </tr>
           </tbody>
@@ -65,6 +65,7 @@ import { ConfirmOrders } from '@vue-storefront/core/modules/offline-order/compon
 import { CancelOrders } from '@vue-storefront/core/modules/offline-order/components/CancelOrders'
 import Modal from 'theme/components/core/Modal'
 import ButtonFull from 'theme/components/theme/ButtonFull.vue'
+import { currentStoreView } from '@vue-storefront/core/lib/multistore'
 
 export default {
   props: {
@@ -79,6 +80,11 @@ export default {
       this.$bus.$emit('modal-show', 'modal-order-confirmation')
     })
   },
+  computed: {
+    storeView () {
+      return currentStoreView()
+    }
+  },
   methods: {
     confirmOrders () {
       ConfirmOrders.methods.confirmOrders.call(this)
diff --git a/src/themes/default/components/core/blocks/Checkout/Product.vue b/src/themes/default/components/core/blocks/Checkout/Product.vue
index 4bdbdd203..25da2dd03 100644
--- a/src/themes/default/components/core/blocks/Checkout/Product.vue
+++ b/src/themes/default/components/core/blocks/Checkout/Product.vue
@@ -40,14 +40,14 @@
         </div>
         <div class="col-xs-12 col-md-3 serif">
           <div v-if="isOnline && product.totals">
-            <span class="h4 cl-error" v-if="product.totals.discount_amount">{{ product.totals.row_total - product.totals.discount_amount + product.totals.tax_amount | price }} </span>
-            <span class="price-original h5" 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>
+            <span class="h4 cl-error" 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 h5" 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-else>
-            <span class="h4 cl-error" v-if="product.special_price">{{ product.priceInclTax * product.qty | price }} </span>
-            <span class="price-original h5" 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>
+            <span class="h4 cl-error" v-if="product.special_price">{{ product.priceInclTax * product.qty | price(storeView) }} </span>
+            <span class="price-original h5" v-if="product.special_price">{{ product.originalPriceInclTax * product.qty | price(storeView) }}</span>
+            <span v-if="!product.special_price" class="h4">{{ product.priceInclTax * product.qty | price(storeView) }}</span>
           </div>
         </div>
       </div>
@@ -59,6 +59,7 @@
 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 {
   computed: {
@@ -70,6 +71,9 @@ export default {
         loading: this.thumbnail,
         src: this.thumbnail
       }
+    },
+    storeView () {
+      return currentStoreView()
     }
   },
   mixins: [Product],
diff --git a/src/themes/default/components/core/blocks/Checkout/Shipping.vue b/src/themes/default/components/core/blocks/Checkout/Shipping.vue
index 8d923e9f8..23259b3d0 100644
--- a/src/themes/default/components/core/blocks/Checkout/Shipping.vue
+++ b/src/themes/default/components/core/blocks/Checkout/Shipping.vue
@@ -178,7 +178,7 @@
             {{ $t('Shipping method') }}
           </h4>
           <div v-for="(method, index) in shippingMethods" :key="index" class="col-md-6">
-            <label class="radioStyled"> {{ method.method_title }} | {{ method.amount | price }}
+            <label class="radioStyled"> {{ method.method_title }} | {{ method.amount | price(storeView) }}
               <input
                 type="radio"
                 :value="method.method_code"
@@ -239,7 +239,7 @@
               </h4>
             </div>
             <div class="col-md-6 mb15">
-              <label class="radioStyled"> {{ getShippingMethod().method_title }} | {{ getShippingMethod().amount | price }}
+              <label class="radioStyled"> {{ getShippingMethod().method_title }} | {{ getShippingMethod().amount | price(storeView) }}
                 <input type="radio" value="" checked disabled name="chosen-shipping-method">
                 <span class="checkmark" />
               </label>
@@ -255,6 +255,7 @@
 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 BaseInput from 'theme/components/core/blocks/Form/BaseInput'
@@ -279,6 +280,9 @@ export default {
           label: item.name
         }
       })
+    },
+    storeView () {
+      return currentStoreView()
     }
   },
   validations: {
diff --git a/src/themes/default/components/core/blocks/Microcart/Microcart.vue b/src/themes/default/components/core/blocks/Microcart/Microcart.vue
index e3f0f5a87..4c54515b4 100644
--- a/src/themes/default/components/core/blocks/Microcart/Microcart.vue
+++ b/src/themes/default/components/core/blocks/Microcart/Microcart.vue
@@ -62,7 +62,7 @@
           </button>
         </div>
         <div v-if="segment.value != null" class="col-xs align-right">
-          {{ segment.value | price }}
+          {{ segment.value | price(storeView) }}
         </div>
       </div>
       <div class="row py20">
@@ -91,7 +91,7 @@
           {{ segment.title }}
         </div>
         <div class="col-xs align-right h2 total-price-value">
-          {{ segment.value | price }}
+          {{ segment.value | price(storeView) }}
         </div>
       </div>
     </div>
@@ -123,6 +123,7 @@
 <script>
 import i18n from '@vue-storefront/i18n'
 import { isModuleRegistered } from '@vue-storefront/core/lib/module'
+import { currentStoreView } from '@vue-storefront/core/lib/multistore'
 
 import Microcart from '@vue-storefront/core/compatibility/components/blocks/Microcart/Microcart'
 import VueOfflineMixin from 'vue-offline/mixin'
@@ -164,6 +165,11 @@ export default {
       default: () => false
     }
   },
+  computed: {
+    storeView () {
+      return currentStoreView()
+    }
+  },
   mounted () {
     this.$nextTick(() => {
       this.componentLoaded = true
diff --git a/src/themes/default/components/core/blocks/Microcart/Product.vue b/src/themes/default/components/core/blocks/Microcart/Product.vue
index cdd3def2b..d058e4222 100644
--- a/src/themes/default/components/core/blocks/Microcart/Product.vue
+++ b/src/themes/default/components/core/blocks/Microcart/Product.vue
@@ -56,29 +56,29 @@
     <div class="flex py15 mr10 align-right start-xs between-sm actions">
       <div class="prices" v-if="!displayItemDiscounts || !isOnline">
         <span class="h4 serif cl-error price-special" v-if="product.special_price">
-          {{ product.priceInclTax * product.qty | price }}&nbsp;
+          {{ product.priceInclTax * product.qty | price(storeView) }}&nbsp;
         </span>
         <span class="h6 serif price-original" v-if="product.special_price">
-          {{ product.originalPriceInclTax * product.qty | price }}
+          {{ product.originalPriceInclTax * product.qty | price(storeView) }}
         </span>
         <span class="h4 serif price-regular" v-else data-testid="productPrice">
-          {{ (product.originalPriceInclTax ? product.originalPriceInclTax : product.priceInclTax) * product.qty | price }}
+          {{ (product.originalPriceInclTax ? product.originalPriceInclTax : product.priceInclTax) * product.qty | price(storeView) }}
         </span>
       </div>
       <div class="prices" v-else-if="isOnline && product.totals">
         <span class="h4 serif cl-error price-special" v-if="product.totals.discount_amount">
-          {{ product.totals.row_total - product.totals.discount_amount + product.totals.tax_amount | price }}&nbsp;
+          {{ product.totals.row_total - product.totals.discount_amount + product.totals.tax_amount | price(storeView) }}&nbsp;
         </span>
         <span class="h6 serif price-original" v-if="product.totals.discount_amount">
-          {{ product.totals.row_total_incl_tax | price }}
+          {{ product.totals.row_total_incl_tax | price(storeView) }}
         </span>
         <span class="h4 serif price-regular" v-if="!product.totals.discount_amount">
-          {{ product.totals.row_total_incl_tax | price }}
+          {{ product.totals.row_total_incl_tax | price(storeView) }}
         </span>
       </div>
       <div class="prices" v-else>
         <span class="h4 serif price-regular">
-          {{ product.regular_price * product.qty | price }}
+          {{ product.regular_price * product.qty | price(storeView) }}
         </span>
       </div>
       <div class="links">
@@ -98,6 +98,7 @@ import ProductImage from 'theme/components/core/ProductImage'
 import RemoveButton from './RemoveButton'
 import BaseInputNumber from 'theme/components/core/blocks/Form/BaseInputNumber'
 import { onlineHelper } from '@vue-storefront/core/helpers'
+import { currentStoreView } from '@vue-storefront/core/lib/multistore'
 
 export default {
   components: {
@@ -115,6 +116,9 @@ export default {
         loading: this.thumbnail,
         src: this.thumbnail
       }
+    },
+    storeView () {
+      return currentStoreView()
     }
   },
   data () {
diff --git a/src/themes/default/components/core/blocks/MyAccount/MyOrder.vue b/src/themes/default/components/core/blocks/MyAccount/MyOrder.vue
index 3b7793bd8..17c7b3f16 100644
--- a/src/themes/default/components/core/blocks/MyAccount/MyOrder.vue
+++ b/src/themes/default/components/core/blocks/MyAccount/MyOrder.vue
@@ -55,13 +55,13 @@
                 {{ item.sku }}
               </td>
               <td class="fs-medium lh25" :data-th="$t('Price')">
-                {{ item.price_incl_tax | price }}
+                {{ item.price_incl_tax | price(storeView) }}
               </td>
               <td class="fs-medium lh25 align-right" :data-th="$t('Qty')">
                 {{ item.qty_ordered }}
               </td>
               <td class="fs-medium lh25" :data-th="$t('Subtotal')">
-                {{ item.row_total_incl_tax | price }}
+                {{ item.row_total_incl_tax | price(storeView) }}
               </td>
             </tr>
           </tbody>
@@ -70,31 +70,31 @@
               <td colspan="4" class="align-right">
                 {{ $t('Subtotal') }}
               </td>
-              <td>{{ order.subtotal | price }}</td>
+              <td>{{ order.subtotal | price(storeView) }}</td>
             </tr>
             <tr>
               <td colspan="4" class="align-right">
                 {{ $t('Shipping') }}
               </td>
-              <td>{{ order.shipping_amount | price }}</td>
+              <td>{{ order.shipping_amount | price(storeView) }}</td>
             </tr>
             <tr>
               <td colspan="4" class="align-right">
                 {{ $t('Tax') }}
               </td>
-              <td>{{ order.tax_amount + order.discount_tax_compensation_amount | price }}</td>
+              <td>{{ order.tax_amount + order.discount_tax_compensation_amount | price(storeView) }}</td>
             </tr>
             <tr v-if="order.discount_amount">
               <td colspan="4" class="align-right">
                 {{ $t('Discount') }}
               </td>
-              <td>{{ order.discount_amount | price }}</td>
+              <td>{{ order.discount_amount | price(storeView) }}</td>
             </tr>
             <tr>
               <td colspan="4" class="align-right">
                 {{ $t('Grand total') }}
               </td>
-              <td>{{ order.grand_total | price }}</td>
+              <td>{{ order.grand_total | price(storeView) }}</td>
             </tr>
           </tfoot>
         </table>
@@ -139,11 +139,17 @@
 <script>
 import MyOrder from '@vue-storefront/core/compatibility/components/blocks/MyAccount/MyOrder'
 import ReturnIcon from 'theme/components/core/blocks/Header/ReturnIcon'
+import { currentStoreView } from '@vue-storefront/core/lib/multistore'
 
 export default {
   mixins: [MyOrder],
   components: {
     ReturnIcon
+  },
+  computed: {
+    storeView () {
+      return currentStoreView()
+    }
   }
 }
 </script>
diff --git a/src/themes/default/components/core/blocks/MyAccount/MyOrders.vue b/src/themes/default/components/core/blocks/MyAccount/MyOrders.vue
index e21b78928..a858d64a3 100644
--- a/src/themes/default/components/core/blocks/MyAccount/MyOrders.vue
+++ b/src/themes/default/components/core/blocks/MyAccount/MyOrders.vue
@@ -49,7 +49,7 @@
                 {{ order.customer_firstname }} {{ order.customer_lastname }}
               </td>
               <td class="fs-medium lh25 hide-on-xs">
-                {{ order.grand_total | price }}
+                {{ order.grand_total | price(storeView) }}
               </td>
               <td class="fs-medium lh25 hide-on-xs">
                 {{ $t('Purchase') }}
@@ -81,9 +81,15 @@
 
 <script>
 import UserOrder from 'src/modules/order-history/components/UserOrders'
+import { currentStoreView } from '@vue-storefront/core/lib/multistore'
 
 export default {
-  mixins: [UserOrder]
+  mixins: [UserOrder],
+  computed: {
+    storeView () {
+      return currentStoreView()
+    }
+  }
 }
 </script>
 
diff --git a/src/themes/default/components/core/blocks/Wishlist/Product.vue b/src/themes/default/components/core/blocks/Wishlist/Product.vue
index 11fe9f325..2d1e7c6c5 100644
--- a/src/themes/default/components/core/blocks/Wishlist/Product.vue
+++ b/src/themes/default/components/core/blocks/Wishlist/Product.vue
@@ -27,11 +27,11 @@
     </div>
     <div class="col-xs flex py15 align-right">
       <div>
-        <span class="price-special" v-if="product.special_price">{{ product.priceInclTax | price }}</span>&nbsp;
-        <span class="price-original" v-if="product.special_price">{{ product.originalPriceInclTax | price }}</span>
+        <span class="price-special" v-if="product.special_price">{{ product.priceInclTax | price(storeView) }}</span>&nbsp;
+        <span class="price-original" v-if="product.special_price">{{ product.originalPriceInclTax | price(storeView) }}</span>
 
         <span v-if="!product.special_price">
-          {{ product.priceInclTax | price }}
+          {{ product.priceInclTax | price(storeView) }}
         </span>
       </div>
       <div>
@@ -47,6 +47,7 @@
 import Product from '@vue-storefront/core/compatibility/components/blocks/Wishlist/Product'
 import RemoveButton from './RemoveButton'
 import ProductImage from 'theme/components/core/ProductImage'
+import { currentStoreView } from '@vue-storefront/core/lib/multistore'
 
 export default {
   components: {
@@ -60,6 +61,9 @@ export default {
         loading: this.thumbnail,
         src: this.thumbnail
       }
+    },
+    storeView () {
+      return currentStoreView()
     }
   }
 }
diff --git a/src/themes/default/pages/Product.vue b/src/themes/default/pages/Product.vue
index d526e8648..c984b9056 100644
--- a/src/themes/default/pages/Product.vue
+++ b/src/themes/default/pages/Product.vue
@@ -38,17 +38,17 @@
                   v-if="product.special_price && product.priceInclTax && product.originalPriceInclTax"
                 >
                   <span class="h2 cl-mine-shaft weight-700">
-                    {{ product.priceInclTax * product.qty | price }}
+                    {{ product.priceInclTax * product.qty | price(storeView) }}
                   </span>&nbsp;
                   <span class="price-original h3">
-                    {{ product.originalPriceInclTax * product.qty | price }}
+                    {{ product.originalPriceInclTax * product.qty | price(storeView) }}
                   </span>
                 </div>
                 <div
                   class="h2 cl-mine-shaft weight-700"
                   v-if="!product.special_price && product.priceInclTax"
                 >
-                  {{ product.qty > 0 ? product.priceInclTax * product.qty : product.priceInclTax | price }}
+                  {{ product.qty > 0 ? product.priceInclTax * product.qty : product.priceInclTax | price(storeView) }}
                 </div>
               </div>
               <div
@@ -255,6 +255,7 @@ import focusClean from 'theme/components/theme/directives/focusClean'
 import WebShare from '@vue-storefront/core/modules/social-share/components/WebShare'
 import BaseInputNumber from 'theme/components/core/blocks/Form/BaseInputNumber'
 import SizeGuide from 'theme/components/core/blocks/Product/SizeGuide'
+import { currentStoreView } from '@vue-storefront/core/lib/multistore'
 
 export default {
   components: {
@@ -288,6 +289,9 @@ export default {
       return {
         availability: (this.product.stock.is_in_stock) ? 'InStock' : 'OutOfStock'
       }
+    },
+    storeView () {
+      return currentStoreView()
     }
   },
   methods: {

From 1ecffb580e84d538e01b4cdb4d7cb06bc38e01e2 Mon Sep 17 00:00:00 2001
From: tkostuch <tkostuch@divante.pl>
Date: Fri, 24 Jan 2020 14:10:26 +0100
Subject: [PATCH 20/37] update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a189992cc..e04b77fd8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix low-quality images styles - @przspa (#3906)
 - Fix page-not-found redirect in dispatcher - @gibkigonzo (#3956)
 - Fix hiding overlay for newsletter modal - @gibkigonzo (#3970)
+- Fix problem with storeView as dependency in filters - @gibkigonzo (#3968)
 
 
 ## [1.10.5] - 28.11.2019

From ce327f93a0d1b921faea39a42148e0b5f48021da Mon Sep 17 00:00:00 2001
From: Luke Romanowicz <lromanowicz1@gmail.com>
Date: Fri, 31 Jan 2020 15:53:29 +0100
Subject: [PATCH 21/37] fix radio button v-model

---
 .../default/components/core/blocks/Form/BaseRadiobutton.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/themes/default/components/core/blocks/Form/BaseRadiobutton.vue b/src/themes/default/components/core/blocks/Form/BaseRadiobutton.vue
index f019cc37f..590c27036 100644
--- a/src/themes/default/components/core/blocks/Form/BaseRadiobutton.vue
+++ b/src/themes/default/components/core/blocks/Form/BaseRadiobutton.vue
@@ -9,7 +9,7 @@
         @keyup.enter="$emit('click')"
         @click="$emit('click')"
         @blur="$emit('blur')"
-        @change="$emit('change')"
+        @change="$emit('change', $event.target.checked)"
         :disabled="disabled"
       >
       <label
@@ -31,6 +31,10 @@ export default {
   components: {
     ValidationMessages
   },
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
   props: {
     id: {
       type: String,

From 510b1384f65dc115c8b5c1489c6c45c2e8a8dd4e Mon Sep 17 00:00:00 2001
From: Luke Romanowicz <lromanowicz1@gmail.com>
Date: Fri, 31 Jan 2020 16:02:28 +0100
Subject: [PATCH 22/37] changelog update

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e04b77fd8..8093c12b6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,7 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix page-not-found redirect in dispatcher - @gibkigonzo (#3956)
 - Fix hiding overlay for newsletter modal - @gibkigonzo (#3970)
 - Fix problem with storeView as dependency in filters - @gibkigonzo (#3968)
-
+- Fix v-model not working in BaseRadioButton - @lukeromanowicz (#4035)
 
 ## [1.10.5] - 28.11.2019
 

From 90009583f19bf3e4cc78a2fd982ccc90293f0629 Mon Sep 17 00:00:00 2001
From: tkostuch <tkostuch@divante.pl>
Date: Fri, 7 Feb 2020 10:50:55 +0100
Subject: [PATCH 23/37] 4062 update clear/cart mehtod

---
 core/modules/cart/store/actions.ts             | 18 ++++++++++++++----
 .../modules/checkout/store/checkout/actions.ts |  2 +-
 core/modules/user/store/actions.ts             |  2 +-
 .../components/InstantCheckout.vue             |  2 +-
 .../core/blocks/Microcart/Microcart.vue        |  3 +--
 5 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/core/modules/cart/store/actions.ts b/core/modules/cart/store/actions.ts
index fc48309ce..1faf8d498 100644
--- a/core/modules/cart/store/actions.ts
+++ b/core/modules/cart/store/actions.ts
@@ -135,11 +135,21 @@ const actions: ActionTree<CartState, RootState> = {
   async disconnect ({ commit }) {
     commit(types.CART_LOAD_CART_SERVER_TOKEN, null)
   },
-  /** Clear the cart content */
-  async clear ({ commit, dispatch, getters }) {
+  /**
+   * It will always clear cart items on frontend.
+   * Options:
+   * sync - if you want to sync it with backend.
+   * disconnect - if you want to clear cart token.
+   */
+  async clear ({ commit, dispatch }, { disconnect = true, sync = true } = {}) {
     await commit(types.CART_LOAD_CART, [])
-    await commit(types.CART_LOAD_CART_SERVER_TOKEN, null)
-    await commit(types.CART_SET_ITEMS_HASH, null)
+    if (sync) {
+      await dispatch('sync', { forceClientState: true })
+    }
+    if (disconnect) {
+      await commit(types.CART_SET_ITEMS_HASH, null)
+      await dispatch('disconnect')
+    }
   },
   /** Refresh the payment methods with the backend */
   async syncPaymentMethods ({ getters, rootGetters, dispatch }, { forceServerSync = false }) {
diff --git a/core/modules/checkout/store/checkout/actions.ts b/core/modules/checkout/store/checkout/actions.ts
index e47b60b3f..14e893371 100644
--- a/core/modules/checkout/store/checkout/actions.ts
+++ b/core/modules/checkout/store/checkout/actions.ts
@@ -16,7 +16,7 @@ const actions: ActionTree<CheckoutState, RootState> = {
       const result = await dispatch('order/placeOrder', order, {root: true})
       if (!result.resultCode || result.resultCode === 200) {
         Vue.prototype.$db.usersCollection.setItem('last-cart-bypass-ts', new Date().getTime())
-        await dispatch('cart/clear', null, {root: true})
+        await dispatch('cart/clear', { sync: false }, {root: true})
         if (state.personalDetails.createAccount) {
           commit(types.CHECKOUT_DROP_PASSWORD)
         }
diff --git a/core/modules/user/store/actions.ts b/core/modules/user/store/actions.ts
index 00f53882d..8b7c2ab50 100644
--- a/core/modules/user/store/actions.ts
+++ b/core/modules/user/store/actions.ts
@@ -297,7 +297,7 @@ const actions: ActionTree<UserState, RootState> = {
     context.dispatch('cart/disconnect', {}, { root: true })
       .then(() => { context.dispatch('clearCurrentUser') })
       .then(() => { Vue.prototype.$bus.$emit('user-after-logout') })
-      .then(() => { context.dispatch('cart/clear', null, { root: true }) })
+      .then(() => { context.dispatch('cart/clear', { sync: false }, { root: true }) })
     if (!silent) {
       rootStore.dispatch('notification/spawnNotification', {
         type: 'success',
diff --git a/src/modules/instant-checkout/components/InstantCheckout.vue b/src/modules/instant-checkout/components/InstantCheckout.vue
index 77dad367a..92fc6f2a4 100644
--- a/src/modules/instant-checkout/components/InstantCheckout.vue
+++ b/src/modules/instant-checkout/components/InstantCheckout.vue
@@ -143,7 +143,7 @@ export default {
               this.$store.dispatch('checkout/setThankYouPage', true)
               this.$store.commit('ui/setMicrocart', false)
               this.$router.push(this.localizedRoute('/checkout'))
-              this.$store.dispatch('cart/clear', null, {root: true})
+              this.$store.dispatch('cart/clear', { sync: false }, {root: true})
             }
           })
         })
diff --git a/src/themes/default/components/core/blocks/Microcart/Microcart.vue b/src/themes/default/components/core/blocks/Microcart/Microcart.vue
index 4c54515b4..dacf8b73a 100644
--- a/src/themes/default/components/core/blocks/Microcart/Microcart.vue
+++ b/src/themes/default/components/core/blocks/Microcart/Microcart.vue
@@ -210,8 +210,7 @@ export default {
         action1: { label: i18n.t('Cancel'), action: 'close' },
         action2: { label: i18n.t('OK'),
           action: async () => {
-            await this.$store.dispatch('cart/clear') // just clear the items without sync
-            await this.$store.dispatch('cart/sync', { forceClientState: true })
+            await this.$store.dispatch('cart/clear', { disconnect: false })
           }
         },
         hasNoTimeout: true

From 49159e5b7e41703cb0b8fada8fca78770af0631d Mon Sep 17 00:00:00 2001
From: tkostuch <tkostuch@divante.pl>
Date: Fri, 7 Feb 2020 11:01:46 +0100
Subject: [PATCH 24/37] 4062 add comments

---
 core/modules/checkout/store/checkout/actions.ts                 | 1 +
 core/modules/user/store/actions.ts                              | 2 ++
 src/modules/instant-checkout/components/InstantCheckout.vue     | 1 +
 .../default/components/core/blocks/Microcart/Microcart.vue      | 2 ++
 4 files changed, 6 insertions(+)

diff --git a/core/modules/checkout/store/checkout/actions.ts b/core/modules/checkout/store/checkout/actions.ts
index 14e893371..bf44bbec8 100644
--- a/core/modules/checkout/store/checkout/actions.ts
+++ b/core/modules/checkout/store/checkout/actions.ts
@@ -16,6 +16,7 @@ const actions: ActionTree<CheckoutState, RootState> = {
       const result = await dispatch('order/placeOrder', order, {root: true})
       if (!result.resultCode || result.resultCode === 200) {
         Vue.prototype.$db.usersCollection.setItem('last-cart-bypass-ts', new Date().getTime())
+        // clear cart without sync, because after order cart will be already cleared on backend
         await dispatch('cart/clear', { sync: false }, {root: true})
         if (state.personalDetails.createAccount) {
           commit(types.CHECKOUT_DROP_PASSWORD)
diff --git a/core/modules/user/store/actions.ts b/core/modules/user/store/actions.ts
index 8b7c2ab50..15852ea3c 100644
--- a/core/modules/user/store/actions.ts
+++ b/core/modules/user/store/actions.ts
@@ -297,6 +297,8 @@ const actions: ActionTree<UserState, RootState> = {
     context.dispatch('cart/disconnect', {}, { root: true })
       .then(() => { context.dispatch('clearCurrentUser') })
       .then(() => { Vue.prototype.$bus.$emit('user-after-logout') })
+      // clear cart without sync, because after logout we don't want to clear cart on backend
+      // user should have items when he comes back
       .then(() => { context.dispatch('cart/clear', { sync: false }, { root: true }) })
     if (!silent) {
       rootStore.dispatch('notification/spawnNotification', {
diff --git a/src/modules/instant-checkout/components/InstantCheckout.vue b/src/modules/instant-checkout/components/InstantCheckout.vue
index 92fc6f2a4..9365841c4 100644
--- a/src/modules/instant-checkout/components/InstantCheckout.vue
+++ b/src/modules/instant-checkout/components/InstantCheckout.vue
@@ -143,6 +143,7 @@ export default {
               this.$store.dispatch('checkout/setThankYouPage', true)
               this.$store.commit('ui/setMicrocart', false)
               this.$router.push(this.localizedRoute('/checkout'))
+              // clear cart without sync, because after order cart will be already cleared on backend
               this.$store.dispatch('cart/clear', { sync: false }, {root: true})
             }
           })
diff --git a/src/themes/default/components/core/blocks/Microcart/Microcart.vue b/src/themes/default/components/core/blocks/Microcart/Microcart.vue
index dacf8b73a..08fb6a3cb 100644
--- a/src/themes/default/components/core/blocks/Microcart/Microcart.vue
+++ b/src/themes/default/components/core/blocks/Microcart/Microcart.vue
@@ -210,6 +210,8 @@ export default {
         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 })
           }
         },

From 09e11e588aaf6b1e2157a5e5d4ad50ac38d39662 Mon Sep 17 00:00:00 2001
From: tkostuch <tkostuch@divante.pl>
Date: Fri, 7 Feb 2020 11:04:02 +0100
Subject: [PATCH 25/37] update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8093c12b6..f10290ac0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix hiding overlay for newsletter modal - @gibkigonzo (#3970)
 - Fix problem with storeView as dependency in filters - @gibkigonzo (#3968)
 - Fix v-model not working in BaseRadioButton - @lukeromanowicz (#4035)
+- add disconnect and sync options for clear/cart - @gibkigonzo (#4062)
 
 ## [1.10.5] - 28.11.2019
 

From d5fb285d9a65f2201823ec66dced52880562d318 Mon Sep 17 00:00:00 2001
From: tkostuch <tkostuch@divante.pl>
Date: Fri, 7 Feb 2020 11:31:50 +0100
Subject: [PATCH 26/37] 4062 update tests

---
 .../cart/test/unit/store/actions.spec.ts      | 39 ++++++++++++++++++-
 1 file changed, 38 insertions(+), 1 deletion(-)

diff --git a/core/modules/cart/test/unit/store/actions.spec.ts b/core/modules/cart/test/unit/store/actions.spec.ts
index d122aaa93..d188b4c06 100644
--- a/core/modules/cart/test/unit/store/actions.spec.ts
+++ b/core/modules/cart/test/unit/store/actions.spec.ts
@@ -74,6 +74,7 @@ describe('Cart actions', () => {
   it('clear deletes all cart products and token', async () => {
     const contextMock = {
       commit: jest.fn(),
+      dispatch: jest.fn(),
       getters: { isCartSyncEnabled: false }
     };
     const wrapper = (actions: any) => actions.clear(contextMock);
@@ -82,7 +83,43 @@ describe('Cart actions', () => {
 
     await wrapper(cartActions);
 
-    expect(contextMock.commit).toBeCalledWith(types.CART_LOAD_CART, []);
+    expect(contextMock.commit).toHaveBeenNthCalledWith(1, types.CART_LOAD_CART, []);
+    expect(contextMock.dispatch).toHaveBeenNthCalledWith(1, 'sync', { forceClientState: true });
+    expect(contextMock.commit).toHaveBeenNthCalledWith(2, types.CART_SET_ITEMS_HASH, null);
+    expect(contextMock.dispatch).toHaveBeenNthCalledWith(2, 'disconnect');
+  });
+
+  it('clear deletes all cart products but keep token', async () => {
+    const contextMock = {
+      commit: jest.fn(),
+      dispatch: jest.fn(),
+      getters: { isCartSyncEnabled: false }
+    };
+    const wrapper = (actions: any) => actions.clear(contextMock, { disconnect: false });
+
+    config.cart = { synchronize: false };
+
+    await wrapper(cartActions);
+
+    expect(contextMock.commit).toHaveBeenNthCalledWith(1, types.CART_LOAD_CART, []);
+    expect(contextMock.dispatch).toHaveBeenNthCalledWith(1, 'sync', { forceClientState: true });
+  });
+
+  it('clear deletes all cart products and token, but not sync with backend', async () => {
+    const contextMock = {
+      commit: jest.fn(),
+      dispatch: jest.fn(),
+      getters: { isCartSyncEnabled: false }
+    };
+    const wrapper = (actions: any) => actions.clear(contextMock, { sync: false });
+
+    config.cart = { synchronize: false };
+
+    await wrapper(cartActions);
+
+    expect(contextMock.commit).toHaveBeenNthCalledWith(1, types.CART_LOAD_CART, []);
+    expect(contextMock.commit).toHaveBeenNthCalledWith(2, types.CART_SET_ITEMS_HASH, null);
+    expect(contextMock.dispatch).toHaveBeenNthCalledWith(1, 'disconnect');
   });
 
   describe('create', () => {

From 9647ff676d288f1871d0c11b3d0c098cc9e8061b Mon Sep 17 00:00:00 2001
From: tkostuch <tkostuch@divante.pl>
Date: Tue, 11 Feb 2020 08:39:55 +0100
Subject: [PATCH 27/37] fix current token invalidation with refresh token

---
 core/lib/sync/helpers/index.ts               | 21 ++++++++++++++++++++
 core/lib/sync/task.ts                        | 14 ++++++-------
 core/modules/user/hooks/afterRegistration.ts |  2 +-
 3 files changed, 28 insertions(+), 9 deletions(-)
 create mode 100644 core/lib/sync/helpers/index.ts

diff --git a/core/lib/sync/helpers/index.ts b/core/lib/sync/helpers/index.ts
new file mode 100644
index 000000000..76bac21d1
--- /dev/null
+++ b/core/lib/sync/helpers/index.ts
@@ -0,0 +1,21 @@
+export const hasResponseError = (jsonResponse): boolean => {
+  if (typeof jsonResponse.result === 'string') {
+    return true
+  }
+
+  const hasMessage = jsonResponse.result.result || jsonResponse.result.message
+
+  return Boolean(hasMessage) && jsonResponse.result.code !== 'ENOTFOUND'
+}
+
+export const getResponseMessage = (jsonResponse): string => {
+  if (typeof jsonResponse.result === 'string') {
+    return jsonResponse.result
+  }
+
+  if (typeof jsonResponse.result.result === 'string') {
+    return jsonResponse.result.result
+  }
+
+  return jsonResponse.result.message
+}
diff --git a/core/lib/sync/task.ts b/core/lib/sync/task.ts
index 1a3ace55c..d11f6fb5d 100644
--- a/core/lib/sync/task.ts
+++ b/core/lib/sync/task.ts
@@ -2,7 +2,6 @@ import Vue from 'vue'
 import i18n from '@vue-storefront/i18n'
 import isNaN from 'lodash-es/isNaN'
 import isUndefined from 'lodash-es/isUndefined'
-import toString from 'lodash-es/toString'
 import fetch from 'isomorphic-fetch'
 import * as localForage from 'localforage'
 import rootStore from '@vue-storefront/core/store'
@@ -16,6 +15,7 @@ import { processURLAddress } from '@vue-storefront/core/helpers'
 import { serial } from '@vue-storefront/core/helpers'
 import config from 'config'
 import { onlineHelper } from '@vue-storefront/core/helpers'
+import { hasResponseError, getResponseMessage } from '@vue-storefront/core/lib/sync/helpers'
 
 const AUTO_REFRESH_MAX_ATTEMPTS = 20
 
@@ -33,7 +33,7 @@ function _sleep (time) {
 }
 
 function _internalExecute (resolve, reject, task: Task, currentToken, currentCartId) {
-  if (currentToken !== null && rootStore.state.userTokenInvalidateLock > 0) { // invalidate lock set
+  if (currentToken && rootStore.state.userTokenInvalidateLock > 0) { // invalidate lock set
     Logger.log('Waiting for rootStore.state.userTokenInvalidateLock to release for ' + task.url, 'sync')()
     _sleep(1000).then(() => {
       Logger.log('Another try for rootStore.state.userTokenInvalidateLock for ' + task.url, 'sync')()
@@ -42,7 +42,7 @@ function _internalExecute (resolve, reject, task: Task, currentToken, currentCar
     return // return but not resolve
   } else if (rootStore.state.userTokenInvalidateLock < 0) {
     Logger.error('Aborting the network task' + task.url + rootStore.state.userTokenInvalidateLock, 'sync')()
-    resolve({ code: 401, message: i18n.t('Error refreshing user token. User is not authorized to access the resource') })()
+    resolve({ code: 401, result: i18n.t('Error refreshing user token. User is not authorized to access the resource') })()
     return
   } else {
     if (rootStore.state.userTokenInvalidated) {
@@ -75,7 +75,7 @@ function _internalExecute (resolve, reject, task: Task, currentToken, currentCar
     if (jsonResponse) {
       const responseCode = parseInt(jsonResponse.code)
       if (responseCode !== 200) {
-        if (responseCode === 401 /** unauthorized */ && currentToken !== null) { // the token is no longer valid, try to invalidate it
+        if (responseCode === 401 /** unauthorized */ && currentToken) { // the token is no longer valid, try to invalidate it
           Logger.error('Invalid token - need to be revalidated' + currentToken + task.url + rootStore.state.userTokenInvalidateLock, 'sync')()
           if (isNaN(rootStore.state.userTokenInvalidateAttemptsCount) || isUndefined(rootStore.state.userTokenInvalidateAttemptsCount)) rootStore.state.userTokenInvalidateAttemptsCount = 0
           if (isNaN(rootStore.state.userTokenInvalidateLock) || isUndefined(rootStore.state.userTokenInvalidateLock)) rootStore.state.userTokenInvalidateLock = 0
@@ -128,12 +128,10 @@ function _internalExecute (resolve, reject, task: Task, currentToken, currentCar
           }
         }
 
-        if (!task.silent && jsonResponse.result && (typeof jsonResponse.result === 'string' || (((jsonResponse.result.result || jsonResponse.result.message) && jsonResponse.result.code !== 'ENOTFOUND') && !silentMode))) {
-          const message = typeof jsonResponse.result === 'string' ? jsonResponse.result : typeof jsonResponse.result.result === 'string' ? jsonResponse.result.result : jsonResponse.result.message
-
+        if (!task.silent && jsonResponse.result && hasResponseError(jsonResponse) && !silentMode) {
           rootStore.dispatch('notification/spawnNotification', {
             type: 'error',
-            message: i18n.t(message),
+            message: i18n.t(getResponseMessage(jsonResponse)),
             action1: { label: i18n.t('OK') }
           })
         }
diff --git a/core/modules/user/hooks/afterRegistration.ts b/core/modules/user/hooks/afterRegistration.ts
index 7541c5190..1535ad321 100644
--- a/core/modules/user/hooks/afterRegistration.ts
+++ b/core/modules/user/hooks/afterRegistration.ts
@@ -3,7 +3,7 @@ import * as types from './../store/mutation-types'
 
 export async function afterRegistration ({ Vue, config, store, isServer }) {
   if (!isServer) {
-    await store.dispatch('user/startSession')
+    store.dispatch('user/startSession')
 
     Vue.prototype.$bus.$on('user-before-logout', () => {
       store.dispatch('user/logout', { silent: false })

From 66e961e82dd89cc6bfec45ec980056da62a26946 Mon Sep 17 00:00:00 2001
From: tkostuch <tkostuch@divante.pl>
Date: Tue, 11 Feb 2020 08:47:38 +0100
Subject: [PATCH 28/37] update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8093c12b6..377df86c2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix hiding overlay for newsletter modal - @gibkigonzo (#3970)
 - Fix problem with storeView as dependency in filters - @gibkigonzo (#3968)
 - Fix v-model not working in BaseRadioButton - @lukeromanowicz (#4035)
+- Fix current token invalidation with refresh token - @gibkigonzo (#3928, #3620, #3626)
 
 ## [1.10.5] - 28.11.2019
 

From 1683e6ffb25068072603f0c8a97afd81b220e97f Mon Sep 17 00:00:00 2001
From: tkostuch <tkostuch@divante.pl>
Date: Tue, 11 Feb 2020 09:43:28 +0100
Subject: [PATCH 29/37] add helper getResponseCode

---
 core/lib/sync/helpers/index.ts | 10 ++++++++++
 core/lib/sync/task.ts          |  4 ++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/core/lib/sync/helpers/index.ts b/core/lib/sync/helpers/index.ts
index 76bac21d1..45bf127f5 100644
--- a/core/lib/sync/helpers/index.ts
+++ b/core/lib/sync/helpers/index.ts
@@ -19,3 +19,13 @@ export const getResponseMessage = (jsonResponse): string => {
 
   return jsonResponse.result.message
 }
+
+export const getResponseCode = (jsonResponse): number => {
+  let responseCode = null
+  if (jsonResponse.result && jsonResponse.result.code) {
+    responseCode = parseInt(jsonResponse.result.code)
+  } else {
+    responseCode = parseInt(jsonResponse.code)
+  }
+  return responseCode
+}
diff --git a/core/lib/sync/task.ts b/core/lib/sync/task.ts
index d11f6fb5d..e3dc05f7b 100644
--- a/core/lib/sync/task.ts
+++ b/core/lib/sync/task.ts
@@ -15,7 +15,7 @@ import { processURLAddress } from '@vue-storefront/core/helpers'
 import { serial } from '@vue-storefront/core/helpers'
 import config from 'config'
 import { onlineHelper } from '@vue-storefront/core/helpers'
-import { hasResponseError, getResponseMessage } from '@vue-storefront/core/lib/sync/helpers'
+import { hasResponseError, getResponseMessage, getResponseCode } from '@vue-storefront/core/lib/sync/helpers'
 
 const AUTO_REFRESH_MAX_ATTEMPTS = 20
 
@@ -73,7 +73,7 @@ function _internalExecute (resolve, reject, task: Task, currentToken, currentCar
     }
   }).then((jsonResponse) => {
     if (jsonResponse) {
-      const responseCode = parseInt(jsonResponse.code)
+      const responseCode = getResponseCode(jsonResponse)
       if (responseCode !== 200) {
         if (responseCode === 401 /** unauthorized */ && currentToken) { // the token is no longer valid, try to invalidate it
           Logger.error('Invalid token - need to be revalidated' + currentToken + task.url + rootStore.state.userTokenInvalidateLock, 'sync')()

From e8ce3f5583517b21a4978308fa5b91841e5fcbab Mon Sep 17 00:00:00 2001
From: tkostuch <tkostuch@divante.pl>
Date: Tue, 18 Feb 2020 12:22:38 +0100
Subject: [PATCH 30/37] Disable overriding route state in __INITIAL_STATE__

---
 core/client-entry.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/core/client-entry.ts b/core/client-entry.ts
index e02f4b207..71e8bd379 100755
--- a/core/client-entry.ts
+++ b/core/client-entry.ts
@@ -13,6 +13,7 @@ import { AsyncDataLoader } from './lib/async-data-loader'
 import { Logger } from '@vue-storefront/core/lib/logger'
 import globalConfig from 'config'
 import { RouterManager } from './lib/router-manager';
+import omit from 'lodash-es/omit'
 declare var window: any
 
 const invokeClientEntry = async () => {
@@ -22,7 +23,8 @@ const invokeClientEntry = async () => {
   const { app, router, store } = await createApp(null, dynamicRuntimeConfig, storeCode)
 
   if (window.__INITIAL_STATE__) {
-    store.replaceState(Object.assign({}, store.state, window.__INITIAL_STATE__, { config: globalConfig }))
+    const initialState = omit(window.__INITIAL_STATE__, ['storeView', 'config', 'version', 'route'])
+    store.replaceState(Object.assign({}, store.state, initialState, { config: globalConfig }))
   }
 
   await store.dispatch('url/registerDynamicRoutes')

From d2c1965463c6b2d16ccbf38bbb91f6a2bc9aa22f Mon Sep 17 00:00:00 2001
From: tkostuch <tkostuch@divante.pl>
Date: Tue, 18 Feb 2020 13:23:12 +0100
Subject: [PATCH 31/37] update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f8e647dfe..78f492513 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix v-model not working in BaseRadioButton - @lukeromanowicz (#4035)
 - add disconnect and sync options for clear/cart - @gibkigonzo (#4062)
 - Fix current token invalidation with refresh token - @gibkigonzo (#3928, #3620, #3626)
+- Disable overriding `route`, `config`, `storeView`, `version` state in __INITIAL_STATE__ - @gibkigonzo (pr#4095)
 
 ## [1.10.5] - 28.11.2019
 

From 1b03e6a4ced74261f4a652ae4928b45f881e127e Mon Sep 17 00:00:00 2001
From: tkostuch <tkostuch@divante.pl>
Date: Fri, 21 Feb 2020 08:53:47 +0100
Subject: [PATCH 32/37] add server context to AsyncDataLoader

---
 core/server-entry.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/server-entry.ts b/core/server-entry.ts
index 5a0391550..5cae19441 100755
--- a/core/server-entry.ts
+++ b/core/server-entry.ts
@@ -31,7 +31,7 @@ function _ssrHydrateSubcomponents (components, store, router, resolve, reject, a
       return Promise.resolve(null)
     }
   })).then(() => {
-    AsyncDataLoader.flush({ store, route: router.currentRoute, context: null } /* AsyncDataLoaderActionContext */).then((r) => {
+    AsyncDataLoader.flush({ store, route: router.currentRoute, context } /* AsyncDataLoaderActionContext */).then((r) => {
       if (buildTimeConfig.ssr.useInitialStateFilter) {
         context.state = omit(store.state, config.ssr.initialStateFilter)
       } else {

From ca700f5edb5d97d5c0b43c9f5c004456b8ddede1 Mon Sep 17 00:00:00 2001
From: tkostuch <tkostuch@divante.pl>
Date: Fri, 21 Feb 2020 09:01:38 +0100
Subject: [PATCH 33/37] update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 78f492513..4e2e255bf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Added
 - Add lazy create cart token - @gibkigonzo (#3994)
+- Add server context to async data loader - @gibkigonzo (pr#4113)
 
 ### Fixed
 - Fix low-quality images styles - @przspa (#3906)

From e523b8961f3aadee7b6e61324d0c3e5c90ee8383 Mon Sep 17 00:00:00 2001
From: tkostuch <tkostuch@divante.pl>
Date: Fri, 21 Feb 2020 09:15:02 +0100
Subject: [PATCH 34/37] disable zoom image on hover in mobile

---
 .../default/components/core/ProductTile.vue    | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/themes/default/components/core/ProductTile.vue b/src/themes/default/components/core/ProductTile.vue
index 0a941c6e9..0e064b104 100644
--- a/src/themes/default/components/core/ProductTile.vue
+++ b/src/themes/default/components/core/ProductTile.vue
@@ -155,14 +155,16 @@ $color-white: color(white);
   height: 100%;
   max-height: 300px;
 
-  &:hover{
-    .product-image__content{
-      opacity: 1;
-      transform: scale(1.1);
-    }
-    &.sale::after,
-    &.new::after{
-      opacity: .8;
+  @media (min-width: 1024px) {
+    &:hover{
+      .product-image__content{
+        opacity: 1;
+        transform: scale(1.1);
+      }
+      &.sale::after,
+      &.new::after{
+        opacity: .8;
+      }
     }
   }
   &__content{

From eeb11c466c35fb3be122d262780323f71ea90166 Mon Sep 17 00:00:00 2001
From: tkostuch <tkostuch@divante.pl>
Date: Fri, 21 Feb 2020 09:16:40 +0100
Subject: [PATCH 35/37] update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 78f492513..5eb99d998 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - add disconnect and sync options for clear/cart - @gibkigonzo (#4062)
 - Fix current token invalidation with refresh token - @gibkigonzo (#3928, #3620, #3626)
 - Disable overriding `route`, `config`, `storeView`, `version` state in __INITIAL_STATE__ - @gibkigonzo (pr#4095)
+- Disable zoom image on hover in mobile - @gibkigonzo (pr#4115)
 
 ## [1.10.5] - 28.11.2019
 

From fd6912ca22a62c843639f867e481367630b2079a Mon Sep 17 00:00:00 2001
From: andrzejewsky <vox3r69@gmail.com>
Date: Fri, 21 Feb 2020 15:37:09 +0100
Subject: [PATCH 36/37] bump version

---
 CHANGELOG.md                        | 2 +-
 core/i18n/package.json              | 2 +-
 docs/package.json                   | 2 +-
 lerna.json                          | 2 +-
 package.json                        | 2 +-
 src/themes/default-amp/package.json | 2 +-
 src/themes/default/package.json     | 2 +-
 test/unit/package.json              | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 62751be85..7920b17d1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,7 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 
-## [1.10.6] - UNRELEASED
+## [1.10.6] - 20.02.2020
 
 ## Added
 - Add lazy create cart token - @gibkigonzo (#3994)
diff --git a/core/i18n/package.json b/core/i18n/package.json
index f7f30bf8d..7a17f3977 100644
--- a/core/i18n/package.json
+++ b/core/i18n/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue-storefront/i18n",
-  "version": "1.10.5",
+  "version": "1.10.6",
   "description": "Vue Storefront i18n",
   "license": "MIT",
   "main": "index.ts",
diff --git a/docs/package.json b/docs/package.json
index de53d5bc0..d51a32272 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@vue-storefront/docs",
   "private": true,
-  "version": "1.10.5",
+  "version": "1.10.6",
   "scripts": {
     "docs:dev": "vuepress dev",
     "docs:build": "vuepress build",
diff --git a/lerna.json b/lerna.json
index 083bb03aa..d0cd15779 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,6 +1,6 @@
 {
   "lerna": "3.14.1",
-  "version": "1.10.5",
+  "version": "1.10.6",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "registry": "https://registry.npmjs.org/"
diff --git a/package.json b/package.json
index a73731562..7f8a2d2fd 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-storefront",
-  "version": "1.10.5",
+  "version": "1.10.6",
   "description": "A Vue.js, PWA eCommerce frontend",
   "private": true,
   "engines": {
diff --git a/src/themes/default-amp/package.json b/src/themes/default-amp/package.json
index 651f6282f..e0c219712 100755
--- a/src/themes/default-amp/package.json
+++ b/src/themes/default-amp/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue-storefront/theme-default-amp",
-  "version": "1.10.5",
+  "version": "1.10.6",
   "description": "Default AMP theme for Vue Storefront",
   "main": "index.js",
   "scripts": {
diff --git a/src/themes/default/package.json b/src/themes/default/package.json
index 9e1f1a9ee..8670508e0 100644
--- a/src/themes/default/package.json
+++ b/src/themes/default/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue-storefront/theme-default",
-  "version": "1.10.5",
+  "version": "1.10.6",
   "description": "Default theme for Vue Storefront",
   "main": "index.js",
   "scripts": {
diff --git a/test/unit/package.json b/test/unit/package.json
index 42ae04f53..10d732161 100644
--- a/test/unit/package.json
+++ b/test/unit/package.json
@@ -1,5 +1,5 @@
 {
   "name": "@vue-storefront/unit-tests",
   "private": true,
-  "version": "1.10.5"
+  "version": "1.10.6"
 }

From d49c877539bfcb7f611d152ae44e65a307a01775 Mon Sep 17 00:00:00 2001
From: andrzejewsky <vox3r69@gmail.com>
Date: Fri, 21 Feb 2020 15:40:19 +0100
Subject: [PATCH 37/37] bump version

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7920b17d1..ca725fa00 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,7 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 
-## [1.10.6] - 20.02.2020
+## [1.10.6] - 21.02.2020
 
 ## Added
 - Add lazy create cart token - @gibkigonzo (#3994)