From f9e6f49edec52656ad0a393e50d63cb38baeac3b Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Fri, 5 Jan 2024 17:00:41 +0530 Subject: [PATCH 1/2] fix: placeholder display issue of all signers after save placeholder and login flow --- .../FolderDrive/legaDriveComponent.js | 36 +- .../src/Component/PdfRequestFiles.js | 388 +++-- .../src/Component/TemplatePlaceholder.js | 2 +- .../src/Component/component/CustomModal.js | 58 +- .../Component/component/defaultSignature.js | 74 +- .../src/Component/component/header.js | 18 +- .../src/Component/component/renderPdf.js | 1423 +++++++---------- .../SignDocuments/src/Component/login.js | 5 + .../src/Component/placeHolderSign.js | 81 +- microfrontends/SignDocuments/src/Routes.js | 5 +- .../SignDocuments/src/css/customModal.css | 11 +- .../SignDocuments/src/css/signature.css | 10 +- .../SignDocuments/src/utils/Utils.js | 23 +- 13 files changed, 1039 insertions(+), 1095 deletions(-) diff --git a/microfrontends/SignDocuments/src/Component/LegaDrive/FolderDrive/legaDriveComponent.js b/microfrontends/SignDocuments/src/Component/LegaDrive/FolderDrive/legaDriveComponent.js index df62c822d..1c7ae57c1 100644 --- a/microfrontends/SignDocuments/src/Component/LegaDrive/FolderDrive/legaDriveComponent.js +++ b/microfrontends/SignDocuments/src/Component/LegaDrive/FolderDrive/legaDriveComponent.js @@ -17,7 +17,7 @@ function PdfFileComponent({ setDocId, setIsLoading, setPdfData, - isList, + isList }) { const [rename, setRename] = useState(""); const [renameValue, setRenameValue] = useState(""); @@ -39,12 +39,12 @@ function PdfFileComponent({ const handleOnclikFolder = (data) => { const folderData = { name: data.Name, - objectId: data.objectId, + objectId: data.objectId }; setFolderName((prev) => [...prev, folderData]); const loadObj = { isLoad: true, - message: "This might take some time", + message: "This might take some time" }; setIsLoading(loadObj); @@ -57,7 +57,7 @@ function PdfFileComponent({ if (trimmedValue.length > 0) { const updateName = { - Name: renameValue, + Name: renameValue }; const docId = data.objectId; @@ -83,8 +83,8 @@ function PdfFileComponent({ headers: { "Content-Type": "application/json", "X-Parse-Application-Id": localStorage.getItem("parseAppId"), - "X-Parse-Session-Token": localStorage.getItem("accesstoken"), - }, + "X-Parse-Session-Token": localStorage.getItem("accesstoken") + } } ) .then((result) => { @@ -99,7 +99,6 @@ function PdfFileComponent({ //function for navigate user to microapp-signature component const checkPdfStatus = async (data) => { - const hostUrl = getHostUrl(); const expireDate = data.ExpiryDate.iso; const expireUpdateDate = new Date(expireDate).getTime(); @@ -116,10 +115,7 @@ function PdfFileComponent({ // window.location.hash = `/pdfRequestFiles/${data.objectId}`; } else if (data.IsCompleted && !signerExist) { - navigate( - `${hostUrl}signaturePdf/${data.objectId}` - ); - // window.location.hash = `/recipientSignPdf/${data.objectId}/${data.ExtUserPtr.Phone}`; + navigate(`${hostUrl}signaturePdf/${data.objectId}`); } //checking if document has declined by someone else if (isDecline) { @@ -231,8 +227,8 @@ function PdfFileComponent({ const sanitizeFileName = (pdfName) => { // Replace spaces with underscore - return pdfName.replace(/ /g, '_'); - } + return pdfName.replace(/ /g, "_"); + }; const handleEnterPress = (e, data) => { if (e.key === "Enter") { @@ -312,7 +308,7 @@ function PdfFileComponent({ style={{ display: "flex", flexDirection: "column", - cursor: "pointer", + cursor: "pointer" }} > ) : ( @@ -385,7 +381,7 @@ function PdfFileComponent({ style={{ display: "flex", flexDirection: "column", - cursor: "pointer", + cursor: "pointer" }} > ) : ( @@ -484,7 +480,7 @@ function PdfFileComponent({ width: "100px", border: "1.5px solid black", borderRadius: "2px", - fontSize: "10px", + fontSize: "10px" }} /> ) : ( @@ -576,8 +572,8 @@ function PdfFileComponent({ //component to handle type of document and render according to type return isList ? ( -
- +
+
diff --git a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js index f0e7980dc..0e0a1f129 100644 --- a/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js +++ b/microfrontends/SignDocuments/src/Component/PdfRequestFiles.js @@ -23,7 +23,8 @@ import { signPdfFun, onImageSelect, onSaveSign, - onSaveImage + onSaveImage, + addDefaultSignatureImg } from "../utils/Utils"; import Loader from "./component/loader"; import HandleError from "./component/HandleError"; @@ -33,6 +34,8 @@ import RenderPdf from "./component/renderPdf"; import CustomModal from "./component/CustomModal"; import AlertComponent from "./component/alertComponent"; import Title from "./component/Title"; +import DefaultSignature from "./component/defaultSignature"; +import ModalUi from "../premitives/ModalUi"; function PdfRequestFiles() { const { docId } = useParams(); @@ -67,6 +70,10 @@ function PdfRequestFiles() { const [isDecline, setIsDecline] = useState({ isDeclined: false }); const [currentSigner, setCurrentSigner] = useState(false); const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" }); + const [defaultSignAlert, setDefaultSignAlert] = useState({ + isShow: false, + alertMessage: "" + }); const [isCompleted, setIsCompleted] = useState({ isCertificate: false, isModal: false @@ -195,7 +202,7 @@ function PdfRequestFiles() { for (let i = 0; i < signerRes.length; i++) { const signerId = signerRes[i].objectId; - let isSigned = false; + let isSignedSignature = false; for (let j = 0; j < checkDocIdExist.length; j++) { const signedExist = checkDocIdExist[j] && checkDocIdExist[j].UserPtr.objectId; @@ -204,12 +211,12 @@ function PdfRequestFiles() { if (signerId === signedExist) { signers.push({ ...signerRes[i], ...signerRes[i] }); - isSigned = true; + isSignedSignature = true; break; } // if does not match then add unsigned data in unSignedSigner array } - if (!isSigned) { + if (!isSignedSignature) { unSignedSigner.push({ ...signerRes[i], ...signerRes[i] }); } } @@ -624,6 +631,27 @@ function PdfRequestFiles() { console.log("error updating field is decline ", err); }); }; + //function to add default signature for all requested placeholder of sign + const addDefaultSignature = () => { + //get current signers placeholder position data + const currentSignerPosition = signerPos.filter( + (data) => data.signerObjId === signerObjectId + ); + //function for save default signature url for all placeholder position + const updatePlace = addDefaultSignatureImg( + currentSignerPosition[0].placeHolder, + defaultSignImg + ); + + const updatesignerPos = signerPos.map((x) => + x.signerObjId === signerObjectId ? { ...x, placeHolder: updatePlace } : x + ); + setSignerPos(updatesignerPos); + setDefaultSignAlert({ + isShow: false, + alertMessage: "" + }); + }; return ( @@ -663,11 +691,47 @@ function PdfRequestFiles() { )}
- + { + setIsAlert({ + isShow: false, + alertMessage: "" + }); + }} + > +
+

{isAlert.alertMessage}

+ +
+ + +
+ {/* this modal is used to show decline alert */} + { + setDefaultSignAlert({ + isShow: false, + alertMessage: "" + }); + }} + > +
+

{defaultSignAlert.alertMessage}

+ +
+ {defaultSignImg ? ( + <> + + + + ) : ( + + )} +
+ {/* this component used to render all pdf pages in left side */}
- {signedSigners.length > 0 && ( - <> -
- Signed by -
-
- {signedSigners.map((obj, ind) => { - return ( -
+
+ {signedSigners.length > 0 && ( + <> +
+ Signed by +
+
+ {signedSigners.map((obj, ind) => { + return (
- - {getFirstLetter(obj.Name)} - + + {getFirstLetter(obj.Name)} + +
+
+ {obj.Name} + {obj.Email} +
-
- {obj.Name} - {obj.Email} -
-
- ); - })} -
- - )} + ); + })} +
+ + )} - {unsignedSigners.length > 0 && ( - <> -
0 && "20px" - }} - > - Yet to sign -
-
- {unsignedSigners.map((obj, ind) => { - return ( -
+ {unsignedSigners.length > 0 && ( + <> +
0 && "20px" + }} + > + Yet to sign +
+
+ {unsignedSigners.map((obj, ind) => { + return (
- - {getFirstLetter(obj.Name)} - + + {getFirstLetter(obj.Name)} + +
+
+ {obj.Name} + {obj.Email} +
+
-
- {obj.Name} - {obj.Email} -
-
-
- ); - })} -
- - )} + ); + })} +
+ + )} + {defaultSignImg && !alreadySign && ( + + )} +
diff --git a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js index 61c1dd5ae..87a4cd27e 100644 --- a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js +++ b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js @@ -741,7 +741,7 @@ const TemplatePlaceholder = () => { selector: '[data-tut="reactourThird"]', content: () => ( ), diff --git a/microfrontends/SignDocuments/src/Component/component/CustomModal.js b/microfrontends/SignDocuments/src/Component/component/CustomModal.js index bdf5fef6e..eee88a834 100644 --- a/microfrontends/SignDocuments/src/Component/component/CustomModal.js +++ b/microfrontends/SignDocuments/src/Component/component/CustomModal.js @@ -25,31 +25,41 @@ function CustomModal({
{headMsg && headMsg}

{bodyMssg && bodyMssg}

+
+ + {footerMessage && ( +
+ + +
+ )}
- {footerMessage && ( -
- - -
- )} ) diff --git a/microfrontends/SignDocuments/src/Component/component/defaultSignature.js b/microfrontends/SignDocuments/src/Component/component/defaultSignature.js index c79d0f8d6..1fbee6604 100644 --- a/microfrontends/SignDocuments/src/Component/component/defaultSignature.js +++ b/microfrontends/SignDocuments/src/Component/component/defaultSignature.js @@ -4,27 +4,32 @@ function DefaultSignature({ themeColor, defaultSignImg, xyPostion, - setIsAlert + setDefaultSignAlert }) { const confirmToaddDefaultSign = () => { if (xyPostion.length > 0) { - setIsAlert({ + setDefaultSignAlert({ isShow: true, - alertMessage: "Are you sure you want to sign at requested locations?" + alertMessage: + "Are you sure you want to auto sign at requested all locations?" }); } else { - alert("please select position!"); + setDefaultSignAlert({ + isShow: true, + alertMessage: "please select position!" + }); } }; return ( -
+
Signature @@ -38,41 +43,34 @@ function DefaultSignature({ fontWeight: "600" }} > - {defaultSignImg ? ( - <> -

Your Signature

-
- default img -
- - - ) : ( -
- - Click a signature placeholder to start signing the document! - + src={defaultSignImg} + />
- )} + +
); diff --git a/microfrontends/SignDocuments/src/Component/component/header.js b/microfrontends/SignDocuments/src/Component/component/header.js index b92dfff72..c8bc5d37d 100644 --- a/microfrontends/SignDocuments/src/Component/component/header.js +++ b/microfrontends/SignDocuments/src/Component/component/header.js @@ -225,10 +225,7 @@ function Header({ ); }; return ( -
+
{isMobile && isShowHeader ? ( @@ -1037,20 +1038,6 @@ function PlaceHolderSign() { >
{currentId ? ( <> - - + ) : ( - - +
+ + } /> {/* recipient signature route with no rowlevel data using docId from url */} } + path="/recipientSignPdf/:docId/:contactBookId" + // element={ + element={} /> {/* recipient placeholder set route with rowlevel data */} } />{" "} diff --git a/microfrontends/SignDocuments/src/css/customModal.css b/microfrontends/SignDocuments/src/css/customModal.css index 5687ed9b0..4cdd0e2d6 100644 --- a/microfrontends/SignDocuments/src/css/customModal.css +++ b/microfrontends/SignDocuments/src/css/customModal.css @@ -5,11 +5,12 @@ background-color: rgba(0, 0, 0, 0.75); display: flex; flex-direction: column; - align-items: center; + align-items: center; + justify-content: center; } .childDiv { - width: 50%; + width: 40%; display: flex; flex-direction: column; justify-content: center; @@ -27,7 +28,7 @@ border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem; font-size: 17px; - font-weight: 500; + font-weight: 400; } .modalBodyDIv { @@ -48,12 +49,12 @@ .modalFooterDiv { margin: 10px; display: flex; - justify-content: flex-end; + justify-content: flex-start; } @media screen and (max-width:500px) { .childDiv { margin: 50px 7px; - width: 90%; + width: 80%; } } \ No newline at end of file diff --git a/microfrontends/SignDocuments/src/css/signature.css b/microfrontends/SignDocuments/src/css/signature.css index 2eb4f834a..53298e180 100644 --- a/microfrontends/SignDocuments/src/css/signature.css +++ b/microfrontends/SignDocuments/src/css/signature.css @@ -2,7 +2,6 @@ @import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Delicious+Handrawn&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap'); - .signatureCanvas { border: 2px solid #888; background-color: rgb(255, 255, 255); @@ -266,7 +265,7 @@ .defaultSignBox { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18); - width: 180px; + width: 90%; height: 111px; padding: 8px 20px; color: white; @@ -444,6 +443,7 @@ width: 180px; background-color: white; height: 100%; + } .modalBody { @@ -678,6 +678,12 @@ option { .dropDownStyle { width: auto; } +.autoSignScroll{ + overflow-y: auto; +} +.autoSignScroll::-webkit-scrollbar { + display: none; +} @media screen and (max-width:766px) { diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index dec3f024a..9950cfccc 100644 --- a/microfrontends/SignDocuments/src/utils/Utils.js +++ b/microfrontends/SignDocuments/src/utils/Utils.js @@ -95,19 +95,19 @@ export function onSaveImage(xyPostion, index, signKey, imgWH, image) { let getIMGWH; //get current page position const getXYData = xyPostion[index].pos; - const updateXYData = getXYData.map((url) => { - if (url.key === signKey) { - getIMGWH = calculateImgAspectRatio(imgWH, url); + const updateXYData = getXYData.map((position) => { + if (position.key === signKey) { + getIMGWH = calculateImgAspectRatio(imgWH, position); return { - ...url, + ...position, Width: getIMGWH.newWidth, Height: getIMGWH.newHeight, SignUrl: image.src, ImageType: image.imgType }; } - return url; + return position; }); const updateXYposition = xyPostion.map((obj, ind) => { @@ -215,18 +215,18 @@ export const addDefaultSignatureImg = (xyPostion, defaultSignImg) => { const getPageNo = xyPostion[i].pageNumber; const getPosData = getXYdata; - const addSign = getPosData.map((url, ind) => { - getIMGWH = calculateImgAspectRatio(imgWH, url); - if (url) { + const addSign = getPosData.map((position, ind) => { + getIMGWH = calculateImgAspectRatio(imgWH, position); + if (position && !position.isStamp) { return { - ...url, + ...position, SignUrl: defaultSignImg, Width: getIMGWH.newWidth, Height: getIMGWH.newHeight, ImageType: "default" }; } - return url; + return position; }); const newXypos = { @@ -764,8 +764,7 @@ export const handleSignYourselfImageResize = ( key, xyPostion, index, - setXyPostion - + setXyPostion ) => { // const updateFilter = xyPostion[index].pos.filter( // (data) => data.key === key && data.Width && data.Height From 7bd8d64649a8f045567092ecb46eeeee382f90e1 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Fri, 5 Jan 2024 17:37:57 +0530 Subject: [PATCH 2/2] fix: instance signature flow issue after send placeholder --- .../SignDocuments/src/Component/placeHolderSign.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js index 1c5ebdc59..59aea3c0b 100644 --- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js +++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js @@ -722,7 +722,7 @@ function PlaceHolderSign() { }); const currentUser = signersdata.find((x) => x.Email === currentId); setCurrentId(currentUser?.objectId); - // console.log("signers ", signers); + try { const data = { Placeholders: signerPos, @@ -898,7 +898,11 @@ function PlaceHolderSign() { } return { ...x }; }); - // console.log("updateSigner ", updateSigner); + // console.log("updateSigner ", updateSigner); + if (updateSigner && updateSigner.length > 0) { + setCurrentId(updateSigner[0].Email); + } + setSignersData(updateSigner); const index = signersdata.findIndex((x) => x.Id === uniqueId); setIsSelectId(index);
Name