Added redux based email overlay to parts order modal + built out barebones parts order email template.

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

@@ -30,14 +30,8 @@ export default function SendEmailButtonComponent({
       <CKEditor
         editor={ClassicEditor}
         data={messageOptions.html}
-        onInit={editor => {
-          //You can store the "editor" and use when it is needed.
-          console.log("Editor is ready to use!", editor);
-        }}
         onChange={(event, editor) => {
-          const data = editor.getData();
-          console.log({ event, editor, data });
-          handleHtmlChange(data);
+          handleHtmlChange(editor.getData());
         }}
       />
     </div>

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

@@ -7,9 +7,13 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { toggleEmailOverlayVisible } from "../../redux/email/email.actions";
-import { selectEmailConfig, selectEmailVisible } from "../../redux/email/email.selectors.js";
+import {
+  selectEmailConfig,
+  selectEmailVisible
+} from "../../redux/email/email.selectors.js";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import EmailOverlayComponent from "./email-overlay.component";
+import ReactDOMServer from "react-dom/server";
 
 const mapStateToProps = createStructuredSelector({
   modalVisible: selectEmailVisible,
@@ -50,8 +54,10 @@ export default connect(
   if (data && !messageOptions.html && emailConfig.template) {
     setMessageOptions({
       ...messageOptions,
-      //html: ReactDOMServer.renderToStaticMarkup(<Template data={data} />)
-      html: renderEmail(<emailConfig.template data={data} />)
+      html: ReactDOMServer.renderToStaticMarkup(
+        <emailConfig.template data={data} />
+      )
+      //html: renderEmail(<emailConfig.template data={data} />)
     });
   }
 

client/src/components/parts-order-modal/parts-order-modal.container.jsx

@@ -14,21 +14,33 @@ import {
 import AlertComponent from "../alert/alert.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import PartsOrderModalComponent from "./parts-order-modal.component";
+import {
+  setEmailOptions,
+  toggleEmailOverlayVisible
+} from "../../redux/email/email.actions";
+import PartsOrderEmailTemplate from "../../emails/parts-order/parts-order.email";
+import { REPORT_QUERY_PARTS_ORDER_BY_PK } from "../../emails/parts-order/parts-order.query";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
   bodyshop: selectBodyshop
 });
+const mapDispatchToProps = dispatch => ({
+  setEmailOptions: e => dispatch(setEmailOptions(e)),
+  toggleEmailOverlayVisible: () => dispatch(toggleEmailOverlayVisible())
+});
 export default connect(
   mapStateToProps,
-  null
+  mapDispatchToProps
 )(function PartsOrderModalContainer({
   partsOrderModalVisible,
   linesToOrder,
   jobId,
   currentUser,
   bodyshop,
-  refetch
+  refetch,
+  setEmailOptions,
+  toggleEmailOverlayVisible
 }) {
   const { t } = useTranslation();
   const [modalVisible, setModalVisible] = partsOrderModalVisible;
@@ -51,6 +63,7 @@ export default connect(
   const orderLines = orderLinesState[0];
 
   const sendTypeState = useState("e");
+  const sendType = sendTypeState[0];
   const partsOrderState = useState({
     vendorid: null,
     jobid: jobId,
@@ -92,6 +105,32 @@ export default connect(
             });
             if (refetch) refetch();
             setModalVisible(false);
+
+            if (sendType === "e") {
+              //Show the email modal and set the data.
+
+              //TODO Remove some of the options below.
+              setEmailOptions({
+                messageOptions: {
+                  from: {
+                    name: "Kavia Autobdoy",
+                    address: "noreply@bodyshop.app"
+                  },
+                  to: "patrickwf@gmail.com",
+                  replyTo: "snaptsoft@gmail.com"
+                },
+                template: PartsOrderEmailTemplate,
+                queryConfig: [
+                  REPORT_QUERY_PARTS_ORDER_BY_PK,
+                  {
+                    variables: {
+                      id: r.data.insert_parts_orders.returning[0].id
+                    }
+                  }
+                ]
+              });
+              toggleEmailOverlayVisible();
+            }
           })
           .catch(error => {
             notification["error"]({