link-stack/apps/link/app/tickets/[id]/@detail/_components/TicketDetail.tsx

"use client";

import { FC, useState } from "react";
import useSWR from "swr";
import { getTicketQuery } from "@/app/_graphql/getTicketQuery";
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 {
  id: number;
}

export const TicketDetail: FC<TicketDetailProps> = ({ id }) => {
  const { data: ticketData, error: ticketError }: any = useSWR(
    {
      document: getTicketQuery,
      variables: { ticketId: `gid://zammad/Ticket/${id}` },
    },
    { refreshInterval: 100000 }
  );

  console.log({ ticketData, ticketError });
  const ticket = ticketData?.ticket;
  const [dialogOpen, setDialogOpen] = useState(false);
  const [articleKind, setArticleKind] = useState<"reply" | "note">("reply");
  const closeDialog = () => setDialogOpen(false);

  const shouldRender = ticketData && !ticketError;

  return (
    shouldRender && (
      <>
        <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
                  key={article.id}
                  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>
          </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}
        />
      </>
    )
  );
};