152 lines
4.7 KiB
TypeScript
152 lines
4.7 KiB
TypeScript
import { FC, useState } from "react";
|
|
import { Grid, Box, Typography, Button, Dialog, DialogActions, DialogContent } from "@mui/material";
|
|
import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
|
|
import {
|
|
MainContainer,
|
|
ChatContainer,
|
|
MessageList,
|
|
Message,
|
|
ConversationHeader,
|
|
} from "@chatscope/chat-ui-kit-react";
|
|
import { ArticleCreateDialog } from "./ArticleCreateDialog";
|
|
|
|
interface TicketDetailProps {
|
|
ticket: any;
|
|
}
|
|
|
|
export const TicketDetail: FC<TicketDetailProps> = ({ ticket }) => {
|
|
console.log({ ticket })
|
|
const [dialogOpen, setDialogOpen] = useState(false);
|
|
const [articleKind, setArticleKind] = useState<"reply" | "note">("reply");
|
|
const closeDialog = () => setDialogOpen(false);
|
|
|
|
return (
|
|
<>
|
|
<MainContainer>
|
|
<ChatContainer>
|
|
<ConversationHeader>
|
|
<ConversationHeader.Content>
|
|
<Box
|
|
sx={{
|
|
width: "100%",
|
|
textAlign: "center",
|
|
fontWeight: "bold",
|
|
}}
|
|
>
|
|
<Typography
|
|
variant="h5"
|
|
sx={{ fontFamily: "Poppins", fontWeight: 700 }}
|
|
>
|
|
{ticket.title}
|
|
</Typography>
|
|
<Typography
|
|
variant="h6"
|
|
sx={{ fontFamily: "Roboto", fontWeight: 400 }}
|
|
>{`Ticket #${ticket.number} (created ${new Date(
|
|
ticket.createdAt
|
|
).toLocaleDateString()})`}</Typography>
|
|
</Box>
|
|
</ConversationHeader.Content>
|
|
</ConversationHeader>
|
|
<MessageList style={{ marginBottom: 80 }}>
|
|
{ticket.articles.edges.map(({ node: article }: any) => (
|
|
<Message
|
|
className={
|
|
article.internal
|
|
? "internal-note"
|
|
: article.sender.name === "Agent"
|
|
? "outgoing-message"
|
|
: "incoming-message"
|
|
}
|
|
model={{
|
|
message: article.body.replace(/<div>*<br>*<div>/g, ""),
|
|
sentTime: article.updated_at,
|
|
sender: article.from,
|
|
direction:
|
|
article.sender === "Agent" ? "outgoing" : "incoming",
|
|
position: "single",
|
|
}}
|
|
/>
|
|
))}
|
|
</MessageList>
|
|
{/* <MessageInput
|
|
placeholder="Type message here"
|
|
sendOnReturnDisabled
|
|
attachButton={false}
|
|
sendButton={false}
|
|
/> */}
|
|
</ChatContainer>
|
|
<Box
|
|
sx={{
|
|
height: 80,
|
|
background: "#eeeeee",
|
|
borderTop: "1px solid #ddd",
|
|
position: "absolute",
|
|
bottom: 0,
|
|
width: "100%",
|
|
zIndex: 1000,
|
|
}}
|
|
>
|
|
<Grid
|
|
container
|
|
spacing={4}
|
|
justifyContent="center"
|
|
alignItems="center"
|
|
alignContent="center"
|
|
>
|
|
<Grid item>
|
|
<Button
|
|
variant="contained"
|
|
disableElevation
|
|
sx={{
|
|
fontFamily: "Poppins, sans-serif",
|
|
fontWeight: 700,
|
|
borderRadius: 2,
|
|
textTransform: "none",
|
|
backgroundColor: "#1982FC",
|
|
padding: "6px 30px",
|
|
margin: "20px 0px",
|
|
whiteSpace: "nowrap",
|
|
py: "10px",
|
|
mt: 2
|
|
}}
|
|
onClick={() => {
|
|
setArticleKind("reply");
|
|
setDialogOpen(true);
|
|
}}
|
|
>
|
|
Reply to ticket
|
|
</Button>
|
|
</Grid>
|
|
<Grid item>
|
|
<Button
|
|
variant="contained"
|
|
disableElevation
|
|
sx={{
|
|
fontFamily: "Poppins, sans-serif",
|
|
fontWeight: 700,
|
|
borderRadius: 2,
|
|
textTransform: "none",
|
|
color: "black",
|
|
backgroundColor: "#FFB620",
|
|
padding: "6px 30px",
|
|
margin: "20px 0px",
|
|
whiteSpace: "nowrap",
|
|
py: "10px",
|
|
mt: 2
|
|
}}
|
|
onClick={() => {
|
|
setArticleKind("note");
|
|
setDialogOpen(true);
|
|
}}
|
|
>
|
|
Write note to agent
|
|
</Button>
|
|
</Grid>
|
|
</Grid>
|
|
</Box>
|
|
</MainContainer>
|
|
<ArticleCreateDialog ticketID={ticket.internalId} open={dialogOpen} closeDialog={closeDialog} kind={articleKind} />
|
|
</>
|
|
);
|
|
};
|