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;