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

2026-09-03 16:28:56 +02:00 · 2024-11-25 13:06:31 +05:30
21 changed files with 1105 additions and 846 deletions
@@ -158,5 +158,3 @@ We would like to thank all our contributors and users for their support and feed

 <!-- ALL-CONTRIBUTORS-LIST:END -->

-This project is tested with BrowserStack.
-
@@ -9,10 +9,10 @@
      "version": "0.1.0",
      "dependencies": {
        "@formkit/auto-animate": "^0.8.2",
-        "@lottiefiles/dotlottie-react": "^0.10.0",
+        "@lottiefiles/dotlottie-react": "^0.9.3",
        "@pdf-lib/fontkit": "^1.1.1",
        "@radix-ui/themes": "^3.1.6",
-        "@react-pdf/renderer": "^4.1.4",
+        "@react-pdf/renderer": "^4.0.0",
        "@reduxjs/toolkit": "^2.3.0",
        "axios": "^1.7.7",
        "file-saver": "^2.0.5",
@@ -84,7 +84,7 @@
        "postcss": "^8.4.49",
        "prettier": "^3.3.3",
        "pretty-quick": "^4.0.0",
-        "tailwindcss": "^3.4.15",
+        "tailwindcss": "^3.4.14",
        "terser-webpack-plugin": "^5.3.10",
        "webpack-cli": "^5.1.4"
      },
@@ -3649,12 +3649,11 @@
      "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw=="
    },
    "node_modules/@lottiefiles/dotlottie-react": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/@lottiefiles/dotlottie-react/-/dotlottie-react-0.10.0.tgz",
-      "integrity": "sha512-krPJUIqpt7VluWc0aRWk0lYScCDSlbCpWvImU5eyJZeyroZ87bZYb+YlgUbtLHZ77DWmIBl4kGMhupU8+ugPSw==",
-      "license": "MIT",
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/@lottiefiles/dotlottie-react/-/dotlottie-react-0.9.3.tgz",
+      "integrity": "sha512-x4xQlFFulAF/nG044VNMwaXWk8ehg/KEHXpMxGB+L5gv3qohjxv/I7/erHyfhWY9y6C/VMl+PiWZbT54W8+lUQ==",
      "dependencies": {
-        "@lottiefiles/dotlottie-web": "0.37.0"
+        "@lottiefiles/dotlottie-web": "0.36.1"
      },
      "peerDependencies": {
        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -3662,10 +3661,9 @@
      }
    },
    "node_modules/@lottiefiles/dotlottie-web": {
-      "version": "0.37.0",
-      "resolved": "https://registry.npmjs.org/@lottiefiles/dotlottie-web/-/dotlottie-web-0.37.0.tgz",
-      "integrity": "sha512-dCtQkYlq9GDswJNmcIlUaAskxrsJ56SRhY8woNsHuIPWy+tfP9tgf1fA9fZ1Oj72DVdyYkK0DxLk58HhBrmpBQ==",
-      "license": "MIT"
+      "version": "0.36.1",
+      "resolved": "https://registry.npmjs.org/@lottiefiles/dotlottie-web/-/dotlottie-web-0.36.1.tgz",
+      "integrity": "sha512-KvxOH5Msk0Ivqpgq4p1DGo1IG2XPX4kEVkhssTaOUEvoeCxDLru+DlbUzwG8b5JcJwEBmrAMzCNzCTmn+uMFxQ=="
    },
    "node_modules/@mapbox/node-pre-gyp": {
      "version": "1.0.11",
@@ -6081,39 +6079,42 @@
      }
    },
    "node_modules/@react-pdf/font": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@react-pdf/font/-/font-3.0.1.tgz",
-      "integrity": "sha512-s+0xrQabGoYDDZwVpz8PXp1ylwabqiMhzfyetvxBqjDuQ15PuoSkmUkKUOkfDzauuAqs0MLMvt+Pcv+NioLfzw==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf/font/-/font-3.0.0.tgz",
+      "integrity": "sha512-/SYEud06maGQiAD0H6J5xnqigKm/FpLKqFYH6+2OjQ2tb32nnKqwqL3pS7glDTFYBJ11B6fVgSNex6tc1V8UDA==",
      "dependencies": {
        "@babel/runtime": "^7.20.13",
        "@react-pdf/types": "^2.7.0",
+        "cross-fetch": "^3.1.5",
        "fontkit": "^2.0.2",
        "is-url": "^1.2.4"
      }
    },
    "node_modules/@react-pdf/image": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@react-pdf/image/-/image-3.0.1.tgz",
