diff --git a/src/components/CustomRadioButtons.tsx b/src/components/CustomRadioButtons.tsx index d0b17a0..49587c1 100644 --- a/src/components/CustomRadioButtons.tsx +++ b/src/components/CustomRadioButtons.tsx @@ -20,7 +20,7 @@ export const CustomRadioButtons: React.FC = ({ setType, _mocsk_ }) => { (false); + + const { remove } = basketStore(); + + const totalSum = Object.values(content).reduce((accamulator, { price }) => (accamulator += price), 0); + const name = Object.values(content).map(({ name }) => name); + + return ( + + + setIsExpanded((prev) => !prev)} + sx={{ + height: "72px", + + display: "flex", + alignItems: "center", + justifyContent: "space-between", + cursor: "pointer", + userSelect: "none", + }} + > + + {name[0]} + + + + + {totalSum} руб. + + + + + {isExpanded && + Object.values(content).map(({ desc, id, privelegeid, amount, price }, index) => ( + + + {desc} + + + + {price} руб. + + + remove(type, id)} + component={ClearIcon} + /> + + + ))} + + + ); +} diff --git a/src/components/Drawer/DrawerTotalPrice.tsx b/src/components/Drawer/DrawerTotalPrice.tsx new file mode 100644 index 0000000..21d98d3 --- /dev/null +++ b/src/components/Drawer/DrawerTotalPrice.tsx @@ -0,0 +1,85 @@ +import { Box, Typography, useMediaQuery, useTheme } from "@mui/material"; +import { useNavigate } from "react-router-dom"; + +import CustomButton from "../CustomButton"; + +export const DrawerTotalPrice = () => { + const theme = useTheme(); + const upMd = useMediaQuery(theme.breakpoints.up("md")); + const navigate = useNavigate(); + return ( + + + + Итоговая цена + + + Текст-заполнитель — это текст, который имеет Текст-заполнитель — это текст, который имеет Текст-заполнитель — + это текст, который имеет Текст-заполнитель — это текст, который имеет Текст-заполнитель + + + + + + 20 190 руб. + + + 6 380 руб. + + + navigate("/basket")} + sx={{ + mt: "25px", + backgroundColor: theme.palette.brightPurple.main, + }} + > + Оплатить + + + + ); +}; diff --git a/src/components/Drawer/Drawers.tsx b/src/components/Drawer/Drawers.tsx new file mode 100644 index 0000000..501c239 --- /dev/null +++ b/src/components/Drawer/Drawers.tsx @@ -0,0 +1,86 @@ +import { Typography, Drawer, useMediaQuery, useTheme, Box, IconButton, SvgIcon } from "@mui/material"; +import { IconsCreate } from "@root/lib/IconsCreate"; +import ArrowBackIcon from "@mui/icons-material/ArrowBack"; +import ClearIcon from "@mui/icons-material/Clear"; + +import { basketStore } from "@root/stores/BasketStore"; +import { useState } from "react"; + +import BasketIcon from "../../assets/Icons/BasketIcon.svg"; +import SectionWrapper from "../SectionWrapper"; +import React from "react"; +import CustomWrapperDrawer from "./CustomWrapperDrawer"; +import { DrawerTotalPrice } from "./DrawerTotalPrice"; + +interface TabPanelProps { + index: number; + value: number; + children?: React.ReactNode; + mt: string; +} + +function TabPanel({ index, value, children, mt }: TabPanelProps) { + return ( + + ); +} + +export const Drawers = () => { + const [tabIndex, setTabIndex] = useState(0); + const { templ, squiz, reducer, open, openDrawer } = basketStore(); + const theme = useTheme(); + const upMd = useMediaQuery(theme.breakpoints.up("md")); + + return ( + + + + + + + + + {!upMd && ( + + + + )} + + Корзина + + + + + + {Object.keys(templ).length > 0 ? : <>} + {Object.keys(squiz).length > 0 ? : <>} + {Object.keys(reducer).length > 0 ? : <>} + + + + + + + ); +}; diff --git a/src/components/Navbar/NavbarFull.tsx b/src/components/Navbar/NavbarFull.tsx index 7eac696..3357248 100644 --- a/src/components/Navbar/NavbarFull.tsx +++ b/src/components/Navbar/NavbarFull.tsx @@ -1,20 +1,19 @@ +import Icon from "@mui/material/Icon"; import { useEffect, useState } from "react"; -import { useNavigate } from "react-router-dom"; import { Box, Button, Container, IconButton, Typography, useTheme } from "@mui/material"; +import { Drawers } from "../Drawer/Drawers"; import NavMenuItem from "../NavMenuItem"; import SectionWrapper from "../SectionWrapper"; -import { basketStore } from "@root/stores/BasketStore"; -import { IconsCreate } from "@root/lib/IconsCreate"; +import { basketStore } from "@stores/BasketStore"; import { authStore } from "@stores/makeRequest"; -import BasketIcon from "../../assets/Icons/BasketIcon.svg"; import LogoutIcon from "../icons/LogoutIcon"; import WalletIcon from "../icons/WalletIcon"; import CustomAvatar from "./Avatar"; import PenaLogo from "../PenaLogo"; -import Icon from "@mui/material/Icon"; +import { useLocation } from "react-router-dom"; interface Props { isLoggedIn: boolean; @@ -22,15 +21,18 @@ interface Props { export default function NavbarFull({ isLoggedIn }: Props) { const theme = useTheme(); - const navigate = useNavigate(); const { clearToken } = authStore(); const [basketQuantity, setBasketQuantity] = useState(0); + const location = useLocation(); - const { templ, squiz, reducer } = basketStore(); + const { templ, squiz, reducer, open } = basketStore(); useEffect(() => { setBasketQuantity(Object.keys(templ).length + Object.keys(squiz).length); - }); + if (location.pathname === "/basket") { + open(false)(); + } + }, [templ, squiz, location.pathname, open]); async function handleLogoutClick() { clearToken(); @@ -73,9 +75,9 @@ export default function NavbarFull({ isLoggedIn }: Props) { ml: "auto", }} > - navigate("/basket")} sx={{ p: 0 }}> + - + {basketQuantity && ( { const theme = useTheme(); - const upMd = useMediaQuery(theme.breakpoints.up("md")); - const [tabIndex, setTabIndex] = useState(0); - const { templ, squiz, reducer } = basketStore(); + const [tabIndex, setTabIndex] = useState(0); + const location = useLocation(); + + const { templ, squiz, reducer, open } = basketStore(); const handleChange = (event: React.SyntheticEvent, newValue: number) => { setTabIndex(newValue); }; + open(false); + return ( { )} - Корзина + + Корзина + {Object.keys(templ).length > 0 ? : <>} diff --git a/src/stores/BasketStore.ts b/src/stores/BasketStore.ts index aa9c9f2..ef34e3f 100644 --- a/src/stores/BasketStore.ts +++ b/src/stores/BasketStore.ts @@ -39,6 +39,7 @@ export const basketStore = create()((set, get) => ({ }, }, reducer: {}, + openDrawer: false, add: ({ id, obj, type }: any) => { const store: any = get()[type] || {}; const newStore = { @@ -62,4 +63,8 @@ export const basketStore = create()((set, get) => ({ set({ [type]: newStore }); }, + + open: (boolean: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => { + set(() => ({ openDrawer: boolean })); + }, }));