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, useState, useMemo } from "react";
 import { connect } from "react-redux";
 import { Virtuoso } from "react-virtuoso";
 import { createStructuredSelector } from "reselect";
@@ -11,35 +11,37 @@ import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-displ
 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 { GET_PHONE_NUMBER_CONSENTS } from "../../graphql/consent.queries";
 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 }) {
+function ChatConversationListComponent({ conversationList, selectedConversation, setSelectedConversation, bodyshop }) {
   const { t } = useTranslation();
   const [, forceUpdate] = useState(false);
 
-  // Normalize phone numbers and fetch consent statuses
+  const enforceConsent = bodyshop?.enforce_sms_consent ?? false;
+
   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,
+    skip: !enforceConsent || !conversationList.length || !conversationList[0]?.bodyshopid,
     fetchPolicy: "cache-and-network"
   });
 
-  // Create a map of phone number to consent status
-  const consentMap = React.useMemo(() => {
+  const consentMap = useMemo(() => {
     const map = new Map();
     consentData?.phone_number_consent?.forEach((consent) => {
       map.set(consent.phone_number, consent.consent_status);
@@ -54,14 +56,14 @@ function ChatConversationListComponent({ conversationList, selectedConversation,
     return () => clearInterval(interval);
   }, []);
 
-  const sortedConversationList = React.useMemo(() => {
+  const sortedConversationList = useMemo(() => {
     return _.orderBy(conversationList, ["updated_at"], ["desc"]);
   }, [conversationList]);
 
   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 isConsented = enforceConsent ? (consentMap.get(normalizedPhone) ?? false) : true;
 
     const cardContentRight = <TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>;
     const cardContentLeft =
@@ -87,7 +89,7 @@ function ChatConversationListComponent({ conversationList, selectedConversation,
     const cardExtra = (
       <>
         <Badge count={item.messages_aggregate.aggregate.count} />
-        {!isConsented && <Tag color="red">{t("messaging.labels.no_consent")}</Tag>}
+        {enforceConsent && !isConsented && <Tag color="red">{t("messaging.labels.no_consent")}</Tag>}
       </>
     );
 
@@ -103,8 +105,24 @@ function ChatConversationListComponent({ conversationList, selectedConversation,
         className={`chat-list-item ${item.id === selectedConversation ? "chat-list-selected-conversation" : ""}`}
       >
         <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>
+          <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>
     );