🌐(frontend) add currentLocale to CunninghamProvider

In order to have the text of components from the
Cunningham library translated, we need to pass the current
locale to the CunninghamProvider.
We need to create a new ThemeProvider component that
will wrap the CunninghamProvider in order to have
react-query fully loaded.

Author: AntoLC

src/frontend/apps/e2e/__tests__/app-impress/help.spec.ts

@@ -1,6 +1,10 @@
 import { expect, test } from '@playwright/test';
 
-import { overrideConfig } from './utils-common';
+import {
+  TestLanguage,
+  overrideConfig,
+  waitForLanguageSwitch,
+} from './utils-common';
 
 test.describe('Help feature', () => {
   test.beforeEach(async ({ page }) => {
@@ -97,5 +101,30 @@ test.describe('Help feature', () => {
       await page.getByRole('button', { name: /skip/i }).click();
       await expect(modal).toBeHidden();
     });
+
+    test('Modal onboarding translated correctly', async ({ page }) => {
+      // switch to french
+      await waitForLanguageSwitch(page, TestLanguage.French);
+
+      await page.getByRole('button', { name: 'Open onboarding menu' }).click();
+
+      await page.getByRole('menuitem', { name: 'Onboarding' }).click();
+
+      const modal = page.getByLabel('Apprenez les principes fondamentaux');
+
+      await expect(modal.getByText('Découvrez Docs')).toBeVisible();
+      await expect(
+        modal.getByText(/Rédigez votre document facilement/).first(),
+      ).toBeVisible();
+      await expect(
+        modal.getByText(/Déplacez, dupliquez/).first(),
+      ).toBeVisible();
+      await expect(
+        modal.getByRole('button', { name: /Passer/i }),
+      ).toBeVisible();
+      await expect(
+        modal.getByRole('button', { name: /Suivant/i }),
+      ).toBeVisible();
+    });
   });
 });

src/frontend/apps/impress/src/core/AppProvider.tsx

@@ -1,4 +1,3 @@
-import { CunninghamProvider } from '@gouvfr-lasuite/cunningham-react';
 import {
   MutationCache,
   QueryClient,
@@ -7,12 +6,12 @@ import {
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 
-import { useCunninghamTheme } from '@/cunningham';
 import { Auth, KEY_AUTH, setAuthUrl } from '@/features/auth';
 import { useRouteChangeCompleteFocus } from '@/hooks/useRouteChangeCompleteFocus';
 import { useResponsiveStore } from '@/stores/';
 
 import { ConfigProvider } from './config/';
+import { ThemeProvider } from './config/ThemeProvider';
 
 export const DEFAULT_QUERY_RETRY = 1;
 
@@ -50,7 +49,6 @@ const queryClient = new QueryClient({
 });
 
 export function AppProvider({ children }: { children: React.ReactNode }) {
-  const { theme } = useCunninghamTheme();
   const { replace } = useRouter();
   useRouteChangeCompleteFocus();
 
@@ -74,11 +72,11 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <CunninghamProvider theme={theme}>
+      <ThemeProvider>
         <ConfigProvider>
           <Auth>{children}</Auth>
         </ConfigProvider>
-      </CunninghamProvider>
+      </ThemeProvider>
     </QueryClientProvider>
   );
 }

src/frontend/apps/impress/src/core/config/ThemeProvider.tsx

@@ -0,0 +1,15 @@
+import { CunninghamProvider } from '@gouvfr-lasuite/cunningham-react';
+
+import { useCunninghamTheme } from '@/cunningham';
+import { useLocales } from '@/i18n/useLocale';
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const { theme } = useCunninghamTheme();
+  const currentLocale = useLocales();
+
+  return (
+    <CunninghamProvider theme={theme} currentLocale={currentLocale}>
+      {children}
+    </CunninghamProvider>
+  );
+}

src/frontend/apps/impress/src/i18n/useLocale.ts

@@ -0,0 +1,32 @@
+import { DEFAULT_LOCALE } from '@gouvfr-lasuite/cunningham-react';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useConfig } from '@/core/config/api/useConfig';
+
+enum Locales {
+  enUS = 'en-US',
+  frFR = 'fr-FR',
+}
+
+export function useLocales() {
+  const { i18n } = useTranslation();
+  const { data: conf } = useConfig();
+  const [currentLocale, setCurrentLocale] = useState<Locales>(DEFAULT_LOCALE);
+  const resolvedLanguage = i18n.resolvedLanguage ?? i18n.language;
+
+  useEffect(() => {
+    const rawLocale =
+      conf?.LANGUAGES.find(([code]) =>
+        code.startsWith(resolvedLanguage),
+      )?.[0] ?? resolvedLanguage;
+    const [lang, region] = rawLocale.split('-');
+    const currentLocale = region
+      ? `${lang}-${region.toUpperCase()}`
+      : rawLocale;
+
+    setCurrentLocale(currentLocale as Locales);
+  }, [resolvedLanguage, conf?.LANGUAGES]);
+
+  return currentLocale;
+}