-      "integrity": "sha512-Hd5F1LzjuzG4bL/ytaOYxwN/5ip8oFBYDHdpccOfYY87J/Ca7AL31SsuneLk9DtnwNM1BSAKXtBo/WDFY3r57A==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf/image/-/image-3.0.0.tgz",
+      "integrity": "sha512-l4HV5NutPw52Wbuvxol0BiFc6TkKXK/kJNwVIElphw47nwfueLEjIfBxRTuOeHmpdibvEh3a5STwYmMTQjXSxg==",
      "dependencies": {
        "@babel/runtime": "^7.20.13",
        "@react-pdf/png-js": "^3.0.0",
+        "cross-fetch": "^3.1.5",
        "jay-peg": "^1.1.0"
      }
    },
    "node_modules/@react-pdf/layout": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/@react-pdf/layout/-/layout-4.1.2.tgz",
-      "integrity": "sha512-BG2MR1R0loFk+CVBLse15NRrTSaEc+0aK1isK9DnER30H5rYgbMDhFqqqr8g+YEqP04dhYkeCjhTWP172VPyNg==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf/layout/-/layout-4.0.0.tgz",
+      "integrity": "sha512-BNipDwULk9ehvf0V5HLrP2QIujkfj2LzHs8yfCQ/Z8TkAX6dEt1AgwDttBpBLfzcu8w8HFjgpLR1TNOTXiOsAQ==",
      "dependencies": {
        "@babel/runtime": "^7.20.13",
        "@react-pdf/fns": "3.0.0",
-        "@react-pdf/image": "^3.0.1",
+        "@react-pdf/image": "^3.0.0",
        "@react-pdf/pdfkit": "^4.0.0",
        "@react-pdf/primitives": "^4.0.0",
-        "@react-pdf/stylesheet": "^5.1.0",
+        "@react-pdf/stylesheet": "^5.0.0",
        "@react-pdf/textkit": "^5.0.0",
        "@react-pdf/types": "^2.7.0",
+        "cross-fetch": "^3.1.5",
        "emoji-regex": "^10.3.0",
        "queue": "^6.0.1",
        "yoga-layout": "^3.1.0"
@@ -6146,15 +6147,10 @@
      "resolved": "https://registry.npmjs.org/@react-pdf/primitives/-/primitives-4.0.0.tgz",
      "integrity": "sha512-yp4E0rDL03NaUp/CnDBz3HQNfH2Mzdlgku57yhTMGNzetwB0NJusXcjYg5XsTGIXnR7Tv80JKI4O4ajj+oaLeQ=="
    },
-    "node_modules/@react-pdf/reconciler": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@react-pdf/reconciler/-/reconciler-1.1.2.tgz",
-      "integrity": "sha512-b4uGyT7pWtXe+F2m3cvySqNd4EAAaFknee/JKr00N/9QkNpL1s977oT5qtNPcnUmagsO0I0iH9zFAOcxHFyUNA=="
-    },
    "node_modules/@react-pdf/render": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/@react-pdf/render/-/render-4.0.1.tgz",
-      "integrity": "sha512-WkOjFh6e3lBxRJRiKobUzu9lmxoN5Ihn993cRj47Cy3SOTZmoumRGyjzZq9zMxekbLVvhhyGdanEI2LZoHvIaw==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf/render/-/render-4.0.0.tgz",
+      "integrity": "sha512-gvrw4HM9RocuDLd+19cvP2xaSs3h4OgYn2N6VDXzj6LYQnoHBAazRV9qMpGi8FuNlQ3Va+s82R1ynXYMr0FXIg==",
      "dependencies": {
        "@babel/runtime": "^7.20.13",
        "@react-pdf/fns": "3.0.0",
@@ -6169,31 +6165,31 @@
      }
    },
    "node_modules/@react-pdf/renderer": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/@react-pdf/renderer/-/renderer-4.1.4.tgz",
