From 23f82430022dd61222ce2619d37354376d594e67 Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Fri, 31 Jul 2020 09:46:03 -0700
Subject: [PATCH] Finished speed print setup + addition to print center modal.
 BOD-229

---
 bodyshop_translations.babel                   | 154 +++++++++++++++++-
 .../form-fields-changed-alert.component.jsx   |   2 +-
 .../form-list-move-arrows.component.jsx       |  21 +++
 .../print-center-jobs.component.jsx           |  46 +++---
 .../print-center-speed-print.component.jsx    |  52 ++++--
 .../shop-info/shop-info.component.jsx         | 116 ++++++++-----
 .../shop-info/shop-info.intake.component.jsx  |  45 +++--
 .../shop-info.speedprint.component.jsx        | 105 ++++++++++++
 client/src/translations/en_us/common.json     |  11 +-
 client/src/translations/es/common.json        |  11 +-
 client/src/translations/fr/common.json        |  11 +-
 client/src/utils/RenderTemplate.js            |   2 +-
 client/src/utils/TemplateConstants.js         |  28 +++-
 13 files changed, 498 insertions(+), 106 deletions(-)
 create mode 100644 client/src/components/form-list-move-arrows/form-list-move-arrows.component.jsx
 create mode 100644 client/src/components/shop-info/shop-info.speedprint.component.jsx

diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel
index 2b40751f8..c73ff4b0c 100644
--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
@@ -1,4 +1,4 @@
-<babeledit_project be_version="2.7.1" version="1.2">
+<babeledit_project version="1.2" be_version="2.7.1">
     <!--
 
     BabelEdit project file
@@ -886,6 +886,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>addspeedprint</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>addtemplate</name>
                                         <definition_loaded>false</definition_loaded>
@@ -2077,6 +2098,74 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <folder_node>
+                                        <name>speedprint</name>
+                                        <children>
+                                            <concept_node>
+                                                <name>id</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>es-MX</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>fr-CA</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
+                                            <concept_node>
+                                                <name>label</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>es-MX</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>fr-CA</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
+                                            <concept_node>
+                                                <name>templates</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>es-MX</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>fr-CA</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
+                                        </children>
+                                    </folder_node>
                                     <folder_node>
                                         <name>ssbuckets</name>
                                         <children>
@@ -2937,6 +3026,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>speedprint</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                 </children>
                             </folder_node>
                             <folder_node>
@@ -10414,6 +10524,27 @@
                                                     </translation>
                                                 </translations>
                                             </concept_node>
+                                            <concept_node>
+                                                <name>required</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>es-MX</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>fr-CA</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
                                             <concept_node>
                                                 <name>type</name>
                                                 <definition_loaded>false</definition_loaded>
@@ -17440,6 +17571,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>speedprint</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>title</name>
                                         <definition_loaded>false</definition_loaded>
