83 lines
3.0 KiB
TypeScript
83 lines
3.0 KiB
TypeScript
import Title from "@/components/Title";
|
|
import styles from "./styles.module.scss";
|
|
import { useTranslations } from "@/hooks/translations";
|
|
import { ELocalesPlacement } from "@/locales";
|
|
import Button from "../../components/Button";
|
|
import routes from "@/routes";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useSelector } from "react-redux";
|
|
import { selectors, actions } from "@/store";
|
|
import { useDispatch } from "react-redux";
|
|
import { useEffect, useState } from "react";
|
|
import BirthplaceInput from "@/components/pages/ABDesign/v1/pages/EmailEnterPage/BirthplaceInput";
|
|
import CheckboxWithText from "@/components/CheckboxWithText";
|
|
|
|
function BirthplacePartner() {
|
|
const navigate = useNavigate();
|
|
const dispatch = useDispatch();
|
|
const { translate } = useTranslations(ELocalesPlacement.CompatibilityV4);
|
|
const { birthplacePartner } = useSelector(selectors.selectCompatibilityV4Answers);
|
|
const [isValidBirthplace, setIsValidBirthplace] = useState(false);
|
|
const [isCheckboxChecked, setIsCheckboxChecked] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (birthplacePartner) {
|
|
setIsValidBirthplace(true);
|
|
}
|
|
}, [birthplacePartner])
|
|
|
|
const handleValidBirthplace = (birthplace: string) => {
|
|
if (birthplace) {
|
|
dispatch(
|
|
actions.compatibilityV4Answers.update({
|
|
birthplacePartner,
|
|
})
|
|
);
|
|
dispatch(actions.questionnaire.update({ partnerBirthPlace: birthplace }));
|
|
}
|
|
setIsValidBirthplace(true);
|
|
};
|
|
|
|
const handleClick = () => {
|
|
navigate(routes.client.compatibilityV4DateEvent());
|
|
}
|
|
|
|
const handleCheckboxChange = (event: React.FormEvent<HTMLInputElement>) => {
|
|
const isChecked = event.currentTarget.checked;
|
|
setIsCheckboxChecked(isChecked);
|
|
}
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<Title variant="h2" className={styles.title}>
|
|
{translate("/birthplace-partner.title")}
|
|
</Title>
|
|
<p className={styles.text}>
|
|
{translate("/birthplace-partner.text")}
|
|
</p>
|
|
<BirthplaceInput
|
|
value={birthplacePartner}
|
|
placeholder={translate("/birthplace-partner.placeholder")}
|
|
inputClassName={styles.input}
|
|
placeholderClassName={styles.placeholder}
|
|
onValid={handleValidBirthplace}
|
|
onInvalid={() => setIsValidBirthplace(false)}
|
|
/>
|
|
<CheckboxWithText
|
|
className={styles.checkboxContainer}
|
|
textClassName={styles.checkboxText}
|
|
text={translate("/birthplace-partner.checkbox")}
|
|
onChange={handleCheckboxChange}
|
|
/>
|
|
<Button
|
|
className={styles.button}
|
|
disabled={!isValidBirthplace && !isCheckboxChecked}
|
|
onClick={handleClick}
|
|
>
|
|
{translate("next")}
|
|
</Button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default BirthplacePartner |