BOD-34 Moved template rendering to utility class. Added basic config for some estimate reports.

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

@@ -1,21 +1,20 @@
 import { useApolloClient } from "@apollo/react-hooks";
 import { Modal, notification } from "antd";
-import { gql } from "apollo-boost";
 import axios from "axios";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { QUERY_TEMPLATES_BY_NAME } from "../../graphql/templates.queries";
+import { EmailSettings } from "../../emails/constants";
 import { toggleEmailOverlayVisible } from "../../redux/email/email.actions";
 import {
   selectEmailConfig,
   selectEmailVisible,
 } from "../../redux/email/email.selectors.js";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import RenderTemplate from "../../utils/RenderTemplate";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import EmailOverlayComponent from "./email-overlay.component";
-import { EmailSettings } from "../../emails/constants";
 
 const mapStateToProps = createStructuredSelector({
   modalVisible: selectEmailVisible,
@@ -32,6 +31,7 @@ export function EmailOverlayContainer({
   bodyshop,
 }) {
   const { t } = useTranslation();
+  const [loading, setLoading] = useState(false);
   const defaultEmailFrom = {
     from: {
       name: bodyshop.shopname || EmailSettings.fromNameDefault,
@@ -41,58 +41,10 @@ export function EmailOverlayContainer({
   };
   const [messageOptions, setMessageOptions] = useState({
     ...defaultEmailFrom,
+    html: "",
   });
   const client = useApolloClient();
 
-  const renderEmail = () => {
-    client
-      .query({
-        query: QUERY_TEMPLATES_BY_NAME,
-        variables: { name: emailConfig.template.name },
-        fetchPolicy: "network-only",
-      })
-      .then(({ data: templateRecords }) => {
-        let templateToUse;
-        if (templateRecords.templates.length === 1) {
-          console.log("Only 1 Template found.");
-          templateToUse = templateRecords.templates[0];
-        } else if (templateRecords.templates.length === 2) {
-          console.log("2 Templates found..");
-          templateToUse = templateRecords.templates.filter(
-            (t) => !!t.bodyshopid
-          );
-        } else {
-          //No template found.Uh oh.
-          alert("Templating Error!");
-        }
-
-        client
-          .query({
-            query: gql(templateToUse.query),
-            variables: { ...emailConfig.template.variables },
-            fetchPolicy: "network-only",
-          })
-          .then(({ data: contextData }) => {
-            handleRender(contextData, templateToUse.html);
-          });
-      });
-  };
-
-  const handleRender = (contextData, html) => {
-    axios
-      .post("/render", {
-        view: html,
-        context: { ...contextData, bodyshop: bodyshop },
-      })
-      .then((r) => {
-        setMessageOptions({
-          ...emailConfig.messageOptions,
-          ...defaultEmailFrom,
-          html: r.data,
-        });
-      });
-  };
-
   const handleOk = () => {
     //sendEmail(messageOptions);
     axios
@@ -118,8 +70,19 @@ export function EmailOverlayContainer({
     setMessageOptions({ ...messageOptions, html: text });
   };
 
+  const render = async () => {
+    setLoading(true);
+    let html = await RenderTemplate(emailConfig.template, client, bodyshop);
+    setMessageOptions({
+      ...emailConfig.messageOptions,
+      ...defaultEmailFrom,
+      html: html,
+    });
+    setLoading(false);
+  };
+
   useEffect(() => {
-    if (modalVisible) renderEmail();
+    if (modalVisible) render();
   }, [modalVisible]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
@@ -131,7 +94,7 @@ export function EmailOverlayContainer({
       onCancel={() => {
         toggleEmailOverlayVisible();
       }}>
-      <LoadingSpinner loading={false}>
+      <LoadingSpinner loading={loading}>
         <EmailOverlayComponent
           handleConfigChange={handleConfigChange}
           messageOptions={messageOptions}