diff --git a/client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx b/client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx
index be4d23047..f60d4cd82 100644
--- a/client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx
+++ b/client/src/components/form-fields-changed-alert/form-fields-changed-alert.component.jsx
@@ -21,7 +21,7 @@ export default function FormsFieldChanged({ form }) {
               <Prompt
                 when={true}
                 message={(location) => {
-                  console.log("location", location);
+                  //console.log("location", location);
                   if (loc.pathname === location.pathname) return false;
                   return t("general.messages.unsavedchangespopup");
                 }}
diff --git a/client/src/components/form-list-move-arrows/form-list-move-arrows.component.jsx b/client/src/components/form-list-move-arrows/form-list-move-arrows.component.jsx
new file mode 100644
index 000000000..49a40814e
--- /dev/null
+++ b/client/src/components/form-list-move-arrows/form-list-move-arrows.component.jsx
@@ -0,0 +1,21 @@
+import React from "react";
+import { UpOutlined, DownOutlined } from "@ant-design/icons";
+export default function FormListMoveArrows({ move, index, total }) {
+  const upDisabled = index === 0;
+  const downDisabled = index === total - 1;
+
+  const handleUp = () => {
+    move(index, index - 1);
+  };
+
+  const handleDown = () => {
+    move(index, index - 1);
+  };
+
+  return (
+    <div>
+      <UpOutlined disabled={upDisabled} onClick={handleUp} />
+      <DownOutlined disabled={downDisabled} onClick={handleDown} />
+    </div>
+  );
+}
diff --git a/client/src/components/print-center-jobs/print-center-jobs.component.jsx b/client/src/components/print-center-jobs/print-center-jobs.component.jsx
index 605e8abf0..e2ff632be 100644
--- a/client/src/components/print-center-jobs/print-center-jobs.component.jsx
+++ b/client/src/components/print-center-jobs/print-center-jobs.component.jsx
@@ -1,4 +1,4 @@
-import { Collapse } from "antd";
+import { Collapse, Row, Col } from "antd";
 import React from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -7,7 +7,7 @@ import { toggleModalVisible } from "../../redux/modals/modals.actions";
 import { selectPrintCenter } from "../../redux/modals/modals.selectors";
 import {
   selectBodyshop,
-  selectCurrentUser
+  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";
@@ -24,29 +24,37 @@ const mapDispatchToProps = (dispatch) => ({
   toggleModalVisible: () => dispatch(toggleModalVisible("printCenter")),
 });
 
+const colSpan = { md: { span: 24 }, lg: { span: 12 } };
+
 export function PrintCenterJobsComponent({ bodyshop, printCenterModal }) {
   const { id: jobId } = printCenterModal.context;
   const JobsReportsList = JobsReports(null);
 
   return (
     <div>
-      <PrintCenterSpeedPrint job={jobId} />
-      <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}
-                  id={jobId}
-                  disabled={item.disabled}
-                />
-              ))}
-            </ul>
-          </Collapse.Panel>
-        ))}
-      </Collapse>
+      <Row gutter={[16, 16]}>
+        <Col {...colSpan}>
+          <PrintCenterSpeedPrint jobId={jobId} />
+        </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) => (
+                    <PrintCenterItem
+                      key={item.key}
+                      item={item}
+                      id={jobId}
+                      disabled={item.disabled}
+                    />
+                  ))}
+                </ul>
+              </Collapse.Panel>
+            ))}
+          </Collapse>
+        </Col>
+      </Row>
     </div>
   );
 }
diff --git 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
index d0f86de29..57542ef25 100644
--- 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
@@ -1,13 +1,14 @@
+import { Button, Typography, List } from "antd";
 import React from "react";
-
+import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors";
 import { logImEXEvent } from "../../firebase/firebase.utils";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import RenderTemplate, {
   displayTemplateInWindow,
 } from "../../utils/RenderTemplate";
-import { Button } from "antd";
+import { TemplateList } from "../../utils/TemplateConstants";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop, //currentUser: selectCurrentUser
@@ -16,16 +17,16 @@ const mapDispatchToProps = (dispatch) => ({
   //setUserLanguage: language => dispatch(setUserLanguage(language))
 });
 
