Revise IdV app alert content to static content

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

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(<PasswordConfirmStep {...DEFAULT_PROPS} />);
+
+        expect(queryByRole('status')).to.not.exist();
+      });
+    });
+
+    context('with phone value', () => {
+      it('renders success alert', () => {
+        const { queryByRole } = render(
+          <PasswordConfirmStep {...DEFAULT_PROPS} value={{ phone: '5135551234' }} />,
+        );
+
+        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(
+            <PasswordConfirmStep
+              {...DEFAULT_PROPS}
+              value={{ phone: '5135551234' }}
+              errors={[{ error: new Error() }]}
+            />,
+          );
+
+          expect(queryByRole('status')).to.not.exist();
+        });
+      });
+    });
+
+    context('with errors', () => {
+      it('renders error messages', () => {
+        const { queryByRole } = render(
+          <PasswordConfirmStep {...DEFAULT_PROPS} errors={[{ error: new Error('Uh oh!') }]} />,
+        );
+
+        const alert = queryByRole('alert')!;
+
+        expect(alert).to.exist();
+        expect(alert.textContent).to.equal('Uh oh!');
+      });
+    });
+  });
 });

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 && (
+        <Alert type="success" className="margin-bottom-4">
+          {formatHTML(
+            t('idv.messages.review.info_verified_html', {
+              phone_message: `<strong>${t('idv.messages.phone.phone_of_record')}</strong>`,
+            }),
+            { strong: 'strong' },
+          )}
+        </Alert>
+      )}
       {errors.map(({ error }) => (
         <Alert key={error.message} type="error" className="margin-bottom-4">
           {error.message}

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(<PersonalKeyStep {...DEFAULT_PROPS} />);
+
+    const status = getByRole('status');
+
+    expect(status.textContent).to.equal('idv.messages.confirm');
+  });
 });

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 (
     <>
+      <Alert type="success" className="margin-bottom-4">
+        {t('idv.messages.confirm')}
+      </Alert>
       <PageHeading>{t('headings.personal_key')}</PageHeading>
       <p>{t('instructions.personal_key.info')}</p>
       <div className="full-width-box margin-y-5">

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,23 +118,17 @@ function VerifyFlow({
     setCompletedStep(stepName);
   }
 
-  function onChange(nextValues: Partial<VerifyFlowValues>) {
-    setValues(nextValues);
-    setSyncedValues(nextValues);
-  }
-
   return (
     <FlowContext.Provider value={context}>
       <VerifyFlowStepIndicator currentStep={currentStep} />
-      <VerifyFlowAlert currentStep={currentStep} values={values} />
       <FormSteps
         steps={steps}
         initialValues={syncedValues}
         initialStep={initialStep}
         promptOnNavigate={false}
         basePath={basePath}
         titleFormat={`%{step} - ${getConfigValue('appName')}`}
-        onChange={onChange}
+        onChange={setSyncedValues}
         onStepSubmit={onStepSubmit}
         onStepChange={setCurrentStep}
         onComplete={onComplete}

spec/javascripts/support/dom.js

@@ -1,6 +1,7 @@
 import sinon from 'sinon';
 import { JSDOM, ResourceLoader } from 'jsdom';
 import matchMediaPolyfill from 'mq-polyfill';
+import * as clipboard from 'clipboard-polyfill'; // See: https://github.com/jsdom/jsdom/issues/1568
 
 const TEST_URL = 'http://example.test';
 
@@ -53,6 +54,8 @@ export function createDOM() {
     }).dispatchEvent(new this.Event('resize'));
   };
 
+  dom.window.navigator.clipboard = clipboard;
+
   // See: https://github.com/jsdom/jsdom/issues/1695
   dom.window.Element.prototype.scrollIntoView = () => {};