front-hub/src/pages/Cart/Cart.tsx

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";
import CustomWrapper from "./CustomWrapper";
import { useCart } from "@root/utils/hooks/useCart";

export default function Cart() {
  const theme = useTheme();
  const upMd = useMediaQuery(theme.breakpoints.up("md"));
  const cart = useCart();

  const totalPriceBeforeDiscounts = cart.priceBeforeDiscounts;
  const totalPriceAfterDiscounts = cart.priceAfterDiscounts;

  return (
    <SectionWrapper
      maxWidth="lg"
      sx={{
        mt: upMd ? "25px" : "20px",
        mb: upMd ? "70px" : "37px",
      }}
    >
      <Box
        sx={{
          mt: "20px",
          mb: upMd ? "40px" : "20px",
          display: "flex",
          gap: "10px",
        }}
      >
        {!upMd && (
          <IconButton
            sx={{ p: 0, height: "28px", width: "28px", color: "black" }}
          >
            <ArrowBackIcon />
          </IconButton>
        )}
        <Typography component="h4" variant="h4">
          Корзина
        </Typography>
      </Box>
      <Box
        sx={{
          mt: upMd ? "27px" : "10px",
        }}
      >
        {cart.services.map((serviceData) => (
          <CustomWrapper
            key={serviceData.serviceKey}
            serviceData={serviceData}
          />
        ))}
      </Box>
      <TotalPrice
        priceBeforeDiscounts={totalPriceBeforeDiscounts}
        priceAfterDiscounts={totalPriceAfterDiscounts}
      />
    </SectionWrapper>
  );
}