IO-557 Send documents in emails.

bodyshop_translations.babel

@@ -11317,6 +11317,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>documents</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>generatingemail</name>
                                         <definition_loaded>false</definition_loaded>

client/src/components/email-documents/email-documents.component.jsx

@@ -0,0 +1,58 @@
+import { useQuery } from "@apollo/client";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { GET_DOCUMENTS_BY_JOB } from "../../graphql/documents.queries";
+import { selectEmailConfig } from "../../redux/email/email.selectors";
+import AlertComponent from "../alert/alert.component";
+import JobDocumentsGalleryExternal from "../jobs-documents-gallery/jobs-documents-gallery.external.component";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+  emailConfig: selectEmailConfig,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(EmailDocumentsComponent);
+
+export function EmailDocumentsComponent({
+  emailConfig,
+
+  selectedMediaState,
+}) {
+  const { t } = useTranslation();
+
+  const [selectedMedia, setSelectedMedia] = selectedMediaState;
+  const { loading, error, data } = useQuery(GET_DOCUMENTS_BY_JOB, {
+    variables: {
+      jobId: emailConfig.jobid,
+    },
+    skip: !emailConfig.jobid,
+  });
+  console.log(
+    "🚀  ~ file: email-documents.component.jsx  ~ line 38  ~ emailConfig",
+    emailConfig
+  );
+
+  return (
+    <div>
+      {loading && <LoadingSpinner />}
+      {error && <AlertComponent message={error.message} type="error" />}
+      {selectedMedia.filter((s) => s.isSelected).length >= 10 ? (
+        <div style={{ color: "red" }}>{t("messaging.labels.maxtenimages")}</div>
+      ) : null}
+      {data && (
+        <JobDocumentsGalleryExternal
+          data={data ? data.documents : []}
+          externalMediaState={[selectedMedia, setSelectedMedia]}
+        />
+      )}
+    </div>
+  );
+}

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

@@ -1,9 +1,10 @@
 import { UploadOutlined } from "@ant-design/icons";
-import { Card, Divider, Form, Input, Select, Upload } from "antd";
+import { Divider, Form, Input, Select, Tabs, Upload } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
+import EmailDocumentsComponent from "../email-documents/email-documents.component";
 
-export default function EmailOverlayComponent({ form }) {
+export default function EmailOverlayComponent({ form, selectedMediaState }) {
   const { t } = useTranslation();
   return (
     <div>
@@ -52,34 +53,38 @@ export default function EmailOverlayComponent({ form }) {
         }}
       </Form.Item>
 
-      <Card title={t("emails.labels.attachments")}>
+      <Tabs>
-        <Form.Item
+        <Tabs.TabPane tab={t("emails.labels.documents")} key="documents">
-          name="fileList"
+          <EmailDocumentsComponent selectedMediaState={selectedMediaState} />
-          valuePropName="fileList"
+        </Tabs.TabPane>
-          getValueFromEvent={(e) => {
+        <Tabs.TabPane tab={t("emails.labels.attachments")} key="attachments">
-            console.log("Upload event:", e);
+          <Form.Item
-            if (Array.isArray(e)) {
+            name="fileList"
-              return e;
+            valuePropName="fileList"
-            }
+            getValueFromEvent={(e) => {
-            return e && e.fileList;
+              if (Array.isArray(e)) {
-          }}
+                return e;
-        >
+              }
-          <Upload.Dragger
+              return e && e.fileList;
-            beforeUpload={Upload.LIST_IGNORE}
+            }}
-            multiple
-            listType="picture-card"
           >
-            <>
+            <Upload.Dragger
-              <p className="ant-upload-drag-icon">
+              beforeUpload={Upload.LIST_IGNORE}
-                <UploadOutlined />
+              multiple
-              </p>
+              listType="picture-card"
-              <p className="ant-upload-text">
+            >
-                Click or drag files to this area to upload.
+              <>
-              </p>
+                <p className="ant-upload-drag-icon">
-            </>
+                  <UploadOutlined />
-          </Upload.Dragger>
+                </p>
-        </Form.Item>
+                <p className="ant-upload-text">
-      </Card>
+                  Click or drag files to this area to upload.
+                </p>
+              </>
+            </Upload.Dragger>
+          </Form.Item>
+        </Tabs.TabPane>
+      </Tabs>
     </div>
   );
 }

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

