DC-187: Fix Spanish translations not rendering in client components

COLoginPage and CallbackPage are 'use client' components that were
calling getTranslations(), a server-side utility hardcoded to load only
English resources. Language switching happens entirely client-side via
i18next, so these components must use useTranslation() from react-i18next
to re-render when the user changes language.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: ShaynaCummings

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

@@ -10,11 +10,26 @@
  */
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { render, screen, waitFor } from '@testing-library/react'
+import i18n from 'i18next'
 import { http, HttpResponse } from 'msw'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { afterAll, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { server } from '@/mocks/server'
 
+// These callback-specific keys are not yet in the locale CSV files (content gap).
+// They are injected here as a test-only bundle until the content team adds them
+// to co.csv and the locale JSON files are regenerated.
+const callbackTranslations = {
+  callbackSigningIn: 'Signing you in…',
+  callbackSignInIssue: 'Sign-in issue',
+  callbackErrorMissingParams: 'Missing sign-in information.',
+  callbackErrorSessionExpired: 'Session expired.',
+  callbackErrorStateMismatch: 'State mismatch.',
+  callbackErrorGeneric: 'Something went wrong.',
+  callbackErrorStepUpFailed: 'Step-up verification did not finish.',
+  callbackErrorIdpRedirect: 'Primary MyColorado sign-in did not finish.'
+}
+
 // Mock router
 const mockReplace = vi.fn()
 vi.mock('next/navigation', () => ({
@@ -44,28 +59,6 @@ vi.mock('@/features/auth', async () => {
   }
 })
 
-// Mock translations
-vi.mock('@/lib/translations', () => ({
-  getTranslations: vi.fn().mockImplementation((namespace: string) => {
-    const namespaces: Record<string, Record<string, string>> = {
-      login: {
-        callbackSigningIn: 'Signing you in…',
-        callbackSignInIssue: 'Sign-in issue',
-        callbackErrorMissingParams: 'Missing sign-in information.',
-        callbackErrorSessionExpired: 'Session expired.',
-        callbackErrorStateMismatch: 'State mismatch.',
-        callbackErrorGeneric: 'Something went wrong.',
-        callbackErrorStepUpFailed: 'Step-up verification did not finish.',
-        callbackErrorIdpRedirect: 'Primary MyColorado sign-in did not finish.'
-      }
-    }
-    /* eslint-disable security/detect-object-injection -- test mock */
-    const translations = namespaces[namespace] ?? {}
-    return (key: string, defaultValue?: string) => translations[key] ?? defaultValue ?? key
-    /* eslint-enable security/detect-object-injection */
-  })
-}))
-
 // Mock state
 vi.mock('@sebt/design-system', async (importOriginal) => {
   const actual = await importOriginal<typeof import('@sebt/design-system')>()
@@ -97,6 +90,14 @@ function renderCallbackPage() {
 }
 
 describe('CallbackPage', () => {
+  beforeAll(() => {
+    i18n.addResourceBundle('en', 'login', callbackTranslations, true, true)
+  })
+
+  afterAll(() => {
+    i18n.removeResourceBundle('en', 'login')
+  })
+
   beforeEach(() => {
     vi.clearAllMocks()
     // Default: URL has code and state

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

@@ -7,10 +7,10 @@ import {
   OidcCompleteLoginResponseSchema
 } from '@/features/auth/api/oidc/schema'
 import { clearPkceStorage, getPkceFromStorage } from '@/lib/oidc-pkce'
-import { getTranslations } from '@/lib/translations'
 import { Alert, getState } from '@sebt/design-system'
 import { useRouter } from 'next/navigation'
 import { useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 
 type CallbackStep = 'loading' | 'have_code_state' | 'have_flow_data' | 'exchanging' | 'error'
 
@@ -23,7 +23,7 @@ type CallbackStep = 'loading' | 'have_code_state' | 'have_flow_data' | 'exchangi
 export default function CallbackPage() {
   const router = useRouter()
   const { login } = useAuth()
-  const t = getTranslations('login')
+  const { t } = useTranslation('login')
   const [status, setStatus] = useState<'loading' | 'error'>('loading')
   const [step, setStep] = useState<CallbackStep>('loading')
   const [errorDetail, setErrorDetail] = useState<string | null>(null)
@@ -141,7 +141,7 @@ export default function CallbackPage() {
       // otherwise ref stays true and the retried effect bails while the aborted run skipped navigation.
       exchangeStartedRef.current = false
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- t (getTranslations) is a static lookup
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- t intentionally omitted: adding it would retrigger the OIDC exchange on language change
   }, [login, router])
 
   useEffect(() => {

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

@@ -0,0 +1,102 @@
+/**
+ * COLoginPage Unit Tests
+ *
+ * Includes a regression test for language switching:
+ * COLoginPage must use useTranslation (react-i18next), not getTranslations
+ * (server-side utility), so it re-renders when the user switches language.
+ */
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { act, render, screen, waitFor } from '@testing-library/react'
+import i18n from 'i18next'
+import { afterAll, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import enCOCommon from '@/content/locales/en/co/common.json'
+import enCOLogin from '@/content/locales/en/co/login.json'
+import esCOCommon from '@/content/locales/es/co/common.json'
+import esCOLogin from '@/content/locales/es/co/login.json'
+
+vi.mock('@/api', () => ({ apiFetch: vi.fn() }))
+
+vi.mock('@sebt/design-system', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@sebt/design-system')>()
+  return {
+    ...actual,
+    getStateLinks: vi.fn().mockReturnValue({ external: { contactUsAssistance: '/help' } })
+  }
+})
+
+import { COLoginPage } from './COLoginPage'
+
+function renderCOLoginPage() {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false }, mutations: { retry: false } }
+  })
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <COLoginPage state="co" />
+    </QueryClientProvider>
+  )
+}
+
+describe('COLoginPage', () => {
+  beforeAll(() => {
+    i18n.addResourceBundle('en', 'login', enCOLogin, true, true)
+    i18n.addResourceBundle('en', 'common', enCOCommon, true, true)
+    i18n.addResourceBundle('es', 'login', esCOLogin, true, true)
+    i18n.addResourceBundle('es', 'common', esCOCommon, true, true)
+  })
+
+  afterAll(() => {
+    i18n.removeResourceBundle('en', 'login')
+    i18n.removeResourceBundle('en', 'common')
+    i18n.removeResourceBundle('es', 'login')
+    i18n.removeResourceBundle('es', 'common')
+  })
+
+  beforeEach(async () => {
+    // Reset to English between tests so language-switch test doesn't bleed over
+    await i18n.changeLanguage('en')
+  })
+
+  it('renders the login title in English', () => {
+    renderCOLoginPage()
+    expect(
+      screen.getByRole('heading', { name: /Access the Summer EBT portal/i })
+    ).toBeInTheDocument()
+  })
+
+  it('renders the Log in button', () => {
+    renderCOLoginPage()
+    expect(screen.getByRole('button', { name: /Log in with myColorado/i })).toBeInTheDocument()
+  })
+
+  it('renders the Iniciar sesión button with lang="es"', () => {
+    renderCOLoginPage()
+    const espButton = screen.getByRole('button', { name: /Iniciar sesión/i })
+    expect(espButton).toHaveAttribute('lang', 'es')
+  })
+
+  /**
+   * Regression test: COLoginPage must use useTranslation, not getTranslations.
+   * getTranslations is a server-side utility that only ever returns English —
+   * it does not respond to i18next language changes. If this test fails, it
+   * means the component was switched back to getTranslations.
+   */
+  it('re-renders with Spanish translations when language is switched to Spanish', async () => {
+    renderCOLoginPage()
+
+    // Confirm English renders initially
+    expect(
+      screen.getByRole('heading', { name: /Access the Summer EBT portal/i })
+    ).toBeInTheDocument()
+
+    // Switch language — only useTranslation responds to this; getTranslations does not
+    await act(async () => {
+      await i18n.changeLanguage('es')
+    })
+
+    await waitFor(() => {
+      expect(screen.getByRole('heading', { name: /cuidador principal/i })).toBeInTheDocument()
+    })
+  })
+})

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

@@ -7,10 +7,10 @@ import {
   getOidcRedirectUriForCurrentOrigin,
   savePkceForCallback
 } from '@/lib/oidc-pkce'
-import { getTranslations } from '@/lib/translations'
 import type { StateCode } from '@sebt/design-system'
 import { Alert, TextLink, getStateLinks } from '@sebt/design-system'
 import { useMutation } from '@tanstack/react-query'
+import { useTranslation } from 'react-i18next'
 
 async function fetchOidcConfig(state: StateCode): Promise<OidcConfigResponse> {
   return apiFetch<OidcConfigResponse>(`/auth/oidc/${state}/config`, {
@@ -20,8 +20,8 @@ async function fetchOidcConfig(state: StateCode): Promise<OidcConfigResponse> {
 
 export function COLoginPage({ state }: { state: StateCode }) {
   const links = getStateLinks(state)
-  const t = getTranslations('login')
-  const tCommon = getTranslations('common')
+  const { t } = useTranslation('login')
+  const { t: tCommon } = useTranslation('common')
 
   const oidcConfig = useMutation({
     mutationFn: () => fetchOidcConfig(state),

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

@@ -7,7 +7,12 @@
  */
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { render, screen } from '@testing-library/react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
+import i18n from 'i18next'
+import { afterAll, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import enCOCommon from '@/content/locales/en/co/common.json'
+import enCOLogin from '@/content/locales/en/co/login.json'
+
 import LoginPage from './page'
 
 vi.mock('next/navigation', () => ({
@@ -73,6 +78,16 @@ describe('LoginPage', () => {
   })
 
   describe('CO state', () => {
+    beforeAll(() => {
+      i18n.addResourceBundle('en', 'login', enCOLogin, true, true)
+      i18n.addResourceBundle('en', 'common', enCOCommon, true, true)
+    })
+
+    afterAll(() => {
+      i18n.removeResourceBundle('en', 'login')
+      i18n.removeResourceBundle('en', 'common')
+    })
+
     beforeEach(() => {
       mockGetState.mockReturnValue('co')
     })
@@ -81,15 +96,15 @@ describe('LoginPage', () => {
       renderWithQueryClient(<LoginPage />)
       expect(
         screen.getByRole('heading', {
-          name: /Access your Summer EBT account/i
+          name: /Access the Summer EBT portal/i
         })
       ).toBeInTheDocument()
     })
 
     it('applies text-primary-dark class to the title', () => {
       renderWithQueryClient(<LoginPage />)
       const heading = screen.getByRole('heading', {
-        name: /Access your Summer EBT account/i
+        name: /Access the Summer EBT portal/i
       })
       expect(heading).toHaveClass('text-primary-dark')
     })
@@ -110,17 +125,15 @@ describe('LoginPage', () => {
 
     it('renders the Iniciar sesión outline button', () => {
       renderWithQueryClient(<LoginPage />)
-      const espButton = screen.getByRole('button', { name: /Iniciar sesión con myColorado/i })
+      const espButton = screen.getByRole('button', { name: /Iniciar sesión myColorado/i })
       expect(espButton).toHaveAttribute('lang', 'es')
       expect(espButton).toHaveClass('usa-button--outline')
       expect(espButton).toHaveClass('border-primary')
     })
 
     it('renders the contact assistance link', () => {
       renderWithQueryClient(<LoginPage />)
-      expect(
-        screen.getByText('Contact us if you need assistance logging into your account.')
-      ).toBeInTheDocument()
+      expect(screen.getByText('Contact us if you need assistance logging in.')).toBeInTheDocument()
     })
 
     it('does not render LoginForm', () => {