-export function PrintCenterSpeedPrint({ bodyshop, job }) {
+export function PrintCenterSpeedPrint({ bodyshop, jobId }) {
   const { speedprint } = bodyshop;
-
+  const { t } = useTranslation();
   const renderTemplate = async (templateKey) => {
     logImEXEvent("speed_print_template_render");
 
     const html = await RenderTemplate(
       {
         name: templateKey,
-        variables: { id: job.id },
+        variables: { id: jobId },
       },
       bodyshop
     );
@@ -40,18 +41,41 @@ export function PrintCenterSpeedPrint({ bodyshop, job }) {
 
   return (
     <div>
-      {speedprint.map((sp) => (
-        <div>
-          {JSON.stringify(sp)}
-          <Button onClick={() => renderAllTemplates(sp.templates)}>
-            Print All
-          </Button>
-        </div>
-      ))}
+      <Typography.Title level={2}>
+        {t("printcenter.labels.speedprint")}
+      </Typography.Title>
+
+      <List
+        itemLayout="horizontal"
+        dataSource={speedprint}
+        renderItem={(sp) => (
+          <List.Item
+            actions={[
+              <Button onClick={() => renderAllTemplates(sp.templates)}>
+                Print All
+              </Button>,
+            ]}
+          >
+            <List.Item.Meta
+              title={sp.label}
+              description={renderTemplateList(sp.templates)}
+            />
+          </List.Item>
+        )}
+      />
     </div>
   );
 }
 
+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}, `;
+    })}
+  </span>
+);
+
 export default connect(
   mapStateToProps,
   mapDispatchToProps
diff --git a/client/src/components/shop-info/shop-info.component.jsx b/client/src/components/shop-info/shop-info.component.jsx
index 3e0ec7909..d0efeeff9 100644
--- a/client/src/components/shop-info/shop-info.component.jsx
+++ b/client/src/components/shop-info/shop-info.component.jsx
@@ -16,78 +16,86 @@ import ShopInfoResponsibilityCenterComponent from "./shop-info.responsibilitycen
 import ShopInfoSchedulingComponent from "./shop-info.scheduling.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import ShopInfoIntakeChecklistComponent from "./shop-info.intake.component";
+import ShopInfoSpeedPrint from "./shop-info.speedprint.component";
 
 export default function ShopInfoComponent({ form, saveLoading }) {
   const { t } = useTranslation();
   return (
     <div>
-      <Button type='primary' loading={saveLoading} htmlType='submit'>
+      <Button type="primary" loading={saveLoading} htmlType="submit">
         {t("general.actions.save")}
       </Button>
-      <Collapse defaultActiveKey='shopinfo'>
-        <Collapse.Panel key='shopinfo' header={t("bodyshop.labels.shopinfo")}>
+      <Collapse>
+        <Collapse.Panel key="shopinfo" header={t("bodyshop.labels.shopinfo")}>
           <LayoutFormRow>
-            <Form.Item label={t("bodyshop.fields.shopname")} name='shopname'>
+            <Form.Item label={t("bodyshop.fields.shopname")} name="shopname">
               <Input />
             </Form.Item>
-            <Form.Item label={t("bodyshop.fields.address1")} name='address1'>
+            <Form.Item label={t("bodyshop.fields.address1")} name="address1">
               <Input />
             </Form.Item>
-            <Form.Item label={t("bodyshop.fields.address2")} name='address2'>
+            <Form.Item label={t("bodyshop.fields.address2")} name="address2">
               <Input />
             </Form.Item>
-            <Form.Item label={t("bodyshop.fields.city")} name='city'>
+            <Form.Item label={t("bodyshop.fields.city")} name="city">
               <Input />
             </Form.Item>
-            <Form.Item label={t("bodyshop.fields.state")} name='state'>
+            <Form.Item label={t("bodyshop.fields.state")} name="state">
               <Input />
             </Form.Item>
-            <Form.Item label={t("bodyshop.fields.zip_post")} name='zip_post'>
+            <Form.Item label={t("bodyshop.fields.zip_post")} name="zip_post">
               <Input />
             </Form.Item>
           </LayoutFormRow>
           <LayoutFormRow>
-            <Form.Item label={t("bodyshop.fields.country")} name='country'>
+            <Form.Item label={t("bodyshop.fields.country")} name="country">
               <Input />
             </Form.Item>
-            <Form.Item label={t("bodyshop.fields.email")} name='email'>
+            <Form.Item label={t("bodyshop.fields.email")} name="email">
               <Input />
             </Form.Item>
             <Form.Item
               label={t("bodyshop.fields.federal_tax_id")}
-              name='federal_tax_id'>
+              name="federal_tax_id"
+            >
               <Input />
             </Form.Item>
             <Form.Item
               label={t("bodyshop.fields.insurance_vendor_id")}
-              name='insurance_vendor_id'>
+              name="insurance_vendor_id"
+            >
               <Input />
             </Form.Item>
             <Form.Item
               label={t("bodyshop.fields.logo_img_path")}
-              name='logo_img_path'>
+              name="logo_img_path"
+            >
               <Input />
             </Form.Item>
             <Form.Item
               label={t("bodyshop.fields.state_tax_id")}
-              name='state_tax_id'>
+              name="state_tax_id"
+            >
               <Input />
             </Form.Item>
           </LayoutFormRow>
           <LayoutFormRow>
             <Form.Item
               label={t("bodyshop.fields.invoice_federal_tax_rate")}
-              name={["invoice_tax_rates", "federal_tax_rate"]}>
+              name={["invoice_tax_rates", "federal_tax_rate"]}
+            >
               <InputNumber />
             </Form.Item>
             <Form.Item
               label={t("bodyshop.fields.invoice_state_tax_rate")}
-              name={["invoice_tax_rates", "state_tax_rate"]}>
+              name={["invoice_tax_rates", "state_tax_rate"]}
+            >
               <InputNumber />
             </Form.Item>
             <Form.Item
               label={t("bodyshop.fields.invoice_local_tax_rate")}
-              name={["invoice_tax_rates", "local_tax_rate"]}>
+              name={["invoice_tax_rates", "local_tax_rate"]}
+            >
               <InputNumber />
             </Form.Item>
 
@@ -99,7 +107,8 @@ export default function ShopInfoComponent({ form, saveLoading }) {
                   required: true,
                   message: t("general.validation.required"),
                 },
-              ]}>
+              ]}
+            >
               <InputNumber min={15} precision={0} />
             </Form.Item>
           </LayoutFormRow>
@@ -112,7 +121,8 @@ export default function ShopInfoComponent({ form, saveLoading }) {
                   required: true,
                   message: t("general.validation.required"),
                 },
-              ]}>
+              ]}
+            >
               <InputNumber min={0} precision={0} />
             </Form.Item>
 
@@ -124,7 +134,8 @@ export default function ShopInfoComponent({ form, saveLoading }) {
                   required: true,
                   message: t("general.validation.required"),
                 },
-              ]}>
+              ]}
+            >
               <InputNumber min={0} precision={0} />
             </Form.Item>
 
@@ -136,7 +147,8 @@ export default function ShopInfoComponent({ form, saveLoading }) {
                   required: true,
                   message: t("general.validation.required"),
                 },
-              ]}>
+              ]}
+            >
               <InputNumber min={0} max={12} precision={0} />
             </Form.Item>
             <Form.Item
@@ -148,8 +160,9 @@ export default function ShopInfoComponent({ form, saveLoading }) {
                   message: t("general.validation.required"),
                   type: "array",
                 },
-              ]}>
-              <Select mode='tags' />
+              ]}
+            >
+              <Select mode="tags" />
             </Form.Item>
             <Form.Item
               label={t("bodyshop.labels.accountingtiers")}
@@ -159,7 +172,8 @@ export default function ShopInfoComponent({ form, saveLoading }) {
                   message: t("general.validation.required"),
                 },
               ]}
-              name={["accountingconfig", "tiers"]}>
+              name={["accountingconfig", "tiers"]}
+            >
               <Radio.Group>
                 <Radio value={2}>2</Radio>
                 <Radio value={3}>3</Radio>
@@ -179,15 +193,17 @@ export default function ShopInfoComponent({ form, saveLoading }) {
                         message: t("general.validation.required"),
                       },
                     ]}
-                    name={["accountingconfig", "twotierpref"]}>
+                    name={["accountingconfig", "twotierpref"]}
+                  >
                     <Radio.Group
                       disabled={
                         form.getFieldValue(["accountingconfig", "tiers"]) === 3
-                      }>
-                      <Radio value='name'>
+                      }
+                    >
+                      <Radio value="name">
                         {t("bodyshop.labels.2tiername")}
                       </Radio>
-                      <Radio value='source'>
+                      <Radio value="source">
                         {t("bodyshop.labels.2tiersource")}
                       </Radio>
                     </Radio.Group>
@@ -203,7 +219,8 @@ export default function ShopInfoComponent({ form, saveLoading }) {
                   {fields.map((field, index) => (
                     <Form.Item
                       key={field.key}
-                      style={{ padding: 0, margin: 2 }}>
+                      style={{ padding: 0, margin: 2 }}
+                    >
                       <div style={{ display: "flex" }}>
                         <Form.Item
                           style={{ padding: 0, margin: 2 }}
@@ -215,7 +232,8 @@ export default function ShopInfoComponent({ form, saveLoading }) {
                               required: true,
                               message: t("general.validation.required"),
                             },
-                          ]}>
+                          ]}
+                        >
                           <Input />
                         </Form.Item>
                         <Form.Item
@@ -228,7 +246,8 @@ export default function ShopInfoComponent({ form, saveLoading }) {
                               required: true,
                               message: t("general.validation.required"),
                             },
-                          ]}>
+                          ]}
+                        >
                           <Input />
                         </Form.Item>
                         <DeleteFilled
@@ -241,11 +260,12 @@ export default function ShopInfoComponent({ form, saveLoading }) {
                   ))}
                   <Form.Item>
                     <Button
-                      type='dashed'
+                      type="dashed"
                       onClick={() => {
                         add();
                       }}
-                      style={{ width: "100%" }}>
+                      style={{ width: "100%" }}
+                    >
                       {t("general.actions.add")}
                     </Button>
                   </Form.Item>
@@ -255,26 +275,36 @@ export default function ShopInfoComponent({ form, saveLoading }) {
           </Form.List>
         </Collapse.Panel>
         <Collapse.Panel
-          key='roStatus'
-          header={t("bodyshop.labels.jobstatuses")}>
+          key="speedprint"
+          header={t("bodyshop.labels.speedprint")}
+        >
+          <ShopInfoSpeedPrint form={form} />
+        </Collapse.Panel>
+        <Collapse.Panel
+          key="roStatus"
+          header={t("bodyshop.labels.jobstatuses")}
+        >
           <ShopInfoROStatusComponent form={form} />
         </Collapse.Panel>
         <Collapse.Panel
-          key='scheduling'
-          header={t("bodyshop.labels.scheduling")}>
+          key="scheduling"
+          header={t("bodyshop.labels.scheduling")}
+        >
           <ShopInfoSchedulingComponent form={form} />
         </Collapse.Panel>
         <Collapse.Panel
-          key='orderStatus'
-          header={t("bodyshop.labels.orderstatuses")}>
+          key="orderStatus"
+          header={t("bodyshop.labels.orderstatuses")}
+        >
           <ShopInfoOrderStatusComponent form={form} />
         </Collapse.Panel>
         <Collapse.Panel
-          key='responsibilityCenters'
-          header={t("bodyshop.labels.responsibilitycenters.title")}>
+          key="responsibilityCenters"
+          header={t("bodyshop.labels.responsibilitycenters.title")}
+        >
           <ShopInfoResponsibilityCenterComponent form={form} />
         </Collapse.Panel>
-        <Collapse.Panel key='intake' header={t("bodyshop.labels.intake")}>
+        <Collapse.Panel key="intake" header={t("bodyshop.labels.intake")}>
           <ShopInfoIntakeChecklistComponent form={form} />
         </Collapse.Panel>
       </Collapse>
diff --git a/client/src/components/shop-info/shop-info.intake.component.jsx b/client/src/components/shop-info/shop-info.intake.component.jsx
index 239c2c53f..477674a19 100644
--- a/client/src/components/shop-info/shop-info.intake.component.jsx
+++ b/client/src/components/shop-info/shop-info.intake.component.jsx
@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { TemplateList } from "../../utils/TemplateConstants";
 import ConfigFormTypes from "../config-form-components/config-form-types";
+import FormListMoveArrows from "../form-list-move-arrows/form-list-move-arrows.component";
 
 const SelectorDiv = styled.div`
   .ant-form-item .ant-select {
@@ -18,14 +19,14 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
   return (
     <div>
       <Form.List name={["intakechecklist", "form"]}>
-        {(fields, { add, remove }) => {
+        {(fields, { add, remove, move }) => {
           return (
             <div>
               {fields.map((field, index) => (
                 <Form.Item key={field.key} style={{ padding: 0, margin: 2 }}>
-                  <div className='imex-flex-row'>
+                  <div className="imex-flex-row">
                     <Form.Item
-                      className='imex-flex-row__margin'
+                      className="imex-flex-row__margin"
                       label={t("jobs.fields.intake.name")}
                       key={`${index}name`}
                       name={[field.name, "name"]}
@@ -34,12 +35,13 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
                           required: true,
                           message: t("general.validation.required"),
                         },
-                      ]}>
+                      ]}
+                    >
                       <Input />
                     </Form.Item>
 
                     <Form.Item
-                      className='imex-flex-row__margin'
+                      className="imex-flex-row__margin"
                       label={t("jobs.fields.intake.type")}
                       key={`${index}type`}
                       name={[field.name, "type"]}
@@ -48,7 +50,8 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
                           required: true,
                           message: t("general.validation.required"),
                         },
-                      ]}>
+                      ]}
+                    >
                       <Select>
                         {Object.keys(ConfigFormTypes).map((i, idx) => (
                           <Select.Option key={i} value={i}>
@@ -59,7 +62,7 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
                     </Form.Item>
 
                     <Form.Item
-                      className='imex-flex-row__margin'
+                      className="imex-flex-row__margin"
                       label={t("jobs.fields.intake.label")}
                       key={`${index}label`}
                       name={[field.name, "label"]}
@@ -68,16 +71,18 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
                           required: true,
                           message: t("general.validation.required"),
                         },
-                      ]}>
+                      ]}
+                    >
                       <Input />
                     </Form.Item>
 
                     <Form.Item
