115 lines
4.1 KiB
TypeScript
115 lines
4.1 KiB
TypeScript
import styles from "./styles.module.scss";
|
|
import Title from "@/components/Title";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { actions, selectors } from "@/store";
|
|
import { Gender } from "@/data";
|
|
import PrivacyPolicy from "@/components/pages/ABDesign/v1/components/PrivacyPolicy";
|
|
// import Toast from "@/components/pages/ABDesign/v1/components/Toast";
|
|
import { useTranslations } from "@/hooks/translations";
|
|
import { ELocalesPlacement } from "@/locales";
|
|
import { useCallback, useEffect, useState } from "react";
|
|
import { sleep } from "@/services/date";
|
|
import metricService from "@/services/metric/metricService";
|
|
import { genders } from "@/components/pages/ABDesign/v1/data/genders";
|
|
import { useNavigate } from "react-router-dom";
|
|
import routes from "@/routes";
|
|
import { usePreloadImages } from "@/hooks/preload/images";
|
|
import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
|
|
import { useSession } from "@/hooks/session/useSession";
|
|
import { EGender, ESourceAuthorization } from "@/api/resources/User";
|
|
import AlreadyHaveAccount from "@/components/ui/AlreadyHaveAccount";
|
|
import Answer from "../../components/Answer";
|
|
|
|
function GenderPage() {
|
|
const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
|
|
const dispatch = useDispatch();
|
|
const navigate = useNavigate();
|
|
const { createSession, updateSession } = useSession();
|
|
const { checked: privacyPolicyChecked } = useSelector(
|
|
selectors.selectPrivacyPolicy
|
|
);
|
|
|
|
const { gender } = useSelector(selectors.selectQuestionnaire);
|
|
const [isSelected, setIsSelected] = useState(false);
|
|
usePreloadImages(["/v1/palmistry/hand-with-eye.svg"]);
|
|
useLottie({
|
|
preloadKey: ELottieKeys.handSymbols,
|
|
});
|
|
|
|
const localGenders = genders.map((gender) => ({
|
|
id: gender.id,
|
|
title: translate(gender.id, undefined, ELocalesPlacement.V1),
|
|
}));
|
|
|
|
const selectGender = (_gender: Gender | null) => {
|
|
dispatch(actions.privacyPolicy.updateChecked(true));
|
|
setIsSelected(true);
|
|
dispatch(actions.questionnaire.update({ gender: _gender?.id }));
|
|
};
|
|
|
|
const handleNext = useCallback(async () => {
|
|
if (!gender) return;
|
|
dispatch(actions.privacyPolicy.updateChecked(true));
|
|
await sleep(1000);
|
|
metricService.userParams({
|
|
gender: genders.find((g) => g.id === gender)?.name,
|
|
});
|
|
const session = await createSession(
|
|
ESourceAuthorization["aura.compatibility.v2"]
|
|
);
|
|
if (session?.sessionId?.length) {
|
|
updateSession(
|
|
{
|
|
profile: {
|
|
gender: EGender[gender as keyof typeof EGender],
|
|
},
|
|
},
|
|
ESourceAuthorization["aura.compatibility.v2"],
|
|
session.sessionId
|
|
);
|
|
metricService.userParams({
|
|
sessionId: session.sessionId,
|
|
});
|
|
}
|
|
return navigate(routes.client.compatibilityV2Birthdate());
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [gender, navigate]);
|
|
|
|
useEffect(() => {
|
|
if (privacyPolicyChecked && gender && isSelected) {
|
|
handleNext();
|
|
}
|
|
}, [gender, handleNext, isSelected, privacyPolicyChecked]);
|
|
|
|
return (
|
|
<>
|
|
<Title variant="h2" className={styles.title}>
|
|
{translate("/gender.title")}
|
|
</Title>
|
|
<p className={styles.description}>{translate("/gender.description", {
|
|
br: <br />,
|
|
})}</p>
|
|
{/* <ChooseGender onSelectGender={selectGender} /> */}
|
|
<PrivacyPolicy containerClassName={styles["privacy-policy"]} haveCheckbox={false} />
|
|
<div className={styles["genders-container"]}>
|
|
{localGenders.map((_gender, index) => (
|
|
<Answer
|
|
key={index}
|
|
answer={_gender}
|
|
isSelected={gender === _gender.id}
|
|
onClick={() => selectGender(genders.find((g) => g.id === _gender.id) ?? null)}
|
|
/>
|
|
))}
|
|
</div>
|
|
<AlreadyHaveAccount text={translate("/gender.already_have_account")} />
|
|
{/* {gender && !privacyPolicyChecked && (
|
|
<Toast classNameContainer={styles["toast-container"]} variant="error">
|
|
{translate("/gender.toast", undefined, ELocalesPlacement.V1)}
|
|
</Toast>
|
|
)} */}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default GenderPage;
|