Cart style CustomWrapper

src/pages/Cart/Cart.tsx

@@ -1,10 +1,4 @@
-import {
+import { Box, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material";
-  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";
@@ -25,6 +19,8 @@ export default function Cart() {
 
   const handleCustomBackNavigation = usePrevLocation(location);
 
+  console.log(cart.services);
+
   return (
     <SectionWrapper
       maxWidth="lg"
@@ -43,10 +39,7 @@ export default function Cart() {
         }}
       >
         {isMobile && (
-          <IconButton
+          <IconButton onClick={handleCustomBackNavigation} sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
-            onClick={handleCustomBackNavigation}
-            sx={{ p: 0, height: "28px", width: "28px", color: "black" }}
-          >
             <ArrowBackIcon />
           </IconButton>
         )}
@@ -64,17 +57,16 @@ export default function Cart() {
           mt: upMd ? "27px" : "10px",
         }}
       >
-        {cart.services.map((serviceData) => (
+        {cart.services.map((serviceData, index) => (
           <CustomWrapper
             key={serviceData.serviceKey}
             serviceData={serviceData}
+            first={index === 0}
+            last={index === cart.services.length - 1}
           />
         ))}
       </Box>
-      <TotalPrice
+      <TotalPrice priceBeforeDiscounts={totalPriceBeforeDiscounts} priceAfterDiscounts={totalPriceAfterDiscounts} />
-        priceBeforeDiscounts={totalPriceBeforeDiscounts}
-        priceAfterDiscounts={totalPriceAfterDiscounts}
-      />
     </SectionWrapper>
   );
 }

src/pages/Cart/CustomWrapper.tsx

@@ -2,13 +2,11 @@ import { useState } from "react";
 import { Box, SvgIcon, Typography, useMediaQuery, useTheme } from "@mui/material";
 import ExpandIcon from "@components/icons/ExpandIcon";
 import ClearIcon from "@mui/icons-material/Clear";
-import { cardShadow } from "@root/utils/theme";
 import { currencyFormatter } from "@root/utils/currencyFormatter";
 import { removeTariffFromCart } from "@root/stores/user";
 import { enqueueSnackbar } from "notistack";
 import { CloseButton, ServiceCartData, getMessageFromFetchError } from "@frontend/kitui";
 
-
 import type { MouseEvent } from "react";
 import CustomTariffAccordion from "@root/components/CustomTariffAccordion";
 
@@ -21,9 +19,11 @@ const name: Record<string, string> = {
 
 interface Props {
   serviceData: ServiceCartData;
+  last?: boolean;
+  first?: boolean;
 }
 
-export default function CustomWrapper({ serviceData }: Props) {
+export default function CustomWrapper({ serviceData, last, first }: Props) {
   const theme = useTheme();
   const upMd = useMediaQuery(theme.breakpoints.up("md"));
   const upSm = useMediaQuery(theme.breakpoints.up("sm"));
@@ -57,26 +57,19 @@ export default function CustomWrapper({ serviceData }: Props) {
   return (
     <Box
       sx={{
-        overflow: "hidden",
         borderRadius: "12px",
-        boxShadow: cardShadow,
-        marginBottom: "2px",
       }}
     >
       <Box
         sx={{
           backgroundColor: "white",
-          "&:first-of-type": {
+          borderTopLeftRadius: first ? "12px" : "0",
-            borderTopLeftRadius: "12px",
+          borderTopRightRadius: first ? "12px" : "0",
-            borderTopRightRadius: "12px",
+          borderBottomLeftRadius: last ? "12px" : "0",
-          },
+          borderBottomRightRadius: last ? "12px" : "0",
-          "&:last-of-type": {
+          borderBottom: `1px solid ${theme.palette.gray.main}`,
-            borderBottomLeftRadius: "12px",
+
-            borderBottomRightRadius: "12px",
+          ...(last && { borderBottom: "none" }),
-          },
-          "&:not(:last-of-type)": {
-            borderBottom: `1px solid ${theme.palette.gray.main}`,
-          },
         }}
       >
         <Box

src/pages/History/AccordionWrapper.tsx

@@ -65,9 +65,7 @@ export default function AccordionWrapper({ content }: AccordionWrapperProps) {
                     fontSize: upMd ? "20px" : "18px",
                     lineHeight: upMd ? undefined : "19px",
                     fontWeight: 500,
-                    color: accordionItem.expired
+                    color: accordionItem.expired ? theme.palette.text.disabled : theme.palette.text.secondary,
-                      ? theme.palette.text.disabled
-                      : theme.palette.text.secondary,
                     px: 0,
                   }}
                 >
@@ -79,9 +77,7 @@ export default function AccordionWrapper({ content }: AccordionWrapperProps) {
                     fontSize: upMd ? "18px" : "16px",
                     lineHeight: upMd ? undefined : "19px",
                     fontWeight: 500,
-                    color: accordionItem.expired
+                    color: accordionItem.expired ? theme.palette.text.disabled : theme.palette.gray.dark,
-                      ? theme.palette.text.disabled
-                      : theme.palette.gray.dark,
                     px: 0,
                   }}
                 >
@@ -103,17 +99,11 @@ export default function AccordionWrapper({ content }: AccordionWrapperProps) {
                     fontSize: upMd ? "18px" : "16px",
                     lineHeight: upMd ? undefined : "19px",
                     fontWeight: 400,
-                    color: accordionItem.expired
+                    color: accordionItem.expired ? theme.palette.text.disabled : theme.palette.gray.dark,
-                      ? theme.palette.text.disabled
-                      : theme.palette.gray.dark,
                     px: 0,
                   }}
                 >
-                  {accordionItem.payMethod && (
+                  {accordionItem.payMethod && <Typography>Способ оплаты: {accordionItem.payMethod}</Typography>}
-                    <Typography>
-                      Способ оплаты: {accordionItem.payMethod}
-                    </Typography>
-                  )}
                 </Typography>
                 <Box
                   sx={{
@@ -128,9 +118,7 @@ export default function AccordionWrapper({ content }: AccordionWrapperProps) {
                   <Typography
                     sx={{
                       marginLeft: isTablet ? (isMobile ? null : "auto") : null,
-                      color: accordionItem.expired
+                      color: accordionItem.expired ? theme.palette.text.disabled : theme.palette.gray.dark,
-                        ? theme.palette.text.disabled
-                        : theme.palette.gray.dark,
                       fontSize: upSm ? "20px" : "16px",
                       fontWeight: 500,
                       textAlign: "left",

src/pages/History/historyMocks.ts

@@ -6,48 +6,42 @@ const PAYMENT_HISTORY: History[] = [
     title: "Шаблонизатор",
     payMethod: "QIWI Кошелек",
     info: "3 190  руб.",
-    description:
+    description: "Дата действия приобретенной лицензии (в формате дд.мм.гггг-дд.мм.гггг) Или же объем",
-      "Дата действия приобретенной лицензии (в формате дд.мм.гггг-дд.мм.гггг) Или же объем",
   },
   {
     date: "28.05.2022",
     title: "Сокращатель ссылок",
     payMethod: "Юмани",
     info: "2 190  руб.",
-    description:
+    description: "Дата действия приобретенной лицензии (в формате дд.мм.гггг-дд.мм.гггг) Или же объем",
-      "Дата действия приобретенной лицензии (в формате дд.мм.гггг-дд.мм.гггг) Или же объем",
   },
   {
     date: "28.05.2022",
     title: "Шаблонизатор",
     payMethod: "QIWI Кошелек",
     info: "1 190  руб.",
-    description:
+    description: "Дата действия приобретенной лицензии (в формате дд.мм.гггг-дд.мм.гггг) Или же объем",
-      "Дата действия приобретенной лицензии (в формате дд.мм.гггг-дд.мм.гггг) Или же объем",
   },
   {
     date: "08.04.2022",
     title: "Шаблонизатор",
     payMethod: "QIWI Кошелек",
     info: "3 190  руб.",
-    description:
+    description: "Дата действия приобретенной лицензии (в формате дд.мм.гггг-дд.мм.гггг) Или же объем",
-      "Дата действия приобретенной лицензии (в формате дд.мм.гггг-дд.мм.гггг) Или же объем",
   },
   {
     date: "28.05.2022",
     title: "Сокращатель ссылок",
     payMethod: "Юмани",
     info: "5 190  руб.",
-    description:
+    description: "Дата действия приобретенной лицензии (в формате дд.мм.гггг-дд.мм.гггг) Или же объем",
-      "Дата действия приобретенной лицензии (в формате дд.мм.гггг-дд.мм.гггг) Или же объем",
   },
   {
     date: "18.03.2022",
     title: "Шаблонизатор",
     payMethod: "Юмани",
     info: "6 190  руб.",
-    description:
+    description: "Дата действия приобретенной лицензии (в формате дд.мм.гггг-дд.мм.гггг) Или же объем",
-      "Дата действия приобретенной лицензии (в формате дд.мм.гггг-дд.мм.гггг) Или же объем",
   },
 ];
 
@@ -132,8 +126,4 @@ const FINISHED_TARIFFS_HISTORY: History[] = [
   },
 ];
 
-export const HISTORY: History[][] = [
+export const HISTORY: History[][] = [PAYMENT_HISTORY, PURCHASED_TARIFFS_HISTORY, FINISHED_TARIFFS_HISTORY];
-  PAYMENT_HISTORY,
-  PURCHASED_TARIFFS_HISTORY,
-  FINISHED_TARIFFS_HISTORY,
-];

src/pages/History/index.tsx

@@ -21,6 +21,8 @@ export default function History() {
 
   const handleCustomBackNavigation = useHistoryTracker();
 
+  console.log(HISTORY);
+
   return (
     <SectionWrapper
       maxWidth="lg"