Added image upload to email and multiple recipients BOD-103

client/src/components/email-overlay/email-overlay.component.jsx

@@ -1,18 +1,26 @@
+import { UploadOutlined } from "@ant-design/icons";
 import { Editor } from "@tinymce/tinymce-react";
-import { Input } from "antd";
+import { Button, Input, Upload, Select } from "antd";
 import React from "react";
+
 export default function EmailOverlayComponent({
   messageOptions,
   handleConfigChange,
+  handleToChange,
   handleHtmlChange,
+  handleUpload,
+  handleFileRemove,
 }) {
   return (
     <div>
       To:
-      <Input
-        value={messageOptions.to}
-        onChange={handleConfigChange}
+      <Select
         name="to"
+        mode="tags"
+        value={messageOptions.to}
+        style={{ width: "100%" }}
+        onChange={handleToChange}
+        tokenSeparators={[",", ";"]}
       />
       CC:
       <Input
@@ -45,6 +53,17 @@ export default function EmailOverlayComponent({
         }}
         onEditorChange={handleHtmlChange}
       />
+      <Upload
+        fileList={messageOptions.fileList}
+        beforeUpload={handleUpload}
+        onRemove={handleFileRemove}
+        multiple
+        listType="picture-card"
+      >
+        <Button>
+          <UploadOutlined /> Upload
+        </Button>
+      </Upload>
     </div>
   );
 }

client/src/components/email-overlay/email-overlay.container.jsx

@@ -4,17 +4,17 @@ import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { logImEXEvent } from "../../firebase/firebase.utils";
 import { toggleEmailOverlayVisible } from "../../redux/email/email.actions";
 import {
   selectEmailConfig,
   selectEmailVisible,
 } from "../../redux/email/email.selectors.js";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import { EmailSettings } from "../../utils/TemplateConstants";
 import RenderTemplate from "../../utils/RenderTemplate";
+import { EmailSettings } from "../../utils/TemplateConstants";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import EmailOverlayComponent from "./email-overlay.component";
-import { logImEXEvent } from "../../firebase/firebase.utils";
 
 const mapStateToProps = createStructuredSelector({
   modalVisible: selectEmailVisible,
@@ -33,6 +33,7 @@ export function EmailOverlayContainer({
   bodyshop,
 }) {
   const { t } = useTranslation();
+
   const [loading, setLoading] = useState(false);
   const [sending, setSending] = useState(false);
   const defaultEmailFrom = {
@@ -45,14 +46,27 @@ export function EmailOverlayContainer({
   const [messageOptions, setMessageOptions] = useState({
     ...defaultEmailFrom,
     html: "",
+    fileList: [],
   });
 
   const handleOk = async () => {
     logImEXEvent("email_send_from_modal");
 
+    const attachments = [];
+
+    await asyncForEach(messageOptions.fileList, async (f) => {
+      const t = {
+        ContentType: f.type,
+        Filename: f.name,
+        Base64Content: (await toBase64(f)).split(",")[1],
+      };
+      attachments.push(t);
+    });
+    console.log("messageOptions", messageOptions);
+
     setSending(true);
     try {
-      await axios.post("/sendemail", messageOptions);
+      await axios.post("/sendemail", { ...messageOptions, attachments });
       notification["success"]({ message: t("emails.successes.sent") });
       toggleEmailOverlayVisible();
     } catch (error) {
@@ -71,17 +85,37 @@ export function EmailOverlayContainer({
   const handleHtmlChange = (text) => {
     setMessageOptions({ ...messageOptions, html: text });
   };
+  const handleToChange = (recipients) => {
+    setMessageOptions({ ...messageOptions, to: recipients });
+  };
 
+  const handleUpload = (file) => {
+    setMessageOptions({
+      ...messageOptions,
+      fileList: [...messageOptions.fileList, file],
+    });
+    return false;
+  };
+
+  const handleFileRemove = (file) => {
+    setMessageOptions((state) => {
+      const index = state.fileList.indexOf(file);
+      const newfileList = state.fileList.slice();
+      newfileList.splice(index, 1);
+      return {
+        fileList: newfileList,
+      };
+    });
+  };
   const render = async () => {
     logImEXEvent("email_render_template", { template: emailConfig.template });
-
     setLoading(true);
-    console.log("emailConfig", emailConfig);
     let html = await RenderTemplate(emailConfig.template, bodyshop);
     setMessageOptions({
       ...emailConfig.messageOptions,
       ...defaultEmailFrom,
       html: html,
+      fileList: [],
     });
     setLoading(false);
   };
@@ -99,17 +133,22 @@ export function EmailOverlayContainer({
       onCancel={() => {
         toggleEmailOverlayVisible();
       }}
-      okButtonProps={{ loading: sending }}>
+      okButtonProps={{ loading: sending }}
+    >
       <LoadingSpinner loading={loading}>
         <EmailOverlayComponent
           handleConfigChange={handleConfigChange}
           messageOptions={messageOptions}
           handleHtmlChange={handleHtmlChange}
+          handleUpload={handleUpload}
+          handleFileRemove={handleFileRemove}
+          handleToChange={handleToChange}
         />
         <button
           onClick={() => {
             navigator.clipboard.writeText(messageOptions.html);
-          }}>
+          }}
+        >
           Copy HTML
         </button>
       </LoadingSpinner>
@@ -120,3 +159,17 @@ export default connect(
   mapStateToProps,
   mapDispatchToProps
 )(EmailOverlayContainer);
+
+const toBase64 = (file) =>
+  new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = (error) => reject(error);
+  });
+
+const asyncForEach = async (array, callback) => {
+  for (let index = 0; index < array.length; index++) {
+    await callback(array[index], index, array);
+  }
+};