From 13441984472f2e2b21386d063964261dff7f5ede Mon Sep 17 00:00:00 2001
From: Patrick Fic <pfic@outlook.com>
Date: Thu, 20 Feb 2020 17:23:56 -0800
Subject: [PATCH] Further work on async email modal. Correctly sending basic
 emails.

---
 bodyshop_translations.babel                   | 57 +++++++++++++++++++
 .../email-overlay/email-overlay.container.jsx | 42 +++++++-------
 client/src/pages/manage/manage.page.jsx       |  9 +--
 client/src/redux/email/email.sagas.js         |  9 +--
 client/src/translations/en_us/common.json     |  8 +++
 client/src/translations/es/common.json        |  8 +++
 client/src/translations/fr/common.json        |  8 +++
 7 files changed, 111 insertions(+), 30 deletions(-)

diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel
index 711a56d3a..95640fc53 100644
--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
@@ -722,6 +722,63 @@
                             </folder_node>
                         </children>
                     </folder_node>
+                    <folder_node>
+                        <name>emails</name>
+                        <children>
+                            <folder_node>
+                                <name>errors</name>
+                                <children>
+                                    <concept_node>
+                                        <name>notsent</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                </children>
+                            </folder_node>
+                            <folder_node>
+                                <name>successes</name>
+                                <children>
+                                    <concept_node>
+                                        <name>sent</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                </children>
+                            </folder_node>
+                        </children>
+                    </folder_node>
                     <folder_node>
                         <name>employees</name>
                         <children>
diff --git a/client/src/components/email-overlay/email-overlay.container.jsx b/client/src/components/email-overlay/email-overlay.container.jsx
index 9e758c0b8..3deb2b2b3 100644
--- a/client/src/components/email-overlay/email-overlay.container.jsx
+++ b/client/src/components/email-overlay/email-overlay.container.jsx
@@ -1,17 +1,13 @@
-import { Button, Modal } from "antd";
+import { Button, Modal, notification } from "antd";
+import axios from "axios";
 import React, { useEffect, useState } from "react";
 import { useLazyQuery } from "react-apollo";
 import { renderEmail } from "react-html-email";
+import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import {
-  sendEmail,
-  toggleEmailOverlayVisible
-} from "../../redux/email/email.actions";
-import {
-  selectEmailConfig,
-  selectEmailVisible
-} from "../../redux/email/email.selectors.js";
+import { toggleEmailOverlayVisible } from "../../redux/email/email.actions";
+import { selectEmailConfig, selectEmailVisible } from "../../redux/email/email.selectors.js";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import EmailOverlayComponent from "./email-overlay.component";
 
