From 2ff64931b24cc198713474656436f1c0f800f069 Mon Sep 17 00:00:00 2001
From: evgeny <evgeny@158.160.8.209>
Date: Fri, 16 Feb 2024 19:46:23 +0300
Subject: [PATCH 01/12] #222-create-form-refund-component

---
 src/app/router/AppRouter/ui/AppRouter.tsx     |   5 +
 .../blog-categories.module.scss               |   2 -
 .../FormReturn/FormReturn.module.scss         | 126 ++++++++
 src/components/FormReturn/FormReturn.tsx      | 277 ++++++++++++++++++
 src/components/FormReturn/FormReturnType.tsx  |  13 +
 .../HelpCategories/HelpCategories.module.scss |  22 ++
 .../HelpCategories/HelpCategories.tsx         |  22 ++
 src/components/header/header.module.scss      |   1 +
 src/components/header/header.tsx              |  10 +-
 .../login/model/validation/validation.ts      |  19 +-
 src/pages/HelpPage/HelpPage.module.scss       |  64 ++++
 src/pages/HelpPage/HelpPage.tsx               |  31 ++
 src/shared/config/routerConfig/routes.ts      |   3 +-
 src/shared/date/checkDateIsEqual.ts           |   4 +
 src/shared/date/checkIsToday.ts               |   7 +
 src/shared/date/createDate.ts                 |  40 +++
 src/shared/date/createMonth.ts                |  36 +++
 src/shared/date/createYear.ts                 |  39 +++
 src/shared/date/formatDate.ts                 |  19 ++
 src/shared/date/getMonthNumberOfDays.ts       |   2 +
 src/shared/date/getMonthesNames.ts            |  23 ++
 src/shared/date/getWeekDaysNames.ts           |  21 ++
 src/shared/date/getWeekNumber.ts              |   6 +
 src/shared/date/index.ts                      |  10 +
 src/shared/images/footer/arrow.svg            |   3 +
 src/shared/ui/Button/Button.module.scss       |   4 +
 src/shared/ui/Button/Button.stories.tsx       |   6 +
 src/shared/ui/Button/Button.tsx               |  19 +-
 28 files changed, 822 insertions(+), 12 deletions(-)
 create mode 100644 src/components/FormReturn/FormReturn.module.scss
 create mode 100644 src/components/FormReturn/FormReturn.tsx
 create mode 100644 src/components/FormReturn/FormReturnType.tsx
 create mode 100644 src/components/HelpCategories/HelpCategories.module.scss
 create mode 100644 src/components/HelpCategories/HelpCategories.tsx
 create mode 100644 src/pages/HelpPage/HelpPage.module.scss
 create mode 100644 src/pages/HelpPage/HelpPage.tsx
 create mode 100644 src/shared/date/checkDateIsEqual.ts
 create mode 100644 src/shared/date/checkIsToday.ts
 create mode 100644 src/shared/date/createDate.ts
 create mode 100644 src/shared/date/createMonth.ts
 create mode 100644 src/shared/date/createYear.ts
 create mode 100644 src/shared/date/formatDate.ts
 create mode 100644 src/shared/date/getMonthNumberOfDays.ts
 create mode 100644 src/shared/date/getMonthesNames.ts
 create mode 100644 src/shared/date/getWeekDaysNames.ts
 create mode 100644 src/shared/date/getWeekNumber.ts
 create mode 100644 src/shared/date/index.ts
 create mode 100644 src/shared/images/footer/arrow.svg

diff --git a/src/app/router/AppRouter/ui/AppRouter.tsx b/src/app/router/AppRouter/ui/AppRouter.tsx
index 28420af7..81cc36b6 100644
--- a/src/app/router/AppRouter/ui/AppRouter.tsx
+++ b/src/app/router/AppRouter/ui/AppRouter.tsx
@@ -10,6 +10,7 @@ import ComparePage from '@/pages/ComparePage/ComparePage'
 import FavoritesPage from '@/pages/FavoritesPage/FavoritesPage'
 import CartPage from '@/pages/CartPage/CartPage'
 import SearchResultsPage from '@/pages/SearchResultsPage/SearchResultsPage'
