diff --git a/app/javascript/packages/clipboard-button/clipboard-button-element.spec.ts b/app/javascript/packages/clipboard-button/clipboard-button-element.spec.ts index cb555e114fd..447cfa994cb 100644 --- a/app/javascript/packages/clipboard-button/clipboard-button-element.spec.ts +++ b/app/javascript/packages/clipboard-button/clipboard-button-element.spec.ts @@ -1,4 +1,3 @@ -import 'clipboard-polyfill/overwrite-globals'; // See: https://github.com/jsdom/jsdom/issues/1568 import sinon from 'sinon'; import { getByRole } from '@testing-library/dom'; import userEvent from '@testing-library/user-event'; diff --git a/app/javascript/packages/verify-flow/steps/password-confirm/password-confirm-step.spec.tsx b/app/javascript/packages/verify-flow/steps/password-confirm/password-confirm-step.spec.tsx index d34489073cf..594a9594a04 100644 --- a/app/javascript/packages/verify-flow/steps/password-confirm/password-confirm-step.spec.tsx +++ b/app/javascript/packages/verify-flow/steps/password-confirm/password-confirm-step.spec.tsx @@ -78,4 +78,54 @@ describe('PasswordConfirmStep', () => { expect(window.location.pathname).to.equal('/password_confirm/'); }); }); + + describe('alert', () => { + context('without phone value', () => { + it('does not render success alert', () => { + const { queryByRole } = render(); + + expect(queryByRole('status')).to.not.exist(); + }); + }); + + context('with phone value', () => { + it('renders success alert', () => { + const { queryByRole } = render( + , + ); + + const status = queryByRole('status')!; + + expect(status).to.exist(); + expect(status.textContent).to.equal('idv.messages.review.info_verified_html'); + }); + + context('with other errors', () => { + it('does not render success alert', () => { + const { queryByRole } = render( + , + ); + + expect(queryByRole('status')).to.not.exist(); + }); + }); + }); + + context('with errors', () => { + it('renders error messages', () => { + const { queryByRole } = render( + , + ); + + const alert = queryByRole('alert')!; + + expect(alert).to.exist(); + expect(alert.textContent).to.equal('Uh oh!'); + }); + }); + }); }); diff --git a/app/javascript/packages/verify-flow/steps/password-confirm/password-confirm-step.tsx b/app/javascript/packages/verify-flow/steps/password-confirm/password-confirm-step.tsx index 9c483b98eaa..35f285e930b 100644 --- a/app/javascript/packages/verify-flow/steps/password-confirm/password-confirm-step.tsx +++ b/app/javascript/packages/verify-flow/steps/password-confirm/password-confirm-step.tsx @@ -37,6 +37,16 @@ function PasswordConfirmStep({ errors, registerField, onChange, value }: Passwor return ( <> + {value.phone && !errors.length && ( + + {formatHTML( + t('idv.messages.review.info_verified_html', { + phone_message: `${t('idv.messages.phone.phone_of_record')}`, + }), + { strong: 'strong' }, + )} + + )} {errors.map(({ error }) => ( {error.message} diff --git a/app/javascript/packages/verify-flow/steps/personal-key/personal-key-step.spec.tsx b/app/javascript/packages/verify-flow/steps/personal-key/personal-key-step.spec.tsx index 7240d45e1d5..9536b7d6116 100644 --- a/app/javascript/packages/verify-flow/steps/personal-key/personal-key-step.spec.tsx +++ b/app/javascript/packages/verify-flow/steps/personal-key/personal-key-step.spec.tsx @@ -48,4 +48,12 @@ describe('PersonalKeyStep', () => { await userEvent.click(getByText('components.print_button.label')); expect(analytics.trackEvent).to.have.been.calledWith('IdV: print personal key'); }); + + it('renders success alert', () => { + const { getByRole } = render(); + + const status = getByRole('status'); + + expect(status.textContent).to.equal('idv.messages.confirm'); + }); }); diff --git a/app/javascript/packages/verify-flow/steps/personal-key/personal-key-step.tsx b/app/javascript/packages/verify-flow/steps/personal-key/personal-key-step.tsx index 567e50c5a74..45dceb738cc 100644 --- a/app/javascript/packages/verify-flow/steps/personal-key/personal-key-step.tsx +++ b/app/javascript/packages/verify-flow/steps/personal-key/personal-key-step.tsx @@ -1,4 +1,4 @@ -import { PageHeading } from '@18f/identity-components'; +import { Alert, PageHeading } from '@18f/identity-components'; import { ClipboardButton } from '@18f/identity-clipboard-button'; import { PrintButton } from '@18f/identity-print-button'; import { t } from '@18f/identity-i18n'; @@ -17,6 +17,9 @@ function PersonalKeyStep({ value }: PersonalKeyStepProps) { return ( <> + + {t('idv.messages.confirm')} + {t('headings.personal_key')}

{t('instructions.personal_key.info')}

diff --git a/app/javascript/packages/verify-flow/verify-flow-alert.spec.tsx b/app/javascript/packages/verify-flow/verify-flow-alert.spec.tsx deleted file mode 100644 index 3555b8e4d36..00000000000 --- a/app/javascript/packages/verify-flow/verify-flow-alert.spec.tsx +++ /dev/null @@ -1,57 +0,0 @@ -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('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( - , - ); - - 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', () => { - it('renders nothing', () => { - const { container } = render(); - - expect(container.innerHTML).to.be.empty(); - }); - }); -}); diff --git a/app/javascript/packages/verify-flow/verify-flow-alert.tsx b/app/javascript/packages/verify-flow/verify-flow-alert.tsx deleted file mode 100644 index 3fc3cdd42c3..00000000000 --- a/app/javascript/packages/verify-flow/verify-flow-alert.tsx +++ /dev/null @@ -1,56 +0,0 @@ -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, - 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, values = {} }: VerifyFlowAlertProps) { - const message = getStepMessage(currentStep, values); - if (!message) { - return null; - } - - return ( - - {message} - - ); -} - -export default VerifyFlowAlert; diff --git a/app/javascript/packages/verify-flow/verify-flow.tsx b/app/javascript/packages/verify-flow/verify-flow.tsx index 937d0401e5e..ac95653b442 100644 --- a/app/javascript/packages/verify-flow/verify-flow.tsx +++ b/app/javascript/packages/verify-flow/verify-flow.tsx @@ -5,7 +5,6 @@ import { getConfigValue } from '@18f/identity-config'; import { useObjectMemo } from '@18f/identity-react-hooks'; import { STEPS } from './steps'; import VerifyFlowStepIndicator from './verify-flow-step-indicator'; -import VerifyFlowAlert from './verify-flow-alert'; import { useSyncedSecretValues } from './context/secrets-context'; import FlowContext from './context/flow-context'; import useInitialStepValidation from './hooks/use-initial-step-validation'; @@ -108,7 +107,6 @@ 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); const context = useObjectMemo({ startOverURL, cancelURL, currentStep, basePath }); useEffect(() => { @@ -120,15 +118,9 @@ function VerifyFlow({ setCompletedStep(stepName); } - function onChange(nextValues: Partial) { - setValues(nextValues); - setSyncedValues(nextValues); - } - return ( - {};