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"]({

client/src/emails/components/grid/grid.component.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-function Cell({ children }) {
+function Column({ children }) {
   return <td>{children}</td>;
 }
 
@@ -8,7 +8,7 @@ function Row({ children }) {
   return (
     <tr>
       {React.Children.map(children, el => {
-        if (el.type === Cell) return el;
+        if (el.type === Column) return el;
 
         return <td>{el}</td>;
       })}
@@ -25,7 +25,7 @@ function Grid({ children }) {
 
           if (el.type === Row) return el;
 
-          if (el.type === Cell) {
+          if (el.type === Column) {
             return <tr>{el}</tr>;
           }
 
@@ -41,6 +41,6 @@ function Grid({ children }) {
 }
 
 Grid.Row = Row;
-Grid.Cell = Cell;
+Grid.Column = Column;
 
 export default Grid;

client/src/emails/components/header/header.component.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+export default function Header({ bodyshop }) {
+  return (
+    <table>
+      <tr>
+        <td>
+          <img alt='' src={bodyshop.logo_img_path} />
+        </td>
+        <td>
+          <div>
+            <strong>{`${bodyshop.shopname}`}</strong>
+          </div>
+          <div>{`${bodyshop.address1} ${bodyshop.address2} ${bodyshop.city} ${bodyshop.state} ${bodyshop.zip_post}`}</div>
+          <div>
+            <a href={`mailto:${bodyshop.email}`}>{bodyshop.email}</a>{" "}
+            {` |  ${bodyshop.ph1}`}
+          </div>
+        </td>
+      </tr>
+    </table>
+  );
+}

client/src/emails/parts-order/parts-order.email.jsx

@@ -1,30 +1,53 @@
 import React from "react";
-import { A, Box, Email, Item, Span } from "react-html-email";
+import styled from "styled-components";
+import Header from "../components/header/header.component";
+
+const D = styled.div`
+  table {
+    font-family: arial, sans-serif;
+    border-collapse: collapse;
+    width: 100%;
+  }
+
+  td,
+  th {
+    border: 1px solid #dddddd;
+    text-align: left;
+    padding: 8px;
+  }
+
+  tr:nth-child(even) {
+    background-color: #dddddd;
+  }
+`;
 
 export default function PartsOrderEmail({ data }) {
-  console.log("Data", data);
+  const order = data.parts_orders_by_pk;
   return (
-    <Email title='Hello World!'>
-      <Box>
-        <Item align='center'>
-          <Span fontSize={20}>
-            This is an example email made with:
-            <A href='https://github.com/chromakode/react-html-email'>
-              react-html-email
-            </A>
-            .
-          </Span>
-        </Item>
-        <Item align='center'>
-          <Span fontSize={20}>
-            This is an example email made with:
-            <A href='https://github.com/chromakode/react-html-email'>
-              react-html-email
-            </A>
-            .
-          </Span>
-        </Item>
-      </Box>
-    </Email>
+    <D>
+      <Header bodyshop={data.bodyshops[0]} />
+      <table>
+        <tr>
+          <td>{`Deliver By: ${order.deliver_by}`}</td>
+          <td>{`Ordered By: ${order.user_email}`}</td>
+        </tr>
+      </table>
+      <table>
+        <tr>
+          <th>Line Description</th>
+          <th>Part #</th>
+          <th>Price</th>
+          <th>Line Remarks</th>
+        </tr>
+        {order.parts_order_lines.map(item => (
+          <tr key={item.id}>
+            <td>{item.line_desc}</td>
+            <td>{item.oem_partno}</td>
+            <td>{item.act_price}</td>
+            <td>{item.line_remarks}</td>
+          </tr>
+        ))}
+      </table>
+    </D>
   );
 }