-                      className='imex-flex-row__margin'
-                      label={t("general.fields.required")}
+                      className="imex-flex-row__margin"
+                      label={t("jobs.fields.intake.required")}
                       key={`${index}required`}
                       name={[field.name, "required"]}
-                      valuePropName='checked'>
+                      valuePropName="checked"
+                    >
                       <Switch />
                     </Form.Item>
 
@@ -86,16 +91,22 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
                         remove(field.name);
                       }}
                     />
+                    <FormListMoveArrows
+                      move={move}
+                      index={index}
+                      total={fields.length}
+                    />
                   </div>
                 </Form.Item>
               ))}
               <Form.Item>
                 <Button
-                  type='dashed'
+                  type="dashed"
                   onClick={() => {
                     add();
                   }}
-                  style={{ width: "100%" }}>
+                  style={{ width: "100%" }}
+                >
                   {t("general.actions.add")}
                 </Button>
               </Form.Item>
@@ -114,12 +125,14 @@ export default function ShopInfoIntakeChecklistComponent({ form }) {
               message: t("general.validation.required"),
               type: "array",
             },
-          ]}>
-          <Select mode='multiple'>
+          ]}
+        >
+          <Select mode="multiple">
             {Object.keys(TemplateList).map((i) => (
               <Select.Option
                 key={TemplateList[i].key}
-                value={TemplateList[i].key}>
+                value={TemplateList[i].key}
+              >
                 {TemplateList[i].title}
               </Select.Option>
             ))}
