front-hub/src/components/TotalPrice.tsx

import { Alert, Box, Button, Typography, useMediaQuery, useTheme } from "@mui/material";
import { currencyFormatter } from "@root/utils/currencyFormatter";
import { payCart } from "@root/api/cart";
import { setUserAccount } from "@root/stores/user";
import { isAxiosError } from "axios";
import { enqueueSnackbar } from "notistack";
import { useNavigate } from "react-router-dom";
import { useState } from "react";
import { getMessageFromFetchError } from "@frontend/kitui";

interface Props {
  priceBeforeDiscounts: number;
  priceAfterDiscounts: number;
}

export default function TotalPrice({ priceAfterDiscounts, priceBeforeDiscounts }: Props) {
  const theme = useTheme();
  const upMd = useMediaQuery(theme.breakpoints.up("md"));
  const isMobile = useMediaQuery(theme.breakpoints.down(550));
  const [notEnoughMoneyAmount, setNotEnoughMoneyAmount] = useState<number>(0);
  const navigate = useNavigate();

  function handlePayClick() {
    payCart()
      .then((result) => {
        setUserAccount(result);
      })
      .catch((error) => {
        if (isAxiosError(error) && error.response?.status === 402) {
          const notEnoughMoneyAmount = parseInt(
            (error.response.data.message as string).replace("insufficient funds: ", "")
          );
          setNotEnoughMoneyAmount(notEnoughMoneyAmount);
        } else {
          const message = getMessageFromFetchError(error);
          if (message) enqueueSnackbar(message);
        }
      });
  }

  function handleReplenishWallet() {
    navigate("/payment", { state: { notEnoughMoneyAmount } });
  }

  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: upMd ? "row" : "column",
        mt: upMd ? "80px" : "70px",
        pt: upMd ? "30px" : undefined,
        borderTop: upMd ? `1px solid ${theme.palette.gray.dark}` : 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.gray.main}>
          Текст-заполнитель — это текст, который имеет Текст-заполнитель — это текст, который имеет Текст-заполнитель —
          это текст, который имеет Текст-заполнитель — это текст, который имеет Текст-заполнитель
        </Typography>
      </Box>
      <Box
        sx={{
          color: theme.palette.gray.dark,
          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",
            mb: "15px",
            gap: "15px",
          }}
        >
          <Typography variant="oldPrice" sx={{ order: upMd ? 1 : 2 }}>
            {currencyFormatter.format(priceBeforeDiscounts / 100)}
          </Typography>
          <Typography
            variant="price"
            sx={{
              fontWeight: 500,
              fontSize: "26px",
              lineHeight: "31px",
              order: upMd ? 2 : 1,
            }}
          >
            {currencyFormatter.format(priceAfterDiscounts / 100)}
          </Typography>
        </Box>
        {notEnoughMoneyAmount > 0 && (
          <Alert severity="error" variant="filled">
            Нехватает {currencyFormatter.format(notEnoughMoneyAmount / 100)}
          </Alert>
        )}
        <Button
          variant="pena-contained-dark"
          onClick={notEnoughMoneyAmount === 0 ? handlePayClick : handleReplenishWallet}
          sx={{ mt: "10px" }}
        >
          {notEnoughMoneyAmount === 0 ? "Оплатить" : "Пополнить"}
        </Button>
      </Box>
    </Box>
  );
}