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 (
<>
-
+