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

import {
    Box,
    Divider,
    Typography,
    useMediaQuery,
    useTheme,
} from "@mui/material";
import CustomButton from "../../components/CustomButton";
import TariffPrivilegeSlider from "./TariffItem";
import {
    createAndSendTariff,
    useCustomTariffsStore,
} from "@root/stores/customTariffs";
import { cardShadow } from "@root/utils/themes/shadow";
import { currencyFormatter } from "@root/utils/currencyFormatter";
import { Privilege, devlog, getMessageFromFetchError } from "@frontend/kitui";
import { enqueueSnackbar } from "notistack";
import { updateTariffs } from "@root/stores/tariffs";

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

export default function CustomTariffCard({ serviceKey, privileges }: Props) {
    const theme = useTheme();
    const upMd = useMediaQuery(theme.breakpoints.up("md"));
    const summaryPriceBeforeDiscounts = useCustomTariffsStore(
        (state) => state.summaryPriceBeforeDiscountsMap
    );
    const summaryPriceAfterDiscounts = useCustomTariffsStore(
        (state) => state.summaryPriceAfterDiscountsMap
    );

    const priceBeforeDiscounts = summaryPriceBeforeDiscounts[serviceKey] ?? 0;
    const priceAfterDiscounts = summaryPriceAfterDiscounts[serviceKey] ?? 0;

    async function handleConfirmClick() {
        createAndSendTariff(serviceKey)
            .then((result) => {
                devlog(result);
                enqueueSnackbar("Тариф создан");

                updateTariffs([result]);
            })
            .catch((error) => {
                const message = getMessageFromFetchError(
                    error,
                    "Не удалось создать тариф"
                );
                if (message) enqueueSnackbar(message);
            });
    }

    return (
        <Box
            sx={{
                backgroundColor: "white",
                width: "100%",
                display: "flex",
                flexDirection: upMd ? "row" : "column",
                borderRadius: "12px",
                boxShadow: cardShadow,
            }}
        >
            <Box
                sx={{
                    p: "20px",
                    pr: upMd ? "35px" : undefined,
                    display: "flex",
                    flexBasis: 0,
                    flexGrow: 2.37,
                    flexWrap: "wrap",
                    flexDirection: "column",
                    gap: "25px",
                }}
            >
                {privileges.map((privilege) => (
                    <TariffPrivilegeSlider key={privilege._id} privilege={privilege} />
                ))}
            </Box>
            {!upMd && (
                <Divider
                    sx={{ mx: "20px", my: "10px", borderColor: theme.palette.grey2.main }}
                />
            )}
            <Box
                sx={{
                    display: "flex",
                    flexBasis: 0,
                    flexGrow: 1,
                    flexDirection: "column",
                    justifyContent: "space-between",
                    alignItems: "start",
                    color: theme.palette.grey3.main,
                    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>
                <Typography mb="20px" mt="18px">
                    Сумма с учетом скидки
                </Typography>
                <Box
                    sx={{
                        display: "flex",
                        alignItems: "center",
                        gap: "20px",
                        mb: "30px",
                    }}
                >
                    <Typography variant="price">
                        {currencyFormatter.format(priceAfterDiscounts / 100)}
                    </Typography>
                    <Typography variant="oldPrice" pt="3px">
                        {currencyFormatter.format(priceBeforeDiscounts / 100)}
                    </Typography>
                </Box>
                <CustomButton
                    variant="contained"
                    onClick={handleConfirmClick}
                    sx={{
                        backgroundColor: theme.palette.brightPurple.main,
                    }}
                >
                    Выбрать
                </CustomButton>
            </Box>
        </Box>
    );
}