@@ -43,6 +43,8 @@ export function EmailOverlayContainer({
   const [loading, setLoading] = useState(false);
   const [sending, setSending] = useState(false);
   const [rawHtml, setRawHtml] = useState("");
+  const [selectedMedia, setSelectedMedia] = useState([]);
+
   const defaultEmailFrom = {
     from: {
       name: `${currentUser.displayName} @ ${bodyshop.shopname}`,
@@ -56,17 +58,18 @@ export function EmailOverlayContainer({
 
   const handleFinish = async (values) => {
     logImEXEvent("email_send_from_modal");
-    console.log(`values`, values);
+
     const attachments = [];
 
-    await asyncForEach(values.fileList, async (f) => {
+    if (values.fileList)
-      const t = {
+      await asyncForEach(values.fileList, async (f) => {
-        ContentType: f.type,
+        const t = {
-        Filename: f.name,
+          ContentType: f.type,
-        Base64Content: (await toBase64(f.originFileObj)).split(",")[1],
+          Filename: f.name,
-      };
+          Base64Content: (await toBase64(f.originFileObj)).split(",")[1],
-      attachments.push(t);
+        };
-    });
+        attachments.push(t);
+      });
 
     setSending(true);
     try {
@@ -74,9 +77,12 @@ export function EmailOverlayContainer({
         ...defaultEmailFrom,
         ...values,
         html: rawHtml,
-        attachments: await Promise.all(
+        attachments:
-          values.fileList.map(async (f) => await toBase64(f.originFileObj))
+          values.fileList &&
-        ),
+          (await Promise.all(
+            values.fileList.map(async (f) => await toBase64(f.originFileObj))
+          )),
+        media: selectedMedia.filter((m) => m.isSelected).map((m) => m.src),
         //attachments,
       });
       notification["success"]({ message: t("emails.successes.sent") });
@@ -137,7 +143,12 @@ export function EmailOverlayContainer({
             <LoadingSpinner message={t("emails.labels.generatingemail")} />
           </div>
         )}
-        {!loading && <EmailOverlayComponent form={form} />}
+        {!loading && (
+          <EmailOverlayComponent
+            form={form}
+            selectedMediaState={[selectedMedia, setSelectedMedia]}
+          />
+        )}
       </Form>
     </Modal>
   );

client/src/components/job-at-change/schedule-event.component.jsx

@@ -97,7 +97,8 @@ export function ScheduleEventComponent({
                 variables: { id: event.job.id },
               },
               { to: event.job && event.job.ownr_ea, subject: Template.subject },
-              "e"
+              "e",
+              event.job && event.job.id
             );
           }}
           disabled={event.arrived}

client/src/components/job-payments/job-payments.component.jsx

@@ -123,6 +123,7 @@ export function JobPayments({
           messageObject={{
             to: job.ownr_ea,
           }}
+          id={job.id}
         />
       ),
     },

client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.csi.component.jsx

@@ -97,6 +97,7 @@ export function JobsDetailHeaderCsi({
         }
         if (e.key === "email")
           setEmailOptions({
+            jobid: job.id,
             messageOptions: {
               to: [job.ownr_ea],
               replyTo: bodyshop.email,
@@ -139,6 +140,7 @@ export function JobsDetailHeaderCsi({
     } else {
       if (e.key === "email")
         setEmailOptions({
+          jobid: job.id,
           messageOptions: {
             to: [job.ownr_ea],
             replyTo: bodyshop.email,

client/src/components/jobs-documents-gallery/jobs-documents-gallery.external.component.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import Gallery from "react-grid-gallery";
 import { useTranslation } from "react-i18next";
-import { DetermineFileType } from "../documents-upload/documents-upload.utility";
+import { GenerateSrcUrl, GenerateThumbUrl } from "./job-documents.utility";
 
 function JobsDocumentGalleryExternal({
   data,
@@ -15,14 +15,8 @@ function JobsDocumentGalleryExternal({
     let documents = data.reduce((acc, value) => {
       if (value.type.startsWith("image")) {
         acc.push({
-          src: `${
+          src: GenerateSrcUrl(value),
-            process.env.REACT_APP_CLOUDINARY_ENDPOINT
+          thumbnail: GenerateThumbUrl(value),
-          }/${DetermineFileType(value.type)}/upload/${value.key}`,
-          thumbnail: `${
-            process.env.REACT_APP_CLOUDINARY_ENDPOINT
-          }/${DetermineFileType(value.type)}/upload/${
-            process.env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS
-          }/${value.key}`,
           thumbnailHeight: 225,
           thumbnailWidth: 225,
           isSelected: false,

client/src/components/parts-order-list-table/parts-order-list-table.component.jsx

@@ -183,6 +183,7 @@ export function PartsOrderListTableComponent({
             ? Templates.parts_return_slip.subject
             : Templates.parts_order.subject,
         }}
+        id={job.id}
       />
     </Space>
   );

client/src/components/parts-order-modal/parts-order-modal.container.jsx

@@ -180,7 +180,8 @@ export function PartsOrderModalContainer({
             ? Templates.parts_return_slip.subject
             : Templates.parts_order.subject,
         },
-        "e"
+        "e",
+        jobId
       );
     } else if (sendType === "p") {
       GenerateDocument(

client/src/components/payment-modal/payment-modal.container.jsx

@@ -133,7 +133,8 @@ function PaymentModalContainer({
               replyTo: bodyshop.email,
               subject: Templates.payment_receipt.subject,
             },
-            sendby === "email" ? "e" : "p"
+            sendby === "email" ? "e" : "p",
+            paymentObj.jobid
           );
         }
       } else {

client/src/components/payments-list-paginated/payment-list-paginated.component.jsx

@@ -168,6 +168,7 @@ export function PaymentsListPaginated({
               variables: { id: record.id },
             }}
             messageObject={{ subject: Templates.payment_receipt.subject }}
+            id={record.job && record.job.id}
           />
         </Space>
       ),

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

@@ -52,7 +52,8 @@ export function PrintCenterItemComponent({
                 variables: { id: id },
               },
               { to: context.job && context.job.ownr_ea, subject: item.subject },
-              "e"
+              "e",
+              id
             );
           }}
         />

client/src/components/print-wrapper/print-wrapper.component.jsx

@@ -7,11 +7,12 @@ export default function PrintWrapperComponent({
   templateObject,
   messageObject = {},
   children,
+  id,
 }) {
   const [loading, setLoading] = useState(false);
   const handlePrint = async (type) => {
     setLoading(true);
-    await GenerateDocument(templateObject, messageObject, type);
+    await GenerateDocument(templateObject, messageObject, type, id);
     setLoading(false);
   };
 

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

@@ -32,27 +32,23 @@ export function ReportCenterModalComponent({ reportCenterModal }) {
   const Templates = TemplateList("report_center");
   const { visible } = reportCenterModal;
 
-  const [
+  const [callVendorQuery, { data: vendorData, called: vendorCalled }] =
-    callVendorQuery,
+    useLazyQuery(QUERY_ALL_VENDORS, {
-    { data: vendorData, called: vendorCalled },
+      skip: !(
-  ] = useLazyQuery(QUERY_ALL_VENDORS, {
+        visible &&
-    skip: !(
+        Templates[form.getFieldValue("key")] &&
-      visible &&
+        Templates[form.getFieldValue("key")].idtype
-      Templates[form.getFieldValue("key")] &&
+      ),
-      Templates[form.getFieldValue("key")].idtype
+    });
-    ),
-  });
 
-  const [
+  const [callEmployeeQuery, { data: employeeData, called: employeeCalled }] =
-    callEmployeeQuery,
+    useLazyQuery(QUERY_ACTIVE_EMPLOYEES, {
-    { data: employeeData, called: employeeCalled },
+      skip: !(
-  ] = useLazyQuery(QUERY_ACTIVE_EMPLOYEES, {
+        visible &&
-    skip: !(
+        Templates[form.getFieldValue("key")] &&
-      visible &&
+        Templates[form.getFieldValue("key")].idtype
-      Templates[form.getFieldValue("key")] &&
+      ),
-      Templates[form.getFieldValue("key")].idtype
+    });
-    ),
-  });
 
   const handleFinish = async (values) => {
     setLoading(true);
@@ -73,7 +69,8 @@ export function ReportCenterModalComponent({ reportCenterModal }) {
         to: values.to,
         subject: Templates[values.key]?.subject,
       },
-      values.sendby === "email" ? "e" : "p"
+      values.sendby === "email" ? "e" : "p",
+      id
     );
     setLoading(false);
   };

client/src/components/schedule-job-modal/schedule-job-modal.container.jsx

@@ -148,6 +148,7 @@ export function ScheduleJobModalContainer({
     toggleModalVisible();
     if (values.notifyCustomer) {
       setEmailOptions({
+        jobid: jobId,
         messageOptions: {
           to: [values.email],
           replyTo: bodyshop.email,

client/src/redux/email/email.selectors.js

@@ -1,9 +1,6 @@
 import { createSelector } from "reselect";
 
 const selectEmail = (state) => state.email;
-const selectEmailConfigMessageOptions = (state) =>
-  state.email.emailConfig.messageOptions;
-const selectEmailConfigTemplate = (state) => state.email.emailConfig.template;
 
 export const selectEmailVisible = createSelector(
   [selectEmail],
@@ -11,9 +8,6 @@ export const selectEmailVisible = createSelector(
 );
 
 export const selectEmailConfig = createSelector(
-  [selectEmailConfigMessageOptions, selectEmailConfigTemplate],
+  [selectEmail],
-  (messageOptions, template) => ({
+  (email) => email.emailConfig
-    messageOptions,
-    template,
-  })
 );

client/src/translations/en_us/common.json

@@ -723,6 +723,7 @@
 			},
 			"labels": {
 				"attachments": "Attachments",
+				"documents": "Documents",
 				"generatingemail": "Generating email...",
 				"preview": "Email Preview"
 			},

client/src/translations/es/common.json

@@ -723,6 +723,7 @@
 			},
 			"labels": {
 				"attachments": "",
+				"documents": "",
 				"generatingemail": "",
 				"preview": ""
 			},

client/src/translations/fr/common.json

@@ -723,6 +723,7 @@
 			},
 			"labels": {
 				"attachments": "",
+				"documents": "",
 				"generatingemail": "",
 				"preview": ""
 			},

client/src/utils/RenderTemplate.js

@@ -147,11 +147,17 @@ export async function RenderTemplates(
   }
 }
 
-export const GenerateDocument = async (template, messageOptions, sendType) => {
+export const GenerateDocument = async (
+  template,
+  messageOptions,
+  sendType,
+  jobid
+) => {
   const bodyshop = store.getState().user.bodyshop;
   if (sendType === "e") {
     store.dispatch(
       setEmailOptions({
+        jobid,
         messageOptions: {
           ...messageOptions,
           to: Array.isArray(messageOptions.to)

server/email/sendemail.js

@@ -5,12 +5,7 @@ require("dotenv").config({
     `.env.${process.env.NODE_ENV || "development"}`
   ),
 });
-
+const axios = require("axios");
-const mailjet = require("node-mailjet").connect(
-  process.env.email_api,
-  process.env.email_secret
-);
-
 let nodemailer = require("nodemailer");
 let aws = require("aws-sdk");
 
@@ -28,21 +23,41 @@ exports.sendEmail = async (req, res) => {
     console.log("[EMAIL] Incoming Message", req.body.from.name);
   }
 
+  let downloadedMedia = [];
+  if (req.body.media && req.body.media.length > 0) {
+    downloadedMedia = await Promise.all(
+      req.body.media.map((m) => {
+        try {
+          return getImage(m);
+        } catch (error) {
+          console.log(error);
+        }
+      })
+    );
+  }
+
   transporter.sendMail(
     {
       from: `${req.body.from.name} <${req.body.from.address}>`,
       replyTo: req.body.ReplyTo.Email,
       to: req.body.to,
       cc: req.body.cc,
-      subject: "Message",
+      subject: req.body.subject,
       attachments:
-        (req.body.attachments &&
+        [
-          req.body.attachments.map((a) => {
+          ...((req.body.attachments &&
+            req.body.attachments.map((a) => {
+              return {
+                path: a,
+              };
+            })) ||
+            []),
+          ...downloadedMedia.map((a) => {
             return {
               path: a,
             };
-          })) ||
+          }),
-        null,
+        ] || null,
       html: req.body.html,
       ses: {
         // optional extra arguments for SendRawEmail
@@ -65,71 +80,10 @@ exports.sendEmail = async (req, res) => {
       }
     }
   );
-
-  // const inlinedCssHtml = await inlineCssTool(req.body.html, {
-  //   url: "https://imex.online",
-  // });
-
-  // console.log("inlinedCssHtml", inlinedCssHtml);
-
-  // Create the promise and SES service object
-
-  // const request = mailjet.post("send", { version: "v3.1" }).request({
-  //   Messages: [
-  //     {
-  //       From: {
-  //         Email: req.body.from.address,
-  //         Name: req.body.from.name,
-  //       },
-  //       To:
-  //         req.body.to &&
-  //         req.body.to.map((i) => {
-  //           return { Email: i };
-  //         }),
-  //       CC:
-  //         req.body.cc &&
-  //         req.body.cc.map((i) => {
-  //           return { Email: i };
-  //         }),
-  //       ReplyTo: {
-  //         Email: req.body.ReplyTo.Email,
-  //         Name: req.body.ReplyTo.Name,
-  //       },
-  //       Subject: req.body.subject,
-  //       // TextPart:
-  //       //   "Dear passenger 1, welcome to Mailjet! May the delivery force be with you!",
-  //       HTMLPart: req.body.html,
-  //       Attachments: req.body.attachments || null,
-  //     },
-  //   ],
-  // });
-
-  // request
-  //   .then((result) => {
-  //     console.log("[EMAIL] Email sent: " + result);
-  //     res.json({ success: true, response: result });
-  //   })
-  //   .catch((err) => {
-  //     console.log("[EMAIL] Email send failed. ", err);
-  //     res.json({ success: false, error: err.message });
-  //   });
-
-  // transporter.sendMail(
-  //   {
-  //     ...req.body,
-  //     from: {
-  //       name: req.body.from.name ,
-  //       address: "noreply@bodyshop.app",
-  //     },
-  //   },
-  //   function (error, info) {
-  //     if (error) {
-  //       console.log("[EMAIL] Email send failed. ", error);
-  //       res.json({ success: false, error: error });
-  //     } else {
-  //       console.log("[EMAIL] Email sent: " + info.response);
-  //       res.json({ success: true, response: info.response });
-  //     }
-  //   }
-  // );
 };
+
+async function getImage(imageUrl) {
+  let image = await axios.get(imageUrl, { responseType: "arraybuffer" });
+  let raw = Buffer.from(image.data).toString("base64");
+  return "data:" + image.headers["content-type"] + ";base64," + raw;
+}