refactor(i18n): changed i18n middleware to plugin and fix store switc…

docs/.vuepress/config.js

@@ -106,7 +106,7 @@ module.exports = {
       {
         title: 'Reference',
         children: [
-          ['/middlewares/', 'Middlewares'],
+          ['/plugins/', 'Plugins'],
           ['/api-reference/', 'API Reference'],
         ]
       },

docs/middlewares/index.md → docs/plugins/index.md

@@ -1,10 +1,10 @@
-# Middlewares
+# Plugins
 
 Here you can find documentation for global Middlewares
 
 ## i18n
 
-i18n middleware is responsible for handling store changes after URL changes.
+i18n plugin 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.
@@ -25,4 +25,4 @@ client and server side.
 8. End
 
 
-![i18n flow](./i18n-middleware-diagram.png)
+![i18n flow](./i18n-plugin-diagram.png)

packages/theme/nuxt.config.js

@@ -227,11 +227,13 @@ export default {
       }
     },
   },
+  plugins: [
+    '~/plugins/i18n',
+  ],
   router: {
     extendRoutes(routes) {
       getRoutes(`${__dirname}/_theme`)
         .forEach((route) => routes.unshift(route));
     },
-    middleware: ['i18n'],
   },
 };

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

@@ -1,4 +1,4 @@
-import i18nMiddleware from '~/middleware/i18n';
+import i18nPlugin from '~/plugins/i18n';
 
 const localesMock = [
   {
@@ -25,6 +25,10 @@ const apiStateMock = {
   getCustomerToken: () => '12fg45',
 };
 
+const callbackRequest = {
+  headers: {},
+};
+
 const appMock = {
   $cookies: {
     get: jest.fn(),
@@ -36,6 +40,15 @@ const appMock = {
   },
   $vsf: {
     $magento: {
+      client: {
+        interceptors: {
+          request: {
+            use: (callback) => {
+              callback(callbackRequest);
+            },
+          },
+        },
+      },
       config: {
         state: {
           ...apiStateMock,
@@ -52,20 +65,20 @@ const appMock = {
   },
 };
 
-describe('i18n middleware', () => {
+describe('i18n plugin', () => {
   beforeEach(() => {
     jest.resetAllMocks();
   });
 
   it('Should read vsf-store cookie value', () => {
-    i18nMiddleware({ app: appMock });
+    i18nPlugin({ 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 });
+    i18nPlugin({ app: appMock });
 
     expect(appMock.i18n.setLocale).not.toHaveBeenCalled();
   });
@@ -78,7 +91,7 @@ describe('i18n middleware', () => {
 
   it('Should set default locale when vsf-store cookie is not exist', () => {
     appMock.$cookies.get.mockReturnValue(null);
-    i18nMiddleware({ app: appMock });
+    i18nPlugin({ app: appMock });
 
     expect(appMock.i18n.setLocale).toHaveBeenCalledWith('en');
   });
@@ -94,11 +107,11 @@ describe('i18n middleware', () => {
 
     testCaseAppMock.$cookies.get.mockReturnValueOnce('de_DE').mockReturnValueOnce('default');
 
-    i18nMiddleware({ app: testCaseAppMock });
+    i18nPlugin({ 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(
+    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 "`
     );
   });

packages/theme/middleware/i18n.js → packages/theme/plugins/i18n.js

@@ -53,27 +53,32 @@ const prepareNewCookieString = (apiState, newStoreCode) => {
   return cookie;
 };
 
-export default async ({ app }) => {
-  const { i18n } = app;
-  const currentStoreCode = readStoreCookie(app);
+export default ({ app }) => {
+  app.$vsf.$magento.client.interceptors.request.use(async (request) => {
 
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-  if (!currentStoreCode || !findLocaleBasedOnStoreCode(currentStoreCode, i18n.locales)) {
-    await setDefaultLocale(i18n);
+    const { i18n } = app;
+    const currentStoreCode = readStoreCookie(app);
 
-    return;
-  }
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    if (!currentStoreCode || !findLocaleBasedOnStoreCode(currentStoreCode, i18n.locales)) {
+      await setDefaultLocale(i18n);
 
-  const i18nCurrentLocaleCode = i18n.locale;
-  const localeCookie = app.$cookies.get(cookieNames.localeCookieName);
+      return;
+    }
 
-  if (i18nCurrentLocaleCode !== localeCookie) {
-    const apiState = app.$vsf.$magento.config.state;
+    const i18nCurrentLocaleCode = i18n.locale;
+    const localeCookie = app.$cookies.get(cookieNames.localeCookieName);
 
-    apiState.setStore(i18nCurrentLocaleCode);
-    apiState.setLocale(i18nCurrentLocaleCode);
+    if (i18nCurrentLocaleCode !== localeCookie) {
+      const apiState = app.$vsf.$magento.config.state;
 
-    // eslint-disable-next-line no-param-reassign
-    app.$vsf.$magento.config.axios.headers.cookie = prepareNewCookieString(apiState, i18nCurrentLocaleCode);
-  }
+      apiState.setStore(i18nCurrentLocaleCode);
+      apiState.setLocale(i18nCurrentLocaleCode);
+
+      // eslint-disable-next-line no-param-reassign
+      request.headers.cookie = prepareNewCookieString(apiState, i18nCurrentLocaleCode);
+    }
+
+    return request;
+  });
 };