117 lines
4.0 KiB
TypeScript
117 lines
4.0 KiB
TypeScript
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";
|
||
|
||
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 ? "50px" : "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>
|
||
);
|
||
}
|