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

Move in progress apps temporarily

Browse source
This commit is contained in:
Darren Clarke 2023-03-07 14:09:49 +00:00
parent ba04aa108c
commit 6eaaf8e9be
360 changed files with 6171 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

40
apps/link/components/TicketDetail.tsx
View file

@ -1,23 +1,25 @@
import { FC, useEffect } from "react";
import { Grid, Box, Typography, Button } from "@mui/material";
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,
MessageInput,
Conversation,
ConversationHeader,
} from "@chatscope/chat-ui-kit-react";
import { ArticleCreateDialog } from "./ArticleCreateDialog";
interface TicketDetailProps {
ticket: any;
articles: any[];
}
export const TicketDetail: FC<TicketDetailProps> = ({ ticket, articles }) => {
console.log({ here: "here", ticket });
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>
@ -27,7 +29,6 @@ export const TicketDetail: FC<TicketDetailProps> = ({ ticket, articles }) => {
<Box
sx={{
width: "100%",
textAlign: "center",
fontWeight: "bold",
}}
@ -42,18 +43,18 @@ export const TicketDetail: FC<TicketDetailProps> = ({ ticket, articles }) => {
variant="h6"
sx={{ fontFamily: "Roboto", fontWeight: 400 }}
>{`Ticket #${ticket.number} (created ${new Date(
ticket.created_at
ticket.createdAt
).toLocaleDateString()})`}</Typography>
</Box>
</ConversationHeader.Content>
</ConversationHeader>
<MessageList style={{ marginBottom: 80 }}>
{articles.map((article: any) => (
{ticket.articles.edges.map(({ node: article }: any) => (
<Message
className={
article.internal
? "internal-note"
: article.sender === "Agent"
: article.sender.name === "Agent"
? "outgoing-message"
: "incoming-message"
}
@ -63,8 +64,7 @@ export const TicketDetail: FC<TicketDetailProps> = ({ ticket, articles }) => {
sender: article.from,
direction:
article.sender === "Agent" ? "outgoing" : "incoming",
position: "last",
type: "html",
position: "single",
}}
/>
))}
@ -92,8 +92,7 @@ export const TicketDetail: FC<TicketDetailProps> = ({ ticket, articles }) => {
spacing={4}
justifyContent="center"
alignItems="center"
alignContent={"center"}
sx={{ height: 72, pt: 2 }}
alignContent="center"
>
<Grid item>
<Button
@ -109,6 +108,11 @@ export const TicketDetail: FC<TicketDetailProps> = ({ ticket, articles }) => {
margin: "20px 0px",
whiteSpace: "nowrap",
py: "10px",
mt: 2
}}
onClick={() => {
setArticleKind("reply");
setDialogOpen(true);
}}
>
Reply to ticket
@ -129,6 +133,11 @@ export const TicketDetail: FC<TicketDetailProps> = ({ ticket, articles }) => {
margin: "20px 0px",
whiteSpace: "nowrap",
py: "10px",
mt: 2
}}
onClick={() => {
setArticleKind("note");
setDialogOpen(true);
}}
>
Write note to agent
@ -137,6 +146,7 @@ export const TicketDetail: FC<TicketDetailProps> = ({ ticket, articles }) => {
</Grid>
</Box>
</MainContainer>
<ArticleCreateDialog ticketID={ticket.internalId} open={dialogOpen} closeDialog={closeDialog} kind={articleKind} />
</>
);
};