import React, { useMemo } from 'react'; import { authenticatorTextUtil } from '@aws-amplify/ui'; import { DefaultContent, DefaultFooter, DefaultHeader, DefaultRadioFormFields, } from '../../common'; import { useFieldValues } from '../../hooks'; import { DefaultVerifyUserProps } from '../types'; const COMPONENT_NAME = 'VerifyUser'; const { getSkipText, getVerifyContactText, getVerifyText, getAccountRecoveryInfoText, } = authenticatorTextUtil; const VerifyUser = ({ fields, handleBlur, handleChange, handleSubmit, skipVerification, validationErrors, ...rest }: DefaultVerifyUserProps): JSX.Element => { const { disableFormSubmit: disabled, fields: fieldsWithHandlers, fieldValidationErrors, handleFormSubmit, } = useFieldValues({ componentName: COMPONENT_NAME, fields, handleBlur, handleChange, handleSubmit, validationErrors, }); const headerText = getVerifyContactText(); const skipText = getSkipText(); const verifyText = getVerifyText(); const bodyText = getAccountRecoveryInfoText(); const buttons = useMemo( () => ({ primary: { children: verifyText, disabled, onPress: handleFormSubmit }, links: [{ children: skipText, onPress: skipVerification }], }), [disabled, handleFormSubmit, skipText, skipVerification, verifyText] ); return ( <DefaultContent {...rest} body={bodyText} buttons={buttons} fields={fieldsWithHandlers} headerText={headerText} validationErrors={fieldValidationErrors} /> ); }; VerifyUser.Footer = DefaultFooter; VerifyUser.FormFields = DefaultRadioFormFields; VerifyUser.Header = DefaultHeader; VerifyUser.displayName = COMPONENT_NAME; export default VerifyUser;