IO-2121 Add custom label to conversation.

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

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) || []

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>
+    );
+  }
+}

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),
                   }),
                 });
               }