-      "integrity": "sha512-bJZ+dVWO+nZ028PCA8K7jKuSb03NKz+Kbj+Oc3iDAA3cdsROXgdIce659SIGjOsOD6rV51sqP0YA9PURCBbVbw==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf/renderer/-/renderer-4.0.0.tgz",
+      "integrity": "sha512-yDObqmnF08Mwc24W8axmT/y+JPxJkweVQ/EM3GOXh0qyZN5VP5JvKDiCqmftI6QEKfvTFNsquuEQm13GBjkbMg==",
      "dependencies": {
        "@babel/runtime": "^7.20.13",
-        "@react-pdf/font": "^3.0.1",
-        "@react-pdf/layout": "^4.1.2",
+        "@react-pdf/font": "^3.0.0",
+        "@react-pdf/layout": "^4.0.0",
        "@react-pdf/pdfkit": "^4.0.0",
        "@react-pdf/primitives": "^4.0.0",
-        "@react-pdf/reconciler": "^1.1.2",
-        "@react-pdf/render": "^4.0.1",
+        "@react-pdf/render": "^4.0.0",
        "@react-pdf/types": "^2.7.0",
        "events": "^3.3.0",
        "object-assign": "^4.1.1",
        "prop-types": "^15.6.2",
-        "queue": "^6.0.1"
+        "queue": "^6.0.1",
+        "scheduler": "^0.17.0"
      },
      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
      }
    },
    "node_modules/@react-pdf/stylesheet": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@react-pdf/stylesheet/-/stylesheet-5.1.0.tgz",
-      "integrity": "sha512-QOPCGzlTz+irGLXbsQtKkEqkf78n9l3hRU0Omkvpk/gwLf/IchBBt358dV6FEtc+ujMFEpN+a+fWSS6v2tB0AQ==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf/stylesheet/-/stylesheet-5.0.0.tgz",
+      "integrity": "sha512-FrJXUMsvSGee13gpL82HOhhk16y3IKxLmYvmJU1ZUo9Jm9pLydnHDPlSUDK+rKmxdSD2X+twUR7sv6FlrA5i+A==",
      "dependencies": {
        "@babel/runtime": "^7.20.13",
        "@react-pdf/fns": "3.0.0",
@@ -9877,6 +9873,14 @@
        "typescript": ">=4"
      }
    },
