fix(theme): fix links to catch current locale

.gitignore

@@ -109,6 +109,7 @@ dist
 .yarn/install-state.gz
 .pnp.*
 .vscode/*
+.vscode
 !.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json

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(`${app.localePath('/my-account')}`);
       } else {
         toggleLoginModal();
       }

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(`${app.localePath('/my-account')}`);
       }
       toggleLoginModal();
     };

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(`${app.localePath(redirectUrl)}`);
     };
 
     const sendToRemove = ({ product }) => {

packages/theme/helpers/cart/addToCart.ts

@@ -1,13 +1,13 @@
 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 {
     addItem: addItemToCartBase,
     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`);

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(`${app.localePath(`/checkout/${key}`)}`);
     };
 
     return {

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(`${app.localePath('/checkout/payment')}`);
       isBillingDetailsStepCompleted.value = true;
     };
 

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(`${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(`${app.localePath(`/checkout/thank-you?order=${order.value.order_number}`)}`);
     };
 
     const discounts = computed(() => cartGetters.getDiscounts(cart.value));

packages/theme/pages/Checkout/Shipping.vue

@@ -233,7 +233,7 @@
       </div>
       <VsfShippingProvider
         v-if="isShippingDetailsStepCompleted && !dirty"
-        @submit="$router.push('/checkout/billing')"
+        @submit="$router.push(`${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);
 

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(`${app.localePath('/checkout/shipping')}`);
         reset();
         isFormSubmitted.value = true;
       } else {

packages/theme/pages/MyAccount.vue

@@ -111,16 +111,15 @@ export default defineComponent({
     const changeActivePage = async (title) => {
       if (title === 'Log out') {
         await logout();
-        await router.push(localePath({ name: 'home' }));
+        await router.push(`${localePath({ name: 'home' })}`);
 
         return;
       }
 
       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(() => {

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(`${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>
+</style>

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(`${app.localePath(path)}`);
           break;
         default:
           throw new Error(`Product Type ${productType} not supported in add to cart yet`);

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>