#150 enhancement: Resolve merge conflict

config/storybook/decorators/StoreDecorator.js

@@ -1,4 +1,4 @@
-import {StoreProvider} from "../../../src/app/providers/SroreProvider/index.ts";
+import {StoreProvider} from "../../../src/app/providers/StoreProvider/index.ts";
 
 export const StoreDecorator = (initialState) => (Story) =>
 (  <StoreProvider initialState={initialState}>

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

@@ -1,12 +1,16 @@
 import { CategorySchema } from '@/entities/Category/types/types'
+import { SearchResultSchema } from '@/features/SearchProduct/types/types'
 import { LoginSchema } from '@/features/login/model/types/types'
 import { BrandSchema } from '@/widgets/BrandBlock/types/types'
 import { ApiInstance } from '@/shared/api/api'
+import { StoreReviewsSchema } from '@/widgets/ReviewsBlock/model/types/types'
 
 export interface StateSchema {
   login: LoginSchema
+  storeReviews: StoreReviewsSchema
   category: CategorySchema
   brand: BrandSchema
+  searchResult: SearchResultSchema
 }
 
 export interface ThunkExtraArg {

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

@@ -4,16 +4,20 @@ import { StateSchema, ThunkExtraArg } from './StateSchema'
 import { $api } from '@/shared/api/api'
 import categorySlice from '@/entities/Category/slice/categorySlice'
 import brandSlice from '@/widgets/BrandBlock/slice/brandSlice'
+import searchProductSlice from '@/features/SearchProduct/slice/searchProductSlice'
+import { storeReviewsReducer } from '@/widgets/ReviewsBlock/model/slice/reviewsSlice'
 
 export type RootState = StateSchema
 
-const rootReducer: ReducersMapObject<StateSchema> = {
+const rootReducer: ReducersMapObject<RootState> = {
   login: loginReducer,
   category: categorySlice,
-  brand: brandSlice
+  brand: brandSlice,
+  searchResult: searchProductSlice,
+  storeReviews: storeReviewsReducer
 }
 
-export function createReduxStore(initialState: StateSchema) {
+export function createReduxStore(initialState: RootState) {
   const extraArg: ThunkExtraArg = {
     api: $api
   }

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

@@ -9,6 +9,7 @@ import LoginPage from '@/pages/LoginPage/LoginPage'
 import ComparePage from '@/pages/ComparePage/ComparePage'
 import FavoritesPage from '@/pages/FavoritesPage/FavoritesPage'
 import CartPage from '@/pages/CartPage/CartPage'
+import SearchResultsPage from '@/pages/SearchResultsPage/SearchResultsPage'
 
 export const AppRouter = createBrowserRouter([
   {
@@ -48,6 +49,10 @@ export const AppRouter = createBrowserRouter([
       {
         path: Routes.CART,
         element: <CartPage />
+      },
+      {
+        path: Routes.SEARCH,
+        element: <SearchResultsPage />
       }
     ]
   }

src/components/CardPreview/CardPreview.tsx

@@ -17,6 +17,7 @@ export const CardPreview: FC = () => {
   const [isLiked, setIsLiked] = useState<boolean>(false)
   const [isInCompared, setIsInCompared] = useState<boolean>(false)
   const [isModalOpen, setIsModalOpen] = useState(false)
+  const [isModalClosing, setIsModalClosing] = useState(false)
 
   const handleAddToCart = () => {
     setIsInCart(!isInCart)
@@ -45,9 +46,13 @@ export const CardPreview: FC = () => {
   return (
     <>
       {isModalOpen && (
-        <Modal isModalOpen={isModalOpen} onClose={changeModalState}>
+        <Modal
+          isModalOpen={isModalOpen}
+          onClose={changeModalState}
+          isModalClosing={isModalClosing}
+          setIsModalClosing={setIsModalClosing}>
           <Suspense fallback={<Spinner />}>
-            <LazyQuickPurchaseForm />
+            <LazyQuickPurchaseForm setIsModalClosing={setIsModalClosing} />
           </Suspense>
         </Modal>
       )}

src/components/HeaderAccount/HeaderAccount.tsx

@@ -28,6 +28,7 @@ const LazyLoginForm = lazy(() => import('@/features/login/index'))
  */
 const HeaderAccount: FC<HeaderAccountProps> = ({ counter, total }) => {
   const [isModalOpen, setIsModalOpen] = useState(false)
+  const [isModalClosing, setIsModalClosing] = useState(false)
 
   const dispatch = useAppDispatch()
   const isAuth = useSelector(getUserAuthStatus)
@@ -54,7 +55,11 @@ const HeaderAccount: FC<HeaderAccountProps> = ({ counter, total }) => {
   return (
     <>
       {isModalOpen && (
-        <Modal isModalOpen={isModalOpen} onClose={changeModalState}>
+        <Modal
+          isModalOpen={isModalOpen}
+          onClose={changeModalState}
+          isModalClosing={isModalClosing}
+          setIsModalClosing={setIsModalClosing}>
           <Suspense fallback={<Spinner />}>
             <LazyLoginForm />
           </Suspense>

src/components/header/header.tsx

@@ -17,7 +17,7 @@ import { linkItems } from '@/mockData/catalogListData'
 import styles from './header.module.scss'
 import { useDispatch, useSelector } from 'react-redux'
 import { fetchCategories } from '@/entities/Category/slice/categorySlice'
-import { AppDispatch } from '@/app/providers/SroreProvider/config/store'
+import { AppDispatch } from '@/app/providers/StoreProvider/config/store'
 import { selectCategories, selectDisplayedCategories } from '@/entities/Category/selectors/categorySelectors'
 import CatalogNodeItem from '@/widgets/CatalogNodeItem/CatalogNodeItem'
 import NavigationLink from '@/widgets/NavigationLink/NavigationLink'

src/entities/BlogCard/BlogCard.module.scss

@@ -0,0 +1,36 @@
+@use '@/app/styles/index' as var;
+
+.card {
+  min-width: 340px;
+  position: relative;
+  transition: transform 0.3s ease-in-out;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 15px;  
+
+  &:hover {
+    transform: scale(1.1, 1.05);
+    transition: transform 0.3s ease-in-out;      
+  }
+
+  img {
+    border-radius: 6px;
+    transition: transform 0.3s ease-in-out;
+    scroll-snap-align: start;
+  }
+
+  .heading 
+  {
+      font-size: #{'min(max(14px, 1.2vw), 16px)'};
+  }
+
+  &:hover .heading {
+    color: var.$link-color;
+  }
+
+  span {
+    color: var.$body-color-light-grey;
+  }
+
+}

src/entities/BlogCard/BlogCard.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import BlogCard from './BlogCard'
+import Img1 from '@/assets/images/blog/img-blog-01.png'
+
+const meta = {
+  title: 'entities/BlogCard',
+  component: BlogCard,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof BlogCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    card: {
+      id: 1,
+      src: Img1,
+      alt: 'Покупай и не жди. До -50% на весь электротранспорт!',
+      title: 'Покупай и не жди. До -50% на весь электротранспорт!',
+      date: '8 Мая, 2022'
+    }
+  }
+}

src/entities/BlogCard/BlogCard.tsx

@@ -0,0 +1,28 @@
+import { FC } from 'react'
+import { TCard } from '@/models/CardModel'
+import styles from './BlogCard.module.scss'
+import Link from '@/shared/ui/Link/Link'
+import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
+
+export type Props = {
+  card: TCard
+}
+
+/**
+ * Карточка из блока блог
+ * @param {TCard} card - параметры карточки из блога
+ */
+
+const BlogCard: FC<Props> = ({ card }) => {
+  return (
+    <Link to={''} className={styles.card}>
+      <img src={card.src} alt={card.alt} draggable="false" />
+      <Heading type={HeadingType.NORMAL} className={styles.heading}>
+        {card.title}
+      </Heading>
+      <span>{card.date}</span>
+    </Link>
+  )
+}
+
+export default BlogCard

src/entities/BrandCard/BrandCard.module.scss

@@ -49,9 +49,5 @@
 
 .img {
   display: block;
-
-  @include media.respond-to('small') {
-    width: 120px;
-    height: 120px;
-  }
+  max-width: 100%;
 }

src/entities/CardReview/ui/CardReview/CardReview.stories.tsx

@@ -15,12 +15,10 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
-    review: {
-      id: 1,
-      name: 'Рейтинг нашего магазина',
-      score: '4.3',
-      text: 'Мы очень ним гордимся, это результат упорного труда в течении длительного времени и сейчас наша команда ежедневно работает над улучшением сервиса.',
-      date: ''
-    }
+    pk: 1,
+    name: 'Рейтинг нашего магазина',
+    score: 4.3,
+    text: 'Мы очень ним гордимся, это результат упорного труда в течении длительного времени и сейчас наша команда ежедневно работает над улучшением сервиса.',
+    date: '2024-01-22T09:42:35.242681+03:00'
   }
 }

src/entities/CardReview/ui/CardReview/CardReview.tsx

@@ -1,32 +1,52 @@
 import { FC, useMemo } from 'react'
-import { TReview } from '@/models/ReviewModel'
 import IconStar from '@/assets/icons/IconStar'
 import Paragraph from '@/shared/ui/Paragraph/Paragraph'
 import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
 import Link from '@/shared/ui/Link/Link'
 import styles from './cardReview.module.scss'
+import Subheading from '@/shared/ui/Subheading/Subheading'
 
 export type Props = {
-  review: TReview
+  pk: number
+  text: string
+  date: string
+  score: number
+  name: string
 }
 
-const CardReview: FC<Props> = props => {
-  const { review } = props
+/**
+ * Отзыв
+ * @param {number} pk - id отзыва
+ * @param {string} text - текст отзыва
+ * @param {string} date - дата отзыва
+ * @param {number} score - очко рейтинга отзыва
+ * @param {string} name - имя оставившего отзыв
+ */
+
+const CardReview: FC<Props> = ({ pk, text, date, score, name }) => {
   const initials = useMemo(() => {
-    return review.name.slice(0, 1)
+    return name.slice(0, 1)
   }, [0, 1])
   const linkTextStyle = styles.link__text
 
+  const newDate = useMemo(() => {
+    const _parsedDate = new Date(date)
+    const year = _parsedDate.getFullYear()
+    const formatter = new Intl.DateTimeFormat('ru', { month: 'long', day: 'numeric' }).format(_parsedDate)
+
+    return `${formatter}, ${year}`
+  }, [date])
+
   return (
     <article className={styles.review}>
-      {review.id === 0 ? (
+      {pk === 0 ? (
         <>
           <Heading type={HeadingType.SMALL} className={styles.title}>
-            {review.name} - {review.score}
+            {name} - {score}
             <IconStar></IconStar>
           </Heading>
 
-          <p>{review.text}</p>
+          <p>{text}</p>
           <p className={styles.subtitle}>
             Вы можете{' '}
             <Link to="#" className={styles.link__text}>
@@ -44,16 +64,16 @@ const CardReview: FC<Props> = props => {
           <div className={styles.review__header}>
             <div className={styles.review__initials}>{initials}</div>
             <div>
-              <Heading type={HeadingType.SMALL}>{review.name}</Heading>
+              <Heading type={HeadingType.SMALL}>{name}</Heading>
               <span>
-                Оценил(а) магазин на {review.score}
-                <IconStar></IconStar>
+                Оценил(а) магазин на {score}
+                <IconStar />
               </span>
             </div>
           </div>
           <div className={styles.review__data}>
-            <Paragraph>{review.text}</Paragraph>
-            <span>{review.date}</span>
+            <Paragraph>{text}</Paragraph>
+            <Subheading>{newDate}</Subheading>
           </div>
           <Link to="#" className={linkTextStyle}>
             Читать полный отзыв

src/entities/Category/selectors/categorySelectors.ts

@@ -1,4 +1,4 @@
-import { RootState } from '@/app/providers/SroreProvider/config/store'
+import { RootState } from '@/app/providers/StoreProvider/config/store'
 
 export const selectCategories = (state: RootState) => state.category.categories
 export const selectDisplayedCategories = (state: RootState) => state.category.displayedCategories

src/entities/Category/slice/categorySlice.ts

@@ -1,6 +1,6 @@
 import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
 import { ApiError, ApiErrorTypes, ApiRoutes } from '@/shared/api/types'
-import { ThunkConfig } from '@/app/providers/SroreProvider/config/StateSchema'
+import { ThunkConfig } from '@/app/providers/StoreProvider/config/StateSchema'
 import { Category, CategorySchema } from '../types/types'
 import { apiErrorIdentify } from '@/shared/api/apiErrorIdentify'
 import { rejectedPayloadHandle } from '@/shared/api/rejectedPayloadHandle'

src/entities/NewsCard/NewsCard.module.scss

@@ -0,0 +1,49 @@
+@use '@/app/styles/index' as var;
+
+.card {
+  min-width: 340px;
+  position: relative;
+  transition: transform 0.3s ease-in-out;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 15px;  
+
+  &:hover {
+    transform: scale(1.1, 1.05);
+    transition: transform 0.3s ease-in-out;      
+  }
+
+  img {
+    border-radius: 6px;
+    transition: transform 0.3s ease-in-out;
+    scroll-snap-align: start;
+  }
+
+  .heading 
+  {
+      font-size: #{'min(max(14px, 1.2vw), 16px)'};
+  }
+
+  &:hover .heading {
+    color: var.$link-color;
+  }
+
+  span {
+    color: var.$body-color-light-grey;
+  }
+
+  .promo {
+    display: inline-block;
+    position: absolute;
+    top: 15px;
+    left: 15px;
+    background: var.$promo-color;
+    border-radius: 5px;
+    padding: 5px 10px;
+    color: var.$white;
+    font-size: 15px;
+    line-height: 120%;
+    font-weight: 500;
+  }
+}