fix: handle pdfRequest sign flow rotate pdf page not allowed

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=[]
-    <span className="hidden md:flex flex-col gap-1 text-center md:w-[5%] mt-[50px] 2xl:mt-[63px]">
+    <span className="hidden md:flex flex-col gap-1 text-center md:w-[5%] mt-[43px] 2xl:mt-[63px]">
       <span
         className="bg-gray-50 px-[4px] 2xl:px-[15px] 2xl:py-[10px] cursor-pointer"
         onClick={onClickZoomIn}
@@ -63,28 +38,24 @@ function PdfZoom(props) {
       >
         <i className="fa-light fa-magnifying-glass-plus text-gray-500 2xl:text-[30px]"></i>
       </span>
-      <span
-        className="bg-gray-50 px-[4px] 2xl:px-[15px] 2xl:py-[10px] cursor-pointer"
-        onClick={() => handleRotateRight()}
-        title={t("Rotate right")}
-      >
-        <i className="fa-light fa-rotate-right text-gray-500 2xl:text-[30px]"></i>
-      </span>
-
-      {/* <span
-        className="bg-gray-50 px-[4px] 2xl:px-[15px] 2xl:py-[10px] cursor-pointer"
-        onClick={handleReset}
-        title={t("reset")}
-      >
-        <i className="fa-light fa-magnifying-glass-arrows-rotate text-gray-500 2xl:text-[30px]"></i>
-      </span> */}
-      <span
-        className="bg-gray-50 px-[4px] 2xl:px-[15px] 2xl:py-[10px] cursor-pointer"
-        title={t("Rotate left")}
-        onClick={() => handleRotateLeft()}
-      >
-        <i className="fa-light fa-rotate-left text-gray-500 2xl:text-[30px]"></i>
-      </span>
+      {!props?.isDisableRotate && (
+        <>
+          <span
+            className="bg-gray-50 px-[4px] 2xl:px-[15px] 2xl:py-[10px] cursor-pointer"
+            onClick={() => handleRotationFun(90)}
+            title={t("Rotate right")}
+          >
+            <i className="fa-light fa-rotate-right text-gray-500 2xl:text-[30px]"></i>
+          </span>
+          <span
+            className="bg-gray-50 px-[4px] 2xl:px-[15px] 2xl:py-[10px] cursor-pointer"
+            title={t("Rotate left")}
+            onClick={() => handleRotationFun(-90)}
+          >
+            <i className="fa-light fa-rotate-left text-gray-500 2xl:text-[30px]"></i>
+          </span>
+        </>
+      )}
       <span
         className="bg-gray-50 px-[4px] 2xl:px-[15px] 2xl:py-[10px]"
         onClick={onClickZoomOut}

apps/OpenSign/src/components/pdf/RenderAllPdfPage.js

@@ -13,7 +13,6 @@ function RenderAllPdfPage({
   signerPos,
   signerObjectId,
   containerWH,
-  setRotateDegree,
   pdfRotateBase64
 }) {
   const { t } = useTranslation();
@@ -91,7 +90,6 @@ function RenderAllPdfPage({
               } border-2   m-[10px] flex justify-center items-center relative`}
               onClick={() => {
                 setPageNumber(index + 1);
-                setRotateDegree(0);
                 if (setSignBtnPosition) {
                   setSignBtnPosition([]);
                 }

apps/OpenSign/src/components/pdf/RenderPdf.js

@@ -600,7 +600,6 @@ function RenderPdf({
               }
             >
               <Page
-                // rotate={rotateDegree}
                 key={index}
                 width={containerWH.width}
                 scale={scale || 1}

apps/OpenSign/src/constant/Utils.js

@@ -1071,13 +1071,18 @@ export const embedDocId = async (pdfDoc, documentId, allPages) => {
     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;
+};

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 */}
                 <div className=" w-full md:w-[57%] flex mr-4">
@@ -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}
                   />
                   <div className=" w-full md:w-[95%] ">
                     {/* 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}
                         />
                       )}
                     </div>

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)

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}
             />
             <div className=" w-full md:w-[57%] flex mr-4">
@@ -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)

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}