100 lines
3.1 KiB
TypeScript
100 lines
3.1 KiB
TypeScript
import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
|
|
import styles from "./styles.module.scss";
|
|
import { DotLottieReact } from "@lottiefiles/dotlottie-react";
|
|
import Title from "@/components/Title";
|
|
import { useTranslations } from "@/hooks/translations";
|
|
import { ELocalesPlacement } from "@/locales";
|
|
import { getZodiacSignByDate } from "@/services/zodiac-sign";
|
|
import { useSelector } from "react-redux";
|
|
import { selectors } from "@/store";
|
|
import Button from "../../components/Button";
|
|
import { useNavigate } from "react-router-dom";
|
|
import routes from "@/routes";
|
|
|
|
const animations = {
|
|
both: ELottieKeys.scalesNeutralPalmistry,
|
|
heart: ELottieKeys.scalesHeartPalmistry,
|
|
head: ELottieKeys.scalesHeadPalmistry,
|
|
};
|
|
|
|
function HeadOrHeartResult() {
|
|
const navigate = useNavigate();
|
|
const { translate } = useTranslations(ELocalesPlacement.V1);
|
|
const { headOrHeart } = useSelector(selectors.selectPalmistryV1Answers);
|
|
|
|
const { animationData } = useLottie({
|
|
loadKey: animations[headOrHeart as keyof typeof animations],
|
|
});
|
|
|
|
const birthdate = useSelector(selectors.selectBirthdate);
|
|
const zodiacSign = getZodiacSignByDate(birthdate);
|
|
|
|
const handleBack = () => {
|
|
navigate(-1);
|
|
};
|
|
|
|
const handleNext = () => {
|
|
navigate(`${routes.client.palmistryV1RelateFollowing()}/1`);
|
|
};
|
|
|
|
return (
|
|
<section className={styles.container}>
|
|
<div className={styles["animation-container"]}>
|
|
{animationData && (
|
|
<DotLottieReact
|
|
className={`${styles["lottie-animation"]} ym-hide-content`}
|
|
data={animationData}
|
|
autoplay
|
|
loop={false}
|
|
/>
|
|
)}
|
|
</div>
|
|
<Title variant="h1" className={styles.title}>
|
|
{headOrHeart === "both" &&
|
|
translate("/both.title", {
|
|
wonderful: (
|
|
<b style={{ color: "#224e90" }}>{translate("/both.wonderful")}</b>
|
|
),
|
|
zodiacSign: (
|
|
<b style={{ color: "#224e90" }}>
|
|
{translate(`zodiac_signs.${zodiacSign?.toLowerCase()}`)}
|
|
</b>
|
|
),
|
|
})}
|
|
{headOrHeart === "head" &&
|
|
translate("/with-head.title", {
|
|
zodiacSign: (
|
|
<b style={{ color: "#224e90" }}>
|
|
{translate(`zodiac_signs.${zodiacSign?.toLowerCase()}`)}
|
|
</b>
|
|
),
|
|
})}
|
|
{headOrHeart === "heart" &&
|
|
translate("/with-heart.title", {
|
|
zodiacSign: (
|
|
<b style={{ color: "#224e90" }}>
|
|
{translate(`zodiac_signs.${zodiacSign?.toLowerCase()}`)}
|
|
</b>
|
|
),
|
|
})}
|
|
</Title>
|
|
<div className={styles["buttons-container"]}>
|
|
<Button
|
|
className={`${styles.button} ${styles["back-button"]}`}
|
|
onClick={handleBack}
|
|
>
|
|
{translate("back")}
|
|
</Button>
|
|
<Button
|
|
className={`${styles.button} ${styles["next-button"]}`}
|
|
onClick={handleNext}
|
|
>
|
|
{translate("next")}
|
|
</Button>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default HeadOrHeartResult;
|