From 3aa71f4686616f7466b31d18a5ee6cf5323204f6 Mon Sep 17 00:00:00 2001
From: gofnnp <fbicha1234@gmail.com>
Date: Mon, 14 Aug 2023 01:06:13 +0400
Subject: [PATCH] feat: add attention page and edit birthday page

---
 src/components/AttentionPage/index.tsx        | 31 +++++++++++++++++++
 .../AttentionPage/styles.module.css           | 22 +++++++++++++
 src/components/BirthdayPage/index.tsx         |  2 +-
 3 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 src/components/AttentionPage/index.tsx
 create mode 100644 src/components/AttentionPage/styles.module.css

diff --git a/src/components/AttentionPage/index.tsx b/src/components/AttentionPage/index.tsx
new file mode 100644
index 0000000..984096f
--- /dev/null
+++ b/src/components/AttentionPage/index.tsx
@@ -0,0 +1,31 @@
+import { useNavigate } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import Title from '../Title'
+import routes from '../../routes'
+import styles from './styles.module.css'
+import CheckboxWithText from '../CheckboxWithText'
+
+function AttentionPage(): JSX.Element {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const handleNext = () => navigate(routes.client.feedback())
+
+  const onChangeCheckbox = (e: React.FormEvent<HTMLInputElement>) => {
+    if (e.currentTarget.checked) {
+      handleNext()
+    }
+  }
+
+  return (
+    <section className={`${styles.page} page`}>
+      <img className={styles.icon} src="/stop-icon.png" alt="stop" />
+      <Title variant='h2'>{t('attention')}</Title>
+      <p className={styles.text}>{t('attention_page_text')}</p>
+      <div className={styles['checkbox-container']}>
+        <CheckboxWithText text={t('not_ready_for_information')} onChange={onChangeCheckbox} />
+      </div>
+    </section>
+  )
+}
+
+export default AttentionPage
diff --git a/src/components/AttentionPage/styles.module.css b/src/components/AttentionPage/styles.module.css
new file mode 100644
index 0000000..99ebf69
--- /dev/null
+++ b/src/components/AttentionPage/styles.module.css
@@ -0,0 +1,22 @@
+.page {
+    flex: auto;
+    height: calc(100vh - 50px);
+    max-height: -webkit-fill-available;
+    justify-content: center;
+    gap: 16px;
+}
+
+.icon {
+    width: 96px;
+}
+
+.text {
+    text-align: center;
+    line-height: 1.2;
+    font-weight: 700;
+}
+
+.checkbox-container {
+    width: 80%;
+    margin: 64px auto 0;
+}
\ No newline at end of file
diff --git a/src/components/BirthdayPage/index.tsx b/src/components/BirthdayPage/index.tsx
index 429e2a8..1a863ee 100644
--- a/src/components/BirthdayPage/index.tsx
+++ b/src/components/BirthdayPage/index.tsx
@@ -17,7 +17,7 @@ function BirthdayPage(): JSX.Element {
   const navigate = useNavigate()
   const birthdate = useSelector(selectors.selectBirthdate)
   const [isDisabled, setIsDisabled] = useState(true)
-  const handleNext = () => navigate(routes.client.birthtime())
+  const handleNext = () => navigate(routes.client.didYouKnow())
   const handleValid = (birthdate: string) => {
     dispatch(actions.form.addDate(birthdate))
     setIsDisabled(birthdate === '')