BOD-34 Added jobs items and conditional rendering for print center.

bodyshop_translations.babel

@@ -11360,6 +11360,58 @@
                     <folder_node>
                         <name>printcenter</name>
                         <children>
+                            <folder_node>
+                                <name>errors</name>
+                                <children>
+                                    <concept_node>
+                                        <name>nocontexttype</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>jobs</name>
+                                <children>
+                                    <concept_node>
+                                        <name>repairorder</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>labels</name>
                                 <children>

client/src/components/_test/test.component.jsx

@@ -19,6 +19,7 @@ const mapDispatchToProps = (dispatch) => ({
   load: () => dispatch(startLoading()),
   endload: () => dispatch(endLoading()),
 });
+
 export default connect(
   mapStateToProps,
   mapDispatchToProps
@@ -48,13 +49,12 @@ export default connect(
               );
               newWin.document.write(r.data);
             });
-        }}
+        }}>
-      >
         TinyMCE
       </button>
       <Editor
         value={state}
-        apiKey="f3s2mjsd77ya5qvqkee9vgh612cm6h41e85efqakn2d0kknk"
+        apiKey='f3s2mjsd77ya5qvqkee9vgh612cm6h41e85efqakn2d0kknk'
         init={{
           height: 500,
           //menubar: false,
@@ -76,12 +76,7 @@ export default connect(
         onClick={() =>
           setEmailOptions({
             messageOptions: {
-              from: {
-                name: bodyshop.shopname || EmailSettings.fromNameDefault,
-                address: EmailSettings.fromAddress,
-              },
               to: "patrickwf@gmail.com",
-              replyTo: bodyshop.email,
               Subject: "TODO FIX ME",
             },
             template: {
@@ -89,8 +84,7 @@ export default connect(
               variables: { id: "2b42336f-b8de-4f04-a053-d6bff034d384" },
             },
           })
-        }
+        }>
-      >
         Set email config.
       </button>
       <button
@@ -110,8 +104,7 @@ export default connect(
               variables: { id: "6fea31e9-ea85-4c89-ac56-6f9cc84531fe" },
             },
           })
-        }
+        }>
-      >
         Parts Order
       </button>
     </div>

client/src/components/email-overlay/email-overlay.container.jsx

