Merge branch 'master' into enhancement_221_api_about_us

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

@@ -14,8 +14,10 @@ import { CategoryListSchema } from '@/widgets/CategoryGrid/model/types/types'
 import { ICategoryProductsSchema } from '@/pages/ProductsPage/types/types'
 import { IFeedbackSchema } from '@/pages/FeedbackPage/model/types/types'
 import { ICategorySchema, IMainCategorySchema } from '@/widgets/CategoryList/types/types'
+import { ICategoryFiltersSchema } from '@/components/Dropdown/types/types'
 import type { IFeedbackFormSchema } from '@/widgets/FeedbackForm/model/scheme/feedbackFormSliceSchema'
 import { IAboutUsSchema } from '@/pages/AboutUsPage/model/types/types'
+import { ICartSchema } from '@/pages/CartPage/model/types'
 
 export interface StateSchema {
   aboutUs: IAboutUsSchema
@@ -38,6 +40,8 @@ export interface StateSchema {
   categorySlug: CategorySlug
   categoryBranches: ICategorySchema
   getCategories: IMainCategorySchema
+  cart: ICartSchema
+  categoryFilters: ICategoryFiltersSchema
 }
 
 export interface ThunkExtraArg {

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

@@ -19,8 +19,10 @@ import { categorySlugSliceReducer } from '@/entities/Category/slice/categorySlug
 import { categoryBranchesReducer } from '@/widgets/CategoryList/slice/pageCategoryBranchesSlice'
 import { getCategoriesReducer } from '@/widgets/CategoryList/slice/pageCategoriesSlice'
 import { feedbackReducer } from '@/pages/FeedbackPage/model/slice/feedbackSlice'
+import { categoryFiltersSliceReducer } from '@/components/Dropdown/slice/filtersSlice'
 import { feedbackFormReducer } from '@/widgets/FeedbackForm/model/slice/feedbackFormSlice'
 import { aboutUsReducer } from '@/pages/AboutUsPage/model/slice/aboutUsSlice'
+import { cartReducer } from '@/pages/CartPage/model/slice'
 
 export type RootState = StateSchema
 
@@ -44,7 +46,9 @@ const rootReducer: ReducersMapObject<RootState> = {
   categoryId: categoryIdSliceReducer,
   categorySlug: categorySlugSliceReducer,
   categoryBranches: categoryBranchesReducer,
-  getCategories: getCategoriesReducer
+  getCategories: getCategoriesReducer,
+  cart: cartReducer,
+  categoryFilters: categoryFiltersSliceReducer
 }
 
 export function createReduxStore(initialState: RootState) {

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

@@ -16,6 +16,7 @@ import { ProductPage } from '@/pages/ProductPage/ProductPage'
 import { ProductsPage } from '@/pages/ProductsPage/ProductsPage'
 import RootPage from '@/pages/RootPage/RootPage'
 import SearchResultsPage from '@/pages/SearchResultsPage/SearchResultsPage'
+import VouchersPage from '@/pages/VouchersPage/VouchersPage'
 import { Routes } from '@/shared/config/routerConfig/routes'
 
 export const AppRouter = createBrowserRouter([
@@ -106,7 +107,7 @@ export const AppRouter = createBrowserRouter([
       },
       {
         path: Routes.VOUCHERS,
-        element: <ProductsPage /> // временная заглушка нужна страница с подарочными сертификатами
+        element: <VouchersPage />
       },
       {
         path: Routes.PRODUCT + '/:slug',

src/components/Dropdown/Dropdown.tsx

@@ -1,9 +1,11 @@
 import React, { ChangeEvent, useState } from 'react'
 
+import type { TSortOptions } from '@/components/PageControls/PageControls'
+
 import styles from './Dropdown.module.scss'
 
 interface DropdownProps extends React.HTMLProps<HTMLSelectElement> {
-  items: (string | number)[]
+  items: TSortOptions[]
   defaultItem?: string
   onSelect: React.ChangeEventHandler<HTMLSelectElement>
 }
@@ -26,8 +28,8 @@ export const Dropdown: React.FC<DropdownProps> = ({ items, defaultItem, onSelect
   return (
     <select className={styles.select} value={selectedItem} onChange={handleSelect} {...props}>
       {items.map(item => (
-        <option key={item} value={item}>
-          {item}
+        <option value={item.name} key={item.name}>
+          {item.name}
         </option>
       ))}
     </select>

src/components/Dropdown/selectors/selectors.tsx

@@ -0,0 +1,5 @@
+import { RootState } from '@/app/providers/StoreProvider/config/store'
+
+export const selectFilterProducts = (state: RootState) => state.categoryFilters.filterProducts
+
+export const selectFilterQuantity = (state: RootState) => state.categoryFilters.productQuantityFilter

src/components/Dropdown/slice/filtersSlice.tsx

@@ -0,0 +1,26 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+import type { ICategoryFiltersSchema } from '@/components/Dropdown/types/types'
+import { SORT_NAMES, SORT_VALUES } from '@/shared/constants/constants'
+
+const initialState: ICategoryFiltersSchema = {
+  filterProducts: { name: SORT_NAMES.NAMES_A_YA, value: SORT_VALUES.NAMES_A_YA },
+  productQuantityFilter: { name: '15', value: '15' }
+}
+
+const categoryFiltersSlice = createSlice({
+  name: 'categoryFilters',
+  initialState,
+  reducers: {
+    setFilterProducts(state, action) {
+      state.filterProducts = action.payload
+    },
+    setProductQuantityFilter(state, action) {
+      state.productQuantityFilter = action.payload
+    }
+  }
+})
+
+export const { reducer: categoryFiltersSliceReducer } = categoryFiltersSlice
+
+export const { setFilterProducts, setProductQuantityFilter } = categoryFiltersSlice.actions

src/components/Dropdown/types/types.ts

@@ -0,0 +1,9 @@
+export interface ICategoryFiltersSchema {
+  filterProducts: IFilterSchema
+  productQuantityFilter: IFilterSchema
+}
+
+export type IFilterSchema = {
+  name: string
+  value: string
+}

src/components/PageControls/PageControls.tsx

@@ -8,13 +8,18 @@ import { ECardView } from '@/shared/model/types/common'
 
 import styles from './PageControls.module.scss'
 
+export type TSortOptions = {
+  name: string
+  value?: string
+}
+
 type TPageControls = {
   cardView: string
   handleCardViewChange: (view: ECardView) => void
   handleItemsPerPageChange: ChangeEventHandler<HTMLSelectElement>
   handleSortChange: ChangeEventHandler<HTMLSelectElement>
-  itemPerPageOptions: number[]
-  sortOptions: string[]
+  itemPerPageOptions: TSortOptions[]
+  sortOptions: TSortOptions[]
 }
 
 /**

src/entities/ProductEntity/ui/ProductEntity/ProductEntity.module.scss

@@ -8,7 +8,7 @@
   background: var.$white;
   border-radius: 10px;
   height: 110px;
-  width: 80%;
+  width: 60%;
 }
 
 .frame {
@@ -49,8 +49,7 @@
   color: var.$body-color;
   text-overflow: ellipsis;
   overflow: hidden;
-  width: 250px;
-
+
   @include media.respond-to('large') {
     width: 100%;
   }

src/entities/ProductEntity/ui/ProductEntity/ProductEntity.stories.tsx

@@ -18,10 +18,19 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
-    src: image1,
-    name: 'Переходник',
-    article: '1229239192',
-    price: 782,
-    currency: '₽'
+    id: 1,
+    category: 'техника',
+    brand: 'Tefal',
+    images: [
+      {
+        image: image1
+      }
+    ],
+    price: '1000',
+    name: 'Tefal Iron',
+    slug: '1hfjnfjkf',
+    description: 'Functional',
+    code: 108290,
+    wb_urls: 'jnfne'
   }
 }

src/entities/ProductEntity/ui/ProductEntity/ProductEntity.tsx

@@ -1,27 +1,27 @@
 import { type FC } from 'react'
 
-import { TProduct } from '@/mockData/productsData'
+import { IProductData } from '@/pages/CartPage/model/types'
 import Subheading from '@/shared/ui/Subheading/Subheading'
 
 import styles from './ProductEntity.module.scss'
 
 /**
  * Компонент служит для отображения товаров, пришедших с сервера.
- * @param {string} src-картика с изображением продукта;
+ * @param {IImagesData[]} images-картика с изображением продукта;
  * @param {string} name- название продукта;
- * @param {string} article -артикул продукта;
+ * @param {number} id -артикул продукта;
  * @param {number} price -стоимость продукта;
  * @param {string} currency - валюта, в которой обозначена стоимость;
  */
 
-export const ProductEntity: FC<TProduct> = product => {
+export const ProductEntity: FC<IProductData> = product => {
   return (
     <div className={`${styles.description}`}>
       <div className={`${styles.frame}`}>
-        <img src={product.src} alt={'product'} className={styles.image} />
+        <img src={product.images[0].image} alt={'product'} className={styles.image} />
       </div>
       <div className={`${styles.description_wrapper}`}>
-        <Subheading>{product.article}</Subheading>
+        <Subheading>{product.id}</Subheading>
         <a className={`${styles.name}`}>{product.name}</a>
       </div>
     </div>

src/features/CartEdit/ui/CartEdit/CartEdit.module.scss

@@ -71,7 +71,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 20px;
+  width: 50px; // bug поменяла 20 на 50 для того,чтобы svg отображался в storybook, при 20px в storybook svg сжимается сильно и пропадает, на сайте padding от <Button> переписывается, а в storybook нет 
   height: 100%;
   transition: background 0.25s;
 }
@@ -164,8 +164,14 @@
   font-size: 15px;
   line-height: 1.2;
   font-weight: 400;
+  margin:0;
+  padding: 0;
 
   &:hover {
     color: var.$theme-primary-color;
   }
 }
+
+.arrowIcon {
+  rotate: 180deg;
+}

src/features/CartEdit/ui/CartEdit/CartEdit.stories.tsx

@@ -27,17 +27,23 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
+    cartId: 85,
+    amount: 2,
     product: {
-      article: '1866887687',
-      quantity: 1,
-      src: image1,
-      name: 'Переходник',
-      price: 1634,
-      currency: 'RUB'
-    },
-    decreaseQuantity: () => {},
-    increaseQuantity: () => {},
-    setQuantity: () => {},
-    removeProduct: () => {}
+      id: 1,
+      category: 'техника',
+      brand: 'Tefal',
+      images: [
+        {
+          image: image1
+        }
+      ],
+      price: '1000',
+      name: 'Tefal Iron',
+      slug: '1hfjnfjkf',
+      description: 'Functional',
+      code: 108290,
+      wb_urls: 'jnfne'
+    }
   }
 }