@@ -20,18 +16,13 @@ const mapStateToProps = createStructuredSelector({
   emailConfig: selectEmailConfig
 });
 const mapDispatchToProps = dispatch => ({
-  toggleEmailOverlayVisible: () => dispatch(toggleEmailOverlayVisible()),
-  sendEmail: email => dispatch(sendEmail(email))
+  toggleEmailOverlayVisible: () => dispatch(toggleEmailOverlayVisible())
 });
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(function SendEmail({
-  emailConfig,
-  modalVisible,
-  sendEmail,
-  toggleEmailOverlayVisible
-}) {
+)(function SendEmail({ emailConfig, modalVisible, toggleEmailOverlayVisible }) {
+  const { t } = useTranslation();
   const [messageOptions, setMessageOptions] = useState(
     emailConfig.messageOptions
   );
@@ -57,7 +48,6 @@ export default connect(
   }
 
   if (data && !messageOptions.html && emailConfig.template) {
-    //console.log(ReactDOMServer.renderToStaticMarkup(<Template data={data} />));
     setMessageOptions({
       ...messageOptions,
       //html: ReactDOMServer.renderToStaticMarkup(<Template data={data} />)
@@ -66,8 +56,20 @@ export default connect(
   }
 
   const handleOk = () => {
-    sendEmail("Clicked OK");
-    toggleEmailOverlayVisible();
+    //sendEmail(messageOptions);
+    axios
+      .post("/sendemail", messageOptions)
+      .then(response => {
+        console.log(JSON.stringify(response));
+        notification["success"]({ message: t("emails.successes.sent") });
+        toggleEmailOverlayVisible();
+      })
+      .catch(error => {
+        console.log(JSON.stringify(error));
+        notification["error"]({
+          message: t("emails.errors.notsent", { message: error.message })
+        });
+      });
   };
   const handleConfigChange = event => {
     const { name, value } = event.target;
diff --git a/client/src/pages/manage/manage.page.jsx b/client/src/pages/manage/manage.page.jsx
index 9fb5e787e..b04c453bf 100644
--- a/client/src/pages/manage/manage.page.jsx
+++ b/client/src/pages/manage/manage.page.jsx
@@ -72,12 +72,9 @@ export default function Manage({ match }) {
               fallback={
                 <LoadingSpinner message={t("general.labels.loadingapp")} />
               }>
-              <div>
-                DELETE THESE
-                <Test />
-                <EmailOverlayContainer />
-              </div>
-
+              DELETE THIS
+              <Test />
+              <EmailOverlayContainer />
               <Route exact path={`${match.path}`} component={ManageRootPage} />
               <Route exact path={`${match.path}/jobs`} component={JobsPage} />
               <Route
diff --git a/client/src/redux/email/email.sagas.js b/client/src/redux/email/email.sagas.js
index 16b6fa418..a7b562d48 100644
--- a/client/src/redux/email/email.sagas.js
+++ b/client/src/redux/email/email.sagas.js
@@ -1,6 +1,7 @@
 import { all, call, put, takeLatest } from "redux-saga/effects";
 import { sendEmailFailure, sendEmailSuccess } from "./email.actions";
 import EmailActionTypes from "./email.types";
+import axios from "axios";
 
 export function* onSendEmail() {
   yield takeLatest(EmailActionTypes.SEND_EMAIL, sendEmail);
@@ -8,10 +9,10 @@ export function* onSendEmail() {
 export function* sendEmail(payload) {
   try {
     console.log("Sending thta email", payload);
-    //    // axios.post("/sendemail", emailConfig).then(response => {
-    //   alert(JSON.stringify(response));
-    // });
-    yield put(sendEmailSuccess());
+    axios.post("/sendemail", payload).then(response => {
+      console.log(JSON.stringify(response));
+      put(sendEmailSuccess());
+    });
   } catch (error) {
     console.log("Error in sendEmail saga.");
     yield put(sendEmailFailure(error.message));
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index ea981ec14..81ecb475c 100644
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -67,6 +67,14 @@
 				"insert": "Uploaded document successfully. "
 			}
 		},
+		"emails": {
+			"errors": {
+				"notsent": "Email not sent. Error encountered while sending {{message}}"
+			},
+			"successes": {
+				"sent": "Email sent successfully."
+			}
+		},
 		"employees": {
 			"actions": {
 				"new": "New Employee"
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
index 5b473a6b1..0e336bc94 100644
--- a/client/src/translations/es/common.json
+++ b/client/src/translations/es/common.json
@@ -67,6 +67,14 @@
 				"insert": "Documento cargado con éxito."
 			}
 		},
+		"emails": {
+			"errors": {
+				"notsent": "Correo electrónico no enviado Se encontró un error al enviar {{message}}"
+			},
+			"successes": {
+				"sent": "Correo electrónico enviado con éxito."
+			}
+		},
 		"employees": {
 			"actions": {
 				"new": "Nuevo empleado"
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
index df963678b..6b50d18ba 100644
--- a/client/src/translations/fr/common.json
+++ b/client/src/translations/fr/common.json
@@ -67,6 +67,14 @@
 				"insert": "Document téléchargé avec succès."
 			}
 		},
+		"emails": {
+			"errors": {
+				"notsent": "Courriel non envoyé. Erreur rencontrée lors de l'envoi de {{message}}"
+			},
+			"successes": {
+				"sent": "E-mail envoyé avec succès."
+			}
+		},
 		"employees": {
 			"actions": {
 				"new": "Nouvel employé"