Merge pull request #438 from Studio-Yandex-Practicum/bug_436_registra…

…tion_page

Bug 436 registration page

src/app/providers/StoreProvider/config/StateSchema.ts

@@ -18,6 +18,7 @@ import type { ICartEntitySchema } from '@/entities/CartEntity/model/types/types'
 import type { IAboutUsSchema } from '@/pages/AboutUsPage/model/types/types'
 import type { IFeedbackSchema } from '@/features/Reviews/model/types/types'
 import type { TNumberOfPageSchema } from '@/widgets/Pagination/types/types'
+import { ICreateAccountSchema } from '@/widgets/CreateAccount/model/types/types'
 
 export interface StateSchema {
   aboutUs: IAboutUsSchema
@@ -42,6 +43,7 @@ export interface StateSchema {
   categoryFilters: ICategoryFiltersSchema
   feedbacks: IFeedbackSchema
   pagination: TNumberOfPageSchema
+  createAccount: ICreateAccountSchema
 }
 
 export interface ThunkExtraArg {

src/app/providers/StoreProvider/config/store.ts

@@ -23,6 +23,7 @@ import { aboutUsReducer } from '@/pages/AboutUsPage/model/slice/aboutUsSlice'
 import { cartEntityReducer } from '@/entities/CartEntity/model/slice/cartEntitySlice'
 import { feedbacksReducer } from '@/features/Reviews/model/slice/feedbacksSlice'
 import { paginationSliceReducer } from '@/widgets/Pagination/slice/paginationSlice'
+import { createAccountReducer } from '@/widgets/CreateAccount/model/slice/loginSlice'
 
 export type RootState = StateSchema
 
@@ -48,7 +49,8 @@ const rootReducer: ReducersMapObject<RootState> = {
   getCategories: getCategoriesReducer,
   cartEntity: cartEntityReducer,
   categoryFilters: categoryFiltersSliceReducer,
-  pagination: paginationSliceReducer
+  pagination: paginationSliceReducer,
+  createAccount: createAccountReducer
 }
 
 export function createReduxStore(initialState: RootState) {

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

@@ -8,6 +8,7 @@ import { CategoryPage } from '@/pages/CategoryPage/CategoryPage'
 import ComparePage from '@/pages/ComparePage/ComparePage'
 import ContactsPage from '@/pages/ContactsPage/ContactsPage'
 import CreateAccountPage from '@/pages/CreateAccountPage/CreateAccountPage'
+import { CreateAccountSuccess } from '@/pages/CreateAccountSuccess/CreateAccountSuccess'
 import DeliveryPage from '@/pages/DeliveryPage/DeliveryPage'
 import ErrorPage from '@/pages/ErrorPage/ErrorPage'
 import { FavoritesPage } from '@/pages/FavoritesPage/FavoritesPage'
@@ -23,8 +24,8 @@ 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 SubscriptionPage from '@/pages/SubscriptionPage/SubscriptionPage'
 import { TermsPage } from '@/pages/TermsPage/TermsPage'
 import VouchersPage from '@/pages/VouchersPage/VouchersPage'
 import { Routes } from '@/shared/config/routerConfig/routes'
@@ -137,6 +138,10 @@ export const AppRouter = createBrowserRouter([
         path: Routes.ACCOUNT,
         element: <ProtectedRoute element={AccountPage} />
       },
+      {
+        path: Routes.CREATE_ACCOUNT_SUCCESS,
+        element: <CreateAccountSuccess />
+      },
       {
         path: Routes.LOGOUT,
         element: <LogoutPage />

src/features/login/ui/LoginForm/LoginForm.tsx

@@ -49,6 +49,7 @@ const LoginForm: FC<LoginFormProps> = ({ isModalOpen, handleClose, onLogin }) =>
   }
 
   const onRegistration = () => {
+    handleClose && handleClose()
     navigate(Routes.REGISTRATION)
   }
 

src/pages/CreateAccountPage/CreateAccountPage.module.scss

@@ -1,40 +1,41 @@
 @use '@/shared/styles/utils/mixins' as media;
 
 .container {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding: 65px 0;    
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 65px 0;
 }
 
 .wrapper {
-    display: flex;
-    align-items: center;   
-    justify-content:space-between;
-    width: 45%;
-    margin-bottom: 20px;
-    @include media.respond-to('large') {
-        width: 80%;
-      }
-    @include media.respond-to('middle') {
-        width: 94%;    
-      }
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 45%;
+  margin-bottom: 20px;
+  @include media.respond-to('large') {
+    width: 80%;
+  }
+  @include media.respond-to('middle') {
+    width: 94%;
+  }
 }
 
 .auth {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    column-gap: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: 10px;
 }
 
 .button {
-    padding: 4px 14px;
+  padding: 4px 14px;
 }
 
 .paragraph {
-    @include media.respond-to('middle') {
-        display: none;        
-      }
-}
+  @include media.respond-to('middle') {
+    display: none;
+  }
+}

src/pages/CreateAccountSuccess/CreateAccountSuccess.module.scss

@@ -0,0 +1,42 @@
+@use '../../shared/styles/utils/mixins' as media;
+@use '../../shared/styles/utils/variables' as color;
+
+.createAccountPage {
+  width: 100%;
+
+  &__pageDescriptor {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  &__container {
+    width: 100%;
+    display: flex;
+    justify-content: start;
+    align-items: start;
+    gap: 20px;
+
+    @include media.respond-to('large') {
+      flex-direction: column;
+      gap: 10px;
+    }
+  }
+
+  &__contentContainer {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 50px;
+  }
+
+  &__button {
+    width: 150px;
+    transition: opacity 0.3s;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}

src/pages/CreateAccountSuccess/CreateAccountSuccess.tsx

@@ -0,0 +1,88 @@
+import { FC, Suspense, useState } from 'react'
+import { useNavigate } from 'react-router'
+
+import SideBarMenuModal from '@/features/SideBarMenuModal'
+import { Routes } from '@/shared/config/routerConfig/routes'
+import { useResize } from '@/shared/libs/hooks/useResize'
+import Breadcrumbs from '@/shared/ui/Breadcrumbs/Breadcrumbs'
+import { Button, ButtonSize, ButtonTheme } from '@/shared/ui/Button/Button'
+import Heading from '@/shared/ui/Heading/Heading'
+import Modal from '@/shared/ui/Modal/Modal'
+import Paragraph from '@/shared/ui/Paragraph/Paragraph'
+import Spinner from '@/shared/ui/Spinner/Spinner'
+import WrapperForMainContent from '@/shared/ui/WrapperForMainContent/WrapperForMainContent'
+import { withAdaptiveSideBar } from '@/widgets/SideBarMenu'
+
+import styles from './CreateAccountSuccess.module.scss'
+
+const links = [
+  { heading: 'Главная', href: '/' },
+  { heading: 'Личный Кабинет', href: Routes.ACCOUNT },
+  { heading: 'Успешно', href: '' }
+]
+
+/**
+ * Страница успешной регистрации
+ *
+ */
+export const CreateAccountSuccess: FC = () => {
+  const { isScreenLg } = useResize()
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false)
+  const [isModalClosing, setIsModalClosing] = useState<boolean>(false)
+  const AdaptiveSideBar = withAdaptiveSideBar(isScreenLg)
+  const navigate = useNavigate()
+
+  const handleClick = () => {
+    setIsModalOpen(true)
+  }
+
+  const changeModalState = () => {
+    setIsModalOpen(!isModalOpen)
+  }
+
+  const onGoOnHandle = () => {
+    navigate(Routes.LOGIN)
+  }
+
+  return (
+    <WrapperForMainContent>
+      <div className={styles.createAccountPage__pageDescriptor}>
+        <Heading>Ваша учетная запись создана!</Heading>
+        <Breadcrumbs links={links} />
+      </div>
+      <div className={styles.createAccountPage__container}>
+        <AdaptiveSideBar handleClick={handleClick} />
+        <div className={styles.createAccountPage__contentContainer}>
+          <Paragraph>
+            Поздравляем! Ваш Личный Кабинет был успешно создан. Для окончания регистарции перейдите по ссылке
+            в письме!
+          </Paragraph>
+          <Paragraph>
+            После завершения регистрации Вы сможете воспользоваться дополнительными возможностями: просмотр
+            истории заказов, печать счета, изменение своей контактной информации и адресов доставки и многое
+            другое.
+          </Paragraph>
+          <Paragraph>Если у Вас есть какие-либо вопросы, напишите нам.</Paragraph>
+          <Button
+            onClick={onGoOnHandle}
+            size={ButtonSize.S}
+            theme={ButtonTheme.PRIMARY}
+            className={styles.createAccountPage__button}>
+            Продолжить
+          </Button>
+        </div>
+      </div>
+      {isModalOpen && (
+        <Modal
+          isModalOpen={isModalOpen}
+          onClose={changeModalState}
+          isModalClosing={isModalClosing}
+          setIsModalClosing={setIsModalClosing}>
+          <Suspense fallback={<Spinner />}>
+            <SideBarMenuModal handleClose={changeModalState} />
+          </Suspense>
+        </Modal>
+      )}
+    </WrapperForMainContent>
+  )
+}

src/pages/ShopNewsPage/ShopNewsPage.tsx

@@ -1,6 +1,6 @@
-import WrapperForMainContent from '@/components/WrapperForMainContent/WrapperForMainContent'
 import Breadcrumbs from '@/shared/ui/Breadcrumbs/Breadcrumbs'
 import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
+import WrapperForMainContent from '@/shared/ui/WrapperForMainContent/WrapperForMainContent'
 import ShopNewsWidget from '@/widgets/NewsBlock/ui/ShopNewsWidget/ShopNewsWidget'
 
 import styles from './ShopNewsPage.module.scss'

src/pages/SubscriptionPage/SubscriptionPage.tsx

@@ -6,11 +6,10 @@ 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 WrapperForMainContent from '@/shared/ui/WrapperForMainContent/WrapperForMainContent'
 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 = [

src/shared/api/types.ts

@@ -17,7 +17,8 @@ export enum ApiRoutes {
   DECREASE_PRODUCT_AMOUNT = 'cart/subtract/',
   REMOVE_PRODUCT = 'cart/delete/',
   RENEW_PRODUCT_AMOUNT = 'cart/',
-  USER = 'users/me'
+  USER = 'users/me',
+  CREATE_ACCOUNT = 'users'
 }
 
 export enum ApiErrorTypes {

src/shared/config/routerConfig/routes.ts

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

src/widgets/CreateAccount/model/services/createAccount/createAccount.ts

@@ -0,0 +1,21 @@
+import { createAsyncThunk } from '@reduxjs/toolkit'
+
+import { ThunkConfig } from '@/app/providers/StoreProvider/config/StateSchema'
+import { apiErrorIdentify } from '@/shared/api/apiErrorIdentify'
+import { ApiError, ApiErrorTypes, ApiRoutes } from '@/shared/api/types'
+
+import type { ICreateAccountResult, TCreateAccountPayload } from '../../types/types'
+
+export const createAccount = createAsyncThunk<
+  ICreateAccountResult,
+  TCreateAccountPayload,
+  ThunkConfig<ApiError>
+>('createAccount/createAccount', async (values, thunkAPI) => {
+  const { rejectWithValue, extra } = thunkAPI
+  try {
+    const { data } = await extra.api.post(`api/${ApiRoutes.CREATE_ACCOUNT}/`, values)
+    return data
+  } catch (error) {
+    return rejectWithValue(apiErrorIdentify(error, ApiErrorTypes.DATA_EMPTY_ERROR))
+  }
+})

src/widgets/CreateAccount/model/slice/loginSlice.ts

@@ -0,0 +1,40 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+import { rejectedPayloadHandle } from '@/shared/api/rejectedPayloadHandle'
+
+import { createAccount } from '../services/createAccount/createAccount'
+import { ICreateAccountSchema } from '../types/types'
+
+const initialState: ICreateAccountSchema = {
+  isLoading: false,
+  user: {
+    id: null,
+    email: null
+  }
+}
+
+export const createAccountSlice = createSlice({
+  name: 'createAccount',
+  initialState,
+  reducers: {
+    errorReset: state => {
+      state.error = undefined
+    }
+  },
+  extraReducers: builder => {
+    builder
+      .addCase(createAccount.pending, state => {
+        state.error = undefined
+        state.isLoading = true
+      })
+      .addCase(createAccount.fulfilled, state => {
+        state.isLoading = false
+      })
+      .addCase(createAccount.rejected, (state, { payload }) => {
+        state.isLoading = false
+        state.error = rejectedPayloadHandle(payload)
+      })
+  }
+})
+
+export const { actions: createAccountActions, reducer: createAccountReducer } = createAccountSlice