113 lines
4.3 KiB
TypeScript
113 lines
4.3 KiB
TypeScript
|
import { Box, Divider, Typography, useMediaQuery, useTheme } from "@mui/material";
|
|||
|
|
import CustomButton from "../../components/CustomButton";
|
|||
|
|
import { CustomTariff } from "@root/model/customTariffs";
|
|||
|
|
import TariffPrivilegeSlider from "./TariffItem";
|
|||
|
|
import { useCustomTariffsStore } from "@root/stores/customTariffs";
|
|||
|
|
|
|||
|
|
|
|||
|
|
const formatter = new Intl.NumberFormat("ru", { currency: "RUB", style: "currency", compactDisplay: "short", minimumFractionDigits: 0 });
|
|||
|
|
|
|||
|
|
interface Props {
|
|||
|
|
serviceKey: string;
|
|||
|
|
tariffs: CustomTariff[];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
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;
|
|||
|
|
|
|||
|
|
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: "#9A9AAF" }} />}
|
|||
|
|
<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"
|
|||
|
|
sx={{
|
|||
|
|
backgroundColor: theme.palette.brightPurple.main,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
Выбрать
|
|||
|
|
</CustomButton>
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
);
|
|||
|
|
}
|