From 5c70b9249bd4fa2fae301daaa61d08e29f44fcfb Mon Sep 17 00:00:00 2001 From: kirill-k88 Date: Fri, 17 May 2024 08:53:59 +0300 Subject: [PATCH] =?UTF-8?q?=D0=97=D0=B0=D0=BC=D0=B5=D0=BD=D0=B8=D0=BB=20?= =?UTF-8?q?=D0=BC=D0=BE=D0=BA=D0=B0=D0=B2=D1=8B=D0=B2=D0=B5=20=D0=B4=D0=B0?= =?UTF-8?q?=D0=BD=D0=BD=D1=8B=D0=B5=20=D0=B2=20=D0=BA=D0=BE=D1=80=D0=B7?= =?UTF-8?q?=D0=B8=D0=BD=D0=B5=20=D0=B2=20=D1=88=D0=B0=D0=BF=D0=BA=D0=B5=20?= =?UTF-8?q?=D0=BD=D0=B0=20=D1=80=D0=B5=D0=B0=D0=BB=D1=8C=D0=BD=D1=8B=D0=B5?= =?UTF-8?q?=20=D0=B4=D0=B0=D0=BD=D0=BD=D1=8B=D0=B5=20=D0=B8=D0=B7=20=D1=81?= =?UTF-8?q?=D0=BB=D0=B0=D0=B9=D1=81=D0=B0=20=D0=BA=D0=BE=D1=80=D0=B7=D0=B8?= =?UTF-8?q?=D0=BD=D1=8B=20=D0=B2=20entity?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../HeaderAccount/HeaderAccount.stories.tsx | 4 ++-- src/entities/HeaderAccount/HeaderAccount.tsx | 6 +++--- .../ui/HeaderMenuModal.stories.tsx | 7 ++++++- .../HeaderMenuModal/ui/HeaderMenuModal.tsx | 17 +++++++++++++---- src/widgets/Header/Header.tsx | 17 ++++++++++++----- 5 files changed, 36 insertions(+), 15 deletions(-) diff --git a/src/entities/HeaderAccount/HeaderAccount.stories.tsx b/src/entities/HeaderAccount/HeaderAccount.stories.tsx index 4bb6ae14..bb6a289e 100644 --- a/src/entities/HeaderAccount/HeaderAccount.stories.tsx +++ b/src/entities/HeaderAccount/HeaderAccount.stories.tsx @@ -16,7 +16,7 @@ type Story = StoryObj export const Default: Story = () => { const counter = 50 - const total = '2568 p' + const total = 2568 return (
@@ -27,5 +27,5 @@ export const Default: Story = () => { Default.args = { counter: 50, - total: '2568 p' + total: 2568 } diff --git a/src/entities/HeaderAccount/HeaderAccount.tsx b/src/entities/HeaderAccount/HeaderAccount.tsx index c7179960..0e022e10 100644 --- a/src/entities/HeaderAccount/HeaderAccount.tsx +++ b/src/entities/HeaderAccount/HeaderAccount.tsx @@ -29,7 +29,7 @@ export type HeaderAccountProps = { changeSearchModalState?: () => void handleClose?: () => void counter: number - total: string + total: number } const LazyLoginForm = lazy(() => import('@/features/login/index')) @@ -40,7 +40,7 @@ const LazyLoginForm = lazy(() => import('@/features/login/index')) * @param {boolean} changeSearchModalState - состояние открытия модального окна поиска; * @param {function} handleClose - функция закрытия модального окна; * @param {string} counter - счетчик количества товаров в корзине; - * @param {string} total - полная стоимость; + * @param {number} total - полная стоимость; */ const HeaderAccount: FC = ({ isMenuModalOpen, @@ -197,7 +197,7 @@ const HeaderAccount: FC = ({ ? `${styles.headerAccount__cartTotal} ${styles.headerAccount__cartTotal_dark}` : `${styles.headerAccount__cartTotal}` }> - {total} + {total.toFixed(0)} ₽
diff --git a/src/features/HeaderMenuModal/ui/HeaderMenuModal.stories.tsx b/src/features/HeaderMenuModal/ui/HeaderMenuModal.stories.tsx index 0c10228e..6919d6d9 100644 --- a/src/features/HeaderMenuModal/ui/HeaderMenuModal.stories.tsx +++ b/src/features/HeaderMenuModal/ui/HeaderMenuModal.stories.tsx @@ -39,6 +39,9 @@ export const Default: Story = () => { } ] + const counter = 5 + const total = 500 + return (
{ phoneNumber={phoneNumber} isMenuModalOpen={true} handleClose={() => {}} + counter={counter} + total={total} />
) } -Default.args = {} +Default.args = { counter: 5, total: 500 } diff --git a/src/features/HeaderMenuModal/ui/HeaderMenuModal.tsx b/src/features/HeaderMenuModal/ui/HeaderMenuModal.tsx index 6617590b..555b7dc2 100644 --- a/src/features/HeaderMenuModal/ui/HeaderMenuModal.tsx +++ b/src/features/HeaderMenuModal/ui/HeaderMenuModal.tsx @@ -7,7 +7,6 @@ import ContactCard from '@/entities/ContactCard/ContactCard' import HeaderAccount from '@/entities/HeaderAccount/HeaderAccount' import ModalHeading from '@/entities/ModalHeading' import { headerMenuData } from '@/mockData/headerMenuData' -import { headerAccountData } from '@/shared/mockData/headerAccountData' import { messengerArray } from '@/shared/model/types/messengerArray' import Link from '@/shared/ui/Link/Link' import Paragraph from '@/shared/ui/Paragraph/Paragraph' @@ -15,7 +14,7 @@ import Paragraph from '@/shared/ui/Paragraph/Paragraph' import HeaderMenuModalCatalog from '../HeaderMenuModalCatalog/HeaderMenuModalCatalog' import HeaderMenuModalLink from '../HeaderMenuModalLink/HeaderMenuModalLink' import HeaderMenuModalSublinks from '../HeaderMenuModalSublinks/HeaderMenuModalSublinks' -import { ICategory } from '../model/types/types' +import type { ICategory } from '../model/types/types' import styles from './HeaderMenuModal.module.scss' @@ -24,6 +23,8 @@ interface IHeaderMenuModal { phoneNumber?: string isMenuModalOpen?: boolean handleClose?: () => void + counter: number + total: number } /** @@ -34,7 +35,14 @@ interface IHeaderMenuModal { * @param {function} handleClose - функция закрытия модального окна; */ -const HeaderMenuModal: FC = ({ categories, phoneNumber, isMenuModalOpen, handleClose }) => { +const HeaderMenuModal: FC = ({ + categories, + phoneNumber, + isMenuModalOpen, + handleClose, + counter, + total +}) => { const [isActive, setIsActive] = useState(false) const [isCatalog, setIsCatalog] = useState(false) const [choice, setChoice] = useState(0) @@ -63,7 +71,8 @@ const HeaderMenuModal: FC = ({ categories, phoneNumber, isMenu diff --git a/src/widgets/Header/Header.tsx b/src/widgets/Header/Header.tsx index 288efd36..efe45ce3 100644 --- a/src/widgets/Header/Header.tsx +++ b/src/widgets/Header/Header.tsx @@ -1,9 +1,9 @@ import classNames from 'classnames' import { FC, lazy, Suspense, useEffect, useMemo, useState } from 'react' -import { useDispatch, useSelector } from 'react-redux' +import { useSelector } from 'react-redux' -import { AppDispatch } from '@/app/providers/StoreProvider/config/store' import MenuIcon from '@/assets/icons/iconMenu.svg' +import { useCartSelector } from '@/entities/CartEntity/model/hooks/sliceHooks' import { getLoading, selectCategories, @@ -17,9 +17,9 @@ import SearchProduct from '@/features/SearchProduct' import { Routes } from '@/shared/config/routerConfig/routes' import ArrowIcon from '@/shared/icons/arrow.svg' import IconCategories from '@/shared/icons/IconCategories.svg' +import { useAppDispatch } from '@/shared/libs/hooks/store' import { useResize } from '@/shared/libs/hooks/useResize' import { linkItems } from '@/shared/mockData/catalogListData' -import { headerAccountData } from '@/shared/mockData/headerAccountData' import { Button } from '@/shared/ui/Button/Button' import CatalogLink from '@/shared/ui/CatalogLink/CatalogLink' import CatalogLinkSkeleton from '@/shared/ui/CatalogLink/ui/skeleton/CatalogLinkSkeleton' @@ -47,7 +47,8 @@ const HeaderMenuModal = lazy(() => import('@/features/HeaderMenuModal')) */ const Header: FC = () => { - const dispatch = useDispatch() + const dispatch = useAppDispatch() + const cart = useCartSelector() const categories = useSelector(selectCategories) const coreBaseData = useSelector(getCoreBaseHeaderSelector) const displayedCategories = useSelector(selectDisplayedCategories) @@ -165,6 +166,8 @@ const Header: FC = () => { phoneNumber={phoneNumber} isMenuModalOpen={isMenuModalOpen} handleClose={closeModal} + counter={cart && cart.cart && cart.cart.products?.length} + total={cart && cart.cart?.cart_full_price} /> @@ -230,7 +233,11 @@ const Header: FC = () => { {isScreenLg && } - + {isScreenLg && (