Eric Bailey
303 lines
9.9 KiB
TypeScript
303 lines
9.9 KiB
TypeScript
import {useState} from 'react'
|
||
import {View} from 'react-native'
|
||
import {msg, Trans} from '@lingui/macro'
|
||
import {useLingui} from '@lingui/react'
|
||
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/ageAssurance'
|
||
import {useInitAgeAssurance} from '#/state/ageAssurance/useInitAgeAssurance'
|
||
import {useLanguagePrefs} from '#/state/preferences'
|
||
import {useSession} from '#/state/session'
|
||
import {atoms as a, useTheme, web} from '#/alf'
|
||
import {Admonition} from '#/components/Admonition'
|
||
import {AgeAssuranceBadge} from '#/components/ageAssurance/AgeAssuranceBadge'
|
||
import {urls} from '#/components/ageAssurance/const'
|
||
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
|
||
import * as Dialog from '#/components/Dialog'
|
||
import {Divider} from '#/components/Divider'
|
||
import * as TextField from '#/components/forms/TextField'
|
||
import {ShieldCheck_Stroke2_Corner0_Rounded as Shield} from '#/components/icons/Shield'
|
||
import {LanguageSelect} from '#/components/LanguageSelect'
|
||
import {InlineLinkText} from '#/components/Link'
|
||
import {Loader} from '#/components/Loader'
|
||
import {Text} from '#/components/Typography'
|
||
|
||
export {useDialogControl} from '#/components/Dialog/context'
|
||
|
||
export function AgeAssuranceInitDialog({
|
||
control,
|
||
}: {
|
||
control: Dialog.DialogControlProps
|
||
}) {
|
||
const {_} = useLingui()
|
||
return (
|
||
<Dialog.Outer control={control}>
|
||
<Dialog.Handle />
|
||
|
||
<Dialog.ScrollableInner
|
||
label={_(
|
||
msg`Begin the age assurance process by completing the fields below.`,
|
||
)}
|
||
style={[
|
||
web({
|
||
maxWidth: 400,
|
||
}),
|
||
]}>
|
||
<Inner />
|
||
<Dialog.Close />
|
||
</Dialog.ScrollableInner>
|
||
</Dialog.Outer>
|
||
)
|
||
}
|
||
|
||
function Inner() {
|
||
const t = useTheme()
|
||
const {_} = useLingui()
|
||
const {currentAccount} = useSession()
|
||
const langPrefs = useLanguagePrefs()
|
||
const cleanError = useCleanError()
|
||
const {close} = Dialog.useDialogContext()
|
||
const {lastInitiatedAt} = useAgeAssuranceContext()
|
||
const getTimeAgo = useGetTimeAgo()
|
||
const tlds = useTLDs()
|
||
|
||
const wasRecentlyInitiated =
|
||
lastInitiatedAt &&
|
||
new Date(lastInitiatedAt).getTime() > Date.now() - 5 * 60 * 1000 // 5 minutes
|
||
|
||
const [success, setSuccess] = useState(false)
|
||
const [email, setEmail] = useState(currentAccount?.email || '')
|
||
const [emailError, setEmailError] = useState<string>('')
|
||
const [disabled, setDisabled] = useState(false)
|
||
const [language, setLanguage] = useState(langPrefs.appLanguage)
|
||
const [error, setError] = useState<string>('')
|
||
|
||
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 address.`))
|
||
setDisabled(true)
|
||
|
||
return {status: 'invalid'}
|
||
}
|
||
|
||
const onSubmit = async () => {
|
||
try {
|
||
const {status} = runEmailValidation()
|
||
|
||
if (status === 'invalid') return
|
||
|
||
await init({
|
||
email,
|
||
language,
|
||
})
|
||
|
||
setSuccess(true)
|
||
} catch (e) {
|
||
const {clean, raw} = cleanError(e)
|
||
|
||
if (clean) {
|
||
setError(clean || _(msg`Something went wrong, please try again`))
|
||
} else {
|
||
let message = _(msg`Something went wrong, please try again`)
|
||
|
||
if (raw) {
|
||
if (raw.startsWith('This email address is not supported')) {
|
||
message = _(
|
||
msg`Please enter a valid, non-temporary email address. You may need to access this email in the future.`,
|
||
)
|
||
}
|
||
}
|
||
|
||
setError(message)
|
||
}
|
||
}
|
||
}
|
||
|
||
return (
|
||
<View>
|
||
<View style={[a.align_start]}>
|
||
<AgeAssuranceBadge />
|
||
|
||
<Text style={[a.text_xl, a.font_heavy, a.pt_xl, a.pb_md]}>
|
||
{success ? <Trans>Success!</Trans> : <Trans>Verify your age</Trans>}
|
||
</Text>
|
||
|
||
<View style={[a.pb_xl, a.gap_sm]}>
|
||
{success ? (
|
||
<Text style={[a.text_sm, a.leading_snug]}>
|
||
<Trans>
|
||
Please check your email inbox for further instructions. It may
|
||
take a minute or two to arrive.
|
||
</Trans>
|
||
</Text>
|
||
) : (
|
||
<>
|
||
<Text style={[a.text_sm, a.leading_snug]}>
|
||
<Trans>
|
||
We use{' '}
|
||
<InlineLinkText
|
||
overridePresentation
|
||
disableMismatchWarning
|
||
label={urls.kwsHome}
|
||
to={urls.kwsHome}
|
||
style={[a.text_sm, a.leading_snug]}>
|
||
KWS
|
||
</InlineLinkText>{' '}
|
||
to verify that you’re an adult. When you click "Begin" below,
|
||
KWS will email you instructions for verifying your age. When
|
||
you’re done, you'll be brought back to continue using Bluesky.
|
||
</Trans>
|
||
</Text>
|
||
<Text style={[a.text_sm, a.leading_snug]}>
|
||
<Trans>This should only take a few minutes.</Trans>
|
||
</Text>
|
||
</>
|
||
)}
|
||
</View>
|
||
|
||
{success ? (
|
||
<View style={[a.w_full]}>
|
||
<Button
|
||
label={_(msg`Close dialog`)}
|
||
size="large"
|
||
variant="solid"
|
||
color="secondary"
|
||
onPress={() => close()}>
|
||
<ButtonText>
|
||
<Trans>Close dialog</Trans>
|
||
</ButtonText>
|
||
</Button>
|
||
</View>
|
||
) : (
|
||
<>
|
||
<Divider />
|
||
|
||
<View style={[a.w_full, a.pt_xl, a.gap_lg, a.pb_lg]}>
|
||
{wasRecentlyInitiated && (
|
||
<Admonition type="warning">
|
||
<Trans>
|
||
You initiated this flow already,{' '}
|
||
{getTimeAgo(lastInitiatedAt, new Date(), {format: 'long'})}{' '}
|
||
ago. It may take up to 5 minutes for emails to reach your
|
||
inbox. Consider waiting a few minutes before trying again.
|
||
</Trans>
|
||
</Admonition>
|
||
)}
|
||
|
||
<View>
|
||
<TextField.LabelText>
|
||
<Trans>Your email</Trans>
|
||
</TextField.LabelText>
|
||
<TextField.Root isInvalid={!!emailError}>
|
||
<TextField.Input
|
||
label={_(msg`Your email`)}
|
||
placeholder={_(msg`Your email`)}
|
||
value={email}
|
||
onChangeText={setEmail}
|
||
onFocus={() => setEmailError('')}
|
||
onBlur={() => {
|
||
runEmailValidation()
|
||
}}
|
||
returnKeyType="done"
|
||
autoCapitalize="none"
|
||
autoComplete="off"
|
||
autoCorrect={false}
|
||
onSubmitEditing={onSubmit}
|
||
/>
|
||
</TextField.Root>
|
||
|
||
{emailError ? (
|
||
<Admonition type="error" style={[a.mt_sm]}>
|
||
{emailError}
|
||
</Admonition>
|
||
) : (
|
||
<Admonition type="tip" style={[a.mt_sm]}>
|
||
<Trans>
|
||
Use your account email, or a real email you control, in
|
||
case KWS or Bluesky needs to contact you.
|
||
</Trans>
|
||
</Admonition>
|
||
)}
|
||
</View>
|
||
|
||
<View>
|
||
<TextField.LabelText>
|
||
<Trans>Your preferred language</Trans>
|
||
</TextField.LabelText>
|
||
<LanguageSelect value={language} onChange={setLanguage} />
|
||
</View>
|
||
|
||
{error && <Admonition type="error">{error}</Admonition>}
|
||
|
||
<Button
|
||
disabled={disabled}
|
||
label={_(msg`Get an email`)}
|
||
size="large"
|
||
variant="solid"
|
||
color="primary"
|
||
onPress={onSubmit}>
|
||
<ButtonText>
|
||
<Trans>Begin</Trans>
|
||
</ButtonText>
|
||
<ButtonIcon
|
||
icon={isPending ? Loader : Shield}
|
||
position="right"
|
||
/>
|
||
</Button>
|
||
</View>
|
||
|
||
<Text
|
||
style={[a.text_xs, a.leading_snug, t.atoms.text_contrast_medium]}>
|
||
<Trans>
|
||
By continuing, you agree to the{' '}
|
||
<InlineLinkText
|
||
overridePresentation
|
||
disableMismatchWarning
|
||
label={urls.kwsTermsOfUse}
|
||
to={urls.kwsTermsOfUse}
|
||
style={[a.text_xs, a.leading_snug]}>
|
||
KWS Terms of Use
|
||
</InlineLinkText>{' '}
|
||
and acknowledge that KWS will store your verified status with
|
||
your hashed email address in accordance with the{' '}
|
||
<InlineLinkText
|
||
overridePresentation
|
||
disableMismatchWarning
|
||
label={urls.kwsPrivacyPolicy}
|
||
to={urls.kwsPrivacyPolicy}
|
||
style={[a.text_xs, a.leading_snug]}>
|
||
KWS Privacy Policy
|
||
</InlineLinkText>
|
||
. This means you won’t need to verify again the next time you
|
||
use this email for other apps, games, and services powered by
|
||
KWS technology, including Bluesky.
|
||
</Trans>
|
||
</Text>
|
||
</>
|
||
)}
|
||
</View>
|
||
</View>
|
||
)
|
||
}
|