front-hub/src/pages/History/index.tsx

import {useState} from "react";
import {
    Box,
    IconButton,
    Typography,
    useMediaQuery,
    useTheme
} from "@mui/material";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";

import SectionWrapper from "@root/components/SectionWrapper";
import {Select} from "@root/components/Select";
import {Tabs} from "@root/components/Tabs";

import AccordionWrapper from "./AccordionWrapper";
import {useHistoryTracker} from "@root/utils/hooks/useHistoryTracker";
import {ErrorBoundary} from "react-error-boundary";
import {handleComponentError} from "@root/utils/handleComponentError";
import {useHistoryStore} from "@root/stores/history";
import {enqueueSnackbar} from "notistack";
import {makeRequest} from "@frontend/kitui";
import {HistoryRecord, HistoryRecord2} from "@root/api/history";
import AccordionWrapper2 from "./AccordionWrapper2";

const subPages = ["Платежи"];
// const subPages = ["Платежи", "Покупки тарифов", "Окончания тарифов"]

export default function History() {
    const [selectedItem, setSelectedItem] = useState<number>(0);

    const theme = useTheme();
    const upMd = useMediaQuery(theme.breakpoints.up("md"));
    const isMobile = useMediaQuery(theme.breakpoints.down(600));
    const isTablet = useMediaQuery(theme.breakpoints.down(1000));
    const historyData = useHistoryStore(state => state.history);
    const handleCustomBackNavigation = useHistoryTracker();

    const extractDateFromString = (tariffName: string) => {
        const dateMatch = tariffName.match(/\d{4}-\d{2}-\d{2}/);
        return dateMatch ? dateMatch[0] : "";
    };

    async function handleHistoryResponse(tariffId: string) {
        try {
            await makeRequest(
                {
                    url: process.env.REACT_APP_DOMAIN + `/customer/sendReport/${tariffId}`,
                    method: "POST",
                }
            );
            enqueueSnackbar("Запрос отправлен");
        } catch (e) {
            enqueueSnackbar("извините, произошла ошибка");
        }
    }
    return (
        <SectionWrapper
            maxWidth="lg"
            sx={{
                mt: upMd ? "25px" : "20px",
                mb: upMd ? "70px" : "37px",
                px: isTablet ? (isTablet ? "18px" : "40px") : "20px",
            }}
        >
            <Box
                sx={{
                    mt: "20px",
                    mb: isTablet ? "38px" : "20px",
                    display: "flex",
                    alignItems: "center",
                    gap: "10px",
                }}
            >
                {isMobile && (
                    <IconButton onClick={handleCustomBackNavigation} sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
                        <ArrowBackIcon />
                    </IconButton>
                )}
                <Typography
                    sx={{
                        fontSize: isMobile ? "24px" : "36px",
                        fontWeight: "500",
                    }}
                >
                    История
                </Typography>
            </Box>
            {isMobile ? (
                <Select items={subPages} selectedItem={selectedItem} setSelectedItem={setSelectedItem} />
            ) : (
                <Tabs items={subPages} selectedItem={selectedItem} setSelectedItem={setSelectedItem} />
            )}
            <ErrorBoundary
                fallback={
                    <Typography mt="8px">Ошибка загрузки истории</Typography>
                }
                onError={handleComponentError}
            >
                {historyData?.length === 0 && <Typography textAlign="center">Нет данных</Typography>}
                {/* Для ненормального rawDetails */}
                {historyData?.filter((e): e is HistoryRecord => {
                    e.createdAt = extractDateFromString(e.createdAt);
                    return (
                        !e.isDeleted
                        && e.key === "payCart"
                        && Array.isArray(e.rawDetails)
                        && Array.isArray(e.rawDetails[0].Value)
                    );
                }).map((e, index) => {
                    return (
                        <Box key={index} sx={{ mt: index === 0 ? "27px" : "0px" }}>
                            <AccordionWrapper
                                first={index === 0}
                                last={index === historyData?.length - 1}
                                content={(e as HistoryRecord).rawDetails}
                                mainId={(e as HistoryRecord).id}
                                key={e.id}
                                createdAt={e.createdAt}
                                onClickMail={(event: any) => {
                                    event.stopPropagation();
                                    handleHistoryResponse(e.id);
                                }}
                            />
                        </Box>
                    );
                })}
                {/* Для нормального rawDetails */}
                {historyData?.filter((e): e is HistoryRecord2 => {
                    e.createdAt = extractDateFromString(e.createdAt);
                    return (
                        !e.isDeleted
                        && e.key === "payCart"
                        && !Array.isArray(e.rawDetails)
                        && !!e.rawDetails.tariffs[0]
                    );
                }).map((e, index) => {
                    return (
                        <Box key={index} sx={{ mt: index === 0 ? "27px" : "0px" }}>
                            <AccordionWrapper2
                                key={e.id}
                                first={index === 0}
                                last={index === historyData?.length - 1}
                                mainId={(e as HistoryRecord2).id}
                                createdAt={e.createdAt}
                                tariff={e.rawDetails.tariffs[0]}
                                price={e.rawDetails.price/100}
                            />
                        </Box>
                    );
                })}
            </ErrorBoundary>
        </SectionWrapper>
    );
}