From 399f87e480d2438fdeb185ff2e610789d2ec5b59 Mon Sep 17 00:00:00 2001 From: Bartosz Herba Date: Thu, 27 Jan 2022 11:44:11 +0100 Subject: [PATCH] fix(theme): fix setting proper store and locale if there is no cookie --- .../composables/useMagentoConfiguration.ts | 35 +++++++++++-------- packages/theme/plugins/__tests__/i18n.spec.js | 20 ++++++++--- packages/theme/plugins/i18n.ts | 33 ++++++++++++----- 3 files changed, 59 insertions(+), 29 deletions(-) diff --git a/packages/theme/composables/useMagentoConfiguration.ts b/packages/theme/composables/useMagentoConfiguration.ts index 154e21fff..bbda83fcc 100644 --- a/packages/theme/composables/useMagentoConfiguration.ts +++ b/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 { diff --git a/packages/theme/plugins/__tests__/i18n.spec.js b/packages/theme/plugins/__tests__/i18n.spec.js index 91bd489e3..52b22f301 100644 --- a/packages/theme/plugins/__tests__/i18n.spec.js +++ b/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 "', ); }); }); diff --git a/packages/theme/plugins/i18n.ts b/packages/theme/plugins/i18n.ts index e7e2e5e66..d58bdddd8 100644 --- a/packages/theme/plugins/i18n.ts +++ b/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;