Show IdV app alert message relevant for current step

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';

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(<VerifyFlowAlert currentStep={step} />);
+
+        expect(getByRole('status').textContent).equal(expected);
+      });
+    });
+  });
+
+  context('step without a status message', () => {
+    it('renders nothing', () => {
+      const { container } = render(<VerifyFlowAlert currentStep="bad" />);
+
+      expect(container.innerHTML).to.be.empty();
+    });
+  });
+});

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 (
+    <Alert type="success" className="margin-bottom-4">
+      {message}
+    </Alert>
+  );
+}
+
+export default VerifyFlowAlert;

app/javascript/packages/verify-flow/index.spec.tsx → 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', () => {
       <VerifyFlow appName="Example App" initialValues={{ personalKey }} onComplete={onComplete} />,
     );
 
+    // 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}');
 

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,15 +59,14 @@ const logStepVisited = (stepName: string) =>
 const logStepSubmitted = (stepName: string) =>
   trackEvent(`IdV: ${getEventStepName(stepName)} submitted`);
 
-export function VerifyFlow({
+function VerifyFlow({
   initialValues = {},
   enabledStepNames,
   basePath,
   appName,
   onComplete,
 }: VerifyFlowProps) {
   const [currentStep, setCurrentStep] = useState(STEPS[0].name);
-
   useEffect(() => {
     logStepVisited(currentStep);
   }, [currentStep]);
@@ -81,9 +79,7 @@ export function VerifyFlow({
   return (
     <>
       <VerifyFlowStepIndicator currentStep={currentStep} />
-      <Alert type="success" className="margin-bottom-4">
-        {t('idv.messages.confirm')}
-      </Alert>
+      <VerifyFlowAlert currentStep={currentStep} />
       <FormSteps
         steps={steps}
         initialValues={initialValues}
@@ -97,3 +93,5 @@ export function VerifyFlow({
     </>
   );
 }
+
+export default VerifyFlow;