98 lines
3.0 KiB
TypeScript
98 lines
3.0 KiB
TypeScript
import Title from "@/components/Title";
|
|
import styles from "./styles.module.scss";
|
|
import Answer from "../../components/Answer";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { actions, selectors } from "@/store";
|
|
import { sleep } from "@/services/date";
|
|
import { useNavigate } from "react-router-dom";
|
|
import routes from "@/routes";
|
|
import { answerTimeOut } from "../../data";
|
|
import { useTranslations } from "@/hooks/translations";
|
|
import { ELocalesPlacement } from "@/locales";
|
|
import { useMemo } from "react";
|
|
import { useSession } from "@/hooks/session/useSession";
|
|
import { IAnswersSessionCompatibilityV2 } from "@/api/resources/Session";
|
|
import { ESourceAuthorization } from "@/api/resources/User";
|
|
import { EUnleashFlags, useUnleash } from "@/hooks/ab/unleash/useUnleash";
|
|
|
|
function RelationshipStatus() {
|
|
const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
|
|
const { updateSession } = useSession();
|
|
const navigate = useNavigate();
|
|
const dispatch = useDispatch();
|
|
const { relationshipStatus } = useSelector(
|
|
selectors.selectCompatibilityV2Answers
|
|
);
|
|
|
|
const { variant: relationshipStatusPagePlacement = "v0" } = useUnleash({
|
|
flag: EUnleashFlags.v2CompatibilityRelationshipStatusPagePlacement
|
|
});
|
|
|
|
const answers: {
|
|
id: IAnswersSessionCompatibilityV2["relationship_status"];
|
|
title: string;
|
|
}[] = useMemo(
|
|
() => [
|
|
{
|
|
id: "single",
|
|
title: translate("/relationship-status.answer1"),
|
|
},
|
|
{
|
|
id: "in_relationship",
|
|
title: translate("/relationship-status.answer2"),
|
|
},
|
|
{
|
|
id: "engaged",
|
|
title: translate("/relationship-status.answer3"),
|
|
},
|
|
{
|
|
id: "divorced",
|
|
title: translate("/relationship-status.answer4"),
|
|
},
|
|
// {
|
|
// id: "complicated",
|
|
// title: translate("/relationship-status.answer5"),
|
|
// },
|
|
],
|
|
[translate]
|
|
);
|
|
|
|
const handleClick = async (id: IAnswersSessionCompatibilityV2["relationship_status"]) => {
|
|
dispatch(actions.compatibilityV2Answers.update({ relationshipStatus: id }));
|
|
updateSession({
|
|
answers: {
|
|
relationship_status: id,
|
|
},
|
|
}, ESourceAuthorization["aura.compatibility.v2"]);
|
|
if (id !== relationshipStatus) await sleep(answerTimeOut);
|
|
|
|
if (relationshipStatusPagePlacement === "v1") {
|
|
return navigate(`${routes.client.compatibilityV2Gender()}?noRedirectAB=true`);
|
|
}
|
|
|
|
if (relationshipStatusPagePlacement === "v2") {
|
|
return navigate(routes.client.compatibilityV2Birthdate());
|
|
}
|
|
|
|
navigate(`${routes.client.compatibilityV2RelateFollowing()}/1`);
|
|
};
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<Title variant="h2" className={styles.title}>
|
|
{translate("/relationship-status.title")}
|
|
</Title>
|
|
{answers.map((answers, index) => (
|
|
<Answer
|
|
key={index}
|
|
answer={answers}
|
|
isSelected={relationshipStatus === answers.id}
|
|
onClick={() => handleClick(answers.id)}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default RelationshipStatus;
|