+import HelpPage from '@/pages/HelpPage/HelpPage'
 
 export const AppRouter = createBrowserRouter([
   {
@@ -53,6 +54,10 @@ export const AppRouter = createBrowserRouter([
       {
         path: Routes.SEARCH,
         element: <SearchResultsPage />
+      },
+      {
+        path: Routes.HELP,
+        element: <HelpPage />
       }
     ]
   }
diff --git a/src/components/BlogCategories/blog-categories.module.scss b/src/components/BlogCategories/blog-categories.module.scss
index 6e8ed1d3..47b03eb1 100644
--- a/src/components/BlogCategories/blog-categories.module.scss
+++ b/src/components/BlogCategories/blog-categories.module.scss
@@ -8,8 +8,6 @@
   border-radius: 10px;
   background: #fff;
 
-
-
   &__items {
     margin-top: 25px;
     max-width: 280px;
diff --git a/src/components/FormReturn/FormReturn.module.scss b/src/components/FormReturn/FormReturn.module.scss
new file mode 100644
index 00000000..9a7b1238
--- /dev/null
+++ b/src/components/FormReturn/FormReturn.module.scss
@@ -0,0 +1,126 @@
+@use '../../shared/styles/utils/variables' as var;
+
+.formReturn {
+  width: 1200px;
+  padding: 40px 30px 65px;
+  align-items: flex-start;
+  border-radius: 10px;
+  background: var.$white;
+
+  &__title {
+    margin: 15px 0;
+  }
+
+  &__label {
+    font-size: 12px;
+    position: relative;
+
+    &_date[data-no-star]::before {
+      content: '';
+    }
+  }
+
+  &__label::before {
+    content: '*';
+    color: var.$promo-color;
+    margin-right: 3px;
+
+    &_date[data-no-star]::before {
+      content: '';
+    }
+  }
+
+  &__radio {
+    min-height: 20px;
+    max-width: 20px;
+    background-color: var.$theme-primary-color;
+    margin: 10px 15px 10px 0;
+    border-color: var.$body-color;
+    cursor: pointer;
+  }
+
+  &__input {
+    margin: 0 0 25px;
+    padding: 12px;
+    border-radius: 10px;
+    background-color: var.$body-bg;
+    border: 2px solid var.$border-color;
+  }
+
+  &__input:focus {
+    border: 2px solid var.$theme-primary-color;
+    transition: 0.7s;
+  }
+
+  &__error {
+    color: var.$promo-color;
+    margin: 0 0 10px;
+    margin-top: -28px;
+    margin-bottom: 3px;
+  }
+
+  &__textArea {
+    margin: 12px 0;
+    min-height: 200px;
+    padding: 10px;
+    border-radius: 10px;
+    background-color: var.$body-bg;
+    border: 2px solid var.$border-color;
+  }
+
+  &__textArea:focus {
+    border: 2px solid var.$theme-primary-color;
+    transition: 0.7s;
+  }
+
+  &__buttonContainer {
+    display: flex;
+    gap: 10px;
+  }
+
+  input[type='radio'] {
+    visibility: hidden;
+  }
+
+  &__container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__checkbox {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    margin-left: -30px;
+  }
+
+  &__radioCustom {
+    /* Стилизация кастомного элемента радио-кнопки */
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    border: 1px solid var.$body-color-light-grey;
+    margin-right: 10px;
+    position: relative;
+  }
+
+  &__radioCustom::before {
+    /* Стили для индикатора выбора */
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: transparent;
+    transition: background-color 0.2s;
+  }
+
+  &__radio:checked + &__radioCustom::before {
+    width: 14px;
+    height: 14px;
+    background-color: var.$theme-primary-color;
+  }
+}
diff --git a/src/components/FormReturn/FormReturn.tsx b/src/components/FormReturn/FormReturn.tsx
new file mode 100644
index 00000000..a940461f
--- /dev/null
+++ b/src/components/FormReturn/FormReturn.tsx
@@ -0,0 +1,277 @@
+import styles from './FormReturn.module.scss'
+import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
+import { Field, ErrorMessage, Formik, Form } from 'formik'
+import { Input } from '@/shared/ui/Input/Input'
+import { validationSchema } from '../../features/login/model/validation/validation'
+import classNames from 'classnames'
+import { Textarea } from '@/shared/ui/Textarea/Textarea'
+import { Button, ButtonTheme, ButtonDesign, ButtonSize } from '../../shared/ui/Button/Button'
+import Label from '../../shared/ui/Label/Label'
+import { TypeValues } from './FormReturnType'
+
+function FormReturn() {
+  const initialValues: TypeValues = {
+    name: '',
+    surname: '',
+    email: '',
+    tel: '',
+    numberOrder: '',
+    dateOrder: '',
+    itemInfo: '',
+    model: '',
+    amount: '',
+    textArea: '',
+    myChoice: ''
+  }
+
+  return (
+    <>
+      <Formik
+        validateOnBlur={true}
+        validationSchema={validationSchema}
+        enableReinitialize={true}
+        onSubmit={() => {
+          console.log('succes')
+        }}
+        initialValues={initialValues}>
+        <Form className={styles.formReturn}>
+          <p>Пожалуйста, заполните форму запроса на возврат товара.</p>
+          <Heading type={HeadingType.SMALL} className={styles.formReturn__title}>
+            Информация о заказе
+          </Heading>
+          <Label htmlFor="name" className={styles.formReturn__label}>
+            Имя
+            <Field
+              className={styles.formReturn__input}
+              as={Input}
+              label="Имя"
+              name="name"
+              placeholder="Имя"
+            />
+            <ErrorMessage name="name" component="div" className={styles.formReturn__error} />
+          </Label>
+          <Label htmlFor="surname" className={styles.formReturn__label}>
+            Фамилия
+            <Field
+              className={styles.formReturn__input}
+              as={Input}
+              label="Фамилия"
+              name="surname"
+              placeholder="Фамилия"
+            />
+            <ErrorMessage name="surname" component="div" className={styles.formReturn__error} />
+          </Label>
+          <Label htmlFor="email" className={styles.formReturn__label}>
+            E-Mail
+            <Field
+              className={styles.formReturn__input}
+              as={Input}
+              label="E-Mail"
+              name="email"
+              placeholder="E-Mail"
+            />
+            <ErrorMessage name="email" component="div" className={styles.formReturn__error} />
+          </Label>
+          <Label htmlFor="tel" className={styles.formReturn__label}>
+            Телефон
+            <Field
+              className={styles.formReturn__input}
+              as={Input}
+              label="Телефон"
+              name="tel"
+              placeholder="Телефон"
+            />
+            <ErrorMessage name="tel" component="div" className={styles.formReturn__error} />
+          </Label>
+          <Label htmlFor="numberOrder" className={styles.formReturn__label}>
+            № Заказа
+            <Field
+              className={styles.formReturn__input}
+              as={Input}
+              label="№ Заказа"
+              name="numberOrder"
+              placeholder="№ Заказа"
+            />
+            <ErrorMessage name="numberOrder" component="div" className={styles.formReturn__error} />
+          </Label>
+          <Label
+            htmlFor="dateOrder"
+            className={classNames(styles.formReturn__label, styles.formReturn__label_date)}
+            data-no-star>
+            Дата заказа
+            <Field
+              className={styles.formReturn__input}
+              as={Input}
+              label="Дата заказа"
+              name="dateOrder"
+              placeholder="Дата заказа"
+              type="date"
+            />
+          </Label>
+          <Heading type={HeadingType.SMALL} className={styles.formReturn__title}>
+            Информация о товаре
+          </Heading>
+          <Label htmlFor="itemInfo" className={styles.formReturn__label}>
+            Наименование товара
+            <Field
+              className={styles.formReturn__input}
+              as={Input}
+              label="Наименование товара"
+              name="itemInfo"
+              placeholder="Наименование товара"
+            />
+            <ErrorMessage name="itemInfo" component="div" className={styles.formReturn__error} />
+          </Label>
+          <Label htmlFor="model" className={styles.formReturn__label}>
+            Модель
+            <Field
+              className={styles.formReturn__input}
+              as={Input}
+              label="Модель"
+              name="model"
+              placeholder="Модель"
+            />
+            <ErrorMessage name="model" component="div" className={styles.formReturn__error} />
+          </Label>
+          <Label htmlFor="model" className={styles.formReturn__label}>
+            Количество
+            <Field
+              className={styles.formReturn__input}
+              as={Input}
+              label="Количество"
+              name="amount"
+              placeholder="Количество"
+            />
+            <ErrorMessage name="amount" component="div" className={styles.formReturn__error} />
+          </Label>
+          <div className={styles.formReturn__container}>
+            <fieldset className={styles.formReturn__label}>
+              Причина возврата
+              <label className={styles.formReturn__checkbox}>
+                <Field
+                  className={styles.formReturn__radio}
+                  as={Input}
+                  label="Количество"
+                  name="check"
+                  placeholder="Количество"
+                  type="radio"
+                  value="Другое (другая причина), пожалуйста укажите/приложите подробности"
+                />
+                <div className={styles.formReturn__radioCustom}></div>
+                Другое (другая причина), пожалуйста укажите/приложите подробности
+              </label>
+              <label className={styles.formReturn__checkbox}>
+                <Field
+                  className={styles.formReturn__radio}
+                  as={Input}
+                  label="Количество"
+                  name="check"
+                  placeholder="Количество"
+                  type="radio"
+                  value="Ошибка, пожалуйста укажите/приложите подробности"
+                />
+                <div className={styles.formReturn__radioCustom}></div>
+                Ошибка, пожалуйста укажите/приложите подробности
+              </label>
+              <label className={styles.formReturn__checkbox}>
+                <Field
+                  className={styles.formReturn__radio}
+                  as={Input}
+                  label="Количество"
+                  name="check"
+                  placeholder="Количество"
+                  type="radio"
+                  value="Ошибочный заказ"
+                />
+                <div className={styles.formReturn__radioCustom}></div>
+                Ошибочный заказ
+              </label>
+              <label className={styles.formReturn__checkbox}>
+                <Field
+                  className={styles.formReturn__radio}
+                  as={Input}
+                  label="Количество"
+                  name="check"
+                  placeholder="Количество"
+                  type="radio"
+                  value="Получен не тот (ошибочный) товар"
+                />
+                <div className={styles.formReturn__radioCustom}></div>
+                Получен не тот (ошибочный) товар
+              </label>
+              <label className={styles.formReturn__checkbox}>
+                <Field
+                  className={styles.formReturn__radio}
+                  as={Input}
+                  label="Количество"
+                  name="check"
+                  placeholder="Количество"
+                  type="radio"
+                  value="Получен/доставлен неисправным (сломан)"
+                />
+                <div className={styles.formReturn__radioCustom}></div>
+                Получен/доставлен неисправным (сломан)
+              </label>
+            </fieldset>
+          </div>
+          <div className={styles.formReturn__container}>
+            <fieldset className={styles.formReturn__label}>
+              Товар распакован
+              <label className={styles.formReturn__checkbox}>
+                <Field
+                  className={styles.formReturn__radio}
+                  as={Input}
+                  label="Да"
+                  name="myChoice"
+                  placeholder="Да"
+                  type="radio"
+                  value="Да"
+                />
+                <div className={styles.formReturn__radioCustom}></div>
+                Да
+              </label>
+              <label className={styles.formReturn__checkbox}>
+                <Field
+                  className={styles.formReturn__radio}
+                  as={Input}
+                  label="Нет"
+                  name="myChoice"
+                  placeholder="Нет"
+                  type="radio"
+                  value="Нет"
+                />
+                <div className={styles.formReturn__radioCustom}></div>
+                Нет
+              </label>
+            </fieldset>
+          </div>
+          <Label
+            htmlFor="dateOrder"
+            className={classNames(styles.formReturn__label, styles.formReturn__label_date)}
+            data-no-star>
+            Описание дефектов
+            <Textarea className={styles.formReturn__textArea} name="textArea" />
+          </Label>
+          <div className={styles.formReturn__buttonContainer}>
+            <Button
+              theme={ButtonTheme.PREVIOUS}
+              design={ButtonDesign.SQUARE}
+              size={ButtonSize.S}
+              className={styles.formReturn__button}>
+              Назад
+            </Button>
+            <Button
+              theme={ButtonTheme.PRIMARY}
+              design={ButtonDesign.SQUARE}
+              size={ButtonSize.S}
+              type="submit">
+              Продолжить
+            </Button>
+          </div>
+        </Form>
+      </Formik>
+    </>
+  )
+}
+
+export default FormReturn
diff --git a/src/components/FormReturn/FormReturnType.tsx b/src/components/FormReturn/FormReturnType.tsx
new file mode 100644
index 00000000..7e5c67b2
--- /dev/null
+++ b/src/components/FormReturn/FormReturnType.tsx
@@ -0,0 +1,13 @@
+export type TypeValues = {
+  name: string
+  surname: string
+  email: string
+  tel: string
+  numberOrder: string
+  dateOrder: string
+  itemInfo: string
+  model: string
+  amount: string
+  textArea: string
+  myChoice: string
+}
diff --git a/src/components/HelpCategories/HelpCategories.module.scss b/src/components/HelpCategories/HelpCategories.module.scss
new file mode 100644
index 00000000..b0ece852
--- /dev/null
+++ b/src/components/HelpCategories/HelpCategories.module.scss
@@ -0,0 +1,22 @@
+@use '../../shared/styles/utils/variables' as var;
+
+.helpCategories {
+    margin-top: 25px;
+    max-width: 280px;
+    display: flex;
+    flex-flow: column wrap;
+
+  &__item {
+    color: var.$body-color;
+    display: flex;
+    width: 280px;
+    height: 45px;
+    padding: 13.5px 15px;
+    align-items: center;
+    border-radius: 5px;
+    margin-bottom: 5px;
+    margin-right: 5px;
+    background-color: var.$body-bg;
+    justify-content: space-between;
+  }
+}
diff --git a/src/components/HelpCategories/HelpCategories.tsx b/src/components/HelpCategories/HelpCategories.tsx
new file mode 100644
index 00000000..afd20c5f
--- /dev/null
+++ b/src/components/HelpCategories/HelpCategories.tsx
@@ -0,0 +1,22 @@
+import styles from './HelpCategories.module.scss'
+import Link from '@/shared/ui/Link/Link'
+
+const HelpCategories = () => {
+  return (
+    <>
+      <nav className={styles.helpCategories}>
+        <Link to="" className={styles.helpCategories__item}>
+          Информация о доставке
+        </Link>
+        <Link to="/refunds" className={styles.helpCategories__item}>
+          Возвраты
+        </Link>
+        <Link to="" className={styles.helpCategories__item}>
+          Подарочные сертификаты
+        </Link>
+      </nav>
+    </>
+  )
+}
+
+export default HelpCategories
diff --git a/src/components/header/header.module.scss b/src/components/header/header.module.scss
index d0ed339e..62927108 100644
--- a/src/components/header/header.module.scss
+++ b/src/components/header/header.module.scss
@@ -48,6 +48,7 @@
     color: var.$white;
     display: flex;
     align-items: center;
+    cursor: pointer;
   }
 
   &__item-icon {
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index 6fcef70a..33eadde6 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -77,18 +77,18 @@ function Header() {
     () => (
       <ul className={styles['header__context-menu-list']}>
         <li className={styles['header__context-menu-item']}>
-          <Link to="" className={styles['header__context-menu-link']}>
+          <Link to="/help" className={styles['header__context-menu-link']}>
             Информация о доставке
           </Link>
         </li>
 
         <li className={styles['header__context-menu-item']}>
-          <Link to="" className={styles['header__context-menu-link']}>
+          <Link to="/returnInfo" className={styles['header__context-menu-link']}>
             Возвраты
           </Link>
         </li>
         <li className={styles['header__context-menu-item']}>
-          <Link to="" className={styles['header__context-menu-link']}>
+          <Link to="/certificate" className={styles['header__context-menu-link']}>
             Подарочные сертификаты
           </Link>
         </li>
@@ -128,7 +128,9 @@ function Header() {
               ))}
               <ContextMenuElement className={styles.header__item} content={supportNode}>
                 <LightningIcon className={classNames(styles.header__icon, styles.help_icon)} />
-                Помощь
+                <Link to="/help" className={styles.header__item}>
+                  Помощь
+                </Link>
               </ContextMenuElement>
             </ul>
             <ContextMenuElement className={styles.header__item} content={contactNode} type="right">
diff --git a/src/features/login/model/validation/validation.ts b/src/features/login/model/validation/validation.ts
index 00e1ba18..c28ef47b 100644
--- a/src/features/login/model/validation/validation.ts
+++ b/src/features/login/model/validation/validation.ts
@@ -6,6 +6,21 @@ export const validationSchema = Yup.object().shape({
     .email('Укажите корректный адрес электронной почты'),
   password: Yup.string()
     .required('Введите пароль')
-    .min(3, 'Минимальная длина пароля 8 символов') // поменял для тестового юзера
-    .max(64, 'Максимальная длина пароля 64 символа')
+    .min(6, 'Минимальная длина пароля 6 символов') // поменял для тестового юзера
+    .max(64, 'Максимальная длина пароля 64 символа'),
+  name: Yup.string()
+    .required('Введите имя')
+    .min(6, 'Минимальная длина имени 6 символов')
+    .max(64, 'Максимальная длина имени 64 символа'),
+  surname: Yup.string()
+    .required('Введите фамилию')
+    .min(1, 'Минимальная длина фамилии 1 символ')
+    .max(64, 'Максимальная длина фамилии 64 символа'),
+  tel: Yup.string()
+    .required('Введите номер телефона')
+    .matches(/^\+7\d{10}$/, 'Номер телефона должен быть в формате +7XXXXXXXXXX (X - цифра)'),
+  numberOrder: Yup.string().required('Введите номер заказа'),
+  dateOrder: Yup.string().required('Введите дату заказа'),
+  itemInfo: Yup.string().required('Введите наименование товара'),
+  model: Yup.string().required('Введите название модели')
 })
diff --git a/src/pages/HelpPage/HelpPage.module.scss b/src/pages/HelpPage/HelpPage.module.scss
new file mode 100644
index 00000000..94657b8f
--- /dev/null
+++ b/src/pages/HelpPage/HelpPage.module.scss
@@ -0,0 +1,64 @@
+@use '../../shared/styles/utils/variables' as var;
+
+.help {
+  align-self: flex-start;
+
+  &__title {
+    text-align: left;
+    margin: 24px 0 0;
+    padding: 0;
+  }
+
+  &__path {
+    text-align: left;
+    margin: 0 0 30px;
+    padding: 0;
+  }
+
+  &__filters {
+    display: flex;
+    max-width: 340px;
+    flex-direction: column;
+  }
+
+  &__wrapper {
+    max-width: 100%;
+    gap: 10px;
+  }
+}
+
+.cats {
+  display: flex;
+  max-width: 340px;
+  padding: 40px 30px 65px;
+  align-items: flex-start;
+  border-radius: 10px;
+  background: var.$white;
+  max-height: 300px;
+
+  &__wrapper {
+    display: flex;
+    max-width: 100%;
+    gap: 20px;
+  }
+
+  &__items {
+    margin-top: 25px;
+    max-width: 280px;
+    display: flex;
+    flex-flow: column wrap;
+  }
+  
+  &__item {
+    display: flex;
+    width: 280px;
+    height: 45px;
+    padding: 13.5px 15px;
+    align-items: center;
+    border-radius: 5px;
+    margin-bottom: 5px;
+    margin-right: 5px;
+    background-color: var.$body-bg;
+    justify-content: space-between;
+  }
+}
diff --git a/src/pages/HelpPage/HelpPage.tsx b/src/pages/HelpPage/HelpPage.tsx
new file mode 100644
index 00000000..400b3a49
--- /dev/null
+++ b/src/pages/HelpPage/HelpPage.tsx
@@ -0,0 +1,31 @@
+import WrapperForMainContent from '@/components/WrapperForMainContent/WrapperForMainContent'
+import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
+import styles from './HelpPage.module.scss'
+import Subheading from '@/shared/ui/Subheading/Subheading'
+import HelpCategories from '../../components/HelpCategories/HelpCategories'
+import FormReturn from '../../components/FormReturn/FormReturn'
+
+const HelpPage = () => {
+  return (
+    <WrapperForMainContent>
+      <div className={styles.help__wrapper}>
+        <div className={styles.help}>
+          <Heading type={HeadingType.NORMAL}>Помощь</Heading>
+          <Subheading className={styles.help__path}>Главная/Помощь</Subheading>
+        </div>
+        <div className={styles.cats__wrapper}>
+          <div className={styles.cats}>
+            <nav className={styles.cats__container}>
+              <Heading type={HeadingType.NORMAL}>Категории</Heading>
+              <HelpCategories />
+            </nav>
+          </div>
+          {/* <Heading type={HeadingType.NORMAL}>Форма возврата</Heading> */}
+          <FormReturn />
+        </div>
+      </div>
+    </WrapperForMainContent>
+  )
+}
+
+export default HelpPage
diff --git a/src/shared/config/routerConfig/routes.ts b/src/shared/config/routerConfig/routes.ts
index ed581a30..b39b911f 100644
--- a/src/shared/config/routerConfig/routes.ts
+++ b/src/shared/config/routerConfig/routes.ts
@@ -14,5 +14,6 @@ export enum Routes {
   FAVORITES = '/favorites',
   LOGIN = '/login',
   BRANDS = '/brands',
-  SEARCH = '/search/:query'
+  SEARCH = '/search/:query',
+  HELP = '/help'
 }
diff --git a/src/shared/date/checkDateIsEqual.ts b/src/shared/date/checkDateIsEqual.ts
new file mode 100644
index 00000000..fa2bc588
--- /dev/null
+++ b/src/shared/date/checkDateIsEqual.ts
@@ -0,0 +1,4 @@
+export const checkDateIsEqual = (date1: Date, date2: Date) =>
+  date1.getDate() === date2.getDate() &&
+  date1.getMonth() === date2.getMonth() &&
+  date1.getFullYear() === date2.getFullYear()
diff --git a/src/shared/date/checkIsToday.ts b/src/shared/date/checkIsToday.ts
new file mode 100644
index 00000000..12f47cb2
--- /dev/null
+++ b/src/shared/date/checkIsToday.ts
@@ -0,0 +1,7 @@
+import { checkDateIsEqual } from './checkDateIsEqual'
+
+export const checkIsToday = (date: Date) => {
+  const today = new Date()
+
+  return checkDateIsEqual(today, date)
+}
diff --git a/src/shared/date/createDate.ts b/src/shared/date/createDate.ts
new file mode 100644
index 00000000..7682260d
--- /dev/null
+++ b/src/shared/date/createDate.ts
@@ -0,0 +1,40 @@
+import { getWeekNumber } from './getWeekNumber'
+
+interface CreateDateParams {
+  locale?: string
+  date?: Date
+}
+
+export const createDate = (params?: CreateDateParams) => {
+  const locale = params?.locale ?? 'default'
+
+  const d = params?.date ?? new Date()
+  const dayNumber = d.getDate()
+  const day = d.toLocaleDateString(locale, { weekday: 'long' })
+  const dayNumberInWeek = d.getDay() + 1
+  const dayShort = d.toLocaleDateString(locale, { weekday: 'short' })
+  const year = d.getFullYear()
+  const yearShort = d.toLocaleDateString(locale, { year: '2-digit' })
+  const month = d.toLocaleDateString(locale, { month: 'long' })
+  const monthShort = d.toLocaleDateString(locale, { month: 'short' })
+  const monthNumber = d.getMonth() + 1
+  const monthIndex = d.getMonth()
+  const timestamp = d.getTime()
+  const week = getWeekNumber(d)
+
+  return {
+    date: d,
+    dayNumber,
+    day,
+    dayNumberInWeek,
+    dayShort,
+    year,
+    yearShort,
+    month,
+    monthShort,
+    monthNumber,
+    monthIndex,
+    timestamp,
+    week
+  }
+}
diff --git a/src/shared/date/createMonth.ts b/src/shared/date/createMonth.ts
new file mode 100644
index 00000000..3b5c8929
--- /dev/null
+++ b/src/shared/date/createMonth.ts
@@ -0,0 +1,36 @@
+import { createDate } from './createDate'
+import { getMonthNumberOfDays } from './getMonthNumberOfDays'
+
+interface CreateMonthParams {
+  date?: Date
+  locale?: string
+}
+
+export const createMonth = (params?: CreateMonthParams) => {
+  const date = params?.date ?? new Date()
+  const locale = params?.locale ?? 'default'
+
+  const d = createDate({ date, locale })
+  const { month: monthName, year, monthNumber, monthIndex } = d
+
+  const getDay = (dayNumber: number) => createDate({ date: new Date(year, monthIndex, dayNumber), locale })
+
+  const createMonthDays = () => {
+    const days = []
+
+    for (let i = 0; i <= getMonthNumberOfDays(monthIndex, year) - 1; i += 1) {
+      days[i] = getDay(i + 1)
+    }
+
+    return days
+  }
+
+  return {
+    getDay,
+    monthName,
+    monthIndex,
+    monthNumber,
+    year,
+    createMonthDays
+  }
+}
diff --git a/src/shared/date/createYear.ts b/src/shared/date/createYear.ts
new file mode 100644
index 00000000..6fda2b47
--- /dev/null
+++ b/src/shared/date/createYear.ts
@@ -0,0 +1,39 @@
+import { createDate } from './createDate'
+import { createMonth } from './createMonth'
+
+interface CreateYearParams {
+  year?: number
+  locale?: string
+  monthNumber?: number
+}
+
+export const createYear = (params?: CreateYearParams) => {
+  const locale = params?.locale ?? 'default'
+
+  const monthCount = 12
+  const today = createDate()
+
+  const year = params?.year ?? today.year
+  const monthNumber = params?.monthNumber ?? today.monthNumber
+
+  const month = createMonth({ date: new Date(year, monthNumber - 1), locale })
+
+  const getMonthDays = (monthIndex: number) =>
+    createMonth({ date: new Date(year, monthIndex), locale }).createMonthDays()
+
+  const createYearMonthes = () => {
+    const monthes = []
+
+    for (let i = 0; i <= monthCount - 1; i += 1) {
+      monthes[i] = getMonthDays(i)
+    }
+
+    return monthes
+  }
+
+  return {
+    createYearMonthes,
+    month,
+    year
+  }
+}
diff --git a/src/shared/date/formatDate.ts b/src/shared/date/formatDate.ts
new file mode 100644
index 00000000..5679b2b5
--- /dev/null
+++ b/src/shared/date/formatDate.ts
@@ -0,0 +1,19 @@
+import { createDate } from './createDate'
+
+export const formatDate = (date: Date, format: string) => {
+  const d = createDate({ date })
+
+  return format
+    .replace(/\bYYYY\b/, d.year.toString())
+    .replace(/\bYYY\b/, d.yearShort)
+    .replace(/\bWW\b/, d.week.toString().padStart(2, '0'))
+    .replace(/\bW\b/, d.week.toString())
+    .replace(/\bDDDD\b/, d.day)
+    .replace(/\bDDD\b/, d.dayShort)
+    .replace(/\bDD\b/, d.dayNumber.toString().padStart(2, '0'))
+    .replace(/\bD\b/, d.dayNumber.toString())
+    .replace(/\bMMMM\b/, d.month)
+    .replace(/\bMMM\b/, d.monthShort)
+    .replace(/\bMM\b/, d.monthNumber.toString().padStart(2, '0'))
+    .replace(/\bM\b/, d.monthNumber.toString())
+}
diff --git a/src/shared/date/getMonthNumberOfDays.ts b/src/shared/date/getMonthNumberOfDays.ts
new file mode 100644
index 00000000..501fb261
--- /dev/null
+++ b/src/shared/date/getMonthNumberOfDays.ts
@@ -0,0 +1,2 @@
+export const getMonthNumberOfDays = (monthIndex: number, yearNumber: number = new Date().getFullYear()) =>
+  new Date(yearNumber, monthIndex + 1, 0).getDate()
diff --git a/src/shared/date/getMonthesNames.ts b/src/shared/date/getMonthesNames.ts
new file mode 100644
index 00000000..990b9c74
--- /dev/null
+++ b/src/shared/date/getMonthesNames.ts
@@ -0,0 +1,23 @@
+import { createDate } from './createDate'
+
+export const getMonthesNames = (locale: string = 'defalut') => {
+  const monthesNames: {
+    month: ReturnType<typeof createDate>['month']
+    monthShort: ReturnType<typeof createDate>['monthShort']
+    monthIndex: ReturnType<typeof createDate>['monthIndex']
+    date: ReturnType<typeof createDate>['date']
+  }[] = Array.from({ length: 12 })
+
+  const d = new Date()
+
+  monthesNames.forEach((_, i) => {
+    const { month, monthIndex, monthShort, date } = createDate({
+      locale,
+      date: new Date(d.getFullYear(), d.getMonth() + i, 1)
+    })
+
+    monthesNames[monthIndex] = { month, monthIndex, monthShort, date }
+  })
+
+  return monthesNames
+}
diff --git a/src/shared/date/getWeekDaysNames.ts b/src/shared/date/getWeekDaysNames.ts
new file mode 100644
index 00000000..0c9e8ae8
--- /dev/null
+++ b/src/shared/date/getWeekDaysNames.ts
@@ -0,0 +1,21 @@
+import { createDate } from './createDate'
+
+export const getWeekDaysNames = (firstWeekDay: number = 4, locale: string = 'default') => {
+  const weekDaysNames: {
+    day: ReturnType<typeof createDate>['day']
+    dayShort: ReturnType<typeof createDate>['dayShort']
+  }[] = Array.from({ length: 7 })
+
+  const date = new Date()
+
+  weekDaysNames.forEach((_, i) => {
+    const { day, dayNumberInWeek, dayShort } = createDate({
+      locale,
+      date: new Date(date.getFullYear(), date.getMonth(), date.getDate() + i)
+    })
+
+    weekDaysNames[dayNumberInWeek - 1] = { day, dayShort }
+  })
+
+  return [...weekDaysNames.slice(firstWeekDay - 1), ...weekDaysNames.slice(0, firstWeekDay - 1)]
+}
diff --git a/src/shared/date/getWeekNumber.ts b/src/shared/date/getWeekNumber.ts
new file mode 100644
index 00000000..4156be24
--- /dev/null
+++ b/src/shared/date/getWeekNumber.ts
@@ -0,0 +1,6 @@
+export const getWeekNumber = (date: Date) => {
+  const firstDayOfTheYear = new Date(date.getFullYear(), 0, 1)
+  const pastDaysOfYear = (date.getTime() - firstDayOfTheYear.getTime()) / 86400000
+
+  return Math.ceil((pastDaysOfYear + firstDayOfTheYear.getDay() + 1) / 7)
+}
diff --git a/src/shared/date/index.ts b/src/shared/date/index.ts
new file mode 100644
index 00000000..0ba03bc4
--- /dev/null
+++ b/src/shared/date/index.ts
@@ -0,0 +1,10 @@
+export * from './createDate'
+export * from './formatDate'
+export * from './getMonthesNames'
+export * from './getWeekDaysNames'
+export * from './getWeekNumber'
+export * from './checkIsToday'
+export * from './createYear'
+export * from './createMonth'
+export * from './getMonthNumberOfDays'
+export * from './checkDateIsEqual'
diff --git a/src/shared/images/footer/arrow.svg b/src/shared/images/footer/arrow.svg
new file mode 100644
index 00000000..9c226f2f
--- /dev/null
+++ b/src/shared/images/footer/arrow.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 5 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.8003 9.11849C4.53403 9.38475 4.10233 9.38475 3.83606 9.11849L0.1997 5.48212C-0.0665664 5.21586 -0.0665664 4.78415 0.1997 4.51789L3.83606 0.881524C4.10233 0.615257 4.53403 0.615257 4.8003 0.881524C5.06657 1.14779 5.06657 1.57949 4.8003 1.84576L1.64605 5.00001L4.8003 8.15425C5.06657 8.42052 5.06657 8.85222 4.8003 9.11849Z" fill="#93B1FF"/>
+</svg>
diff --git a/src/shared/ui/Button/Button.module.scss b/src/shared/ui/Button/Button.module.scss
index d8bdb13e..b27057b9 100644
--- a/src/shared/ui/Button/Button.module.scss
+++ b/src/shared/ui/Button/Button.module.scss
@@ -47,6 +47,10 @@
   color: color.$white;
 }
 
+.previous {
+ background: color.$bg-no-image;
+}
+
 .big {
   font-size: 32px;
   line-height: 40px;
diff --git a/src/shared/ui/Button/Button.stories.tsx b/src/shared/ui/Button/Button.stories.tsx
index 2d4a2111..54e33baa 100644
--- a/src/shared/ui/Button/Button.stories.tsx
+++ b/src/shared/ui/Button/Button.stories.tsx
@@ -75,3 +75,9 @@ export const Secondary: Story = {
     theme: ButtonTheme.SECONDARY
   }
 }
+export const Previous: Story = {
+  args: {
+    children: 'Text',
+    theme: ButtonTheme.PREVIOUS
+  }
+}
diff --git a/src/shared/ui/Button/Button.tsx b/src/shared/ui/Button/Button.tsx
index f8124639..9f25245e 100644
--- a/src/shared/ui/Button/Button.tsx
+++ b/src/shared/ui/Button/Button.tsx
@@ -6,7 +6,8 @@ export enum ButtonTheme {
   OUTLINED = 'outlined',
   PRIMARY = 'primary',
   SECONDARY = 'secondary',
-  SUCCESS = 'success'
+  SUCCESS = 'success',
+  PREVIOUS = 'previous'
 }
 
 export enum ButtonSize {
@@ -37,12 +38,24 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  */
 
 export const Button: FC<ButtonProps> = props => {
-  const { className, children, disabled, theme, design = ButtonDesign.SQUARE, size = ButtonSize.M, ...rest } = props
+  const {
+    className,
+    children,
+    disabled,
+    theme,
+    design = ButtonDesign.SQUARE,
+    size = ButtonSize.M,
+    ...rest
+  } = props
 
   const additionalClasses = [className, theme && style[theme], style[size], style[design]]
 
   return (
-    <button type="button" disabled={disabled} className={classNames(style.button, additionalClasses)} {...rest}>
+    <button
+      type="button"
+      disabled={disabled}
+      className={classNames(style.button, additionalClasses)}
+      {...rest}>
       {children}
     </button>
   )

From 91e373f903d2ab5bf4956ba6355b9f7e519e3bdc Mon Sep 17 00:00:00 2001
From: evgeny <evgeny@158.160.8.209>
Date: Sat, 17 Feb 2024 19:23:40 +0300
Subject: [PATCH 02/12] #224-build-page-help

---
 src/app/router/AppRouter/ui/AppRouter.tsx     | 15 ++++-
 .../FormReturn/FormReturn.module.scss         |  3 +-
 .../HelpCategories/HelpCategories.tsx         |  2 +-
 src/components/header/header.module.scss      |  1 -
 src/components/header/header.tsx              | 12 ++--
 .../DeliveryPage/DeliveryPage.module.scss     | 15 +++++
 src/pages/DeliveryPage/DeliveryPage.tsx       | 19 ++++++
 src/pages/HelpPage/HelpPage.module.scss       | 58 +++----------------
 src/pages/HelpPage/HelpPage.tsx               | 26 +++------
 src/pages/RefundsPage/RefundsPage.module.scss | 11 ++++
 src/pages/RefundsPage/RefundsPage.tsx         | 21 +++++++
 src/shared/config/routerConfig/routes.ts      |  4 +-
 12 files changed, 104 insertions(+), 83 deletions(-)
 create mode 100644 src/pages/DeliveryPage/DeliveryPage.module.scss
 create mode 100644 src/pages/DeliveryPage/DeliveryPage.tsx
 create mode 100644 src/pages/RefundsPage/RefundsPage.module.scss
 create mode 100644 src/pages/RefundsPage/RefundsPage.tsx

diff --git a/src/app/router/AppRouter/ui/AppRouter.tsx b/src/app/router/AppRouter/ui/AppRouter.tsx
index 81cc36b6..bda5832f 100644
--- a/src/app/router/AppRouter/ui/AppRouter.tsx
+++ b/src/app/router/AppRouter/ui/AppRouter.tsx
@@ -10,7 +10,8 @@ import ComparePage from '@/pages/ComparePage/ComparePage'
 import FavoritesPage from '@/pages/FavoritesPage/FavoritesPage'
 import CartPage from '@/pages/CartPage/CartPage'
 import SearchResultsPage from '@/pages/SearchResultsPage/SearchResultsPage'
-import HelpPage from '@/pages/HelpPage/HelpPage'
+import DeliveryPage from '@/pages/DeliveryPage/DeliveryPage'
+import RefundsPage from '@/pages/RefundsPage/RefundsPage'
 
 export const AppRouter = createBrowserRouter([
   {
@@ -56,9 +57,17 @@ export const AppRouter = createBrowserRouter([
         element: <SearchResultsPage />
       },
       {
-        path: Routes.HELP,
-        element: <HelpPage />
+        path: Routes.INFO_DELIVERY,
+        element: <DeliveryPage />
+      },
+      {
+        path: Routes.REFUNDS,
+        element: <RefundsPage />
       }
+      /*       {
+        path: Routes.CERTIFICATE,
+        element: <Certificate />
+      } */
     ]
   }
 ])
diff --git a/src/components/FormReturn/FormReturn.module.scss b/src/components/FormReturn/FormReturn.module.scss
index 9a7b1238..5051c120 100644
--- a/src/components/FormReturn/FormReturn.module.scss
+++ b/src/components/FormReturn/FormReturn.module.scss
@@ -1,7 +1,8 @@
 @use '../../shared/styles/utils/variables' as var;
 
 .formReturn {
-  width: 1200px;
+  margin-top: 45px;
+  width: 800px;
   padding: 40px 30px 65px;
   align-items: flex-start;
   border-radius: 10px;
diff --git a/src/components/HelpCategories/HelpCategories.tsx b/src/components/HelpCategories/HelpCategories.tsx
index afd20c5f..798aee8f 100644
--- a/src/components/HelpCategories/HelpCategories.tsx
+++ b/src/components/HelpCategories/HelpCategories.tsx
@@ -5,7 +5,7 @@ const HelpCategories = () => {
   return (
     <>
       <nav className={styles.helpCategories}>
-        <Link to="" className={styles.helpCategories__item}>
+        <Link to="/infoDelivery" className={styles.helpCategories__item}>
           Информация о доставке
         </Link>
         <Link to="/refunds" className={styles.helpCategories__item}>
diff --git a/src/components/header/header.module.scss b/src/components/header/header.module.scss
index 62927108..d0ed339e 100644
--- a/src/components/header/header.module.scss
+++ b/src/components/header/header.module.scss
@@ -48,7 +48,6 @@
     color: var.$white;
     display: flex;
     align-items: center;
-    cursor: pointer;
   }
 
   &__item-icon {
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index 33eadde6..0a2cde68 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -77,13 +77,13 @@ function Header() {
     () => (
       <ul className={styles['header__context-menu-list']}>
         <li className={styles['header__context-menu-item']}>
-          <Link to="/help" className={styles['header__context-menu-link']}>
+          <Link to="/infoDelivery" className={styles['header__context-menu-link']}>
             Информация о доставке
           </Link>
         </li>
 
         <li className={styles['header__context-menu-item']}>
-          <Link to="/returnInfo" className={styles['header__context-menu-link']}>
+          <Link to="/refunds" className={styles['header__context-menu-link']}>
             Возвраты
           </Link>
         </li>
@@ -127,10 +127,10 @@ function Header() {
                 <NavigationLink key={item.index} label={item.label} to={item.to} />
               ))}
               <ContextMenuElement className={styles.header__item} content={supportNode}>
-                <LightningIcon className={classNames(styles.header__icon, styles.help_icon)} />
-                <Link to="/help" className={styles.header__item}>
-                  Помощь
-                </Link>
+                <LightningIcon
+                  className={classNames(styles.header__icon, styles.help_icon, styles.header__item)}
+                />
+                Помощь
               </ContextMenuElement>
             </ul>
             <ContextMenuElement className={styles.header__item} content={contactNode} type="right">
diff --git a/src/pages/DeliveryPage/DeliveryPage.module.scss b/src/pages/DeliveryPage/DeliveryPage.module.scss
new file mode 100644
index 00000000..f02ce9b9
--- /dev/null
+++ b/src/pages/DeliveryPage/DeliveryPage.module.scss
@@ -0,0 +1,15 @@
+@use '../../shared/styles/utils/variables' as var;
+
+.help {
+  align-self: flex-start;
+
+  &__wrapper {
+    display: flex;
+    max-width: 100%;
+    gap: 30px;
+  }
+}
+
+.delivery {
+  width: 800px;
+}
diff --git a/src/pages/DeliveryPage/DeliveryPage.tsx b/src/pages/DeliveryPage/DeliveryPage.tsx
new file mode 100644
index 00000000..d0f72fcd
--- /dev/null
+++ b/src/pages/DeliveryPage/DeliveryPage.tsx
@@ -0,0 +1,19 @@
+import WrapperForMainContent from '@/components/WrapperForMainContent/WrapperForMainContent'
+import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
+import styles from './DeliveryPage.module.scss'
+import HelpPage from '@/pages/HelpPage/HelpPage'
+
+const DeliveryPage = () => {
+  return (
+    <WrapperForMainContent>
+      <div className={styles.help__wrapper}>
+        <HelpPage />
+        <div className={styles.delivery}>
+          <Heading type={HeadingType.NORMAL}>Информация о доставке</Heading>
+        </div>
+      </div>
+    </WrapperForMainContent>
+  )
+}
+
+export default DeliveryPage
diff --git a/src/pages/HelpPage/HelpPage.module.scss b/src/pages/HelpPage/HelpPage.module.scss
index 94657b8f..de1c57d5 100644
--- a/src/pages/HelpPage/HelpPage.module.scss
+++ b/src/pages/HelpPage/HelpPage.module.scss
@@ -1,64 +1,20 @@
 @use '../../shared/styles/utils/variables' as var;
 
 .help {
-  align-self: flex-start;
-
-  &__title {
-    text-align: left;
-    margin: 24px 0 0;
-    padding: 0;
-  }
-
   &__path {
     text-align: left;
     margin: 0 0 30px;
     padding: 0;
   }
 
-  &__filters {
+  &__cats {
     display: flex;
-    max-width: 340px;
     flex-direction: column;
-  }
-
-  &__wrapper {
-    max-width: 100%;
-    gap: 10px;
-  }
-}
-
-.cats {
-  display: flex;
-  max-width: 340px;
-  padding: 40px 30px 65px;
-  align-items: flex-start;
-  border-radius: 10px;
-  background: var.$white;
-  max-height: 300px;
-
-  &__wrapper {
-    display: flex;
-    max-width: 100%;
-    gap: 20px;
-  }
-
-  &__items {
-    margin-top: 25px;
-    max-width: 280px;
-    display: flex;
-    flex-flow: column wrap;
-  }
-  
-  &__item {
-    display: flex;
-    width: 280px;
-    height: 45px;
-    padding: 13.5px 15px;
-    align-items: center;
-    border-radius: 5px;
-    margin-bottom: 5px;
-    margin-right: 5px;
-    background-color: var.$body-bg;
-    justify-content: space-between;
+    max-width: 340px;
+    padding: 40px 30px 65px;
+    align-items: flex-start;
+    border-radius: 10px;
+    background: var.$white;
+    max-height: 300px;
   }
 }
diff --git a/src/pages/HelpPage/HelpPage.tsx b/src/pages/HelpPage/HelpPage.tsx
index 400b3a49..b5ecd117 100644
--- a/src/pages/HelpPage/HelpPage.tsx
+++ b/src/pages/HelpPage/HelpPage.tsx
@@ -1,30 +1,18 @@
-import WrapperForMainContent from '@/components/WrapperForMainContent/WrapperForMainContent'
 import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
 import styles from './HelpPage.module.scss'
 import Subheading from '@/shared/ui/Subheading/Subheading'
 import HelpCategories from '../../components/HelpCategories/HelpCategories'
-import FormReturn from '../../components/FormReturn/FormReturn'
 
 const HelpPage = () => {
   return (
-    <WrapperForMainContent>
-      <div className={styles.help__wrapper}>
-        <div className={styles.help}>
-          <Heading type={HeadingType.NORMAL}>Помощь</Heading>
-          <Subheading className={styles.help__path}>Главная/Помощь</Subheading>
-        </div>
-        <div className={styles.cats__wrapper}>
-          <div className={styles.cats}>
-            <nav className={styles.cats__container}>
-              <Heading type={HeadingType.NORMAL}>Категории</Heading>
-              <HelpCategories />
-            </nav>
-          </div>
-          {/* <Heading type={HeadingType.NORMAL}>Форма возврата</Heading> */}
-          <FormReturn />
-        </div>
+    <div>
+      <Heading type={HeadingType.NORMAL}>Помощь</Heading>
+      <Subheading className={styles.help__path}>Главная/Помощь</Subheading>
+      <div className={styles.help__cats}>
+        <Heading type={HeadingType.NORMAL}>Категории</Heading>
+        <HelpCategories />
       </div>
-    </WrapperForMainContent>
+    </div>
   )
 }
 
diff --git a/src/pages/RefundsPage/RefundsPage.module.scss b/src/pages/RefundsPage/RefundsPage.module.scss
new file mode 100644
index 00000000..c7ee8a95
--- /dev/null
+++ b/src/pages/RefundsPage/RefundsPage.module.scss
@@ -0,0 +1,11 @@
+@use '../../shared/styles/utils/variables' as var;
+
+.help {
+  align-self: flex-start;
+
+  &__wrapper {
+    display: flex;
+    max-width: 100%;
+    gap: 30px;
+  }
+}
diff --git a/src/pages/RefundsPage/RefundsPage.tsx b/src/pages/RefundsPage/RefundsPage.tsx
new file mode 100644
index 00000000..d5f3007c
--- /dev/null
+++ b/src/pages/RefundsPage/RefundsPage.tsx
@@ -0,0 +1,21 @@
+import WrapperForMainContent from '@/components/WrapperForMainContent/WrapperForMainContent'
+import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
+import styles from './RefundsPage.module.scss'
+import HelpPage from '@/pages/HelpPage/HelpPage'
+import FormReturn from '../../components/FormReturn/FormReturn'
+
+const RefundsPage = () => {
+  return (
+    <WrapperForMainContent>
+      <div className={styles.help__wrapper}>
+        <HelpPage />
+        <div>
+          <Heading type={HeadingType.NORMAL}>Форма возврата</Heading>
+          <FormReturn />
+        </div>
+      </div>
+    </WrapperForMainContent>
+  )
+}
+
+export default RefundsPage
diff --git a/src/shared/config/routerConfig/routes.ts b/src/shared/config/routerConfig/routes.ts
index b39b911f..bb8e3d2d 100644
--- a/src/shared/config/routerConfig/routes.ts
+++ b/src/shared/config/routerConfig/routes.ts
@@ -15,5 +15,7 @@ export enum Routes {
   LOGIN = '/login',
   BRANDS = '/brands',
   SEARCH = '/search/:query',
-  HELP = '/help'
+  INFO_DELIVERY = '/infoDelivery',
+  REFUNDS = '/refunds',
+  CERTIFICATE = '/certificate'
 }

From 744d77449d699c75d6ebe99b41792400028cac51 Mon Sep 17 00:00:00 2001
From: evgeny <evgeny@158.160.8.209>
Date: Thu, 22 Feb 2024 14:44:49 +0300
Subject: [PATCH 03/12] 1

---
 .storybook/main.ts                            |  23 +
 .storybook/preview.ts                         |  15 +
 package-lock.json                             | 862 +++++++++++++++++-
 package.json                                  |   1 +
 src/app/router/AppRouter/ui/AppRouter.tsx     |  15 +-
 src/components/FormReturn/FormReturnType.tsx  |  13 -
 src/components/header/header.tsx              |  10 +-
 src/features/Contacts/Contacts.tsx            |   1 -
 src/pages/HelpPage/HelpPage.module.scss       |  16 +-
 src/pages/HelpPage/HelpPage.tsx               |  26 +-
 src/pages/RefundsPage/RefundsPage.module.scss |  11 -
 src/pages/RefundsPage/RefundsPage.tsx         |  21 -
 src/shared/config/routerConfig/routes.ts      |   4 +-
 src/shared/date/checkDateIsEqual.ts           |   4 -
 src/shared/date/checkIsToday.ts               |   7 -
 src/shared/date/createDate.ts                 |  40 -
 src/shared/date/createMonth.ts                |  36 -
 src/shared/date/createYear.ts                 |  39 -
 src/shared/date/formatDate.ts                 |  19 -
 src/shared/date/getMonthNumberOfDays.ts       |   2 -
 src/shared/date/getMonthesNames.ts            |  23 -
 src/shared/date/getWeekDaysNames.ts           |  21 -
 src/shared/date/getWeekNumber.ts              |   6 -
 src/shared/date/index.ts                      |  10 -
 src/shared/ui/Button/Button.module.scss       |   2 +-
 src/shared/ui/Checkbox/Checkbox.module.scss   |  32 +
 src/shared/ui/Checkbox/Checkbox.stories.tsx   |  38 +
 src/shared/ui/Checkbox/Checkbox.tsx           |  50 +
 src/shared/ui/Label/Label.tsx                 |   1 +
 src/stories/Button.tsx                        |   8 +-
 src/stories/Configure.mdx                     |   2 +-
 src/stories/Header.tsx                        |   5 +-
 src/stories/Page.tsx                          |  11 +-
 src/stories/assets/avif-test-image.avif       | Bin 0 -> 829 bytes
 src/stories/button.css                        |   7 +-
 src/stories/header.css                        |   2 +-
 .../FormReturn/FormReturn.module.scss         |  53 +-
 .../FormReturn/FormReturn.tsx                 | 174 ++--
 .../HelpCategories/HelpCategories.module.scss |   0
 .../HelpCategories/HelpCategories.tsx         |   4 +-
 40 files changed, 1150 insertions(+), 464 deletions(-)
 create mode 100644 .storybook/main.ts
 create mode 100644 .storybook/preview.ts
 delete mode 100644 src/components/FormReturn/FormReturnType.tsx
 delete mode 100644 src/pages/RefundsPage/RefundsPage.module.scss
 delete mode 100644 src/pages/RefundsPage/RefundsPage.tsx
 delete mode 100644 src/shared/date/checkDateIsEqual.ts
 delete mode 100644 src/shared/date/checkIsToday.ts
 delete mode 100644 src/shared/date/createDate.ts
 delete mode 100644 src/shared/date/createMonth.ts
 delete mode 100644 src/shared/date/createYear.ts
 delete mode 100644 src/shared/date/formatDate.ts
 delete mode 100644 src/shared/date/getMonthNumberOfDays.ts
 delete mode 100644 src/shared/date/getMonthesNames.ts
 delete mode 100644 src/shared/date/getWeekDaysNames.ts
 delete mode 100644 src/shared/date/getWeekNumber.ts
 delete mode 100644 src/shared/date/index.ts
 create mode 100644 src/shared/ui/Checkbox/Checkbox.module.scss
 create mode 100644 src/shared/ui/Checkbox/Checkbox.stories.tsx
 create mode 100644 src/shared/ui/Checkbox/Checkbox.tsx
 create mode 100644 src/stories/assets/avif-test-image.avif
 rename src/{components => widgets}/FormReturn/FormReturn.module.scss (57%)
 rename src/{components => widgets}/FormReturn/FormReturn.tsx (57%)
 rename src/{components => widgets}/HelpCategories/HelpCategories.module.scss (100%)
 rename src/{components => widgets}/HelpCategories/HelpCategories.tsx (77%)

diff --git a/.storybook/main.ts b/.storybook/main.ts
new file mode 100644
index 00000000..8d876fe2
--- /dev/null
+++ b/.storybook/main.ts
@@ -0,0 +1,23 @@
+import type { StorybookConfig } from '@storybook/react-webpack5'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions'
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {
+      builder: {
+        useSWC: true
+      }
+    }
+  },
+  docs: {
+    autodocs: 'tag'
+  }
+}
+export default config
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
new file mode 100644
index 00000000..45771b4e
--- /dev/null
+++ b/.storybook/preview.ts
@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/react'
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i
+      }
+    }
+  }
+}
+
+export default preview
diff --git a/package-lock.json b/package-lock.json
index 267237b8..44bfc790 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35,6 +35,7 @@
         "@storybook/blocks": "^7.5.1",
         "@storybook/react": "^7.5.1",
         "@storybook/react-webpack5": "^7.5.1",
+        "@storybook/test": "^7.6.16",
         "@storybook/testing-library": "^0.2.2",
         "@svgr/webpack": "^8.1.0",
         "@types/react": "18.2.20",
@@ -81,6 +82,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/@adobe/css-tools": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.3.tgz",
+      "integrity": "sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ==",
+      "dev": true
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
@@ -5905,9 +5912,9 @@
       }
     },
     "node_modules/@storybook/csf": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.1.tgz",
-      "integrity": "sha512-4hE3AlNVxR60Wc5KSC68ASYzUobjPqtSKyhV6G+ge0FIXU55N5nTY7dXGRZHQGDBPq+XqchMkIdlkHPRs8nTHg==",
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.2.tgz",
+      "integrity": "sha512-ePrvE/pS1vsKR9Xr+o+YwdqNgHUyXvg+1Xjx0h9LrVx7Zq4zNe06pd63F5EvzTbCbJsHj7GHr9tkiaqm7U8WRA==",
       "dev": true,
       "dependencies": {
         "type-fest": "^2.19.0"
@@ -6723,6 +6730,148 @@
         "node": ">=8"
       }
     },
