diff --git a/app/javascript/packages/verify-flow/index.tsx b/app/javascript/packages/verify-flow/index.tsx
index 9cb8593ad02..d98e4e84e5d 100644
--- a/app/javascript/packages/verify-flow/index.tsx
+++ b/app/javascript/packages/verify-flow/index.tsx
@@ -1,2 +1,2 @@
export { SecretsContextProvider } from './context/secrets-context';
-export { VerifyFlow } from './verify-flow';
+export { default as VerifyFlow } from './verify-flow';
diff --git a/app/javascript/packages/verify-flow/verify-flow-alert.spec.tsx b/app/javascript/packages/verify-flow/verify-flow-alert.spec.tsx
new file mode 100644
index 00000000000..2e29e25af29
--- /dev/null
+++ b/app/javascript/packages/verify-flow/verify-flow-alert.spec.tsx
@@ -0,0 +1,25 @@
+import { render } from '@testing-library/react';
+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]) => {
+ it('renders status message', () => {
+ const { getByRole } = render();
+
+ expect(getByRole('status').textContent).equal(expected);
+ });
+ });
+ });
+
+ 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
new file mode 100644
index 00000000000..29a8f670d8f
--- /dev/null
+++ b/app/javascript/packages/verify-flow/verify-flow-alert.tsx
@@ -0,0 +1,35 @@
+import { t } from '@18f/identity-i18n';
+import { Alert } from '@18f/identity-components';
+
+interface VerifyFlowAlertProps {
+ /**
+ * Current step name.
+ */
+ currentStep: string;
+}
+
+/**
+ * Returns the status message to show for a given step, if applicable.
+ *
+ * @param stepName Step name.
+ */
+function getStepMessage(stepName: string): string | undefined {
+ if (stepName === 'personal_key' || stepName === 'personal_key_confirm') {
+ return t('idv.messages.confirm');
+ }
+}
+
+function VerifyFlowAlert({ currentStep }: VerifyFlowAlertProps) {
+ const message = getStepMessage(currentStep);
+ if (!message) {
+ return null;
+ }
+
+ return (
+
+ {message}
+
+ );
+}
+
+export default VerifyFlowAlert;
diff --git a/app/javascript/packages/verify-flow/index.spec.tsx b/app/javascript/packages/verify-flow/verify-flow.spec.tsx
similarity index 89%
rename from app/javascript/packages/verify-flow/index.spec.tsx
rename to app/javascript/packages/verify-flow/verify-flow.spec.tsx
index c5252cdd08f..423112dadb1 100644
--- a/app/javascript/packages/verify-flow/index.spec.tsx
+++ b/app/javascript/packages/verify-flow/verify-flow.spec.tsx
@@ -2,7 +2,7 @@ import sinon from 'sinon';
import { render } from '@testing-library/react';
import * as analytics from '@18f/identity-analytics';
import userEvent from '@testing-library/user-event';
-import { VerifyFlow } from './index';
+import VerifyFlow from './verify-flow';
describe('VerifyFlow', () => {
const sandbox = sinon.createSandbox();
@@ -23,7 +23,12 @@ describe('VerifyFlow', () => {
,
);
+ // Personal key
+ expect(getByText('idv.messages.confirm')).to.be.ok();
await userEvent.click(getByText('forms.buttons.continue'));
+
+ // Personal key confirm
+ expect(getByText('idv.messages.confirm')).to.be.ok();
await userEvent.type(getByLabelText('forms.personal_key.confirmation_label'), personalKey);
await userEvent.keyboard('{Enter}');
diff --git a/app/javascript/packages/verify-flow/verify-flow.tsx b/app/javascript/packages/verify-flow/verify-flow.tsx
index 54623ebdde7..dec7d4d2989 100644
--- a/app/javascript/packages/verify-flow/verify-flow.tsx
+++ b/app/javascript/packages/verify-flow/verify-flow.tsx
@@ -1,10 +1,9 @@
import { useEffect, useState } from 'react';
import { FormSteps } from '@18f/identity-form-steps';
-import { t } from '@18f/identity-i18n';
-import { Alert } from '@18f/identity-components';
import { trackEvent } from '@18f/identity-analytics';
-import VerifyFlowStepIndicator from './verify-flow-step-indicator';
import { STEPS } from './steps';
+import VerifyFlowStepIndicator from './verify-flow-step-indicator';
+import VerifyFlowAlert from './verify-flow-alert';
export interface VerifyFlowValues {
personalKey?: string;
@@ -60,7 +59,7 @@ const logStepVisited = (stepName: string) =>
const logStepSubmitted = (stepName: string) =>
trackEvent(`IdV: ${getEventStepName(stepName)} submitted`);
-export function VerifyFlow({
+function VerifyFlow({
initialValues = {},
enabledStepNames,
basePath,
@@ -68,7 +67,6 @@ export function VerifyFlow({
onComplete,
}: VerifyFlowProps) {
const [currentStep, setCurrentStep] = useState(STEPS[0].name);
-
useEffect(() => {
logStepVisited(currentStep);
}, [currentStep]);
@@ -81,9 +79,7 @@ export function VerifyFlow({
return (
<>
-
- {t('idv.messages.confirm')}
-
+
);
}
+
+export default VerifyFlow;