Modified render styles to improve printability

client/src/components/job-totals-table/job-totals-table.component.jsx

@@ -1,5 +1,7 @@
 import { Col, Result, Row, Statistic, Typography } from "antd";
 import Dinero from "dinero.js";
+import { JsonEditor as Editor } from "jsoneditor-react";
+import "jsoneditor-react/es/editor.min.css";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -218,7 +220,7 @@ export function JobsTotalsTableComponent({ bodyshop, job }) {
                 <tr>
                   <td>{t("jobs.labels.additionaltotal")}</td>
                   <td className="currency">
-                    {Dinero(job.job_totals.parts.additional).toFormat()}
+                    {Dinero(job.job_totals.additional).toFormat()}
                   </td>
                   <td></td>
                 </tr>
@@ -293,6 +295,9 @@ export function JobsTotalsTableComponent({ bodyshop, job }) {
               />
             </div>
             <JobCalculateTotals job={job} />
+            <Editor
+              value={{ CIECA: job.cieca_ttl.data, ImEXCalc: job.job_totals }}
+            />
           </div>
         </Col>
       </Row>

client/src/components/shop-template-editor-save-button/shop-template-editor-save-button.component.jsx

@@ -20,6 +20,7 @@ export default function ShopTemplateSaveButton({
     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: {

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

@@ -1,28 +1,16 @@
-import "codemirror/addon/hint/show-hint";
-import "codemirror/addon/lint/lint";
 import "codemirror-graphql/hint";
 import "codemirror-graphql/lint";
 import "codemirror-graphql/mode";
-
+import "codemirror/addon/hint/show-hint";
+import "codemirror/addon/lint/lint";
 import "codemirror/lib/codemirror.css";
 import "codemirror/theme/material.css";
-import "codemirror/addon/hint/show-hint";
-
 import React, { useEffect, useRef, useState } from "react";
 import { Controlled as CmEditor } from "react-codemirror2";
 import EmailEditor from "react-email-editor";
 import GqlSchema from "../../graphql/schema";
 import ShopTemplateEditorSaveButton from "../shop-template-editor-save-button/shop-template-editor-save-button.component";
 import ShopTemplateTestRender from "../shop-template-test-render/shop-template-test-render.component";
-// CodeMirror.fromTextArea(document.getElementById("gqlcm"), {
-//   mode: "graphql",
-//   lint: {
-//     // schema: myGraphQLSchema,
-//   },
-//   hintOptions: {
-//     //  schema: myGraphQLSchema,
-//   },
-// });
 
 export default function ShopTemplateEditorComponent({
   templateId,
@@ -58,7 +46,7 @@ export default function ShopTemplateEditorComponent({
       <EmailEditor
         style={{ width: "100%" }}
         ref={emailEditorRef}
-        minHeight="800px"
+        minHeight="700px"
         onLoad={() => setEditorLoaded(true)}
         options={{
           // customCSS: [
@@ -75,9 +63,9 @@ export default function ShopTemplateEditorComponent({
           ],
         }}
       />
-      <div style={{ display: "flex" }}>
+      <div style={{ display: "flex", width: "90vw" }}>
         <CmEditor
-          style={{ width: "30rem" }}
+          style={{ flex: 1 }}
           value={editorContent.gql}
           options={{
             mode: "graphql",
@@ -94,6 +82,7 @@ export default function ShopTemplateEditorComponent({
           }}
         />
         <ShopTemplateTestRender
+          style={{ flex: 1 }}
           query={editorContent.gql}
           emailEditorRef={emailEditorRef}
         />

client/src/components/shop-template-test-render/shop-template-test-render.component.jsx

@@ -19,7 +19,12 @@ const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
-export function ShopTemplateTestRender({ bodyshop, query, emailEditorRef }) {
+export function ShopTemplateTestRender({
+  bodyshop,
+  query,
+  emailEditorRef,
+  style,
+}) {
   const [variables, setVariables] = useState({ id: "uuid" });
   const [loading, setLoading] = useState(false);
   const { t } = useTranslation();
@@ -31,6 +36,7 @@ export function ShopTemplateTestRender({ bodyshop, query, emailEditorRef }) {
       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({
@@ -59,13 +65,11 @@ export function ShopTemplateTestRender({ bodyshop, query, emailEditorRef }) {
   };
 
   return (
-    <div>
-      <div style={{ width: "20rem" }}>
-        <Editor value={variables} onChange={(e) => setVariables(e)} />
-        <Button loading={loading} type="ghost" onClick={handleTestRender}>
-          {t("bodyshop.actions.testrender")}
-        </Button>
-      </div>
+    <div style={style}>
+      <Editor value={variables} onChange={(e) => setVariables(e)} />
+      <Button loading={loading} type="ghost" onClick={handleTestRender}>
+        {t("bodyshop.actions.testrender")}
+      </Button>
     </div>
   );
 }

client/src/components/shop-templates-list/shop-templates-list.container.jsx

@@ -64,6 +64,7 @@ export default function ShopTemplatesListContainer({ visibleState }) {
                 <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>
               </Skeleton>
             </List.Item>

client/src/translations/en_us/common.json

@@ -942,6 +942,7 @@
 				"scheddates": "Schedule Dates"
 			},
 			"labels": {
+				"additionaltotal": "Additional Total",
 				"allocations": "Allocations",
 				"appointmentconfirmation": "Send confirmation to customer?",
 				"audit": "Audit Trail",

client/src/translations/es/common.json

@@ -942,6 +942,7 @@
 				"scheddates": ""
 			},
 			"labels": {
+				"additionaltotal": "",
 				"allocations": "",
 				"appointmentconfirmation": "¿Enviar confirmación al cliente?",
 				"audit": "",

client/src/translations/fr/common.json

@@ -942,6 +942,7 @@
 				"scheddates": ""
 			},
 			"labels": {
+				"additionaltotal": "",
 				"allocations": "",
 				"appointmentconfirmation": "Envoyer une confirmation au client?",
 				"audit": "",

client/src/utils/TemplateConstants.js

@@ -4,6 +4,14 @@ export const EmailSettings = {
 };
 
 export const TemplateList = {
+  //Verified Completed items
+  estimate_detail: {
+    title: "Estimate Detail",
+    description: "Est Detail",
+    drivingId: "job",
+    key: "estimate_detail",
+  },
+  //Non Completed Items
   appointment_reminder: {
     title: "Appointment Reminder",
     description: "Sent to a customer as a reminder of an upcoming appointment.",
@@ -23,12 +31,7 @@ export const TemplateList = {
     drivingId: "partsorder",
     key: "parts_order_confirmation",
   },
-  estimate_detail: {
-    title: "Estimate Detail Lines",
-    description: "Est Detail",
-    drivingId: "job",
-    key: "estimate_detail",
-  },
+
   cover_sheet_landscape: {
     title: "Cover Sheet - Landscape",
     description: "Cover sheet landscape",