admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add custom document signing.

Browse Source
This commit is contained in:
Patrick Fic
2026-03-30 11:41:24 -07:00
parent 220b1c7968
commit 794f64dfba
10 changed files with 284 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
client/src/components/esignature-custom-document/esignature-custom-document.component.jsx Normal file
View File

@@ -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);

14
client/src/components/esignature-modal/esignature-modal.container.jsx
View File

@@ -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);
}}
/>
) : (

4
client/src/components/print-center-item/print-center-item.component.jsx
View File

@@ -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 {

2
client/src/components/print-center-jobs/print-center-jobs.component.jsx
View File

@@ -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>

2
client/src/pages/jobs-detail/jobs-detail.page.component.jsx
View File

@@ -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

7
client/src/translations/en_us/common.json
View File

@@ -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": {

7
client/src/translations/es/common.json
View File

@@ -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": {

7
client/src/translations/fr/common.json
View File

@@ -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": {

231
server/esign/esign-new.js
View File

@@ -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 { pdf: fileBuffer, esigData } = await RenderTemplate({ client, req })
const fileBlob = new Blob([fileBuffer], { type: "application/pdf" });
//Get the Job data.
const { jobs_by_pk: jobData } = await client.request(QUERY_JOB_FOR_SIGNATURE, { jobid: req.body.jobid });
const recipients = [{
email: "patrick@imexsystems.ca",//jobData.ownr_ea,
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 { bodyshop } = req.body;
const { pdf: fileBuffer, esigData } = await RenderTemplate({ client, req });
const result = await createEsignDocumentFromPdf({
client,
req,
bodyshop,
pdfBuffer: fileBuffer,
esigData
});
const documentResult = await documenso.documents.get({
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 });
res.json(result);
}
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

10
server/routes/esignRoutes.js
View File

@@ -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);