Hosting Dashboard: Introduce I18nProvider to make translation work correctly

client/boot/locale.js

@@ -26,7 +26,7 @@ export function getLocaleFromQueryParam() {
 	return query.get( 'locale' );
 }
 
-export const setupLocale = ( currentUser, reduxStore ) => {
+export const setupLocale = ( currentUser, reduxStore = null ) => {
 	if ( config.isEnabled( 'i18n/empathy-mode' ) && currentUser.i18n_empathy_mode ) {
 		initLanguageEmpathyMode();
 	}
@@ -49,34 +49,51 @@ export const setupLocale = ( currentUser, reduxStore ) => {
 		i18n.setLocale( localeData );
 		const localeSlug = i18n.getLocaleSlug();
 		const localeVariant = i18n.getLocaleVariant();
-		reduxStore.dispatch( { type: LOCALE_SET, localeSlug, localeVariant } );
+		reduxStore?.dispatch( { type: LOCALE_SET, localeSlug, localeVariant } );
 		// Propagate the locale to @automattic/number-formatters
 		setLocaleNumberFormatters( localeVariant || localeSlug );
 
 		if ( localeSlug ) {
 			loadUserUndeployedTranslations( localeSlug );
 		}
-	} else if ( currentUser && currentUser.localeSlug ) {
+		return localeVariant || localeSlug;
+	}
+
+	if ( currentUser && ( currentUser.localeSlug || currentUser.language ) ) {
 		if ( shouldUseFallbackLocale ) {
 			// Use user locale fallback slug
-			reduxStore.dispatch( setLocale( userLocaleSlug ) );
-		} else {
-			// Use the current user's and load traslation data with a fetch request
-			reduxStore.dispatch( setLocale( currentUser.localeSlug, currentUser.localeVariant ) );
+			reduxStore?.dispatch( setLocale( userLocaleSlug ) );
+			return userLocaleSlug;
 		}
-	} else if ( bootstrappedLocaleSlug ) {
+
+		// Use the current user's and load translation data with a fetch request
+		reduxStore?.dispatch(
+			setLocale( currentUser.localeSlug || currentUser.language, currentUser.localeVariant )
+		);
+		return currentUser.localeVariant || currentUser.localeSlug || currentUser.language;
+	}
+
+	if ( bootstrappedLocaleSlug ) {
 		// Use locale slug from bootstrapped language manifest object
-		reduxStore.dispatch( setLocale( bootstrappedLocaleSlug ) );
-	} else if ( getLocaleFromQueryParam() ) {
+		reduxStore?.dispatch( setLocale( bootstrappedLocaleSlug ) );
+		return bootstrappedLocaleSlug;
+	}
+
+	if ( getLocaleFromQueryParam() ) {
 		// For logged out Calypso pages, set the locale from query param
 		const pathLocaleSlug = getLocaleFromQueryParam();
-		pathLocaleSlug && reduxStore.dispatch( setLocale( pathLocaleSlug, '' ) );
-	} else if ( ! window.hasOwnProperty( 'localeFromRoute' ) ) {
+		pathLocaleSlug && reduxStore?.dispatch( setLocale( pathLocaleSlug, '' ) );
+		return pathLocaleSlug;
+	}
+
+	if ( ! window.hasOwnProperty( 'localeFromRoute' ) ) {
 		// For logged out Calypso pages, set the locale from path if we cannot get the locale from the route on the server side
 		const pathLocaleSlug = getLocaleFromPathname();
-		pathLocaleSlug && reduxStore.dispatch( setLocale( pathLocaleSlug, '' ) );
+		pathLocaleSlug && reduxStore?.dispatch( setLocale( pathLocaleSlug, '' ) );
 		recordTracksEvent( 'calypso_locale_set', { path: window.location.pathname } );
+		return pathLocaleSlug;
 	}
 
 	// If user is logged out and translations are not bootstrapped, we assume default locale
+	return '';
 };

client/dashboard/.eslintrc.js

@@ -7,12 +7,19 @@ module.exports = {
 					{
 						group: [
 							'calypso/*',
+							'!calypso/boot',
+							'calypso/boot/*',
+							'!calypso/boot/locale',
 							// Allowed: calypso/lib/wp
 							'!calypso/lib',
 							'calypso/lib/*',
 							'!calypso/lib/wp',
+							'!calypso/lib/i18n-utils',
+							'calypso/lib/i18n-utils/*',
+							'!calypso/lib/i18n-utils/switch-locale',
 							'!calypso/components',
 							'calypso/components/*',
+							'!calypso/components/calypso-i18n-provider',
 							// Allowed: calypso/assets/icons
 							'!calypso/assets',
 							'calypso/assets/*',

client/dashboard/app/i18n/index.tsx

@@ -0,0 +1,26 @@
+import defaultCalypsoI18n from 'i18n-calypso';
+import { useEffect } from 'react';
+import { setupLocale } from 'calypso/boot/locale';
+import CalypsoI18nProvider from 'calypso/components/calypso-i18n-provider';
+import switchLocale from 'calypso/lib/i18n-utils/switch-locale';
+import { useAuth } from '../auth';
+
+export function I18nProvider( { children }: { children: React.ReactNode } ) {
+	const { user } = useAuth();
+
+	useEffect( () => {
+		if ( ! user.language ) {
+			return;
+		}
+
+		const locale = setupLocale( user );
+
+		// The `switchLocale` function is normally called within the `setLocale` action. However,
+		// since we don't have access to the Redux store in this context, we need to call it manually.
+		if ( locale ) {
+			switchLocale( locale );
+		}
+	}, [ user.language ] );
+
+	return <CalypsoI18nProvider i18n={ defaultCalypsoI18n }>{ children }</CalypsoI18nProvider>;
+}

client/dashboard/app/layout.tsx

@@ -3,6 +3,7 @@ import { RouterProvider } from '@tanstack/react-router';
 import { useMemo } from 'react';
 import { AuthProvider, useAuth } from './auth';
 import { AppProvider, type AppConfig } from './context';
+import { I18nProvider } from './i18n';
 import { queryClient } from './query-client';
 import { getRouter } from './router';
 
@@ -17,7 +18,9 @@ function Layout( { config }: { config: AppConfig } ) {
 		<AppProvider config={ config }>
 			<QueryClientProvider client={ queryClient }>
 				<AuthProvider>
-					<RouterProviderWithAuth config={ config } />
+					<I18nProvider>
+						<RouterProviderWithAuth config={ config } />
+					</I18nProvider>
 				</AuthProvider>
 			</QueryClientProvider>
 		</AppProvider>

client/dashboard/data/types.ts

@@ -12,6 +12,7 @@ export interface User {
 	username: string;
 	display_name: string;
 	avatar_URL?: string;
+	language: string;
 }
 
 export interface SiteDomain {