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

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

@@ -10,6 +10,10 @@ 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_CONSENTS } from "../../graphql/consent.queries.js";
+import { phone } from "phone";
+import { useTranslation } from "react-i18next";
 
 const mapStateToProps = createStructuredSelector({
   selectedConversation: selectSelectedConversation
@@ -20,25 +24,45 @@ const mapDispatchToProps = (dispatch) => ({
 });
 
 function ChatConversationListComponent({ conversationList, selectedConversation, setSelectedConversation }) {
-  // That comma is there for a reason, do not remove it
+  const { t } = useTranslation();
   const [, forceUpdate] = useState(false);
 
-  // Re-render every minute
+  // Normalize phone numbers and fetch consent statuses
+  const phoneNumbers = conversationList.map((item) => phone(item.phone_num, "CA").phoneNumber.replace(/^\+1/, ""));
+  const { data: consentData, loading: consentLoading } = useQuery(GET_PHONE_NUMBER_CONSENTS, {
+    variables: {
+      bodyshopid: conversationList[0]?.bodyshopid,
+      phone_numbers: phoneNumbers
+    },
+    skip: !conversationList.length || !conversationList[0]?.bodyshopid,
+    fetchPolicy: "cache-and-network"
+  });
+
+  // Create a map of phone number to consent status
+  const consentMap = React.useMemo(() => {
+    const map = new Map();
+    consentData?.phone_number_consent?.forEach((consent) => {
+      map.set(consent.phone_number, consent.consent_status);
+    });
+    return map;
+  }, [consentData]);
+
   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(() => {
     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/, "");
+    const isConsented = consentMap.get(normalizedPhone) ?? false;
+
     const cardContentRight = <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>;
     const cardContentLeft =
       item.job_conversations.length > 0
@@ -60,7 +84,12 @@ function ChatConversationListComponent({ conversationList, selectedConversation,
       </>
     );
 
-    const cardExtra = <Badge count={item.messages_aggregate.aggregate.count} />;
+    const cardExtra = (
+      <>
+        <Badge count={item.messages_aggregate.aggregate.count} />
+        {!isConsented && <Tag color="red">{t("messaging.labels.no_consent")}</Tag>}
+      </>
+    );
 
     const getCardStyle = () =>
       item.id === selectedConversation
@@ -73,7 +102,7 @@ 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}>
+        <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>
@@ -85,7 +114,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>