From cffa1e217274c0dbc1c826b0dea33a4a766d4ad4 Mon Sep 17 00:00:00 2001
From: Patrick Fic <snaptsoft@gmail.com>
Date: Thu, 15 Dec 2022 10:13:30 -0800
Subject: [PATCH] IO-2121 Add custom label to conversation.

---
 bodyshop_translations.babel                   | 44 +++++++++++-
 .../chat-conversation-list.component.jsx      | 27 ++++----
 .../chat-conversation-title.component.jsx     |  2 +
 .../chat-label/chat-label.component.jsx       | 67 +++++++++++++++++++
 .../payable-export-all-button.component.jsx   |  2 +-
 client/src/graphql/conversations.queries.js   | 14 ++++
 client/src/translations/en_us/common.json     |  4 +-
 client/src/translations/es/common.json        |  4 +-
 client/src/translations/fr/common.json        |  4 +-
 hasura/metadata/tables.yaml                   |  3 +
 .../down.sql                                  |  4 ++
 .../up.sql                                    |  2 +
 12 files changed, 160 insertions(+), 17 deletions(-)
 create mode 100644 client/src/components/chat-label/chat-label.component.jsx
 create mode 100644 hasura/migrations/1671125177398_alter_table_public_conversations_add_column_label/down.sql
 create mode 100644 hasura/migrations/1671125177398_alter_table_public_conversations_add_column_label/up.sql

diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel
index 28febe73c..fce81ae47 100644
--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
@@ -1,4 +1,4 @@
-<babeledit_project be_version="2.7.1" version="1.2">
+<babeledit_project version="1.2" be_version="2.7.1">
     <!--
 
     BabelEdit project file
@@ -32670,11 +32670,53 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>updatinglabel</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                 </children>
                             </folder_node>
                             <folder_node>
                                 <name>labels</name>
                                 <children>
+                                    <concept_node>
+                                        <name>addlabel</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>archive</name>
                                         <definition_loaded>false</definition_loaded>