+    "node_modules/cross-fetch": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.8.tgz",
+      "integrity": "sha512-cvA+JwZoU0Xq+h6WkMvAUqPEYy92Obet6UdKLfW60qn99ftItKjB5T+BkyWOFWe2pUyfQ+IJHmpOTznqk1M6Kg==",
+      "dependencies": {
+        "node-fetch": "^2.6.12"
+      }
+    },
    "node_modules/cross-spawn": {
      "version": "7.0.5",
      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.5.tgz",
@@ -11948,10 +11952,9 @@
      }
    },
    "node_modules/express": {
-      "version": "4.21.2",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
-      "integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==",
-      "license": "MIT",
+      "version": "4.21.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz",
+      "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==",
      "dependencies": {
        "accepts": "~1.3.8",
        "array-flatten": "1.1.1",
@@ -11972,7 +11975,7 @@
        "methods": "~1.1.2",
        "on-finished": "2.4.1",
        "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.12",
+        "path-to-regexp": "0.1.10",
        "proxy-addr": "~2.0.7",
        "qs": "6.13.0",
        "range-parser": "~1.2.1",
@@ -11987,10 +11990,6 @@
      },
      "engines": {
        "node": ">= 0.10.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
      }
    },
    "node_modules/express/node_modules/content-disposition": {
@@ -12018,10 +12017,9 @@
      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
    },
    "node_modules/express/node_modules/path-to-regexp": {
-      "version": "0.1.12",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
-      "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==",
-      "license": "MIT"
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
+      "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w=="
    },
    "node_modules/express/node_modules/range-parser": {
      "version": "1.2.1",
@@ -18195,9 +18193,9 @@
      "optional": true
    },
    "node_modules/nanoid": {
-      "version": "3.3.8",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
-      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
      "funding": [
        {
          "type": "github",
@@ -23496,6 +23494,15 @@
        "node": ">=10"
      }
    },
+    "node_modules/scheduler": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.17.0.tgz",
+      "integrity": "sha512-7rro8Io3tnCPuY4la/NuI5F2yfESpnfZyT6TtkXnSWVkcu0BCDJ+8gk5ozUaFaxpIyNuWAPXrH0yFcSi28fnDA==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
    "node_modules/schema-utils": {
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",
@@ -24854,32 +24861,32 @@
      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
    },
    "node_modules/tailwindcss": {
-      "version": "3.4.15",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.15.tgz",
-      "integrity": "sha512-r4MeXnfBmSOuKUWmXe6h2CcyfzJCEk4F0pptO5jlnYSIViUkVmsawj80N5h2lO3gwcmSb4n3PuN+e+GC1Guylw==",
+      "version": "3.4.14",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.14.tgz",
+      "integrity": "sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==",
      "dependencies": {
        "@alloc/quick-lru": "^5.2.0",
        "arg": "^5.0.2",
-        "chokidar": "^3.6.0",
+        "chokidar": "^3.5.3",
        "didyoumean": "^1.2.2",
        "dlv": "^1.1.3",
-        "fast-glob": "^3.3.2",
+        "fast-glob": "^3.3.0",
        "glob-parent": "^6.0.2",
        "is-glob": "^4.0.3",
-        "jiti": "^1.21.6",
+        "jiti": "^1.21.0",
        "lilconfig": "^2.1.0",
-        "micromatch": "^4.0.8",
+        "micromatch": "^4.0.5",
        "normalize-path": "^3.0.0",
        "object-hash": "^3.0.0",
-        "picocolors": "^1.1.1",
-        "postcss": "^8.4.47",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.23",
        "postcss-import": "^15.1.0",
        "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.2",
-        "postcss-nested": "^6.2.0",
-        "postcss-selector-parser": "^6.1.2",
-        "resolve": "^1.22.8",
-        "sucrase": "^3.35.0"
+        "postcss-load-config": "^4.0.1",
+        "postcss-nested": "^6.0.1",
+        "postcss-selector-parser": "^6.0.11",
+        "resolve": "^1.22.2",
+        "sucrase": "^3.32.0"
      },
      "bin": {
        "tailwind": "lib/cli.js",
@@ -4,10 +4,10 @@
  "private": true,
  "dependencies": {
    "@formkit/auto-animate": "^0.8.2",
-    "@lottiefiles/dotlottie-react": "^0.10.0",
+    "@lottiefiles/dotlottie-react": "^0.9.3",
    "@pdf-lib/fontkit": "^1.1.1",
    "@radix-ui/themes": "^3.1.6",
-    "@react-pdf/renderer": "^4.1.4",
+    "@react-pdf/renderer": "^4.0.0",
    "@reduxjs/toolkit": "^2.3.0",
    "axios": "^1.7.7",
    "file-saver": "^2.0.5",
@@ -116,7 +116,7 @@
    "postcss": "^8.4.49",
    "prettier": "^3.3.3",
    "pretty-quick": "^4.0.0",
-    "tailwindcss": "^3.4.15",
+    "tailwindcss": "^3.4.14",
    "terser-webpack-plugin": "^5.3.10",
    "webpack-cli": "^5.1.4"
  },
@@ -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"
 }
@@ -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"
 }
@@ -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"
 }
@@ -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"
          >
@@ -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>
  );
 }
