IO-1124 Archive message

client/src/components/chat-archive-button/chat-archive-button.component.jsx

@@ -0,0 +1,32 @@
+import { useMutation } from "@apollo/client";
+import { Button } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { TOGGLE_CONVERSATION_ARCHIVE } from "../../graphql/conversations.queries";
+
+export default function ChatArchiveButton({ conversation }) {
+  console.log(
+    "🚀  ~ file: chat-archive-button.component.jsx  ~ line 6  ~ conversation",
+    conversation
+  );
+  const [loading, setLoading] = useState(false);
+  const { t } = useTranslation();
+  const [updateConversation] = useMutation(TOGGLE_CONVERSATION_ARCHIVE);
+  const handleToggleArchive = async () => {
+    setLoading(true);
+
+    await updateConversation({
+      variables: { id: conversation.id, archived: !conversation.archived },
+    });
+
+    setLoading(false);
+  };
+
+  return (
+    <Button onClick={handleToggleArchive} loading={loading} type="primary">
+      {conversation.archived
+        ? t("messaging.labels.unarchive")
+        : t("messaging.labels.archive")}
+    </Button>
+  );
+}

client/src/components/chat-conversation-title/chat-conversation-title.component.jsx

@@ -1,12 +1,13 @@
 import { Space } from "antd";
 import React from "react";
 import PhoneNumberFormatter from "../../utils/PhoneFormatter";
+import ChatArchiveButton from "../chat-archive-button/chat-archive-button.component";
 import ChatConversationTitleTags from "../chat-conversation-title-tags/chat-conversation-title-tags.component";
 import ChatTagRoContainer from "../chat-tag-ro/chat-tag-ro.container";
 
 export default function ChatConversationTitle({ conversation }) {
   return (
-    <Space flex>
+    <Space wrap>
       <PhoneNumberFormatter>
         {conversation && conversation.phone_num}
       </PhoneNumberFormatter>
@@ -16,6 +17,7 @@ export default function ChatConversationTitle({ conversation }) {
         }
       />
       <ChatTagRoContainer conversation={conversation || []} />
+      <ChatArchiveButton conversation={conversation} />
     </Space>
   );
 }

client/src/graphql/conversations.queries.js

@@ -2,7 +2,11 @@ import { gql } from "@apollo/client";
 
 export const CONVERSATION_LIST_SUBSCRIPTION = gql`
   subscription CONVERSATION_LIST_SUBSCRIPTION {
-    conversations(order_by: { updated_at: desc }, limit: 100) {
+    conversations(
+      order_by: { updated_at: desc }
+      limit: 100
+      where: { archived: { _eq: false } }
+    ) {
       phone_num
       id
       job_conversations {
@@ -51,6 +55,7 @@ export const CONVERSATION_SUBSCRIPTION_BY_PK = gql`
       }
       id
       phone_num
+      archived
       job_conversations {
         jobid
         conversationid
@@ -87,3 +92,14 @@ export const CREATE_CONVERSATION = gql`
     }
   }
 `;
+
+export const TOGGLE_CONVERSATION_ARCHIVE = gql`
+  mutation TOGGLE_CONVERSATION_ARCHIVE($id: uuid!, $archived: Boolean) {
+    update_conversations_by_pk(
+      pk_columns: { id: $id }
+      _set: { archived: $archived }
+    ) {
+      archived
+    }
+  }
+`;

client/src/translations/en_us/common.json

@@ -1501,6 +1501,7 @@
 				"invalidphone": "The phone number is invalid.  Unable to open conversation. "
 			},
 			"labels": {
+				"archive": "Archive",
 				"maxtenimages": "You can only select up to a maximum of 10 images at a time.",
 				"messaging": "Messaging",
 				"noallowtxt": "This customer has not indicated their permission to be messaged.",
@@ -1509,7 +1510,8 @@
 				"presets": "Presets",
 				"selectmedia": "Select Media",
 				"sentby": "Sent by {{by}} at {{time}}",
-				"typeamessage": "Send a message..."
+				"typeamessage": "Send a message...",
+				"unarchive": "Unarchive"
 			}
 		},
 		"notes": {

client/src/translations/es/common.json

@@ -1501,6 +1501,7 @@
 				"invalidphone": ""
 			},
 			"labels": {
+				"archive": "",
 				"maxtenimages": "",
 				"messaging": "Mensajería",
 				"noallowtxt": "",
@@ -1509,7 +1510,8 @@
 				"presets": "",
 				"selectmedia": "",
 				"sentby": "",
-				"typeamessage": "Enviar un mensaje..."
+				"typeamessage": "Enviar un mensaje...",
+				"unarchive": ""
 			}
 		},
 		"notes": {

client/src/translations/fr/common.json

@@ -1501,6 +1501,7 @@
 				"invalidphone": ""
 			},
 			"labels": {
+				"archive": "",
 				"maxtenimages": "",
 				"messaging": "Messagerie",
 				"noallowtxt": "",
@@ -1509,7 +1510,8 @@
 				"presets": "",
 				"selectmedia": "",
 				"sentby": "",
-				"typeamessage": "Envoyer un message..."
+				"typeamessage": "Envoyer un message...",
+				"unarchive": ""
 			}
 		},
 		"notes": {