diff --git a/client/src/components/shop-info/shop-info.speedprint.component.jsx b/client/src/components/shop-info/shop-info.speedprint.component.jsx
new file mode 100644
index 000000000..87cdecfdf
--- /dev/null
+++ b/client/src/components/shop-info/shop-info.speedprint.component.jsx
@@ -0,0 +1,105 @@
+import { DeleteFilled } from "@ant-design/icons";
+import { Button, Col, Form, Input, InputNumber, Row, Select } from "antd";
+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";
+//TODO Fix up styles.
+
+export default function ShopInfoSpeedPrint({ bodyshop, form }) {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <Form.List name={["speedprint"]}>
+        {(fields, { add, remove, move }) => {
+          return (
+            <div>
+              {fields.map((field, index) => (
+                <Form.Item key={field.key} style={{ padding: 0, margin: 2 }}>
+                  <div className="imex-flex-row">
+                    <Form.Item
+                      className="imex-flex-row__margin"
+                      label={t("bodyshop.fields.speedprint.id")}
+                      key={`${index}id`}
+                      name={[field.name, "id"]}
+                      rules={[
+                        {
+                          required: true,
+                          message: t("general.validation.required"),
+                        },
+                      ]}
+                    >
+                      <Input />
+                    </Form.Item>
+                    <Form.Item
+                      className="imex-flex-row__margin"
+                      label={t("bodyshop.fields.speedprint.label")}
+                      key={`${index}label`}
+                      name={[field.name, "label"]}
+                      rules={[
+                        {
+                          required: true,
+                          message: t("general.validation.required"),
+                        },
+                      ]}
+                    >
+                      <Input />
+                    </Form.Item>
+
+                    <Form.Item
+                      className="imex-flex-row__margin"
+                      name={[field.name, "templates"]}
+                      label={t("bodyshop.fields.speedprint.templates")}
+                      rules={[
+                        {
+                          required: true,
+                          message: t("general.validation.required"),
+                          type: "array",
+                        },
+                      ]}
+                    >
+                      <Select mode="multiple">
+                        {Object.keys(TemplateList)
+                          .map((key) => TemplateList[key])
+                          .filter((template) => template.drivingId === "job")
+                          .map((template, idx) => (
+                            <Select.Option key={idx} value={template.key}>
+                              {template.title}
+                            </Select.Option>
+                          ))}
+                      </Select>
+                    </Form.Item>
+
+                    <DeleteFilled
+                      className="imex-flex-row__margin"
+                      onClick={() => {
+                        remove(field.name);
+                      }}
+                    />
+                    <FormListMoveArrows
+                      move={move}
+                      index={index}
+                      total={fields.length}
+                    />
+                  </div>
+                </Form.Item>
+              ))}
+              <Form.Item>
+                <Button
+                  type="dashed"
+                  onClick={() => {
+                    add();
+                  }}
+                  style={{ width: "100%" }}
+                >
+                  {t("bodyshop.actions.addspeedprint")}
+                </Button>
+              </Form.Item>
+            </div>
+          );
+        }}
+      </Form.List>
+    </div>
+  );
+}
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index 549bc0203..61ea74783 100644
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -73,6 +73,7 @@
 		"bodyshop": {
 			"actions": {
 				"addbucket": "Add Bucket",
+				"addspeedprint": "Add Speed Print",
 				"addtemplate": "Add Template",
 				"newstatus": "Add Status"
 			},
@@ -135,6 +136,11 @@
 					"tow": "Towing"
 				},
 				"shopname": "Shop Name",
