Move in progress apps temporarily

apps/link/components/ArticleCreateDialog.tsx

@@ -0,0 +1,97 @@
+import { FC, useState } from "react";
+import { Grid, Button, Dialog, DialogActions, DialogContent, TextField } from "@mui/material";
+// import { request, gql } from "graphql-request";
+
+interface ArticleCreateDialogProps {
+  ticketID: string;
+  open: boolean;
+  closeDialog: () => void;
+  kind: "reply" | "note";
+}
+
+export const ArticleCreateDialog: FC<ArticleCreateDialogProps> = ({ ticketID, open, closeDialog, kind }) => {
+  console.log({ ticketID })
+  const [body, setBody] = useState("");
+  const backgroundColor = kind === "reply" ? "#1982FC" : "#FFB620";
+  const color = kind === "reply" ? "white" : "black";
+  const origin = typeof window !== 'undefined' && window.location.origin
+    ? window.location.origin
+    : '';
+  const createArticle = async () => {
+    // const token = document?.querySelector('meta[name="csrf-token"]').getAttribute('content');
+    // console.log({ token })
+    const res = await fetch(`${origin}/api/v1/ticket_articles`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-CSRF-Token": "BG3wYuvTgi4ALfaZ-Mdq6i08wRFRJHeCPJbfGjfVarLRhwaxRC8J-AZvGiSNOiWrN38WT3C9WGLhcmaMb0AqBQ",
+      },
+      body: JSON.stringify({
+        ticket_id: ticketID,
+        body,
+        internal: kind === "note",
+        sender: "Agent",
+      }),
+    });
+    console.log({ res })
+    /*
+    const document = gql`
+
+  mutation {
+        ticketUpdate(
+          input: {
+            ticketId: "1"
+            body: "This is a test article"
+            internal: false
+          }
+        ) {
+          article {
+            id
+          }
+        }
+      }
+    `;
+    const data = await request({
+      url: `${origin}/graphql`,
+      document,
+    });
+
+    console.log({ data })
+    */
+    closeDialog();
+    setBody("");
+  }
+
+  return (
+    <Dialog open={open} maxWidth="sm" fullWidth >
+      <DialogContent>
+        <TextField label={kind === "reply" ? "Write reply" : "Write internal note"} multiline rows={10} fullWidth value={body} onChange={(e: any) => setBody(e.target.value)} />
+      </DialogContent>
+      <DialogActions sx={{ px: 3, pt: 0, pb: 3 }}>
+        <Grid container justifyContent="space-between">
+          <Grid item>
+            <Button sx={{
+              backgroundColor: "white", color: "#666", fontFamily: "Poppins, sans-serif",
+              fontWeight: 700,
+              borderRadius: 2,
+              textTransform: "none",
+            }}
+              onClick={() => { setBody(""); closeDialog() }}>Cancel</Button>
+          </Grid>
+          <Grid item>
+            <Button sx={{
+              backgroundColor, color, fontFamily: "Poppins, sans-serif",
+              fontWeight: 700,
+              borderRadius: 2,
+              textTransform: "none",
+              px: 3
+            }}
+              onClick={createArticle}
+            >{kind === "reply" ? "Send Reply" : "Save Note"}</Button>
+          </Grid>
+        </Grid>
+      </DialogActions>
+    </Dialog >
+
+  );
+};

apps/link/components/TicketDetail.tsx

@@ -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} />
     </>
   );
 };

apps/link/components/TicketEdit.tsx

@@ -1,15 +1,6 @@
 import { FC, useEffect } from "react";
 import { Grid, Box, Typography, TextField } 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 TicketEditProps {
   ticket: any;