From 25c50d53873b8faf117f2dc3e1a958ed355ae0bf Mon Sep 17 00:00:00 2001 From: prafull-opensignlabs Date: Mon, 27 Nov 2023 12:48:20 +0530 Subject: [PATCH 001/111] change subscipiton urls --- apps/OpenSign/src/json/plansArr.json | 2 +- apps/OpenSign/src/routes/PlanSubscriptions.js | 7 ++++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/apps/OpenSign/src/json/plansArr.json b/apps/OpenSign/src/json/plansArr.json index 4a5d51837..d4ae65baa 100644 --- a/apps/OpenSign/src/json/plansArr.json +++ b/apps/OpenSign/src/json/plansArr.json @@ -52,7 +52,7 @@ "subtitle": "Customization available Priority support.", "btnText": "Contact us", "url": "https://www.opensignlabs.com/contact-us", - "target": "_self", + "target": "_blank", "benefits": [ "All features", "Custom domain", diff --git a/apps/OpenSign/src/routes/PlanSubscriptions.js b/apps/OpenSign/src/routes/PlanSubscriptions.js index 6a3851f1f..00ad2fa62 100644 --- a/apps/OpenSign/src/routes/PlanSubscriptions.js +++ b/apps/OpenSign/src/routes/PlanSubscriptions.js @@ -136,8 +136,13 @@ const PlanSubscriptions = () => {

{item.subtitle}

+ From 5ce50db0016b33d6cd8f77bb7a041bb6ef868e27 Mon Sep 17 00:00:00 2001 From: prafull-opensignlabs Date: Tue, 28 Nov 2023 10:14:41 +0530 Subject: [PATCH 002/111] add dropbox in file upload field --- .../src/components/fields/DropboxChoose.js | 59 +++++++++++++++++++ .../src/components/fields/FileUpload.js | 53 ++++++++++++++++- apps/OpenSign/src/hook/useScript.js | 17 ++++++ apps/OpenSign/src/json/FormJson.js | 2 +- 4 files changed, 129 insertions(+), 2 deletions(-) create mode 100644 apps/OpenSign/src/components/fields/DropboxChoose.js diff --git a/apps/OpenSign/src/components/fields/DropboxChoose.js b/apps/OpenSign/src/components/fields/DropboxChoose.js new file mode 100644 index 000000000..0eb00adcf --- /dev/null +++ b/apps/OpenSign/src/components/fields/DropboxChoose.js @@ -0,0 +1,59 @@ +import React, { useCallback, useMemo } from "react"; +import { useDropScript } from "../../hook/useScript"; + +const DROPBOX_APP_KEY = process.env.REACT_APP_DROPBOX_API_KEY; // App key +const DROPBOX_SDK_URL = "https://www.dropbox.com/static/api/2/dropins.js"; +const DROPBOX_SCRIPT_ID = "dropboxjs"; + +export default function DropboxChooser({ children, onSuccess, onCancel }) { + useDropScript(DROPBOX_SDK_URL, { + attrs: { + id: DROPBOX_SCRIPT_ID, + "data-app-key": DROPBOX_APP_KEY + } + }); + + const options = useMemo( + () => ({ + // Required. Called when a user selects an item in the Chooser. + success: (files) => { + // console.log("success", files); + onSuccess && onSuccess(files); + }, + // Optional. Called when the user closes the dialog without selecting a file + // and does not include any parameters. + cancel: () => { + console.log("cancel"); + onCancel && onCancel(); + }, + + // Optional. "preview" (default) is a preview link to the document for sharing, + // "direct" is an expiring link to download the contents of the file. For more + linkType: "direct", // or "preview" + multiselect: false, // 是否支持多选 + extensions: [".pdf"], + + // Optional. A value of false (default) limits selection to files, + // while true allows the user to select both folders and files. + // You cannot specify `linkType: "direct"` when using `folderselect: true`. + folderselect: false // or true + }), + [onSuccess, onCancel] + ); + + const handleChoose = useCallback(() => { + if (window.Dropbox) { + window.Dropbox.choose(options); + } + }, [options]); + + return ( +
+ {children || ( + + )} +
+ ); +} diff --git a/apps/OpenSign/src/components/fields/FileUpload.js b/apps/OpenSign/src/components/fields/FileUpload.js index 226640d44..7902d7a71 100644 --- a/apps/OpenSign/src/components/fields/FileUpload.js +++ b/apps/OpenSign/src/components/fields/FileUpload.js @@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react"; import { SaveFileSize } from "../../constant/saveFileSize"; import Parse from "parse"; import sanitizeFileName from "../../primitives/sanitizeFileName"; - +import DropboxChooser from "./DropboxChoose"; const FileUpload = (props) => { const [parseBaseUrl] = useState(localStorage.getItem("baseUrl")); const [parseAppId] = useState(localStorage.getItem("parseAppId")); @@ -106,6 +106,56 @@ const FileUpload = (props) => { console.error("Error uploading file:", error); } }; + + const dropboxSuccess = async (files) => { + // console.log("file ", files); + setfileload(true); + const file = files[0]; + const url = file.link; + const size = file.bytes; + const mb = Math.round(file.bytes / Math.pow(1024, 2)); + + if (mb > 10) { + setTimeout(() => { + alert( + `The selected file size is too large. Please select a file less than 10 MB` + ); + }, 500); + return; + } else { + const name = sanitizeFileName(file.name); + + const parseFile = new Parse.File(name, { uri: url }); + + try { + const response = await parseFile.save({ + progress: (progressValue, loaded, total, { type }) => { + if (type === "upload" && progressValue !== null) { + const percentCompleted = Math.round((loaded * 100) / total); + // console.log("percentCompleted ", percentCompleted); + setpercentage(percentCompleted); + } + } + }); + // console.log("response.url() ", response.url()); + setFileUpload(response.url()); + props.onChange(response.url()); + setfileload(false); + + if (response.url()) { + SaveFileSize(size, response.url()); + return response.url(); + } + } catch (error) { + setfileload(false); + setpercentage(0); + console.error("Error uploading file:", error); + } + } + }; + const dropboxCancel = async () => { + console.log("cancel clicked "); + }; let fileView = props.formData && props.schema.uploadtype === "s3viajw" ? null : props.formData && @@ -258,6 +308,7 @@ const FileUpload = (props) => { /> )} + ); }; diff --git a/apps/OpenSign/src/hook/useScript.js b/apps/OpenSign/src/hook/useScript.js index cb39649f7..354ad1fe1 100644 --- a/apps/OpenSign/src/hook/useScript.js +++ b/apps/OpenSign/src/hook/useScript.js @@ -15,3 +15,20 @@ export const useScript = (url, onload) => { }; }, [url, onload]); }; + +/**`useScript` hook is generated scripte for google sign in button */ +export const useDropScript = (url, onload) => { + useEffect(() => { + const script = document.createElement("script"); + //add url parameter to the script src, for load and it will remove after load in return + script.src = url; + script.async = true; + script.defer = true; + script.id = "dropboxjs"; + script.setAttribute("data-app-key", "8k0thg9r1t7asqg"); + document.head.appendChild(script); + return () => { + document.head.removeChild(script); + }; + }, [url, onload]); +}; diff --git a/apps/OpenSign/src/json/FormJson.js b/apps/OpenSign/src/json/FormJson.js index bf67053a9..7e13e480b 100644 --- a/apps/OpenSign/src/json/FormJson.js +++ b/apps/OpenSign/src/json/FormJson.js @@ -14,7 +14,7 @@ export const formJson = (id) => { type: "string", title: "Select Document", filetypes: [], - maxfilesizeKB: "5000", + maxfilesizeKB: "10000", uploadtype: "regular", helpbody: "", helplink: "" From 45b3e739d7201fc2c718321bf7d3778df1b4401a Mon Sep 17 00:00:00 2001 From: prafull-opensignlabs Date: Tue, 28 Nov 2023 12:22:13 +0530 Subject: [PATCH 003/111] make changes UI in file upload --- .../src/components/fields/DropboxChoose.js | 4 +- .../src/components/fields/FileUpload.js | 94 +++++++++---------- 2 files changed, 45 insertions(+), 53 deletions(-) diff --git a/apps/OpenSign/src/components/fields/DropboxChoose.js b/apps/OpenSign/src/components/fields/DropboxChoose.js index 0eb00adcf..9ed1bb3f8 100644 --- a/apps/OpenSign/src/components/fields/DropboxChoose.js +++ b/apps/OpenSign/src/components/fields/DropboxChoose.js @@ -50,8 +50,8 @@ export default function DropboxChooser({ children, onSuccess, onCancel }) { return (
{children || ( - )}
diff --git a/apps/OpenSign/src/components/fields/FileUpload.js b/apps/OpenSign/src/components/fields/FileUpload.js index 7902d7a71..71e132878 100644 --- a/apps/OpenSign/src/components/fields/FileUpload.js +++ b/apps/OpenSign/src/components/fields/FileUpload.js @@ -8,8 +8,6 @@ const FileUpload = (props) => { const [parseAppId] = useState(localStorage.getItem("parseAppId")); const [_fileupload, setFileUpload] = useState(""); const [fileload, setfileload] = useState(false); - - const [localValue, setLocalValue] = useState(""); const [Message] = useState(false); const [percentage, setpercentage] = useState(0); @@ -25,7 +23,6 @@ const FileUpload = (props) => { const onChange = (e) => { try { let files = e.target.files; - setLocalValue(e.target.files); if (typeof files[0] !== "undefined") { if (props.schema.filetypes && props.schema.filetypes.length > 0) { var fileName = files[0].name; @@ -257,58 +254,53 @@ const FileUpload = (props) => { <> - {localValue ? ( - - ) : props.formData ? ( -
- file selected : {props.formData.split("/")[3]} + {props.formData ? ( +
+
+
+ file selected : {props.formData.split("/")[3]} +
+
{ + console.log("clicked"); + setFileUpload([]); + props.onChange(undefined); + }} + className="cursor-pointer px-[10px] text-base font-bold bg-white" + > + X +
+
+
) : ( - +
+ + +
)} - ); }; From 26d38f4ca2ba169e8fb0ca6665f7f258a7bc3904 Mon Sep 17 00:00:00 2001 From: prafull-opensignlabs Date: Tue, 28 Nov 2023 15:52:26 +0530 Subject: [PATCH 004/111] change color of cancel btn test in file-upload --- apps/OpenSign/src/components/fields/FileUpload.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/OpenSign/src/components/fields/FileUpload.js b/apps/OpenSign/src/components/fields/FileUpload.js index 71e132878..09a11e8d2 100644 --- a/apps/OpenSign/src/components/fields/FileUpload.js +++ b/apps/OpenSign/src/components/fields/FileUpload.js @@ -256,7 +256,7 @@ const FileUpload = (props) => { <> {props.formData ? (
-
+
file selected : {props.formData.split("/")[3]}
@@ -266,9 +266,9 @@ const FileUpload = (props) => { setFileUpload([]); props.onChange(undefined); }} - className="cursor-pointer px-[10px] text-base font-bold bg-white" + className="cursor-pointer px-[10px] text-[20px] font-bold bg-white text-red-500" > - X +
Date: Fri, 1 Dec 2023 19:14:36 +0530 Subject: [PATCH 005/111] add validation for contactbook --- apps/OpenSign/src/components/AppendFormInForm.js | 1 + apps/OpenSign/src/json/FormJson.js | 3 +-- .../OpenSignServer/cloud/parsefunction/ContactBookAftersave.js | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/OpenSign/src/components/AppendFormInForm.js b/apps/OpenSign/src/components/AppendFormInForm.js index 2d61d4597..22017e423 100644 --- a/apps/OpenSign/src/components/AppendFormInForm.js +++ b/apps/OpenSign/src/components/AppendFormInForm.js @@ -32,6 +32,7 @@ const AppendFormInForm = (props) => { try { const query = new Parse.Query("contracts_Contactbook"); query.equalTo("CreatedBy", user); + query.notEqualTo("IsDeleted", true); query.equalTo("Email", user.getEmail()); const res = await query.first(); // console.log(res); diff --git a/apps/OpenSign/src/json/FormJson.js b/apps/OpenSign/src/json/FormJson.js index bf67053a9..8867ec956 100644 --- a/apps/OpenSign/src/json/FormJson.js +++ b/apps/OpenSign/src/json/FormJson.js @@ -147,7 +147,7 @@ export const formJson = (id) => { class: "contracts_Contactbook", displayKey: "Name", valueKey: "objectId", - query: `where={"CreatedBy":${userPtr}}&keys=Name`, + query: `where={"CreatedBy":${userPtr},"IsDeleted":{"$ne":true}}&keys=Name`, isPointer: true, helpbody: "", helplink: "", @@ -582,4 +582,3 @@ export const formJson = (id) => { return formData; } }; - diff --git a/apps/OpenSignServer/cloud/parsefunction/ContactBookAftersave.js b/apps/OpenSignServer/cloud/parsefunction/ContactBookAftersave.js index d49794c0e..644a2a763 100644 --- a/apps/OpenSignServer/cloud/parsefunction/ContactBookAftersave.js +++ b/apps/OpenSignServer/cloud/parsefunction/ContactBookAftersave.js @@ -16,6 +16,7 @@ async function ContactbookAftersave(request) { acl.setWriteAccess(object.get('UserId'), true); object.setACL(acl); + object.set('IsDeleted', false) // Continue saving the object return object.save(null, { useMasterKey: true }); } From 1cc4cf93cb3cc5c3ef932c9ed8efdbf952a56971 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Fri, 1 Dec 2023 20:09:22 +0530 Subject: [PATCH 006/111] fix: resize placeholder design and adding resize option for recipients, added signers's name on placeholder --- .../src/Component/PdfRequestFiles.js | 82 ++ .../src/Component/SignYourselfPdf.js | 57 +- .../src/Component/component/borderResize.js | 17 + .../src/Component/component/renderPdf.js | 1251 +++++++---------- .../src/Component/placeHolderSign.js | 83 +- .../src/Component/recipientSignPdf.js | 58 +- .../SignDocuments/src/css/signature.css | 57 +- .../SignDocuments/src/utils/Utils.js | 151 ++ 8 files changed, 883 insertions(+), 873 deletions(-) create mode 100644 microfrontends/SignDocuments/src/Component/component/borderResize.js diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js index 053c5ca78..7f17f6e16 100644 --- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js +++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js @@ -524,6 +524,87 @@ function PdfRequestFiles() { alert("something went wrong"); }); }; + + //function for resize image and update width and height + const handleImageResize = (ref, key, signerId, position) => { + const filterSignerPos = signerPos.filter( + (data) => data.signerObjId === signerId + ); + if (filterSignerPos.length > 0) { + const getPlaceHolder = filterSignerPos[0].placeHolder; + const getPageNumer = getPlaceHolder.filter( + (data) => data.pageNumber === pageNumber + ); + if (getPageNumer.length > 0) { + const getXYdata = getPageNumer[0].pos.filter( + (data, ind) => data.key === key && data.Width && data.Height + ); + if (getXYdata.length > 0) { + const getXYdata = getPageNumer[0].pos; + const getPosData = getXYdata; + const addSignPos = getPosData.map((url, ind) => { + if (url.key === key) { + return { + ...url, + Width: ref.offsetWidth, + Height: ref.offsetHeight, + xPosition: position.x + }; + } + return url; + }); + + const newUpdateSignPos = getPlaceHolder.map((obj, ind) => { + if (obj.pageNumber === pageNumber) { + return { ...obj, pos: addSignPos }; + } + return obj; + }); + + const newUpdateSigner = signerPos.map((obj, ind) => { + if (obj.signerObjId === signerId) { + return { ...obj, placeHolder: newUpdateSignPos }; + } + return obj; + }); + + setSignerPos(newUpdateSigner); + } else { + const getXYdata = getPageNumer[0].pos; + + const getPosData = getXYdata; + + const addSignPos = getPosData.map((url, ind) => { + if (url.key === key) { + return { + ...url, + Width: ref.offsetWidth, + Height: ref.offsetHeight + }; + } + return url; + }); + + const newUpdateSignPos = getPlaceHolder.map((obj, ind) => { + if (obj.pageNumber === pageNumber) { + return { ...obj, pos: addSignPos }; + } + return obj; + }); + + const newUpdateSigner = signerPos.map((obj, ind) => { + if (obj.signerObjId === signerId) { + return { ...obj, placeHolder: newUpdateSignPos }; + } + return obj; + }); + + setSignerPos(newUpdateSigner); + } + } + } + }; + //function for get pdf page details const pageDetails = async (pdf) => { const load = { @@ -956,6 +1037,7 @@ function PdfRequestFiles() { setCurrentSigner={setCurrentSigner} setPdfLoadFail={setPdfLoadFail} pdfLoadFail={pdfLoadFail} + setSignerPos={setSignerPos} />
diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js index e816f99d6..9a1a45f08 100644 --- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js +++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js @@ -692,60 +692,6 @@ function SignYourSelf() { setSignBtnPosition([xySignature]); }; - //function for resize image and update width and height - const handleImageResize = (ref, key, direction, position) => { - const updateFilter = xyPostion[index].pos.filter( - (data, ind) => data.key === key && data.Width && data.Height - ); - - if (updateFilter.length > 0) { - const getXYdata = xyPostion[index].pos; - const getPosData = getXYdata; - const addSign = getPosData.map((url, ind) => { - if (url.key === key) { - return { - ...url, - Width: ref.offsetWidth, - Height: ref.offsetHeight, - xPosition: position.x - }; - } - return url; - }); - - const newUpdateUrl = xyPostion.map((obj, ind) => { - if (ind === index) { - return { ...obj, pos: addSign }; - } - return obj; - }); - - setXyPostion(newUpdateUrl); - } else { - const getXYdata = xyPostion[index].pos; - - const getPosData = getXYdata; - - const addSign = getPosData.map((url, ind) => { - if (url.key === key) { - return { - ...url, - Width: ref.offsetWidth, - Height: ref.offsetHeight - }; - } - return url; - }); - - const newUpdateUrl = xyPostion.map((obj, ind) => { - if (ind === index) { - return { ...obj, pos: addSign }; - } - return obj; - }); - setXyPostion(newUpdateUrl); - } - }; const handleAllDelete = () => { setXyPostion([]); }; @@ -1002,7 +948,6 @@ function SignYourSelf() { nodeRef={nodeRef} handleTabDrag={handleTabDrag} handleStop={handleStop} - handleImageResize={handleImageResize} isDragging={isDragging} setIsSignPad={setIsSignPad} setIsStamp={setIsStamp} @@ -1017,6 +962,8 @@ function SignYourSelf() { pageDetails={pageDetails} setPdfLoadFail={setPdfLoadFail} pdfLoadFail={pdfLoadFail} + setXyPostion={setXyPostion} + index={index} />
diff --git a/microfrontends/SignDocuments/src/Component/component/borderResize.js b/microfrontends/SignDocuments/src/Component/component/borderResize.js new file mode 100644 index 000000000..1596d09bb --- /dev/null +++ b/microfrontends/SignDocuments/src/Component/component/borderResize.js @@ -0,0 +1,17 @@ +import React from "react"; + +function BorderResize() { + return ( +
+ ); +} + +export default BorderResize; diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js index abe0d34fe..1ef480022 100644 --- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js +++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js @@ -4,6 +4,11 @@ import Toast from "react-bootstrap/Toast"; import { Rnd } from "react-rnd"; import { themeColor } from "../../utils/ThemeColor/backColor"; import { Document, Page, pdfjs } from "react-pdf"; +import BorderResize from "./borderResize"; +import { + handleImageResize, + handleSignYourselfImageResize +} from "../../utils/Utils"; pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`; @@ -17,7 +22,6 @@ function RenderPdf({ nodeRef, handleTabDrag, handleStop, - handleImageResize, isDragging, setIsSignPad, setIsStamp, @@ -37,7 +41,10 @@ function RenderPdf({ signedSigners, setPdfLoadFail, placeholder, - pdfLoadFail + pdfLoadFail, + setSignerPos, + setXyPostion, + index }) { const isMobile = window.innerWidth < 767; const newWidth = window.innerWidth; @@ -137,124 +144,101 @@ function RenderPdf({ {placeData.pageNumber === pageNumber && placeData.pos.map((pos, index) => { - return pos && pos.SignUrl ? ( - - { - setIsSignPad(true); - setSignKey(pos.key); - }} - > -
- no img { + return ( + pos && ( + + { + handleImageResize( + ref, + pos.key, + data.signerObjId, + position, + signerPos, + pageNumber, + setSignerPos + ); + }} + lockAspectRatio={pos.Width && 2.5} + default={{ + x: xPos(pos), + y: yPos(pos) + }} + onClick={() => { + if (data.signerObjId === signerObjectId) { setIsSignPad(true); setSignKey(pos.key); - }} - src={pos.SignUrl} - style={{ - width: "100%", - height: "100%", - objectFit: "contain" - }} - /> -
- - - ) : ( - { - if (data.signerObjId === signerObjectId) { - setIsSignPad(true); - setSignKey(pos.key); - setIsStamp(pos.isStamp); - } - }} - style={{ - padding: "0px", - cursor: "all-scroll", - zIndex: 1, - position: "absolute", - borderStyle: "dashed", - width: "200px", - height: "30px", - borderColor: themeColor(), - background: data.blockColor, - textAlign: "center", - justifyContent: "center", - borderWidth: "0.2px" - }} - default={{ - x: xPos(pos), - y: yPos(pos) - }} - size={{ - width: posWidth(pos), - height: posHeight(pos) - }} - lockAspectRatio={pos.Width ? pos.Width / pos.Height : 2.5} - > -
+
+ {data.signerObjId === signerObjectId && ( + + )} + {pos.SignUrl ? ( + no img { + setIsSignPad(true); + setSignKey(pos.key); + }} + src={pos.SignUrl} + style={{ + width: "100%", + height: "100%", + objectFit: "contain" + }} + /> + ) : ( + pdfDetails[0].Signers.map((signerData, key) => { + return ( + signerData.objectId === data.signerObjId && ( +
- {pos.isStamp ? "stamp" : "signature"} -
- + marginTop: "0px" + }} + > + {signerData.Name} +
+ ) + ); + }) + )} +
+ + + ) ); })} @@ -298,135 +282,98 @@ function RenderPdf({ {data.pageNumber === pageNumber && data.pos.map((pos) => { - return pos && pos.SignUrl ? ( - { - setIsSignPad(true); - setSignKey(pos.key); - }} - > -
- no img { - setIsSignPad(true); - setSignKey(pos.key); - }} - src={pos.SignUrl} - style={{ - width: "100%", - height: "100%", - objectFit: "contain" - }} - /> -
- - ) : ( - { + handleSignYourselfImageResize( + ref, + pos.key, + direction, + position, + xyPostion, + index, + setXyPostion + ); + }} + size={{ + width: posWidth(pos), + height: posHeight(pos) + }} + lockAspectRatio={ + pos.Width ? pos.Width / pos.Height : 2.5 + } //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divide by scale //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale - x: !pos.isMobile - ? pos.xPosition / scale - : pos.xPosition * (pos.scale / scale) - 50, + default={{ + x: !pos.isMobile + ? pos.xPosition / scale + : pos.xPosition * (pos.scale / scale) - 50, - y: !pos.isMobile - ? pos.yPosition / scale - : pos.yPosition * (pos.scale / scale) - }} - onClick={() => { - setIsSignPad(true); - setSignKey(pos.key); - setIsStamp(pos.isStamp); - }} - > -
{ + setIsSignPad(true); + setSignKey(pos.key); }} > - {pos.isStamp ? "stamp" : "signature"} -
- + + {pos.SignUrl ? ( + no img { + setIsSignPad(true); + setSignKey(pos.key); + }} + src={pos.SignUrl} + style={{ + width: "100%", + height: "100%", + objectFit: "contain" + }} + /> + ) : ( +
+ {pos.isStamp ? "stamp" : "signature"} +
+ )} + + ) ); })} @@ -454,19 +401,10 @@ function RenderPdf({ key={pos.key} bounds="parent" style={{ - padding: "0px", cursor: "all-scroll", - zIndex: 1, - position: "absolute", - borderStyle: "dashed", - width: "200px", - height: "30px", - borderColor: themeColor(), - background: data.blockColor, - textAlign: "center", - justifyContent: "center", - borderWidth: "0.2px" + borderColor: themeColor() }} + className="placeholderBlock" onDrag={() => handleTabDrag( pos.key, @@ -482,11 +420,6 @@ function RenderPdf({ ? pos.Width / pos.Height : 2.5 } - resizeHandleStyles={{ - bottom: { display: "none" }, - right: { display: "none" }, - bottomRight: { display: "block" } - }} onDragStop={(event, dragElement) => handleStop( event, @@ -510,10 +443,15 @@ function RenderPdf({ ref, pos.key, data.signerObjId, - position + position, + signerPos, + pageNumber, + setSignerPos ); }} > + +
{ e.stopPropagation(); @@ -523,14 +461,9 @@ function RenderPdf({ ); }} style={{ - position: "absolute", - right: 0, - display: "inline-block", - background: themeColor(), - cursor: "pointer", - padding: "0px 10px", - zIndex: 10 + background: themeColor() }} + className="placeholdCloseBtn" > x
@@ -539,7 +472,6 @@ function RenderPdf({ fontSize: "12px", color: "black", fontWeight: "600", - marginTop: "0px" }} > @@ -559,206 +491,115 @@ function RenderPdf({ {data.pageNumber === pageNumber && data.pos.map((pos) => { - return pos && pos.SignUrl ? ( - handleTabDrag(pos.key)} - onDragStop={handleStop} - onResize={( - e, - direction, - ref, - delta, - position - ) => { - handleImageResize( - ref, - pos.key, - direction, - position - ); - }} - > - {" "} -
{ - if (!isDragging) { - setTimeout(() => { - e.stopPropagation(); - setIsSignPad(true); - setSignKey(pos.key); - setIsStamp(pos.isStamp); - }, 500); - } - }} - > -
{ - e.stopPropagation(); - handleDeleteSign(pos.key); - setIsStamp(false); - }} - style={{ - position: "absolute", - right: 0, - display: "inline-block", - background: themeColor(), - cursor: "pointer", - padding: "0px 10px" - }} - > - x -
-
- signimg { - setSignKey(pos.key); - console.log("Drag 2"); - setIsSignPad(true); - setIsStamp(pos.isStamp); - }} - src={pos.SignUrl} - style={{ - width: "100%", - height: "100%", - objectFit: "contain" - }} - /> -
-
- - ) : ( - <> + return ( + pos && ( { - handleTabDrag(pos.key, e); - }} - onDragStop={handleStop} size={{ - width: pos.Width ? pos.Width : 150, - height: pos.Height ? pos.Height : 60 + width: pos.Width ? pos.Width : 151, + height: pos.Height ? pos.Height : 61 }} default={{ x: pos.xPosition, y: pos.yPosition }} + onDrag={() => handleTabDrag(pos.key)} + onDragStop={handleStop} + onResize={( + e, + direction, + ref, + delta, + position + ) => { + handleSignYourselfImageResize( + ref, + pos.key, + direction, + position, + xyPostion, + index, + setXyPostion + ); + }} > + {" "}
{ if (!isDragging) { setTimeout(() => { + e.stopPropagation(); setIsSignPad(true); setSignKey(pos.key); setIsStamp(pos.isStamp); }, 500); } }} - className="dragElm" style={{ - padding: "0px", - cursor: "all-scroll", - zIndex: 20, - position: "absolute", - borderStyle: "dashed", - width: "150px", - height: "60px", - borderColor: themeColor(), - background: "#daebe0", - textAlign: "center", - justifyContent: "center", - borderWidth: "0.2px", - overflow: "hidden" + height: "100%" }} > +
{ e.stopPropagation(); - e.preventDefault(); - handleDeleteSign(pos.key); setIsStamp(false); }} - onClick={(e) => { - e.stopPropagation(); // Prevent further event propagation - }} style={{ - position: "absolute", - right: 0, - display: "inline-block", - background: themeColor(), - cursor: "pointer", - padding: "0px 10px" + background: themeColor() }} + className="placeholdCloseBtn" > x
-
- {pos.isStamp ? "stamp" : "signature"} -
+ {pos.SignUrl ? ( + signimg + ) : ( +
+ {pos.isStamp ? "stamp" : "signature"} +
+ )}
- + ) ); })} @@ -849,135 +690,161 @@ function RenderPdf({ {data.pageNumber === pageNumber && data.pos.map((pos) => { - return pos && pos.SignUrl ? ( - { - setIsSignPad(true); - setSignKey(pos.key); - }} - > -
- no img { - setIsSignPad(true); - setSignKey(pos.key); - }} - src={pos.SignUrl} - style={{ - width: "100%", - height: "100%", - objectFit: "contain" - }} - /> -
- - ) : ( - { - setIsSignPad(true); - setSignKey(pos.key); - setIsStamp(pos.isStamp); - }} - > -
{ + handleSignYourselfImageResize( + ref, + pos.key, + direction, + position, + xyPostion, + index, + setXyPostion + ); + }} + key={pos.key} + bounds="parent" style={{ - fontSize: "12px", - color: "black", - fontWeight: "600", - justifyContent: "center", - marginTop: "0px" + cursor: "all-scroll", + borderColor: themeColor() + }} + className="placeholderBlock" + size={{ + width: pos.Width ? pos.Width : 150, + height: pos.Height ? pos.Height : 60 + }} + lockAspectRatio={pos.Width && 2.5} + //if pos.isMobile false -- placeholder saved from mobile view then handle position in desktop view to multiply by scale + + default={{ + x: pos.isMobile + ? pos.scale && + pos.xPosition * pos.scale + 20 + : pos.xPosition, + y: pos.isMobile + ? pos.scale && pos.yPosition * pos.scale + : pos.yPosition + }} + onClick={() => { + setIsSignPad(true); + setSignKey(pos.key); }} > - {pos.isStamp ? "stamp" : "signature"} -
- +
+ + {pos.SignUrl ? ( + no img { + setIsSignPad(true); + setSignKey(pos.key); + }} + src={pos.SignUrl} + style={{ + width: "100%", + height: "100%", + objectFit: "contain" + }} + /> + ) : ( +
+ {pos.isStamp ? "stamp" : "signature"} +
+ )} +
+ + // ) : ( + // { + // setIsSignPad(true); + // setSignKey(pos.key); + // setIsStamp(pos.isStamp); + // }} + // > + //
+ // {pos.isStamp ? "stamp" : "signature"} + //
+ // + ) ); })} @@ -1003,21 +870,22 @@ function RenderPdf({ return ( handleTabDrag( pos.key, @@ -1033,11 +901,6 @@ function RenderPdf({ ? pos.Width / pos.Height : 2.5 } - resizeHandleStyles={{ - bottom: { display: "none" }, - right: { display: "none" }, - bottomRight: { display: "block" } - }} onDragStop={(event, dragElement) => handleStop( event, @@ -1061,10 +924,14 @@ function RenderPdf({ ref, pos.key, data.signerObjId, - position + position, + signerPos, + pageNumber, + setSignerPos ); }} > +
{ e.stopPropagation(); @@ -1074,14 +941,9 @@ function RenderPdf({ ); }} style={{ - position: "absolute", - right: 0, - display: "inline-block", - background: themeColor(), - cursor: "pointer", - padding: "0px 10px", - zIndex: 10 + background: themeColor() }} + className="placeholdCloseBtn" > x
@@ -1112,192 +974,113 @@ function RenderPdf({ {data.pageNumber === pageNumber && data.pos.map((pos) => { - return pos && pos.SignUrl ? ( - handleTabDrag(pos.key)} - size={{ - width: pos.Width ? pos.Width : 150, - height: pos.Height ? pos.Height : 60 - }} - onDragStop={handleStop} - default={{ - x: pos.xPosition, - y: pos.yPosition - }} - onResize={( - e, - direction, - ref, - delta, - position - ) => { - handleImageResize( - ref, - pos.key, - direction, - position - ); - }} - onClick={() => { - if (!isDragging) { - setIsSignPad(true); - setSignKey(pos.key); - setIsStamp(pos.isStamp); + return ( + pos && ( + -
{ - e.stopPropagation(); - handleDeleteSign(pos.key); - setIsStamp(false); + enableResizing={{ + top: false, + right: false, + bottom: false, + left: false, + topRight: false, + bottomRight: true, + bottomLeft: false, + topLeft: false }} + bounds="parent" style={{ - position: "absolute", - right: 0, - display: "inline-block", - background: themeColor(), - cursor: "pointer", - padding: "0px 10px" + borderColor: themeColor(), + cursor: "all-scroll" }} - > - x -
-
- signimg { - setSignKey(pos.key); - setIsSignPad(true); - setIsStamp(pos.isStamp); - }} - src={pos.SignUrl} - style={{ - width: "100%", - height: "100%", - objectFit: "contain" - }} - /> -
- - ) : ( - handleTabDrag(pos.key, e)} - size={{ - width: pos.Width ? pos.Width : 150, - height: pos.Height ? pos.Height : 60 - }} - onDragStop={handleStop} - default={{ - x: pos.xPosition, - y: pos.yPosition - }} - > -
{ + className="placeholderBlock" + onDrag={() => handleTabDrag(pos.key)} + size={{ + width: pos.Width ? pos.Width : 150, + height: pos.Height ? pos.Height : 60 + }} + onDragStop={handleStop} + default={{ + x: pos.xPosition, + y: pos.yPosition + }} + onResize={( + e, + direction, + ref, + delta, + position + ) => { + handleSignYourselfImageResize( + ref, + pos.key, + direction, + position, + xyPostion, + index, + setXyPostion + ); + }} + onClick={() => { if (!isDragging) { - e.stopPropagation(); setIsSignPad(true); setSignKey(pos.key); setIsStamp(pos.isStamp); } }} - style={{ - cursor: "all-scroll", - zIndex: 10, - position: "absolute", - borderStyle: "dashed", - width: "150px", - height: "60px", - borderColor: themeColor(), - background: "#daebe0", - textAlign: "center", - justifyContent: "center", - alignItems: "center", - borderWidth: "0.2px" - }} > -
+ + { e.stopPropagation(); handleDeleteSign(pos.key); setIsStamp(false); }} style={{ - position: "absolute", - right: 0, - display: "inline-block", - background: themeColor(), - cursor: "pointer", - padding: "0px 10px" + background: themeColor() }} + className="placeholdCloseBtn" > x -
-
- {pos.isStamp ? "stamp" : "signature"} -
-
- + + + {pos.SignUrl ? ( +
+ signimg +
+ ) : ( +
+ {pos.isStamp ? "stamp" : "signature"} +
+ )} + + ) ); })} ); }))} {/* this component for render pdf document is in middle of the component */} - { if (recipient) { diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js index 24f49fa17..a3b94e72b 100644 --- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js +++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js @@ -518,86 +518,6 @@ function PlaceHolderSign() { } }; - //function for resize image and update width and height - const handleImageResize = (ref, key, signerId, position) => { - const filterSignerPos = signerPos.filter( - (data) => data.signerObjId === signerId - ); - if (filterSignerPos.length > 0) { - const getPlaceHolder = filterSignerPos[0].placeHolder; - const getPageNumer = getPlaceHolder.filter( - (data) => data.pageNumber === pageNumber - ); - if (getPageNumer.length > 0) { - const getXYdata = getPageNumer[0].pos.filter( - (data, ind) => data.key === key && data.Width && data.Height - ); - if (getXYdata.length > 0) { - const getXYdata = getPageNumer[0].pos; - const getPosData = getXYdata; - const addSignPos = getPosData.map((url, ind) => { - if (url.key === key) { - return { - ...url, - Width: ref.offsetWidth, - Height: ref.offsetHeight, - xPosition: position.x - }; - } - return url; - }); - - const newUpdateSignPos = getPlaceHolder.map((obj, ind) => { - if (obj.pageNumber === pageNumber) { - return { ...obj, pos: addSignPos }; - } - return obj; - }); - - const newUpdateSigner = signerPos.map((obj, ind) => { - if (obj.signerObjId === signerId) { - return { ...obj, placeHolder: newUpdateSignPos }; - } - return obj; - }); - - setSignerPos(newUpdateSigner); - } else { - const getXYdata = getPageNumer[0].pos; - - const getPosData = getXYdata; - - const addSignPos = getPosData.map((url, ind) => { - if (url.key === key) { - return { - ...url, - Width: ref.offsetWidth, - Height: ref.offsetHeight - }; - } - return url; - }); - - const newUpdateSignPos = getPlaceHolder.map((obj, ind) => { - if (obj.pageNumber === pageNumber) { - return { ...obj, pos: addSignPos }; - } - return obj; - }); - - const newUpdateSigner = signerPos.map((obj, ind) => { - if (obj.signerObjId === signerId) { - return { ...obj, placeHolder: newUpdateSignPos }; - } - return obj; - }); - - setSignerPos(newUpdateSigner); - } - } - } - }; - //function for change page function changePage(offset) { setSignBtnPosition([]); @@ -1023,9 +943,10 @@ function PlaceHolderSign() { handleDeleteSign={handleDeleteSign} handleTabDrag={handleTabDrag} handleStop={handleStop} - handleImageResize={handleImageResize} + // handleImageResize={handleImageResize} setPdfLoadFail={setPdfLoadFail} pdfLoadFail={pdfLoadFail} + setSignerPos={setSignerPos} /> diff --git a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js index 0b5595ec0..d49ff5b6a 100644 --- a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js +++ b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js @@ -517,7 +517,7 @@ function EmbedPdfImage() { if (isMobile) { //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale if (pos.isMobile) { - const y = pos.yPosition * (pos.scale / scale); + const y = pos.yBottom * (pos.scale / scale); yPosition = pos.isDrag ? y * scale - height : pos.firstYPos @@ -812,6 +812,60 @@ function EmbedPdfImage() { ); }; + // //function for resize image and update width and height + // const handleImageResize = (ref, key, direction, position) => { + // const updateFilter = xyPostion[index].pos.filter( + // (data, ind) => data.key === key && data.Width && data.Height + // ); + + // if (updateFilter.length > 0) { + // const getXYdata = xyPostion[index].pos; + // const getPosData = getXYdata; + // const addSign = getPosData.map((url, ind) => { + // if (url.key === key) { + // return { + // ...url, + // Width: ref.offsetWidth, + // Height: ref.offsetHeight, + // xPosition: position.x + // }; + // } + // return url; + // }); + + // const newUpdateUrl = xyPostion.map((obj, ind) => { + // if (ind === index) { + // return { ...obj, pos: addSign }; + // } + // return obj; + // }); + + // setXyPostion(newUpdateUrl); + // } else { + // const getXYdata = xyPostion[index].pos; + + // const getPosData = getXYdata; + + // const addSign = getPosData.map((url, ind) => { + // if (url.key === key) { + // return { + // ...url, + // Width: ref.offsetWidth, + // Height: ref.offsetHeight + // }; + // } + // return url; + // }); + + // const newUpdateUrl = xyPostion.map((obj, ind) => { + // if (ind === index) { + // return { ...obj, pos: addSign }; + // } + // return obj; + // }); + // setXyPostion(newUpdateUrl); + // } + // }; return ( {isLoading.isLoad ? ( @@ -966,6 +1020,8 @@ function EmbedPdfImage() { isAlreadySign={isAlreadySign} setPdfLoadFail={setPdfLoadFail} pdfLoadFail={pdfLoadFail} + setXyPostion={setXyPostion} + index={index} /> diff --git a/microfrontends/SignDocuments/src/css/signature.css b/microfrontends/SignDocuments/src/css/signature.css index fb97f992e..afe4ae895 100644 --- a/microfrontends/SignDocuments/src/css/signature.css +++ b/microfrontends/SignDocuments/src/css/signature.css @@ -9,6 +9,14 @@ width: 460px; } +.borderResize { + position: absolute; + display: inline-block; + width: 14px; + height: 14px; + +} + .signatureBtn { border: 1.5px solid #47a3ad; margin-bottom: 10px; @@ -114,6 +122,48 @@ outline: none; } +.resizable-box-overlay { + position: absolute; + border: 2px solid #ddd; + overflow: hidden; + background-color: white; +} + +.box-content { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; +} + +.close-button { + align-self: flex-end; + margin: 8px; + cursor: pointer; +} + +.placeholdCloseBtn { + position: absolute; + right: -9px; + top: -15px; + border-radius: 100%; + font-size: 10px; + cursor: pointer; + padding: 0px 5px; +} +.placeholderBlock{ + padding: 0px; + z-index: 1; + position: absolute; + border-style: dashed; + width: 150px; + height: 60px; + background: #daebe0; + text-align: center; + justify-content: center; + border-width: 0.2px +} + .finishBtn { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); padding: 3px 30px; @@ -784,10 +834,13 @@ option { .signature-backdrop { position: fixed; - top: 0; bottom: 0; left: 0; right: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; background-color: #000; } .signature-backdrop.fade.in { opacity: 0.5; -} +} \ No newline at end of file diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index 3c98d56eb..dd5f6161b 100644 --- a/microfrontends/SignDocuments/src/utils/Utils.js +++ b/microfrontends/SignDocuments/src/utils/Utils.js @@ -486,3 +486,154 @@ export const pdfNewWidthFun = (divRef) => { //160 is width of left side, 200 is width of right side component return pdfWidth; }; + +//function for resize image and update width and height for mulitisigners +export const handleImageResize = ( + ref, + key, + signerId, + position, + signerPos, + pageNumber, + setSignerPos +) => { + const filterSignerPos = signerPos.filter( + (data) => data.signerObjId === signerId + ); + if (filterSignerPos.length > 0) { + const getPlaceHolder = filterSignerPos[0].placeHolder; + const getPageNumer = getPlaceHolder.filter( + (data) => data.pageNumber === pageNumber + ); + if (getPageNumer.length > 0) { + const getXYdata = getPageNumer[0].pos.filter( + (data, ind) => data.key === key && data.Width && data.Height + ); + if (getXYdata.length > 0) { + const getXYdata = getPageNumer[0].pos; + const getPosData = getXYdata; + const addSignPos = getPosData.map((url, ind) => { + if (url.key === key) { + return { + ...url, + Width: ref.offsetWidth, + Height: ref.offsetHeight, + xPosition: position.x + }; + } + return url; + }); + + const newUpdateSignPos = getPlaceHolder.map((obj, ind) => { + if (obj.pageNumber === pageNumber) { + return { ...obj, pos: addSignPos }; + } + return obj; + }); + + const newUpdateSigner = signerPos.map((obj, ind) => { + if (obj.signerObjId === signerId) { + return { ...obj, placeHolder: newUpdateSignPos }; + } + return obj; + }); + + setSignerPos(newUpdateSigner); + } else { + const getXYdata = getPageNumer[0].pos; + + const getPosData = getXYdata; + + const addSignPos = getPosData.map((url, ind) => { + if (url.key === key) { + return { + ...url, + Width: ref.offsetWidth, + Height: ref.offsetHeight + }; + } + return url; + }); + + const newUpdateSignPos = getPlaceHolder.map((obj, ind) => { + if (obj.pageNumber === pageNumber) { + return { ...obj, pos: addSignPos }; + } + return obj; + }); + + const newUpdateSigner = signerPos.map((obj, ind) => { + if (obj.signerObjId === signerId) { + return { ...obj, placeHolder: newUpdateSignPos }; + } + return obj; + }); + + setSignerPos(newUpdateSigner); + } + } + } +}; + +//function for resize image and update width and height for sign-yourself +export const handleSignYourselfImageResize = ( + ref, + key, + direction, + position, + xyPostion, + index, + setXyPostion +) => { + const updateFilter = xyPostion[index].pos.filter( + (data) => data.key === key && data.Width && data.Height + ); + + if (updateFilter.length > 0) { + const getXYdata = xyPostion[index].pos; + const getPosData = getXYdata; + const addSign = getPosData.map((url, ind) => { + if (url.key === key) { + return { + ...url, + Width: ref.offsetWidth, + Height: ref.offsetHeight, + xPosition: position.x + }; + } + return url; + }); + + const newUpdateUrl = xyPostion.map((obj, ind) => { + if (ind === index) { + return { ...obj, pos: addSign }; + } + return obj; + }); + + setXyPostion(newUpdateUrl); + } else { + const getXYdata = xyPostion[index].pos; + + const getPosData = getXYdata; + + const addSign = getPosData.map((url, ind) => { + if (url.key === key) { + return { + ...url, + Width: ref.offsetWidth, + Height: ref.offsetHeight + }; + } + return url; + }); + + const newUpdateUrl = xyPostion.map((obj, ind) => { + if (ind === index) { + return { ...obj, pos: addSign }; + } + return obj; + }); + setXyPostion(newUpdateUrl); + } +}; From 0c4b8143b281f35179c50847882a91685004ace6 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Mon, 4 Dec 2023 11:34:51 +0530 Subject: [PATCH 007/111] fix: placeholder and signyourself location issue in mobille view --- .../src/Component/LegaDrive/LegaDrive.js | 1 - .../src/Component/PdfRequestFiles.js | 512 ++++++++++-------- .../src/Component/SignYourselfPdf.js | 78 +-- .../src/Component/component/renderPdf.js | 135 ++--- .../src/Component/placeHolderSign.js | 57 +- .../src/Component/recipientSignPdf.js | 326 ++++++----- .../SignDocuments/src/utils/Utils.js | 151 +++++- 7 files changed, 735 insertions(+), 525 deletions(-) diff --git a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js index db0c94425..a8ce394ab 100644 --- a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js +++ b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js @@ -44,7 +44,6 @@ function PdfFile() { }; setIsLoading(load); const driveDetails = await getDrive(); - if (driveDetails) { if (driveDetails.length > 0) { setPdfData(driveDetails); diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js index 7f17f6e16..2b8a56f71 100644 --- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js +++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js @@ -19,7 +19,8 @@ import { urlValidator, multiSignEmbed, embedDocId, - pdfNewWidthFun + pdfNewWidthFun, + signPdfFun } from "../utils/Utils"; import Loader from "./component/loader"; import HandleError from "./component/HandleError"; @@ -60,6 +61,7 @@ function PdfRequestFiles() { const [isUiLoading, setIsUiLoading] = useState(false); const [isDecline, setIsDecline] = useState({ isDeclined: false }); const [currentSigner, setCurrentSigner] = useState(false); + const [isCompleted, setIsCompleted] = useState({ isCertificate: false, isModal: false @@ -73,6 +75,7 @@ function PdfRequestFiles() { const [alreadySign, setAlreadySign] = useState(false); const [containerWH, setContainerWH] = useState({}); const divRef = useRef(null); + const isMobile = window.innerWidth < 767; const rowLevel = localStorage.getItem("rowlevel") && JSON.parse(localStorage.getItem("rowlevel")); @@ -345,14 +348,32 @@ function PdfRequestFiles() { ); //function for call to embed signature in pdf and get digital signature pdf + signPdfFun( newImgUrl, documentId, + signerObjectId, + pdfOriginalWidth, + pngUrl, data, pdfBase64, pageNo, - pngUrl - ); + containerWH + ) + .then((res) => { + if (res && res.status === "success") { + setPdfUrl(res.data); + setIsSigned(true); + setSignedSigners([]); + setUnSignedSigners([]); + getDocumentDetails(); + } else { + alert("something went wrong"); + } + }) + .catch((err) => { + alert("something went wrong"); + }); }) .catch((error) => { console.error("Error:", error); @@ -372,7 +393,29 @@ function PdfRequestFiles() { false ); - signPdfFun(pdfBytes, documentId, pngUrl); + //function for call to embed signature in pdf and get digital signature pdf + signPdfFun( + pdfBytes, + documentId, + signerObjectId, + pdfOriginalWidth, + pngUrl, + containerWH + ) + .then((res) => { + if (res && res.status === "success") { + setPdfUrl(res.data); + setIsSigned(true); + setSignedSigners([]); + setUnSignedSigners([]); + getDocumentDetails(); + } else { + alert("something went wrong"); + } + }) + .catch((err) => { + alert("something went wrong"); + }); } setIsSignPad(false); @@ -383,227 +426,227 @@ function PdfRequestFiles() { } } - //function for call cloud function signPdf and generate digital signature - const signPdfFun = async ( - base64Url, - documentId, - xyPosData, - pdfBase64Url, - pageNo, - signerData - ) => { - let signgleSign; - const isMobile = window.innerWidth < 767; - const newWidth = window.innerWidth; - const scale = isMobile ? pdfOriginalWidth / newWidth : 1; - if ( - signerData && - signerData.length === 1 && - signerData[0].pos.length === 1 - ) { - const height = xyPosData.Height ? xyPosData.Height : 60; + // //function for call cloud function signPdf and generate digital signature + // const signPdfFun = async ( + // base64Url, + // documentId, + // xyPosData, + // pdfBase64Url, + // pageNo, + // signerData + // ) => { + // let signgleSign; + // const isMobile = window.innerWidth < 767; + // const newWidth = window.innerWidth; + // const scale = isMobile ? pdfOriginalWidth / newWidth : 1; + // if ( + // signerData && + // signerData.length === 1 && + // signerData[0].pos.length === 1 + // ) { + // const height = xyPosData.Height ? xyPosData.Height : 60; - const xPos = (pos) => { - //checking both condition mobile and desktop view - if (isMobile) { - //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale - if (pos.isMobile) { - const x = pos.xPosition * (pos.scale / scale); - return x * scale + 50; - } else { - const x = pos.xPosition / scale; - return x * scale; - } - } else { - //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale - if (pos.isMobile) { - const x = pos.xPosition * pos.scale + 50; - return x; - } else { - return pos.xPosition; - } - } - }; + // const xPos = (pos) => { + // //checking both condition mobile and desktop view + // if (isMobile) { + // //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale + // if (pos.isMobile) { + // const x = pos.xPosition * (pos.scale / scale); + // return x * scale + 50; + // } else { + // const x = pos.xPosition / scale; + // return x * scale; + // } + // } else { + // //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale + // if (pos.isMobile) { + // const x = pos.xPosition * pos.scale + 50; + // return x; + // } else { + // return pos.xPosition; + // } + // } + // }; - const yBottom = (pos) => { - let yPosition; - //checking both condition mobile and desktop view + // const yBottom = (pos) => { + // let yPosition; + // //checking both condition mobile and desktop view - if (isMobile) { - //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale - if (pos.isMobile) { - const y = pos.yBottom * (pos.scale / scale); - yPosition = pos.isDrag - ? y * scale - height - : pos.firstYPos - ? y * scale - height + pos.firstYPos - : y * scale - height; - return yPosition; - } else { - const y = pos.yBottom / scale; + // if (isMobile) { + // //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale + // if (pos.isMobile) { + // const y = pos.yBottom * (pos.scale / scale); + // yPosition = pos.isDrag + // ? y * scale - height + // : pos.firstYPos + // ? y * scale - height + pos.firstYPos + // : y * scale - height; + // return yPosition; + // } else { + // const y = pos.yBottom / scale; - yPosition = pos.isDrag - ? y * scale - height - : pos.firstYPos - ? y * scale - height + pos.firstYPos - : y * scale - height; - return yPosition; - } - } else { - //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale - if (pos.isMobile) { - const y = pos.yBottom * pos.scale; + // yPosition = pos.isDrag + // ? y * scale - height + // : pos.firstYPos + // ? y * scale - height + pos.firstYPos + // : y * scale - height; + // return yPosition; + // } + // } else { + // //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale + // if (pos.isMobile) { + // const y = pos.yBottom * pos.scale; - yPosition = pos.isDrag - ? y - height - : pos.firstYPos - ? y - height + pos.firstYPos - : y - height; - return yPosition; - } else { - yPosition = pos.isDrag - ? pos.yBottom - height - : pos.firstYPos - ? pos.yBottom - height + pos.firstYPos - : pos.yBottom - height; - return yPosition; - } - } - }; - const bottomY = yBottom(xyPosData); - signgleSign = { - pdfFile: pdfBase64Url, - docId: documentId, - userId: signerObjectId, - sign: { - Base64: base64Url, - Left: xPos(xyPosData), - Bottom: bottomY, - Width: xyPosData.Width ? xyPosData.Width : 150, - Height: height, - Page: pageNo - } - }; - } else if ( - xyPosData && - xyPosData.length > 0 && - xyPosData[0].pos.length > 0 - ) { - signgleSign = { - pdfFile: base64Url, - docId: documentId, - userId: signerObjectId - }; - } + // yPosition = pos.isDrag + // ? y - height + // : pos.firstYPos + // ? y - height + pos.firstYPos + // : y - height; + // return yPosition; + // } else { + // yPosition = pos.isDrag + // ? pos.yBottom - height + // : pos.firstYPos + // ? pos.yBottom - height + pos.firstYPos + // : pos.yBottom - height; + // return yPosition; + // } + // } + // }; + // const bottomY = yBottom(xyPosData); + // signgleSign = { + // pdfFile: pdfBase64Url, + // docId: documentId, + // userId: signerObjectId, + // sign: { + // Base64: base64Url, + // Left: xPos(xyPosData), + // Bottom: bottomY, + // Width: xyPosData.Width ? xyPosData.Width : 150, + // Height: height, + // Page: pageNo + // } + // }; + // } else if ( + // xyPosData && + // xyPosData.length > 0 && + // xyPosData[0].pos.length > 0 + // ) { + // signgleSign = { + // pdfFile: base64Url, + // docId: documentId, + // userId: signerObjectId + // }; + // } - await axios - .post( - `${localStorage.getItem("baseUrl")}functions/signPdf`, - signgleSign, - { - headers: { - "Content-Type": "application/json", - "X-Parse-Application-Id": localStorage.getItem("parseAppId"), - sessionToken: localStorage.getItem("accesstoken") - } - } - ) - .then((Listdata) => { - const json = Listdata.data; + // await axios + // .post( + // `${localStorage.getItem("baseUrl")}functions/signPdf`, + // signgleSign, + // { + // headers: { + // "Content-Type": "application/json", + // "X-Parse-Application-Id": localStorage.getItem("parseAppId"), + // sessionToken: localStorage.getItem("accesstoken") + // } + // } + // ) + // .then((Listdata) => { + // const json = Listdata.data; - if (json.result.data) { - setPdfUrl(json.result.data); - setIsSigned(true); - setSignedSigners([]); - setUnSignedSigners([]); - getDocumentDetails(); - } - }) - .catch((err) => { - console.log("axois err ", err); - alert("something went wrong"); - }); - }; + // if (json.result.data) { + // setPdfUrl(json.result.data); + // setIsSigned(true); + // setSignedSigners([]); + // setUnSignedSigners([]); + // getDocumentDetails(); + // } + // }) + // .catch((err) => { + // console.log("axois err ", err); + // alert("something went wrong"); + // }); + // }; //function for resize image and update width and height - const handleImageResize = (ref, key, signerId, position) => { - const filterSignerPos = signerPos.filter( - (data) => data.signerObjId === signerId - ); - if (filterSignerPos.length > 0) { - const getPlaceHolder = filterSignerPos[0].placeHolder; - const getPageNumer = getPlaceHolder.filter( - (data) => data.pageNumber === pageNumber - ); - if (getPageNumer.length > 0) { - const getXYdata = getPageNumer[0].pos.filter( - (data, ind) => data.key === key && data.Width && data.Height - ); - if (getXYdata.length > 0) { - const getXYdata = getPageNumer[0].pos; - const getPosData = getXYdata; - const addSignPos = getPosData.map((url, ind) => { - if (url.key === key) { - return { - ...url, - Width: ref.offsetWidth, - Height: ref.offsetHeight, - xPosition: position.x - }; - } - return url; - }); + // const handleImageResize = (ref, key, signerId, position) => { + // const filterSignerPos = signerPos.filter( + // (data) => data.signerObjId === signerId + // ); + // if (filterSignerPos.length > 0) { + // const getPlaceHolder = filterSignerPos[0].placeHolder; + // const getPageNumer = getPlaceHolder.filter( + // (data) => data.pageNumber === pageNumber + // ); + // if (getPageNumer.length > 0) { + // const getXYdata = getPageNumer[0].pos.filter( + // (data, ind) => data.key === key && data.Width && data.Height + // ); + // if (getXYdata.length > 0) { + // const getXYdata = getPageNumer[0].pos; + // const getPosData = getXYdata; + // const addSignPos = getPosData.map((url, ind) => { + // if (url.key === key) { + // return { + // ...url, + // Width: ref.offsetWidth, + // Height: ref.offsetHeight, + // xPosition: position.x + // }; + // } + // return url; + // }); - const newUpdateSignPos = getPlaceHolder.map((obj, ind) => { - if (obj.pageNumber === pageNumber) { - return { ...obj, pos: addSignPos }; - } - return obj; - }); + // const newUpdateSignPos = getPlaceHolder.map((obj, ind) => { + // if (obj.pageNumber === pageNumber) { + // return { ...obj, pos: addSignPos }; + // } + // return obj; + // }); - const newUpdateSigner = signerPos.map((obj, ind) => { - if (obj.signerObjId === signerId) { - return { ...obj, placeHolder: newUpdateSignPos }; - } - return obj; - }); + // const newUpdateSigner = signerPos.map((obj, ind) => { + // if (obj.signerObjId === signerId) { + // return { ...obj, placeHolder: newUpdateSignPos }; + // } + // return obj; + // }); - setSignerPos(newUpdateSigner); - } else { - const getXYdata = getPageNumer[0].pos; + // setSignerPos(newUpdateSigner); + // } else { + // const getXYdata = getPageNumer[0].pos; - const getPosData = getXYdata; + // const getPosData = getXYdata; - const addSignPos = getPosData.map((url, ind) => { - if (url.key === key) { - return { - ...url, - Width: ref.offsetWidth, - Height: ref.offsetHeight - }; - } - return url; - }); + // const addSignPos = getPosData.map((url, ind) => { + // if (url.key === key) { + // return { + // ...url, + // Width: ref.offsetWidth, + // Height: ref.offsetHeight + // }; + // } + // return url; + // }); - const newUpdateSignPos = getPlaceHolder.map((obj, ind) => { - if (obj.pageNumber === pageNumber) { - return { ...obj, pos: addSignPos }; - } - return obj; - }); + // const newUpdateSignPos = getPlaceHolder.map((obj, ind) => { + // if (obj.pageNumber === pageNumber) { + // return { ...obj, pos: addSignPos }; + // } + // return obj; + // }); - const newUpdateSigner = signerPos.map((obj, ind) => { - if (obj.signerObjId === signerId) { - return { ...obj, placeHolder: newUpdateSignPos }; - } - return obj; - }); + // const newUpdateSigner = signerPos.map((obj, ind) => { + // if (obj.signerObjId === signerId) { + // return { ...obj, placeHolder: newUpdateSignPos }; + // } + // return obj; + // }); - setSignerPos(newUpdateSigner); - } - } - } - }; + // setSignerPos(newUpdateSigner); + // } + // } + // } + // }; //function for get pdf page details const pageDetails = async (pdf) => { @@ -907,7 +950,7 @@ function PdfRequestFiles() { )} -
+
{/* this modal is used to show decline alert */} 500 && "20px", - marginRight: pdfOriginalWidth > 500 && "20px" + marginLeft: !isMobile && pdfOriginalWidth > 500 && "20px", + marginRight: !isMobile && pdfOriginalWidth > 500 && "20px" }} + ref={divRef} > {/* this modal is used show this document is already sign */} @@ -1017,28 +1061,30 @@ function PdfRequestFiles() { pdfUrl={pdfUrl} alreadySign={alreadySign} /> - - + {containerWH && ( + + )}
diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js index 9a1a45f08..1d1eaf6d3 100644 --- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js +++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js @@ -75,6 +75,7 @@ function SignYourSelf() { const [tourStatus, setTourStatus] = useState([]); const [noData, setNoData] = useState(false); const [contractName, setContractName] = useState(""); + const [containerWH, setContainerWH] = useState({}); const [showAlreadySignDoc, setShowAlreadySignDoc] = useState({ status: false }); @@ -91,6 +92,7 @@ function SignYourSelf() { isOver: !!monitor.isOver() }) }); + const isMobile = window.innerWidth < 767; const pdfRef = useRef(); @@ -178,6 +180,10 @@ function SignYourSelf() { if (divRef.current) { const pdfWidth = pdfNewWidthFun(divRef); setPdfNewWidth(pdfWidth); + setContainerWH({ + width: divRef.current.offsetWidth, + height: divRef.current.offsetHeight + }); } }, [divRef.current]); @@ -490,9 +496,7 @@ function SignYourSelf() { pageNo ) => { let singleSign; - - const isMobile = window.innerWidth < 767; - const newWidth = window.innerWidth - 32; + const newWidth = containerWH.width; const scale = isMobile ? pdfOriginalWidth / newWidth : 1; const imgWidth = xyPosData ? xyPosData.Width : 150; if (xyPostion.length === 1 && xyPostion[0].pos.length === 1) { @@ -508,9 +512,7 @@ function SignYourSelf() { docId: documentId, sign: { Base64: base64Url, - Left: isMobile - ? xyPosData.xPosition * scale + 43 - : xyPosData.xPosition, + Left: isMobile ? xyPosData.xPosition * scale : xyPosData.xPosition, Bottom: bottomY, Width: xyPosData.Width ? xyPosData.Width * scale : 150 * scale, Height: height * scale, @@ -823,7 +825,7 @@ function SignYourSelf() { ) : noData ? ( ) : ( -
+
{/* this component used for UI interaction and show their functionality */} {pdfLoadFail && !checkTourStatus && ( 500 && "20px", - marginRight: pdfOriginalWidth > 500 && "20px" + marginLeft: !isMobile && pdfOriginalWidth > 500 && "20px", + marginRight: !isMobile && pdfOriginalWidth > 500 && "20px" }} > {/* this modal is used show this document is already sign */} @@ -937,34 +939,36 @@ function SignYourSelf() { isSignYourself={true} /> - {/* className="hidePdf" */} -
- +
+ {containerWH && ( + + )}
diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js index 1ef480022..35bf1c1d2 100644 --- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js +++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js @@ -44,13 +44,15 @@ function RenderPdf({ pdfLoadFail, setSignerPos, setXyPostion, - index + index, + containerWH }) { const isMobile = window.innerWidth < 767; - const newWidth = window.innerWidth; + const newWidth = containerWH.width; const scale = isMobile ? pdfOriginalWidth / newWidth : 1; //check isGuestSigner is present in local if yes than handle login flow header in mobile view const isGuestSigner = localStorage.getItem("isGuestSigner"); + // handle signature block width and height according to screen const posWidth = (pos) => { let width; @@ -96,7 +98,7 @@ function RenderPdf({ if (isMobile) { //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale if (!pos.isMobile) { - return pos.xPosition / scale - 20; + return pos.xPosition / scale - 32; } //pos.isMobile true -- placeholder save from mobile view(small device) handle position in mobile view(small screen) view divided by scale else { @@ -106,7 +108,7 @@ function RenderPdf({ //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale if (pos.isMobile) { - return pos.scale && pos.xPosition * pos.scale + 50; + return pos.scale && pos.xPosition * pos.scale; } //else placeholder save from desktop(bigscreen) and show in desktop(bigscreen) else { @@ -129,7 +131,7 @@ function RenderPdf({ //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale if (pos.isMobile) { - return pos.scale && pos.yPosition * pos.scale + 50; + return pos.scale && pos.yPosition * pos.scale; } //else placeholder save from desktop(bigscreen) and show in desktop(bigscreen) else { @@ -181,7 +183,9 @@ function RenderPdf({ position, signerPos, pageNumber, - setSignerPos + setSignerPos, + pdfOriginalWidth, + containerWH ); }} lockAspectRatio={pos.Width && 2.5} @@ -247,6 +251,16 @@ function RenderPdf({ ); }; + //handled x-position in mobile view saved from big screen or small screen + const xPos = (pos) => { + //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale + if (!pos.isMobile) { + return pos.xPosition / scale; + } else { + return pos.xPosition * (pos.scale / scale); + } + }; + return ( <> {isMobile && scale ? ( @@ -318,7 +332,9 @@ function RenderPdf({ position, xyPostion, index, - setXyPostion + setXyPostion, + pdfOriginalWidth, + containerWH ); }} size={{ @@ -331,10 +347,7 @@ function RenderPdf({ //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divide by scale //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale default={{ - x: !pos.isMobile - ? pos.xPosition / scale - : pos.xPosition * (pos.scale / scale) - 50, - + x: xPos(pos), y: !pos.isMobile ? pos.yPosition / scale : pos.yPosition * (pos.scale / scale) @@ -398,6 +411,16 @@ function RenderPdf({ placeData.pos.map((pos) => { return ( @@ -540,7 +565,9 @@ function RenderPdf({ position, xyPostion, index, - setXyPostion + setXyPostion, + pdfOriginalWidth, + containerWH ); }} > @@ -634,8 +661,8 @@ function RenderPdf({ { @@ -719,7 +746,9 @@ function RenderPdf({ position, xyPostion, index, - setXyPostion + setXyPostion, + pdfOriginalWidth, + containerWH ); }} key={pos.key} @@ -738,8 +767,7 @@ function RenderPdf({ default={{ x: pos.isMobile - ? pos.scale && - pos.xPosition * pos.scale + 20 + ? pos.scale && pos.xPosition * pos.scale : pos.xPosition, y: pos.isMobile ? pos.scale && pos.yPosition * pos.scale @@ -781,69 +809,6 @@ function RenderPdf({ )}
- // ) : ( - // { - // setIsSignPad(true); - // setSignKey(pos.key); - // setIsStamp(pos.isStamp); - // }} - // > - //
- // {pos.isStamp ? "stamp" : "signature"} - //
- // ) ); })} @@ -927,7 +892,9 @@ function RenderPdf({ position, signerPos, pageNumber, - setSignerPos + setSignerPos, + pdfOriginalWidth, + containerWH ); }} > @@ -1022,7 +989,9 @@ function RenderPdf({ position, xyPostion, index, - setXyPostion + setXyPostion, + pdfOriginalWidth, + containerWH ); }} onClick={() => { diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js index a3b94e72b..83e8fa4c0 100644 --- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js +++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js @@ -57,6 +57,7 @@ function PlaceHolderSign() { const [noData, setNoData] = useState(false); const [pdfOriginalWidth, setPdfOriginalWidth] = useState(); const [contractName, setContractName] = useState(""); + const [containerWH, setContainerWH] = useState(); const { docId } = useParams(); const signRef = useRef(null); const dragRef = useRef(null); @@ -82,8 +83,6 @@ function PlaceHolderSign() { "#ffffcc" ]; const isMobile = window.innerWidth < 767; - const newWidth = window.innerWidth; - const scale = pdfOriginalWidth / newWidth; const [{ isOver }, drop] = useDrop({ accept: "BOX", drop: (item, monitor) => addPositionOfSignature(item, monitor), @@ -170,6 +169,10 @@ function PlaceHolderSign() { if (divRef.current) { const pdfWidth = pdfNewWidthFun(divRef); setPdfNewWidth(pdfWidth); + setContainerWH({ + width: divRef.current.offsetWidth, + height: divRef.current.offsetHeight + }); } }, [divRef.current]); //function for get document details @@ -254,6 +257,8 @@ function PlaceHolderSign() { }; const getSignerPos = (item, monitor) => { + const newWidth = containerWH.width; + const scale = pdfOriginalWidth / newWidth; const key = Math.floor(1000 + Math.random() * 9000); let filterSignerPos = signerPos.filter( (data) => data.signerObjId === signerObjId @@ -753,7 +758,7 @@ function PlaceHolderSign() { ) : noData ? ( ) : ( -
+
{/* this component used for UI interaction and show their functionality */} {!checkTourStatus && ( //this tour component used in your html component where you want to put @@ -780,9 +785,10 @@ function PlaceHolderSign() { {/* pdf render view */}
500 && "20px", - marginRight: pdfOriginalWidth > 500 && "20px" + marginLeft: !isMobile && pdfOriginalWidth > 500 && "20px", + marginRight: !isMobile && pdfOriginalWidth > 500 && "20px" }} + ref={divRef} > {/* this modal is used show alert set placeholder for all signers before send mail */} @@ -929,25 +935,28 @@ function PlaceHolderSign() { dataTut4="reactourFour" />
- + {containerWH && ( + + )}
diff --git a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js index d49ff5b6a..6f2df3890 100644 --- a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js +++ b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js @@ -21,7 +21,8 @@ import { contractDocument, urlValidator, multiSignEmbed, - embedDocId + embedDocId, + signPdfFun } from "../utils/Utils"; import Tour from "reactour"; import Signedby from "./component/signedby"; @@ -448,8 +449,28 @@ function EmbedPdfImage() { "" ); - //function for call to embed signature in pdf and get digital signature pdf - signPdfFun(newImgUrl, docId, data, pdfBase64, pageNo); + //function for embed signature in pdf and get digital signature pdf + signPdfFun( + newImgUrl, + docId, + signerUserId, + pdfOriginalWidth, + xyPostion, + data, + pdfBase64, + pageNo, + containerWH + ) + .then((res) => { + if (res && res.status === "success") { + getDocumentDetails(); + } else { + alert("something went wrong"); + } + }) + .catch((err) => { + alert("something went wrong!"); + }); }) .catch((error) => { console.error("Error:", error); @@ -468,7 +489,25 @@ function EmbedPdfImage() { pdfOriginalWidth, false ); - signPdfFun(pdfBytes, docId); + //function for embed signature in pdf and get digital signature pdf + signPdfFun( + pdfBytes, + docId, + signerUserId, + pdfOriginalWidth, + xyPostion, + containerWH + ) + .then((res) => { + if (res && res.status === "success") { + getDocumentDetails(); + } else { + alert("something went wrong!"); + } + }) + .catch((err) => { + alert("something went wrong in query"); + }); } setIsSignPad(false); setXyPostion([]); @@ -476,127 +515,127 @@ function EmbedPdfImage() { } //function for call cloud function signPdf and generate digital signature - const signPdfFun = async ( - base64Url, - docId, - xyPosData, - pdfBase64Url, - pageNo - ) => { - let singleSign; - const isMobile = window.innerWidth < 767; - const newWidth = window.innerWidth; - const scale = isMobile ? pdfOriginalWidth / newWidth : 1; - const height = xyPosData ? xyPosData.Height : 60; - const xPos = (pos) => { - //checking both condition mobile and desktop view - if (isMobile) { - //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale - if (pos.isMobile) { - const x = pos.xPosition * (pos.scale / scale); - return x * scale + 50; - } else { - const x = pos.xPosition / scale; - return x * scale; - } - } else { - //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale - if (pos.isMobile) { - const x = pos.xPosition * pos.scale + 50; - return x; - } else { - return pos.xPosition; - } - } - }; + // const signPdfFun = async ( + // base64Url, + // docId, + // xyPosData, + // pdfBase64Url, + // pageNo + // ) => { + // let singleSign; + // const isMobile = window.innerWidth < 767; + // const newWidth = window.innerWidth; + // const scale = isMobile ? pdfOriginalWidth / newWidth : 1; + // const height = xyPosData ? xyPosData.Height : 60; + // const xPos = (pos) => { + // //checking both condition mobile and desktop view + // if (isMobile) { + // //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale + // if (pos.isMobile) { + // const x = pos.xPosition * (pos.scale / scale); + // return x * scale + 50; + // } else { + // const x = pos.xPosition / scale; + // return x * scale; + // } + // } else { + // //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale + // if (pos.isMobile) { + // const x = pos.xPosition * pos.scale + 50; + // return x; + // } else { + // return pos.xPosition; + // } + // } + // }; - const yBottom = (pos) => { - let yPosition; - //checking both condition mobile and desktop view + // const yBottom = (pos) => { + // let yPosition; + // //checking both condition mobile and desktop view - if (isMobile) { - //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale - if (pos.isMobile) { - const y = pos.yBottom * (pos.scale / scale); - yPosition = pos.isDrag - ? y * scale - height - : pos.firstYPos - ? y * scale - height + pos.firstYPos - : y * scale - height; - return yPosition; - } else { - const y = pos.yBottom / scale; + // if (isMobile) { + // //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale + // if (pos.isMobile) { + // const y = pos.yBottom * (pos.scale / scale); + // yPosition = pos.isDrag + // ? y * scale - height + // : pos.firstYPos + // ? y * scale - height + pos.firstYPos + // : y * scale - height; + // return yPosition; + // } else { + // const y = pos.yBottom / scale; - yPosition = pos.isDrag - ? y * scale - height - : pos.firstYPos - ? y * scale - height + pos.firstYPos - : y * scale - height; - return yPosition; - } - } else { - //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale - if (pos.isMobile) { - const y = pos.yBottom * pos.scale; + // yPosition = pos.isDrag + // ? y * scale - height + // : pos.firstYPos + // ? y * scale - height + pos.firstYPos + // : y * scale - height; + // return yPosition; + // } + // } else { + // //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale + // if (pos.isMobile) { + // const y = pos.yBottom * pos.scale; - yPosition = pos.isDrag - ? y - height - : pos.firstYPos - ? y - height + pos.firstYPos - : y - height; - return yPosition; - } else { - yPosition = pos.isDrag - ? pos.yBottom - height - : pos.firstYPos - ? pos.yBottom - height + pos.firstYPos - : pos.yBottom - height; - return yPosition; - } - } - }; - if (xyPostion.length === 1 && xyPostion[0].pos.length === 1) { - const bottomY = yBottom(xyPosData); - singleSign = { - pdfFile: pdfBase64Url, - docId: docId, - userId: signerUserId, - sign: { - Base64: base64Url, - Left: xPos(xyPosData), - Bottom: bottomY, - Width: xyPosData.Width ? xyPosData.Width : 150, - Height: height, - Page: pageNo - } - }; - } else if (xyPostion.length > 0 && xyPostion[0].pos.length > 0) { - singleSign = { - pdfFile: base64Url, - docId: docId, - userId: signerUserId - }; - } + // yPosition = pos.isDrag + // ? y - height + // : pos.firstYPos + // ? y - height + pos.firstYPos + // : y - height; + // return yPosition; + // } else { + // yPosition = pos.isDrag + // ? pos.yBottom - height + // : pos.firstYPos + // ? pos.yBottom - height + pos.firstYPos + // : pos.yBottom - height; + // return yPosition; + // } + // } + // }; + // if (xyPostion.length === 1 && xyPostion[0].pos.length === 1) { + // const bottomY = yBottom(xyPosData); + // singleSign = { + // pdfFile: pdfBase64Url, + // docId: docId, + // userId: signerUserId, + // sign: { + // Base64: base64Url, + // Left: xPos(xyPosData), + // Bottom: bottomY, + // Width: xyPosData.Width ? xyPosData.Width : 150, + // Height: height, + // Page: pageNo + // } + // }; + // } else if (xyPostion.length > 0 && xyPostion[0].pos.length > 0) { + // singleSign = { + // pdfFile: base64Url, + // docId: docId, + // userId: signerUserId + // }; + // } - await axios - .post(`${localStorage.getItem("baseUrl")}functions/signPdf`, singleSign, { - headers: { - "Content-Type": "application/json", - "X-Parse-Application-Id": localStorage.getItem("parseAppId"), - sessionToken: localStorage.getItem("accesstoken") - } - }) - .then((Listdata) => { - const json = Listdata.data; + // await axios + // .post(`${localStorage.getItem("baseUrl")}functions/signPdf`, singleSign, { + // headers: { + // "Content-Type": "application/json", + // "X-Parse-Application-Id": localStorage.getItem("parseAppId"), + // sessionToken: localStorage.getItem("accesstoken") + // } + // }) + // .then((Listdata) => { + // const json = Listdata.data; - if (json.result.data) { - getDocumentDetails(); - } - }) - .catch((err) => { - alert("something went wrong"); - }); - }; + // if (json.result.data) { + // getDocumentDetails(); + // } + // }) + // .catch((err) => { + // alert("something went wrong"); + // }); + // }; //function for change page function changePage(offset) { @@ -924,9 +963,10 @@ function EmbedPdfImage() { {/* pdf render view */}
500 && "20px", - marginRight: !isGuestSigner && pdfOriginalWidth > 500 && "20px" + marginLeft: !isMobile && pdfOriginalWidth > 500 && "20px", + marginRight: !isMobile && pdfOriginalWidth > 500 && "20px" }} + ref={divRef} > {/* this modal is used show this document is already sign */} - - + {containerWH && ( + + )}
{!pdfUrl ? ( diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index dd5f6161b..184fd437c 100644 --- a/microfrontends/SignDocuments/src/utils/Utils.js +++ b/microfrontends/SignDocuments/src/utils/Utils.js @@ -495,11 +495,16 @@ export const handleImageResize = ( position, signerPos, pageNumber, - setSignerPos + setSignerPos, + pdfOriginalWidth, + containerWH ) => { const filterSignerPos = signerPos.filter( (data) => data.signerObjId === signerId ); + const isMobile = window.innerWidth < 767; + const newWidth = containerWH; + const scale = isMobile ? pdfOriginalWidth / newWidth : 1; if (filterSignerPos.length > 0) { const getPlaceHolder = filterSignerPos[0].placeHolder; const getPageNumer = getPlaceHolder.filter( @@ -516,8 +521,10 @@ export const handleImageResize = ( if (url.key === key) { return { ...url, - Width: ref.offsetWidth, - Height: ref.offsetHeight, + Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth, + Height: !url.isMobile + ? ref.offsetHeight * scale + : ref.offsetHeight, xPosition: position.x }; } @@ -548,8 +555,10 @@ export const handleImageResize = ( if (url.key === key) { return { ...url, - Width: ref.offsetWidth, - Height: ref.offsetHeight + Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth, + Height: !url.isMobile + ? ref.offsetHeight * scale + : ref.offsetHeight }; } return url; @@ -637,3 +646,135 @@ export const handleSignYourselfImageResize = ( setXyPostion(newUpdateUrl); } }; + +//function for call cloud function signPdf and generate digital signature +export const signPdfFun = async ( + base64Url, + documentId, + signerObjectId, + pdfOriginalWidth, + signerData, + xyPosData, + pdfBase64Url, + pageNo, + containerWH +) => { + let signgleSign; + const isMobile = window.innerWidth < 767; + const newWidth = containerWH.width; + const scale = isMobile ? pdfOriginalWidth / newWidth : 1; + if (signerData && signerData.length === 1 && signerData[0].pos.length === 1) { + const height = xyPosData.Height ? xyPosData.Height : 60; + + const xPos = (pos) => { + //checking both condition mobile and desktop view + if (isMobile) { + //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale + if (pos.isMobile) { + const x = pos.xPosition * (pos.scale / scale); + return x * scale; + } else { + const x = pos.xPosition / scale; + return x * scale; + } + } else { + //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale + if (pos.isMobile) { + const x = pos.xPosition * pos.scale; + return x; + } else { + return pos.xPosition; + } + } + }; + const yBottom = (pos) => { + let yPosition; + //checking both condition mobile and desktop view + + if (isMobile) { + //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale + if (pos.isMobile) { + const y = pos.yBottom * (pos.scale / scale); + yPosition = pos.isDrag + ? y * scale - height * scale + : pos.firstYPos + ? y * scale - height * scale + pos.firstYPos + : y * scale - height * scale; + return yPosition; + } else { + const y = pos.yBottom / scale; + + yPosition = pos.isDrag + ? y * scale - height + : pos.firstYPos + ? y * scale - height + pos.firstYPos + : y * scale - height; + return yPosition; + } + } else { + //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale + if (pos.isMobile) { + const y = pos.yBottom * pos.scale; + yPosition = pos.isDrag + ? y - height + : pos.firstYPos + ? y - height + pos.firstYPos + : y - height; + return yPosition; + } else { + yPosition = pos.isDrag + ? pos.yBottom - height + : pos.firstYPos + ? pos.yBottom - height + pos.firstYPos + : pos.yBottom - height; + return yPosition; + } + } + }; + const bottomY = yBottom(xyPosData); + signgleSign = { + pdfFile: pdfBase64Url, + docId: documentId, + userId: signerObjectId, + sign: { + Base64: base64Url, + Left: xPos(xyPosData), + Bottom: bottomY, + Width: xyPosData.Width ? xyPosData.Width : 150, + Height: height, + Page: pageNo + } + }; + } else if ( + signerData && + signerData.length > 0 && + signerData[0].pos.length > 0 + ) { + signgleSign = { + pdfFile: base64Url, + docId: documentId, + userId: signerObjectId + }; + } + + const response = await axios + .post(`${localStorage.getItem("baseUrl")}functions/signPdf`, signgleSign, { + headers: { + "Content-Type": "application/json", + "X-Parse-Application-Id": localStorage.getItem("parseAppId"), + sessionToken: localStorage.getItem("accesstoken") + } + }) + .then((Listdata) => { + const json = Listdata.data; + const res = json.result; + console.log("res", res); + return res; + }) + .catch((err) => { + console.log("axois err ", err); + alert("something went wrong"); + }); + + return response; +}; From 65ec4e78adf142046699d56b3e01bfa13e27cc62 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Mon, 4 Dec 2023 11:56:56 +0530 Subject: [PATCH 008/111] update folder creation --- .../src/Component/LegaDrive/LegaDrive.js | 27 +++++++++++++++---- 1 file changed, 22 insertions(+), 5 deletions(-) diff --git a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js index db0c94425..e821f3616 100644 --- a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js +++ b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js @@ -25,8 +25,15 @@ function PdfFile() { }); const [docId, setDocId] = useState(); const [handleError, setHandleError] = useState(); - const [folderName, setFolderName] = useState([]); + const currentUser = + localStorage.getItem( + `Parse/${localStorage.getItem("parseAppId")}/currentUser` + ) && + localStorage.getItem( + `Parse/${localStorage.getItem("parseAppId")}/currentUser` + ); + const jsonCurrentUser = JSON.parse(currentUser); useEffect(() => { if (docId) { @@ -151,22 +158,32 @@ function PdfFile() { setIsFolderLoader(true); const getParentObjId = folderName[folderName.length - 1]; - const isParentId = getParentObjId && getParentObjId.objectId; + const parentId = getParentObjId && getParentObjId.objectId; let data; - if (isParentId) { + if (parentId) { data = { Name: newFolderName, Type: "Folder", Folder: { __type: "Pointer", className: `${localStorage.getItem("_appName")}_Document`, - objectId: isParentId + objectId: parentId + }, + CreatedBy: { + __type: "Pointer", + className: "_User", + objectId: jsonCurrentUser.objectId } }; } else { data = { Name: newFolderName, - Type: "Folder" + Type: "Folder", + CreatedBy: { + __type: "Pointer", + className: "_User", + objectId: jsonCurrentUser.objectId + } }; } From 92dc13185bcdd6ae8677008021f231369ae81398 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Mon, 4 Dec 2023 12:16:06 +0530 Subject: [PATCH 009/111] update folder creation query --- apps/OpenSign/src/components/TreeWidget.js | 2 ++ apps/OpenSignServer/cloud/parsefunction/getDrive.js | 4 ++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/OpenSign/src/components/TreeWidget.js b/apps/OpenSign/src/components/TreeWidget.js index b028ffb62..16326293f 100644 --- a/apps/OpenSign/src/components/TreeWidget.js +++ b/apps/OpenSign/src/components/TreeWidget.js @@ -472,6 +472,8 @@ const TreeWidget = (props) => { props.schema.data.FolderTypeField, props.schema.data.FolderTypeValue ); + const currentUser = Parse.User.current(); + folder.set("CreatedBy", Parse.User.createWithoutData(currentUser.id)); if (tabList.length > 0) { let len = tabList.length - 1; folder.set(props.schema.data.ParentFolderField, { diff --git a/apps/OpenSignServer/cloud/parsefunction/getDrive.js b/apps/OpenSignServer/cloud/parsefunction/getDrive.js index 5c0d31a8e..1813bc069 100644 --- a/apps/OpenSignServer/cloud/parsefunction/getDrive.js +++ b/apps/OpenSignServer/cloud/parsefunction/getDrive.js @@ -16,9 +16,9 @@ export default async function getDrive(request) { if (userId) { let url; if (docId) { - url = `${classUrl}?where={"Folder":{"__type":"Pointer","className":"contracts_Document","objectId":"${docId}"},"$or":[{"CreatedBy":{"$exists":false}},{"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"${userId}"}}]}&include=ExtUserPtr,Signers,Folder`; + url = `${classUrl}?where={"Folder":{"__type":"Pointer","className":"contracts_Document","objectId":"${docId}"},"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"${userId}"}}&include=ExtUserPtr,Signers,Folder`; } else { - url = `${classUrl}?where={"Folder":{"$exists":false},"$or":[{"CreatedBy":{"$exists":false}},{"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"${userId}"}}]}&include=ExtUserPtr,Signers`; + url = `${classUrl}?where={"Folder":{"$exists":false},"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"${userId}"}}&include=ExtUserPtr,Signers`; } try { const res = await axios.get(url, { From 9ae033424915cc244d7774ca6e493ada1495f993 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Mon, 4 Dec 2023 16:06:00 +0530 Subject: [PATCH 010/111] update folder component --- apps/OpenSign/src/components/TreeWidget.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/apps/OpenSign/src/components/TreeWidget.js b/apps/OpenSign/src/components/TreeWidget.js index 16326293f..61c737bf2 100644 --- a/apps/OpenSign/src/components/TreeWidget.js +++ b/apps/OpenSign/src/components/TreeWidget.js @@ -472,8 +472,6 @@ const TreeWidget = (props) => { props.schema.data.FolderTypeField, props.schema.data.FolderTypeValue ); - const currentUser = Parse.User.current(); - folder.set("CreatedBy", Parse.User.createWithoutData(currentUser.id)); if (tabList.length > 0) { let len = tabList.length - 1; folder.set(props.schema.data.ParentFolderField, { @@ -700,7 +698,7 @@ const TreeWidget = (props) => { ))}
- {editable && ( + {/* {editable && ( { selectFolderHandle(); }} /> - )} + )} */} {isAddField && !loader && !editable && ( {
- {fldr[props.schema.data.FolderTypeField] === + {/* {fldr[props.schema.data.FolderTypeField] === props.schema.data.FolderTypeValue && ( { aria-hidden="true" > - )} + )} */} ) )} From 57843780732422c8c0acb00e6e5ef4812cf11cdb Mon Sep 17 00:00:00 2001 From: prafull-opensignlabs <93375423+prafull-opensignlabs@users.noreply.github.com> Date: Mon, 4 Dec 2023 16:17:28 +0530 Subject: [PATCH 011/111] Update TreeWidget.js --- apps/OpenSign/src/components/TreeWidget.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/apps/OpenSign/src/components/TreeWidget.js b/apps/OpenSign/src/components/TreeWidget.js index 61c737bf2..ecbce7af4 100644 --- a/apps/OpenSign/src/components/TreeWidget.js +++ b/apps/OpenSign/src/components/TreeWidget.js @@ -472,6 +472,8 @@ const TreeWidget = (props) => { props.schema.data.FolderTypeField, props.schema.data.FolderTypeValue ); + const currentUser = Parse.User.current(); + folder.set("CreatedBy", Parse.User.createWithoutData(currentUser.id)); if (tabList.length > 0) { let len = tabList.length - 1; folder.set(props.schema.data.ParentFolderField, { From 17422427a87766b1445b2cd8348bf28ca28d47fa Mon Sep 17 00:00:00 2001 From: prafull-opensignlabs <93375423+prafull-opensignlabs@users.noreply.github.com> Date: Mon, 4 Dec 2023 17:33:33 +0530 Subject: [PATCH 012/111] Update index.html --- apps/OpenSign/public/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/OpenSign/public/index.html b/apps/OpenSign/public/index.html index 83788c7ff..ac60d16fd 100644 --- a/apps/OpenSign/public/index.html +++ b/apps/OpenSign/public/index.html @@ -31,7 +31,7 @@ - Open sign + Opensign™ @@ -50,4 +50,4 @@ --> - \ No newline at end of file + From 7165ed82f5a022487fdd5ad49509ef2d66cb46c9 Mon Sep 17 00:00:00 2001 From: prafull-opensignlabs <93375423+prafull-opensignlabs@users.noreply.github.com> Date: Mon, 4 Dec 2023 17:55:16 +0530 Subject: [PATCH 013/111] Update_appname --- apps/OpenSign/public/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/OpenSign/public/index.html b/apps/OpenSign/public/index.html index ac60d16fd..c12d8c701 100644 --- a/apps/OpenSign/public/index.html +++ b/apps/OpenSign/public/index.html @@ -31,7 +31,7 @@ - Opensign™ + OpenSign™ From 2544651ff1983dacaa5a24fc05982590f881cf24 Mon Sep 17 00:00:00 2001 From: prafull-opensignlabs <93375423+prafull-opensignlabs@users.noreply.github.com> Date: Mon, 4 Dec 2023 18:13:35 +0530 Subject: [PATCH 014/111] fix: continuous loader on action btn in report --- apps/OpenSign/src/primitives/GetReportDisplay.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/OpenSign/src/primitives/GetReportDisplay.js b/apps/OpenSign/src/primitives/GetReportDisplay.js index 0be8d98ca..22be8a6c0 100644 --- a/apps/OpenSign/src/primitives/GetReportDisplay.js +++ b/apps/OpenSign/src/primitives/GetReportDisplay.js @@ -224,7 +224,7 @@ const ReportTable = ({ {act?.btnIcon && ( Date: Tue, 5 Dec 2023 10:51:58 +0530 Subject: [PATCH 015/111] fix multiple signature location issue after complete signature in signyourself flow --- .../SignDocuments/src/utils/Utils.js | 35 ++++++++++++------- 1 file changed, 22 insertions(+), 13 deletions(-) diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index 184fd437c..c571626cb 100644 --- a/microfrontends/SignDocuments/src/utils/Utils.js +++ b/microfrontends/SignDocuments/src/utils/Utils.js @@ -348,7 +348,8 @@ export const multiSignEmbed = async ( pngUrl, pdfDoc, pdfOriginalWidth, - signyourself + signyourself, + containerWH ) => { for (let i = 0; i < pngUrl.length; i++) { const pageNo = pngUrl[i].pageNumber; @@ -385,12 +386,12 @@ export const multiSignEmbed = async ( const imgHeight = imgUrlList[id].Height ? imgUrlList[id].Height : 60; const imgWidth = imgUrlList[id].Width ? imgUrlList[id].Width : 150; const isMobile = window.innerWidth < 767; - const newWidth = window.innerWidth - 32; + const newWidth = containerWH.width; const scale = isMobile ? pdfOriginalWidth / newWidth : 1; const xPos = (pos) => { if (signyourself) { if (isMobile) { - return imgUrlList[id].xPosition * scale + 43; + return imgUrlList[id].xPosition * scale; } else { return imgUrlList[id].xPosition; } @@ -400,7 +401,7 @@ export const multiSignEmbed = async ( //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale if (pos.isMobile) { const x = pos.xPosition * (pos.scale / scale); - return x * scale + 50; + return x * scale; } else { const x = pos.xPosition / scale; return x * scale; @@ -408,7 +409,7 @@ export const multiSignEmbed = async ( } else { //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale if (pos.isMobile) { - const x = pos.xPosition * pos.scale + 50; + const x = pos.xPosition * pos.scale; return x; } else { return pos.xPosition; @@ -435,9 +436,9 @@ export const multiSignEmbed = async ( //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale if (pos.isMobile) { const y = pos.yPosition * (pos.scale / scale); - return page.getHeight() - y * scale - imgHeight; + return page.getHeight() - y * scale - imgHeight * scale; } else { - return page.getHeight() - y * scale - imgHeight; + return page.getHeight() - y * scale - imgHeight * scale; } } else { //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale @@ -519,6 +520,7 @@ export const handleImageResize = ( const getPosData = getXYdata; const addSignPos = getPosData.map((url, ind) => { if (url.key === key) { + console.log("url", url); return { ...url, Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth, @@ -592,22 +594,29 @@ export const handleSignYourselfImageResize = ( position, xyPostion, index, - setXyPostion + setXyPostion, + pdfOriginalWidth, + containerWH ) => { const updateFilter = xyPostion[index].pos.filter( (data) => data.key === key && data.Width && data.Height ); + // console.log(" position.x", position.x) + const isMobile = window.innerWidth < 767; + const newWidth = containerWH; + const scale = isMobile ? pdfOriginalWidth / newWidth : 1; if (updateFilter.length > 0) { const getXYdata = xyPostion[index].pos; const getPosData = getXYdata; const addSign = getPosData.map((url, ind) => { if (url.key === key) { + console.log("url", url); return { ...url, - Width: ref.offsetWidth, - Height: ref.offsetHeight, - xPosition: position.x + Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth, + Height: !url.isMobile ? ref.offsetHeight * scale : ref.offsetHeight, + xPosition: position.xpos }; } return url; @@ -630,8 +639,8 @@ export const handleSignYourselfImageResize = ( if (url.key === key) { return { ...url, - Width: ref.offsetWidth, - Height: ref.offsetHeight + Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth, + Height: !url.isMobile ? ref.offsetHeight * scale : ref.offsetHeight }; } return url; From ac0cdd28cf1e47235c85e38094d50e298e0b3681 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Tue, 5 Dec 2023 12:07:25 +0530 Subject: [PATCH 016/111] feat: mail button on header after sign document in signyourself flow --- .../src/Component/SignYourselfPdf.js | 1 + .../src/Component/component/emailComponent.js | 12 ++++- .../src/Component/component/header.js | 51 +++++++++++++++++-- .../SignDocuments/src/css/signature.css | 11 +++- 4 files changed, 68 insertions(+), 7 deletions(-) diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js index e816f99d6..2d5bb3b2b 100644 --- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js +++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js @@ -989,6 +989,7 @@ function SignYourSelf() { currentSigner={true} alreadySign={pdfUrl ? true : false} isSignYourself={true} + setIsEmail={setIsEmail} /> {/* className="hidePdf" */} diff --git a/microfrontends/SignDocuments/src/Component/component/emailComponent.js b/microfrontends/SignDocuments/src/Component/component/emailComponent.js index cb67fd0b3..9ae70a8da 100644 --- a/microfrontends/SignDocuments/src/Component/component/emailComponent.js +++ b/microfrontends/SignDocuments/src/Component/component/emailComponent.js @@ -68,10 +68,13 @@ function EmailComponent({ if (sendMail.data.result.status === "success") { setIsEmail(false); + setEmailValue(""); + setEmailCount(""); setSuccessEmail(true); setTimeout(() => { setSuccessEmail(false); - }, 3000); + }, 1000); + setIsLoading(false); } else if (sendMail.data.result.status === "error") { setIsLoading(false); @@ -81,6 +84,7 @@ function EmailComponent({ alert("Something went wrong!"); } }; + //function for remove email const removeChip = (index) => { const updateEmailCount = emailCount.filter((data, key) => key !== index); @@ -363,7 +367,11 @@ function EmailComponent({ }} type="button" className="finishBtn" - onClick={() => setIsEmail(false)} + onClick={() => { + setIsEmail(false); + setEmailValue(""); + setEmailCount(""); + }} > Close diff --git a/microfrontends/SignDocuments/src/Component/component/header.js b/microfrontends/SignDocuments/src/Component/component/header.js index d7f4724ed..fe6b0cab0 100644 --- a/microfrontends/SignDocuments/src/Component/component/header.js +++ b/microfrontends/SignDocuments/src/Component/component/header.js @@ -33,7 +33,8 @@ function Header({ currentSigner, dataTut4, alreadySign, - isSignYourself + isSignYourself, + setIsEmail }) { const isMobile = window.innerWidth < 767; const navigate = useNavigate(); @@ -329,9 +330,29 @@ function Header({ ) : ( isSignYourself && ( - - - + <> + + + + setIsEmail(true)} + > +
+ + Mail +
+ + ) )} Download +
) : (
diff --git a/microfrontends/SignDocuments/src/css/signature.css b/microfrontends/SignDocuments/src/css/signature.css index fb97f992e..cfaf4c14c 100644 --- a/microfrontends/SignDocuments/src/css/signature.css +++ b/microfrontends/SignDocuments/src/css/signature.css @@ -8,7 +8,16 @@ .penContainer { width: 460px; } - +.mailBtn{ + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); + padding: 3px 15px !important; + background-color: rgb(79 190 241); + border: none !important; + color: white !important; +} +.mailBtn:hover { + box-shadow: 0 2px 4px rgba(154, 36, 36, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18); +} .signatureBtn { border: 1.5px solid #47a3ad; margin-bottom: 10px; From 428bb3b7c3e9f7e054c6aaad0debf7799156b0e5 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Tue, 5 Dec 2023 13:08:42 +0530 Subject: [PATCH 017/111] fix: design of sent mail message,change variable name emailCount to emailList --- .../src/Component/component/emailComponent.js | 28 ++++++++--------- .../src/Component/component/emailToast.js | 18 +++++++++++ .../src/Component/component/renderPdf.js | 31 ++----------------- .../SignDocuments/src/css/signature.css | 8 +++++ 4 files changed, 43 insertions(+), 42 deletions(-) create mode 100644 microfrontends/SignDocuments/src/Component/component/emailToast.js diff --git a/microfrontends/SignDocuments/src/Component/component/emailComponent.js b/microfrontends/SignDocuments/src/Component/component/emailComponent.js index 9ae70a8da..99b44872d 100644 --- a/microfrontends/SignDocuments/src/Component/component/emailComponent.js +++ b/microfrontends/SignDocuments/src/Component/component/emailComponent.js @@ -20,14 +20,14 @@ function EmailComponent({ pdfName, sender }) { - const [emailCount, setEmailCount] = useState([]); + const [emailList, setEmailList] = useState([]); const [emailValue, setEmailValue] = useState(); const [isLoading, setIsLoading] = useState(false); //function for send email const sendEmail = async () => { setIsLoading(true); let sendMail; - for (let i = 0; i < emailCount.length; i++) { + for (let i = 0; i < emailList.length; i++) { try { const imgPng = "https://qikinnovation.ams3.digitaloceanspaces.com/logo.png"; @@ -44,7 +44,7 @@ function EmailComponent({ let params = { pdfName: pdfName, url: pdfUrl, - recipient: emailCount[i], + recipient: emailList[i], subject: `${sender.name} has signed the doc - ${pdfName}`, from: sender.email, html: @@ -69,7 +69,7 @@ function EmailComponent({ if (sendMail.data.result.status === "success") { setIsEmail(false); setEmailValue(""); - setEmailCount(""); + setEmailList([]); setSuccessEmail(true); setTimeout(() => { setSuccessEmail(false); @@ -87,8 +87,8 @@ function EmailComponent({ //function for remove email const removeChip = (index) => { - const updateEmailCount = emailCount.filter((data, key) => key !== index); - setEmailCount(updateEmailCount); + const updateEmailCount = emailList.filter((data, key) => key !== index); + setEmailList(updateEmailCount); }; //function for get email value const handleEmailValue = (e) => { @@ -99,10 +99,10 @@ function EmailComponent({ //function for save email in array after press enter const handleEnterPress = (e) => { if (e.key === "Enter" && emailValue) { - setEmailCount((prev) => [...prev, emailValue]); + setEmailList((prev) => [...prev, emailValue]); setEmailValue(""); } else if (e === "add" && emailValue) { - setEmailCount((prev) => [...prev, emailValue]); + setEmailList((prev) => [...prev, emailValue]); setEmailValue(""); } }; @@ -253,7 +253,7 @@ function EmailComponent({ > Recipients added here will get a copy of the signed document.

- {emailCount.length > 0 ? ( + {emailList.length > 0 ? ( <>
- {emailCount.map((data, ind) => { + {emailList.map((data, ind) => { return (
- {emailCount.length <= 9 && ( + {emailList.length <= 9 && ( { setIsEmail(false); setEmailValue(""); - setEmailCount(""); + setEmailList([]); }} > Close
) : ( -
-
-
- dp -
- {editmode && ( - { - let files = e.target.files; - fileUpload(files[0]); - }} - /> - )} - {percentage !== 0 && ( -
-
-
-
- {percentage}% +
+
+
+
+ dp +
+ {editmode && ( + { + let files = e.target.files; + fileUpload(files[0]); + }} + /> + )} + {percentage !== 0 && ( +
+
+
+
+ {percentage}% +
+ )} +
+ {localStorage.getItem("_user_role")}
- )} -
- {localStorage.getItem("_user_role")}
-
-
    -
  • - Name:{" "} - {editmode ? ( - SetName(e.target.value)} - /> - ) : ( - {localStorage.getItem("username")} - )} -
    • -
  • - Phone:{" "} - {editmode ? ( - SetPhone(e.target.value)} - value={Phone} - /> - ) : ( - {UserProfile && UserProfile.phone} - )} -
    • -
  • - Email:{" "} - {UserProfile && UserProfile.email} -
    • -
  • - Is Email verified:{" "} - - {UserProfile && UserProfile.emailVerified - ? "Verified" - : "Not verified"} - -
    • -
-
- {editmode ? ( - - ) : ( + Name:{" "} + {editmode ? ( + SetName(e.target.value)} + /> + ) : ( + {localStorage.getItem("username")} + )} + +
  • + Phone:{" "} + {editmode ? ( + SetPhone(e.target.value)} + value={Phone} + /> + ) : ( + {UserProfile && UserProfile.phone} + )} +
    • +
  • + Email:{" "} + {UserProfile && UserProfile.email} +
    • +
  • + Is Email verified:{" "} + + {UserProfile && UserProfile.emailVerified + ? "Verified" + : "Not verified"} + +
    • + +
    + {editmode ? ( + + ) : ( + + )} - )} - +
    )} From 42c6f03f283538c5b17d8f0476e6b0a75890e222 Mon Sep 17 00:00:00 2001 From: prafull-opensignlabs Date: Tue, 5 Dec 2023 13:47:46 +0530 Subject: [PATCH 019/111] remove outline of buttons in profile ui --- apps/OpenSign/src/routes/UserProfile.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/OpenSign/src/routes/UserProfile.js b/apps/OpenSign/src/routes/UserProfile.js index 0ed0e57ee..5a2120375 100644 --- a/apps/OpenSign/src/routes/UserProfile.js +++ b/apps/OpenSign/src/routes/UserProfile.js @@ -247,7 +247,7 @@ function UserProfile() { @@ -257,7 +257,7 @@ function UserProfile() { onClick={() => { setEditMode(true); }} - className="rounded shadow text-white bg-[#e7505a] px-4 py-2 mr-4" + className="rounded shadow focus:outline-none text-white bg-[#e7505a] px-4 py-2 mr-4" > Edit @@ -271,7 +271,7 @@ function UserProfile() { navigate("/changepassword"); } }} - className={`rounded shadow text-white bg-[#3598dc] ${ + className={`rounded shadow focus:outline-none text-white bg-[#3598dc] ${ editmode ? "px-4 py-2 " : "p-2" }`} > From 7495955420c2ede709683ffbbb85909ab7e79622 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Tue, 5 Dec 2023 14:12:12 +0530 Subject: [PATCH 020/111] fix: design of email sent toast message --- .../src/Component/component/emailComponent.js | 8 +++---- .../src/Component/component/emailToast.js | 21 +++++++++++-------- .../src/Component/component/renderPdf.js | 1 - 3 files changed, 16 insertions(+), 14 deletions(-) diff --git a/microfrontends/SignDocuments/src/Component/component/emailComponent.js b/microfrontends/SignDocuments/src/Component/component/emailComponent.js index 99b44872d..5854c8749 100644 --- a/microfrontends/SignDocuments/src/Component/component/emailComponent.js +++ b/microfrontends/SignDocuments/src/Component/component/emailComponent.js @@ -67,13 +67,13 @@ function EmailComponent({ } if (sendMail.data.result.status === "success") { - setIsEmail(false); - setEmailValue(""); - setEmailList([]); setSuccessEmail(true); setTimeout(() => { setSuccessEmail(false); - }, 1000); + setIsEmail(false); + setEmailValue(""); + setEmailList([]); + }, 1500); setIsLoading(false); } else if (sendMail.data.result.status === "error") { diff --git a/microfrontends/SignDocuments/src/Component/component/emailToast.js b/microfrontends/SignDocuments/src/Component/component/emailToast.js index 733672fba..a2779210a 100644 --- a/microfrontends/SignDocuments/src/Component/component/emailToast.js +++ b/microfrontends/SignDocuments/src/Component/component/emailToast.js @@ -3,15 +3,18 @@ import "../../css/signature.css"; function EmailToast({ isShow }) { return ( -
    -
    - - Email sent successfully! - -
    -
    + <> + {isShow && ( +
    +
    + Email sent successfully! +
    +
    + )} + ); } diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js index 8b29ad0d9..c27fe6a94 100644 --- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js +++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js @@ -1,6 +1,5 @@ import React from "react"; import RSC from "react-scrollbars-custom"; -import Toast from "react-bootstrap/Toast"; import { Rnd } from "react-rnd"; import { themeColor } from "../../utils/ThemeColor/backColor"; import { Document, Page, pdfjs } from "react-pdf"; From dec13e8b5fc64334d8b0bca87c5cd336e5b749d0 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Wed, 6 Dec 2023 16:37:59 +0530 Subject: [PATCH 021/111] fix: image resize placeholder location issue in mobile to mobile and desktop to desktop view --- .../src/Component/PdfRequestFiles.js | 225 +----------------- .../src/Component/SignYourselfPdf.js | 11 +- .../src/Component/component/renderPdf.js | 21 +- .../src/Component/placeHolderSign.js | 96 ++++---- .../src/Component/recipientSignPdf.js | 181 +------------- .../SignDocuments/src/utils/Utils.js | 37 +-- 6 files changed, 95 insertions(+), 476 deletions(-) diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js index 2b8a56f71..71f2dc1b3 100644 --- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js +++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js @@ -426,228 +426,6 @@ function PdfRequestFiles() { } } - // //function for call cloud function signPdf and generate digital signature - // const signPdfFun = async ( - // base64Url, - // documentId, - // xyPosData, - // pdfBase64Url, - // pageNo, - // signerData - // ) => { - // let signgleSign; - // const isMobile = window.innerWidth < 767; - // const newWidth = window.innerWidth; - // const scale = isMobile ? pdfOriginalWidth / newWidth : 1; - // if ( - // signerData && - // signerData.length === 1 && - // signerData[0].pos.length === 1 - // ) { - // const height = xyPosData.Height ? xyPosData.Height : 60; - - // const xPos = (pos) => { - // //checking both condition mobile and desktop view - // if (isMobile) { - // //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale - // if (pos.isMobile) { - // const x = pos.xPosition * (pos.scale / scale); - // return x * scale + 50; - // } else { - // const x = pos.xPosition / scale; - // return x * scale; - // } - // } else { - // //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale - // if (pos.isMobile) { - // const x = pos.xPosition * pos.scale + 50; - // return x; - // } else { - // return pos.xPosition; - // } - // } - // }; - - // const yBottom = (pos) => { - // let yPosition; - // //checking both condition mobile and desktop view - - // if (isMobile) { - // //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale - // if (pos.isMobile) { - // const y = pos.yBottom * (pos.scale / scale); - // yPosition = pos.isDrag - // ? y * scale - height - // : pos.firstYPos - // ? y * scale - height + pos.firstYPos - // : y * scale - height; - // return yPosition; - // } else { - // const y = pos.yBottom / scale; - - // yPosition = pos.isDrag - // ? y * scale - height - // : pos.firstYPos - // ? y * scale - height + pos.firstYPos - // : y * scale - height; - // return yPosition; - // } - // } else { - // //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale - // if (pos.isMobile) { - // const y = pos.yBottom * pos.scale; - - // yPosition = pos.isDrag - // ? y - height - // : pos.firstYPos - // ? y - height + pos.firstYPos - // : y - height; - // return yPosition; - // } else { - // yPosition = pos.isDrag - // ? pos.yBottom - height - // : pos.firstYPos - // ? pos.yBottom - height + pos.firstYPos - // : pos.yBottom - height; - // return yPosition; - // } - // } - // }; - // const bottomY = yBottom(xyPosData); - // signgleSign = { - // pdfFile: pdfBase64Url, - // docId: documentId, - // userId: signerObjectId, - // sign: { - // Base64: base64Url, - // Left: xPos(xyPosData), - // Bottom: bottomY, - // Width: xyPosData.Width ? xyPosData.Width : 150, - // Height: height, - // Page: pageNo - // } - // }; - // } else if ( - // xyPosData && - // xyPosData.length > 0 && - // xyPosData[0].pos.length > 0 - // ) { - // signgleSign = { - // pdfFile: base64Url, - // docId: documentId, - // userId: signerObjectId - // }; - // } - - // await axios - // .post( - // `${localStorage.getItem("baseUrl")}functions/signPdf`, - // signgleSign, - // { - // headers: { - // "Content-Type": "application/json", - // "X-Parse-Application-Id": localStorage.getItem("parseAppId"), - // sessionToken: localStorage.getItem("accesstoken") - // } - // } - // ) - // .then((Listdata) => { - // const json = Listdata.data; - - // if (json.result.data) { - // setPdfUrl(json.result.data); - // setIsSigned(true); - // setSignedSigners([]); - // setUnSignedSigners([]); - // getDocumentDetails(); - // } - // }) - // .catch((err) => { - // console.log("axois err ", err); - // alert("something went wrong"); - // }); - // }; - - //function for resize image and update width and height - // const handleImageResize = (ref, key, signerId, position) => { - // const filterSignerPos = signerPos.filter( - // (data) => data.signerObjId === signerId - // ); - // if (filterSignerPos.length > 0) { - // const getPlaceHolder = filterSignerPos[0].placeHolder; - // const getPageNumer = getPlaceHolder.filter( - // (data) => data.pageNumber === pageNumber - // ); - // if (getPageNumer.length > 0) { - // const getXYdata = getPageNumer[0].pos.filter( - // (data, ind) => data.key === key && data.Width && data.Height - // ); - // if (getXYdata.length > 0) { - // const getXYdata = getPageNumer[0].pos; - // const getPosData = getXYdata; - // const addSignPos = getPosData.map((url, ind) => { - // if (url.key === key) { - // return { - // ...url, - // Width: ref.offsetWidth, - // Height: ref.offsetHeight, - // xPosition: position.x - // }; - // } - // return url; - // }); - - // const newUpdateSignPos = getPlaceHolder.map((obj, ind) => { - // if (obj.pageNumber === pageNumber) { - // return { ...obj, pos: addSignPos }; - // } - // return obj; - // }); - - // const newUpdateSigner = signerPos.map((obj, ind) => { - // if (obj.signerObjId === signerId) { - // return { ...obj, placeHolder: newUpdateSignPos }; - // } - // return obj; - // }); - - // setSignerPos(newUpdateSigner); - // } else { - // const getXYdata = getPageNumer[0].pos; - - // const getPosData = getXYdata; - - // const addSignPos = getPosData.map((url, ind) => { - // if (url.key === key) { - // return { - // ...url, - // Width: ref.offsetWidth, - // Height: ref.offsetHeight - // }; - // } - // return url; - // }); - - // const newUpdateSignPos = getPlaceHolder.map((obj, ind) => { - // if (obj.pageNumber === pageNumber) { - // return { ...obj, pos: addSignPos }; - // } - // return obj; - // }); - - // const newUpdateSigner = signerPos.map((obj, ind) => { - // if (obj.signerObjId === signerId) { - // return { ...obj, placeHolder: newUpdateSignPos }; - // } - // return obj; - // }); - - // setSignerPos(newUpdateSigner); - // } - // } - // } - // }; - //function for get pdf page details const pageDetails = async (pdf) => { const load = { @@ -950,7 +728,7 @@ function PdfRequestFiles() {
    )} -
    +
    {/* this modal is used to show decline alert */} 500 && "20px", marginRight: !isMobile && pdfOriginalWidth > 500 && "20px" }} - ref={divRef} > {/* this modal is used show this document is already sign */} diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js index 9f51801f3..f955a6fd3 100644 --- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js +++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js @@ -476,8 +476,10 @@ function SignYourSelf() { pngUrl, pdfDoc, pdfOriginalWidth, - true + true, + containerWH ); + signPdfFun(pdfBytes, documentId); } setIsSignPad(false); @@ -536,14 +538,13 @@ function SignYourSelf() { }) .then((Listdata) => { const json = Listdata.data; - // console.log("json ", json); + setPdfUrl(json.result.data); if (json.result.data) { getDocumentDetails(false); } }) .catch((err) => { - // this.setState({ loading: false }); console.log("axois err ", err); }); }; @@ -825,7 +826,7 @@ function SignYourSelf() { ) : noData ? ( ) : ( -
    +
    {/* this component used for UI interaction and show their functionality */} {pdfLoadFail && !checkTourStatus && ( -
    +
    {containerWH && ( { + setIsResize(true); + }} + onResizeStop={( e, direction, ref, delta, position ) => { + e.stopPropagation(); handleImageResize( ref, pos.key, @@ -459,7 +463,8 @@ function RenderPdf({ pageNumber, setSignerPos, pdfOriginalWidth, - containerWH + containerWH, + setIsResize ); }} > @@ -853,7 +858,10 @@ function RenderPdf({ x: pos.xPosition, y: pos.yPosition }} - onResize={( + onResizeStart={() => { + setIsResize(true); + }} + onResizeStop={( e, direction, ref, @@ -869,7 +877,8 @@ function RenderPdf({ pageNumber, setSignerPos, pdfOriginalWidth, - containerWH + containerWH, + setIsResize ); }} > diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js index 83e8fa4c0..6d0a95b65 100644 --- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js +++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js @@ -64,6 +64,7 @@ function PlaceHolderSign() { const divRef = useRef(null); const [isShowEmail, setIsShowEmail] = useState(false); const [selectedEmail, setSelectedEmail] = useState(false); + const [isResize, setIsResize] = useState(false); const [pdfLoadFail, setPdfLoadFail] = useState({ status: false, type: "load" @@ -402,56 +403,58 @@ function PlaceHolderSign() { //function for set and update x and y postion after drag and drop signature tab const handleStop = (event, dragElement, signerId, key) => { - const containerRect = document - .getElementById("container") - .getBoundingClientRect(); - const signId = signerId ? signerId : signerObjId; - const keyValue = key ? key : dragKey; - const ybottom = containerRect.height - dragElement.y; + if (!isResize) { + const containerRect = document + .getElementById("container") + .getBoundingClientRect(); + const signId = signerId ? signerId : signerObjId; + const keyValue = key ? key : dragKey; + const ybottom = containerRect.height - dragElement.y; - if (keyValue >= 0) { - const filterSignerPos = signerPos.filter( - (data) => data.signerObjId === signId - ); - - if (filterSignerPos.length > 0) { - const getPlaceHolder = filterSignerPos[0].placeHolder; - - const getPageNumer = getPlaceHolder.filter( - (data) => data.pageNumber === pageNumber + if (keyValue >= 0) { + const filterSignerPos = signerPos.filter( + (data) => data.signerObjId === signId ); - if (getPageNumer.length > 0) { - const getXYdata = getPageNumer[0].pos; + if (filterSignerPos.length > 0) { + const getPlaceHolder = filterSignerPos[0].placeHolder; - const getPosData = getXYdata; - const addSignPos = getPosData.map((url, ind) => { - if (url.key === keyValue) { - return { - ...url, - xPosition: dragElement.x, - yPosition: dragElement.y, - isDrag: true, - yBottom: ybottom - }; - } - return url; - }); + const getPageNumer = getPlaceHolder.filter( + (data) => data.pageNumber === pageNumber + ); - const newUpdateSignPos = getPlaceHolder.map((obj, ind) => { - if (obj.pageNumber === pageNumber) { - return { ...obj, pos: addSignPos }; - } - return obj; - }); - const newUpdateSigner = signerPos.map((obj, ind) => { - if (obj.signerObjId === signId) { - return { ...obj, placeHolder: newUpdateSignPos }; - } - return obj; - }); + if (getPageNumer.length > 0) { + const getXYdata = getPageNumer[0].pos; - setSignerPos(newUpdateSigner); + const getPosData = getXYdata; + const addSignPos = getPosData.map((url, ind) => { + if (url.key === keyValue) { + return { + ...url, + xPosition: dragElement.x, + yPosition: dragElement.y, + isDrag: true, + yBottom: ybottom + }; + } + return url; + }); + + const newUpdateSignPos = getPlaceHolder.map((obj, ind) => { + if (obj.pageNumber === pageNumber) { + return { ...obj, pos: addSignPos }; + } + return obj; + }); + const newUpdateSigner = signerPos.map((obj, ind) => { + if (obj.signerObjId === signId) { + return { ...obj, placeHolder: newUpdateSignPos }; + } + return obj; + }); + + setSignerPos(newUpdateSigner); + } } } } @@ -758,7 +761,7 @@ function PlaceHolderSign() { ) : noData ? ( ) : ( -
    +
    {/* this component used for UI interaction and show their functionality */} {!checkTourStatus && ( //this tour component used in your html component where you want to put @@ -788,7 +791,6 @@ function PlaceHolderSign() { marginLeft: !isMobile && pdfOriginalWidth > 500 && "20px", marginRight: !isMobile && pdfOriginalWidth > 500 && "20px" }} - ref={divRef} > {/* this modal is used show alert set placeholder for all signers before send mail */} @@ -950,11 +952,11 @@ function PlaceHolderSign() { handleDeleteSign={handleDeleteSign} handleTabDrag={handleTabDrag} handleStop={handleStop} - // handleImageResize={handleImageResize} setPdfLoadFail={setPdfLoadFail} pdfLoadFail={pdfLoadFail} setSignerPos={setSignerPos} containerWH={containerWH} + setIsResize={setIsResize} /> )}
    diff --git a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js index 6f2df3890..58a94b89d 100644 --- a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js +++ b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js @@ -487,8 +487,10 @@ function EmbedPdfImage() { pngUrl, pdfDoc, pdfOriginalWidth, - false + false, + containerWH ); + //function for embed signature in pdf and get digital signature pdf signPdfFun( pdfBytes, @@ -514,129 +516,6 @@ function EmbedPdfImage() { } } - //function for call cloud function signPdf and generate digital signature - // const signPdfFun = async ( - // base64Url, - // docId, - // xyPosData, - // pdfBase64Url, - // pageNo - // ) => { - // let singleSign; - // const isMobile = window.innerWidth < 767; - // const newWidth = window.innerWidth; - // const scale = isMobile ? pdfOriginalWidth / newWidth : 1; - // const height = xyPosData ? xyPosData.Height : 60; - // const xPos = (pos) => { - // //checking both condition mobile and desktop view - // if (isMobile) { - // //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale - // if (pos.isMobile) { - // const x = pos.xPosition * (pos.scale / scale); - // return x * scale + 50; - // } else { - // const x = pos.xPosition / scale; - // return x * scale; - // } - // } else { - // //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale - // if (pos.isMobile) { - // const x = pos.xPosition * pos.scale + 50; - // return x; - // } else { - // return pos.xPosition; - // } - // } - // }; - - // const yBottom = (pos) => { - // let yPosition; - // //checking both condition mobile and desktop view - - // if (isMobile) { - // //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale - // if (pos.isMobile) { - // const y = pos.yBottom * (pos.scale / scale); - // yPosition = pos.isDrag - // ? y * scale - height - // : pos.firstYPos - // ? y * scale - height + pos.firstYPos - // : y * scale - height; - // return yPosition; - // } else { - // const y = pos.yBottom / scale; - - // yPosition = pos.isDrag - // ? y * scale - height - // : pos.firstYPos - // ? y * scale - height + pos.firstYPos - // : y * scale - height; - // return yPosition; - // } - // } else { - // //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale - // if (pos.isMobile) { - // const y = pos.yBottom * pos.scale; - - // yPosition = pos.isDrag - // ? y - height - // : pos.firstYPos - // ? y - height + pos.firstYPos - // : y - height; - // return yPosition; - // } else { - // yPosition = pos.isDrag - // ? pos.yBottom - height - // : pos.firstYPos - // ? pos.yBottom - height + pos.firstYPos - // : pos.yBottom - height; - // return yPosition; - // } - // } - // }; - // if (xyPostion.length === 1 && xyPostion[0].pos.length === 1) { - // const bottomY = yBottom(xyPosData); - // singleSign = { - // pdfFile: pdfBase64Url, - // docId: docId, - // userId: signerUserId, - // sign: { - // Base64: base64Url, - // Left: xPos(xyPosData), - // Bottom: bottomY, - // Width: xyPosData.Width ? xyPosData.Width : 150, - // Height: height, - // Page: pageNo - // } - // }; - // } else if (xyPostion.length > 0 && xyPostion[0].pos.length > 0) { - // singleSign = { - // pdfFile: base64Url, - // docId: docId, - // userId: signerUserId - // }; - // } - - // await axios - // .post(`${localStorage.getItem("baseUrl")}functions/signPdf`, singleSign, { - // headers: { - // "Content-Type": "application/json", - // "X-Parse-Application-Id": localStorage.getItem("parseAppId"), - // sessionToken: localStorage.getItem("accesstoken") - // } - // }) - // .then((Listdata) => { - // const json = Listdata.data; - - // if (json.result.data) { - // getDocumentDetails(); - // } - // }) - // .catch((err) => { - // alert("something went wrong"); - // }); - // }; - //function for change page function changePage(offset) { setPageNumber((prevPageNumber) => prevPageNumber + offset); @@ -851,60 +730,6 @@ function EmbedPdfImage() { ); }; - // //function for resize image and update width and height - // const handleImageResize = (ref, key, direction, position) => { - // const updateFilter = xyPostion[index].pos.filter( - // (data, ind) => data.key === key && data.Width && data.Height - // ); - - // if (updateFilter.length > 0) { - // const getXYdata = xyPostion[index].pos; - // const getPosData = getXYdata; - // const addSign = getPosData.map((url, ind) => { - // if (url.key === key) { - // return { - // ...url, - // Width: ref.offsetWidth, - // Height: ref.offsetHeight, - // xPosition: position.x - // }; - // } - // return url; - // }); - - // const newUpdateUrl = xyPostion.map((obj, ind) => { - // if (ind === index) { - // return { ...obj, pos: addSign }; - // } - // return obj; - // }); - - // setXyPostion(newUpdateUrl); - // } else { - // const getXYdata = xyPostion[index].pos; - - // const getPosData = getXYdata; - - // const addSign = getPosData.map((url, ind) => { - // if (url.key === key) { - // return { - // ...url, - // Width: ref.offsetWidth, - // Height: ref.offsetHeight - // }; - // } - // return url; - // }); - - // const newUpdateUrl = xyPostion.map((obj, ind) => { - // if (ind === index) { - // return { ...obj, pos: addSign }; - // } - // return obj; - // }); - // setXyPostion(newUpdateUrl); - // } - // }; return ( {isLoading.isLoad ? ( diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index c571626cb..b12cf2fc1 100644 --- a/microfrontends/SignDocuments/src/utils/Utils.js +++ b/microfrontends/SignDocuments/src/utils/Utils.js @@ -455,8 +455,8 @@ export const multiSignEmbed = async ( page.drawImage(img, { x: xPos(imgUrlList[id]), y: yPos(imgUrlList[id]), - width: signyourself ? imgWidth * scale : imgWidth, - height: signyourself ? imgHeight * scale : imgHeight + width: imgWidth * scale, + height: imgHeight * scale }); }); } @@ -498,7 +498,8 @@ export const handleImageResize = ( pageNumber, setSignerPos, pdfOriginalWidth, - containerWH + containerWH, + setIsResize ) => { const filterSignerPos = signerPos.filter( (data) => data.signerObjId === signerId @@ -520,14 +521,13 @@ export const handleImageResize = ( const getPosData = getXYdata; const addSignPos = getPosData.map((url, ind) => { if (url.key === key) { - console.log("url", url); return { ...url, Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth, Height: !url.isMobile ? ref.offsetHeight * scale - : ref.offsetHeight, - xPosition: position.x + : ref.offsetHeight + // xPosition: position.x }; } return url; @@ -584,6 +584,7 @@ export const handleImageResize = ( } } } + setIsResize && setIsResize(false); }; //function for resize image and update width and height for sign-yourself @@ -601,7 +602,6 @@ export const handleSignYourselfImageResize = ( const updateFilter = xyPostion[index].pos.filter( (data) => data.key === key && data.Width && data.Height ); - // console.log(" position.x", position.x) const isMobile = window.innerWidth < 767; const newWidth = containerWH; const scale = isMobile ? pdfOriginalWidth / newWidth : 1; @@ -611,12 +611,13 @@ export const handleSignYourselfImageResize = ( const getPosData = getXYdata; const addSign = getPosData.map((url, ind) => { if (url.key === key) { - console.log("url", url); return { ...url, - Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth, - Height: !url.isMobile ? ref.offsetHeight * scale : ref.offsetHeight, - xPosition: position.xpos + // Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth, + // Height: !url.isMobile ? ref.offsetHeight * scale : ref.offsetHeight, + Width: ref.offsetWidth, + Height: ref.offsetHeight + // xPosition: position.xpos }; } return url; @@ -639,8 +640,10 @@ export const handleSignYourselfImageResize = ( if (url.key === key) { return { ...url, - Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth, - Height: !url.isMobile ? ref.offsetHeight * scale : ref.offsetHeight + // Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth, + // Height: !url.isMobile ? ref.offsetHeight * scale : ref.offsetHeight + Width: ref.offsetWidth, + Height: ref.offsetHeight }; } return url; @@ -740,6 +743,8 @@ export const signPdfFun = async ( } } }; + const imgWidth = xyPosData.Width ? xyPosData.Width * scale : 150 * scale; + const imgHeight = height * scale; const bottomY = yBottom(xyPosData); signgleSign = { pdfFile: pdfBase64Url, @@ -749,8 +754,8 @@ export const signPdfFun = async ( Base64: base64Url, Left: xPos(xyPosData), Bottom: bottomY, - Width: xyPosData.Width ? xyPosData.Width : 150, - Height: height, + Width: imgWidth, + Height: imgHeight, Page: pageNo } }; @@ -777,7 +782,7 @@ export const signPdfFun = async ( .then((Listdata) => { const json = Listdata.data; const res = json.result; - console.log("res", res); + // console.log("res", res); return res; }) .catch((err) => { From d224a44e541a6159dc84cd4aad7e0b3cb10f809e Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Thu, 7 Dec 2023 20:01:15 +0530 Subject: [PATCH 022/111] fix: mobile to desktop and desktop to mobile view placeholder location issue --- .../src/Component/PdfRequestFiles.js | 12 +- .../src/Component/SignYourselfPdf.js | 4 +- .../src/Component/component/modalComponent.js | 49 +++-- .../src/Component/component/renderPdf.js | 114 ++++++++-- .../src/Component/placeHolderSign.js | 8 +- .../src/Component/recipientSignPdf.js | 8 +- .../SignDocuments/src/utils/Utils.js | 197 ++++++++++++++---- 7 files changed, 302 insertions(+), 90 deletions(-) diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js index 71f2dc1b3..ac93db750 100644 --- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js +++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js @@ -296,7 +296,7 @@ function PdfRequestFiles() { } } - if (checkSignUrl && checkSignUrl.length > 0) { + if (checkSignUrl && checkSignUrl.length == 0) { alert("Please complete your signature!"); } else { setIsUiLoading(true); @@ -348,17 +348,16 @@ function PdfRequestFiles() { ); //function for call to embed signature in pdf and get digital signature pdf - signPdfFun( newImgUrl, documentId, signerObjectId, pdfOriginalWidth, pngUrl, + containerWH, data, pdfBase64, - pageNo, - containerWH + pageNo ) .then((res) => { if (res && res.status === "success") { @@ -390,9 +389,10 @@ function PdfRequestFiles() { pngUrl, pdfDoc, pdfOriginalWidth, - false + false, + containerWH ); - + // console.log(pdfBytes) //function for call to embed signature in pdf and get digital signature pdf signPdfFun( pdfBytes, diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js index f955a6fd3..664b0313e 100644 --- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js +++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js @@ -407,7 +407,7 @@ function SignYourSelf() { } } - if (checkSignUrl && checkSignUrl.length > 0) { + if (checkSignUrl && checkSignUrl.length == 0) { alert("Please complete your signature!"); } else { setIsCeleb(true); @@ -479,7 +479,7 @@ function SignYourSelf() { true, containerWH ); - + //function for call to embed signature in pdf and get digital signature pdf signPdfFun(pdfBytes, documentId); } setIsSignPad(false); diff --git a/microfrontends/SignDocuments/src/Component/component/modalComponent.js b/microfrontends/SignDocuments/src/Component/component/modalComponent.js index 589c5a2ba..8ab872e35 100644 --- a/microfrontends/SignDocuments/src/Component/component/modalComponent.js +++ b/microfrontends/SignDocuments/src/Component/component/modalComponent.js @@ -1,13 +1,16 @@ import React from "react"; import Modal from "react-bootstrap/Modal"; import ModalHeader from "react-bootstrap/esm/ModalHeader"; - +import { useNavigate } from "react-router-dom"; function ModalComponent({ isShow, type, setIsShowEmail }) { + const navigate = useNavigate(); return ( {type === "signersAlert" ? ( Select signers + ) : type === "alreadyPlace" ? ( + Already Placed! ) : ( Document Expired! )} @@ -16,24 +19,42 @@ function ModalComponent({ isShow, type, setIsShowEmail }) { {type === "signersAlert" ? (

    Please select signer for add placeholder!

    + ) : type === "alreadyPlace" ? ( +

    Already set placeHolder for this document.

    ) : (

    This Document is no longer available.

    )}     - {type === "signersAlert" &&( - )} + {type === "signersAlert" ? ( + + ) : ( + type === "alreadyPlace" && ( + + ) + )}     ); diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js index 8e7626d8b..79502599a 100644 --- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js +++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js @@ -59,30 +59,64 @@ function RenderPdf({ let width; if (isMobile) { if (!pos.isMobile) { - width = pos.Width / scale ? pos.Width / scale : 150 / scale; - return width; + if (pos.IsResize) { + width = pos.Width ? pos.Width : 150; + return width; + } else { + width = pos.Width / scale ? pos.Width / scale : 150 / scale; + // width = + // pos.Width * pos.scale ? pos.Width * pos.scale : 150 * pos.scale; + return width; + } } else { width = pos.Width ? pos.Width : 150; return width; } } else { - width = pos.Width ? pos.Width : 150; - return width; + if (pos.isMobile) { + if (pos.IsResize) { + width = pos.Width ? pos.Width : 150; + return width; + } else { + width = pos.Width ? pos.Width * pos.scale : 150 * pos.scale; + return width; + } + } else { + width = pos.Width ? pos.Width : 150; + return width; + } } }; const posHeight = (pos) => { - let width; + let height; if (isMobile) { if (!pos.isMobile) { - width = pos.Height / scale ? pos.Height / scale : 60 / scale; - return width; + if (pos.IsResize) { + // height = pos.Height ? pos.Height / scale : 60 / scale; + height = pos.Height ? pos.Height : 60; + return height; + } else { + height = pos.Height ? pos.Height / scale : 60 / scale; + // height = pos.Height ? pos.Height * pos.scale : 60 * pos.scale; + return height; + } } else { - width = pos.Height ? pos.Height : 60; - return width; + height = pos.Height ? pos.Height : 60; + return height; } } else { - width = pos.Height ? pos.Height : 60; - return width; + if (pos.isMobile) { + if (pos.IsResize) { + height = pos.Height ? pos.Height : 60; + return height; + } else { + height = pos.Height ? pos.Height * pos.scale : 60 * pos.scale; + return height; + } + } else { + height = pos.Height ? pos.Height : 60; + return height; + } } }; @@ -99,7 +133,7 @@ function RenderPdf({ if (isMobile) { //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale if (!pos.isMobile) { - return pos.xPosition / scale - 32; + return pos.xPosition / scale; } //pos.isMobile true -- placeholder save from mobile view(small device) handle position in mobile view(small screen) view divided by scale else { @@ -169,7 +203,8 @@ function RenderPdf({ data.signerObjId === signerObjectId ? "pointer" : "not-allowed", - borderColor: themeColor() + borderColor: themeColor(), + background: data.blockColor }} className="placeholderBlock" size={{ @@ -186,7 +221,8 @@ function RenderPdf({ pageNumber, setSignerPos, pdfOriginalWidth, - containerWH + containerWH, + true ); }} lockAspectRatio={pos.Width && 2.5} @@ -262,6 +298,46 @@ function RenderPdf({ } }; + const calculateWidth = (pos) => { + let width; + if (isMobile) { + width = pos.Width ? pos.Width * scale : 150 * scale; + return width; + } else { + if (pos.isMobile) { + if (pos.IsResize) { + width = pos.Width ? pos.Width : 150; + return width; + } else { + width = pos.Width ? pos.Width * pos.scale : 150 * pos.scale; + return width; + } + } else { + width = pos.Width ? pos.Width : 150; + return width; + } + } + }; + const calculateHeight = (pos) => { + let height; + if (isMobile) { + height = pos.Height ? pos.Height * scale : 60 * scale; + return height; + } else { + if (pos.isMobile) { + if (pos.IsResize) { + height = pos.Height ? pos.Height : 60; + return height; + } else { + height = pos.Height ? pos.Height * pos.scale : 60 * pos.scale; + return height; + } + } else { + height = pos.Height ? pos.Height : 60; + return height; + } + } + }; return ( <> {isMobile && scale ? ( @@ -413,7 +489,8 @@ function RenderPdf({ bounds="parent" style={{ cursor: "all-scroll", - borderColor: themeColor() + borderColor: themeColor(), + background: data.blockColor }} className="placeholderBlock" onDrag={() => @@ -464,6 +541,7 @@ function RenderPdf({ setSignerPos, pdfOriginalWidth, containerWH, + false, setIsResize ); }} @@ -739,8 +817,8 @@ function RenderPdf({ }} className="placeholderBlock" size={{ - width: pos.Width ? pos.Width : 150, - height: pos.Height ? pos.Height : 60 + width: calculateWidth(pos), + height: calculateHeight(pos) }} lockAspectRatio={pos.Width && 2.5} //if pos.isMobile false -- placeholder saved from mobile view then handle position in desktop view to multiply by scale @@ -828,6 +906,7 @@ function RenderPdf({ bounds="parent" style={{ cursor: "all-scroll", + background: data.blockColor, borderColor: themeColor() }} className="placeholderBlock" @@ -878,6 +957,7 @@ function RenderPdf({ setSignerPos, pdfOriginalWidth, containerWH, + false, setIsResize ); }} diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js index 6d0a95b65..8d1eb8a54 100644 --- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js +++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js @@ -65,6 +65,7 @@ function PlaceHolderSign() { const [isShowEmail, setIsShowEmail] = useState(false); const [selectedEmail, setSelectedEmail] = useState(false); const [isResize, setIsResize] = useState(false); + const [isAlreadyPlace, setIsAlreadyPlace] = useState(false); const [pdfLoadFail, setPdfLoadFail] = useState({ status: false, type: "load" @@ -181,8 +182,12 @@ function PlaceHolderSign() { //getting document details const documentData = await contractDocument(documentId); if (documentData && documentData.length > 0) { + const alreadyPlaceholder = + documentData[0].Placeholders && documentData[0].Placeholders; + if (alreadyPlaceholder && alreadyPlaceholder.length > 0) { + setIsAlreadyPlace(true); + } setPdfDetails(documentData); - const currEmail = documentData[0].ExtUserPtr.Email; const filterCurrEmail = documentData[0].Signers.filter( (data) => data.Email === currEmail @@ -916,6 +921,7 @@ function PlaceHolderSign() { )} + 0) { + if (checkSignUrl && checkSignUrl.length == 0) { alert("Please complete your signature!"); } else { const loadObj = { @@ -456,10 +456,10 @@ function EmbedPdfImage() { signerUserId, pdfOriginalWidth, xyPostion, + containerWH, data, pdfBase64, - pageNo, - containerWH + pageNo ) .then((res) => { if (res && res.status === "success") { @@ -508,7 +508,7 @@ function EmbedPdfImage() { } }) .catch((err) => { - alert("something went wrong in query"); + alert("something went wrong in query", err); }); } setIsSignPad(false); diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index b12cf2fc1..24d9f7e8e 100644 --- a/microfrontends/SignDocuments/src/utils/Utils.js +++ b/microfrontends/SignDocuments/src/utils/Utils.js @@ -1,6 +1,7 @@ import axios from "axios"; import { $ } from "select-dom"; import { rgb } from "pdf-lib"; +const isMobile = window.innerWidth < 767; export async function getBase64FromUrl(url) { const data = await fetch(url); const blob = await data.blob(); @@ -342,7 +343,83 @@ export function modalAlign() { modal.style.top = window.innerHeight / 3 + "px"; } } +export const containerWidth = (pos, scale, signyourself) => { + let width; + if (signyourself) { + if (isMobile) { + return pos.Width * scale; + } else { + return pos.Width; + } + } else { + if (isMobile) { + if (pos.isMobile) { + width = pos.Width ? pos.Width * scale : 150 * scale; + return width; + } else { + if (pos.IsResize) { + width = pos.Width ? pos.Width * scale : 150 * scale; + return width; + } else { + width = pos.Width ? pos.Width : 150; + return width; + } + } + } else { + if (pos.isMobile) { + if (pos.IsResize) { + width = pos.Width ? pos.Width : 150; + return width; + } else { + width = pos.Width ? pos.Width * pos.scale : 150 * pos.scale; + return width; + } + } else { + width = pos.Width ? pos.Width : 150; + return width; + } + } + } +}; +export const containerHeight = (pos, scale, signyourself) => { + let height; + if (signyourself) { + if (isMobile) { + return pos.Height * scale; + } else { + return pos.Height; + } + } else { + if (isMobile) { + if (pos.isMobile) { + height = pos.Height ? pos.Height * scale : 60 * scale; + return height; + } else { + if (pos.IsResize) { + height = pos.Height ? pos.Height * scale : 60 * scale; + return height; + } else { + height = pos.Height ? pos.Height : 60; + return height; + } + } + } else { + if (pos.isMobile) { + if (pos.IsResize) { + height = pos.Height ? pos.Height : 60; + return height; + } else { + height = pos.Height ? pos.Height * pos.scale : 60 * pos.scale; + return height; + } + } else { + height = pos.Height ? pos.Height : 60; + return height; + } + } + } +}; //function for embed multiple signature using pdf-lib export const multiSignEmbed = async ( pngUrl, @@ -352,6 +429,9 @@ export const multiSignEmbed = async ( containerWH ) => { for (let i = 0; i < pngUrl.length; i++) { + const isMobile = window.innerWidth < 767; + const newWidth = containerWH.width; + const scale = isMobile ? pdfOriginalWidth / newWidth : 1; const pageNo = pngUrl[i].pageNumber; const imgUrlList = pngUrl[i].pos; const pages = pdfDoc.getPages(); @@ -384,10 +464,9 @@ export const multiSignEmbed = async ( img = await pdfDoc.embedPng(imgData); } const imgHeight = imgUrlList[id].Height ? imgUrlList[id].Height : 60; - const imgWidth = imgUrlList[id].Width ? imgUrlList[id].Width : 150; - const isMobile = window.innerWidth < 767; - const newWidth = containerWH.width; - const scale = isMobile ? pdfOriginalWidth / newWidth : 1; + const scaleWidth = containerWidth(imgUrlList[id], scale, signyourself); + const scaleHeight = containerHeight(imgUrlList[id], scale, signyourself); + const xPos = (pos) => { if (signyourself) { if (isMobile) { @@ -438,13 +517,22 @@ export const multiSignEmbed = async ( const y = pos.yPosition * (pos.scale / scale); return page.getHeight() - y * scale - imgHeight * scale; } else { - return page.getHeight() - y * scale - imgHeight * scale; + if (pos.IsResize) { + return page.getHeight() - y * scale - imgHeight * scale; + } else { + return page.getHeight() - y * scale - imgHeight; + } } } else { //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale if (pos.isMobile) { - const y = pos.yPosition * pos.scale; - return page.getHeight() - y - imgHeight; + if (pos.IsResize) { + const y = pos.yPosition * pos.scale; + return page.getHeight() - y - imgHeight; + } else { + const y = pos.yPosition * pos.scale; + return page.getHeight() - y - imgHeight * pos.scale; + } } else { return page.getHeight() - pos.yPosition - imgHeight; } @@ -455,12 +543,14 @@ export const multiSignEmbed = async ( page.drawImage(img, { x: xPos(imgUrlList[id]), y: yPos(imgUrlList[id]), - width: imgWidth * scale, - height: imgHeight * scale + width: scaleWidth, + height: scaleHeight }); }); } + const pdfBytes = await pdfDoc.saveAsBase64({ useObjectStreams: false }); + return pdfBytes; }; //function for embed document id @@ -499,6 +589,7 @@ export const handleImageResize = ( setSignerPos, pdfOriginalWidth, containerWH, + showResize, setIsResize ) => { const filterSignerPos = signerPos.filter( @@ -523,11 +614,9 @@ export const handleImageResize = ( if (url.key === key) { return { ...url, - Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth, - Height: !url.isMobile - ? ref.offsetHeight * scale - : ref.offsetHeight - // xPosition: position.x + Width: ref.offsetWidth, + Height: ref.offsetHeight, + IsResize: showResize ? true : false }; } return url; @@ -550,17 +639,14 @@ export const handleImageResize = ( setSignerPos(newUpdateSigner); } else { const getXYdata = getPageNumer[0].pos; - const getPosData = getXYdata; - const addSignPos = getPosData.map((url, ind) => { if (url.key === key) { return { ...url, - Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth, - Height: !url.isMobile - ? ref.offsetHeight * scale - : ref.offsetHeight + Width: ref.offsetWidth, + Height: ref.offsetHeight, + IsResize: showResize ? true : false }; } return url; @@ -603,7 +689,8 @@ export const handleSignYourselfImageResize = ( (data) => data.key === key && data.Width && data.Height ); const isMobile = window.innerWidth < 767; - const newWidth = containerWH; + const newWidth = containerWH.width; + const scale = isMobile ? pdfOriginalWidth / newWidth : 1; if (updateFilter.length > 0) { @@ -613,11 +700,11 @@ export const handleSignYourselfImageResize = ( if (url.key === key) { return { ...url, - // Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth, - // Height: !url.isMobile ? ref.offsetHeight * scale : ref.offsetHeight, + // Width: !url.isMobile ? scaleWidth : ref.offsetWidth, + // Height: !url.isMobile ? scaleHeight : ref.offsetHeight, Width: ref.offsetWidth, - Height: ref.offsetHeight - // xPosition: position.xpos + Height: ref.offsetHeight, + IsResize: true }; } return url; @@ -643,7 +730,8 @@ export const handleSignYourselfImageResize = ( // Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth, // Height: !url.isMobile ? ref.offsetHeight * scale : ref.offsetHeight Width: ref.offsetWidth, - Height: ref.offsetHeight + Height: ref.offsetHeight, + IsResize: true }; } return url; @@ -666,14 +754,15 @@ export const signPdfFun = async ( signerObjectId, pdfOriginalWidth, signerData, + containerWH, xyPosData, pdfBase64Url, - pageNo, - containerWH + pageNo ) => { let signgleSign; - const isMobile = window.innerWidth < 767; + const newWidth = containerWH.width; + const scale = isMobile ? pdfOriginalWidth / newWidth : 1; if (signerData && signerData.length === 1 && signerData[0].pos.length === 1) { const height = xyPosData.Height ? xyPosData.Height : 60; @@ -715,24 +804,41 @@ export const signPdfFun = async ( return yPosition; } else { const y = pos.yBottom / scale; - - yPosition = pos.isDrag - ? y * scale - height - : pos.firstYPos - ? y * scale - height + pos.firstYPos - : y * scale - height; - return yPosition; + if (pos.IsResize) { + yPosition = pos.isDrag + ? y * scale - height * scale + : pos.firstYPos + ? y * scale - height * scale + pos.firstYPos + : y * scale - height * scale; + return yPosition; + } else { + yPosition = pos.isDrag + ? y * scale - height + : pos.firstYPos + ? y * scale - height + pos.firstYPos + : y * scale - height; + return yPosition; + } } } else { //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale if (pos.isMobile) { const y = pos.yBottom * pos.scale; - yPosition = pos.isDrag - ? y - height - : pos.firstYPos - ? y - height + pos.firstYPos - : y - height; - return yPosition; + if (pos.IsResize) { + yPosition = pos.isDrag + ? y - height + : pos.firstYPos + ? y - height + pos.firstYPos + : y - height; + return yPosition; + } else { + yPosition = pos.isDrag + ? y - height * pos.scale + : pos.firstYPos + ? y - height * pos.scale + pos.firstYPos + : y - height * pos.scale; + return yPosition; + } } else { yPosition = pos.isDrag ? pos.yBottom - height @@ -743,8 +849,7 @@ export const signPdfFun = async ( } } }; - const imgWidth = xyPosData.Width ? xyPosData.Width * scale : 150 * scale; - const imgHeight = height * scale; + const bottomY = yBottom(xyPosData); signgleSign = { pdfFile: pdfBase64Url, @@ -754,8 +859,8 @@ export const signPdfFun = async ( Base64: base64Url, Left: xPos(xyPosData), Bottom: bottomY, - Width: imgWidth, - Height: imgHeight, + Width: containerWidth(xyPosData, scale), + Height: containerHeight(xyPosData, scale), Page: pageNo } }; From e51feaa1fe42a86b785c47b799a2d7ae918b9e8e Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Fri, 8 Dec 2023 17:11:01 +0530 Subject: [PATCH 023/111] Refactor code --- .../src/Component/LegaDrive/LegaDrive.js | 13 +- .../src/Component/PdfRequestFiles.js | 122 +++++++++++------- .../src/Component/SignYourselfPdf.js | 43 ++++-- .../src/Component/component/alertComponent.js | 36 ++++++ .../src/Component/component/emailComponent.js | 26 +++- .../src/Component/component/renderPdf.js | 56 +------- .../src/Component/recipientSignPdf.js | 80 +++++++----- .../SignDocuments/src/utils/Utils.js | 38 +++--- 8 files changed, 243 insertions(+), 171 deletions(-) create mode 100644 microfrontends/SignDocuments/src/Component/component/alertComponent.js diff --git a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js index f6b022649..20a4d3b5e 100644 --- a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js +++ b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js @@ -7,6 +7,7 @@ import Modal from "react-bootstrap/Modal"; import ModalHeader from "react-bootstrap/esm/ModalHeader"; import { themeColor, iconColor } from "../../utils/ThemeColor/backColor"; import { getDrive } from "../../utils/Utils"; +import AlertComponent from "../component/alertComponent"; function PdfFile() { const scrollRef = useRef(null); @@ -26,6 +27,7 @@ function PdfFile() { const [docId, setDocId] = useState(); const [handleError, setHandleError] = useState(); const [folderName, setFolderName] = useState([]); + const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" }); const currentUser = localStorage.getItem( `Parse/${localStorage.getItem("parseAppId")}/currentUser` @@ -219,8 +221,10 @@ function PdfFile() { } }) .catch((err) => { - console.log("axois err ", err); - alert("something went wrong"); + setIsAlert({ + isShow: true, + alertMessage: "something went wrong" + }); }); } else { setError("Please fill out this field"); @@ -324,6 +328,11 @@ function PdfFile() { return (
    + Add New Folder diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js index ac93db750..b889549a8 100644 --- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js +++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js @@ -28,6 +28,7 @@ import Nodata from "./component/Nodata"; import Header from "./component/header"; import RenderPdf from "./component/renderPdf"; import CustomModal from "./component/CustomModal"; +import AlertComponent from "./component/alertComponent"; function PdfRequestFiles() { const { docId } = useParams(); @@ -61,7 +62,7 @@ function PdfRequestFiles() { const [isUiLoading, setIsUiLoading] = useState(false); const [isDecline, setIsDecline] = useState({ isDeclined: false }); const [currentSigner, setCurrentSigner] = useState(false); - + const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" }); const [isCompleted, setIsCompleted] = useState({ isCertificate: false, isModal: false @@ -290,26 +291,23 @@ function PdfRequestFiles() { ); for (let i = 0; i < checkSign.length; i++) { const posData = checkSign[i].pos.filter((pos) => !pos.SignUrl); - if (posData && posData.length > 0) { checkSignUrl.push(posData); } } - if (checkSignUrl && checkSignUrl.length == 0) { - alert("Please complete your signature!"); + if (checkSignUrl && checkSignUrl.length > 0) { + setIsAlert({ + isShow: true, + alertMessage: "Please complete your signature!" + }); } else { setIsUiLoading(true); - - const url = pdfUrl; - const pngUrl = checkUser[0].placeHolder; - // Load a PDFDocument from the existing PDF bytes - const existingPdfBytes = await fetch(url).then((res) => + const existingPdfBytes = await fetch(pdfUrl).then((res) => res.arrayBuffer() ); - const pdfDoc = await PDFDocument.load(existingPdfBytes, { ignoreEncryption: true }); @@ -318,22 +316,33 @@ function PdfRequestFiles() { //checking if signature is only one then send image url in jpeg formate to server if (pngUrl.length === 1 && pngUrl[0].pos.length === 1) { if (isDocId) { - pdfBase64 = await getBase64FromUrl(url); + try { + pdfBase64 = await getBase64FromUrl(pdfUrl); + } catch (err) { + console.log(err); + } } else { //embed document's object id to all pages in pdf document - await embedDocId(pdfDoc, documentId, allPages); - pdfBase64 = await pdfDoc.saveAsBase64({ - useObjectStreams: false - }); + try { + await embedDocId(pdfDoc, documentId, allPages); + } catch (err) { + console.log(err); + } + try { + pdfBase64 = await pdfDoc.saveAsBase64({ + useObjectStreams: false + }); + } catch (err) { + console.log(err); + } } - for (let i = 0; i < pngUrl.length; i++) { - const imgUrlList = pngUrl[i].pos; - const pageNo = pngUrl[i].pageNumber; + for (let pngData of pngUrl) { + const imgUrlList = pngData.pos; + const pageNo = pngData.pageNumber; imgUrlList.map(async (data) => { //cheking signUrl is defau;t signature url of custom url let ImgUrl = data.SignUrl; const checkUrl = urlValidator(ImgUrl); - //if default signature url then convert it in base 64 if (checkUrl) { ImgUrl = await getBase64FromIMG(ImgUrl + "?get"); @@ -355,6 +364,7 @@ function PdfRequestFiles() { pdfOriginalWidth, pngUrl, containerWH, + setIsAlert, data, pdfBase64, pageNo @@ -367,11 +377,17 @@ function PdfRequestFiles() { setUnSignedSigners([]); getDocumentDetails(); } else { - alert("something went wrong"); + setIsAlert({ + isShow: true, + alertMessage: "something went wrong" + }); } }) .catch((err) => { - alert("something went wrong"); + setIsAlert({ + isShow: true, + alertMessage: "something went wrong" + }); }); }) .catch((error) => { @@ -382,6 +398,7 @@ function PdfRequestFiles() { } //else if signature is more than one then embed all sign with the use of pdf-lib else if (pngUrl.length > 0 && pngUrl[0].pos.length > 0) { + const flag = false; //embed document's object id to all pages in pdf document await embedDocId(pdfDoc, documentId, allPages); //embed multi signature in pdf @@ -389,40 +406,48 @@ function PdfRequestFiles() { pngUrl, pdfDoc, pdfOriginalWidth, - false, + flag, containerWH ); - // console.log(pdfBytes) + //function for call to embed signature in pdf and get digital signature pdf - signPdfFun( - pdfBytes, - documentId, - signerObjectId, - pdfOriginalWidth, - pngUrl, - containerWH - ) - .then((res) => { - if (res && res.status === "success") { - setPdfUrl(res.data); - setIsSigned(true); - setSignedSigners([]); - setUnSignedSigners([]); - getDocumentDetails(); - } else { - alert("something went wrong"); - } - }) - .catch((err) => { - alert("something went wrong"); + try { + const res = await signPdfFun( + pdfBytes, + documentId, + signerObjectId, + pdfOriginalWidth, + pngUrl, + containerWH, + setIsAlert + ); + if (res && res.status === "success") { + setPdfUrl(res.data); + setIsSigned(true); + setSignedSigners([]); + setUnSignedSigners([]); + getDocumentDetails(); + } else { + setIsAlert({ + isShow: true, + alertMessage: "something went wrong" + }); + } + } catch (err) { + setIsAlert({ + isShow: true, + alertMessage: "something went wrong" }); + } } setIsSignPad(false); } } else { - console.log("something went wrong!"); - alert("something went wrong!"); + setIsAlert({ + isShow: true, + alertMessage: "something went wrong" + }); } } @@ -729,6 +754,11 @@ function PdfRequestFiles() { )}
    + {/* this modal is used to show decline alert */} !pos.SignUrl); - if (posData && posData.length > 0) { checkSignUrl.push(posData); } } - - if (checkSignUrl && checkSignUrl.length == 0) { - alert("Please complete your signature!"); + if (xyPostion.length === 0) { + setIsAlert({ + isShow: true, + alertMessage: "Please complete your signature!" + }); + return; + } else if (xyPostion.length > 0 && checkSignUrl.length > 0) { + setIsAlert({ + isShow: true, + alertMessage: "Please complete your signature!" + }); + return; } else { setIsCeleb(true); setTimeout(() => { @@ -429,7 +439,7 @@ function SignYourSelf() { const pdfDoc = await PDFDocument.load(existingPdfBytes, { ignoreEncryption: true }); - const pngUrl = xyPostion; + //checking if signature is only one then send image url in jpeg formate to server if (xyPostion.length === 1 && xyPostion[0].pos.length === 1) { //embed document's object id to all pages in pdf document @@ -437,15 +447,14 @@ function SignYourSelf() { const pdfBase64 = await pdfDoc.saveAsBase64({ useObjectStreams: false }); - for (let i = 0; i < xyPostion.length; i++) { - const imgUrlList = xyPostion[i].pos; - const pageNo = xyPostion[i].pageNumber; + for (let xyData of xyPostion) { + const imgUrlList = xyData.pos; + const pageNo = xyData.pageNumber; imgUrlList.map(async (data) => { let ImgUrl = data.SignUrl; //cheking signUrl is defau;t signature url of custom url const checkUrl = urlValidator(ImgUrl); - //if default signature url then convert it in base 64 if (checkUrl) { ImgUrl = await getBase64FromIMG(ImgUrl + "?get"); @@ -469,14 +478,16 @@ function SignYourSelf() { } //else if signature is more than one then embed all sign with the use of pdf-lib else if (xyPostion.length > 0 && xyPostion[0].pos.length > 0) { + const flag = false; //embed document's object id to all pages in pdf document await embedDocId(pdfDoc, documentId, allPages); + //embed multi signature in pdf const pdfBytes = await multiSignEmbed( - pngUrl, + xyPostion, pdfDoc, pdfOriginalWidth, - true, + flag, containerWH ); //function for call to embed signature in pdf and get digital signature pdf @@ -500,7 +511,7 @@ function SignYourSelf() { let singleSign; const newWidth = containerWH.width; const scale = isMobile ? pdfOriginalWidth / newWidth : 1; - const imgWidth = xyPosData ? xyPosData.Width : 150; + if (xyPostion.length === 1 && xyPostion[0].pos.length === 1) { const height = xyPosData.Height ? xyPosData.Height : 60; const bottomY = xyPosData.isDrag @@ -856,8 +867,12 @@ function SignYourSelf() { marginRight: !isMobile && pdfOriginalWidth > 500 && "20px" }} > + {/* this modal is used show this document is already sign */} - modalAlign()} @@ -921,9 +936,9 @@ function SignYourSelf() { isCeleb={isCeleb} setIsEmail={setIsEmail} pdfName={pdfDetails[0] && pdfDetails[0].Name} - signObjId={documentId} setSuccessEmail={setSuccessEmail} sender={jsonSender} + setIsAlert={setIsAlert} /> {/* pdf header which contain funish back button */}
    + + Alert + + + + {alertMessage} + + + + + + ); +} + +export default AlertComponent; diff --git a/microfrontends/SignDocuments/src/Component/component/emailComponent.js b/microfrontends/SignDocuments/src/Component/component/emailComponent.js index 5854c8749..5d7691e68 100644 --- a/microfrontends/SignDocuments/src/Component/component/emailComponent.js +++ b/microfrontends/SignDocuments/src/Component/component/emailComponent.js @@ -16,9 +16,9 @@ function EmailComponent({ isCeleb, setIsEmail, setSuccessEmail, - signObjId, pdfName, - sender + sender, + setIsAlert }) { const [emailList, setEmailList] = useState([]); const [emailValue, setEmailValue] = useState(); @@ -62,11 +62,15 @@ function EmailComponent({ } catch (error) { console.log("error", error); setIsLoading(false); - alert("Something went wrong!"); + setIsEmail(false); + setIsAlert({ + isShow: true, + alertMessage: "something went wrong" + }); } } - if (sendMail.data.result.status === "success") { + if (sendMail && sendMail.data.result.status === "success") { setSuccessEmail(true); setTimeout(() => { setSuccessEmail(false); @@ -76,12 +80,20 @@ function EmailComponent({ }, 1500); setIsLoading(false); - } else if (sendMail.data.result.status === "error") { + } else if (sendMail && sendMail.data.result.status === "error") { setIsLoading(false); - alert("Something went wrong!"); + setIsEmail(false); + setIsAlert({ + isShow: true, + alertMessage: "something went wrong" + }); } else { setIsLoading(false); - alert("Something went wrong!"); + setIsEmail(false); + setIsAlert({ + isShow: true, + alertMessage: "something went wrong" + }); } }; diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js index 79502599a..8f7bcd5bf 100644 --- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js +++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js @@ -63,9 +63,7 @@ function RenderPdf({ width = pos.Width ? pos.Width : 150; return width; } else { - width = pos.Width / scale ? pos.Width / scale : 150 / scale; - // width = - // pos.Width * pos.scale ? pos.Width * pos.scale : 150 * pos.scale; + width = (pos.Width || 150) / scale; return width; } } else { @@ -78,7 +76,7 @@ function RenderPdf({ width = pos.Width ? pos.Width : 150; return width; } else { - width = pos.Width ? pos.Width * pos.scale : 150 * pos.scale; + width = (pos.Width || 150) * pos.scale; return width; } } else { @@ -92,12 +90,10 @@ function RenderPdf({ if (isMobile) { if (!pos.isMobile) { if (pos.IsResize) { - // height = pos.Height ? pos.Height / scale : 60 / scale; height = pos.Height ? pos.Height : 60; return height; } else { - height = pos.Height ? pos.Height / scale : 60 / scale; - // height = pos.Height ? pos.Height * pos.scale : 60 * pos.scale; + height = (pos.Height || 60) / scale; return height; } } else { @@ -110,7 +106,7 @@ function RenderPdf({ height = pos.Height ? pos.Height : 60; return height; } else { - height = pos.Height ? pos.Height * pos.scale : 60 * pos.scale; + height = (pos.Height || 60) * pos.scale; return height; } } else { @@ -298,46 +294,6 @@ function RenderPdf({ } }; - const calculateWidth = (pos) => { - let width; - if (isMobile) { - width = pos.Width ? pos.Width * scale : 150 * scale; - return width; - } else { - if (pos.isMobile) { - if (pos.IsResize) { - width = pos.Width ? pos.Width : 150; - return width; - } else { - width = pos.Width ? pos.Width * pos.scale : 150 * pos.scale; - return width; - } - } else { - width = pos.Width ? pos.Width : 150; - return width; - } - } - }; - const calculateHeight = (pos) => { - let height; - if (isMobile) { - height = pos.Height ? pos.Height * scale : 60 * scale; - return height; - } else { - if (pos.isMobile) { - if (pos.IsResize) { - height = pos.Height ? pos.Height : 60; - return height; - } else { - height = pos.Height ? pos.Height * pos.scale : 60 * pos.scale; - return height; - } - } else { - height = pos.Height ? pos.Height : 60; - return height; - } - } - }; return ( <> {isMobile && scale ? ( @@ -817,8 +773,8 @@ function RenderPdf({ }} className="placeholderBlock" size={{ - width: calculateWidth(pos), - height: calculateHeight(pos) + width: posWidth(pos), + height: posHeight(pos) }} lockAspectRatio={pos.Width && 2.5} //if pos.isMobile false -- placeholder saved from mobile view then handle position in desktop view to multiply by scale diff --git a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js index 09d3f3581..d45ef386f 100644 --- a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js +++ b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js @@ -34,6 +34,7 @@ import Header from "./component/header"; import RenderPdf from "./component/renderPdf"; import CustomModal from "./component/CustomModal"; import { modalAlign } from "../utils/Utils"; +import AlertComponent from "./component/alertComponent"; function EmbedPdfImage() { const { id, contactBookId } = useParams(); const [isSignPad, setIsSignPad] = useState(false); @@ -65,7 +66,6 @@ function EmbedPdfImage() { const [checkTourStatus, setCheckTourStatus] = useState(false); const [signerUserId, setSignerUserId] = useState(); const [tourStatus, setTourStatus] = useState([]); - const [completePdfData, setCompletePdfData] = useState([]); const [isExpired, setIsExpired] = useState(false); const [noData, setNoData] = useState(false); const [contractName, setContractName] = useState(""); @@ -77,6 +77,7 @@ function EmbedPdfImage() { type: "load" }); const [containerWH, setContainerWH] = useState({}); + const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" }); const docId = id && id; const isMobile = window.innerWidth < 767; const index = xyPostion.findIndex((object) => { @@ -92,8 +93,7 @@ function EmbedPdfImage() { : `${localStorage.getItem("UserInformation")}` && `${localStorage.getItem("UserInformation")}`; const jsonSender = JSON.parse(senderUser); - //check isGuestSigner is present in local if yes than handle login flow header in mobile view - const isGuestSigner = localStorage.getItem("isGuestSigner"); + useEffect(() => { getDocumentDetails(); }, []); @@ -202,7 +202,6 @@ function EmbedPdfImage() { setIsAlreadySign(alreadySign); setPdfUrl(documentData[0].SignedUrl); setSignedPdfData(documentData); - setCompletePdfData(documentData); } else if (declined) { const currentDecline = { currnt: "another", @@ -396,8 +395,11 @@ function EmbedPdfImage() { } } - if (checkSignUrl && checkSignUrl.length == 0) { - alert("Please complete your signature!"); + if (checkSignUrl && checkSignUrl.length > 0) { + setIsAlert({ + isShow: true, + alertMessage: "Please complete your signature!" + }); } else { const loadObj = { isLoad: true, @@ -428,9 +430,10 @@ function EmbedPdfImage() { await embedDocId(pdfDoc, docId, allPages); pdfBase64 = await pdfDoc.saveAsBase64({ useObjectStreams: false }); } - for (let i = 0; i < xyPostion.length; i++) { - const imgUrlList = pngUrl[i].pos; - const pageNo = pngUrl[i].pageNumber; + + for (let xyData of xyPostion) { + const imgUrlList = xyData.pos; + const pageNo = xyData.pageNumber; imgUrlList.map(async (data) => { //cheking signUrl is defau;t signature url of custom url let ImgUrl = data.SignUrl; @@ -457,6 +460,7 @@ function EmbedPdfImage() { pdfOriginalWidth, xyPostion, containerWH, + setIsAlert, data, pdfBase64, pageNo @@ -465,11 +469,17 @@ function EmbedPdfImage() { if (res && res.status === "success") { getDocumentDetails(); } else { - alert("something went wrong"); + setIsAlert({ + isShow: true, + alertMessage: "something went wrong" + }); } }) .catch((err) => { - alert("something went wrong!"); + setIsAlert({ + isShow: true, + alertMessage: "something went wrong" + }); }); }) .catch((error) => { @@ -480,6 +490,7 @@ function EmbedPdfImage() { } //else if signature is more than one then embed all sign with the use of pdf-lib else if (xyPostion.length > 0 && xyPostion[0].pos.length > 0) { + const flag = false; //embed document's object id to all pages in pdf document await embedDocId(pdfDoc, docId, allPages); //embed multi signature in pdf @@ -487,29 +498,35 @@ function EmbedPdfImage() { pngUrl, pdfDoc, pdfOriginalWidth, - false, + flag, containerWH ); //function for embed signature in pdf and get digital signature pdf - signPdfFun( - pdfBytes, - docId, - signerUserId, - pdfOriginalWidth, - xyPostion, - containerWH - ) - .then((res) => { - if (res && res.status === "success") { - getDocumentDetails(); - } else { - alert("something went wrong!"); - } - }) - .catch((err) => { - alert("something went wrong in query", err); + try { + const res = await signPdfFun( + pdfBytes, + docId, + signerUserId, + pdfOriginalWidth, + xyPostion, + containerWH, + setIsAlert + ); + if (res && res.status === "success") { + getDocumentDetails(); + } else { + setIsAlert({ + isShow: true, + alertMessage: "something went wrong" + }); + } + } catch (err) { + setIsAlert({ + isShow: true, + alertMessage: "something went wrong" }); + } } setIsSignPad(false); setXyPostion([]); @@ -763,6 +780,11 @@ function EmbedPdfImage() { declineDoc={declineDoc} setIsDecline={setIsDecline} /> + {/* this modal is used for show expired alert */} { - for (let i = 0; i < pngUrl.length; i++) { - const isMobile = window.innerWidth < 767; + for (let item of pngUrl) { const newWidth = containerWH.width; const scale = isMobile ? pdfOriginalWidth / newWidth : 1; - const pageNo = pngUrl[i].pageNumber; - const imgUrlList = pngUrl[i].pos; + const pageNo = item.pageNumber; + const imgUrlList = item.pos; const pages = pdfDoc.getPages(); const page = pages[pageNo - 1]; const images = await Promise.all( @@ -595,9 +596,7 @@ export const handleImageResize = ( const filterSignerPos = signerPos.filter( (data) => data.signerObjId === signerId ); - const isMobile = window.innerWidth < 767; - const newWidth = containerWH; - const scale = isMobile ? pdfOriginalWidth / newWidth : 1; + if (filterSignerPos.length > 0) { const getPlaceHolder = filterSignerPos[0].placeHolder; const getPageNumer = getPlaceHolder.filter( @@ -688,10 +687,6 @@ export const handleSignYourselfImageResize = ( const updateFilter = xyPostion[index].pos.filter( (data) => data.key === key && data.Width && data.Height ); - const isMobile = window.innerWidth < 767; - const newWidth = containerWH.width; - - const scale = isMobile ? pdfOriginalWidth / newWidth : 1; if (updateFilter.length > 0) { const getXYdata = xyPostion[index].pos; @@ -700,8 +695,6 @@ export const handleSignYourselfImageResize = ( if (url.key === key) { return { ...url, - // Width: !url.isMobile ? scaleWidth : ref.offsetWidth, - // Height: !url.isMobile ? scaleHeight : ref.offsetHeight, Width: ref.offsetWidth, Height: ref.offsetHeight, IsResize: true @@ -727,8 +720,6 @@ export const handleSignYourselfImageResize = ( if (url.key === key) { return { ...url, - // Width: !url.isMobile ? ref.offsetWidth * scale : ref.offsetWidth, - // Height: !url.isMobile ? ref.offsetHeight * scale : ref.offsetHeight Width: ref.offsetWidth, Height: ref.offsetHeight, IsResize: true @@ -755,14 +746,14 @@ export const signPdfFun = async ( pdfOriginalWidth, signerData, containerWH, + setIsAlert, xyPosData, pdfBase64Url, pageNo ) => { - let signgleSign; + let singleSign; const newWidth = containerWH.width; - const scale = isMobile ? pdfOriginalWidth / newWidth : 1; if (signerData && signerData.length === 1 && signerData[0].pos.length === 1) { const height = xyPosData.Height ? xyPosData.Height : 60; @@ -851,7 +842,7 @@ export const signPdfFun = async ( }; const bottomY = yBottom(xyPosData); - signgleSign = { + singleSign = { pdfFile: pdfBase64Url, docId: documentId, userId: signerObjectId, @@ -869,7 +860,7 @@ export const signPdfFun = async ( signerData.length > 0 && signerData[0].pos.length > 0 ) { - signgleSign = { + singleSign = { pdfFile: base64Url, docId: documentId, userId: signerObjectId @@ -877,7 +868,7 @@ export const signPdfFun = async ( } const response = await axios - .post(`${localStorage.getItem("baseUrl")}functions/signPdf`, signgleSign, { + .post(`${localStorage.getItem("baseUrl")}functions/signPdf`, singleSign, { headers: { "Content-Type": "application/json", "X-Parse-Application-Id": localStorage.getItem("parseAppId"), @@ -887,12 +878,13 @@ export const signPdfFun = async ( .then((Listdata) => { const json = Listdata.data; const res = json.result; - // console.log("res", res); return res; }) .catch((err) => { - console.log("axois err ", err); - alert("something went wrong"); + setIsAlert({ + isShow: true, + alertMessage: "something went wrong" + }); }); return response; From 47ddac3529748bd0adcc80d9a5439c480aad6b89 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Mon, 11 Dec 2023 17:50:36 +0530 Subject: [PATCH 024/111] fix: multisign signature issue in mobile view --- .../src/Component/SignYourselfPdf.js | 2 +- .../src/Component/component/alertComponent.js | 77 +++++++++++++++---- .../Component/component/defaultSignature.js | 15 ++-- .../src/Component/recipientSignPdf.js | 41 ++++++---- .../SignDocuments/src/css/signature.css | 32 ++++---- 5 files changed, 112 insertions(+), 55 deletions(-) diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js index f111102e1..7c0dc30a9 100644 --- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js +++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js @@ -478,7 +478,7 @@ function SignYourSelf() { } //else if signature is more than one then embed all sign with the use of pdf-lib else if (xyPostion.length > 0 && xyPostion[0].pos.length > 0) { - const flag = false; + const flag = true; //embed document's object id to all pages in pdf document await embedDocId(pdfDoc, documentId, allPages); diff --git a/microfrontends/SignDocuments/src/Component/component/alertComponent.js b/microfrontends/SignDocuments/src/Component/component/alertComponent.js index 94b95ea8e..f242e87a2 100644 --- a/microfrontends/SignDocuments/src/Component/component/alertComponent.js +++ b/microfrontends/SignDocuments/src/Component/component/alertComponent.js @@ -1,11 +1,24 @@ import React from "react"; import Modal from "react-bootstrap/Modal"; import ModalHeader from "react-bootstrap/esm/ModalHeader"; +import { themeColor } from "../../utils/ThemeColor/backColor"; -function AlertComponent({ isShow, alertMessage, setIsAlert }) { +function AlertComponent({ + isShow, + alertMessage, + setIsAlert, + isdefaultSign, + addDefaultSignature, + headBG +}) { return ( - + Alert @@ -13,21 +26,51 @@ function AlertComponent({ isShow, alertMessage, setIsAlert }) { {alertMessage} - + {isdefaultSign ? ( + <> + + + + ) : ( + + )} ); diff --git a/microfrontends/SignDocuments/src/Component/component/defaultSignature.js b/microfrontends/SignDocuments/src/Component/component/defaultSignature.js index 5bc7fedd9..c79d0f8d6 100644 --- a/microfrontends/SignDocuments/src/Component/component/defaultSignature.js +++ b/microfrontends/SignDocuments/src/Component/component/defaultSignature.js @@ -1,20 +1,17 @@ import React from "react"; - function DefaultSignature({ themeColor, defaultSignImg, - setShowAlreadySignDoc, - xyPostion + xyPostion, + setIsAlert }) { const confirmToaddDefaultSign = () => { if (xyPostion.length > 0) { - const alreadySign = { - status: true, - mssg: "Are you sure you want to sign at requested locations?", - sure: true - }; - setShowAlreadySignDoc(alreadySign); + setIsAlert({ + isShow: true, + alertMessage: "Are you sure you want to sign at requested locations?" + }); } else { alert("please select position!"); } diff --git a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js index d45ef386f..dc4f36218 100644 --- a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js +++ b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js @@ -72,6 +72,10 @@ function EmbedPdfImage() { const [isDecline, setIsDecline] = useState({ isDeclined: false }); + const [addDefaultSign, setAddDefaultSign] = useState({ + isShow: false, + alertMessage: "" + }); const [pdfLoadFail, setPdfLoadFail] = useState({ status: false, type: "load" @@ -483,7 +487,10 @@ function EmbedPdfImage() { }); }) .catch((error) => { - console.error("Error:", error); + setIsAlert({ + isShow: true, + alertMessage: "something went wrong" + }); }); }); } @@ -632,7 +639,10 @@ function EmbedPdfImage() { } }) .catch((err) => { - console.log("error updating field is decline ", err); + setIsAlert({ + isShow: true, + alertMessage: "something went wrong" + }); }); }; @@ -658,7 +668,10 @@ function EmbedPdfImage() { } setXyPostion(xyDefaultPos); - setIsAlreadySign({ status: false }); + setAddDefaultSign({ + isShow: false, + alertMessage: "" + }); }; //function for update TourStatus @@ -785,6 +798,15 @@ function EmbedPdfImage() { alertMessage={isAlert.alertMessage} setIsAlert={setIsAlert} /> + + {/* this modal is used for show expired alert */} Close - {isAlreadySign.sure && ( - - )} {/* this is modal of signature pad */} @@ -927,6 +937,7 @@ function EmbedPdfImage() { xyPostion={xyPostion} setXyPostion={setXyPostion} setShowAlreadySignDoc={setIsAlreadySign} + setIsAlert={setAddDefaultSign} />
    ) : ( diff --git a/microfrontends/SignDocuments/src/css/signature.css b/microfrontends/SignDocuments/src/css/signature.css index 477159b03..34ed5ea08 100644 --- a/microfrontends/SignDocuments/src/css/signature.css +++ b/microfrontends/SignDocuments/src/css/signature.css @@ -8,6 +8,7 @@ .penContainer { width: 460px; } + .borderResize { position: absolute; display: inline-block; @@ -15,17 +16,20 @@ height: 14px; } -.mailBtn{ - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); - padding: 3px 15px !important; - background-color: rgb(79 190 241); - border: none !important; - color: white !important; + +.mailBtn { + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); + padding: 3px 15px !important; + background-color: rgb(79 190 241); + border: none !important; + color: white !important; } + .mailBtn:hover { box-shadow: 0 2px 4px rgba(154, 36, 36, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18); } -.emailToast{ + +.emailToast { position: absolute; z-index: 10; background: #aeedae; @@ -34,7 +38,7 @@ border-radius: 2px; } - + .signatureBtn { border: 1.5px solid #47a3ad; margin-bottom: 10px; @@ -162,14 +166,15 @@ .placeholdCloseBtn { position: absolute; - right: -9px; - top: -15px; + right: -5px; + top: -5px; border-radius: 100%; font-size: 10px; cursor: pointer; - padding: 0px 5px; + padding: 0px 5.1px 1px 5px; } -.placeholderBlock{ + +.placeholderBlock { padding: 0px; z-index: 1; position: absolute; @@ -179,7 +184,8 @@ background: #daebe0; text-align: center; justify-content: center; - border-width: 0.2px + border-width: 0.2px; + } .finishBtn { From f13991b88b83859f95c4abb5bb3384c5ef24bf23 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Tue, 12 Dec 2023 15:15:19 +0530 Subject: [PATCH 025/111] fix: upload large size image overflow in placeholder --- .../src/Component/PdfRequestFiles.js | 126 +++++------- .../src/Component/SignYourselfPdf.js | 92 +++------ .../src/Component/component/renderPdf.js | 8 +- .../src/Component/component/signPad.js | 147 +++---------- .../src/Component/recipientSignPdf.js | 77 ++----- .../SignDocuments/src/utils/Utils.js | 194 +++++++++++++----- 6 files changed, 278 insertions(+), 366 deletions(-) diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js index b889549a8..4bd54bbf9 100644 --- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js +++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js @@ -20,7 +20,9 @@ import { multiSignEmbed, embedDocId, pdfNewWidthFun, - signPdfFun + signPdfFun, + calculateImgAspectRatio, + onImageSelect } from "../utils/Utils"; import Loader from "./component/loader"; import HandleError from "./component/HandleError"; @@ -476,35 +478,7 @@ function PdfRequestFiles() { //function for image upload or update const onImageChange = (event) => { if (event.target.files && event.target.files[0]) { - const imageType = event.target.files[0].type; - const reader = new FileReader(); - reader.readAsDataURL(event.target.files[0]); - reader.onloadend = function (e) { - let width, height; - const image = new Image(); - image.src = e.target.result; - image.onload = function () { - width = image.width; - height = image.height; - const aspectRatio = 460 / 184; - const imgR = width / height; - - if (imgR > aspectRatio) { - width = 460; - height = 460 / imgR; - } else { - width = 184 * imgR; - height = 184; - } - setImgWH({ width: width, height: height }); - imageRef.current.style.width = `${width}px`; - imageRef.current.style.height = `${height}px`; - }; - - image.src = reader.result; - - setImage({ src: image.src, imgType: imageType }); - }; + onImageSelect(event, setImgWH, setImage); } }; //function for upload stamp image @@ -512,7 +486,6 @@ function PdfRequestFiles() { const currentSigner = signerPos.filter( (data) => data.signerObjId === signerObjectId ); - const i = currentSigner[0].placeHolder.findIndex((object) => { return object.pageNumber === pageNumber; }); @@ -520,34 +493,16 @@ function PdfRequestFiles() { (data) => data.key === signKey && data.Width && data.Height && data.SignUrl ); - + let getIMGWH = calculateImgAspectRatio(imgWH); if (updateFilter.length > 0) { - let newWidth, nweHeight; - const aspectRatio = imgWH.width / imgWH.height; const getXYdata = currentSigner[0].placeHolder[i].pos; - if (aspectRatio === 1) { - newWidth = aspectRatio * 100; - nweHeight = aspectRatio * 100; - } else if (aspectRatio < 2) { - newWidth = aspectRatio * 100; - nweHeight = 100; - } else if (aspectRatio > 2 && aspectRatio < 4) { - newWidth = aspectRatio * 70; - nweHeight = 70; - } else if (aspectRatio > 4) { - newWidth = aspectRatio * 40; - nweHeight = 40; - } else if (aspectRatio > 5) { - newWidth = aspectRatio * 10; - nweHeight = 10; - } const getPosData = getXYdata; const addSign = getPosData.map((url, ind) => { if (url.key === signKey) { return { ...url, - Width: newWidth, - Height: nweHeight, + Width: getIMGWH.newWidth, + Height: getIMGWH.newHeight, SignUrl: image.src, ImageType: image.imgType }; @@ -571,32 +526,12 @@ function PdfRequestFiles() { const getPosData = getXYdata; - const aspectRatio = imgWH.width / imgWH.height; - - let newWidth, nweHeight; - if (aspectRatio === 1) { - newWidth = aspectRatio * 100; - nweHeight = aspectRatio * 100; - } else if (aspectRatio < 2) { - newWidth = aspectRatio * 100; - nweHeight = 100; - } else if (aspectRatio > 2 && aspectRatio < 4) { - newWidth = aspectRatio * 70; - nweHeight = 70; - } else if (aspectRatio > 4) { - newWidth = aspectRatio * 40; - nweHeight = 40; - } else if (aspectRatio > 5) { - newWidth = aspectRatio * 10; - nweHeight = 10; - } - const addSign = getPosData.map((url, ind) => { if (url.key === signKey) { return { ...url, - Width: newWidth, - Height: nweHeight, + Width: getIMGWH.newWidth, + Height: getIMGWH.newHeight, SignUrl: image.src, ImageType: image.imgType }; @@ -622,10 +557,22 @@ function PdfRequestFiles() { //function for save button to save signature or image url const onSaveSign = (isDefaultSign) => { const signatureImg = isDefaultSign ? defaultSignImg : signature; + const isSign = true; + let getIMGWH; setIsSignPad(false); setIsImageSelect(false); setImage(); - + if (isDefaultSign) { + const img = new Image(); + img.src = defaultSignImg; + if (img.complete) { + let imgWH = { + width: img.width, + height: img.height + }; + getIMGWH = calculateImgAspectRatio(imgWH); + } + } const currentSigner = signerPos.filter( (data) => data.signerObjId === signerObjectId ); @@ -639,15 +586,36 @@ function PdfRequestFiles() { updateFilter = currentSigner[0].placeHolder[i].pos.filter( (data) => data.key === signKey && data.SignUrl ); - + const getXYdata = currentSigner[0].placeHolder[i].pos; + const getPosData = getXYdata; + const posWidth = isDefaultSign + ? getIMGWH.newWidth + : isSign && getPosData[0].ImageType + ? 150 + : getPosData[0].Width + ? getPosData[0].Width + : 150; + const posHidth = isDefaultSign + ? getIMGWH.newHeight + : isSign && getPosData[0].ImageType + ? 60 + : getPosData[0].Height + ? getPosData[0].Height + : 60; if (updateFilter.length > 0) { updateFilter[0].SignUrl = signatureImg; + updateFilter[0].Width = posWidth; + updateFilter[0].Height = posHidth; } else { - const getXYdata = currentSigner[0].placeHolder[i].pos; - const getPosData = getXYdata; const addSign = getPosData.map((url, ind) => { if (url.key === signKey) { - return { ...url, SignUrl: signatureImg }; + return { + ...url, + SignUrl: signatureImg, + Width: posWidth, + Height: posHidth, + ImageType: "sign" + }; } return url; }); diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js index 7c0dc30a9..e1fad20b6 100644 --- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js +++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js @@ -21,7 +21,9 @@ import { getBase64FromIMG, embedDocId, multiSignEmbed, - pdfNewWidthFun + pdfNewWidthFun, + addDefaultSignatureImg, + onImageSelect } from "../utils/Utils"; import { useParams } from "react-router-dom"; import Tour from "reactour"; @@ -490,6 +492,7 @@ function SignYourSelf() { flag, containerWH ); + //function for call to embed signature in pdf and get digital signature pdf signPdfFun(pdfBytes, documentId); } @@ -634,54 +637,43 @@ function SignYourSelf() { //function for image upload or update const onImageChange = (event) => { if (event.target.files && event.target.files[0]) { - const imageType = event.target.files[0].type; - - const reader = new FileReader(); - reader.readAsDataURL(event.target.files[0]); - - reader.onloadend = function (e) { - let width, height; - const image = new Image(); - - image.src = e.target.result; - image.onload = function () { - width = image.width; - height = image.height; - const aspectRatio = 460 / 184; - const imgR = width / height; - - if (imgR > aspectRatio) { - width = 460; - height = 460 / imgR; - } else { - width = 184 * imgR; - height = 184; - } - setImgWH({ width: width, height: height }); - imageRef.current.style.width = `${width}px`; - imageRef.current.style.height = `${height}px`; - }; - - image.src = reader.result; - - setImage({ src: image.src, imgType: imageType }); - }; + onImageSelect(event, setImgWH, setImage); } }; + //function for upload stamp or image + const saveImage = () => { + const getImage = onSaveImage(xyPostion, index, signKey, imgWH, image); + setXyPostion(getImage); + }; + //function for save button to save signature or image url const saveSign = (isDefaultSign) => { const signatureImg = isDefaultSign ? defaultSignImg : signature; + const signFlag = true; + let imgWH = { width: "", height: "" }; setIsSignPad(false); - setIsImageSelect(false); - setImage(); + + if (isDefaultSign) { + const img = new Image(); + img.src = defaultSignImg; + if (img.complete) { + imgWH = { + width: img.width, + height: img.height + }; + } + } const getUpdatePosition = onSaveSign( xyPostion, index, signKey, - signatureImg + signatureImg, + imgWH, + isDefaultSign, + signFlag ); setXyPostion(getUpdatePosition); @@ -740,35 +732,11 @@ function SignYourSelf() { } }; - //function for upload stamp or image - const saveImage = () => { - const getImage = onSaveImage(xyPostion, index, signKey, imgWH, image); - setXyPostion(getImage); - }; - //function for add default signature url in local array const addDefaultSignature = () => { - let xyDefaultPos = []; - for (let i = 0; i < xyPostion.length; i++) { - const getXYdata = xyPostion[i].pos; - const getPageNo = xyPostion[i].pageNumber; - const getPosData = getXYdata; + const getXyData = addDefaultSignatureImg(xyPostion, defaultSignImg); - const addSign = getPosData.map((url, ind) => { - if (url) { - return { ...url, SignUrl: defaultSignImg }; - } - return url; - }); - - const newXypos = { - pageNumber: getPageNo, - pos: addSign - }; - xyDefaultPos.push(newXypos); - } - - setXyPostion(xyDefaultPos); + setXyPostion(getXyData); setShowAlreadySignDoc({ status: false }); }; const tourConfig = [ diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js index 8f7bcd5bf..a3990fe61 100644 --- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js +++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js @@ -221,7 +221,9 @@ function RenderPdf({ true ); }} - lockAspectRatio={pos.Width && 2.5} + lockAspectRatio={ + pos.Width ? pos.Width / pos.Height : 2.5 + } default={{ x: xPos(pos), y: yPos(pos) @@ -776,7 +778,9 @@ function RenderPdf({ width: posWidth(pos), height: posHeight(pos) }} - lockAspectRatio={pos.Width && 2.5} + lockAspectRatio={ + pos.Width ? pos.Width / pos.Height : 2.5 + } //if pos.isMobile false -- placeholder saved from mobile view then handle position in desktop view to multiply by scale default={{ diff --git a/microfrontends/SignDocuments/src/Component/component/signPad.js b/microfrontends/SignDocuments/src/Component/component/signPad.js index ddbe292a3..d077547bd 100644 --- a/microfrontends/SignDocuments/src/Component/component/signPad.js +++ b/microfrontends/SignDocuments/src/Component/component/signPad.js @@ -18,11 +18,10 @@ function SignPad({ isImageSelect, imageRef, onImageChange, - onSaveImage, image, defaultSign, - setSignature, + setSignature }) { const [penColor, setPenColor] = useState("blue"); const allColor = [bluePen, redPen, blackPen]; @@ -47,14 +46,12 @@ function SignPad({ //save button component const SaveBtn = () => { - // console.log("isSign",isSignImg,image) - return (
    {!isStamp && !isImageSelect && (
    @@ -175,7 +172,7 @@ function SignPad({ setIsTab("uploadImage"); }} style={{ - color: isTab === "uploadImage" ? themeColor() : "#515252", + color: isTab === "uploadImage" ? themeColor() : "#515252" }} className="signTab" > @@ -186,7 +183,7 @@ function SignPad({ border: isTab === "uploadImage" ? "1.5px solid #108783" - : "1.5px solid #ffffff", + : "1.5px solid #ffffff" }} >
    @@ -202,7 +199,7 @@ function SignPad({ }} style={{ color: - isTab === "mysignature" ? themeColor() : "#515252", + isTab === "mysignature" ? themeColor() : "#515252" }} className="signTab" > @@ -213,7 +210,7 @@ function SignPad({ border: isTab === "mysignature" ? "1.5px solid #108783" - : "1.5px solid #ffffff", + : "1.5px solid #ffffff" }} >
    @@ -228,7 +225,7 @@ function SignPad({ background: "none", paddingLeft: "7px", paddingRight: "7px", - marginRight: "5px", + marginRight: "5px" }} onClick={() => { setPenColor("blue"); @@ -251,14 +248,12 @@ function SignPad({
    @@ -267,8 +262,7 @@ function SignPad({ style={{ width: "100%", height: "100%", - background: "rgb(255, 255, 255)", - objectFit: "contain", + objectFit: "contain" }} src={defaultSign} /> @@ -282,13 +276,12 @@ function SignPad({
    imageRef.current.click()} @@ -300,7 +293,6 @@ function SignPad({ accept="image/*" ref={imageRef} hidden - // style={{ display: "none" }} />
    Upload
    @@ -309,24 +301,25 @@ function SignPad({ <>
    print img
    @@ -336,36 +329,11 @@ function SignPad({ ) ) : ( <> - {/* {isSignImg ? ( -
    - preview image -
    - ) : ( */} @@ -373,17 +341,16 @@ function SignPad({ } dotSize={1} /> - {/* )} */}
    -
    +
    {allColor.map((data, key) => { return ( { if (key === 0) { @@ -414,60 +381,14 @@ function SignPad({ width={20} height={20} /> - // ); })}
    -
    )} - - {/* - {!isStamp && !isImageSelect && ( - - )} - - - */}
    ); diff --git a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js index dc4f36218..6421e8a8b 100644 --- a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js +++ b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js @@ -22,7 +22,9 @@ import { urlValidator, multiSignEmbed, embedDocId, - signPdfFun + signPdfFun, + addDefaultSignatureImg, + onImageSelect } from "../utils/Utils"; import Tour from "reactour"; import Signedby from "./component/signedby"; @@ -548,60 +550,43 @@ function EmbedPdfImage() { //function for image upload or update const onImageChange = (event) => { if (event.target.files && event.target.files[0]) { - const imageType = event.target.files[0].type; - - const reader = new FileReader(); - reader.readAsDataURL(event.target.files[0]); - - reader.onloadend = function (e) { - let width, height; - const image = new Image(); - - image.src = e.target.result; - image.onload = function () { - width = image.width; - height = image.height; - const aspectRatio = 460 / 184; - const imgR = width / height; - - if (imgR > aspectRatio) { - width = 460; - height = 460 / imgR; - } else { - width = 184 * imgR; - height = 184; - } - setImgWH({ width: width, height: height }); - imageRef.current.style.width = `${width}px`; - imageRef.current.style.height = `${height}px`; - }; - - image.src = reader.result; - - setImage({ src: image.src, imgType: imageType }); - }; + onImageSelect(event, setImgWH, setImage); } }; //function for save button to save signature or image url const saveSign = (isDefaultSign) => { const signatureImg = isDefaultSign ? defaultSignImg : signature; + const signFlag = true; + let imgWH = { width: "", height: "" }; setIsSignPad(false); setIsImageSelect(false); setImage(); + if (isDefaultSign) { + const img = new Image(); + img.src = defaultSignImg; + if (img.complete) { + imgWH = { + width: img.width, + height: img.height + }; + } + } const getUpdatePosition = onSaveSign( xyPostion, index, signKey, - signatureImg + signatureImg, + imgWH, + isDefaultSign, + signFlag ); if (getUpdatePosition) { setXyPostion(getUpdatePosition); } }; - //function for upload stamp image const saveImage = () => { const getImage = onSaveImage(xyPostion, index, signKey, imgWH, image); @@ -647,27 +632,9 @@ function EmbedPdfImage() { }; const addDefaultSignature = () => { - let xyDefaultPos = []; - for (let i = 0; i < xyPostion.length; i++) { - const getXYdata = xyPostion[i].pos; - const getPageNo = xyPostion[i].pageNumber; - const getPosData = getXYdata; + const getXyData = addDefaultSignatureImg(xyPostion, defaultSignImg); - const addSign = getPosData.map((url, ind) => { - if (url) { - return { ...url, SignUrl: defaultSignImg }; - } - return url; - }); - - const newXypos = { - pageNumber: getPageNo, - pos: addSign - }; - xyDefaultPos.push(newXypos); - } - - setXyPostion(xyDefaultPos); + setXyPostion(getXyData); setAddDefaultSign({ isShow: false, alertMessage: "" diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index 27659a704..a1aca4c2e 100644 --- a/microfrontends/SignDocuments/src/utils/Utils.js +++ b/microfrontends/SignDocuments/src/utils/Utils.js @@ -77,46 +77,49 @@ export function getHostUrl() { } } +export const calculateImgAspectRatio = (imgWH) => { + let newWidth, newHeight; + const aspectRatio = imgWH.width / imgWH.height; + if (aspectRatio === "2.533333333333333") { + newWidth = 150; + newHeight = 60; + } else if (aspectRatio === 1) { + newWidth = aspectRatio * 100; + newHeight = aspectRatio * 100; + } else if (aspectRatio < 1) { + newWidth = aspectRatio * 70; + newHeight = 70; + } else if (aspectRatio < 2) { + newWidth = aspectRatio * 100; + newHeight = 100; + } else if (aspectRatio > 2 && aspectRatio < 4) { + newWidth = aspectRatio * 70; + newHeight = 70; + } else if (aspectRatio > 4) { + newWidth = aspectRatio * 40; + newHeight = 40; + } else if (aspectRatio > 5) { + newWidth = aspectRatio * 10; + newHeight = 10; + } + return { newHeight, newWidth }; +}; + //function for upload stamp or image export function onSaveImage(xyPostion, index, signKey, imgWH, image) { const updateFilter = xyPostion[index].pos.filter( (data, ind) => data.key === signKey && data.Width && data.Height && data.SignUrl ); - + let getIMGWH = calculateImgAspectRatio(imgWH); + const getXYdata = xyPostion[index].pos; if (updateFilter.length > 0) { - let newWidth, newHeight; - const aspectRatio = imgWH.width / imgWH.height; - - const getXYdata = xyPostion[index].pos; - - if (aspectRatio === 1) { - newWidth = aspectRatio * 100; - newHeight = aspectRatio * 100; - } else if (aspectRatio < 2) { - newWidth = aspectRatio * 100; - newHeight = 100; - } else if (aspectRatio > 2 && aspectRatio < 4) { - newWidth = aspectRatio * 70; - newHeight = 70; - } else if (aspectRatio > 4) { - newWidth = aspectRatio * 40; - newHeight = 40; - } else if (aspectRatio > 5) { - newWidth = aspectRatio * 10; - newHeight = 10; - } - - let getPosData = xyPostion[index].pos.filter( - (data) => data.key === signKey - ); - const addSign = getXYdata.map((url, ind) => { if (url.key === signKey) { return { ...url, - Width: getPosData[0].Width ? getPosData[0].Width : newWidth, - Height: getPosData[0].Height ? getPosData[0].Height : newHeight, + Width: getIMGWH.newWidth, + Height: getIMGWH.newHeight, SignUrl: image.src, ImageType: image.imgType }; @@ -131,39 +134,19 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) { return obj; }); return newUpdateUrl; - // setXyPostion(newUpdateUrl); } else { const getXYdata = xyPostion[index].pos; let getPosData = xyPostion[index].pos.filter( (data) => data.key === signKey ); - const aspectRatio = imgWH.width / imgWH.height; - - let newWidth, newHeight; - if (aspectRatio === 1) { - newWidth = aspectRatio * 100; - newHeight = aspectRatio * 100; - } else if (aspectRatio < 2) { - newWidth = aspectRatio * 100; - newHeight = 100; - } else if (aspectRatio > 2 && aspectRatio < 4) { - newWidth = aspectRatio * 70; - newHeight = 70; - } else if (aspectRatio > 4) { - newWidth = aspectRatio * 40; - newHeight = 40; - } else if (aspectRatio > 5) { - newWidth = aspectRatio * 10; - newHeight = 10; - } const addSign = getXYdata.map((url, ind) => { if (url.key === signKey) { return { ...url, - Width: getPosData[0].Width ? getPosData[0].Width : newWidth, - Height: getPosData[0].Height ? getPosData[0].Height : newHeight, + Width: getIMGWH.newWidth, + Height: getIMGWH.newHeight, SignUrl: image.src, ImageType: image.imgType }; @@ -182,17 +165,46 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) { } //function for save button to save signature or image url -export function onSaveSign(xyPostion, index, signKey, signatureImg) { +export function onSaveSign( + xyPostion, + index, + signKey, + signatureImg, + imgWH, + isDefaultSign, + isSign +) { let getXYdata = xyPostion[index].pos; let getPosData = xyPostion[index].pos.filter((data) => data.key === signKey); + let getIMGWH; + if (isDefaultSign) { + getIMGWH = calculateImgAspectRatio(imgWH); + } + + const posWidth = isDefaultSign + ? getIMGWH.newWidth + : isSign && getPosData[0].ImageType + ? 150 + : getPosData[0].Width + ? getPosData[0].Width + : 150; + const posHidth = isDefaultSign + ? getIMGWH.newHeight + : isSign && getPosData[0].ImageType + ? 60 + : getPosData[0].Height + ? getPosData[0].Height + : 60; + const addSign = getXYdata.map((url, ind) => { if (url.key === signKey) { return { ...url, - Width: getPosData[0].Width ? getPosData[0].Width : 150, - Height: getPosData[0].Height ? getPosData[0].Height : 60, - SignUrl: signatureImg + Width: posWidth, + Height: posHidth, + SignUrl: signatureImg, + ImageType: "sign" }; } return url; @@ -207,6 +219,78 @@ export function onSaveSign(xyPostion, index, signKey, signatureImg) { return newUpdateUrl; } +//function for add default signature or image for all requested location +export const addDefaultSignatureImg = (xyPostion, defaultSignImg) => { + let imgWH = { width: "", height: "" }; + const img = new Image(); + img.src = defaultSignImg; + if (img.complete) { + imgWH = { + width: img.width, + height: img.height + }; + } + const getIMGWH = calculateImgAspectRatio(imgWH); + let xyDefaultPos = []; + for (let i = 0; i < xyPostion.length; i++) { + const getXYdata = xyPostion[i].pos; + const getPageNo = xyPostion[i].pageNumber; + const getPosData = getXYdata; + + const addSign = getPosData.map((url, ind) => { + if (url) { + return { + ...url, + SignUrl: defaultSignImg, + Width: getIMGWH.newWidth, + Height: getIMGWH.newHeight, + ImageType: "default" + }; + } + return url; + }); + + const newXypos = { + pageNumber: getPageNo, + pos: addSign + }; + xyDefaultPos.push(newXypos); + } + return xyDefaultPos; +}; + +//function for select image and upload image +export const onImageSelect = (event, setImgWH, setImage) => { + const imageType = event.target.files[0].type; + const reader = new FileReader(); + reader.readAsDataURL(event.target.files[0]); + + reader.onloadend = function (e) { + let width, height; + const image = new Image(); + + image.src = e.target.result; + image.onload = function () { + width = image.width; + height = image.height; + const aspectRatio = 460 / 184; + const imgR = width / height; + + if (imgR > aspectRatio) { + width = 460; + height = 460 / imgR; + } else { + width = 184 * imgR; + height = 184; + } + setImgWH({ width: width, height: height }); + }; + + image.src = reader.result; + + setImage({ src: image.src, imgType: imageType }); + }; +}; //function for getting document details from contract_Documents class export const contractDocument = async (documentId) => { const data = { From 2b345ff840aa203b443fa5d51d7b5ef6d3155f67 Mon Sep 17 00:00:00 2001 From: prafull-opensignlabs Date: Tue, 12 Dec 2023 17:57:11 +0530 Subject: [PATCH 026/111] add new template form --- .../src/components/AppendFormInForm.js | 1 + apps/OpenSign/src/components/TreeWidget.js | 4 +- .../src/components/fields/CreateFolder.js | 148 +++++++++ .../src/components/fields/FileUpload.js | 20 +- .../src/components/fields/SelectFolder.js | 271 ++++++++++++++++ .../src/components/fields/SignersInput.js | 190 +++++++++++ apps/OpenSign/src/constant/const.js | 2 + apps/OpenSign/src/json/ReportJson.js | 12 +- apps/OpenSign/src/primitives/Alert.js | 30 ++ .../src/primitives/GetReportDisplay.js | 21 +- apps/OpenSign/src/primitives/Modal.js | 28 ++ apps/OpenSign/src/primitives/TemplateForm.js | 304 ++++++++++++++++++ apps/OpenSign/src/routes/Form.js | 23 +- apps/OpenSignServer/cloud/main.js | 10 +- .../cloud/parsefunction/TemplateAfterSave.js | 83 +++++ .../cloud/parsefunction/reportsJson.js | 13 +- .../migrations/20231129103946-update_menu.cjs | 8 + .../20231208132950-create_template_cls.cjs | 40 +++ apps/OpenSignServer/index.js | 4 +- 19 files changed, 1165 insertions(+), 47 deletions(-) create mode 100644 apps/OpenSign/src/components/fields/CreateFolder.js create mode 100644 apps/OpenSign/src/components/fields/SelectFolder.js create mode 100644 apps/OpenSign/src/components/fields/SignersInput.js create mode 100644 apps/OpenSign/src/constant/const.js create mode 100644 apps/OpenSign/src/primitives/Alert.js create mode 100644 apps/OpenSign/src/primitives/Modal.js create mode 100644 apps/OpenSign/src/primitives/TemplateForm.js create mode 100644 apps/OpenSignServer/cloud/parsefunction/TemplateAfterSave.js create mode 100644 apps/OpenSignServer/databases/migrations/20231208132950-create_template_cls.cjs diff --git a/apps/OpenSign/src/components/AppendFormInForm.js b/apps/OpenSign/src/components/AppendFormInForm.js index 22017e423..f5c1d51c2 100644 --- a/apps/OpenSign/src/components/AppendFormInForm.js +++ b/apps/OpenSign/src/components/AppendFormInForm.js @@ -46,6 +46,7 @@ const AppendFormInForm = (props) => { // Define a function to handle form submission const handleSubmit = async (e) => { e.preventDefault(); + e.stopPropagation(); setIsLoader(true); Parse.serverURL = parseBaseUrl; Parse.initialize(parseAppId); diff --git a/apps/OpenSign/src/components/TreeWidget.js b/apps/OpenSign/src/components/TreeWidget.js index ecbce7af4..569112d71 100644 --- a/apps/OpenSign/src/components/TreeWidget.js +++ b/apps/OpenSign/src/components/TreeWidget.js @@ -5,7 +5,7 @@ import Parse from "parse"; import axios from "axios"; import "../styles/spinner.css"; import TreeFormComponent from "./TreeFormComponent"; -import TreeEditForm from "./TreeEditForm"; +// import TreeEditForm from "./TreeEditForm"; import "../styles/modal.css"; import Modal from "react-modal"; @@ -22,7 +22,7 @@ const TreeWidget = (props) => { const [schemaState, setSchemaState] = useState({}); const [TabURL, setTabURL] = useState(""); const [editable, setEditable] = useState(false); - const [editId, setEditId] = useState(""); + // const [editId, setEditId] = useState(""); const [defaultState, setDefaultState] = useState(false); const [isShowModal, setIsShowModal] = useState(false); const selectFolderHandle = async () => { diff --git a/apps/OpenSign/src/components/fields/CreateFolder.js b/apps/OpenSign/src/components/fields/CreateFolder.js new file mode 100644 index 000000000..9b6f4beec --- /dev/null +++ b/apps/OpenSign/src/components/fields/CreateFolder.js @@ -0,0 +1,148 @@ +import React, { useEffect, useState } from "react"; +import Parse from "parse"; +import { templateCls } from "../../constant/const"; +import Alert from "../../primitives/Alert"; + +const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => { + const folderPtr = { + __type: "Pointer", + className: folderCls, + objectId: parentFolderId + }; + const [name, setName] = useState(""); + const [folderList, setFolderList] = useState([]); + const [isAlert, setIsAlert] = useState(false); + const [selectedParent, setSelectedParent] = useState(); + const [alert, setAlert] = useState({ type: "info", message: "" }); + useEffect(() => { + fetchFolder(); + // eslint-disable-next-line + }, []); + + const fetchFolder = async () => { + try { + const fetchFolder = new Parse.Query(folderCls); + if (parentFolderId) { + fetchFolder.equalTo("Folder", folderPtr); + fetchFolder.equalTo("Type", "Folder"); + } else { + fetchFolder.doesNotExist("Folder"); + fetchFolder.equalTo("Type", "Folder"); + } + + const res = await fetchFolder.find(); + if (res) { + const result = JSON.parse(JSON.stringify(res)); + if (result) { + setFolderList(result); + } + } + } catch (error) { + console.log("Err ", error); + } + }; + const handleCreateFolder = async (event) => { + event.preventDefault(); + if (name) { + const currentUser = Parse.User.current(); + const exsitQuery = new Parse.Query(templateCls); + exsitQuery.equalTo("Name", name); + exsitQuery.equalTo("Type", "Folder"); + if (parentFolderId) { + exsitQuery.equalTo("Folder", folderPtr); + } + const templExist = await exsitQuery.first(); + if (templExist) { + setAlert({ type: "dange", message: "Folder already exist!" }); + setIsAlert(true); + setTimeout(() => { + setIsAlert(false); + }, 1000); + } else { + const template = new Parse.Object(templateCls); + template.set("Name", name); + template.set("Type", "Folder"); + + if (selectedParent) { + template.set("Folder", { + __type: "Pointer", + className: folderCls, + objectId: selectedParent + }); + } else if (parentFolderId) { + template.set("Folder", folderPtr); + } + template.set("CreatedBy", Parse.User.createWithoutData(currentUser.id)); + const res = await template.save(); + if (res) { + if (onSuccess) { + setAlert({ + type: "success", + message: "Folder created successfully!" + }); + setIsAlert(true); + setTimeout(() => { + setIsAlert(false); + }, 1000); + onSuccess(res); + } + } + } + } else { + setAlert({ type: "info", message: "Please fill folder name" }); + setIsAlert(true); + setTimeout(() => { + setIsAlert(false); + }, 1000); + } + }; + const handleOptions = (e) => { + setSelectedParent(e.target.value); + }; + return ( +
    + {isAlert && {alert.message}} +
    +

    Create Folder

    +
    + + setName(e.target.value)} + required + /> +
    +
    + + +
    +
    + +
    +
    +
    + ); +}; + +export default CreateFolder; diff --git a/apps/OpenSign/src/components/fields/FileUpload.js b/apps/OpenSign/src/components/fields/FileUpload.js index 09a11e8d2..66eca92b0 100644 --- a/apps/OpenSign/src/components/fields/FileUpload.js +++ b/apps/OpenSign/src/components/fields/FileUpload.js @@ -271,10 +271,12 @@ const FileUpload = (props) => {
    - + {process.env.DROPBOX_APP_KEY && ( + + )}
    ) : (
    @@ -294,10 +296,12 @@ const FileUpload = (props) => { accept="application/pdf,application/vnd.ms-excel" onChange={onChange} /> - + {process.env.DROPBOX_APP_KEY && ( + + )}
    )} diff --git a/apps/OpenSign/src/components/fields/SelectFolder.js b/apps/OpenSign/src/components/fields/SelectFolder.js new file mode 100644 index 000000000..434bbed7d --- /dev/null +++ b/apps/OpenSign/src/components/fields/SelectFolder.js @@ -0,0 +1,271 @@ +import React, { useEffect, useState } from "react"; +import Parse from "parse"; +import CreateFolder from "./CreateFolder"; +import { templateCls } from "../../constant/const"; + +const SelectFolder = ({ required, onSuccess }) => { + const [isOpen, SetIsOpen] = useState(false); + const [clickFolder, setClickFolder] = useState(""); + const [selectFolder, setSelectedFolder] = useState({}); + const [folderList, setFolderList] = useState([]); + const [tabList, setTabList] = useState([]); + const [isLoader, setIsLoader] = useState(false); + const [folderPath, setFolderPath] = useState(""); + const [isAdd, setIsAdd] = useState(false); + useEffect(() => { + if (isOpen) { + setIsAdd(false); + setClickFolder({}); + setFolderList([]); + setTabList([]); + fetchFolder(); + } + }, [isOpen]); + const fetchFolder = async (folderPtr) => { + setIsLoader(true); + try { + const fetchFolder = new Parse.Query(templateCls); + if (folderPtr) { + fetchFolder.equalTo("Folder", folderPtr); + fetchFolder.equalTo("Type", "Folder"); + } else { + fetchFolder.doesNotExist("Folder"); + fetchFolder.equalTo("Type", "Folder"); + } + + const res = await fetchFolder.find(); + if (res) { + const result = JSON.parse(JSON.stringify(res)); + if (result) { + setFolderList(result); + setIsLoader(false); + } + setIsLoader(false); + } + } catch (error) { + setIsLoader(false); + } + }; + const handleSelect = (item) => { + setFolderList([]); + setClickFolder({ ObjectId: item.objectId, Name: item.Name }); + if (tabList.length > 0) { + const tab = tabList.some((x) => x.objectId === item.objectId); + if (!tab) { + setTabList((tabs) => [...tabs, item]); + const folderPtr = { + __type: "Pointer", + className: templateCls, + objectId: item.objectId + }; + fetchFolder(folderPtr); + } + } else { + setTabList((tabs) => [...tabs, item]); + const folderPtr = { + __type: "Pointer", + className: templateCls, + objectId: item.objectId + }; + + fetchFolder(folderPtr); + } + }; + + const handleSubmit = () => { + let url = "Root"; + tabList.forEach((t) => { + url = url + " / " + t.Name; + }); + setFolderPath(url); + setSelectedFolder(clickFolder); + if (onSuccess) { + onSuccess(clickFolder); + } + SetIsOpen(false); + }; + const handleCancel = () => { + SetIsOpen(false); + setClickFolder({}); + setFolderList([]); + setTabList([]); + }; + + const removeTabListItem = async (e, i) => { + e.preventDefault(); + // setEditable(false); + if (!isAdd) { + setIsLoader(true); + let folderPtr; + if (i) { + setFolderList([]); + let list = tabList.filter((itm, j) => { + if (j <= i) { + return itm; + } + }); + let _len = list.length - 1; + folderPtr = { + __type: "Pointer", + className: templateCls, + objectId: list[_len].objectId + }; + setTabList(list); + } else { + setClickFolder({}); + setSelectedFolder({}); + setFolderList([]); + setTabList([]); + } + fetchFolder(folderPtr); + } + }; + const handleCreate = () => { + setIsAdd(!isAdd); + }; + const handleAddFolder = () => { + setFolderList([]); + if (clickFolder && clickFolder.ObjectId) { + fetchFolder({ + __type: "Pointer", + className: templateCls, + objectId: clickFolder.ObjectId + }); + } else { + fetchFolder(); + } + }; + return ( +
    +
    + +
    +
    +
    + +
    +
    +
    +

    + {selectFolder && selectFolder.Name ? selectFolder.Name : "Root"} +

    +
    SetIsOpen(true)}> + +
    +
    +

    + {selectFolder && selectFolder.Name ? `(${folderPath})` : ""} +

    +
    +
    + {isOpen && ( +
    +
    +
    + Select Folder +
    +
    + +
    +
    +
    +
    +
    + removeTabListItem(e)} + > + Root /{" "} + + {tabList && + tabList.map((tab, i) => ( + + removeTabListItem(e, i)} + > + {tab.Name} + + {" / "} + + ))} +
    +
    +
    + {!isAdd && + folderList.length > 0 && + folderList.map((folder) => ( +
    handleSelect(folder)} + > +
    + + {folder.Name} +
    +
    + ))} + {isAdd && ( + + )} + {isLoader && ( +
    + +
    + )} +
    +
    +
    +
    +
    + {isAdd ? ( + + ) : ( + + )} +
    +
    + +
    +
    +
    + )} +
    + ); +}; + +export default SelectFolder; diff --git a/apps/OpenSign/src/components/fields/SignersInput.js b/apps/OpenSign/src/components/fields/SignersInput.js new file mode 100644 index 000000000..0e9697965 --- /dev/null +++ b/apps/OpenSign/src/components/fields/SignersInput.js @@ -0,0 +1,190 @@ +import React, { useState, useEffect } from "react"; +import Select from "react-select"; +import AppendFormInForm from "../AppendFormInForm"; +import Modal from "react-modal"; +import Parse from "parse"; +function arrayMove(array, from, to) { + array = array.slice(); + array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]); + return array; +} + +/** + * react-sortable-hoc is depcreated not usable from react 18.x.x + * need to replace it with @dnd-kit + * code changes required + */ + +const SignersInput = (props) => { + Modal.setAppElement("body"); + const [state, setState] = useState(undefined); + // const [editFormData, setEditFormData] = useState([]); + const [selected, setSelected] = React.useState([]); + const [isModal, setIsModel] = useState(false); + const onChange = (selectedOptions) => setSelected(selectedOptions); + const [modalIsOpen, setModalIsOpen] = useState(false); + + const onSortEnd = ({ oldIndex, newIndex }) => { + const newValue = arrayMove(selected, oldIndex, newIndex); + setSelected(newValue); + }; + + const GetSelectListData = async () => { + try { + const currentUser = Parse.User.current(); + const contactbook = new Parse.Query("contracts_Contactbook"); + contactbook.equalTo( + "CreatedBy", + Parse.User.createWithoutData(currentUser.id) + ); + contactbook.notEqualTo("IsDeleted", true); + const contactRes = await contactbook.find(); + if (contactRes) { + const res = JSON.parse(JSON.stringify(contactRes)); + let list = []; + + // let _selected = []; + res.forEach((x) => { + let obj = { + label: x.Name, + value: x.objectId, + isChecked: true + }; + + list.push(obj); + }); + setState(list); + } + } catch (error) { + console.log("err", error); + } + }; + + useEffect(() => { + GetSelectListData(); + }, []); + + useEffect(() => { + if (selected && selected.length) { + let newData = []; + selected.forEach((x) => { + newData.push(x.value); + }); + if (props.onChange) { + props.onChange(newData); + } + } + + // eslint-disable-next-line + }, [selected]); + + const handleModalCloseClick = () => { + setIsModel(false); + setModalIsOpen(false); + }; + + const openModal = () => { + setModalIsOpen(true); + }; + + // `handleNewDetails` is used to set just save from quick form to selected option in dropdown + const handleNewDetails = (data) => { + setState([...state, data]); + if (selected.length > 0) { + setSelected([...selected, data]); + } else { + setSelected([data]); + } + }; + + return ( +
    + +
    +
    + handleFileInput(e)} + accept="application/pdf,application/vnd.ms-excel" + required + /> + {process.env.DROPBOX_APP_KEY && ( + + )} +
    + )} +
    +
    + + handleStrInput(e)} + required + /> +
    +
    + + handleStrInput(e)} + /> +
    +
    + + handleStrInput(e)} + /> +
    + + +
    + +
    handleReset()} + > + Reset +
    +
    + +
    + ); +}; + +export default TemplateForm; diff --git a/apps/OpenSign/src/routes/Form.js b/apps/OpenSign/src/routes/Form.js index fd5c67449..2c6c67709 100644 --- a/apps/OpenSign/src/routes/Form.js +++ b/apps/OpenSign/src/routes/Form.js @@ -25,6 +25,7 @@ import TreeWidget from "../components/TreeWidget"; import parse from "html-react-parser"; import Title from "../components/Title"; import { formJson } from "../json/FormJson"; +import TemplateForm from "../primitives/TemplateForm"; const widget = { TimeWidget: TimeWidget }; @@ -41,15 +42,19 @@ const fields = () => { function FormBuilderFn(props) { const { id } = useParams(); const navigate = useNavigate(); - return ( - - ); + if (id === "template") { + return ; + } else { + return ( + + ); + } } class FormBuilder extends Component { state = { diff --git a/apps/OpenSignServer/cloud/main.js b/apps/OpenSignServer/cloud/main.js index e42ee38e5..ee8cac810 100644 --- a/apps/OpenSignServer/cloud/main.js +++ b/apps/OpenSignServer/cloud/main.js @@ -17,6 +17,7 @@ import getUserDetails from './parsefunction/getUserDetails.js'; import getDocument from './parsefunction/getDocument.js'; import getDrive from './parsefunction/getDrive.js'; import getReport from './parsefunction/getReport.js'; +import TemplateAfterSave from './parsefunction/TemplateAfterSave.js'; Parse.Cloud.define('AddUserToRole', addUserToGroups); Parse.Cloud.define('UserGroups', getUserGroups); @@ -26,9 +27,6 @@ Parse.Cloud.define('googlesign', GoogleSign); Parse.Cloud.define('zohodetails', ZohoDetails); Parse.Cloud.define('usersignup', usersignup); Parse.Cloud.define('facebooksign', FacebookSign); -Parse.Cloud.afterSave('contracts_Document', DocumentAftersave); -Parse.Cloud.afterSave('contracts_Contactbook', ContactbookAftersave); -Parse.Cloud.afterSave('contracts_Users', ContractUsersAftersave); Parse.Cloud.define('SendOTPMailV1', sendMailOTPv1); Parse.Cloud.define('sendmail', SendMailv1); Parse.Cloud.define('AuthLoginAsMail', AuthLoginAsMail); @@ -36,4 +34,8 @@ Parse.Cloud.define('getUserId', getUserId); Parse.Cloud.define('getUserDetails', getUserDetails); Parse.Cloud.define('getDocument', getDocument); Parse.Cloud.define('getDrive', getDrive) -Parse.Cloud.define('getReport', getReport) \ No newline at end of file +Parse.Cloud.define('getReport', getReport) +Parse.Cloud.afterSave('contracts_Document', DocumentAftersave); +Parse.Cloud.afterSave('contracts_Contactbook', ContactbookAftersave); +Parse.Cloud.afterSave('contracts_Users', ContractUsersAftersave); +Parse.Cloud.afterSave("contracts_Template", TemplateAfterSave) \ No newline at end of file diff --git a/apps/OpenSignServer/cloud/parsefunction/TemplateAfterSave.js b/apps/OpenSignServer/cloud/parsefunction/TemplateAfterSave.js new file mode 100644 index 000000000..7d22ccb86 --- /dev/null +++ b/apps/OpenSignServer/cloud/parsefunction/TemplateAfterSave.js @@ -0,0 +1,83 @@ +export default async function TemplateAfterSave(request) { + try { + if (!request.original) { + console.log('new entry is insert in contracts_Template'); + // update acl of New Document If There are signers present in array + const signers = request.object.get('Signers'); + + if (signers && signers.length > 0) { + await updateAclDoc(request.object.id); + } else { + await updateSelfDoc(request.object.id); + } + } else { + if (request.user) { + const signers = request.object.get('Signers'); + if (signers && signers.length > 0) { + await updateAclDoc(request.object.id); + } else { + await updateSelfDoc(request.object.id); + } + } + } + } catch (err) { + console.log('err in aftersave of contracts_Template'); + console.log(err); + } + + async function updateAclDoc(objId) { + // console.log("In side updateAclDoc func") + // console.log(objId) + const Query = new Parse.Query('contracts_Template'); + Query.include('Signers'); + const updateACL = await Query.get(objId, { useMasterKey: true }); + const res = JSON.parse(JSON.stringify(updateACL)); + // console.log("res"); + // console.log(JSON.stringify(res)); + const UsersPtr = res.Signers.map(item => item.UserId); + + if (res.Signers[0].ExtUserPtr) { + const ExtUserSigners = res.Signers.map(item => { + return { + __type: 'Pointer', + className: 'contracts_Users', + objectId: item.ExtUserPtr.objectId, + }; + }); + updateACL.set('Signers', ExtUserSigners); + } + + // console.log("UsersPtr") + // console.log(JSON.stringify(UsersPtr)) + const newACL = new Parse.ACL(); + newACL.setPublicReadAccess(false); + newACL.setPublicWriteAccess(false); + newACL.setReadAccess(request.user, true); + newACL.setWriteAccess(request.user, true); + + UsersPtr.forEach(x => { + newACL.setReadAccess(x.objectId, true); + newACL.setWriteAccess(x.objectId, true); + }); + + updateACL.setACL(newACL); + updateACL.save(null, { useMasterKey: true }); + } + + async function updateSelfDoc(objId) { + // console.log("Inside updateSelfDoc func") + + const Query = new Parse.Query('contracts_Template'); + const updateACL = await Query.get(objId, { useMasterKey: true }); + // const res = JSON.parse(JSON.stringify(updateACL)); + // console.log("res"); + // console.log(JSON.stringify(res)); + const newACL = new Parse.ACL(); + newACL.setPublicReadAccess(false); + newACL.setPublicWriteAccess(false); + newACL.setReadAccess(request.user, true); + newACL.setWriteAccess(request.user, true); + updateACL.setACL(newACL); + updateACL.save(null, { useMasterKey: true }); + } +} diff --git a/apps/OpenSignServer/cloud/parsefunction/reportsJson.js b/apps/OpenSignServer/cloud/parsefunction/reportsJson.js index 8ad9c47df..66d743a6a 100644 --- a/apps/OpenSignServer/cloud/parsefunction/reportsJson.js +++ b/apps/OpenSignServer/cloud/parsefunction/reportsJson.js @@ -154,7 +154,7 @@ export default function reportJson(id, userId) { $gt: { __type: 'Date', iso: new Date().toISOString() }, }, }, - keys: ['Name', 'Note', 'Folder.Name', 'URL', 'ExtUserPtr.Name', 'Signers.Name'], + keys: ['Name', 'Folder.Name', 'URL', 'ExtUserPtr.Name', 'Signers.Name'], }; // Recent signature requests report show on dashboard case '5Go51Q7T8r': @@ -169,16 +169,7 @@ export default function reportJson(id, userId) { }, Placeholders: { $ne: null }, }, - keys: [ - 'Name', - 'Note', - 'Folder.Name', - 'URL', - 'ExtUserPtr.Name', - 'Signers.Name', - 'Signers.UserId', - 'AuditTrail', - ], + keys: ['Name', 'URL', 'ExtUserPtr.Name', 'Signers.Name', 'Signers.UserId', 'AuditTrail'], }; // Drafts report show on dashboard case 'kC5mfynCi4': diff --git a/apps/OpenSignServer/databases/migrations/20231129103946-update_menu.cjs b/apps/OpenSignServer/databases/migrations/20231129103946-update_menu.cjs index 9581be3a8..c897aefac 100644 --- a/apps/OpenSignServer/databases/migrations/20231129103946-update_menu.cjs +++ b/apps/OpenSignServer/databases/migrations/20231129103946-update_menu.cjs @@ -39,6 +39,14 @@ exports.up = async Parse => { description: '', objectId: '8mZzFxbG1z', }, + { + icon: 'fas fa-file-signature', + title: 'New template', + target: '_self', + pageType: 'form', + description: '', + objectId: 'template', + }, ], }, { diff --git a/apps/OpenSignServer/databases/migrations/20231208132950-create_template_cls.cjs b/apps/OpenSignServer/databases/migrations/20231208132950-create_template_cls.cjs new file mode 100644 index 000000000..47fe71b87 --- /dev/null +++ b/apps/OpenSignServer/databases/migrations/20231208132950-create_template_cls.cjs @@ -0,0 +1,40 @@ +/** + * + * @param {Parse} Parse + */ +exports.up = async Parse => { + const className = 'contracts_Template'; + const schema = new Parse.Schema(className); + + schema.addString('Name'); + schema.addString('URL'); + schema.addString('Note'); + schema.addString('Description'); + schema.addArray('Signers'); + schema.addBoolean('IsArchive'); + schema.addArray('Placeholders'); + schema.addPointer('Folder', 'contracts_Template'); + schema.addString('Type'); + schema.addPointer('CreatedBy', '_User'); + schema.addPointer('ExtUserPtr', 'contracts_Users'); + schema.addBoolean('EnablePhoneOTP') + schema.addBoolean('EnableEmailOTP') + schema.addBoolean('SendinOrder') + schema.addBoolean('SentToOthers') + schema.addBoolean('AutomaticReminders') + + + + return schema.save(); +}; + +/** + * + * @param {Parse} Parse + */ +exports.down = async Parse => { + const className = 'contracts_Template'; + const schema = new Parse.Schema(className); + + return schema.purge().then(() => schema.delete()); +}; diff --git a/apps/OpenSignServer/index.js b/apps/OpenSignServer/index.js index 819940954..d8944d8d3 100644 --- a/apps/OpenSignServer/index.js +++ b/apps/OpenSignServer/index.js @@ -69,7 +69,9 @@ if (process.env.SMTP_ENABLE) { export const config = { databaseURI: process.env.DATABASE_URI || process.env.MONGODB_URI || 'mongodb://localhost:27017/dev', - cloud: process.env.CLOUD || __dirname + '/cloud/main.js', + cloud: function () { + import('./cloud/main.js'); + }, appId: process.env.APP_ID || 'myAppId', masterKey: process.env.MASTER_KEY || '', //Add your master key here. Keep it secret! masterKeyIps: ['0.0.0.0/0', '::1'], // '::1' From d5853e6fc3bb1a8c6d9c3edec032272074dde580 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Tue, 12 Dec 2023 19:23:21 +0530 Subject: [PATCH 027/111] fix: placeholder block issue for select multisigners --- .../SignDocuments/public/index.html | 2 +- .../src/Component/component/emailComponent.js | 8 +++-- .../src/Component/component/renderPdf.js | 8 ++--- .../src/Component/placeHolderSign.js | 32 +++++++++++++++---- 4 files changed, 35 insertions(+), 15 deletions(-) diff --git a/microfrontends/SignDocuments/public/index.html b/microfrontends/SignDocuments/public/index.html index bf27a008e..b3ac89822 100644 --- a/microfrontends/SignDocuments/public/index.html +++ b/microfrontends/SignDocuments/public/index.html @@ -47,7 +47,7 @@ href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" /> - OpenSign App + OpenSign™ diff --git a/microfrontends/SignDocuments/src/Component/component/emailComponent.js b/microfrontends/SignDocuments/src/Component/component/emailComponent.js index 5d7691e68..cccf897f0 100644 --- a/microfrontends/SignDocuments/src/Component/component/emailComponent.js +++ b/microfrontends/SignDocuments/src/Component/component/emailComponent.js @@ -39,7 +39,7 @@ function EmailComponent({ "X-Parse-Application-Id": localStorage.getItem("parseAppId"), sessionToken: localStorage.getItem("accesstoken") }; - + const openSignUrl = "https://www.opensignlabs.com/"; const themeBGcolor = themeColor(); let params = { pdfName: pdfName, @@ -54,9 +54,11 @@ function EmailComponent({ themeBGcolor + ";'>

    Document Copy

    A copy of the document " + pdfName + - " Standard is attached to this email. Kindly download the document from the attachment.

    This is an automated email from Open Sign. For any queries regarding this email, please contact the sender " + + " Standard is attached to this email. Kindly download the document from the attachment.

    This is an automated email from OpenSign. For any queries regarding this email, please contact the sender " + sender.email + - " directly. If you think this email is inappropriate or spam, you may file a complaint with Open Sign here.

    " + " directly. If you think this email is inappropriate or spam, you may file a complaint with OpenSign here

    " }; sendMail = await axios.post(url, params, { headers: headers }); } catch (error) { diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js index a3990fe61..629bc0a66 100644 --- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js +++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js @@ -453,8 +453,8 @@ function RenderPdf({ className="placeholderBlock" onDrag={() => handleTabDrag( - pos.key, - data.signerObjId + pos.key + // data.signerObjId ) } size={{ @@ -872,8 +872,8 @@ function RenderPdf({ className="placeholderBlock" onDrag={() => handleTabDrag( - pos.key, - data.signerObjId + pos.key + // data.signerObjId ) } size={{ diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js index 8d1eb8a54..923b43d2e 100644 --- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js +++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js @@ -274,6 +274,7 @@ function PlaceHolderSign() { let xyPos = {}; if (item === "onclick") { const dropObj = { + //onclick put placeholder center on pdf xPosition: window.innerWidth / 2 - 100, yPosition: window.innerHeight / 2 - 60, isStamp: monitor, @@ -321,7 +322,6 @@ function PlaceHolderSign() { xyPosArr.push(xyPos); } - //add signers objId first inseretion if (filterSignerPos.length > 0) { const colorIndex = signerPos @@ -355,8 +355,15 @@ function PlaceHolderSign() { objectId: signerObjId } }; + // signerPos.splice(colorIndex, 1, placeHolderPos); + const newArry = [placeHolderPos]; + const newArray = [ + ...signerPos.slice(0, colorIndex), + ...newArry, + ...signerPos.slice(colorIndex + 1) + ]; - signerPos.splice(colorIndex, 1, placeHolderPos); + setSignerPos(newArray); } else { const newSignPoss = getPlaceHolder.concat(xyPosArr[0]); @@ -371,7 +378,15 @@ function PlaceHolderSign() { } }; - signerPos.splice(colorIndex, 1, placeHolderPos); + // signerPos.splice(colorIndex, 1, placeHolderPos); + const newArry = [placeHolderPos]; + const newArray = [ + ...signerPos.slice(0, colorIndex), + ...newArry, + ...signerPos.slice(colorIndex + 1) + ]; + + setSignerPos(newArray); } } else { let placeHolderPos = { @@ -400,10 +415,11 @@ function PlaceHolderSign() { setPdfOriginalWidth(pageWidth); }); }; + //function for save x and y position and show signature tab on that position const handleTabDrag = (key, signerId) => { setDragKey(key); - setSignerObjId(signerId); + // setSignerObjId(signerId); }; //function for set and update x and y postion after drag and drop signature tab @@ -610,7 +626,7 @@ function PlaceHolderSign() { const hostUrl = window.location.origin + "/loadmf/signmicroapp"; let signPdf = `${hostUrl}/login/${signersdata.objectId}/${signerMail[i].Email}/${objectId}/${serverParams}`; - + const openSignUrl = "https://www.opensignlabs.com/"; const themeBGcolor = themeColor(); let params = { recipient: signerMail[i].Email, @@ -632,9 +648,11 @@ function PlaceHolderSign() { localExpireDate + "

    This is an automated email from Open Sign. For any queries regarding this email, please contact the sender " + + ">

    This is an automated email from OpenSign. For any queries regarding this email, please contact the sender " + sender + - " directly.If you think this email is inappropriate or spam, you may file a complaint with Open Sign here.

    " + " directly.If you think this email is inappropriate or spam, you may file a complaint with OpenSign here.

    " }; sendMail = await axios.post(url, params, { headers: headers }); } catch (error) { From d6c2c66fdd51dbe02ab3db1cbaf23c9de5f3b986 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Wed, 13 Dec 2023 18:12:47 +0530 Subject: [PATCH 028/111] fix: image-upload issue in mobile view --- .../src/Component/PdfRequestFiles.js | 35 ++++++++++++++----- .../src/Component/component/renderPdf.js | 2 ++ 2 files changed, 28 insertions(+), 9 deletions(-) diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js index 4bd54bbf9..c3b3c492a 100644 --- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js +++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js @@ -494,6 +494,7 @@ function PdfRequestFiles() { data.key === signKey && data.Width && data.Height && data.SignUrl ); let getIMGWH = calculateImgAspectRatio(imgWH); + if (updateFilter.length > 0) { const getXYdata = currentSigner[0].placeHolder[i].pos; const getPosData = getXYdata; @@ -516,11 +517,17 @@ function PdfRequestFiles() { } return obj; }); - currentSigner[0].placeHolder.splice(i, 1, newUpdateUrl[0]); + const getPlaceData = currentSigner[0].placeHolder; + getPlaceData.splice(0, getPlaceData.length, ...newUpdateUrl); + const indexofSigner = signerPos.findIndex((object) => { return object.signerObjId === signerObjectId; }); - signerPos.splice(indexofSigner, 1, currentSigner[0]); + setSignerPos((prevState) => { + const newState = [...prevState]; // Create a copy of the state + newState.splice(indexofSigner, 1, ...currentSigner); // Modify the copy + return newState; // Update the state with the modified copy + }); } else { const getXYdata = currentSigner[0].placeHolder[i].pos; @@ -546,11 +553,17 @@ function PdfRequestFiles() { return obj; }); - currentSigner[0].placeHolder.splice(i, 1, newUpdateUrl[0]); + const getPlaceData = currentSigner[0].placeHolder; + getPlaceData.splice(0, getPlaceData.length, ...newUpdateUrl); + const indexofSigner = signerPos.findIndex((object) => { return object.signerObjId === signerObjectId; }); - signerPos.splice(indexofSigner, 1, currentSigner[0]); + setSignerPos((prevState) => { + const newState = [...prevState]; // Create a copy of the state + newState.splice(indexofSigner, 1, ...currentSigner); // Modify the copy + return newState; // Update the state with the modified copy + }); } }; @@ -586,6 +599,7 @@ function PdfRequestFiles() { updateFilter = currentSigner[0].placeHolder[i].pos.filter( (data) => data.key === signKey && data.SignUrl ); + const getXYdata = currentSigner[0].placeHolder[i].pos; const getPosData = getXYdata; const posWidth = isDefaultSign @@ -633,12 +647,15 @@ function PdfRequestFiles() { } return obj; }); - let signerupdate = []; - signerupdate = signerPos.filter( - (data) => data.signerObjId !== signerObjectId + + const index = signerPos.findIndex( + (data) => data.signerObjId === signerObjectId ); - signerupdate.push(newUpdatePos[0]); - setSignerPos(signerupdate); + setSignerPos((prevState) => { + const newState = [...prevState]; // Create a copy of the state + newState.splice(index, 1, ...newUpdatePos); // Modify the copy + return newState; // Update the state with the modified copy + }); } }; diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js index 629bc0a66..01993a387 100644 --- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js +++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js @@ -377,6 +377,7 @@ function RenderPdf({ onClick={() => { setIsSignPad(true); setSignKey(pos.key); + setIsStamp(false); }} > @@ -794,6 +795,7 @@ function RenderPdf({ onClick={() => { setIsSignPad(true); setSignKey(pos.key); + setIsStamp(false); }} >
    From fc3f134bd55429dbda3a6a8a212798149d3b4b0d Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Fri, 15 Dec 2023 10:22:00 +0530 Subject: [PATCH 029/111] fix: zIndex of placeholder-block and added signyourself & request signature form in openSign drive --- .../src/Component/LegaDrive/LegaDrive.css | 1 + .../src/Component/LegaDrive/LegaDrive.js | 75 ++++++++-- .../src/Component/component/renderPdf.js | 134 ++++++++++++------ .../src/Component/placeHolderSign.js | 14 +- .../SignDocuments/src/css/signature.css | 3 +- .../SignDocuments/src/utils/Utils.js | 34 ++++- 6 files changed, 203 insertions(+), 58 deletions(-) diff --git a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.css b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.css index e86310a9a..31082ed45 100644 --- a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.css +++ b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.css @@ -103,6 +103,7 @@ white-space: nowrap; background-color: transparent; border: 0; + cursor: pointer; } diff --git a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js index 20a4d3b5e..405ec5cd0 100644 --- a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js +++ b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js @@ -8,8 +8,10 @@ import ModalHeader from "react-bootstrap/esm/ModalHeader"; import { themeColor, iconColor } from "../../utils/ThemeColor/backColor"; import { getDrive } from "../../utils/Utils"; import AlertComponent from "../component/alertComponent"; +import { useNavigate } from "react-router-dom"; function PdfFile() { + const navigate = useNavigate(); const scrollRef = useRef(null); const [isList, setIsList] = useState(false); const [selectedSort, setSelectedSort] = useState("Date"); @@ -28,6 +30,7 @@ function PdfFile() { const [handleError, setHandleError] = useState(); const [folderName, setFolderName] = useState([]); const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" }); + const [isNewFol, setIsNewFol] = useState(false); const currentUser = localStorage.getItem( `Parse/${localStorage.getItem("parseAppId")}/currentUser` @@ -188,7 +191,6 @@ function PdfFile() { }; } - // console.log("data", data); await axios .post( `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem( @@ -314,6 +316,8 @@ function PdfFile() { const closeMenuOnOutsideClick = (e) => { if (isShowSort && !e.target.closest("#menu-container")) { setIsShowSort(false); + } else if (isNewFol && !e.target.closest("#folder-menu")) { + setIsNewFol(false); } }; @@ -502,6 +506,67 @@ function PdfFile() { })}
    +
    setIsNewFol(!isNewFol)} + > +
    + +
    +
    + {" "} +
    + getParentFolder()} + > + + Create folder + + navigate("/form/sHAnZphf69")} + > + + Sign Yourself + + navigate("/form/8mZzFxbG1z")} + > + {" "} + + Request Signatures{" "} + +
    +
    +
    - -
    getParentFolder()}> - -
    diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js index 01993a387..0354c81c4 100644 --- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js +++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js @@ -5,6 +5,7 @@ import { themeColor } from "../../utils/ThemeColor/backColor"; import { Document, Page, pdfjs } from "react-pdf"; import BorderResize from "./borderResize"; import { + addZIndex, handleImageResize, handleSignYourselfImageResize } from "../../utils/Utils"; @@ -46,7 +47,8 @@ function RenderPdf({ setXyPostion, index, containerWH, - setIsResize + setIsResize, + setZIndex }) { const isMobile = window.innerWidth < 767; const newWidth = containerWH.width; @@ -200,7 +202,8 @@ function RenderPdf({ ? "pointer" : "not-allowed", borderColor: themeColor(), - background: data.blockColor + background: data.blockColor, + zIndex: "1" }} className="placeholderBlock" size={{ @@ -337,7 +340,8 @@ function RenderPdf({ bounds="parent" style={{ cursor: "all-scroll", - borderColor: themeColor() + borderColor: themeColor(), + zIndex: "1" }} className="placeholderBlock" onResize={( @@ -449,7 +453,8 @@ function RenderPdf({ style={{ cursor: "all-scroll", borderColor: themeColor(), - background: data.blockColor + background: data.blockColor, + zIndex: pos.zIndex }} className="placeholderBlock" onDrag={() => @@ -482,14 +487,16 @@ function RenderPdf({ onResizeStart={() => { setIsResize(true); }} - onResizeStop={( + onResizeStop={() => { + setIsResize && setIsResize(false); + }} + onResize={( e, direction, ref, delta, position ) => { - e.stopPropagation(); handleImageResize( ref, pos.key, @@ -500,37 +507,67 @@ function RenderPdf({ setSignerPos, pdfOriginalWidth, containerWH, - false, - setIsResize + false ); }} > - -
    { - e.stopPropagation(); - handleDeleteSign( + onTouchEnd={() => { + const dataNewPlace = addZIndex( + signerPos, pos.key, - data.signerObjId + setZIndex ); + setSignerPos((prevState) => { + const newState = [...prevState]; + newState.splice( + 0, + signerPos.length, + ...dataNewPlace + ); + return newState; + }); }} style={{ - background: themeColor() - }} - className="placeholdCloseBtn" - > - x -
    -
    - {pos.isStamp ? "stamp" : "signature"} + + +
    { + e.stopPropagation(); + handleDeleteSign( + pos.key, + data.signerObjId + ); + }} + style={{ + background: themeColor() + }} + className="placeholdCloseBtn" + > + x +
    +
    + {pos.isStamp + ? "stamp" + : "signature"} +
    ); @@ -569,7 +606,8 @@ function RenderPdf({ key={pos.key} style={{ cursor: "all-scroll", - borderColor: themeColor() + borderColor: themeColor(), + zIndex: "1" }} size={{ width: pos.Width ? pos.Width : 151, @@ -772,7 +810,8 @@ function RenderPdf({ bounds="parent" style={{ cursor: "all-scroll", - borderColor: themeColor() + borderColor: themeColor(), + zIndex: "1" }} className="placeholderBlock" size={{ @@ -854,6 +893,22 @@ function RenderPdf({ placeData.pos.map((pos) => { return ( { + const dataNewPlace = addZIndex( + signerPos, + pos.key, + setZIndex + ); + setSignerPos((prevState) => { + const newState = [...prevState]; + newState.splice( + 0, + signerPos.length, + ...dataNewPlace + ); + return newState; + }); + }} key={pos.key} enableResizing={{ top: false, @@ -869,15 +924,11 @@ function RenderPdf({ style={{ cursor: "all-scroll", background: data.blockColor, - borderColor: themeColor() + borderColor: themeColor(), + zIndex: pos.zIndex }} className="placeholderBlock" - onDrag={() => - handleTabDrag( - pos.key - // data.signerObjId - ) - } + onDrag={() => handleTabDrag(pos.key)} size={{ width: pos.Width ? pos.Width : 150, height: pos.Height ? pos.Height : 60 @@ -902,7 +953,10 @@ function RenderPdf({ onResizeStart={() => { setIsResize(true); }} - onResizeStop={( + onResizeStop={() => { + setIsResize && setIsResize(false); + }} + onResize={( e, direction, ref, @@ -919,8 +973,7 @@ function RenderPdf({ setSignerPos, pdfOriginalWidth, containerWH, - false, - setIsResize + false ); }} > @@ -988,7 +1041,8 @@ function RenderPdf({ bounds="parent" style={{ borderColor: themeColor(), - cursor: "all-scroll" + cursor: "all-scroll", + zIndex: "1" }} className="placeholderBlock" onDrag={() => handleTabDrag(pos.key)} diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js index 923b43d2e..2eb873c01 100644 --- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js +++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js @@ -66,6 +66,7 @@ function PlaceHolderSign() { const [selectedEmail, setSelectedEmail] = useState(false); const [isResize, setIsResize] = useState(false); const [isAlreadyPlace, setIsAlreadyPlace] = useState(false); + const [zIndex, setZIndex] = useState(1); const [pdfLoadFail, setPdfLoadFail] = useState({ status: false, type: "load" @@ -263,6 +264,8 @@ function PlaceHolderSign() { }; const getSignerPos = (item, monitor) => { + const posZIndex = zIndex + 1; + setZIndex(posZIndex); const newWidth = containerWH.width; const scale = pdfOriginalWidth / newWidth; const key = Math.floor(1000 + Math.random() * 9000); @@ -282,7 +285,8 @@ function PlaceHolderSign() { isDrag: false, scale: scale, isMobile: isMobile, - yBottom: window.innerHeight / 2 - 60 + yBottom: window.innerHeight / 2 - 60, + zIndex: posZIndex }; dropData.push(dropObj); xyPos = { @@ -311,9 +315,9 @@ function PlaceHolderSign() { firstYPos: signBtnPosition[0] && signBtnPosition[0].yPos, yBottom: ybottom, scale: scale, - isMobile: isMobile + isMobile: isMobile, + zIndex: posZIndex }; - dropData.push(dropObj); xyPos = { pageNumber: pageNumber, @@ -322,6 +326,7 @@ function PlaceHolderSign() { xyPosArr.push(xyPos); } + //add signers objId first inseretion if (filterSignerPos.length > 0) { const colorIndex = signerPos @@ -403,6 +408,7 @@ function PlaceHolderSign() { setSignerPos((prev) => [...prev, placeHolderPos]); } }; + //function for get pdf page details const pageDetails = async (pdf) => { const load = { @@ -419,7 +425,6 @@ function PlaceHolderSign() { //function for save x and y position and show signature tab on that position const handleTabDrag = (key, signerId) => { setDragKey(key); - // setSignerObjId(signerId); }; //function for set and update x and y postion after drag and drop signature tab @@ -981,6 +986,7 @@ function PlaceHolderSign() { setSignerPos={setSignerPos} containerWH={containerWH} setIsResize={setIsResize} + setZIndex={setZIndex} /> )} diff --git a/microfrontends/SignDocuments/src/css/signature.css b/microfrontends/SignDocuments/src/css/signature.css index 34ed5ea08..3ed622f98 100644 --- a/microfrontends/SignDocuments/src/css/signature.css +++ b/microfrontends/SignDocuments/src/css/signature.css @@ -176,7 +176,6 @@ .placeholderBlock { padding: 0px; - z-index: 1; position: absolute; border-style: dashed; width: 150px; @@ -185,7 +184,7 @@ text-align: center; justify-content: center; border-width: 0.2px; - + } .finishBtn { diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index a1aca4c2e..292a9c2f4 100644 --- a/microfrontends/SignDocuments/src/utils/Utils.js +++ b/microfrontends/SignDocuments/src/utils/Utils.js @@ -219,6 +219,36 @@ export function onSaveSign( return newUpdateUrl; } +export const addZIndex = (signerPos, key, setZIndex) => { + return signerPos.map((item) => { + if (item.placeHolder && item.placeHolder.length > 0) { + // If there is a nested array, recursively add the field to the last object + return { + ...item, + placeHolder: addZIndex(item.placeHolder, key, setZIndex) + }; + } else if (item.pos && item.pos.length > 0) { + // If there is no nested array, add the new field + return { + ...item, + pos: addZIndex(item.pos, key, setZIndex) + // Adjust this line to add the desired field + }; + } else { + if (item.key === key) { + setZIndex(item.zIndex); + return { + ...item, + zIndex: item.zIndex ? item.zIndex + 1 : 1 + }; + } else { + return { + ...item + }; + } + } + }); +}; //function for add default signature or image for all requested location export const addDefaultSignatureImg = (xyPostion, defaultSignImg) => { let imgWH = { width: "", height: "" }; @@ -674,8 +704,7 @@ export const handleImageResize = ( setSignerPos, pdfOriginalWidth, containerWH, - showResize, - setIsResize + showResize ) => { const filterSignerPos = signerPos.filter( (data) => data.signerObjId === signerId @@ -753,7 +782,6 @@ export const handleImageResize = ( } } } - setIsResize && setIsResize(false); }; //function for resize image and update width and height for sign-yourself From 0b64908eabd0414e43d513186b81e1ad2e4dff2a Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Fri, 15 Dec 2023 10:59:41 +0530 Subject: [PATCH 030/111] increase zIndex of header and footer --- microfrontends/SignDocuments/src/css/signature.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/microfrontends/SignDocuments/src/css/signature.css b/microfrontends/SignDocuments/src/css/signature.css index 3ed622f98..c2979abdc 100644 --- a/microfrontends/SignDocuments/src/css/signature.css +++ b/microfrontends/SignDocuments/src/css/signature.css @@ -679,8 +679,7 @@ option { #navbar { overflow: hidden; - - z-index: 10; + z-index: 99; } /* Navbar links */ @@ -716,7 +715,7 @@ option { .stickyfooter { position: fixed; - z-index: 32 !important; + z-index: 99 !important; bottom: 0px; right: 0rem; } From 77042224a15f74973cd24e0f21dace7183d20aaf Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Fri, 15 Dec 2023 13:19:26 +0530 Subject: [PATCH 031/111] fix: opensign-drive drop-down issue --- .../src/Component/LegaDrive/LegaDrive.css | 45 ++++++++++--------- .../src/Component/LegaDrive/LegaDrive.js | 4 +- .../src/Component/component/renderPdf.js | 7 +-- .../src/Component/placeHolderSign.js | 5 ++- .../SignDocuments/src/css/signature.css | 11 ++++- 5 files changed, 42 insertions(+), 30 deletions(-) diff --git a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.css b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.css index 31082ed45..41b16ed3b 100644 --- a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.css +++ b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.css @@ -84,14 +84,10 @@ color: var(--mauve-8); } - .dropdown-menu { - min-width: 10rem; - } - .dropdown-item { display: block; width: 100%; @@ -106,19 +102,15 @@ cursor: pointer; } - .dropdown-item:hover { background-color: #dad9db; color: var(--violet-11); - } .itemColor { font-size: 13px !important; } - - .folderComponent { margin: 30px; height: 100%; @@ -491,41 +483,52 @@ a { display: none; } - .folderPath{ +.folderPath { overflow-x: auto; white-space: nowrap; cursor: pointer; user-select: none; - } - .folderPath::-webkit-scrollbar { +} + +.folderPath::-webkit-scrollbar { display: none; /* for Chrome, Safari, and Opera */ } +@media screen and (max-width:766px) { + .itemColor { + font-size: 10px !important; + } + +} @media (min-width: 310px) and (max-width:550px) { - + .pdfContainer { justify-content: space-around; } + .sort { -padding: 2px; + padding: 2px; } - .folderComponent{ + + .folderComponent { margin: 10px; } - + } -@media screen and (max-width:309px) { - +@media screen and (max-width:309px) { + .pdfContainer { justify-content: center; } + .sort { padding: 2px; - } - .folderComponent{ - margin: 10px; - } + } + + .folderComponent { + margin: 10px; + } } \ No newline at end of file diff --git a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js index 405ec5cd0..417e156c0 100644 --- a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js +++ b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js @@ -508,7 +508,9 @@ function PdfFile() {
    setIsNewFol(!isNewFol)} >
    diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js index 0354c81c4..7469e6630 100644 --- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js +++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js @@ -457,12 +457,7 @@ function RenderPdf({ zIndex: pos.zIndex }} className="placeholderBlock" - onDrag={() => - handleTabDrag( - pos.key - // data.signerObjId - ) - } + onDrag={() => handleTabDrag(pos.key)} size={{ width: pos.Width ? pos.Width : 150, height: pos.Height ? pos.Height : 60 diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js index 2eb873c01..564938f7f 100644 --- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js +++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js @@ -21,7 +21,8 @@ import { pdfNewWidthFun, contractDocument, contractUsers, - getHostUrl + getHostUrl, + addZIndex } from "../utils/Utils"; import RenderPdf from "./component/renderPdf"; import ModalComponent from "./component/modalComponent"; @@ -430,6 +431,8 @@ function PlaceHolderSign() { //function for set and update x and y postion after drag and drop signature tab const handleStop = (event, dragElement, signerId, key) => { if (!isResize) { + const dataNewPlace = addZIndex(signerPos, key, setZIndex); + signerPos.splice(0, signerPos.length, ...dataNewPlace); const containerRect = document .getElementById("container") .getBoundingClientRect(); diff --git a/microfrontends/SignDocuments/src/css/signature.css b/microfrontends/SignDocuments/src/css/signature.css index c2979abdc..b4aed0610 100644 --- a/microfrontends/SignDocuments/src/css/signature.css +++ b/microfrontends/SignDocuments/src/css/signature.css @@ -542,6 +542,7 @@ option { overflow-y: scroll; } + .SelectTrigger:hover { border: none; outline: none; @@ -647,12 +648,20 @@ option { } +.dropDownStyle { + width: auto; +} + @media screen and (max-width:766px) { .showPages { display: none; } + .dropdown-menu { + min-width: 0rem !important; + } + .signatureContainer { display: flex; flex-direction: column; @@ -679,7 +688,7 @@ option { #navbar { overflow: hidden; - z-index: 99; + z-index: 49; } /* Navbar links */ From 91976d23559d25890c77b89d74b17aa752289d88 Mon Sep 17 00:00:00 2001 From: Amol Date: Fri, 15 Dec 2023 13:47:21 +0530 Subject: [PATCH 032/111] chore: add dependabot dependency update check --- .github/dependabot.yml | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 .github/dependabot.yml diff --git a/.github/dependabot.yml b/.github/dependabot.yml new file mode 100644 index 000000000..7983b7ed8 --- /dev/null +++ b/.github/dependabot.yml @@ -0,0 +1,22 @@ +# To get started with Dependabot version updates, you'll need to specify which +# package ecosystems to update and where the package manifests are located. +# Please see the documentation for all configuration options: +# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates + +version: 2 +updates: + # maintain dependencies for frontend + - package-ecosystem: "npm" # See documentation for possible values + directory: "/apps/OpenSign" # Location of package manifests + schedule: + interval: "weekly" + # maintain dependencies for server + - package-ecosystem: "npm" # See documentation for possible values + directory: "/apps/OpenSignServer" # Location of package manifests + schedule: + interval: "weekly" + # maintain dependencies for microfrontends + - package-ecosystem: "npm" # See documentation for possible values + directory: "microfrontends/SignDocuments" # Location of package manifests + schedule: + interval: "weekly" From c4507dd06bf40cf8abaec6d8cbf045138ca7c178 Mon Sep 17 00:00:00 2001 From: jeremyito07 Date: Fri, 15 Dec 2023 18:35:18 +0530 Subject: [PATCH 033/111] fix: removed "/test" route from application --- apps/OpenSignServer/index.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/apps/OpenSignServer/index.js b/apps/OpenSignServer/index.js index 819940954..8d515416b 100644 --- a/apps/OpenSignServer/index.js +++ b/apps/OpenSignServer/index.js @@ -172,9 +172,6 @@ app.get('/', function (req, res) { // There will be a test page available on the /test path of your server url // Remove this before launching your app -app.get('/test', function (req, res) { - res.sendFile(path.join(__dirname, '/public/test.html')); -}); if (!process.env.TESTING) { const port = process.env.PORT || 8080; From 3e741ac2f91f771d5b54e5e305c01c13f439c4c5 Mon Sep 17 00:00:00 2001 From: prafull-opensignlabs Date: Fri, 15 Dec 2023 19:01:05 +0530 Subject: [PATCH 034/111] add functionality of add placholder in template --- .../src/components/fields/CreateFolder.js | 5 +- .../src/components/fields/SelectFolder.js | 15 +- apps/OpenSign/src/constant/const.js | 4 +- apps/OpenSign/src/json/ReportJson.js | 14 + apps/OpenSign/src/primitives/TemplateForm.js | 18 +- .../src/Component/TemplatePlaceholder.js | 1146 +++++++++++++++++ .../Component/component/fieldsComponent.js | 82 +- .../src/Component/component/header.js | 8 +- .../Component/component/renderAllPdfPage.js | 132 +- .../src/Component/component/renderPdf.js | 34 +- .../Component/component/signerListPlace.js | 168 ++- microfrontends/SignDocuments/src/Routes.js | 2 + .../SignDocuments/src/css/signerListPlace.css | 16 + .../SignDocuments/src/utils/Utils.js | 2 + 14 files changed, 1442 insertions(+), 204 deletions(-) create mode 100644 microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js create mode 100644 microfrontends/SignDocuments/src/css/signerListPlace.css diff --git a/apps/OpenSign/src/components/fields/CreateFolder.js b/apps/OpenSign/src/components/fields/CreateFolder.js index 9b6f4beec..2aa0c2432 100644 --- a/apps/OpenSign/src/components/fields/CreateFolder.js +++ b/apps/OpenSign/src/components/fields/CreateFolder.js @@ -1,6 +1,5 @@ import React, { useEffect, useState } from "react"; import Parse from "parse"; -import { templateCls } from "../../constant/const"; import Alert from "../../primitives/Alert"; const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => { @@ -45,7 +44,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => { event.preventDefault(); if (name) { const currentUser = Parse.User.current(); - const exsitQuery = new Parse.Query(templateCls); + const exsitQuery = new Parse.Query(folderCls); exsitQuery.equalTo("Name", name); exsitQuery.equalTo("Type", "Folder"); if (parentFolderId) { @@ -59,7 +58,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => { setIsAlert(false); }, 1000); } else { - const template = new Parse.Object(templateCls); + const template = new Parse.Object(folderCls); template.set("Name", name); template.set("Type", "Folder"); diff --git a/apps/OpenSign/src/components/fields/SelectFolder.js b/apps/OpenSign/src/components/fields/SelectFolder.js index 434bbed7d..878bb269b 100644 --- a/apps/OpenSign/src/components/fields/SelectFolder.js +++ b/apps/OpenSign/src/components/fields/SelectFolder.js @@ -1,9 +1,8 @@ import React, { useEffect, useState } from "react"; import Parse from "parse"; import CreateFolder from "./CreateFolder"; -import { templateCls } from "../../constant/const"; -const SelectFolder = ({ required, onSuccess }) => { +const SelectFolder = ({ required, onSuccess, folderCls }) => { const [isOpen, SetIsOpen] = useState(false); const [clickFolder, setClickFolder] = useState(""); const [selectFolder, setSelectedFolder] = useState({}); @@ -24,7 +23,7 @@ const SelectFolder = ({ required, onSuccess }) => { const fetchFolder = async (folderPtr) => { setIsLoader(true); try { - const fetchFolder = new Parse.Query(templateCls); + const fetchFolder = new Parse.Query(folderCls); if (folderPtr) { fetchFolder.equalTo("Folder", folderPtr); fetchFolder.equalTo("Type", "Folder"); @@ -55,7 +54,7 @@ const SelectFolder = ({ required, onSuccess }) => { setTabList((tabs) => [...tabs, item]); const folderPtr = { __type: "Pointer", - className: templateCls, + className: folderCls, objectId: item.objectId }; fetchFolder(folderPtr); @@ -64,7 +63,7 @@ const SelectFolder = ({ required, onSuccess }) => { setTabList((tabs) => [...tabs, item]); const folderPtr = { __type: "Pointer", - className: templateCls, + className: folderCls, objectId: item.objectId }; @@ -107,7 +106,7 @@ const SelectFolder = ({ required, onSuccess }) => { let _len = list.length - 1; folderPtr = { __type: "Pointer", - className: templateCls, + className: folderCls, objectId: list[_len].objectId }; setTabList(list); @@ -128,7 +127,7 @@ const SelectFolder = ({ required, onSuccess }) => { if (clickFolder && clickFolder.ObjectId) { fetchFolder({ __type: "Pointer", - className: templateCls, + className: folderCls, objectId: clickFolder.ObjectId }); } else { @@ -230,7 +229,7 @@ const SelectFolder = ({ required, onSuccess }) => { {isAdd && ( )} diff --git a/apps/OpenSign/src/constant/const.js b/apps/OpenSign/src/constant/const.js index 2e5e40948..4f2ea585b 100644 --- a/apps/OpenSign/src/constant/const.js +++ b/apps/OpenSign/src/constant/const.js @@ -1,2 +1,2 @@ -export const contactCls = "contracts_Contactbook" -export const templateCls = "contracts_Template" +export const contactCls = "contracts_Contactbook"; +export const templateCls = "contracts_Template"; diff --git a/apps/OpenSign/src/json/ReportJson.js b/apps/OpenSign/src/json/ReportJson.js index b538cd34f..d3d6148ba 100644 --- a/apps/OpenSign/src/json/ReportJson.js +++ b/apps/OpenSign/src/json/ReportJson.js @@ -163,6 +163,20 @@ export default function reportJson(id) { } ] }; + // template report + case "23jk45slhj": + return { + reportName: "Templates", + heading: contactbook, + actions: [ + { + btnLabel: "", + btnColor: "#f55a42", + textColor: "white", + btnIcon: "fa-solid fa-trash" + } + ] + }; default: return null; } diff --git a/apps/OpenSign/src/primitives/TemplateForm.js b/apps/OpenSign/src/primitives/TemplateForm.js index 66c431bbb..fe433af24 100644 --- a/apps/OpenSign/src/primitives/TemplateForm.js +++ b/apps/OpenSign/src/primitives/TemplateForm.js @@ -6,7 +6,11 @@ import Alert from "./Alert"; import SelectFolder from "../components/fields/SelectFolder"; import SignersInput from "../components/fields/SignersInput"; import Title from "../components/Title"; +import { useNavigate } from "react-router-dom"; +import { templateCls } from '../constant/const' + const TemplateForm = () => { + const navigate = useNavigate() const [signers, setSigners] = useState([]); const [folder, setFolder] = useState({ ObjectId: "", Name: "" }); const [formData, setFormData] = useState({ @@ -126,7 +130,7 @@ const TemplateForm = () => { e.preventDefault(); try { const currentUser = Parse.User.current(); - const template = new Parse.Object("contracts_Template"); + const template = new Parse.Object(templateCls); Object.entries(formData).forEach((item) => template.set(item[0], item[1]) ); @@ -135,13 +139,20 @@ const TemplateForm = () => { if (folder && folder.ObjectId) { template.set("Folder", { __type: "Pointer", - className: "contracts_Template", + className: templateCls, objectId: folder.ObjectId }); } if (signers && signers.length > 0) { template.set("Signers", signers); } + const ExtCls = JSON.parse(localStorage.getItem("Extand_Class")); + template.set("ExtUserPtr", { + __type: "Pointer", + className: "contracts_Users", + objectId: ExtCls[0].objectId + }); + const res = await template.save(); if (res) { setIsAlert(true); @@ -157,6 +168,7 @@ const TemplateForm = () => { }); setFileUpload([]); setpercentage(0); + navigate('/asmf/remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9TaWduLU1pY3JvYXBwVjIvcmVtb3RlRW50cnkuanM=&moduleToLoad=AppRoutes&remoteName=signmicroapp/template/' +res.id) } } catch (err) { console.log("err ", err); @@ -281,7 +293,7 @@ const TemplateForm = () => { />
    - +
    + + + {/* this modal is used show send mail message and after send mail success message */} + + {/* signature modal */} + +

    Do you want to create document right now ?

    +     + + {currentEmail.length > 0 && ( + <> + + + + + )} + +     + + {/* pdf header which contain funish back button */} +
    +
    + {containerWH && ( + + )} +
    +
    + + {/* signature button */} + {isMobile ? ( +
    + +
    + ) : ( +
    +
    + +
    + +
    +
    +
    + )} +
    + )} + +
    + + + Add Role + + +
    + setRoleName(e.target.value)} + style={{ borderRadiu: 20 }} + placeholder={ + signersdata.length > 0 + ? "User " + (signersdata.length + 1) + : "User 1" + } + /> +
    +
    + + +
    +
    +     +     +
    +
    + ); +}; + +export default TemplatePlaceholder; diff --git a/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js b/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js index 71280710f..916e29005 100644 --- a/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js +++ b/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js @@ -32,12 +32,12 @@ function FieldsComponent({ setIsShowEmail, isMailSend, selectedEmail, - setSelectedEmail, + setSelectedEmail }) { const signStyle = pdfUrl ? "disableSign" : "signatureBtn"; - const isMobile = window.innerWidth <767; - + const isMobile = window.innerWidth < 767; + const SelectItem = React.forwardRef( ({ children, className, ...props }, forwardedRef) => { return ( @@ -65,7 +65,7 @@ function FieldsComponent({ "#cc99ff", "#ffcc99", "#66ccff", - "#ffffcc", + "#ffffcc" ]; return ( @@ -88,7 +88,7 @@ function FieldsComponent({ padding: "10px 20px", display: "flex", alignItems: "center", - justifyContent: "center", + justifyContent: "center" }} > @@ -107,30 +107,29 @@ function FieldsComponent({ }} > - - {!selectedEmail && - - - } + + {!selectedEmail && ( + + + + )}     ); diff --git a/microfrontends/SignDocuments/src/Component/component/signerListPlace.js b/microfrontends/SignDocuments/src/Component/component/signerListPlace.js index 4905da542..d4c3e523e 100644 --- a/microfrontends/SignDocuments/src/Component/component/signerListPlace.js +++ b/microfrontends/SignDocuments/src/Component/component/signerListPlace.js @@ -12,7 +12,9 @@ function SignerListPlace({ setContractName, handleAddSigner, setUniqueId, - setRoleName + setRoleName, + handleDeleteUser, + handleRoleChange }) { const color = [ "#93a3db", @@ -45,7 +47,6 @@ function SignerListPlace({ ]; const [isHover, setIsHover] = useState(); - console.log("signerPos", signerPos); //function for onhover signer name change background color const onHoverStyle = (ind) => { const style = { @@ -108,7 +109,7 @@ function SignerListPlace({ setIsSelectId(ind); setContractName(obj?.className); setUniqueId(obj.Id); - setRoleName(obj.Role) + setRoleName(obj.Role); }} >
    {obj.Name} ) : ( - {obj.Role} + <> + {handleRoleChange ? ( + handleRoleChange(e, obj.Id)} + > + {obj.Role} + + ) : ( + {obj.Role} + )} + )} {obj.Email && ( {obj.Email} )}
    + {handleDeleteUser && ( +
    { + e.stopPropagation(); + handleDeleteUser(obj.Id); + }} + style={{ cursor: "pointer" }} + > + +
    + )} {signerPos.map((data, key) => { return ( data.Id === obj.Id && ( @@ -182,12 +206,12 @@ function SignerListPlace({ })} - {handleAddSigner && ( -
    handleAddSigner()}> - - Add -
    - )} + {handleAddSigner && ( +
    handleAddSigner()}> + + Add +
    + )} ); } diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js index a0d532b12..a341e3879 100644 --- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js +++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js @@ -22,11 +22,14 @@ import { contractDocument, contractUsers, getHostUrl, - addZIndex + addZIndex, + randomId } from "../utils/Utils"; import RenderPdf from "./component/renderPdf"; import ModalComponent from "./component/modalComponent"; import { useNavigate } from "react-router-dom"; +import AddUser from "./component/AddUser"; +import SelectSigners from "./component/SelectSigners"; function PlaceHolderSign() { const navigate = useNavigate(); @@ -72,6 +75,9 @@ function PlaceHolderSign() { status: false, type: "load" }); + const [uniqueId, setUniqueId] = useState(""); + const [roleName, setRoleName] = useState(""); + const [isAddUser, setIsAddUser] = useState({}); const color = [ "#93a3db", "#e6c3db", @@ -184,28 +190,96 @@ function PlaceHolderSign() { //getting document details const documentData = await contractDocument(documentId); if (documentData && documentData.length > 0) { - const alreadyPlaceholder = - documentData[0].Placeholders && documentData[0].Placeholders; + // const alreadyPlaceholder = + // documentData[0].Placeholders && documentData[0].Placeholders; // if (alreadyPlaceholder && alreadyPlaceholder.length > 0) { // setIsAlreadyPlace(true); // } setPdfDetails(documentData); - const currEmail = documentData[0].ExtUserPtr.Email; - const filterCurrEmail = documentData[0].Signers.filter( - (data) => data.Email === currEmail - ); - setCurrentEmail(filterCurrEmail); - setSignersData(documentData[0]); + // setSignersData(documentData[0]); - setSignerObjId(documentData[0].Signers[0].objectId); - setContractName(documentData[0].Signers[0].className); - setIsSelectId(0); - if (documentData[0].Placeholders && documentData[0].Placeholders.length > 0){ - setSignerPos(documentData[0].Placeholders) - } - if (documentData[0].Signers && documentData[0].Signers.length > 0){ - setSignersData(documentData[0].Signers) + // setSignerObjId(documentData[0].Signers[0].objectId); + // setContractName(documentData[0].Signers[0].className); + // setIsSelectId(0); + + if (documentData[0].Signers && documentData[0].Signers.length > 0) { + const currEmail = documentData[0].ExtUserPtr.Email; + const filterCurrEmail = documentData[0].Signers.filter( + (data) => data.Email === currEmail + ); + setCurrentEmail(filterCurrEmail); + // const updateSigners = documentData[0].Signers.map((x, index) => ({ + // ...x, + // Id: randomId(), + // Role: "User " + (index + 1) + // })); + const updateSigners = documentData[0].Signers; + // console.log("documentData[0] ", documentData[0]); + // console.log("updateSigners ", updateSigners); + // setSignersData(updateSigners); + + setUniqueId(updateSigners[0].Id); + setSignerObjId(documentData[0].Signers[0].objectId); + setContractName(documentData[0].Signers[0].className); + setIsSelectId(0); + if ( + documentData[0].Placeholders && + documentData[0].Placeholders.length > 0 + ) { + setSignerPos(documentData[0].Placeholders); + + let updateArr = [...updateSigners]; + console.log("updateArr ", updateArr); + let arr = documentData[0].Placeholders.map((x) => { + let matchingSigner = updateArr.find( + (y) => x.signerObjId && x.signerObjId === y.objectId + ); + + if (matchingSigner) { + return { + ...matchingSigner, + Role: x.Role ? x.Role : matchingSigner.Role, + Id: x.Id + }; + } else { + return { + Role: x.Role, + Id: x.Id + }; + } + }); + setSignersData(arr); + } else { + const updateSigners = documentData[0].Signers.map((x, index) => ({ + ...x, + Id: randomId(), + Role: "User " + (index + 1) + })); + setSignersData(updateSigners); + } + } else { + setRoleName("User 1"); + if ( + documentData[0].Placeholders && + documentData[0].Placeholders.length > 0 + ) { + const arr = documentData[0].Placeholders?.filter( + (x) => !x.signerObjId + ); + // console.log("arr ", arr); + let updateArr = []; + arr.forEach((x) => { + const obj = { + Role: x.Role, + Id: x.Id + }; + updateArr.push(obj); + }); + setSignerPos(documentData[0].Placeholders); + setSignersData(updateArr); + setIsSelectId(0); + } } } else if ( documentData === "Error: Something went wrong!" || @@ -276,9 +350,11 @@ function PlaceHolderSign() { const newWidth = containerWH.width; const scale = pdfOriginalWidth / newWidth; const key = Math.floor(1000 + Math.random() * 9000); - let filterSignerPos = signerPos.filter( - (data) => data.signerObjId === signerObjId - ); + // let filterSignerPos = signerPos.filter( + // (data) => data.signerObjId === signerObjId + // ); + let filterSignerPos = signerPos.filter((data) => data.Id === uniqueId); + let dropData = []; let xyPosArr = []; let xyPos = {}; @@ -336,9 +412,11 @@ function PlaceHolderSign() { //add signers objId first inseretion if (filterSignerPos.length > 0) { - const colorIndex = signerPos - .map((e) => e.signerObjId) - .indexOf(signerObjId); + // const colorIndex = signerPos + // .map((e) => e.signerObjId) + // .indexOf(signerObjId); + + const colorIndex = signerPos.map((e) => e.Id).indexOf(uniqueId); const getPlaceHolder = filterSignerPos[0].placeHolder; const updatePlace = getPlaceHolder.filter( @@ -357,16 +435,30 @@ function PlaceHolderSign() { pos: newSignPos }; updatePlace.push(xyPos); - let placeHolderPos = { - blockColor: color[isSelectListId], - signerObjId: signerObjId, - placeHolder: updatePlace, - signerPtr: { - __type: "Pointer", - className: `${contractName}`, - objectId: signerObjId - } - }; + let placeHolderPos; + if (contractName) { + placeHolderPos = { + blockColor: color[isSelectListId], + signerObjId: signerObjId, + placeHolder: updatePlace, + signerPtr: { + __type: "Pointer", + className: `${contractName}`, + objectId: signerObjId + }, + Role: roleName, + Id: uniqueId + }; + } else { + placeHolderPos = { + blockColor: color[isSelectListId], + signerObjId: "", + placeHolder: updatePlace, + signerPtr: {}, + Role: roleName, + Id: uniqueId + }; + } // signerPos.splice(colorIndex, 1, placeHolderPos); const newArry = [placeHolderPos]; const newArray = [ @@ -374,21 +466,33 @@ function PlaceHolderSign() { ...newArry, ...signerPos.slice(colorIndex + 1) ]; - setSignerPos(newArray); } else { const newSignPoss = getPlaceHolder.concat(xyPosArr[0]); - - let placeHolderPos = { - blockColor: color[isSelectListId], - signerObjId: signerObjId, - placeHolder: newSignPoss, - signerPtr: { - __type: "Pointer", - className: `${contractName}`, - objectId: signerObjId - } - }; + let placeHolderPos; + if (contractName) { + placeHolderPos = { + blockColor: color[isSelectListId], + signerObjId: signerObjId, + placeHolder: newSignPoss, + signerPtr: { + __type: "Pointer", + className: `${contractName}`, + objectId: signerObjId + }, + Role: roleName, + Id: uniqueId + }; + } else { + placeHolderPos = { + blockColor: color[isSelectListId], + signerObjId: "", + placeHolder: newSignPoss, + signerPtr: {}, + Role: roleName, + Id: uniqueId + }; + } // signerPos.splice(colorIndex, 1, placeHolderPos); const newArry = [placeHolderPos]; @@ -401,19 +505,34 @@ function PlaceHolderSign() { setSignerPos(newArray); } } else { - let placeHolderPos = { - signerPtr: { - __type: "Pointer", - className: `${contractName}`, - objectId: signerObjId - }, - signerObjId: signerObjId, - blockColor: color[isSelectListId], - placeHolder: xyPosArr - }; + let placeHolderPos; + if (contractName) { + placeHolderPos = { + signerPtr: { + __type: "Pointer", + className: `${contractName}`, + objectId: signerObjId + }, + signerObjId: signerObjId, + blockColor: color[isSelectListId], + placeHolder: xyPosArr, + Role: roleName, + Id: uniqueId + }; + } else { + placeHolderPos = { + signerPtr: {}, + signerObjId: "", + blockColor: color[isSelectListId], + placeHolder: xyPosArr, + Role: roleName, + Id: uniqueId + }; + } setSignerPos((prev) => [...prev, placeHolderPos]); } + setIsMailSend(false); }; //function for get pdf page details @@ -438,17 +557,19 @@ function PlaceHolderSign() { const handleStop = (event, dragElement, signerId, key) => { if (!isResize) { const dataNewPlace = addZIndex(signerPos, key, setZIndex); - signerPos.splice(0, signerPos.length, ...dataNewPlace); + let updateSignPos = [...signerPos]; + updateSignPos.splice(0, updateSignPos.length, ...dataNewPlace); + // signerPos.splice(0, signerPos.length, ...dataNewPlace); const containerRect = document .getElementById("container") .getBoundingClientRect(); - const signId = signerId ? signerId : signerObjId; + const signId = signerId ? signerId : uniqueId; //? signerId : signerObjId; const keyValue = key ? key : dragKey; const ybottom = containerRect.height - dragElement.y; if (keyValue >= 0) { - const filterSignerPos = signerPos.filter( - (data) => data.signerObjId === signId + const filterSignerPos = updateSignPos.filter( + (data) => data.Id === signId ); if (filterSignerPos.length > 0) { @@ -481,8 +602,8 @@ function PlaceHolderSign() { } return obj; }); - const newUpdateSigner = signerPos.map((obj, ind) => { - if (obj.signerObjId === signId) { + const newUpdateSigner = updateSignPos.map((obj, ind) => { + if (obj.Id === signId) { return { ...obj, placeHolder: newUpdateSignPos }; } return obj; @@ -496,11 +617,13 @@ function PlaceHolderSign() { }; //function for delete signature block - const handleDeleteSign = (key, signerId) => { + const handleDeleteSign = (key, Id) => { const updateData = []; - const filterSignerPos = signerPos.filter( - (data) => data.signerObjId === signerId - ); + // const filterSignerPos = signerPos.filter( + // (data) => data.signerObjId === signerId + // ); + + const filterSignerPos = signerPos.filter((data) => data.Id === Id); if (filterSignerPos.length > 0) { const getPlaceHolder = filterSignerPos[0].placeHolder; @@ -524,7 +647,7 @@ function PlaceHolderSign() { }); const newUpdateSigner = signerPos.map((obj, ind) => { - if (obj.signerObjId === signerId) { + if (obj.Id === Id) { return { ...obj, placeHolder: newUpdatePos }; } return obj; @@ -532,24 +655,20 @@ function PlaceHolderSign() { setSignerPos(newUpdateSigner); } else { - const updateFilter = signerPos.filter( - (data) => data.signerObjId !== signerId - ); + const updateFilter = signerPos.filter((data) => data.Id !== Id); const getRemainPage = filterSignerPos[0].placeHolder.filter( (data) => data.pageNumber !== pageNumber ); if (getRemainPage && getRemainPage.length > 0) { const newUpdatePos = filterSignerPos.map((obj, ind) => { - if (obj.signerObjId === signerId) { + if (obj.Id === Id) { return { ...obj, placeHolder: getRemainPage }; } return obj; }); let signerupdate = []; - signerupdate = signerPos.filter( - (data) => data.signerObjId !== signerId - ); + signerupdate = signerPos.filter((data) => data.Id !== Id); signerupdate.push(newUpdatePos[0]); setSignerPos(signerupdate); @@ -587,7 +706,7 @@ function PlaceHolderSign() { }; const alertSendEmail = async () => { - if (signerPos.length === signersdata.Signers.length) { + if (signerPos.length === signersdata.length) { const alert = { mssg: "confirm", alert: true @@ -611,15 +730,16 @@ function PlaceHolderSign() { setIsSendAlert({}); let sendMail; - const expireDate = signersdata.ExpiryDate.iso; + // console.log("pdfDetails", pdfDetails); + const expireDate = pdfDetails?.[0].ExpiryDate.iso; const newDate = new Date(expireDate); const localExpireDate = newDate.toLocaleDateString("en-US", { day: "numeric", month: "long", year: "numeric" }); - let sender = signersdata.ExtUserPtr.Email; - const signerMail = signersdata.Signers; + let sender = pdfDetails?.[0].ExtUserPtr.Email; + const signerMail = signersdata; for (let i = 0; i < signerMail.length; i++) { try { @@ -639,12 +759,12 @@ function PlaceHolderSign() { )}&${localStorage.getItem("_appName")}`; const hostUrl = window.location.origin + "/loadmf/signmicroapp"; - let signPdf = `${hostUrl}/login/${signersdata.objectId}/${signerMail[i].Email}/${objectId}/${serverParams}`; + let signPdf = `${hostUrl}/login/${pdfDetails?.[0].objectId}/${signerMail[i].Email}/${objectId}/${serverParams}`; const openSignUrl = "https://www.opensignlabs.com/"; const themeBGcolor = themeColor(); let params = { recipient: signerMail[i].Email, - subject: `${signersdata.ExtUserPtr.Name} has requested you to sign ${signersdata.Name}`, + subject: `${pdfDetails?.[0].ExtUserPtr.Name} has requested you to sign ${pdfDetails?.[0].Name}`, from: sender, html: @@ -653,9 +773,9 @@ function PlaceHolderSign() { " height='50' style='padding: 20px,width:170px,height:40px' />

    Digital Signature Request

    " + - signersdata.ExtUserPtr.Name + + pdfDetails?.[0].ExtUserPtr.Name + " has requested you to review and sign " + - signersdata.Name + + pdfDetails?.[0].Name + "

    handleOnclikFolder(data)}> @@ -383,7 +441,6 @@ function PdfFileComponent({ }} autoFocus={true} type="text" - // onFocus={()=>console.log("focus")} onBlur={() => handledRenameDoc(data)} onKeyDown={(e) => handleEnterPress(e, data)} ref={inputRef} @@ -448,7 +505,6 @@ function PdfFileComponent({ }} autoFocus={true} type="text" - // onFocus={()=>console.log("focus")} onBlur={() => handledRenameDoc(data)} onKeyDown={(e) => handleEnterPress(e, data)} ref={inputRef} @@ -568,33 +624,6 @@ function PdfFileComponent({ ); })} - - {/* handleMenuItemClick("Download", data)} - // onSelect={(e) => console.log("event", e)} - className="ContextMenuItem" - > - Download - - - handleMenuItemClick("Rename", data)} - className="ContextMenuItem" - > - Rename - - handleMenuItemClick("Delete", data)} - className="ContextMenuItem" - > - Delete - - handleMenuItemClick("Move", data)} - className="ContextMenuItem" - > - Move - */} @@ -627,66 +656,6 @@ function PdfFileComponent({ ); }; - //function for move document from one folder to another folder - const handleMoveFolder = async (selectFolderData) => { - const selecFolderId = selectDoc?.Folder?.objectId; - const moveFolderId = selectFolderData?.ObjectId; - let updateDocId = selectDoc?.objectId; - let updateData; - const checkExist = moveFolderId - ? selecFolderId === moveFolderId - ? true - : false - : false; - - if (!checkExist) { - if (moveFolderId) { - updateData = { - Folder: { - __type: "Pointer", - className: `${localStorage.getItem("_appName")}_Document`, - objectId: moveFolderId - } - }; - } else { - updateData = { - Folder: undefined - }; - } - - await axios - .put( - `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem( - "_appName" - )}_Document/${updateDocId}`, - updateData, - { - headers: { - "Content-Type": "application/json", - "X-Parse-Application-Id": localStorage.getItem("parseAppId"), - "X-Parse-Session-Token": localStorage.getItem("accesstoken") - } - } - ) - - .then((Listdata) => { - // console.log("Listdata ", Listdata); - const json = Listdata.data; - - const updatedData = pdfData.filter((x) => x.objectId !== updateDocId); - setPdfData(updatedData); - }) - .catch((err) => { - console.log("err", err); - }); - - setIsOpenMoveModal(false); - } else { - alert("folder already exist!"); - setIsOpenMoveModal(false); - } - }; - //component to handle type of document and render according to type return ( <> @@ -730,8 +699,58 @@ function PdfFileComponent({ isOpenModal={isOpenMoveModal} folderCls={"contracts_Document"} setIsOpenMoveModal={setIsOpenMoveModal} + setPdfData={setPdfData} /> )} + { + setIsDeleteDoc(false); + }} + > +
    +

    Are you sure you want to delete this document?

    + +
    + + + +
    +     ); } diff --git a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.css b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.css index 7df3321f4..0266b29e4 100644 --- a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.css +++ b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.css @@ -497,6 +497,27 @@ a { /* for Chrome, Safari, and Opera */ } +.docDeleteBtn { + /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); */ + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); + padding: 7px 17px; + color: white; + font-weight: 600 !important; + font-size: 12px !important; + border: none; + border-radius: 2px; +} + +.docDeleteBtn:focus { + border: none; + outline: none; +} + +.docDeleteBtn:hover { + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18); + color: white; +} + @media screen and (max-width:766px) { .itemColor { font-size: 10px !important; diff --git a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js index 5c3c24c0e..5f04b38ed 100644 --- a/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js +++ b/microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js @@ -11,6 +11,7 @@ import AlertComponent from "../component/alertComponent"; import { useNavigate } from "react-router-dom"; import Title from "../component/Title"; import Parse from "parse"; +import ModalUi from "../../premitives/ModalUi"; function PdfFile() { const navigate = useNavigate(); @@ -29,7 +30,7 @@ function PdfFile() { message: "This might take some time" }); const [docId, setDocId] = useState(); - const [handleError, setHandleError] = useState(); + const [handleError, setHandleError] = useState(""); const [folderName, setFolderName] = useState([]); const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" }); const [isNewFol, setIsNewFol] = useState(false); @@ -123,38 +124,6 @@ function PdfFile() { isLoad: true, message: "This might take some time" }; - // if (data.name === "OpenSign™ Drive") { - // setIsLoading(loadObj); - // if (docId) { - // setDocId(); - // } else { - // setTimeout(() => { - // const loadObj = { - // isLoad: false - // }; - // setIsLoading(loadObj); - // }, 1000); - // } - // } else if (data.name === folderName[folderName.length - 1].name) { - // setIsLoading(loadObj); - // setTimeout(() => { - // const loadObj = { - // isLoad: false - // }; - // setIsLoading(loadObj); - // }, 1000); - // } else { - // const findIndex = folderName.findIndex( - // (fold) => fold.objectId === data.objectId - // ); - // const newFolder = folderName.slice(0, findIndex + 1); - - // setFolderName(newFolder); - // const getLastId = newFolder[newFolder.length - 1]; - - // setDocId(getLastId.objectId); - // setIsLoading(loadObj); - // } const updateFolderName = folderName.filter((x, i) => { if (i <= index) { @@ -173,77 +142,60 @@ function PdfFile() { const value = e.target.value; setNewFolderName(value); }; - //function for add folder + //function for create folder const handleAddFolder = async () => { if (newFolderName) { setIsFolderLoader(true); const getParentObjId = folderName[folderName.length - 1]; const parentId = getParentObjId && getParentObjId.objectId; - let data; - if (parentId) { - data = { - Name: newFolderName, - Type: "Folder", - Folder: { - __type: "Pointer", - className: `${localStorage.getItem("_appName")}_Document`, - objectId: parentId - }, - CreatedBy: { - __type: "Pointer", - className: "_User", - objectId: jsonCurrentUser.objectId - } - }; - } else { - data = { - Name: newFolderName, - Type: "Folder", - CreatedBy: { - __type: "Pointer", - className: "_User", - objectId: jsonCurrentUser.objectId - } - }; - } + const foldercls = `${localStorage.getItem("_appName")}_Document`; + const folderPtr = { + __type: "Pointer", + className: foldercls, + objectId: parentId + }; + const CreatedBy = { + __type: "Pointer", + className: "_User", + objectId: jsonCurrentUser.objectId + }; - await axios - .post( - `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem( - "_appName" - )}_Document`, - data, - { - headers: { - "Content-Type": "application/json", - "X-Parse-Application-Id": localStorage.getItem("parseAppId"), - "X-Parse-Session-Token": localStorage.getItem("accesstoken") - } - } - ) + try { + const exsitQuery = new Parse.Query(foldercls); + exsitQuery.equalTo("Name", newFolderName); + exsitQuery.equalTo("Type", "Folder"); + if (parentId) { + exsitQuery.equalTo("Folder", folderPtr); + } + const templExist = await exsitQuery.first(); + if (templExist) { + setError("Folder already exist!"); + setIsFolderLoader(false); + } else { + const template = new Parse.Object(foldercls); + template.set("Name", newFolderName); + template.set("Type", "Folder"); - .then((Listdata) => { - // console.log("Listdata ", Listdata); - const json = Listdata.data; - // console.log("json ", json); - if (json) { + if (parentId) { + template.set("Folder", folderPtr); + } + template.set("CreatedBy", CreatedBy); + const res = await template.save(); + if (res) { + const result = JSON.parse(JSON.stringify(res)); + + setPdfData((prev) => [...prev, result]); setNewFolderName(); - setIsFolderLoader(false); setIsFolder(false); - if (docId) { - getPdfFolderDocumentList(); - } else { - getPdfDocumentList(); - } } - }) - .catch((err) => { - setIsAlert({ - isShow: true, - alertMessage: "something went wrong" - }); + } + } catch (e) { + setIsAlert({ + isShow: true, + alertMessage: "something went wrong" }); + } } else { setError("Please fill out this field"); } @@ -383,23 +335,14 @@ function PdfFile() { alertMessage={isAlert.alertMessage} setIsAlert={setIsAlert} /> - - - Add New Folder - {!folderLoader && ( - { - setNewFolderName(""); - setIsFolder(false); - }} - > - X - - )} - - - + { + setIsFolder(false); + }} + > +
    {folderLoader ? (
    ) : ( -
    +
    )} - - +
    +     {isLoading.isLoad ? (
    { template.set("CreatedBy", Parse.User.createWithoutData(currentUser.id)); const res = await template.save(); if (res) { + const result = JSON.parse(JSON.stringify(res)); if (onSuccess) { setAlert({ type: "success", @@ -84,7 +85,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => { setTimeout(() => { setIsAlert(false); }, 1000); - onSuccess(res); + onSuccess(result); } } } @@ -105,32 +106,36 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => { {isAlert && {alert.message}}

    Create Folder

    -
    +
    setName(e.target.value)} required />
    -
    +
    handleOnclikFolder(data)}> - handleDraftDoc(data)}> - checkPdfStatus(data)}> -
    Sender " + sender + "
    Organization Name __
    Expire on " + @@ -675,10 +795,19 @@ function PlaceHolderSign() { } if (sendMail.data.result.status === "success") { + const signers = signersdata?.map((x) => { + return { + __type: "Pointer", + className: "contracts_Contactbook", + objectId: x.objectId + }; + }); + // console.log("signers ", signers); try { const data = { Placeholders: signerPos, - SignedUrl: pdfDetails[0].URL + SignedUrl: pdfDetails[0].URL, + Signers: signers }; await axios @@ -789,125 +918,194 @@ function PlaceHolderSign() { `${hostUrl}recipientSignPdf/${documentId}/${currentEmail[0].objectId}` ); }; + + const handleLinkUser = (id) => { + setIsAddUser({ [id]: true }); + }; + const handleAddUser = (data) => { + // console.log("hello", data); + const signerPtr = { + __type: "Pointer", + className: "contracts_Contactbook", + objectId: data.objectId + }; + const updatePlaceHolder = signerPos.map((x) => { + if (x.Id === uniqueId) { + return { ...x, signerPtr: signerPtr, signerObjId: data.objectId }; + } + return { ...x }; + }); + // console.log("updatePlaceHolder ", updatePlaceHolder); + setSignerPos(updatePlaceHolder); + + const updateSigner = signersdata.map((x) => { + if (x.Id === uniqueId) { + return { ...x, ...data }; + } + return { ...x }; + }); + // console.log("updateSigner ", updateSigner); + + setSignersData(updateSigner); + }; + + const closePopup = () => { + setIsAddUser({}); + }; + + // console.log("isAddUser", isAddUser); + // console.log("signerdata", signersdata); + // console.log("signerPos", signerPos); + return ( - - {isLoading.isLoad ? ( - - ) : handleError ? ( - - ) : noData ? ( - - ) : ( -
    - {/* this component used for UI interaction and show their functionality */} - {!checkTourStatus && ( - //this tour component used in your html component where you want to put - //onRequestClose function to close tour - //steps is defined what will be your messages and style also - //isOpen is takes boolean value to open - + + {isLoading.isLoad ? ( + + ) : handleError ? ( + + ) : noData ? ( + + ) : ( +
    + {/* this component used for UI interaction and show their functionality */} + {!checkTourStatus && ( + //this tour component used in your html component where you want to put + //onRequestClose function to close tour + //steps is defined what will be your messages and style also + //isOpen is takes boolean value to open + + )} + {/* this component used to render all pdf pages in left side */} + - )} - {/* this component used to render all pdf pages in left side */} - - {/* pdf render view */} -
    500 && "20px", - marginRight: !isMobile && pdfOriginalWidth > 500 && "20px" - }} - > - {/* this modal is used show alert set placeholder for all signers before send mail */} + {/* pdf render view */} +
    500 && "20px", + marginRight: !isMobile && pdfOriginalWidth > 500 && "20px" + }} + > + {/* this modal is used show alert set placeholder for all signers before send mail */} - - - {isSendAlert.mssg === "sure" ? ( - Fields required - ) : ( - isSendAlert.mssg === "confirm" && ( - Send Mail - ) - )} - - - {/* signature modal */} - - {isSendAlert.mssg === "sure" ? ( -

    Please Add field for all recipients.

    - ) : ( - isSendAlert.mssg === "confirm" && ( -

    - Are you sure you want to send out this document for - signatures? -

    - ) - )} -     - - - - {isSendAlert.mssg === "confirm" && ( + {isSendAlert.mssg === "sure" ? ( + Fields required + ) : ( + isSendAlert.mssg === "confirm" && ( + Send Mail + ) + )} + + + {/* signature modal */} + + {isSendAlert.mssg === "sure" ? ( +

    Please Add field for all recipients.

    + ) : ( + isSendAlert.mssg === "confirm" && ( +

    + Are you sure you want to send out this document for + signatures? +

    + ) + )} +     + + - )} - -     - {/* this modal is used show send mail message and after send mail success message */} - - - Mails Sent - + {isSendAlert.mssg === "confirm" && ( + + )} + + + {/* this modal is used show send mail message and after send mail success message */} + + + Mails Sent + - {/* signature modal */} - -

    You have successfully sent mails to all recipients!

    - {currentEmail.length > 0 && ( -

    Do you want to sign documents right now ?

    - )} -     + {/* signature modal */} + +

    You have successfully sent mails to all recipients!

    + {currentEmail?.length > 0 && ( +

    Do you want to sign documents right now ?

    + )} +     - - {currentEmail.length > 0 ? ( - <> + + {currentEmail?.length > 0 ? ( + <> + + + + + ) : ( - - - - ) : ( - - )} - -     - {/* */} - - {/* pdf header which contain funish back button */} -
    -
    - {containerWH && ( - - )} -
    -
    - - {/* signature button */} - {isMobile ? ( -
    - + + {/* */} + + {/* pdf header which contain funish back button */} +
    +
    + {containerWH && ( + + )} +
    - ) : ( -
    -
    - + -
    - + ) : ( +
    +
    + +
    + +
    -
    - )} -
    - )} - + )} +
    + )} + +
    + + + Add/choose user + closePopup()} + > + X + + + + {isAddUser && isAddUser[uniqueId] && ( + <> + + + + )} + + +
    + ); } diff --git a/microfrontends/SignDocuments/src/css/AddUser.css b/microfrontends/SignDocuments/src/css/AddUser.css new file mode 100644 index 000000000..712df7668 --- /dev/null +++ b/microfrontends/SignDocuments/src/css/AddUser.css @@ -0,0 +1,72 @@ +.addusercontainer { + height: 100%; + padding: 20px; +} + +.loaderdiv { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: flex; + justify-content: center; + align-items: center; + background-color: rgba(0, 0, 0, 0.3); + +} + +.form-wrapper { + width: 100%; + margin-left: auto; + margin-right: auto; + padding: 8px; +} + +.form-section { + margin-bottom: 0.75rem; +} + +.checkbox-label { + margin-left: 0.5rem; + color: #4b5563; +} + +.addUserInput { + padding: 0.5rem 0.75rem; + width: 100%; + border-width: 1px; + border-color: #d1d5db; + border-radius: 0.375rem; + outline: none; + font-size: 0.75rem; +} + + +.buttoncontainer { + margin-top: 1rem; + display: flex; + justify-content: flex-start; +} + +.submitbutton { + background-color: #1ab6ce; + font-size: 0.875rem; + color: white; + padding: 0.5rem 1rem; + border-radius: 0.5rem; + box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2); + outline: none; +} + +/* For classes: bg-[#188ae2] text-sm text-white px-4 py-2 rounded ml-2 shadow focus:outline-none */ +.resetbutton { + background-color: #188ae2; + font-size: 0.875rem; + color: white; + padding: 0.5rem 1rem; + border-radius: 0.5rem; + box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2); + margin-left: 0.5rem; + outline: none; +} \ No newline at end of file diff --git a/microfrontends/SignDocuments/src/css/signature.css b/microfrontends/SignDocuments/src/css/signature.css index b4aed0610..7fc117746 100644 --- a/microfrontends/SignDocuments/src/css/signature.css +++ b/microfrontends/SignDocuments/src/css/signature.css @@ -174,6 +174,28 @@ padding: 0px 5.1px 1px 5px; } +.signCloseBtn{ + position: absolute; + right: -1px; + top: -9px; + border-radius: 100%; + font-size: 14px; + cursor: pointer; + padding: 0px 5.1px 1px 5px; + z-index: 2; +} + +.signCopy { + position: absolute; + right: 24px; + top: -9px; + font-size: 13px; + cursor: pointer; + z-index: 2; + +} + + .placeholderBlock { padding: 0px; position: absolute; @@ -185,6 +207,16 @@ justify-content: center; border-width: 0.2px; +} +.signWidgetblock { + padding: 0px; + border-style: dashed; + display: flex !important; + text-align: center !important; + justify-content: center !important; + align-items: center !important; + border-width: 0.2px; + } .finishBtn { diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index 5deab7dee..1dbd6047a 100644 --- a/microfrontends/SignDocuments/src/utils/Utils.js +++ b/microfrontends/SignDocuments/src/utils/Utils.js @@ -1004,19 +1004,26 @@ export const signPdfFun = async ( export const randomId = () => Math.floor(1000 + Math.random() * 9000); -export const createDocument = async (template) => { +export const createDocument = async (template, placeholders, signerData) => { if (template && template.length > 0) { const Doc = template[0]; - let signers; - console.log("Doc.Placholders ", Doc) - if (Doc.Signers && Doc.Signers.length > 0) { - signers = Doc.Signers.map((x) => ({ - __type: "Pointer", - className: "contracts_Contactbook", - objectId: x.objectId - })); - } else { - signers = []; + + let placeholdersArr = [] + if(placeholders?.length > 0 ){ + placeholdersArr= placeholders + } + let signers = [] + if(signerData?.length > 0){ + signerData.forEach((x) => { + if(x.objectId){ + const obj = { + __type: "Pointer", + className: "contracts_Contactbook", + objectId: x.objectId + }; + signers.push(obj) + } + }); } const data = { Name: Doc.Name, @@ -1024,7 +1031,7 @@ export const createDocument = async (template) => { SignedUrl: Doc.SignedUrl, Description: Doc.Description, Note: Doc.Note, - Placeholders: Doc.Placeholders, + Placeholders: placeholdersArr, ExtUserPtr: { __type: "Pointer", className: "contracts_Users", From 8ebfd781c3f70584de3fe8a9de0265655ea9baca Mon Sep 17 00:00:00 2001 From: prafull-opensignlabs Date: Wed, 20 Dec 2023 14:33:41 +0530 Subject: [PATCH 043/111] add template report and form , as well as migration code for it --- apps/OpenSign/src/json/ReportJson.js | 20 +- .../src/primitives/GetReportDisplay.js | 109 +++- apps/OpenSign/src/primitives/TemplateForm.js | 21 +- .../cloud/parsefunction/GetTemplate.js | 9 +- .../cloud/parsefunction/getReport.js | 2 +- .../cloud/parsefunction/reportsJson.js | 16 + .../migrations/20231129103946-update_menu.cjs | 10 +- .../20231208132950-create_template_cls.cjs | 40 -- .../20231208132950-update_template_menu.cjs | 572 ++++++++++++++++++ .../src/Component/TemplatePlaceholder.js | 116 +--- .../Component/component/fieldsComponent.js | 19 +- .../Component/component/signerListPlace.js | 29 +- .../src/Component/placeHolderSign.js | 60 +- 13 files changed, 808 insertions(+), 215 deletions(-) delete mode 100644 apps/OpenSignServer/databases/migrations/20231208132950-create_template_cls.cjs create mode 100644 apps/OpenSignServer/databases/migrations/20231208132950-update_template_menu.cjs diff --git a/apps/OpenSign/src/json/ReportJson.js b/apps/OpenSign/src/json/ReportJson.js index d3d6148ba..c65926b05 100644 --- a/apps/OpenSign/src/json/ReportJson.js +++ b/apps/OpenSign/src/json/ReportJson.js @@ -164,16 +164,26 @@ export default function reportJson(id) { ] }; // template report - case "23jk45slhj": + case "6TeaPr321t": return { reportName: "Templates", - heading: contactbook, + heading: head, actions: [ { - btnLabel: "", - btnColor: "#f55a42", + btnLabel: "Use", + btnColor: "#4bd396", textColor: "white", - btnIcon: "fa-solid fa-trash" + btnIcon: "fa fa-plus", + redirectUrl: + "remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9TaWduLU1pY3JvYXBwVjIvcmVtb3RlRW50cnkuanM=&moduleToLoad=AppRoutes&remoteName=signmicroapp/placeHolderSign" + }, + { + btnLabel: "Edit", + btnColor: "#00c9d5", + textColor: "white", + btnIcon: "fa fa-plus", + redirectUrl: + "remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9TaWduLU1pY3JvYXBwVjIvcmVtb3RlRW50cnkuanM=&moduleToLoad=AppRoutes&remoteName=signmicroapp/template" } ] }; diff --git a/apps/OpenSign/src/primitives/GetReportDisplay.js b/apps/OpenSign/src/primitives/GetReportDisplay.js index 6c603d76d..f54f719aa 100644 --- a/apps/OpenSign/src/primitives/GetReportDisplay.js +++ b/apps/OpenSign/src/primitives/GetReportDisplay.js @@ -55,10 +55,109 @@ const ReportTable = ({ }, [isMoreDocs, pageNumbers, currentPage, setIsNextRecord]); // `handlemicroapp` is used to open microapp - const handlemicroapp = (item, url) => { - localStorage.removeItem("rowlevel"); - navigate("/rpmf/" + url); - localStorage.setItem("rowlevel", JSON.stringify(item)); + const handlemicroapp = async (item, url, btnLabel) => { + if (ReportName === "Templates") { + if(btnLabel === "Edit"){ + navigate(`/asmf/${url}/${item.objectId}`); + }else{ + setActLoader({ [item.objectId]: true }); + try { + const params = { + templateId: item.objectId + }; + const templateDeatils = await axios.post( + `${localStorage.getItem("baseUrl")}functions/getTemplate`, + params, + { + headers: { + "Content-Type": "application/json", + "X-Parse-Application-Id": localStorage.getItem("parseAppId"), + sessionToken: localStorage.getItem("accesstoken") + } + } + ); + + console.log("templateDeatils.data ", templateDeatils.data); + const templateData = + templateDeatils.data && templateDeatils.data.result; + if (!templateData.error) { + const Doc = templateData; + + let placeholdersArr = []; + if (Doc.Placeholders?.length > 0) { + placeholdersArr = Doc.Placeholders; + } + let signers = []; + if (Doc.Signers?.length > 0) { + Doc.Signers?.forEach((x) => { + if (x.objectId) { + const obj = { + __type: "Pointer", + className: "contracts_Contactbook", + objectId: x.objectId + }; + signers.push(obj); + } + }); + } + const data = { + Name: Doc.Name, + URL: Doc.URL, + SignedUrl: Doc.SignedUrl, + Description: Doc.Description, + Note: Doc.Note, + Placeholders: placeholdersArr, + ExtUserPtr: { + __type: "Pointer", + className: "contracts_Users", + objectId: Doc.ExtUserPtr.objectId + }, + CreatedBy: { + __type: "Pointer", + className: "_User", + objectId: Doc.CreatedBy.objectId + }, + Signers: signers + }; + + const res = await axios.post( + `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem( + "_appName" + )}_Document`, + data, + { + headers: { + "Content-Type": "application/json", + "X-Parse-Application-Id": localStorage.getItem("parseAppId"), + "X-Parse-Session-Token": localStorage.getItem("accesstoken") + } + } + ); + + // console.log("Res ", res.data); + if (res.data && res.data.objectId) { + setActLoader({}); + setIsAlert(true); + navigate(`/asmf/${url}/${res.data.objectId}`); + } + } else { + setIsAlert(true); + setIsErr(true); + setActLoader({}); + } + } catch (err) { + console.log("err", err); + setIsAlert(true); + setIsErr(true); + setActLoader({}); + } + } + } else { + localStorage.removeItem("rowlevel"); + navigate("/rpmf/" + url); + localStorage.setItem("rowlevel", JSON.stringify(item)); + } + // localStorage.setItem("rowlevelMicro"); }; const handlebtn = async (item) => { @@ -217,7 +316,7 @@ const ReportTable = ({ key={index} onClick={() => act?.redirectUrl - ? handlemicroapp(item, act.redirectUrl) + ? handlemicroapp(item, act.redirectUrl, act.btnLabel) : handlebtn(item) } className={`flex justify-center items-center w-full gap-1 px-2 py-1 rounded shadow`} diff --git a/apps/OpenSign/src/primitives/TemplateForm.js b/apps/OpenSign/src/primitives/TemplateForm.js index d478f670b..05f8d7d6f 100644 --- a/apps/OpenSign/src/primitives/TemplateForm.js +++ b/apps/OpenSign/src/primitives/TemplateForm.js @@ -7,16 +7,16 @@ import SelectFolder from "../components/fields/SelectFolder"; // import SignersInput from "../components/fields/SignersInput"; import Title from "../components/Title"; import { useNavigate } from "react-router-dom"; -import { templateCls } from '../constant/const' - +import { templateCls } from "../constant/const"; + const TemplateForm = () => { - const navigate = useNavigate() + const navigate = useNavigate(); const [signers, setSigners] = useState([]); const [folder, setFolder] = useState({ ObjectId: "", Name: "" }); const [formData, setFormData] = useState({ - Name: "Please review and sign this document", + Name: "", Description: "", - Note: "" + Note: "Please review and sign this document" }); const [fileupload, setFileUpload] = useState([]); const [fileload, setfileload] = useState(false); @@ -168,7 +168,10 @@ const TemplateForm = () => { }); setFileUpload([]); setpercentage(0); - navigate('/asmf/remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9TaWduLU1pY3JvYXBwVjIvcmVtb3RlRW50cnkuanM=&moduleToLoad=AppRoutes&remoteName=signmicroapp/template/' +res.id) + navigate( + "/asmf/remoteUrl=aHR0cHM6Ly9xaWstYWktb3JnLmdpdGh1Yi5pby9TaWduLU1pY3JvYXBwVjIvcmVtb3RlRW50cnkuanM=&moduleToLoad=AppRoutes&remoteName=signmicroapp/template/" + + res.id + ); } } catch (err) { console.log("err ", err); @@ -275,7 +278,9 @@ const TemplateForm = () => { />
    - + { />
    {/* */} - +
    + + + + + ); +} + +export default CopyAllPage; diff --git a/microfrontends/SignDocuments/src/Component/component/placeholderBorder.js b/microfrontends/SignDocuments/src/Component/component/placeholderBorder.js new file mode 100644 index 000000000..79815865e --- /dev/null +++ b/microfrontends/SignDocuments/src/Component/component/placeholderBorder.js @@ -0,0 +1,36 @@ +import React from "react"; +import { themeColor } from "../../utils/ThemeColor/backColor"; +import { resizeBorderExtraWidth } from "../../utils/Utils"; +function PlaceholderBorder(props) { + const getResizeBorderExtraWidth = resizeBorderExtraWidth(); + + return ( +
    { + // if (!props.isDragging && props.isMobile) { + // setTimeout(() => { + // e.stopPropagation(); + // props.setIsSignPad(true); + // props.setSignKey(props.pos.key); + // props.setIsStamp(props.pos.isStamp); + // }, 500); + // } + // }} + className="borderResize" + style={{ + borderColor: themeColor(), + borderStyle: "dashed", + width: props.pos.Width + ? props.pos.Width + getResizeBorderExtraWidth + : 150 + getResizeBorderExtraWidth, + height: props.pos.Height + ? props.pos.Height + getResizeBorderExtraWidth + : 60 + getResizeBorderExtraWidth, + borderWidth: "0.2px", + overflow: "hidden" + }} + >
    + ); +} + +export default PlaceholderBorder; diff --git a/microfrontends/SignDocuments/src/Component/component/renderAllPdfPage.js b/microfrontends/SignDocuments/src/Component/component/renderAllPdfPage.js index ffac41108..85d424200 100644 --- a/microfrontends/SignDocuments/src/Component/component/renderAllPdfPage.js +++ b/microfrontends/SignDocuments/src/Component/component/renderAllPdfPage.js @@ -10,6 +10,7 @@ function RenderAllPdfPage({ setAllPages, setPageNumber, setSignBtnPosition, + pageNumber }) { pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`; @@ -20,75 +21,80 @@ function RenderAllPdfPage({ return (
    -
    -
    -
    - Pages -
    +
    +
    +
    + Pages +
    - -
    - - + - {Array.from(new Array(allPages), (el, index) => ( -
    + {Array.from(new Array(allPages), (el, index) => ( +
    { - setPageNumber(index + 1); - if (setSignBtnPosition) { - setSignBtnPosition([]); - } - }} - > - -
    - ))} - - + display: "flex", + justifyContent: "center", + alignItems: "center", + contain: "content" + }} + onClick={() => { + setPageNumber(index + 1); + if (setSignBtnPosition) { + setSignBtnPosition([]); + } + }} + > + +
    + ))} +     +     +
    +
    -
    - - -
    ); } diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js index 7469e6630..53e2500d5 100644 --- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js +++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js @@ -10,6 +10,7 @@ import { handleSignYourselfImageResize } from "../../utils/Utils"; import EmailToast from "./emailToast"; +import PlaceholderBorder from "./placeholderBorder"; pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`; @@ -48,7 +49,9 @@ function RenderPdf({ index, containerWH, setIsResize, - setZIndex + setZIndex, + setIsPageCopy, + setSignerObjId }) { const isMobile = window.innerWidth < 767; const newWidth = containerWH.width; @@ -58,66 +61,118 @@ function RenderPdf({ // handle signature block width and height according to screen const posWidth = (pos) => { + const defaultWidth = 150; + const posWidth = pos.Width ? pos.Width : defaultWidth; let width; if (isMobile) { if (!pos.isMobile) { if (pos.IsResize) { - width = pos.Width ? pos.Width : 150; + width = posWidth ? posWidth : defaultWidth; return width; } else { - width = (pos.Width || 150) / scale; + width = (posWidth || defaultWidth) / scale; return width; } } else { - width = pos.Width ? pos.Width : 150; + width = posWidth ? posWidth : defaultWidth; return width; } } else { if (pos.isMobile) { if (pos.IsResize) { - width = pos.Width ? pos.Width : 150; + width = posWidth ? posWidth : defaultWidth; return width; } else { - width = (pos.Width || 150) * pos.scale; + width = (posWidth || defaultWidth) * pos.scale; return width; } } else { - width = pos.Width ? pos.Width : 150; + width = posWidth ? posWidth : defaultWidth; return width; } } }; const posHeight = (pos) => { let height; + const posHeight = pos.Height; + const defaultHeight = 60; if (isMobile) { if (!pos.isMobile) { if (pos.IsResize) { - height = pos.Height ? pos.Height : 60; + height = posHeight ? posHeight : defaultHeight; return height; } else { - height = (pos.Height || 60) / scale; + height = (posHeight || defaultHeight) / scale; return height; } } else { - height = pos.Height ? pos.Height : 60; + height = posHeight ? posHeight : defaultHeight; return height; } } else { if (pos.isMobile) { if (pos.IsResize) { - height = pos.Height ? pos.Height : 60; + height = posHeight ? posHeight : defaultHeight; return height; } else { - height = (pos.Height || 60) * pos.scale; + height = (posHeight || defaultHeight) * pos.scale; return height; } } else { - height = pos.Height ? pos.Height : 60; + height = posHeight ? posHeight : defaultHeight; return height; } } }; + const xPos = (pos) => { + const resizePos = pos.xPosition; + //checking both condition mobile and desktop view + if (isMobile) { + //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale + if (!pos.isMobile) { + return resizePos / scale; + } + //pos.isMobile true -- placeholder save from mobile view(small device) handle position in mobile view(small screen) view divided by scale + else { + return resizePos * (pos.scale / scale); + } + } else { + //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale + + if (pos.isMobile) { + return pos.scale && resizePos * pos.scale; + } + //else placeholder save from desktop(bigscreen) and show in desktop(bigscreen) + else { + return resizePos; + } + } + }; + const yPos = (pos) => { + const resizePos = pos.yPosition; + //checking both condition mobile and desktop view + if (isMobile) { + //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale + if (!pos.isMobile) { + return resizePos / scale; + } + //pos.isMobile true -- placeholder save from mobile view(small device) handle position in mobile view(small screen) view divided by scale + else { + return resizePos * (pos.scale / scale); + } + } else { + //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale + + if (pos.isMobile) { + return pos.scale && resizePos * pos.scale; + } + //else placeholder save from desktop(bigscreen) and show in desktop(bigscreen) + else { + return resizePos; + } + } + }; //function for render placeholder block over pdf document const checkSignedSignes = (data) => { const checkSign = signedSigners.filter( @@ -126,52 +181,7 @@ function RenderPdf({ if (data.signerObjId === signerObjectId) { setCurrentSigner(true); } - const xPos = (pos) => { - //checking both condition mobile and desktop view - if (isMobile) { - //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale - if (!pos.isMobile) { - return pos.xPosition / scale; - } - //pos.isMobile true -- placeholder save from mobile view(small device) handle position in mobile view(small screen) view divided by scale - else { - return pos.xPosition * (pos.scale / scale); - } - } else { - //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale - if (pos.isMobile) { - return pos.scale && pos.xPosition * pos.scale; - } - //else placeholder save from desktop(bigscreen) and show in desktop(bigscreen) - else { - return pos.xPosition; - } - } - }; - const yPos = (pos) => { - //checking both condition mobile and desktop view - if (isMobile) { - //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale - if (!pos.isMobile) { - return pos.yPosition / scale; - } - //pos.isMobile true -- placeholder save from mobile view(small device) handle position in mobile view(small screen) view divided by scale - else { - return pos.yPosition * (pos.scale / scale); - } - } else { - //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale - - if (pos.isMobile) { - return pos.scale && pos.yPosition * pos.scale; - } - //else placeholder save from desktop(bigscreen) and show in desktop(bigscreen) - else { - return pos.yPosition; - } - } - }; return ( checkSign.length === 0 && data.placeHolder.map((placeData, key) => { @@ -201,11 +211,13 @@ function RenderPdf({ data.signerObjId === signerObjectId ? "pointer" : "not-allowed", - borderColor: themeColor(), background: data.blockColor, + borderColor: themeColor(), + borderStyle: "dashed", + borderWidth: "0.1px", zIndex: "1" }} - className="placeholderBlock" + className="signYourselfBlock" size={{ width: posWidth(pos), height: posHeight(pos) @@ -289,14 +301,62 @@ function RenderPdf({ ); }; - //handled x-position in mobile view saved from big screen or small screen - const xPos = (pos) => { - //if pos.isMobile false -- placeholder saved from desktop view then handle position in mobile view divided by scale - if (!pos.isMobile) { - return pos.xPosition / scale; - } else { - return pos.xPosition * (pos.scale / scale); - } + const BlockDesign = ({ pos, data }) => { + return ( +
    + { + console.log("hello console"); + e.stopPropagation(); + setIsPageCopy(true); + setSignKey(pos.key); + }} + style={{ + color: "#188ae2" + }} + > + { + e.stopPropagation(); + if (data) { + handleDeleteSign(pos.key, data.signerObjId); + } else { + handleDeleteSign(pos.key); + setIsStamp(false); + } + }} + style={{ + color: "#188ae2" + }} + > + + {pos.SignUrl ? ( +
    + signimg +
    + ) : ( +
    + {pos.isStamp ? "stamp" : "signature"} +
    + )} +
    + ); }; return ( @@ -341,9 +401,14 @@ function RenderPdf({ style={{ cursor: "all-scroll", borderColor: themeColor(), - zIndex: "1" + borderStyle: "dashed", + borderWidth: "0.1px", + zIndex: "1", + background: data.blockColor + ? data.blockColor + : "#daebe0" }} - className="placeholderBlock" + className="signYourselfBlock" onResize={( e, direction, @@ -374,9 +439,7 @@ function RenderPdf({ //else if pos.isMobile true -- placeholder saved from mobile or tablet view then handle position in desktop view divide by scale default={{ x: xPos(pos), - y: !pos.isMobile - ? pos.yPosition / scale - : pos.yPosition * (pos.scale / scale) + y: yPos(pos) }} onClick={() => { setIsSignPad(true); @@ -449,14 +512,13 @@ function RenderPdf({ topLeft: false }} key={pos.key} - bounds="parent" style={{ cursor: "all-scroll", - borderColor: themeColor(), background: data.blockColor, + borderColor: data.bac, zIndex: pos.zIndex }} - className="placeholderBlock" + className="signYourselfBlock" onDrag={() => handleTabDrag(pos.key)} size={{ width: pos.Width ? pos.Width : 150, @@ -506,6 +568,9 @@ function RenderPdf({ ); }} > + + +
    { const dataNewPlace = addZIndex( @@ -523,20 +588,26 @@ function RenderPdf({ return newState; }); }} - style={{ - cursor: "all-scroll", - borderColor: themeColor(), - background: data.blockColor, - zIndex: pos.zIndex, - height: pos.Height - ? pos.Height - : 60, - width: pos.Width ? pos.Width : 150 - }} > - - -
    { + e.stopPropagation(); + setIsPageCopy(true); + setSignKey(pos.key); + setSignerObjId(data.signerObjId); + }} + onClick={(e) => { + e.stopPropagation(); + setIsPageCopy(true); + setSignKey(pos.key); + }} + style={{ + color: "#188ae2" + }} + > + { e.stopPropagation(); handleDeleteSign( @@ -545,12 +616,10 @@ function RenderPdf({ ); }} style={{ - background: themeColor() + color: "#188ae2" }} - className="placeholdCloseBtn" - > - x -
    + > +
    { + console.log("go here"); + if (!isDragging && isMobile) { + setTimeout(() => { + e.stopPropagation(); + setIsSignPad(true); + setSignKey(pos.key); + setIsStamp(pos.isStamp); + }, 500); + } + }} > - {" "} + +
    { - if (!isDragging) { + console.log("go here"); + if (!isDragging && isMobile) { setTimeout(() => { e.stopPropagation(); setIsSignPad(true); @@ -646,41 +729,54 @@ function RenderPdf({ }, 500); } }} - style={{ - height: "100%" - }} > - -
    { + { e.stopPropagation(); - handleDeleteSign(pos.key); - setIsStamp(false); + setIsPageCopy(true); + setSignKey(pos.key); }} style={{ - background: themeColor() + color: "#188ae2" }} - className="placeholdCloseBtn" - > - x -
    + > + { + e.stopPropagation(); + if (data) { + handleDeleteSign( + pos.key, + data.signerObjId + ); + } else { + handleDeleteSign(pos.key); + setIsStamp(false); + } + }} + style={{ + color: "#188ae2" + }} + > + {pos.SignUrl ? ( - signimg +
    + signimg +
    ) : (
    @@ -806,9 +902,14 @@ function RenderPdf({ style={{ cursor: "all-scroll", borderColor: themeColor(), - zIndex: "1" + borderStyle: "dashed", + borderWidth: "0.1px", + zIndex: "1", + background: data.blockColor + ? data.blockColor + : "#daebe0" }} - className="placeholderBlock" + className="signYourselfBlock" size={{ width: posWidth(pos), height: posHeight(pos) @@ -816,15 +917,9 @@ function RenderPdf({ lockAspectRatio={ pos.Width ? pos.Width / pos.Height : 2.5 } - //if pos.isMobile false -- placeholder saved from mobile view then handle position in desktop view to multiply by scale - default={{ - x: pos.isMobile - ? pos.scale && pos.xPosition * pos.scale - : pos.xPosition, - y: pos.isMobile - ? pos.scale && pos.yPosition * pos.scale - : pos.yPosition + x: xPos(pos), + y: yPos(pos) }} onClick={() => { setIsSignPad(true); @@ -919,10 +1014,10 @@ function RenderPdf({ style={{ cursor: "all-scroll", background: data.blockColor, - borderColor: themeColor(), + zIndex: pos.zIndex }} - className="placeholderBlock" + className="signYourselfBlock" onDrag={() => handleTabDrag(pos.key)} size={{ width: pos.Width ? pos.Width : 150, @@ -972,34 +1067,48 @@ function RenderPdf({ ); }} > - -
    { - e.stopPropagation(); - handleDeleteSign( - pos.key, - data.signerObjId - ); - }} - style={{ - background: themeColor() - }} - className="placeholdCloseBtn" - > - x -
    -
    + +
    + { + e.stopPropagation(); + setIsPageCopy(true); + setSignKey(pos.key); + setSignerObjId( + data.signerObjId + ); + }} + style={{ + color: "#188ae2" + }} + > + { + e.stopPropagation(); + handleDeleteSign( + pos.key, + data.signerObjId + ); + }} + style={{ + color: "#188ae2" + }} + > - marginTop: "0px" - }} - > - {pos.isStamp - ? "stamp" - : "signature"} +
    + {pos.isStamp + ? "stamp" + : "signature"} +
    ); @@ -1034,12 +1143,13 @@ function RenderPdf({ topLeft: false }} bounds="parent" + className="signYourselfBlock" style={{ - borderColor: themeColor(), + border: "1px solid red", cursor: "all-scroll", - zIndex: "1" + zIndex: "1", + background: "#daebe0" }} - className="placeholderBlock" onDrag={() => handleTabDrag(pos.key)} size={{ width: pos.Width ? pos.Width : 150, @@ -1077,46 +1187,10 @@ function RenderPdf({ } }} > - + + - { - e.stopPropagation(); - handleDeleteSign(pos.key); - setIsStamp(false); - }} - style={{ - background: themeColor() - }} - className="placeholdCloseBtn" - > - x - - - {pos.SignUrl ? ( -
    - signimg -
    - ) : ( -
    - {pos.isStamp ? "stamp" : "signature"} -
    - )} + ) ); @@ -1124,6 +1198,7 @@ function RenderPdf({ ); }))} + {/* this component for render pdf document is in middle of the component */} { diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js index 564938f7f..2bcfc1aea 100644 --- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js +++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js @@ -27,6 +27,7 @@ import { import RenderPdf from "./component/renderPdf"; import ModalComponent from "./component/modalComponent"; import { useNavigate } from "react-router-dom"; +import CopyAllPage from "./component/copyAllPage"; function PlaceHolderSign() { const navigate = useNavigate(); @@ -68,10 +69,12 @@ function PlaceHolderSign() { const [isResize, setIsResize] = useState(false); const [isAlreadyPlace, setIsAlreadyPlace] = useState(false); const [zIndex, setZIndex] = useState(1); + const [signKey, setSignKey] = useState(); const [pdfLoadFail, setPdfLoadFail] = useState({ status: false, type: "load" }); + const [isPageCopy, setIsPageCopy] = useState(false); const color = [ "#93a3db", "#e6c3db", @@ -96,7 +99,6 @@ function PlaceHolderSign() { }); const [{ isDragSign }, dragSignature] = useDrag({ type: "BOX", - item: { type: "BOX", id: 1, @@ -108,7 +110,6 @@ function PlaceHolderSign() { }); const [{ isDragStamp }, dragStamp] = useDrag({ type: "BOX", - item: { type: "BOX", id: 2, @@ -121,7 +122,6 @@ function PlaceHolderSign() { const [{ isDragSignatureSS }, dragSignatureSS] = useDrag({ type: "BOX", - item: { type: "BOX", id: 3, @@ -134,7 +134,6 @@ function PlaceHolderSign() { const [{ isDragStampSS }, dragStampSS] = useDrag({ type: "BOX", - item: { type: "BOX", id: 4, @@ -814,6 +813,7 @@ function PlaceHolderSign() { setAllPages={setAllPages} setPageNumber={setPageNumber} setSignBtnPosition={setSignBtnPosition} + pageNumber={pageNumber} /> {/* pdf render view */} @@ -953,6 +953,16 @@ function PlaceHolderSign() { type={"signersAlert"} setIsShowEmail={setIsShowEmail} /> + {/* pdf header which contain funish back button */}
    )}
    diff --git a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js index 6421e8a8b..b039b0975 100644 --- a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js +++ b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js @@ -794,8 +794,9 @@ function EmbedPdfImage() { allPages={allPages} setAllPages={setAllPages} setPageNumber={setPageNumber} + pageNumber={pageNumber} /> - {/*
    kebjke
    */} + {/* pdf render view */}
    +
    + ) : (
    + Date: Wed, 10 Jan 2024 18:28:38 +0530 Subject: [PATCH 109/111] update template details on save --- .../SignDocuments/src/Component/TemplatePlaceholder.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js index 87a4cd27e..f84663c3c 100644 --- a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js +++ b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js @@ -660,7 +660,10 @@ const TemplatePlaceholder = () => { const data = { Placeholders: signerPos, SignedUrl: pdfDetails[0].URL, - Signers: signers + Signers: signers, + Name: pdfDetails[0]?.Name || "", + Note: pdfDetails[0]?.Note || "", + Description: pdfDetails[0]?.Description || "" }; await axios From d16478792cabc930d001acfb72e2b21506ec0ed3 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Wed, 10 Jan 2024 19:49:17 +0530 Subject: [PATCH 110/111] =?UTF-8?q?fix:document=20name=20bold,openSign=20t?= =?UTF-8?q?o=20OpenSign=E2=84=A2=20in=20email=20login=20flow?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/Component/component/emailComponent.js | 8 ++++---- .../SignDocuments/src/Component/placeHolderSign.js | 10 +++++----- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/microfrontends/SignDocuments/src/Component/component/emailComponent.js b/microfrontends/SignDocuments/src/Component/component/emailComponent.js index 43117f951..0c9e3ffb7 100644 --- a/microfrontends/SignDocuments/src/Component/component/emailComponent.js +++ b/microfrontends/SignDocuments/src/Component/component/emailComponent.js @@ -38,7 +38,7 @@ function EmailComponent({ "X-Parse-Application-Id": localStorage.getItem("parseAppId"), sessionToken: localStorage.getItem("accesstoken") }; - const openSignUrl = "https://www.opensignlabs.com/"; + const openSignUrl = "https://www.opensignlabs.com/contact-us"; const themeBGcolor = themeColor(); let params = { pdfName: pdfName, @@ -51,11 +51,11 @@ function EmailComponent({ imgPng + " height='50' style='padding:20px,width:170px,height:40px'/>

    Document Copy

    A copy of the document " + + ";'>

    Document Copy

    A copy of the document " + pdfName + - " Standard is attached to this email. Kindly download the document from the attachment.

    This is an automated email from OpenSign. For any queries regarding this email, please contact the sender " + + " is attached to this email. Kindly download the document from the attachment.

    This is an automated email from OpenSign™. For any queries regarding this email, please contact the sender " + sender.email + - " directly. If you think this email is inappropriate or spam, you may file a complaint with OpenSign here

    " }; diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js index 9d9c99d79..bd6cbcb65 100644 --- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js +++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js @@ -679,7 +679,7 @@ function PlaceHolderSign() { const hostUrl = window.location.origin + "/loadmf/signmicroapp"; let signPdf = `${hostUrl}/login/${pdfDetails?.[0].objectId}/${signerMail[i].Email}/${objectId}/${serverParams}`; - const openSignUrl = "https://www.opensignlabs.com/"; + const openSignUrl = "https://www.opensignlabs.com/contact-us"; const themeBGcolor = themeColor(); let params = { recipient: signerMail[i].Email, @@ -693,17 +693,17 @@ function PlaceHolderSign() { themeBGcolor + ";'>

    Digital Signature Request

    " + pdfDetails?.[0].ExtUserPtr.Name + - " has requested you to review and sign " + + " has requested you to review and sign " + pdfDetails?.[0].Name + - "

    Sender " + + ".

    Sender " + sender + "
    Organization Name __
    Expire on " + localExpireDate + "

    This is an automated email from OpenSign. For any queries regarding this email, please contact the sender " + + ">

    This is an automated email from OpenSign™. For any queries regarding this email, please contact the sender " + sender + - " directly.If you think this email is inappropriate or spam, you may file a complaint with OpenSign here.

    " }; From 06db7d23606d47ff16b82977631fed24445c2230 Mon Sep 17 00:00:00 2001 From: prafull-opensignlabs <93375423+prafull-opensignlabs@users.noreply.github.com> Date: Wed, 10 Jan 2024 21:04:20 +0530 Subject: [PATCH 111/111] update draft report query --- apps/OpenSignServer/cloud/parsefunction/reportsJson.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/OpenSignServer/cloud/parsefunction/reportsJson.js b/apps/OpenSignServer/cloud/parsefunction/reportsJson.js index 1ee858372..2031cd076 100644 --- a/apps/OpenSignServer/cloud/parsefunction/reportsJson.js +++ b/apps/OpenSignServer/cloud/parsefunction/reportsJson.js @@ -11,7 +11,7 @@ export default function reportJson(id, userId) { IsCompleted: { $ne: true }, IsDeclined: { $ne: true }, IsArchive: { $ne: true }, - $or: [{ Signers: null }, { Signers: { $exists: true }, Placeholders: null }], + $or: [{Signers:{$eq:[]}}, { Signers: null }, { Signers: { $exists: true }, Placeholders: null }], CreatedBy: { __type: 'Pointer', className: '_User', @@ -211,7 +211,7 @@ export default function reportJson(id, userId) { IsCompleted: { $ne: true }, IsDeclined: { $ne: true }, IsArchive: { $ne: true }, - $or: [{ Signers: null }, { Signers: { $exists: true }, Placeholders: null }], + $or: [{Signers:{$eq:[]}}, { Signers: null }, { Signers: { $exists: true }, Placeholders: null }], CreatedBy: { __type: 'Pointer', className: '_User',