+				"speedprint": {
+					"id": "Id",
+					"label": "Label",
+					"templates": "Templates"
+				},
 				"ssbuckets": {
 					"gte": "Greater Than/Equal to (hrs)",
 					"id": "ID",
@@ -182,7 +188,8 @@
 					"title": "Responsibility Centers"
 				},
 				"scheduling": "SMART Scheduling",
-				"shopinfo": "Shop Information"
+				"shopinfo": "Shop Information",
+				"speedprint": "Speed Print Configuration"
 			},
 			"successes": {
 				"save": "Bodyshop saved successfully. "
@@ -665,6 +672,7 @@
 				"intake": {
 					"label": "Label",
 					"name": "Name",
+					"required": "Required?",
 					"type": "Type"
 				},
 				"kmin": "Mileage In",
@@ -1078,6 +1086,7 @@
 			"labels": {
 				"misc": "Miscellaneous Documents",
 				"repairorder": "Repair Order Related",
+				"speedprint": "Speed Print",
 				"title": "Print Center"
 			}
 		},
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
index b15fea41b..7ec5d5715 100644
--- a/client/src/translations/es/common.json
+++ b/client/src/translations/es/common.json
@@ -73,6 +73,7 @@
 		"bodyshop": {
 			"actions": {
 				"addbucket": "",
+				"addspeedprint": "",
 				"addtemplate": "",
 				"newstatus": ""
 			},
@@ -135,6 +136,11 @@
 					"tow": ""
 				},
 				"shopname": "",
