diff --git a/src/components/Drawers.tsx b/src/components/Drawers.tsx index b9d0fa8..ebfe588 100644 --- a/src/components/Drawers.tsx +++ b/src/components/Drawers.tsx @@ -1,5 +1,5 @@ import { useState, useRef } from "react"; -import { Typography, Drawer, useMediaQuery, useTheme, Box, IconButton, Badge, Button } from "@mui/material"; +import { Typography, Drawer, useMediaQuery, useTheme, Box, IconButton, Badge, Button, Alert } from "@mui/material"; import SectionWrapper from "./SectionWrapper"; import CustomWrapperDrawer from "./CustomWrapperDrawer"; import { NotificationsModal } from "./NotificationsModal"; @@ -22,328 +22,342 @@ import { handleComponentError } from "@root/utils/handleComponentError"; import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline"; function Drawers() { - const [openNotificationsModal, setOpenNotificationsModal] = useState(false); - const [loading, setLoading] = useState(false); - const bellRef = useRef(null); - const navigate = useNavigate(); - const theme = useTheme(); - const upMd = useMediaQuery(theme.breakpoints.up("md")); - const isTablet = useMediaQuery(theme.breakpoints.down(1000)); - const isDrawerOpen = useCartStore((state) => state.isDrawerOpen); - const cart = useCart(); - const userAccount = useUserStore((state) => state.userAccount); - const tickets = useTicketStore((state) => state.tickets); - const [notEnoughMoneyAmount, setNotEnoughMoneyAmount] = useState(0); + const [openNotificationsModal, setOpenNotificationsModal] = useState(false); + const [loading, setLoading] = useState(false); + const bellRef = useRef(null); + const navigate = useNavigate(); + const theme = useTheme(); + const upMd = useMediaQuery(theme.breakpoints.up("md")); + const isTablet = useMediaQuery(theme.breakpoints.down(1000)); + const isDrawerOpen = useCartStore((state) => state.isDrawerOpen); + const cart = useCart(); + const userAccount = useUserStore((state) => state.userAccount); + const tickets = useTicketStore((state) => state.tickets); + const [notEnoughMoneyAmount, setNotEnoughMoneyAmount] = useState(0); - const notificationsCount = tickets.filter( - ({ user, top_message }) => user !== top_message.user_id && top_message.shown.me !== 1 - ).length; + const notificationsCount = tickets.filter( + ({ user, top_message }) => user !== top_message.user_id && top_message.shown.me !== 1 + ).length; - async function handlePayClick() { - setLoading(true); + async function handlePayClick() { + setLoading(true); - const [payCartResponse, payCartError] = await payCart(); + const [payCartResponse, payCartError] = await payCart(); - if (payCartError) { - if (payCartError.includes("insufficient funds: ")) { - const notEnoughMoneyAmount = parseInt(payCartError.replace(/^.*insufficient\sfunds:\s(?=\d+$)/, "")); - setNotEnoughMoneyAmount(notEnoughMoneyAmount); - } + if (payCartError) { + if (payCartError.includes("insufficient funds: ")) { + const notEnoughMoneyAmount = parseInt(payCartError.replace(/^.*insufficient\sfunds:\s(?=\d+$)/, "")); + setNotEnoughMoneyAmount(notEnoughMoneyAmount); + } - setLoading(false); + setLoading(false); - closeCartDrawer() - navigate("payment") - if (!payCartError.includes("insufficient funds: ")) enqueueSnackbar(payCartError); - return + if (!payCartError.includes("insufficient funds: ")) enqueueSnackbar(payCartError); + return; + } + + if (payCartResponse) { + setUserAccount(payCartResponse); + } + + setLoading(false); + closeCartDrawer(); } - if (payCartResponse) { - setUserAccount(payCartResponse); + function handleReplenishWallet() { + closeCartDrawer(); + navigate("/payment", { state: { notEnoughMoneyAmount } }); } - setLoading(false); - closeCartDrawer(); - } - - function handleReplenishWallet() { - navigate("/payment", { state: { notEnoughMoneyAmount } }); - } - - return ( - - setOpenNotificationsModal((isOpened) => !isOpened)} - sx={{ - cursor: "pointer", - borderRadius: "6px", - background: openNotificationsModal ? theme.palette.purple.main : theme.palette.background.default, - "& .MuiBadge-badge": { - background: openNotificationsModal ? theme.palette.background.default : theme.palette.purple.main, - color: openNotificationsModal ? theme.palette.purple.main : theme.palette.background.default, - }, - "& svg > path:first-of-type": { - fill: openNotificationsModal ? "#FFFFFF" : "#9A9AAF", - }, - "& svg > path:last-child": { - stroke: openNotificationsModal ? "#FFFFFF" : "#9A9AAF", - }, - "&:hover": { - background: theme.palette.purple.main, - "& .MuiBox-root": { - background: theme.palette.purple.main, - }, - "& .MuiBadge-badge": { - background: theme.palette.background.default, - color: theme.palette.purple.main, - }, - "& svg > path:first-of-type": { fill: "#FFFFFF" }, - "& svg > path:last-child": { stroke: "#FFFFFF" }, - }, - }} - > - - - - - user !== top_message.user_id) - .map((ticket) => ({ - text: "У вас новое сообщение от техподдержки", - date: new Date(ticket.updated_at).toLocaleDateString(), - url: `/support/${ticket.id}`, - watched: ticket.user === ticket.top_message.user_id || ticket.top_message.shown.me === 1, - }))} - /> - path:nth-of-type(1)": { fill: "#FFFFFF" }, - "& svg > path:nth-of-type(2)": { fill: "#FFFFFF" }, - "& svg > path:nth-of-type(3)": { stroke: "#FFFFFF" }, - }, - }} - > - - - - - - - - - Корзина - - - - - - - {cart.services.map((serviceData) => { -console.log('aaaaaaaaaaAAAAAAAAAAAAAA', (cart.appliedCartPurchasesDiscount?.Target?.Factor || 1)*(cart.appliedLoyaltyDiscount?.Target?.Factor || 1), (cart.appliedCartPurchasesDiscount?.Target?.Factor || 1),(cart.appliedLoyaltyDiscount?.Target?.Factor || 1)) - return ( - - )})} - - + setOpenNotificationsModal((isOpened) => !isOpened)} sx={{ - width: upMd ? "100%" : undefined, - display: "flex", - flexWrap: "wrap", - flexDirection: "column", + cursor: "pointer", + borderRadius: "6px", + background: openNotificationsModal ? theme.palette.purple.main : theme.palette.background.default, + "& .MuiBadge-badge": { + background: openNotificationsModal ? theme.palette.background.default : theme.palette.purple.main, + color: openNotificationsModal ? theme.palette.purple.main : theme.palette.background.default, + }, + "& svg > path:first-of-type": { + fill: openNotificationsModal ? "#FFFFFF" : "#9A9AAF", + }, + "& svg > path:last-child": { + stroke: openNotificationsModal ? "#FFFFFF" : "#9A9AAF", + }, + "&:hover": { + background: theme.palette.purple.main, + "& .MuiBox-root": { + background: theme.palette.purple.main, + }, + "& .MuiBadge-badge": { + background: theme.palette.background.default, + color: theme.palette.purple.main, + }, + "& svg > path:first-of-type": { fill: "#FFFFFF" }, + "& svg > path:last-child": { stroke: "#FFFFFF" }, + }, }} - > - - Итоговая цена - - - Здесь написана окончательная стоимость всех услуг сложенных в корзину с учётом всех скидок. - - - После нажатия кнопки оплатить, вы будете перенаправлены на форму оплаты, для оплаты ВСЕЙ корзины (рекомендуем перед оплатой, убрать все лишнее) - - - + > - - - {`${ - ((cart.priceBeforeDiscounts - cart.priceAfterDiscounts) / (cart.priceBeforeDiscounts / 100)).toFixed(0) - }%`} - - ) : null - } - color="success" - sx={{ - "& .MuiBadge-dot": { - backgroundColor: "#ff4904", - width: "10px", - height: "10px", - }, - "& .MuiBadge-anchorOriginTopRightRectangle": { - backgroundColor: "#ff4904", - top: "5px", - right: "5px", - }, - - "& .MuiBadge-anchorOriginTopRightRectangular": { - backgroundColor: "#ff4904", - height: "31px", - padding: "5px 10px", - right: "20px", - }, - }} - > - - - {currencyFormatter.format(cart.priceBeforeDiscounts / 100)} - - - {currencyFormatter.format(cart.priceAfterDiscounts / 100)} - - - - - - - - - - - ); + + + + user !== top_message.user_id) + .map((ticket) => ({ + text: "У вас новое сообщение от техподдержки", + date: new Date(ticket.updated_at).toLocaleDateString(), + url: `/support/${ticket.id}`, + watched: ticket.user === ticket.top_message.user_id || ticket.top_message.shown.me === 1, + }))} + /> + path:nth-of-type(1)": { fill: "#FFFFFF" }, + "& svg > path:nth-of-type(2)": { fill: "#FFFFFF" }, + "& svg > path:nth-of-type(3)": { stroke: "#FFFFFF" }, + }, + }} + > + + + + + + + + + Корзина + + + + + + + {cart.services.map((serviceData) => { + console.log('aaaaaaaaaaAAAAAAAAAAAAAA', (cart.appliedCartPurchasesDiscount?.Target?.Factor || 1)*(cart.appliedLoyaltyDiscount?.Target?.Factor || 1), (cart.appliedCartPurchasesDiscount?.Target?.Factor || 1),(cart.appliedLoyaltyDiscount?.Target?.Factor || 1)) + return ( + + )})} + + + + Итоговая цена + + + Здесь написана окончательная стоимость всех услуг сложенных в корзину с учётом всех скидок. + + + После нажатия кнопки оплатить, вы будете перенаправлены на форму оплаты, для оплаты ВСЕЙ корзины (рекомендуем перед оплатой, убрать все лишнее) + + + + + - + {`${ + ((cart.priceBeforeDiscounts - cart.priceAfterDiscounts) / (cart.priceBeforeDiscounts / 100)).toFixed(0) + }%`} + + ) : null + } + color="success" + sx={{ + "& .MuiBadge-dot": { + backgroundColor: "#ff4904", + width: "10px", + height: "10px", + }, + "& .MuiBadge-anchorOriginTopRightRectangle": { + backgroundColor: "#ff4904", + top: "5px", + right: "5px", + }, + + "& .MuiBadge-anchorOriginTopRightRectangular": { + backgroundColor: "#ff4904", + height: "31px", + padding: "5px 10px", + right: "20px", + }, + }} + > + + + {currencyFormatter.format(cart.priceBeforeDiscounts / 100)} + + + {currencyFormatter.format(cart.priceAfterDiscounts / 100)} + + + + + {notEnoughMoneyAmount > 0 && ( + + Не хватает {currencyFormatter.format(notEnoughMoneyAmount / 100)} + + )} + + + + + + + + + ); } export default withErrorBoundary(Drawers, { - fallback: ( - - - - ), - onError: handleComponentError, + fallback: ( + + + + ), + onError: handleComponentError, });