fix: Basket

src/pages/Basket/Basket.tsx

@@ -1,4 +1,10 @@
-import { Box, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material";
+import {
+  Box,
+  IconButton,
+  Typography,
+  useMediaQuery,
+  useTheme,
+} from "@mui/material";
 import SectionWrapper from "@components/SectionWrapper";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import TotalPrice from "@components/TotalPrice";
@@ -6,16 +12,25 @@ import CustomWrapper from "./CustomWrapper";
 import { useCart } from "@root/utils/hooks/useCart";
 import { useCustomTariffsStore } from "@root/stores/customTariffs";
 
-
 export default function Basket() {
   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 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;
@@ -37,7 +52,9 @@ export default function Basket() {
         }}
       >
         {!upMd && (
-                    <IconButton sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
+          <IconButton
+            sx={{ p: 0, height: "28px", width: "28px", color: "black" }}
+          >
             <ArrowBackIcon />
           </IconButton>
         )}
@@ -45,17 +62,22 @@ export default function Basket() {
           Корзина
         </Typography>
       </Box>
-            <Box sx={{
+      <Box
+        sx={{
           mt: upMd ? "27px" : "10px",
-            }}>
-                {cart.services.map(serviceData =>
+        }}
+      >
+        {cart.services.map((serviceData) => (
           <CustomWrapper
             key={serviceData.serviceKey}
             serviceData={serviceData}
           />
-                )}
+        ))}
       </Box>
-            <TotalPrice priceBeforeDiscounts={totalPriceBeforeDiscounts} priceAfterDiscounts={totalPriceAfterDiscounts} />
+      <TotalPrice
+        priceBeforeDiscounts={totalPriceBeforeDiscounts}
+        priceAfterDiscounts={totalPriceAfterDiscounts}
+      />
     </SectionWrapper>
   );
 }

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<string, string> = {
   templategen: "Шаблонизатор",
   squiz: "Опросник",
@@ -41,6 +46,20 @@ export default function CustomWrapper({ serviceData }: Props) {
       });
   }
 
+  const deleteService = async (event: MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+
+    setIsExpanded(false);
+
+    for (const { tariffId } of serviceData.privileges) {
+      try {
+        await removeTariffFromCart(tariffId);
+      } catch {}
+    }
+
+    enqueueSnackbar("Тарифы удален");
+  };
+
   return (
     <Box
       sx={{
@@ -70,26 +89,39 @@ export default function CustomWrapper({ serviceData }: Props) {
           sx={{
             height: "72px",
             px: "20px",
-
             display: "flex",
+            gap: "15px",
             alignItems: "center",
             justifyContent: "space-between",
             cursor: "pointer",
             userSelect: "none",
           }}
         >
+          <Box
+            sx={{
+              width: "50px",
+              height: "100%",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <ExpandIcon isExpanded={isExpanded} />
+          </Box>
           <Typography
             sx={{
+              width: "100%",
               fontSize: upMd ? "20px" : "16px",
               lineHeight: upMd ? undefined : "19px",
               fontWeight: 500,
               color: theme.palette.text.secondary,
               px: 0,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
             }}
           >
             {name[serviceData.serviceKey]}
           </Typography>
-
           <Box
             sx={{
               display: "flex",
@@ -108,19 +140,13 @@ export default function CustomWrapper({ serviceData }: Props) {
             >
               {currencyFormatter.format(serviceData.price / 100)}
             </Typography>
-            <Box
-              sx={{
-                borderLeft: upSm ? "1px solid #9A9AAF" : "none",
-                paddingLeft: upSm ? "24px" : 0,
-                height: "100%",
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-              }}
+          </Box>
+          <IconButton
+            onClick={deleteService}
+            sx={{ padding: 0, height: "22px", width: "22px" }}
           >
-              <ExpandIcon isExpanded={isExpanded} />
-            </Box>
-          </Box>
+            <CrossIcon style={{ height: "22 px", width: "22px" }} />
+          </IconButton>
         </Box>
         {isExpanded &&
           serviceData.privileges.map((privilege) => (