IO-557 Send documents in emails.

2021-06-07 12:27:14 -07:00
parent 784c58e295
commit 979ba1c142
22 changed files with 218 additions and 164 deletions
--- a/client/src/components/email-documents/email-documents.component.jsx
+++ b/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>
+  );
+}
--- a/client/src/components/email-overlay/email-overlay.component.jsx
+++ b/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")}>
-        <Form.Item
-          name="fileList"
-          valuePropName="fileList"
-          getValueFromEvent={(e) => {
-            console.log("Upload event:", e);
-            if (Array.isArray(e)) {
-              return e;
-            }
-            return e && e.fileList;
-          }}
-        >
-          <Upload.Dragger
-            beforeUpload={Upload.LIST_IGNORE}
-            multiple
-            listType="picture-card"
+      <Tabs>
+        <Tabs.TabPane tab={t("emails.labels.documents")} key="documents">
+          <EmailDocumentsComponent selectedMediaState={selectedMediaState} />
+        </Tabs.TabPane>
+        <Tabs.TabPane tab={t("emails.labels.attachments")} key="attachments">
+          <Form.Item
+            name="fileList"
+            valuePropName="fileList"
+            getValueFromEvent={(e) => {
+              if (Array.isArray(e)) {
+                return e;
+              }
+              return e && e.fileList;
+            }}
          >
-            <>
-              <p className="ant-upload-drag-icon">
-                <UploadOutlined />
-              </p>
-              <p className="ant-upload-text">
-                Click or drag files to this area to upload.
-              </p>
-            </>
-          </Upload.Dragger>
-        </Form.Item>
-      </Card>
+            <Upload.Dragger
+              beforeUpload={Upload.LIST_IGNORE}
+              multiple
+              listType="picture-card"
+            >
+              <>
+                <p className="ant-upload-drag-icon">
+                  <UploadOutlined />
+                </p>
+                <p className="ant-upload-text">
+                  Click or drag files to this area to upload.
+                </p>
+              </>
+            </Upload.Dragger>
+          </Form.Item>
+        </Tabs.TabPane>
+      </Tabs>
    </div>
  );
 }
--- a/client/src/components/email-overlay/email-overlay.container.jsx
+++ b/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) => {
-      const t = {
-        ContentType: f.type,
-        Filename: f.name,
-        Base64Content: (await toBase64(f.originFileObj)).split(",")[1],
-      };
-      attachments.push(t);
-    });
+    if (values.fileList)
+      await asyncForEach(values.fileList, async (f) => {
+        const t = {
+          ContentType: f.type,
+          Filename: f.name,
+          Base64Content: (await toBase64(f.originFileObj)).split(",")[1],
+        };
+        attachments.push(t);
+      });

    setSending(true);
    try {
@@ -74,9 +77,12 @@ export function EmailOverlayContainer({
        ...defaultEmailFrom,
        ...values,
        html: rawHtml,
-        attachments: await Promise.all(
-          values.fileList.map(async (f) => await toBase64(f.originFileObj))
-        ),
+        attachments:
+          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>
  );
--- a/client/src/components/job-at-change/schedule-event.component.jsx
+++ b/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}
--- a/client/src/components/job-payments/job-payments.component.jsx
+++ b/client/src/components/job-payments/job-payments.component.jsx
@@ -123,6 +123,7 @@ export function JobPayments({
          messageObject={{
            to: job.ownr_ea,
          }}
+          id={job.id}
        />
      ),
    },
--- a/client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.csi.component.jsx
+++ b/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,
--- a/client/src/components/jobs-documents-gallery/jobs-documents-gallery.external.component.jsx
+++ b/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: `${
-            process.env.REACT_APP_CLOUDINARY_ENDPOINT
-          }/${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}`,
+          src: GenerateSrcUrl(value),
+          thumbnail: GenerateThumbUrl(value),
          thumbnailHeight: 225,
          thumbnailWidth: 225,
          isSelected: false,
--- a/client/src/components/parts-order-list-table/parts-order-list-table.component.jsx
+++ b/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>
  );
--- a/client/src/components/parts-order-modal/parts-order-modal.container.jsx
+++ b/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(
--- a/client/src/components/payment-modal/payment-modal.container.jsx
+++ b/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 {
--- a/client/src/components/payments-list-paginated/payment-list-paginated.component.jsx
+++ b/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>
      ),
--- a/client/src/components/print-center-item/print-center-item.component.jsx
+++ b/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
            );
          }}
        />
--- a/client/src/components/print-wrapper/print-wrapper.component.jsx
+++ b/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);
  };

--- a/client/src/components/report-center-modal/report-center-modal.component.jsx
+++ b/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 [
-    callVendorQuery,
-    { data: vendorData, called: vendorCalled },
-  ] = useLazyQuery(QUERY_ALL_VENDORS, {
-    skip: !(
-      visible &&
-      Templates[form.getFieldValue("key")] &&
-      Templates[form.getFieldValue("key")].idtype
-    ),
-  });
+  const [callVendorQuery, { data: vendorData, called: vendorCalled }] =
+    useLazyQuery(QUERY_ALL_VENDORS, {
+      skip: !(
+        visible &&
+        Templates[form.getFieldValue("key")] &&
+        Templates[form.getFieldValue("key")].idtype
+      ),
+    });

-  const [
-    callEmployeeQuery,
-    { data: employeeData, called: employeeCalled },
-  ] = useLazyQuery(QUERY_ACTIVE_EMPLOYEES, {
-    skip: !(
-      visible &&
-      Templates[form.getFieldValue("key")] &&
-      Templates[form.getFieldValue("key")].idtype
-    ),
-  });
+  const [callEmployeeQuery, { data: employeeData, called: employeeCalled }] =
+    useLazyQuery(QUERY_ACTIVE_EMPLOYEES, {
+      skip: !(
+        visible &&
+        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);
  };
--- a/client/src/components/schedule-job-modal/schedule-job-modal.container.jsx
+++ b/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,