[BUGFIX] Corriger le problème des locales disponibles non-identiques entre pix-site à pix-pro (PIX-14143)

pix-pro/i18n.config.ts

@@ -2,9 +2,11 @@ import { generateConfig } from '../shared/i18n.config';
 
 const reachableLocales = [
   {
+    // The "code" property should be renamed into "name": https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/Locale
     code: 'en',
     iso: 'en',
     file: 'en.js',
+    // The "name" property should be renamed into "displayName": https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/DisplayNames
     name: 'English',
     icon: 'globe-europe.svg',
     domain: process.env.DOMAIN_ORG,
@@ -27,6 +29,8 @@ const reachableLocales = [
   },
 ];
 
+const reachableLocaleNames = reachableLocales.map(reachableLocale => reachableLocale.code);
+
 const config = generateConfig(reachableLocales);
 export default { ...config };
-export { reachableLocales };
+export { reachableLocales, reachableLocaleNames };

pix-pro/nuxt.config.ts

@@ -1,5 +1,5 @@
 import { getRoutesToGenerate } from './services/get-routes-to-generate';
-import i18nConfig, { reachableLocales } from './i18n.config';
+import i18nConfig, { reachableLocales, reachableLocaleNames } from './i18n.config';
 
 export default async () => {
   return defineNuxtConfig({
@@ -28,6 +28,7 @@ export default async () => {
       public: {
         site: 'https://pro.pix.',
         availableLocales: reachableLocales,
+        availableLocaleNames: reachableLocaleNames,
       },
     },
     nitro: {

pix-site/i18n.config.ts

@@ -2,9 +2,11 @@ import { generateConfig } from '../shared/i18n.config';
 
 const reachableLocales = [
   {
+    // The "code" property should be renamed into "name": https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/Locale
     code: 'en',
     iso: 'en',
     file: 'en.js',
+    // The "name" property should be renamed into "displayName": https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames/DisplayNames
     name: 'English',
     icon: 'globe-europe.svg',
     domain: process.env.DOMAIN_ORG,
@@ -43,6 +45,8 @@ const reachableLocales = [
   },
 ];
 
+const reachableLocaleNames = reachableLocales.map(reachableLocale => reachableLocale.code);
+
 const config = generateConfig(reachableLocales);
 export default { ...config };
-export { reachableLocales };
+export { reachableLocales, reachableLocaleNames };

pix-site/nuxt.config.ts

@@ -1,5 +1,5 @@
 import { getRoutesToGenerate } from './services/get-routes-to-generate';
-import i18nConfig, { reachableLocales } from './i18n.config';
+import i18nConfig, { reachableLocales, reachableLocaleNames } from './i18n.config';
 
 export default async () => {
   const routes = process.env.NODE_ENV !== 'test' ? await getRoutesToGenerate({ locales: i18nConfig.locales }) : [];
@@ -24,6 +24,7 @@ export default async () => {
         siteDomain: process.env.SITE_DOMAIN,
         formKeysToMap: process.env.FORM_KEYS_TO_MAP || null,
         availableLocales: reachableLocales,
+        availableLocaleNames: reachableLocaleNames,
       },
     },
     nitro: {

shared/composables/useLocaleCookie.ts

@@ -1,32 +1,53 @@
+const LOCALE_COOKIE_NAME = 'locale';
+
 export default function useLocaleCookie() {
   const appConfig = useAppConfig();
   const runtimeConfig = useRuntimeConfig();
+
   const domainFrUrl = new URL(appConfig.domainFr);
   const domainOrgUrl = new URL(appConfig.domainOrg);
 
-  const previousLocaleCookie = useCookie('locale', {
-    maxAge: 31536000,
+  const availableLocaleNames = runtimeConfig.public.availableLocaleNames as Array<string>;
+
+  const previousLocaleCookieToDelete = useCookie(LOCALE_COOKIE_NAME, {
+    maxAge: 31536000, // 1 year
     sameSite: 'strict',
   });
 
-  const localeCookie = useCookie('locale', {
+  const localeCookie = useCookie(LOCALE_COOKIE_NAME, {
     domain: runtimeConfig.public.siteDomain === 'ORG' ? domainOrgUrl.hostname : domainFrUrl.hostname,
-    maxAge: 31536000,
+    maxAge: 31536000, // 1 year
     sameSite: 'strict',
   });
 
   // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   function setLocaleCookie(locale: string, callback?: Function): void {
     const localeCanonicalName = Intl.getCanonicalLocales(locale)?.[0];
-    if (previousLocaleCookie.value) {
-      previousLocaleCookie.value = null;
+
+    if (previousLocaleCookieToDelete.value) {
+      previousLocaleCookieToDelete.value = null;
     }
+
     localeCookie.value = localeCanonicalName;
     if (callback) callback();
   }
 
+  function getBestMatchingLocaleName(localeName: string) {
+    if (availableLocaleNames.includes(localeName)) {
+      return localeName;
+    }
+
+    const languageLocaleName = new Intl.Locale(localeName).language;
+    if (availableLocaleNames.includes(languageLocaleName)) {
+      return languageLocaleName;
+    }
+
+    return availableLocaleNames[0];
+  }
+
   return {
     localeCookie,
     setLocaleCookie,
+    getBestMatchingLocaleName,
   };
 }

shared/pages/index.vue

@@ -10,12 +10,14 @@ definePageMeta({
   layout: 'empty',
 });
 
-const { localeCookie } = useLocaleCookie();
+const { localeCookie, getBestMatchingLocaleName } = useLocaleCookie();
 const locale = localeCookie.value;
+
 onBeforeMount(() => {
   const router = useRouter();
+
   if (locale) {
-    return router.replace(`/${locale}/`);
+    return router.replace(`/${getBestMatchingLocaleName(locale)}/`);
   }
 });
 </script>

shared/tests/composables/useLocaleCookie.test.ts

@@ -3,6 +3,8 @@ import { mockNuxtImport } from '@nuxt/test-utils/runtime';
 
 import useLocaleCookie from '../../composables/useLocaleCookie';
 
+const availableLocaleNames = ['en', 'fr', 'fr-fr'];
+
 mockNuxtImport('useCookie', () => {
   return () => ({
     value: '',
@@ -18,6 +20,7 @@ mockNuxtImport('useRuntimeConfig', () => {
   return () => ({
     public: {
       siteDomain: 'ORG',
+      availableLocaleNames,
     },
   });
 });
@@ -74,4 +77,45 @@ describe('#useLocaleCookie', () => {
       });
     });
   });
+
+  describe('getBestMatchingLocaleName', () => {
+    describe('when wanted locale is available', () => {
+      test('returns the same locale name', () => {
+        // given
+        const { getBestMatchingLocaleName } = useLocaleCookie();
+
+        // when
+        const matchingLocaleName = getBestMatchingLocaleName('fr-fr');
+
+        // then
+        expect(matchingLocaleName).toEqual('fr-fr');
+      });
+    });
+
+    describe('when wanted locale is unavailable but an available locale with same language is', () => {
+      test('returns the same locale name', () => {
+        // given
+        const { getBestMatchingLocaleName } = useLocaleCookie();
+
+        // when
+        const matchingLocaleName = getBestMatchingLocaleName('fr-be');
+
+        // then
+        expect(matchingLocaleName).toEqual('fr');
+      });
+    });
+
+    describe('when wanted locale is unavailable and no available locale with same language is', () => {
+      test('returns the first available locale name', () => {
+        // given
+        const { getBestMatchingLocaleName } = useLocaleCookie();
+
+        // when
+        const matchingLocaleName = getBestMatchingLocaleName('nl-be');
+
+        // then
+        expect(matchingLocaleName).toEqual('en');
+      });
+    });
+  });
 });