From 1b4e5247addfd2c8a0d78f083893f020b5707aca Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Fri, 16 Aug 2024 14:10:29 +0530 Subject: [PATCH 01/12] feat: implement PDF page rotation feature --- apps/OpenSign/src/components/pdf/PdfZoom.js | 53 +++++++++++++- .../src/components/pdf/RenderAllPdfPage.js | 8 ++- apps/OpenSign/src/components/pdf/RenderPdf.js | 18 ++++- apps/OpenSign/src/constant/Utils.js | 55 +++++++++++++-- apps/OpenSign/src/pages/PdfRequestFiles.js | 69 +++++++++++++------ apps/OpenSign/src/pages/PlaceHolderSign.js | 33 ++++++++- apps/OpenSign/src/pages/SignyourselfPdf.js | 16 +++++ .../OpenSign/src/pages/TemplatePlaceholder.js | 30 +++++++- 8 files changed, 242 insertions(+), 40 deletions(-) diff --git a/apps/OpenSign/src/components/pdf/PdfZoom.js b/apps/OpenSign/src/components/pdf/PdfZoom.js index c12868e01..4a0c54927 100644 --- a/apps/OpenSign/src/components/pdf/PdfZoom.js +++ b/apps/OpenSign/src/components/pdf/PdfZoom.js @@ -1,5 +1,6 @@ import React from "react"; import { useTranslation } from "react-i18next"; +import { rotatePdfPage } from "../../constant/Utils"; function PdfZoom(props) { const { t } = useTranslation(); @@ -17,9 +18,40 @@ function PdfZoom(props) { props.setZoomPercent(props.zoomPercent - 10); } }; - const handleReset = () => { - props.setScale(1); - props.setZoomPercent(0); + const handleRotationFun = async (rotateDegree) => { + const urlDetails = await rotatePdfPage( + props.file, + rotateDegree, + props.pageNumber - 1, + props.pdfRotateBase64 + ); + props.setPdfArrayBuffer(urlDetails.arrayBuffer); + props.setPdfRotatese64(urlDetails.base64); + }; + + const handleRotateRight = () => { + let rotateDegree; + if (props.rotateDegree < 360) { + rotateDegree = props.rotateDegree + 90; + props.setRotateDegree(rotateDegree); + handleRotationFun(rotateDegree); + } else { + rotateDegree = 90; + props.setRotateDegree(rotateDegree); + handleRotationFun(rotateDegree); + } + }; + const handleRotateLeft = () => { + let rotateDegree; + if (props.rotateDegree > -360) { + rotateDegree = props.rotateDegree - 90; + props.setRotateDegree(rotateDegree); + handleRotationFun(rotateDegree); + } else { + rotateDegree = -90; + props.setRotateDegree(rotateDegree); + handleRotationFun(rotateDegree); + } }; return ( // md:mt-[41px] xl:mt-[63px]mt=[] @@ -32,11 +64,26 @@ function PdfZoom(props) { handleRotateRight()} + title={t("Rotate right")} + > + + + + {/* + */} + handleRotateLeft()} + > +
@@ -78,7 +81,7 @@ function RenderAllPdfPage({ {Array.from(new Array(allPages), (el, index) => (
{ setPageNumber(index + 1); + setRotateDegree(0); if (setSignBtnPosition) { setSignBtnPosition([]); } diff --git a/apps/OpenSign/src/components/pdf/RenderPdf.js b/apps/OpenSign/src/components/pdf/RenderPdf.js index 4e1fe3fe2..dc9ec6386 100644 --- a/apps/OpenSign/src/components/pdf/RenderPdf.js +++ b/apps/OpenSign/src/components/pdf/RenderPdf.js @@ -61,7 +61,8 @@ function RenderPdf({ scale, setIsSelectId, ispublicTemplate, - handleUserDetails + handleUserDetails, + pdfRotateBase64 }) { const { t } = useTranslation(); const isMobile = window.innerWidth < 767; @@ -248,6 +249,8 @@ function RenderPdf({ ); } }; + const pdfDataBase64 = `data:application/pdf;base64,${pdfRotateBase64}`; + return ( <> {successEmail && ( @@ -405,7 +408,11 @@ function RenderPdf({ setSelectWidgetId(""); } }} - file={pdfDetails[0]?.SignedUrl || pdfDetails[0]?.URL} + file={ + (pdfRotateBase64 && pdfDataBase64) || + pdfDetails[0]?.SignedUrl || + pdfDetails[0].URL + } > { }; } }; + +//function to rotate pdf page +export async function rotatePdfPage( + url, + rotateDegree, + pageNumber, + pdfRotateBase64 +) { + let file; + if (pdfRotateBase64) { + file = base64ToArrayBuffer(pdfRotateBase64); + } else { + file = await convertPdfArrayBuffer(pdfRotateBase64 || url); + } + // Load the existing PDF + const pdfDoc = await PDFDocument.load(file); + // Get the page according to page number + const page = pdfDoc.getPage(pageNumber); + // Rotate the page + page.setRotation(degrees(rotateDegree)); + // Serialize the PDFDocument to bytes (a Uint8Array) + const base64 = await pdfDoc.saveAsBase64({ useObjectStreams: false }); + // console.log("pdfBytes",base64) + //convert base64 to arraybuffer + const arrayBuffer = base64ToArrayBuffer(base64); + return { arrayBuffer: arrayBuffer, base64: base64 }; +} +function base64ToArrayBuffer(base64) { + // Decode the base64 string to a binary string + const binaryString = atob(base64); + // Create a new ArrayBuffer with the same length as the binary string + const len = binaryString.length; + const bytes = new Uint8Array(len); + // Convert the binary string to a byte array + for (let i = 0; i < len; i++) { + bytes[i] = binaryString.charCodeAt(i); + } + // Return the ArrayBuffer + return bytes.buffer; +} diff --git a/apps/OpenSign/src/pages/PdfRequestFiles.js b/apps/OpenSign/src/pages/PdfRequestFiles.js index e8a422fad..d3dbbcf43 100644 --- a/apps/OpenSign/src/pages/PdfRequestFiles.js +++ b/apps/OpenSign/src/pages/PdfRequestFiles.js @@ -132,6 +132,9 @@ function PdfRequestFiles(props) { const [res, setRes] = useState({}); const [documentId, setDocumentId] = useState(""); const [isPublicContact, setIsPublicContact] = useState(false); + const [rotateDegree, setRotateDegree] = useState(0); + const [pdfRotateBase64, setPdfRotatese64] = useState(""); + const [pdfArrayBuffer, setPdfArrayBuffer] = useState(""); const isHeader = useSelector((state) => state.showHeader); const divRef = useRef(null); @@ -298,6 +301,20 @@ function PdfRequestFiles(props) { : []; if (documentData && documentData.length > 0) { + const url = + documentData[0] && + (documentData[0]?.SignedUrl || documentData[0]?.URL); + if (url) { + //convert document url in array buffer format to use embed widgets in pdf using pdf-lib + const arrayBuffer = await convertPdfArrayBuffer(url); + if (arrayBuffer === "Error") { + setHandleError(t("something-went-wrong-mssg")); + } else { + setPdfArrayBuffer(arrayBuffer); + } + } else { + setHandleError(t("something-went-wrong-mssg")); + } setIsPublicTemplate(true); const getPublicRole = documentData[0]?.PublicRole[0]; const getUniqueIdDetails = documentData[0]?.Placeholders.find( @@ -361,6 +378,20 @@ function PdfRequestFiles(props) { //getting document details const documentData = await contractDocument(documentId || docId); if (documentData && documentData.length > 0) { + const url = + documentData[0] && + (documentData[0]?.SignedUrl || documentData[0]?.URL); + if (url) { + //convert document url in array buffer format to use embed widgets in pdf using pdf-lib + const arrayBuffer = await convertPdfArrayBuffer(url); + if (arrayBuffer === "Error") { + setHandleError(t("something-went-wrong-mssg")); + } else { + setPdfArrayBuffer(arrayBuffer); + } + } else { + setHandleError(t("something-went-wrong-mssg")); + } setExtUserId(documentData[0]?.ExtUserPtr?.objectId); const isCompleted = documentData[0].IsCompleted && documentData[0].IsCompleted; @@ -643,6 +674,7 @@ function PdfRequestFiles(props) { } }; + console.log("base64", pdfRotateBase64); //function for embed signature or image url in pdf async function embedWidgetsData() { //for emailVerified data checking first in localstorage @@ -818,30 +850,9 @@ function PdfRequestFiles(props) { setIsUiLoading(true); // `widgets` is Used to return widgets details with page number of current user const widgets = checkUser?.[0]?.placeHolder; - let pdfArrBuffer; - //`contractDocument` function used to get updated SignedUrl - //resolved issue of sign document by multiple signers simultaneously - const documentData = await contractDocument(documentId); - if (documentData && documentData.length > 0) { - const url = documentData[0]?.SignedUrl || documentData[0]?.URL; - //convert document url in array buffer format to use embed widgets in pdf using pdf-lib - const arrayBuffer = await convertPdfArrayBuffer(url); - if (arrayBuffer === "Error") { - setHandleError(t("invalid-document")); - } else { - pdfArrBuffer = arrayBuffer; - } - } else if ( - documentData === "Error: Something went wrong!" || - (documentData.result && documentData.result.error) - ) { - setHandleError(t("something-went-wrong-mssg")); - } else { - setHandleError(t("document-not-found")); - } // Load a PDFDocument from the existing PDF bytes - const existingPdfBytes = pdfArrBuffer; + const existingPdfBytes = pdfArrayBuffer; try { const pdfDoc = await PDFDocument.load(existingPdfBytes); const isSignYourSelfFlow = false; @@ -1111,6 +1122,7 @@ function PdfRequestFiles(props) { //function for change page function changePage(offset) { setPageNumber((prevPageNumber) => prevPageNumber + offset); + setRotateDegree(0); } //function for image upload or update @@ -1911,6 +1923,8 @@ function PdfRequestFiles(props) { setPageNumber={setPageNumber} pageNumber={pageNumber} containerWH={containerWH} + setRotateDegree={setRotateDegree} + pdfRotateBase64={pdfRotateBase64} /> {/* pdf render view */}
@@ -1920,6 +1934,16 @@ function PdfRequestFiles(props) { containerWH={containerWH} setZoomPercent={setZoomPercent} zoomPercent={zoomPercent} + setRotateDegree={setRotateDegree} + rotateDegree={rotateDegree} + file={ + pdfDetails[0] && + (pdfDetails[0].SignedUrl || pdfDetails[0].URL) + } + setPdfArrayBuffer={setPdfArrayBuffer} + setPdfRotatese64={setPdfRotatese64} + pageNumber={pageNumber} + pdfRotateBase64={pdfRotateBase64} />
{/* this modal is used show this document is already sign */} @@ -2108,6 +2132,7 @@ function PdfRequestFiles(props) { uniqueId={uniqueId} ispublicTemplate={isPublicTemplate} handleUserDetails={handleUserDetails} + pdfRotateBase64={pdfRotateBase64} /> )}
diff --git a/apps/OpenSign/src/pages/PlaceHolderSign.js b/apps/OpenSign/src/pages/PlaceHolderSign.js index 3b8c99634..59cbeb693 100644 --- a/apps/OpenSign/src/pages/PlaceHolderSign.js +++ b/apps/OpenSign/src/pages/PlaceHolderSign.js @@ -141,6 +141,8 @@ function PlaceHolderSign() { const [isCustomize, setIsCustomize] = useState(false); const [zoomPercent, setZoomPercent] = useState(0); const [scale, setScale] = useState(1); + const [rotateDegree, setRotateDegree] = useState(0); + const [pdfRotateBase64, setPdfRotatese64] = useState(""); const isMobile = window.innerWidth < 767; const [, drop] = useDrop({ accept: "BOX", @@ -805,6 +807,7 @@ function PlaceHolderSign() { function changePage(offset) { setSignBtnPosition([]); setPageNumber((prevPageNumber) => prevPageNumber + offset); + setRotateDegree(0); } //function for capture position on hover or touch widgets @@ -853,7 +856,7 @@ function PlaceHolderSign() { }); const isSignYourSelfFlow = false; try { - const pdfBytes = await multiSignEmbed( + const pdfBase64 = await multiSignEmbed( placeholder, pdfDoc, isSignYourSelfFlow, @@ -863,18 +866,29 @@ function PlaceHolderSign() { ); const fileName = sanitizeFileName(pdfDetails[0].Name) + ".pdf"; - const pdfFile = new Parse.File(fileName, { base64: pdfBytes }); + const pdfFile = new Parse.File(fileName, { base64: pdfBase64 }); // Save the Parse File if needed const pdfData = await pdfFile.save(); const pdfUrl = pdfData.url(); const tenantId = localStorage.getItem("TenantId"); - const buffer = atob(pdfBytes); + const buffer = atob(pdfBase64); SaveFileSize(buffer.length, pdfUrl, tenantId); return pdfUrl; } catch (e) { console.log("error", e); } + } else if (pdfRotateBase64) { + const fileName = sanitizeFileName(pdfDetails[0].Name) + ".pdf"; + const pdfFile = new Parse.File(fileName, { base64: pdfRotateBase64 }); + + // Save the Parse File if needed + const pdfData = await pdfFile.save(); + const pdfUrl = pdfData.url(); + const tenantId = localStorage.getItem("TenantId"); + const buffer = atob(pdfRotateBase64); + SaveFileSize(buffer.length, pdfUrl, tenantId); + return pdfUrl; } else { return pdfDetails[0].URL; } @@ -1739,6 +1753,8 @@ function PlaceHolderSign() { setPageNumber={setPageNumber} setSignBtnPosition={setSignBtnPosition} pageNumber={pageNumber} + setRotateDegree={setRotateDegree} + pdfRotateBase64={pdfRotateBase64} /> {/* pdf render view */}
@@ -1748,6 +1764,16 @@ function PlaceHolderSign() { containerWH={containerWH} setZoomPercent={setZoomPercent} zoomPercent={zoomPercent} + setRotateDegree={setRotateDegree} + rotateDegree={rotateDegree} + file={ + pdfDetails[0] && + (pdfDetails[0].SignedUrl || pdfDetails[0].URL) + } + setPdfArrayBuffer={setPdfArrayBuffer} + setPdfRotatese64={setPdfRotatese64} + pageNumber={pageNumber} + pdfRotateBase64={pdfRotateBase64} />
{/* this modal is used show alert set placeholder for all signers before send mail */} @@ -2025,6 +2051,7 @@ function PlaceHolderSign() { setScale={setScale} scale={scale} setIsSelectId={setIsSelectId} + pdfRotateBase64={pdfRotateBase64} /> )}
diff --git a/apps/OpenSign/src/pages/SignyourselfPdf.js b/apps/OpenSign/src/pages/SignyourselfPdf.js index 20b1b58e1..f8bc6d573 100644 --- a/apps/OpenSign/src/pages/SignyourselfPdf.js +++ b/apps/OpenSign/src/pages/SignyourselfPdf.js @@ -123,6 +123,8 @@ function SignYourSelf() { const [zoomPercent, setZoomPercent] = useState(0); const isHeader = useSelector((state) => state.showHeader); const [scale, setScale] = useState(1); + const [rotateDegree, setRotateDegree] = useState(0); + const [pdfRotateBase64, setPdfRotatese64] = useState(""); const divRef = useRef(null); const nodeRef = useRef(null); const [, drop] = useDrop({ @@ -862,6 +864,7 @@ function SignYourSelf() { function changePage(offset) { setSignBtnPosition([]); setPageNumber((prevPageNumber) => prevPageNumber + offset); + setRotateDegree(0); } //function for image upload or update const onImageChange = (event) => { @@ -1213,6 +1216,8 @@ function SignYourSelf() { setSignBtnPosition={setSignBtnPosition} pageNumber={pageNumber} containerWH={containerWH} + setRotateDegree={setRotateDegree} + pdfRotateBase64={pdfRotateBase64} />
)}
diff --git a/apps/OpenSign/src/pages/TemplatePlaceholder.js b/apps/OpenSign/src/pages/TemplatePlaceholder.js index 18c350ec8..3dc2b9258 100644 --- a/apps/OpenSign/src/pages/TemplatePlaceholder.js +++ b/apps/OpenSign/src/pages/TemplatePlaceholder.js @@ -26,7 +26,8 @@ import { radioButtonWidget, fetchSubscription, getContainerScale, - openInNewTab + openInNewTab, + convertPdfArrayBuffer } from "../constant/Utils"; import RenderPdf from "../components/pdf/RenderPdf"; import "../styles/AddUser.css"; @@ -93,6 +94,9 @@ const TemplatePlaceholder = () => { const [isNameModal, setIsNameModal] = useState(false); const [isTextSetting, setIsTextSetting] = useState(false); const [pdfLoad, setPdfLoad] = useState(false); + const [rotateDegree, setRotateDegree] = useState(0); + const [pdfRotateBase64, setPdfRotatese64] = useState(""); + const [pdfArrayBuffer, setPdfArrayBuffer] = useState(""); const color = [ "#93a3db", "#e6c3db", @@ -230,6 +234,18 @@ const TemplatePlaceholder = () => { : []; if (documentData && documentData.length > 0) { + const url = documentData[0] && documentData[0]?.URL; + if (url) { + //convert document url in array buffer format to use embed widgets in pdf using pdf-lib + const arrayBuffer = await convertPdfArrayBuffer(url); + if (arrayBuffer === "Error") { + setHandleError(t("something-went-wrong-mssg")); + } else { + setPdfArrayBuffer(arrayBuffer); + } + } else { + setHandleError(t("something-went-wrong-mssg")); + } if (isEnableSubscription) { checkIsSubscribed(documentData[0]?.ExtUserPtr?.Email); } @@ -691,6 +707,7 @@ const TemplatePlaceholder = () => { function changePage(offset) { setSignBtnPosition([]); setPageNumber((prevPageNumber) => prevPageNumber + offset); + setRotateDegree(0); } //function for capture position on hover or touch widgets @@ -1321,6 +1338,16 @@ const TemplatePlaceholder = () => { containerWH={containerWH} setZoomPercent={setZoomPercent} zoomPercent={zoomPercent} + setRotateDegree={setRotateDegree} + rotateDegree={rotateDegree} + file={ + pdfDetails[0] && + (pdfDetails[0].SignedUrl || pdfDetails[0].URL) + } + setPdfArrayBuffer={setPdfArrayBuffer} + setPdfRotatese64={setPdfRotatese64} + pageNumber={pageNumber} + pdfRotateBase64={pdfRotateBase64} />
{/* this modal is used show alert set placeholder for all signers before send mail */} @@ -1496,6 +1523,7 @@ const TemplatePlaceholder = () => { setScale={setScale} scale={scale} setIsSelectId={setIsSelectId} + pdfRotateBase64={pdfRotateBase64} /> )}
From dda0e6d6763fa5565942523f20947e4a1c6d9b9c Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Fri, 16 Aug 2024 17:11:51 +0530 Subject: [PATCH 02/12] fix: handle pdfRequest sign flow rotate pdf page not allowed --- apps/OpenSign/src/components/pdf/PdfZoom.js | 69 ++++++------------- .../src/components/pdf/RenderAllPdfPage.js | 2 - apps/OpenSign/src/components/pdf/RenderPdf.js | 1 - apps/OpenSign/src/constant/Utils.js | 54 +++++++++++---- apps/OpenSign/src/pages/PdfRequestFiles.js | 18 +---- apps/OpenSign/src/pages/PlaceHolderSign.js | 46 +++++-------- apps/OpenSign/src/pages/SignyourselfPdf.js | 5 -- .../OpenSign/src/pages/TemplatePlaceholder.js | 35 ++++------ 8 files changed, 92 insertions(+), 138 deletions(-) diff --git a/apps/OpenSign/src/components/pdf/PdfZoom.js b/apps/OpenSign/src/components/pdf/PdfZoom.js index 4a0c54927..51aee5ad0 100644 --- a/apps/OpenSign/src/components/pdf/PdfZoom.js +++ b/apps/OpenSign/src/components/pdf/PdfZoom.js @@ -18,6 +18,7 @@ function PdfZoom(props) { props.setZoomPercent(props.zoomPercent - 10); } }; + //`handleRotationFun` function is used to roatate pdf particular page const handleRotationFun = async (rotateDegree) => { const urlDetails = await rotatePdfPage( props.file, @@ -28,34 +29,8 @@ function PdfZoom(props) { props.setPdfArrayBuffer(urlDetails.arrayBuffer); props.setPdfRotatese64(urlDetails.base64); }; - - const handleRotateRight = () => { - let rotateDegree; - if (props.rotateDegree < 360) { - rotateDegree = props.rotateDegree + 90; - props.setRotateDegree(rotateDegree); - handleRotationFun(rotateDegree); - } else { - rotateDegree = 90; - props.setRotateDegree(rotateDegree); - handleRotationFun(rotateDegree); - } - }; - const handleRotateLeft = () => { - let rotateDegree; - if (props.rotateDegree > -360) { - rotateDegree = props.rotateDegree - 90; - props.setRotateDegree(rotateDegree); - handleRotationFun(rotateDegree); - } else { - rotateDegree = -90; - props.setRotateDegree(rotateDegree); - handleRotationFun(rotateDegree); - } - }; return ( - // md:mt-[41px] xl:mt-[63px]mt=[] - + - handleRotateRight()} - title={t("Rotate right")} - > - - - - {/* - - */} - handleRotateLeft()} - > - - + {!props?.isDisableRotate && ( + <> + handleRotationFun(90)} + title={t("Rotate right")} + > + + + handleRotationFun(-90)} + > + + + + )} { setPageNumber(index + 1); - setRotateDegree(0); if (setSignBtnPosition) { setSignBtnPosition([]); } diff --git a/apps/OpenSign/src/components/pdf/RenderPdf.js b/apps/OpenSign/src/components/pdf/RenderPdf.js index dc9ec6386..39d1bece2 100644 --- a/apps/OpenSign/src/components/pdf/RenderPdf.js +++ b/apps/OpenSign/src/components/pdf/RenderPdf.js @@ -600,7 +600,6 @@ function RenderPdf({ } > { const textContent = documentId && `OpenSign™ DocumentId: ${documentId} `; const pages = pdfDoc.getPages(); const page = pages[i]; - page.drawText(textContent, { - x: 10, - y: page.getHeight() - 10, - size: fontSize, + const getObj = compensateRotation( + page.getRotation().angle, + 10, + 5, + 1, + page.getSize(), + fontSize, + rgb(0.5, 0.5, 0.5), font, - color: rgb(0.5, 0.5, 0.5) - }); + page + ); + page.drawText(textContent, getObj); } }; @@ -2324,23 +2329,33 @@ export async function rotatePdfPage( pdfRotateBase64 ) { let file; + + //condition to handle pdf base64 in arrayBuffer format if (pdfRotateBase64) { file = base64ToArrayBuffer(pdfRotateBase64); } else { - file = await convertPdfArrayBuffer(pdfRotateBase64 || url); + //condition to handle pdf url in arrayBuffer format + file = await convertPdfArrayBuffer(url); } // Load the existing PDF const pdfDoc = await PDFDocument.load(file); // Get the page according to page number const page = pdfDoc.getPage(pageNumber); - // Rotate the page - page.setRotation(degrees(rotateDegree)); - // Serialize the PDFDocument to bytes (a Uint8Array) - const base64 = await pdfDoc.saveAsBase64({ useObjectStreams: false }); - // console.log("pdfBytes",base64) - //convert base64 to arraybuffer - const arrayBuffer = base64ToArrayBuffer(base64); - return { arrayBuffer: arrayBuffer, base64: base64 }; + //get current page rotation angle + const currentRotation = page.getRotation().angle; + // Apply the rotation in the counterclockwise direction + let newRotation = (currentRotation + rotateDegree) % 360; + // Adjust for negative angles to keep within 0-359 range + if (newRotation < 0) { + newRotation += 360; + } + page.setRotation(degrees(newRotation)); + const pdfbase64 = await pdfDoc.saveAsBase64({ useObjectStreams: false }); + //convert base64 to arraybuffer is used in pdf-lib + //pdfbase64 is used to show pdf rotated format + const arrayBuffer = base64ToArrayBuffer(pdfbase64); + //`base64` is used to show pdf + return { arrayBuffer: arrayBuffer, base64: pdfbase64 }; } function base64ToArrayBuffer(base64) { // Decode the base64 string to a binary string @@ -2355,3 +2370,12 @@ function base64ToArrayBuffer(base64) { // Return the ArrayBuffer return bytes.buffer; } + +export const convertBase64ToFile = async (pdfName, pdfBase64) => { + const fileName = sanitizeFileName(pdfName) + ".pdf"; + const pdfFile = new Parse.File(fileName, { base64: pdfBase64 }); + // Save the Parse File if needed + const pdfData = await pdfFile.save(); + const pdfUrl = pdfData.url(); + return pdfUrl; +}; diff --git a/apps/OpenSign/src/pages/PdfRequestFiles.js b/apps/OpenSign/src/pages/PdfRequestFiles.js index d3dbbcf43..e27ee68b1 100644 --- a/apps/OpenSign/src/pages/PdfRequestFiles.js +++ b/apps/OpenSign/src/pages/PdfRequestFiles.js @@ -132,8 +132,6 @@ function PdfRequestFiles(props) { const [res, setRes] = useState({}); const [documentId, setDocumentId] = useState(""); const [isPublicContact, setIsPublicContact] = useState(false); - const [rotateDegree, setRotateDegree] = useState(0); - const [pdfRotateBase64, setPdfRotatese64] = useState(""); const [pdfArrayBuffer, setPdfArrayBuffer] = useState(""); const isHeader = useSelector((state) => state.showHeader); const divRef = useRef(null); @@ -674,7 +672,6 @@ function PdfRequestFiles(props) { } }; - console.log("base64", pdfRotateBase64); //function for embed signature or image url in pdf async function embedWidgetsData() { //for emailVerified data checking first in localstorage @@ -1122,7 +1119,6 @@ function PdfRequestFiles(props) { //function for change page function changePage(offset) { setPageNumber((prevPageNumber) => prevPageNumber + offset); - setRotateDegree(0); } //function for image upload or update @@ -1923,8 +1919,6 @@ function PdfRequestFiles(props) { setPageNumber={setPageNumber} pageNumber={pageNumber} containerWH={containerWH} - setRotateDegree={setRotateDegree} - pdfRotateBase64={pdfRotateBase64} /> {/* pdf render view */}
@@ -1934,16 +1928,7 @@ function PdfRequestFiles(props) { containerWH={containerWH} setZoomPercent={setZoomPercent} zoomPercent={zoomPercent} - setRotateDegree={setRotateDegree} - rotateDegree={rotateDegree} - file={ - pdfDetails[0] && - (pdfDetails[0].SignedUrl || pdfDetails[0].URL) - } - setPdfArrayBuffer={setPdfArrayBuffer} - setPdfRotatese64={setPdfRotatese64} - pageNumber={pageNumber} - pdfRotateBase64={pdfRotateBase64} + isDisableRotate={true} />
{/* this modal is used show this document is already sign */} @@ -2132,7 +2117,6 @@ function PdfRequestFiles(props) { uniqueId={uniqueId} ispublicTemplate={isPublicTemplate} handleUserDetails={handleUserDetails} - pdfRotateBase64={pdfRotateBase64} /> )}
diff --git a/apps/OpenSign/src/pages/PlaceHolderSign.js b/apps/OpenSign/src/pages/PlaceHolderSign.js index 59cbeb693..f1741a8b1 100644 --- a/apps/OpenSign/src/pages/PlaceHolderSign.js +++ b/apps/OpenSign/src/pages/PlaceHolderSign.js @@ -35,7 +35,8 @@ import { fetchSubscription, convertPdfArrayBuffer, getContainerScale, - openInNewTab + openInNewTab, + convertBase64ToFile } from "../constant/Utils"; import RenderPdf from "../components/pdf/RenderPdf"; import { useNavigate } from "react-router-dom"; @@ -141,7 +142,7 @@ function PlaceHolderSign() { const [isCustomize, setIsCustomize] = useState(false); const [zoomPercent, setZoomPercent] = useState(0); const [scale, setScale] = useState(1); - const [rotateDegree, setRotateDegree] = useState(0); + const [pdfRotateBase64, setPdfRotatese64] = useState(""); const isMobile = window.innerWidth < 767; const [, drop] = useDrop({ @@ -807,7 +808,6 @@ function PlaceHolderSign() { function changePage(offset) { setSignBtnPosition([]); setPageNumber((prevPageNumber) => prevPageNumber + offset); - setRotateDegree(0); } //function for capture position on hover or touch widgets @@ -840,11 +840,6 @@ function PlaceHolderSign() { const handleMouseLeave = () => { setSignBtnPosition([xySignature]); }; - - function sanitizeFileName(fileName) { - // Remove spaces and invalid characters - return fileName.replace(/[^a-zA-Z0-9._-]/g, ""); - } //embed prefill label widget data const embedPrefilllData = async () => { const prefillExist = signerPos.filter((data) => data.Role === "prefill"); @@ -864,31 +859,27 @@ function PlaceHolderSign() { pdfOriginalWH, containerWH ); - - const fileName = sanitizeFileName(pdfDetails[0].Name) + ".pdf"; - const pdfFile = new Parse.File(fileName, { base64: pdfBase64 }); - - // Save the Parse File if needed - const pdfData = await pdfFile.save(); - const pdfUrl = pdfData.url(); + const pdfUrl = await convertBase64ToFile(pdfDetails[0].Name, pdfBase64); const tenantId = localStorage.getItem("TenantId"); const buffer = atob(pdfBase64); SaveFileSize(buffer.length, pdfUrl, tenantId); return pdfUrl; } catch (e) { - console.log("error", e); + console.log("error to convertBase64ToFile in placeholder flow", e); } } else if (pdfRotateBase64) { - const fileName = sanitizeFileName(pdfDetails[0].Name) + ".pdf"; - const pdfFile = new Parse.File(fileName, { base64: pdfRotateBase64 }); - - // Save the Parse File if needed - const pdfData = await pdfFile.save(); - const pdfUrl = pdfData.url(); - const tenantId = localStorage.getItem("TenantId"); - const buffer = atob(pdfRotateBase64); - SaveFileSize(buffer.length, pdfUrl, tenantId); - return pdfUrl; + try { + const pdfUrl = await convertBase64ToFile( + pdfDetails[0].Name, + pdfRotateBase64 + ); + const tenantId = localStorage.getItem("TenantId"); + const buffer = atob(pdfRotateBase64); + SaveFileSize(buffer.length, pdfUrl, tenantId); + return pdfUrl; + } catch (e) { + console.log("error to convertBase64ToFile in placeholder flow", e); + } } else { return pdfDetails[0].URL; } @@ -1753,7 +1744,6 @@ function PlaceHolderSign() { setPageNumber={setPageNumber} setSignBtnPosition={setSignBtnPosition} pageNumber={pageNumber} - setRotateDegree={setRotateDegree} pdfRotateBase64={pdfRotateBase64} /> {/* pdf render view */} @@ -1764,8 +1754,6 @@ function PlaceHolderSign() { containerWH={containerWH} setZoomPercent={setZoomPercent} zoomPercent={zoomPercent} - setRotateDegree={setRotateDegree} - rotateDegree={rotateDegree} file={ pdfDetails[0] && (pdfDetails[0].SignedUrl || pdfDetails[0].URL) diff --git a/apps/OpenSign/src/pages/SignyourselfPdf.js b/apps/OpenSign/src/pages/SignyourselfPdf.js index f8bc6d573..4707c4aac 100644 --- a/apps/OpenSign/src/pages/SignyourselfPdf.js +++ b/apps/OpenSign/src/pages/SignyourselfPdf.js @@ -123,7 +123,6 @@ function SignYourSelf() { const [zoomPercent, setZoomPercent] = useState(0); const isHeader = useSelector((state) => state.showHeader); const [scale, setScale] = useState(1); - const [rotateDegree, setRotateDegree] = useState(0); const [pdfRotateBase64, setPdfRotatese64] = useState(""); const divRef = useRef(null); const nodeRef = useRef(null); @@ -864,7 +863,6 @@ function SignYourSelf() { function changePage(offset) { setSignBtnPosition([]); setPageNumber((prevPageNumber) => prevPageNumber + offset); - setRotateDegree(0); } //function for image upload or update const onImageChange = (event) => { @@ -1216,7 +1214,6 @@ function SignYourSelf() { setSignBtnPosition={setSignBtnPosition} pageNumber={pageNumber} containerWH={containerWH} - setRotateDegree={setRotateDegree} pdfRotateBase64={pdfRotateBase64} />
@@ -1226,8 +1223,6 @@ function SignYourSelf() { containerWH={containerWH} setZoomPercent={setZoomPercent} zoomPercent={zoomPercent} - setRotateDegree={setRotateDegree} - rotateDegree={rotateDegree} file={ pdfDetails[0] && (pdfDetails[0].SignedUrl || pdfDetails[0].URL) diff --git a/apps/OpenSign/src/pages/TemplatePlaceholder.js b/apps/OpenSign/src/pages/TemplatePlaceholder.js index 3dc2b9258..c3442f9fb 100644 --- a/apps/OpenSign/src/pages/TemplatePlaceholder.js +++ b/apps/OpenSign/src/pages/TemplatePlaceholder.js @@ -27,7 +27,7 @@ import { fetchSubscription, getContainerScale, openInNewTab, - convertPdfArrayBuffer + convertBase64ToFile } from "../constant/Utils"; import RenderPdf from "../components/pdf/RenderPdf"; import "../styles/AddUser.css"; @@ -94,9 +94,7 @@ const TemplatePlaceholder = () => { const [isNameModal, setIsNameModal] = useState(false); const [isTextSetting, setIsTextSetting] = useState(false); const [pdfLoad, setPdfLoad] = useState(false); - const [rotateDegree, setRotateDegree] = useState(0); const [pdfRotateBase64, setPdfRotatese64] = useState(""); - const [pdfArrayBuffer, setPdfArrayBuffer] = useState(""); const color = [ "#93a3db", "#e6c3db", @@ -234,18 +232,6 @@ const TemplatePlaceholder = () => { : []; if (documentData && documentData.length > 0) { - const url = documentData[0] && documentData[0]?.URL; - if (url) { - //convert document url in array buffer format to use embed widgets in pdf using pdf-lib - const arrayBuffer = await convertPdfArrayBuffer(url); - if (arrayBuffer === "Error") { - setHandleError(t("something-went-wrong-mssg")); - } else { - setPdfArrayBuffer(arrayBuffer); - } - } else { - setHandleError(t("something-went-wrong-mssg")); - } if (isEnableSubscription) { checkIsSubscribed(documentData[0]?.ExtUserPtr?.Email); } @@ -707,7 +693,6 @@ const TemplatePlaceholder = () => { function changePage(offset) { setSignBtnPosition([]); setPageNumber((prevPageNumber) => prevPageNumber + offset); - setRotateDegree(0); } //function for capture position on hover or touch widgets @@ -748,6 +733,7 @@ const TemplatePlaceholder = () => { handleSaveTemplate(); } }; + const handleSaveTemplate = async () => { if (signersdata?.length) { const loadObj = { @@ -769,6 +755,17 @@ const TemplatePlaceholder = () => { } }); } + let pdfUrl = pdfDetails[0]?.URL; + if (pdfRotateBase64) { + try { + pdfUrl = await convertBase64ToFile( + pdfDetails[0].Name, + pdfRotateBase64 + ); + } catch (e) { + console.log("error to convertBase64ToFile in placeholder flow", e); + } + } try { const data = { Placeholders: signerPos, @@ -779,7 +776,8 @@ const TemplatePlaceholder = () => { SendinOrder: pdfDetails[0]?.SendinOrder || false, AutomaticReminders: pdfDetails[0]?.AutomaticReminders, RemindOnceInEvery: parseInt(pdfDetails[0]?.RemindOnceInEvery), - NextReminderDate: pdfDetails[0]?.NextReminderDate + NextReminderDate: pdfDetails[0]?.NextReminderDate, + URL: pdfUrl }; const updateTemplate = new Parse.Object("contracts_Template"); updateTemplate.id = templateId; @@ -1338,13 +1336,10 @@ const TemplatePlaceholder = () => { containerWH={containerWH} setZoomPercent={setZoomPercent} zoomPercent={zoomPercent} - setRotateDegree={setRotateDegree} - rotateDegree={rotateDegree} file={ pdfDetails[0] && (pdfDetails[0].SignedUrl || pdfDetails[0].URL) } - setPdfArrayBuffer={setPdfArrayBuffer} setPdfRotatese64={setPdfRotatese64} pageNumber={pageNumber} pdfRotateBase64={pdfRotateBase64} From cfb47f880e59a237202b216fdacec8fca4bd87a1 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Fri, 16 Aug 2024 17:25:58 +0530 Subject: [PATCH 03/12] fix: translate rotate icon title --- apps/OpenSign/public/locales/en/translation.json | 3 ++- apps/OpenSign/public/locales/fr/translation.json | 3 ++- apps/OpenSign/src/constant/Utils.js | 4 ++-- apps/OpenSign/src/script/locales/en/translation.json | 3 ++- apps/OpenSign/src/script/locales/fr/translation.json | 3 ++- 5 files changed, 10 insertions(+), 6 deletions(-) diff --git a/apps/OpenSign/public/locales/en/translation.json b/apps/OpenSign/public/locales/en/translation.json index 074d421be..8e7d59bc6 100644 --- a/apps/OpenSign/public/locales/en/translation.json +++ b/apps/OpenSign/public/locales/en/translation.json @@ -604,5 +604,6 @@ "Add-seats": "Add Seats", "user-name-exist": "user name already exist", "format": "format", - "select-date-format": "Select a date format" + "select-date-format": "Select a date format", + "rotate-right":"Rotate right" } diff --git a/apps/OpenSign/public/locales/fr/translation.json b/apps/OpenSign/public/locales/fr/translation.json index 88bfcfa6a..a6252a83e 100644 --- a/apps/OpenSign/public/locales/fr/translation.json +++ b/apps/OpenSign/public/locales/fr/translation.json @@ -603,5 +603,6 @@ "Select": "sélectionner", "Add-seats": "Ajouter des sièges", "format": "format", - "select-date-format": "Sélectionnez un format de date" + "select-date-format": "Sélectionnez un format de date", + "rotate-right" :"Faire pivoter à droite" } diff --git a/apps/OpenSign/src/constant/Utils.js b/apps/OpenSign/src/constant/Utils.js index d5a9c5655..c3fbaa93f 100644 --- a/apps/OpenSign/src/constant/Utils.js +++ b/apps/OpenSign/src/constant/Utils.js @@ -1656,8 +1656,8 @@ export const multiSignEmbed = async ( }); } const pdfBytes = await pdfDoc.saveAsBase64({ useObjectStreams: false }); - console.log("pdf", pdfBytes); - //return pdfBytes; + //console.log("pdf", pdfBytes); + return pdfBytes; }; // function for validating URLs diff --git a/apps/OpenSign/src/script/locales/en/translation.json b/apps/OpenSign/src/script/locales/en/translation.json index 074d421be..8e7d59bc6 100644 --- a/apps/OpenSign/src/script/locales/en/translation.json +++ b/apps/OpenSign/src/script/locales/en/translation.json @@ -604,5 +604,6 @@ "Add-seats": "Add Seats", "user-name-exist": "user name already exist", "format": "format", - "select-date-format": "Select a date format" + "select-date-format": "Select a date format", + "rotate-right":"Rotate right" } diff --git a/apps/OpenSign/src/script/locales/fr/translation.json b/apps/OpenSign/src/script/locales/fr/translation.json index 88bfcfa6a..cd087629c 100644 --- a/apps/OpenSign/src/script/locales/fr/translation.json +++ b/apps/OpenSign/src/script/locales/fr/translation.json @@ -603,5 +603,6 @@ "Select": "sélectionner", "Add-seats": "Ajouter des sièges", "format": "format", - "select-date-format": "Sélectionnez un format de date" + "select-date-format": "Sélectionnez un format de date", + "rotate-right": "Faire pivoter à droite" } From f97896f6a6dd5cd2d5438d460a3d094a1a1db1f3 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Fri, 16 Aug 2024 17:26:14 +0530 Subject: [PATCH 04/12] fix: translate rotate icon title --- apps/OpenSign/public/locales/en/translation.json | 3 ++- apps/OpenSign/public/locales/fr/translation.json | 3 ++- apps/OpenSign/src/components/pdf/PdfZoom.js | 4 ++-- apps/OpenSign/src/script/locales/en/translation.json | 3 ++- apps/OpenSign/src/script/locales/fr/translation.json | 3 ++- 5 files changed, 10 insertions(+), 6 deletions(-) diff --git a/apps/OpenSign/public/locales/en/translation.json b/apps/OpenSign/public/locales/en/translation.json index 8e7d59bc6..8330a6a04 100644 --- a/apps/OpenSign/public/locales/en/translation.json +++ b/apps/OpenSign/public/locales/en/translation.json @@ -605,5 +605,6 @@ "user-name-exist": "user name already exist", "format": "format", "select-date-format": "Select a date format", - "rotate-right":"Rotate right" + "rotate-right":"Rotate right", + "rotate-left":"Rotate left" } diff --git a/apps/OpenSign/public/locales/fr/translation.json b/apps/OpenSign/public/locales/fr/translation.json index a6252a83e..7114790d4 100644 --- a/apps/OpenSign/public/locales/fr/translation.json +++ b/apps/OpenSign/public/locales/fr/translation.json @@ -604,5 +604,6 @@ "Add-seats": "Ajouter des sièges", "format": "format", "select-date-format": "Sélectionnez un format de date", - "rotate-right" :"Faire pivoter à droite" + "rotate-right" :"Faire pivoter à droite", + "rotate-left" :"Faire pivoter à gauche" } diff --git a/apps/OpenSign/src/components/pdf/PdfZoom.js b/apps/OpenSign/src/components/pdf/PdfZoom.js index 51aee5ad0..178bac4f2 100644 --- a/apps/OpenSign/src/components/pdf/PdfZoom.js +++ b/apps/OpenSign/src/components/pdf/PdfZoom.js @@ -43,13 +43,13 @@ function PdfZoom(props) { handleRotationFun(90)} - title={t("Rotate right")} + title={t("rotate-right")} > handleRotationFun(-90)} > diff --git a/apps/OpenSign/src/script/locales/en/translation.json b/apps/OpenSign/src/script/locales/en/translation.json index 8e7d59bc6..90fde4716 100644 --- a/apps/OpenSign/src/script/locales/en/translation.json +++ b/apps/OpenSign/src/script/locales/en/translation.json @@ -605,5 +605,6 @@ "user-name-exist": "user name already exist", "format": "format", "select-date-format": "Select a date format", - "rotate-right":"Rotate right" + "rotate-right": "Rotate right", + "rotate-left": "Rotate left" } diff --git a/apps/OpenSign/src/script/locales/fr/translation.json b/apps/OpenSign/src/script/locales/fr/translation.json index cd087629c..bc8daf3ed 100644 --- a/apps/OpenSign/src/script/locales/fr/translation.json +++ b/apps/OpenSign/src/script/locales/fr/translation.json @@ -604,5 +604,6 @@ "Add-seats": "Ajouter des sièges", "format": "format", "select-date-format": "Sélectionnez un format de date", - "rotate-right": "Faire pivoter à droite" + "rotate-right": "Faire pivoter à droite", + "rotate-left": "Faire pivoter à gauche" } From eb66de122032ddb06b38c2a2967e3dd4bb5d3c1c Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Fri, 16 Aug 2024 18:02:29 +0530 Subject: [PATCH 05/12] fix: issue in template flow using roate pdf page functionality --- apps/OpenSign/src/components/pdf/PdfZoom.js | 3 ++- apps/OpenSign/src/constant/Utils.js | 9 +++++++-- apps/OpenSign/src/pages/SignyourselfPdf.js | 1 + apps/OpenSign/src/pages/TemplatePlaceholder.js | 15 ++++++++++++++- 4 files changed, 24 insertions(+), 4 deletions(-) diff --git a/apps/OpenSign/src/components/pdf/PdfZoom.js b/apps/OpenSign/src/components/pdf/PdfZoom.js index 178bac4f2..010c8db6c 100644 --- a/apps/OpenSign/src/components/pdf/PdfZoom.js +++ b/apps/OpenSign/src/components/pdf/PdfZoom.js @@ -26,7 +26,8 @@ function PdfZoom(props) { props.pageNumber - 1, props.pdfRotateBase64 ); - props.setPdfArrayBuffer(urlDetails.arrayBuffer); + props?.setPdfArrayBuffer && + props?.setPdfArrayBuffer(urlDetails.arrayBuffer); props.setPdfRotatese64(urlDetails.base64); }; return ( diff --git a/apps/OpenSign/src/constant/Utils.js b/apps/OpenSign/src/constant/Utils.js index c3fbaa93f..3c7089ab6 100644 --- a/apps/OpenSign/src/constant/Utils.js +++ b/apps/OpenSign/src/constant/Utils.js @@ -658,7 +658,12 @@ export const randomId = () => { return randomDigit; }; -export const createDocument = async (template, placeholders, signerData) => { +export const createDocument = async ( + template, + placeholders, + signerData, + pdfUrl +) => { if (template && template.length > 0) { const Doc = template[0]; @@ -681,7 +686,7 @@ export const createDocument = async (template, placeholders, signerData) => { } const data = { Name: Doc.Name, - URL: Doc.URL, + URL: pdfUrl, SignedUrl: Doc.SignedUrl, SentToOthers: Doc.SentToOthers, Description: Doc.Description, diff --git a/apps/OpenSign/src/pages/SignyourselfPdf.js b/apps/OpenSign/src/pages/SignyourselfPdf.js index 9c0a294d3..2f9049a80 100644 --- a/apps/OpenSign/src/pages/SignyourselfPdf.js +++ b/apps/OpenSign/src/pages/SignyourselfPdf.js @@ -795,6 +795,7 @@ function SignYourSelf() { const signedpdf = JSON.parse(JSON.stringify(resSignPdf)); setPdfUrl(signedpdf); getDocumentDetails(false); + setPdfRotatese64(""); } }; diff --git a/apps/OpenSign/src/pages/TemplatePlaceholder.js b/apps/OpenSign/src/pages/TemplatePlaceholder.js index d6e6c5c89..44d7fab27 100644 --- a/apps/OpenSign/src/pages/TemplatePlaceholder.js +++ b/apps/OpenSign/src/pages/TemplatePlaceholder.js @@ -917,8 +917,21 @@ const TemplatePlaceholder = () => { const handleCreateDocModal = async () => { setIsCreateDocModal(false); setIsCreateDoc(true); + let pdfUrl = pdfDetails[0]?.URL; + if (pdfRotateBase64) { + try { + pdfUrl = await convertBase64ToFile(pdfDetails[0].Name, pdfRotateBase64); + } catch (e) { + console.log("error to convertBase64ToFile in placeholder flow", e); + } + } // handle create document - const res = await createDocument(pdfDetails, signerPos, signersdata); + const res = await createDocument( + pdfDetails, + signerPos, + signersdata, + pdfUrl + ); if (res.status === "success") { navigate(`/placeHolderSign/${res.id}`, { state: { title: "Use Template" } From 5596468b033f368f437cb5c78e8b6fbefd15e9ae Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Fri, 16 Aug 2024 18:06:52 +0530 Subject: [PATCH 06/12] refactor code --- apps/OpenSign/src/pages/PdfRequestFiles.js | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/OpenSign/src/pages/PdfRequestFiles.js b/apps/OpenSign/src/pages/PdfRequestFiles.js index 0844277f5..a657f2823 100644 --- a/apps/OpenSign/src/pages/PdfRequestFiles.js +++ b/apps/OpenSign/src/pages/PdfRequestFiles.js @@ -1324,7 +1324,6 @@ function PdfRequestFiles(props) { const handleDontShow = (isChecked) => { setIsDontShow(isChecked); }; - // console.log("signerpos", signerPos); //function to close tour and save tour status const closeRequestSignTour = async () => { setRequestSignTour(true); From fe92111dc918e08d0b611b046d5f2a2ec43a05d1 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Tue, 20 Aug 2024 12:08:55 +0530 Subject: [PATCH 07/12] fix: owner's subscription expired alert issue during sign document --- apps/OpenSign/src/primitives/AddContact.js | 206 +++++++++++---------- 1 file changed, 111 insertions(+), 95 deletions(-) diff --git a/apps/OpenSign/src/primitives/AddContact.js b/apps/OpenSign/src/primitives/AddContact.js index 46155a5c3..c25024c85 100644 --- a/apps/OpenSign/src/primitives/AddContact.js +++ b/apps/OpenSign/src/primitives/AddContact.js @@ -46,109 +46,125 @@ const AddContact = (props) => { e.preventDefault(); e.stopPropagation(); setIsLoader(true); - try { - const contactQuery = new Parse.Object("contracts_Contactbook"); - contactQuery.set("Name", name); - if (phone) { - contactQuery.set("Phone", phone); - } - contactQuery.set("Email", email); - contactQuery.set("UserRole", "contracts_Guest"); - - if (localStorage.getItem("TenantId")) { - contactQuery.set("TenantId", { - __type: "Pointer", - className: "partners_Tenant", - objectId: localStorage.getItem("TenantId") - }); - } - + if (localStorage.getItem("TenantId")) { try { - const _users = Parse.Object.extend("User"); - const _user = new _users(); - _user.set("name", name); - _user.set("username", email); - _user.set("email", email); - _user.set("password", email); - if (phone) { - _user.set("phone", phone); - } + const user = Parse.User.current(); + const query = new Parse.Query("contracts_Contactbook"); + query.equalTo("CreatedBy", user); + query.notEqualTo("IsDeleted", true); + query.equalTo("Email", email); + const res = await query.first(); + if (!res) { + const contactQuery = new Parse.Object("contracts_Contactbook"); + contactQuery.set("Name", name); + if (phone) { + contactQuery.set("Phone", phone); + } + contactQuery.set("Email", email); + contactQuery.set("UserRole", "contracts_Guest"); - const user = await _user.save(); - if (user) { - const currentUser = Parse.User.current(); - contactQuery.set( - "CreatedBy", - Parse.User.createWithoutData(currentUser.id) - ); - - contactQuery.set("UserId", user); - const acl = new Parse.ACL(); - acl.setPublicReadAccess(true); - acl.setPublicWriteAccess(true); - acl.setReadAccess(currentUser.id, true); - acl.setWriteAccess(currentUser.id, true); - - contactQuery.setACL(acl); - - const res = await contactQuery.save(); - - const parseData = JSON.parse(JSON.stringify(res)); - props.details(parseData); - if (props.closePopup) { - props.closePopup(); + if (localStorage.getItem("TenantId")) { + contactQuery.set("TenantId", { + __type: "Pointer", + className: "partners_Tenant", + objectId: localStorage.getItem("TenantId") + }); } + try { + const _users = Parse.Object.extend("User"); + const _user = new _users(); + _user.set("name", name); + _user.set("username", email); + _user.set("email", email); + _user.set("password", email); + if (phone) { + _user.set("phone", phone); + } + + const user = await _user.save(); + if (user) { + const currentUser = Parse.User.current(); + contactQuery.set( + "CreatedBy", + Parse.User.createWithoutData(currentUser.id) + ); + + contactQuery.set("UserId", user); + const acl = new Parse.ACL(); + acl.setPublicReadAccess(true); + acl.setPublicWriteAccess(true); + acl.setReadAccess(currentUser.id, true); + acl.setWriteAccess(currentUser.id, true); + + contactQuery.setACL(acl); + + const res = await contactQuery.save(); + + const parseData = JSON.parse(JSON.stringify(res)); + props.details(parseData); + if (props.closePopup) { + props.closePopup(); + } + + setIsLoader(false); + // Reset the form fields + setAddYourself(false); + setName(""); + setPhone(""); + setEmail(""); + } + } catch (err) { + console.log("err ", err); + if (err.code === 202) { + const params = { email: email }; + const userRes = await Parse.Cloud.run("getUserId", params); + const currentUser = Parse.User.current(); + contactQuery.set( + "CreatedBy", + Parse.User.createWithoutData(currentUser.id) + ); + + contactQuery.set("UserId", { + __type: "Pointer", + className: "_User", + objectId: userRes.id + }); + const acl = new Parse.ACL(); + acl.setPublicReadAccess(true); + acl.setPublicWriteAccess(true); + acl.setReadAccess(currentUser.id, true); + acl.setWriteAccess(currentUser.id, true); + + contactQuery.setACL(acl); + const res = await contactQuery.save(); + + const parseData = JSON.parse(JSON.stringify(res)); + if (props.details) { + props.details(parseData); + } + + if (props.closePopup) { + props.closePopup(); + } + setIsLoader(false); + // Reset the form fields + setAddYourself(false); + setName(""); + setPhone(""); + setEmail(""); + } + } + } else { + alert(t("add-signer-alert")); setIsLoader(false); - // Reset the form fields - setAddYourself(false); - setName(""); - setPhone(""); - setEmail(""); } } catch (err) { - console.log("err ", err); - if (err.code === 202) { - const params = { email: email }; - const userRes = await Parse.Cloud.run("getUserId", params); - const currentUser = Parse.User.current(); - contactQuery.set( - "CreatedBy", - Parse.User.createWithoutData(currentUser.id) - ); - - contactQuery.set("UserId", { - __type: "Pointer", - className: "_User", - objectId: userRes.id - }); - const acl = new Parse.ACL(); - acl.setPublicReadAccess(true); - acl.setPublicWriteAccess(true); - acl.setReadAccess(currentUser.id, true); - acl.setWriteAccess(currentUser.id, true); - - contactQuery.setACL(acl); - const res = await contactQuery.save(); - - const parseData = JSON.parse(JSON.stringify(res)); - if (props.details) { - props.details(parseData); - } - - if (props.closePopup) { - props.closePopup(); - } - setIsLoader(false); - // Reset the form fields - setAddYourself(false); - setName(""); - setPhone(""); - setEmail(""); - } + // console.log("err", err); + setIsLoader(false); + alert(t("something-went-wrong-mssg")); } - } catch (err) { - // console.log("err", err); + } else { setIsLoader(false); alert(t("something-went-wrong-mssg")); } From fbea98bbe6f5eef89c99e4ca5f4b4c0c9a8f1493 Mon Sep 17 00:00:00 2001 From: RaktimaNXG Date: Tue, 20 Aug 2024 20:41:14 +0530 Subject: [PATCH 08/12] fix: add validation of rotation functionality, add rotation functionality for mobile view --- .../public/locales/en/translation.json | 3 +- .../public/locales/fr/translation.json | 3 +- apps/OpenSign/src/components/RotateAlert.js | 40 +++ apps/OpenSign/src/components/pdf/PdfHeader.js | 59 +++- apps/OpenSign/src/components/pdf/PdfZoom.js | 38 +-- apps/OpenSign/src/components/pdf/RenderPdf.js | 294 +++++++++--------- apps/OpenSign/src/constant/Utils.js | 49 +++ apps/OpenSign/src/pages/PdfRequestFiles.js | 33 +- apps/OpenSign/src/pages/PlaceHolderSign.js | 64 +++- apps/OpenSign/src/pages/SignyourselfPdf.js | 81 +++-- .../OpenSign/src/pages/TemplatePlaceholder.js | 57 +++- .../src/script/locales/en/translation.json | 3 +- .../src/script/locales/fr/translation.json | 3 +- 13 files changed, 483 insertions(+), 244 deletions(-) create mode 100644 apps/OpenSign/src/components/RotateAlert.js diff --git a/apps/OpenSign/public/locales/en/translation.json b/apps/OpenSign/public/locales/en/translation.json index 8330a6a04..88f4de9de 100644 --- a/apps/OpenSign/public/locales/en/translation.json +++ b/apps/OpenSign/public/locales/en/translation.json @@ -606,5 +606,6 @@ "format": "format", "select-date-format": "Select a date format", "rotate-right":"Rotate right", - "rotate-left":"Rotate left" + "rotate-left":"Rotate left", + "rotate-alert-mssg":"All widgets on this page will be lost. Are you sure you want to proceed?" } diff --git a/apps/OpenSign/public/locales/fr/translation.json b/apps/OpenSign/public/locales/fr/translation.json index 7114790d4..14eb96d39 100644 --- a/apps/OpenSign/public/locales/fr/translation.json +++ b/apps/OpenSign/public/locales/fr/translation.json @@ -605,5 +605,6 @@ "format": "format", "select-date-format": "Sélectionnez un format de date", "rotate-right" :"Faire pivoter à droite", - "rotate-left" :"Faire pivoter à gauche" + "rotate-left" :"Faire pivoter à gauche", + "rotate-alert-mssg" :"Tous les widgets de cette page seront perdus. Êtes-vous sûr de vouloir continuer ?" } diff --git a/apps/OpenSign/src/components/RotateAlert.js b/apps/OpenSign/src/components/RotateAlert.js new file mode 100644 index 000000000..ee5ed23c9 --- /dev/null +++ b/apps/OpenSign/src/components/RotateAlert.js @@ -0,0 +1,40 @@ +import React from "react"; +import ModalUi from "../primitives/ModalUi"; +import { useTranslation } from "react-i18next"; + +function RotateAlert(props) { + const { t } = useTranslation(); + return ( + { + props.setIsRotate(false); + }} + > +
+

{t("rotate-alert-mssg")}

+ +
+
+ + +
+
+ + ); +} + +export default RotateAlert; diff --git a/apps/OpenSign/src/components/pdf/PdfHeader.js b/apps/OpenSign/src/components/pdf/PdfHeader.js index f4976d4f2..f92b99888 100644 --- a/apps/OpenSign/src/components/pdf/PdfHeader.js +++ b/apps/OpenSign/src/components/pdf/PdfHeader.js @@ -34,7 +34,11 @@ function Header({ setIsEmail, completeBtnTitle, setIsEditTemplate, - isPublicTemplate + isPublicTemplate, + clickOnZoomIn, + clickOnZoomOut, + handleRotationFun, + isDisableRotate }) { const { t } = useTranslation(); const filterPrefill = @@ -73,7 +77,7 @@ function Header({ allPages={allPages} changePage={changePage} /> - {pdfUrl && alreadySign ? ( + {isCompleted && alreadySign ? (
@@ -185,11 +189,7 @@ function Header({
{ - if (!pdfUrl) { - embedWidgetsData(); - } else if (isPdfRequestFiles) { - embedWidgetsData(); - } + embedWidgetsData(); }} className="border-none font-[650] text-[14px] op-link op-link-primary no-underline" > @@ -207,7 +207,7 @@ function Header({ handleDownloadPdf( pdfDetails, - pdfUrl, + pdfDetails[0]?.URL, setIsDownloading ) } @@ -226,6 +226,43 @@ function Header({ > {t("download")} + {!isDisableRotate && ( + <> + handleRotationFun(90)} + > + + + {t("rotate-right")} + + + handleRotationFun(-90)} + > + + + {t("rotate-left")} + + + + )} + + clickOnZoomIn()} + > + + {t("zoom-in")} + + clickOnZoomOut()} + > + + {t("zoom-out")} + @@ -443,9 +480,7 @@ function Header({ type="button" className="op-btn op-btn-primary op-btn-sm mr-[3px]" onClick={() => { - if (!pdfUrl) { - embedWidgetsData(); - } + embedWidgetsData(); }} > {t("finish")} diff --git a/apps/OpenSign/src/components/pdf/PdfZoom.js b/apps/OpenSign/src/components/pdf/PdfZoom.js index 010c8db6c..7afa83330 100644 --- a/apps/OpenSign/src/components/pdf/PdfZoom.js +++ b/apps/OpenSign/src/components/pdf/PdfZoom.js @@ -1,40 +1,14 @@ import React from "react"; import { useTranslation } from "react-i18next"; -import { rotatePdfPage } from "../../constant/Utils"; function PdfZoom(props) { const { t } = useTranslation(); - const onClickZoomIn = () => { - props.setScale(props.scale + 0.1 * props.scale); - props.setZoomPercent(props.zoomPercent + 10); - }; - const onClickZoomOut = () => { - if (props.zoomPercent > 0) { - if (props.zoomPercent === 10) { - props.setScale(1); - } else { - props.setScale(props.scale - 0.1 * props.scale); - } - props.setZoomPercent(props.zoomPercent - 10); - } - }; - //`handleRotationFun` function is used to roatate pdf particular page - const handleRotationFun = async (rotateDegree) => { - const urlDetails = await rotatePdfPage( - props.file, - rotateDegree, - props.pageNumber - 1, - props.pdfRotateBase64 - ); - props?.setPdfArrayBuffer && - props?.setPdfArrayBuffer(urlDetails.arrayBuffer); - props.setPdfRotatese64(urlDetails.base64); - }; + return ( props.clickOnZoomIn()} title={t("zoom-in")} > @@ -43,7 +17,9 @@ function PdfZoom(props) { <> handleRotationFun(90)} + onClick={() => { + props.handleRotationFun(90); + }} title={t("rotate-right")} > @@ -51,7 +27,7 @@ function PdfZoom(props) { handleRotationFun(-90)} + onClick={() => props.handleRotationFun(-90)} > @@ -59,7 +35,7 @@ function PdfZoom(props) { )} props.clickOnZoomOut()} style={{ cursor: props.zoomPercent > 0 ? "pointer" : "default" }} diff --git a/apps/OpenSign/src/components/pdf/RenderPdf.js b/apps/OpenSign/src/components/pdf/RenderPdf.js index 1195925e7..4fc3b6024 100644 --- a/apps/OpenSign/src/components/pdf/RenderPdf.js +++ b/apps/OpenSign/src/components/pdf/RenderPdf.js @@ -70,6 +70,7 @@ function RenderPdf({ }) { const { t } = useTranslation(); const isMobile = window.innerWidth < 767; + //check isGuestSigner is present in local if yes than handle login flow header in mobile view const isGuestSigner = localStorage.getItem("isGuestSigner"); @@ -261,153 +262,167 @@ function RenderPdf({ {t("success-email-alert")} )} {isMobile ? ( -
- {containerWH?.width && - pdfOriginalWH.length > 0 && - (pdfRequest - ? signerPos.map((data, key) => { - return ( - - {checkSignedSigners(data)} - - ); - }) - : placeholder // placeholder mobile - ? signerPos.map((data, ind) => { +
+ {containerWH?.width && + pdfOriginalWH.length > 0 && + (pdfRequest + ? signerPos.map((data, key) => { return ( - - {data.placeHolder.map((placeData, index) => { - return ( - - {placeData.pageNumber === pageNumber && - placeData.pos.map((pos) => { - return ( - - - - ); - })} - - ); - })} + + {checkSignedSigners(data)} ); }) - : xyPostion.map((data, ind) => { - return ( - - {data.pageNumber === pageNumber && - data.pos.map((pos) => { + : placeholder // placeholder mobile + ? signerPos.map((data, ind) => { + return ( + + {data.placeHolder.map((placeData, index) => { return ( - pos && ( - - ) + + {placeData.pageNumber === pageNumber && + placeData.pos.map((pos) => { + return ( + + + + ); + })} + ); })} - - ); - }))} + + ); + }) + : xyPostion.map((data, ind) => { + return ( + + {data.pageNumber === pageNumber && + data.pos.map((pos) => { + return ( + pos && ( + + ) + ); + })} + + ); + }))} - {/* this component for render pdf document is in middle of the component */} -
{ setPdfLoad(false); @@ -427,6 +442,7 @@ function RenderPdf({ } >
-
+ ) : ( { const pdfUrl = pdfData.url(); return pdfUrl; }; +export const onClickZoomIn = (scale, zoomPercent, setScale, setZoomPercent) => { + setScale(scale + 0.1 * scale); + setZoomPercent(zoomPercent + 10); +}; +export const onClickZoomOut = ( + zoomPercent, + scale, + setZoomPercent, + setScale +) => { + if (zoomPercent > 0) { + if (zoomPercent === 10) { + setScale(1); + } else { + setScale(scale - 0.1 * scale); + } + setZoomPercent(zoomPercent - 10); + } +}; + +//function to use remove widgets from current page when user want to rotate page +export const handleRemoveWidgets = ( + setSignerPos, + signerPos, + pageNumber, + setIsRotate +) => { + const updatedSignerPos = signerPos.map((placeholderObj) => { + return { + ...placeholderObj, + placeHolder: placeholderObj?.placeHolder?.filter( + (data) => data?.pageNumber !== pageNumber + ) + }; + }); + setSignerPos(updatedSignerPos); + setIsRotate(false); +}; +//function to show warning when user rotate page and there are some already widgets on that page +export const handleRotateWarning = (signerPos, pageNumber) => { + const placeholderExist = signerPos?.some((placeholderObj) => + placeholderObj?.placeHolder?.some((data) => data?.pageNumber === pageNumber) + ); + if (placeholderExist) { + return true; + } else { + return false; + } +}; diff --git a/apps/OpenSign/src/pages/PdfRequestFiles.js b/apps/OpenSign/src/pages/PdfRequestFiles.js index a657f2823..efa058bb9 100644 --- a/apps/OpenSign/src/pages/PdfRequestFiles.js +++ b/apps/OpenSign/src/pages/PdfRequestFiles.js @@ -32,7 +32,9 @@ import { handleToPrint, handleDownloadCertificate, openInNewTab, - getDefaultSignature + getDefaultSignature, + onClickZoomIn, + onClickZoomOut } from "../constant/Utils"; import LoaderWithMsg from "../primitives/LoaderWithMsg"; import HandleError from "../primitives/HandleError"; @@ -141,17 +143,20 @@ function PdfRequestFiles(props) { let isGuestSignFlow = false; let sendmail; let getDocId = ""; - const route = !props.templateId && window.location.pathname; + const route = !props.templateId && window.location.pathname; //'/load/recipientSignPdf/TOAVuhXbfw/fPAKdK1qgX' + console.log(" window.location?.search", window.location?.search); + + //window.location.search = ?sendmail=false const getQuery = !props.templateId && window.location?.search && - window.location?.search?.split("?"); + window.location?.search?.split("?"); //['','sendmail=false'] + //'sendmail=false' if (getQuery) { - sendmail = getQuery[1].split("=")[1]; + sendmail = getQuery[1].split("=")[1]; //false } - const checkSplit = route && route?.split("/"); - + const checkSplit = route && route?.split("/"); // ['', 'load', 'recipientSignPdf', 'TOAVuhXbfw', 'fPAKdK1qgX'] if (checkSplit && checkSplit.length > 4) { isGuestSignFlow = true; getDocId = checkSplit[3]; @@ -1598,6 +1603,12 @@ function PdfRequestFiles(props) { }); }; + const clickOnZoomIn = () => { + onClickZoomIn(scale, zoomPercent, setScale, setZoomPercent); + }; + const clickOnZoomOut = () => { + onClickZoomOut(zoomPercent, scale, setZoomPercent, setScale); + }; return ( @@ -1921,11 +1932,8 @@ function PdfRequestFiles(props) { {/* pdf render view */} <div className=" w-full md:w-[57%] flex mr-4"> <PdfZoom - setScale={setScale} - scale={scale} - containerWH={containerWH} - setZoomPercent={setZoomPercent} - zoomPercent={zoomPercent} + clickOnZoomIn={clickOnZoomIn} + clickOnZoomOut={clickOnZoomOut} isDisableRotate={true} /> <div className=" w-full md:w-[95%] "> @@ -2076,6 +2084,9 @@ function PdfRequestFiles(props) { setZoomPercent={setZoomPercent} zoomPercent={zoomPercent} isPublicTemplate={isPublicTemplate} + clickOnZoomIn={clickOnZoomIn} + clickOnZoomOut={clickOnZoomOut} + isDisableRotate={true} /> <div ref={divRef} data-tut="pdfArea" className="h-[95%]"> diff --git a/apps/OpenSign/src/pages/PlaceHolderSign.js b/apps/OpenSign/src/pages/PlaceHolderSign.js index 813c27cdb..16bc0d4a4 100644 --- a/apps/OpenSign/src/pages/PlaceHolderSign.js +++ b/apps/OpenSign/src/pages/PlaceHolderSign.js @@ -36,7 +36,12 @@ import { convertPdfArrayBuffer, getContainerScale, openInNewTab, - convertBase64ToFile + convertBase64ToFile, + onClickZoomIn, + onClickZoomOut, + rotatePdfPage, + handleRemoveWidgets, + handleRotateWarning } from "../constant/Utils"; import RenderPdf from "../components/pdf/RenderPdf"; import { useNavigate } from "react-router-dom"; @@ -57,6 +62,7 @@ import PdfZoom from "../components/pdf/PdfZoom"; import LottieWithLoader from "../primitives/DotLottieReact"; import { paidUrl } from "../json/plansArr"; import { useTranslation } from "react-i18next"; +import RotateAlert from "../components/RotateAlert"; function PlaceHolderSign() { const { t } = useTranslation(); @@ -134,6 +140,7 @@ function PlaceHolderSign() { const [pdfArrayBuffer, setPdfArrayBuffer] = useState(""); const isHeader = useSelector((state) => state.showHeader); const [activeMailAdapter, setActiveMailAdapter] = useState(""); + const [isRotate, setIsRotate] = useState(false); const [isAlreadyPlace, setIsAlreadyPlace] = useState({ status: false, message: "" @@ -1715,6 +1722,31 @@ function PlaceHolderSign() { }); } }; + const clickOnZoomIn = () => { + onClickZoomIn(scale, zoomPercent, setScale, setZoomPercent); + }; + const clickOnZoomOut = () => { + onClickZoomOut(zoomPercent, scale, setZoomPercent, setScale); + }; + //`handleRotationFun` function is used to roatate pdf particular page + const handleRotationFun = async (rotateDegree) => { + const isRotate = handleRotateWarning(signerPos, pageNumber); + if (isRotate) { + setIsRotate(true); + } else { + const urlDetails = await rotatePdfPage( + pdfDetails[0].URL, + rotateDegree, + pageNumber - 1, + pdfRotateBase64 + ); + setPdfArrayBuffer && setPdfArrayBuffer(urlDetails.arrayBuffer); + setPdfRotatese64(urlDetails.base64); + } + }; + const handleRemovePlaceholder = () => { + handleRemoveWidgets(setSignerPos, signerPos, pageNumber, setIsRotate); + }; return ( <> <Title title={state?.title ? state.title : "New Document"} /> @@ -1768,19 +1800,9 @@ function PlaceHolderSign() { {/* pdf render view */} <div className=" w-full md:w-[57%] flex mr-4"> <PdfZoom - setScale={setScale} - scale={scale} - containerWH={containerWH} - setZoomPercent={setZoomPercent} - zoomPercent={zoomPercent} - file={ - pdfDetails[0] && - (pdfDetails[0].SignedUrl || pdfDetails[0].URL) - } - setPdfArrayBuffer={setPdfArrayBuffer} - setPdfRotatese64={setPdfRotatese64} - pageNumber={pageNumber} - pdfRotateBase64={pdfRotateBase64} + clickOnZoomIn={clickOnZoomIn} + clickOnZoomOut={clickOnZoomOut} + handleRotationFun={handleRotationFun} /> <div className=" w-full md:w-[95%] "> {/* this modal is used show alert set placeholder for all signers before send mail */} @@ -2026,9 +2048,16 @@ function PlaceHolderSign() { alertSendEmail={alertSendEmail} isShowHeader={true} currentSigner={true} + handleRotationFun={handleRotationFun} + clickOnZoomIn={clickOnZoomIn} + clickOnZoomOut={clickOnZoomOut} /> - <div ref={divRef} data-tut="pdfArea" className="h-[95%]"> + <div + ref={divRef} + data-tut="pdfArea" + className="h-full md:h-[95%]" + > {containerWH && ( <RenderPdf pageNumber={pageNumber} @@ -2217,6 +2246,11 @@ function PlaceHolderSign() { fontColor={fontColor} setFontColor={setFontColor} /> + <RotateAlert + isRotate={isRotate} + setIsRotate={setIsRotate} + handleRemoveWidgets={handleRemovePlaceholder} + /> </DndProvider> </> ); diff --git a/apps/OpenSign/src/pages/SignyourselfPdf.js b/apps/OpenSign/src/pages/SignyourselfPdf.js index 2f9049a80..55acc3e7c 100644 --- a/apps/OpenSign/src/pages/SignyourselfPdf.js +++ b/apps/OpenSign/src/pages/SignyourselfPdf.js @@ -34,7 +34,10 @@ import { changeImageWH, handleSendOTP, getContainerScale, - getDefaultSignature + getDefaultSignature, + onClickZoomIn, + onClickZoomOut, + rotatePdfPage } from "../constant/Utils"; import { useParams } from "react-router-dom"; import Tour from "reactour"; @@ -53,6 +56,7 @@ import VerifyEmail from "../components/pdf/VerifyEmail"; import PdfZoom from "../components/pdf/PdfZoom"; import Loader from "../primitives/Loader"; import { useTranslation } from "react-i18next"; +import RotateAlert from "../components/RotateAlert"; //For signYourself inProgress section signer can add sign and complete doc sign. function SignYourSelf() { const { t } = useTranslation(); @@ -124,6 +128,7 @@ function SignYourSelf() { const isHeader = useSelector((state) => state.showHeader); const [scale, setScale] = useState(1); const [pdfRotateBase64, setPdfRotatese64] = useState(""); + const [isRotate, setIsRotate] = useState(false); const divRef = useRef(null); const nodeRef = useRef(null); const [, drop] = useDrop({ @@ -207,6 +212,7 @@ function SignYourSelf() { return () => clearTimeout(timer); // eslint-disable-next-line react-hooks/exhaustive-deps }, [divRef.current, isHeader]); + //function for get document details for perticular signer with signer'object id const getDocumentDetails = async (showComplete) => { try { @@ -1162,6 +1168,48 @@ function SignYourSelf() { handleTextSettingModal(false); } }; + const clickOnZoomIn = () => { + onClickZoomIn(scale, zoomPercent, setScale, setZoomPercent); + }; + const clickOnZoomOut = () => { + onClickZoomOut(zoomPercent, scale, setZoomPercent, setScale); + }; + //`handleRotationFun` function is used to roatate pdf particular page + const handleRotationFun = async (rotateDegree) => { + const isPlaceholder = handleRotateWarning(); + if (isPlaceholder) { + setIsRotate(true); + } else { + const urlDetails = await rotatePdfPage( + pdfUrl || pdfDetails[0].URL, + rotateDegree, + pageNumber - 1, + pdfRotateBase64 + ); + setPdfArrayBuffer && setPdfArrayBuffer(urlDetails.arrayBuffer); + setPdfRotatese64(urlDetails.base64); + } + }; + + //function to show warning when user rotate page and there are some already widgets on that page + const handleRotateWarning = () => { + const placeholderData = xyPostion?.filter( + (data) => data.pageNumber === pageNumber + ); + if (placeholderData && placeholderData.length > 0) { + return true; + } else { + return false; + } + }; + //function to use remove widgets from current page when user want to rotate page + const handleRemoveWidgets = () => { + const updatePlaceholder = xyPostion.filter( + (data) => data.pageNumber !== pageNumber + ); + setXyPostion(updatePlaceholder); + setIsRotate(false); + }; return ( <DndProvider backend={HTML5Backend}> <Title title={"Self Sign"} /> @@ -1225,19 +1273,9 @@ function SignYourSelf() { /> <div className=" w-full md:w-[57%] flex mr-4"> <PdfZoom - setScale={setScale} - scale={scale} - containerWH={containerWH} - setZoomPercent={setZoomPercent} - zoomPercent={zoomPercent} - file={ - pdfDetails[0] && - (pdfDetails[0].SignedUrl || pdfDetails[0].URL) - } - setPdfArrayBuffer={setPdfArrayBuffer} - setPdfRotatese64={setPdfRotatese64} - pageNumber={pageNumber} - pdfRotateBase64={pdfRotateBase64} + clickOnZoomIn={clickOnZoomIn} + clickOnZoomOut={clickOnZoomOut} + handleRotationFun={handleRotationFun} /> <div className="w-full md:w-[95%]"> <ModalUi @@ -1345,12 +1383,12 @@ function SignYourSelf() { isSignYourself={true} setIsEmail={setIsEmail} isCompleted={isCompleted} + handleRotationFun={handleRotationFun} + clickOnZoomIn={clickOnZoomIn} + clickOnZoomOut={clickOnZoomOut} + widgetsDetails={xyPostion} /> - <div - ref={divRef} - data-tut="reactourSecond" - className="h-full md:h-[95%]" - > + <div ref={divRef} data-tut="reactourSecond" className="h-full"> {containerWH?.width && containerWH?.height && ( <RenderPdf pageNumber={pageNumber} @@ -1450,6 +1488,11 @@ function SignYourSelf() { </button> </div> </ModalUi> + <RotateAlert + isRotate={isRotate} + setIsRotate={setIsRotate} + handleRemoveWidgets={handleRemoveWidgets} + /> <TextFontSetting isTextSetting={isTextSetting} setIsTextSetting={setIsTextSetting} diff --git a/apps/OpenSign/src/pages/TemplatePlaceholder.js b/apps/OpenSign/src/pages/TemplatePlaceholder.js index 44d7fab27..6754690f5 100644 --- a/apps/OpenSign/src/pages/TemplatePlaceholder.js +++ b/apps/OpenSign/src/pages/TemplatePlaceholder.js @@ -27,7 +27,12 @@ import { fetchSubscription, getContainerScale, openInNewTab, - convertBase64ToFile + convertBase64ToFile, + rotatePdfPage, + onClickZoomOut, + onClickZoomIn, + handleRemoveWidgets, + handleRotateWarning } from "../constant/Utils"; import RenderPdf from "../components/pdf/RenderPdf"; import "../styles/AddUser.css"; @@ -44,6 +49,7 @@ import { useSelector } from "react-redux"; import PdfZoom from "../components/pdf/PdfZoom"; import { paidUrl } from "../json/plansArr"; import { useTranslation } from "react-i18next"; +import RotateAlert from "../components/RotateAlert"; const TemplatePlaceholder = () => { const { t } = useTranslation(); const navigate = useNavigate(); @@ -64,6 +70,7 @@ const TemplatePlaceholder = () => { const [isSendAlert, setIsSendAlert] = useState(false); const [isCreateDocModal, setIsCreateDocModal] = useState(false); const [isSubscribe, setIsSubscribe] = useState(false); + const [isRotate, setIsRotate] = useState(false); const [isLoading, setIsLoading] = useState({ isLoad: true, message: t("loading-mssg") @@ -1317,6 +1324,31 @@ const TemplatePlaceholder = () => { setIsCheckbox(false); }; + const clickOnZoomIn = () => { + onClickZoomIn(scale, zoomPercent, setScale, setZoomPercent); + }; + const clickOnZoomOut = () => { + onClickZoomOut(zoomPercent, scale, setZoomPercent, setScale); + }; + //`handleRotationFun` function is used to roatate pdf particular page + const handleRotationFun = async (rotateDegree) => { + const isRotate = handleRotateWarning(signerPos, pageNumber); + if (isRotate) { + setIsRotate(true); + } else { + const urlDetails = await rotatePdfPage( + pdfDetails[0].URL, + rotateDegree, + pageNumber - 1, + pdfRotateBase64 + ); + setPdfRotatese64(urlDetails.base64); + } + }; + const handleRemovePlaceholder = () => { + handleRemoveWidgets(setSignerPos, signerPos, pageNumber, setIsRotate); + }; + return ( <> <Title title={"Template"} /> @@ -1364,18 +1396,9 @@ const TemplatePlaceholder = () => { {/* pdf render view */} <div className=" w-full md:w-[57%] flex mr-4"> <PdfZoom - setScale={setScale} - scale={scale} - containerWH={containerWH} - setZoomPercent={setZoomPercent} - zoomPercent={zoomPercent} - file={ - pdfDetails[0] && - (pdfDetails[0].SignedUrl || pdfDetails[0].URL) - } - setPdfRotatese64={setPdfRotatese64} - pageNumber={pageNumber} - pdfRotateBase64={pdfRotateBase64} + clickOnZoomIn={clickOnZoomIn} + clickOnZoomOut={clickOnZoomOut} + handleRotationFun={handleRotationFun} /> <div className="w-full md:w-[95%]"> {/* this modal is used show alert set placeholder for all signers before send mail */} @@ -1518,6 +1541,9 @@ const TemplatePlaceholder = () => { currentSigner={true} setIsEditTemplate={handleEditTemplateModal} dataTut4="reactourFour" + handleRotationFun={handleRotationFun} + clickOnZoomIn={clickOnZoomIn} + clickOnZoomOut={clickOnZoomOut} /> <div ref={divRef} @@ -1707,6 +1733,11 @@ const TemplatePlaceholder = () => { fontColor={fontColor} setFontColor={setFontColor} /> + <RotateAlert + isRotate={isRotate} + setIsRotate={setIsRotate} + handleRemoveWidgets={handleRemovePlaceholder} + /> </DndProvider> </> ); diff --git a/apps/OpenSign/src/script/locales/en/translation.json b/apps/OpenSign/src/script/locales/en/translation.json index 90fde4716..461c4615c 100644 --- a/apps/OpenSign/src/script/locales/en/translation.json +++ b/apps/OpenSign/src/script/locales/en/translation.json @@ -606,5 +606,6 @@ "format": "format", "select-date-format": "Select a date format", "rotate-right": "Rotate right", - "rotate-left": "Rotate left" + "rotate-left": "Rotate left", + "rotate-alert-mssg": "All widgets on this page will be lost. Are you sure you want to proceed?" } diff --git a/apps/OpenSign/src/script/locales/fr/translation.json b/apps/OpenSign/src/script/locales/fr/translation.json index bc8daf3ed..1b1671b85 100644 --- a/apps/OpenSign/src/script/locales/fr/translation.json +++ b/apps/OpenSign/src/script/locales/fr/translation.json @@ -605,5 +605,6 @@ "format": "format", "select-date-format": "Sélectionnez un format de date", "rotate-right": "Faire pivoter à droite", - "rotate-left": "Faire pivoter à gauche" + "rotate-left": "Faire pivoter à gauche", + "rotate-alert-mssg" :"Tous les widgets de cette page seront perdus. Êtes-vous sûr de vouloir continuer ?" } From 39da8bd636f6f816f1b7af2a4033170e5b63bc19 Mon Sep 17 00:00:00 2001 From: RaktimaNXG <raktima.c@nxglabs.com> Date: Wed, 21 Aug 2024 10:02:46 +0530 Subject: [PATCH 09/12] refactor code --- apps/OpenSign/src/pages/PdfRequestFiles.js | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/apps/OpenSign/src/pages/PdfRequestFiles.js b/apps/OpenSign/src/pages/PdfRequestFiles.js index efa058bb9..bf4c11e62 100644 --- a/apps/OpenSign/src/pages/PdfRequestFiles.js +++ b/apps/OpenSign/src/pages/PdfRequestFiles.js @@ -124,7 +124,6 @@ function PdfRequestFiles(props) { const [otp, setOtp] = useState(""); const [contractName, setContractName] = useState(""); const [zoomPercent, setZoomPercent] = useState(0); - const [totalZoomPercent, setTotalZoomPercent] = useState(); const [scale, setScale] = useState(1); const [uniqueId, setUniqueId] = useState(""); const [isPublicTemplate, setIsPublicTemplate] = useState(false); @@ -144,8 +143,6 @@ function PdfRequestFiles(props) { let sendmail; let getDocId = ""; const route = !props.templateId && window.location.pathname; //'/load/recipientSignPdf/TOAVuhXbfw/fPAKdK1qgX' - console.log(" window.location?.search", window.location?.search); - //window.location.search = ?sendmail=false const getQuery = !props.templateId && @@ -2075,14 +2072,7 @@ function PdfRequestFiles(props) { currentSigner={currentSigner} pdfUrl={pdfUrl} alreadySign={alreadySign} - totalZoomPercent={totalZoomPercent} - setTotalZoomPercent={setTotalZoomPercent} - setScale={setScale} - scale={scale} - pdfOriginalWH={pdfOriginalWH} containerWH={containerWH} - setZoomPercent={setZoomPercent} - zoomPercent={zoomPercent} isPublicTemplate={isPublicTemplate} clickOnZoomIn={clickOnZoomIn} clickOnZoomOut={clickOnZoomOut} @@ -2120,7 +2110,6 @@ function PdfRequestFiles(props) { divRef={divRef} setIsResize={setIsResize} isResize={isResize} - setTotalZoomPercent={setTotalZoomPercent} setScale={setScale} scale={scale} uniqueId={uniqueId} From 1c2b4794f39b646ae0bf392ddc8d4edb9677667b Mon Sep 17 00:00:00 2001 From: RaktimaNXG <raktima.c@nxglabs.com> Date: Wed, 21 Aug 2024 13:55:54 +0530 Subject: [PATCH 10/12] fix: add copy option eside to widget for signature,stamp and text widgets --- .../public/locales/en/translation.json | 3 +- .../public/locales/fr/translation.json | 3 +- .../src/components/pdf/PlaceholderCopy.js | 81 +++++++++++++++---- apps/OpenSign/src/constant/Utils.js | 27 +++---- apps/OpenSign/src/pages/SignyourselfPdf.js | 1 + 5 files changed, 81 insertions(+), 34 deletions(-) diff --git a/apps/OpenSign/public/locales/en/translation.json b/apps/OpenSign/public/locales/en/translation.json index 88f4de9de..80dfbaed3 100644 --- a/apps/OpenSign/public/locales/en/translation.json +++ b/apps/OpenSign/public/locales/en/translation.json @@ -369,7 +369,8 @@ "copy-type": { "All pages": "All pages", "All pages but last": "All pages but last", - "All pages but first": "All pages but first" + "All pages but first": "All pages but first", + "Beside to widget":"Beside to widget" }, "options": "Options", "minimun-check": "Minimun check", diff --git a/apps/OpenSign/public/locales/fr/translation.json b/apps/OpenSign/public/locales/fr/translation.json index 14eb96d39..bffc22749 100644 --- a/apps/OpenSign/public/locales/fr/translation.json +++ b/apps/OpenSign/public/locales/fr/translation.json @@ -368,7 +368,8 @@ "copy-type": { "All pages": "Toutes les pages", "All pages but last": "Toutes les pages sauf la dernière", - "All pages but first": "Toutes les pages sauf la première" + "All pages but first": "Toutes les pages sauf la première", + "Beside to widget": "À côté du widget" }, "options": "Possibilités", "minimun-check": "Vérification minimale", diff --git a/apps/OpenSign/src/components/pdf/PlaceholderCopy.js b/apps/OpenSign/src/components/pdf/PlaceholderCopy.js index 64c85c413..a10bde125 100644 --- a/apps/OpenSign/src/components/pdf/PlaceholderCopy.js +++ b/apps/OpenSign/src/components/pdf/PlaceholderCopy.js @@ -1,12 +1,21 @@ import React, { useState } from "react"; import ModalUi from "../../primitives/ModalUi"; -import { randomId, textWidget } from "../../constant/Utils"; +import { + handleCopyNextToWidget, + randomId, + textWidget +} from "../../constant/Utils"; import { useTranslation } from "react-i18next"; function PlaceholderCopy(props) { const { t } = useTranslation(); - const copyType = ["All pages", "All pages but last", "All pages but first"]; - const [selectCopyType, setSelectCopyType] = useState(""); + const copyType = [ + { id: 1, type: "All pages" }, + { id: 2, type: "All pages but last" }, + { id: 3, type: "All pages but first" }, + { id: 4, type: "Beside to widget" } + ]; + const [selectCopyType, setSelectCopyType] = useState(1); //function for get copy placeholder position const getCopyPlaceholderPosition = ( type, @@ -20,7 +29,7 @@ function PlaceholderCopy(props) { (data) => data.xPosition !== currentPlaceholder.xPosition ); //copy all page placeholder at requested position except first page - if (newPageNumber === 1 && type === "first") { + if (newPageNumber === 1 && type === 3) { if (filterPosition && filterPosition.length > 0) { return { pageNumber: newPageNumber, @@ -29,7 +38,7 @@ function PlaceholderCopy(props) { } } //copy all page placeholder at requested position except last page - else if (newPageNumber === props.allPages && type === "last") { + else if (newPageNumber === props.allPages && type === 2) { if (existPlaceholderPosition) { return { pageNumber: newPageNumber, @@ -172,20 +181,60 @@ function PlaceholderCopy(props) { //function for getting selected type placeholder copy const handleApplyCopy = () => { - if (selectCopyType === "All pages") { - copyPlaceholder("all"); - } else if (selectCopyType === "All pages but last") { - copyPlaceholder("last"); - } else if (selectCopyType === "All pages but first") { - copyPlaceholder("first"); + if (selectCopyType === 4) { + const signerPosition = props.xyPostion; + let currentXYposition; + const signerId = props.signerObjId ? props.signerObjId : props.Id; + if (signerId) { + const filterSignerPosition = signerPosition.filter( + (item) => item?.Id === signerId + ); + currentXYposition = filterSignerPosition[0].placeHolder.filter( + (data) => data.pageNumber === props?.pageNumber + ); + //get current placeholder position data which user want to copy + currentXYposition = currentXYposition[0].pos.find( + (position) => position.key === props.signKey + ); + //function to create new widget next to just widget + handleCopyNextToWidget( + currentXYposition, + props.widgetType, + props.xyPostion, + props.pageNumber, + props.setXyPostion, + props?.Id + ); + } else { + const getIndex = props?.xyPostion.findIndex( + (data) => data.pageNumber === props.pageNumber + ); + const placeholderPosition = props?.xyPostion[getIndex]; + //get current placeholder position data which user want to copy + currentXYposition = placeholderPosition.pos.find( + (pos) => pos.key === props.signKey + ); + //function to create new widget next to just widget + handleCopyNextToWidget( + currentXYposition, + props.widgetType, + props.xyPostion, + getIndex, + props.setXyPostion + ); + } + } else { + copyPlaceholder(selectCopyType); } }; const handleUniqueId = () => { - if (props.widgetType === textWidget) { + const signerId = props.signerObjId ? props.signerObjId : props.Id; + if (signerId && props.widgetType === textWidget) { props.setUniqueId(props?.tempSignerId); props.setTempSignerId(""); } props.setIsPageCopy(false); + setSelectCopyType(1); }; return ( <ModalUi @@ -201,11 +250,11 @@ function PlaceholderCopy(props) { <input className="mr-[8px] op-radio op-radio-xs" type="radio" - value={data} - onChange={() => setSelectCopyType(data)} - checked={selectCopyType === data} + value={data.id} + onChange={() => setSelectCopyType(data.id)} + checked={selectCopyType === data.id} /> - {t(`copy-type.${data}`)} + {t(`copy-type.${data.type}`)} </label> </div> ); diff --git a/apps/OpenSign/src/constant/Utils.js b/apps/OpenSign/src/constant/Utils.js index 108c97a92..458608b52 100644 --- a/apps/OpenSign/src/constant/Utils.js +++ b/apps/OpenSign/src/constant/Utils.js @@ -872,7 +872,6 @@ export const onChangeInput = ( } } else { let getXYdata = xyPostion[index].pos; - const updatePosition = getXYdata.map((positionData) => { if (positionData.key === signKey) { if (dateFormat) { @@ -1859,29 +1858,26 @@ export const handleCopyNextToWidget = ( setXyPostion, userId ) => { - const isSigners = xyPostion.some((data) => data.signerPtr); let filterSignerPos; //get position of previous widget and create new widget next to that widget on same data except // xPosition and key - let newpos = position; + let newposition = position; const calculateXPosition = parseInt(position.xPosition) + defaultWidthHeight(widgetType).width + resizeBorderExtraWidth(); const newId = randomId(); - newpos = { ...newpos, xPosition: calculateXPosition, key: newId }; + newposition = { ...newposition, xPosition: calculateXPosition, key: newId }; //if condition to create widget in request-sign flow - if (isSigners) { - if (userId) { - filterSignerPos = xyPostion.filter((data) => data.Id === userId); - } - const getPlaceHolder = filterSignerPos[0]?.placeHolder; - const getPageNumer = getPlaceHolder.filter( + if (userId) { + filterSignerPos = xyPostion.filter((data) => data.Id === userId); + const getPlaceHolder = filterSignerPos && filterSignerPos[0]?.placeHolder; + const getPageNumer = getPlaceHolder?.filter( (data) => data.pageNumber === index ); - const getXYdata = getPageNumer[0].pos; - getXYdata.push(newpos); - if (getPageNumer.length > 0) { + const getXYdata = getPageNumer && getPageNumer[0]?.pos; + getXYdata.push(newposition); + if (getPageNumer && getPageNumer.length > 0) { const newUpdateSignPos = getPlaceHolder.map((obj) => { if (obj.pageNumber === index) { return { ...obj, pos: getXYdata }; @@ -1899,9 +1895,8 @@ export const handleCopyNextToWidget = ( setXyPostion(newUpdateSigner); } } else { - // else condition to create widget in sign-yourself flow - let getXYdata = xyPostion[index].pos; - getXYdata.push(newpos); + let getXYdata = xyPostion[index]?.pos || []; + getXYdata.push(newposition); const updatePlaceholder = xyPostion.map((obj, ind) => { if (ind === index) { return { ...obj, pos: getXYdata }; diff --git a/apps/OpenSign/src/pages/SignyourselfPdf.js b/apps/OpenSign/src/pages/SignyourselfPdf.js index 55acc3e7c..345acedb8 100644 --- a/apps/OpenSign/src/pages/SignyourselfPdf.js +++ b/apps/OpenSign/src/pages/SignyourselfPdf.js @@ -1333,6 +1333,7 @@ function SignYourSelf() { allPages={allPages} pageNumber={pageNumber} signKey={signKey} + widgetType={widgetType} /> {/* this is modal of signature pad */} <SignPad From f993817cb661bf63e1b0d83bc05ba711af04849a Mon Sep 17 00:00:00 2001 From: RaktimaNXG <raktima.c@nxglabs.com> Date: Wed, 21 Aug 2024 14:36:01 +0530 Subject: [PATCH 11/12] fix: issue of onclick yes button rotate pdf page --- apps/OpenSign/src/components/RotateAlert.js | 8 +++---- apps/OpenSign/src/constant/Utils.js | 5 ++++- apps/OpenSign/src/pages/PlaceHolderSign.js | 19 +++++++++++++---- apps/OpenSign/src/pages/SignyourselfPdf.js | 21 ++++++++++++++----- .../OpenSign/src/pages/TemplatePlaceholder.js | 18 ++++++++++++---- 5 files changed, 52 insertions(+), 19 deletions(-) diff --git a/apps/OpenSign/src/components/RotateAlert.js b/apps/OpenSign/src/components/RotateAlert.js index ee5ed23c9..a7448b6f1 100644 --- a/apps/OpenSign/src/components/RotateAlert.js +++ b/apps/OpenSign/src/components/RotateAlert.js @@ -8,17 +8,15 @@ function RotateAlert(props) { <ModalUi isOpen={props.isRotate} title={t("Rotation-alert")} - handleClose={() => { - props.setIsRotate(false); - }} + handleClose={() => props.setIsRotate({ status: false, degree: 0 })} > + {" "} <div className="p-[20px] h-full"> <p>{t("rotate-alert-mssg")}</p> - <div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div> <div className="flex gap-1"> <button - onClick={() => props.setIsRotate(false)} + onClick={() => props.setIsRotate({ status: false, degree: 0 })} type="button" className="op-btn op-btn-ghost shadow-md" > diff --git a/apps/OpenSign/src/constant/Utils.js b/apps/OpenSign/src/constant/Utils.js index 458608b52..08b92c975 100644 --- a/apps/OpenSign/src/constant/Utils.js +++ b/apps/OpenSign/src/constant/Utils.js @@ -2437,7 +2437,10 @@ export const handleRemoveWidgets = ( }; }); setSignerPos(updatedSignerPos); - setIsRotate(false); + setIsRotate({ + status: false, + degree: 0 + }); }; //function to show warning when user rotate page and there are some already widgets on that page export const handleRotateWarning = (signerPos, pageNumber) => { diff --git a/apps/OpenSign/src/pages/PlaceHolderSign.js b/apps/OpenSign/src/pages/PlaceHolderSign.js index 16bc0d4a4..eb954465a 100644 --- a/apps/OpenSign/src/pages/PlaceHolderSign.js +++ b/apps/OpenSign/src/pages/PlaceHolderSign.js @@ -140,7 +140,10 @@ function PlaceHolderSign() { const [pdfArrayBuffer, setPdfArrayBuffer] = useState(""); const isHeader = useSelector((state) => state.showHeader); const [activeMailAdapter, setActiveMailAdapter] = useState(""); - const [isRotate, setIsRotate] = useState(false); + const [isRotate, setIsRotate] = useState({ + status: false, + degree: 0 + }); const [isAlreadyPlace, setIsAlreadyPlace] = useState({ status: false, message: "" @@ -1732,7 +1735,7 @@ function PlaceHolderSign() { const handleRotationFun = async (rotateDegree) => { const isRotate = handleRotateWarning(signerPos, pageNumber); if (isRotate) { - setIsRotate(true); + setIsRotate({ status: true, degree: rotateDegree }); } else { const urlDetails = await rotatePdfPage( pdfDetails[0].URL, @@ -1744,8 +1747,16 @@ function PlaceHolderSign() { setPdfRotatese64(urlDetails.base64); } }; - const handleRemovePlaceholder = () => { + const handleRemovePlaceholder = async () => { handleRemoveWidgets(setSignerPos, signerPos, pageNumber, setIsRotate); + const urlDetails = await rotatePdfPage( + pdfDetails[0].URL, + isRotate.degree, + pageNumber - 1, + pdfRotateBase64 + ); + setPdfArrayBuffer && setPdfArrayBuffer(urlDetails.arrayBuffer); + setPdfRotatese64(urlDetails.base64); }; return ( <> @@ -2247,7 +2258,7 @@ function PlaceHolderSign() { setFontColor={setFontColor} /> <RotateAlert - isRotate={isRotate} + isRotate={isRotate.status} setIsRotate={setIsRotate} handleRemoveWidgets={handleRemovePlaceholder} /> diff --git a/apps/OpenSign/src/pages/SignyourselfPdf.js b/apps/OpenSign/src/pages/SignyourselfPdf.js index 345acedb8..3479f26e9 100644 --- a/apps/OpenSign/src/pages/SignyourselfPdf.js +++ b/apps/OpenSign/src/pages/SignyourselfPdf.js @@ -128,7 +128,10 @@ function SignYourSelf() { const isHeader = useSelector((state) => state.showHeader); const [scale, setScale] = useState(1); const [pdfRotateBase64, setPdfRotatese64] = useState(""); - const [isRotate, setIsRotate] = useState(false); + const [isRotate, setIsRotate] = useState({ + status: false, + degree: 0 + }); const divRef = useRef(null); const nodeRef = useRef(null); const [, drop] = useDrop({ @@ -1178,7 +1181,7 @@ function SignYourSelf() { const handleRotationFun = async (rotateDegree) => { const isPlaceholder = handleRotateWarning(); if (isPlaceholder) { - setIsRotate(true); + setIsRotate({ status: true, degree: rotateDegree }); } else { const urlDetails = await rotatePdfPage( pdfUrl || pdfDetails[0].URL, @@ -1203,12 +1206,20 @@ function SignYourSelf() { } }; //function to use remove widgets from current page when user want to rotate page - const handleRemoveWidgets = () => { + const handleRemoveWidgets = async () => { const updatePlaceholder = xyPostion.filter( (data) => data.pageNumber !== pageNumber ); + const urlDetails = await rotatePdfPage( + pdfUrl || pdfDetails[0].URL, + isRotate.degree, + pageNumber - 1, + pdfRotateBase64 + ); + setPdfArrayBuffer && setPdfArrayBuffer(urlDetails.arrayBuffer); + setPdfRotatese64(urlDetails.base64); setXyPostion(updatePlaceholder); - setIsRotate(false); + setIsRotate({ status: false, degree: 0 }); }; return ( <DndProvider backend={HTML5Backend}> @@ -1490,7 +1501,7 @@ function SignYourSelf() { </div> </ModalUi> <RotateAlert - isRotate={isRotate} + isRotate={isRotate.status} setIsRotate={setIsRotate} handleRemoveWidgets={handleRemoveWidgets} /> diff --git a/apps/OpenSign/src/pages/TemplatePlaceholder.js b/apps/OpenSign/src/pages/TemplatePlaceholder.js index 6754690f5..073f5d7c9 100644 --- a/apps/OpenSign/src/pages/TemplatePlaceholder.js +++ b/apps/OpenSign/src/pages/TemplatePlaceholder.js @@ -70,7 +70,10 @@ const TemplatePlaceholder = () => { const [isSendAlert, setIsSendAlert] = useState(false); const [isCreateDocModal, setIsCreateDocModal] = useState(false); const [isSubscribe, setIsSubscribe] = useState(false); - const [isRotate, setIsRotate] = useState(false); + const [isRotate, setIsRotate] = useState({ + status: false, + degree: 0 + }); const [isLoading, setIsLoading] = useState({ isLoad: true, message: t("loading-mssg") @@ -1334,7 +1337,7 @@ const TemplatePlaceholder = () => { const handleRotationFun = async (rotateDegree) => { const isRotate = handleRotateWarning(signerPos, pageNumber); if (isRotate) { - setIsRotate(true); + setIsRotate({ status: true, degree: rotateDegree }); } else { const urlDetails = await rotatePdfPage( pdfDetails[0].URL, @@ -1345,8 +1348,15 @@ const TemplatePlaceholder = () => { setPdfRotatese64(urlDetails.base64); } }; - const handleRemovePlaceholder = () => { + const handleRemovePlaceholder = async () => { handleRemoveWidgets(setSignerPos, signerPos, pageNumber, setIsRotate); + const urlDetails = await rotatePdfPage( + pdfDetails[0].URL, + isRotate.degree, + pageNumber - 1, + pdfRotateBase64 + ); + setPdfRotatese64(urlDetails.base64); }; return ( @@ -1734,7 +1744,7 @@ const TemplatePlaceholder = () => { setFontColor={setFontColor} /> <RotateAlert - isRotate={isRotate} + isRotate={isRotate.status} setIsRotate={setIsRotate} handleRemoveWidgets={handleRemovePlaceholder} /> From b7207112177b896afc42c23c281d609b365ef623 Mon Sep 17 00:00:00 2001 From: RaktimaNXG <raktima.c@nxglabs.com> Date: Wed, 21 Aug 2024 16:20:25 +0530 Subject: [PATCH 12/12] refactor code --- apps/OpenSign/src/components/Header.js | 6 +---- apps/OpenSign/src/components/pdf/PdfHeader.js | 12 +++------- apps/OpenSign/src/components/pdf/PdfZoom.js | 4 +--- apps/OpenSign/src/components/pdf/RenderPdf.js | 8 ++----- .../src/components/pdf/VerifyEmail.js | 4 +--- apps/OpenSign/src/pages/PdfRequestFiles.js | 22 ++++++------------- apps/OpenSign/src/pages/PlaceHolderSign.js | 12 +++------- apps/OpenSign/src/pages/SignyourselfPdf.js | 8 ++----- .../src/primitives/GetReportDisplay.js | 4 +--- 9 files changed, 21 insertions(+), 59 deletions(-) diff --git a/apps/OpenSign/src/components/Header.js b/apps/OpenSign/src/components/Header.js index 5bc4c360b..0c912ef09 100644 --- a/apps/OpenSign/src/components/Header.js +++ b/apps/OpenSign/src/components/Header.js @@ -227,11 +227,7 @@ const Header = ({ showSidebar }) => { <i className="fa-light fa-lock"></i> {t("change-password")} </span> </li> - <li - onClick={() => { - handleConsoleRedirect(); - }} - > + <li onClick={() => handleConsoleRedirect()}> <span> <i className="fa-light fa-id-card"></i> Console </span> diff --git a/apps/OpenSign/src/components/pdf/PdfHeader.js b/apps/OpenSign/src/components/pdf/PdfHeader.js index f92b99888..c8e833ce4 100644 --- a/apps/OpenSign/src/components/pdf/PdfHeader.js +++ b/apps/OpenSign/src/components/pdf/PdfHeader.js @@ -188,9 +188,7 @@ function Header({ ) : ( <div data-tut="reactourThird" - onClick={() => { - embedWidgetsData(); - }} + onClick={() => embedWidgetsData()} className="border-none font-[650] text-[14px] op-link op-link-primary no-underline" > {t("finish")} @@ -460,9 +458,7 @@ function Header({ <button type="button" className="op-btn op-btn-primary op-btn-sm shadow" - onClick={() => { - embedWidgetsData(); - }} + onClick={() => embedWidgetsData()} > {t("sign-now")} </button> @@ -479,9 +475,7 @@ function Header({ <button type="button" className="op-btn op-btn-primary op-btn-sm mr-[3px]" - onClick={() => { - embedWidgetsData(); - }} + onClick={() => embedWidgetsData()} > {t("finish")} </button> diff --git a/apps/OpenSign/src/components/pdf/PdfZoom.js b/apps/OpenSign/src/components/pdf/PdfZoom.js index 7afa83330..c315a16da 100644 --- a/apps/OpenSign/src/components/pdf/PdfZoom.js +++ b/apps/OpenSign/src/components/pdf/PdfZoom.js @@ -17,9 +17,7 @@ function PdfZoom(props) { <> <span className="bg-gray-50 px-[4px] 2xl:px-[15px] 2xl:py-[10px] cursor-pointer" - onClick={() => { - props.handleRotationFun(90); - }} + onClick={() => props.handleRotationFun(90)} title={t("rotate-right")} > <i className="fa-light fa-rotate-right text-gray-500 2xl:text-[30px]"></i> diff --git a/apps/OpenSign/src/components/pdf/RenderPdf.js b/apps/OpenSign/src/components/pdf/RenderPdf.js index 4fc3b6024..61a1ce297 100644 --- a/apps/OpenSign/src/components/pdf/RenderPdf.js +++ b/apps/OpenSign/src/components/pdf/RenderPdf.js @@ -424,9 +424,7 @@ function RenderPdf({ }))} <Document - onLoadError={() => { - setPdfLoad(false); - }} + onLoadError={() => setPdfLoad(false)} loading={t("loading-doc")} onLoadSuccess={pageDetails} // ref={pdfRef}' @@ -618,9 +616,7 @@ function RenderPdf({ {/* this component for render pdf document is in middle of the component */} <Document - onLoadError={() => { - setPdfLoad(false); - }} + onLoadError={() => setPdfLoad(false)} loading={t("loading-doc")} onLoadSuccess={pageDetails} onClick={() => { diff --git a/apps/OpenSign/src/components/pdf/VerifyEmail.js b/apps/OpenSign/src/components/pdf/VerifyEmail.js index e61ed1402..32857b76f 100644 --- a/apps/OpenSign/src/components/pdf/VerifyEmail.js +++ b/apps/OpenSign/src/components/pdf/VerifyEmail.js @@ -56,9 +56,7 @@ function VerifyEmail(props) { <button className="op-btn op-btn-primary" type="submit" - onClick={() => { - props.handleVerifyBtn(); - }} + onClick={() => props.handleVerifyBtn()} > {t("send-otp")} </button> diff --git a/apps/OpenSign/src/pages/PdfRequestFiles.js b/apps/OpenSign/src/pages/PdfRequestFiles.js index bf4c11e62..8bde5629a 100644 --- a/apps/OpenSign/src/pages/PdfRequestFiles.js +++ b/apps/OpenSign/src/pages/PdfRequestFiles.js @@ -1727,9 +1727,7 @@ function PdfRequestFiles(props) { <ModalUi isOpen={isPublicContact} title={isOtp ? t("verify-email-1") : t("contact-details")} - handleClose={() => { - handleCloseOtp(); - }} + handleClose={() => handleCloseOtp()} > <div className="h-full p-[20px]"> {isOtp ? ( @@ -1757,9 +1755,7 @@ function PdfRequestFiles(props) { <div className="flex gap-2"> <button className="op-btn op-btn-ghost" - onClick={() => { - handleCloseOtp(); - }} + onClick={() => handleCloseOtp()} > {t("cancel")} </button> @@ -1849,9 +1845,7 @@ function PdfRequestFiles(props) { <div className="flex gap-2"> <button className="op-btn op-btn-ghost" - onClick={() => { - handleCloseOtp(); - }} + onClick={() => handleCloseOtp()} > {t("close")} </button> @@ -1938,9 +1932,9 @@ function PdfRequestFiles(props) { <ModalUi isOpen={isCompleted.isModal} title={t("document-signed")} - handleClose={() => { - setIsCompleted((prev) => ({ ...prev, isModal: false })); - }} + handleClose={() => + setIsCompleted((prev) => ({ ...prev, isModal: false })) + } reduceWidth={ !isCompleted?.message && "md:min-w-[440px] md:max-w-[400px]" @@ -2189,9 +2183,7 @@ function PdfRequestFiles(props) { <ModalUi isOpen={validateAlert} title={t("validation-alert")} - handleClose={() => { - setValidateAlert(false); - }} + handleClose={() => setValidateAlert(false)} > <div className="h-[100%] p-[20px]"> <p>{t("validation-alert-1")}</p> diff --git a/apps/OpenSign/src/pages/PlaceHolderSign.js b/apps/OpenSign/src/pages/PlaceHolderSign.js index eb954465a..25b61f4ad 100644 --- a/apps/OpenSign/src/pages/PlaceHolderSign.js +++ b/apps/OpenSign/src/pages/PlaceHolderSign.js @@ -1941,9 +1941,7 @@ function PlaceHolderSign() { > {isCurrUser && ( <button - onClick={() => { - handleRecipientSign(); - }} + onClick={() => handleRecipientSign()} type="button" className="op-btn op-btn-primary mr-1" > @@ -1968,17 +1966,13 @@ function PlaceHolderSign() { <ModalUi isOpen={isShowEmail} title={t("signers-alert")} - handleClose={() => { - setIsShowEmail(false); - }} + handleClose={() => setIsShowEmail(false)} > <div className="h-[100%] p-[20px]"> <p>{t("placeholder-alert-7")}</p> <div className="w-full h-[1px] bg-[#9f9f9f] my-[15px]"></div> <button - onClick={() => { - setIsShowEmail(false); - }} + onClick={() => setIsShowEmail(false)} type="button" className="op-btn op-btn-primary" > diff --git a/apps/OpenSign/src/pages/SignyourselfPdf.js b/apps/OpenSign/src/pages/SignyourselfPdf.js index 3479f26e9..a65fdc159 100644 --- a/apps/OpenSign/src/pages/SignyourselfPdf.js +++ b/apps/OpenSign/src/pages/SignyourselfPdf.js @@ -1305,9 +1305,7 @@ function SignYourSelf() { <ModalUi isOpen={showAlreadySignDoc.status} title={t("document-signed")} - handleClose={() => { - setShowAlreadySignDoc({ status: false }); - }} + handleClose={() => setShowAlreadySignDoc({ status: false })} > <div className="p-[20px] h-full"> <p>{showAlreadySignDoc.mssg}</p> @@ -1483,9 +1481,7 @@ function SignYourSelf() { <ModalUi isOpen={validateAlert} title={t("validation-alert")} - handleClose={() => { - setValidateAlert(false); - }} + handleClose={() => setValidateAlert(false)} > <div className="p-[20px] h-full"> <p>{t("validate-alert-mssg")}</p> diff --git a/apps/OpenSign/src/primitives/GetReportDisplay.js b/apps/OpenSign/src/primitives/GetReportDisplay.js index 16564a45f..af057522f 100644 --- a/apps/OpenSign/src/primitives/GetReportDisplay.js +++ b/apps/OpenSign/src/primitives/GetReportDisplay.js @@ -1318,9 +1318,7 @@ const ReportTable = (props) => { <ModalUi isOpen title={t("public-url")} - handleClose={() => { - setIsPublicProfile({}); - }} + handleClose={() => setIsPublicProfile({})} > <div className="m-[20px]"> {publicUserName ? (