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

client/src/components/chat-send-message/chat-send-message.component.jsx

@@ -10,6 +10,10 @@ import { selectIsSending, selectMessage } from "../../redux/messaging/messaging.
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import ChatMediaSelector from "../chat-media-selector/chat-media-selector.component";
 import ChatPresetsComponent from "../chat-presets/chat-presets.component";
+import { useQuery } from "@apollo/client";
+import { GET_PHONE_NUMBER_CONSENT } from "../../graphql/consent.queries";
+import AlertComponent from "../alert/alert.component";
+import { phone } from "phone";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -25,16 +29,23 @@ const mapDispatchToProps = (dispatch) => ({
 function ChatSendMessageComponent({ conversation, bodyshop, sendMessage, isSending, message, setMessage }) {
   const inputArea = useRef(null);
   const [selectedMedia, setSelectedMedia] = useState([]);
+  const { t } = useTranslation();
+
+  const normalizedPhone = phone(conversation.phone_num, "CA").phoneNumber.replace(/^\+1/, "");
+  const { data: consentData } = useQuery(GET_PHONE_NUMBER_CONSENT, {
+    variables: { bodyshopid: bodyshop.id, phone_number: normalizedPhone },
+    fetchPolicy: "cache-and-network"
+  });
+  const isConsented = consentData?.phone_number_consent?.[0]?.consent_status ?? false;
 
   useEffect(() => {
     inputArea.current.focus();
   }, [isSending, setMessage]);
 
-  const { t } = useTranslation();
-
   const handleEnter = () => {
     const selectedImages = selectedMedia.filter((i) => i.isSelected);
     if ((message === "" || !message) && selectedImages.length === 0) return;
+    if (!isConsented) return;
     logImEXEvent("messaging_send_message");
 
     if (selectedImages.length < 11) {
@@ -44,7 +55,8 @@ function ChatSendMessageComponent({ conversation, bodyshop, sendMessage, isSendi
         messagingServiceSid: bodyshop.messagingservicesid,
         conversationid: conversation.id,
         selectedMedia: selectedImages,
-        imexshopid: bodyshop.imexshopid
+        imexshopid: bodyshop.imexshopid,
+        bodyshopid: bodyshop.id
       };
       sendMessage(newMessage);
       setSelectedMedia(
@@ -57,6 +69,9 @@ function ChatSendMessageComponent({ conversation, bodyshop, sendMessage, isSendi
 
   return (
     <div className="imex-flex-row" style={{ width: "100%" }}>
+      {!isConsented && (
+        <AlertComponent message={t("messaging.errors.no_consent")} type="warning" style={{ marginBottom: 8 }} />
+      )}
       <ChatPresetsComponent className="imex-flex-row__margin" />
       <ChatMediaSelector
         conversation={conversation}
@@ -71,18 +86,18 @@ function ChatSendMessageComponent({ conversation, bodyshop, sendMessage, isSendi
           ref={inputArea}
           autoSize={{ minRows: 1, maxRows: 4 }}
           value={message}
-          disabled={isSending}
+          disabled={isSending || !isConsented}
           placeholder={t("messaging.labels.typeamessage")}
           onChange={(e) => setMessage(e.target.value)}
           onPressEnter={(event) => {
             event.preventDefault();
-            if (!!!event.shiftKey) handleEnter();
+            if (!event.shiftKey && isConsented) handleEnter();
           }}
         />
       </span>
       <SendOutlined
         className="chat-send-message-button"
-        //  disabled={message === "" || !message}
+        disabled={!isConsented || message === "" || !message}
         onClick={handleEnter}
       />
       <Spin