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

122 lines
3.8 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { useEffect, 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 { HISTORY } from "./historyMocks"
import { useHistoryTracker } from "@root/utils/hooks/useHistoryTracker"
import { useHistoryData } from "@root/utils/hooks/useHistoryData"
import { isArray } from "cypress/types/lodash"
import { ErrorBoundary } from "react-error-boundary"
import { handleComponentError } from "@root/utils/handleComponentError"
import { useHistoryStore } from "@root/stores/history";
import EmailIcon from '@mui/icons-material/Email';
import {enqueueSnackbar} from "notistack"
import { makeRequest } from "@frontend/kitui"
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>}
{historyData?.filter((e) => {
e.createdAt = extractDateFromString(e.createdAt)
return(!e.isDeleted && e.key === "payCart" && 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.rawDetails}
key={e.id}
createdAt={e.createdAt}
onClickMail={(event: any)=>{
event.stopPropagation()
handleHistoryResponse(e.id)
}}
/>
</Box>
)})}
</ErrorBoundary>
</SectionWrapper>
)
}