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

tariffs save fix

Browse Source
This commit is contained in:
ArtChaos189 2023-08-21 18:58:48 +03:00 committed by Nastya
parent 15838c02a2
commit df06262ea8
4 changed files with 103 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/TotalPrice.tsx
View File

@ -68,19 +68,12 @@ export default function TotalPrice({
flexDirection: "column",
}}
>
<Typography
sx={{
mb: "18px",
fontSize: isMobile ? "24px" : "36px",
fontWeight: "500",
}}
>
<Typography variant="h4" mb={upMd ? "18px" : "30px"}>
Итоговая цена
</Typography>
<Typography color={theme.palette.gray.dark}>
<Typography color={theme.palette.gray.main}>
Текст-заполнитель — это текст, который имеет Текст-заполнитель — это текст, который имеет Текст-заполнитель —
это текст, который имеет Текст-заполнитель — это текст, который имеет Текст-заполнитель
</Typography>
</Box>
<Box

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

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

189
src/pages/Tariffs/TariffCard.tsx
View File

@ -1,105 +1,112 @@
import { Box, Typography, Tooltip, SxProps, Theme, Button } from "@mui/material";
import { Box, Typography, Tooltip, SxProps, Theme, useTheme } from "@mui/material";
import CustomButton from "@components/CustomButton";
import { MouseEventHandler, ReactNode } from "react";
import { cardShadow } from "@root/utils/theme";
interface Props {
icon: ReactNode;
headerText: string;
text: string | string[];
icon: ReactNode;
headerText: string;
text: string | string[];
sx?: SxProps<Theme>;
buttonProps?: {
sx?: SxProps<Theme>;
buttonProps?: {
sx?: SxProps<Theme>;
onClick?: MouseEventHandler<HTMLButtonElement>;
text?: string;
};
price?: ReactNode;
onClick?: MouseEventHandler<HTMLButtonElement>;
text?: string;
};
price?: ReactNode;
}
export default function TariffCard({ icon, headerText, text, sx, price, buttonProps }: Props) {
text = Array.isArray(text) ? text : [text];
const theme = useTheme();
return (
<Box
text = Array.isArray(text) ? text : [text];
return (
<Box
sx={{
width: "100%",
minHeight: "250px",
bgcolor: "white",
borderRadius: "12px",
display: "flex",
flexDirection: "column",
alignItems: "start",
p: "20px",
boxShadow: cardShadow,
...sx,
}}
>
<Box
sx={{
width: "100%",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
gap: "16px",
}}
>
{icon}
{price && (
<Box
sx={{
width: "100%",
minHeight: "250px",
bgcolor: "white",
borderRadius: "12px",
display: "flex",
flexDirection: "column",
alignItems: "start",
p: "20px",
boxShadow: cardShadow,
...sx,
display: "flex",
alignItems: "baseline",
flexWrap: "wrap",
columnGap: "10px",
rowGap: 0,
}}
>
{price}
</Box>
)}
</Box>
<Tooltip title={<Typography>{headerText}</Typography>} placement="top">
<Typography
variant="h5"
sx={{
mt: "14px",
mb: "10px",
textOverflow: "ellipsis",
overflow: "hidden",
whiteSpace: "nowrap",
width: "100%",
}}
>
<Box
sx={{
width: "100%",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
gap: "16px",
}}
>
{icon}
{price && (
<Box
sx={{
display: "flex",
alignItems: "baseline",
flexWrap: "wrap",
columnGap: "10px",
rowGap: 0,
}}
>
{price}
</Box>
)}
</Box>
<Tooltip title={<Typography>{headerText}</Typography>} placement="top">
<Typography
variant="h5"
sx={{
mt: "14px",
mb: "10px",
textOverflow: "ellipsis",
overflow: "hidden",
whiteSpace: "nowrap",
width: "100%",
}}
>
{headerText}
</Typography>
</Tooltip>
<Tooltip
title={text.map((line, index) => (
<Typography key={index}>{line}</Typography>
))}
placement="top"
>
<Box
sx={{
overflow: "hidden",
textOverflow: "clip",
mb: "auto",
}}
>
{text.map((line, index) => (
<Typography key={index}>{line}</Typography>
))}
</Box>
</Tooltip>
{buttonProps && (
<Button
onClick={buttonProps.onClick}
variant="pena-outlined-purple"
sx={{
mt: "10px",
...buttonProps.sx,
}}
>{buttonProps.text}</Button>
)}
{headerText}
</Typography>
</Tooltip>
<Tooltip
title={text.map((line, index) => (
<Typography key={index}>{line}</Typography>
))}
placement="top"
>
<Box
sx={{
overflow: "hidden",
textOverflow: "clip",
mb: "auto",
}}
>
{text.map((line, index) => (
<Typography key={index}>{line}</Typography>
))}
</Box>
);
</Tooltip>
{buttonProps && (
<CustomButton
onClick={buttonProps.onClick}
variant="outlined"
sx={{
color: theme.palette.brightPurple.main,
borderColor: theme.palette.brightPurple.main,
mt: "10px",
...buttonProps.sx,
}}
>
{buttonProps.text}
</CustomButton>
)}
</Box>
);
}

2
src/pages/Tariffs/TariffsPage.tsx
View File

@ -44,6 +44,8 @@ export default function TariffPage() {
console.log(currentTariffs);
console.log(currentTariffs);
useAllTariffsFetcher({
onSuccess: updateTariffs,
onError: (error) => {