85 lines
2.9 KiB
TypeScript
85 lines
2.9 KiB
TypeScript
import { useState } from 'react'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { useDispatch, useSelector } from 'react-redux'
|
|
import { actions, selectors } from '../../store'
|
|
import { getClientTimezone } from '../../locales'
|
|
import { useAuth } from '../../auth'
|
|
import { useApi } from '../../api'
|
|
import Title from '../Title'
|
|
import Policy from '../Policy'
|
|
import EmailInput from './EmailInput'
|
|
import MainButton from '../MainButton'
|
|
import Loader, { LoaderColor } from '../Loader'
|
|
import ErrorText from '../ErrorText'
|
|
import routes from '../../routes'
|
|
|
|
function EmailEnterPage(): JSX.Element {
|
|
const api = useApi()
|
|
const { t, i18n } = useTranslation()
|
|
const dispatch = useDispatch()
|
|
const navigate = useNavigate()
|
|
const { user, signUp } = useAuth()
|
|
const { email, birthdate, birthtime } = useSelector(selectors.selectForm)
|
|
const [isDisabled, setIsDisabled] = useState(true)
|
|
const [isLoading, setIsLoading] = useState(false)
|
|
const [error, setError] = useState<Error | null>(null)
|
|
const timezone = getClientTimezone()
|
|
const locale = i18n.language
|
|
const links = [
|
|
{ text: 'EULA', href: 'https://aura.wit.life/terms' },
|
|
{ text: 'Privacy Policy', href: 'https://aura.wit.life/privacy' },
|
|
]
|
|
const handleValidEmail = (email: string) => {
|
|
dispatch(actions.form.addEmail(email))
|
|
setIsDisabled(false)
|
|
}
|
|
const handleClick = () => {
|
|
if (user) {
|
|
navigate(routes.client.subscription())
|
|
return
|
|
}
|
|
setError(null)
|
|
setIsLoading(true)
|
|
api.auth({ email, timezone, locale })
|
|
.then(({ auth: { token, user } }) => signUp(token, user))
|
|
.then((token) => {
|
|
const birthday = `${birthdate} ${birthtime}`
|
|
const payload = { user: { profile_attributes: { birthday } }, token }
|
|
return api.updateUser(payload)
|
|
})
|
|
.then(({ user }) => {
|
|
// TODO: remove this when understand btoa issue
|
|
if (user?.profile?.sign?.sign) {
|
|
user.profile.sign.sign = ''
|
|
}
|
|
dispatch(actions.user.update(user))
|
|
})
|
|
.then(() => navigate(routes.client.subscription()))
|
|
.catch((error: Error) => setError(error))
|
|
.finally(() => setIsLoading(false))
|
|
}
|
|
|
|
|
|
return (
|
|
<section className='page'>
|
|
<Title variant='h2' className='mt-24'>{t('weWillEmailYou')}</Title>
|
|
<EmailInput
|
|
name="email"
|
|
value={email}
|
|
placeholder={t('yourEmail')}
|
|
onValid={handleValidEmail}
|
|
onInvalid={() => setIsDisabled(true)}
|
|
/>
|
|
<p>{t('weDontShare')}</p>
|
|
<Policy links={links} sizing='medium'>{t('continueAgree')}</Policy>
|
|
<MainButton onClick={handleClick} disabled={isDisabled}>
|
|
{isLoading ? <Loader color={LoaderColor.White} /> : t('continue')}
|
|
</MainButton>
|
|
<ErrorText size='medium' isShown={Boolean(error)} message={error?.message} />
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default EmailEnterPage
|