IPP CTA locations with i18n listFormat approach to support many more locations

app/javascript/packages/components/troubleshooting-options.tsx

@@ -14,7 +14,7 @@ export type TroubleshootingOption = Omit<BlockLinkProps, 'href'> & {
 interface TroubleshootingOptionsProps {
   headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 
-  heading?: string;
+  heading?: ReactNode;
 
   options: TroubleshootingOption[];
 

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 && (
         <TroubleshootingOptions
           isNewFeatures
-          heading={t('idv.troubleshooting.headings.are_you_near')}
+          heading={formatHTML(
+            t('idv.troubleshooting.headings.are_you_near', {
+              pilot_locations: toI18nList(t(['in_person_proofing.pilot_locations'])),
+            }),
+            { wbr: 'wbr' },
+          )}
           options={[
             {
               url: '#location',

app/javascript/packages/document-capture/higher-order/with-background-encrypted-upload.jsx

@@ -14,7 +14,7 @@ import AnalyticsContext from '../context/analytics';
  * Non-breaking space (` `) represented as unicode escape sequence, which React will more
  * happily tolerate than an HTML entity.
  */
-const NBSP_UNICODE = '\u00A0';
+export const NBSP_UNICODE = '\u00A0';
 
 /**
  * Returns a new string from the given string, replacing spaces with non-breaking spaces.
@@ -23,7 +23,7 @@ const NBSP_UNICODE = '\u00A0';
  *
  * @return String with non-breaking spaces.
  */
-const nonBreaking = (string) => 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.

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?

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?'

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:'

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
+