71 lines
2.4 KiB
TypeScript
71 lines
2.4 KiB
TypeScript
import routes, { compatibilityV2Prefix } from "@/routes";
|
|
import styles from "./styles.module.scss";
|
|
import Title from "@/components/Title";
|
|
import Button from "../../components/Button";
|
|
import { useTranslations } from "@/hooks/translations";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { ELocalesPlacement } from "@/locales";
|
|
import { selectors } from "@/store";
|
|
import { useSelector } from "react-redux";
|
|
import { images } from "../../data";
|
|
import { getZodiacSignByDate } from "@/services/zodiac-sign";
|
|
import { EUnleashFlags, useUnleash } from "@/hooks/ab/unleash/useUnleash";
|
|
import Loader, { LoaderColor } from "@/components/Loader";
|
|
import { usePreloadImages } from "@/hooks/preload/images";
|
|
|
|
function PalmsInformationPartner() {
|
|
const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
|
|
const { partnerGender, partnerBirthdate } = useSelector(selectors.selectQuestionnaire);
|
|
|
|
const zodiacSign = getZodiacSignByDate(partnerBirthdate);
|
|
const navigate = useNavigate();
|
|
|
|
usePreloadImages([`${compatibilityV2Prefix}/hand-with-eye.svg`]);
|
|
|
|
const { isReady, variant: zodiacImages } = useUnleash({
|
|
flag: EUnleashFlags.zodiacImages
|
|
});
|
|
|
|
const handleNext = () => {
|
|
navigate(routes.client.compatibilityV2DateEvent());
|
|
};
|
|
|
|
if (!isReady) {
|
|
return <Loader color={LoaderColor.Black} />;
|
|
}
|
|
|
|
return (
|
|
<div className={styles["page-container"]}>
|
|
{zodiacImages !== "new" && (
|
|
<div className={styles.zodiac}>
|
|
<img
|
|
className={styles.image}
|
|
src={images(`zodiacs/${partnerGender}/${zodiacSign?.toUpperCase()}.webp`)}
|
|
alt="Zodiac sign"
|
|
/>
|
|
</div>
|
|
)}
|
|
{zodiacImages === "new" && (
|
|
<div className={styles.zodiacNew}>
|
|
<img
|
|
className={styles.image}
|
|
src={`/zodiac-signs/${partnerGender?.toLowerCase()}/${zodiacSign?.toLowerCase()}.svg`}
|
|
alt="Zodiac sign"
|
|
/>
|
|
</div>
|
|
)}
|
|
<Title variant="h2" className={styles.title}>
|
|
{translate(`/palms-information-partner.${zodiacSign?.toLowerCase()}.title`)}
|
|
</Title>
|
|
<p className={styles.description}>
|
|
{translate(`/palms-information-partner.${zodiacSign?.toLowerCase()}.description`)}
|
|
</p>
|
|
<Button onClick={handleNext}>
|
|
{translate("next")}
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default PalmsInformationPartner;
|