diff --git a/client/src/components/chat-conversation-list/chat-conversation-list.component.jsx b/client/src/components/chat-conversation-list/chat-conversation-list.component.jsx
index cb020ed26..849b19720 100644
--- a/client/src/components/chat-conversation-list/chat-conversation-list.component.jsx
+++ b/client/src/components/chat-conversation-list/chat-conversation-list.component.jsx
@@ -1,4 +1,4 @@
-import { Badge, List, Tag } from "antd";
+import { Badge, List, Space, Tag } from "antd";
 import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -38,17 +38,20 @@ export function ChatConversationListComponent({
                 : null
             }`}
           >
-            {item.job_conversations.length > 0 ? (
-              <div className="chat-name">
-                {item.job_conversations.map((j, idx) => (
-                  <div key={idx}>
-                    <OwnerNameDisplay ownerObject={j.job} />
-                  </div>
-                ))}
-              </div>
-            ) : (
-              <PhoneFormatter>{item.phone_num}</PhoneFormatter>
-            )}
+            <div sryle={{ display: "inline-block" }}>
+              {item.label && <div className="chat-name">{item.label}</div>}
+              {item.job_conversations.length > 0 ? (
+                <div className="chat-name">
+                  {item.job_conversations.map((j, idx) => (
+                    <div key={idx}>
+                      <OwnerNameDisplay ownerObject={j.job} />
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <PhoneFormatter>{item.phone_num}</PhoneFormatter>
+              )}
+            </div>
             <div sryle={{ display: "inline-block" }}>
               <div>
                 {item.job_conversations.length > 0
diff --git a/client/src/components/chat-conversation-title/chat-conversation-title.component.jsx b/client/src/components/chat-conversation-title/chat-conversation-title.component.jsx
index 16ff571fd..1503bf46f 100644
--- a/client/src/components/chat-conversation-title/chat-conversation-title.component.jsx
+++ b/client/src/components/chat-conversation-title/chat-conversation-title.component.jsx
@@ -3,6 +3,7 @@ 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 ChatLabelComponent from "../chat-label/chat-label.component";
 import ChatTagRoContainer from "../chat-tag-ro/chat-tag-ro.container";
 
 export default function ChatConversationTitle({ conversation }) {
@@ -11,6 +12,7 @@ export default function ChatConversationTitle({ conversation }) {
       <PhoneNumberFormatter>
         {conversation && conversation.phone_num}
       </PhoneNumberFormatter>
+      <ChatLabelComponent conversation={conversation} />
       <ChatConversationTitleTags
         jobConversations={
           (conversation && conversation.job_conversations) || []
diff --git a/client/src/components/chat-label/chat-label.component.jsx b/client/src/components/chat-label/chat-label.component.jsx
new file mode 100644
index 000000000..6a9b51a7f
--- /dev/null
+++ b/client/src/components/chat-label/chat-label.component.jsx
@@ -0,0 +1,67 @@
+import { PlusOutlined } from "@ant-design/icons";
+import { useMutation } from "@apollo/client";
+import { Input, notification, Spin, Tag, Tooltip } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { UPDATE_CONVERSATION_LABEL } from "../../graphql/conversations.queries";
+export default function ChatLabel({ conversation }) {
+  const [loading, setLoading] = useState(false);
+  const [editing, setEditing] = useState(false);
+  const [value, setValue] = useState(conversation.label);
+
+  const { t } = useTranslation();
+  const [updateLabel] = useMutation(UPDATE_CONVERSATION_LABEL);
+
+  const handleSave = async () => {
+    setLoading(true);
+    try {
+      const response = await updateLabel({
+        variables: { id: conversation.id, label: value },
+      });
+      if (response.errors) {
+        notification["error"]({
+          message: t("messages.errors.updatinglabel", {
+            error: JSON.stringify(response.errors),
+          }),
+        });
+      } else {
+        setEditing(false);
+      }
+    } catch (error) {
+      notification["error"]({
+        message: t("messages.errors.updatinglabel", {
+          error: JSON.stringify(error),
+        }),
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+  if (editing) {
+    return (
+      <div>
+        <Input
+          autoFocus
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onBlur={handleSave}
+          allowClear
+        />
+        {loading && <Spin size="small" />}
+      </div>
+    );
+  } else {
+    return conversation.label && conversation.label.trim() !== "" ? (
+      <Tag style={{ cursor: "pointer" }} onClick={() => setEditing(true)}>
+        {conversation.label}
+      </Tag>
+    ) : (
+      <Tooltip title={t("messaging.labels.addlabel")}>
+        <PlusOutlined
+          style={{ cursor: "pointer" }}
+          onClick={() => setEditing(true)}
+        />
+      </Tooltip>
+    );
+  }
+}
diff --git a/client/src/components/payable-export-all-button/payable-export-all-button.component.jsx b/client/src/components/payable-export-all-button/payable-export-all-button.component.jsx
index c01853414..7aa13f5e3 100644
--- a/client/src/components/payable-export-all-button/payable-export-all-button.component.jsx
+++ b/client/src/components/payable-export-all-button/payable-export-all-button.component.jsx
@@ -159,7 +159,7 @@ export function PayableExportAll({
               } else {
                 notification["error"]({
                   message: t("bills.errors.exporting", {
-                    error: JSON.stringify(billUpdateResponse.error),
+                    error: JSON.stringify(billUpdateResponse.errors),
                   }),
                 });
               }
diff --git a/client/src/graphql/conversations.queries.js b/client/src/graphql/conversations.queries.js
index dae2ec052..2bd735bf5 100644
--- a/client/src/graphql/conversations.queries.js
+++ b/client/src/graphql/conversations.queries.js
@@ -43,6 +43,7 @@ export const CONVERSATION_LIST_QUERY = gql`
       updated_at
       unreadcnt
       archived
+      label
       messages_aggregate(
         where: { read: { _eq: false }, isoutbound: { _eq: false } }
       ) {
@@ -88,6 +89,7 @@ export const GET_CONVERSATION_DETAILS = gql`
       id
       phone_num
       archived
+      label
       job_conversations {
         jobid
         conversationid
@@ -136,3 +138,15 @@ export const TOGGLE_CONVERSATION_ARCHIVE = gql`
     }
   }
 `;
+
+export const UPDATE_CONVERSATION_LABEL = gql`
+  mutation UPDATE_CONVERSATION_LABEL($id: uuid!, $label: String) {
+    update_conversations_by_pk(
+      pk_columns: { id: $id }
+      _set: { label: $label }
+    ) {
+      label
+      id
+    }
+  }
+`;
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index 3100e0d85..7fd3e1f2e 100644
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -1915,9 +1915,11 @@
 			},
 			"errors": {
 				"invalidphone": "The phone number is invalid.  Unable to open conversation. ",
-				"noattachedjobs": "No jobs have been associated to this conversation. "
+				"noattachedjobs": "No jobs have been associated to this conversation. ",
+				"updatinglabel": "Error updating label. {{error}}"
 			},
 			"labels": {
+				"addlabel": "Add a label to this conversation.",
 				"archive": "Archive",
 				"maxtenimages": "You can only select up to a maximum of 10 images at a time.",
 				"messaging": "Messaging",
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
index 66ee12198..03a825249 100644
--- a/client/src/translations/es/common.json
+++ b/client/src/translations/es/common.json
@@ -1915,9 +1915,11 @@
 			},
 			"errors": {
 				"invalidphone": "",
-				"noattachedjobs": ""
+				"noattachedjobs": "",
+				"updatinglabel": ""
 			},
 			"labels": {
+				"addlabel": "",
 				"archive": "",
 				"maxtenimages": "",
 				"messaging": "Mensajería",
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
index 1600e8e47..7557faf8a 100644
--- a/client/src/translations/fr/common.json
+++ b/client/src/translations/fr/common.json
@@ -1915,9 +1915,11 @@
 			},
 			"errors": {
 				"invalidphone": "",
-				"noattachedjobs": ""
+				"noattachedjobs": "",
+				"updatinglabel": ""
 			},
 			"labels": {
+				"addlabel": "",
 				"archive": "",
 				"maxtenimages": "",
 				"messaging": "Messagerie",
diff --git a/hasura/metadata/tables.yaml b/hasura/metadata/tables.yaml
index 3f600c70a..79a4dad70 100644
--- a/hasura/metadata/tables.yaml
+++ b/hasura/metadata/tables.yaml
@@ -1241,6 +1241,7 @@
           - bodyshopid
           - created_at
           - id
+          - label
           - phone_num
           - unreadcnt
           - updated_at
@@ -1252,6 +1253,7 @@
           - bodyshopid
           - created_at
           - id
+          - label
           - phone_num
           - unreadcnt
           - updated_at
@@ -1273,6 +1275,7 @@
           - bodyshopid
           - created_at
           - id
+          - label
           - phone_num
           - unreadcnt
           - updated_at
diff --git a/hasura/migrations/1671125177398_alter_table_public_conversations_add_column_label/down.sql b/hasura/migrations/1671125177398_alter_table_public_conversations_add_column_label/down.sql
new file mode 100644
index 000000000..3340df1ed
--- /dev/null
+++ b/hasura/migrations/1671125177398_alter_table_public_conversations_add_column_label/down.sql
@@ -0,0 +1,4 @@
+-- Could not auto-generate a down migration.
+-- Please write an appropriate down migration for the SQL below:
+-- alter table "public"."conversations" add column "label" text
+--  null;
diff --git a/hasura/migrations/1671125177398_alter_table_public_conversations_add_column_label/up.sql b/hasura/migrations/1671125177398_alter_table_public_conversations_add_column_label/up.sql
new file mode 100644
index 000000000..6ddf9e066
--- /dev/null
+++ b/hasura/migrations/1671125177398_alter_table_public_conversations_add_column_label/up.sql
@@ -0,0 +1,2 @@
+alter table "public"."conversations" add column "label" text
+ null;