+				"speedprint": {
+					"id": "",
+					"label": "",
+					"templates": ""
+				},
 				"ssbuckets": {
 					"gte": "",
 					"id": "",
@@ -182,7 +188,8 @@
 					"title": ""
 				},
 				"scheduling": "",
-				"shopinfo": ""
+				"shopinfo": "",
+				"speedprint": ""
 			},
 			"successes": {
 				"save": ""
@@ -665,6 +672,7 @@
 				"intake": {
 					"label": "",
 					"name": "",
+					"required": "",
 					"type": ""
 				},
 				"kmin": "Kilometraje en",
@@ -1078,6 +1086,7 @@
 			"labels": {
 				"misc": "",
 				"repairorder": "",
+				"speedprint": "",
 				"title": ""
 			}
 		},
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
index d05bc3488..711683fbd 100644
--- a/client/src/translations/fr/common.json
+++ b/client/src/translations/fr/common.json
@@ -73,6 +73,7 @@
 		"bodyshop": {
 			"actions": {
 				"addbucket": "",
+				"addspeedprint": "",
 				"addtemplate": "",
 				"newstatus": ""
 			},
@@ -135,6 +136,11 @@
 					"tow": ""
 				},
 				"shopname": "",
+				"speedprint": {
+					"id": "",
+					"label": "",
+					"templates": ""
+				},
 				"ssbuckets": {
 					"gte": "",
 					"id": "",
@@ -182,7 +188,8 @@
 					"title": ""
 				},
 				"scheduling": "",
