90 lines
3.2 KiB
TypeScript
90 lines
3.2 KiB
TypeScript
import { Typography, Box, useTheme, useMediaQuery, IconButton } from "@mui/material";
|
||
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
|
||
import { useParams } from "react-router-dom";
|
||
import SectionWrapper from "@components/SectionWrapper";
|
||
import ComplexNavText from "@components/ComplexNavText";
|
||
import SupportChat from "./SupportChat";
|
||
import CreateTicket from "./CreateTicket";
|
||
import TicketList from "./TicketList/TicketList";
|
||
import { useCallback } from "react";
|
||
import { Ticket } from "@frontend/kitui";
|
||
import { updateTickets, setTicketCount, clearTickets, useTicketStore } from "@root/stores/tickets";
|
||
import { enqueueSnackbar } from "notistack";
|
||
import { useAuthStore } from "@root/stores/auth";
|
||
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 = useAuthStore(state => state.token);
|
||
|
||
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) => {
|
||
enqueueSnackbar(error.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" : "43px",
|
||
height: "100%",
|
||
}}
|
||
>
|
||
{upMd && <ComplexNavText text1="Все тарифы — " text2="Запрос в службу техподдержки" />}
|
||
<Box
|
||
sx={{
|
||
mt: "20px",
|
||
mb: "40px",
|
||
display: "flex",
|
||
gap: "10px",
|
||
}}
|
||
>
|
||
{!upMd && (
|
||
<IconButton sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
|
||
<ArrowBackIcon />
|
||
</IconButton>
|
||
)}
|
||
<Typography variant="h4">Запрос в службу техподдержки</Typography>
|
||
</Box>
|
||
{ticketId ? (
|
||
<SupportChat />
|
||
) : (
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
gap: upMd ? "40px" : "60px",
|
||
}}
|
||
>
|
||
<CreateTicket />
|
||
<TicketList fetchState={fetchState} />
|
||
</Box>
|
||
)}
|
||
</SectionWrapper>
|
||
);
|
||
}
|