PenaSide/front-hub
3
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

fix SaveWrapper

Browse Source
This commit is contained in:
ArtChaos189 2023-08-18 20:16:27 +03:00
parent 6bf466f3bd
commit 5414b57a09
3 changed files with 138 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

272
src/components/CustomTariffAccordion.tsx
View File

@ -1,10 +1,5 @@
import { useState } from "react"; import { useState } from "react";
import { import { Box, Typography, IconButton, useMediaQuery, useTheme } from "@mui/material";
Box, Typography,
IconButton,
useMediaQuery,
useTheme
} from "@mui/material";
import ExpandIcon from "@components/icons/ExpandIcon"; import ExpandIcon from "@components/icons/ExpandIcon";
import { currencyFormatter } from "@root/utils/currencyFormatter"; import { currencyFormatter } from "@root/utils/currencyFormatter";
import { removeTariffFromCart } from "@root/stores/user"; import { removeTariffFromCart } from "@root/stores/user";
@ -12,148 +7,145 @@ import { enqueueSnackbar } from "notistack";
import { TariffCartData, getMessageFromFetchError } from "@frontend/kitui"; import { TariffCartData, getMessageFromFetchError } from "@frontend/kitui";
import { ReactComponent as CrossIcon } from "@root/assets/Icons/cross.svg"; import { ReactComponent as CrossIcon } from "@root/assets/Icons/cross.svg";
interface Props { interface Props {
tariffCartData: TariffCartData; tariffCartData: TariffCartData;
} }
export default function CustomTariffAccordion({ tariffCartData }: Props) { export default function CustomTariffAccordion({ tariffCartData }: Props) {
const theme = useTheme(); const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md")); const upMd = useMediaQuery(theme.breakpoints.up("md"));
const upSm = useMediaQuery(theme.breakpoints.up("sm")); const upSm = useMediaQuery(theme.breakpoints.up("sm"));
const [isExpanded, setIsExpanded] = useState<boolean>(false); const [isExpanded, setIsExpanded] = useState<boolean>(false);
function handleDeleteClick() { function handleDeleteClick() {
removeTariffFromCart(tariffCartData.id) removeTariffFromCart(tariffCartData.id)
.then(() => { .then(() => {
enqueueSnackbar("Тариф удален"); enqueueSnackbar("Тариф удален");
}) })
.catch((error) => { .catch((error) => {
const message = getMessageFromFetchError(error); const message = getMessageFromFetchError(error);
if (message) enqueueSnackbar(message); if (message) enqueueSnackbar(message);
}); });
} }
return ( return (
<Box
sx={{
overflow: "hidden",
}}
>
<Box
sx={{
backgroundColor: "white",
}}
>
<Box <Box
sx={{ onClick={() => setIsExpanded((prev) => !prev)}
overflow: "hidden", sx={{
}} height: "72px",
pr: "20px",
pl: "30px",
display: "flex",
gap: "15px",
alignItems: "center",
justifyContent: "space-between",
cursor: "pointer",
userSelect: "none",
}}
> >
<Box <Box
sx={{ sx={{
backgroundColor: "white", 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 {currencyFormatter.format(tariffCartData.price / 100)}
onClick={() => setIsExpanded((prev) => !prev)} </Typography>
sx={{ </Box>
height: "72px", <IconButton onClick={handleDeleteClick} sx={{ padding: 0, height: "22px", width: "22px" }}>
pr: "20px", <CrossIcon style={{ height: "22 px", width: "22px" }} />
pl: "30px", </IconButton>
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>
</Box> </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>
);
} }

10
src/pages/SavedTariffs/SaveWrapper.tsx
View File

@ -13,10 +13,10 @@ import { PrivilegeCartData, getMessageFromFetchError } from "@frontend/kitui";
interface Props { interface Props {
content: PrivilegeCartData[]; content: PrivilegeCartData[];
serviceKey: string; name: string;
} }
const SaveWrapper: FC<Props> = ({ content, serviceKey }) => { const SaveWrapper: FC<Props> = ({ content, name }) => {
const theme = useTheme(); const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md")); const upMd = useMediaQuery(theme.breakpoints.up("md"));
const upSm = useMediaQuery(theme.breakpoints.up("sm")); const upSm = useMediaQuery(theme.breakpoints.up("sm"));
@ -46,7 +46,7 @@ const SaveWrapper: FC<Props> = ({ content, serviceKey }) => {
boxShadow: cardShadow, boxShadow: cardShadow,
}} }}
> >
{content.map(({ tariffName, price, description, tariffId }, index) => ( {content.map(({ price, description, privilegeId }, index) => (
<CustomAccordion <CustomAccordion
key={index} key={index}
divide divide
@ -75,7 +75,7 @@ const SaveWrapper: FC<Props> = ({ content, serviceKey }) => {
color: "#7E2AEA", color: "#7E2AEA",
}} }}
> >
{extractDateFromString(tariffName)} {extractDateFromString(name)}
</Typography> </Typography>
<Typography <Typography
sx={{ sx={{
@ -104,7 +104,7 @@ const SaveWrapper: FC<Props> = ({ content, serviceKey }) => {
{new Intl.NumberFormat("ru-RU").format(price)} руб. {new Intl.NumberFormat("ru-RU").format(price)} руб.
</Typography> </Typography>
<CustomButton <CustomButton
onClick={() => handleTariffItemClick(tariffId)} onClick={() => handleTariffItemClick(privilegeId)}
variant="contained" variant="contained"
sx={{ sx={{
mr: "25px", mr: "25px",

2
src/pages/SavedTariffs/index.tsx
View File

@ -41,7 +41,7 @@ export default function Faq() {
<Box mt={upMd ? "27px" : "10px"}> <Box mt={upMd ? "27px" : "10px"}>
{cart.services.map(({ serviceKey, tariffs }) => {cart.services.map(({ serviceKey, tariffs }) =>
serviceKey === "custom" serviceKey === "custom"
? tariffs.map(({ privileges }) => <SaveWrapper serviceKey={serviceKey} content={privileges} />) ? tariffs.map(({ privileges, name }) => <SaveWrapper name={name} content={privileges} />)
: null : null
)} )}
</Box> </Box>