Email Improvements.

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

@@ -1,4 +1,4 @@
-import { Modal, notification } from "antd";
+import { Form, Modal, notification } from "antd";
 import axios from "axios";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -10,7 +10,10 @@ import {
   selectEmailConfig,
   selectEmailVisible,
 } from "../../redux/email/email.selectors.js";
-import { selectBodyshop } from "../../redux/user/user.selectors";
+import {
+  selectBodyshop,
+  selectCurrentUser,
+} from "../../redux/user/user.selectors";
 import RenderTemplate from "../../utils/RenderTemplate";
 import { EmailSettings } from "../../utils/TemplateConstants";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
@@ -20,6 +23,7 @@ const mapStateToProps = createStructuredSelector({
   modalVisible: selectEmailVisible,
   emailConfig: selectEmailConfig,
   bodyshop: selectBodyshop,
+  currentUser: selectCurrentUser,
 });
 
 const mapDispatchToProps = (dispatch) => ({
@@ -31,31 +35,27 @@ export function EmailOverlayContainer({
   modalVisible,
   toggleEmailOverlayVisible,
   bodyshop,
+  currentUser,
 }) {
   const { t } = useTranslation();
-
+  const [form] = Form.useForm();
   const [loading, setLoading] = useState(false);
   const [sending, setSending] = useState(false);
   const [rawHtml, setRawHtml] = useState("");
   const defaultEmailFrom = {
     from: {
-      name: bodyshop.shopname || EmailSettings.fromNameDefault,
+      name: `${currentUser.displayName} @ ${bodyshop.shopname}`,
       address: EmailSettings.fromAddress,
     },
-    replyTo: bodyshop.email,
+    ReplyTo: { Email: currentUser.email, Name: currentUser.displayName },
   };
-  const [messageOptions, setMessageOptions] = useState({
-    ...defaultEmailFrom,
-    html: "",
-    fileList: [],
-  });
 
-  const handleOk = async () => {
+  const handleFinish = async (values) => {
     logImEXEvent("email_send_from_modal");
-
+    console.log(`values`, values);
     const attachments = [];
 
-    await asyncForEach(messageOptions.fileList, async (f) => {
+    await asyncForEach(values.fileList, async (f) => {
       const t = {
         ContentType: f.type,
         Filename: f.name,
@@ -67,7 +67,8 @@ export function EmailOverlayContainer({
     setSending(true);
     try {
       await axios.post("/sendemail", {
-        ...messageOptions,
+        ...defaultEmailFrom,
+        ...values,
         html: rawHtml,
         attachments,
       });
@@ -82,34 +83,6 @@ export function EmailOverlayContainer({
     setSending(false);
   };
 
-  const handleConfigChange = (name, value) => {
-    setMessageOptions({ ...messageOptions, [name]: value });
-  };
-  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);
@@ -120,11 +93,9 @@ export function EmailOverlayContainer({
       url: `${window.location.protocol}://${window.location.host}/`,
     });
     setRawHtml(response.data);
-
-    console.log("response", response);
-    setMessageOptions({
+    form.setFieldsValue({
       ...emailConfig.messageOptions,
-      ...defaultEmailFrom,
+
       html: response.data,
       fileList: [],
     });
@@ -140,29 +111,16 @@ export function EmailOverlayContainer({
       destroyOnClose={true}
       visible={modalVisible}
       width={"80%"}
-      onOk={handleOk}
+      onOk={() => form.submit()}
       onCancel={() => {
         toggleEmailOverlayVisible();
       }}
       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>
+      <Form layout="vertical" form={form} onFinish={handleFinish}>
+        {loading && <LoadingSpinner />}
+        <EmailOverlayComponent form={form} />
+      </Form>
     </Modal>
   );
 }