Updated Print Center & TemplateList Object IO-587

client/public/index.html

@@ -5,10 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#002366" />
-    <meta
+    <meta name="description" content="ImEX Online" />
-      name="description"
-      content="Web site created using create-react-app"
-    />
     <!-- <link rel="apple-touch-icon" href="logo192.png" /> -->
     <link rel="apple-touch-icon" href="logo192.png" />
 

client/src/App/registerServiceWorker.component.jsx

@@ -5,7 +5,7 @@ import React from "react";
 import * as serviceWorker from "../serviceWorker";
 
 const onServiceWorkerUpdate = (registration) => {
-  console.log("[RSW] onServiceWorkerUpdate", registration);
+  console.log("onServiceWorkerUpdate", registration);
 
   const key = `open${Date.now()}`;
   const btn = (
@@ -37,6 +37,5 @@ const onServiceWorkerUpdate = (registration) => {
 
 // if (process.env.NODE_ENV === "production") {
 //   console.log("SWR Registering SW...");
-console.log("Registering Service Worker...");
 serviceWorker.register({ onUpdate: onServiceWorkerUpdate });
 //   }

client/src/components/job-checklist/components/job-checklist-template-list/job-checklist-template-list.component.jsx

@@ -1,23 +1,12 @@
 import { Button } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { connect } from "react-redux";
 import { useParams } from "react-router-dom";
-import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../../../firebase/firebase.utils";
-import { selectBodyshop } from "../../../../redux/user/user.selectors";
 import { GenerateDocument } from "../../../../utils/RenderTemplate";
 import JobIntakeTemplateItem from "../job-checklist-template-item/job-checklist-template-item.component";
 
-const mapStateToProps = createStructuredSelector({
+export default function JobIntakeTemplateList({ templates }) {
-  //currentUser: selectCurrentUser
-  bodyshop: selectBodyshop,
-});
-const mapDispatchToProps = (dispatch) => ({
-  //setUserLanguage: language => dispatch(setUserLanguage(language))
-});
-
-export function JobIntakeTemplateList({ bodyshop, templates }) {
   const { jobId } = useParams();
   const { t } = useTranslation();
   const renderTemplate = async (templateKey) => {
@@ -55,7 +44,3 @@ export function JobIntakeTemplateList({ bodyshop, templates }) {
     </div>
   );
 }
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(JobIntakeTemplateList);

client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.csi.component.jsx

@@ -89,7 +89,7 @@ export function JobsDetailHeaderCsi({
             replyTo: bodyshop.email,
           },
           template: {
-            name: TemplateList().csi_invitation.key,
+            name: TemplateList("job").csi_invitation.key,
             variables: {
               id: result.data.insert_csi.returning[0].id,
             },

client/src/components/parts-order-list-table/parts-order-list-table.component.jsx

@@ -129,8 +129,8 @@ export function PartsOrderListTableComponent({
               GenerateDocument(
                 {
                   name: record.isReturn
-                    ? TemplateList().parts_return_confirmation.key
+                    ? TemplateList("partsorder").parts_return_confirmation.key
-                    : TemplateList().parts_order_confirmation.key,
+                    : TemplateList("partsorder").parts_order_confirmation.key,
                   variables: { id: record.id },
                 },
                 {},
@@ -143,8 +143,8 @@ export function PartsOrderListTableComponent({
               GenerateDocument(
                 {
                   name: record.isReturn
-                    ? TemplateList().parts_return_confirmation.key
+                    ? TemplateList("partsorder").parts_return_confirmation.key
-                    : TemplateList().parts_order_confirmation.key,
+                    : TemplateList("partsorder").parts_order_confirmation.key,
                   variables: { id: record.id },
                 },
                 {},

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

@@ -12,12 +12,12 @@ import { QUERY_ALL_VENDORS_FOR_ORDER } from "../../graphql/vendors.queries";
 import { setEmailOptions } from "../../redux/email/email.actions";
 import {
   setModalContext,
-  toggleModalVisible
+  toggleModalVisible,
 } from "../../redux/modals/modals.actions";
 import { selectPartsOrder } from "../../redux/modals/modals.selectors";
 import {
   selectBodyshop,
-  selectCurrentUser
+  selectCurrentUser,
 } from "../../redux/user/user.selectors";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
@@ -159,8 +159,8 @@ export function PartsOrderModalContainer({
       GenerateDocument(
         {
           name: isReturn
-            ? TemplateList().parts_return_confirmation.key
+            ? TemplateList("partsorder").parts_return_confirmation.key
-            : TemplateList().parts_order_confirmation.key,
+            : TemplateList("partsorder").parts_order_confirmation.key,
           variables: {
             id: insertResult.data.insert_parts_orders.returning[0].id,
           },
@@ -168,8 +168,8 @@ export function PartsOrderModalContainer({
         {
           to: matchingVendor ? [matchingVendor.email] : null,
           replyTo: bodyshop.email,
-          subject: TemplateList("job", bodyshop.shopname)
+          subject: TemplateList("partsorder", {}).parts_order_confirmation
-            .parts_order_confirmation.subject,
+            .subject,
         },
         "e"
       );
@@ -177,8 +177,8 @@ export function PartsOrderModalContainer({
       GenerateDocument(
         {
           name: isReturn
-            ? TemplateList().parts_return_confirmation.key
+            ? TemplateList("partsorder").parts_return_confirmation.key
-            : TemplateList().parts_order_confirmation.key,
+            : TemplateList("partsorder").parts_order_confirmation.key,
           variables: {
             id: insertResult.data.insert_parts_orders.returning[0].id,
           },

client/src/components/payment-modal/payment-modal.container.jsx

@@ -121,7 +121,7 @@ function BillEnterModalContainer({
 
         GenerateDocument(
           {
-            name: TemplateList().payment_receipt.key,
+            name: TemplateList("payment").payment_receipt.key,
             variables: {
               id: newPayment.data.insert_payments.returning[0].id,
             },

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

@@ -1,40 +1,28 @@
-import { Collapse, Row, Col } from "antd";
+import { Col, Collapse, Row } 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";
-import { toggleModalVisible } from "../../redux/modals/modals.actions";
 import { selectPrintCenter } from "../../redux/modals/modals.selectors";
-import {
+import { TemplateList } from "../../utils/TemplateConstants";
-  selectBodyshop,
-  selectCurrentUser,
-} from "../../redux/user/user.selectors";
 import PrintCenterItem from "../print-center-item/print-center-item.component";
 import PrintCenterSpeedPrint from "../print-center-speed-print/print-center-speed-print.component";
-import { TemplateList } from "../../utils/TemplateConstants";
-import { useTranslation } from "react-i18next";
 
 const mapStateToProps = createStructuredSelector({
-  currentUser: selectCurrentUser,
-  bodyshop: selectBodyshop,
   printCenterModal: selectPrintCenter,
 });
 
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = (dispatch) => ({});
-  setEmailOptions: (e) => dispatch(setEmailOptions(e)),
-  toggleModalVisible: () => dispatch(toggleModalVisible("printCenter")),
-});
 
 const colSpan = { md: { span: 24 }, lg: { span: 12 } };
 
-export function PrintCenterJobsComponent({ bodyshop, printCenterModal }) {
+export function PrintCenterJobsComponent({ printCenterModal }) {
   const { t } = useTranslation();
   const { id: jobId } = printCenterModal.context;
-  const tempList = TemplateList();
+  const tempList = TemplateList("job", {});
   const JobsReportsList = Object.keys(tempList).map((key) => {
     return tempList[key];
   });
-  console.log("PrintCenterJobsComponent -> JobsReportsList", JobsReportsList);
 
   return (
     <div>
@@ -45,17 +33,15 @@ export function PrintCenterJobsComponent({ bodyshop, printCenterModal }) {
         <Col {...colSpan}>
           <Collapse accordion>
             <Collapse.Panel header={t("printcenter.labels.repairorder")}>
-              <ul style={{ columns: "2 auto" }}>
+              <ul style={{ columns: "3 auto" }}>
-                {JobsReportsList.filter((t) => t.drivingId === "job").map(
+                {JobsReportsList.map((item) => (
-                  (item) => (
+                  <PrintCenterItem
-                    <PrintCenterItem
+                    key={item.key}
-                      key={item.key}
+                    item={item}
-                      item={item}
+                    id={jobId}
-                      id={jobId}
+                    disabled={item.disabled}
-                      disabled={item.disabled}
+                  />
-                    />
+                ))}
-                  )
-                )}
               </ul>
             </Collapse.Panel>
           </Collapse>

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

@@ -3,47 +3,37 @@ 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";
 import { toggleModalVisible } from "../../redux/modals/modals.actions";
 import { selectPrintCenter } from "../../redux/modals/modals.selectors";
-import {
-  selectBodyshop,
-  selectCurrentUser,
-} from "../../redux/user/user.selectors";
 import PrintCenterModalComponent from "./print-center-modal.component";
 import "./print-center-modal.styles.scss";
 
 const mapStateToProps = createStructuredSelector({
-  currentUser: selectCurrentUser,
-  bodyshop: selectBodyshop,
   printCenterModal: selectPrintCenter,
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  setEmailOptions: (e) => dispatch(setEmailOptions(e)),
   toggleModalVisible: () => dispatch(toggleModalVisible("printCenter")),
 });
 
 export function PrintCenterModalContainer({
   printCenterModal,
   toggleModalVisible,
-  currentUser,
-  bodyshop,
-  setEmailOptions,
 }) {
   const { t } = useTranslation();
 
   const { visible, context } = printCenterModal;
-  const { type, id } = context;
+  const { type } = context;
   // const { refetch } = actions;
 
   return (
     <Modal
       visible={visible}
       onCancel={() => toggleModalVisible()}
-      width='90%'
+      width="90%"
-      title={` ${t("printcenter.labels.title")} ${type} - ${id}`}
+      title={` ${t("printcenter.labels.title")} - ${type}`}
-      destroyOnClose>
+      destroyOnClose
+    >
       <PrintCenterModalComponent context={context} />
     </Modal>
   );

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

@@ -66,14 +66,18 @@ export function PrintCenterSpeedPrint({ bodyshop, jobId }) {
   );
 }
 
-const renderTemplateList = (templates) => (
+const renderTemplateList = (templates) => {
-  <span className="imex-flex-row__margin">
+  const TemplateListGenerated = TemplateList();
-    {templates.map((template, idx) => {
+  return (
-      if (idx === templates.length - 1) return TemplateList()[template].title;
+    <span className="imex-flex-row__margin">
-      return `${TemplateList()[template].title}, `;
+      {templates.map((template, idx) => {
-    })}
+        if (idx === templates.length - 1)
-  </span>
+          return TemplateListGenerated[template].title;
-);
+        return `${TemplateListGenerated[template].title}, `;
+      })}
+    </span>
+  );
+};
 
 export default connect(
   mapStateToProps,

client/src/components/schedule-job-modal/schedule-job-modal.container.jsx

@@ -139,10 +139,10 @@ export function ScheduleJobModalContainer({
         messageOptions: {
           to: [values.email],
           replyTo: bodyshop.email,
-          subject: TemplateList().appointment_confirmation.subject,
+          subject: TemplateList("appointment").appointment_confirmation.subject,
         },
         template: {
-          name: TemplateList().appointment_confirmation.key,
+          name: TemplateList("appointment").appointment_confirmation.key,
           variables: {
             id: appt.data.insert_appointments.returning[0].id,
           },

client/src/components/shop-info/shop-info.intake.component.jsx

@@ -16,6 +16,7 @@ const SelectorDiv = styled.div`
 export default function ShopInfoIntakeChecklistComponent({ form }) {
   const { t } = useTranslation();
 
+  const TemplateListGenerated = TemplateList();
   return (
     <div>
       <Form.List name={["intakechecklist", "form"]}>
@@ -128,12 +129,12 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
           ]}
         >
           <Select mode="multiple">
-            {Object.keys(TemplateList()).map((i) => (
+            {Object.keys(TemplateListGenerated).map((i) => (
               <Select.Option
-                key={TemplateList()[i].key}
+                key={TemplateListGenerated[i].key}
-                value={TemplateList()[i].key}
+                value={TemplateListGenerated[i].key}
               >
-                {TemplateList()[i].title}
+                {TemplateListGenerated[i].title}
               </Select.Option>
             ))}
           </Select>
@@ -250,12 +251,12 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
           ]}
         >
           <Select mode="multiple">
-            {Object.keys(TemplateList()).map((i) => (
+            {Object.keys(TemplateListGenerated).map((i) => (
               <Select.Option
-                key={TemplateList()[i].key}
+                key={TemplateListGenerated[i].key}
-                value={TemplateList()[i].key}
+                value={TemplateListGenerated[i].key}
               >
-                {TemplateList()[i].title}
+                {TemplateListGenerated[i].title}
               </Select.Option>
             ))}
           </Select>

client/src/components/shop-info/shop-info.speedprint.component.jsx

@@ -4,10 +4,12 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { TemplateList } from "../../utils/TemplateConstants";
 import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
+import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 
 export default function ShopInfoSpeedPrint({ bodyshop, form }) {
   const { t } = useTranslation();
-
+  const TemplateListGenerated = TemplateList();
+  console.log("TemplateListGenerated", TemplateListGenerated);
   return (
     <div>
       <Form.List name={["speedprint"]}>
@@ -16,7 +18,7 @@ export default function ShopInfoSpeedPrint({ bodyshop, form }) {
             <div>
               {fields.map((field, index) => (
                 <Form.Item key={field.key} style={{ padding: 0, margin: 2 }}>
-                  <div className="imex-flex-row">
+                  <LayoutFormRow grow>
                     <Form.Item
                       className="imex-flex-row__margin"
                       label={t("bodyshop.fields.speedprint.id")}
@@ -59,14 +61,14 @@ export default function ShopInfoSpeedPrint({ bodyshop, form }) {
                       ]}
                     >
                       <Select mode="multiple">
-                        {Object.keys(TemplateList())
+                        {Object.keys(TemplateListGenerated).map((key, idx) => (
-                          .map((key) => TemplateList()[key])
+                          <Select.Option
-                          .filter((template) => template.drivingId === "job")
+                            key={idx}
-                          .map((template, idx) => (
+                            value={TemplateListGenerated[key].key}
-                            <Select.Option key={idx} value={template.key}>
+                          >
-                              {template.title}
+                            {TemplateListGenerated[key].title}
-                            </Select.Option>
+                          </Select.Option>
-                          ))}
+                        ))}
                       </Select>
                     </Form.Item>
 
@@ -81,7 +83,7 @@ export default function ShopInfoSpeedPrint({ bodyshop, form }) {
                       index={index}
                       total={fields.length}
                     />
-                  </div>
+                  </LayoutFormRow>
                 </Form.Item>
               ))}
               <Form.Item>

client/src/components/shop-template-add/shop-template-add.component.jsx

@@ -7,14 +7,14 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { useHistory, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
+import { logImEXEvent } from "../../firebase/firebase.utils";
 import {
   INSERT_TEMPLATE,
   QUERY_TEMPLATES_BY_NAME_FOR_DUPE,
 } from "../../graphql/templates.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import { TemplateList } from "../../utils/TemplateConstants";
-import { logImEXEvent } from "../../firebase/firebase.utils";
 import client from "../../utils/GraphQLClient";
+import { TemplateList } from "../../utils/TemplateConstants";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -67,12 +67,12 @@ export function ShopTemplateAddComponent({
     history.push({ search: queryString.stringify(search) });
     if (!!refetch) refetch();
   };
-
+  const TemplateListGenerated = TemplateList();
   const menu = (
     <Menu onClick={handleAdd}>
       {availableTemplateKeys.length > 0 ? (
         availableTemplateKeys.map((tkey) => (
-          <Menu.Item key={tkey}>{TemplateList()[tkey].title}</Menu.Item>
+          <Menu.Item key={tkey}>{TemplateListGenerated[tkey].title}</Menu.Item>
         ))
       ) : (
         <div>{t("bodyshop.labels.notemplatesavailable")}</div>

client/src/components/time-tickets-summary-employees/time-tickets-summary-employees.component.jsx

@@ -68,6 +68,7 @@ export function TimeTicketsSummaryEmployees({
   });
 
   const handlePrintEmployeeTicket = async (empId) => {
+    alert("Missing Key!");
     const html = await RenderTemplate(
       {
         name: TemplateList().time_tickets_by_employee.key,

client/src/index.js

@@ -1,16 +1,16 @@
+import Dinero from "dinero.js";
 import React from "react";
 import ReactDOM from "react-dom";
-import { BrowserRouter } from "react-router-dom";
-import "./translations/i18n";
-//import * as serviceWorker from "./serviceWorker";
 import { Provider } from "react-redux";
+import { BrowserRouter } from "react-router-dom";
 import { PersistGate } from "redux-persist/integration/react";
-import { store, persistor } from "./redux/store";
 import AppContainer from "./App/App.container";
-import "./index.css";
-import LoadingSpinner from "./components/loading-spinner/loading-spinner.component";
 import "./App/registerServiceWorker.component";
-import Dinero from "dinero.js";
+import LoadingSpinner from "./components/loading-spinner/loading-spinner.component";
+import "./index.css";
+import { persistor, store } from "./redux/store";
+//import * as serviceWorker from "./serviceWorker"; //This is registered in a separate component to track notifications.
+import "./translations/i18n";
 
 require("dotenv").config();
 

client/src/utils/TemplateConstants.js

@@ -1,38 +1,75 @@
 import i18n from "i18next";
-
+import { store } from "../redux/store";
 export const EmailSettings = {
   fromNameDefault: "ImEX Online",
   fromAddress: "noreply@imex.online",
 };
 
-export const TemplateList = (type, object) => {
+export const TemplateList = (type, context) => {
+  const { bodyshop } = store.getState().user;
+
   return {
-    appointment_confirmation: {
+    //If there's no type or the type is job, send it back.
-      title: i18n.t("printcenter.appointments.appointment_confirmation"),
+    ...(!type || type === "job"
-      description: "Appointment Confirmation",
+      ? {
-      drivingId: "appointment",
+          estimate_detail: {
-      key: "appointment_confirmation",
+            title: i18n.t("printcenter.jobs.estimate_detail"),
-      subject: "Appointment Confirmation",
+            description: "Est Detail",
-    },
+            key: "estimate_detail",
-    //Verified Completed items
+            disabled: false,
-    estimate_detail: {
+          },
-      title: i18n.t("printcenter.jobs.estimate_detail"),
+        }
-      description: "Est Detail",
+      : {}),
-      drivingId: "job",
+    ...(!type || type === "appointment"
-      key: "estimate_detail",
+      ? {
-    },
+          appointment_confirmation: {
-    parts_order_confirmation: {
+            title: i18n.t("printcenter.appointments.appointment_confirmation"),
-      title: i18n.t("printcenter.jobs.parts_order_confirmation"),
+            description: "Appointment Confirmation",
-      description: "Parts Order",
+            key: "appointment_confirmation",
-      drivingId: "job",
+            subject: "Appointment Confirmation",
-      key: "parts_order_confirmation",
+            disabled: false,
-      subject: "Parts Order",
+          },
-    },
+        }
-    parts_return_confirmation: {
+      : {}),
-      title: i18n.t("printcenter.jobs.parts_return_confirmation"),
+    ...(!type || type === "partsorder"
-      description: "Parts Return",
+      ? {
-      drivingId: "job",
+          parts_order_confirmation: {
-      key: "parts_return_confirmation",
+            title: i18n.t("printcenter.jobs.parts_order_confirmation"),
-    },
+            description: "Parts Order",
+            key: "parts_order_confirmation",
+            subject: `${bodyshop.shopname} Parts Order ${
+              (context && context.job && context.job.ro_number) || ""
+            }`,
+            disabled: false,
+          },
+          parts_return_confirmation: {
+            title: i18n.t("printcenter.jobs.parts_return_confirmation"),
+            description: "Parts Return",
+            key: "parts_return_confirmation",
+            disabled: false,
+          },
+        }
+      : {}),
+    ...(!type || type === "payment"
+      ? {
+          payment_confirmation: {
+            title: i18n.t("printcenter.jobs.payment_confirmation"),
+            description: "Est Detail",
+            key: "payment_confirmation",
+            disabled: false,
+          },
+        }
+      : {}),
+    ...(!type || type === "csi"
+      ? {
+          csi_invitation: {
+            title: i18n.t("printcenter.jobs.csi_invitation"),
+            description: "CSI invite",
+            key: "csi_invitation",
+            disabled: false,
+          },
+        }
+      : {}),
+    ...(!type || type === "job" ? {} : {}),
   };
 };

package.json

@@ -7,7 +7,7 @@
     "npm": "6.11.3"
   },
   "scripts": {
-    "setup": "npm i && cd firebase && npm i && cd .. && cd client && npm i && cd .. && cd admin && npm i",
+    "setup": "npm i && cd client && npm i",
     "admin": "cd admin && npm start",
     "client": "cd client && npm start",
     "server": "nodemon server.js",