feat: implement functionality to delete a PDF page while editing the document

apps/OpenSign/public/locales/en/translation.json

@@ -709,5 +709,9 @@
   },
   "expiry-date": "Expiry Date",
   "expiry-date-updated": "The expiry date has been successfully extended to {{newexpirydate}}",
-  "expiry-date-error": "Please provide a new expiry date that is later than the current one"
+  "expiry-date-error": "Please provide a new expiry date that is later than the current one",
+  "delete-page":"Delete page",
+  "delete-alert":"Can not delete single page",
+  "delete-alert-2":"Are you sure want to delete this page ?",
+  "delete-note":"Note - once delete this page you can not undo"
 }

apps/OpenSign/public/locales/es/translation.json

@@ -709,5 +709,9 @@
   },
   "expiry-date": "Date d'expiration",
   "expiry-date-updated": "La fecha de vencimiento se ha extendido con éxito hasta el {{newexpirydate}}",
-  "expiry-date-error": "Proporcione una nueva fecha de vencimiento que sea posterior a la actual"
+  "expiry-date-error": "Proporcione una nueva fecha de vencimiento que sea posterior a la actual",
+  "delete-page": "eliminar página",
+  "delete-alert": "No se puede eliminar una sola página",
+  "delete-alert-2": "¿Está seguro de que desea eliminar esta página?",
+  "delete-note": "Nota: una vez que elimines esta página, no podrás deshacerla"
 }

apps/OpenSign/public/locales/fr/translation.json

@@ -708,5 +708,9 @@
   },
   "expiry-date": "Fecha de caducidad",
   "expiry-date-updated": "La fecha de vencimiento se ha extendido con éxito hasta el {{newexpirydate}}",
-  "expiry-date-error": "Veuillez fournir une nouvelle date d'expiration postérieure à la date actuelle"
+  "expiry-date-error": "Veuillez fournir une nouvelle date d'expiration postérieure à la date actuelle",
+   "delete-page": "supprimer la page",
+   "delete-alert": "Impossible de supprimer une seule page",
+   "delete-alert-2": "Etes-vous sûr de vouloir supprimer cette page ?",
+   "delete-note": "Remarque : une fois cette page supprimée, vous ne pouvez plus l'annuler"
 }

apps/OpenSign/src/components/RotateAlert.js

