Merge pull request #407 from Studio-Yandex-Practicum/enhancement-365-…

…create-SubscriptionPage

#365-enhancement-create-SubscriptionPage

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

@@ -23,6 +23,7 @@ import { ProductsPage } from '@/pages/ProductsPage/ProductsPage'
 import { ReviewsPage } from '@/pages/ReviewsPage/ReviewsPage'
 import RootPage from '@/pages/RootPage/RootPage'
 import SearchResultsPage from '@/pages/SearchResultsPage/SearchResultsPage'
+import SubscriptionPage from '@/pages/SubscriptionPage/SubscriptionPage'
 import ShopNewsPage from '@/pages/ShopNewsPage/ShopNewsPage'
 import { TermsPage } from '@/pages/TermsPage/TermsPage'
 import VouchersPage from '@/pages/VouchersPage/VouchersPage'
@@ -144,6 +145,10 @@ export const AppRouter = createBrowserRouter([
         path: Routes.REGISTRATION,
         element: <CreateAccountPage />
       },
+      {
+        path: Routes.NEWSLETTER,
+        element: <SubscriptionPage />
+      },
       {
         path: Routes.SUBSCRIBE,
         element: <CreateAccountPage /> //TODO реалзиовать страницу подписки

src/pages/SubscriptionPage/SubscriptionPage.module.scss

@@ -0,0 +1,22 @@
+@use '@/shared/styles/utils/mixins' as media;
+
+.info {
+    display:flex;
+    margin-top: 20px;
+    column-gap: 20px;
+
+    @include media.respond-to('large') {
+        flex-direction: column;
+        row-gap: 10px;
+      }    
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+.heading {
+    margin-bottom: 10px;
+}

src/pages/SubscriptionPage/SubscriptionPage.tsx

@@ -0,0 +1,70 @@
+import { Suspense, useState } from 'react'
+
+import SideBarMenuModal from '@/features/SideBarMenuModal'
+import { useResize } from '@/shared/libs/hooks/useResize'
+import Breadcrumbs from '@/shared/ui/Breadcrumbs/Breadcrumbs'
+import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
+import Modal from '@/shared/ui/Modal/Modal'
+import Spinner from '@/shared/ui/Spinner/Spinner'
+import DistributionForm from '@/widgets/DistributionForm/ui/DistributionForm'
+import { withAdaptiveSideBar } from '@/widgets/SideBarMenu'
+
+import WrapperForMainContent from '../../components/WrapperForMainContent/WrapperForMainContent'
+
+import styles from './SubscriptionPage.module.scss'
+
+const links = [
+  { heading: 'Главная', href: '/' },
+  { heading: 'Личный Кабинет', href: '/account' },
+  { heading: 'Рассылка', href: '' }
+]
+
+const SubscriptionPage = () => {
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false)
+  const [isModalClosing, setIsModalClosing] = useState<boolean>(false)
+  const { isScreenLg } = useResize()
+  const AdaptiveSideBar = withAdaptiveSideBar(isScreenLg)
+
+  const changeModalState = () => {
+    setIsModalOpen(!isModalOpen)
+  }
+
+  const handleClick = () => {
+    setIsModalOpen(true)
+  }
+
+  const closeModal = () => {
+    setIsModalClosing(true)
+  }
+
+  return (
+    <>
+      {isModalOpen && (
+        <Modal
+          isModalOpen={isModalOpen}
+          onClose={changeModalState}
+          isModalClosing={isModalClosing}
+          setIsModalClosing={setIsModalClosing}>
+          <Suspense fallback={<Spinner />}>
+            <SideBarMenuModal handleClose={closeModal} />
+          </Suspense>
+        </Modal>
+      )}
+
+      <WrapperForMainContent>
+        <div className={styles.container}>
+          <Heading type={HeadingType.MEDIUM} className={styles.heading}>
+            Подписка на новости
+          </Heading>
+          <Breadcrumbs links={links}></Breadcrumbs>
+          <div className={styles.info}>
+            <AdaptiveSideBar handleClick={handleClick} />
+            <DistributionForm></DistributionForm>
+          </div>
+        </div>
+      </WrapperForMainContent>
+    </>
+  )
+}
+
+export default SubscriptionPage

src/shared/config/routerConfig/routes.ts

@@ -30,6 +30,7 @@ export enum Routes {
   FORGOT_PASSWORD = '/forgot-password',
   REGISTRATION = '/registration',
   SUBSCRIBE = '/subscribe',
+  NEWSLETTER = '/newsletter',
   ERROR = '*',
   SHOP_NEWS = '/shopnews'
 }

src/widgets/AccountSubscribe/AccountSubscribe.tsx

@@ -14,7 +14,7 @@ import styles from './AccountSubscribe.module.scss'
 export const AccountSubscribe: FC = () => {
   return (
     <section className={styles.accountSubscribe}>
-      <Link to={Routes.SUBSCRIBE} className={styles.accountSubscribe__content}>
+      <Link to={Routes.NEWSLETTER} className={styles.accountSubscribe__content}>
         <div>
           <IconEnvelop className={styles.accountSubscribe__icon} />
           <Paragraph className={styles.accountSubscribe__title}>Подписка</Paragraph>

src/widgets/DistributionForm/modal/types.ts

@@ -0,0 +1,3 @@
+export interface IDistributionForm {
+  subscription: string
+}

src/widgets/DistributionForm/ui/DistributionForm.module.scss

@@ -0,0 +1,39 @@
+@use '@/shared/styles/utils/variables' as var;
+@use '@/shared/styles/utils/mixins' as media;
+
+.form {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding: 20px 30px;
+    background: var.$white;
+    border-radius: 10px;
+    height: 230px;
+
+    @include media.respond-to('small') {
+      height: 290px;
+    }  
+
+    &__title {
+       margin-bottom: 10px;
+    }
+
+    &__list {
+        display: flex;
+        column-gap: 20px;
+        margin-bottom: 30px;
+    }
+
+    &__buttons {
+        display: flex;
+        column-gap: 20px;
+        flex-direction: row;
+        width: 70%;
+
+        @include media.respond-to('small') {
+            flex-direction: column;
+            row-gap: 10px;
+          }  
+    }
+}
+

src/widgets/DistributionForm/ui/DistributionForm.stories.tsx

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from '@storybook/react'
+
+import DistributionForm from './DistributionForm'
+
+const meta = {
+  title: 'widgets/DistributionForm',
+  component: DistributionForm,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof DistributionForm>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}

src/widgets/DistributionForm/ui/DistributionForm.tsx

@@ -0,0 +1,87 @@
+import { Form, Formik } from 'formik'
+import { useNavigate } from 'react-router'
+
+import { Routes } from '@/shared/config/routerConfig/routes'
+import { Button, ButtonDesign, ButtonSize, ButtonTheme } from '@/shared/ui/Button/Button'
+import Checkbox from '@/shared/ui/Checkbox/Checkbox'
+import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
+import Label from '@/shared/ui/Label/Label'
+
+import { IDistributionForm } from '../modal/types'
+
+import styles from './DistributionForm.module.scss'
+
+const initialValues: IDistributionForm = {
+  subscription: String('Нет')
+}
+
+const subscription = [
+  { label: 'Да', value: 'Да' },
+  { label: 'Нет', value: 'Нет' }
+]
+
+const DistributionForm = () => {
+  const navigate = useNavigate()
+  function handleRedirectPrevious() {
+    navigate(Routes.ACCOUNT)
+  }
+  function handleRedirectNext() {
+    navigate(Routes.ACCOUNT)
+  }
+
+  return (
+    <Formik
+      initialValues={initialValues}
+      onSubmit={(values, { setSubmitting, resetForm }) => {
+        setSubmitting(false)
+        resetForm()
+      }}>
+      {({ isSubmitting }) => (
+        <Form className={styles.form}>
+          <Heading type={HeadingType.NORMAL} className={styles.form__title}>
+            Рассылка
+          </Heading>
+          <Label htmlFor="subscription" className={`${styles.form__label}`}>
+            Подписаться
+            <ul className={styles.form__list}>
+              {subscription.map(option => {
+                return (
+                  <li key={option.value}>
+                    <Checkbox
+                      className={styles.form__radio}
+                      htmlFor="subscription"
+                      label={option.label}
+                      name="subscription"
+                      value={option.value}
+                    />
+                  </li>
+                )
+              })}
+            </ul>
+          </Label>
+          <div className={styles.form__buttons}>
+            <Button
+              theme={ButtonTheme.PREVIOUS}
+              design={ButtonDesign.SQUARE}
+              size={ButtonSize.S}
+              type="submit"
+              onClick={handleRedirectPrevious}
+              disabled={isSubmitting}>
+              Назад
+            </Button>
+            <Button
+              theme={ButtonTheme.PRIMARY}
+              design={ButtonDesign.SQUARE}
+              size={ButtonSize.S}
+              type="submit"
+              onClick={handleRedirectNext}
+              disabled={isSubmitting}>
+              Продолжить
+            </Button>
+          </div>
+        </Form>
+      )}
+    </Formik>
+  )
+}
+export default DistributionForm