Add custom document signing.

client/src/components/esignature-custom-document/esignature-custom-document.component.jsx

@@ -0,0 +1,87 @@
+import { UploadOutlined } from "@ant-design/icons";
+import { Button, Upload } from "antd";
+import axios from "axios";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import { setModalContext } from "../../redux/modals/modals.actions";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  setEsignatureContext: (context) =>
+    dispatch(
+      setModalContext({
+        context,
+        modal: "esignature"
+      })
+    )
+});
+
+export function EsignatureCustomDocument({ bodyshop, jobId, setEsignatureContext }) {
+  const [loading, setLoading] = useState(false);
+  const notification = useNotification();
+  const { t } = useTranslation();
+
+  const uploadCustomDocument = async ({ file, onError, onSuccess }) => {
+    const formData = new FormData();
+    formData.append("document", file);
+    formData.append("jobid", jobId);
+    formData.append("bodyshop", JSON.stringify(bodyshop));
+
+    setLoading(true);
+
+    try {
+      const {
+        data: { token, documentId, envelopeId }
+      } = await axios.post("/esign/new-custom", formData, {
+        headers: {
+          "Content-Type": "multipart/form-data"
+        }
+      });
+
+      setEsignatureContext({ context: { token, documentId, envelopeId, jobid: jobId } });
+      onSuccess?.({ token, documentId, envelopeId });
+    } catch (error) {
+      notification.error({
+        title: t("esignature.errors.upload_title"),
+        description: error?.response?.data?.error || error?.response?.data?.message || error.message
+      });
+      onError?.(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Upload
+      accept="application/pdf,.pdf"
+      beforeUpload={(file) => {
+        if (file.type === "application/pdf" || file.name?.toLowerCase().endsWith(".pdf")) {
+          return true;
+        }
+
+        notification.error({
+          title: t("esignature.errors.upload_title"),
+          description: t("esignature.errors.pdf_only")
+        });
+        return Upload.LIST_IGNORE;
+      }}
+      customRequest={uploadCustomDocument}
+      maxCount={1}
+      showUploadList={false}
+      multiple={false}
+    >
+      <Button icon={<UploadOutlined />} loading={loading}>
+        {t("esignature.actions.upload_document")}
+      </Button>
+    </Upload>
+  );
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(EsignatureCustomDocument);

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

@@ -31,16 +31,15 @@ export function EsignatureModalContainer({ esignatureModal, toggleModalVisible,
       onOk={async () => {
         try {
           setDistributing(true);
-          const distResult = await axios.post("/esign/distribute", {
+          await axios.post("/esign/distribute", {
             documentId,
             envelopeId,
             jobid,
             bodyshopid: bodyshop.id
           });
-          console.log("Distribution result:", distResult);
+
           toggleModalVisible();
         } catch (error) {
-          console.error("Error distributing document:", error);
           notification.error({
             message: t("esignature.distribute_error"),
             description: error?.response?.data?.message || error.message
@@ -50,14 +49,13 @@ export function EsignatureModalContainer({ esignatureModal, toggleModalVisible,
       }}
       onCancel={async () => {
         try {
-          const cancelResult = await axios.post("/esign/delete", {
+          await axios.post("/esign/delete", {
             documentId,
             envelopeId
           });
-          console.log("Cancel result:", cancelResult);
+
           toggleModalVisible();
         } catch (error) {
-          console.error("Error cancelling document:", error);
           notification.error({
             message: t("esignature.cancel_error"),
             description: error?.response?.data?.message || error.message
@@ -67,7 +65,7 @@ export function EsignatureModalContainer({ esignatureModal, toggleModalVisible,
       okButtonProps={{ loading: distributing }}
       okText={t("esignature.actions.distribute")}
       destroyOnHidden
-      width={800}
+      width={"80%"}
     >
       <div style={{ height: "600px", width: "100%" }}>
         {token ? (
@@ -78,7 +76,7 @@ export function EsignatureModalContainer({ esignatureModal, toggleModalVisible,
             externalId={`${jobid}|${currentUser?.email}`}
             className="esignature-embed"
             onDocumentUpdated={(data) => {
-              console.log("Document updated:", data.documentId);
+              console.log("Document updated:", data);
             }}
           />
         ) : (

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

@@ -61,7 +61,7 @@ export function PrintCenterItemComponent({
     setLoading(true);
     try {
       const {
-        data: { token, documentId, evnelopeId }
+        data: { token, documentId, envelopeId }
       } = await axios.post("/esign/new", {
         name: item.key,
         jobid: id,
@@ -73,7 +73,7 @@ export function PrintCenterItemComponent({
         }
       });
 
-      setEsignatureContext({ context: { token, documentId, evnelopeId, jobid: id } });
+      setEsignatureContext({ context: { token, documentId, envelopeId, jobid: id } });
     } catch (error) {
       console.log(error);
     } finally {

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

@@ -9,6 +9,7 @@ import { selectPrintCenter } from "../../redux/modals/modals.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { TemplateList } from "../../utils/TemplateConstants";
 import Jobd3RdPartyModal from "../job-3rd-party-modal/job-3rd-party-modal.component";
+import EsignatureCustomDocument from "../esignature-custom-document/esignature-custom-document.component";
 import PrintCenterItem from "../print-center-item/print-center-item.component";
 import PrintCenterJobsLabels from "../print-center-jobs-labels/print-center-jobs-labels.component";
 import PrintCenterSpeedPrint from "../print-center-speed-print/print-center-speed-print.component";
@@ -94,6 +95,7 @@ export function PrintCenterJobsComponent({ printCenterModal, bodyshop, technicia
             extra={
               <Space wrap>
                 <PrintCenterJobsLabels jobId={jobId} />
+                <EsignatureCustomDocument jobId={jobId} />
                 <Jobd3RdPartyModal jobId={jobId} job={job} />
                 <Input.Search onChange={(e) => setSearch(e.target.value)} value={search} enterButton />
               </Space>

client/src/pages/jobs-detail/jobs-detail.page.component.jsx

@@ -20,6 +20,7 @@ import { FaHardHat, FaRegStickyNote, FaShieldAlt, FaTasks } from "react-icons/fa
 import { connect } from "react-redux";
 import { useLocation, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
+import EsignatureCustomDocument from "../../components/esignature-custom-document/esignature-custom-document.component.jsx";
 import FormFieldsChanged from "../../components/form-fields-changed-alert/form-fields-changed-alert.component";
 import JobAuditTrail from "../../components/job-audit-trail/job-audit-trail.component";
 import JobsLinesContainer from "../../components/job-detail-lines/job-lines.container";
@@ -285,6 +286,7 @@ export function JobsDetailPage({
       >
         {t("general.labels.refresh")}
       </Button>
+      <EsignatureCustomDocument jobId={job.id} />
       <JobsChangeStatus job={job} />
       <JobSyncButton job={job} />
       <Button

client/src/translations/en_us/common.json

@@ -1241,7 +1241,12 @@
     },
     "esignature": {
       "actions": {
-        "distribute": "Distribute"
+        "distribute": "Distribute",
+        "upload_document": "Upload Document for E-Sign"
+      },
+      "errors": {
+        "pdf_only": "Only PDF documents can be uploaded for e-signature.",
+        "upload_title": "Unable to prepare document for e-signature"
       }
     },
     "eula": {

client/src/translations/es/common.json

@@ -1241,7 +1241,12 @@
     },
     "esignature": {
       "actions": {
-        "distribute": ""
+        "distribute": "",
+        "upload_document": "Upload Document for E-Sign"
+      },
+      "errors": {
+        "pdf_only": "Only PDF documents can be uploaded for e-signature.",
+        "upload_title": "Unable to prepare document for e-signature"
       }
     },
     "eula": {

client/src/translations/fr/common.json

@@ -1241,7 +1241,12 @@
     },
     "esignature": {
       "actions": {
-        "distribute": ""
+        "distribute": "",
+        "upload_document": "Upload Document for E-Sign"
+      },
+      "errors": {
+        "pdf_only": "Only PDF documents can be uploaded for e-signature.",
+        "upload_title": "Unable to prepare document for e-signature"
       }
     },
     "eula": {

server/esign/esign-new.js

@@ -11,6 +11,108 @@ const documenso = new Documenso({
 const JSR_SERVER = "https://reports.test.imex.online";
 const jsreport = require("@jsreport/nodejs-client");
 const { QUERY_JOB_FOR_SIGNATURE, INSERT_ESIGNATURE_DOCUMENT, DISTRIBUTE_ESIGNATURE_DOCUMENT, QUERY_ESIGNATURE_BY_EXTERNAL_ID, UPDATE_ESIGNATURE_DOCUMENT } = require("../graphql-client/queries");
+const _ = require("lodash");
+
+function parseJsonField(value, fallback = null) {
+    if (value === undefined || value === null) {
+        return fallback;
+    }
+
+    if (typeof value !== "string") {
+        return value;
+    }
+
+    try {
+        return JSON.parse(value);
+    } catch {
+        return fallback;
+    }
+}
+
+function getDefaultEsignData({ esigData, bodyshop, fileName }) {
+    const fallbackTitle = fileName || `Esign request from ${bodyshop.shopname}`;
+
+    return {
+        ...esigData,
+        title: esigData?.title || fallbackTitle,
+        subject: esigData?.subject || `Esign request from ${bodyshop.shopname}`,
+        message: esigData?.message || `Please review and sign the document from ${bodyshop.shopname}.`
+    };
+}
+
+async function createEsignDocumentFromPdf({ client, req, bodyshop, pdfBuffer, esigData, fileName }) {
+    const resolvedEsigData = getDefaultEsignData({ esigData, bodyshop, fileName });
+    const fileBlob = new Blob([pdfBuffer], { type: "application/pdf" });
+    const jobid = req.body.jobid;
+
+    const { jobs_by_pk: jobData } = await client.request(QUERY_JOB_FOR_SIGNATURE, { jobid });
+    const recipients = [{
+        email: "patrick@imexsystems.ca",
+        name: `${jobData.ownr_fn} ${jobData.ownr_ln}`,
+        role: "SIGNER",
+    }];
+
+    const createDocumentResponse = await documenso.documents.create({
+        payload: {
+            title: resolvedEsigData.title,
+            externalId: `${jobid}|${req.user?.email}`,
+            recipients,
+            meta: {
+                timezone: bodyshop.timezone,
+                dateFormat: "MM/dd/yyyy hh:mm a",
+                language: "en",
+                subject: resolvedEsigData.subject,
+                message: resolvedEsigData.message,
+            }
+        },
+        file: fileBlob
+    });
+
+    const documentResult = await documenso.documents.get({
+        documentId: createDocumentResponse.id,
+    });
+
+    if (resolvedEsigData?.fields && resolvedEsigData.fields.length > 0) {
+        try {
+            await documenso.envelopes.fields.createMany({
+                envelopeId: createDocumentResponse.envelopeId,
+                data: resolvedEsigData.fields.map(sigField => ({ ...sigField, recipientId: documentResult.recipients[0].id, }))
+            });
+        } catch (error) {
+            logger.log(`esig-new-fields-error`, "ERROR", "esig", "api", {
+                message: error.message, stack: error.stack,
+                body: req.body
+            });
+        }
+    }
+
+    const presignToken = await documenso.embedding.embeddingPresignCreateEmbeddingPresignToken({});
+
+    await client.request(INSERT_ESIGNATURE_DOCUMENT, {
+        audit: {
+            jobid,
+            bodyshopid: bodyshop.id,
+            operation: `Esignature document created. Subject: ${resolvedEsigData.subject || "No subject"}, Message: ${resolvedEsigData.message || "No message"}. Document ID: ${createDocumentResponse.id} Envlope ID: ${createDocumentResponse.envelopeId}`,
+            useremail: req.user?.email,
+            type: 'esig-create'
+        },
+        esig: {
+            jobid,
+            external_document_id: createDocumentResponse.id.toString(),
+            subject: resolvedEsigData.subject || "No subject",
+            message: resolvedEsigData.message || "No message",
+            title: resolvedEsigData.title || "No title",
+            status: "DRAFT",
+            recipients: recipients,
+        }
+    });
+
+    return {
+        token: presignToken.token,
+        documentId: createDocumentResponse.id,
+        envelopeId: createDocumentResponse.envelopeId
+    };
+}
 
 
 async function distributeDocument(req, res) {
@@ -22,7 +124,7 @@ async function distributeDocument(req, res) {
             documentId,
         });
 
-        const auditEntry = await client.request(DISTRIBUTE_ESIGNATURE_DOCUMENT, {
+        await client.request(DISTRIBUTE_ESIGNATURE_DOCUMENT, {
             external_document_id: documentId.toString(),
             esig_update: {
                 status: "SENT"
@@ -38,7 +140,7 @@ async function distributeDocument(req, res) {
 
         res.json({ success: true, distributeResult });
     } catch (error) {
-        console.error("Error distributing document:", error?.data);
+
         logger.log(`esig-distribute-error`, "ERROR", "esig", "api", {
             message: error.message, stack: error.stack,
             body: req.body
@@ -70,7 +172,7 @@ async function deleteDocument(req, res) {
         })
         res.json({ success: true, deleteResult });
     } catch (error) {
-        console.error("Error deleting document:", error?.data);
+
         logger.log(`esig-delete-error`, "ERROR", "esig", "api", {
             message: error.message, stack: error.stack,
             body: req.body
@@ -87,7 +189,7 @@ async function viewDocument(req, res) {
         });
         res.json({ success: true, document });
     } catch (error) {
-        console.error("Error viewing document:", error?.data);
+
         logger.log(`esig-view-error`, "ERROR", "esig", "api", {
             message: error.message, stack: error.stack,
             body: req.body
@@ -99,76 +201,17 @@ async function viewDocument(req, res) {
 async function newEsignDocument(req, res) {
     try {
         const client = req.userGraphQLClient;
-        const { bodyshop } = req.body
+        const { bodyshop } = req.body;
-        const { pdf: fileBuffer, esigData } = await RenderTemplate({ client, req })
+        const { pdf: fileBuffer, esigData } = await RenderTemplate({ client, req });
-        const fileBlob = new Blob([fileBuffer], { type: "application/pdf" });
+        const result = await createEsignDocumentFromPdf({
-
+            client,
-        //Get the Job data. 
+            req,
-        const { jobs_by_pk: jobData } = await client.request(QUERY_JOB_FOR_SIGNATURE, { jobid: req.body.jobid });
+            bodyshop,
-        const recipients = [{
+            pdfBuffer: fileBuffer,
-            email: "patrick@imexsystems.ca",//jobData.ownr_ea,
+            esigData
-            name: `${jobData.ownr_fn} ${jobData.ownr_ln}`,
-            role: "SIGNER",
-        }]
-        const createDocumentResponse = await documenso.documents.create({
-            payload: {
-                title: esigData?.title || `Esign request from ${bodyshop.shopname}`,
-                externalId: `${req.body.jobid}|${req.user?.email}`, //Have to pass the uploaded by later on. Limited to 255 chars. 
-                recipients,
-                meta: {
-                    timezone: bodyshop.timezone,
-                    dateFormat: "MM/dd/yyyy hh:mm a",
-                    language: "en",
-                    subject: esigData?.subject || `Esign request from ${bodyshop.shopname}`,
-                    message: esigData?.message || `Please review and sign the document from ${bodyshop.shopname}.`,
-
-                }
-            },
-            file: fileBlob
         });
 
-        const documentResult = await documenso.documents.get({
+        res.json(result);
-            documentId: createDocumentResponse.id,
-        });
-
-        if (esigData?.fields && esigData.fields.length > 0) {
-            try {
-                await documenso.envelopes.fields.createMany({
-                    envelopeId: createDocumentResponse.envelopeId,
-                    data: esigData.fields.map(sigField => ({ ...sigField, recipientId: documentResult.recipients[0].id, }))
-
-                });
-            } catch (error) {
-                logger.log(`esig-new-fields-error`, "ERROR", "esig", "api", {
-                    message: error.message, stack: error.stack,
-                    body: req.body
-                });
-            }
-        }
-
-        const presignToken = await documenso.embedding.embeddingPresignCreateEmbeddingPresignToken({})
-
-        const auditEntry = await client.request(INSERT_ESIGNATURE_DOCUMENT, {
-            audit: {
-                jobid: req.body.jobid,
-                bodyshopid: bodyshop.id,
-                operation: `Esignature document created. Subject: ${esigData?.subject || "No subject"}, Message: ${esigData?.message || "No message"}. Document ID: ${createDocumentResponse.id} Envlope ID: ${createDocumentResponse.envelopeId}`,
-                useremail: req.user?.email,
-                type: 'esig-create'
-            },
-            esig: {
-                jobid: req.body.jobid,
-                external_document_id: createDocumentResponse.id.toString(),
-                //envelope_id: createDocumentResponse.envelopeId,
-                subject: esigData?.subject || "No subject",
-                message: esigData?.message || "No message",
-                title: esigData?.title || "No title",
-                status: "DRAFT",
-                recipients: recipients,
-            }
-        })
-
-        res.json({ token: presignToken.token, documentId: createDocumentResponse.id, envelopeId: createDocumentResponse.envelopeId });
     }
     catch (error) {
         logger.log(`esig-new-error`, "ERROR", "esig", "api", {
@@ -179,6 +222,43 @@ async function newEsignDocument(req, res) {
     }
 }
 
+async function newCustomEsignDocument(req, res) {
+    try {
+        const client = req.userGraphQLClient;
+        const bodyshop = parseJsonField(req.body.bodyshop, req.body.bodyshop);
+        const esigData = parseJsonField(req.body.esigData, {});
+        const uploadedDocument = req.file;
+
+        if (!uploadedDocument?.buffer) {
+            return res.status(400).json({ error: "A PDF document is required." });
+        }
+
+        if (uploadedDocument.mimetype !== "application/pdf") {
+            return res.status(400).json({ error: "Only PDF documents can be used for e-signature." });
+        }
+
+        req.body.bodyshop = bodyshop;
+
+        const fileName = uploadedDocument.originalname?.replace(/\.[^.]+$/, "") || undefined;
+        const result = await createEsignDocumentFromPdf({
+            client,
+            req,
+            bodyshop,
+            pdfBuffer: uploadedDocument.buffer,
+            esigData,
+            fileName
+        });
+
+        res.json(result);
+    }
+    catch (error) {
+        logger.log(`esig-new-custom-error`, "ERROR", "esig", "api", {
+            message: error.message, stack: error.stack,
+            body: _.omit(req.body, ["bodyshop"]) // bodyshop can be large, so we omit it from the logs
+        });
+        res.status(500).json({ error: "An error occurred while creating the custom e-sign document.", message: error.message });
+    }
+}
 
 async function RenderTemplate({ req }) {
     //TODO Refactor to pull
@@ -303,7 +383,11 @@ const fetchContextData = async ({ templateObject, jsrAuth, req, }) => {
     try {
         parsedEsigData = esigData ? JSON.parse(esigData) : null;
     } catch (error) {
-        console.log("Error parsing esig data", error);
+        logger.log(`esig-data-parse-error`, "ERROR", "esig", "api", {
+            message: error.message, stack: error.stack,
+            esigData,
+            body: req.body
+        });
         parsedEsigData = {}
     }
 
@@ -320,6 +404,7 @@ const fetchContextData = async ({ templateObject, jsrAuth, req, }) => {
 
 module.exports = {
     newEsignDocument,
+    newCustomEsignDocument,
     distributeDocument,
     deleteDocument,
     viewDocument

server/routes/esignRoutes.js

@@ -1,14 +1,22 @@
 const express = require("express");
 const router = express.Router();
+const multer = require("multer");
 
 const validateFirebaseIdTokenMiddleware = require("../middleware/validateFirebaseIdTokenMiddleware");
 const withUserGraphQLClientMiddleware = require("../middleware/withUserGraphQLClientMiddleware");
-const { newEsignDocument, distributeDocument, viewDocument, deleteDocument } = require("../esign/esign-new");
+const { newEsignDocument, newCustomEsignDocument, distributeDocument, viewDocument, deleteDocument } = require("../esign/esign-new");
 const { esignWebhook } = require("../esign/webhook");
 
+const upload = multer({
+	limits: {
+		fileSize: 20 * 1024 * 1024
+	}
+});
+
 //router.use(validateFirebaseIdTokenMiddleware);
 
 router.post("/new", validateFirebaseIdTokenMiddleware, withUserGraphQLClientMiddleware, newEsignDocument);
+router.post("/new-custom", validateFirebaseIdTokenMiddleware, withUserGraphQLClientMiddleware, upload.single("document"), newCustomEsignDocument);
 router.post("/distribute", validateFirebaseIdTokenMiddleware, withUserGraphQLClientMiddleware, distributeDocument);
 router.post("/delete", validateFirebaseIdTokenMiddleware, withUserGraphQLClientMiddleware, deleteDocument);
 router.post("/view", validateFirebaseIdTokenMiddleware, withUserGraphQLClientMiddleware, viewDocument);