+    "node_modules/@storybook/test": {
+      "version": "7.6.16",
+      "resolved": "https://registry.npmjs.org/@storybook/test/-/test-7.6.16.tgz",
+      "integrity": "sha512-rHLk4b6ZhswAHfVI+G/2rGeoXbP04NoPkDSf3l9dJ0Oj5TKMKw6O8bakrbeFTzpJxk4O3mIgaNH92rgtcC0AFA==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/client-logger": "7.6.16",
+        "@storybook/core-events": "7.6.16",
+        "@storybook/instrumenter": "7.6.16",
+        "@storybook/preview-api": "7.6.16",
+        "@testing-library/dom": "^9.3.1",
+        "@testing-library/jest-dom": "^6.1.3",
+        "@testing-library/user-event": "14.3.0",
+        "@types/chai": "^4",
+        "@vitest/expect": "^0.34.2",
+        "@vitest/spy": "^0.34.1",
+        "chai": "^4.3.7",
+        "util": "^0.12.4"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/test/node_modules/@storybook/channels": {
+      "version": "7.6.16",
+      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.6.16.tgz",
+      "integrity": "sha512-LKB0t4OGISez1O4TRJ/CDPxlb2wAW7gg8YRL91VVUHeffVyr4bnpklvMbLbuEcYrysM82Q2UMB9ipQdyK6Issg==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/client-logger": "7.6.16",
+        "@storybook/core-events": "7.6.16",
+        "@storybook/global": "^5.0.0",
+        "qs": "^6.10.0",
+        "telejson": "^7.2.0",
+        "tiny-invariant": "^1.3.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/test/node_modules/@storybook/client-logger": {
+      "version": "7.6.16",
+      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.16.tgz",
+      "integrity": "sha512-Vquhmgk/SO0VeAkojcA1juuicBHoTST+f4XwBvyUNiebOSOdGIkxHVxpDFXu2kS0aKflFBEutX2IgoysDup+fQ==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/global": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/test/node_modules/@storybook/core-events": {
+      "version": "7.6.16",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.6.16.tgz",
+      "integrity": "sha512-mkBqzrbp6vmdjo0fBZGrFQQ4YdvMFxF6AesdKTf8EzPa69FoxnhQLrmQ4aXF+9vXkxfXVJF2HfpoTEdfqqAo+w==",
+      "dev": true,
+      "dependencies": {
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/test/node_modules/@storybook/instrumenter": {
+      "version": "7.6.16",
+      "resolved": "https://registry.npmjs.org/@storybook/instrumenter/-/instrumenter-7.6.16.tgz",
+      "integrity": "sha512-b/X34w08yhWxN+hFjjO09LP9ubwVLOPaF1P2uvOfzbnhv7E5xNsbCG3Czk00Rx8OUeeU97Q0ZArUjOAj3HFNcQ==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/channels": "7.6.16",
+        "@storybook/client-logger": "7.6.16",
+        "@storybook/core-events": "7.6.16",
+        "@storybook/global": "^5.0.0",
+        "@storybook/preview-api": "7.6.16",
+        "@vitest/utils": "^0.34.6",
+        "util": "^0.12.4"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/test/node_modules/@storybook/preview-api": {
+      "version": "7.6.16",
+      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.6.16.tgz",
+      "integrity": "sha512-V9x9HOhi4CJuiX+0a7GU0JlfRAp6txStGMkV0DrCATbxSWpK+6d5x2Te521z16V3RIMMmYn33aEyarOp5WjTqw==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/channels": "7.6.16",
+        "@storybook/client-logger": "7.6.16",
+        "@storybook/core-events": "7.6.16",
+        "@storybook/csf": "^0.1.2",
+        "@storybook/global": "^5.0.0",
+        "@storybook/types": "7.6.16",
+        "@types/qs": "^6.9.5",
+        "dequal": "^2.0.2",
+        "lodash": "^4.17.21",
+        "memoizerific": "^1.11.3",
+        "qs": "^6.10.0",
+        "synchronous-promise": "^2.0.15",
+        "ts-dedent": "^2.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/test/node_modules/@storybook/types": {
+      "version": "7.6.16",
+      "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.6.16.tgz",
+      "integrity": "sha512-Ld4dKbgSbvqThdBNwNlOxQu5AiS6U9DXI5evf/j83eWs6skO3OBdQp+GWa6sUCI9eRqH8tFsw/YmMcIZ4uZrBQ==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/channels": "7.6.16",
+        "@types/babel__core": "^7.0.0",
+        "@types/express": "^4.7.0",
+        "file-system-cache": "2.3.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/test/node_modules/@testing-library/user-event": {
+      "version": "14.3.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.3.0.tgz",
+      "integrity": "sha512-P02xtBBa8yMaLhK8CzJCIns8rqwnF6FxhR9zs810flHOBXUYCFjLd8Io1rQrAkQRWEmW2PGdZIEdMxf/KLsqFA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": ">=7.21.4"
+      }
+    },
     "node_modules/@storybook/testing-library": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/@storybook/testing-library/-/testing-library-0.2.2.tgz",
@@ -7338,6 +7487,158 @@
         "node": ">=8"
       }
     },
+    "node_modules/@testing-library/jest-dom": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.4.2.tgz",
+      "integrity": "sha512-CzqH0AFymEMG48CpzXFriYYkOjk6ZGPCLMhW9e9jg3KMCn5OfJecF8GtGW7yGfR/IgCe3SX8BSwjdzI6BBbZLw==",
+      "dev": true,
+      "dependencies": {
+        "@adobe/css-tools": "^4.3.2",
+        "@babel/runtime": "^7.9.2",
+        "aria-query": "^5.0.0",
+        "chalk": "^3.0.0",
+        "css.escape": "^1.5.1",
+        "dom-accessibility-api": "^0.6.3",
+        "lodash": "^4.17.15",
+        "redent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      },
+      "peerDependencies": {
+        "@jest/globals": ">= 28",
+        "@types/bun": "latest",
+        "@types/jest": ">= 28",
+        "jest": ">= 28",
+        "vitest": ">= 0.32"
+      },
+      "peerDependenciesMeta": {
+        "@jest/globals": {
+          "optional": true
+        },
+        "@types/bun": {
+          "optional": true
+        },
+        "@types/jest": {
+          "optional": true
+        },
+        "jest": {
+          "optional": true
+        },
+        "vitest": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/chalk": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+      "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/dom-accessibility-api": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz",
+      "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==",
+      "dev": true
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/indent-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/redent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
+      "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+      "dev": true,
+      "dependencies": {
+        "indent-string": "^4.0.0",
+        "strip-indent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/strip-indent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+      "dev": true,
+      "dependencies": {
+        "min-indent": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/@testing-library/user-event": {
       "version": "14.5.1",
       "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.1.tgz",
@@ -7426,6 +7727,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/chai": {
+      "version": "4.3.11",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.11.tgz",
+      "integrity": "sha512-qQR1dr2rGIHYlJulmr8Ioq3De0Le9E4MJ5AiaeAETJJpndT1uUNHsGFK3L/UIu+rbkQSdj8J/w2bCsBZc/Y5fQ==",
+      "dev": true
+    },
     "node_modules/@types/connect": {
       "version": "3.4.36",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.36.tgz",
@@ -8124,6 +8431,78 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@vitest/expect": {
+      "version": "0.34.7",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-0.34.7.tgz",
+      "integrity": "sha512-G9iEtwrD6ZQ4MVHZufif9Iqz3eLtuwBBNx971fNAGPaugM7ftAWjQN+ob2zWhtzURp8RK3zGXOxVb01mFo3zAQ==",
+      "dev": true,
+      "dependencies": {
+        "@vitest/spy": "0.34.7",
+        "@vitest/utils": "0.34.7",
+        "chai": "^4.3.10"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "0.34.7",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-0.34.7.tgz",
+      "integrity": "sha512-NMMSzOY2d8L0mcOt4XcliDOS1ISyGlAXuQtERWVOoVHnKwmG+kKhinAiGw3dTtMQWybfa89FG8Ucg9tiC/FhTQ==",
+      "dev": true,
+      "dependencies": {
+        "tinyspy": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "0.34.7",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-0.34.7.tgz",
+      "integrity": "sha512-ziAavQLpCYS9sLOorGrFFKmy2gnfiNU0ZJ15TsMz/K92NAPS/rp9K4z6AJQQk5Y8adCy4Iwpxy7pQumQ/psnRg==",
+      "dev": true,
+      "dependencies": {
+        "diff-sequences": "^29.4.3",
+        "loupe": "^2.3.6",
+        "pretty-format": "^29.5.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@vitest/utils/node_modules/pretty-format": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+      "dev": true,
+      "dependencies": {
+        "@jest/schemas": "^29.6.3",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^18.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@vitest/utils/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
+      "dev": true
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz",
@@ -8756,6 +9135,15 @@
         "util": "^0.12.5"
       }
     },
+    "node_modules/assertion-error": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz",
+      "integrity": "sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ast-types": {
       "version": "0.14.2",
       "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.14.2.tgz",
@@ -9332,6 +9720,24 @@
         "node": ">=4"
       }
     },
+    "node_modules/chai": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-4.4.1.tgz",
+      "integrity": "sha512-13sOfMv2+DWduEU+/xbun3LScLoqN17nBeTLUsmDfKdoiC1fr0n9PU4guu4AhRcOVFk/sW8LyZWHuhWtQZiF+g==",
+      "dev": true,
+      "dependencies": {
+        "assertion-error": "^1.1.0",
+        "check-error": "^1.0.3",
+        "deep-eql": "^4.1.3",
+        "get-func-name": "^2.0.2",
+        "loupe": "^2.3.6",
+        "pathval": "^1.1.1",
+        "type-detect": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -9346,6 +9752,18 @@
         "node": ">=4"
       }
     },
+    "node_modules/check-error": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.3.tgz",
+      "integrity": "sha512-iKEoDYaRmd1mxM90a2OEfWhjsjPpYPuQ+lMYsoxB126+t8fw7ySEO48nmDg5COTjxDI65/Y2OWpeEHk3ZOe8zg==",
+      "dev": true,
+      "dependencies": {
+        "get-func-name": "^2.0.2"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -9941,6 +10359,12 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
+    "node_modules/css.escape": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
+      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+      "dev": true
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -10060,6 +10484,18 @@
       "integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==",
       "dev": true
     },
+    "node_modules/deep-eql": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-4.1.3.tgz",
+      "integrity": "sha512-WaEtAOpRA1MQ0eohqZjpGD8zdI0Ovsm8mmFhaDN8dvDZzyoUMcYDnf5Y6iu7HTXxf8JDS23qWa4a+hKCDyOPzw==",
+      "dev": true,
+      "dependencies": {
+        "type-detect": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/deep-equal": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.2.tgz",
@@ -10280,6 +10716,15 @@
         "detect-port": "bin/detect-port.js"
       }
     },
+    "node_modules/diff-sequences": {
+      "version": "29.6.3",
+      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz",
+      "integrity": "sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==",
+      "dev": true,
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -12199,6 +12644,15 @@
         "node": "6.* || 8.* || >= 10.*"
       }
     },
+    "node_modules/get-func-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.2.tgz",
+      "integrity": "sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
@@ -14753,6 +15207,15 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/loupe": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/loupe/-/loupe-2.3.7.tgz",
+      "integrity": "sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==",
+      "dev": true,
+      "dependencies": {
+        "get-func-name": "^2.0.1"
+      }
+    },
     "node_modules/lower-case": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
@@ -15923,6 +16386,15 @@
       "integrity": "sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==",
       "dev": true
     },
+    "node_modules/pathval": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/pathval/-/pathval-1.1.1.tgz",
+      "integrity": "sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/peek-stream": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/peek-stream/-/peek-stream-1.1.3.tgz",
@@ -18973,6 +19445,15 @@
       "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
       "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
     },
