fix: wire hardcoded strings to i18n and correct locale key mismatches

Author: adbergen

docs/missing-locale-strings.md

@@ -128,6 +128,8 @@ const CONFIG = {
   // This prevents key collisions (e.g., both OTP Enter Email and OTP Confirm have "title")
   pageKeyPrefix: {
     'otp confirm': 'verify',
+    'otp email message': 'email',
+    'co-loaded off-boarding': 'coLoaded',
   },
 };
 
@@ -309,18 +311,23 @@ function buildStateLocaleData(rows, state) {
 
     const { namespace, key } = parsed;
 
-    // English
+    // English — don't overwrite a non-empty value with an empty one
+    // (handles key collisions where multiple CSV rows map to the same namespace+key)
     if (!data.en[namespace]) {
       data.en[namespace] = {};
     }
-    data.en[namespace][key] = englishValue;
+    if (englishValue || !data.en[namespace][key]) {
+      data.en[namespace][key] = englishValue;
+    }
 
-    // Spanish
-    if (spanishIdx !== -1 && spanishValue) {
+    // Spanish — same collision protection
+    if (spanishIdx !== -1) {
       if (!data.es[namespace]) {
         data.es[namespace] = {};
       }
-      data.es[namespace][key] = spanishValue;
+      if (spanishValue || !data.es[namespace][key]) {
+        data.es[namespace][key] = spanishValue;
+      }
     }
   }
 
@@ -346,11 +353,14 @@ function discoverStateCsvFiles() {
 }
 
 /**
- * Calculate combined SHA-256 hash of all state CSV files
+ * Calculate combined SHA-256 hash of all state CSV files and this script
  */
 function calculateCombinedHash(stateFiles) {
   const hash = createHash('sha256');
 
+  // Include the script itself so logic changes invalidate the cache
+  hash.update(readFileSync(fileURLToPath(import.meta.url), 'utf8'));
+
   for (const { state, csvPath } of stateFiles) {
     if (existsSync(csvPath)) {
       const content = readFileSync(csvPath, 'utf8');

src/SEBT.Portal.Web/content/scripts/generate-locales.js

@@ -8,6 +8,7 @@ import type { StateCode } from '@/lib/state'
 export function COLoginPage({ state }: { state: StateCode }) {
   const links = getStateLinks(state)
   const t = getTranslations('login')
+  const tCommon = getTranslations('common')
 
   return (
     <div className="usa-section">
@@ -17,8 +18,7 @@ export function COLoginPage({ state }: { state: StateCode }) {
             id="login-title"
             className="font-sans-xl text-bold line-height-sans-1 margin-bottom-3 text-primary-dark"
           >
-            {/* TODO: Use t('title') once login.title is fixed in co.csv (clobbered by S8 OTP row) */}
-            Log in to your Summer EBT account
+            {t('title')}
           </h1>
 
           <p className="margin-top-4 font-sans-sm">{t('logInDisclaimerBody1')}</p>
@@ -29,8 +29,7 @@ export function COLoginPage({ state }: { state: StateCode }) {
               href="#"
               className="usa-button bg-primary-dark text-white border-primary-dark"
             >
-              {/* TODO: Use t('logIn', { ns: 'common' }) once common.logIn is fixed in co.csv (column-shifted to "Suggested address") */}
-              Log in
+              {tCommon('logIn')}
             </Link>
           </div>
 
@@ -41,8 +40,7 @@ export function COLoginPage({ state }: { state: StateCode }) {
               className="usa-button usa-button--outline border-primary text-primary"
               lang="es"
             >
-              {/* TODO: Use t('logInEsp', { ns: 'common' }) once common.logInEsp is fixed in co.csv (column-shifted to "Address you entered") */}
-              Iniciar sesión
+              {tCommon('logInEsp')}
             </Link>
           </div>
 

src/SEBT.Portal.Web/content/states/co.csv

@@ -51,6 +51,7 @@ export default function IdProofingPage() {
   const state = getState()
   const links = getStateLinks(state)
   const t = getTranslations('idProofing')
+  const tCommon = getTranslations('common')
 
   return (
     <div className="usa-section">
@@ -65,8 +66,7 @@ export default function IdProofingPage() {
 
           <p className="margin-top-0 font-sans-sm">{t('body')}</p>
 
-          {/* TODO: Use t('requiredDisclaimer') once key is available in dc.csv */}
-          <p className="margin-top-2 font-sans-sm">Asterisks (*) indicate a required field.</p>
+          <p className="margin-top-2 font-sans-sm">{tCommon('requiredFields')}</p>
 
           <IdProofingForm
             idOptions={DC_ID_OPTIONS}

src/SEBT.Portal.Web/content/states/dc.csv

@@ -17,10 +17,15 @@ vi.mock('@/lib/translations', () => ({
   getTranslations: vi.fn().mockImplementation((namespace: string) => {
     const namespaces: Record<string, Record<string, string>> = {
       login: {
-        title: 'Log in to your account',
+        title: 'Access your Summer EBT account',
         body: 'Enter your email to receive a one-time code.',
-        logInDisclaimerBody1: 'You can use the same login you use to access PEAK.',
+        logInDisclaimerBody1:
+          'After tapping "Log in" you\'ll be redirected to log in using your myColorado™ account.',
         logInDisclaimerBody2: 'Contact us if you need assistance logging into your account.'
+      },
+      common: {
+        logIn: 'Log in with myColorado™',
+        logInEsp: 'Iniciar sesión con myColorado™'
       }
     }
     const translations = namespaces[namespace] ?? {}
@@ -49,36 +54,36 @@ describe('LoginPage', () => {
       render(<LoginPage />)
       expect(
         screen.getByRole('heading', {
-          name: /Log in to your Summer EBT account/i
+          name: /Access your Summer EBT account/i
         })
       ).toBeInTheDocument()
     })
 
     it('applies text-primary-dark class to the title', () => {
       render(<LoginPage />)
       const heading = screen.getByRole('heading', {
-        name: /Log in to your Summer EBT account/i
+        name: /Access your Summer EBT account/i
       })
       expect(heading).toHaveClass('text-primary-dark')
     })
 
-    it('renders the PEAK body text', () => {
+    it('renders the disclaimer body text', () => {
       render(<LoginPage />)
       expect(
-        screen.getByText(/You can use the same login you use to access PEAK/i)
+        screen.getByText(/you'll be redirected to log in using your myColorado/i)
       ).toBeInTheDocument()
     })
 
     it('renders the Log in button with primary-dark styling', () => {
       render(<LoginPage />)
-      const logInButton = screen.getByRole('link', { name: 'Log in' })
+      const logInButton = screen.getByRole('link', { name: /Log in with myColorado/i })
       expect(logInButton).toHaveClass('usa-button')
       expect(logInButton).toHaveClass('bg-primary-dark')
     })
 
     it('renders the Iniciar sesión outline button', () => {
       render(<LoginPage />)
-      const espButton = screen.getByRole('link', { name: 'Iniciar sesión' })
+      const espButton = screen.getByRole('link', { name: /Iniciar sesión con myColorado/i })
       expect(espButton).toHaveAttribute('lang', 'es')
       expect(espButton).toHaveClass('usa-button--outline')
       expect(espButton).toHaveClass('border-primary')

src/SEBT.Portal.Web/src/app/(public)/login/COLoginPage.tsx

@@ -51,14 +51,14 @@ export function Footer({ state = 'dc' }: FooterProps) {
             rel="noopener noreferrer"
             className="usa-link text-ink font-ui-md text-semibold"
           >
-            {t('publicNotifications')}
+            {t('linkPublicNotices')}
           </Link>
         </div>
       </div>
 
       <div className="usa-footer__secondary-section padding-y-2">
         <div className="grid-container">
-          <nav aria-label="Footer navigation">
+          <nav aria-label={t('footerNavLabel', 'Footer navigation')}>
             <ul className="usa-list usa-list--unstyled display-flex flex-column flex-align-center add-list-reset">
               {footerLinks.map((link) => (
                 <li
@@ -82,14 +82,15 @@ export function Footer({ state = 'dc' }: FooterProps) {
 
       <div className="usa-footer__secondary-section text-center">
         <div className="grid-container">
-          <p className="margin-0 text-ink footer-copyright">{t('copyright')}</p>
+          <p className="margin-0 text-ink footer-copyright">{t('copyrite')}</p>
         </div>
       </div>
     </footer>
   )
 }
 
 function COFooter({ state = 'co' }: FooterProps) {
+  const { t } = useTranslation('common')
   const config = getStateConfig(state)
   const links = getStateLinks(state)
 
@@ -101,16 +102,15 @@ function COFooter({ state = 'co' }: FooterProps) {
       <div className="usa-footer__primary-section padding-y-2">
         <div className="grid-container text-center">
           <p className="margin-0 text-white font-sans-xs">
-            {/* TODO: Use t('copyright') once the key is added to co.csv */}© 2026 State of Colorado
+            {t('copyrite', '© 2026 State of Colorado')}
             {' | '}
             <Link
               href={links.footer.transparencyOnline ?? '#'}
               target="_blank"
               rel="noopener noreferrer"
               className="usa-link text-white text-underline"
             >
-              {/* TODO: Use t('transparencyOnline') once the key is added to co.csv */}
-              Transparency Online
+              {t('transparencyOnline', 'Transparency Online')}
             </Link>
             {' | '}
             <Link
@@ -119,8 +119,7 @@ function COFooter({ state = 'co' }: FooterProps) {
               rel="noopener noreferrer"
               className="usa-link text-white text-underline"
             >
-              {/* TODO: Use t('generalNotices') once the key is added to co.csv */}
-              General Notices
+              {t('generalNotices', 'General Notices')}
             </Link>
           </p>
         </div>

src/SEBT.Portal.Web/src/app/(public)/login/id-proofing/page.tsx

@@ -30,27 +30,23 @@ interface IdProofingFormProps {
   contactLink: string
 }
 
-// Month options for the DOB select field
-// TODO: Localize month names via i18n or Intl.DateTimeFormat once translation keys are available
-const MONTHS = [
-  { value: '01', label: 'January' },
-  { value: '02', label: 'February' },
-  { value: '03', label: 'March' },
-  { value: '04', label: 'April' },
-  { value: '05', label: 'May' },
-  { value: '06', label: 'June' },
-  { value: '07', label: 'July' },
-  { value: '08', label: 'August' },
-  { value: '09', label: 'September' },
-  { value: '10', label: 'October' },
-  { value: '11', label: 'November' },
-  { value: '12', label: 'December' }
-] as const
+// Generate localized month names using Intl.DateTimeFormat
+function getLocalizedMonths(locale: string) {
+  const formatter = new Intl.DateTimeFormat(locale, { month: 'long' })
+  return Array.from({ length: 12 }, (_, i) => ({
+    value: String(i + 1).padStart(2, '0'),
+    label: formatter.format(new Date(2024, i, 1))
+  }))
+}
 
 export function IdProofingForm({ idOptions, contactLink }: IdProofingFormProps) {
   const router = useRouter()
-  const { t } = useTranslation('idProofing')
+  const { t, i18n } = useTranslation('idProofing')
+  const { t: tCommon } = useTranslation('common')
+  const { t: tPersonalInfo } = useTranslation('personalInfo')
+  const { t: tValidation } = useTranslation('validation')
   const formId = useId()
+  const months = getLocalizedMonths(i18n.language)
 
   const [dobMonth, setDobMonth] = useState('')
   const [dobDay, setDobDay] = useState('')
@@ -69,8 +65,7 @@ export function IdProofingForm({ idOptions, contactLink }: IdProofingFormProps)
   const selectedOption = idOptions.find((opt) => opt.value === selectedIdType)
   const showIdValueInput = selectedIdType !== null && selectedIdType !== NONE_VALUE
 
-  // TODO: Use t('validation.required') once shared validation namespace is set up
-  const REQUIRED_FIELD_ERROR = "We're sorry. Some required questions aren't answered."
+  const REQUIRED_FIELD_ERROR = tValidation('required')
 
   function validateFields(): boolean {
     const newDobErrors: { month?: string; day?: string; year?: string } = {}
@@ -114,8 +109,7 @@ export function IdProofingForm({ idOptions, contactLink }: IdProofingFormProps)
       if (err instanceof ApiError) {
         setSubmitError(err.message)
       } else {
-        // TODO: Use t('errorUnexpected') once key is available in dc.csv
-        setSubmitError('Something went wrong. Please try again.')
+        setSubmitError(tValidation('globalInternalError'))
       }
     }
   }
@@ -150,12 +144,11 @@ export function IdProofingForm({ idOptions, contactLink }: IdProofingFormProps)
                 dobErrors.month ? 'usa-form-group usa-form-group--error' : 'usa-form-group'
               }
             >
-              {/* TODO: Use t('labelDobMonth') once key is available in dc.csv */}
               <label
                 className="usa-label"
                 htmlFor={`${formId}-dob-month`}
               >
-                Month
+                {tPersonalInfo('labelMonth')}
               </label>
               {dobErrors.month && (
                 <span
@@ -175,7 +168,7 @@ export function IdProofingForm({ idOptions, contactLink }: IdProofingFormProps)
                 aria-invalid={!!dobErrors.month}
               >
                 <option value=""></option>
-                {MONTHS.map((m) => (
+                {months.map((m) => (
                   <option
                     key={m.value}
                     value={m.value}
@@ -190,10 +183,7 @@ export function IdProofingForm({ idOptions, contactLink }: IdProofingFormProps)
           {/* Day */}
           <div className="mobile-lg:grid-col-4">
             <InputField
-              label={
-                // TODO: Use t('labelDobDay') once key is available in dc.csv
-                'Day'
-              }
+              label={tPersonalInfo('labelDay')}
               type="text"
               inputMode="numeric"
               name="dobDay"
@@ -209,10 +199,7 @@ export function IdProofingForm({ idOptions, contactLink }: IdProofingFormProps)
           {/* Year */}
           <div className="mobile-lg:grid-col-4">
             <InputField
-              label={
-                // TODO: Use t('labelDobYear') once key is available in dc.csv
-                'Year'
-              }
+              label={tPersonalInfo('labelYear')}
               type="text"
               inputMode="numeric"
               name="dobYear"
@@ -291,15 +278,14 @@ export function IdProofingForm({ idOptions, contactLink }: IdProofingFormProps)
         </div>
       )}
 
-      {/* TODO: Use t('actionContinue') once key is available in dc.csv */}
       <Button
         type="submit"
         isLoading={isSubmitting}
-        loadingText="Continue..."
+        loadingText={`${tCommon('continue')}...`}
         className="margin-top-3 display-block"
         disabled={isSubmitting}
       >
-        Continue
+        {tCommon('continue')}
       </Button>
 
       <p className="margin-top-4 font-sans-sm">
@@ -309,8 +295,7 @@ export function IdProofingForm({ idOptions, contactLink }: IdProofingFormProps)
           rel="noopener noreferrer"
           className="usa-link"
         >
-          {/* TODO: Use a help/contact translation key here */}
-          Need help? Contact us.
+          {tCommon('linkContactUs')}
         </a>
       </p>
     </form>

src/SEBT.Portal.Web/src/app/(public)/login/page.test.tsx

@@ -98,11 +98,9 @@ describe('LoginForm', () => {
       await user.type(emailInput, TEST_EMAILS.success)
       await user.click(submitButton)
 
-      // Button should show loading state (Continue to my account...)
-      // i18n key: common.continue → "Continue to my account"
-      expect(
-        screen.getByRole('button', { name: /continue to my account\.\.\./i })
-      ).toBeInTheDocument()
+      // Button should show loading state (Continue...)
+      // i18n key: common.continue → "Continue"
+      expect(screen.getByRole('button', { name: /continue\.\.\./i })).toBeInTheDocument()
     })
 
     it('should disable input during submission', async () => {