From 60a50518829225441e7e371972a7135786e6030b Mon Sep 17 00:00:00 2001 From: Alexander Morugin Date: Fri, 19 Apr 2024 15:45:57 +0300 Subject: [PATCH 1/2] enhancement_310_fix_routing_to_form_return_page --- src/app/router/AppRouter/ui/AppRouter.tsx | 5 + .../FormReturnPage/FormReturnPage.module.scss | 50 ++++ src/pages/FormReturnPage/FormReturnPage.tsx | 33 ++ src/shared/config/routerConfig/routes.ts | 2 +- .../ui/Breadcrumbs/Breadcrumbs.module.scss | 2 +- .../model/validation/validation.ts | 2 +- .../ui/FormBuyGiftCertificate.module.scss | 14 +- .../ui/FormBuyGiftCertificate.tsx | 1 + src/widgets/FormReturn/model/types/types.ts | 11 +- .../FormReturn/model/validation/validation.ts | 28 +- .../FormReturn/ui/FormReturn.module.scss | 95 +++--- src/widgets/FormReturn/ui/FormReturn.tsx | 282 +++++++++++------- src/widgets/Header/Header.tsx | 2 +- 13 files changed, 353 insertions(+), 174 deletions(-) create mode 100644 src/pages/FormReturnPage/FormReturnPage.module.scss create mode 100644 src/pages/FormReturnPage/FormReturnPage.tsx diff --git a/src/app/router/AppRouter/ui/AppRouter.tsx b/src/app/router/AppRouter/ui/AppRouter.tsx index 5de57156..b465af84 100644 --- a/src/app/router/AppRouter/ui/AppRouter.tsx +++ b/src/app/router/AppRouter/ui/AppRouter.tsx @@ -9,6 +9,7 @@ import ContactsPage from '@/pages/ContactsPage/ContactsPage' 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' @@ -105,6 +106,10 @@ export const AppRouter = createBrowserRouter([ path: Routes.TERMS, element: // временная заглушка нужна страница с условиями соглашения }, + { + path: Routes.ADD_RETURN, + element: + }, { path: Routes.VOUCHERS, element: diff --git a/src/pages/FormReturnPage/FormReturnPage.module.scss b/src/pages/FormReturnPage/FormReturnPage.module.scss new file mode 100644 index 00000000..a5c1d6c0 --- /dev/null +++ b/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 0; + + &__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; + } + } +} + + diff --git a/src/pages/FormReturnPage/FormReturnPage.tsx b/src/pages/FormReturnPage/FormReturnPage.tsx new file mode 100644 index 00000000..520c7ac9 --- /dev/null +++ b/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 ( + +
+
+ + Возврат товара + + +
+
+
Burger menu
+ +
+
+ + ) +} + +export default FormReturnPage diff --git a/src/shared/config/routerConfig/routes.ts b/src/shared/config/routerConfig/routes.ts index ba258ec5..21928c16 100644 --- a/src/shared/config/routerConfig/routes.ts +++ b/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', diff --git a/src/shared/ui/Breadcrumbs/Breadcrumbs.module.scss b/src/shared/ui/Breadcrumbs/Breadcrumbs.module.scss index 861bec5d..08c7b456 100644 --- a/src/shared/ui/Breadcrumbs/Breadcrumbs.module.scss +++ b/src/shared/ui/Breadcrumbs/Breadcrumbs.module.scss @@ -6,4 +6,4 @@ .link { color: var.$subtitle-color; -} \ No newline at end of file +} diff --git a/src/widgets/FormBuyGiftCertificate/model/validation/validation.ts b/src/widgets/FormBuyGiftCertificate/model/validation/validation.ts index 1c50006a..5efa6daa 100644 --- a/src/widgets/FormBuyGiftCertificate/model/validation/validation.ts +++ b/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('Введите электронную почту') diff --git a/src/widgets/FormBuyGiftCertificate/ui/FormBuyGiftCertificate.module.scss b/src/widgets/FormBuyGiftCertificate/ui/FormBuyGiftCertificate.module.scss index bf369359..cb7bee5a 100644 --- a/src/widgets/FormBuyGiftCertificate/ui/FormBuyGiftCertificate.module.scss +++ b/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; + } } diff --git a/src/widgets/FormBuyGiftCertificate/ui/FormBuyGiftCertificate.tsx b/src/widgets/FormBuyGiftCertificate/ui/FormBuyGiftCertificate.tsx index 1b893b63..d773af9a 100644 --- a/src/widgets/FormBuyGiftCertificate/ui/FormBuyGiftCertificate.tsx +++ b/src/widgets/FormBuyGiftCertificate/ui/FormBuyGiftCertificate.tsx @@ -167,6 +167,7 @@ const FormBuyGiftCertificate = () => {
{ return ( - <> - { - setSubmitting(false) - }} - initialValues={initialValues}> -
- Пожалуйста, заполните форму запроса на возврат товара. - + { + console.log(JSON.stringify(values, null, 2)) + setSubmitting(false) + resetForm() + }}> + {({ isSubmitting }) => ( + + + Пожалуйста, заполните форму запроса на возврат товара. + + Информация о заказе -