142 lines
4.1 KiB
TypeScript
142 lines
4.1 KiB
TypeScript
import { FC, useEffect } from "react";
|
|
import { Grid, Box, Typography, Button } from "@mui/material";
|
|
import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
|
|
import {
|
|
MainContainer,
|
|
ChatContainer,
|
|
MessageList,
|
|
Message,
|
|
MessageInput,
|
|
Conversation,
|
|
ConversationHeader,
|
|
} from "@chatscope/chat-ui-kit-react";
|
|
|
|
interface TicketDetailProps {
|
|
ticket: any;
|
|
articles: any[];
|
|
}
|
|
|
|
export const TicketDetail: FC<TicketDetailProps> = ({ ticket, articles }) => {
|
|
console.log({ here: "here", ticket });
|
|
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.created_at
|
|
).toLocaleDateString()})`}</Typography>
|
|
</Box>
|
|
</ConversationHeader.Content>
|
|
</ConversationHeader>
|
|
<MessageList style={{ marginBottom: 80 }}>
|
|
{articles.map((article: any) => (
|
|
<Message
|
|
className={
|
|
article.internal
|
|
? "internal-note"
|
|
: article.sender === "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: "last",
|
|
type: "html",
|
|
}}
|
|
/>
|
|
))}
|
|
</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"}
|
|
sx={{ height: 72 }}
|
|
>
|
|
<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",
|
|
}}
|
|
>
|
|
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",
|
|
}}
|
|
>
|
|
Write note to agent
|
|
</Button>
|
|
</Grid>
|
|
</Grid>
|
|
</Box>
|
|
</MainContainer>
|
|
</>
|
|
);
|
|
};
|