feat(middleware): added i18n route middleware (#408)

* feat(middleware): added i18n route middleware

closes #378

* refactor(middleware): i18n middleware: adjustements

Author: Marcin Kwiatkowski

docs/middlewares/i18n-middleware-diagram.png

@@ -0,0 +1,28 @@
+# Middlewares
+
+Here you can find documentation for global Middlewares
+
+## i18n
+
+i18n middleware is responsible for handling store changes after URL changes.
+
+It checks if locale in i18n module is changes and update `vsf-store` and `vsf-locale` cookie to match new store on both
+client and server side.
+
+### Flow
+1. Start: load middleware
+2. Read current Magento Store Code from vsf-store cookie
+3. Is store code found?
+   2. No: Set default locale if isn't already set
+      1. End
+4. Yes: Check if current store code has corresponding locale in Nuxt.config.js
+   1. No: Set default locale if isn't already set
+      1. End
+5. Yes: If  corresponded locale is different than current locale
+   1. No: End
+6. Yes: set new locale
+7. Go forward (load  the page with correct locale and date)
+8. End
+
+
+![i18n flow](./i18n-middleware-diagram.png)

docs/middlewares/index.md

@@ -1,5 +1,4 @@
-import { StoreConfig } from '@vue-storefront/magento-api';
-import { isoToCode } from '../helpers/isoToCode';
+import { StoreConfig } from '@vue-storefront/magento-api';;
 
 const getCode = (config: StoreConfig) => config.store_code;
 const getTitle = (config: StoreConfig) => config.default_title;

packages/composables/src/getters/storeConfigGetters.ts

@@ -0,0 +1,105 @@
+import i18nMiddleware from '~/middleware/i18n';
+
+const localesMock = [
+  {
+    code: 'default',
+    file: 'en.js',
+    iso: 'en_US',
+  },
+  {
+    code: 'de_DE',
+    file: 'de.js',
+    iso: 'de_DE',
+  },
+  {
+    code: 'nl_NL',
+    file: 'en.js',
+    iso: 'en_US',
+  },
+];
+
+const apiStateMock = {
+  getCurrency: () => 'USD',
+  getCountry: () => 'PL',
+  getCartId: () => '123',
+  getCustomerToken: () => '12fg45',
+};
+
+const appMock = {
+  $cookies: {
+    get: jest.fn(),
+  },
+  i18n: {
+    defaultLocale: 'en',
+    setLocale: jest.fn(),
+    locales: localesMock,
+  },
+  $vsf: {
+    $magento: {
+      config: {
+        state: {
+          ...apiStateMock,
+          setStore: jest.fn(),
+          setLocale: jest.fn(),
+        },
+        axios: {
+          headers: {
+            cookie: null,
+          },
+        },
+      },
+    },
+  },
+};
+
+describe('i18n middleware', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('Should read vsf-store cookie value', () => {
+    i18nMiddleware({ app: appMock });
+
+    expect(appMock.$cookies.get).toHaveBeenCalledWith('vsf-store');
+  });
+
+  it('Should find locale based on magento store code', () => {
+    appMock.$cookies.get.mockReturnValue('default');
+    i18nMiddleware({ app: appMock });
+
+    expect(appMock.i18n.setLocale).not.toHaveBeenCalled();
+  });
+
+  it('Should set default locale when there is no locale that match given magento store code', () => {
+    appMock.$cookies.get.mockReturnValue('pl_PL');
+
+    expect(appMock.i18n.setLocale).not.toHaveBeenCalledTimes(1);
+  });
+
+  it('Should set default locale when vsf-store cookie is not exist', () => {
+    appMock.$cookies.get.mockReturnValue(null);
+    i18nMiddleware({ app: appMock });
+
+    expect(appMock.i18n.setLocale).toHaveBeenCalledWith('en');
+  });
+
+  it('Should change locale if a new selected store has a different locale', () => {
+    const testCaseAppMock = {
+      ...appMock,
+      i18n: {
+        ...appMock.i18n,
+        locale: 'de_DE',
+      },
+    };
+
+    testCaseAppMock.$cookies.get.mockReturnValueOnce('de_DE').mockReturnValueOnce('default');
+
+    i18nMiddleware({ app: testCaseAppMock });
+
+    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.axios.headers.cookie).toMatchInlineSnapshot(
+      `"vsf-store=de_DE; vsf-locale=de_DE; vsf-currency=USD; vsf-country=PL; vsf-customer=12fg45; vsf-cart=123 "`
+    );
+  });
+});

packages/composables/src/helpers/isoToCode.ts

@@ -0,0 +1,79 @@
+import cookieNames from '~/enums/cookieNameEnum';
+
+/**
+ * Read vsf-store cookie value.
+ *
+ * @param app {NuxtAppOptions} - Nuxt App options object
+ * @returns {string} - vsf-store cookie value
+ */
+const readStoreCookie = (app) => app.$cookies.get(cookieNames.storeCookieName);
+
+/**
+ * Find locale code based on magento store code
+ * @param storeCode {string} - magento store code
+ * @param locales {array} - array with locales
+ * @returns boolean
+ */
+const findLocaleBasedOnStoreCode = (storeCode, locales) => locales.find((locale) => locale.code === storeCode);
+
+/**
+ * Set default locale
+ * @param i18n {i18n} i18n API
+ * @returns {Promise<void>}
+ */
+const setDefaultLocale = async (i18n) => {
+  await i18n.setLocale(i18n.defaultLocale);
+};
+
+/**
+ * Prepare new cookie string based on app state.
+ *
+ * @param apiState {ConfigState}
+ * @returns {string}
+ */
+const prepareNewCookieString = (apiState, newStoreCode) => {
+  let cookie = `vsf-store=${newStoreCode}; `;
+
+  cookie += `vsf-locale=${newStoreCode}; `;
+  cookie += `vsf-currency=${apiState.getCurrency()}; `;
+  cookie += `vsf-country=${apiState.getCountry()}; `;
+
+  const customerTokenCookie = apiState.getCustomerToken();
+
+  if (customerTokenCookie) {
+    cookie += `vsf-customer=${customerTokenCookie}; `;
+  }
+
+  const cartIdCookie = apiState.getCartId();
+
+  if (cartIdCookie) {
+    cookie += `vsf-cart=${cartIdCookie} `;
+  }
+
+  return cookie;
+};
+
+export default async ({ app }) => {
+  const { i18n } = app;
+  const currentStoreCode = readStoreCookie(app);
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+  if (!currentStoreCode || !findLocaleBasedOnStoreCode(currentStoreCode, i18n.locales)) {
+    await setDefaultLocale(i18n);
+
+    return;
+  }
+
+  const i18nCurrentLocaleCode = i18n.locale;
+  const localeCookie = app.$cookies.get(cookieNames.localeCookieName);
+
+  if (i18nCurrentLocaleCode !== localeCookie) {
+    const apiState = app.$vsf.$magento.config.state;
+
+    apiState.setStore(i18nCurrentLocaleCode);
+    apiState.setLocale(i18nCurrentLocaleCode);
+
+    // eslint-disable-next-line no-param-reassign
+    app.$vsf.$magento.config.axios.headers.cookie = prepareNewCookieString(apiState, i18nCurrentLocaleCode);
+  }
+};