+    "node_modules/tinyspy": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-2.2.1.tgz",
+      "integrity": "sha512-KYad6Vy5VDWV4GH3fjpseMQ/XU2BhIYP7Vzd0LG44qRWm/Yt2WCOTicFdvmgo6gWaqooMQCawTtILVQJupKu7A==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -19225,6 +19706,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/type-detect": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
+      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/type-fest": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-1.4.0.tgz",
@@ -20431,6 +20921,12 @@
       "integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==",
       "dev": true
     },
+    "@adobe/css-tools": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.3.tgz",
+      "integrity": "sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ==",
+      "dev": true
+    },
     "@ampproject/remapping": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
@@ -24291,9 +24787,9 @@
       }
     },
     "@storybook/csf": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.1.tgz",
-      "integrity": "sha512-4hE3AlNVxR60Wc5KSC68ASYzUobjPqtSKyhV6G+ge0FIXU55N5nTY7dXGRZHQGDBPq+XqchMkIdlkHPRs8nTHg==",
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.2.tgz",
+      "integrity": "sha512-ePrvE/pS1vsKR9Xr+o+YwdqNgHUyXvg+1Xjx0h9LrVx7Zq4zNe06pd63F5EvzTbCbJsHj7GHr9tkiaqm7U8WRA==",
       "dev": true,
       "requires": {
         "type-fest": "^2.19.0"
@@ -24880,6 +25376,116 @@
         }
       }
     },
+    "@storybook/test": {
+      "version": "7.6.16",
+      "resolved": "https://registry.npmjs.org/@storybook/test/-/test-7.6.16.tgz",
+      "integrity": "sha512-rHLk4b6ZhswAHfVI+G/2rGeoXbP04NoPkDSf3l9dJ0Oj5TKMKw6O8bakrbeFTzpJxk4O3mIgaNH92rgtcC0AFA==",
+      "dev": true,
+      "requires": {
+        "@storybook/client-logger": "7.6.16",
+        "@storybook/core-events": "7.6.16",
+        "@storybook/instrumenter": "7.6.16",
+        "@storybook/preview-api": "7.6.16",
+        "@testing-library/dom": "^9.3.1",
+        "@testing-library/jest-dom": "^6.1.3",
+        "@testing-library/user-event": "14.3.0",
+        "@types/chai": "^4",
+        "@vitest/expect": "^0.34.2",
+        "@vitest/spy": "^0.34.1",
+        "chai": "^4.3.7",
+        "util": "^0.12.4"
+      },
+      "dependencies": {
+        "@storybook/channels": {
+          "version": "7.6.16",
+          "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.6.16.tgz",
+          "integrity": "sha512-LKB0t4OGISez1O4TRJ/CDPxlb2wAW7gg8YRL91VVUHeffVyr4bnpklvMbLbuEcYrysM82Q2UMB9ipQdyK6Issg==",
+          "dev": true,
+          "requires": {
+            "@storybook/client-logger": "7.6.16",
+            "@storybook/core-events": "7.6.16",
+            "@storybook/global": "^5.0.0",
+            "qs": "^6.10.0",
+            "telejson": "^7.2.0",
+            "tiny-invariant": "^1.3.1"
+          }
+        },
+        "@storybook/client-logger": {
+          "version": "7.6.16",
+          "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.16.tgz",
+          "integrity": "sha512-Vquhmgk/SO0VeAkojcA1juuicBHoTST+f4XwBvyUNiebOSOdGIkxHVxpDFXu2kS0aKflFBEutX2IgoysDup+fQ==",
+          "dev": true,
+          "requires": {
+            "@storybook/global": "^5.0.0"
+          }
+        },
+        "@storybook/core-events": {
+          "version": "7.6.16",
+          "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.6.16.tgz",
+          "integrity": "sha512-mkBqzrbp6vmdjo0fBZGrFQQ4YdvMFxF6AesdKTf8EzPa69FoxnhQLrmQ4aXF+9vXkxfXVJF2HfpoTEdfqqAo+w==",
+          "dev": true,
+          "requires": {
+            "ts-dedent": "^2.0.0"
+          }
+        },
+        "@storybook/instrumenter": {
+          "version": "7.6.16",
+          "resolved": "https://registry.npmjs.org/@storybook/instrumenter/-/instrumenter-7.6.16.tgz",
+          "integrity": "sha512-b/X34w08yhWxN+hFjjO09LP9ubwVLOPaF1P2uvOfzbnhv7E5xNsbCG3Czk00Rx8OUeeU97Q0ZArUjOAj3HFNcQ==",
+          "dev": true,
+          "requires": {
+            "@storybook/channels": "7.6.16",
+            "@storybook/client-logger": "7.6.16",
+            "@storybook/core-events": "7.6.16",
+            "@storybook/global": "^5.0.0",
+            "@storybook/preview-api": "7.6.16",
+            "@vitest/utils": "^0.34.6",
+            "util": "^0.12.4"
+          }
+        },
+        "@storybook/preview-api": {
+          "version": "7.6.16",
+          "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.6.16.tgz",
+          "integrity": "sha512-V9x9HOhi4CJuiX+0a7GU0JlfRAp6txStGMkV0DrCATbxSWpK+6d5x2Te521z16V3RIMMmYn33aEyarOp5WjTqw==",
+          "dev": true,
+          "requires": {
+            "@storybook/channels": "7.6.16",
+            "@storybook/client-logger": "7.6.16",
+            "@storybook/core-events": "7.6.16",
+            "@storybook/csf": "^0.1.2",
+            "@storybook/global": "^5.0.0",
+            "@storybook/types": "7.6.16",
+            "@types/qs": "^6.9.5",
+            "dequal": "^2.0.2",
+            "lodash": "^4.17.21",
+            "memoizerific": "^1.11.3",
+            "qs": "^6.10.0",
+            "synchronous-promise": "^2.0.15",
+            "ts-dedent": "^2.0.0",
+            "util-deprecate": "^1.0.2"
+          }
+        },
+        "@storybook/types": {
+          "version": "7.6.16",
+          "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.6.16.tgz",
+          "integrity": "sha512-Ld4dKbgSbvqThdBNwNlOxQu5AiS6U9DXI5evf/j83eWs6skO3OBdQp+GWa6sUCI9eRqH8tFsw/YmMcIZ4uZrBQ==",
+          "dev": true,
+          "requires": {
+            "@storybook/channels": "7.6.16",
+            "@types/babel__core": "^7.0.0",
+            "@types/express": "^4.7.0",
+            "file-system-cache": "2.3.0"
+          }
+        },
+        "@testing-library/user-event": {
+          "version": "14.3.0",
+          "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.3.0.tgz",
+          "integrity": "sha512-P02xtBBa8yMaLhK8CzJCIns8rqwnF6FxhR9zs810flHOBXUYCFjLd8Io1rQrAkQRWEmW2PGdZIEdMxf/KLsqFA==",
+          "dev": true,
+          "requires": {}
+        }
+      }
+    },
     "@storybook/testing-library": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/@storybook/testing-library/-/testing-library-0.2.2.tgz",
@@ -25226,6 +25832,104 @@
         }
       }
     },
+    "@testing-library/jest-dom": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.4.2.tgz",
+      "integrity": "sha512-CzqH0AFymEMG48CpzXFriYYkOjk6ZGPCLMhW9e9jg3KMCn5OfJecF8GtGW7yGfR/IgCe3SX8BSwjdzI6BBbZLw==",
+      "dev": true,
+      "requires": {
+        "@adobe/css-tools": "^4.3.2",
+        "@babel/runtime": "^7.9.2",
+        "aria-query": "^5.0.0",
+        "chalk": "^3.0.0",
+        "css.escape": "^1.5.1",
+        "dom-accessibility-api": "^0.6.3",
+        "lodash": "^4.17.15",
+        "redent": "^3.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "dom-accessibility-api": {
+          "version": "0.6.3",
+          "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz",
+          "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "indent-string": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+          "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+          "dev": true
+        },
+        "redent": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
+          "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+          "dev": true,
+          "requires": {
+            "indent-string": "^4.0.0",
+            "strip-indent": "^3.0.0"
+          }
+        },
+        "strip-indent": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+          "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+          "dev": true,
+          "requires": {
+            "min-indent": "^1.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "@testing-library/user-event": {
       "version": "14.5.1",
       "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.1.tgz",
@@ -25305,6 +26009,12 @@
         "@types/node": "*"
       }
     },
+    "@types/chai": {
+      "version": "4.3.11",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.11.tgz",
+      "integrity": "sha512-qQR1dr2rGIHYlJulmr8Ioq3De0Le9E4MJ5AiaeAETJJpndT1uUNHsGFK3L/UIu+rbkQSdj8J/w2bCsBZc/Y5fQ==",
+      "dev": true
+    },
     "@types/connect": {
       "version": "3.4.36",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.36.tgz",
@@ -25893,6 +26603,62 @@
         "eslint-visitor-keys": "^3.4.1"
       }
     },
+    "@vitest/expect": {
+      "version": "0.34.7",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-0.34.7.tgz",
+      "integrity": "sha512-G9iEtwrD6ZQ4MVHZufif9Iqz3eLtuwBBNx971fNAGPaugM7ftAWjQN+ob2zWhtzURp8RK3zGXOxVb01mFo3zAQ==",
+      "dev": true,
+      "requires": {
+        "@vitest/spy": "0.34.7",
+        "@vitest/utils": "0.34.7",
+        "chai": "^4.3.10"
+      }
+    },
+    "@vitest/spy": {
+      "version": "0.34.7",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-0.34.7.tgz",
+      "integrity": "sha512-NMMSzOY2d8L0mcOt4XcliDOS1ISyGlAXuQtERWVOoVHnKwmG+kKhinAiGw3dTtMQWybfa89FG8Ucg9tiC/FhTQ==",
+      "dev": true,
+      "requires": {
+        "tinyspy": "^2.1.1"
+      }
+    },
+    "@vitest/utils": {
+      "version": "0.34.7",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-0.34.7.tgz",
+      "integrity": "sha512-ziAavQLpCYS9sLOorGrFFKmy2gnfiNU0ZJ15TsMz/K92NAPS/rp9K4z6AJQQk5Y8adCy4Iwpxy7pQumQ/psnRg==",
+      "dev": true,
+      "requires": {
+        "diff-sequences": "^29.4.3",
+        "loupe": "^2.3.6",
+        "pretty-format": "^29.5.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+          "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+          "dev": true
+        },
+        "pretty-format": {
+          "version": "29.7.0",
+          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+          "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+          "dev": true,
+          "requires": {
+            "@jest/schemas": "^29.6.3",
+            "ansi-styles": "^5.0.0",
+            "react-is": "^18.0.0"
+          }
+        },
+        "react-is": {
+          "version": "18.2.0",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
+          "dev": true
+        }
+      }
+    },
     "@webassemblyjs/ast": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz",
@@ -26401,6 +27167,12 @@
         "util": "^0.12.5"
       }
     },
+    "assertion-error": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz",
+      "integrity": "sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==",
+      "dev": true
+    },
     "ast-types": {
       "version": "0.14.2",
       "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.14.2.tgz",
@@ -26826,6 +27598,21 @@
       "integrity": "sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw==",
       "dev": true
     },
+    "chai": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-4.4.1.tgz",
+      "integrity": "sha512-13sOfMv2+DWduEU+/xbun3LScLoqN17nBeTLUsmDfKdoiC1fr0n9PU4guu4AhRcOVFk/sW8LyZWHuhWtQZiF+g==",
+      "dev": true,
+      "requires": {
+        "assertion-error": "^1.1.0",
+        "check-error": "^1.0.3",
+        "deep-eql": "^4.1.3",
+        "get-func-name": "^2.0.2",
+        "loupe": "^2.3.6",
+        "pathval": "^1.1.1",
+        "type-detect": "^4.0.8"
+      }
+    },
     "chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -26837,6 +27624,15 @@
         "supports-color": "^5.3.0"
       }
     },
+    "check-error": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.3.tgz",
+      "integrity": "sha512-iKEoDYaRmd1mxM90a2OEfWhjsjPpYPuQ+lMYsoxB126+t8fw7ySEO48nmDg5COTjxDI65/Y2OWpeEHk3ZOe8zg==",
+      "dev": true,
+      "requires": {
+        "get-func-name": "^2.0.2"
+      }
+    },
     "chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -27294,6 +28090,12 @@
       "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
       "dev": true
     },
+    "css.escape": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
+      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+      "dev": true
+    },
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -27377,6 +28179,15 @@
       "integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==",
       "dev": true
     },
+    "deep-eql": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-4.1.3.tgz",
+      "integrity": "sha512-WaEtAOpRA1MQ0eohqZjpGD8zdI0Ovsm8mmFhaDN8dvDZzyoUMcYDnf5Y6iu7HTXxf8JDS23qWa4a+hKCDyOPzw==",
+      "dev": true,
+      "requires": {
+        "type-detect": "^4.0.0"
+      }
+    },
     "deep-equal": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.2.tgz",
@@ -27541,6 +28352,12 @@
         "debug": "4"
       }
     },
+    "diff-sequences": {
+      "version": "29.6.3",
+      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz",
+      "integrity": "sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==",
+      "dev": true
+    },
     "dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -29029,6 +29846,12 @@
       "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
       "dev": true
     },
+    "get-func-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.2.tgz",
+      "integrity": "sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==",
+      "dev": true
+    },
     "get-intrinsic": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
@@ -30867,6 +31690,15 @@
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
     },
+    "loupe": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/loupe/-/loupe-2.3.7.tgz",
+      "integrity": "sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==",
+      "dev": true,
+      "requires": {
+        "get-func-name": "^2.0.1"
+      }
+    },
     "lower-case": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
@@ -31733,6 +32565,12 @@
       "integrity": "sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==",
       "dev": true
     },
+    "pathval": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/pathval/-/pathval-1.1.1.tgz",
+      "integrity": "sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==",
+      "dev": true
+    },
     "peek-stream": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/peek-stream/-/peek-stream-1.1.3.tgz",
@@ -33977,6 +34815,12 @@
       "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
       "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
     },
+    "tinyspy": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-2.2.1.tgz",
+      "integrity": "sha512-KYad6Vy5VDWV4GH3fjpseMQ/XU2BhIYP7Vzd0LG44qRWm/Yt2WCOTicFdvmgo6gWaqooMQCawTtILVQJupKu7A==",
+      "dev": true
+    },
     "tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -34164,6 +35008,12 @@
         "prelude-ls": "^1.2.1"
       }
     },
+    "type-detect": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
+      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
+      "dev": true
+    },
     "type-fest": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-1.4.0.tgz",
diff --git a/package.json b/package.json
index 710c27d2..db8de4a5 100644
--- a/package.json
+++ b/package.json
@@ -57,6 +57,7 @@
     "@storybook/blocks": "^7.5.1",
     "@storybook/react": "^7.5.1",
     "@storybook/react-webpack5": "^7.5.1",
+    "@storybook/test": "^7.6.16",
     "@storybook/testing-library": "^0.2.2",
     "@svgr/webpack": "^8.1.0",
     "@types/react": "18.2.20",
