Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 27, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 20 additions & 15 deletions packages/theme/composables/useMagentoConfiguration.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
20 changes: 15 additions & 5 deletions packages/theme/plugins/__tests__/i18n.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
];

Expand All @@ -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: {
Expand All @@ -54,6 +62,7 @@ const appMock = {
...apiStateMock,
setStore: jest.fn(),
setLocale: jest.fn(),
setCurrency: jest.fn(),
},
axios: {
headers: {
Expand All @@ -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();
});
Expand All @@ -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');
});
Expand All @@ -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 "',
);
});
});
33 changes: 24 additions & 9 deletions packages/theme/plugins/i18n.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
};

/**
Expand All @@ -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) {
Expand All @@ -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);
Expand All @@ -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;
Expand Down