110 lines
3.0 KiB
TypeScript
110 lines
3.0 KiB
TypeScript
import {
|
||
Typography,
|
||
Box,
|
||
useTheme,
|
||
useMediaQuery,
|
||
IconButton,
|
||
} from "@mui/material";
|
||
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
|
||
import { Link, useParams } from "react-router-dom";
|
||
import SectionWrapper from "@components/SectionWrapper";
|
||
import SupportChat from "./SupportChat";
|
||
import CreateTicket from "./CreateTicket";
|
||
import TicketList from "./TicketList/TicketList";
|
||
import { useCallback } from "react";
|
||
import { Ticket, getMessageFromFetchError, useToken } from "@frontend/kitui";
|
||
import {
|
||
updateTickets,
|
||
setTicketCount,
|
||
clearTickets,
|
||
useTicketStore,
|
||
} from "@root/stores/tickets";
|
||
import { enqueueSnackbar } from "notistack";
|
||
import { useSSESubscription, useTickets } from "@frontend/kitui";
|
||
|
||
export default function Support() {
|
||
const theme = useTheme();
|
||
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
||
const ticketId = useParams().ticketId;
|
||
const ticketApiPage = useTicketStore((state) => state.apiPage);
|
||
const ticketsPerPage = useTicketStore((state) => state.ticketsPerPage);
|
||
const token = useToken();
|
||
|
||
const fetchState = useTickets({
|
||
url: "https://hub.pena.digital/heruvym/getTickets",
|
||
ticketsPerPage,
|
||
ticketApiPage,
|
||
onNewTickets: useCallback((result) => {
|
||
if (result.data) updateTickets(result.data);
|
||
setTicketCount(result.count);
|
||
}, []),
|
||
onError: useCallback((error: Error) => {
|
||
const message = getMessageFromFetchError(error);
|
||
if (message) enqueueSnackbar(message);
|
||
}, []),
|
||
});
|
||
|
||
useSSESubscription<Ticket>({
|
||
enabled: Boolean(token),
|
||
url: `https://admin.pena.digital/heruvym/subscribe?Authorization=${token}`,
|
||
onNewData: updateTickets,
|
||
onDisconnect: useCallback(() => {
|
||
clearTickets();
|
||
}, []),
|
||
marker: "ticket",
|
||
});
|
||
|
||
return (
|
||
<SectionWrapper
|
||
maxWidth="lg"
|
||
sx={{
|
||
pt: upMd ? "25px" : "20px",
|
||
pb: upMd ? "82px" : "20px",
|
||
height: "calc(100vh - 51px)",
|
||
maxHeight: "calc(100vh - 51px)",
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
mt: "20px",
|
||
mb: "40px",
|
||
display: "flex",
|
||
gap: "10px",
|
||
}}
|
||
>
|
||
<Link
|
||
to="/support"
|
||
style={{
|
||
textDecoration: "none",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
columnGap: "10px",
|
||
color: theme.palette.common.black,
|
||
}}
|
||
>
|
||
<IconButton
|
||
sx={{ p: 0, height: "28px", width: "28px", color: "black" }}
|
||
>
|
||
<ArrowBackIcon />
|
||
</IconButton>
|
||
<Typography variant="h4">Запрос в службу техподдержки</Typography>
|
||
</Link>
|
||
</Box>
|
||
{ticketId ? (
|
||
<SupportChat />
|
||
) : (
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
gap: upMd ? "40px" : "60px",
|
||
}}
|
||
>
|
||
<CreateTicket />
|
||
<TicketList fetchState={fetchState} />
|
||
</Box>
|
||
)}
|
||
</SectionWrapper>
|
||
);
|
||
}
|