diff --git a/apps/OpenSign/src/primitives/GetReportDisplay.js b/apps/OpenSign/src/primitives/GetReportDisplay.js index c6d5d04ad..b9786d55d 100644 --- a/apps/OpenSign/src/primitives/GetReportDisplay.js +++ b/apps/OpenSign/src/primitives/GetReportDisplay.js @@ -252,6 +252,12 @@ const ReportTable = ({
{ReportName}
+ {ReportName === "Templates" && ( + navigate("/form/template")} + className="fa-solid fa-square-plus text-sky-400 text-[25px]" + > + )} {form && (
{ - //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"); - } - //function for called convert png signatre to jpeg in base 64 - convertPNGtoJPEG(ImgUrl) - .then((jpegBase64Data) => { - const removeBase64Fromjpeg = "data:image/jpeg;base64,"; - const newImgUrl = jpegBase64Data.replace( - removeBase64Fromjpeg, - "" - ); + // if (pngUrl.length === 1 && pngUrl[0].pos.length === 1) { + // if (isDocId) { + // try { + // pdfBase64 = await getBase64FromUrl(pdfUrl); + // } catch (err) { + // console.log(err); + // } + // } else { + // //embed document's object id to all pages in pdf document + // 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 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"); + // } + // //function for called convert png signatre to jpeg in base 64 + // convertPNGtoJPEG(ImgUrl) + // .then((jpegBase64Data) => { + // const removeBase64Fromjpeg = "data:image/jpeg;base64,"; + // const newImgUrl = jpegBase64Data.replace( + // removeBase64Fromjpeg, + // "" + // ); - //function for call to embed signature in pdf and get digital signature pdf - signPdfFun( - newImgUrl, - documentId, - signerObjectId, - pdfOriginalWidth, - pngUrl, - containerWH, - setIsAlert, - data, - pdfBase64, - pageNo - ) - .then((res) => { - 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" - }); - }); - }) - .catch((error) => { - console.error("Error:", error); - }); - }); - } - } - //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 + // //function for call to embed signature in pdf and get digital signature pdf + // signPdfFun( + // newImgUrl, + // documentId, + // signerObjectId, + // pdfOriginalWidth, + // pngUrl, + // containerWH, + // setIsAlert, + // data, + // pdfBase64, + // pageNo + // ) + // .then((res) => { + // 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" + // }); + // }); + // }) + // .catch((error) => { + // console.error("Error:", error); + // }); + // }); + // } + // } + // //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 + if (!isDocId) { await embedDocId(pdfDoc, documentId, allPages); - //embed multi signature in pdf - const pdfBytes = await multiSignEmbed( - pngUrl, - pdfDoc, + } + //embed multi signature in pdf + const pdfBytes = await multiSignEmbed( + pngUrl, + pdfDoc, + pdfOriginalWidth, + flag, + containerWH + ); + //function for call to embed signature in pdf and get digital signature pdf + try { + const res = await signPdfFun( + pdfBytes, + documentId, + signerObjectId, pdfOriginalWidth, - flag, - containerWH + pngUrl, + containerWH, + setIsAlert ); - - //function for call to embed signature in pdf and get digital signature pdf - 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) { + 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); } + + setIsSignPad(false); + // } } else { setIsAlert({ isShow: true, @@ -624,7 +625,7 @@ function PdfRequestFiles() { return ( - + <Title title={"Request Sign"} /> {isLoading.isLoad ? ( <Loader isLoading={isLoading} /> ) : handleError ? ( @@ -887,7 +888,7 @@ function PdfRequestFiles() { display: "flex", flexDirection: "row", alignItems: "center", - padding:"10px 0", + padding: "10px 0", background: checkSignerBackColor(obj) }} key={ind} diff --git a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js index 9453dd514..02abf989d 100644 --- a/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js +++ b/microfrontends/SignDocuments/src/Component/SignYourselfPdf.js @@ -445,60 +445,60 @@ function SignYourSelf() { ignoreEncryption: true }); - //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 - await embedDocId(pdfDoc, documentId, allPages); - const pdfBase64 = await pdfDoc.saveAsBase64({ - useObjectStreams: false - }); + // //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 + // await embedDocId(pdfDoc, documentId, allPages); + // const pdfBase64 = await pdfDoc.saveAsBase64({ + // useObjectStreams: false + // }); - 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"); - } - //function for convert signature png base64 url to jpeg base64 - convertPNGtoJPEG(ImgUrl) - .then((jpegBase64Data) => { - const removeBase64Fromjpeg = "data:image/jpeg;base64,"; - const newImgUrl = jpegBase64Data.replace( - removeBase64Fromjpeg, - "" - ); - //function for call to embed signature in pdf and get digital signature pdf - signPdfFun(newImgUrl, documentId, data, pdfBase64, pageNo); - }) - .catch((error) => { - console.error("Error:", error); - }); - }); - } - } + // 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"); + // } + // //function for convert signature png base64 url to jpeg base64 + // convertPNGtoJPEG(ImgUrl) + // .then((jpegBase64Data) => { + // const removeBase64Fromjpeg = "data:image/jpeg;base64,"; + // const newImgUrl = jpegBase64Data.replace( + // removeBase64Fromjpeg, + // "" + // ); + // //function for call to embed signature in pdf and get digital signature pdf + // signPdfFun(newImgUrl, documentId, data, pdfBase64, pageNo); + // }) + // .catch((error) => { + // console.error("Error:", error); + // }); + // }); + // } + // } //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 = true; - //embed document's object id to all pages in pdf document - await embedDocId(pdfDoc, documentId, allPages); + // else if (xyPostion.length > 0 && xyPostion[0].pos.length > 0) { + const flag = true; + //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( - xyPostion, - pdfDoc, - pdfOriginalWidth, - flag, - containerWH - ); + //embed multi signature in pdf + const pdfBytes = await multiSignEmbed( + xyPostion, + pdfDoc, + pdfOriginalWidth, + flag, + containerWH + ); - //function for call to embed signature in pdf and get digital signature pdf - signPdfFun(pdfBytes, documentId); - } + //function for call to embed signature in pdf and get digital signature pdf + signPdfFun(pdfBytes, documentId); + // } setIsSignPad(false); setIsEmail(true); setXyPostion([]); @@ -518,41 +518,41 @@ function SignYourSelf() { const newWidth = containerWH.width; const scale = isMobile ? pdfOriginalWidth / newWidth : 1; - if (xyPostion.length === 1 && xyPostion[0].pos.length === 1) { - const xPos = () => { - const resizePos = xyPosData.xPosition; - if (isMobile) { - return resizePos * scale; - } else { - return resizePos; - } - }; - const height = xyPosData.Height ? xyPosData.Height : 60; - const resizePos = xyPosData.yBottom; - const bottomY = xyPosData.isDrag - ? resizePos * scale - height * scale - : xyPosData.firstYPos - ? resizePos * scale - height * scale + xyPosData.firstYPos - : resizePos * scale - height * scale; + // if (xyPostion.length === 1 && xyPostion[0].pos.length === 1) { + // const xPos = () => { + // const resizePos = xyPosData.xPosition; + // if (isMobile) { + // return resizePos * scale; + // } else { + // return resizePos; + // } + // }; + // const height = xyPosData.Height ? xyPosData.Height : 60; + // const resizePos = xyPosData.yBottom; + // const bottomY = xyPosData.isDrag + // ? resizePos * scale - height * scale + // : xyPosData.firstYPos + // ? resizePos * scale - height * scale + xyPosData.firstYPos + // : resizePos * scale - height * scale; - singleSign = { - pdfFile: pdfBase64Url, - docId: documentId, - sign: { - Base64: base64Url, - Left: xPos(), - Bottom: bottomY, - Width: placeholderWidth(xyPosData, scale), - Height: placeholderHeight(xyPosData, scale), - Page: pageNo - } - }; - } else if (xyPostion.length > 0 && xyPostion[0].pos.length > 0) { - singleSign = { - pdfFile: base64Url, - docId: documentId - }; - } + // singleSign = { + // pdfFile: pdfBase64Url, + // docId: documentId, + // sign: { + // Base64: base64Url, + // Left: xPos(), + // Bottom: bottomY, + // Width: placeholderWidth(xyPosData, scale), + // Height: placeholderHeight(xyPosData, scale), + // Page: pageNo + // } + // }; + // } else if (xyPostion.length > 0 && xyPostion[0].pos.length > 0) { + singleSign = { + pdfFile: base64Url, + docId: documentId + // }; + }; await axios .post(`${localStorage.getItem("baseUrl")}functions/signPdf`, singleSign, { diff --git a/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js b/microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js index 28860f5e3..61c1dd5ae 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: () => ( <TourContentWithBtn - message={`Drag the placeholder for a recipient anywhere on the document.Remember, it will appear in the same colour as the name of the recipient for easy reference.`} + message={`The PDF content area already displays the template's existing placeholders. For your convenience, these placeholders will match the color of the recipient's name, making them easily identifiable.`} isChecked={handleDontShow} /> ), @@ -834,8 +834,8 @@ const TemplatePlaceholder = () => { // save Role in entry in signerList and user const handleAddRole = (e) => { e.preventDefault(); - setSignerObjId('') - setContractName('') + setSignerObjId(""); + setContractName(""); const count = signersdata.length > 0 ? signersdata.length + 1 : 1; const Id = randomId(); const index = signersdata.length; @@ -863,7 +863,7 @@ const TemplatePlaceholder = () => { const index = signersdata.findIndex((x) => x.Id === Id); if (index === signersdata.length - 1) { setUniqueId(updateSigner[updateSigner.length - 1]?.Id || ""); - setIsSelectId(index - 1|| 0); + setIsSelectId(index - 1 || 0); } else { setUniqueId(updateSigner[index]?.Id || ""); setIsSelectId(index); diff --git a/microfrontends/SignDocuments/src/Component/component/renderPdf.js b/microfrontends/SignDocuments/src/Component/component/renderPdf.js index 1c595f7c8..5b0c6b41c 100644 --- a/microfrontends/SignDocuments/src/Component/component/renderPdf.js +++ b/microfrontends/SignDocuments/src/Component/component/renderPdf.js @@ -286,7 +286,7 @@ function RenderPdf({ }} src={pos.SignUrl} style={{ - width: "100%", + width: "99%", height: "100%", objectFit: "contain" }} @@ -477,7 +477,9 @@ function RenderPdf({ onClick={() => { setIsSignPad(true); setSignKey(pos.key); - setIsStamp(pos?.isStamp ? pos.isStamp : false); + setIsStamp( + pos?.isStamp ? pos.isStamp : false + ); }} > <BorderResize /> @@ -490,7 +492,7 @@ function RenderPdf({ }} src={pos.SignUrl} style={{ - width: "100%", + width: "99%", height: "100%", objectFit: "contain" }} @@ -1006,7 +1008,9 @@ function RenderPdf({ onClick={() => { setIsSignPad(true); setSignKey(pos.key); - setIsStamp(pos?.isStamp ? pos.isStamp : false); + setIsStamp( + pos?.isStamp ? pos.isStamp : false + ); }} > <div style={{ pointerEvents: "none" }}> @@ -1020,7 +1024,7 @@ function RenderPdf({ }} src={pos.SignUrl} style={{ - width: "100%", + width: "99%", height: "100%", objectFit: "contain" }} diff --git a/microfrontends/SignDocuments/src/Component/placeHolderSign.js b/microfrontends/SignDocuments/src/Component/placeHolderSign.js index 6187f716b..9808cbf91 100644 --- a/microfrontends/SignDocuments/src/Component/placeHolderSign.js +++ b/microfrontends/SignDocuments/src/Component/placeHolderSign.js @@ -32,6 +32,7 @@ import PlaceholderCopy from "./component/PlaceholderCopy"; import LinkUserModal from "./component/LinkUserModal"; import Title from "./component/Title"; import TourContentWithBtn from "../premitives/TourContentWithBtn"; +import ModalUi from "../premitives/ModalUi"; function PlaceHolderSign() { const navigate = useNavigate(); @@ -321,131 +322,131 @@ function PlaceHolderSign() { }; const getSignerPos = (item, monitor) => { - setSignerObjId('') - setContractName('') + setSignerObjId(""); + setContractName(""); if (uniqueId) { - const signer = signersdata.find((x) => x.Id === uniqueId); - if (signer) { - const posZIndex = zIndex + 1; - setZIndex(posZIndex); - const newWidth = containerWH.width; - const scale = pdfOriginalWidth / newWidth; - const key = randomId(); - // let filterSignerPos = signerPos.filter( - // (data) => data.signerObjId === signerObjId - // ); - let filterSignerPos = signerPos.filter((data) => data.Id === uniqueId); - let dropData = []; - let placeHolder; - if (item === "onclick") { - const dropObj = { - xPosition: window.innerWidth / 2 - 100, - yPosition: window.innerHeight / 2 - 60, - isStamp: monitor, - key: key, - isDrag: false, - scale: scale, - isMobile: isMobile, - yBottom: window.innerHeight / 2 - 60, - zIndex: posZIndex - }; - dropData.push(dropObj); - placeHolder = { - pageNumber: pageNumber, - pos: dropData - }; - } else if (item.type === "BOX") { - const offset = monitor.getClientOffset(); - //adding and updating drop position in array when user drop signature button in div - const containerRect = document - .getElementById("container") - .getBoundingClientRect(); - const x = offset.x - containerRect.left; - const y = offset.y - containerRect.top; - const ybottom = containerRect.bottom - offset.y; - - const dropObj = { - xPosition: signBtnPosition[0] ? x - signBtnPosition[0].xPos : x, - yPosition: signBtnPosition[0] ? y - signBtnPosition[0].yPos : y, - isStamp: isDragStamp || isDragStampSS ? true : false, - key: key, - isDrag: false, - firstXPos: signBtnPosition[0] && signBtnPosition[0].xPos, - firstYPos: signBtnPosition[0] && signBtnPosition[0].yPos, - yBottom: ybottom, - scale: scale, - isMobile: isMobile, - zIndex: posZIndex - }; - - dropData.push(dropObj); - placeHolder = { - pageNumber: pageNumber, - pos: dropData - }; - } - const { blockColor, Role } = signer; - //adding placholder in existing signer pos array (placaholder) - if (filterSignerPos.length > 0) { - const getPlaceHolder = filterSignerPos[0].placeHolder; - const updatePlace = getPlaceHolder.filter( - (data) => data.pageNumber !== pageNumber - ); - const getPageNumer = getPlaceHolder.filter( - (data) => data.pageNumber === pageNumber - ); - - //add entry of position for same signer on multiple page - if (getPageNumer.length > 0) { - const getPos = getPageNumer[0].pos; - const newSignPos = getPos.concat(dropData); - let xyPos = { + const signer = signersdata.find((x) => x.Id === uniqueId); + if (signer) { + const posZIndex = zIndex + 1; + setZIndex(posZIndex); + const newWidth = containerWH.width; + const scale = pdfOriginalWidth / newWidth; + const key = randomId(); + // let filterSignerPos = signerPos.filter( + // (data) => data.signerObjId === signerObjId + // ); + let filterSignerPos = signerPos.filter((data) => data.Id === uniqueId); + let dropData = []; + let placeHolder; + if (item === "onclick") { + const dropObj = { + xPosition: window.innerWidth / 2 - 100, + yPosition: window.innerHeight / 2 - 60, + isStamp: monitor, + key: key, + isDrag: false, + scale: scale, + isMobile: isMobile, + yBottom: window.innerHeight / 2 - 60, + zIndex: posZIndex + }; + dropData.push(dropObj); + placeHolder = { pageNumber: pageNumber, - pos: newSignPos + pos: dropData }; - updatePlace.push(xyPos); - const updatesignerPos = signerPos.map((x) => - x.Id === uniqueId ? { ...x, placeHolder: updatePlace } : x - ); - setSignerPos(updatesignerPos); - } else { - const updatesignerPos = signerPos.map((x) => - x.Id === uniqueId - ? { ...x, placeHolder: [...x.placeHolder, placeHolder] } - : x - ); - setSignerPos(updatesignerPos); - } - } else { - //adding new placeholder for selected signer in pos array (placeholder) - let placeHolderPos; - if (contractName) { - placeHolderPos = { - signerPtr: { - __type: "Pointer", - className: `${contractName}`, - objectId: signerObjId - }, - signerObjId: signerObjId, - blockColor: blockColor ? blockColor : color[isSelectListId], - placeHolder: [placeHolder], - Role: Role ? Role : roleName, - Id: uniqueId + } else if (item.type === "BOX") { + const offset = monitor.getClientOffset(); + //adding and updating drop position in array when user drop signature button in div + const containerRect = document + .getElementById("container") + .getBoundingClientRect(); + const x = offset.x - containerRect.left; + const y = offset.y - containerRect.top; + const ybottom = containerRect.bottom - offset.y; + + const dropObj = { + xPosition: signBtnPosition[0] ? x - signBtnPosition[0].xPos : x, + yPosition: signBtnPosition[0] ? y - signBtnPosition[0].yPos : y, + isStamp: isDragStamp || isDragStampSS ? true : false, + key: key, + isDrag: false, + firstXPos: signBtnPosition[0] && signBtnPosition[0].xPos, + firstYPos: signBtnPosition[0] && signBtnPosition[0].yPos, + yBottom: ybottom, + scale: scale, + isMobile: isMobile, + zIndex: posZIndex }; - } else { - placeHolderPos = { - signerPtr: {}, - signerObjId: "", - blockColor: blockColor ? blockColor : color[isSelectListId], - placeHolder: [placeHolder], - Role: Role ? Role : roleName, - Id: uniqueId + + dropData.push(dropObj); + placeHolder = { + pageNumber: pageNumber, + pos: dropData }; } - setSignerPos((prev) => [...prev, placeHolderPos]); + const { blockColor, Role } = signer; + //adding placholder in existing signer pos array (placaholder) + if (filterSignerPos.length > 0) { + const getPlaceHolder = filterSignerPos[0].placeHolder; + const updatePlace = getPlaceHolder.filter( + (data) => data.pageNumber !== pageNumber + ); + const getPageNumer = getPlaceHolder.filter( + (data) => data.pageNumber === pageNumber + ); + + //add entry of position for same signer on multiple page + if (getPageNumer.length > 0) { + const getPos = getPageNumer[0].pos; + const newSignPos = getPos.concat(dropData); + let xyPos = { + pageNumber: pageNumber, + pos: newSignPos + }; + updatePlace.push(xyPos); + const updatesignerPos = signerPos.map((x) => + x.Id === uniqueId ? { ...x, placeHolder: updatePlace } : x + ); + setSignerPos(updatesignerPos); + } else { + const updatesignerPos = signerPos.map((x) => + x.Id === uniqueId + ? { ...x, placeHolder: [...x.placeHolder, placeHolder] } + : x + ); + setSignerPos(updatesignerPos); + } + } else { + //adding new placeholder for selected signer in pos array (placeholder) + let placeHolderPos; + if (contractName) { + placeHolderPos = { + signerPtr: { + __type: "Pointer", + className: `${contractName}`, + objectId: signerObjId + }, + signerObjId: signerObjId, + blockColor: blockColor ? blockColor : color[isSelectListId], + placeHolder: [placeHolder], + Role: Role ? Role : roleName, + Id: uniqueId + }; + } else { + placeHolderPos = { + signerPtr: {}, + signerObjId: "", + blockColor: blockColor ? blockColor : color[isSelectListId], + placeHolder: [placeHolder], + Role: Role ? Role : roleName, + Id: uniqueId + }; + } + setSignerPos((prev) => [...prev, placeHolderPos]); + } } } - } }; //function for get pdf page details const pageDetails = async (pdf) => { @@ -792,7 +793,7 @@ function PlaceHolderSign() { selector: '[data-tut="reactourThird"]', content: () => ( <TourContentWithBtn - message={`Drag the placeholder for a recipient anywhere on the document.Remember, it will appear in the same colour as the name of the recipient for easy reference.`} + message={`The PDF content area already displays the template's existing placeholders. For your convenience, these placeholders will match the color of the recipient's name, making them easily identifiable.`} isChecked={handleDontShow} /> ), @@ -803,7 +804,7 @@ function PlaceHolderSign() { selector: '[data-tut="reactourLinkUser"]', content: () => ( <TourContentWithBtn - message={`Click to this icon to assign or replace signer for the placeholder.`} + message={`Use this icon to assign a new signer or change the existing one for the placeholder.`} isChecked={handleDontShow} /> ), @@ -952,25 +953,21 @@ function PlaceHolderSign() { > {/* this modal is used show alert set placeholder for all signers before send mail */} - <Modal show={isSendAlert.alert}> - <Modal.Header - className={ - isSendAlert.mssg === "sure" - ? "bg-danger" - : isSendAlert.mssg === "confirm" && "bg-success" - } - > - {isSendAlert.mssg === "sure" ? ( - <span style={{ color: "white" }}>Fields required</span> - ) : ( - isSendAlert.mssg === "confirm" && ( - <span style={{ color: "white" }}>Send Mail</span> - ) - )} - </Modal.Header> - - {/* signature modal */} - <Modal.Body> + <ModalUi + headerColor={ + isSendAlert.mssg === "sure" + ? "#dc3545" + : isSendAlert.mssg === "confirm" && themeColor() + } + isOpen={isSendAlert.alert} + title={ + isSendAlert.mssg === "sure" + ? "Fields required" + : isSendAlert.mssg === "confirm" && "Send Mail" + } + handleClose={() => setIsSendAlert({})} + > + <div style={{ height: "100%", padding: 20 }}> {isSendAlert.mssg === "sure" ? ( <p>Please add field for all recipients.</p> ) : ( @@ -981,9 +978,15 @@ function PlaceHolderSign() { </p> ) )} - </Modal.Body> - - <Modal.Footer> + <div + style={{ + height: "1px", + backgroundColor: "#9f9f9f", + width: "100%", + marginTop: "15px", + marginBottom: "15px" + }} + ></div> <button onClick={() => setIsSendAlert({})} style={{ @@ -998,7 +1001,7 @@ function PlaceHolderSign() { <button onClick={() => sendEmailToSigners()} style={{ - background: "#24b53a" + background: themeColor() }} type="button" className="finishBtn" @@ -1006,27 +1009,32 @@ function PlaceHolderSign() { Yes </button> )} - </Modal.Footer> - </Modal> - {/* this modal is used show send mail message and after send mail success message */} - <Modal show={isSend}> - <Modal.Header - style={{ - background: themeColor() - }} - > - <span style={{ color: "white" }}>Mails Sent</span> - </Modal.Header> + </div> + </ModalUi> - {/* signature modal */} - <Modal.Body> + {/* this modal is used show send mail message and after send mail success message */} + <ModalUi + isOpen={isSend} + title={"Mails Sent"} + handleClose={() => { + setIsSend(false); + setSignerPos([]); + }} + > + <div style={{ height: "100%", padding: 20 }}> <p>You have successfully sent mails to all recipients!</p> {currentId && ( <p>Do you want to sign documents right now ?</p> )} - </Modal.Body> - - <Modal.Footer> + <div + style={{ + height: "1px", + backgroundColor: "#9f9f9f", + width: "100%", + marginTop: "15px", + marginBottom: "15px" + }} + ></div> {currentId ? ( <> <button @@ -1072,8 +1080,9 @@ function PlaceHolderSign() { Close </button> )} - </Modal.Footer> - </Modal> + </div> + </ModalUi> + {/* <ModalComponent isShow={isAlreadyPlace} type={"alreadyPlace"} /> */} <ModalComponent isShow={isShowEmail} diff --git a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js index 5176d72a5..2415e6d99 100644 --- a/microfrontends/SignDocuments/src/Component/recipientSignPdf.js +++ b/microfrontends/SignDocuments/src/Component/recipientSignPdf.js @@ -429,120 +429,122 @@ function EmbedPdfImage() { const pngUrl = xyPostion; - let pdfBase64; + // let pdfBase64; //checking if signature is only one then send image url in jpeg formate to server - if (xyPostion.length === 1 && xyPostion[0].pos.length === 1) { - if (isDocId) { - pdfBase64 = await getBase64FromUrl(url); - } else { - //embed document's object id to all pages in pdf document - await embedDocId(pdfDoc, docId, allPages); - pdfBase64 = await pdfDoc.saveAsBase64({ useObjectStreams: false }); - } + // if (xyPostion.length === 1 && xyPostion[0].pos.length === 1) { + // if (isDocId) { + // pdfBase64 = await getBase64FromUrl(url); + // } else { + // //embed document's object id to all pages in pdf document + // await embedDocId(pdfDoc, docId, allPages); + // pdfBase64 = await pdfDoc.saveAsBase64({ useObjectStreams: false }); + // } - 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; - const checkUrl = urlValidator(ImgUrl); + // 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; + // const checkUrl = urlValidator(ImgUrl); - //if default signature url then convert it in base 64 - if (checkUrl) { - ImgUrl = await getBase64FromIMG(ImgUrl + "?get"); - } - //function for convert signature png base64 url to jpeg base64 - convertPNGtoJPEG(ImgUrl) - .then((jpegBase64Data) => { - const removeBase64Fromjpeg = "data:image/jpeg;base64,"; - const newImgUrl = jpegBase64Data.replace( - removeBase64Fromjpeg, - "" - ); + // //if default signature url then convert it in base 64 + // if (checkUrl) { + // ImgUrl = await getBase64FromIMG(ImgUrl + "?get"); + // } + // //function for convert signature png base64 url to jpeg base64 + // convertPNGtoJPEG(ImgUrl) + // .then((jpegBase64Data) => { + // const removeBase64Fromjpeg = "data:image/jpeg;base64,"; + // const newImgUrl = jpegBase64Data.replace( + // removeBase64Fromjpeg, + // "" + // ); - //function for embed signature in pdf and get digital signature pdf - signPdfFun( - newImgUrl, - docId, - signerUserId, - pdfOriginalWidth, - xyPostion, - containerWH, - setIsAlert, - data, - pdfBase64, - pageNo - ) - .then((res) => { - if (res && res.status === "success") { - getDocumentDetails(); - } else { - setIsAlert({ - isShow: true, - alertMessage: "something went wrong" - }); - } - }) - .catch((err) => { - setIsAlert({ - isShow: true, - alertMessage: "something went wrong" - }); - }); - }) - .catch((error) => { - setIsAlert({ - isShow: true, - alertMessage: "something went wrong" - }); - }); - }); - } - } - //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 + // //function for embed signature in pdf and get digital signature pdf + // signPdfFun( + // newImgUrl, + // docId, + // signerUserId, + // pdfOriginalWidth, + // xyPostion, + // containerWH, + // setIsAlert, + // data, + // pdfBase64, + // pageNo + // ) + // .then((res) => { + // if (res && res.status === "success") { + // getDocumentDetails(); + // } else { + // setIsAlert({ + // isShow: true, + // alertMessage: "something went wrong" + // }); + // } + // }) + // .catch((err) => { + // setIsAlert({ + // isShow: true, + // alertMessage: "something went wrong" + // }); + // }); + // }) + // .catch((error) => { + // setIsAlert({ + // isShow: true, + // alertMessage: "something went wrong" + // }); + // }); + // }); + // } + // } + // //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 + if (!isDocId) { await embedDocId(pdfDoc, docId, allPages); - //embed multi signature in pdf - const pdfBytes = await multiSignEmbed( - pngUrl, - pdfDoc, - pdfOriginalWidth, - flag, - containerWH - ); + } + //embed multi signature in pdf + const pdfBytes = await multiSignEmbed( + pngUrl, + pdfDoc, + pdfOriginalWidth, + flag, + containerWH + ); - //function for embed signature in pdf and get digital signature pdf - 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) { + //function for embed signature in pdf and get digital signature pdf + 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([]); } + setIsSignPad(false); + setXyPostion([]); + // } } //function for change page diff --git a/microfrontends/SignDocuments/src/utils/Utils.js b/microfrontends/SignDocuments/src/utils/Utils.js index 573f29eb4..2d4ff8706 100644 --- a/microfrontends/SignDocuments/src/utils/Utils.js +++ b/microfrontends/SignDocuments/src/utils/Utils.js @@ -767,7 +767,7 @@ export const handleSignYourselfImageResize = ( key, xyPostion, index, - setXyPostion, + setXyPostion ) => { const updateFilter = xyPostion[index].pos.filter( (data) => data.key === key && data.Width && data.Height @@ -838,120 +838,120 @@ export const signPdfFun = async ( ) => { 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; + // 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) => { - 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) { - const x = resizePos * (pos.scale / scale); - return x * scale; - } else { - const x = resizePos / 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 = resizePos * pos.scale; - return x; - } else { - return resizePos; - } - } - }; - const yBottom = (pos) => { - const resizePos = pos.yBottom; - let yPosition; - //checking both condition mobile and desktop view + // 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) { + // const x = resizePos * (pos.scale / scale); + // return x * scale; + // } else { + // const x = resizePos / 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 = resizePos * pos.scale; + // return x; + // } else { + // return resizePos; + // } + // } + // }; + // const yBottom = (pos) => { + // const resizePos = pos.yBottom; + // 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 = resizePos * (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 = resizePos / scale; - 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 = resizePos * pos.scale; - 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 - ? resizePos - height - : pos.firstYPos - ? resizePos - height + pos.firstYPos - : resizePos - height; - return yPosition; - } - } - }; + // 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 = resizePos * (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 = resizePos / scale; + // 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 = resizePos * pos.scale; + // 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 + // ? resizePos - height + // : pos.firstYPos + // ? resizePos - height + pos.firstYPos + // : resizePos - height; + // return yPosition; + // } + // } + // }; - singleSign = { - pdfFile: pdfBase64Url, - docId: documentId, - userId: signerObjectId, - sign: { - Base64: base64Url, - Left: xPos(xyPosData), - Bottom: yBottom(xyPosData), - Width: placeholderWidth(xyPosData, scale), - Height: placeholderHeight(xyPosData, scale), - Page: pageNo - } - }; - } else if ( - signerData && - signerData.length > 0 && - signerData[0].pos.length > 0 - ) { - singleSign = { - pdfFile: base64Url, - docId: documentId, - userId: signerObjectId - }; - } + // singleSign = { + // pdfFile: pdfBase64Url, + // docId: documentId, + // userId: signerObjectId, + // sign: { + // Base64: base64Url, + // Left: xPos(xyPosData), + // Bottom: yBottom(xyPosData), + // Width: placeholderWidth(xyPosData, scale), + // Height: placeholderHeight(xyPosData, scale), + // Page: pageNo + // } + // }; + // } else if ( + // signerData && + // signerData.length > 0 && + // signerData[0].pos.length > 0 + // ) { + singleSign = { + pdfFile: base64Url, + docId: documentId, + userId: signerObjectId + // }; + }; const response = await axios .post(`${localStorage.getItem("baseUrl")}functions/signPdf`, singleSign, { @@ -1048,7 +1048,6 @@ export const getFirstLetter = (name) => { return firstLetter; }; - export const darkenColor = (color, factor) => { // Remove '#' from the color code and parse it to get RGB values const hex = color.replace("#", ""); @@ -1066,5 +1065,3 @@ export const darkenColor = (color, factor) => { .toString(16) .padStart(6, "0")}`; }; - -