diff --git a/src/assets/Icons/cross.svg b/src/assets/Icons/cross.svg new file mode 100644 index 0000000..a39e226 --- /dev/null +++ b/src/assets/Icons/cross.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/CustomWrapperDrawer.tsx b/src/components/CustomWrapperDrawer.tsx index 4d9fa1c..f938319 100644 --- a/src/components/CustomWrapperDrawer.tsx +++ b/src/components/CustomWrapperDrawer.tsx @@ -1,157 +1,211 @@ import { useState } from "react"; -import { Box, SvgIcon, Typography, useMediaQuery, useTheme } from "@mui/material"; +import { + Box, + SvgIcon, + IconButton, + Typography, + useMediaQuery, + useTheme, +} from "@mui/material"; import ClearIcon from "@mui/icons-material/Clear"; import { currencyFormatter } from "@root/utils/currencyFormatter"; import { removeTariffFromCart } from "@root/stores/user"; import { enqueueSnackbar } from "notistack"; import { ServiceCartData, getMessageFromFetchError } from "@frontend/kitui"; +import ExpandIcon from "@components/icons/ExpandIcon"; +import { ReactComponent as CrossIcon } from "@root/assets/Icons/cross.svg"; -const name: Record = { templategen: "Шаблонизатор", squiz: "Опросник", reducer: "Скоращатель ссылок" }; +import type { MouseEvent } from "react"; + +const name: Record = { + templategen: "Шаблонизатор", + squiz: "Опросник", + reducer: "Скоращатель ссылок", +}; interface Props { - serviceData: ServiceCartData; + serviceData: ServiceCartData; } export default function CustomWrapperDrawer({ serviceData }: Props) { - const theme = useTheme(); - const upMd = useMediaQuery(theme.breakpoints.up("md")); - const upSm = useMediaQuery(theme.breakpoints.up("sm")); - const [isExpanded, setIsExpanded] = useState(false); + const theme = useTheme(); + const upMd = useMediaQuery(theme.breakpoints.up("md")); + const upSm = useMediaQuery(theme.breakpoints.up("sm")); + const [isExpanded, setIsExpanded] = useState(false); - function handleItemDeleteClick(tariffId: string) { - removeTariffFromCart(tariffId).then(() => { - enqueueSnackbar("Тариф удален"); - }).catch(error => { - const message = getMessageFromFetchError(error); - if (message) enqueueSnackbar(message); - }); + function handleItemDeleteClick(tariffId: string) { + removeTariffFromCart(tariffId) + .then(() => { + enqueueSnackbar("Тариф удален"); + }) + .catch((error) => { + const message = getMessageFromFetchError(error); + if (message) enqueueSnackbar(message); + }); + } + + const deleteService = async (event: MouseEvent) => { + event.stopPropagation(); + + setIsExpanded(false); + + for (const { tariffId } of serviceData.privileges) { + try { + await removeTariffFromCart(tariffId); + } catch {} } - return ( + enqueueSnackbar("Тарифы удален"); + }; + + return ( + + setIsExpanded((prev) => !prev)} + sx={{ + height: "72px", + display: "flex", + gap: "10px", + alignItems: "center", + justifyContent: "space-between", + cursor: "pointer", + userSelect: "none", + }} > - + + - setIsExpanded((prev) => !prev)} - sx={{ - height: "72px", - - display: "flex", - alignItems: "center", - justifyContent: "space-between", - cursor: "pointer", - userSelect: "none", - }} - > - - {name[serviceData.serviceKey]} - - - - - {currencyFormatter.format(serviceData.price / 100)} - - - - - {isExpanded && - serviceData.privileges.map(privilege => ( - - - {privilege.description} - - - - {currencyFormatter.format(privilege.price / 100)} - - - handleItemDeleteClick(privilege.tariffId)} - component={ClearIcon} - /> - - - ))} + {name[serviceData.serviceKey]} + + + + {currencyFormatter.format(serviceData.price / 100)} + + + + + - ); + {isExpanded && + serviceData.privileges.map((privilege) => ( + + + {privilege.description} + + + + {currencyFormatter.format(privilege.price / 100)} + + handleItemDeleteClick(privilege.tariffId)} + component={ClearIcon} + /> + + + ))} + + + ); } diff --git a/src/components/Drawers.tsx b/src/components/Drawers.tsx index d314b14..1f4ee61 100644 --- a/src/components/Drawers.tsx +++ b/src/components/Drawers.tsx @@ -6,11 +6,9 @@ import { useTheme, Box, IconButton, - SvgIcon, Badge, } from "@mui/material"; import ArrowBackIcon from "@mui/icons-material/ArrowBack"; -import ClearIcon from "@mui/icons-material/Clear"; import { useTickets } from "@frontend/kitui"; import SectionWrapper from "./SectionWrapper"; import CustomWrapperDrawer from "./CustomWrapperDrawer"; @@ -34,6 +32,7 @@ import { import { ReactComponent as BellIcon } from "@root/assets/Icons/bell.svg"; import { ReactComponent as CartIcon } from "@root/assets/Icons/cart.svg"; +import { ReactComponent as CrossIcon } from "@root/assets/Icons/cross.svg"; export default function Drawers() { const [openNotificationsModal, setOpenNotificationsModal] = @@ -227,15 +226,22 @@ export default function Drawers() { Корзина - + {cart.services.map((serviceData) => ( - + + + ))} state.summaryPriceBeforeDiscountsMap); - const summaryPriceAfterDiscountsMap = useCustomTariffsStore(state => state.summaryPriceAfterDiscountsMap); + const theme = useTheme(); + const upMd = useMediaQuery(theme.breakpoints.up("md")); + const cart = useCart(); + const summaryPriceBeforeDiscountsMap = useCustomTariffsStore( + (state) => state.summaryPriceBeforeDiscountsMap + ); + const summaryPriceAfterDiscountsMap = useCustomTariffsStore( + (state) => state.summaryPriceAfterDiscountsMap + ); - const basePrice = Object.values(summaryPriceBeforeDiscountsMap).reduce((a, e) => a + e, 0); - const discountedPrice = Object.values(summaryPriceAfterDiscountsMap).reduce((a, e) => a + e, 0); + const basePrice = Object.values(summaryPriceBeforeDiscountsMap).reduce( + (a, e) => a + e, + 0 + ); + const discountedPrice = Object.values(summaryPriceAfterDiscountsMap).reduce( + (a, e) => a + e, + 0 + ); - const totalPriceBeforeDiscounts = cart.priceBeforeDiscounts + basePrice; - const totalPriceAfterDiscounts = cart.priceAfterDiscounts + discountedPrice; + const totalPriceBeforeDiscounts = cart.priceBeforeDiscounts + basePrice; + const totalPriceAfterDiscounts = cart.priceAfterDiscounts + discountedPrice; - return ( - - - {!upMd && ( - - - - )} - - Корзина - - - - {cart.services.map(serviceData => - - )} - - - - ); + return ( + + + {!upMd && ( + + + + )} + + Корзина + + + + {cart.services.map((serviceData) => ( + + ))} + + + + ); } diff --git a/src/pages/Basket/CustomWrapper.tsx b/src/pages/Basket/CustomWrapper.tsx index d6f12f0..0aec26d 100644 --- a/src/pages/Basket/CustomWrapper.tsx +++ b/src/pages/Basket/CustomWrapper.tsx @@ -3,6 +3,7 @@ import { Box, SvgIcon, Typography, + IconButton, useMediaQuery, useTheme, } from "@mui/material"; @@ -14,6 +15,10 @@ import { removeTariffFromCart } from "@root/stores/user"; import { enqueueSnackbar } from "notistack"; import { ServiceCartData, getMessageFromFetchError } from "@frontend/kitui"; +import { ReactComponent as CrossIcon } from "@root/assets/Icons/cross.svg"; + +import type { MouseEvent } from "react"; + const name: Record = { templategen: "Шаблонизатор", squiz: "Опросник", @@ -41,6 +46,20 @@ export default function CustomWrapper({ serviceData }: Props) { }); } + const deleteService = async (event: MouseEvent) => { + event.stopPropagation(); + + setIsExpanded(false); + + for (const { tariffId } of serviceData.privileges) { + try { + await removeTariffFromCart(tariffId); + } catch {} + } + + enqueueSnackbar("Тарифы удален"); + }; + return ( + + + {name[serviceData.serviceKey]} - {currencyFormatter.format(serviceData.price / 100)} - - - + + + {isExpanded && serviceData.privileges.map((privilege) => ( @@ -143,17 +169,14 @@ export default function CustomWrapper({ serviceData }: Props) { fontSize: upMd ? undefined : "16px", lineHeight: upMd ? undefined : "19px", color: theme.palette.grey3.main, + width: "100%", }} > {privilege.description} @@ -166,27 +189,18 @@ export default function CustomWrapper({ serviceData }: Props) { > {currencyFormatter.format(privilege.price / 100)} - {upSm ? ( - handleItemDeleteClick(privilege.tariffId)} - sx={{ - color: theme.palette.text.secondary, - borderBottom: `1px solid ${theme.palette.text.secondary}`, - width: "max-content", - lineHeight: "19px", - cursor: "pointer", - }} - > - Удалить - - ) : ( - handleItemDeleteClick(privilege.tariffId)} - component={ClearIcon} - sx={{ fill: "#7E2AEA" }} - /> - )} + + handleItemDeleteClick(privilege.tariffId)} + > + ))}