From 31ac3f7ba46a555a175ec85bf5f7d8b187a2046f Mon Sep 17 00:00:00 2001
From: Bartosz Herba <bherba@vuestorefront.io>
Date: Tue, 11 Jan 2022 09:42:14 +0100
Subject: [PATCH 1/3] fix(theme): M2-25 fix links to catch current locale

---
 .gitignore                                        |  1 +
 packages/theme/components/AppHeader.vue           |  4 +++-
 packages/theme/components/BottomNavigation.vue    |  8 ++++----
 packages/theme/components/CartSidebar.vue         |  4 +++-
 packages/theme/helpers/cart/addToCart.ts          |  9 +++++----
 packages/theme/pages/Checkout.vue                 |  5 +++--
 packages/theme/pages/Checkout/Billing.vue         |  6 ++++--
 packages/theme/pages/Checkout/Payment.vue         |  6 ++++--
 packages/theme/pages/Checkout/Shipping.vue        |  6 +++---
 packages/theme/pages/Checkout/UserAccount.vue     |  5 +++--
 packages/theme/pages/MyAccount.vue                |  5 ++---
 .../theme/pages/MyAccount/AddressesDetails.vue    | 15 +++++++++------
 packages/theme/pages/MyAccount/MyWishlist.vue     |  7 +++++--
 packages/theme/pages/MyAccount/OrderHistory.vue   |  4 ++--
 packages/theme/pages/Product.vue                  |  6 +++---
 packages/theme/pages/Shipping.vue                 |  2 +-
 16 files changed, 55 insertions(+), 38 deletions(-)

