85 lines
2.8 KiB
TypeScript
85 lines
2.8 KiB
TypeScript
import Title from "@/components/Title";
|
|
import styles from "./styles.module.scss";
|
|
import { DatePicker } from "@/components/DateTimePicker";
|
|
import { useState } from "react";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { actions, selectors } from "@/store";
|
|
import Button from "../../components/Button";
|
|
import routes, { compatibilityV2Prefix } from "@/routes";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useTranslations } from "@/hooks/translations";
|
|
import { ELocalesPlacement } from "@/locales";
|
|
import { useSession } from "@/hooks/session/useSession";
|
|
import { ESourceAuthorization } from "@/api/resources/User";
|
|
import { usePreloadImages } from "@/hooks/preload/images";
|
|
import { getZodiacSignByDate, ZODIACS } from "@/services/zodiac-sign";
|
|
|
|
function BirthdatePartner() {
|
|
const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
|
|
const { updateSession } = useSession();
|
|
const navigate = useNavigate();
|
|
const dispatch = useDispatch();
|
|
const { partnerBirthdate, partnerGender } = useSelector(selectors.selectQuestionnaire);
|
|
const [birthdate, setBirthdate] = useState(partnerBirthdate || "");
|
|
const [isDisabled, setIsDisabled] = useState(true);
|
|
const zodiacSign = getZodiacSignByDate(birthdate);
|
|
|
|
usePreloadImages(
|
|
!!zodiacSign?.length ?
|
|
[
|
|
`/zodiac-signs/${partnerGender?.toLowerCase()}/${zodiacSign?.toLowerCase()}.svg`
|
|
] :
|
|
ZODIACS.map(
|
|
(zodiac) => `/zodiac-signs/${partnerGender?.toLowerCase()}/${zodiac?.toLowerCase()}.svg`
|
|
)
|
|
);
|
|
|
|
const handleValid = (_birthdate: string) => {
|
|
setBirthdate(_birthdate);
|
|
setIsDisabled(_birthdate === "");
|
|
};
|
|
|
|
const handleNext = () => {
|
|
dispatch(actions.questionnaire.update({ partnerBirthdate: birthdate }));
|
|
navigate(routes.client.compatibilityV2PalmsInformationPartner());
|
|
updateSession(
|
|
{
|
|
partner: {
|
|
birthdate: `${birthdate} 00:00`,
|
|
},
|
|
},
|
|
ESourceAuthorization["aura.compatibility.v2"]
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className={styles["page-container"]}>
|
|
<Title variant="h2" className={styles.title}>
|
|
{translate("/birthdate-partner.title")}
|
|
</Title>
|
|
<p className={styles.description}>{translate("/birthdate-partner.text")}</p>
|
|
<DatePicker
|
|
name="birthdate"
|
|
value={birthdate}
|
|
onValid={handleValid}
|
|
onInvalid={() => setIsDisabled(true)}
|
|
inputClassName="date-picker-input"
|
|
/>
|
|
<Button
|
|
className={styles.button}
|
|
onClick={handleNext}
|
|
disabled={isDisabled}
|
|
>
|
|
{translate("next")}
|
|
</Button>
|
|
<img
|
|
className={styles.image}
|
|
src={`${compatibilityV2Prefix}/hand-with-eye.svg`}
|
|
alt="Hand with eye"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default BirthdatePartner;
|