diff --git a/src/app/router/AppRouter/ui/AppRouter.tsx b/src/app/router/AppRouter/ui/AppRouter.tsx
index bda5832f..81cc36b6 100644
--- a/src/app/router/AppRouter/ui/AppRouter.tsx
+++ b/src/app/router/AppRouter/ui/AppRouter.tsx
@@ -10,8 +10,7 @@ import ComparePage from '@/pages/ComparePage/ComparePage'
 import FavoritesPage from '@/pages/FavoritesPage/FavoritesPage'
 import CartPage from '@/pages/CartPage/CartPage'
 import SearchResultsPage from '@/pages/SearchResultsPage/SearchResultsPage'
-import DeliveryPage from '@/pages/DeliveryPage/DeliveryPage'
-import RefundsPage from '@/pages/RefundsPage/RefundsPage'
+import HelpPage from '@/pages/HelpPage/HelpPage'
 
 export const AppRouter = createBrowserRouter([
   {
@@ -57,17 +56,9 @@ export const AppRouter = createBrowserRouter([
         element: <SearchResultsPage />
       },
       {
-        path: Routes.INFO_DELIVERY,
-        element: <DeliveryPage />
-      },
-      {
-        path: Routes.REFUNDS,
-        element: <RefundsPage />
+        path: Routes.HELP,
+        element: <HelpPage />
       }
-      /*       {
-        path: Routes.CERTIFICATE,
-        element: <Certificate />
-      } */
     ]
   }
 ])
diff --git a/src/components/FormReturn/FormReturnType.tsx b/src/components/FormReturn/FormReturnType.tsx
deleted file mode 100644
index 7e5c67b2..00000000
--- a/src/components/FormReturn/FormReturnType.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-export type TypeValues = {
-  name: string
-  surname: string
-  email: string
-  tel: string
-  numberOrder: string
-  dateOrder: string
-  itemInfo: string
-  model: string
-  amount: string
-  textArea: string
-  myChoice: string
-}
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index 0a2cde68..95d13c00 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -77,18 +77,18 @@ function Header() {
     () => (
       <ul className={styles['header__context-menu-list']}>
         <li className={styles['header__context-menu-item']}>
-          <Link to="/infoDelivery" className={styles['header__context-menu-link']}>
+          <Link to="" className={styles['header__context-menu-link']}>
             Информация о доставке
           </Link>
         </li>
 
         <li className={styles['header__context-menu-item']}>
-          <Link to="/refunds" className={styles['header__context-menu-link']}>
+          <Link to="" className={styles['header__context-menu-link']}>
             Возвраты
           </Link>
         </li>
         <li className={styles['header__context-menu-item']}>
-          <Link to="/certificate" className={styles['header__context-menu-link']}>
+          <Link to="" className={styles['header__context-menu-link']}>
             Подарочные сертификаты
           </Link>
         </li>
@@ -130,7 +130,9 @@ function Header() {
                 <LightningIcon
                   className={classNames(styles.header__icon, styles.help_icon, styles.header__item)}
                 />
-                Помощь
+                <Link className={styles.header__item} to={Routes.HELP}>
+                  Помощь
+                </Link>
               </ContextMenuElement>
             </ul>
             <ContextMenuElement className={styles.header__item} content={contactNode} type="right">
diff --git a/src/features/Contacts/Contacts.tsx b/src/features/Contacts/Contacts.tsx
index c0499344..06703e69 100644
--- a/src/features/Contacts/Contacts.tsx
+++ b/src/features/Contacts/Contacts.tsx
@@ -32,7 +32,6 @@ const Contacts: FC<PropsContacts> = ({ messenger }) => {
           ))}
         </ul>
       </div>
-
       <Button
         theme={ButtonTheme.PRIMARY}
         design={ButtonDesign.ROUND}
diff --git a/src/pages/HelpPage/HelpPage.module.scss b/src/pages/HelpPage/HelpPage.module.scss
index de1c57d5..3429efb5 100644
--- a/src/pages/HelpPage/HelpPage.module.scss
+++ b/src/pages/HelpPage/HelpPage.module.scss
@@ -1,9 +1,11 @@
 @use '../../shared/styles/utils/variables' as var;
 
 .help {
+  align-self: flex-start;
+
   &__path {
     text-align: left;
-    margin: 0 0 30px;
+    margin: 0;
     padding: 0;
   }
 
@@ -17,4 +19,16 @@
     background: var.$white;
     max-height: 300px;
   }
+
+  &__wrapper {
+    display: flex;
+    gap: 30px;
+  }
+
+  &__container {
+    display: flex;
+    flex-direction: column;
+    max-width: 100%;
+    gap: 30px;
+  }
 }
diff --git a/src/pages/HelpPage/HelpPage.tsx b/src/pages/HelpPage/HelpPage.tsx
index b5ecd117..4ef3221f 100644
--- a/src/pages/HelpPage/HelpPage.tsx
+++ b/src/pages/HelpPage/HelpPage.tsx
@@ -1,18 +1,28 @@
 import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
 import styles from './HelpPage.module.scss'
 import Subheading from '@/shared/ui/Subheading/Subheading'
-import HelpCategories from '../../components/HelpCategories/HelpCategories'
+import HelpCategories from '@/widgets/HelpCategories/HelpCategories'
+import FormReturn from '@/widgets/FormReturn/FormReturn'
+import WrapperForMainContent from '../../components/WrapperForMainContent/WrapperForMainContent'
 
 const HelpPage = () => {
   return (
-    <div>
-      <Heading type={HeadingType.NORMAL}>Помощь</Heading>
-      <Subheading className={styles.help__path}>Главная/Помощь</Subheading>
-      <div className={styles.help__cats}>
-        <Heading type={HeadingType.NORMAL}>Категории</Heading>
-        <HelpCategories />
+    <WrapperForMainContent>
+      <div className={styles.help__wrapper}>
+        <div className={styles.help__container}>
+          <Heading type={HeadingType.NORMAL}>Помощь</Heading>
+          <Subheading className={styles.help__path}>Главная/Помощь</Subheading>
+          <div className={styles.help__cats}>
+            <Heading type={HeadingType.NORMAL}>Категории</Heading>
+            <HelpCategories />
+          </div>
+        </div>
+        <div className={styles.help__container}>
+          <Heading type={HeadingType.NORMAL}>Форма возврата</Heading>
+          <FormReturn />
+        </div>
       </div>
-    </div>
+    </WrapperForMainContent>
   )
 }
 
diff --git a/src/pages/RefundsPage/RefundsPage.module.scss b/src/pages/RefundsPage/RefundsPage.module.scss
deleted file mode 100644
index c7ee8a95..00000000
--- a/src/pages/RefundsPage/RefundsPage.module.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@use '../../shared/styles/utils/variables' as var;
-
-.help {
-  align-self: flex-start;
-
-  &__wrapper {
-    display: flex;
-    max-width: 100%;
-    gap: 30px;
-  }
-}
diff --git a/src/pages/RefundsPage/RefundsPage.tsx b/src/pages/RefundsPage/RefundsPage.tsx
deleted file mode 100644
index d5f3007c..00000000
--- a/src/pages/RefundsPage/RefundsPage.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import WrapperForMainContent from '@/components/WrapperForMainContent/WrapperForMainContent'
-import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
-import styles from './RefundsPage.module.scss'
-import HelpPage from '@/pages/HelpPage/HelpPage'
-import FormReturn from '../../components/FormReturn/FormReturn'
-
-const RefundsPage = () => {
-  return (
-    <WrapperForMainContent>
-      <div className={styles.help__wrapper}>
-        <HelpPage />
-        <div>
-          <Heading type={HeadingType.NORMAL}>Форма возврата</Heading>
-          <FormReturn />
-        </div>
-      </div>
-    </WrapperForMainContent>
-  )
-}
-
-export default RefundsPage
diff --git a/src/shared/config/routerConfig/routes.ts b/src/shared/config/routerConfig/routes.ts
index bb8e3d2d..b39b911f 100644
--- a/src/shared/config/routerConfig/routes.ts
+++ b/src/shared/config/routerConfig/routes.ts
@@ -15,7 +15,5 @@ export enum Routes {
   LOGIN = '/login',
   BRANDS = '/brands',
   SEARCH = '/search/:query',
-  INFO_DELIVERY = '/infoDelivery',
-  REFUNDS = '/refunds',
-  CERTIFICATE = '/certificate'
+  HELP = '/help'
 }
diff --git a/src/shared/date/checkDateIsEqual.ts b/src/shared/date/checkDateIsEqual.ts
deleted file mode 100644
index fa2bc588..00000000
--- a/src/shared/date/checkDateIsEqual.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export const checkDateIsEqual = (date1: Date, date2: Date) =>
-  date1.getDate() === date2.getDate() &&
-  date1.getMonth() === date2.getMonth() &&
-  date1.getFullYear() === date2.getFullYear()
diff --git a/src/shared/date/checkIsToday.ts b/src/shared/date/checkIsToday.ts
deleted file mode 100644
index 12f47cb2..00000000
--- a/src/shared/date/checkIsToday.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { checkDateIsEqual } from './checkDateIsEqual'
-
-export const checkIsToday = (date: Date) => {
-  const today = new Date()
-
-  return checkDateIsEqual(today, date)
-}
diff --git a/src/shared/date/createDate.ts b/src/shared/date/createDate.ts
deleted file mode 100644
index 7682260d..00000000
--- a/src/shared/date/createDate.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { getWeekNumber } from './getWeekNumber'
-
-interface CreateDateParams {
-  locale?: string
-  date?: Date
-}
-
-export const createDate = (params?: CreateDateParams) => {
-  const locale = params?.locale ?? 'default'
-
-  const d = params?.date ?? new Date()
-  const dayNumber = d.getDate()
-  const day = d.toLocaleDateString(locale, { weekday: 'long' })
-  const dayNumberInWeek = d.getDay() + 1
-  const dayShort = d.toLocaleDateString(locale, { weekday: 'short' })
-  const year = d.getFullYear()
-  const yearShort = d.toLocaleDateString(locale, { year: '2-digit' })
-  const month = d.toLocaleDateString(locale, { month: 'long' })
-  const monthShort = d.toLocaleDateString(locale, { month: 'short' })
-  const monthNumber = d.getMonth() + 1
-  const monthIndex = d.getMonth()
-  const timestamp = d.getTime()
-  const week = getWeekNumber(d)
-
-  return {
-    date: d,
-    dayNumber,
-    day,
-    dayNumberInWeek,
-    dayShort,
-    year,
-    yearShort,
-    month,
-    monthShort,
-    monthNumber,
-    monthIndex,
-    timestamp,
-    week
-  }
-}
diff --git a/src/shared/date/createMonth.ts b/src/shared/date/createMonth.ts
deleted file mode 100644
index 3b5c8929..00000000
--- a/src/shared/date/createMonth.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { createDate } from './createDate'
-import { getMonthNumberOfDays } from './getMonthNumberOfDays'
-
-interface CreateMonthParams {
-  date?: Date
-  locale?: string
-}
-
-export const createMonth = (params?: CreateMonthParams) => {
-  const date = params?.date ?? new Date()
-  const locale = params?.locale ?? 'default'
-
-  const d = createDate({ date, locale })
-  const { month: monthName, year, monthNumber, monthIndex } = d
-
-  const getDay = (dayNumber: number) => createDate({ date: new Date(year, monthIndex, dayNumber), locale })
-
-  const createMonthDays = () => {
-    const days = []
-
-    for (let i = 0; i <= getMonthNumberOfDays(monthIndex, year) - 1; i += 1) {
-      days[i] = getDay(i + 1)
-    }
-
-    return days
-  }
-
-  return {
-    getDay,
-    monthName,
-    monthIndex,
-    monthNumber,
-    year,
-    createMonthDays
-  }
-}
diff --git a/src/shared/date/createYear.ts b/src/shared/date/createYear.ts
deleted file mode 100644
index 6fda2b47..00000000
--- a/src/shared/date/createYear.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { createDate } from './createDate'
-import { createMonth } from './createMonth'
-
-interface CreateYearParams {
-  year?: number
-  locale?: string
-  monthNumber?: number
-}
-
-export const createYear = (params?: CreateYearParams) => {
-  const locale = params?.locale ?? 'default'
-
-  const monthCount = 12
-  const today = createDate()
-
-  const year = params?.year ?? today.year
-  const monthNumber = params?.monthNumber ?? today.monthNumber
-
-  const month = createMonth({ date: new Date(year, monthNumber - 1), locale })
-
-  const getMonthDays = (monthIndex: number) =>
-    createMonth({ date: new Date(year, monthIndex), locale }).createMonthDays()
-
-  const createYearMonthes = () => {
-    const monthes = []
-
-    for (let i = 0; i <= monthCount - 1; i += 1) {
-      monthes[i] = getMonthDays(i)
-    }
-
-    return monthes
-  }
-
-  return {
-    createYearMonthes,
-    month,
-    year
-  }
-}
diff --git a/src/shared/date/formatDate.ts b/src/shared/date/formatDate.ts
deleted file mode 100644
index 5679b2b5..00000000
--- a/src/shared/date/formatDate.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { createDate } from './createDate'
-
-export const formatDate = (date: Date, format: string) => {
-  const d = createDate({ date })
-
-  return format
-    .replace(/\bYYYY\b/, d.year.toString())
-    .replace(/\bYYY\b/, d.yearShort)
-    .replace(/\bWW\b/, d.week.toString().padStart(2, '0'))
-    .replace(/\bW\b/, d.week.toString())
-    .replace(/\bDDDD\b/, d.day)
-    .replace(/\bDDD\b/, d.dayShort)
-    .replace(/\bDD\b/, d.dayNumber.toString().padStart(2, '0'))
-    .replace(/\bD\b/, d.dayNumber.toString())
-    .replace(/\bMMMM\b/, d.month)
-    .replace(/\bMMM\b/, d.monthShort)
-    .replace(/\bMM\b/, d.monthNumber.toString().padStart(2, '0'))
-    .replace(/\bM\b/, d.monthNumber.toString())
-}
diff --git a/src/shared/date/getMonthNumberOfDays.ts b/src/shared/date/getMonthNumberOfDays.ts
deleted file mode 100644
index 501fb261..00000000
--- a/src/shared/date/getMonthNumberOfDays.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export const getMonthNumberOfDays = (monthIndex: number, yearNumber: number = new Date().getFullYear()) =>
-  new Date(yearNumber, monthIndex + 1, 0).getDate()
diff --git a/src/shared/date/getMonthesNames.ts b/src/shared/date/getMonthesNames.ts
deleted file mode 100644
index 990b9c74..00000000
--- a/src/shared/date/getMonthesNames.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { createDate } from './createDate'
-
-export const getMonthesNames = (locale: string = 'defalut') => {
-  const monthesNames: {
-    month: ReturnType<typeof createDate>['month']
-    monthShort: ReturnType<typeof createDate>['monthShort']
-    monthIndex: ReturnType<typeof createDate>['monthIndex']
-    date: ReturnType<typeof createDate>['date']
-  }[] = Array.from({ length: 12 })
-
-  const d = new Date()
-
-  monthesNames.forEach((_, i) => {
-    const { month, monthIndex, monthShort, date } = createDate({
-      locale,
-      date: new Date(d.getFullYear(), d.getMonth() + i, 1)
-    })
-
-    monthesNames[monthIndex] = { month, monthIndex, monthShort, date }
-  })
-
-  return monthesNames
-}
diff --git a/src/shared/date/getWeekDaysNames.ts b/src/shared/date/getWeekDaysNames.ts
deleted file mode 100644
index 0c9e8ae8..00000000
--- a/src/shared/date/getWeekDaysNames.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { createDate } from './createDate'
-
-export const getWeekDaysNames = (firstWeekDay: number = 4, locale: string = 'default') => {
-  const weekDaysNames: {
-    day: ReturnType<typeof createDate>['day']
-    dayShort: ReturnType<typeof createDate>['dayShort']
-  }[] = Array.from({ length: 7 })
-
-  const date = new Date()
-
-  weekDaysNames.forEach((_, i) => {
-    const { day, dayNumberInWeek, dayShort } = createDate({
-      locale,
-      date: new Date(date.getFullYear(), date.getMonth(), date.getDate() + i)
-    })
-
-    weekDaysNames[dayNumberInWeek - 1] = { day, dayShort }
-  })
-
-  return [...weekDaysNames.slice(firstWeekDay - 1), ...weekDaysNames.slice(0, firstWeekDay - 1)]
-}
diff --git a/src/shared/date/getWeekNumber.ts b/src/shared/date/getWeekNumber.ts
deleted file mode 100644
index 4156be24..00000000
--- a/src/shared/date/getWeekNumber.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export const getWeekNumber = (date: Date) => {
-  const firstDayOfTheYear = new Date(date.getFullYear(), 0, 1)
-  const pastDaysOfYear = (date.getTime() - firstDayOfTheYear.getTime()) / 86400000
-
-  return Math.ceil((pastDaysOfYear + firstDayOfTheYear.getDay() + 1) / 7)
-}
diff --git a/src/shared/date/index.ts b/src/shared/date/index.ts
deleted file mode 100644
index 0ba03bc4..00000000
--- a/src/shared/date/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export * from './createDate'
-export * from './formatDate'
-export * from './getMonthesNames'
-export * from './getWeekDaysNames'
-export * from './getWeekNumber'
-export * from './checkIsToday'
-export * from './createYear'
-export * from './createMonth'
-export * from './getMonthNumberOfDays'
-export * from './checkDateIsEqual'
diff --git a/src/shared/ui/Button/Button.module.scss b/src/shared/ui/Button/Button.module.scss
index b27057b9..4a76797c 100644
--- a/src/shared/ui/Button/Button.module.scss
+++ b/src/shared/ui/Button/Button.module.scss
@@ -48,7 +48,7 @@
 }
 
 .previous {
- background: color.$bg-no-image;
+  background: color.$bg-no-image;
 }
 
 .big {
diff --git a/src/shared/ui/Checkbox/Checkbox.module.scss b/src/shared/ui/Checkbox/Checkbox.module.scss
new file mode 100644
index 00000000..b982cdb3
--- /dev/null
+++ b/src/shared/ui/Checkbox/Checkbox.module.scss
@@ -0,0 +1,32 @@
+@use '../../../shared/styles/utils/variables' as var;
+
+.formReturn {
+  &__checkbox {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    
+    &:first-child {
+      margin-top: 10px;
+    }
+  }
+
+  &__radio {
+    height: 20px;
+    width: 20px;
+    background-color: var.$theme-primary-color;
+    margin: 10px 15px 10px 0;
+    border-color: var.$body-color;
+    cursor: pointer;
+    accent-color: var.$theme-primary-color;
+  }
+}
+
+.primary {
+  accent-color: var.$theme-primary-color;
+}
+
+.medium {
+  height: 20px;
+  width: 20px;
+}
diff --git a/src/shared/ui/Checkbox/Checkbox.stories.tsx b/src/shared/ui/Checkbox/Checkbox.stories.tsx
new file mode 100644
index 00000000..d6d4ce70
--- /dev/null
+++ b/src/shared/ui/Checkbox/Checkbox.stories.tsx
@@ -0,0 +1,38 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { Formik, Form } from 'formik'
+import Checkbox, { CheckboxProps, CheckboxTheme, CheckboxSize } from './Checkbox'
+
+export default {
+  title: 'shared/Checkbox',
+  component: Checkbox,
+  decorators: [
+    Story => (
+      <Formik initialValues={{ myChoice: false }} onSubmit={values => console.log(values)}>
+        <Form>
+          <Story />
+        </Form>
+      </Formik>
+    )
+  ],
+  parameters: {
+    layout: 'centered'
+  },
+  argTypes: {
+    checked: { control: 'boolean' }
+  }
+} as Meta<CheckboxProps>
+
+const Template: StoryObj<CheckboxProps> = {
+  render: args => <Checkbox {...args} />
+}
+
+export const Primary = {
+  ...Template,
+  args: {
+    name: 'Text',
+    value: 'Text',
+    label: 'Text',
+    theme: CheckboxTheme.PRIMARY,
+    size: CheckboxSize.M
+  }
+}
diff --git a/src/shared/ui/Checkbox/Checkbox.tsx b/src/shared/ui/Checkbox/Checkbox.tsx
new file mode 100644
index 00000000..a61d40d4
--- /dev/null
+++ b/src/shared/ui/Checkbox/Checkbox.tsx
@@ -0,0 +1,50 @@
+// Checkbox.tsx
+import { FC } from 'react'
+import { Field, useField } from 'formik'
+import styles from './Checkbox.module.scss'
+import { Input } from '@/shared/ui/Input/Input'
+
+export interface CheckboxProps {
+  name: string
+  value?: string
+  label?: string
+  htmlFor: string
+  theme?: CheckboxTheme
+  size?: CheckboxSize
+}
+
+export enum CheckboxSize {
+  M = 'medium'
+}
+
+export enum CheckboxTheme {
+  PRIMARY = 'primary'
+}
+
+/**
+ * компонент Button
+ * @param {CheckboxTheme} props.theme - тема представления
+ * @param {CheckboxSize} props.size - размер
+ */
+
+const Checkbox: FC<CheckboxProps> = ({ name, value, label, htmlFor }) => {
+  // Используем хук useField для интеграции с Formik
+  const [field] = useField({ name, type: 'radio', value })
+
+  return (
+    <label className={styles.formReturn__checkbox} htmlFor={htmlFor}>
+      <Field
+        checked={field.checked}
+        className={styles.formReturn__radio}
+        as={Input}
+        label={label}
+        name={name}
+        type="radio"
+        value={value}
+      />
+      <span>{label}</span>
+    </label>
+  )
+}
+
+export default Checkbox
diff --git a/src/shared/ui/Label/Label.tsx b/src/shared/ui/Label/Label.tsx
index a473641d..56163a66 100644
--- a/src/shared/ui/Label/Label.tsx
+++ b/src/shared/ui/Label/Label.tsx
@@ -9,6 +9,7 @@ type TLabelProps = React.HTMLAttributes<HTMLElement> & {
 /**
  * @param {string} className - для передачи дополнительных параметров стиля
  */
+
 const Label: FC<TLabelProps> = ({ htmlFor, children, className, ...props }) => {
   return (
     <label htmlFor={htmlFor} className={`${styles.label} ${className}`} {...props}>
diff --git a/src/stories/Button.tsx b/src/stories/Button.tsx
index 9eb7c543..27870cdc 100644
--- a/src/stories/Button.tsx
+++ b/src/stories/Button.tsx
@@ -26,7 +26,13 @@ interface ButtonProps {
 /**
  * Primary UI component for user interaction
  */
-export const Button = ({ primary = false, size = 'medium', backgroundColor, label, ...props }: ButtonProps) => {
+export const Button = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  ...props
+}: ButtonProps) => {
   const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'
   return (
     <button
diff --git a/src/stories/Configure.mdx b/src/stories/Configure.mdx
index a50fcea3..51570900 100644
--- a/src/stories/Configure.mdx
+++ b/src/stories/Configure.mdx
@@ -123,7 +123,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how
           complex.</p>
         <a
-          href="https://storybook.js.org/docs/react/writing-tests/introduction"
+          href="https://storybook.js.org/docs/react/writing-tests"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
diff --git a/src/stories/Header.tsx b/src/stories/Header.tsx
index 9ea3c055..283b158a 100644
--- a/src/stories/Header.tsx
+++ b/src/stories/Header.tsx
@@ -18,7 +18,10 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">
-            <path d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z" fill="#FFF" />
+            <path
+              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+              fill="#FFF"
+            />
             <path d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z" fill="#555AB9" />
             <path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
           </g>
diff --git a/src/stories/Page.tsx b/src/stories/Page.tsx
index 386d4f88..737ba1c3 100644
--- a/src/stories/Page.tsx
+++ b/src/stories/Page.tsx
@@ -29,16 +29,17 @@ export const Page: React.FC = () => {
           process starting with atomic components and ending with pages.
         </p>
         <p>
-          Render pages with mock data. This makes it easy to build and review page states without needing to navigate to
-          them in your app. Here are some handy patterns for managing page data in Storybook:
+          Render pages with mock data. This makes it easy to build and review page states without needing to
+          navigate to them in your app. Here are some handy patterns for managing page data in Storybook:
         </p>
         <ul>
           <li>
-            Use a higher-level connected component. Storybook helps you compose such data from the &rdquo;args&rdquo; of
-            child component stories
+            Use a higher-level connected component. Storybook helps you compose such data from the
+            &rdquo;args&rdquo; of child component stories
           </li>
           <li>
-            Assemble data in the page component from your services. You can mock these services out using Storybook.
+            Assemble data in the page component from your services. You can mock these services out using
+            Storybook.
           </li>
         </ul>
         <p>
diff --git a/src/stories/assets/avif-test-image.avif b/src/stories/assets/avif-test-image.avif
new file mode 100644
index 0000000000000000000000000000000000000000..530709bc1217efa55381695b81007deaababe82d
GIT binary patch
literal 829
zcmZQzU{FXasVqn=%S>Yc0uY^>nP!-qnV9D5Xy^nK`jnemk_eIm0*#E6oFWL5fuSHX
zxdg@r(K(q(Fk|=%GD~v7a*RMyE;A=T8N_p8U|<A75XrzO#lXO%3}kC$X6AwI2FpkR
zIjKw_#XvQQWd?@M`8oMuE3+~SiVA?@-kAl-`9NAEv$!A?q!6f-AA%VK3NkA)K_bi?
z92`K3C$Y@XxsibfBqW@ipHq~VoKwNT1cYo2Kq2wWg4{%q91s8<#=^+d%mQ?kc5X^y
zi4X%9mxPkyg=ZWB0wxMZlURIOnC_Z5R}}Ox2rS~6yI3QtGVQLf^|=eD_FYw3y7u_L
zDJL(n-7H$4G?m9~WAR0;lCP;3?D)-peC~TYV*%sTSF2_k7w1oyxGL&s(W6sGyf;mn
z<u7d!^XK;;ujV=3w?FK^snN-5_S8-E>NMfa2lA)ySt}E;Fo4e`ZA<LmkX!RF{_4s|
z47SkW*mWSjY>}%C)1~T?3<Ei4wUU%CJ;u)_&Wng%`C(D~^eII@K2@~558JwIormtt
zkNXQcc7FN4;d5wW*M<*FT6&UIl}}FJv97;m^UrsI)zpcczxEU>x^wFC+AJ}Nue9fu
zvir!(Rn79mU}yYI%k#VY_lIia#&Cqmew;6H>G9@`!JnLz`M5XLs=f1Se#de~&6LY*
z?)T{y=cZm0mAkxio?7x98>v8>E7Napxg<WhnR&6>H2)t<zgiu*E9ZLfk4S;lZez2u
zmU~HSgf?#eTfZUhXlF`U*W?N54oyG4%+9|mEatP{B!WX<<oe6sDOy}bcRBn^1JaMJ
zH2)swaBT6ahf6mr9bYm>&UW3Z>gKPmQzt$Rjj8IHlYc+iS$yaGH5#esZ`bh1Pk*~L
z@W|5UJuw#lM1xr`eNW`S!ti*#V{LnMj^}B=W|QA%uAaIaB;PV$Z^w;?6E5!A%6Ynp
zZRP51-@kONTEN!P{gb)%_koWOlbsvQelK{^&*b0nX!m1<33uwl1<tZx5xex#vV3)3
LVX~)leC1XE-_k&|

literal 0
HcmV?d00001

diff --git a/src/stories/button.css b/src/stories/button.css
index 40b076cc..dc91dc76 100644
--- a/src/stories/button.css
+++ b/src/stories/button.css
@@ -7,28 +7,23 @@
   display: inline-block;
   line-height: 1;
 }
