62 lines
2.4 KiB
TypeScript
62 lines
2.4 KiB
TypeScript
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";
|
||
import { useCustomTariffsStore } from "@root/stores/customTariffs";
|
||
|
||
|
||
export default function Basket() {
|
||
const theme = useTheme();
|
||
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
||
const cart = useCart();
|
||
const summaryPriceBeforeDiscountsMap = useCustomTariffsStore(state => state.summaryPriceBeforeDiscountsMap);
|
||
const summaryPriceAfterDiscountsMap = useCustomTariffsStore(state => state.summaryPriceAfterDiscountsMap);
|
||
|
||
const basePrice = Object.values(summaryPriceBeforeDiscountsMap).reduce((a, e) => a + e, 0);
|
||
const discountedPrice = Object.values(summaryPriceAfterDiscountsMap).reduce((a, e) => a + e, 0);
|
||
|
||
const totalPriceBeforeDiscounts = cart.priceBeforeDiscounts + basePrice;
|
||
const totalPriceAfterDiscounts = cart.priceAfterDiscounts + discountedPrice;
|
||
|
||
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>
|
||
);
|
||
}
|