Fix email replies, update dependencies

apps/link/app/(main)/tickets/[id]/@detail/_components/TicketDetail.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { FC, useState } from "react";
+import { FC, useEffect, useState } from "react";
 import useSWR from "swr";
 import { getTicketQuery } from "app/_graphql/getTicketQuery";
 import { getTicketArticlesQuery } from "app/_graphql/getTicketArticlesQuery";
@@ -28,6 +28,8 @@ interface TicketDetailProps {
 }
 
 export const TicketDetail: FC<TicketDetailProps> = ({ id }) => {
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [articleKind, setArticleKind] = useState("note");
   const { data: ticketData, error: ticketError }: any = useSWR(
     {
       document: getTicketQuery,
@@ -49,26 +51,15 @@ export const TicketDetail: FC<TicketDetailProps> = ({ id }) => {
     body: JSON.stringify({ object: "Ticket", o_id: id }),
   });
 
+  const closeDialog = () => setDialogOpen(false);
   console.log({ recentViewData, recentViewError });
 
   const ticket = ticketData?.ticket;
   const ticketArticles = ticketArticlesData?.ticketArticles;
-  const externalArticles = ticketArticles?.edges.filter(
-    ({ node: article }: any) => !article.internal,
-  );
-  const mostRecentExternalArticle = externalArticles?.length
-    ? externalArticles[externalArticles.length - 1].node
-    : null;
-  console.log({ mostRecentExternalArticle });
-  const mostRecentExternalArticleKind =
-    mostRecentExternalArticle?.type?.name ?? "phone";
-  const mostRecentEmailRecipient = mostRecentExternalArticle?.to?.name ?? "";
-  console.log({ mostRecentExternalArticleKind, mostRecentEmailRecipient });
-  const [dialogOpen, setDialogOpen] = useState(false);
-  const [articleKind, setArticleKind] = useState("phone");
-  const [recipient, setRecipient] = useState(mostRecentEmailRecipient);
-  const closeDialog = () => setDialogOpen(false);
-
+  const firstArticle = ticketArticles?.edges[0]?.node;
+  const firstArticleKind = firstArticle?.type?.name ?? "phone";
+  const firstEmailSender = firstArticle?.from?.parsed?.[0]?.emailAddress ?? "";
+  const recipient = firstEmailSender;
   const shouldRender =
     ticketData && !ticketError && ticketArticlesData && !ticketArticlesError;
 
@@ -109,11 +100,11 @@ export const TicketDetail: FC<TicketDetailProps> = ({ id }) => {
                     article.internal
                       ? "internal-note"
                       : article?.sender?.name === "Agent"
-                      ? "outgoing-message"
-                      : "incoming-message"
+                        ? "outgoing-message"
+                        : "incoming-message"
                   }
                   model={{
-                    message: article.body.replace(/<div>*<br>*<div>/g, ""),
+                    message: article.bodyWithUrls,
                     sentTime: article.updated_at,
                     sender: article.from,
                     direction:
@@ -159,7 +150,7 @@ export const TicketDetail: FC<TicketDetailProps> = ({ id }) => {
                     mt: 2,
                   }}
                   onClick={() => {
-                    setArticleKind(mostRecentExternalArticleKind);
+                    setArticleKind(firstArticleKind);
                     setDialogOpen(true);
                   }}
                 >

apps/link/app/_graphql/getTicketArticlesQuery.ts

@@ -6,7 +6,7 @@ query getTicketArticles($ticketId: ID!) {
     edges {
       node {
         id
-        body
+        bodyWithUrls
         internal
         type {
           name
@@ -14,6 +14,11 @@ query getTicketArticles($ticketId: ID!) {
         sender {
           name
         }
+        from {
+          parsed {
+            emailAddress
+          }
+        }
       }
     }
   }

apps/link/app/api/auth/[...nextauth]/route.ts

@@ -93,7 +93,6 @@ const handler = NextAuth({
 
   callbacks: {
     signIn: async ({ user, account, profile }) => {
-      console.log("SIGN IN");
       const roles = await getUserRoles(user.email) ?? [];
       return roles.includes("admin") || roles.includes("agent") || process.env.SETUP_MODE === "true";
     },

apps/link/package.json

@@ -19,7 +19,7 @@
     "@fontsource/poppins": "^5.0.8",
     "@fontsource/roboto": "^5.0.8",
     "@mui/icons-material": "^5",
-    "@mui/lab": "^5.0.0-alpha.152",
+    "@mui/lab": "^5.0.0-alpha.153",
     "@mui/material": "^5",
     "@mui/x-data-grid-pro": "^6.18.1",
     "@mui/x-date-pickers-pro": "^6.18.1",
@@ -29,15 +29,15 @@
     "leafcutter-common": "*",
     "material-ui-popup-state": "^5.0.10",
     "mui-chips-input": "^2.1.3",
-    "next": "14.0.2",
-    "next-auth": "^4.24.4",
-    "ra-data-graphql": "^4.14.3",
-    "ra-i18n-polyglot": "^4.15.2",
-    "ra-input-rich-text": "^4.15.3",
-    "ra-language-english": "^4.15.2",
+    "next": "14.0.3",
+    "next-auth": "^4.24.5",
+    "ra-data-graphql": "^4.16.0",
+    "ra-i18n-polyglot": "^4.16.0",
+    "ra-input-rich-text": "^4.16.0",
+    "ra-language-english": "^4.16.0",
     "ra-postgraphile": "^6.1.2",
     "react": "18.2.0",
-    "react-admin": "^4.15.3",
+    "react-admin": "^4.16.0",
     "react-cookie": "^6.1.1",
     "react-digit-input": "^2.1.0",
     "react-dom": "18.2.0",
@@ -52,18 +52,18 @@
   },
   "devDependencies": {
     "@babel/core": "^7.23.3",
-    "@types/node": "^20.9.0",
-    "@types/react": "18.2.37",
+    "@types/node": "^20.9.4",
+    "@types/react": "18.2.38",
     "@types/uuid": "^9.0.7",
     "babel-loader": "^9.1.3",
-    "eslint": "^8.53.0",
+    "eslint": "^8.54.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-next": "^14.0.2",
+    "eslint-config-next": "^14.0.3",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-react": "^7.33.2",
-    "typescript": "5.2.2"
+    "typescript": "5.3.2"
   }
 }