front-hub/src/pages/TariffConstructor/CustomTariffCard.tsx

import { Box, Divider, Typography, useMediaQuery, useTheme } from "@mui/material";
import CustomButton from "../../components/CustomButton";
import { Privilege } from "@root/model/privilege";
import TariffPrivilegeSlider from "./TariffItem";
import { createAndSendTariff, useCustomTariffsStore } from "@root/stores/customTariffs";


const formatter = new Intl.NumberFormat("ru", { currency: "RUB", style: "currency", compactDisplay: "short", minimumFractionDigits: 0 });

interface Props {
    serviceKey: string;
    tariffs: Privilege[];
}

export default function CustomTariffCard({ serviceKey, tariffs }: Props) {
    const theme = useTheme();
    const upMd = useMediaQuery(theme.breakpoints.up("md"));
    const summaryPrice = useCustomTariffsStore(state => state.summaryPrice);

    const tariffPrice = summaryPrice[serviceKey] ?? 0;

    function handleConfirmClick() {
        createAndSendTariff(serviceKey);
    }

    return (
        <Box sx={{
            backgroundColor: "white",
            width: "100%",
            display: "flex",
            flexDirection: upMd ? "row" : "column",
            borderRadius: "12px",
            boxShadow: `
                0px 100px 309px rgba(210, 208, 225, 0.24),
                0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525), 
                0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
                0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
                0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343), 
                0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)
            `,
        }}>
            <Box sx={{
                width: upMd ? "68.5%" : undefined,
                p: "20px",
                pr: upMd ? "35px" : undefined,
                display: "flex",
                flexWrap: "wrap",
                flexDirection: "column",
                gap: "25px",
            }}>
                {tariffs.map(tariff =>
                    <TariffPrivilegeSlider
                        key={tariff._id}
                        tariff={tariff}
                    />
                )}
            </Box>
            {!upMd && <Divider sx={{ mx: "20px", my: "10px", borderColor: theme.palette.grey2.main }} />}
            <Box sx={{
                display: "flex",
                flexDirection: "column",
                justifyContent: "space-between",
                alignItems: "start",
                color: theme.palette.grey3.main,
                width: upMd ? "31.5%" : undefined,
                p: "20px",
                pl: upMd ? "33px" : undefined,
                borderLeft: upMd ? `1px solid ${theme.palette.grey2.main}` : undefined,
            }}>
                <Box sx={{
                    display: "flex",
                    justifyContent: "space-between",
                    gap: "15%",
                    mb: "auto",
                    width: "100%",
                }}>
                    <Typography>Чем больше пакеты, тем дешевле подписки и опции </Typography>
                    <Box sx={{
                        px: "6.7px",
                        height: "36px",
                        color: "white",
                        backgroundColor: theme.palette.orange.main,
                        display: "flex",
                        justifyContent: "center",
                        alignItems: "center",
                        borderRadius: "8px",
                    }}>
                        {"-60%"}
                    </Box>
                </Box>
                <Typography mb="20px" mt="18px">
                    Сумма с учетом скидки
                </Typography>
                <Box sx={{
                    display: "flex",
                    alignItems: "center",
                    gap: "20px",
                    mb: "30px",
                }}>
                    <Typography variant="p1">{formatter.format(tariffPrice)}</Typography>
                    <Typography color={theme.palette.orange.main} pt="3px" sx={{ textDecoration: "line-through" }}>
                        {formatter.format(10190)}
                    </Typography>
                </Box>
                <CustomButton
                    variant="contained"
                    onClick={handleConfirmClick}
                    sx={{
                        backgroundColor: theme.palette.brightPurple.main,
                    }}
                >
                    Выбрать
                </CustomButton>
            </Box>
        </Box>
    );
}