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; +};