@@ -15,6 +15,7 @@ import {
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import EmailOverlayComponent from "./email-overlay.component";
+import { EmailSettings } from "../../emails/constants";
 
 const mapStateToProps = createStructuredSelector({
   modalVisible: selectEmailVisible,
@@ -31,10 +32,16 @@ export function EmailOverlayContainer({
   bodyshop,
 }) {
   const { t } = useTranslation();
-
+  const defaultEmailFrom = {
-  const [messageOptions, setMessageOptions] = useState(
+    from: {
-    emailConfig.messageOptions
+      name: bodyshop.shopname || EmailSettings.fromNameDefault,
-  );
+      address: EmailSettings.fromAddress,
+    },
+    replyTo: bodyshop.email,
+  };
+  const [messageOptions, setMessageOptions] = useState({
+    ...defaultEmailFrom,
+  });
   const client = useApolloClient();
 
   const renderEmail = () => {
@@ -78,7 +85,11 @@ export function EmailOverlayContainer({
         context: { ...contextData, bodyshop: bodyshop },
       })
       .then((r) => {
-        setMessageOptions({ ...messageOptions, html: r.data });
+        setMessageOptions({
+          ...emailConfig.messageOptions,
+          ...defaultEmailFrom,
+          html: r.data,
+        });
       });
   };
 
@@ -119,8 +130,7 @@ export function EmailOverlayContainer({
       onOk={handleOk}
       onCancel={() => {
         toggleEmailOverlayVisible();
-      }}
+      }}>
-    >
       <LoadingSpinner loading={false}>
         <EmailOverlayComponent
           handleConfigChange={handleConfigChange}
@@ -131,8 +141,7 @@ export function EmailOverlayContainer({
           onClick={() => {
             console.log(messageOptions.html);
             navigator.clipboard.writeText(messageOptions.html);
-          }}
+          }}>
-        >
           Get HTML
         </button>
       </LoadingSpinner>

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

@@ -0,0 +1,24 @@
+import React from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { setEmailOptions } from "../../redux/email/email.actions";
+import { selectPrintCenter } from "../../redux/modals/modals.selectors";
+
+const mapStateToProps = createStructuredSelector({
+  printCenterModal: selectPrintCenter,
+});
+const mapDispatchToProps = (dispatch) => ({
+  setEmailOptions: (e) => dispatch(setEmailOptions(e)),
+});
+
+export function PrintCenterItemComponent({
+  printCenterModal,
+  setEmailOptions,
+  item,
+}) {
+  return <li>{item.title}</li>;
+}
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(PrintCenterItemComponent);

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

@@ -0,0 +1,51 @@
+import { Collapse } 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 {
+  selectBodyshop,
+  selectCurrentUser,
+} from "../../redux/user/user.selectors";
+import JobsReports from "./print-center-jobs.list";
+import PrintCenterItem from "../print-center-item/print-center-item.component";
+
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser,
+  bodyshop: selectBodyshop,
+  printCenterModal: selectPrintCenter,
+});
+const mapDispatchToProps = (dispatch) => ({
+  setEmailOptions: (e) => dispatch(setEmailOptions(e)),
+  toggleModalVisible: () => dispatch(toggleModalVisible("printCenter")),
+});
+export function PrintCenterJobsComponent({ printCenterModal }) {
+  const { t } = useTranslation();
+  const { id: jobid } = printCenterModal.context;
+
+  const JobsReportsList = JobsReports(null);
+
+  return (
+    <div>
+      Print Center Jobs COmponetn
+      <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} />
+              ))}
+            </ul>
+          </Collapse.Panel>
+        ))}
+      </Collapse>
+    </div>
+  );
+}
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(PrintCenterJobsComponent);

client/src/components/print-center-jobs/print-center-jobs.list.js

@@ -0,0 +1,50 @@
+import i18n from "i18next";
+
+export default function JobsReports(job) {
+  return [
+    {
+      title: i18n.t("printcenter.jobs.repairorder"),
+      key: "printcenter.jobs.repairorder",
+      disabled: false,
+      items: [
+        {
+          key: "appointment_reminder",
+          title: "Appointment Reminder",
+          disabled: false,
+        },
+        {
+          key: "appointment_reminder2",
+          title: "Appointment Reminder2",
+          disabled: false,
+        },
+        {
+          key: "appointment_reminder3",
+          title: "Appointment Reminder3",
+          disabled: false,
+        },
+        {
+          key: "appointment_reminder4",
+          title: "Appointment Reminder4",
+          disabled: false,
+        },
+        {
+          key: "appointment_reminder5",
+          title: "Appointment Reminder5",
+          disabled: false,
+        },
+      ],
+    },
+    {
+      title: "Section 2",
+      key: "Section2",
+      disabled: false,
+      items: [
+        {
+          key: "appointment_reminder12",
+          title: "Appointment Reminder12",
+          disabled: false,
+        },
+      ],
+    },
+  ];
+}

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

@@ -1,8 +1,23 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
+import PrintCenterJobs from "../print-center-jobs/print-center-jobs.component";
 
 export default function PrintCenterModalComponent({ context }) {
   const { t } = useTranslation();
-  const { type, id } = context;
+  const { type } = context;
-  return <div>{`${type} - ${id}`}</div>;
+
+  let ModalContent;
+
+  switch (type) {
+    case "job":
+      ModalContent = PrintCenterJobs;
+      break;
+    default:
+      break;
+  }
+  return (
+    <div>
+      {ModalContent ? <ModalContent /> : t("printcenter.errors.nocontexttype")}
+    </div>
+  );
 }

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

