Merge pull request #440 from Studio-Yandex-Practicum/development_424_…

…edit_account_page

Development 424 edit account page

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

@@ -17,6 +17,7 @@ import type { IFeedbackFormSchema } from '@/widgets/FeedbackForm/model/scheme/fe
 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 { IEditAccountFormSchema } from '@/widgets/EditAccount/model/scheme/editAccountFormSliceScheme'
 import type { TNumberOfPageSchema } from '@/widgets/Pagination/types/types'
 import { ICreateAccountSchema } from '@/widgets/CreateAccount/model/types/types'
 
@@ -43,6 +44,7 @@ export interface StateSchema {
   categoryFilters: ICategoryFiltersSchema
   feedbacks: IFeedbackSchema
   pagination: TNumberOfPageSchema
+  editAccount: IEditAccountFormSchema
   createAccount: ICreateAccountSchema
 }
 

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

@@ -22,6 +22,7 @@ import { feedbackFormReducer } from '@/widgets/FeedbackForm/model/slice/feedback
 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 { editAccountFormReducer } from '@/widgets/EditAccount/model/slice/editAccountFormSlice'
 import { paginationSliceReducer } from '@/widgets/Pagination/slice/paginationSlice'
 import { createAccountReducer } from '@/widgets/CreateAccount/model/slice/loginSlice'
 
@@ -50,6 +51,7 @@ const rootReducer: ReducersMapObject<RootState> = {
   cartEntity: cartEntityReducer,
   categoryFilters: categoryFiltersSliceReducer,
   pagination: paginationSliceReducer,
+  editAccount: editAccountFormReducer,
   createAccount: createAccountReducer
 }
 

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

@@ -10,6 +10,7 @@ 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 { EditAccountPage } from '@/pages/EditAccountPage/EditAccountPage'
 import ErrorPage from '@/pages/ErrorPage/ErrorPage'
 import { FavoritesPage } from '@/pages/FavoritesPage/FavoritesPage'
 import { FeedbackPage } from '@/pages/FeedbackPage/FeedbackPage'
