99 lines
3.0 KiB
TypeScript
Executable File
99 lines
3.0 KiB
TypeScript
Executable File
import Title from "@/components/Title";
|
|
import styles from "./styles.module.css";
|
|
import MainButton from "@/components/MainButton";
|
|
import { useNavigate } from "react-router-dom";
|
|
import routes from "@/routes";
|
|
import { useSelector } from "react-redux";
|
|
import { selectors } from "@/store";
|
|
import { getZodiacSignByDate } from "@/services/zodiac-sign";
|
|
import { getRandomArbitrary } from "@/services/random-value";
|
|
import { zodiacSignsCompatibility } from "@/data/zodiacSignsCompatibility";
|
|
import { useMemo } from "react";
|
|
|
|
function RelationshipZodiacInfoPage() {
|
|
const navigate = useNavigate();
|
|
const { gender, partnerGender, birthdate, partnerBirthdate } = useSelector(
|
|
selectors.selectQuestionnaire
|
|
);
|
|
const [zodiacSign, partnerZodiacSign] = [
|
|
getZodiacSignByDate(birthdate),
|
|
getZodiacSignByDate(partnerBirthdate),
|
|
];
|
|
const randomCompatibility = useMemo(() => {
|
|
const replaceValues = {
|
|
_gender_: gender,
|
|
_zodiacSign_: zodiacSign,
|
|
_partnerGender_: partnerGender,
|
|
_partnerZodiacSign_: partnerZodiacSign,
|
|
};
|
|
|
|
let result =
|
|
zodiacSignsCompatibility[
|
|
getRandomArbitrary(0, zodiacSignsCompatibility.length)
|
|
];
|
|
|
|
for (const key in replaceValues) {
|
|
result = result.replace(
|
|
key,
|
|
String(replaceValues[key as keyof typeof replaceValues])
|
|
);
|
|
}
|
|
|
|
return result;
|
|
}, [gender, partnerGender, partnerZodiacSign, zodiacSign]);
|
|
|
|
const handleBack = () => {
|
|
navigate(-1);
|
|
};
|
|
|
|
const handleNext = () => {
|
|
navigate(
|
|
`${routes.client.questionnaire()}/partnerProfile/partnerIsBirthTime`
|
|
);
|
|
};
|
|
|
|
return (
|
|
<section className={`${styles.page} page`}>
|
|
<div className={styles["image-container"]}>
|
|
<img
|
|
src={`/questionnaire/zodiacs/${gender}/${zodiacSign?.toLowerCase()}.webp`}
|
|
alt="The zodiac signs"
|
|
/>
|
|
<img src="/plus.svg" alt="Plus" />
|
|
<img
|
|
src={`/questionnaire/zodiacs/${partnerGender}/${partnerZodiacSign?.toLowerCase()}.webp`}
|
|
alt="The zodiac signs"
|
|
/>
|
|
</div>
|
|
<div className={styles["compatibility-description-container"]}>
|
|
<Title variant="h1" className={styles.title}>
|
|
{partnerZodiacSign} {partnerGender}s
|
|
</Title>
|
|
<p className={styles.text}>{randomCompatibility}</p>
|
|
</div>
|
|
<div className={styles["text-container"]}>
|
|
<Title variant="h1" className={styles.title}>
|
|
So how compatible are you?
|
|
</Title>
|
|
<p className={styles.text}>Let's go further and find out</p>
|
|
</div>
|
|
<div className={styles["buttons-container"]}>
|
|
<MainButton
|
|
className={`${styles.button} ${styles["back-button"]}`}
|
|
onClick={handleBack}
|
|
>
|
|
Back
|
|
</MainButton>
|
|
<MainButton
|
|
className={`${styles.button} ${styles["next-button"]}`}
|
|
onClick={handleNext}
|
|
>
|
|
Next
|
|
</MainButton>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default RelationshipZodiacInfoPage;
|