fix(theme): fix setting proper store and locale if there is no cookie

Author: bartoszherba

packages/theme/composables/useMagentoConfiguration.ts

@@ -52,25 +52,30 @@ export const useMagentoConfiguration: UseMagentoConfiguration = () => {
       updateCookies,
       updateLocale,
     } = params;
-    loadConfig();
-    loadStores();
-    loadCurrencies();
 
-    if (!app.$cookies.get(cookieNames.storeCookieName) || updateCookies) {
-      app.$cookies.set(cookieNames.storeCookieName, storeConfigGetters.getCode(storeConfig.value));
-    }
+    // eslint-disable-next-line promise/catch-or-return
+    loadConfig().then(() => {
+      if (!app.$cookies.get(cookieNames.storeCookieName) || updateCookies) {
+        app.$cookies.set(cookieNames.storeCookieName, storeConfigGetters.getCode(storeConfig.value));
+      }
+
+      if (!app.$cookies.get(cookieNames.localeCookieName) || updateCookies) {
+        app.$cookies.set(cookieNames.localeCookieName, storeConfigGetters.getCode(storeConfig.value));
+      }
 
-    if (!app.$cookies.get(cookieNames.localeCookieName) || updateCookies) {
-      app.$cookies.set(cookieNames.localeCookieName, storeConfigGetters.getLocale(storeConfig.value));
-    }
+      if (!app.$cookies.get(cookieNames.currencyCookieName) || updateCookies) {
+        app.$cookies.set(cookieNames.currencyCookieName, storeConfigGetters.getCurrency(storeConfig.value));
+      }
 
-    if (!app.$cookies.get(cookieNames.currencyCookieName) || updateCookies) {
-      app.$cookies.set(cookieNames.currencyCookieName, storeConfigGetters.getCurrency(storeConfig.value));
-    }
+      if (updateLocale) {
+        app.i18n.setLocale(storeConfigGetters.getLocale(storeConfig.value));
+      }
 
-    if (updateLocale) {
-      app.i18n.setLocale(storeConfigGetters.getLocale(storeConfig.value));
-    }
+      return true;
+    });
+
+    loadStores();
+    loadCurrencies();
   };
 
   return {

packages/theme/plugins/__tests__/i18n.spec.js

@@ -5,16 +5,19 @@ const localesMock = [
     code: 'default',
     file: 'en.js',
     iso: 'en_US',
+    defaultCurrency: 'USD',
   },
   {
     code: 'de_DE',
     file: 'de.js',
     iso: 'de_DE',
+    defaultCurrency: 'EUR',
   },
   {
     code: 'nl_NL',
     file: 'en.js',
     iso: 'en_US',
+    defaultCurrency: 'EUR',
   },
 ];
 
@@ -29,14 +32,19 @@ const callbackRequest = {
   headers: {},
 };
 
