sup

package.json

@@ -6,7 +6,7 @@
 		"@date-io/dayjs": "^2.15.0",
 		"@emotion/react": "^11.10.4",
 		"@emotion/styled": "^11.10.4",
-		"@frontend/kitui": "^1.0.108",
+		"@frontend/kitui": "1.0.110",
 		"@material-ui/pickers": "^3.3.10",
 		"@mui/icons-material": "^5.10.3",
 		"@mui/material": "^5.10.5",

src/api/tickets.ts

@@ -2,7 +2,7 @@ import makeRequest from "@root/api/makeRequest";
 
 import { parseAxiosError } from "@root/utils/parse-error";
 
-import type { SendTicketMessageRequest } from "@root/model/ticket";
+import type { SendTicketMessageRequest } from "@frontend/kitui";
 
 const API_URL = `${process.env.REACT_APP_DOMAIN}/heruvym/v1.0.0`;
 

src/model/ticket.ts

@@ -1,43 +0,0 @@
-export interface CreateTicketRequest {
-	Title: string;
-	Message: string;
-}
-
-export interface CreateTicketResponse {
-	Ticket: string;
-}
-
-export interface SendTicketMessageRequest {
-	message: string;
-	ticket: string;
-	lang: string;
-	files: string[];
-}
-
-export type TicketStatus = "open";
-
-export interface Ticket {
-	id: string;
-	user: string;
-	sess: string;
-	ans: string;
-	state: string;
-	top_message: TicketMessage;
-	title: string;
-	created_at: string;
-	updated_at: string;
-	system?: boolean;
-	rate: number;
-}
-
-export interface TicketMessage {
-	id: string;
-	ticket_id: string;
-	user_id: string;
-	session_id: string;
-	message: string;
-	files: string[];
-	shown: { [key: string]: number };
-	request_screenshot: string;
-	created_at: string;
-}

src/pages/dashboard/Content/Support/Chat/Chat.tsx

@@ -12,7 +12,7 @@ import SendIcon from "@mui/icons-material/Send";
 import AttachFileIcon from "@mui/icons-material/AttachFile";
 import { KeyboardEvent, useEffect, useMemo, useRef, useState } from "react";
 import { useParams } from "react-router-dom";
-import { TicketMessage } from "@root/model/ticket";
+import { TicketMessage } from "@frontend/kitui";
 import { sendTicketMessage } from "@root/api/tickets";
 import { enqueueSnackbar } from "notistack";
 import { useTicketStore } from "@root/stores/tickets";
