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

…her by url issues
vuestorefront · Jan 17, 2022 · 78dd867 · 78dd867
1 parent fbb1598
commit 78dd867
Show file tree

Hide file tree

Showing 7 changed files with 26,378 additions and 19,958 deletions.
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -106,7 +106,7 @@ module.exports = {
       {
         title: 'Reference',
         children: [
-          ['/middlewares/', 'Middlewares'],
+          ['/plugins/', 'Plugins'],
           ['/api-reference/', 'API Reference'],
         ]
       },

diff --git a/docs/middlewares/i18n-middleware-diagram.png → docs/plugins/i18n-plugin-diagram.png b/docs/middlewares/i18n-middleware-diagram.png → docs/plugins/i18n-plugin-diagram.png
diff --git a/docs/middlewares/index.md → docs/plugins/index.md b/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)
diff --git a/packages/theme/nuxt.config.js b/packages/theme/nuxt.config.js
@@ -227,11 +227,14 @@ export default {
       }
     },
   },
+  plugins: [
+    '~/plugins/i18n',
+  ],
   router: {
     extendRoutes(routes) {
       getRoutes(`${__dirname}/_theme`)
         .forEach((route) => routes.unshift(route));
     },
-    middleware: ['i18n'],
+    //middleware: ['i18n'],
   },
 };
diff --git a/...s/theme/middleware/__tests__/i18n.spec.js → ...ages/theme/plugins/__tests__/i18n.spec.js b/...s/theme/middleware/__tests__/i18n.spec.js → ...ages/theme/plugins/__tests__/i18n.spec.js
@@ -1,4 +1,4 @@
-import i18nMiddleware from '~/middleware/i18n';
+import i18nMiddleware 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,7 +65,7 @@ const appMock = {
   },
 };
 
-describe('i18n middleware', () => {
+describe('i18n plugin', () => {
   beforeEach(() => {
     jest.resetAllMocks();
   });
@@ -98,7 +111,7 @@ describe('i18n middleware', () => {
 
     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 "`
     );
   });

diff --git a/packages/theme/middleware/i18n.js → packages/theme/plugins/i18n.js b/packages/theme/middleware/i18n.js → packages/theme/plugins/i18n.js
@@ -53,27 +53,38 @@ const prepareNewCookieString = (apiState, newStoreCode) => {
   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);
+export default ({ app, redirect }) => {
+  let once = true;
 
-    return;
-  }
+  app.$vsf.$magento.client.interceptors.request.use(async (r) => {
 
-  const i18nCurrentLocaleCode = i18n.locale;
-  const localeCookie = app.$cookies.get(cookieNames.localeCookieName);
 
-  if (i18nCurrentLocaleCode !== localeCookie) {
-    const apiState = app.$vsf.$magento.config.state;
+    const { i18n } = app;
+    const currentStoreCode = readStoreCookie(app);
 
-    apiState.setStore(i18nCurrentLocaleCode);
-    apiState.setLocale(i18nCurrentLocaleCode);
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    if (!currentStoreCode || !findLocaleBasedOnStoreCode(currentStoreCode, i18n.locales)) {
+      await setDefaultLocale(i18n);
 
-    // eslint-disable-next-line no-param-reassign
-    app.$vsf.$magento.config.axios.headers.cookie = prepareNewCookieString(apiState, i18nCurrentLocaleCode);
-  }
+      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
+      r.headers.cookie = prepareNewCookieString(apiState, i18nCurrentLocaleCode);
+
+    }
+
+
+    return r;
+  });
 };