diff --git a/.gitignore b/.gitignore
index 5a28cf1cb..11f332738 100644
--- a/.gitignore
+++ b/.gitignore
@@ -109,6 +109,7 @@ dist
 .yarn/install-state.gz
 .pnp.*
 .vscode/*
+.vscode
 !.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json
diff --git a/packages/theme/components/AppHeader.vue b/packages/theme/components/AppHeader.vue
index 94c2e0008..fe800fa5d 100644
--- a/packages/theme/components/AppHeader.vue
+++ b/packages/theme/components/AppHeader.vue
@@ -178,6 +178,7 @@ import {
   watch,
   defineComponent,
   useRouter,
+  useContext,
 } from '@nuxtjs/composition-api';
 import { onSSR } from '@vue-storefront/core';
 import { clickOutside } from '@storefront-ui/vue/src/utilities/directives/click-outside/click-outside-directive.js';
@@ -208,6 +209,7 @@ export default defineComponent({
   directives: { clickOutside },
   setup() {
     const router = useRouter();
+    const { app } = useContext();
     const { toggleCartSidebar, toggleWishlistSidebar, toggleLoginModal } = useUiState();
     const { setTermForUrl, getFacetsFromURL, getAgnosticCatLink } = useUiHelpers();
     const { isAuthenticated, load: loadUser } = useUser();
@@ -246,7 +248,7 @@ export default defineComponent({
 
     const handleAccountClick = async () => {
       if (isAuthenticated.value) {
-        await router.push('/my-account');
+        await router.push(String(app.localePath('/my-account')));
       } else {
         toggleLoginModal();
       }
diff --git a/packages/theme/components/BottomNavigation.vue b/packages/theme/components/BottomNavigation.vue
index 3757a3de8..2c5484269 100644
--- a/packages/theme/components/BottomNavigation.vue
+++ b/packages/theme/components/BottomNavigation.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- TODO: create logic with isActive prop for BottomNavigationItems -->
   <SfBottomNavigation class="navigation-bottom smartphone-only">
-    <nuxt-link to="/">
+    <nuxt-link to="localePath('/')">
       <SfBottomNavigationItem
         :class="$route.path == '/' ? 'sf-bottom-navigation__item--active' : ''"
         icon="home"
@@ -52,7 +52,7 @@
 <script>
 import { SfBottomNavigation, SfIcon, SfCircleIcon } from '@storefront-ui/vue';
 import { useUser } from '@vue-storefront/magento';
-import { defineComponent, useRouter } from '@nuxtjs/composition-api';
+import { defineComponent, useRouter, useContext } from '@nuxtjs/composition-api';
 import { useUiState } from '~/composables';
 
 export default defineComponent({
@@ -71,10 +71,10 @@ export default defineComponent({
     } = useUiState();
     const { isAuthenticated } = useUser();
     const router = useRouter();
-
+    const { app } = useContext();
     const handleAccountClick = async () => {
       if (isAuthenticated.value) {
-        return router.push('/my-account');
+        await router.push(String(app.localePath('/my-account')));
       }
       toggleLoginModal();
     };
diff --git a/packages/theme/components/CartSidebar.vue b/packages/theme/components/CartSidebar.vue
index ffe28e5d3..6703c2e45 100644
--- a/packages/theme/components/CartSidebar.vue
+++ b/packages/theme/components/CartSidebar.vue
@@ -238,6 +238,7 @@ import {
   defineComponent,
   ref,
   useRouter,
+  useContext,
 } from '@nuxtjs/composition-api';
 import {
   useCart,
@@ -268,6 +269,7 @@ export default defineComponent({
     const { initializeCheckout } = useExternalCheckout();
     const { isCartSidebarOpen, toggleCartSidebar } = useUiState();
     const router = useRouter();
+    const { app } = useContext();
     const {
       cart,
       removeItem,
@@ -293,7 +295,7 @@ export default defineComponent({
 
     const goToCheckout = async () => {
       const redirectUrl = await initializeCheckout({ baseUrl: '/checkout/user-account' });
-      await router.push(redirectUrl);
+      await router.push(String(app.localePath(redirectUrl)));
     };
 
     const sendToRemove = ({ product }) => {
diff --git a/packages/theme/helpers/cart/addToCart.ts b/packages/theme/helpers/cart/addToCart.ts
index 5963920af..073a57ae7 100644
--- a/packages/theme/helpers/cart/addToCart.ts
+++ b/packages/theme/helpers/cart/addToCart.ts
@@ -1,5 +1,5 @@
 import { Product, productGetters, useCart } from '@vue-storefront/magento';
-import { useRouter } from '@nuxtjs/composition-api';
+import { useRouter, useContext } from '@nuxtjs/composition-api';
 
 export const useAddToCart = () => {
   const {
@@ -7,7 +7,7 @@ export const useAddToCart = () => {
     isInCart,
   } = useCart();
   const router = useRouter();
-
+  const { app } = useContext();
   const addItemToCart = async (params: { product: Product, quantity: number }) => {
     const { product, quantity } = params;
     // eslint-disable-next-line no-underscore-dangle
@@ -23,9 +23,10 @@ export const useAddToCart = () => {
         break;
       case 'BundleProduct':
       case 'ConfigurableProduct':
-        await router.push(`/p/${productGetters.getProductSku(product)}${
+        const path = `/p/${productGetters.getProductSku(product)}${
           productGetters.getSlug(product, product.categories[0])
-        }`);
+        }`;
+        await router.push(String(app.localePath(path)));
         break;
       default:
         throw new Error(`Product Type ${productType} not supported in add to cart yet`);
diff --git a/packages/theme/pages/Checkout.vue b/packages/theme/pages/Checkout.vue
index 62446af43..cd43aa5f4 100644
--- a/packages/theme/pages/Checkout.vue
+++ b/packages/theme/pages/Checkout.vue
@@ -32,7 +32,7 @@
 <script>
 import { SfSteps } from '@storefront-ui/vue';
 import {
-  computed, defineComponent, ref, useRoute, useRouter,
+  computed, defineComponent, ref, useRoute, useRouter, useContext,
 } from '@nuxtjs/composition-api';
 import CartPreview from '~/components/Checkout/CartPreview.vue';
 
@@ -44,6 +44,7 @@ export default defineComponent({
   },
   setup() {
     const route = useRoute();
+    const { app } = useContext();
     const { path } = route.value;
     const router = useRouter();
     const currentStep = computed(() => path.split('/').pop());
@@ -59,7 +60,7 @@ export default defineComponent({
 
     const handleStepClick = async (stepIndex) => {
       const key = Object.keys(STEPS.value)[stepIndex];
-      await router.push(`/checkout/${key}`);
+      await router.push(String(app.localePath(`/checkout/${key}`)));
     };
 
     return {
diff --git a/packages/theme/pages/Checkout/Billing.vue b/packages/theme/pages/Checkout/Billing.vue
index 0d04f9920..3fc824a3a 100644
--- a/packages/theme/pages/Checkout/Billing.vue
+++ b/packages/theme/pages/Checkout/Billing.vue
@@ -240,7 +240,7 @@
             {{ $t('Continue to payment') }}
           </SfButton>
           <nuxt-link
-            to="/checkout/shipping"
+            to="localePath('/checkout/shipping')"
             class="sf-button sf-button--underlined form__back-button smartphone-only"
           >
             Go back
@@ -278,6 +278,7 @@ import {
   watch,
   useRouter,
   defineComponent,
+  useContext,
 } from '@nuxtjs/composition-api';
 import { addressFromApiToForm, formatAddressReturnToData } from '~/helpers/checkout/address';
 
@@ -310,6 +311,7 @@ export default defineComponent({
   },
   setup() {
     const router = useRouter();
+    const { app } = useContext();
     const {
       load,
       save,
@@ -378,7 +380,7 @@ export default defineComponent({
         }
       }
       reset();
-      router.push('/checkout/payment');
+      await router.push(String(app.localePath('/checkout/payment')));
       isBillingDetailsStepCompleted.value = true;
     };
 
diff --git a/packages/theme/pages/Checkout/Payment.vue b/packages/theme/pages/Checkout/Payment.vue
index 9da98d106..e952ee69f 100644
--- a/packages/theme/pages/Checkout/Payment.vue
+++ b/packages/theme/pages/Checkout/Payment.vue
@@ -135,7 +135,7 @@
           <SfButton
             type="button"
             class="sf-button color-secondary summary__back-button"
-            @click="$router.push('/checkout/billing')"
+            @click="$router.push(String(localePath('/checkout/billing')))"
           >
             {{ $t('Go back') }}
           </SfButton>
@@ -171,6 +171,7 @@ import {
   computed,
   defineComponent,
   useRouter,
+  useContext,
 } from '@nuxtjs/composition-api';
 import {
   useMakeOrder,
@@ -197,6 +198,7 @@ export default defineComponent({
     const { cart, load, setCart } = useCart();
     const { order, make, loading } = useMakeOrder();
     const { $magento } = useVSFContext();
+    const { app } = useContext();
     const router = useRouter();
     const isPaymentReady = ref(false);
     const terms = ref(false);
@@ -212,7 +214,7 @@ export default defineComponent({
       setCart(null);
       $magento.config.state.setCartId();
       await load();
-      await router.push(`/checkout/thank-you?order=${order.value.order_number}`);
+      await router.push(String(app.localePath(`/checkout/thank-you?order=${order.value.order_number}`)));
     };
 
     const discounts = computed(() => cartGetters.getDiscounts(cart.value));
diff --git a/packages/theme/pages/Checkout/Shipping.vue b/packages/theme/pages/Checkout/Shipping.vue
index 23b2ea529..cda769e5e 100644
--- a/packages/theme/pages/Checkout/Shipping.vue
+++ b/packages/theme/pages/Checkout/Shipping.vue
@@ -233,7 +233,7 @@
       </div>
       <VsfShippingProvider
         v-if="isShippingDetailsStepCompleted && !dirty"
-        @submit="$router.push('/checkout/billing')"
+        @submit="$router.push(String(localePath('/checkout/billing')))"
       />
     </form>
   </ValidationObserver>
@@ -250,7 +250,8 @@ import {
   ref,
   computed,
   watch,
-  onMounted, defineComponent,
+  onMounted,
+  defineComponent,
 } from '@nuxtjs/composition-api';
 import { onSSR } from '@vue-storefront/core';
 import {
@@ -311,7 +312,6 @@ export default defineComponent({
       country,
     } = useCountrySearch('Step:Shipping');
     const { isAuthenticated } = useUser();
-
     const shippingDetails = ref(addressFromApiToForm(address.value) || {});
     const currentAddressId = ref(NOT_SELECTED_ADDRESS);
 
diff --git a/packages/theme/pages/Checkout/UserAccount.vue b/packages/theme/pages/Checkout/UserAccount.vue
index 6983ad970..a4e2babce 100644
--- a/packages/theme/pages/Checkout/UserAccount.vue
+++ b/packages/theme/pages/Checkout/UserAccount.vue
@@ -139,6 +139,7 @@ import {
   computed,
   defineComponent,
   useRouter,
+  useContext,
 } from '@nuxtjs/composition-api';
 import { useUser, useGuestUser } from '@vue-storefront/magento';
 import {
@@ -179,7 +180,7 @@ export default defineComponent({
   },
   setup() {
     const router = useRouter();
-
+    const { app } = useContext();
     const {
       attachToCart,
       loading: loadingGuestUser,
@@ -233,7 +234,7 @@ export default defineComponent({
       }
 
       if (!hasError.value) {
-        await router.push('/checkout/shipping');
+        await router.push(String(app.localePath('/checkout/shipping')));
         reset();
         isFormSubmitted.value = true;
       } else {
diff --git a/packages/theme/pages/MyAccount.vue b/packages/theme/pages/MyAccount.vue
index 4dc55c581..661b6ce2c 100644
--- a/packages/theme/pages/MyAccount.vue
+++ b/packages/theme/pages/MyAccount.vue
@@ -111,7 +111,7 @@ export default defineComponent({
     const changeActivePage = async (title) => {
       if (title === 'Log out') {
         await logout();
-        await router.push(localePath({ name: 'home' }));
+        await router.push(String(localePath({ name: 'home' })));
 
         return;
       }
@@ -119,8 +119,7 @@ export default defineComponent({
       const slugifiedTitle = (title || '').toLowerCase().replace(' ', '-');
       const transformedPath = `/my-account/${slugifiedTitle}`;
 
-      const localeTransformedPath = localePath(transformedPath);
-      await router.push(localeTransformedPath);
+      await router.push(String(localePath(transformedPath)));
     };
 
     onBeforeUnmount(() => {
diff --git a/packages/theme/pages/MyAccount/AddressesDetails.vue b/packages/theme/pages/MyAccount/AddressesDetails.vue
index 127d04378..e63d18858 100644
--- a/packages/theme/pages/MyAccount/AddressesDetails.vue
+++ b/packages/theme/pages/MyAccount/AddressesDetails.vue
@@ -88,7 +88,9 @@ import {
   SfIcon,
 } from '@storefront-ui/vue';
 import { userAddressesGetters, useAddresses } from '@vue-storefront/magento';
-import { computed, defineComponent, useRouter, useRoute } from '@nuxtjs/composition-api';
+import {
+  computed, defineComponent, useRouter, useRoute, useContext,
+} from '@nuxtjs/composition-api';
 import { onSSR } from '@vue-storefront/core';
 import AddressForm from '~/components/MyAccount/AddressForm.vue';
 import UserAddressDetails from '~/components/UserAddressDetails.vue';
@@ -110,19 +112,20 @@ export default defineComponent({
       update,
       save,
     } = useAddresses();
-    
+
     const userAddresses = computed(() => userAddressesGetters.getAddresses(addresses.value));
     const router = useRouter();
     const route = useRoute();
+    const { app } = useContext;
     const activeAddress = computed(
-      () => userAddresses.value.filter((address) => address?.id == route.value.query.id).pop()
+      () => userAddresses.value.filter((address) => address?.id == route.value.query.id).pop(),
     );
 
     const isNewAddress = computed(() => !activeAddress.value);
     const editingAddress = computed(() => !!route.value.query.id);
     const changeAddress = async (address) => {
       const addressId = address?.id || 'new';
-      await router.push({ path: '/my-account/addresses-details', query: { id: addressId } });
+      await router.push(String(app.localePath({ path: '/my-account/addresses-details', query: { id: addressId } })));
     };
 
     const removeAddress = async (address) => {
@@ -138,7 +141,7 @@ export default defineComponent({
         const actionMethod = isNewAddress.value ? save : update;
         const data = await actionMethod({ address: form });
         await onComplete(data);
-        await router.push({ path: '/my-account/addresses-details' });
+        await router.push(String(app.localePath('/my-account/addresses-details')));
       } catch (error) {
         onError(error);
       }
@@ -248,4 +251,4 @@ export default defineComponent({
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/packages/theme/pages/MyAccount/MyWishlist.vue b/packages/theme/pages/MyAccount/MyWishlist.vue
index 7f440c265..ee292c055 100644
--- a/packages/theme/pages/MyAccount/MyWishlist.vue
+++ b/packages/theme/pages/MyAccount/MyWishlist.vue
@@ -206,6 +206,7 @@ import {
   defineComponent,
   useRouter,
   useRoute,
+  useContext,
 } from '@nuxtjs/composition-api';
 import {
   useCart,
@@ -237,6 +238,7 @@ export default defineComponent({
       removeItem,
     } = useWishlist('MyWishlistPage');
     const route = useRoute();
+    const { app } = useContext();
     const {
       query: {
         page,
@@ -270,10 +272,11 @@ export default defineComponent({
           break;
         case 'BundleProduct':
         case 'ConfigurableProduct':
-          await router.push(`/p/${productGetters.getProductSku(product)}${productGetters.getSlug(
+          const path = `/p/${productGetters.getProductSku(product)}${productGetters.getSlug(
             product,
             product.categories[0],
-          )}`);
+          )}`;
+          await router.push(String(app.localePath(path)));
           break;
         default:
           throw new Error(`Product Type ${productType} not supported in add to cart yet`);
diff --git a/packages/theme/pages/MyAccount/OrderHistory.vue b/packages/theme/pages/MyAccount/OrderHistory.vue
index a4bac4bf0..3658180ce 100644
--- a/packages/theme/pages/MyAccount/OrderHistory.vue
+++ b/packages/theme/pages/MyAccount/OrderHistory.vue
@@ -50,7 +50,7 @@
             :key="i"
           >
             <SfTableData class="products__name">
-              <nuxt-link :to="'/p/'+orderGetters.getItemSku(item)+'/'+orderGetters.getItemSku(item)">
+              <nuxt-link :to="localePath('/p/'+orderGetters.getItemSku(item)+'/'+orderGetters.getItemSku(item))">
                 {{ orderGetters.getItemName(item) }}
               </nuxt-link>
             </SfTableData>
@@ -73,7 +73,7 @@
           <SfButton
             data-cy="order-history-btn_start"
             class="no-orders__button"
-            @click="$router.push('/')"
+            @click="$router.push(localePath('/'))"
           >
             {{ $t('Start shopping') }}
           </SfButton>
diff --git a/packages/theme/pages/Product.vue b/packages/theme/pages/Product.vue
index 545ebc411..8744f7141 100644
--- a/packages/theme/pages/Product.vue
+++ b/packages/theme/pages/Product.vue
@@ -354,7 +354,7 @@ export default defineComponent({
     } = useReview(`productReviews-${id}`);
     const { isAuthenticated } = useUser();
     const { addItem: addItemToWishlist, isInWishlist } = useWishlist('GlobalWishlist');
-    const { error: nuxtError } = useContext();
+    const { error: nuxtError, app } = useContext();
     const basePrice = ref(0);
     const openTab = ref(1);
     const productDataIsLoading = computed(() => productLoading.value && !productGetters.getName(product.value));
@@ -414,7 +414,7 @@ export default defineComponent({
           return productGetters.getPrice(product.value).special;
       }
     });
-    
+
     const changeTab = (tabNumber, callback) => {
       document
         .querySelector('#tabs')
@@ -449,7 +449,7 @@ export default defineComponent({
       productConfiguration.value.push([label, value]);
 
       await router.push({
-        path: route.value.fullPath,
+        path: String(app.localePath(route.value.fullPath)),
         query: {
           ...Object.fromEntries(productConfiguration.value),
         },
diff --git a/packages/theme/pages/Shipping.vue b/packages/theme/pages/Shipping.vue
index 8e64b8ac7..7ad50028c 100644
--- a/packages/theme/pages/Shipping.vue
+++ b/packages/theme/pages/Shipping.vue
@@ -180,7 +180,7 @@
       </div>
       <VsfShippingProvider
         v-if="isFormSubmitted"
-        @submit="$router.push('/checkout/billing')"
+        @submit="$router.push(String(localePath('/checkout/billing')))"
       />
     </form>
   </ValidationObserver>

From e5492a39ccf4663b9d856d20c7ce32f1f2005a94 Mon Sep 17 00:00:00 2001
From: Bartosz Herba <bartoszherba@gmail.com>
Date: Tue, 11 Jan 2022 18:39:42 +0100
Subject: [PATCH 2/3] Apply suggestions from code review

Co-authored-by: Heitor Ramon Ribeiro <heitor.ramon@gmail.com>
---
 packages/theme/components/AppHeader.vue             | 2 +-
 packages/theme/components/BottomNavigation.vue      | 2 +-
 packages/theme/components/CartSidebar.vue           | 2 +-
 packages/theme/pages/Checkout.vue                   | 2 +-
 packages/theme/pages/Checkout/Billing.vue           | 2 +-
 packages/theme/pages/Checkout/Payment.vue           | 4 ++--
 packages/theme/pages/Checkout/Shipping.vue          | 2 +-
 packages/theme/pages/Checkout/UserAccount.vue       | 2 +-
 packages/theme/pages/MyAccount.vue                  | 2 +-
 packages/theme/pages/MyAccount/AddressesDetails.vue | 2 +-
 packages/theme/pages/MyAccount/MyWishlist.vue       | 2 +-
 packages/theme/pages/Product.vue                    | 2 +-
 packages/theme/pages/Shipping.vue                   | 2 +-
 13 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/theme/components/AppHeader.vue b/packages/theme/components/AppHeader.vue
index fe800fa5d..fa1221805 100644
--- a/packages/theme/components/AppHeader.vue
+++ b/packages/theme/components/AppHeader.vue
@@ -248,7 +248,7 @@ export default defineComponent({
 
     const handleAccountClick = async () => {
       if (isAuthenticated.value) {
-        await router.push(String(app.localePath('/my-account')));
+        await router.push(`${app.localePath('/my-account')}`);
       } else {
         toggleLoginModal();
       }
diff --git a/packages/theme/components/BottomNavigation.vue b/packages/theme/components/BottomNavigation.vue
index 2c5484269..3c837e973 100644
--- a/packages/theme/components/BottomNavigation.vue
+++ b/packages/theme/components/BottomNavigation.vue
@@ -74,7 +74,7 @@ export default defineComponent({
     const { app } = useContext();
     const handleAccountClick = async () => {
       if (isAuthenticated.value) {
-        await router.push(String(app.localePath('/my-account')));
+        await router.push(`${app.localePath('/my-account')}`);
       }
       toggleLoginModal();
     };
diff --git a/packages/theme/components/CartSidebar.vue b/packages/theme/components/CartSidebar.vue
index 6703c2e45..440139830 100644
--- a/packages/theme/components/CartSidebar.vue
+++ b/packages/theme/components/CartSidebar.vue
@@ -295,7 +295,7 @@ export default defineComponent({
 
     const goToCheckout = async () => {
       const redirectUrl = await initializeCheckout({ baseUrl: '/checkout/user-account' });
-      await router.push(String(app.localePath(redirectUrl)));
+      await router.push(`${app.localePath(redirectUrl)}`);
     };
 
     const sendToRemove = ({ product }) => {
diff --git a/packages/theme/pages/Checkout.vue b/packages/theme/pages/Checkout.vue
index cd43aa5f4..3abe65350 100644
--- a/packages/theme/pages/Checkout.vue
+++ b/packages/theme/pages/Checkout.vue
@@ -60,7 +60,7 @@ export default defineComponent({
 
     const handleStepClick = async (stepIndex) => {
       const key = Object.keys(STEPS.value)[stepIndex];
-      await router.push(String(app.localePath(`/checkout/${key}`)));
+      await router.push(`${app.localePath(`/checkout/${key}`)}`);
     };
 
     return {
diff --git a/packages/theme/pages/Checkout/Billing.vue b/packages/theme/pages/Checkout/Billing.vue
index 3fc824a3a..15c7c6769 100644
--- a/packages/theme/pages/Checkout/Billing.vue
+++ b/packages/theme/pages/Checkout/Billing.vue
@@ -380,7 +380,7 @@ export default defineComponent({
         }
       }
       reset();
-      await router.push(String(app.localePath('/checkout/payment')));
+      await router.push(`${app.localePath('/checkout/payment')}`);
       isBillingDetailsStepCompleted.value = true;
     };
 
diff --git a/packages/theme/pages/Checkout/Payment.vue b/packages/theme/pages/Checkout/Payment.vue
index e952ee69f..52e7a6c34 100644
--- a/packages/theme/pages/Checkout/Payment.vue
+++ b/packages/theme/pages/Checkout/Payment.vue
@@ -135,7 +135,7 @@
           <SfButton
             type="button"
             class="sf-button color-secondary summary__back-button"
-            @click="$router.push(String(localePath('/checkout/billing')))"
+            @click="$router.push(`${localePath('/checkout/billing')}`)"
           >
             {{ $t('Go back') }}
           </SfButton>
@@ -214,7 +214,7 @@ export default defineComponent({
       setCart(null);
       $magento.config.state.setCartId();
       await load();
-      await router.push(String(app.localePath(`/checkout/thank-you?order=${order.value.order_number}`)));
+      await router.push(`${app.localePath(`/checkout/thank-you?order=${order.value.order_number}`)}`);
     };
 
     const discounts = computed(() => cartGetters.getDiscounts(cart.value));
diff --git a/packages/theme/pages/Checkout/Shipping.vue b/packages/theme/pages/Checkout/Shipping.vue
index cda769e5e..9d8dd1655 100644
--- a/packages/theme/pages/Checkout/Shipping.vue
+++ b/packages/theme/pages/Checkout/Shipping.vue
@@ -233,7 +233,7 @@
       </div>
       <VsfShippingProvider
         v-if="isShippingDetailsStepCompleted && !dirty"
-        @submit="$router.push(String(localePath('/checkout/billing')))"
+        @submit="$router.push(`${localePath('/checkout/billing')}`)"
       />
     </form>
   </ValidationObserver>
diff --git a/packages/theme/pages/Checkout/UserAccount.vue b/packages/theme/pages/Checkout/UserAccount.vue
index a4e2babce..d8f63f9bb 100644
--- a/packages/theme/pages/Checkout/UserAccount.vue
+++ b/packages/theme/pages/Checkout/UserAccount.vue
@@ -234,7 +234,7 @@ export default defineComponent({
       }
 
       if (!hasError.value) {
-        await router.push(String(app.localePath('/checkout/shipping')));
+        await router.push(`${app.localePath('/checkout/shipping')}`);
         reset();
         isFormSubmitted.value = true;
       } else {
diff --git a/packages/theme/pages/MyAccount.vue b/packages/theme/pages/MyAccount.vue
index 661b6ce2c..e3e8d84d0 100644
--- a/packages/theme/pages/MyAccount.vue
+++ b/packages/theme/pages/MyAccount.vue
@@ -111,7 +111,7 @@ export default defineComponent({
     const changeActivePage = async (title) => {
       if (title === 'Log out') {
         await logout();
-        await router.push(String(localePath({ name: 'home' })));
+        await router.push(`${localePath({ name: 'home' })}`);
 
         return;
       }
diff --git a/packages/theme/pages/MyAccount/AddressesDetails.vue b/packages/theme/pages/MyAccount/AddressesDetails.vue
index e63d18858..4043c0348 100644
--- a/packages/theme/pages/MyAccount/AddressesDetails.vue
+++ b/packages/theme/pages/MyAccount/AddressesDetails.vue
@@ -125,7 +125,7 @@ export default defineComponent({
     const editingAddress = computed(() => !!route.value.query.id);
     const changeAddress = async (address) => {
       const addressId = address?.id || 'new';
-      await router.push(String(app.localePath({ path: '/my-account/addresses-details', query: { id: addressId } })));
+      await router.push(`${app.localePath({ path: '/my-account/addresses-details', query: { id: addressId } })}`);
     };
 
     const removeAddress = async (address) => {
diff --git a/packages/theme/pages/MyAccount/MyWishlist.vue b/packages/theme/pages/MyAccount/MyWishlist.vue
index ee292c055..7b33cc675 100644
--- a/packages/theme/pages/MyAccount/MyWishlist.vue
+++ b/packages/theme/pages/MyAccount/MyWishlist.vue
@@ -276,7 +276,7 @@ export default defineComponent({
             product,
             product.categories[0],
           )}`;
-          await router.push(String(app.localePath(path)));
+          await router.push(`${app.localePath(path)}`);
           break;
         default:
           throw new Error(`Product Type ${productType} not supported in add to cart yet`);
diff --git a/packages/theme/pages/Product.vue b/packages/theme/pages/Product.vue
index 8744f7141..648ba77dd 100644
--- a/packages/theme/pages/Product.vue
+++ b/packages/theme/pages/Product.vue
@@ -449,7 +449,7 @@ export default defineComponent({
       productConfiguration.value.push([label, value]);
 
       await router.push({
-        path: String(app.localePath(route.value.fullPath)),
+        path: `${app.localePath(route.value.fullPath)}`,
         query: {
           ...Object.fromEntries(productConfiguration.value),
         },
diff --git a/packages/theme/pages/Shipping.vue b/packages/theme/pages/Shipping.vue
index 7ad50028c..a3a8c54c3 100644
--- a/packages/theme/pages/Shipping.vue
+++ b/packages/theme/pages/Shipping.vue
@@ -180,7 +180,7 @@
       </div>
       <VsfShippingProvider
         v-if="isFormSubmitted"
-        @submit="$router.push(String(localePath('/checkout/billing')))"
+        @submit="$router.push(`${localePath('/checkout/billing')}`)"
       />
     </form>
   </ValidationObserver>

From aea31309a381259ecf74ecc9dfd7fc08ba4643e1 Mon Sep 17 00:00:00 2001
From: Marcin Kwiatkowski <marcin.kwiatkowski@vuestorefront.io>
Date: Tue, 11 Jan 2022 20:23:57 +0100
Subject: [PATCH 3/3] test(test-utils): added localePath global mock to the
 test-utils

---
 packages/theme/test-utils.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/theme/test-utils.js b/packages/theme/test-utils.js
index 002bf99d2..28eadd423 100644
--- a/packages/theme/test-utils.js
+++ b/packages/theme/test-utils.js
@@ -6,6 +6,13 @@ const $t = (text) => text;
 const customRender = (component, options = {}, callback = null) => render(component, {
   mocks: {
     $t,
+    $nuxt: {
+      context: {
+        app: {
+          localePath: (path) => path,
+        },
+      },
+    },
     ...options?.mocks,
   },
   ...options,