@@ -76,6 +76,7 @@ export default function Chat() {
 	const [disableFileButton, setDisableFileButton] = useState(false);
 
 	const ticket = tickets.find((ticket) => ticket.id === ticketId);
+	const isSystem = ticket?.top_message?.system === true;
 
 	useTicketMessages({
 		url: process.env.REACT_APP_DOMAIN + "/heruvym/v1.0.0/getMessages",
@@ -301,10 +302,11 @@ export default function Chat() {
 					onChange={(e) => setMessageField(e.target.value)}
 					onKeyPress={handleTextfieldKeyPress}
 					id="message-input"
-					placeholder="Написать сообщение"
+					placeholder={isSystem ? "Системный тикет. Отправка сообщений запрещена" : "Написать сообщение"}
 					fullWidth
 					multiline
 					maxRows={8}
+					disabled={isSystem}
 					InputProps={{
 						style: {
 							backgroundColor: theme.palette.content.main,
@@ -314,6 +316,7 @@ export default function Chat() {
 							<InputAdornment position="end">
 								<IconButton
 									onClick={handleSendMessage}
+									disabled={isSystem}
 									sx={{
 										height: "45px",
 										width: "45px",
@@ -326,6 +329,7 @@ export default function Chat() {
 									onClick={() => {
 										if (!disableFileButton) fileInputRef.current?.click();
 									}}
+									disabled={isSystem}
 									sx={{
 										height: "45px",
 										width: "45px",
@@ -340,6 +344,7 @@ export default function Chat() {
 										}}
 										style={{ display: "none" }}
 										type="file"
+										disabled={isSystem}
 									/>
 									<AttachFileIcon sx={{ color: theme.palette.golden.main }} />
 								</IconButton>

src/pages/dashboard/Content/Support/Chat/Message.tsx

@@ -1,5 +1,5 @@
 import { Box, Typography, useTheme } from "@mui/material";
-import { TicketMessage } from "@root/model/ticket";
+import { TicketMessage } from "@frontend/kitui";
 
 interface Props {
 	message: TicketMessage;

src/pages/dashboard/Content/Support/Support.tsx

@@ -3,7 +3,7 @@ import { Box, useMediaQuery, useTheme } from "@mui/material";
 import Chat from "./Chat/Chat";
 import Collapse from "./Collapse";
 import TicketList from "./TicketList/TicketList";
-import { Ticket } from "@root/model/ticket";
+import { Ticket } from "@frontend/kitui";
 import { clearTickets, setTicketsFetchState, updateTickets, useTicketStore } from "@root/stores/tickets";
 import { enqueueSnackbar } from "notistack";
 import { clearMessageState } from "@root/stores/messages";

src/pages/dashboard/Content/Support/TicketList/TicketItem.tsx

@@ -1,7 +1,7 @@
 import CircleIcon from "@mui/icons-material/Circle";
 import { Box, Card, CardActionArea, CardContent, CardHeader, Divider, Typography, useTheme } from "@mui/material";
 import { green } from "@mui/material/colors";
-import { Ticket } from "@root/model/ticket";
+import { Ticket } from "@frontend/kitui";
 import { useNavigate, useParams } from "react-router-dom";
 
 const flexCenterSx = {
@@ -25,10 +25,11 @@ export default function TicketItem({ ticket, setActiveUserId }: Props) {
 	console.log(ticket)
 	const isUnread = ticket.user === ticket?.top_message?.user_id;
 	const isSelected = ticket.id === ticketId;
+	const isSystem = ticket.top_message?.system === true;
 
 	const unreadSx = {
 		border: "1px solid",
-		borderColor: ticket.system ? "red" : theme.palette.golden.main,
+		borderColor: ticket.top_message?.system ? "red" : theme.palette.golden.main,
 		backgroundColor: theme.palette.goldenMedium.main,
 	};
 
@@ -44,7 +45,7 @@ export default function TicketItem({ ticket, setActiveUserId }: Props) {
 		<Card
 			sx={{
 				minHeight: "70px",
-				backgroundColor: "transparent",
+				backgroundColor: isSystem ? "#111" : "transparent",
 				color: "white",
 				...(isUnread && unreadSx),
 				...(isSelected && selectedSx),

src/pages/dashboard/Content/Support/TicketList/TicketList.tsx

@@ -1,7 +1,7 @@
 import HighlightOffOutlinedIcon from "@mui/icons-material/HighlightOffOutlined";
 import SearchOutlinedIcon from "@mui/icons-material/SearchOutlined";
 import { Box, Button, useMediaQuery, useTheme } from "@mui/material";
-import { Ticket } from "@root/model/ticket";
+import { Ticket } from "@frontend/kitui";
 import { incrementTicketsApiPage, useTicketStore } from "@root/stores/tickets";
 import { useEffect, useRef, useState } from "react";
 import TicketItem from "./TicketItem";

src/stores/messages.ts

@@ -1,5 +1,5 @@
 import { FetchState } from "@frontend/kitui";
-import { TicketMessage } from "@root/model/ticket";
+import { TicketMessage } from "@frontend/kitui";
 import { create } from "zustand";
 import { devtools } from "zustand/middleware";
 

src/stores/mocks/tickets.ts

@@ -1,4 +1,4 @@
-import { Ticket } from "@root/model/ticket";
+import { Ticket } from "@frontend/kitui";
 
 export const testTickets: Ticket[] = [
 	{
@@ -17,11 +17,13 @@ export const testTickets: Ticket[] = [
 			shown: {},
 			request_screenshot: "",
 			created_at: "2023-03-10T13:16:52.73Z",
+			system: false,
 		},
 		title: "textual ticket",
 		created_at: "2023-03-10T13:16:52.73Z",
 		updated_at: "2023-03-10T13:16:52.73Z",
 		rate: -1,
+		origin: "user",
 	},
 	{
 		id: "cg55nssvc9g7gddpnsug",
@@ -39,10 +41,12 @@ export const testTickets: Ticket[] = [
 			shown: {},
 			request_screenshot: "",
 			created_at: "2023-03-09T22:21:39.822Z",
+			system: false,
 		},
 		title: "textual ticket",
 		created_at: "2023-03-09T22:21:39.822Z",
 		updated_at: "2023-03-09T22:21:39.822Z",
 		rate: -1,
+		origin: "user",
 	},
 ];

src/stores/tickets.ts

@@ -1,5 +1,5 @@
 import { FetchState } from "@frontend/kitui";
-import { Ticket } from "@root/model/ticket";
+import { Ticket } from "@frontend/kitui";
 import { create } from "zustand";
 import { devtools } from "zustand/middleware";