Finished speed print setup + addition to print center modal. BOD-229

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