diff --git a/src/id-verification/IdVerification.messages.js b/src/id-verification/IdVerification.messages.js index 39a2ec0..cc3b4df 100644 --- a/src/id-verification/IdVerification.messages.js +++ b/src/id-verification/IdVerification.messages.js @@ -581,6 +581,11 @@ const messages = defineMessages({ defaultMessage: 'Please update account name to match the name on your ID.', description: 'Error that shows when the user needs to update their account name to match the name on their ID.', }, + 'id.verification.name.error': { + id: 'id.verification.name.error', + defaultMessage: 'Please enter your name as it appears on your government-issued ID.', + description: 'Error that shows when the user needs to update their name to match the name on their ID.', + }, 'id.verification.account.name.warning.prefix': { id: 'id.verification.account.name.warning.prefix', defaultMessage: 'Please Note:', diff --git a/src/id-verification/panels/GetNameIdPanel.jsx b/src/id-verification/panels/GetNameIdPanel.jsx index 4f545c3..eadb27e 100644 --- a/src/id-verification/panels/GetNameIdPanel.jsx +++ b/src/id-verification/panels/GetNameIdPanel.jsx @@ -14,7 +14,87 @@ import { VerifiedNameContext } from '../VerifiedNameContext'; import messages from '../IdVerification.messages'; -function GetNameIdPanel(props) { +function GetNameIdPanelVerified(props) { + const { push, location } = useHistory(); + const nameInputRef = useRef(); + const panelSlug = 'get-name-id'; + const nextPanelSlug = useNextPanelSlug(panelSlug); + + const { nameOnAccount, idPhotoName, setIdPhotoName } = useContext(IdVerificationContext); + const nameOnAccountValue = nameOnAccount || ''; + + useEffect(() => { + if (idPhotoName === null) { + setIdPhotoName(nameOnAccountValue); + } + + if (location.state?.fromSummary && nameInputRef.current) { + nameInputRef.current.focus(); + } + }, []); + + function handleSubmit(e) { + e.preventDefault(); + if (idPhotoName) { + push(nextPanelSlug); + } + } + + return ( + +

+ {props.intl.formatMessage(messages['id.verification.name.check.instructions'])} +

+

+ {props.intl.formatMessage(messages['id.verification.name.check.mismatch.information'])} +

+ +
+ + + {props.intl.formatMessage(messages['id.verification.name.label'])} + + setIdPhotoName(e.target.value)} + data-testid="name-input" + /> + {!idPhotoName && ( + + {props.intl.formatMessage(messages['id.verification.name.error'])} + + )} + +
+ +
+ + {props.intl.formatMessage(messages['id.verification.next'])} + +
+
+ ); +} + +function GetNameIdPanelNonVerified(props) { const { push } = useHistory(); const panelSlug = 'get-name-id'; const [nameMatches, setNameMatches] = useState(true); @@ -24,7 +104,6 @@ function GetNameIdPanel(props) { const { nameOnAccount, userId, profileDataManager, idPhotoName, setIdPhotoName, } = useContext(IdVerificationContext); - const { verifiedNameEnabled } = useContext(VerifiedNameContext); const nameOnAccountValue = nameOnAccount || ''; const invalidName = !nameMatches && (!idPhotoName || idPhotoName === nameOnAccount); const blankName = !nameOnAccount && !idPhotoName; @@ -93,38 +172,23 @@ function GetNameIdPanel(props) { return (

- { - verifiedNameEnabled - ? props.intl.formatMessage(messages['id.verification.name.check.instructions']) - : props.intl.formatMessage(messages['id.verification.account.name.instructions']) - } -

-

- {verifiedNameEnabled && props.intl.formatMessage(messages['id.verification.name.check.mismatch.information'])} + {props.intl.formatMessage(messages['id.verification.account.name.instructions'])}

- { - verifiedNameEnabled - ? props.intl.formatMessage(messages['id.verification.name.check.radio.label']) - : props.intl.formatMessage(messages['id.verification.account.name.radio.label']) - } + {props.intl.formatMessage(messages['id.verification.account.name.radio.label'])} { @@ -137,7 +201,7 @@ function GetNameIdPanel(props) { id="nameMatchesNo" name="nameMatches" data-testid="name-matches-no" - label={verifiedNameEnabled ? props.intl.formatMessage(messages['id.verification.name.check.radio.no']) : props.intl.formatMessage(messages['id.verification.account.name.radio.no'])} + label={props.intl.formatMessage(messages['id.verification.account.name.radio.no'])} checked={!nameMatches} disabled={!nameOnAccount} onChange={() => setNameMatches(false)} @@ -145,11 +209,7 @@ function GetNameIdPanel(props) { - { - verifiedNameEnabled - ? props.intl.formatMessage(messages['id.verification.name.label']) - : props.intl.formatMessage(messages['id.verification.account.name.label']) - } + {props.intl.formatMessage(messages['id.verification.account.name.label'])} ; + } + + return ; +} + +GetNameIdPanelVerified.propTypes = { + intl: intlShape.isRequired, +}; + +GetNameIdPanelNonVerified.propTypes = { intl: intlShape.isRequired, };