diff --git a/src/components/ageAssurance/AgeAssuranceInitDialog.tsx b/src/components/ageAssurance/AgeAssuranceInitDialog.tsx index b27db906da..4ce2fb52c9 100644 --- a/src/components/ageAssurance/AgeAssuranceInitDialog.tsx +++ b/src/components/ageAssurance/AgeAssuranceInitDialog.tsx @@ -6,6 +6,8 @@ import {validate as validateEmail} from 'email-validator' import {useCleanError} from '#/lib/hooks/useCleanError' import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo' +import {useTLDs} from '#/lib/hooks/useTLDs' +import {isEmailMaybeInvalid} from '#/lib/strings/email' import {useAgeAssuranceContext} from '#/state/age-assurance' import {useLanguagePrefs} from '#/state/preferences' import {useSession} from '#/state/session' @@ -61,6 +63,7 @@ function Inner() { const {close} = Dialog.useDialogContext() const {lastInitiatedAt} = useAgeAssuranceContext() const getTimeAgo = useGetTimeAgo() + const tlds = useTLDs() const wasRecentlyInitiated = lastInitiatedAt && @@ -68,18 +71,41 @@ function Inner() { const [success, setSuccess] = useState(false) const [email, setEmail] = useState(currentAccount?.email || '') - const [emailValid, setEmailValid] = useState(validateEmail(email)) + const [emailError, setEmailError] = useState('') + const [disabled, setDisabled] = useState(false) const [language, setLanguage] = useState(langPrefs.appLanguage) const [error, setError] = useState('') const {mutateAsync: init, isPending} = useInitAgeAssurance() + const runEmailValidation = () => { + if (validateEmail(email)) { + setEmailError('') + setDisabled(false) + + if (tlds && isEmailMaybeInvalid(email, tlds)) { + setEmailError( + _( + msg`Please double-check that you have entered your email address correctly.`, + ), + ) + return {status: 'maybe'} + } + + return {status: 'valid'} + } + + setEmailError(_(msg`Please enter a valid email.`)) + setDisabled(true) + + return {status: 'invalid'} + } + const onSubmit = async () => { try { - if (!validateEmail(email)) { - setEmailValid(false) - return - } + const {status} = runEmailValidation() + + if (status === 'invalid') return await init({ email, @@ -169,15 +195,15 @@ function Inner() { Your email - + setEmailValid(true)} + onFocus={() => setEmailError('')} onBlur={() => { - setEmailValid(validateEmail(email)) + runEmailValidation() }} returnKeyType="done" autoCapitalize="none" @@ -186,6 +212,12 @@ function Inner() { onSubmitEditing={onSubmit} /> + + {emailError && ( + + {emailError} + + )} @@ -198,6 +230,7 @@ function Inner() { {error && {error}}