-				"shopinfo": ""
+				"shopinfo": "",
+				"speedprint": ""
 			},
 			"successes": {
 				"save": ""
@@ -665,6 +672,7 @@
 				"intake": {
 					"label": "",
 					"name": "",
+					"required": "",
 					"type": ""
 				},
 				"kmin": "Kilométrage en",
@@ -1078,6 +1086,7 @@
 			"labels": {
 				"misc": "",
 				"repairorder": "",
+				"speedprint": "",
 				"title": ""
 			}
 		},
diff --git a/client/src/utils/RenderTemplate.js b/client/src/utils/RenderTemplate.js
index dcae1d37c..1b959e4a8 100644
--- a/client/src/utils/RenderTemplate.js
+++ b/client/src/utils/RenderTemplate.js
@@ -22,7 +22,7 @@ export default async function RenderTemplate(templateObject, bodyshop) {
   } else {
     //No template found.Uh oh.
     alert("Error: Template key does not exist.");
-    //throw new Error("Template key does not exist.");
+    throw new Error("Template key does not exist.");
   }
 
   const { data: contextData } = await client.query({
diff --git a/client/src/utils/TemplateConstants.js b/client/src/utils/TemplateConstants.js
index 6fdbe729b..023ef4ba9 100644
--- a/client/src/utils/TemplateConstants.js
+++ b/client/src/utils/TemplateConstants.js
@@ -7,50 +7,62 @@ export const TemplateList = {
   appointment_reminder: {
     title: "Appointment Reminder",
     description: "Sent to a customer as a reminder of an upcoming appointment.",
-    drivingId: "Appointment Id",
+    drivingId: "appointment",
     key: "appointment_reminder",
   },
   appointment_confirmation: {
     title: "Appointment Confirmation",
     description:
       "Sent to a customer as a Confirmation of an upcoming appointment.",
-    drivingId: "Appointment Id",
+    drivingId: "appointment",
     key: "appointment_confirmation",
   },
   parts_order_confirmation: {
     title: "Parts Order Confirmation",
     description: "Parts order template including part details",
-    drivingId: "Parts order Id",
+    drivingId: "partsorder",
     key: "parts_order_confirmation",
   },
   estimate_detail: {
     title: "Estimate Detail Lines",
     description: "Est Detail",
-    drivingId: "test does not exist.",
+    drivingId: "job",
     key: "estimate_detail",
   },
+  cover_sheet_landscape: {
+    title: "Cover Sheet - Landscape",
+    description: "Cover sheet landscape",
+    drivingId: "job",
+    key: "cover_sheet_landscape",
+  },
+  cover_sheet_portrait: {
+    title: "Cover Sheet - portrait",
+    description: "Cover sheet portrait",
+    drivingId: "job",
+    key: "cover_sheet_portrait",
+  },
   parts_return_confirmation: {
     title: "Parts Return Confirmation",
     description: "Parts Return template including part details",
-    drivingId: "Parts order Id",
+    drivingId: "partsorder",
     key: "parts_return_confirmation",
   },
   csi_invitation: {
     title: "Customer Survey Invitation",
     description: "Customer Survey Invitation",
-    drivingId: "csi Id",
+    drivingId: "csi",
     key: "csi_invitation",
   },
   payment_receipt: {
     title: "Payment Receipt",
     description: "Receipt of payment for customer",
-    drivingId: "Payment Id",
+    drivingId: "payment",
     key: "payment_receipt",
   },
   time_tickets_by_employee: {
     title: "Time Tickets by Employee",
     description: "Time tickets for employee with date range",
-    drivingId: "Employee ID with start and end date",
+    drivingId: "employee",
     key: "time_tickets_by_employee",
   },
 };