diff --git a/apps/OpenSignServer/cloud/parsefunction/pdf/PDF.min.js b/apps/OpenSignServer/cloud/parsefunction/pdf/PDF.min.js index c646e9c1a..a70ea21c0 100644 --- a/apps/OpenSignServer/cloud/parsefunction/pdf/PDF.min.js +++ b/apps/OpenSignServer/cloud/parsefunction/pdf/PDF.min.js @@ -92,55 +92,62 @@ async function sendCompletedMail(e) { }, }); } -async function sendDoctoWebhook(t, e) { - t.data.ExtUserPtr?.Webhook && - ((e = { - File: e || '', - Name: t?.data?.Name, - Note: t?.data?.Note || '', - Description: t?.data?.Description || '', - Signers: t?.data?.Signers?.map(e => ({ Name: e.Name, Email: e.Email, Phone: e.Phone })) || [ +async function sendDoctoWebhook(t, e, a, s) { + let r = []; + (r = s + ? { Name: s?.Name, Email: s?.Email, Phone: s?.Phone } + : t?.data?.Signers?.map(e => ({ Name: e.Name, Email: e.Email, Phone: e.Phone })) || [ { Name: t?.data?.ExtUserPtr?.Name, Email: t?.data?.ExtUserPtr?.Email, Phone: t?.data?.ExtUserPtr?.Phone, }, - ], - Event: 'Completed', - CompletedAt: new Date(), - CreatedAt: t?.data?.createdAt, - }), - await axios - .post(t?.data?.ExtUserPtr?.Webhook, e, { headers: { 'Content-Type': 'application/json' } }) - .then(e => { - try { - var a = new Parse.Object('contracts_Webhook'); - a.set('Log', e?.status), - a.set('UserId', { - __type: 'Pointer', - className: '_User', - objectId: t.data.ExtUserPtr.UserId.objectId, - }), - a.save(null, { useMasterKey: !0 }); - } catch (e) { - console.log('err save in contracts_Webhook', e); - } - }) - .catch(e => { - console.log('Err send data to webhook', e); - try { - var a = new Parse.Object('contracts_Webhook'); - a.set('Log', e?.status), - a.set('UserId', { - __type: 'Pointer', - className: '_User', - objectId: t.data.ExtUserPtr.UserId.objectId, - }), - a.save(null, { useMasterKey: !0 }); - } catch (e) { - console.log('err save in contracts_Webhook', e); - } - })); + ]), + t.data.ExtUserPtr?.Webhook && + ((s = + 'Signed' === a + ? { Signer: r, SignedAt: new Date() } + : { Signers: r, CompletedAt: new Date() }), + (a = { + Event: a, + File: e || '', + Name: t?.data?.Name, + Note: t?.data?.Note || '', + Description: t?.data?.Description || '', + ...s, + CreatedAt: t?.data?.createdAt, + }), + await axios + .post(t?.data?.ExtUserPtr?.Webhook, a, { headers: { 'Content-Type': 'application/json' } }) + .then(e => { + try { + var a = new Parse.Object('contracts_Webhook'); + a.set('Log', e?.status), + a.set('UserId', { + __type: 'Pointer', + className: '_User', + objectId: t.data.ExtUserPtr.UserId.objectId, + }), + a.save(null, { useMasterKey: !0 }); + } catch (e) { + console.log('err save in contracts_Webhook', e); + } + }) + .catch(e => { + console.log('Err send data to webhook', e); + try { + var a = new Parse.Object('contracts_Webhook'); + a.set('Log', e?.status), + a.set('UserId', { + __type: 'Pointer', + className: '_User', + objectId: t.data.ExtUserPtr.UserId.objectId, + }), + a.save(null, { useMasterKey: !0 }); + } catch (e) { + console.log('err save in contracts_Webhook', e); + } + })); } async function PDF(i, o) { try { @@ -221,8 +228,8 @@ async function PDF(i, o) { ); var P, v, - x = `exported_file_${Math.floor(5e3 * Math.random())}.pdf`, - b = './exports/' + x, + b = `exported_file_${Math.floor(5e3 * Math.random())}.pdf`, + x = './exports/' + b, U = (t ? ((P = n.data.Signers?.map(e => e.Name + ' <' + e.Email + '>')), @@ -241,9 +248,9 @@ async function PDF(i, o) { signatureLength: 1e4, })), (v = await new SignPDF(e, u).signPDF()), - fs.writeFileSync(b, v)) - : fs.writeFileSync(b, e), - await uploadFile(x, b)); + fs.writeFileSync(x, v)) + : fs.writeFileSync(x, e), + await uploadFile(b, x)); if (U && U.imageUrl) { const o = await updateDoc( i.params.docId, @@ -260,17 +267,18 @@ async function PDF(i, o) { pdfName: n.data.Name, receiver: g, }), + sendDoctoWebhook(n, U.imageUrl, 'Signed', s?.data.results?.[0]), o && o.isCompleted && (sendCompletedMail({ url: U.imageUrl, - sender: { Mail: n.data.ExtUserPtr.Email, Name: 'Open sign' }, + sender: { Mail: n.data.ExtUserPtr.Email, Name: 'OpenSign™' }, pdfName: n.data.Name, receiver: n.data.ExtUserPtr.Email, }), - sendDoctoWebhook(n, U.imageUrl)), - fs.unlinkSync(b), - console.log('New Signed PDF created called: ' + b), + sendDoctoWebhook(n, U.imageUrl, 'Completed')), + fs.unlinkSync(x), + console.log('New Signed PDF created called: ' + x), 'success' === o.message ? { status: 'success', data: U.imageUrl } : { status: 'error', message: 'please provide required parameters!' } diff --git a/microfrontends/SignDocuments/src/Component/DebugUi.js b/microfrontends/SignDocuments/src/Component/DebugUi.js index 39237fd59..3423abd04 100644 --- a/microfrontends/SignDocuments/src/Component/DebugUi.js +++ b/microfrontends/SignDocuments/src/Component/DebugUi.js @@ -1,13 +1,14 @@ -import React, { useEffect, useState, useRef } from "react"; +import React, { useEffect, useState } from "react"; import RenderAllPdfPage from "./component/renderAllPdfPage"; import "../css/./signature.css"; -import { pdfNewWidthFun } from "../utils/Utils"; import "../css/AddUser.css"; import Title from "./component/Title"; import ModalUi from "../premitives/ModalUi"; import RenderDebugPdf from "./component/RenderDebugPdf"; import { pdfjs } from "react-pdf"; import Alert from "../premitives/Alert"; +import HandleError from "./component/HandleError"; +import { useWindowSize } from "../hook/useWindowSize"; function processDimensions(x, y, width, height) { if (width < 0) { @@ -28,15 +29,11 @@ function processDimensions(x, y, width, height) { }; } const DebugUi = () => { - const divRef = useRef(null); - const isMobile = window.innerWidth < 767; + const { width } = useWindowSize(); const [pdf, setPdf] = useState(""); const [isModal, setIsModal] = useState(true); const [allPages, setAllPages] = useState(null); const [pageNumber, setPageNumber] = useState(1); - const [pdfNewWidth, setPdfNewWidth] = useState(); - const [containerWH, setContainerWH] = useState(); - const [pdfOriginalWidth, setPdfOriginalWidth] = useState(); const [pdfLoadFail, setPdfLoadFail] = useState({ status: false, type: "load" @@ -51,21 +48,10 @@ const DebugUi = () => { base64: "" }); const [hoverCoordinates, setHoverCoordinates] = useState({ x: 0, y: 0 }); - const [drawing, setDrawing] = useState(false); const [pdfDimension, setPdfDimension] = useState({ width: 0, height: 0 }); const [annotations, setAnnotations] = useState([]); const [newAnnotation, setNewAnnotation] = useState([]); const [copied, setCopied] = useState(false); - useEffect(() => { - if (divRef.current) { - const pdfWidth = pdfNewWidthFun(divRef); - setPdfNewWidth(pdfWidth); - setContainerWH({ - width: divRef.current.offsetWidth, - height: divRef.current.offsetHeight - }); - } - }, [divRef.current]); useEffect(() => { if (pdf && pdf.name) { @@ -233,207 +219,209 @@ const DebugUi = () => {
{copied && Copied} - {!isModal && ( - <div className="signatureContainer" ref={divRef}> - {/* this component used to render all pdf pages in left side */} - <RenderAllPdfPage - signPdfUrl={pdf} - allPages={allPages} - setAllPages={setAllPages} - setPageNumber={setPageNumber} - pageNumber={pageNumber} - /> - {/* pdf render view */} - <div - style={{ - marginLeft: !isMobile && pdfOriginalWidth > 500 && "20px", - marginRight: !isMobile && pdfOriginalWidth > 500 && "20px" - }} - > - <div data-tut="reactourThird"> - {containerWH && ( - <RenderDebugPdf - pdfUrl={pdf} - pageDetails={pageDetails} - pageNumber={pageNumber} - pdfOriginalWidth={pdfOriginalWidth} - pdfNewWidth={pdfNewWidth} - setPdfLoadFail={setPdfLoadFail} - pdfLoadFail={pdfLoadFail} - handlePageLoadSuccess={handlePageLoadSuccess} - handleMouseMove={handleMouseMove} - handleMouseUp={handleMouseUp} - handleMouseDown={handleMouseDown} - hoverCoordinates={hoverCoordinates} - annotations={annotationsToDraw} - pdfDimension={pdfDimension} - handleMouseMoveDiv={handleMouseMoveDiv} - /> - )} - </div> - </div> - <div style={{ backgroundColor: "white", width: 220 }}> - <div - style={{ - fontSize: 18, - fontWeight: 500, - padding: "10px 12px", - borderBottom: "1px solid grey" - }} - > - PDF details - </div> - <div style={{ fontSize: 14, padding: "5px 12px" }}> - Name: {pdfDetails?.name} - </div> - <div style={{ fontSize: 14, padding: "5px 12px" }}> - Pdf type: {pdfDetails?.pdftype} - </div> - <div style={{ fontSize: 14, padding: "5px 12px" }}> - Total Pages: {pdfDetails?.totalPages} - </div> - <div style={{ fontSize: 14, padding: "5px 12px" }}> - Current Page: {pdfDetails?.currentPage} + {width < 800 ? ( + <HandleError handleError={"Debug PDF only availble for PC"} /> + ) : ( + <> + {!isModal && ( + <div className="signatureContainer"> + {/* this component used to render all pdf pages in left side */} + <RenderAllPdfPage + signPdfUrl={pdf} + allPages={allPages} + setAllPages={setAllPages} + setPageNumber={setPageNumber} + pageNumber={pageNumber} + /> + {/* pdf render view */} + <div> + <div data-tut="reactourThird"> + <RenderDebugPdf + pdfUrl={pdf} + pageDetails={pageDetails} + pageNumber={pageNumber} + setPdfLoadFail={setPdfLoadFail} + pdfLoadFail={pdfLoadFail} + handlePageLoadSuccess={handlePageLoadSuccess} + handleMouseMove={handleMouseMove} + handleMouseUp={handleMouseUp} + handleMouseDown={handleMouseDown} + hoverCoordinates={hoverCoordinates} + annotations={annotationsToDraw} + pdfDimension={pdfDimension} + handleMouseMoveDiv={handleMouseMoveDiv} + /> + </div> + </div> + <div style={{ backgroundColor: "white", width: 220 }}> + <div + style={{ + fontSize: 18, + fontWeight: 500, + padding: "10px 12px", + borderBottom: "1px solid grey" + }} + > + PDF details + </div> + <div style={{ fontSize: 14, padding: "5px 12px" }}> + Name: {pdfDetails?.name} + </div> + <div style={{ fontSize: 14, padding: "5px 12px" }}> + Pdf type: {pdfDetails?.pdftype} + </div> + <div style={{ fontSize: 14, padding: "5px 12px" }}> + Total Pages: {pdfDetails?.totalPages} + </div> + <div style={{ fontSize: 14, padding: "5px 12px" }}> + Current Page: {pdfDetails?.currentPage} + </div> + <div style={{ fontSize: 14, padding: "5px 12px" }}> + Base64 : {pdfDetails?.base64.slice(0, 10)}... + <span + style={{ + borderRadius: 4, + padding: "3px 5px", + border: "1px solid gray", + fontSize: 12, + margin: 2, + cursor: "pointer" + }} + onClick={() => copytoclipboard(pdfDetails?.base64)} + > + <i className="fa-solid fa-copy"></i> + </span> + </div> + <div + style={{ + fontSize: 18, + fontWeight: 500, + padding: "10px 12px", + borderBottom: "1px solid grey" + }} + > + Last click + </div> + <div style={{ fontSize: 14, padding: "5px 12px" }}> + x co-ordinate: {pdfDetails?.x} + </div> + <div style={{ fontSize: 14, padding: "5px 12px" }}> + y co-ordinate: {pdfDetails?.y} + </div> + + <div + style={{ + fontSize: 18, + fontWeight: 500, + padding: "10px 12px", + borderBottom: "1px solid grey", + borderTop: "1px solid grey" + }} + > + Annotation + </div> + <ul + style={{ + listStyle: "none", + padding: 10, + height: 500, + overflowY: "auto", + scrollbarWidth: 5 + }} + > + {annotations.map((coord, index) => ( + <li key={index}> + <span style={{ fontSize: 13, fontWeight: 500 }}>{`Box ${ + index + 1 + }:`}</span> + <code + style={{ + fontSize: 12, + color: "black", + cursor: "pointer" + }} + > + {` ["page":${coord?.page}, "x": ${coord.x}, "y": ${coord.y}, "w": ${coord.width}, "h": ${coord.height}]`} + </code> + <div> + <span + style={{ + borderRadius: 4, + padding: "3px 5px", + border: "1px solid gray", + fontSize: 12, + margin: 2, + cursor: "pointer" + }} + onClick={() => + copytoclipboard( + `"page":${coord?.page}, "x": ${coord.x}, "y": ${coord.y}, "w": ${coord.width}, "h": ${coord.height}` + ) + } + > + <i className="fa-solid fa-copy"></i> + </span> + <span + style={{ + borderRadius: 4, + padding: "3px 5px", + border: "1px solid gray", + fontSize: 12, + margin: 2, + cursor: "pointer" + }} + onClick={() => handleDelete(coord.key)} + > + <i className="fa-solid fa-trash-can"></i> + </span> + </div> + </li> + ))} + </ul> + </div> </div> - <div style={{ fontSize: 14, padding: "5px 12px" }}> - Base64 : {pdfDetails?.base64.slice(0, 10)}... - <span + )} + <ModalUi title={"Select PDF"} isOpen={isModal}> + <form onSubmit={handleSubmit} style={{ margin: "10px" }}> + <input + type="file" + onChange={(e) => handleFileChange(e.target.files)} style={{ - borderRadius: 4, - padding: "3px 5px", - border: "1px solid gray", - fontSize: 12, - margin: 2, - cursor: "pointer" + width: "100%", + border: "1px solid grey", + borderRadius: "4px", + padding: "5px", + fontSize: 12 }} - onClick={() => copytoclipboard(pdfDetails?.base64)} + accept=".pdf" + required + /> + <div + style={{ borderTop: "1px solid grey", margin: "10px 0" }} + ></div> + <button + style={{ + background: "#32a3ac", + borderRadius: "2px", + boxShadow: + "0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18)", + border: "none", + textTransform: "uppercase", + fontSize: "13px", + fontWeight: "600", + padding: "0.375rem 0.75rem", + textAlign: "center", + color: "#ffffff", + outline: "none" + }} + type="submit" > - <i className="fa-solid fa-copy"></i> - </span> - </div> - <div - style={{ - fontSize: 18, - fontWeight: 500, - padding: "10px 12px", - borderBottom: "1px solid grey" - }} - > - Last click - </div> - <div style={{ fontSize: 14, padding: "5px 12px" }}> - x co-ordinate: {pdfDetails?.x} - </div> - <div style={{ fontSize: 14, padding: "5px 12px" }}> - y co-ordinate: {pdfDetails?.y} - </div> - - <div - style={{ - fontSize: 18, - fontWeight: 500, - padding: "10px 12px", - borderBottom: "1px solid grey", - borderTop: "1px solid grey" - }} - > - Annotation - </div> - <ul - style={{ - listStyle: "none", - padding: 10, - height: 500, - overflowY: "auto", - scrollbarWidth: 5 - }} - > - {annotations.map((coord, index) => ( - <li key={index}> - <span style={{ fontSize: 13, fontWeight: 500 }}>{`Box ${ - index + 1 - }:`}</span> - <code - style={{ fontSize: 12, color: "black", cursor: "pointer" }} - > - {` ["page":${coord?.page}, "x": ${coord.x}, "y": ${coord.y}, "w": ${coord.width}, "h": ${coord.height}]`} - </code> - <div> - <span - style={{ - borderRadius: 4, - padding: "3px 5px", - border: "1px solid gray", - fontSize: 12, - margin: 2, - cursor: "pointer" - }} - onClick={() => - copytoclipboard( - `"page":${coord?.page}, "x": ${coord.x}, "y": ${coord.y}, "w": ${coord.width}, "h": ${coord.height}` - ) - } - > - <i className="fa-solid fa-copy"></i> - </span> - <span - style={{ - borderRadius: 4, - padding: "3px 5px", - border: "1px solid gray", - fontSize: 12, - margin: 2, - cursor: "pointer" - }} - onClick={() => handleDelete(coord.key)} - > - <i className="fa-solid fa-trash-can"></i> - </span> - </div> - </li> - ))} - </ul> - </div> - </div> + Submit + </button> + </form> + </ModalUi> + </> )} - - <ModalUi title={"Select PDF"} isOpen={isModal}> - <form onSubmit={handleSubmit} style={{ margin: "10px" }}> - <input - type="file" - onChange={(e) => handleFileChange(e.target.files)} - style={{ - width: "100%", - border: "1px solid grey", - borderRadius: "4px", - padding: "5px", - fontSize: 12 - }} - accept=".pdf" - required - /> - <div style={{ borderTop: "1px solid grey", margin: "10px 0" }}></div> - <button - style={{ - background: "#32a3ac", - borderRadius: "2px", - boxShadow: - "0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18)", - border: "none", - textTransform: "uppercase", - fontSize: "13px", - fontWeight: "600", - padding: "0.375rem 0.75rem", - textAlign: "center", - color: "#ffffff", - outline: "none" - }} - type="submit" - > - Submit - </button> - </form> - </ModalUi> </div> ); }; diff --git a/microfrontends/SignDocuments/src/hook/useWindowSize.js b/microfrontends/SignDocuments/src/hook/useWindowSize.js new file mode 100644 index 000000000..0c84d6f13 --- /dev/null +++ b/microfrontends/SignDocuments/src/hook/useWindowSize.js @@ -0,0 +1,25 @@ +import { useEffect, useState } from "react"; + +export function useWindowSize() { + const [size, setSize] = useState({ + width: 0, + height: 0 + }); + + const onResize = () => { + setSize({ + width: window.innerWidth, + height: window.innerHeight + }); + }; + + useEffect(() => { + onResize(); + window.addEventListener("resize", onResize); + return () => { + window.removeEventListener("resize", onResize); + }; + }, []); + + return size; +}