diff --git a/app/javascript/packages/verify-flow/verify-flow-alert.spec.tsx b/app/javascript/packages/verify-flow/verify-flow-alert.spec.tsx index 2e29e25af29..3555b8e4d36 100644 --- a/app/javascript/packages/verify-flow/verify-flow-alert.spec.tsx +++ b/app/javascript/packages/verify-flow/verify-flow-alert.spec.tsx @@ -1,18 +1,50 @@ import { render } from '@testing-library/react'; +import { i18n } from '@18f/identity-i18n'; +import { usePropertyValue } from '@18f/identity-test-helpers'; import VerifyFlowAlert from './verify-flow-alert'; describe('VerifyFlowAlert', () => { - context('step with a status message', () => { - [ - ['personal_key', 'idv.messages.confirm'], - ['personal_key_confirm', 'idv.messages.confirm'], - ].forEach(([step, expected]) => { + context('password confirm step', () => { + context('with verified phone number', () => { + usePropertyValue(i18n, 'strings', { + 'idv.messages.review.info_verified_html': 'We found records matching your %{phone_message}', + 'idv.messages.phone.phone_of_record': 'Phone of record', + }); + it('renders status message', () => { - const { getByRole } = render(); + const { getByRole } = render( + , + ); - expect(getByRole('status').textContent).equal(expected); + expect(getByRole('status').querySelector('p')?.innerHTML).equal( + 'We found records matching your Phone of record', + ); }); }); + + context('with gpo verification', () => { + it('renders nothing', () => { + const { container } = render(); + + expect(container.innerHTML).to.be.empty(); + }); + }); + }); + + context('personal key step', () => { + it('renders status message', () => { + const { getByRole } = render(); + + expect(getByRole('status').textContent).equal('idv.messages.confirm'); + }); + }); + + context('personal key confirm step', () => { + it('renders status message', () => { + const { getByRole } = render(); + + expect(getByRole('status').textContent).equal('idv.messages.confirm'); + }); }); context('step without a status message', () => { diff --git a/app/javascript/packages/verify-flow/verify-flow-alert.tsx b/app/javascript/packages/verify-flow/verify-flow-alert.tsx index 29a8f670d8f..3fc3cdd42c3 100644 --- a/app/javascript/packages/verify-flow/verify-flow-alert.tsx +++ b/app/javascript/packages/verify-flow/verify-flow-alert.tsx @@ -1,26 +1,47 @@ +import type { ReactNode } from 'react'; import { t } from '@18f/identity-i18n'; +import { formatHTML } from '@18f/identity-react-i18n'; import { Alert } from '@18f/identity-components'; +import type { VerifyFlowValues } from './verify-flow'; interface VerifyFlowAlertProps { /** * Current step name. */ currentStep: string; + + /** + * Current flow values. + */ + values?: Partial; } /** * Returns the status message to show for a given step, if applicable. * * @param stepName Step name. + * @param values Flow values. */ -function getStepMessage(stepName: string): string | undefined { +function getStepMessage( + stepName: string, + values: Partial, +): ReactNode | undefined { + if (stepName === 'password_confirm' && values.phone) { + return formatHTML( + t('idv.messages.review.info_verified_html', { + phone_message: `${t('idv.messages.phone.phone_of_record')}`, + }), + { strong: 'strong' }, + ); + } + if (stepName === 'personal_key' || stepName === 'personal_key_confirm') { return t('idv.messages.confirm'); } } -function VerifyFlowAlert({ currentStep }: VerifyFlowAlertProps) { - const message = getStepMessage(currentStep); +function VerifyFlowAlert({ currentStep, values = {} }: VerifyFlowAlertProps) { + const message = getStepMessage(currentStep, values); if (!message) { return null; } diff --git a/app/javascript/packages/verify-flow/verify-flow.tsx b/app/javascript/packages/verify-flow/verify-flow.tsx index f116ed1017c..39b00d1ccd0 100644 --- a/app/javascript/packages/verify-flow/verify-flow.tsx +++ b/app/javascript/packages/verify-flow/verify-flow.tsx @@ -92,6 +92,7 @@ function VerifyFlow({ const [syncedValues, setSyncedValues] = useSyncedSecretValues(initialValues); const [currentStep, setCurrentStep] = useState(steps[0].name); + const [values, setValues] = useState(syncedValues); const [initialStep, setCompletedStep] = useInitialStepValidation(basePath, steps); useEffect(() => { logStepVisited(currentStep); @@ -102,10 +103,15 @@ function VerifyFlow({ setCompletedStep(stepName); } + function onChange(nextValues: Partial) { + setValues(nextValues); + setSyncedValues(nextValues); + } + return ( <> - +