From 5f2c472726df55370f9fd1ecaae258c218b85bf2 Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Fri, 13 Mar 2026 12:27:53 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=90(frontend)=20add=20currentLocale=20?= =?UTF-8?q?to=20CunninghamProvider?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- .../e2e/__tests__/app-impress/help.spec.ts | 31 +++++++++++++++++- .../apps/impress/src/core/AppProvider.tsx | 8 ++--- .../impress/src/core/config/ThemeProvider.tsx | 15 +++++++++ .../apps/impress/src/i18n/useLocale.ts | 32 +++++++++++++++++++ 4 files changed, 80 insertions(+), 6 deletions(-) create mode 100644 src/frontend/apps/impress/src/core/config/ThemeProvider.tsx create mode 100644 src/frontend/apps/impress/src/i18n/useLocale.ts diff --git a/src/frontend/apps/e2e/__tests__/app-impress/help.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/help.spec.ts index 2d503237b..1ee405deb 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/help.spec.ts +++ b/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(); + }); }); }); diff --git a/src/frontend/apps/impress/src/core/AppProvider.tsx b/src/frontend/apps/impress/src/core/AppProvider.tsx index 3ecff227a..c3e43a849 100644 --- a/src/frontend/apps/impress/src/core/AppProvider.tsx +++ b/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 ( - + {children} - + ); } diff --git a/src/frontend/apps/impress/src/core/config/ThemeProvider.tsx b/src/frontend/apps/impress/src/core/config/ThemeProvider.tsx new file mode 100644 index 000000000..821efa5ee --- /dev/null +++ b/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 ( + + {children} + + ); +} diff --git a/src/frontend/apps/impress/src/i18n/useLocale.ts b/src/frontend/apps/impress/src/i18n/useLocale.ts new file mode 100644 index 000000000..00cef80bc --- /dev/null +++ b/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(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; +}