131 lines
3.5 KiB
TypeScript
131 lines
3.5 KiB
TypeScript
import React from "react";
|
||
import { useTranslation } from "react-i18next";
|
||
import { useDispatch } from "react-redux";
|
||
import useSteps from "@/hooks/palmistry/use-steps";
|
||
import Button from "@/components/palmistry/button/button";
|
||
import Input from "@/components/palmistry/input/input";
|
||
import { actions } from "@/store";
|
||
import Title from "@/components/Title";
|
||
import Loader, { LoaderColor } from "@/components/Loader";
|
||
import { useAuthentication } from "@/hooks/authentication/use-authentication";
|
||
import { ESourceAuthorization } from "@/api/resources/User";
|
||
|
||
const emailRegex = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
|
||
|
||
export default function StepEmail() {
|
||
const { t } = useTranslation();
|
||
const dispatch = useDispatch();
|
||
|
||
const steps = useSteps();
|
||
|
||
const [email, setEmail] = React.useState(steps.storedValue);
|
||
const [emailIsValid, setEmailIsValid] = React.useState(false);
|
||
const [isAuth, setIsAuth] = React.useState(false);
|
||
const { error, isLoading, authorization } = useAuthentication();
|
||
|
||
const onChangeEmail = (value: string) => {
|
||
setEmail(value);
|
||
};
|
||
|
||
React.useEffect(() => {
|
||
if (steps.storedValue) setEmail(steps.storedValue);
|
||
}, [steps.storedValue]);
|
||
|
||
React.useEffect(() => {
|
||
const emailIsValid = email.match(emailRegex) !== null;
|
||
setEmailIsValid(emailIsValid);
|
||
|
||
if (emailIsValid) {
|
||
dispatch(actions.form.addEmail(email));
|
||
}
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [email]);
|
||
|
||
const authorize = async () => {
|
||
await authorization(email, ESourceAuthorization["aura.palmistry"]);
|
||
window.ym(95799066, "reachGoal", "EnteredEmail");
|
||
setIsAuth(true);
|
||
};
|
||
|
||
const onNext = async () => {
|
||
await authorize();
|
||
steps.saveCurrent(email);
|
||
steps.goNext();
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<div className="palmistry-container__title-wrapper">
|
||
<h2>
|
||
Enter your email to get your advanced Palmistry reading with AURA
|
||
</h2>
|
||
</div>
|
||
|
||
<Input
|
||
className="palmistry-container__input"
|
||
placeholder="You Email"
|
||
type="text"
|
||
value={email}
|
||
onChange={onChangeEmail}
|
||
floatingPlaceholder
|
||
/>
|
||
|
||
<div className="palmistry-container__description">
|
||
<h3>We don’t share any personal information.</h3>
|
||
</div>
|
||
|
||
<div className="palmistry-container__policy">
|
||
<p>
|
||
By clicking "Continue" below you agree to AURA{" "}
|
||
<a
|
||
href="https://aura.wit.life/terms"
|
||
target="_blank"
|
||
rel="noreferrer nofollow"
|
||
>
|
||
EULA
|
||
</a>{" "}
|
||
and{" "}
|
||
<a
|
||
href="https://aura.wit.life/privacy"
|
||
target="_blank"
|
||
rel="noreferrer nofollow"
|
||
>
|
||
Privacy Policy
|
||
</a>
|
||
.
|
||
</p>
|
||
</div>
|
||
|
||
<Button
|
||
className="palmistry-container__button"
|
||
type="button"
|
||
active={emailIsValid}
|
||
disabled={!emailIsValid}
|
||
onClick={onNext}
|
||
>
|
||
{isLoading && <Loader color={LoaderColor.White} />}
|
||
|
||
{!isLoading &&
|
||
!(!error?.length && !isLoading && isAuth) &&
|
||
t("_continue")}
|
||
|
||
{!error?.length && !isLoading && isAuth && (
|
||
<img
|
||
style={{ height: "30px", width: "auto" }}
|
||
src="/SuccessIcon.png"
|
||
alt="Success Icon"
|
||
/>
|
||
)}
|
||
</Button>
|
||
|
||
{isLoading && <Loader color={LoaderColor.White} />}
|
||
|
||
{error?.length && (
|
||
<Title variant="h3" style={{ color: "red", margin: 0 }}>
|
||
Something went wrong
|
||
</Title>
|
||
)}
|
||
</>
|
||
);
|
||
}
|