Added MMS support for messaging. IO-538

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

@@ -1,6 +1,6 @@
 import { LoadingOutlined, SendOutlined } from "@ant-design/icons";
 import { Input, Spin } from "antd";
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -14,6 +14,7 @@ import {
   selectMessage,
 } from "../../redux/messaging/messaging.selectors";
 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";
 
 const mapStateToProps = createStructuredSelector({
@@ -36,6 +37,7 @@ function ChatSendMessageComponent({
   setMessage,
 }) {
   const inputArea = useRef(null);
+  const [selectedMedia, setSelectedMedia] = useState([]);
   useEffect(() => {
     inputArea.current.focus();
   }, [isSending, setMessage]);
@@ -43,36 +45,55 @@ function ChatSendMessageComponent({
   const { t } = useTranslation();
 
   const handleEnter = () => {
+    if (message === "" || !message) return;
     logImEXEvent("messaging_send_message");
-    sendMessage({
-      to: conversation.phone_num,
-      body: message,
-      messagingServiceSid: bodyshop.messagingservicesid,
-      conversationid: conversation.id,
-    });
+    const selectedImages = selectedMedia.filter((i) => i.isSelected);
+    if (selectedImages < 11) {
+      sendMessage({
+        to: conversation.phone_num,
+        body: message,
+        messagingServiceSid: bodyshop.messagingservicesid,
+        conversationid: conversation.id,
+        selectedMedia: selectedImages,
+      });
+      setSelectedMedia(
+        selectedMedia.map((i) => {
+          return { ...i, isSelected: false };
+        })
+      );
+    }
   };
 
   return (
     <div className="imex-flex-row" style={{ width: "100%" }}>
       <ChatPresetsComponent className="imex-flex-row__margin" />
-
-      <Input.TextArea
-        className="imex-flex-row__margin imex-flex-row__grow"
-        allowClear
-        autoFocus
-        ref={inputArea}
-        autoSize={{ minRows: 1, maxRows: 4 }}
-        value={message}
-        disabled={isSending}
-        placeholder={t("messaging.labels.typeamessage")}
-        onChange={(e) => setMessage(e.target.value)}
-        onPressEnter={(event) => {
-          event.preventDefault();
-          if (!!!event.shiftKey) handleEnter();
-        }}
+      <ChatMediaSelector
+        conversation={conversation}
+        selectedMedia={selectedMedia}
+        setSelectedMedia={setSelectedMedia}
+      />
+      <span style={{ flex: 1 }}>
+        <Input.TextArea
+          className="imex-flex-row__margin imex-flex-row__grow"
+          allowClear
+          autoFocus
+          ref={inputArea}
+          autoSize={{ minRows: 1, maxRows: 4 }}
+          value={message}
+          disabled={isSending}
+          placeholder={t("messaging.labels.typeamessage")}
+          onChange={(e) => setMessage(e.target.value)}
+          onPressEnter={(event) => {
+            event.preventDefault();
+            if (!!!event.shiftKey) handleEnter();
+          }}
+        />
+      </span>
+      <SendOutlined
+        className="imex-flex-row__margin"
+        disabled={message === "" || !message}
+        onClick={handleEnter}
       />
-
-      <SendOutlined className="imex-flex-row__margin" onClick={handleEnter} />
       <Spin
         style={{ display: `${isSending ? "" : "none"}` }}
         indicator={