[JN-1605] B2c i18n updates for A-T + additional robustness (#1462)

broadinstitute · Feb 12, 2025 · 3ed5e7e · 3ed5e7e
1 parent 6b2b113
commit 3ed5e7e
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 10 deletions.
diff --git a/ui-core/src/participant/I18nProvider.tsx b/ui-core/src/participant/I18nProvider.tsx
@@ -104,3 +104,27 @@ export function I18nProvider({ defaultLanguage, portalShortcode, environmentName
     </I18nContext.Provider>}
   </>
 }
+
+//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<string, string> = {
+  '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
@@ -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
@@ -15,7 +15,7 @@ describe('Registration', () => {
     })
 
     const { RoutedComponent } = setupRouterTest(
-      <MockI18nProvider selectedLanguage={'dev'}>
+      <MockI18nProvider selectedLanguage={'es'}>
         <Registration />
       </MockI18nProvider>
     )
@@ -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
@@ -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
@@ -15,7 +15,7 @@ describe('Login', () => {
     })
 
     const { RoutedComponent } = setupRouterTest(
-      <MockI18nProvider selectedLanguage={'dev'}>
+      <MockI18nProvider selectedLanguage={'es'}>
         <Login />
       </MockI18nProvider>
     )
@@ -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(
+      <MockI18nProvider selectedLanguage={'zh'}>
+        <Login />
+      </MockI18nProvider>
+    )
+    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
@@ -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)
       }
     })
   }