+const routeMock = {
+  path: 'https://domain/german',
+};
 const appMock = {
   $cookies: {
     get: jest.fn(),
   },
   i18n: {
     defaultLocale: 'en',
+    defaultCurrency: 'EUR',
     setLocale: jest.fn(),
     locales: localesMock,
+    locale: 'de_DE',
   },
   $vsf: {
     $magento: {
@@ -54,6 +62,7 @@ const appMock = {
           ...apiStateMock,
           setStore: jest.fn(),
           setLocale: jest.fn(),
+          setCurrency: jest.fn(),
         },
         axios: {
           headers: {
@@ -71,14 +80,14 @@ describe('i18n plugin', () => {
   });
 
   it('Should read vsf-store cookie value', () => {
-    i18nPlugin({ app: appMock });
+    i18nPlugin({ app: appMock, route: routeMock });
 
     expect(appMock.$cookies.get).toHaveBeenCalledWith('vsf-store');
   });
 
   it('Should find locale based on magento store code', () => {
     appMock.$cookies.get.mockReturnValue('default');
-    i18nPlugin({ app: appMock });
+    i18nPlugin({ app: appMock, route: routeMock });
 
     expect(appMock.i18n.setLocale).not.toHaveBeenCalled();
   });
@@ -91,7 +100,7 @@ describe('i18n plugin', () => {
 
   it('Should set default locale when vsf-store cookie is not exist', () => {
     appMock.$cookies.get.mockReturnValue(null);
-    i18nPlugin({ app: appMock });
+    i18nPlugin({ app: appMock, route: routeMock });
 
     expect(appMock.i18n.setLocale).toHaveBeenCalledWith('en');
   });
@@ -107,12 +116,13 @@ describe('i18n plugin', () => {
 
     testCaseAppMock.$cookies.get.mockReturnValueOnce('de_DE').mockReturnValueOnce('default');
 
-    i18nPlugin({ app: testCaseAppMock });
+    i18nPlugin({ app: testCaseAppMock, route: routeMock });
 
     expect(testCaseAppMock.$vsf.$magento.config.state.setLocale).toHaveBeenCalledWith('de_DE');
     expect(testCaseAppMock.$vsf.$magento.config.state.setStore).toHaveBeenCalledWith('de_DE');
+    expect(testCaseAppMock.$vsf.$magento.config.state.setCurrency).toHaveBeenCalledWith('EUR');
     expect(callbackRequest.headers.cookie).toMatchInlineSnapshot(
-      `"vsf-store=de_DE; vsf-locale=de_DE; vsf-currency=USD; vsf-country=PL; vsf-customer=12fg45; vsf-cart=123 "`
+      '"vsf-store=de_DE; vsf-locale=de_DE; vsf-currency=EUR; vsf-country=PL; vsf-customer=12fg45; vsf-cart=123 "',
     );
   });
 });

packages/theme/plugins/i18n.ts

@@ -15,14 +15,26 @@ const readStoreCookie = (app: NuxtAppOptions) => app.$cookies.get(cookieNames.st
  * Find locale code based on magento store code
  * @param storeCode {string} - magento store code
  * @param locales {array} - array with locales
- * @returns boolean
+ * @returns string
  */
 const findLocaleBasedOnStoreCode = (storeCode: string, locales: string[] | LocaleObject[]) => {
   if (locales.some((l) => typeof l !== 'string')) {
-    return !!(locales as LocaleObject[]).find((locale) => locale.code === storeCode);
+    return (locales as LocaleObject[]).find((locale) => locale.code === storeCode);
   }
 
-  return (locales as string[]).includes(storeCode);
+  return (locales as string[]).find((locale) => locale === storeCode);
+};
+
+/**
+ * Find defaultCurrency code based on magento store code
+ * @param storeCode {string} - magento store code
+ * @param locales {array} - array with locales
+ * @returns string
+ */
+const findCurrencyBasedOnStoreCode = (storeCode: string, locales: string[] | LocaleObject[]): string => {
+  const match = (locales as LocaleObject[]).find((locale) => locale.code === storeCode);
+
+  return match.defaultCurrency;
 };
 
 /**
@@ -39,15 +51,16 @@ const setDefaultLocale = async (i18n) => {
  *
  * @param apiState {ConfigState}
  * @param newStoreCode {string}
+ * @param currency {string}
  * @returns {string}
  */
-const prepareNewCookieString = (apiState: ConfigState, newStoreCode: string) => {
+const prepareNewCookieString = (apiState: ConfigState, newStoreCode: string, currency: string) => {
   const customerTokenCookie = apiState.getCustomerToken();
   const cartIdCookie = apiState.getCartId();
 
   let cookie = `vsf-store=${newStoreCode}; `;
   cookie += `vsf-locale=${newStoreCode}; `;
-  cookie += `vsf-currency=${apiState.getCurrency()}; `;
+  cookie += `vsf-currency=${currency}; `;
   cookie += `vsf-country=${apiState.getCountry()}; `;
 
   if (customerTokenCookie) {
@@ -61,11 +74,10 @@ const prepareNewCookieString = (apiState: ConfigState, newStoreCode: string) =>
   return cookie;
 };
 
-export default async ({ app }: Context) => {
+export default async ({ app, route }: Context) => {
   await app.$vsf.$magento.client.interceptors.request.use(async (request) => {
     const { i18n } = app;
-    const currentStoreCode = readStoreCookie(app);
-
+    const currentStoreCode = readStoreCookie(app) ?? route.path.split('/').find((element) => String(element));
     // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
     if (!currentStoreCode || !findLocaleBasedOnStoreCode(currentStoreCode, i18n.locales)) {
       await setDefaultLocale(i18n);
@@ -74,16 +86,19 @@ export default async ({ app }: Context) => {
     }
 
     const i18nCurrentLocaleCode = i18n.locale;
+
     const localeCookie = app.$cookies.get(cookieNames.localeCookieName);
 
     if (i18nCurrentLocaleCode !== localeCookie) {
       const apiState = app.$vsf.$magento.config.state as ConfigState;
+      const currency = findCurrencyBasedOnStoreCode(i18nCurrentLocaleCode, i18n.locales);
 
       apiState.setStore(i18nCurrentLocaleCode);
       apiState.setLocale(i18nCurrentLocaleCode);
+      apiState.setCurrency(currency);
 
       // eslint-disable-next-line no-param-reassign
-      request.headers.cookie = prepareNewCookieString(apiState, i18nCurrentLocaleCode);
+      request.headers.cookie = prepareNewCookieString(apiState, i18nCurrentLocaleCode, currency);
     }
 
     return request;