78 lines
2.3 KiB
TypeScript
78 lines
2.3 KiB
TypeScript
import { IconButton, Box, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||
import SectionWrapper from "../../components/SectionWrapper";
|
||
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
|
||
import { useHistoryTracker } from "@root/utils/hooks/useHistoryTracker";
|
||
import SaveWrapper from "./SaveWrapper";
|
||
import { useTariffStore, updateTariffs } from "@root/stores/tariffs";
|
||
import { getMessageFromFetchError, type Tariff } from "@frontend/kitui";
|
||
import { useAllTariffsFetcher } from "@root/utils/hooks/useAllTariffsFetcher";
|
||
import { enqueueSnackbar } from "notistack";
|
||
|
||
export default function SavedTariffs() {
|
||
const theme = useTheme();
|
||
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
||
const isMobile = useMediaQuery(theme.breakpoints.down(550));
|
||
|
||
const tariffs: Tariff[] = useTariffStore((state) => state.tariffs);
|
||
|
||
useAllTariffsFetcher({
|
||
onSuccess: updateTariffs,
|
||
onError: (error) => {
|
||
const errorMessage = getMessageFromFetchError(error);
|
||
if (errorMessage) enqueueSnackbar(errorMessage);
|
||
},
|
||
});
|
||
|
||
console.log(tariffs);
|
||
|
||
const handleCustomBackNavigation = useHistoryTracker();
|
||
|
||
return (
|
||
<SectionWrapper
|
||
maxWidth="lg"
|
||
sx={{
|
||
mt: upMd ? "25px" : "20px",
|
||
mb: upMd ? "70px" : "37px",
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
mt: "20px",
|
||
mb: upMd ? "40px" : "20px",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: "10px",
|
||
}}
|
||
>
|
||
{!upMd && (
|
||
<IconButton onClick={handleCustomBackNavigation} sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
|
||
<ArrowBackIcon />
|
||
</IconButton>
|
||
)}
|
||
<Typography
|
||
sx={{
|
||
fontSize: isMobile ? "24px" : "36px",
|
||
fontWeight: "500",
|
||
}}
|
||
>
|
||
Сохраненные тарифы
|
||
</Typography>
|
||
</Box>
|
||
<Box mt={upMd ? "27px" : "10px"}>
|
||
{tariffs.map(({ _id, isCustom, privilegies, createdAt }, index) =>
|
||
isCustom ? (
|
||
<SaveWrapper
|
||
first={index === 0}
|
||
last={index === tariffs.length - 1}
|
||
key={_id}
|
||
tariffId={_id}
|
||
createdAt={createdAt}
|
||
privilegies={privilegies}
|
||
/>
|
||
) : null
|
||
)}
|
||
</Box>
|
||
</SectionWrapper>
|
||
);
|
||
}
|