Merge pull request #325 from Studio-Yandex-Practicum/enhancement_310_…

…fix_routing_to_form_return_page

enhancement_310_fix_routing_to_form_return_page

src/app/router/AppRouter/ui/AppRouter.tsx

@@ -10,6 +10,7 @@ import DeliveryPage from '@/pages/DeliveryPage/DeliveryPage'
 import ErrorPage from '@/pages/ErrorPage/ErrorPage'
 import FavoritesPage from '@/pages/FavoritesPage/FavoritesPage'
 import { FeedbackPage } from '@/pages/FeedbackPage/FeedbackPage'
+import FormReturnPage from '@/pages/FormReturnPage/FormReturnPage'
 import HelpPage from '@/pages/HelpPage/HelpPage'
 import LoginPage from '@/pages/LoginPage/LoginPage'
 import MainPage from '@/pages/MainPage/MainPage'
@@ -106,6 +107,10 @@ export const AppRouter = createBrowserRouter([
         path: Routes.TERMS,
         element: <ProductsPage /> // временная заглушка нужна страница с условиями соглашения
       },
+      {
+        path: Routes.ADD_RETURN,
+        element: <FormReturnPage />
+      },
       {
         path: Routes.VOUCHERS,
         element: <VouchersPage />

src/pages/FormReturnPage/FormReturnPage.module.scss

@@ -0,0 +1,50 @@
+@use '../../shared/styles/utils/mixins' as media;
+
+.formReturn {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  width: 100%;
+  padding: 0 0 56px;
+
+  &__titleBox {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  &__title {
+    width: 100%;
+  }
+
+  &__mainBox {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 20px;
+
+    @include media.respond-to('middle') {
+      flex-direction: column;
+      gap: 10px;
+    }
+  }
+
+  &__burger {
+    position: sticky;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    top: 20px;
+    width: 342px;
+    height: 255px;
+    border-radius: 10px;
+    border: 2px solid red;
+
+    @include media.respond-to('middle') {
+      width: 240px;
+      height: 48px;
+    }
+  }
+}
+
+

src/pages/FormReturnPage/FormReturnPage.tsx

@@ -0,0 +1,33 @@
+import WrapperForMainContent from '@/components/WrapperForMainContent/WrapperForMainContent'
+import Breadcrumbs from '@/shared/ui/Breadcrumbs/Breadcrumbs'
+import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
+import FormReturn from '@/widgets/FormReturn'
+
+import styles from './FormReturnPage.module.scss'
+
+const links = [
+  { heading: 'Главная', href: '/' },
+  { heading: 'Личный Кабинет', href: '/login' },
+  { heading: 'Возврат товара', href: '' }
+]
+
+const FormReturnPage = () => {
+  return (
+    <WrapperForMainContent>
+      <section className={styles.formReturn}>
+        <div className={styles.formReturn__titleBox}>
+          <Heading type={HeadingType.MAIN} className={styles.formReturn__title}>
+            Возврат товара
+          </Heading>
+          <Breadcrumbs links={links} />
+        </div>
+        <div className={styles.formReturn__mainBox}>
+          <div className={styles.formReturn__burger}>Burger menu</div>
+          <FormReturn />
+        </div>
+      </section>
+    </WrapperForMainContent>
+  )
+}
+
+export default FormReturnPage

src/shared/config/routerConfig/routes.ts

@@ -1,6 +1,6 @@
 export enum Routes {
   ABOUT = '/about',
-  ADD_RETURN = '/add-return', // в личном кабинете
+  ADD_RETURN = '/add-return',
   BLOG = '/blog',
   BRANDS = '/brands',
   CART = '/cart',

src/widgets/FormBuyGiftCertificate/model/validation/validation.ts

@@ -10,7 +10,7 @@ export const validationSchema = Yup.object().shape({
     .email('Укажите корректный адрес электронной почты'),
   name: Yup.string()
     .required('Введите имя')
-    .min(6, 'Минимальная длина имени 6 символов')
+    .min(2, 'Минимальная длина имени 6 символов')
     .max(64, 'Максимальная длина имени 64 символа'),
   email: Yup.string()
     .required('Введите электронную почту')

src/widgets/FormBuyGiftCertificate/ui/FormBuyGiftCertificate.module.scss

@@ -62,28 +62,28 @@
 
   &__error {
     position: absolute;
-    top: 75px;
+    top: 72px;
     left: 17px;
     font-size: 12px;
     font-weight: 100;
     color: var.$promo-color;
 
     &_textarea {
-      top: 215px;
+      top: 212px;
     }
 
     &_radio {
-      top: 145px;
+      top: 140px;
     }
 
     &_checkbox {
-      top: 38px;
+      top: 30px;
       left: 35px;
     }
   }
 
   &__radio {
-    margin: 0 15px 10px 0;
+    width: 20px;
   }
 
   &__checkbox {
@@ -93,4 +93,8 @@
     color: var.$body-color;
     margin: 0 0 10px;
   }
+
+  &__check {
+    width: 20px;
+  }
 }

src/widgets/FormBuyGiftCertificate/ui/FormBuyGiftCertificate.tsx

@@ -167,6 +167,7 @@ const FormBuyGiftCertificate = () => {
 
           <fieldset className={styles.form__checkbox}>
             <Checkbox
+              className={styles.form__check}
               htmlFor="checkbox"
               label="Я уведомлен, что подарочные сертификаты не подлежат возврату."
               name="checkbox"

src/widgets/FormReturn/model/types/types.ts

@@ -3,11 +3,12 @@ export interface IFormReturn {
   surname: string
   email: string
   tel: string
-  numberOrder: string
-  dateOrder: string
-  itemInfo: string
+  orderNumber: string
+  orderDate: string
+  itemName: string
   model: string
-  amount: string
+  quantity: number
+  reasons: string
+  unpacked: string
   textArea: string
-  myChoice: string
 }

src/widgets/FormReturn/model/validation/validation.ts

@@ -1,26 +1,30 @@
 import * as Yup from 'yup'
 
 export const validationSchema = Yup.object().shape({
-  email: Yup.string()
-    .required('Введите электронную почту')
-    .email('Укажите корректный адрес электронной почты'),
-  password: Yup.string()
-    .required('Введите пароль')
-    .min(6, 'Минимальная длина пароля 6 символов') // поменял для тестового юзера
-    .max(64, 'Максимальная длина пароля 64 символа'),
   name: Yup.string()
     .required('Введите имя')
-    .min(6, 'Минимальная длина имени 6 символов')
+    .min(2, 'Минимальная длина имени 6 символов')
     .max(64, 'Максимальная длина имени 64 символа'),
   surname: Yup.string()
     .required('Введите фамилию')
     .min(1, 'Минимальная длина фамилии 1 символ')
     .max(64, 'Максимальная длина фамилии 64 символа'),
+  email: Yup.string()
+    .required('Введите электронную почту')
+    .email('Укажите корректный адрес электронной почты'),
   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('Введите название модели')
+  orderNumber: Yup.string().required('Введите номер заказа'),
+  orderDate: Yup.string().required('Введите дату заказа'),
+  itemName: Yup.string().required('Введите наименование товара'),
+  model: Yup.string().required('Введите название модели'),
+  quantity: Yup.number()
+    .required('Введите количество')
+    .min(1, 'Количество должно быть не менее 1')
+    .typeError('Количество указывается только цифрами'),
+  reasons: Yup.string().required('Выберите причину возврата'),
+  textArea: Yup.string()
+    .min(10, 'Длина текста должна быть от 10 символов')
+    .max(300, 'Длина текста должна быть до 300 символов')
 })

src/widgets/FormReturn/ui/FormReturn.module.scss

@@ -1,25 +1,47 @@
 @use '@/shared/styles/utils/variables' as var;
 
-.formReturn {
-  margin-top: 45px;
-  width: 800px;
-  padding: 40px 30px 65px;
-  align-items: flex-start;
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
   border-radius: 10px;
-  background: var.$white;
+  background-color: var.$white;
+  margin: 0 0 20px;
+  padding: 25px 30px 20px;
+
+  &__paragraph {
+    margin: 0 0 10px;
+    padding: 0;
+  }
 
   &__title {
-    margin: 15px 0;
+    margin-bottom: 20px;
+
+    &_second {
+      margin-top: 20px;
+    }
   }
 
   &__label {
-    font-size: 12px;
-    position: relative;
-    margin-bottom: 20px;
+    margin: 0 0 20px;
+    padding: 0;
 
     &_date[data-no-star]::before {
       content: '';
     }
+
+    &_reasons {
+      margin-bottom: 10px;
+    }
+
+    &_unpacked {
+      margin-top: 10px;
+    }
+
+    &_textArea {
+      margin-bottom: 40px;
+    }
   }
 
   &__label::before {
@@ -32,21 +54,16 @@
     }
   }
 
-  &__radio {
-    height: 20px;
-    width: 20px;
-    background-color: var.$theme-primary-color;
-    margin: 10px 15px 10px 20px;
-    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;
+    border-radius: 10px;
+    margin: 5px 0 0;
+    padding: 10px 16px;
+
+    &_textArea {
+      min-height: 180px;
+    }
   }
 
   &__input:focus {
@@ -55,29 +72,29 @@
   }
 
   &__error {
+    position: absolute;
+    top: 72px;
+    left: 17px;
+    font-size: 12px;
+    font-weight: 100;
     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;
-    width: 100%;
+    &_textarea {
+      top: 212px;
+    }
+
+    &_reasons {
+      top: 250px;
+    }
   }
 
-  &__textarea:focus {
-    border: 2px solid var.$theme-primary-color;
-    transition: 0.7s;
+  &__radio {
+    width: 20px;
+    margin-top: 5px;
   }
 
-  &__buttonContainer {
+  &__buttons {
     display: flex;
-    gap: 10px;
+    gap: 20px;
   }
 }