w-aura/src/components/pages/BirthPlacePage/index.tsx
2024-04-09 16:46:50 +00:00

49 lines
1.4 KiB
TypeScript

import Title from "@/components/Title";
import styles from "./styles.module.css";
import PlacePicker from "@/components/PlacePicker";
import { useDispatch, useSelector } from "react-redux";
import { actions, selectors } from "@/store";
import MainButton from "@/components/MainButton";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
function BirthPlacePage() {
const dispatch = useDispatch();
const { t } = useTranslation();
const navigate = useNavigate();
const { birthPlace } = useSelector(selectors.selectQuestionnaire);
const handleChange = (birthPlace: string) => {
return dispatch(actions.questionnaire.update({ birthPlace }));
};
const handleNext = () => {
navigate(routes.client.singlePaymentShortPath("chat.aura"));
};
return (
<section className={`${styles.page} page`}>
<Title variant="h1" className={styles.title}>
Where were you born?
</Title>
<p className={styles.description}>
Please select the city where you were born.
</p>
<PlacePicker
value={birthPlace}
name="birthPlace"
maxLength={1000}
onChange={handleChange}
/>
{!!birthPlace.length && (
<MainButton className={styles.button} onClick={handleNext}>
{t("next")}
</MainButton>
)}
</section>
);
}
export default BirthPlacePage;