feature/IO-3182-Phone-Number-Consent - Checkpoint

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

@@ -1,5 +1,5 @@
 import { Badge, Card, List, Space, Tag } from "antd";
-import React, { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { connect } from "react-redux";
 import { Virtuoso } from "react-virtuoso";
 import { createStructuredSelector } from "reselect";
@@ -10,35 +10,63 @@ import PhoneFormatter from "../../utils/PhoneFormatter";
 import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
 import _ from "lodash";
 import "./chat-conversation-list.styles.scss";
+import { useQuery } from "@apollo/client";
+import { GET_PHONE_NUMBER_OPT_OUTS } from "../../graphql/phone-number-opt-out.queries.js";
+import { phone } from "phone";
+import { useTranslation } from "react-i18next";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 
 const mapStateToProps = createStructuredSelector({
-  selectedConversation: selectSelectedConversation
+  selectedConversation: selectSelectedConversation,
+  bodyshop: selectBodyshop
 });
 
 const mapDispatchToProps = (dispatch) => ({
   setSelectedConversation: (conversationId) => dispatch(setSelectedConversation(conversationId))
 });
 
-function ChatConversationListComponent({ conversationList, selectedConversation, setSelectedConversation }) {
-  // That comma is there for a reason, do not remove it
+function ChatConversationListComponent({ conversationList, selectedConversation, setSelectedConversation, bodyshop }) {
+  const { t } = useTranslation();
   const [, forceUpdate] = useState(false);
 
-  // Re-render every minute
+  const phoneNumbers = conversationList.map((item) => phone(item.phone_num, "CA").phoneNumber.replace(/^\+1/, ""));
+
+  const { data: optOutData } = useQuery(GET_PHONE_NUMBER_OPT_OUTS, {
+    variables: {
+      bodyshopid: bodyshop.id,
+      phone_numbers: phoneNumbers
+    },
+    skip: !conversationList.length,
+    fetchPolicy: "cache-and-network"
+  });
+
+  const optOutMap = useMemo(() => {
+    const map = new Map();
+    optOutData?.phone_number_opt_out?.forEach((optOut) => {
+      map.set(optOut.phone_number, true);
+    });
+    return map;
+  }, [optOutData?.phone_number_opt_out]);
+
   useEffect(() => {
     const interval = setInterval(() => {
-      forceUpdate((prev) => !prev); // Toggle state to trigger re-render
-    }, 60000); // 1 minute in milliseconds
-
-    return () => clearInterval(interval); // Cleanup on unmount
+      forceUpdate((prev) => !prev);
+    }, 60000);
+    return () => clearInterval(interval);
   }, []);
 
-  // Memoize the sorted conversation list
-  const sortedConversationList = React.useMemo(() => {
+  const sortedConversationList = useMemo(() => {
     return _.orderBy(conversationList, ["updated_at"], ["desc"]);
   }, [conversationList]);
 
-  const renderConversation = (index) => {
+  const renderConversation = (index, t) => {
     const item = sortedConversationList[index];
+    const normalizedPhone = phone(item.phone_num, "CA").phoneNumber.replace(/^\+1/, "");
+    // Check if the phone number exists in the consentMap
+    const hasOptOutEntry = optOutMap.has(normalizedPhone);
+    // Only consider it non-consented if it exists and consent_status is false
+    const isOptedOut = hasOptOutEntry ? optOutMap.get(normalizedPhone) : true;
+
     const cardContentRight = <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>;
     const cardContentLeft =
       item.job_conversations.length > 0
@@ -60,7 +88,12 @@ function ChatConversationListComponent({ conversationList, selectedConversation,
       </>
     );
 
-    const cardExtra = <Badge count={item.messages_aggregate.aggregate.count} />;
+    const cardExtra = (
+      <>
+        <Badge count={item.messages_aggregate.aggregate.count} />
+        {hasOptOutEntry && !isOptedOut && <Tag color="red">{t("messaging.labels.no_consent")}</Tag>}
+      </>
+    );
 
     const getCardStyle = () =>
       item.id === selectedConversation
@@ -73,9 +106,25 @@ function ChatConversationListComponent({ conversationList, selectedConversation,
         onClick={() => setSelectedConversation(item.id)}
         className={`chat-list-item ${item.id === selectedConversation ? "chat-list-selected-conversation" : ""}`}
       >
-        <Card style={getCardStyle()} bordered={false} size="small" extra={cardExtra} title={cardTitle}>
-          <div style={{ display: "inline-block", width: "70%", textAlign: "left" }}>{cardContentLeft}</div>
-          <div style={{ display: "inline-block", width: "30%", textAlign: "right" }}>{cardContentRight}</div>
+        <Card style={getCardStyle()} variant={true} size="small" extra={cardExtra} title={cardTitle}>
+          <div
+            style={{
+              display: "inline-block",
+              width: "70%",
+              textAlign: "left"
+            }}
+          >
+            {cardContentLeft}
+          </div>
+          <div
+            style={{
+              display: "inline-block",
+              width: "30%",
+              textAlign: "right"
+            }}
+          >
+            {cardContentRight}
+          </div>
         </Card>
       </List.Item>
     );
@@ -85,7 +134,7 @@ function ChatConversationListComponent({ conversationList, selectedConversation,
     <div className="chat-list-container">
       <Virtuoso
         data={sortedConversationList}
-        itemContent={(index) => renderConversation(index)}
+        itemContent={(index) => renderConversation(index, t)}
         style={{ height: "100%", width: "100%" }}
       />
     </div>