Modified how template list is generated to be a function to allow checking whether the templates can be printed.

2020-09-11 14:43:04 -07:00
parent 984c001bd8
commit f7e74c5043
20 changed files with 167 additions and 207 deletions
--- a/client/src/components/_test/paymentMethod.jsx
+++ b/client/src/components/_test/paymentMethod.jsx
@@ -1,6 +1,6 @@
 import {
  PaymentRequestButtonElement,
-  useStripe
+  useStripe,
 } from "@stripe/react-stripe-js";
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
@@ -72,7 +72,7 @@ function Test({ bodyshop, setEmailOptions }) {
              replyTo: bodyshop.email,
            },
            template: {
-              name: TemplateList.parts_order_confirmation.key,
+              name: TemplateList().parts_order_confirmation.key,
              variables: {
                id: "a7c2d4e1-f519-42a9-a071-c48cf0f22979",
              },
--- a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.csi.component.jsx
+++ b/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().csi_invitation.key,
            variables: {
              id: result.data.insert_csi.returning[0].id,
            },
@@ -108,14 +108,16 @@ export function JobsDetailHeaderCsi({
    <Menu.SubMenu title={t("jobs.actions.sendcsi")} {...props}>
      <Menu.Item
        onClick={handleCreateCsi}
-        key='email'
-        disabled={!!!job.ownr_ea}>
+        key="email"
+        disabled={!!!job.ownr_ea}
+      >
        {t("general.labels.email")}
      </Menu.Item>
      <Menu.Item
        onClick={handleCreateCsi}
-        key='text'
-        disabled={!!!job.ownr_ph1}>
+        key="text"
+        disabled={!!!job.ownr_ph1}
+      >
        {t("general.labels.text")}
      </Menu.Item>
      <Menu.Divider />
--- a/client/src/components/parts-order-modal/parts-order-modal.container.jsx
+++ b/client/src/components/parts-order-modal/parts-order-modal.container.jsx
@@ -154,8 +154,8 @@ export function PartsOrderModalContainer({
        },
        template: {
          name: isReturn
-            ? TemplateList.parts_return_confirmation.key
-            : TemplateList.parts_order_confirmation.key,
+            ? TemplateList().parts_return_confirmation.key
+            : TemplateList().parts_order_confirmation.key,
          variables: {
            id: insertResult.data.insert_parts_orders.returning[0].id,
          },
@@ -166,8 +166,8 @@ export function PartsOrderModalContainer({
        await RenderTemplate(
          {
            name: isReturn
-              ? TemplateList.parts_return_confirmation.key
-              : TemplateList.parts_order_confirmation.key,
+              ? TemplateList().parts_return_confirmation.key
+              : TemplateList().parts_order_confirmation.key,
            variables: {
              id: insertResult.data.insert_parts_orders.returning[0].id,
            },
--- a/client/src/components/payment-modal/payment-modal.container.jsx
+++ b/client/src/components/payment-modal/payment-modal.container.jsx
@@ -123,7 +123,7 @@ function InvoiceEnterModalContainer({
            replyTo: bodyshop.email,
          },
          template: {
-            name: TemplateList.payment_receipt.key,
+            name: TemplateList().payment_receipt.key,
            variables: {
              id: newPayment.data.insert_payments.returning[0].id,
            },
@@ -133,7 +133,7 @@ function InvoiceEnterModalContainer({
        displayTemplateInWindow(
          await RenderTemplate(
            {
-              name: TemplateList.payment_receipt.key,
+              name: TemplateList().payment_receipt.key,
              variables: {
                id: newPayment.data.insert_payments.returning[0].id,
              },
--- a/client/src/components/print-center-jobs/print-center-jobs.component.jsx
+++ b/client/src/components/print-center-jobs/print-center-jobs.component.jsx
@@ -11,7 +11,8 @@ import {
 } 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 JobsReports from "./print-center-jobs.list";
+import { TemplateList } from "../../utils/TemplateConstants";
+import { useTranslation } from "react-i18next";

 const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser,
@@ -27,8 +28,13 @@ const mapDispatchToProps = (dispatch) => ({
 const colSpan = { md: { span: 24 }, lg: { span: 12 } };

 export function PrintCenterJobsComponent({ bodyshop, printCenterModal }) {
+  const { t } = useTranslation();
  const { id: jobId } = printCenterModal.context;
-  const JobsReportsList = JobsReports(null);
+  const tempList = TemplateList();
+  const JobsReportsList = Object.keys(tempList).map((key) => {
+    return tempList[key];
+  });
+  console.log("PrintCenterJobsComponent -> JobsReportsList", JobsReportsList);

  return (
    <div>
@@ -38,20 +44,20 @@ export function PrintCenterJobsComponent({ bodyshop, printCenterModal }) {
        </Col>
        <Col {...colSpan}>
          <Collapse accordion>
-            {JobsReportsList.map((section) => (
-              <Collapse.Panel key={section.key} header={section.title}>
-                <ul style={{ columns: "2 auto" }}>
-                  {section.items.map((item) => (
+            <Collapse.Panel header={t("printcenter.labels.repairorder")}>
+              <ul style={{ columns: "2 auto" }}>
+                {JobsReportsList.filter((t) => t.drivingId === "job").map(
+                  (item) => (
                    <PrintCenterItem
                      key={item.key}
                      item={item}
                      id={jobId}
                      disabled={item.disabled}
                    />
-                  ))}
-                </ul>
-              </Collapse.Panel>
-            ))}
+                  )
+                )}{" "}
+              </ul>{" "}
+            </Collapse.Panel>
          </Collapse>
        </Col>
      </Row>
--- a/client/src/components/print-center-jobs/print-center-jobs.list.js
+++ b/client/src/components/print-center-jobs/print-center-jobs.list.js
@@ -1,60 +0,0 @@
-import i18n from "i18next";
-
-export default function JobsReports(job) {
-  return [
-    {
-      title: i18n.t("printcenter.labels.repairorder"),
-      key: "printcenter.jobs.repairorder",
-      disabled: false,
-      items: [
-        {
-          key: "appointment_reminder",
-          title: i18n.t("printcenter.jobs.appointment_reminder"),
-          disabled: false,
-        },
-        {
-          key: "estimate_detail",
-          title: i18n.t("printcenter.jobs.estimate_detail"),
-          disabled: false,
-        },
-        {
-          key: "job_totals",
-          title: i18n.t("printcenter.jobs.job_totals"),
-          disabled: false,
-        },
-        {
-          key: "work_authorization",
-          title: i18n.t("printcenter.jobs.work_authorization"),
-          disabled: false,
-        },
-        {
-          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: i18n.t("printcenter.labels.misc"),
-      key: "printcenter.jobs.misc",
-      disabled: false,
-      items: [
-        {
-          key: "iou",
-          title: i18n.t("printcenter.jobs.iou"),
-          disabled: true,
-        },
-      ],
-    },
-  ];
-}
--- a/client/src/components/print-center-speed-print/print-center-speed-print.component.jsx
+++ b/client/src/components/print-center-speed-print/print-center-speed-print.component.jsx
@@ -70,8 +70,8 @@ export function PrintCenterSpeedPrint({ bodyshop, jobId }) {
 const renderTemplateList = (templates) => (
  <span className="imex-flex-row__margin">
    {templates.map((template, idx) => {
-      if (idx === templates.length - 1) return TemplateList[template].title;
-      return `${TemplateList[template].title}, `;
+      if (idx === templates.length - 1) return TemplateList()[template].title;
+      return `${TemplateList()[template].title}, `;
    })}
  </span>
 );
--- a/client/src/components/schedule-job-modal/schedule-job-modal.container.jsx
+++ b/client/src/components/schedule-job-modal/schedule-job-modal.container.jsx
@@ -140,7 +140,7 @@ export function ScheduleJobModalContainer({
          replyTo: bodyshop.email,
        },
        template: {
-          name: TemplateList.appointment_confirmation.key,
+          name: TemplateList().appointment_confirmation.key,
          variables: {
            id: appt.data.insert_appointments.returning[0].id,
          },
--- a/client/src/components/shop-info/shop-info.intake.component.jsx
+++ b/client/src/components/shop-info/shop-info.intake.component.jsx
@@ -130,10 +130,10 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
          <Select mode="multiple">
            {Object.keys(TemplateList).map((i) => (
              <Select.Option
-                key={TemplateList[i].key}
-                value={TemplateList[i].key}
+                key={TemplateList()[i].key}
+                value={TemplateList()[i].key}
              >
-                {TemplateList[i].title}
+                {TemplateList()[i].title}
              </Select.Option>
            ))}
          </Select>
@@ -252,10 +252,10 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
          <Select mode="multiple">
            {Object.keys(TemplateList).map((i) => (
              <Select.Option
-                key={TemplateList[i].key}
-                value={TemplateList[i].key}
+                key={TemplateList()[i].key}
+                value={TemplateList()[i].key}
              >
-                {TemplateList[i].title}
+                {TemplateList()[i].title}
              </Select.Option>
            ))}
          </Select>
--- a/client/src/components/shop-info/shop-info.speedprint.component.jsx
+++ b/client/src/components/shop-info/shop-info.speedprint.component.jsx
@@ -60,8 +60,8 @@ export default function ShopInfoSpeedPrint({ bodyshop, form }) {
                      ]}
                    >
                      <Select mode="multiple">
-                        {Object.keys(TemplateList)
-                          .map((key) => TemplateList[key])
+                        {Object.keys(TemplateList())
+                          .map((key) => TemplateList()[key])
                          .filter((template) => template.drivingId === "job")
                          .map((template, idx) => (
                            <Select.Option key={idx} value={template.key}>
--- a/client/src/components/shop-template-add/shop-template-add.component.jsx
+++ b/client/src/components/shop-template-add/shop-template-add.component.jsx
@@ -72,7 +72,7 @@ export function ShopTemplateAddComponent({
    <Menu onClick={handleAdd}>
      {availableTemplateKeys.length > 0 ? (
        availableTemplateKeys.map((tkey) => (
-          <Menu.Item key={tkey}>{TemplateList[tkey].title}</Menu.Item>
+          <Menu.Item key={tkey}>{TemplateList()[tkey].title}</Menu.Item>
        ))
      ) : (
        <div>{t("bodyshop.labels.notemplatesavailable")}</div>
--- a/client/src/components/shop-template-editor-save-button/shop-template-editor-save-button.component.jsx
+++ b/client/src/components/shop-template-editor-save-button/shop-template-editor-save-button.component.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { Button, notification } from "antd";
 import { useMutation } from "@apollo/react-hooks";
 import { useTranslation } from "react-i18next";
@@ -12,15 +12,15 @@ export default function ShopTemplateSaveButton({
  emailEditorRef,
 }) {
  const { t } = useTranslation();
+  const [loading, setLoading] = useState(false);
  const [updateTemplate] = useMutation(UPDATE_TEMPLATE);

  const handleSave = async () => {
    logImEXEvent("shop_template_update");
-
+    setLoading(true);
    emailEditorRef.current.exportHtml(async (data) => {
      inlineCss(data.html, {
        url: `${window.location.protocol}://${window.location.host}/`,
-        preserveMediaQueries: true,
      }).then(async function (inlineHtml) {
        const result = await updateTemplate({
          variables: {
@@ -43,12 +43,13 @@ export default function ShopTemplateSaveButton({
            }),
          });
        }
+        setLoading(false);
      });
    });
  };

  return (
-    <Button disabled={!!!templateId} onClick={handleSave}>
+    <Button disabled={!!!templateId} loading={loading} onClick={handleSave}>
      {t("general.actions.save")}
    </Button>
  );
--- a/client/src/components/shop-template-editor/shop-template-editor.component.jsx
+++ b/client/src/components/shop-template-editor/shop-template-editor.component.jsx
@@ -38,11 +38,6 @@ export default function ShopTemplateEditorComponent({

  return (
    <div>
-      <ShopTemplateEditorSaveButton
-        templateId={templateId}
-        gql={editorContent.gql}
-        emailEditorRef={emailEditorRef}
-      />
      <EmailEditor
        style={{ width: "100%" }}
        ref={emailEditorRef}
@@ -63,7 +58,7 @@ export default function ShopTemplateEditorComponent({
          ],
        }}
      />
-      <div style={{ display: "flex", width: "90vw" }}>
+      <div style={{ display: "flex", width: "90vw", margin: "2rem" }}>
        <CmEditor
          style={{ flex: 1 }}
          value={editorContent.gql}
@@ -86,6 +81,11 @@ export default function ShopTemplateEditorComponent({
          query={editorContent.gql}
          emailEditorRef={emailEditorRef}
        />
+        <ShopTemplateEditorSaveButton
+          templateId={templateId}
+          gql={editorContent.gql}
+          emailEditorRef={emailEditorRef}
+        />
      </div>
    </div>
  );
--- a/client/src/components/shop-template-test-render/shop-template-test-render.component.jsx
+++ b/client/src/components/shop-template-test-render/shop-template-test-render.component.jsx
@@ -36,7 +36,6 @@ export function ShopTemplateTestRender({
      emailEditorRef.current.exportHtml(async (data) => {
        inlineCss(data.html, {
          url: `${window.location.protocol}://${window.location.host}/`,
-          removeLinkTags: false,
        }).then(async function (inlineHtml) {
          try {
            const { data: contextData } = await client.query({
@@ -65,8 +64,10 @@ export function ShopTemplateTestRender({
  };

  return (
-    <div style={style}>
-      <Editor value={variables} onChange={(e) => setVariables(e)} />
+    <div style={{ ...style, margin: "1rem", display: "flex" }}>
+      <div style={{ flex: 1 }}>
+        <Editor value={variables} onChange={(e) => setVariables(e)} />
+      </div>
      <Button loading={loading} type="ghost" onClick={handleTestRender}>
        {t("bodyshop.actions.testrender")}
      </Button>
--- a/client/src/components/shop-templates-list/shop-templates-list.container.jsx
+++ b/client/src/components/shop-templates-list/shop-templates-list.container.jsx
@@ -62,9 +62,9 @@ export default function ShopTemplatesListContainer({ visibleState }) {
            >
              <Skeleton title={false} loading={item.loading} active>
                <div style={{ display: "flex", flexDirection: "column" }}>
-                  <div>{TemplateList[item.name].title}</div>
-                  <div>{TemplateList[item.name].description}</div>
-                  <div>{TemplateList[item.name].drivingid}</div>
+                  <div>{TemplateList()[item.name].title}</div>
+                  <div>{TemplateList()[item.name].description}</div>
+                  <div>{TemplateList()[item.name].drivingid}</div>
                </div>
              </Skeleton>
            </List.Item>
--- a/client/src/components/time-tickets-summary-employees/time-tickets-summary-employees.component.jsx
+++ b/client/src/components/time-tickets-summary-employees/time-tickets-summary-employees.component.jsx
@@ -70,7 +70,7 @@ export function TimeTicketsSummaryEmployees({
  const handlePrintEmployeeTicket = async (empId) => {
    const html = await RenderTemplate(
      {
-        name: TemplateList.time_tickets_by_employee.key,
+        name: TemplateList().time_tickets_by_employee.key,
        variables: { id: empId, start: startDate, end: endDate },
      },
      bodyshop