front-hub/src/components/TotalPrice.tsx

import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import { basketStore } from "@root/stores/BasketStore";

import CustomButton from "./CustomButton";

export default function TotalPrice() {
  const theme = useTheme();
  const upMd = useMediaQuery(theme.breakpoints.up("md"));
  const { templ, squiz, reducer } = basketStore();

  type BasketItem = {
    name: string;
    desc: string;
    id: string;
    privelegeid: string;
    amount: number;
    price: number;
  }[];

  const newArray: BasketItem = [...Object.values(templ), ...Object.values(squiz), ...Object.values(reducer)];

  const sum = newArray.reduce((accamulator, { price }) => (accamulator += price), 0);

  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: upMd ? "row" : "column",
        mt: upMd ? "80px" : "70px",
        pt: upMd ? "30px" : undefined,
        borderTop: upMd ? `1px solid ${theme.palette.grey2.main}` : undefined,
      }}
    >
      <Box
        sx={{
          width: upMd ? "68.5%" : undefined,
          pr: upMd ? "15%" : undefined,
          display: "flex",
          flexWrap: "wrap",
          flexDirection: "column",
        }}
      >
        <Typography variant="h4" mb={upMd ? "18px" : "30px"}>
          Итоговая цена
        </Typography>
        <Typography color={theme.palette.grey3.main}>
          Текст-заполнитель — это текст, который имеет Текст-заполнитель — это текст, который имеет Текст-заполнитель —
          это текст, который имеет Текст-заполнитель — это текст, который имеет Текст-заполнитель
        </Typography>
      </Box>
      <Box
        sx={{
          color: theme.palette.grey3.main,
          width: upMd ? "31.5%" : undefined,
          pl: upMd ? "33px" : undefined,
        }}
      >
        <Box
          sx={{
            display: "flex",
            flexDirection: upMd ? "column" : "row",
            alignItems: upMd ? "start" : "center",
            mt: upMd ? "10px" : "30px",
            gap: "15px",
          }}
        >
          <Typography
            color={theme.palette.orange.main}
            sx={{
              textDecoration: "line-through",
              order: upMd ? 1 : 2,
            }}
          >
            20 190 руб.
          </Typography>
          <Typography
            variant="p1"
            sx={{
              fontWeight: 500,
              fontSize: "26px",
              lineHeight: "31px",
              order: upMd ? 2 : 1,
            }}
          >
            {sum} руб.
          </Typography>
        </Box>
        <CustomButton
          variant="contained"
          sx={{
            mt: "25px",
            backgroundColor: theme.palette.brightPurple.main,
          }}
        >
          Выбрать
        </CustomButton>
      </Box>
    </Box>
  );
}