From 7f30439868b5503f4345cef31258a44a6f817973 Mon Sep 17 00:00:00 2001 From: Patrick Fic <> Date: Thu, 8 Apr 2021 13:55:24 -0700 Subject: [PATCH] Email Improvements. --- bodyshop_translations.babel | 68 ++++++++++ .../email-overlay/email-overlay.component.jsx | 118 ++++++++++-------- .../email-overlay/email-overlay.container.jsx | 86 ++++--------- client/src/translations/en_us/common.json | 5 + client/src/translations/es/common.json | 5 + client/src/translations/fr/common.json | 5 + client/src/utils/RenderTemplate.js | 7 +- server/email/sendemail.js | 4 +- 8 files changed, 179 insertions(+), 119 deletions(-) diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel index 8f59d82c8..c4638611c 100644 --- a/bodyshop_translations.babel +++ b/bodyshop_translations.babel @@ -10669,6 +10669,74 @@ + + fields + + + cc + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + + + subject + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + + + to + false + + + + + + en-US + false + + + es-MX + false + + + fr-CA + false + + + + + labels diff --git a/client/src/components/email-overlay/email-overlay.component.jsx b/client/src/components/email-overlay/email-overlay.component.jsx index ff229cccf..bfe2b5d48 100644 --- a/client/src/components/email-overlay/email-overlay.component.jsx +++ b/client/src/components/email-overlay/email-overlay.component.jsx @@ -1,68 +1,82 @@ import { UploadOutlined } from "@ant-design/icons"; -import { Button, Card, Divider, Input, Select, Upload } from "antd"; +import { Card, Divider, Form, Input, Select, Upload } from "antd"; import React from "react"; import { useTranslation } from "react-i18next"; -export default function EmailOverlayComponent({ - messageOptions, - handleConfigChange, - handleToChange, - handleHtmlChange, - handleUpload, - handleFileRemove, -}) { +export default function EmailOverlayComponent({ form }) { const { t } = useTranslation(); return (
- To: - handleConfigChange("cc", value)} - name="cc" - tokenSeparators={[",", ";"]} - /> - Subject: - handleConfigChange("subject", e.target.value)} + rules={[ + { + required: true, + message: t("general.validation.required"), + }, + ]} + > + + + - {t("emails.labels.preview")} -
+ + - backgroundColor: "lightgray", - borderLeft: "6px solid #2196F3", + {t("emails.labels.preview")} + + {() => { + return ( +
+ ); }} - dangerouslySetInnerHTML={{ __html: messageOptions.html }} - /> - - {t("emails.labels.preview")} - + + - { + console.log("Upload event:", e); + + if (Array.isArray(e)) { + return e; + } + + return e && e.fileList; + }} > - - + + <> +

+ +

+

+ Click or drag files to this area to upload. +

+ + +
); diff --git a/client/src/components/email-overlay/email-overlay.container.jsx b/client/src/components/email-overlay/email-overlay.container.jsx index 21851981d..52e93ab19 100644 --- a/client/src/components/email-overlay/email-overlay.container.jsx +++ b/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 }} > - - - - +
+ {loading && } + + ); } diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json index 313a8b2d8..e2862234d 100644 --- a/client/src/translations/en_us/common.json +++ b/client/src/translations/en_us/common.json @@ -686,6 +686,11 @@ "errors": { "notsent": "Email not sent. Error encountered while sending {{message}}" }, + "fields": { + "cc": "CC", + "subject": "Subject", + "to": "To" + }, "labels": { "attachments": "Attachments", "preview": "Email Preview" diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json index 34a98831e..8135c4c8f 100644 --- a/client/src/translations/es/common.json +++ b/client/src/translations/es/common.json @@ -686,6 +686,11 @@ "errors": { "notsent": "Correo electrónico no enviado Se encontró un error al enviar {{message}}" }, + "fields": { + "cc": "", + "subject": "", + "to": "" + }, "labels": { "attachments": "", "preview": "" diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json index ffd154cfe..2b4d515bf 100644 --- a/client/src/translations/fr/common.json +++ b/client/src/translations/fr/common.json @@ -686,6 +686,11 @@ "errors": { "notsent": "Courriel non envoyé. Erreur rencontrée lors de l'envoi de {{message}}" }, + "fields": { + "cc": "", + "subject": "", + "to": "" + }, "labels": { "attachments": "", "preview": "" diff --git a/client/src/utils/RenderTemplate.js b/client/src/utils/RenderTemplate.js index 86101da37..00f99739a 100644 --- a/client/src/utils/RenderTemplate.js +++ b/client/src/utils/RenderTemplate.js @@ -136,7 +136,12 @@ export const GenerateDocument = async (template, messageOptions, sendType) => { if (sendType === "e") { store.dispatch( setEmailOptions({ - messageOptions, + messageOptions: { + ...messageOptions, + to: Array.isArray(messageOptions.to) + ? messageOptions.to + : [messageOptions.to], + }, template, }) ); diff --git a/server/email/sendemail.js b/server/email/sendemail.js index bc01e6d77..d8e622d9a 100644 --- a/server/email/sendemail.js +++ b/server/email/sendemail.js @@ -42,8 +42,8 @@ exports.sendEmail = async (req, res) => { return { Email: i }; }), ReplyTo: { - Email: req.body.from.address, - Name: req.body.from.name, + Email: req.body.ReplyTo.Email, + Name: req.body.ReplyTo.Name, }, Subject: req.body.subject, // TextPart: