diff --git a/app/javascript/packages/components/troubleshooting-options.tsx b/app/javascript/packages/components/troubleshooting-options.tsx index 8f27f15f2e9..fab09c66ff0 100644 --- a/app/javascript/packages/components/troubleshooting-options.tsx +++ b/app/javascript/packages/components/troubleshooting-options.tsx @@ -14,7 +14,7 @@ export type TroubleshootingOption = Omit & { interface TroubleshootingOptionsProps { headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; - heading?: string; + heading?: ReactNode; options: TroubleshootingOption[]; diff --git a/app/javascript/packages/document-capture/components/document-capture-troubleshooting-options.tsx b/app/javascript/packages/document-capture/components/document-capture-troubleshooting-options.tsx index b272fb95e48..4b1cdcd43ba 100644 --- a/app/javascript/packages/document-capture/components/document-capture-troubleshooting-options.tsx +++ b/app/javascript/packages/document-capture/components/document-capture-troubleshooting-options.tsx @@ -1,11 +1,26 @@ import { useContext } from 'react'; import { FlowContext } from '@18f/identity-verify-flow'; import { TroubleshootingOptions } from '@18f/identity-components'; -import { useI18n } from '@18f/identity-react-i18n'; +import { useI18n, formatHTML } from '@18f/identity-react-i18n'; import type { TroubleshootingOption } from '@18f/identity-components/troubleshooting-options'; import ServiceProviderContext from '../context/service-provider'; import MarketingSiteContext from '../context/marketing-site'; import AnalyticsContext from '../context/analytics'; +import { nonBreaking } from '../higher-order/with-background-encrypted-upload'; + +/** + * Returns an internationalized list with appropriately placed non-breaking spaces + * + * @param {list} string Original string. + * + * @return String with non-breaking spaces. + */ +const toI18nList = (list) => { + const nonBreakingListItems = list.map(nonBreaking); + const i18nList = new Intl.ListFormat('en', { type: 'disjunction', style: 'short' }); + + return i18nList.format(nonBreakingListItems); +}; interface DocumentCaptureTroubleshootingOptionsProps { /** @@ -82,7 +97,12 @@ function DocumentCaptureTroubleshootingOptions({ {hasErrors && inPersonURL && showInPersonOption && ( string.split(' ').join(NBSP_UNICODE); +export const nonBreaking = (string) => string.split(' ').join(NBSP_UNICODE); /** * An error representing a failure to complete encrypted upload of image. diff --git a/config/locales/idv/en.yml b/config/locales/idv/en.yml index 3e952791a30..8c5406c6718 100644 --- a/config/locales/idv/en.yml +++ b/config/locales/idv/en.yml @@ -185,7 +185,7 @@ en: review: Re-enter your %{app_name} password to protect your data troubleshooting: headings: - are_you_near: 'Are you near Washington, D.C.?' + are_you_near: 'Are you located near %{pilot_locations}?' missing_required_items: Are you missing one of these items? need_assistance: 'Need immediate assistance? Here’s how to get help:' still_having_trouble: Still having trouble? diff --git a/config/locales/idv/es.yml b/config/locales/idv/es.yml index fbd3ba43073..05ef0316f38 100644 --- a/config/locales/idv/es.yml +++ b/config/locales/idv/es.yml @@ -193,7 +193,7 @@ es: review: Vuelve a ingresar tu contraseña de %{app_name} para encriptar tus datos troubleshooting: headings: - are_you_near: '¿Se encuentra cerca de la ciudad de Washington?' + are_you_near: '¿Reside cerca de %{pilot_locations}?' missing_required_items: '¿Le falta alguno de estos puntos?' need_assistance: '¿Necesita ayuda inmediata? Así es como puede obtener ayuda:' still_having_trouble: '¿Sigue teniendo dificultades?' diff --git a/config/locales/idv/fr.yml b/config/locales/idv/fr.yml index 13984e7945c..cd66ebb4cf6 100644 --- a/config/locales/idv/fr.yml +++ b/config/locales/idv/fr.yml @@ -205,7 +205,7 @@ fr: review: Entrez à nouveau votre mot de passe %{app_name} pour crypter vos données troubleshooting: headings: - are_you_near: Êtes-vous situé près de Washington, D.C.? + are_you_near: 'Êtes-vous situé près de %{pilot_locations}?' missing_required_items: Est-ce qu’il vous manque un de ces éléments? need_assistance: 'Avez-vous besoin d’une assistance immédiate? Voici comment obtenir de l’aide:' diff --git a/config/locales/in_person_proofing/en.yml b/config/locales/in_person_proofing/en.yml index 1a399940917..e3183897832 100644 --- a/config/locales/in_person_proofing/en.yml +++ b/config/locales/in_person_proofing/en.yml @@ -118,3 +118,7 @@ en: info: 'Your ID must not be expired. Acceptable forms of ID are:' no_other_documents: We do not currently accept any other forms of identification, such as passports and military IDs. + pilot_locations: + - Washington, D.C. + - Baltimore, MD +