@@ -6,9 +6,9 @@ function RotateAlert(props) {
   const { t } = useTranslation();
   return (
     <ModalUi
-      isOpen={props.isRotate}
+      isOpen={props.showRotateAlert}
       title={t("Rotation-alert")}
-      handleClose={() => props.setIsRotate({ status: false, degree: 0 })}
+      handleClose={() => props.setShowRotateAlert({ status: false, degree: 0 })}
     >
       {" "}
       <div className="p-[20px] h-full">
@@ -16,7 +16,9 @@ function RotateAlert(props) {
         <div className="h-[1px]  w-full my-[15px] bg-[#9f9f9f]"></div>
         <div className="flex gap-1">
           <button
-            onClick={() => props.setIsRotate({ status: false, degree: 0 })}
+            onClick={() =>
+              props.setShowRotateAlert({ status: false, degree: 0 })
+            }
             type="button"
             className="op-btn op-btn-ghost shadow-md"
           >

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

@@ -1,8 +1,10 @@
 import React, { useState } from "react";
 import PrevNext from "./PrevNext";
 import {
+  deletePdfPage,
   handleDownloadCertificate,
   handleDownloadPdf,
+  handleRemoveWidgets,
   handleToPrint
 } from "../../constant/Utils";
 import "../../styles/signature.css";
@@ -41,7 +43,13 @@ function Header({
   isDisableRotate,
   templateId,
   setIsDownloadModal,
-  disabledBackBtn
+  disabledBackBtn,
+  setPdfArrayBuffer,
+  setPdfBase64Url,
+  pdfArrayBuffer,
+  setIsUploadPdf,
+  setSignerPos,
+  userId
 }) {
   const { t } = useTranslation();
   const filterPrefill =
@@ -49,6 +57,7 @@ function Header({
   const isMobile = window.innerWidth < 767;
   const [isDownloading, setIsDownloading] = useState("");
   const isGuestSigner = localStorage.getItem("isGuestSigner");
+  const [isDeletePage, setIsDeletePage] = useState(false);
   const enabledBackBtn = disabledBackBtn === true ? false : true;
 
   //function for show decline alert
@@ -56,6 +65,18 @@ function Header({
     const currentDecline = { currnt: "Sure", isDeclined: true };
     setIsDecline(currentDecline);
   };
+  const handleDetelePage = async () => {
+    setIsUploadPdf(true);
+    const pdfupdatedData = await deletePdfPage(pdfArrayBuffer, pageNumber);
+    if (pdfupdatedData?.totalPages === 1) {
+      alert(t("delete-alert"));
+    } else {
+      setPdfBase64Url(pdfupdatedData.base64);
+      setPdfArrayBuffer(pdfupdatedData.arrayBuffer);
+      setIsDeletePage(false);
+      handleRemoveWidgets(setSignerPos, signerPos, pageNumber, userId);
+    }
+  };
   return (
     <div className="flex py-[5px]">
       {isMobile && isShowHeader ? (
@@ -255,6 +276,17 @@ function Header({
                                   </span>
                                 </div>
                               </DropdownMenu.Item>
+                              <DropdownMenu.Item
+                                className="DropdownMenuItem"
+                                onClick={() => setIsDeletePage(true)}
+                              >
+                                <div className="flex flex-row">
+                                  <i className="fa-light fa-trash  text-gray-500 2xl:text-[30px] mr-[3px]"></i>
+                                  <span className="font-[500]">
+                                    {t("delete-page")}
+                                  </span>
+                                </div>
+                              </DropdownMenu.Item>
                             </>
                           )}
 
@@ -553,6 +585,32 @@ function Header({
           <p>{t("generate-certificate-alert")}</p>
         </div>
       </ModalUi>
+      <ModalUi
+        isOpen={isDeletePage}
+        title={t("validation-alert")}
+        handleClose={() => setIsDeletePage(false)}
+      >
+        <div className="h-[100%] p-[20px]">
+          <p>{t("delete-alert-2")}</p>
+          <p className="pt-3 font-medium">{t("delete-note")}</p>
+          {/* <p>{t("deletepage-alert")}</p> */}
+          <div className="h-[1px] bg-[#9f9f9f] w-full my-[15px]"></div>
+          <button
+            onClick={() => handleDetelePage()}
+            type="button"
+            className="op-btn op-btn-primary"
+          >
+            {t("yes")}
+          </button>
+          <button
+            onClick={() => setIsDeletePage(false)}
+            type="button"
+            className="op-btn op-btn-ghost"
+          >
+            {t("no")}
+          </button>
+        </div>
+      </ModalUi>
     </div>
   );
 }

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

@@ -1,47 +1,115 @@
-import React from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { deletePdfPage, handleRemoveWidgets } from "../../constant/Utils";
+import ModalUi from "../../primitives/ModalUi";
 
 function PdfZoom(props) {
   const { t } = useTranslation();
+  const [isDeletePage, setIsDeletePage] = useState(false);
+  const handleDetelePage = async () => {
+    props.setIsUploadPdf(true);
+    try {
+      const pdfupdatedData = await deletePdfPage(
+        props.pdfArrayBuffer,
+        props.pageNumber
+      );
+      if (pdfupdatedData?.totalPages === 1) {
+        alert(t("delete-alert"));
+      } else {
+        props.setPdfBase64Url(pdfupdatedData.base64);
+        props.setPdfArrayBuffer(pdfupdatedData.arrayBuffer);
+        setIsDeletePage(false);
+        handleRemoveWidgets(
+          props.setSignerPos,
+          props.signerPos,
+          props.pageNumber,
+          props.userId
+        );
+      }
+    } catch (e) {
+      console.log("error in delete pdf page", e);
+    }
+  };
 
   return (
-    <span className="hidden md:flex flex-col gap-1 text-center md:w-[5%] mt-[43px] 2xl:mt-[63px]">
+    <>
-      <span
+      <span className="hidden md:flex flex-col gap-1 text-center md:w-[5%] mt-[43px] 2xl:mt-[63px]">
-        className="bg-gray-50 px-[4px] 2xl:px-[15px] 2xl:py-[10px] cursor-pointer"
+        <span
-        onClick={() => props.clickOnZoomIn()}
+          className="bg-gray-50 px-[4px] 2xl:px-[15px] 2xl:py-[10px] cursor-pointer"
-        title={t("zoom-in")}
+          onClick={() => props.clickOnZoomIn()}
-      >
+          title={t("zoom-in")}
-        <i className="fa-light fa-magnifying-glass-plus text-gray-500 2xl:text-[30px]"></i>
+        >
-      </span>
+          <i className="fa-light fa-magnifying-glass-plus text-gray-500 2xl:text-[30px]"></i>
-      {!props?.isDisableRotate && (
+        </span>
-        <>
+        {!props.isDisableDelete && (
           <span
             className="bg-gray-50 px-[4px] 2xl:px-[15px] 2xl:py-[10px] cursor-pointer"
-            onClick={() => props.handleRotationFun(90)}
+            onClick={() => setIsDeletePage(true)}
-            title={t("rotate-right")}
+            title={t("delete-page")}
           >
-            <i className="fa-light fa-rotate-right text-gray-500 2xl:text-[30px]"></i>
+            <i className="fa-light fa-trash 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")}
+        {!props?.isDisableRotate && (
-            onClick={() => props.handleRotationFun(-90)}
+          <>
-          >
+            <span
-            <i className="fa-light fa-rotate-left text-gray-500 2xl:text-[30px]"></i>
+              className="bg-gray-50 px-[4px] 2xl:px-[15px] 2xl:py-[10px] cursor-pointer"
-          </span>
+              onClick={() => props.handleRotationFun(90)}
-        </>
+              title={t("rotate-right")}
-      )}
+            >
-      <span
+              <i className="fa-light fa-rotate-right text-gray-500 2xl:text-[30px]"></i>
-        className="bg-gray-50 px-[4px] 2xl:px-[15px] 2xl:py-[10px]"
+            </span>
-        onClick={() => props.clickOnZoomOut()}
+            <span
-        style={{
+              className="bg-gray-50 px-[4px] 2xl:px-[15px] 2xl:py-[10px] cursor-pointer"
-          cursor: props.zoomPercent > 0 ? "pointer" : "default"
+              title={t("rotate-left")}
-        }}
+              onClick={() => props.handleRotationFun(-90)}
-        title={t("zoom-out")}
+            >
-      >
+              <i className="fa-light fa-rotate-left text-gray-500 2xl:text-[30px]"></i>
-        <i className="fa-light fa-magnifying-glass-minus text-gray-500 2xl:text-[30px]"></i>
+            </span>
+          </>
+        )}
+        <span
+          className="bg-gray-50 px-[4px] 2xl:px-[15px] 2xl:py-[10px]"
+          onClick={() => props.clickOnZoomOut()}
+          style={{
+            cursor: props.zoomPercent > 0 ? "pointer" : "default"
+          }}
+          title={t("zoom-out")}
+        >
+          <i className="fa-light fa-magnifying-glass-minus text-gray-500 2xl:text-[30px]"></i>
+        </span>
       </span>
-    </span>
+
+      <ModalUi
+        isOpen={isDeletePage}
+        title={t("validation-alert")}
+        handleClose={() => setIsDeletePage(false)}
+      >
+        <div className="h-[100%] p-[20px]">
+          <p>Are you sure want to delete this page ?</p>
+          <p className="pt-3 font-medium">
+            Note - once delete this page you can not undo
+          </p>
+          {/* <p>{t("deletepage-alert")}</p> */}
+          <div className="h-[1px] bg-[#9f9f9f] w-full my-[15px]"></div>
+          <button
+            onClick={() => handleDetelePage()}
+            type="button"
+            className="op-btn op-btn-primary"
+          >
+            {t("yes")}
+          </button>
+          <button
+            onClick={() => setIsDeletePage(false)}
+            type="button"
+            className="op-btn op-btn-ghost"
+          >
+            {t("no")}
+          </button>
+        </div>
+      </ModalUi>
+    </>
   );
 }
 

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

@@ -13,7 +13,7 @@ function RenderAllPdfPage({
   signerPos,
   signerObjectId,
   containerWH,
-  pdfRotateBase64
+  pdfBase64Url
 }) {
   const { t } = useTranslation();
   const [signPageNumber, setSignPageNumber] = useState([]);
@@ -67,7 +67,7 @@ function RenderAllPdfPage({
       )
     );
   };
-  const pdfDataBase64 = `data:application/pdf;base64,${pdfRotateBase64}`;
+  const pdfDataBase64 = `data:application/pdf;base64,${pdfBase64Url}`;
   return (
     <div ref={pageContainer} className="hidden w-[20%] bg-base-100 md:block">
       <div className="mx-2 pr-2 pt-2 pb-1 text-[15px] text-base-content font-semibold border-b-[1px] border-base-300">
@@ -80,7 +80,7 @@ function RenderAllPdfPage({
         <Document
           loading={t("loading-doc")}
           onLoadSuccess={onDocumentLoad}
-          file={(pdfRotateBase64 && pdfDataBase64) || signPdfUrl}
+          file={(pdfBase64Url && pdfDataBase64) || signPdfUrl}
         >
           {Array.from(new Array(allPages), (el, index) => (
             <div

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

@@ -61,7 +61,7 @@ function RenderPdf({
   setIsSelectId,
   ispublicTemplate,
   handleUserDetails,
-  pdfRotateBase64,
+  pdfBase64Url,
   fontSize,
   setFontSize,
   fontColor,
@@ -256,8 +256,7 @@ function RenderPdf({
       );
     }
   };
-  const pdfDataBase64 = `data:application/pdf;base64,${pdfRotateBase64}`;
+  const pdfDataBase64 = `data:application/pdf;base64,${pdfBase64Url}`;
-
   return (
     <>
       {successEmail && (
@@ -377,10 +376,11 @@ function RenderPdf({
                       return (
                         <React.Fragment key={ind}>
                           {data.pageNumber === pageNumber &&
-                            data.pos.map((pos) => {
+                            data.pos.map((pos, id) => {
                               return (
                                 pos && (
                                   <Placeholder
+                                    key={id}
                                     pos={pos}
                                     setIsPageCopy={setIsPageCopy}
                                     setSignKey={setSignKey}
@@ -443,7 +443,7 @@ function RenderPdf({
                 }
               }}
               file={
-                (pdfRotateBase64 && pdfDataBase64) ||
+                (pdfBase64Url && pdfDataBase64) ||
                 pdfDetails[0]?.SignedUrl ||
                 pdfDetails[0].URL
               }
@@ -640,9 +640,8 @@ function RenderPdf({
                   setSelectWidgetId("");
                 }
               }}
-              // ref={pdfRef}
               file={
-                (pdfRotateBase64 && pdfDataBase64) ||
+                (pdfBase64Url && pdfDataBase64) ||
                 pdfDetails[0]?.SignedUrl ||
                 pdfDetails[0].URL
               }

apps/OpenSign/src/constant/Utils.js

@@ -2425,23 +2425,9 @@ export const getDefaultSignature = async (objectId) => {
 };
 
 //function to rotate pdf page
-export async function rotatePdfPage(
+export async function rotatePdfPage(rotateDegree, pageNumber, pdfArrayBuffer) {
-  url,
-  rotateDegree,
-  pageNumber,
-  pdfRotateBase64
-) {
-  let file;
-
-  //condition to handle pdf base64 in arrayBuffer format
-  if (pdfRotateBase64) {
-    file = base64ToArrayBuffer(pdfRotateBase64);
-  } else {
-    //condition to handle pdf url in arrayBuffer format
-    file = await convertPdfArrayBuffer(url);
-  }
   // Load the existing PDF
-  const pdfDoc = await PDFDocument.load(file);
+  const pdfDoc = await PDFDocument.load(pdfArrayBuffer);
   // Get the page according to page number
   const page = pdfDoc.getPage(pageNumber);
   //get current page rotation angle
@@ -2507,21 +2493,35 @@ export const handleRemoveWidgets = (
   setSignerPos,
   signerPos,
   pageNumber,
+  userId,
   setIsRotate
 ) => {
-  const updatedSignerPos = signerPos.map((placeholderObj) => {
+  const isSigners = signerPos.some((data) => data.signerPtr);
-    return {
+  if (isSigners) {
-      ...placeholderObj,
+    const updatedSignerPos = signerPos.map((placeholderObj) => {
-      placeHolder: placeholderObj?.placeHolder?.filter(
+      if (placeholderObj.Id === userId) {
-        (data) => data?.pageNumber !== pageNumber
+        return {
-      )
+          ...placeholderObj,
-    };
+          placeHolder: placeholderObj?.placeHolder?.filter(
-  });
+            (data) => data?.pageNumber !== pageNumber
-  setSignerPos(updatedSignerPos);
+          )
-  setIsRotate({
+        };
-    status: false,
+      } else {
-    degree: 0
+        return placeholderObj;
-  });
+      }
+    });
+    setSignerPos(updatedSignerPos);
+    setIsRotate &&
+      setIsRotate({
+        status: false,
+        degree: 0
+      });
+  } else {
+    const updatedSignerPos = signerPos.filter(
+      (data) => data?.pageNumber !== pageNumber
+    );
+    setSignerPos(updatedSignerPos);
+  }
 };
 //function to show warning when user rotate page and there are some already widgets on that page
 export const handleRotateWarning = (signerPos, pageNumber) => {
@@ -2610,3 +2610,23 @@ export const formatDate = (date) => {
   const format = formattedDate.replaceAll(/ /g, "-");
   return format;
 };
+
+export const deletePdfPage = async (pdfArrayBuffer, pageNumber) => {
+  // Load the existing PDF
+  const pdfDoc = await PDFDocument.load(pdfArrayBuffer);
+  // Get the total number of pages
+  const totalPages = pdfDoc.getPageCount();
+  // Ensure the page index is valid
+  if (totalPages > 1) {
+    //Remove the specified page
+    pdfDoc.removePage(pageNumber - 1);
+    // Save the modified PDF
+    const modifiedPdfBytes = await pdfDoc.saveAsBase64({
+      useObjectStreams: false
+    });
+    const arrayBuffer = base64ToArrayBuffer(modifiedPdfBytes);
+    return { arrayBuffer: arrayBuffer, base64: modifiedPdfBytes };
+  } else {
+    return { totalPages: 1 };
+  }
+};

apps/OpenSign/src/pages/PdfRequestFiles.js

@@ -41,7 +41,8 @@ import {
   fetchUrl,
   signatureTypes,
   handleSignatureType,
-  getTenantDetails
+  getTenantDetails,
+  getBase64FromUrl
 } from "../constant/Utils";
 import Header from "../components/pdf/PdfHeader";
 import RenderPdf from "../components/pdf/RenderPdf";
@@ -146,6 +147,7 @@ function PdfRequestFiles(props) {
   const divRef = useRef(null);
   const [isDownloadModal, setIsDownloadModal] = useState(false);
   const [signatureType, setSignatureType] = useState([]);
+  const [pdfBase64Url, setPdfBase64Url] = useState("");
   const isMobile = window.innerWidth < 767;
 
   let isGuestSignFlow = false;
@@ -323,10 +325,9 @@ function PdfRequestFiles(props) {
             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 base64Pdf = await getBase64FromUrl(url);
-            const arrayBuffer = await convertPdfArrayBuffer(url);
+            if (base64Pdf) {
-            if (arrayBuffer === "Error") {
+              setPdfBase64Url(base64Pdf);
-              setHandleError(t("something-went-wrong-mssg"));
             }
           } else {
             setHandleError(t("something-went-wrong-mssg"));
@@ -443,10 +444,9 @@ function PdfRequestFiles(props) {
           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 base64Pdf = await getBase64FromUrl(url);
-          const arrayBuffer = await convertPdfArrayBuffer(url);
+          if (base64Pdf) {
-          if (arrayBuffer === "Error") {
+            setPdfBase64Url(base64Pdf);
-            setHandleError(t("something-went-wrong-mssg"));
           }
         } else {
           setHandleError(t("something-went-wrong-mssg"));
@@ -2063,15 +2063,12 @@ function PdfRequestFiles(props) {
                 <RenderAllPdfPage
                   signerPos={signerPos}
                   signerObjectId={signerObjectId}
-                  signPdfUrl={
-                    pdfDetails[0] &&
-                    (pdfDetails[0]?.SignedUrl || pdfDetails[0]?.URL)
-                  }
                   allPages={allPages}
                   setAllPages={setAllPages}
                   setPageNumber={setPageNumber}
                   pageNumber={pageNumber}
                   containerWH={containerWH}
+                  pdfBase64Url={pdfBase64Url}
                 />
                 {/* pdf render view */}
                 <div className=" w-full md:w-[57%] flex mr-4">
@@ -2079,6 +2076,7 @@ function PdfRequestFiles(props) {
                     clickOnZoomIn={clickOnZoomIn}
                     clickOnZoomOut={clickOnZoomOut}
                     isDisableRotate={true}
+                    isDisableDelete={true}
                   />
                   <div className=" w-full md:w-[95%] ">
                     {/* this modal is used show this document is already sign */}
@@ -2272,6 +2270,7 @@ function PdfRequestFiles(props) {
                           uniqueId={uniqueId}
                           ispublicTemplate={isPublicTemplate}
                           handleUserDetails={handleUserDetails}
+                          pdfBase64Url={pdfBase64Url}
                         />
                       )}
                     </div>

apps/OpenSign/src/pages/PlaceHolderSign.js

@@ -41,7 +41,8 @@ import {
   handleRotateWarning,
   signatureTypes,
   handleSignatureType,
-  formatDate
+  formatDate,
+  getBase64FromUrl
 } from "../constant/Utils";
 import RenderPdf from "../components/pdf/RenderPdf";
 import { useNavigate } from "react-router-dom";
@@ -140,7 +141,7 @@ function PlaceHolderSign() {
   const [pdfArrayBuffer, setPdfArrayBuffer] = useState("");
   const isHeader = useSelector((state) => state.showHeader);
   const [activeMailAdapter, setActiveMailAdapter] = useState("");
-  const [isRotate, setIsRotate] = useState({
+  const [showRotateAlert, setShowRotateAlert] = useState({
     status: false,
     degree: 0
   });
@@ -152,11 +153,12 @@ function PlaceHolderSign() {
   const [isCustomize, setIsCustomize] = useState(false);
   const [zoomPercent, setZoomPercent] = useState(0);
   const [scale, setScale] = useState(1);
-  const [pdfRotateBase64, setPdfRotatese64] = useState("");
+  const [pdfBase64Url, setPdfBase64Url] = useState("");
   const [planCode, setPlanCode] = useState("");
   const [unSignedWidgetId, setUnSignedWidgetId] = useState("");
   const [signatureType, setSignatureType] = useState(signatureTypes);
   const [emailResetDate, setEmailResetDate] = useState("");
+  const [isUploadPdf, setIsUploadPdf] = useState(false);
   const isMobile = window.innerWidth < 767;
   const [, drop] = useDrop({
     accept: "BOX",
@@ -266,9 +268,11 @@ function PlaceHolderSign() {
       const url = documentData[0] && documentData[0]?.URL;
       //convert document url in array buffer format to use embed widgets in pdf using pdf-lib
       const arrayBuffer = await convertPdfArrayBuffer(url);
+      const base64Pdf = await getBase64FromUrl(url);
       if (arrayBuffer === "Error") {
         setHandleError(t("something-went-wrong-mssg"));
       } else {
+        setPdfBase64Url(base64Pdf);
         setPdfArrayBuffer(arrayBuffer);
       }
       if (documentData[0]?.ExtUserPtr?.LastEmailCountReset?.iso) {
@@ -859,15 +863,12 @@ function PlaceHolderSign() {
       } catch (e) {
         console.log("error to convertBase64ToFile in placeholder flow", e);
       }
-    } else if (pdfRotateBase64) {
+    } else if (pdfBase64Url) {
       try {
         const pdfUrl = await convertBase64ToFile(
           pdfDetails[0].Name,
-          pdfRotateBase64
+          pdfBase64Url
         );
-        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);
@@ -940,7 +941,6 @@ function PlaceHolderSign() {
       }
     }
   };
-
   useEffect(() => {
     const timer = setTimeout(() => {
       if (signerPos?.length > 0 && !pdfDetails?.[0]?.IsCompleted) {
@@ -949,7 +949,7 @@ function PlaceHolderSign() {
     }, 2000);
     return () => clearTimeout(timer);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [signerPos, signersdata, signatureType]);
+  }, [signerPos, signersdata, signatureType, pdfBase64Url]);
 
   // `autosavedetails` is used to save doc details after every 2 sec when changes are happern in placeholder like drag-drop widgets, remove signers
   const autosavedetails = async () => {
@@ -963,12 +963,20 @@ function PlaceHolderSign() {
       }
       return acc;
     }, []);
+    let pdfUrl;
+    if (isUploadPdf) {
+      pdfUrl = await convertBase64ToFile(pdfDetails[0].Name, pdfBase64Url);
+    }
     try {
       const docCls = new Parse.Object("contracts_Document");
       docCls.id = documentId;
       docCls.set("Placeholders", signerPos);
       docCls.set("Signers", signers);
       docCls.set("SignatureType", signatureType);
+      if (pdfUrl) {
+        docCls.set("URL", pdfUrl);
+      }
+
       await docCls.save();
     } catch (e) {
       console.log("error", e);
@@ -1741,30 +1749,36 @@ function PlaceHolderSign() {
   };
   //`handleRotationFun` function is used to roatate pdf particular page
   const handleRotationFun = async (rotateDegree) => {
-    const isRotate = handleRotateWarning(signerPos, pageNumber);
+    const rotatePlaceholderExist = handleRotateWarning(signerPos, pageNumber);
-    if (isRotate) {
+    //show rotation alert if widgets already exist
-      setIsRotate({ status: true, degree: rotateDegree });
+    if (rotatePlaceholderExist) {
+      setShowRotateAlert({ status: true, degree: rotateDegree });
     } else {
+      setIsUploadPdf(true);
       const urlDetails = await rotatePdfPage(
-        pdfDetails[0].URL,
         rotateDegree,
         pageNumber - 1,
-        pdfRotateBase64
+        pdfBase64Url
       );
       setPdfArrayBuffer && setPdfArrayBuffer(urlDetails.arrayBuffer);
-      setPdfRotatese64(urlDetails.base64);
+      setPdfBase64Url(urlDetails.base64);
     }
   };
   const handleRemovePlaceholder = async () => {
-    handleRemoveWidgets(setSignerPos, signerPos, pageNumber, setIsRotate);
+    handleRemoveWidgets(
+      setSignerPos,
+      signerPos,
+      pageNumber,
+      uniqueId,
+      setShowRotateAlert
+    );
     const urlDetails = await rotatePdfPage(
-      pdfDetails[0].URL,
+      showRotateAlert.degree,
-      isRotate.degree,
       pageNumber - 1,
-      pdfRotateBase64
+      pdfArrayBuffer
     );
     setPdfArrayBuffer && setPdfArrayBuffer(urlDetails.arrayBuffer);
-    setPdfRotatese64(urlDetails.base64);
+    setPdfBase64Url(urlDetails.base64);
   };
   return (
     <>
@@ -1821,7 +1835,7 @@ function PlaceHolderSign() {
                 setPageNumber={setPageNumber}
                 setSignBtnPosition={setSignBtnPosition}
                 pageNumber={pageNumber}
-                pdfRotateBase64={pdfRotateBase64}
+                pdfBase64Url={pdfBase64Url}
               />
               {/* pdf render view */}
               <div className=" w-full md:w-[57%] flex mr-4">
@@ -1829,6 +1843,14 @@ function PlaceHolderSign() {
                   clickOnZoomIn={clickOnZoomIn}
                   clickOnZoomOut={clickOnZoomOut}
                   handleRotationFun={handleRotationFun}
+                  pdfArrayBuffer={pdfArrayBuffer}
+                  pageNumber={pageNumber}
+                  setPdfBase64Url={setPdfBase64Url}
+                  setPdfArrayBuffer={setPdfArrayBuffer}
+                  setIsUploadPdf={setIsUploadPdf}
+                  setSignerPos={setSignerPos}
+                  signerPos={signerPos}
+                  userId={uniqueId}
                 />
                 <div className=" w-full md:w-[95%] ">
                   {/* this modal is used show alert set placeholder for all signers before send mail */}
@@ -2093,6 +2115,12 @@ function PlaceHolderSign() {
                     handleRotationFun={handleRotationFun}
                     clickOnZoomIn={clickOnZoomIn}
                     clickOnZoomOut={clickOnZoomOut}
+                    setIsUploadPdf={setIsUploadPdf}
+                    pdfArrayBuffer={pdfArrayBuffer}
+                    setPdfArrayBuffer={setPdfArrayBuffer}
+                    setPdfBase64Url={setPdfBase64Url}
+                    setSignerPos={setSignerPos}
+                    userId={uniqueId}
                   />
 
                   <div
@@ -2141,7 +2169,7 @@ function PlaceHolderSign() {
                         setScale={setScale}
                         scale={scale}
                         setIsSelectId={setIsSelectId}
-                        pdfRotateBase64={pdfRotateBase64}
+                        pdfBase64Url={pdfBase64Url}
                         fontSize={fontSize}
                         setFontSize={setFontSize}
                         fontColor={fontColor}
@@ -2286,8 +2314,8 @@ function PlaceHolderSign() {
           setFontColor={setFontColor}
         />
         <RotateAlert
-          isRotate={isRotate.status}
+          showRotateAlert={showRotateAlert.status}
-          setIsRotate={setIsRotate}
+          setShowRotateAlert={setShowRotateAlert}
           handleRemoveWidgets={handleRemovePlaceholder}
         />
       </DndProvider>

apps/OpenSign/src/pages/SignyourselfPdf.js

@@ -37,7 +37,9 @@ import {
   onClickZoomIn,
   onClickZoomOut,
   rotatePdfPage,
-  signatureTypes
+  signatureTypes,
+  getBase64FromUrl,
+  convertBase64ToFile
 } from "../constant/Utils";
 import { useParams } from "react-router-dom";
 import Tour from "reactour";
@@ -129,11 +131,12 @@ function SignYourSelf() {
   const [zoomPercent, setZoomPercent] = useState(0);
   const isHeader = useSelector((state) => state.showHeader);
   const [scale, setScale] = useState(1);
-  const [pdfRotateBase64, setPdfRotatese64] = useState("");
+  const [pdfBase64Url, setPdfBase64Url] = useState("");
   const [isRotate, setIsRotate] = useState({ status: false, degree: 0 });
   const [isSubscribe, setIsSubscribe] = useState({ plan: "", isValid: true });
   const [isDownloadModal, setIsDownloadModal] = useState(false);
   const [isResize, setIsResize] = useState(false);
+  const [isUploadPdf, setIsUploadPdf] = useState(false);
   const divRef = useRef(null);
   const nodeRef = useRef(null);
   const [, drop] = useDrop({
@@ -221,13 +224,17 @@ function SignYourSelf() {
             ? documentData[0]?.Placeholders
             : [];
         setXyPostion(placeholders);
-        const url = documentData[0] && documentData[0]?.URL;
+        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);
+          const base64Pdf = await getBase64FromUrl(url);
           if (arrayBuffer === "Error") {
             setHandleError(t("something-went-wrong-mssg"));
           } else {
+            setPdfBase64Url(base64Pdf);
             setPdfArrayBuffer(arrayBuffer);
           }
         } else {
@@ -562,15 +569,23 @@ function SignYourSelf() {
     }, 2000);
     return () => clearTimeout(timer);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [xyPostion]);
+  }, [xyPostion, pdfBase64Url]);
 
   // `autosavedetails` is used to save doc details after every 2 sec when changes are happern in placeholder like drag-drop widgets, remove signers
   const autosavedetails = async () => {
     try {
       const docCls = new Parse.Object("contracts_Document");
       docCls.id = documentId;
+      let pdfUrl;
+      if (isUploadPdf) {
+        pdfUrl = await convertBase64ToFile(pdfDetails[0].Name, pdfBase64Url);
+      }
+      console.log("isUploadPdf", isUploadPdf);
       docCls.set("Placeholders", xyPostion);
       docCls.set("IsSignyourself", true);
+      if (pdfUrl) {
+        docCls.set("URL", pdfUrl);
+      }
       await docCls.save();
     } catch (e) {
       console.log("error", e);
@@ -765,7 +780,7 @@ function SignYourSelf() {
       const signedpdf = JSON.parse(JSON.stringify(resSignPdf));
       setPdfUrl(signedpdf);
       getDocumentDetails(false);
-      setPdfRotatese64("");
+      setPdfBase64Url("");
     }
   };
 
@@ -1127,14 +1142,14 @@ function SignYourSelf() {
     if (isPlaceholder) {
       setIsRotate({ status: true, degree: rotateDegree });
     } else {
+      setIsUploadPdf(true);
       const urlDetails = await rotatePdfPage(
-        pdfUrl || pdfDetails[0].URL,
         rotateDegree,
         pageNumber - 1,
-        pdfRotateBase64
+        pdfBase64Url
       );
       setPdfArrayBuffer && setPdfArrayBuffer(urlDetails.arrayBuffer);
-      setPdfRotatese64(urlDetails.base64);
+      setPdfBase64Url(urlDetails.base64);
     }
   };
 
@@ -1158,10 +1173,10 @@ function SignYourSelf() {
       pdfUrl || pdfDetails[0].URL,
       isRotate.degree,
       pageNumber - 1,
-      pdfRotateBase64
+      pdfArrayBuffer
     );
     setPdfArrayBuffer && setPdfArrayBuffer(urlDetails.arrayBuffer);
-    setPdfRotatese64(urlDetails.base64);
+    setPdfBase64Url(urlDetails.base64);
     setXyPostion(updatePlaceholder);
     setIsRotate({ status: false, degree: 0 });
   };
@@ -1228,13 +1243,20 @@ function SignYourSelf() {
               setSignBtnPosition={setSignBtnPosition}
               pageNumber={pageNumber}
               containerWH={containerWH}
-              pdfRotateBase64={pdfRotateBase64}
+              pdfBase64Url={pdfBase64Url}
             />
             <div className=" w-full md:w-[57%] flex mr-4">
               <PdfZoom
                 clickOnZoomIn={clickOnZoomIn}
                 clickOnZoomOut={clickOnZoomOut}
                 handleRotationFun={handleRotationFun}
+                pdfArrayBuffer={pdfArrayBuffer}
+                pageNumber={pageNumber}
+                setPdfBase64Url={setPdfBase64Url}
+                setPdfArrayBuffer={setPdfArrayBuffer}
+                setIsUploadPdf={setIsUploadPdf}
+                setSignerPos={setXyPostion}
+                signerPos={xyPostion}
               />
               <div className="w-full md:w-[95%]">
                 <ModalUi
@@ -1348,6 +1370,12 @@ function SignYourSelf() {
                   clickOnZoomOut={clickOnZoomOut}
                   widgetsDetails={xyPostion}
                   setIsDownloadModal={setIsDownloadModal}
+                  setIsUploadPdf={setIsUploadPdf}
+                  pdfArrayBuffer={pdfArrayBuffer}
+                  setPdfArrayBuffer={setPdfArrayBuffer}
+                  setPdfBase64Url={setPdfBase64Url}
+                  setSignerPos={setXyPostion}
+                  signerPos={xyPostion}
                 />
                 <div ref={divRef} data-tut="reactourSecond" className="h-full">
                   {containerWH?.width && containerWH?.height && (
@@ -1388,7 +1416,7 @@ function SignYourSelf() {
                       handleTextSettingModal={handleTextSettingModal}
                       setScale={setScale}
                       scale={scale}
-                      pdfRotateBase64={pdfRotateBase64}
+                      pdfBase64Url={pdfBase64Url}
                       fontSize={fontSize}
                       setFontSize={setFontSize}
                       fontColor={fontColor}

apps/OpenSign/src/pages/TemplatePlaceholder.js

@@ -33,7 +33,9 @@ import {
   color,
   signatureTypes,
   getTenantDetails,
-  handleSignatureType
+  handleSignatureType,
+  getBase64FromUrl,
+  convertPdfArrayBuffer
 } from "../constant/Utils";
 import RenderPdf from "../components/pdf/RenderPdf";
 import "../styles/AddUser.css";
@@ -102,7 +104,8 @@ const TemplatePlaceholder = () => {
   const [isNameModal, setIsNameModal] = useState(false);
   const [isTextSetting, setIsTextSetting] = useState(false);
   const [pdfLoad, setPdfLoad] = useState(false);
-  const [pdfRotateBase64, setPdfRotatese64] = useState("");
+  const [pdfBase64Url, setPdfBase64Url] = useState("");
+  const [isUploadPdf, setIsUploadPdf] = useState(false);
   const isMobile = window.innerWidth < 767;
   const [, drop] = useDrop({
     accept: "BOX",
@@ -139,6 +142,7 @@ const TemplatePlaceholder = () => {
   const [zoomPercent, setZoomPercent] = useState(0);
   const [scale, setScale] = useState(1);
   const [signatureType, setSignatureType] = useState([]);
+  const [pdfArrayBuffer, setPdfArrayBuffer] = useState("");
 
   useEffect(() => {
     fetchTemplate();
@@ -247,6 +251,17 @@ const TemplatePlaceholder = () => {
           tenantSignTypes,
           docSignTypes
         );
+        const url = documentData[0] && documentData[0]?.URL;
+        if (url) {
+          const arrayBuffer = await convertPdfArrayBuffer(url);
+          const base64Pdf = await getBase64FromUrl(url);
+          if (arrayBuffer === "Error") {
+            setHandleError(t("something-went-wrong-mssg"));
+          } else {
+            setPdfBase64Url(base64Pdf);
+            setPdfArrayBuffer(arrayBuffer);
+          }
+        }
         setSignatureType(updatedSignatureType);
         const updatedPdfDetails = [...documentData];
         updatedPdfDetails[0].SignatureType = updatedSignatureType;
@@ -709,12 +724,19 @@ const TemplatePlaceholder = () => {
         }
       });
     }
+    let pdfUrl;
+    if (isUploadPdf) {
+      pdfUrl = await convertBase64ToFile(pdfDetails[0].Name, pdfBase64Url);
+    }
     try {
       const templateCls = new Parse.Object("contracts_Template");
       templateCls.id = templateId;
       templateCls.set("Placeholders", signerPos);
       templateCls.set("Signers", signers);
       templateCls.set("SignatureType", signatureType);
+      if (pdfUrl) {
+        templateCls.set("URL", pdfUrl);
+      }
       await templateCls.save();
     } catch (err) {
       console.log("error in autosave template", err);
@@ -739,12 +761,9 @@ const TemplatePlaceholder = () => {
         });
       }
       let pdfUrl = pdfDetails[0]?.URL;
-      if (pdfRotateBase64) {
+      if (pdfBase64Url) {
         try {
-          pdfUrl = await convertBase64ToFile(
+          pdfUrl = await convertBase64ToFile(pdfDetails[0].Name, pdfBase64Url);
-            pdfDetails[0].Name,
-            pdfRotateBase64
-          );
         } catch (e) {
           console.log("error to convertBase64ToFile in placeholder flow", e);
         }
@@ -900,9 +919,9 @@ const TemplatePlaceholder = () => {
     setIsCreateDocModal(false);
     setIsCreateDoc(true);
     let pdfUrl = pdfDetails[0]?.URL;
-    if (pdfRotateBase64) {
+    if (pdfBase64Url) {
       try {
-        pdfUrl = await convertBase64ToFile(pdfDetails[0].Name, pdfRotateBase64);
+        pdfUrl = await convertBase64ToFile(pdfDetails[0].Name, pdfBase64Url);
       } catch (e) {
         console.log("error to convertBase64ToFile in placeholder flow", e);
       }
@@ -1327,24 +1346,31 @@ const TemplatePlaceholder = () => {
     if (isRotate) {
       setIsRotate({ status: true, degree: rotateDegree });
     } else {
+      setIsUploadPdf(false);
       const urlDetails = await rotatePdfPage(
         pdfDetails[0].URL,
         rotateDegree,
         pageNumber - 1,
-        pdfRotateBase64
+        pdfArrayBuffer
       );
-      setPdfRotatese64(urlDetails.base64);
+      setPdfBase64Url(urlDetails.base64);
     }
   };
   const handleRemovePlaceholder = async () => {
-    handleRemoveWidgets(setSignerPos, signerPos, pageNumber, setIsRotate);
+    handleRemoveWidgets(
+      setSignerPos,
+      signerPos,
+      pageNumber,
+      uniqueId,
+      setIsRotate
+    );
     const urlDetails = await rotatePdfPage(
       pdfDetails[0].URL,
       isRotate.degree,
       pageNumber - 1,
-      pdfRotateBase64
+      pdfBase64Url
     );
-    setPdfRotatese64(urlDetails.base64);
+    setPdfBase64Url(urlDetails.base64);
   };
 
   return (
@@ -1389,6 +1415,7 @@ const TemplatePlaceholder = () => {
                 setPageNumber={setPageNumber}
                 setSignBtnPosition={setSignBtnPosition}
                 pageNumber={pageNumber}
+                pdfBase64Url={pdfBase64Url}
               />
 
               {/* pdf render view */}
@@ -1397,6 +1424,13 @@ const TemplatePlaceholder = () => {
                   clickOnZoomIn={clickOnZoomIn}
                   clickOnZoomOut={clickOnZoomOut}
                   handleRotationFun={handleRotationFun}
+                  pdfArrayBuffer={pdfArrayBuffer}
+                  pageNumber={pageNumber}
+                  setPdfBase64Url={setPdfBase64Url}
+                  setPdfArrayBuffer={setPdfArrayBuffer}
+                  setIsUploadPdf={setIsUploadPdf}
+                  setSignerPos={setSignerPos}
+                  signerPos={signerPos}
                 />
                 <div className="w-full md:w-[95%]">
                   {/* this modal is used show alert set placeholder for all signers before send mail */}
@@ -1542,6 +1576,7 @@ const TemplatePlaceholder = () => {
                     handleRotationFun={handleRotationFun}
                     clickOnZoomIn={clickOnZoomIn}
                     clickOnZoomOut={clickOnZoomOut}
+                    setSignerPos={setSignerPos}
                   />
                   <div
                     ref={divRef}
@@ -1586,7 +1621,7 @@ const TemplatePlaceholder = () => {
                         setScale={setScale}
                         scale={scale}
                         setIsSelectId={setIsSelectId}
-                        pdfRotateBase64={pdfRotateBase64}
+                        pdfBase64Url={pdfBase64Url}
                         fontSize={fontSize}
                         setFontSize={setFontSize}
                         fontColor={fontColor}

apps/OpenSign/src/script/locales/en/translation.json

@@ -707,7 +707,11 @@
     "p1": "The document creator will receive an email notification whenever a signer signs the document.",
     "note": "Note: Notification email will not be sent for the last signer, as the document creator will receive a completion email instead."
   },
-  "expiry-date":"Expiry date",
+  "expiry-date": "Expiry date",
   "expiry-date-updated": "The expiry date has been successfully extended to {{newexpirydate}}",
-  "expiry-date-error": "Please provide a new expiry date that is later than the current one"
+  "expiry-date-error": "Please provide a new expiry date that is later than the current one",
+  "delete-page": "Delete page",
+  "delete-alert": "Can not delete single page",
+  "delete-alert-2": "Are you sure want to delete this page ?",
+  "delete-note": "Note - once delete this page you can not undo"
 }

apps/OpenSign/src/script/locales/es/translation.json

@@ -709,5 +709,9 @@
   },
   "expiry-date": "Date d'expiration",
   "expiry-date-updated": "La fecha de vencimiento se ha extendido con éxito hasta el {{newexpirydate}}",
-  "expiry-date-error": "Proporcione una nueva fecha de vencimiento que sea posterior a la actual"
+  "expiry-date-error": "Proporcione una nueva fecha de vencimiento que sea posterior a la actual",
+  "delete-page": "eliminar página",
+  "delete-alert": "No se puede eliminar una sola página",
+  "delete-alert-2": "¿Está seguro de que desea eliminar esta página?",
+  "delete-note": "Nota: una vez que elimines esta página, no podrás deshacerla"
 }

apps/OpenSign/src/script/locales/fr/translation.json

@@ -708,5 +708,9 @@
   },
   "expiry-date": "Fecha de caducidad",
   "expiry-date-updated": "La date d'expiration a été prolongée avec succès jusqu'au {{newexpirydate}}",
-  "expiry-date-error": "Veuillez fournir une nouvelle date d'expiration postérieure à la date actuelle"
+  "expiry-date-error": "Veuillez fournir une nouvelle date d'expiration postérieure à la date actuelle",
+  "delete-page": "supprimer la page",
+  "delete-alert": "Impossible de supprimer une seule page",
+  "delete-alert-2": "Etes-vous sûr de vouloir supprimer cette page ?",
+  "delete-note": "Remarque : une fois cette page supprimée, vous ne pouvez plus l'annuler"
 }