@@ -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
-        className="bg-gray-50 px-[4px] 2xl:px-[15px] 2xl:py-[10px] cursor-pointer"
-        onClick={() => props.clickOnZoomIn()}
-        title={t("zoom-in")}
-      >
-        <i className="fa-light fa-magnifying-glass-plus text-gray-500 2xl:text-[30px]"></i>
-      </span>
-      {!props?.isDisableRotate && (
-        <>
+    <>
+      <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={() => props.clickOnZoomIn()}
+          title={t("zoom-in")}
+        >
+          <i className="fa-light fa-magnifying-glass-plus text-gray-500 2xl:text-[30px]"></i>
+        </span>
+        {!props.isDisableDelete && (
          <span
            className="bg-gray-50 px-[4px] 2xl:px-[15px] 2xl:py-[10px] cursor-pointer"
-            onClick={() => props.handleRotationFun(90)}
-            title={t("rotate-right")}
+            onClick={() => setIsDeletePage(true)}
+            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")}
-            onClick={() => props.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={() => 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>
+        )}
+
+        {!props?.isDisableRotate && (
+          <>
+            <span
+              className="bg-gray-50 px-[4px] 2xl:px-[15px] 2xl:py-[10px] cursor-pointer"
+              onClick={() => props.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={() => props.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={() => 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>
+    </>
  );
 }

@@ -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
@@ -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
              }
@@ -2425,23 +2425,9 @@ export const getDefaultSignature = async (objectId) => {
 };

 //function to rotate pdf page
-export async function rotatePdfPage(
-  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);
-  }
+export async function rotatePdfPage(rotateDegree, pageNumber, pdfArrayBuffer) {
  // 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) => {
-    return {
-      ...placeholderObj,
-      placeHolder: placeholderObj?.placeHolder?.filter(
-        (data) => data?.pageNumber !== pageNumber
-      )
-    };
-  });
-  setSignerPos(updatedSignerPos);
-  setIsRotate({
-    status: false,
-    degree: 0
-  });
+  const isSigners = signerPos.some((data) => data.signerPtr);
+  if (isSigners) {
+    const updatedSignerPos = signerPos.map((placeholderObj) => {
+      if (placeholderObj.Id === userId) {
+        return {
+          ...placeholderObj,
+          placeHolder: placeholderObj?.placeHolder?.filter(
+            (data) => data?.pageNumber !== pageNumber
+          )
+        };
+      } else {
+        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 };
+  }
+};
@@ -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 arrayBuffer = await convertPdfArrayBuffer(url);
-            if (arrayBuffer === "Error") {
-              setHandleError(t("something-went-wrong-mssg"));
+            const base64Pdf = await getBase64FromUrl(url);
+            if (base64Pdf) {
+              setPdfBase64Url(base64Pdf);
            }
          } 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 arrayBuffer = await convertPdfArrayBuffer(url);
-          if (arrayBuffer === "Error") {
-            setHandleError(t("something-went-wrong-mssg"));
+          const base64Pdf = await getBase64FromUrl(url);
+          if (base64Pdf) {
+            setPdfBase64Url(base64Pdf);
          }
        } 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>
@@ -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);
-    if (isRotate) {
-      setIsRotate({ status: true, degree: rotateDegree });
+    const rotatePlaceholderExist = handleRotateWarning(signerPos, pageNumber);
+    //show rotation alert if widgets already exist
+    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,
-      isRotate.degree,
+      showRotateAlert.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}
-          setIsRotate={setIsRotate}
+          showRotateAlert={showRotateAlert.status}
+          setShowRotateAlert={setShowRotateAlert}
          handleRemoveWidgets={handleRemovePlaceholder}
        />
      </DndProvider>
@@ -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}
@@ -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(
-            pdfDetails[0].Name,
-            pdfRotateBase64
-          );
+          pdfUrl = await convertBase64ToFile(pdfDetails[0].Name, pdfBase64Url);
        } 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}
@@ -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"
 }
@@ -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"
 }
@@ -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"
 }
@@ -18,8 +18,8 @@
    "watch": "nodemon index.js"
  },
  "dependencies": {
-    "@aws-sdk/client-s3": "^3.699.0",
-    "@aws-sdk/s3-request-presigner": "^3.700.0",
+    "@aws-sdk/client-s3": "^3.691.0",
+    "@aws-sdk/s3-request-presigner": "^3.691.0",
    "@parse/fs-files-adapter": "^3.0.0",
    "@parse/s3-files-adapter": "^3.0.0",
    "@pdf-lib/fontkit": "^1.1.1",
@@ -27,7 +27,7 @@
    "@signpdf/signer-p12": "^3.2.4",
    "@signpdf/signpdf": "^3.2.4",
    "aws-sdk": "^2.1692.0",
-    "axios": "^1.7.9",
+    "axios": "^1.7.7",
    "cors": "^2.8.5",
    "dotenv": "^16.4.5",
    "express": "^4.21.1",
@@ -35,7 +35,7 @@
    "generate-api-key": "^1.0.2",
    "googleapis": "^144.0.0",
    "mailgun.js": "^10.2.3",
-    "mongoose": "^8.8.4",
+    "mongoose": "^8.8.1",
    "multer": "^1.4.5-lts.1",
    "multer-s3": "^3.0.1",
    "node-forge": "^1.3.1",
@@ -45,7 +45,7 @@
    "parse-server": "^7.3.0",
    "parse-server-api-mail-adapter": "^4.1.0",
    "pdf-lib": "^1.17.1",
-    "posthog-node": "^4.2.3",
+    "posthog-node": "^4.2.1",
    "ws": "^8.18.0"
  },
  "type": "module",