From 8dd7671d1ffc89bc63bbebb14eab8ec75e952b3e Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Fri, 4 Oct 2024 13:27:53 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=90(frontend)=20add=20language=20name?=
 =?UTF-8?q?=20to=20LanguagePicker?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The language picker were only showing the language
code, now it shows the language name.
---
 .../apps/e2e/__tests__/app-impress/language.spec.ts       | 8 +++++---
 .../apps/impress/src/features/language/LanguagePicker.tsx | 3 ++-
 src/frontend/apps/impress/src/i18n/conf.ts                | 5 ++++-
 src/frontend/apps/impress/src/i18n/initI18n.ts            | 2 +-
 src/frontend/apps/impress/src/i18n/utils.ts               | 4 +++-
 5 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/frontend/apps/e2e/__tests__/app-impress/language.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/language.spec.ts
index b81d7331..cc787605 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/language.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-impress/language.spec.ts
@@ -13,9 +13,11 @@ test.describe('Language', () => {
     ).toBeVisible();
 
     const header = page.locator('header').first();
-    await header.getByRole('combobox').getByText('EN').click();
-    await header.getByRole('option', { name: 'FR' }).click();
-    await expect(header.getByRole('combobox').getByText('FR')).toBeVisible();
+    await header.getByRole('combobox').getByText('English').click();
+    await header.getByRole('option', { name: 'Français' }).click();
+    await expect(
+      header.getByRole('combobox').getByText('Français'),
+    ).toBeVisible();
 
     await expect(
       page.getByRole('button', {
diff --git a/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx b/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx
index e40a8475..8dce8157 100644
--- a/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx
+++ b/src/frontend/apps/impress/src/features/language/LanguagePicker.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
 import { Box, Text } from '@/components/';
+import { LANGUAGES_ALLOWED } from '@/i18n/conf';
 
 import IconLanguage from './assets/icon-language.svg?url';
 
@@ -49,7 +50,7 @@ export const LanguagePicker = () => {
           $align="center"
         >
           <Image priority src={IconLanguage} alt={t('Language Icon')} />
-          <Text $theme="primary">{lang.toUpperCase()}</Text>
+          <Text $theme="primary">{LANGUAGES_ALLOWED[lang]}</Text>
         </Box>
       ),
     }));
diff --git a/src/frontend/apps/impress/src/i18n/conf.ts b/src/frontend/apps/impress/src/i18n/conf.ts
index 9b2b1f05..d58f5730 100644
--- a/src/frontend/apps/impress/src/i18n/conf.ts
+++ b/src/frontend/apps/impress/src/i18n/conf.ts
@@ -1,3 +1,6 @@
-export const LANGUAGES_ALLOWED = ['en', 'fr'];
+export const LANGUAGES_ALLOWED: { [key: string]: string } = {
+  en: 'English',
+  fr: 'Français',
+};
 export const LANGUAGE_LOCAL_STORAGE = 'impress-language';
 export const BASE_LANGUAGE = 'fr';
diff --git a/src/frontend/apps/impress/src/i18n/initI18n.ts b/src/frontend/apps/impress/src/i18n/initI18n.ts
index 7d601c1f..f5a8f4be 100644
--- a/src/frontend/apps/impress/src/i18n/initI18n.ts
+++ b/src/frontend/apps/impress/src/i18n/initI18n.ts
@@ -13,7 +13,7 @@ i18n
     interpolation: {
       escapeValue: false,
     },
-    preload: LANGUAGES_ALLOWED,
+    preload: Object.keys(LANGUAGES_ALLOWED),
     nsSeparator: '||',
   })
   .catch(() => {
diff --git a/src/frontend/apps/impress/src/i18n/utils.ts b/src/frontend/apps/impress/src/i18n/utils.ts
index 8b520ca7..edf51715 100644
--- a/src/frontend/apps/impress/src/i18n/utils.ts
+++ b/src/frontend/apps/impress/src/i18n/utils.ts
@@ -22,5 +22,7 @@ export const getLanguage = () => {
 
   const language = splitLocaleCode(languageStore).language;
 
-  return LANGUAGES_ALLOWED.includes(language) ? language : BASE_LANGUAGE;
+  return Object.keys(LANGUAGES_ALLOWED).includes(language)
+    ? language
+    : BASE_LANGUAGE;
 };