sr2/link-stack
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Sidebar and messages updates

Browse source
This commit is contained in:
Darren Clarke 2023-01-11 16:18:56 +01:00
parent 6a0cc58f60
commit 016461b549
No known key found for this signature in database
GPG key ID: E2483E6F82907488
6 changed files with 1193 additions and 634 deletions
Download patch file Download diff file Expand all files Collapse all files

163
components/TicketDetail.tsx
View file

@ -1,5 +1,5 @@
import { FC, useEffect } from "react";
import { Grid, Box, Typography } from "@mui/material";
import { Grid, Box, Typography, Button } from "@mui/material";
import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
import {
MainContainer,
@ -19,61 +19,124 @@ interface TicketDetailProps {
export const TicketDetail: FC<TicketDetailProps> = ({ ticket, articles }) => {
console.log({ here: "here", ticket });
return (
<MainContainer>
<ChatContainer>
<ConversationHeader>
<ConversationHeader.Content>
<Box
sx={{
width: "100%",
<>
<MainContainer>
<ChatContainer>
<ConversationHeader>
<ConversationHeader.Content>
<Box
sx={{
width: "100%",
textAlign: "center",
fontWeight: "bold",
}}
>
<Typography
variant="h5"
sx={{ fontFamily: "Poppins", fontWeight: 700 }}
textAlign: "center",
fontWeight: "bold",
}}
>
{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>
{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
<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>
</MainContainer>
</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>
</>
);
};