refactor: refactored i18n plugins (#794)

* M2-295. Refactored i18n plugins

* M2-300. Removed @vue-storefront/core dependency

Author: Marcin Kwiatkowski

.github/workflows/deploy-vue-storefront-cloud.yml

@@ -53,19 +53,19 @@ jobs:
     uses: ./.github/workflows/deployment-template.yml
     needs: build
     if: github.ref == 'refs/heads/main'
-    with: 
+    with:
       github_environment_name: production
       environment_code: demo-magento2
       target_url: https://demo-magento2.europe-west1.gcp.storefrontcloud.io
     secrets:
       cloud_username: ${{ secrets.CLOUD_USERNAME }}
       cloud_password: ${{ secrets.CLOUD_PASSWORD }}
-      
+
   deploy-develop:
     uses: ./.github/workflows/deployment-template.yml
     needs: build
     if: github.ref == 'refs/heads/develop'
-    with: 
+    with:
       github_environment_name: dev
       environment_code: demo-magento2-dev
       target_url: https://demo-magento2-dev.europe-west1.gcp.storefrontcloud.io
@@ -77,7 +77,7 @@ jobs:
     uses: ./.github/workflows/deployment-template.yml
     needs: build
     if: startsWith(github.ref, 'refs/heads/release')
-    with: 
+    with:
       github_environment_name: canary
       environment_code: demo-magento2-canary
       target_url: https://demo-magento2-canary.europe-west1.gcp.storefrontcloud.io
@@ -89,7 +89,7 @@ jobs:
     uses: ./.github/workflows/deployment-template.yml
     needs: build
     if: github.ref == 'refs/heads/enterprise'
-    with: 
+    with:
       github_environment_name: enterprise
       environment_code: demo-magento2-enterprise
       target_url: https://demo-magento2-enterprise.europe-west1.gcp.storefrontcloud.io

packages/theme/components/CurrencySelector/CurrenciesModal.vue

@@ -14,11 +14,7 @@
         <a
           href="/"
           :class="selectedCurrency === currency ? 'container__currency--selected-label' : ''"
-          @click.prevent="handleChanges({
-            callback: () => changeCurrency({id: currency}),
-            redirect: false,
-            refresh: true
-          })"
+          @click.prevent="changeCurrency({id: currency})"
         >
           <SfCharacteristic class="currency">
             <template #title>