@@ -138,6 +139,10 @@ export const AppRouter = createBrowserRouter([
         path: Routes.ACCOUNT,
         element: <ProtectedRoute element={AccountPage} />
       },
+      {
+        path: Routes.EDIT_ACCOUNT,
+        element: <ProtectedRoute element={EditAccountPage} />
+      },
       {
         path: Routes.CREATE_ACCOUNT_SUCCESS,
         element: <CreateAccountSuccess />

src/entities/SideBarEntity/model/functions/sideBarOptions.ts

@@ -5,7 +5,7 @@ const user = [
     title: 'Мои данные',
     routes: [
       { subtitle: 'Личный Кабинет', route: Routes.ACCOUNT },
-      { subtitle: 'Изменить контактную информацию', route: Routes.HOME }, // '/edit-account' - данного роута пока нет
+      { subtitle: 'Изменить контактную информацию', route: Routes.EDIT_ACCOUNT },
       { subtitle: 'Изменить свой пароль', route: Routes.HOME }, // '/change-password' - данного роута пока нет
       { subtitle: 'Изменить мои адреса', route: Routes.HOME }, // '/address-book' - данного роута пока нет
       { subtitle: 'Посмотреть закладки', route: Routes.FAVORITES }

src/features/login/model/selectors/getUserAuthStatus.ts

@@ -4,3 +4,4 @@ export const getUserAuthStatus = (state: StateSchema) => state.login.isAuth
 export const getLoadingAuthStatus = (state: StateSchema) => state.login.isLoading
 export const getErrorAuthStatus = (state: StateSchema) => state.login.error
 export const getCurrentUserEmail = (state: StateSchema) => state.login.user?.email
+export const getCurrentUserSelector = (state: StateSchema) => state.login.user

src/features/login/model/slice/loginSlice.ts

@@ -12,7 +12,8 @@ const initialState: LoginSchema = {
   isAuth: null,
   user: {
     id: null,
-    email: null
+    email: null,
+    userprofile: null
   }
 }
 
@@ -30,7 +31,8 @@ export const loginSlice = createSlice({
     userReset: state => {
       state.user = {
         id: null,
-        email: null
+        email: null,
+        userprofile: null
       }
     }
   },

src/features/login/model/types/types.ts

@@ -8,6 +8,13 @@ export interface LoginAuthData {
 export interface IUser {
   id: Nullable<number>
   email: Nullable<string>
+  userprofile: Nullable<{
+    first_name: string
+    last_name: string
+    about: string
+    company: string
+    is_vendor: boolean
+  }>
 }
 
 export interface LoginTokenData {

src/pages/EditAccountPage/EditAccountPage.module.scss

@@ -0,0 +1,33 @@
+@use '../../shared/styles/utils/mixins' as media;
+@use '../../shared/styles/utils/variables' as color;
+
+.editAccountPage {
+  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;
+  }
+}

src/pages/EditAccountPage/EditAccountPage.tsx

@@ -0,0 +1,61 @@
+import { FC, Suspense, useState } from 'react'
+
+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 Heading 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 { EditAccount } from '@/widgets/EditAccount/EditAccount'
+import { withAdaptiveSideBar } from '@/widgets/SideBarMenu'
+
+import styles from './EditAccountPage.module.scss'
+
+const links = [
+  { heading: 'Главная', href: '/' },
+  { heading: 'Личный Кабинет', href: Routes.ACCOUNT },
+  { heading: 'Учетная запись', href: '' }
+]
+
+export const EditAccountPage: FC = () => {
+  const { isScreenLg } = useResize()
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false)
+  const [isModalClosing, setIsModalClosing] = useState<boolean>(false)
+  const AdaptiveSideBar = withAdaptiveSideBar(isScreenLg)
+
+  const handleClick = () => {
+    setIsModalOpen(true)
+  }
+
+  const changeModalState = () => {
+    setIsModalOpen(!isModalOpen)
+  }
+
+  return (
+    <WrapperForMainContent>
+      <div className={styles.editAccountPage__pageDescriptor}>
+        <Heading>Учетная запись</Heading>
+        <Breadcrumbs links={links} />
+      </div>
+      <div className={styles.editAccountPage__container}>
+        <AdaptiveSideBar handleClick={handleClick} />
+        <div className={styles.editAccountPage__contentContainer}>
+          <EditAccount />
+        </div>
+      </div>
+      {isModalOpen && (
+        <Modal
+          isModalOpen={isModalOpen}
+          onClose={changeModalState}
+          isModalClosing={isModalClosing}
+          setIsModalClosing={setIsModalClosing}>
+          <Suspense fallback={<Spinner />}>
+            <SideBarMenuModal handleClose={changeModalState} />
+          </Suspense>
+        </Modal>
+      )}
+    </WrapperForMainContent>
+  )
+}

src/shared/api/types.ts

@@ -18,6 +18,7 @@ export enum ApiRoutes {
   REMOVE_PRODUCT = 'cart/delete/',
   RENEW_PRODUCT_AMOUNT = 'cart/',
   USER = 'users/me',
+  UPDATE_PROFILE = 'update-profile',
   CREATE_ACCOUNT = 'users'
 }
 

src/shared/config/routerConfig/routes.ts

@@ -23,6 +23,7 @@ export enum Routes {
   PRODUCT = '/product',
   HELP = '/help',
   ACCOUNT = '/account',
+  EDIT_ACCOUNT = '/edit-account',
   ORDER_HISTORY = '/order-history',
   TRANSACTIONS = '/transactions',
   DOWNLOADS = '/downloads',

src/shared/constants/constants.ts

@@ -118,3 +118,13 @@ export const ITEMS_PER_PAGE_OPTION = [
 //For Skeleton
 export const NUMBER_OF_CATEGORY_LINES = 15
 export const NUMBER_OF_PRODUCTS = 15
+
+//phoneValidation
+export const PHONE_REG_EXP = /^\+[0-9]{1,3}\(?([0-9]{3})\)?([ .-]?)([0-9]{3})\2([0-9]{4})/
+
+//Edit Account Page
+export const NAME_PATRONIMIC_LENGTH_MIN_LIMIT = 2
+export const NAME_PATRONIMIC_LENGTH_MAX_LIMIT = 50
+export const FAMILYNAME_LENGTH_MIN_LIMIT = 2
+export const FAMILYNAME_LENGTH_MAX_LIMIT = 50
+export const ABOUT_LENGTH_MAX_LIMIT = 250

src/shared/ui/Checkbox/Checkbox.tsx

@@ -19,7 +19,7 @@ export interface CheckboxProps {
 }
 
 /**
- * компонент Button
+ * компонент Checkbox
  * @param {string} props.name - имя для привязки к htmlFor
  * @param {string} props.value - значение выбранного поля
  * @param {string} props.label - название поля

src/widgets/CreateAccount/ui/CreateAccountForm.tsx

@@ -3,14 +3,14 @@ import { ErrorMessage, Field, Form, Formik, FormikHelpers } from 'formik'
 import { FC } from 'react'
 import { useNavigate } from 'react-router'
 
+import { RequiredFieldTitle } from '@/features/RequiredFieldTitle/RequiredFieldTitle'
 import { Routes } from '@/shared/config/routerConfig/routes'
 import { useAppDispatch } from '@/shared/libs/hooks/store'
 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 { Input } from '@/shared/ui/Input/Input'
 import Label from '@/shared/ui/Label/Label'
-import { RequiredFieldTitle } from '@/widgets/FeedbackForm/ui/RequiredFieldTitle/RequiredFieldTitle'
 
 import { createAccount } from '../model/services/createAccount/createAccount'
 import { ICreateAccountForm } from '../model/types/types'

src/widgets/EditAccount/EditAccount.module.scss

@@ -0,0 +1,88 @@
+@use '../../shared/styles/utils/variables' as color;
+
+@mixin font($size) {
+  font-size: $size;
+  font-weight: 500;
+  line-height: 1.5;
+}
+
+.editAccountform {
+  width: 100%;
+  min-height: 400px;
+  padding: 30px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: 20px;
+  background-color: color.$white;
+  border-radius: 5px;
+
+  &__header {
+    font-size: 20px;
+    line-height: 1;
+    font-weight: 700;
+  }
+
+  &__form {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: 20px;
+  }
+
+  &__label {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  &__fieldlabel {
+    @include font(14px);
+  }
+
+  &__field {
+    width: 100%;
+    padding: 10px 16px;
+    border: none;
+    outline: none;
+    background-color: color.$body-bg;
+    border-radius: 5px;
+    box-shadow: none;
+    @include font(14px);
+
+    transition: box-shadow 0.5s;
+
+    &:focus {
+      box-shadow: 0 0 0 2px color.$theme-primary-color;
+    }
+
+    &_textfield {
+      min-height: 100px;
+    }
+  }
+
+  &__btnConteiner {
+    width: 50%;
+    display: flex;
+    gap: 10px;
+  }
+
+  &__submitbtn {
+    width: 100%;
+    transition: opacity 0.5s;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  &__msg {
+    font-size: 18px;
+    line-height: 25px;
+    font-weight: 400;
+  }
+}