diff --git a/ui-core/src/participant/I18nProvider.tsx b/ui-core/src/participant/I18nProvider.tsx index 9d7fe15b24..2538a40382 100644 --- a/ui-core/src/participant/I18nProvider.tsx +++ b/ui-core/src/participant/I18nProvider.tsx @@ -104,3 +104,27 @@ export function I18nProvider({ defaultLanguage, portalShortcode, environmentName } } + +//Juniper and B2C use slightly different language codes. For example, Simplified Chinese is "zh" in Juniper, +//but "zh-hans" in B2C. This mapping is used to convert Juniper language codes into B2C locale codes. +const JUNIPER_TO_B2C_LOCALE_MAP: Record = { + 'en': 'en', + 'es': 'es', + 'de': 'de', + 'hi': 'hi', + 'ru': 'ru', + 'pt': 'pt-pt', + 'ja': 'ja', + 'it': 'it', + 'fr': 'fr', + 'pl': 'pl', + 'tr': 'tr', + 'zh': 'zh-hans', + 'dev': 'en' //our custom "dev" language should just use English in b2c +} + +//This defaults to English to guarantee that B2C will function even if the language is unsupported. +//The user can always use in-browser translations if needed, and English is our most reliable language. +export const getB2CLocale = (key: string): string => { + return JUNIPER_TO_B2C_LOCALE_MAP[key] || 'en' +} diff --git a/ui-participant/src/Navbar.tsx b/ui-participant/src/Navbar.tsx index 852adee4ba..5a4b86c9cf 100644 --- a/ui-participant/src/Navbar.tsx +++ b/ui-participant/src/Navbar.tsx @@ -3,7 +3,8 @@ import React from 'react' import Api, { getEnvSpec } from 'api/api' import { ParticipantNavbar, - useI18n + useI18n, + getB2CLocale } from '@juniper/ui-core' import { useUser } from 'providers/UserProvider' import { useConfig } from 'providers/ConfigProvider' @@ -54,7 +55,7 @@ export default function Navbar(props: NavbarProps) { portalEnvironment: envSpec.envName, portalShortcode: envSpec.shortcode as string, // eslint-disable-next-line camelcase - ui_locales: selectedLanguage + ui_locales: getB2CLocale(selectedLanguage) } }) } diff --git a/ui-participant/src/landing/registration/Registration.test.tsx b/ui-participant/src/landing/registration/Registration.test.tsx index 189ed97189..7e49b7e946 100644 --- a/ui-participant/src/landing/registration/Registration.test.tsx +++ b/ui-participant/src/landing/registration/Registration.test.tsx @@ -15,7 +15,7 @@ describe('Registration', () => { }) const { RoutedComponent } = setupRouterTest( - + ) @@ -29,7 +29,7 @@ describe('Registration', () => { portalEnvironment: 'live', portalShortcode: undefined, // eslint-disable-next-line camelcase - ui_locales: 'dev' + ui_locales: 'es' } }) }) diff --git a/ui-participant/src/landing/registration/Registration.tsx b/ui-participant/src/landing/registration/Registration.tsx index a4810e8c0b..3500122e6c 100644 --- a/ui-participant/src/landing/registration/Registration.tsx +++ b/ui-participant/src/landing/registration/Registration.tsx @@ -3,7 +3,7 @@ import { useParams } from 'react-router-dom' import { useAuth } from 'react-oidc-context' import { useReturnToLanguage, useReturnToStudy } from 'browserPersistentState' import { PageLoadingIndicator } from 'util/LoadingSpinner' -import { useI18n } from '@juniper/ui-core' +import { useI18n, getB2CLocale } from '@juniper/ui-core' import { getEnvSpec } from 'api/api' /** Show the B2C participant registration page */ @@ -28,7 +28,7 @@ export default function Registration() { portalEnvironment: envSpec.envName, portalShortcode: envSpec.shortcode as string, // eslint-disable-next-line camelcase - ui_locales: selectedLanguage + ui_locales: getB2CLocale(selectedLanguage) } }) } diff --git a/ui-participant/src/login/Login.test.tsx b/ui-participant/src/login/Login.test.tsx index 8c89ad1ffc..e88083c567 100644 --- a/ui-participant/src/login/Login.test.tsx +++ b/ui-participant/src/login/Login.test.tsx @@ -15,7 +15,7 @@ describe('Login', () => { }) const { RoutedComponent } = setupRouterTest( - + ) @@ -28,7 +28,33 @@ describe('Login', () => { portalEnvironment: 'live', portalShortcode: undefined, // eslint-disable-next-line camelcase - ui_locales: 'dev' + ui_locales: 'es' + } + }) + }) + + it('calls signinRedirect with the correct converted locale code for b2c', () => { + const mockSigninRedirect = jest.fn() + + ;(useAuth as jest.Mock).mockReturnValue({ + signinRedirect: mockSigninRedirect + }) + + const { RoutedComponent } = setupRouterTest( + + + + ) + render(RoutedComponent) + + expect(mockSigninRedirect).toHaveBeenCalledWith({ + redirectMethod: 'replace', + extraQueryParams: { + originUrl: 'http://localhost', + portalEnvironment: 'live', + portalShortcode: undefined, + // eslint-disable-next-line camelcase + ui_locales: 'zh-hans' } }) }) diff --git a/ui-participant/src/login/Login.tsx b/ui-participant/src/login/Login.tsx index e2aa8f65d6..f209ee2731 100644 --- a/ui-participant/src/login/Login.tsx +++ b/ui-participant/src/login/Login.tsx @@ -1,7 +1,7 @@ import React, { useEffect } from 'react' import { useAuth } from 'react-oidc-context' import { getEnvSpec } from 'api/api' -import { useI18n } from '@juniper/ui-core' +import { useI18n, getB2CLocale } from '@juniper/ui-core' /** component for showing a login dialog that hides other content on the page */ function Login() { @@ -17,7 +17,7 @@ function Login() { portalEnvironment: envSpec.envName, portalShortcode: envSpec.shortcode as string, // eslint-disable-next-line camelcase - ui_locales: selectedLanguage + ui_locales: getB2CLocale(selectedLanguage) } }) }