@@ -32,8 +32,8 @@ export function PrintCenterModalContainer({
 }) {
   const { t } = useTranslation();
 
-  const { visible, context, actions } = printCenterModal;
+  const { visible, context } = printCenterModal;
-  // const { jobId, linesToOrder } = context;
+  const { type, id } = context;
   // const { refetch } = actions;
 
   return (
@@ -41,7 +41,7 @@ export function PrintCenterModalContainer({
       visible={visible}
       onCancel={() => toggleModalVisible()}
       width='90%'
-      title={t("printcenter.labels.title")}
+      title={` ${t("printcenter.labels.title")} ${type} - ${id}`}
       destroyOnClose>
       <PrintCenterModalComponent context={context} />
     </Modal>

client/src/redux/application/application.sagas.js

@@ -0,0 +1,51 @@
+import { all, call, put, takeLatest } from "redux-saga/effects";
+// import { sendEmailFailure, sendEmailSuccess } from "./email.actions";
+// import EmailActionTypes from "./email.types";
+import axios from "axios";
+
+// export function* onSendEmail() {
+//   yield takeLatest(EmailActionTypes.SEND_EMAIL, sendEmail);
+// }
+// export function* sendEmail(payload) {
+//   try {
+//     console.log("Sending thta email", payload);
+//     axios.post("/sendemail", payload).then(response => {
+//       console.log(JSON.stringify(response));
+//       put(sendEmailSuccess());
+//     });
+//   } catch (error) {
+//     console.log("Error in sendEmail saga.");
+//     yield put(sendEmailFailure(error.message));
+//   }
+// }
+
+// export function* onSendEmailSuccess() {
+//   yield takeLatest(EmailActionTypes.SEND_EMAIL_SUCCESS, sendEmailSuccessSaga);
+// }
+// export function* sendEmailSuccessSaga() {
+//   try {
+//     console.log("Send email success.");
+//   } catch (error) {
+//     console.log("Error in sendEmailSuccess saga.");
+//     yield put(sendEmailFailure(error.message));
+//   }
+// }
+
+// export function* onSendEmailFailure() {
+//   yield takeLatest(EmailActionTypes.SEND_EMAIL_FAILURE, sendEmailFailureSaga);
+// }
+// export function* sendEmailFailureSaga(error) {
+//   try {
+//     yield console.log(error);
+//   } catch (error) {
+//     console.log("Error in sendEmailFailure saga.", error.message);
+//   }
+// }
+
+export function* applicationSagas() {
+  yield all([
+    // call(onSendEmail),
+    // call(onSendEmailFailure),
+    // call(onSendEmailSuccess)
+  ]);
+}

client/src/redux/root.saga.js

@@ -4,7 +4,13 @@ import { userSagas } from "./user/user.sagas";
 import { messagingSagas } from "./messaging/messaging.sagas";
 import { emailSagas } from "./email/email.sagas";
 import { modalsSagas } from "./modals/modals.sagas";
+import { applicationSagas } from "./application/application.sagas";
 export default function* rootSaga() {
-  yield all([call(userSagas), call(messagingSagas), call(emailSagas),
+  yield all([
-  call(modalsSagas)]);
+    call(userSagas),
+    call(messagingSagas),
+    call(emailSagas),
+    call(modalsSagas),
+    call(applicationSagas),
+  ]);
 }

client/src/translations/en_us/common.json

@@ -733,6 +733,12 @@
 			}
 		},
 		"printcenter": {
+			"errors": {
+				"nocontexttype": "No context type set."
+			},
+			"jobs": {
+				"repairorder": "Repair Order Related"
+			},
 			"labels": {
 				"title": "Print Center"
 			}

client/src/translations/es/common.json

@@ -733,6 +733,12 @@
 			}
 		},
 		"printcenter": {
+			"errors": {
+				"nocontexttype": ""
+			},
+			"jobs": {
+				"repairorder": ""
+			},
 			"labels": {
 				"title": ""
 			}

client/src/translations/fr/common.json

@@ -733,6 +733,12 @@
 			}
 		},
 		"printcenter": {
+			"errors": {
+				"nocontexttype": ""
+			},
+			"jobs": {
+				"repairorder": ""
+			},
 			"labels": {
 				"title": ""
 			}