-
 .storybook-button--primary {
   color: white;
   background-color: #1ea7fd;
 }
-
 .storybook-button--secondary {
   color: #333;
   background-color: transparent;
-  box-shadow: rgb(0 0 0 / 15%) 0 0 0 1px inset;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
 }
-
 .storybook-button--small {
   font-size: 12px;
   padding: 10px 16px;
 }
-
 .storybook-button--medium {
   font-size: 14px;
   padding: 11px 20px;
 }
-
 .storybook-button--large {
   font-size: 16px;
   padding: 12px 24px;
diff --git a/src/stories/header.css b/src/stories/header.css
index a88d6586..d9a70528 100644
--- a/src/stories/header.css
+++ b/src/stories/header.css
@@ -1,6 +1,6 @@
 .storybook-header {
   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  border-bottom: 1px solid rgb(0 0 0 / 10%);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   padding: 15px 20px;
   display: flex;
   align-items: center;
diff --git a/src/components/FormReturn/FormReturn.module.scss b/src/widgets/FormReturn/FormReturn.module.scss
similarity index 57%
rename from src/components/FormReturn/FormReturn.module.scss
rename to src/widgets/FormReturn/FormReturn.module.scss
index 5051c120..600db7e0 100644
--- a/src/components/FormReturn/FormReturn.module.scss
+++ b/src/widgets/FormReturn/FormReturn.module.scss
@@ -15,6 +15,7 @@
   &__label {
     font-size: 12px;
     position: relative;
+    margin-bottom: 20px;
 
     &_date[data-no-star]::before {
       content: '';
@@ -32,10 +33,10 @@
   }
 
   &__radio {
-    min-height: 20px;
-    max-width: 20px;
+    height: 20px;
+    width: 20px;
     background-color: var.$theme-primary-color;
-    margin: 10px 15px 10px 0;
+    margin: 10px 15px 10px 20px;
     border-color: var.$body-color;
     cursor: pointer;
   }
@@ -78,50 +79,4 @@
     display: flex;
     gap: 10px;
   }
-
-  input[type='radio'] {
-    visibility: hidden;
-  }
-
-  &__container {
-    display: flex;
-    flex-direction: column;
-  }
-
-  &__checkbox {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    margin-left: -30px;
-  }
-
-  &__radioCustom {
-    /* Стилизация кастомного элемента радио-кнопки */
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    border: 1px solid var.$body-color-light-grey;
-    margin-right: 10px;
-    position: relative;
-  }
-
-  &__radioCustom::before {
-    /* Стили для индикатора выбора */
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    background-color: transparent;
-    transition: background-color 0.2s;
-  }
-
-  &__radio:checked + &__radioCustom::before {
-    width: 14px;
-    height: 14px;
-    background-color: var.$theme-primary-color;
-  }
 }
diff --git a/src/components/FormReturn/FormReturn.tsx b/src/widgets/FormReturn/FormReturn.tsx
similarity index 57%
rename from src/components/FormReturn/FormReturn.tsx
rename to src/widgets/FormReturn/FormReturn.tsx
index a940461f..4bbccf17 100644
--- a/src/components/FormReturn/FormReturn.tsx
+++ b/src/widgets/FormReturn/FormReturn.tsx
@@ -7,35 +7,52 @@ import classNames from 'classnames'
 import { Textarea } from '@/shared/ui/Textarea/Textarea'
 import { Button, ButtonTheme, ButtonDesign, ButtonSize } from '../../shared/ui/Button/Button'
 import Label from '../../shared/ui/Label/Label'
-import { TypeValues } from './FormReturnType'
+import Checkbox from '../../shared/ui/Checkbox/Checkbox'
 
-function FormReturn() {
-  const initialValues: TypeValues = {
-    name: '',
-    surname: '',
-    email: '',
-    tel: '',
-    numberOrder: '',
-    dateOrder: '',
-    itemInfo: '',
-    model: '',
-    amount: '',
-    textArea: '',
-    myChoice: ''
-  }
+// @TODO: Сверстать форму возврата
+// https://github.com/Studio-Yandex-Practicum/maxboom_frontend/issues/222
 
+export type TFormReturn = {
+  name: string
+  surname: string
+  email: string
+  tel: string
+  numberOrder: string
+  dateOrder: string
+  itemInfo: string
+  model: string
+  amount: string
+  textArea: string
+  myChoice: string
+}
+
+const initialValues: TFormReturn = {
+  name: '',
+  surname: '',
+  email: '',
+  tel: '',
+  numberOrder: '',
+  dateOrder: '',
+  itemInfo: '',
+  model: '',
+  amount: '',
+  textArea: '',
+  myChoice: ''
+}
+
+const FormReturn = () => {
   return (
     <>
       <Formik
         validateOnBlur={true}
         validationSchema={validationSchema}
         enableReinitialize={true}
-        onSubmit={() => {
-          console.log('succes')
+        onSubmit={(values, { setSubmitting }) => {
+          setSubmitting(false)
         }}
         initialValues={initialValues}>
         <Form className={styles.formReturn}>
-          <p>Пожалуйста, заполните форму запроса на возврат товара.</p>
+          <Heading type={HeadingType.SMALL}>Пожалуйста, заполните форму запроса на возврат товара.</Heading>
           <Heading type={HeadingType.SMALL} className={styles.formReturn__title}>
             Информация о заказе
           </Heading>
@@ -147,102 +164,38 @@ function FormReturn() {
           <div className={styles.formReturn__container}>
             <fieldset className={styles.formReturn__label}>
               Причина возврата
-              <label className={styles.formReturn__checkbox}>
-                <Field
-                  className={styles.formReturn__radio}
-                  as={Input}
-                  label="Количество"
-                  name="check"
-                  placeholder="Количество"
-                  type="radio"
-                  value="Другое (другая причина), пожалуйста укажите/приложите подробности"
-                />
-                <div className={styles.formReturn__radioCustom}></div>
-                Другое (другая причина), пожалуйста укажите/приложите подробности
-              </label>
-              <label className={styles.formReturn__checkbox}>
-                <Field
-                  className={styles.formReturn__radio}
-                  as={Input}
-                  label="Количество"
-                  name="check"
-                  placeholder="Количество"
-                  type="radio"
-                  value="Ошибка, пожалуйста укажите/приложите подробности"
-                />
-                <div className={styles.formReturn__radioCustom}></div>
-                Ошибка, пожалуйста укажите/приложите подробности
-              </label>
-              <label className={styles.formReturn__checkbox}>
-                <Field
-                  className={styles.formReturn__radio}
-                  as={Input}
-                  label="Количество"
-                  name="check"
-                  placeholder="Количество"
-                  type="radio"
-                  value="Ошибочный заказ"
-                />
-                <div className={styles.formReturn__radioCustom}></div>
-                Ошибочный заказ
-              </label>
-              <label className={styles.formReturn__checkbox}>
-                <Field
-                  className={styles.formReturn__radio}
-                  as={Input}
-                  label="Количество"
-                  name="check"
-                  placeholder="Количество"
-                  type="radio"
-                  value="Получен не тот (ошибочный) товар"
-                />
-                <div className={styles.formReturn__radioCustom}></div>
-                Получен не тот (ошибочный) товар
-              </label>
-              <label className={styles.formReturn__checkbox}>
-                <Field
-                  className={styles.formReturn__radio}
-                  as={Input}
-                  label="Количество"
-                  name="check"
-                  placeholder="Количество"
-                  type="radio"
-                  value="Получен/доставлен неисправным (сломан)"
-                />
-                <div className={styles.formReturn__radioCustom}></div>
-                Получен/доставлен неисправным (сломан)
-              </label>
+              <Checkbox
+                htmlFor="check"
+                label="Другое (другая причина), пожалуйста укажите/приложите подробности"
+                name="check"
+                value="Другое (другая причина), пожалуйста укажите/приложите подробности"
+              />
+              <Checkbox
+                htmlFor="check"
+                label="Ошибка, пожалуйста укажите/приложите подробности"
+                name="check"
+                value="Ошибка, пожалуйста укажите/приложите подробности"
+              />
+              <Checkbox htmlFor="check" label="Ошибочный заказ" name="check" value="Ошибочный заказ" />
+              <Checkbox
+                htmlFor="check"
+                label="Получен не тот (ошибочный) товар"
+                name="check"
+                value="Получен не тот (ошибочный) товар"
+              />
+              <Checkbox
+                htmlFor="check"
+                label="Получен/доставлен неисправным (сломан)"
+                name="check"
+                value="Получен/доставлен неисправным (сломан)"
+              />
             </fieldset>
           </div>
           <div className={styles.formReturn__container}>
             <fieldset className={styles.formReturn__label}>
               Товар распакован
-              <label className={styles.formReturn__checkbox}>
-                <Field
-                  className={styles.formReturn__radio}
-                  as={Input}
-                  label="Да"
-                  name="myChoice"
-                  placeholder="Да"
-                  type="radio"
-                  value="Да"
-                />
-                <div className={styles.formReturn__radioCustom}></div>
-                Да
-              </label>
-              <label className={styles.formReturn__checkbox}>
-                <Field
-                  className={styles.formReturn__radio}
-                  as={Input}
-                  label="Нет"
-                  name="myChoice"
-                  placeholder="Нет"
-                  type="radio"
-                  value="Нет"
-                />
-                <div className={styles.formReturn__radioCustom}></div>
-                Нет
-              </label>
+              <Checkbox htmlFor="true" label="Да" name="myChoice" value="true" />
+              <Checkbox htmlFor="false" label="Нет" name="myChoice" value="false" />
             </fieldset>
           </div>
           <Label
@@ -257,7 +210,8 @@ function FormReturn() {
               theme={ButtonTheme.PREVIOUS}
               design={ButtonDesign.SQUARE}
               size={ButtonSize.S}
-              className={styles.formReturn__button}>
+              className={styles.formReturn__button}
+              type="button">
               Назад
             </Button>
             <Button
diff --git a/src/components/HelpCategories/HelpCategories.module.scss b/src/widgets/HelpCategories/HelpCategories.module.scss
similarity index 100%
rename from src/components/HelpCategories/HelpCategories.module.scss
rename to src/widgets/HelpCategories/HelpCategories.module.scss
diff --git a/src/components/HelpCategories/HelpCategories.tsx b/src/widgets/HelpCategories/HelpCategories.tsx
similarity index 77%
rename from src/components/HelpCategories/HelpCategories.tsx
rename to src/widgets/HelpCategories/HelpCategories.tsx
index 798aee8f..a830b202 100644
--- a/src/components/HelpCategories/HelpCategories.tsx
+++ b/src/widgets/HelpCategories/HelpCategories.tsx
@@ -5,10 +5,10 @@ const HelpCategories = () => {
   return (
     <>
       <nav className={styles.helpCategories}>
-        <Link to="/infoDelivery" className={styles.helpCategories__item}>
+        <Link to="" className={styles.helpCategories__item}>
           Информация о доставке
         </Link>
-        <Link to="/refunds" className={styles.helpCategories__item}>
+        <Link to="" className={styles.helpCategories__item}>
           Возвраты
         </Link>
         <Link to="" className={styles.helpCategories__item}>

From bdc810bfa3e78af1d0965b67a35ac7df17c1ff6c Mon Sep 17 00:00:00 2001
From: evgeny <evgeny@158.160.8.209>
Date: Thu, 22 Feb 2024 15:14:53 +0300
Subject: [PATCH 04/12] form-return-new-branch

---
 src/widgets/FormReturn/FormReturn.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/widgets/FormReturn/FormReturn.tsx b/src/widgets/FormReturn/FormReturn.tsx
index 4bbccf17..ce317181 100644
--- a/src/widgets/FormReturn/FormReturn.tsx
+++ b/src/widgets/FormReturn/FormReturn.tsx
@@ -10,6 +10,7 @@ import Label from '../../shared/ui/Label/Label'
 import Checkbox from '../../shared/ui/Checkbox/Checkbox'
 
 // @TODO: Сверстать форму возврата
+// Сделал checkbox
 // https://github.com/Studio-Yandex-Practicum/maxboom_frontend/issues/222
 
 export type TFormReturn = {

From 4af2d44aa3c166808717b5a6d659451c1683436a Mon Sep 17 00:00:00 2001
From: evgeny <evgeny@158.160.8.209>
Date: Sun, 25 Feb 2024 21:27:37 +0300
Subject: [PATCH 05/12] =?UTF-8?q?=D0=B8=D1=81=D0=BF=D1=80=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=B8=D0=BB=20=D0=BE=D1=88=D0=B8=D0=B1=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  1 -
 .../DeliveryPage/DeliveryPage.module.scss     | 15 ----------
 src/pages/DeliveryPage/DeliveryPage.tsx       | 19 -------------
 src/pages/HelpPage/HelpPage.tsx               |  6 +++-
 src/shared/model/types/common.ts              | 14 ++++++++++
 src/shared/ui/Checkbox/Checkbox.tsx           | 24 ++++++++++++----
 src/widgets/FormReturn/FormReturn.tsx         | 27 +++++-------------
 src/widgets/HelpCategories/HelpCategories.tsx | 28 ++++++++++---------
 8 files changed, 59 insertions(+), 75 deletions(-)
 delete mode 100644 src/pages/DeliveryPage/DeliveryPage.module.scss
 delete mode 100644 src/pages/DeliveryPage/DeliveryPage.tsx

diff --git a/package.json b/package.json
index db8de4a5..710c27d2 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,6 @@
     "@storybook/blocks": "^7.5.1",
     "@storybook/react": "^7.5.1",
     "@storybook/react-webpack5": "^7.5.1",
-    "@storybook/test": "^7.6.16",
     "@storybook/testing-library": "^0.2.2",
     "@svgr/webpack": "^8.1.0",
     "@types/react": "18.2.20",
diff --git a/src/pages/DeliveryPage/DeliveryPage.module.scss b/src/pages/DeliveryPage/DeliveryPage.module.scss
deleted file mode 100644
index f02ce9b9..00000000
--- a/src/pages/DeliveryPage/DeliveryPage.module.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@use '../../shared/styles/utils/variables' as var;
-
-.help {
-  align-self: flex-start;
-
-  &__wrapper {
-    display: flex;
-    max-width: 100%;
-    gap: 30px;
-  }
-}
-
-.delivery {
-  width: 800px;
-}
diff --git a/src/pages/DeliveryPage/DeliveryPage.tsx b/src/pages/DeliveryPage/DeliveryPage.tsx
deleted file mode 100644
index d0f72fcd..00000000
--- a/src/pages/DeliveryPage/DeliveryPage.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import WrapperForMainContent from '@/components/WrapperForMainContent/WrapperForMainContent'
-import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
-import styles from './DeliveryPage.module.scss'
-import HelpPage from '@/pages/HelpPage/HelpPage'
-
-const DeliveryPage = () => {
-  return (
-    <WrapperForMainContent>
-      <div className={styles.help__wrapper}>
-        <HelpPage />
-        <div className={styles.delivery}>
-          <Heading type={HeadingType.NORMAL}>Информация о доставке</Heading>
-        </div>
-      </div>
-    </WrapperForMainContent>
-  )
-}
-
-export default DeliveryPage
diff --git a/src/pages/HelpPage/HelpPage.tsx b/src/pages/HelpPage/HelpPage.tsx
index 4ef3221f..cf758078 100644
--- a/src/pages/HelpPage/HelpPage.tsx
+++ b/src/pages/HelpPage/HelpPage.tsx
@@ -1,10 +1,14 @@
-import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
 import styles from './HelpPage.module.scss'
+import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
 import Subheading from '@/shared/ui/Subheading/Subheading'
 import HelpCategories from '@/widgets/HelpCategories/HelpCategories'
 import FormReturn from '@/widgets/FormReturn/FormReturn'
 import WrapperForMainContent from '../../components/WrapperForMainContent/WrapperForMainContent'
 
+// @TODO: Сверстать форму возврата
+// Сделал страницу помощи
+// https://github.com/Studio-Yandex-Practicum/maxboom_frontend/issues/222
+
 const HelpPage = () => {
   return (
     <WrapperForMainContent>
diff --git a/src/shared/model/types/common.ts b/src/shared/model/types/common.ts
index 8bab6046..8ec8de7b 100644
--- a/src/shared/model/types/common.ts
+++ b/src/shared/model/types/common.ts
@@ -27,3 +27,17 @@ export type TOrder = {
   productsSumWithoutDiscount: number
   total: number
 }
+
+export type TFormReturn = {
+  name: string
+  surname: string
+  email: string
+  tel: string
+  numberOrder: string
+  dateOrder: string
+  itemInfo: string
+  model: string
+  amount: string
+  textArea: string
+  myChoice: string
+}
diff --git a/src/shared/ui/Checkbox/Checkbox.tsx b/src/shared/ui/Checkbox/Checkbox.tsx
index a61d40d4..72328f8f 100644
--- a/src/shared/ui/Checkbox/Checkbox.tsx
+++ b/src/shared/ui/Checkbox/Checkbox.tsx
@@ -1,8 +1,8 @@
-// Checkbox.tsx
 import { FC } from 'react'
 import { Field, useField } from 'formik'
-import styles from './Checkbox.module.scss'
+import style from './Checkbox.module.scss'
 import { Input } from '@/shared/ui/Input/Input'
+import classNames from 'classnames'
 
 export interface CheckboxProps {
   name: string
@@ -11,6 +11,7 @@ export interface CheckboxProps {
   htmlFor: string
   theme?: CheckboxTheme
   size?: CheckboxSize
+  className?: string
 }
 
 export enum CheckboxSize {
@@ -27,15 +28,26 @@ export enum CheckboxTheme {
  * @param {CheckboxSize} props.size - размер
  */
 
-const Checkbox: FC<CheckboxProps> = ({ name, value, label, htmlFor }) => {
-  // Используем хук useField для интеграции с Formik
+const Checkbox: FC<CheckboxProps> = props => {
+  const {
+    className,
+    value,
+    htmlFor,
+    label,
+    name,
+    theme = CheckboxTheme.PRIMARY,
+    size = CheckboxSize.M
+  } = props
+
+  const additionalClasses = [className, theme && style[theme], style[size]]
+
   const [field] = useField({ name, type: 'radio', value })
 
   return (
-    <label className={styles.formReturn__checkbox} htmlFor={htmlFor}>
+    <label className={style.formReturn__checkbox} htmlFor={htmlFor}>
       <Field
         checked={field.checked}
-        className={styles.formReturn__radio}
+        className={classNames(style.formReturn__radio, additionalClasses)}
         as={Input}
         label={label}
         name={name}
diff --git a/src/widgets/FormReturn/FormReturn.tsx b/src/widgets/FormReturn/FormReturn.tsx
index ce317181..8d79d66e 100644
--- a/src/widgets/FormReturn/FormReturn.tsx
+++ b/src/widgets/FormReturn/FormReturn.tsx
@@ -1,32 +1,19 @@
+import { Field, ErrorMessage, Formik, Form } from 'formik'
+import classNames from 'classnames'
 import styles from './FormReturn.module.scss'
+import { validationSchema } from '@/features/login/model/validation/validation'
 import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
-import { Field, ErrorMessage, Formik, Form } from 'formik'
 import { Input } from '@/shared/ui/Input/Input'
-import { validationSchema } from '../../features/login/model/validation/validation'
-import classNames from 'classnames'
 import { Textarea } from '@/shared/ui/Textarea/Textarea'
-import { Button, ButtonTheme, ButtonDesign, ButtonSize } from '../../shared/ui/Button/Button'
-import Label from '../../shared/ui/Label/Label'
-import Checkbox from '../../shared/ui/Checkbox/Checkbox'
+import { Button, ButtonTheme, ButtonDesign, ButtonSize } from '@/shared/ui/Button/Button'
+import Label from '@/shared/ui/Label/Label'
+import Checkbox from '@/shared/ui/Checkbox/Checkbox'
+import { TFormReturn } from '@/shared/model/types/common'
 
 // @TODO: Сверстать форму возврата
 // Сделал checkbox
 // https://github.com/Studio-Yandex-Practicum/maxboom_frontend/issues/222
 
-export type TFormReturn = {
-  name: string
-  surname: string
-  email: string
-  tel: string
-  numberOrder: string
-  dateOrder: string
-  itemInfo: string
-  model: string
-  amount: string
-  textArea: string
-  myChoice: string
-}
-
 const initialValues: TFormReturn = {
   name: '',
   surname: '',
diff --git a/src/widgets/HelpCategories/HelpCategories.tsx b/src/widgets/HelpCategories/HelpCategories.tsx
index a830b202..3262a355 100644
--- a/src/widgets/HelpCategories/HelpCategories.tsx
+++ b/src/widgets/HelpCategories/HelpCategories.tsx
@@ -1,21 +1,23 @@
 import styles from './HelpCategories.module.scss'
 import Link from '@/shared/ui/Link/Link'
 
+// @TODO: Сверстать форму возврата
+// Сделал sidebar для страницы помощь
+// https://github.com/Studio-Yandex-Practicum/maxboom_frontend/issues/222
+
 const HelpCategories = () => {
   return (
-    <>
-      <nav className={styles.helpCategories}>
-        <Link to="" className={styles.helpCategories__item}>
-          Информация о доставке
-        </Link>
-        <Link to="" className={styles.helpCategories__item}>
-          Возвраты
-        </Link>
-        <Link to="" className={styles.helpCategories__item}>
-          Подарочные сертификаты
-        </Link>
-      </nav>
-    </>
+    <nav className={styles.helpCategories}>
+      <Link to="" className={styles.helpCategories__item}>
+        Информация о доставке
+      </Link>
+      <Link to="" className={styles.helpCategories__item}>
+        Возвраты
+      </Link>
+      <Link to="" className={styles.helpCategories__item}>
+        Подарочные сертификаты
+      </Link>
+    </nav>
   )
 }
 

From 1d7cf037309b01b0570f91a3a52ca7e29e0d3710 Mon Sep 17 00:00:00 2001
From: evgeny <evgeny@158.160.8.209>
Date: Tue, 27 Feb 2024 21:24:05 +0300
Subject: [PATCH 06/12] =?UTF-8?q?=D0=B8=D1=81=D0=BF=D1=80=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=B8=D0=BB=20=D1=87=D0=B0=D1=81=D1=82=D1=8C=20=D0=BE=D1=88?=
 =?UTF-8?q?=D0=B8=D0=B1=D0=BE=D0=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .storybook/decorators/RouterDecorator.js |  7 +++
 .storybook/decorators/StoreDecorator.js  |  7 +++
 .storybook/decorators/StyleDecorator.js  |  3 ++
 .storybook/main.ts                       |  8 +---
 .storybook/preview.ts                    |  6 ++-
 .storybook/webpack.config.js             | 29 ++++++++++++
 src/stories/Configure.mdx                | 58 +++++++++++++-----------
 src/widgets/FormReturn/FormReturn.tsx    | 21 +++++++--
 8 files changed, 100 insertions(+), 39 deletions(-)
 create mode 100644 .storybook/decorators/RouterDecorator.js
 create mode 100644 .storybook/decorators/StoreDecorator.js
 create mode 100644 .storybook/decorators/StyleDecorator.js
 create mode 100644 .storybook/webpack.config.js

diff --git a/.storybook/decorators/RouterDecorator.js b/.storybook/decorators/RouterDecorator.js
new file mode 100644
index 00000000..6a4b694b
--- /dev/null
+++ b/.storybook/decorators/RouterDecorator.js
@@ -0,0 +1,7 @@
+import { BrowserRouter } from 'react-router-dom';
+
+export const RouterDecorator = (story) => (
+  <BrowserRouter>
+    {story()}
+  </BrowserRouter>
+);
diff --git a/.storybook/decorators/StoreDecorator.js b/.storybook/decorators/StoreDecorator.js
new file mode 100644
index 00000000..cb6e3cb8
--- /dev/null
+++ b/.storybook/decorators/StoreDecorator.js
@@ -0,0 +1,7 @@
+import {StoreProvider} from "../../../src/app/providers/StoreProvider/index.ts";
+
+export const StoreDecorator = (initialState) => (Story) =>
+(  <StoreProvider initialState={initialState}>
+    <Story/>
+  </StoreProvider>);
+
diff --git a/.storybook/decorators/StyleDecorator.js b/.storybook/decorators/StyleDecorator.js
new file mode 100644
index 00000000..10e54af2
--- /dev/null
+++ b/.storybook/decorators/StyleDecorator.js
@@ -0,0 +1,3 @@
+import '../../../src/app/styles/index.scss';
+
+export const StyleDecorator = (story) => story();
diff --git a/.storybook/main.ts b/.storybook/main.ts
index 8d876fe2..0ade250f 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -1,7 +1,7 @@
 import type { StorybookConfig } from '@storybook/react-webpack5'
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: ['../../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
@@ -10,11 +10,7 @@ const config: StorybookConfig = {
   ],
   framework: {
     name: '@storybook/react-webpack5',
-    options: {
-      builder: {
-        useSWC: true
-      }
-    }
+    options: {}
   },
   docs: {
     autodocs: 'tag'
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 45771b4e..21ceb3b7 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -1,4 +1,7 @@
 import type { Preview } from '@storybook/react'
+import { StyleDecorator } from './decorators/StyleDecorator'
+import { RouterDecorator } from './decorators/RouterDecorator'
+import { StoreDecorator } from './decorators/StoreDecorator'
 
 const preview: Preview = {
   parameters: {
@@ -9,7 +12,8 @@ const preview: Preview = {
         date: /Date$/i
       }
     }
-  }
+  },
+  decorators: [StyleDecorator, RouterDecorator, StoreDecorator({})]
 }
 
 export default preview
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
new file mode 100644
index 00000000..170287e3
--- /dev/null
+++ b/.storybook/webpack.config.js
@@ -0,0 +1,29 @@
+const { buildCssLoader } = require("../build/loaders/buildCssLoader.cjs");
+const path = require("path");
+const { DefinePlugin } = require("webpack");
+const cssLoader = buildCssLoader(false);
+
+module.exports = ({ config }) => {
+  config.module.rules.push(cssLoader)
+  config.module.rules = config.module.rules.map(rule => {
+    if (/svg/.test(rule.test)) {
+      return { ...rule, exclude: /\.svg$/i };
+    }
+
+    return rule;
+  });
+  config.module.rules.push({
+    test: /\.svg$/,
+    use: ['@svgr/webpack'],
+  });
+  config.resolve.alias['@'] = path.resolve(__dirname, '..', '..', 'src');
+
+  config?.plugins?.push(
+    new DefinePlugin({
+      __API__: JSON.stringify(process.env.APP_HOSTNAME),
+      __IS_DEV__: true,
+    }),
+  );
+
+  return config;
+};
diff --git a/src/stories/Configure.mdx b/src/stories/Configure.mdx
index 51570900..a5780fe5 100644
--- a/src/stories/Configure.mdx
+++ b/src/stories/Configure.mdx
@@ -1,35 +1,36 @@
-import { Meta } from "@storybook/blocks";
-
-import Github from "./assets/github.svg";
-import Discord from "./assets/discord.svg";
-import Youtube from "./assets/youtube.svg";
-import Tutorials from "./assets/tutorials.svg";
-import Styling from "./assets/styling.png";
-import Context from "./assets/context.png";
-import Assets from "./assets/assets.png";
-import Docs from "./assets/docs.png";
-import Share from "./assets/share.png";
-import FigmaPlugin from "./assets/figma-plugin.png";
-import Testing from "./assets/testing.png";
-import Accessibility from "./assets/accessibility.png";
-import Theming from "./assets/theming.png";
-import AddonLibrary from "./assets/addon-library.png";
-
-export const RightArrow = () => <svg 
-    viewBox="0 0 14 14" 
-    width="8px" 
-    height="14px" 
-    style={{ 
+import { Meta } from '@storybook/blocks'
+
+import Github from './assets/github.svg'
+import Discord from './assets/discord.svg'
+import Youtube from './assets/youtube.svg'
+import Tutorials from './assets/tutorials.svg'
+import Styling from './assets/styling.png'
+import Context from './assets/context.png'
+import Assets from './assets/assets.png'
+import Docs from './assets/docs.png'
+import Share from './assets/share.png'
+import FigmaPlugin from './assets/figma-plugin.png'
+import Testing from './assets/testing.png'
+import Accessibility from './assets/accessibility.png'
+import Theming from './assets/theming.png'
+import AddonLibrary from './assets/addon-library.png'
+
+export const RightArrow = () => (
+  <svg
+    viewBox="0 0 14 14"
+    width="8px"
+    height="14px"
+    style={{
       marginLeft: '4px',
       display: 'inline-block',
       shapeRendering: 'inherit',
       verticalAlign: 'middle',
       fill: 'currentColor',
       'path fill': 'currentColor'
-    }}
->
-  <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
-</svg>
+    }}>
+    <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
+  </svg>
+)
 
 <Meta title="Configure your project" />
 
@@ -38,6 +39,7 @@ export const RightArrow = () => <svg
     # Configure your project
 
     Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.
+
   </div>
   <div className="sb-section">
     <div className="sb-section-item">
@@ -84,6 +86,7 @@ export const RightArrow = () => <svg
     # Do more with Storybook
 
     Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.
+
   </div>
 
   <div className="sb-section">
@@ -123,7 +126,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how
           complex.</p>
         <a
-          href="https://storybook.js.org/docs/react/writing-tests"
+          href="https://storybook.js.org/docs/react/writing-tests/introduction"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -203,6 +206,7 @@ export const RightArrow = () => <svg
           target="_blank"
         >Discover tutorials<RightArrow /></a>
     </div>
+
 </div>
 
 <style>
diff --git a/src/widgets/FormReturn/FormReturn.tsx b/src/widgets/FormReturn/FormReturn.tsx
index 8d79d66e..c90a3812 100644
--- a/src/widgets/FormReturn/FormReturn.tsx
+++ b/src/widgets/FormReturn/FormReturn.tsx
@@ -1,6 +1,5 @@
 import { Field, ErrorMessage, Formik, Form } from 'formik'
 import classNames from 'classnames'
-import styles from './FormReturn.module.scss'
 import { validationSchema } from '@/features/login/model/validation/validation'
 import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
 import { Input } from '@/shared/ui/Input/Input'
@@ -9,10 +8,7 @@ import { Button, ButtonTheme, ButtonDesign, ButtonSize } from '@/shared/ui/Butto
 import Label from '@/shared/ui/Label/Label'
 import Checkbox from '@/shared/ui/Checkbox/Checkbox'
 import { TFormReturn } from '@/shared/model/types/common'
-
-// @TODO: Сверстать форму возврата
-// Сделал checkbox
-// https://github.com/Studio-Yandex-Practicum/maxboom_frontend/issues/222
+import styles from './FormReturn.module.scss'
 
 const initialValues: TFormReturn = {
   name: '',
@@ -28,6 +24,21 @@ const initialValues: TFormReturn = {
   myChoice: ''
 }
 
+/**
+ * Форма возврата
+ * @param {string} name - имя
+ * @param {string} surname - фамилия
+ * @param {string} email - почта
+ * @param {string} tel - телефон
+ * @param {string} numberOrder - номер заказа
+ * @param {string} dateOrder - дата заказа
+ * @param {string} itemInfo - наименование товара
+ * @param {string} model - модель товара
+ * @param {string} amount - количество товара
+ * @param {string} textArea - описание дефектов
+ * @param {string} myChoice - распакован ли товар?
+ */
+
 const FormReturn = () => {
   return (
     <>

From 735a8d28c8634eb9e76142adc42d223de0008fdd Mon Sep 17 00:00:00 2001
From: evgeny <evgeny@158.160.8.209>
Date: Thu, 29 Feb 2024 21:14:53 +0300
Subject: [PATCH 07/12] =?UTF-8?q?=D0=B8=D1=81=D0=BF=D1=80=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=B8=D0=BB=20=D0=BE=D1=88=D0=B8=D0=B1=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/model/types/common.ts              |  8 ++++++
 src/shared/ui/Checkbox/Checkbox.stories.tsx   |  9 ++++---
 src/shared/ui/Checkbox/Checkbox.tsx           | 25 ++++++++-----------
 src/widgets/FormReturn/FormReturn.stories.tsx | 16 ++++++++++++
 .../HelpCategories/HelpCategories.stories.tsx | 16 ++++++++++++
 5 files changed, 56 insertions(+), 18 deletions(-)
 create mode 100644 src/widgets/FormReturn/FormReturn.stories.tsx
 create mode 100644 src/widgets/HelpCategories/HelpCategories.stories.tsx

diff --git a/src/shared/model/types/common.ts b/src/shared/model/types/common.ts
index 8ec8de7b..98aa2105 100644
--- a/src/shared/model/types/common.ts
+++ b/src/shared/model/types/common.ts
@@ -20,6 +20,14 @@ export enum ECardView {
   COMPACT = 'compact'
 }
 
+export enum ECheckboxSize {
+  M = 'medium'
+}
+
+export enum ECheckboxTheme {
+  PRIMARY = 'primary'
+}
+
 export type TOrder = {
   amount: number
   productsSum: number
diff --git a/src/shared/ui/Checkbox/Checkbox.stories.tsx b/src/shared/ui/Checkbox/Checkbox.stories.tsx
index d6d4ce70..0c13f94f 100644
--- a/src/shared/ui/Checkbox/Checkbox.stories.tsx
+++ b/src/shared/ui/Checkbox/Checkbox.stories.tsx
@@ -1,6 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react'
 import { Formik, Form } from 'formik'
-import Checkbox, { CheckboxProps, CheckboxTheme, CheckboxSize } from './Checkbox'
+import { Meta, StoryObj } from '@storybook/react'
+import Checkbox, { CheckboxProps } from './Checkbox'
+import { ECheckboxTheme, ECheckboxSize } from '@/shared/model/types/common'
 
 export default {
   title: 'shared/Checkbox',
@@ -32,7 +33,7 @@ export const Primary = {
     name: 'Text',
     value: 'Text',
     label: 'Text',
-    theme: CheckboxTheme.PRIMARY,
-    size: CheckboxSize.M
+    theme: ECheckboxTheme.PRIMARY,
+    size: ECheckboxSize.M
   }
 }
diff --git a/src/shared/ui/Checkbox/Checkbox.tsx b/src/shared/ui/Checkbox/Checkbox.tsx
index 72328f8f..7428b059 100644
--- a/src/shared/ui/Checkbox/Checkbox.tsx
+++ b/src/shared/ui/Checkbox/Checkbox.tsx
@@ -3,29 +3,26 @@ import { Field, useField } from 'formik'
 import style from './Checkbox.module.scss'
 import { Input } from '@/shared/ui/Input/Input'
 import classNames from 'classnames'
+import { ECheckboxTheme, ECheckboxSize } from '@/shared/model/types/common'
 
 export interface CheckboxProps {
   name: string
   value?: string
   label?: string
   htmlFor: string
-  theme?: CheckboxTheme
-  size?: CheckboxSize
+  theme?: ECheckboxTheme
+  size?: ECheckboxSize
   className?: string
 }
 
-export enum CheckboxSize {
-  M = 'medium'
-}
-
-export enum CheckboxTheme {
-  PRIMARY = 'primary'
-}
-
 /**
  * компонент Button
- * @param {CheckboxTheme} props.theme - тема представления
- * @param {CheckboxSize} props.size - размер
+ * @param {string} props.name - имя для привязки к htmlFor
+ * @param {string} props.value - значение выбранного поля
+ * @param {string} props.label - название поля
+ * @param {string} props.htmlFor - для привязки к field
+ * @param {ECheckboxTheme} props.theme - тема представления
+ * @param {ECheckboxSize} props.size - размер
  */
 
 const Checkbox: FC<CheckboxProps> = props => {
@@ -35,8 +32,8 @@ const Checkbox: FC<CheckboxProps> = props => {
     htmlFor,
     label,
     name,
-    theme = CheckboxTheme.PRIMARY,
-    size = CheckboxSize.M
+    theme = ECheckboxTheme.PRIMARY,
+    size = ECheckboxSize.M
   } = props
 
   const additionalClasses = [className, theme && style[theme], style[size]]
diff --git a/src/widgets/FormReturn/FormReturn.stories.tsx b/src/widgets/FormReturn/FormReturn.stories.tsx
new file mode 100644
index 00000000..e8ec8ae0
--- /dev/null
+++ b/src/widgets/FormReturn/FormReturn.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import FormReturn from './FormReturn'
+
+const meta = {
+  title: 'widgets/FormReturn',
+  component: FormReturn,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof FormReturn>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
diff --git a/src/widgets/HelpCategories/HelpCategories.stories.tsx b/src/widgets/HelpCategories/HelpCategories.stories.tsx
new file mode 100644
index 00000000..49089ac5
--- /dev/null
+++ b/src/widgets/HelpCategories/HelpCategories.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import HelpCategories from './HelpCategories'
+
+const meta = {
+  title: 'widgets/HelpCategories',
+  component: HelpCategories,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof HelpCategories>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}

From 870953b700a5ea2225295850ae13fa0c99f47b5f Mon Sep 17 00:00:00 2001
From: evgeny <evgeny@158.160.8.209>
Date: Mon, 4 Mar 2024 21:34:10 +0300
Subject: [PATCH 08/12] =?UTF-8?q?=D1=83=D0=B4=D0=B0=D0=BB=D0=B8=D0=BB=20.s?=
 =?UTF-8?q?torybook?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .storybook/decorators/RouterDecorator.js |  7 ------
 .storybook/decorators/StoreDecorator.js  |  7 ------
 .storybook/decorators/StyleDecorator.js  |  3 ---
 .storybook/main.ts                       | 19 ----------------
 .storybook/preview.ts                    | 19 ----------------
 .storybook/webpack.config.js             | 29 ------------------------
 6 files changed, 84 deletions(-)
 delete mode 100644 .storybook/decorators/RouterDecorator.js
 delete mode 100644 .storybook/decorators/StoreDecorator.js
 delete mode 100644 .storybook/decorators/StyleDecorator.js
 delete mode 100644 .storybook/main.ts
 delete mode 100644 .storybook/preview.ts
 delete mode 100644 .storybook/webpack.config.js

diff --git a/.storybook/decorators/RouterDecorator.js b/.storybook/decorators/RouterDecorator.js
deleted file mode 100644
index 6a4b694b..00000000
--- a/.storybook/decorators/RouterDecorator.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { BrowserRouter } from 'react-router-dom';
-
-export const RouterDecorator = (story) => (
-  <BrowserRouter>
-    {story()}
-  </BrowserRouter>
-);
diff --git a/.storybook/decorators/StoreDecorator.js b/.storybook/decorators/StoreDecorator.js
deleted file mode 100644
index cb6e3cb8..00000000
--- a/.storybook/decorators/StoreDecorator.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import {StoreProvider} from "../../../src/app/providers/StoreProvider/index.ts";
-
-export const StoreDecorator = (initialState) => (Story) =>
-(  <StoreProvider initialState={initialState}>
-    <Story/>
-  </StoreProvider>);
-
diff --git a/.storybook/decorators/StyleDecorator.js b/.storybook/decorators/StyleDecorator.js
deleted file mode 100644
index 10e54af2..00000000
--- a/.storybook/decorators/StyleDecorator.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import '../../../src/app/styles/index.scss';
-
-export const StyleDecorator = (story) => story();
diff --git a/.storybook/main.ts b/.storybook/main.ts
deleted file mode 100644
index 0ade250f..00000000
--- a/.storybook/main.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { StorybookConfig } from '@storybook/react-webpack5'
-
-const config: StorybookConfig = {
-  stories: ['../../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-onboarding',
-    '@storybook/addon-interactions'
-  ],
-  framework: {
-    name: '@storybook/react-webpack5',
-    options: {}
-  },
-  docs: {
-    autodocs: 'tag'
-  }
-}
-export default config
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
deleted file mode 100644
index 21ceb3b7..00000000
--- a/.storybook/preview.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { Preview } from '@storybook/react'
-import { StyleDecorator } from './decorators/StyleDecorator'
-import { RouterDecorator } from './decorators/RouterDecorator'
-import { StoreDecorator } from './decorators/StoreDecorator'
-
-const preview: Preview = {
-  parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i
-      }
-    }
-  },
-  decorators: [StyleDecorator, RouterDecorator, StoreDecorator({})]
-}
-
-export default preview
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
deleted file mode 100644
index 170287e3..00000000
--- a/.storybook/webpack.config.js
+++ /dev/null
@@ -1,29 +0,0 @@
-const { buildCssLoader } = require("../build/loaders/buildCssLoader.cjs");
-const path = require("path");
-const { DefinePlugin } = require("webpack");
-const cssLoader = buildCssLoader(false);
-
-module.exports = ({ config }) => {
-  config.module.rules.push(cssLoader)
-  config.module.rules = config.module.rules.map(rule => {
-    if (/svg/.test(rule.test)) {
-      return { ...rule, exclude: /\.svg$/i };
-    }
-
-    return rule;
-  });
-  config.module.rules.push({
-    test: /\.svg$/,
-    use: ['@svgr/webpack'],
-  });
-  config.resolve.alias['@'] = path.resolve(__dirname, '..', '..', 'src');
-
-  config?.plugins?.push(
-    new DefinePlugin({
-      __API__: JSON.stringify(process.env.APP_HOSTNAME),
-      __IS_DEV__: true,
-    }),
-  );
-
-  return config;
-};

From 8ec67b3fc0e1ac5eec715868ce024210849cfca2 Mon Sep 17 00:00:00 2001
From: evgeny <evgeny@158.160.8.209>
Date: Wed, 6 Mar 2024 19:30:13 +0300
Subject: [PATCH 09/12] 1

---
 src/components/header/header.tsx | 183 -------------------------------
 1 file changed, 183 deletions(-)
 delete mode 100644 src/components/header/header.tsx

diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
deleted file mode 100644
index 95d13c00..00000000
--- a/src/components/header/header.tsx
+++ /dev/null
@@ -1,183 +0,0 @@
-import { coreBaseData } from '@/mockData/coreBaseData'
-import { useEffect, useMemo } from 'react'
-import classNames from 'classnames'
-import Logo from '../../shared/ui/logo/Logo'
-import ArrowIcon from '@/assets/icons/arrow.svg'
-import LightningIcon from '@/assets/images/header/lightning.svg'
-import ContextMenuElement from '../ContextMenuElement/ContextMenuElement'
-import HeaderAccount from '../HeaderAccount/HeaderAccount'
-import { PHONE_NUMBER } from '@/shared/constants/constants'
-import { headerAccountData } from '@/mockData/headerAccountData'
-import CatalogLink from '../CatalogLink/CatalogLink'
-import { Routes } from '@/shared/config/routerConfig/routes'
-import Link from '@/shared/ui/Link/Link'
-import IconCategories from '@/assets/icons/IconCategories.svg'
-import SearchProduct from '@/features/SearchProduct'
-import { linkItems } from '@/mockData/catalogListData'
-import styles from './header.module.scss'
-import { useDispatch, useSelector } from 'react-redux'
-import { fetchCategories } from '@/entities/Category/slice/categorySlice'
-import { AppDispatch } from '@/app/providers/StoreProvider/config/store'
-import { selectCategories, selectDisplayedCategories } from '@/entities/Category/selectors/categorySelectors'
-import CatalogNodeItem from '@/widgets/CatalogNodeItem/CatalogNodeItem'
-import NavigationLink from '@/widgets/NavigationLink/NavigationLink'
-
-function Header() {
-  const dispatch = useDispatch<AppDispatch>()
-  const categories = useSelector(selectCategories)
-  const displayedCategories = useSelector(selectDisplayedCategories)
-
-  const aboutUsNode = useMemo(
-    () => (
-      <ul className={styles['header__context-menu-list']}>
-        <li className={styles['header__context-menu-item']}>
-          <Link to="" className={styles['header__context-menu-link']}>
-            О нас
-          </Link>
-        </li>
-        <li className={styles['header__context-menu-item']}>
-          <Link to="" className={styles['header__context-menu-link']}>
-            Политика безопасности
-          </Link>
-        </li>
-        <li className={styles['header__context-menu-item']}>
-          <Link to="" className={styles['header__context-menu-link']}>
-            Обзоры
-          </Link>
-        </li>
-        <li className={styles['header__context-menu-item']}>
-          <Link to="" className={styles['header__context-menu-link']}>
-            Условия соглашения
-          </Link>
-        </li>
-      </ul>
-    ),
-    []
-  )
-
-  const contactNode = useMemo(
-    () => (
-      <ul className={styles['header__context-menu-list']}>
-        <li className={styles['header__context-menu-item']}>
-          <Link to="" className={styles['header__context-menu-link']}>
-            {PHONE_NUMBER}
-          </Link>
-        </li>
-        <li className={styles['header__context-menu-item']}>
-          <Link to="" className={styles['header__context-menu-link']}>
-            Обратный звонок
-          </Link>
-        </li>
-      </ul>
-    ),
-    []
-  )
-
-  const supportNode = useMemo(
-    () => (
-      <ul className={styles['header__context-menu-list']}>
-        <li className={styles['header__context-menu-item']}>
-          <Link to="" className={styles['header__context-menu-link']}>
-            Информация о доставке
-          </Link>
-        </li>
-
-        <li className={styles['header__context-menu-item']}>
-          <Link to="" className={styles['header__context-menu-link']}>
-            Возвраты
-          </Link>
-        </li>
-        <li className={styles['header__context-menu-item']}>
-          <Link to="" className={styles['header__context-menu-link']}>
-            Подарочные сертификаты
-          </Link>
-        </li>
-      </ul>
-    ),
-    []
-  )
-
-  const catalogNode = useMemo(
-    () => (
-      <ul className={styles['header__context-menu-list']}>
-        {categories.map(category => (
-          <CatalogNodeItem key={category.id} slug={category.slug} name={category.name} />
-        ))}
-      </ul>
-    ),
-    [categories]
-  )
-
-  useEffect(() => {
-    dispatch(fetchCategories())
-  }, [dispatch])
-
-  return (
-    <header className={styles.header}>
-      <div className={styles.header__container}>
-        <div className={styles['header__row-one']}>
-          <nav className={styles.header__nav}>
-            <ul className={styles.header__list}>
-              <li className={styles.header__item}>
-                <ContextMenuElement className={styles.header__item} content={aboutUsNode}>
-                  О нас
-                </ContextMenuElement>
-              </li>
-              {linkItems.map(item => (
-                <NavigationLink key={item.index} label={item.label} to={item.to} />
-              ))}
-              <ContextMenuElement className={styles.header__item} content={supportNode}>
-                <LightningIcon
-                  className={classNames(styles.header__icon, styles.help_icon, styles.header__item)}
-                />
-                <Link className={styles.header__item} to={Routes.HELP}>
-                  Помощь
-                </Link>
-              </ContextMenuElement>
-            </ul>
-            <ContextMenuElement className={styles.header__item} content={contactNode} type="right">
-              <div className={styles['header__phone-wrapper']}>
-                <p className={styles.header__text}>Поддержка</p>
-                <p className={styles.header__item}>{PHONE_NUMBER}</p>
-                <ArrowIcon className={classNames(styles.header__icon, styles.phone_icon)} />
-              </div>
-            </ContextMenuElement>
-          </nav>
-        </div>
-
-        <div className={styles['header__row-two']}>
-          <Logo
-            image={coreBaseData.header.main_logo.image}
-            title={coreBaseData.header.main_logo.title}
-            url={coreBaseData.header.main_logo.url}
-            width="138px"
-            height="46px"
-          />
-          <SearchProduct />
-          <HeaderAccount {...headerAccountData} />
-        </div>
-
-        <div className={styles['header__row-three']}>
-          <ContextMenuElement content={catalogNode}>
-            <CatalogLink to="" className={styles['header__catalog-link_main']}>
-              <div className={styles['header__catalog-wrapper']}>
-                <IconCategories className={styles['header__svg']} />
-                <p className={styles['header__catalog-text']}>Все категории</p>
-              </div>
-            </CatalogLink>
-          </ContextMenuElement>
-
-          <div className={styles['header__tags']}>
-            {displayedCategories.map(category => (
-              <CatalogLink key={category.id} to={`${Routes.CATEGORIES}/${category.slug}`}>
-                {category.name}
-              </CatalogLink>
-            ))}
-          </div>
-        </div>
-      </div>
-    </header>
-  )
-}
-
-export default Header

From 9fef814156c32bb492fb2ffe502a0581b90280b2 Mon Sep 17 00:00:00 2001
From: evgeny <evgeny@158.160.8.209>
Date: Wed, 6 Mar 2024 19:37:45 +0300
Subject: [PATCH 10/12] =?UTF-8?q?=D1=83=D0=B4=D0=B0=D0=BB=D0=B8=D0=BB=20ar?=
 =?UTF-8?q?row.svg=20=D0=BA=D0=B0=D0=BA=20=D0=BA=D0=BE=D0=BD=D1=84=D0=BB?=
 =?UTF-8?q?=D0=B8=D0=BA=D1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/widgets/Footer/icons/arrow.svg | 3 ---
 1 file changed, 3 deletions(-)
 delete mode 100644 src/widgets/Footer/icons/arrow.svg

diff --git a/src/widgets/Footer/icons/arrow.svg b/src/widgets/Footer/icons/arrow.svg
deleted file mode 100644
index 9c226f2f..00000000
--- a/src/widgets/Footer/icons/arrow.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg viewBox="0 0 5 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.8003 9.11849C4.53403 9.38475 4.10233 9.38475 3.83606 9.11849L0.1997 5.48212C-0.0665664 5.21586 -0.0665664 4.78415 0.1997 4.51789L3.83606 0.881524C4.10233 0.615257 4.53403 0.615257 4.8003 0.881524C5.06657 1.14779 5.06657 1.57949 4.8003 1.84576L1.64605 5.00001L4.8003 8.15425C5.06657 8.42052 5.06657 8.85222 4.8003 9.11849Z" fill="#93B1FF"/>
-</svg>

From 359e27d62057bf51e20d2317729afbac03cf5db0 Mon Sep 17 00:00:00 2001
From: evgeny <evgeny@158.160.8.209>
Date: Wed, 6 Mar 2024 22:12:04 +0300
Subject: [PATCH 11/12] =?UTF-8?q?=D0=B8=D1=81=D0=BF=D1=80=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=B8=D0=BB=20=D0=BA=D0=BE=D0=BD=D1=84=D0=BB=D0=B8=D0=BA=D1=82?=
 =?UTF-8?q?=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .storybook/main.ts                            | 23 +++++++++++++++
 .storybook/preview.ts                         | 15 ++++++++++
 package.json                                  |  1 +
 src/app/router/AppRouter/ui/AppRouter.tsx     |  4 +++
 src/pages/HelpPage/HelpPage.tsx               |  8 ++---
 src/stories/Configure.mdx                     |  2 +-
 src/widgets/HelpCategories/HelpCategories.tsx | 29 +++++++++----------
 7 files changed, 61 insertions(+), 21 deletions(-)
 create mode 100644 .storybook/main.ts
 create mode 100644 .storybook/preview.ts

diff --git a/.storybook/main.ts b/.storybook/main.ts
new file mode 100644
index 00000000..8d876fe2
--- /dev/null
+++ b/.storybook/main.ts
@@ -0,0 +1,23 @@
+import type { StorybookConfig } from '@storybook/react-webpack5'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions'
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {
+      builder: {
+        useSWC: true
+      }
+    }
+  },
+  docs: {
+    autodocs: 'tag'
+  }
+}
+export default config
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
new file mode 100644
index 00000000..45771b4e
--- /dev/null
+++ b/.storybook/preview.ts
@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/react'
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i
+      }
+    }
+  }
+}
+
+export default preview
diff --git a/package.json b/package.json
index 27e246a6..342a57a6 100644
--- a/package.json
+++ b/package.json
@@ -57,6 +57,7 @@
     "@storybook/blocks": "^7.5.1",
     "@storybook/react": "^7.5.1",
     "@storybook/react-webpack5": "^7.5.1",
+    "@storybook/test": "^7.6.16",
     "@storybook/testing-library": "^0.2.2",
     "@svgr/webpack": "^8.1.0",
     "@types/react": "18.2.20",
diff --git a/src/app/router/AppRouter/ui/AppRouter.tsx b/src/app/router/AppRouter/ui/AppRouter.tsx
index d67aa1be..69923893 100644
--- a/src/app/router/AppRouter/ui/AppRouter.tsx
+++ b/src/app/router/AppRouter/ui/AppRouter.tsx
@@ -109,6 +109,10 @@ export const AppRouter = createBrowserRouter([
         path: Routes.PRODUCT,
         element: <ProductPage />
       }
+      /*       {
+        path: Routes.CERTIFICATE,
+        element: <Certificate />
+      } */
     ]
   }
 ])
diff --git a/src/pages/HelpPage/HelpPage.tsx b/src/pages/HelpPage/HelpPage.tsx
index cf758078..b0ba2467 100644
--- a/src/pages/HelpPage/HelpPage.tsx
+++ b/src/pages/HelpPage/HelpPage.tsx
@@ -1,13 +1,11 @@
-import styles from './HelpPage.module.scss'
 import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
 import Subheading from '@/shared/ui/Subheading/Subheading'
-import HelpCategories from '@/widgets/HelpCategories/HelpCategories'
 import FormReturn from '@/widgets/FormReturn/FormReturn'
+import HelpCategories from '@/widgets/HelpCategories/HelpCategories'
+
 import WrapperForMainContent from '../../components/WrapperForMainContent/WrapperForMainContent'
 
-// @TODO: Сверстать форму возврата
-// Сделал страницу помощи
-// https://github.com/Studio-Yandex-Practicum/maxboom_frontend/issues/222
+import styles from './HelpPage.module.scss'
 
 const HelpPage = () => {
   return (
diff --git a/src/stories/Configure.mdx b/src/stories/Configure.mdx
index a5780fe5..428ccb8d 100644
--- a/src/stories/Configure.mdx
+++ b/src/stories/Configure.mdx
@@ -126,7 +126,7 @@ export const RightArrow = () => (
         <p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how
           complex.</p>
         <a
-          href="https://storybook.js.org/docs/react/writing-tests/introduction"
+          href="https://storybook.js.org/docs/react/writing-tests"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
diff --git a/src/widgets/HelpCategories/HelpCategories.tsx b/src/widgets/HelpCategories/HelpCategories.tsx
index 3262a355..d47da993 100644
--- a/src/widgets/HelpCategories/HelpCategories.tsx
+++ b/src/widgets/HelpCategories/HelpCategories.tsx
@@ -1,23 +1,22 @@
-import styles from './HelpCategories.module.scss'
 import Link from '@/shared/ui/Link/Link'
 
-// @TODO: Сверстать форму возврата
-// Сделал sidebar для страницы помощь
-// https://github.com/Studio-Yandex-Practicum/maxboom_frontend/issues/222
+import styles from './HelpCategories.module.scss'
 
 const HelpCategories = () => {
   return (
-    <nav className={styles.helpCategories}>
-      <Link to="" className={styles.helpCategories__item}>
-        Информация о доставке
-      </Link>
-      <Link to="" className={styles.helpCategories__item}>
-        Возвраты
-      </Link>
-      <Link to="" className={styles.helpCategories__item}>
-        Подарочные сертификаты
-      </Link>
-    </nav>
+    <>
+      <nav className={styles.helpCategories}>
+        <Link to="" className={styles.helpCategories__item}>
+          Информация о доставке
+        </Link>
+        <Link to="" className={styles.helpCategories__item}>
+          Возвраты
+        </Link>
+        <Link to="" className={styles.helpCategories__item}>
+          Подарочные сертификаты
+        </Link>
+      </nav>
+    </>
   )
 }
 

From dc307a2ada1132b5e5ced6370a087ed610ca6797 Mon Sep 17 00:00:00 2001
From: evgeny <evgeny@158.160.8.209>
Date: Wed, 6 Mar 2024 22:27:37 +0300
Subject: [PATCH 12/12] =?UTF-8?q?=D0=B8=D1=81=D0=BF=D1=80=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=B8=D0=BB=20=D0=BA=D0=BE=D0=BD=D1=84=D0=BB=D0=B8=D0=BA=D1=82?=
 =?UTF-8?q?=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .storybook/main.ts    | 23 -----------------------
 .storybook/preview.ts | 15 ---------------
 2 files changed, 38 deletions(-)
 delete mode 100644 .storybook/main.ts
 delete mode 100644 .storybook/preview.ts

diff --git a/.storybook/main.ts b/.storybook/main.ts
deleted file mode 100644
index 8d876fe2..00000000
--- a/.storybook/main.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import type { StorybookConfig } from '@storybook/react-webpack5'
-
-const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-onboarding',
-    '@storybook/addon-interactions'
-  ],
-  framework: {
-    name: '@storybook/react-webpack5',
-    options: {
-      builder: {
-        useSWC: true
-      }
-    }
-  },
-  docs: {
-    autodocs: 'tag'
-  }
-}
-export default config
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
deleted file mode 100644
index 45771b4e..00000000
--- a/.storybook/preview.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { Preview } from '@storybook/react'
-
-const preview: Preview = {
-  parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i
-      }
-    }
-  }
-}
-
-export default preview