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) => {