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}

client/src/components/print-center-item/print-center-item.component.jsx

@@ -3,9 +3,13 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { setEmailOptions } from "../../redux/email/email.actions";
 import { selectPrintCenter } from "../../redux/modals/modals.selectors";
-
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { MailOutlined, PrinterOutlined } from "@ant-design/icons";
+import RenderTemplate from "../../utils/RenderTemplate";
+import { useApolloClient } from "@apollo/react-hooks";
 const mapStateToProps = createStructuredSelector({
   printCenterModal: selectPrintCenter,
+  bodyshop: selectBodyshop,
 });
 const mapDispatchToProps = (dispatch) => ({
   setEmailOptions: (e) => dispatch(setEmailOptions(e)),
@@ -15,8 +19,46 @@ export function PrintCenterItemComponent({
   printCenterModal,
   setEmailOptions,
   item,
+  id,
+  bodyshop,
+  disabled,
 }) {
-  return <li>{item.title}</li>;
+  const client = useApolloClient();
+
+  const renderToNewWindow = async () => {
+    const html = await RenderTemplate(
+      {
+        name: item.key,
+        variables: { id: id },
+      },
+      client,
+      bodyshop
+    );
+
+    var newWin = window.open();
+    newWin.document.write(html);
+  };
+
+  if (disabled) return <li className='print-center-item'>{item.title} </li>;
+  return (
+    <li className='print-center-item'>
+      {item.title}
+      <PrinterOutlined onClick={renderToNewWindow} />
+      <MailOutlined
+        onClick={() => {
+          setEmailOptions({
+            messageOptions: {
+              Subject: "TODO FIX ME",
+            },
+            template: {
+              name: item.key,
+              variables: { id: id },
+            },
+          });
+        }}
+      />
+    </li>
+  );
 }
 export default connect(
   mapStateToProps,

client/src/components/print-center-jobs/print-center-jobs.component.jsx

@@ -1,6 +1,5 @@
 import { Collapse } from "antd";
 import React from "react";
-import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { setEmailOptions } from "../../redux/email/email.actions";
@@ -10,8 +9,8 @@ import {
   selectBodyshop,
   selectCurrentUser,
 } from "../../redux/user/user.selectors";
-import JobsReports from "./print-center-jobs.list";
 import PrintCenterItem from "../print-center-item/print-center-item.component";
+import JobsReports from "./print-center-jobs.list";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -23,20 +22,23 @@ const mapDispatchToProps = (dispatch) => ({
   toggleModalVisible: () => dispatch(toggleModalVisible("printCenter")),
 });
 export function PrintCenterJobsComponent({ printCenterModal }) {
-  const { t } = useTranslation();
-  const { id: jobid } = printCenterModal.context;
+  const { id: jobId } = printCenterModal.context;
 
   const JobsReportsList = JobsReports(null);
 
   return (
     <div>
-      Print Center Jobs COmponetn
       <Collapse accordion>
         {JobsReportsList.map((section) => (
           <Collapse.Panel key={section.key} header={section.title}>
             <ul style={{ columns: "2 auto" }}>
               {section.items.map((item) => (
-                <PrintCenterItem key={item.key} item={item} />
+                <PrintCenterItem
+                  key={item.key}
+                  item={item}
+                  id={jobId}
+                  disabled={item.disabled}
+                />
               ))}
             </ul>
           </Collapse.Panel>

client/src/components/print-center-jobs/print-center-jobs.list.js

@@ -3,46 +3,56 @@ import i18n from "i18next";
 export default function JobsReports(job) {
   return [
     {
-      title: i18n.t("printcenter.jobs.repairorder"),
+      title: i18n.t("printcenter.labels.repairorder"),
       key: "printcenter.jobs.repairorder",
       disabled: false,
       items: [
         {
           key: "appointment_reminder",
-          title: "Appointment Reminder",
+          title: i18n.t("printcenter.jobs.appointment_reminder"),
           disabled: false,
         },
         {
-          key: "appointment_reminder2",
-          title: "Appointment Reminder2",
+          key: "estimate_detail",
+          title: i18n.t("printcenter.jobs.estimate_detail"),
           disabled: false,
         },
         {
-          key: "appointment_reminder3",
-          title: "Appointment Reminder3",
+          key: "job_totals",
+          title: i18n.t("printcenter.jobs.job_totals"),
           disabled: false,
         },
         {
-          key: "appointment_reminder4",
-          title: "Appointment Reminder4",
+          key: "work_authorization",
+          title: i18n.t("printcenter.jobs.work_authorization"),
           disabled: false,
         },
         {
-          key: "appointment_reminder5",
-          title: "Appointment Reminder5",
+          key: "fippa_work_authorization",
+          title: i18n.t("printcenter.jobs.fippa_work_authorization"),
+          disabled: false,
+        },
+        {
+          key: "casl_work_authorization",
+          title: i18n.t("printcenter.jobs.casl_work_authorization"),
+          disabled: false,
+        },
+        {
+          key: "coversheet",
+          title: i18n.t("printcenter.jobs.coversheet"),
           disabled: false,
         },
       ],
     },
     {
-      title: "Section 2",
-      key: "Section2",
+      title: i18n.t("printcenter.labels.misc"),
+      key: "printcenter.jobs.misc",
       disabled: false,
       items: [
         {
-          key: "appointment_reminder12",
-          title: "Appointment Reminder12",
-          disabled: false,
+          key: "iou",
+          title: i18n.t("printcenter.jobs.iou"),
+          disabled: true,
         },
       ],
     },

client/src/components/print-center-modal/print-center-modal.container.jsx

@@ -11,6 +11,7 @@ import {
   selectCurrentUser,
 } from "../../redux/user/user.selectors";
 import PrintCenterModalComponent from "./print-center-modal.component";
+import "./print-center-modal.styles.scss";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,

client/src/components/print-center-modal/print-center-modal.styles.scss

@@ -0,0 +1,3 @@
+.print-center-item > * {
+  padding: 0em 8px;
+}