fix SaveWrapper
This commit is contained in:
ArtChaos189
parent
6bf466f3bd
commit
5414b57a09
@ -1,10 +1,5 @@
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Box, Typography,
|
||||
IconButton,
|
||||
useMediaQuery,
|
||||
useTheme
|
||||
} from "@mui/material";
|
||||
import { Box, Typography, IconButton, useMediaQuery, useTheme } from "@mui/material";
|
||||
import ExpandIcon from "@components/icons/ExpandIcon";
|
||||
import { currencyFormatter } from "@root/utils/currencyFormatter";
|
||||
import { removeTariffFromCart } from "@root/stores/user";
|
||||
@ -12,148 +7,145 @@ import { enqueueSnackbar } from "notistack";
|
||||
import { TariffCartData, getMessageFromFetchError } from "@frontend/kitui";
|
||||
import { ReactComponent as CrossIcon } from "@root/assets/Icons/cross.svg";
|
||||
|
||||
|
||||
interface Props {
|
||||
tariffCartData: TariffCartData;
|
||||
tariffCartData: TariffCartData;
|
||||
}
|
||||
|
||||
export default function CustomTariffAccordion({ tariffCartData }: Props) {
|
||||
const theme = useTheme();
|
||||
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
||||
const upSm = useMediaQuery(theme.breakpoints.up("sm"));
|
||||
const [isExpanded, setIsExpanded] = useState<boolean>(false);
|
||||
const theme = useTheme();
|
||||
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
||||
const upSm = useMediaQuery(theme.breakpoints.up("sm"));
|
||||
const [isExpanded, setIsExpanded] = useState<boolean>(false);
|
||||
|
||||
function handleDeleteClick() {
|
||||
removeTariffFromCart(tariffCartData.id)
|
||||
.then(() => {
|
||||
enqueueSnackbar("Тариф удален");
|
||||
})
|
||||
.catch((error) => {
|
||||
const message = getMessageFromFetchError(error);
|
||||
if (message) enqueueSnackbar(message);
|
||||
});
|
||||
}
|
||||
function handleDeleteClick() {
|
||||
removeTariffFromCart(tariffCartData.id)
|
||||
.then(() => {
|
||||
enqueueSnackbar("Тариф удален");
|
||||
})
|
||||
.catch((error) => {
|
||||
const message = getMessageFromFetchError(error);
|
||||
if (message) enqueueSnackbar(message);
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: "white",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
overflow: "hidden",
|
||||
}}
|
||||
onClick={() => setIsExpanded((prev) => !prev)}
|
||||
sx={{
|
||||
height: "72px",
|
||||
pr: "20px",
|
||||
pl: "30px",
|
||||
display: "flex",
|
||||
gap: "15px",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
cursor: "pointer",
|
||||
userSelect: "none",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: "white",
|
||||
}}
|
||||
<Box
|
||||
sx={{
|
||||
width: "50px",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<ExpandIcon isExpanded={isExpanded} />
|
||||
</Box>
|
||||
<Typography
|
||||
sx={{
|
||||
width: "100%",
|
||||
fontSize: upMd ? "20px" : "16px",
|
||||
lineHeight: upMd ? undefined : "19px",
|
||||
fontWeight: 400,
|
||||
color: theme.palette.text.secondary,
|
||||
px: 0,
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
}}
|
||||
>
|
||||
Кастомный тариф
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "flex-end",
|
||||
height: "100%",
|
||||
alignItems: "center",
|
||||
gap: upSm ? "111px" : "17px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
color: theme.palette.grey3.main,
|
||||
fontSize: upSm ? "20px" : "16px",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
onClick={() => setIsExpanded((prev) => !prev)}
|
||||
sx={{
|
||||
height: "72px",
|
||||
pr: "20px",
|
||||
pl: "30px",
|
||||
display: "flex",
|
||||
gap: "15px",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
cursor: "pointer",
|
||||
userSelect: "none",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: "50px",
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<ExpandIcon isExpanded={isExpanded} />
|
||||
</Box>
|
||||
<Typography
|
||||
sx={{
|
||||
width: "100%",
|
||||
fontSize: upMd ? "20px" : "16px",
|
||||
lineHeight: upMd ? undefined : "19px",
|
||||
fontWeight: 400,
|
||||
color: theme.palette.text.secondary,
|
||||
px: 0,
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
}}
|
||||
>
|
||||
Кастомный тариф
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "flex-end",
|
||||
height: "100%",
|
||||
alignItems: "center",
|
||||
gap: upSm ? "111px" : "17px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
color: theme.palette.grey3.main,
|
||||
fontSize: upSm ? "20px" : "16px",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
{currencyFormatter.format(tariffCartData.price / 100)}
|
||||
</Typography>
|
||||
</Box>
|
||||
<IconButton
|
||||
onClick={handleDeleteClick}
|
||||
sx={{ padding: 0, height: "22px", width: "22px" }}
|
||||
>
|
||||
<CrossIcon style={{ height: "22 px", width: "22px" }} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
{isExpanded && tariffCartData.privileges.map((privilege) => (
|
||||
<Box
|
||||
key={privilege.privilegeId}
|
||||
sx={{
|
||||
px: "50px",
|
||||
py: upMd ? "15px" : undefined,
|
||||
pt: upMd ? undefined : "15px",
|
||||
pb: upMd ? undefined : "25px",
|
||||
backgroundColor: "#F1F2F6",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
gap: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: upMd ? undefined : "16px",
|
||||
lineHeight: upMd ? undefined : "19px",
|
||||
color: theme.palette.grey3.main,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
{privilege.description}
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
width: upSm ? "140px" : "123px",
|
||||
marginRight: upSm ? "65px" : 0,
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
color: theme.palette.grey3.main,
|
||||
fontSize: upSm ? "20px" : "16px",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
{currencyFormatter.format(privilege.price / 100)}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
{currencyFormatter.format(tariffCartData.price / 100)}
|
||||
</Typography>
|
||||
</Box>
|
||||
<IconButton onClick={handleDeleteClick} sx={{ padding: 0, height: "22px", width: "22px" }}>
|
||||
<CrossIcon style={{ height: "22 px", width: "22px" }} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
);
|
||||
{isExpanded &&
|
||||
tariffCartData.privileges.map((privilege) => (
|
||||
<Box
|
||||
key={privilege.privilegeId}
|
||||
sx={{
|
||||
px: "50px",
|
||||
py: upMd ? "15px" : undefined,
|
||||
pt: upMd ? undefined : "15px",
|
||||
pb: upMd ? undefined : "25px",
|
||||
backgroundColor: "#F1F2F6",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
gap: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: upMd ? undefined : "16px",
|
||||
lineHeight: upMd ? undefined : "19px",
|
||||
color: theme.palette.grey3.main,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
{privilege.description}
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
width: upSm ? "140px" : "123px",
|
||||
marginRight: upSm ? "65px" : 0,
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
sx={{
|
||||
color: theme.palette.grey3.main,
|
||||
fontSize: upSm ? "20px" : "16px",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
{currencyFormatter.format(privilege.price / 100)}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@ -13,10 +13,10 @@ import { PrivilegeCartData, getMessageFromFetchError } from "@frontend/kitui";
|
||||
|
||||
interface Props {
|
||||
content: PrivilegeCartData[];
|
||||
serviceKey: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
const SaveWrapper: FC<Props> = ({ content, serviceKey }) => {
|
||||
const SaveWrapper: FC<Props> = ({ content, name }) => {
|
||||
const theme = useTheme();
|
||||
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
||||
const upSm = useMediaQuery(theme.breakpoints.up("sm"));
|
||||
@ -46,7 +46,7 @@ const SaveWrapper: FC<Props> = ({ content, serviceKey }) => {
|
||||
boxShadow: cardShadow,
|
||||
}}
|
||||
>
|
||||
{content.map(({ tariffName, price, description, tariffId }, index) => (
|
||||
{content.map(({ price, description, privilegeId }, index) => (
|
||||
<CustomAccordion
|
||||
key={index}
|
||||
divide
|
||||
@ -75,7 +75,7 @@ const SaveWrapper: FC<Props> = ({ content, serviceKey }) => {
|
||||
color: "#7E2AEA",
|
||||
}}
|
||||
>
|
||||
{extractDateFromString(tariffName)}
|
||||
{extractDateFromString(name)}
|
||||
</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
@ -104,7 +104,7 @@ const SaveWrapper: FC<Props> = ({ content, serviceKey }) => {
|
||||
{new Intl.NumberFormat("ru-RU").format(price)} руб.
|
||||
</Typography>
|
||||
<CustomButton
|
||||
onClick={() => handleTariffItemClick(tariffId)}
|
||||
onClick={() => handleTariffItemClick(privilegeId)}
|
||||
variant="contained"
|
||||
sx={{
|
||||
mr: "25px",
|
||||
|
||||
@ -41,7 +41,7 @@ export default function Faq() {
|
||||
<Box mt={upMd ? "27px" : "10px"}>
|
||||
{cart.services.map(({ serviceKey, tariffs }) =>
|
||||
serviceKey === "custom"
|
||||
? tariffs.map(({ privileges }) => <SaveWrapper serviceKey={serviceKey} content={privileges} />)
|
||||
? tariffs.map(({ privileges, name }) => <SaveWrapper name={name} content={privileges} />)
|
||||
: null
|
||||
)}
|
||||
</Box>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user