@@ -42,7 +38,6 @@ import {
 import {
   useCurrency,
 } from '~/composables';
-import { useHandleChanges } from '~/helpers/magentoConfig/handleChanges';
 
 export default defineComponent({
   name: 'CurrenciesModal',
@@ -63,8 +58,6 @@ export default defineComponent({
       load: loadCurrencies,
     } = useCurrency();
 
-    const { handleChanges } = useHandleChanges();
-
     const availableCurrencies = computed(() => currencies.value?.available_currency_codes || []);
 
     onMounted(() => {
@@ -74,7 +67,6 @@ export default defineComponent({
 
     return {
       changeCurrency,
-      handleChanges,
       availableCurrencies,
     };
   },

packages/theme/components/StoreSwitcher/StoresModal.vue

@@ -17,13 +17,7 @@
               ? 'container__store--selected'
               : ''
           "
-          @click="
-            handleChanges({
-              callback: () => changeStore(store),
-              redirect: false,
-              windowRefresh: true,
-            })
-          "
+          @click.prevent="changeStore(store)"
         >
           <SfCharacteristic class="language">
             <template #title>
@@ -57,7 +51,6 @@ import {
 } from '@storefront-ui/vue';
 import { useStore } from '~/composables';
 import { storeGetters, storeConfigGetters } from '~/getters';
-import { useHandleChanges } from '~/helpers/magentoConfig/handleChanges';
 
 export default defineComponent({
   name: 'StoresModal',
@@ -73,8 +66,6 @@ export default defineComponent({
   },
   emits: ['closeModal'],
   setup() {
-    const { handleChanges } = useHandleChanges();
-
     const {
       stores,
       change: changeStore,
@@ -91,7 +82,6 @@ export default defineComponent({
     return {
       storeGetters,
       storeConfigGetters,
-      handleChanges,
       availableStores,
       changeStore,
     };

packages/theme/composables/useCurrency/index.ts

@@ -40,6 +40,7 @@ const useCurrency = (): UseCurrency => {
 
     try {
       app.$vsf.$magento.config.state.setCurrency(params.id);
+      window.location.reload();
     } catch (err) {
       Logger.debug('[ERROR] useCurrency/change', err);
       error.value.change = err;

packages/theme/composables/useStore/index.ts

@@ -43,6 +43,8 @@ const useStore: UseStore = (): UseStoreInterface => {
       app.$vsf.$magento.config.state.setStore(storeConfigGetters.getCode(store));
       app.$vsf.$magento.config.state.setCurrency(storeConfigGetters.getCurrency(store));
       app.$vsf.$magento.config.state.setLocale(storeConfigGetters.getCode(store));
+      const newStoreUrl = app.switchLocalePath(storeConfigGetters.getCode(store));
+      window.location.replace(newStoreUrl);
     } catch (err) {
       error.value.change = err;
     }

packages/theme/helpers/magentoConfig/handleChanges.ts

@@ -1,31 +1,8 @@
 /* eslint-disable unicorn/prefer-module */
 const path = require('path');
 
-const mapI18nSettings = (i18n) => ({
-  locales: i18n.locales.map(({ label, code }) => ({ name: code, label })),
-});
-
-const isNuxtI18nUsed = (moduleOptions) => moduleOptions.i18n && moduleOptions.i18n.useNuxtI18nConfig;
-
-const getMissingFields = (options) => [
-  'locales',
-].filter((o) => options[o] === undefined);
-
 // eslint-disable-next-line func-names
-export default function (moduleOptions) {
-  const options = isNuxtI18nUsed(moduleOptions)
-    ? {
-      ...moduleOptions,
-      ...mapI18nSettings(this.options.i18n),
-    }
-    : moduleOptions;
-
-  const missingFields = getMissingFields(options);
-
-  if (missingFields.length > 0) {
-    throw new Error(`Please provide missing i18n fields: (${missingFields.join(', ')})`);
-  }
-
+export default function (options) {
   this.extendBuild((config) => {
     // eslint-disable-next-line no-param-reassign
     config.resolve.alias['@vue-storefront/magento-api$'] = require.resolve('@vue-storefront/magento-api');

packages/theme/modules/magento/index.ts

@@ -67,27 +67,21 @@ export default () => {
       '@nuxtjs/style-resources',
       '@nuxtjs/device',
       ['@vue-storefront/nuxt', {
-        // @core-development-only-start
-        coreDevelopment: true,
-        // @core-development-only-end
-        useRawSource: {
-          dev: [
-            '@vue-storefront/core',
-          ],
-          prod: [
-            '@vue-storefront/core',
-          ],
-        },
         // selectively disabling certain @vue-storefront/core plugins for migration
         context: false,
         logger: false,
         ssr: false,
         sfui: false,
+        i18nExtension: false,
+        e2e: true,
+        performance: {
+          httpPush: false,
+          purgeCSS: {
+            enabled: false,
+          },
+        },
       }],
       ['~/modules/magento', {
-        i18n: {
-          useNuxtI18nConfig: true,
-        },
         cookies,
         externalCheckout,
         defaultStore,
@@ -149,11 +143,6 @@ export default () => {
         },
       ],
       defaultLocale: 'default',
-      autoChangeCookie: {
-        currency: false,
-        locale: false,
-        country: false,
-      },
       lazy: true,
       seo: true,
       langDir: 'lang/',

packages/theme/nuxt.config.js

@@ -121,8 +121,5 @@ describe('i18n plugin', () => {
     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=EUR; vsf-country=PL; vsf-customer=12fg45; vsf-cart=123 "',
-    );
   });
 });

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

@@ -60,34 +60,6 @@ const setDefaultLocale = async (i18n) => {
   await i18n.setLocale(i18n.defaultLocale);
 };
 
-/**
- * Prepare new cookie string based on app state.
- *
- * @param apiState {ConfigState}
- * @param newStoreCode {string}
- * @param currency {string}
- * @returns {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=${currency}; `;
-  cookie += `vsf-country=${apiState.getCountry()}; `;
-
-  if (customerTokenCookie) {
-    cookie += `vsf-customer=${customerTokenCookie}; `;
-  }
-
-  if (cartIdCookie) {
-    cookie += `vsf-cart=${cartIdCookie} `;
-  }
-
-  return cookie;
-};
-
 export default async ({ app, route }: Context) => {
   await app.$vsf.$magento.client.interceptors.request.use(async (request) => {
     const { i18n } = app;
@@ -110,9 +82,6 @@ export default async ({ app, route }: Context) => {
       apiState.setStore(i18nCurrentLocaleCode);
       apiState.setLocale(i18nCurrentLocaleCode);
       apiState.setCurrency(currency);
-
-      // eslint-disable-next-line no-param-reassign
-      request.headers.cookie = prepareNewCookieString(apiState, i18nCurrentLocaleCode, currency);
     }
 
     return request;