Merge pull request #738 from OpenSignLabs/signPdf

fix: some webhook event are not working for second signer & add certificate in completed webhook
2026-09-03 16:28:56 +02:00 · 2024-05-14 18:33:31 +05:30 · 2024-05-14 18:30:26 +05:30 · 2024-05-14 16:44:42 +05:30 · 2024-05-14 16:36:58 +05:30 · 2024-05-14 13:57:08 +05:30
125 changed files with 9493 additions and 3474 deletions
@@ -205,6 +205,33 @@
      "contributions": [
        "code"
      ]
+    },
+    {
+      "login": "ugoconsonni",
+      "name": "ugoconsonni",
+      "avatar_url": "https://avatars.githubusercontent.com/u/13661702?v=4",
+      "profile": "https://github.com/ugoconsonni",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "daniel-mutwiri",
+      "name": "Daniel Mutwiri",
+      "avatar_url": "https://avatars.githubusercontent.com/u/8936960?v=4",
+      "profile": "https://github.com/daniel-mutwiri",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "Zathiel",
+      "name": "Zathiel",
+      "avatar_url": "https://avatars.githubusercontent.com/u/26553418?v=4",
+      "profile": "https://github.com/Zathiel",
+      "contributions": [
+        "code"
+      ]
    }
  ]
 }
@@ -134,6 +134,9 @@ We would like to thank all our contributors and users for their support and feed
    </tr>
    <tr>
      <td align="center" valign="top" width="14.28%"><a href="https://github.com/VikramNagwal"><img src="https://avatars.githubusercontent.com/u/123088024?v=4?s=100" width="100px;" alt="Vikram"/><br /><sub><b>Vikram</b></sub></a><br /><a href="#code-VikramNagwal" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/ugoconsonni"><img src="https://avatars.githubusercontent.com/u/13661702?v=4?s=100" width="100px;" alt="ugoconsonni"/><br /><sub><b>ugoconsonni</b></sub></a><br /><a href="#code-ugoconsonni" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/daniel-mutwiri"><img src="https://avatars.githubusercontent.com/u/8936960?v=4?s=100" width="100px;" alt="Daniel Mutwiri"/><br /><sub><b>Daniel Mutwiri</b></sub></a><br /><a href="#code-daniel-mutwiri" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Zathiel"><img src="https://avatars.githubusercontent.com/u/26553418?v=4?s=100" width="100px;" alt="Zathiel"/><br /><sub><b>Zathiel</b></sub></a><br /><a href="#code-Zathiel" title="Code">💻</a></td>
    </tr>
  </tbody>
 </table>
@@ -8,9 +8,9 @@
      "name": "open_sign",
      "version": "0.1.0",
      "dependencies": {
-        "@formkit/auto-animate": "^0.8.1",
+        "@formkit/auto-animate": "^0.8.2",
        "@radix-ui/themes": "^2.0.3",
-        "@react-pdf/renderer": "^3.4.0",
+        "@react-pdf/renderer": "^3.4.4",
        "@reduxjs/toolkit": "^2.2.1",
        "axios": "^1.6.8",
        "file-saver": "^2.0.5",
@@ -22,6 +22,7 @@
        "radix-ui": "^1.0.1",
        "react": "^18.2.0",
        "react-bootstrap": "^2.10.2",
+        "react-cookie": "^7.1.4",
        "react-datepicker": "^6.4.0",
        "react-dnd": "^16.0.1",
        "react-dnd-html5-backend": "^16.0.1",
@@ -32,16 +33,18 @@
        "react-helmet": "^6.1.0",
        "react-konva": "^18.2.10",
        "react-modal": "^3.16.1",
-        "react-pdf": "^7.7.1",
+        "react-pdf": "^7.7.3",
+        "react-quill": "^2.0.0",
        "react-redux": "^9.1.0",
-        "react-rnd": "^10.4.1",
+        "react-rnd": "^10.4.10",
        "react-router-dom": "^6.22.3",
        "react-scripts": "5.0.1",
        "react-scrollbars-custom": "^4.1.1",
        "react-select": "^5.8.0",
        "react-signature-canvas": "^1.0.6",
        "react-tooltip": "^5.26.3",
-        "reactour": "^1.19.2",
+        "react-web-share": "^2.0.2",
+        "reactour": "^1.19.3",
        "redux": "^5.0.1",
        "redux-thunk": "^3.1.0",
        "regex-parser": "^2.3.0",
@@ -50,14 +53,14 @@
        "web-vitals": "^2.1.4"
      },
      "devDependencies": {
-        "@babel/runtime-corejs2": "^7.24.1",
-        "autoprefixer": "^10.4.18",
+        "@babel/runtime-corejs2": "^7.24.5",
+        "autoprefixer": "^10.4.19",
        "commitizen": "^4.3.0",
        "eslint": "^8.57.0",
        "eslint-plugin-prettier": "^4.2.1",
        "eslint-plugin-react": "^7.34.1",
        "lint-staged": "^15.2.2",
-        "postcss": "^8.4.37",
+        "postcss": "^8.4.38",
        "prettier": "^2.8.8",
        "pretty-quick": "^3.3.1",
        "tailwindcss": "^3.4.1"
@@ -1991,9 +1994,9 @@
      }
    },
    "node_modules/@babel/runtime-corejs2": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs2/-/runtime-corejs2-7.24.1.tgz",
-      "integrity": "sha512-De0q0utpUPiXnc7+B7Ku86mJ0eDItC/v3uFa/lQkq63XnHyZiytDHeCIvechlnVwwpU2ChjGF7c3I+mBrTudwg==",
+      "version": "7.24.5",
+      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs2/-/runtime-corejs2-7.24.5.tgz",
+      "integrity": "sha512-cC9jiO6s/IN+xwCHYy1AGrcFJ4bwgIwb8HX1KaoEpRsznLlO4x9eBP6AX7RIeMSWlQqEj2WHox637OS8cDq6Ew==",
      "dev": true,
      "dependencies": {
        "core-js": "^2.6.12",
@@ -2986,9 +2989,9 @@
      "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
    },
    "node_modules/@formkit/auto-animate": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/@formkit/auto-animate/-/auto-animate-0.8.1.tgz",
-      "integrity": "sha512-0/Z2cuNXWVVIG/l0SpcHAWFhGdvLJ8DRvEfRWvmojtmRWfEy+LWNwgDazbZqY0qQYtkHcoEK3jBLkhiZaB/4Ig=="
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/@formkit/auto-animate/-/auto-animate-0.8.2.tgz",
+      "integrity": "sha512-SwPWfeRa5veb1hOIBMdzI+73te5puUBHmqqaF1Bu7FjvxlYSz/kJcZKSa9Cg60zL0uRNeJL2SbRxV6Jp6Q1nFQ=="
    },
    "node_modules/@humanwhocodes/config-array": {
      "version": "0.11.14",
@@ -5378,41 +5381,41 @@
      }
    },
    "node_modules/@react-pdf/font": {
-      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/@react-pdf/font/-/font-2.4.4.tgz",
-      "integrity": "sha512-yjK5eSY+LcbxS0m+sOYln8GdgIbUgti4xjwf14kx8OSsOMJQJyHFALHMh2cLcKJR9yZeqVDo1FwCsY6gw1yCkg==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@react-pdf/font/-/font-2.5.1.tgz",
+      "integrity": "sha512-Hyb2zBb92Glc3lvhmJfy4dO2Mj29KB26Uk12Ua9EhKAdiuCTLBqgP8Oe1cGwrvDI7xA4OOcwvBMdYh0vhOUHzA==",
      "dependencies": {
        "@babel/runtime": "^7.20.13",
-        "@react-pdf/types": "^2.4.1",
+        "@react-pdf/types": "^2.5.0",
        "cross-fetch": "^3.1.5",
        "fontkit": "^2.0.2",
        "is-url": "^1.2.4"
      }
    },
    "node_modules/@react-pdf/image": {
-      "version": "2.3.5",
-      "resolved": "https://registry.npmjs.org/@react-pdf/image/-/image-2.3.5.tgz",
-      "integrity": "sha512-YK8oeD4cYTbX2KwdsY5DEDpvsKQoGbf3kwlxAQwYm8wrEol8V/5oCl8H8ZqdZIYQhx2XPp63cocQfMCZGwf+4w==",
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/@react-pdf/image/-/image-2.3.6.tgz",
+      "integrity": "sha512-7iZDYZrZlJqNzS6huNl2XdMcLFUo68e6mOdzQeJ63d5eApdthhSHBnkGzHfLhH5t8DCpZNtClmklzuLL63ADfw==",
      "dependencies": {
        "@babel/runtime": "^7.20.13",
        "@react-pdf/png-js": "^2.3.1",
        "cross-fetch": "^3.1.5",
-        "jay-peg": "^1.0.1"
+        "jay-peg": "^1.0.2"
      }
    },
    "node_modules/@react-pdf/layout": {
-      "version": "3.11.3",
-      "resolved": "https://registry.npmjs.org/@react-pdf/layout/-/layout-3.11.3.tgz",
-      "integrity": "sha512-SwfIWmZl3yZDgb4Qa9ebjAZTd/FyI5E2curSfra6SuAkrsEF037cmVfxCTgYCkPwpVMv/omOENPI+WjhOKPofA==",
+      "version": "3.12.1",
+      "resolved": "https://registry.npmjs.org/@react-pdf/layout/-/layout-3.12.1.tgz",
+      "integrity": "sha512-BxSeykDxvADlpe4OGtQ7NH46QXq3uImAYsTHOPLCwbXMniQ1O3uCBx7H+HthxkCNshgYVPp9qS3KyvQv/oIZwg==",
      "dependencies": {
        "@babel/runtime": "^7.20.13",
        "@react-pdf/fns": "2.2.1",
-        "@react-pdf/image": "^2.3.5",
-        "@react-pdf/pdfkit": "^3.1.7",
+        "@react-pdf/image": "^2.3.6",
+        "@react-pdf/pdfkit": "^3.1.10",
        "@react-pdf/primitives": "^3.1.1",
-        "@react-pdf/stylesheet": "^4.2.4",
+        "@react-pdf/stylesheet": "^4.2.5",
        "@react-pdf/textkit": "^4.4.1",
-        "@react-pdf/types": "^2.4.1",
+        "@react-pdf/types": "^2.5.0",
        "cross-fetch": "^3.1.5",
        "emoji-regex": "^10.3.0",
        "queue": "^6.0.1",
@@ -5425,16 +5428,16 @@
      "integrity": "sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw=="
    },
    "node_modules/@react-pdf/pdfkit": {
-      "version": "3.1.7",
-      "resolved": "https://registry.npmjs.org/@react-pdf/pdfkit/-/pdfkit-3.1.7.tgz",
-      "integrity": "sha512-iXMmATqW5Aycpzm8nNsZOHV/DX2lpd8l5VkaTy1HjzHgQ3MHoV45BHwRph53soEqoPo7rUfpjuSi7X3hngPWGA==",
+      "version": "3.1.10",
+      "resolved": "https://registry.npmjs.org/@react-pdf/pdfkit/-/pdfkit-3.1.10.tgz",
+      "integrity": "sha512-P/qPBtCFo2HDJD0i6NfbmoBRrsOVO8CIogYsefwG4fklTo50zNgnMM5U1WLckTuX8Qt1ThiQuokmTG5arheblA==",
      "dependencies": {
        "@babel/runtime": "^7.20.13",
        "@react-pdf/png-js": "^2.3.1",
        "browserify-zlib": "^0.2.0",
        "crypto-js": "^4.2.0",
        "fontkit": "^2.0.2",
-        "jay-peg": "^1.0.1",
+        "jay-peg": "^1.0.2",
        "vite-compatible-readable-stream": "^3.6.1"
      }
    },
@@ -5452,15 +5455,15 @@
      "integrity": "sha512-miwjxLwTnO3IjoqkTVeTI+9CdyDggwekmSLhVCw+a/7FoQc+gF3J2dSKwsHvAcVFM0gvU8mzCeTofgw0zPDq0w=="
    },
    "node_modules/@react-pdf/render": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/@react-pdf/render/-/render-3.4.3.tgz",
-      "integrity": "sha512-9LL059vfwrK1gA0uIA4utpQ/pUH9EW/yia4bb7pCoARs8IlupY5UP265jgax15ua0p+MdUwShZzQ9rilu7kGsw==",
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/@react-pdf/render/-/render-3.4.4.tgz",
+      "integrity": "sha512-CfGxWmVgrY3JgmB1iMnz2W6Ck+8pisZeFt8vGlxP+JfT+0onr208pQvGSV5KwA9LGhAdABxqc/+y17V3vtKdFA==",
      "dependencies": {
        "@babel/runtime": "^7.20.13",
        "@react-pdf/fns": "2.2.1",
        "@react-pdf/primitives": "^3.1.1",
        "@react-pdf/textkit": "^4.4.1",
-        "@react-pdf/types": "^2.4.1",
+        "@react-pdf/types": "^2.5.0",
        "abs-svg-path": "^0.1.1",
        "color-string": "^1.9.1",
        "normalize-svg-path": "^1.1.0",
@@ -5469,17 +5472,17 @@
      }
    },
    "node_modules/@react-pdf/renderer": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/@react-pdf/renderer/-/renderer-3.4.0.tgz",
-      "integrity": "sha512-8i/B8xJZ4AwINM/RRBnawBXfNACaehQT/bM19TOTUjHoddYaRKM1g1+qOZx58yfxfr5TFRs4fORxEPU1mGmR1A==",
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/@react-pdf/renderer/-/renderer-3.4.4.tgz",
+      "integrity": "sha512-j1TWMHHXDeHdoQE3xjhBh0MZ2rn7wHIlP/uglr/EJZXqnPbfg6bfLzRJCM6bs+XJV3d8+zLQjHf6sF/fWcBDfg==",
      "dependencies": {
        "@babel/runtime": "^7.20.13",
-        "@react-pdf/font": "^2.4.4",
-        "@react-pdf/layout": "^3.11.3",
-        "@react-pdf/pdfkit": "^3.1.7",
+        "@react-pdf/font": "^2.5.1",
+        "@react-pdf/layout": "^3.12.1",
+        "@react-pdf/pdfkit": "^3.1.10",
        "@react-pdf/primitives": "^3.1.1",
-        "@react-pdf/render": "^3.4.3",
-        "@react-pdf/types": "^2.4.1",
+        "@react-pdf/render": "^3.4.4",
+        "@react-pdf/types": "^2.5.0",
        "events": "^3.3.0",
        "object-assign": "^4.1.1",
        "prop-types": "^15.6.2",
@@ -5500,13 +5503,13 @@
      }
    },
    "node_modules/@react-pdf/stylesheet": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/@react-pdf/stylesheet/-/stylesheet-4.2.4.tgz",
-      "integrity": "sha512-CgRfDzeMtnV0GL7zSn381NubmgwqKhFKcK1YrWX3azl/KWVh52jjFd3HWi6dvcETNT862mjWz5MnExe4WOBJXA==",
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/@react-pdf/stylesheet/-/stylesheet-4.2.5.tgz",
+      "integrity": "sha512-XnmapeCW+hDuNdVwpuvO04WKv71wAs8aH+saIq29Bo2fp1SxznHTcQArTZtK6Wgr/E9BHXeB2iAPpUZuI6G+xA==",
      "dependencies": {
        "@babel/runtime": "^7.20.13",
        "@react-pdf/fns": "2.2.1",
-        "@react-pdf/types": "^2.4.1",
+        "@react-pdf/types": "^2.5.0",
        "color-string": "^1.9.1",
        "hsl-to-hex": "^1.0.0",
        "media-engine": "^1.0.3",
@@ -5526,9 +5529,9 @@
      }
    },
    "node_modules/@react-pdf/types": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@react-pdf/types/-/types-2.4.1.tgz",
-      "integrity": "sha512-w8pk7svhjVj5f7d7kjEGXSk26ffCqRSQcgWR4DwcFltNpSM18ZJmzmM6WrNeeP437y48LlykLnmGDA3oATakgw=="
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@react-pdf/types/-/types-2.5.0.tgz",
+      "integrity": "sha512-XsVRkt0hQ60I4e3leAVt+aZR3KJCaJd179BfJHAv4F4x6Vq3yqkry8lcbUWKGKDw1j3/8sW4FsgGR41SFvsG9A=="
    },
    "node_modules/@reduxjs/toolkit": {
      "version": "2.2.1",
@@ -6054,6 +6057,11 @@
        "@types/node": "*"
      }
    },
+    "node_modules/@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="
+    },
    "node_modules/@types/eslint": {
      "version": "8.44.4",
      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.4.tgz",
@@ -6108,11 +6116,9 @@
      }
    },
    "node_modules/@types/hoist-non-react-statics": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.3.tgz",
-      "integrity": "sha512-Wny3a2UXn5FEA1l7gc6BbpoV5mD1XijZqgkp4TRgDCDL5r3B5ieOFGUX5h3n78Tr1MEG7BfvoM8qeztdvNU0fw==",
-      "optional": true,
-      "peer": true,
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz",
+      "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==",
      "dependencies": {
        "@types/react": "*",
        "hoist-non-react-statics": "^3.3.0"
@@ -6205,6 +6211,14 @@
      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.8.tgz",
      "integrity": "sha512-u95svzDlTysU5xecFNTgfFG5RUWu1A9P0VzgpcIiGZA9iraHOdSzcxMxQ55DyeRaGCSxQi7LxXDI4rzq/MYfdg=="
    },
+    "node_modules/@types/quill": {
+      "version": "1.3.10",
+      "resolved": "https://registry.npmjs.org/@types/quill/-/quill-1.3.10.tgz",
+      "integrity": "sha512-IhW3fPW+bkt9MLNlycw8u8fWb7oO7W5URC9MfZYHBlA24rex9rs23D5DETChu1zvgVdc5ka64ICjJOgQMr6Shw==",
+      "dependencies": {
+        "parchment": "^1.1.2"
+      }
+    },
    "node_modules/@types/range-parser": {
      "version": "1.2.5",
      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.5.tgz",
@@ -7223,9 +7237,9 @@
      }
    },
    "node_modules/autoprefixer": {
-      "version": "10.4.18",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.18.tgz",
-      "integrity": "sha512-1DKbDfsr6KUElM6wg+0zRNkB/Q7WcKYAaK+pzXn+Xqmszm/5Xa9coeNdtP88Vi+dPzZnMjhge8GIV49ZQkDa+g==",
+      "version": "10.4.19",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.19.tgz",
+      "integrity": "sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==",
      "funding": [
        {
          "type": "opencollective",
@@ -7242,7 +7256,7 @@
      ],
      "dependencies": {
        "browserslist": "^4.23.0",
-        "caniuse-lite": "^1.0.30001591",
+        "caniuse-lite": "^1.0.30001599",
        "fraction.js": "^4.3.7",
        "normalize-range": "^0.1.2",
        "picocolors": "^1.0.0",
@@ -8094,9 +8108,9 @@
      }
    },
    "node_modules/caniuse-lite": {
-      "version": "1.0.30001593",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001593.tgz",
-      "integrity": "sha512-UWM1zlo3cZfkpBysd7AS+z+v007q9G1+fLTUU42rQnY6t2axoogPW/xol6T7juU5EUoOhML4WgBIdG+9yYqAjQ==",
+      "version": "1.0.30001616",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001616.tgz",
+      "integrity": "sha512-RHVYKov7IcdNjVHJFNY/78RdG4oGVjbayxv8u5IO74Wv7Hlq4PnJE6mo/OjFijjVFNy5ijnCt6H3IIo4t+wfEw==",
      "funding": [
        {
          "type": "opencollective",
@@ -9428,6 +9442,25 @@
      "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
      "integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA=="
    },
+    "node_modules/deep-equal": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.2.tgz",
+      "integrity": "sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==",
+      "dependencies": {
+        "is-arguments": "^1.1.1",
+        "is-date-object": "^1.0.5",
+        "is-regex": "^1.1.4",
+        "object-is": "^1.1.5",
+        "object-keys": "^1.1.1",
+        "regexp.prototype.flags": "^1.5.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/deep-extend": {
      "version": "0.6.0",
      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
@@ -9850,9 +9883,9 @@
      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
    },
    "node_modules/ejs": {
-      "version": "3.1.9",
-      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.9.tgz",
-      "integrity": "sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==",
+      "version": "3.1.10",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
+      "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==",
      "dependencies": {
        "jake": "^10.8.5"
      },
@@ -10986,6 +11019,11 @@
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
    },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+    },
    "node_modules/external-editor": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
@@ -11059,11 +11097,6 @@
      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw=="
    },
-    "node_modules/fast-memoize": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.5.2.tgz",
-      "integrity": "sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw=="
-    },
    "node_modules/fast-url-parser": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/fast-url-parser/-/fast-url-parser-1.1.3.tgz",
@@ -12612,6 +12645,21 @@
        "node": ">= 10"
      }
    },
+    "node_modules/is-arguments": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
+      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/is-array-buffer": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz",
@@ -13332,9 +13380,9 @@
      }
    },
    "node_modules/jay-peg": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/jay-peg/-/jay-peg-1.0.1.tgz",
-      "integrity": "sha512-zBfjkGbuuNXk8JW+rEePpPEbRRjupS8q+5yPak7kjy3e2GvvNwsLle9okEFvfGyZA6HvtSSiYrVd1/jgnYebaQ==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/jay-peg/-/jay-peg-1.0.2.tgz",
+      "integrity": "sha512-fyV3NVvv6pTys/3BTapBUGAWAuU9rM2gRcgijZHzptd5KKL+s+S7hESFN+wOsbDH1MzFwdlRAXi0aGxS6uiMKg==",
      "dependencies": {
        "restructure": "^3.0.0"
      }
@@ -15889,11 +15937,6 @@
      "dev": true,
      "optional": true
    },
-    "node_modules/lodash.pick": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/lodash.pick/-/lodash.pick-4.4.0.tgz",
-      "integrity": "sha512-hXt6Ul/5yWjfklSGvLQl8vM//l3FtyHZeuelpzK6mm99pNvN9yTDruNZPEJZD1oWrqo+izBmB7oUfWgcCX7s4Q=="
-    },
    "node_modules/lodash.sortby": {
      "version": "4.7.0",
      "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
@@ -16841,6 +16884,21 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/object-is": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz",
+      "integrity": "sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/object-keys": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
@@ -17194,6 +17252,11 @@
        "tslib": "^2.0.3"
      }
    },
+    "node_modules/parchment": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
+      "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg=="
+    },
    "node_modules/parent-module": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -17577,9 +17640,9 @@
      }
    },
    "node_modules/postcss": {
-      "version": "8.4.37",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.37.tgz",
-      "integrity": "sha512-7iB/v/r7Woof0glKLH8b1SPHrsX7uhdO+Geb41QpF/+mWZHU3uxxSlN+UXGVit1PawOYDToO+AbZzhBzWRDwbQ==",
+      "version": "8.4.38",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
      "funding": [
        {
          "type": "opencollective",
@@ -19134,6 +19197,50 @@
        }
      ]
    },
+    "node_modules/quill": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz",
+      "integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==",
+      "dependencies": {
+        "clone": "^2.1.1",
+        "deep-equal": "^1.0.1",
+        "eventemitter3": "^2.0.3",
+        "extend": "^3.0.2",
+        "parchment": "^1.1.4",
+        "quill-delta": "^3.6.2"
+      }
+    },
+    "node_modules/quill-delta": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
+      "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
+      "dependencies": {
+        "deep-equal": "^1.0.1",
+        "extend": "^3.0.2",
+        "fast-diff": "1.1.2"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/quill-delta/node_modules/fast-diff": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
+      "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig=="
+    },
+    "node_modules/quill/node_modules/clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/quill/node_modules/eventemitter3": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
+      "integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg=="
+    },
    "node_modules/radix-ui": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/radix-ui/-/radix-ui-1.0.1.tgz",
@@ -19256,12 +19363,9 @@
      }
    },
    "node_modules/re-resizable": {
-      "version": "6.9.6",
-      "resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.9.6.tgz",
-      "integrity": "sha512-0xYKS5+Z0zk+vICQlcZW+g54CcJTTmHluA7JUUgvERDxnKAnytylcyPsA+BSFi759s5hPlHmBRegFrwXs2FuBQ==",
-      "dependencies": {
-        "fast-memoize": "^2.5.1"
-      },
+      "version": "6.9.14",
+      "resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.9.14.tgz",
+      "integrity": "sha512-2UbPrpezMr6gkHKNCRA/N6QGGU237SKOZ78yMHId204A/oXWSAREAIuGZNQ9qlrJosewzcsv2CphZH3u7hC6ng==",
      "peerDependencies": {
        "react": "^16.13.1 || ^17.0.0 || ^18.0.0",
        "react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0"
@@ -19354,6 +19458,19 @@
        "react": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
      }
    },
+    "node_modules/react-cookie": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-7.1.4.tgz",
+      "integrity": "sha512-wDxxa/HYaSXSMlyWJvJ5uZTzIVtQTPf1gMksFgwAz/2/W3lCtY8r4OChCXMPE7wax0PAdMY97UkNJedGv7KnDw==",
+      "dependencies": {
+        "@types/hoist-non-react-statics": "^3.3.5",
+        "hoist-non-react-statics": "^3.3.2",
+        "universal-cookie": "^7.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0"
+      }
+    },
    "node_modules/react-datepicker": {
      "version": "6.4.0",
      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-6.4.0.tgz",
@@ -19704,9 +19821,9 @@
      }
    },
    "node_modules/react-pdf": {
-      "version": "7.7.1",
-      "resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-7.7.1.tgz",
-      "integrity": "sha512-cbbf/PuRtGcPPw+HLhMI1f6NSka8OJgg+j/yPWTe95Owf0fK6gmVY7OXpTxMeh92O3T3K3EzfE0ML0eXPGwR5g==",
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-7.7.3.tgz",
+      "integrity": "sha512-a2VfDl8hiGjugpqezBTUzJHYLNB7IS7a2t7GD52xMI9xHg8LdVaTMsnM9ZlNmKadnStT/tvX5IfV0yLn+JvYmw==",
      "dependencies": {
        "clsx": "^2.0.0",
        "dequal": "^2.0.3",
@@ -19732,6 +19849,20 @@
        }
      }
    },
+    "node_modules/react-quill": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/react-quill/-/react-quill-2.0.0.tgz",
+      "integrity": "sha512-4qQtv1FtCfLgoD3PXAur5RyxuUbPXQGOHgTlFie3jtxp43mXDtzCKaOgQ3mLyZfi1PUlyjycfivKelFhy13QUg==",
+      "dependencies": {
+        "@types/quill": "^1.3.10",
+        "lodash": "^4.17.4",
+        "quill": "^1.3.7"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
+    },
    "node_modules/react-reconciler": {
      "version": "0.29.0",
      "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.29.0.tgz",
@@ -19827,45 +19958,19 @@
      }
    },
    "node_modules/react-rnd": {
-      "version": "10.4.1",
-      "resolved": "https://registry.npmjs.org/react-rnd/-/react-rnd-10.4.1.tgz",
-      "integrity": "sha512-0m887AjQZr6p2ADLNnipquqsDq4XJu/uqVqI3zuoGD19tRm6uB83HmZWydtkilNp5EWsOHbLGF4IjWMdd5du8Q==",
+      "version": "10.4.10",
+      "resolved": "https://registry.npmjs.org/react-rnd/-/react-rnd-10.4.10.tgz",
+      "integrity": "sha512-YjQAgEeSbNUoOXSD9ZBvIiLVizFb+bNhpDk8DbIRHA557NW02CXbwsAeOTpJQnsdhEL+NP2I+Ssrwejqcodtjg==",
      "dependencies": {
-        "re-resizable": "6.9.6",
-        "react-draggable": "4.4.5",
-        "tslib": "2.3.1"
+        "re-resizable": "6.9.14",
+        "react-draggable": "4.4.6",
+        "tslib": "2.6.2"
      },
      "peerDependencies": {
        "react": ">=16.3.0",
        "react-dom": ">=16.3.0"
      }
    },
-    "node_modules/react-rnd/node_modules/clsx": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
-      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/react-rnd/node_modules/react-draggable": {
-      "version": "4.4.5",
-      "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.5.tgz",
-      "integrity": "sha512-OMHzJdyJbYTZo4uQE393fHcqqPYsEtkjfMgvCHr6rejT+Ezn4OZbNyGH50vv+SunC1RMvwOTSWkEODQLzw1M9g==",
-      "dependencies": {
-        "clsx": "^1.1.1",
-        "prop-types": "^15.8.1"
-      },
-      "peerDependencies": {
-        "react": ">= 16.3.0",
-        "react-dom": ">= 16.3.0"
-      }
-    },
-    "node_modules/react-rnd/node_modules/tslib": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
-    },
    "node_modules/react-router": {
      "version": "6.22.3",
      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz",
@@ -20082,16 +20187,24 @@
        "react-dom": ">=16.6.0"
      }
    },
+    "node_modules/react-web-share": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/react-web-share/-/react-web-share-2.0.2.tgz",
+      "integrity": "sha512-bGm1TJc6xtC0MhAnYFsrzT4En7l2oAdLTgCK7nk7b4xGTg3L5gOldiPrmYQ8a/dEXNydgekvOj/tfjduIlIRVA==",
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
+    },
    "node_modules/reactour": {
-      "version": "1.19.2",
-      "resolved": "https://registry.npmjs.org/reactour/-/reactour-1.19.2.tgz",
-      "integrity": "sha512-gbbUiLn8LbpbDW6k+QlVySkblvOICBd3AWMGRKPQghhmuMlOHNqgjW32JrT406lZHUvVlA8+umYD/2MmCHkNOQ==",
+      "version": "1.19.3",
+      "resolved": "https://registry.npmjs.org/reactour/-/reactour-1.19.3.tgz",
+      "integrity": "sha512-a2/j+xmbGlPMQhMy/zdpSmJN1STc0PcLUxhJbAC+bOcYdWHStFR02j6dhNuF/+IeqpX/d44PvlrRXSTt4LGk6w==",
      "dependencies": {
        "@rooks/use-mutation-observer": "4.11.2",
        "classnames": "2.3.1",
        "focus-outline-manager": "^1.0.2",
        "lodash.debounce": "4.0.8",
-        "lodash.pick": "4.4.0",
        "prop-types": "15.7.2",
        "react-focus-lock": "2.5.2",
        "scroll-smooth": "1.1.1",
@@ -20549,9 +20662,9 @@
      }
    },
    "node_modules/restructure": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/restructure/-/restructure-3.0.0.tgz",
-      "integrity": "sha512-Xj8/MEIhhfj9X2rmD9iJ4Gga9EFqVlpMj3vfLnV2r/Mh5jRMryNV+6lWh9GdJtDBcBSPIqzRdfBQ3wDtNFv/uw=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/restructure/-/restructure-3.0.1.tgz",
+      "integrity": "sha512-6neDpI/yE9eogQo22qmWwKIA9wFPRyYjQleDEh6zaNAf2ZPqLJYUvNBJBWEWNoBlCeQMQkvIOe2YI/K2GOag+g=="
    },
    "node_modules/retry": {
      "version": "0.13.1",
@@ -22055,9 +22168,9 @@
      }
    },
    "node_modules/tar": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.0.tgz",
-      "integrity": "sha512-/Wo7DcT0u5HUV486xg675HtjNd3BXZ6xDbzsCUZPt5iw8bTQ63bP0Raut3mvro9u+CUyq7YQd8Cx55fsZXxqLQ==",
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz",
+      "integrity": "sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==",
      "optional": true,
      "dependencies": {
        "chownr": "^2.0.0",
@@ -22701,6 +22814,23 @@
        "node": ">=8"
      }
    },
+    "node_modules/universal-cookie": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-7.1.4.tgz",
+      "integrity": "sha512-Q+DVJsdykStWRMtXr2Pdj3EF98qZHUH/fXv/gwFz/unyToy1Ek1w5GsWt53Pf38tT8Gbcy5QNsj61Xe9TggP4g==",
+      "dependencies": {
+        "@types/cookie": "^0.6.0",
+        "cookie": "^0.6.0"
+      }
+    },
+    "node_modules/universal-cookie/node_modules/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
    "node_modules/universalify": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
@@ -23058,9 +23188,9 @@
      }
    },
    "node_modules/webpack-dev-middleware": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.3.tgz",
-      "integrity": "sha512-hj5CYrY0bZLB+eTO+x/j67Pkrquiy7kWepMHmUMoPsmcUaeEnQJqFzHJOyxgWlq746/wUuA64p9ta34Kyb01pA==",
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz",
+      "integrity": "sha512-BVdTqhhs+0IfoeAf7EoH5WE+exCmqGerHfDM0IL096Px60Tq2Mn9MAbnaGUe6HiMa41KMCYF19gyzZmBcq/o4Q==",
      "dependencies": {
        "colorette": "^2.0.10",
        "memfs": "^3.4.3",
@@ -3,9 +3,9 @@
  "version": "0.1.0",
  "private": true,
  "dependencies": {
-    "@formkit/auto-animate": "^0.8.1",
+    "@formkit/auto-animate": "^0.8.2",
    "@radix-ui/themes": "^2.0.3",
-    "@react-pdf/renderer": "^3.4.0",
+    "@react-pdf/renderer": "^3.4.4",
    "@reduxjs/toolkit": "^2.2.1",
    "axios": "^1.6.8",
    "file-saver": "^2.0.5",
@@ -17,6 +17,7 @@
    "radix-ui": "^1.0.1",
    "react": "^18.2.0",
    "react-bootstrap": "^2.10.2",
+    "react-cookie": "^7.1.4",
    "react-datepicker": "^6.4.0",
    "react-dnd": "^16.0.1",
    "react-dnd-html5-backend": "^16.0.1",
@@ -27,16 +28,18 @@
    "react-helmet": "^6.1.0",
    "react-konva": "^18.2.10",
    "react-modal": "^3.16.1",
-    "react-pdf": "^7.7.1",
+    "react-pdf": "^7.7.3",
+    "react-quill": "^2.0.0",
    "react-redux": "^9.1.0",
-    "react-rnd": "^10.4.1",
+    "react-rnd": "^10.4.10",
    "react-router-dom": "^6.22.3",
    "react-scripts": "5.0.1",
    "react-scrollbars-custom": "^4.1.1",
    "react-select": "^5.8.0",
    "react-signature-canvas": "^1.0.6",
    "react-tooltip": "^5.26.3",
-    "reactour": "^1.19.2",
+    "react-web-share": "^2.0.2",
+    "reactour": "^1.19.3",
    "redux": "^5.0.1",
    "redux-thunk": "^3.1.0",
    "regex-parser": "^2.3.0",
@@ -80,14 +83,14 @@
    }
  },
  "devDependencies": {
-    "@babel/runtime-corejs2": "^7.24.1",
-    "autoprefixer": "^10.4.18",
+    "@babel/runtime-corejs2": "^7.24.5",
+    "autoprefixer": "^10.4.19",
    "commitizen": "^4.3.0",
    "eslint": "^8.57.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.34.1",
    "lint-staged": "^15.2.2",
-    "postcss": "^8.4.37",
+    "postcss": "^8.4.38",
    "prettier": "^2.8.8",
    "pretty-quick": "^3.3.1",
    "tailwindcss": "^3.4.1"
@@ -3,7 +3,7 @@

 <head>
  <meta charset="utf-8" />
-  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <link rel="icon" href="/favicon.ico" />
  <!-- <link rel="icon" type="image/png"
    href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAALlJREFUaEPtmN0NwjAMBpNxYDKYiM1Yp90g93CKStH1NbIdfz921Dker2Pc+Js1cDF7MXAxASMGYkAigBI6vh9ZwoXP53uZoAYcvhwdA3mAVbI2aSb+9zFKU4IURB6j/HoPUIEa2G3iGIAhQQDlAUIoE2diabIklISS0NoFPebo77RF6OenEF3QntOm128he0GKrwHyACFoz2MgBqSGkpAEcHs47oHtN5AFakACqMNjQEMoE8SABFCHn4HE2zGHSLeEAAAAAElFTkSuQmCC"
    sizes="40x40" /> -->
@@ -15,7 +15,7 @@
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <link rel="manifest" href="/manifest.json" />
  <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
@@ -15,6 +15,7 @@ import DraftDocument from "./components/pdf/DraftDocument";
 import PlaceHolderSign from "./pages/PlaceHolderSign";
 import PdfRequestFiles from "./pages/PdfRequestFiles";
 import LazyPage from "./primitives/LazyPage";
+import { isEnableSubscription } from "./constant/const";
 const DebugPdf = lazy(() => import("./pages/DebugPdf"));
 const ForgetPassword = lazy(() => import("./pages/ForgetPassword"));
 const GuestLogin = lazy(() => import("./pages/GuestLogin"));
@@ -108,12 +109,16 @@ function App() {
              path="/login/:id/:userMail/:contactBookId/:serverUrl"
              element={<LazyPage Page={GuestLogin} />}
            />
+            <Route
+              path="/login/:base64url"
+              element={<LazyPage Page={GuestLogin} />}
+            />
            <Route path="/debugpdf" element={<LazyPage Page={DebugPdf} />} />
            <Route
              path="/forgetpassword"
              element={<LazyPage Page={ForgetPassword} />}
            />
-            {process.env.REACT_APP_ENABLE_SUBSCRIPTION && (
+            {isEnableSubscription && (
              <>
                <Route
                  path="/pgsignup"
@@ -49,6 +49,7 @@ const AddSigner = (props) => {
    e.preventDefault();
    e.stopPropagation();
    setIsLoader(true);
+    if (localStorage.getItem("TenantId")) {
    try {
      const contactQuery = new Parse.Object("contracts_Contactbook");
      contactQuery.set("Name", name);
@@ -56,13 +57,11 @@ const AddSigner = (props) => {
      contactQuery.set("Email", email);
      contactQuery.set("UserRole", "contracts_Guest");

-      if (localStorage.getItem("TenetId")) {
        contactQuery.set("TenantId", {
          __type: "Pointer",
          className: "partners_Tenant",
-          objectId: localStorage.getItem("TenetId")
+          objectId: localStorage.getItem("TenantId")
        });
-      }

      try {
        const _users = Parse.Object.extend("User");
@@ -188,6 +187,9 @@ const AddSigner = (props) => {
      setIsLoader(false);
      alert("something went wrong!");
    }
+    }else{
+      alert('something went wrong, please try again later')
+    }
  };

  // Define a function to handle the "add yourself" checkbox
@@ -48,11 +48,11 @@ const AddUser = (props) => {
        contactQuery.set("Email", email);
        contactQuery.set("UserRole", "contracts_User");

-        if (localStorage.getItem("TenetId")) {
+        if (localStorage.getItem("TenantId")) {
          contactQuery.set("TenantId", {
            __type: "Pointer",
            className: "partners_Tenant",
-            objectId: localStorage.getItem("TenetId")
+            objectId: localStorage.getItem("TenantId")
          });
        }

@@ -4,19 +4,43 @@ import FullScreenButton from "./FullScreenButton";
 import { useNavigate } from "react-router-dom";
 import Parse from "parse";
 import { useWindowSize } from "../hook/useWindowSize";
-import { openInNewTab } from "../constant/Utils";
+import { checkIsSubscribed, getAppLogo, openInNewTab } from "../constant/Utils";
+import { isEnableSubscription } from "../constant/const";
+
 const Header = ({ showSidebar }) => {
-  const navigation = useNavigate();
+  const navigate = useNavigate();
  const { width } = useWindowSize();
-  let applogo = localStorage.getItem("appLogo") || "";
  let username = localStorage.getItem("username");
  const image = localStorage.getItem("profileImg") || dp;
-
  const [isOpen, setIsOpen] = useState(false);
+  const [isSubscribe, setIsSubscribe] = useState(true);
+  const [isPro, setIsPro] = useState(false);
+  const [applogo, setAppLogo] = useState(
+    localStorage.getItem("appLogo") || " "
+  );

  const toggleDropdown = () => {
    setIsOpen(!isOpen);
  };
+  useEffect(() => {
+    checkSubscription();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  async function checkSubscription() {
+    if (isEnableSubscription) {
+      const getIsSubscribe = await checkIsSubscribed();
+      if (getIsSubscribe) {
+        const applogo = await getAppLogo();
+        if (applogo) {
+          setAppLogo(applogo);
+        } else {
+          setAppLogo(localStorage.getItem("appLogo") || "");
+        }
+      }
+      setIsPro(getIsSubscribe);
+      setIsSubscribe(getIsSubscribe);
+    }
+  }

  const closeDropdown = () => {
    setIsOpen(false);
@@ -43,7 +67,7 @@ const Header = ({ showSidebar }) => {
    localStorage.setItem("baseUrl", baseUrl);
    localStorage.setItem("parseAppId", appid);

-    navigation("/");
+    navigate("/");
  };

  //handle to close profile drop down menu onclick screen
@@ -83,6 +107,21 @@ const Header = ({ showSidebar }) => {
        id="profile-menu"
        className="flex justify-between items-center gap-x-3"
      >
+        {!isSubscribe && (
+          <div>
+            <button
+              className="text-xs bg-[#002864] p-2 text-white rounded shadow"
+              onClick={() => navigate("/subscription")}
+            >
+              Upgrade Now
+            </button>
+          </div>
+        )}
+        {isPro && (
+          <div className="w-[35px] h-[35px] rounded-full ring-[1px] ring-offset-2 ring-[#002862] text-[#002862] overflow-hidden font-semibold flex items-center justify-center">
+            PRO
+          </div>
+        )}
        <div>
          <FullScreenButton />
        </div>
@@ -123,7 +162,7 @@ const Header = ({ showSidebar }) => {
                className="hover:bg-gray-100 py-1 px-2 cursor-pointer font-normal"
                onClick={() => {
                  setIsOpen(false);
-                  navigation("/profile");
+                  navigate("/profile");
                }}
              >
                <i className="fa-regular fa-user"></i> Profile
@@ -132,11 +171,19 @@ const Header = ({ showSidebar }) => {
                className="hover:bg-gray-100 py-1 px-2 cursor-pointer font-normal"
                onClick={() => {
                  setIsOpen(false);
-                  navigation("/changepassword");
+                  navigate("/changepassword");
                }}
              >
                <i className="fa-solid fa-lock"></i> Change Password
              </li>
+              <li
+                className="hover:bg-gray-100 py-1 px-2 cursor-pointer font-normal"
+                onClick={() => {
+                  window.open("https://console.opensignlabs.com/");
+                }}
+              >
+                <i className="fa-regular fa-id-card"></i> Console
+              </li>
              <li
                className="hover:bg-gray-100 rounded-b-lg py-1 px-2 cursor-pointer font-normal"
                onClick={closeDropdown}
@@ -115,8 +115,8 @@ const GoogleSignInBtn = ({
      // console.log("payload ", payload);
      if (payload && payload.sessiontoken) {
        // setThirdpartyLoader(true);
-        const billingDate =
-          extRes.get("Next_billing_date") && extRes.get("Next_billing_date");
+        // const billingDate =
+        //   extRes.get("Next_billing_date") && extRes.get("Next_billing_date");
        // console.log("billingDate expired", billingDate > new Date());
        const LocalUserDetails = {
          name: details.Name,
@@ -125,7 +125,7 @@ const GoogleSignInBtn = ({
          company: extRes.get("Company")
        };
        localStorage.setItem("userDetails", JSON.stringify(LocalUserDetails));
-        thirdpartyLoginfn(payload.sessiontoken, billingDate);
+        thirdpartyLoginfn(payload.sessiontoken);
      }
      return { msg: "exist" };
    } else {
@@ -22,7 +22,8 @@ const RenderDebugPdf = (props) => {
          flex: 1,
          position: "relative",
          border: "1px solid grey",
-          overflow: "auto"
+          overflow: "auto",
+          cursor: "crosshair"
        }}
        onMouseMove={props.handleMouseMoveDiv}
      >
@@ -149,7 +149,7 @@ const DashboardCard = (props) => {
              }
            })
            .then((res) => {
-              const listData = res.data?.result.filter(
+              const listData = res.data?.result?.filter(
                (x) => x.Signers.length > 0
              );
              let arr = [];
@@ -97,11 +97,13 @@ function DashboardReport(props) {
            setIsMoreDocs(false);
          }
          setIsNextRecord(false);
-          setList((prevRecord) =>
-            prevRecord.length > 0
-              ? [...prevRecord, ...res.data.result]
-              : res.data.result
-          );
+          if (!res.data.result.error) {
+            setList((prevRecord) =>
+              prevRecord.length > 0
+                ? [...prevRecord, ...res.data.result]
+                : res.data.result
+            );
+          }
        }
        setIsLoader(false);
      } catch (err) {
@@ -110,6 +112,7 @@ function DashboardReport(props) {
          console.log("err ", err);
          setIsLoader(false);
        }
+        setIsLoader(false);
      }
    } else {
      setIsLoader(false);
@@ -70,6 +70,7 @@ function DriveBody(props) {
        return item;
      });
      props.setPdfData(updatedData);
+      props.sortingData(null, null, updatedData);
      await axios
        .put(
          `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
@@ -214,8 +215,8 @@ function DriveBody(props) {
        ? true
        : false
      : selecFolderId
-      ? false
-      : true;
+        ? false
+        : true;
    if (!checkExist) {
      if (moveFolderId) {
        updateData = {
@@ -384,6 +385,7 @@ function DriveBody(props) {
                flexDirection: "column",
                cursor: "pointer"
              }}
+              data-tut={props.dataTutSeventh}
            >
              <img
                alt="no img"
@@ -451,6 +453,7 @@ function DriveBody(props) {
                    className="pdf-icon"
                    src={pdfLogo}
                    onClick={() => checkPdfStatus(data)}
+                    data-tut={props.dataTutSixth}
                  />
                  {rename === data.objectId ? (
                    <input
@@ -30,7 +30,7 @@ const AddRoleModal = (props) => {
              margin: "10px 0 10px 5px"
            }}
          >
-            e.g: Hr, Director, Manager, New joinee, Accountant, etc...
+            e.g: Customer, Hr, Director, Manager, Student, etc...
          </p>
          <div>
            <div
@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from "react";
-import { themeColor } from "../../constant/const";
+import { isEnableSubscription, themeColor } from "../../constant/const";
 import ModalUi from "../../primitives/ModalUi";
 import { radioButtonWidget } from "../../constant/Utils";
 import PremiumAlertHeader from "../../primitives/PremiumAlertHeader";
+import Upgrade from "../../primitives/Upgrade";
 function DropdownWidgetOption(props) {
  const [dropdownOptionList, setDropdownOptionList] = useState([
    "option-1",
@@ -241,36 +242,59 @@ function DropdownWidgetOption(props) {
                }}
                className="fa-solid fa-square-plus"
              ></i>
-              {props.type === "checkbox" && !props.isSignYourself && (
-                <>
-                  <label style={{ fontSize: "13px", fontWeight: "600" }}>
-                    Minimun check
-                  </label>
-                  <input
-                    required
-                    defaultValue={0}
-                    value={minCount}
-                    onChange={(e) => {
-                      const count = handleSetMinMax(e);
-                      setMinCount(count);
-                    }}
-                    className="drodown-input"
-                  />
-                  <label style={{ fontSize: "13px", fontWeight: "600" }}>
-                    Maximum check
-                  </label>
-                  <input
-                    required
-                    defaultValue={0}
-                    value={maxCount}
-                    onChange={(e) => {
-                      const count = handleSetMinMax(e);
-                      setMaxCount(count);
-                    }}
-                    className="drodown-input"
-                  />
-                </>
-              )}
+              <div>
+                {props.type === "checkbox" && !props.isSignYourself && (
+                  <>
+                    <label
+                      style={{
+                        fontSize: "13px",
+                        fontWeight: "600",
+                        color: !props.isSubscribe && "gray"
+                      }}
+                    >
+                      Minimun check
+                    </label>
+                    {!props.isSubscribe && isEnableSubscription && <Upgrade />}
+                    <input
+                      required
+                      defaultValue={0}
+                      value={minCount}
+                      onChange={(e) => {
+                        const count = handleSetMinMax(e);
+                        setMinCount(count);
+                      }}
+                      className={
+                        props.isSubscribe || !isEnableSubscription
+                          ? "drodown-input"
+                          : "disabled drodown-input"
+                      }
+                    />
+                    <label
+                      style={{
+                        fontSize: "13px",
+                        fontWeight: "600",
+                        color: !props.isSubscribe && "gray"
+                      }}
+                    >
+                      Maximum check
+                    </label>
+                    <input
+                      required
+                      defaultValue={0}
+                      value={maxCount}
+                      onChange={(e) => {
+                        const count = handleSetMinMax(e);
+                        setMaxCount(count);
+                      }}
+                      className={
+                        props.isSubscribe || !isEnableSubscription
+                          ? "drodown-input"
+                          : "disabled drodown-input"
+                      }
+                    />
+                  </>
+                )}
+              </div>
            </div>
            {["dropdown", radioButtonWidget].includes(props.type) && (
              <>
@@ -378,13 +402,15 @@ function DropdownWidgetOption(props) {
              </div>
            )}
          </div>
-          {props.type === "checkbox" && !props.isSignYourself && (
-            <PremiumAlertHeader
-              message={
-                "Field validations are free in beta, this feature will incur a fee later."
-              }
-            />
-          )}
+          {props.type === "checkbox" &&
+            !props.isSignYourself &&
+            !isEnableSubscription && (
+              <PremiumAlertHeader
+                message={
+                  "Field validations are free in beta, this feature will incur a fee later."
+                }
+              />
+            )}
          <div
            className={`${
              props.type === "checkbox" && !props.isSignYourself
@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import "../../styles/AddUser.css";
+import { getFileName } from "../../constant/Utils";
 // import SelectFolder from "../../premitives/SelectFolder";

 const EditTemplate = ({ template, onSuccess }) => {
@@ -45,7 +46,7 @@ const EditTemplate = ({ template, onSuccess }) => {
                fontWeight: "700"
              }}
            >
-              {template.URL?.split("/")?.pop()?.split("_")[1]}
+              {getFileName(template.URL)}
            </div>
          </div>
          <div className="form-section">
@@ -0,0 +1,157 @@
+import React from "react";
+import { Quill } from "react-quill";
+
+// Custom Undo button icon component for Quill editor. You can import it directly
+// from 'quill/assets/icons/undo.svg' but I found that a number of loaders do not
+// handle them correctly
+const CustomUndo = () => (
+  <svg viewBox="0 0 18 18">
+    <polygon className="ql-fill ql-stroke" points="6 10 4 12 2 10 6 10" />
+    <path
+      className="ql-stroke"
+      d="M8.09,13.91A4.6,4.6,0,0,0,9,14,5,5,0,1,0,4,9"
+    />
+  </svg>
+);
+
+// Redo button icon component for Quill editor
+const CustomRedo = () => (
+  <svg viewBox="0 0 18 18">
+    <polygon className="ql-fill ql-stroke" points="12 10 14 12 16 10 12 10" />
+    <path
+      className="ql-stroke"
+      d="M9.91,13.91A4.6,4.6,0,0,1,9,14a5,5,0,1,1,5-5"
+    />
+  </svg>
+);
+
+// Undo and redo functions for Custom Toolbar
+function undoChange() {
+  this.quill.history.undo();
+}
+function redoChange() {
+  this.quill.history.redo();
+}
+
+// Add sizes to whitelist and register them
+const Size = Quill.import("formats/size");
+Size.whitelist = ["extra-small", "small", "medium", "large"];
+Quill.register(Size, true);
+
+// Add fonts to whitelist and register them
+const Font = Quill.import("formats/font");
+Font.whitelist = [
+  "arial",
+  "comic-sans",
+  "courier-new",
+  "georgia",
+  "helvetica",
+  "lucida"
+];
+Quill.register(Font, true);
+
+// Modules object for setting up the Quill editor
+export const module1 = {
+  toolbar: {
+    container: "#toolbar1",
+    handlers: {
+      undo: undoChange,
+      redo: redoChange
+    }
+  },
+  history: {
+    delay: 500,
+    maxStack: 100,
+    userOnly: true
+  }
+};
+// Formats objects for setting up the Quill editor
+export const formats = [
+  "header",
+  "font",
+  "size",
+  "bold",
+  "italic",
+  "underline",
+  "align",
+  "strike",
+  "script",
+  "blockquote",
+  "background",
+  "list",
+  "bullet",
+  "indent",
+  "link",
+  "image",
+  "color",
+  "code-block"
+];
+// Quill Toolbar component
+export const QuillToolbar = ({ containerId }) => (
+  <div id={containerId}>
+    <span className="ql-formats">
+      <select className="ql-font" defaultValue="arial">
+        <option value="arial">Arial</option>
+        <option value="comic-sans">Comic Sans</option>
+        <option value="courier-new">Courier New</option>
+        <option value="georgia">Georgia</option>
+        <option value="helvetica">Helvetica</option>
+        <option value="lucida">Lucida</option>
+      </select>
+      <select className="ql-size" defaultValue="medium">
+        <option value="extra-small">Size 1</option>
+        <option value="small">Size 2</option>
+        <option value="medium">Size 3</option>
+        <option value="large">Size 4</option>
+      </select>
+      <select className="ql-header" defaultValue="3">
+        <option value="1">Heading</option>
+        <option value="2">Subheading</option>
+        <option value="3">Normal</option>
+      </select>
+    </span>
+    <span className="ql-formats">
+      <button className="ql-bold" />
+      <button className="ql-italic" />
+      <button className="ql-underline" />
+      <button className="ql-strike" />
+    </span>
+    <span className="ql-formats">
+      <button className="ql-list" value="ordered" />
+      <button className="ql-list" value="bullet" />
+      <button className="ql-indent" value="-1" />
+      <button className="ql-indent" value="+1" />
+    </span>
+    <span className="ql-formats">
+      <button className="ql-script" value="super" />
+      <button className="ql-script" value="sub" />
+      <button className="ql-blockquote" />
+      <button className="ql-direction" />
+    </span>
+    <span className="ql-formats">
+      <select className="ql-align" />
+      <select className="ql-color" />
+      <select className="ql-background" />
+    </span>
+    <span className="ql-formats">
+      <button className="ql-link" />
+      <button className="ql-image" />
+      <button className="ql-video" />
+    </span>
+    <span className="ql-formats">
+      <button className="ql-formula" />
+      <button className="ql-code-block" />
+      <button className="ql-clean" />
+    </span>
+    <span className="ql-formats">
+      <button className="ql-undo">
+        <CustomUndo />
+      </button>
+      <button className="ql-redo">
+        <CustomRedo />
+      </button>
+    </span>
+  </div>
+);
+
+export default QuillToolbar;
@@ -0,0 +1,52 @@
+import React from "react";
+import Tooltip from "../../primitives/Tooltip";
+
+import ReactQuill from "react-quill";
+import "react-quill/dist/quill.snow.css";
+import EditorToolbar, { module1, formats } from "./EditorToolbar";
+
+export function EmailBody(props) {
+  return (
+    <React.Fragment>
+      <div className={`flex justify-center  py-1 p-2`}>
+        <div className=" flex flex-col">
+          <form>
+            <div className="text-lg font-normal text-black">
+              <div className=" m-2 md:m-10 p-3 md:p-10 shadow-md hover:shadow-lg border-[1px] border-indigo-800 rounded-md">
+                <label className="text-sm ml-2">
+                  Subject <Tooltip message={"email subject"} />
+                </label>
+                <input
+                  required
+                  value={props.requestSubject}
+                  onChange={(e) => props.setRequestSubject(e.target.value)}
+                  placeholder='${senderName} has requested you to sign "${documentName}"'
+                  className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                />
+                <label className="text-sm ml-2 mt-3">
+                  Body <Tooltip message={"email body"} />
+                </label>
+
+                <div className="px-3 py-2 w-full focus:outline-none text-xs">
+                  <EditorToolbar containerId="toolbar1" />
+                  <ReactQuill
+                    theme="snow"
+                    value={props.requestBody}
+                    // value={typedText}
+                    placeholder="add body of email "
+                    // readOnly={loading}
+                    // onChangeSelection={handleTextSelection} // Listen for text selection
+                    ref={props.editorRef}
+                    modules={module1}
+                    formats={formats}
+                    onChange={props.handleOnchangeRequest}
+                  />
+                </div>
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+    </React.Fragment>
+  );
+}
@@ -15,7 +15,9 @@ function EmailComponent({
  setSuccessEmail,
  pdfName,
  sender,
-  setIsAlert
+  setIsAlert,
+  extUserId,
+  activeMailAdapter
 }) {
  const [emailList, setEmailList] = useState([]);
  const [emailValue, setEmailValue] = useState();
@@ -23,6 +25,7 @@ function EmailComponent({
  //function for send email
  const sendEmail = async () => {
    setIsLoading(true);
+
    let sendMail;
    for (let i = 0; i < emailList.length; i++) {
      try {
@@ -38,6 +41,8 @@ function EmailComponent({
        const openSignUrl = "https://www.opensignlabs.com/contact-us";
        const themeBGcolor = themeColor;
        let params = {
+          mailProvider: activeMailAdapter,
+          extUserId: extUserId,
          pdfName: pdfName,
          url: pdfUrl,
          recipient: emailList[i],
@@ -1,7 +1,5 @@
-import React from "react";
+import React, { useState } from "react";
 import PrevNext from "./PrevNext";
-import { PDFDownloadLink } from "@react-pdf/renderer";
-import Certificate from "./Certificate";
 import printModule from "print-js";
 import { getBase64FromUrl } from "../../constant/Utils";
 import { saveAs } from "file-saver";
@@ -9,18 +7,18 @@ import "../../styles/signature.css";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import { useNavigate } from "react-router-dom";
 import { themeColor } from "../../constant/const";
+import axios from "axios";
+import ModalUi from "../../primitives/ModalUi";
+import { appInfo } from "../../constant/appinfo";

 function Header({
  isPdfRequestFiles,
  isPlaceholder,
-  recipient,
  setIsDecline,
  pageNumber,
-  isAlreadySign,
  allPages,
  changePage,
  pdfUrl,
-  documentStatus,
  embedWidgetsData,
  pdfDetails,
  signerPos,
@@ -42,6 +40,7 @@ function Header({
    signerPos && signerPos?.filter((data) => data.Role !== "prefill");
  const isMobile = window.innerWidth < 767;
  const navigate = useNavigate();
+  const [isCertificate, setIsCertificate] = useState(false);
  const isGuestSigner = localStorage.getItem("isGuestSigner");
  //for go to previous page
  function previousPage() {
@@ -64,139 +63,119 @@ function Header({
  const handleToPrint = async (event) => {
    event.preventDefault();

-    const pdf = await getBase64FromUrl(pdfUrl);
-    const isAndroidDevice = navigator.userAgent.match(/Android/i);
-    const isAppleDevice =
-      (/iPad|iPhone|iPod/.test(navigator.platform) ||
-        (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1)) &&
-      !window.MSStream;
-    if (isAndroidDevice || isAppleDevice) {
-      const byteArray = Uint8Array.from(
-        atob(pdf)
-          .split("")
-          .map((char) => char.charCodeAt(0))
+    try {
+      // const url = await Parse.Cloud.run("getsignedurl", { url: pdfUrl });
+      const axiosRes = await axios.post(
+        `${appInfo.baseUrl}/functions/getsignedurl`,
+        { url: pdfUrl },
+        {
+          headers: {
+            "content-type": "Application/json",
+            "X-Parse-Application-Id": appInfo.appId,
+            "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+          }
+        }
      );
-      const blob = new Blob([byteArray], { type: "application/pdf" });
-      const blobUrl = URL.createObjectURL(blob);
-      window.open(blobUrl, "_blank");
-    } else {
-      printModule({ printable: pdf, type: "pdf", base64: true });
+      const url = axiosRes.data.result;
+      const pdf = await getBase64FromUrl(url);
+      const isAndroidDevice = navigator.userAgent.match(/Android/i);
+      const isAppleDevice =
+        (/iPad|iPhone|iPod/.test(navigator.platform) ||
+          (navigator.platform === "MacIntel" &&
+            navigator.maxTouchPoints > 1)) &&
+        !window.MSStream;
+      if (isAndroidDevice || isAppleDevice) {
+        const byteArray = Uint8Array.from(
+          atob(pdf)
+            .split("")
+            .map((char) => char.charCodeAt(0))
+        );
+        const blob = new Blob([byteArray], { type: "application/pdf" });
+        const blobUrl = URL.createObjectURL(blob);
+        window.open(blobUrl, "_blank");
+      } else {
+        printModule({ printable: pdf, type: "pdf", base64: true });
+      }
+    } catch (err) {
+      console.log("err in getsignedurl", err);
+      alert("something went wrong, please try again later.");
    }
  };

  //handle download signed pdf
-  const handleDownloadPdf = () => {
+  const handleDownloadPdf = async () => {
    const pdfName = pdfDetails[0] && pdfDetails[0].Name;
-    saveAs(pdfUrl, `${sanitizeFileName(pdfName)}_signed_by_OpenSign™.pdf`);
+    try {
+      // const url = await Parse.Cloud.run("getsignedurl", { url: pdfUrl });
+      const axiosRes = await axios.post(
+        `${appInfo.baseUrl}/functions/getsignedurl`,
+        { url: pdfUrl },
+        {
+          headers: {
+            "content-type": "Application/json",
+            "X-Parse-Application-Id": appInfo.appId,
+            "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+          }
+        }
+      );
+      const url = axiosRes.data.result;
+      saveAs(url, `${sanitizeFileName(pdfName)}_signed_by_OpenSign™.pdf`);
+    } catch (err) {
+      console.log("err in getsignedurl", err);
+      alert("something went wrong, please try again later.");
+    }
  };

  const sanitizeFileName = (pdfName) => {
    // Replace spaces with underscore
    return pdfName.replace(/ /g, "_");
  };
-  //certificate generate and download component in mobile view
-  const CertificateDropDown = () => {
-    //after generate download certifcate pdf
-    const handleDownload = (pdfBlob, fileName) => {
-      if (pdfBlob) {
-        const url = window.URL.createObjectURL(pdfBlob);
-        // Create a temporary anchor element
-        const link = document.createElement("a");
-        link.href = url;
-        link.download = fileName;
-        // Append the anchor to the body
-        document.body.appendChild(link);
-        // Programmatically click the anchor to trigger the download
-        link.click();
-        // Remove the anchor from the body
-        document.body.removeChild(link);
-        // Release the object URL to free up resources
-        window.URL.revokeObjectURL(url);
-      }
-    };

-    return (
-      <PDFDownloadLink
-        onClick={(e) => e.preventDefault()}
-        style={{ textDecoration: "none", zIndex: "35" }}
-        document={<Certificate pdfData={pdfDetails} />}
-      >
-        {({ blob, loading }) => (
-          <>
-            {loading ? (
-              <div
-                style={{
-                  border: "none",
-                  backgroundColor: "#fff"
-                }}
-              >
-                <i
-                  className="fa-solid fa-award"
-                  style={{ marginRight: "2px" }}
-                  aria-hidden="true"
-                ></i>
-                Certificate
-              </div>
-            ) : (
-              <div
-                style={{ border: "none", backgroundColor: "#fff" }}
-                onClick={() =>
-                  handleDownload(
-                    blob,
-                    `completion certificate-${
-                      pdfDetails[0] && pdfDetails[0].Name
-                    }.pdf`
-                  )
-                }
-              >
-                <i
-                  className="fa-solid fa-award"
-                  style={{ marginRight: "2px" }}
-                  aria-hidden="true"
-                ></i>
-                Certificate
-              </div>
-            )}
-          </>
-        )}
-      </PDFDownloadLink>
-    );
-  };
-  const CertificateComponent = () => {
-    return (
-      <PDFDownloadLink
-        style={{ textDecoration: "none" }}
-        document={<Certificate pdfData={pdfDetails} />}
-        fileName={`completion certificate-${
-          pdfDetails[0] && pdfDetails[0].Name
-        }.pdf`}
-      >
-        {({ loading }) => (
-          <button
-            type="button"
-            className="defaultBtn certificateBtn"
-            disabled={loading}
-            style={{
-              display: "flex",
-              flexDirection: "row",
-              alignItems: "center"
-            }}
-          >
-            <i
-              className="fa-solid fa-award"
-              style={{
-                color: "white",
-                fontSize: "15px",
-                marginRight: "3px"
-              }}
-              aria-hidden="true"
-            ></i>
-            Certificate
-          </button>
-        )}
-      </PDFDownloadLink>
-    );
+  //handle download signed pdf
+  const handleDownloadCertificate = async () => {
+    if (pdfDetails?.length > 0 && pdfDetails[0]?.CertificateUrl) {
+      try {
+        await fetch(pdfDetails[0] && pdfDetails[0]?.CertificateUrl);
+        const certificateUrl = pdfDetails[0] && pdfDetails[0]?.CertificateUrl;
+        saveAs(certificateUrl, `Certificate_signed_by_OpenSign™.pdf`);
+      } catch (err) {
+        console.log("err in download in certificate", err);
+      }
+    } else {
+      setIsCertificate(true);
+      try {
+        const data = {
+          docId: pdfDetails[0]?.objectId
+        };
+        const docDetails = await axios.post(
+          `${localStorage.getItem("baseUrl")}functions/getDocument`,
+          data,
+          {
+            headers: {
+              "Content-Type": "application/json",
+              "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
+              sessionToken: localStorage.getItem("accesstoken")
+            }
+          }
+        );
+        if (docDetails.data && docDetails.data.result) {
+          const doc = docDetails.data.result;
+          if (doc?.CertificateUrl) {
+            await fetch(doc?.CertificateUrl);
+            const certificateUrl = doc?.CertificateUrl;
+            saveAs(certificateUrl, `Certificate_signed_by_OpenSign™.pdf`);
+            setIsCertificate(false);
+          } else {
+            setIsCertificate(true);
+          }
+        }
+      } catch (err) {
+        console.log("err in download in certificate", err);
+        alert("something went wrong, please try again later.");
+      }
+    }
  };
+
  return (
    <div style={{ padding: "5px 0px 5px 0px" }} className="mobileHead">
      {isMobile && isShowHeader ? (
@@ -210,11 +189,7 @@ function Header({
          }}
        >
          <div className="preBtn2">
-            <div
-              onClick={() => {
-                navigate(-1);
-              }}
-            >
+            <div onClick={() => navigate(-1)}>
              <i
                className="fa fa-arrow-left"
                aria-hidden="true"
@@ -266,7 +241,6 @@ function Header({
                    <i className="fa fa-ellipsis-v" aria-hidden="true"></i>
                  </div>
                </DropdownMenu.Trigger>
-
                <DropdownMenu.Portal>
                  <DropdownMenu.Content
                    className="DropdownMenuContent"
@@ -290,42 +264,45 @@ function Header({
                        Download
                      </div>
                    </DropdownMenu.Item>
-                    {recipient && pdfDetails[0] && pdfDetails.length > 0 ? (
-                      <DropdownMenu.Item className="DropdownMenuItem">
-                        <CertificateDropDown />
+                    {isCompleted && (
+                      <DropdownMenu.Item
+                        className="DropdownMenuItem"
+                        onClick={() => handleDownloadCertificate()}
+                      >
+                        <div
+                          style={{
+                            border: "none",
+                            backgroundColor: "#fff"
+                          }}
+                        >
+                          <i
+                            className="fa-solid fa-award"
+                            style={{ marginRight: "2px" }}
+                            aria-hidden="true"
+                          ></i>
+                          Certificate
+                        </div>
                      </DropdownMenu.Item>
-                    ) : isPdfRequestFiles &&
-                      alreadySign &&
-                      isCompleted.isCertificate ? (
-                      <DropdownMenu.Item className="DropdownMenuItem">
-                        <CertificateDropDown />
+                    )}
+                    {isSignYourself && (
+                      <DropdownMenu.Item
+                        className="DropdownMenuItem"
+                        onClick={() => setIsEmail(true)}
+                      >
+                        <div
+                          style={{
+                            display: "flex",
+                            flexDirection: "row"
+                          }}
+                        >
+                          <i
+                            className="fa fa-envelope"
+                            style={{ marginRight: "2px" }}
+                            aria-hidden="true"
+                          ></i>
+                          Mail
+                        </div>
                      </DropdownMenu.Item>
-                    ) : (
-                      isSignYourself && (
-                        <>
-                          <DropdownMenu.Item className="DropdownMenuItem">
-                            <CertificateDropDown />
-                          </DropdownMenu.Item>
-                          <DropdownMenu.Item
-                            className="DropdownMenuItem"
-                            onClick={() => setIsEmail(true)}
-                          >
-                            <div
-                              style={{
-                                display: "flex",
-                                flexDirection: "row"
-                              }}
-                            >
-                              <i
-                                className="fa fa-envelope"
-                                style={{ marginRight: "2px" }}
-                                aria-hidden="true"
-                              ></i>
-                              Mail
-                            </div>
-                          </DropdownMenu.Item>
-                        </>
-                      )
                    )}
                    <DropdownMenu.Item
                      className="DropdownMenuItem"
@@ -337,7 +314,6 @@ function Header({
                          flexDirection: "row"
                        }}
                      >
-                        {" "}
                        <i
                          className="fa fa-print"
                          aria-hidden="true"
@@ -416,217 +392,118 @@ function Header({
          </div>
        </div>
      ) : (
-        <div className="signatureHeader headerBtn">
+        <div className="flex flex-wrap justify-between items-center mt-[5px]">
          <PrevNext
            pageNumber={pageNumber}
            allPages={allPages}
            changePage={changePage}
          />
-
-          {recipient ? (
-            pdfUrl || isAlreadySign.mssg ? (
-              <div style={{ display: "flex", flexDirection: "row" }}>
-                {pdfDetails && pdfDetails.length > 0 && (
-                  <CertificateComponent />
-                )}
-                <button
-                  onClick={handleToPrint}
-                  style={{
-                    display: "flex",
-                    flexDirection: "row",
-                    alignItems: "center"
-                  }}
-                  className="defaultBtn printBtn"
-                >
-                  <i
-                    className="fa fa-print"
-                    style={{
-                      fontSize: "15px",
-                      marginRight: "3px",
-                      color: "white"
-                    }}
-                    aria-hidden="true"
-                  ></i>
-                  Print
-                </button>
-
-                <button
-                  type="button"
-                  style={{
-                    display: "flex",
-                    flexDirection: "row",
-                    alignItems: "center"
-                  }}
-                  className="defaultBtn downloadBtn"
-                  onClick={() => handleDownloadPdf()}
-                >
-                  <i
-                    className="fa fa-download"
-                    style={{
-                      color: "white",
-                      fontSize: "15px",
-                      marginRight: "3px"
-                    }}
-                    aria-hidden="true"
-                  ></i>
-                  Download
-                </button>
-              </div>
-            ) : (
-              <div style={{ display: "flex", flexDirection: "row" }}>
-                <button
-                  style={{
-                    background: "#de4337"
-                  }}
-                  className="finishBtn hoverCss"
-                  onClick={() => {
-                    handleDeclinePdfAlert();
-                  }}
-                >
-                  Decline
-                </button>
-
-                <button
-                  data-tut="reactourThird"
-                  style={{
-                    background: !pdfUrl ? "#188ae2" : "#d3edeb"
-                  }}
-                  className="finishBtn sendHover"
-                  onClick={() => {
-                    if (!pdfUrl) {
-                      embedWidgetsData();
-                    }
-                  }}
-                >
-                  Finish
-                </button>
-              </div>
-            )
-          ) : isPlaceholder ? (
+          {isPlaceholder ? (
            <>
-              {!isMailSend &&
-                signersdata.length > 0 &&
-                signersdata.length !== filterPrefill.length && (
-                  <div>
-                    {filterPrefill.length === 0 ? (
-                      <span style={{ fontSize: "13px", color: "#f5405e" }}>
-                        Add {signersdata.length - filterPrefill.length}{" "}
-                        recipients signature
-                      </span>
-                    ) : (
-                      <span style={{ fontSize: "13px", color: "#f5405e" }}>
-                        Add {signersdata.length - filterPrefill.length} more
-                        recipients signature
-                      </span>
-                    )}
-                  </div>
-                )}
-
-              <div>
+              <div className="flex mx-[100px] lg:mx-0 order-last lg:order-none">
+                {!isMailSend &&
+                  signersdata.length > 0 &&
+                  signersdata.length !== filterPrefill.length && (
+                    <div>
+                      {filterPrefill.length === 0 ? (
+                        <span style={{ fontSize: "13px", color: "#f5405e" }}>
+                          Add {signersdata.length - filterPrefill.length}{" "}
+                          recipients signature
+                        </span>
+                      ) : (
+                        <span style={{ fontSize: "13px", color: "#f5405e" }}>
+                          Add {signersdata.length - filterPrefill.length} more
+                          recipients signature
+                        </span>
+                      )}
+                    </div>
+                  )}
+              </div>
+              <div className="flex">
                {setIsEditTemplate && (
                  <button
                    onClick={() => setIsEditTemplate(true)}
-                    style={{
-                      border: "none",
-                      outline: "none",
-                      textAlign: "center"
-                    }}
+                    className="outline-none border-none text-center mr-[5px]"
                  >
                    <i className="fa-solid fa-gear fa-lg"></i>
                  </button>
                )}
                <button
-                  onClick={() => {
-                    navigate(-1);
-                  }}
+                  onClick={() => navigate(-1)}
                  type="button"
-                  className="defaultBtn backBtn"
+                  className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[18px] text-black font-[500] text-sm mr-[5px] bg-white"
                >
                  Back
                </button>
-
                <button
                  disabled={isMailSend && true}
                  data-tut="reactourFour"
+                  className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[18px] font-[500] text-sm mr-[5px]"
                  style={{
                    background: isMailSend ? "rgb(203, 203, 203)" : "#188ae2",
-                    color: isMailSend && "rgb(77, 75, 75)"
+                    color: isMailSend ? "rgb(77, 75, 75)" : "white"
                  }}
                  onClick={() => {
                    alertSendEmail();
                  }}
-                  className={isMailSend ? "sendMail" : "sendMail sendHover"}
                >
-                  {completeBtnTitle ? completeBtnTitle : "Send"}
+                  {completeBtnTitle
+                    ? completeBtnTitle
+                    : isMailSend
+                    ? "Sent"
+                    : "Send"}
                </button>
              </div>
            </>
          ) : isPdfRequestFiles ? (
            alreadySign ? (
              <div style={{ display: "flex", flexDirection: "row" }}>
-                {isCompleted.isCertificate && <CertificateComponent />}
+                {isCompleted && (
+                  <button
+                    type="button"
+                    onClick={() => handleDownloadCertificate()}
+                    className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#08bc66]"
+                  >
+                    <i
+                      className="fa-solid fa-award py-[3px]"
+                      aria-hidden="true"
+                    ></i>
+                    <span className="hidden lg:block ml-1">Certificate</span>
+                  </button>
+                )}
+
                <button
                  onClick={handleToPrint}
                  type="button"
-                  className="defaultBtn printBtn"
-                  style={{
-                    display: "flex",
-                    flexDirection: "row",
-                    alignItems: "center"
-                  }}
+                  className="flex flex-row items-center  shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#188ae2]"
                >
-                  <i
-                    className="fa fa-print"
-                    style={{
-                      fontSize: "15px",
-                      marginRight: "3px",
-                      color: "white"
-                    }}
-                    aria-hidden="true"
-                  ></i>
-                  Print
+                  <i className="fa fa-print py-[3px]" aria-hidden="true"></i>
+                  <span className="hidden lg:block ml-1">Print</span>
                </button>

                <button
                  type="button"
-                  className="defaultBtn downloadBtn"
-                  style={{
-                    display: "flex",
-                    flexDirection: "row",
-                    alignItems: "center"
-                  }}
+                  className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#f14343]"
                  onClick={() => handleDownloadPdf()}
                >
-                  <i
-                    className="fa fa-download"
-                    style={{
-                      color: "white",
-                      fontSize: "15px",
-                      marginRight: "3px"
-                    }}
-                    aria-hidden="true"
-                  ></i>
-                  Download
+                  <i className="fa fa-download py-[3px]" aria-hidden="true"></i>
+                  <span className="hidden lg:block ml-1">Download</span>
                </button>
              </div>
            ) : (
-              <div>
+              <div className="flex">
                <button
-                  onClick={() => {
-                    navigate(-1);
-                  }}
+                  onClick={() => navigate(-1)}
                  type="button"
-                  className="defaultBtn backBtn"
+                  className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[18px] text-black font-[500] text-sm mr-[5px] bg-white"
                >
                  Back
                </button>
                {currentSigner && (
                  <>
                    <button
-                      style={{
-                        background: "#de4337"
-                      }}
-                      className="finishBtn hoverCss"
+                      style={{ background: "#de4337" }}
+                      className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[18px] text-white font-[500] text-[13px] mr-[5px] bg-[#f14343]"
                      onClick={() => {
                        handleDeclinePdfAlert();
                      }}
@@ -638,7 +515,7 @@ function Header({
                        background: "#188ae2"
                      }}
                      type="button"
-                      className="finishBtn sendHover"
+                      className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[18px] text-white font-[500] text-[13px] mr-[5px] bg-[#188ae2]"
                      onClick={() => {
                        embedWidgetsData();
                      }}
@@ -649,93 +526,63 @@ function Header({
                )}
              </div>
            )
-          ) : pdfUrl || (documentStatus && documentStatus.isCompleted) ? (
+          ) : isCompleted ? (
            <div style={{ display: "flex", flexDirection: "row" }}>
-              <CertificateComponent />
+              {isCompleted && (
+                <button
+                  type="button"
+                  onClick={() => handleDownloadCertificate()}
+                  className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#08bc66]"
+                >
+                  <i
+                    className="fa-solid fa-award py-[3px]"
+                    aria-hidden="true"
+                  ></i>
+                  <span className="hidden lg:block ml-1">Certificate</span>
+                </button>
+              )}
              <button
                onClick={handleToPrint}
                type="button"
-                style={{
-                  display: "flex",
-                  flexDirection: "row",
-                  alignItems: "center"
-                }}
-                className="defaultBtn printBtn"
+                className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#188ae2]"
              >
-                <i
-                  className="fa fa-print"
-                  style={{
-                    fontSize: "15px",
-                    marginRight: "3px",
-                    color: "white"
-                  }}
-                  aria-hidden="true"
-                ></i>
-                Print
+                <i className="fa fa-print py-[3px]" aria-hidden="true"></i>
+                <span className="hidden lg:block ml-1">Print</span>
              </button>
              <button
                type="button"
-                className="defaultBtn downloadBtn"
-                style={{
-                  display: "flex",
-                  flexDirection: "row",
-                  alignItems: "center",
-                  marginLeft: "10px"
-                }}
+                className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#f14343]"
                onClick={() => handleDownloadPdf()}
              >
-                <i
-                  className="fa fa-download"
-                  style={{
-                    color: "white",
-                    fontSize: "15px",
-                    marginRight: "3px"
-                  }}
-                  aria-hidden="true"
-                ></i>
-                Download
+                <i className="fa fa-download py-[3px]" aria-hidden="true"></i>
+                <span className="hidden lg:block ml-1">Download</span>
              </button>
              <button
                type="button"
-                className="defaultBtn mailBtn"
-                style={{
-                  display: "flex",
-                  flexDirection: "row",
-                  alignItems: "center",
-                  marginLeft: "10px"
-                }}
+                className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#3ba7e5]"
                onClick={() => setIsEmail(true)}
              >
-                <i
-                  className="fa fa-envelope"
-                  style={{
-                    color: "white",
-                    fontSize: "15px",
-                    marginRight: "3px"
-                  }}
-                  aria-hidden="true"
-                ></i>
-                Mail
+                <i className="fa fa-envelope py-[3px]" aria-hidden="true"></i>
+                <span className="hidden lg:block ml-1">Mail</span>
              </button>
            </div>
          ) : (
-            <div>
+            <div className="flex">
              <button
                onClick={() => {
                  navigate(-1);
                }}
                type="button"
-                className="defaultBtn backBtn"
+                className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[18px] text-black font-[500] text-sm mr-[5px] bg-white"
              >
                Back
              </button>
-
              <button
                style={{
                  background: "#188ae2"
                }}
                type="button"
-                className="finishBtn sendHover"
+                className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[18px] text-white font-[500] text-[13px] mr-[5px] bg-[#188ae2]"
                onClick={() => {
                  if (!pdfUrl) {
                    embedWidgetsData();
@@ -748,6 +595,21 @@ function Header({
          )}
        </div>
      )}
+      <ModalUi
+        isOpen={isCertificate}
+        title={"Generating certificate"}
+        handleClose={() => setIsCertificate(false)}
+      >
+        <div className="p-3 md:p-5 text-[13px] md:text-base text-center">
+          <p>
+            Your completion certificate is being generated. Please wait
+            momentarily.
+          </p>
+          <p>
+            If the download doesn&apos;t start shortly, click the button again.
+          </p>
+        </div>
+      </ModalUi>
    </div>
  );
 }
@@ -416,7 +416,7 @@ function Placeholder(props) {

              {props.pos.type !== textWidget && !props.isSignYourself && (
                <i
-                  data-tut="reactourLinkUser"
+                  data-tut="assignSigner"
                  className="fa-regular fa-user signUserIcon"
                  onClick={(e) => {
                    e.stopPropagation();
@@ -542,7 +542,15 @@ function Placeholder(props) {
      data-tut={props.pos.key === props.unSignedWidgetId ? "IsSigned" : ""}
      key={props.pos.key}
      lockAspectRatio={
-        props.pos.type !== textWidget &&
+        // props.pos.type !== textWidget
+        ![
+          textWidget,
+          "email",
+          "name",
+          "company",
+          "job title",
+          textInputWidget
+        ].includes(props.pos.type) &&
        (props.pos.Width
          ? props.pos.Width / props.pos.Height
          : defaultWidthHeight(props.pos.type).width /
@@ -38,15 +38,17 @@ function PlaceholderType(props) {
    "December"
  ];
  const validateExpression = (regexValidation) => {
-    let regexObject = regexValidation;
-    if (props.pos?.options.validation.type === "regex") {
-      regexObject = RegexParser(regexValidation);
-    }
-    // new RegExp(regexValidation);
-    let isValidate = regexObject.test(textValue);
-    if (!isValidate) {
-      props?.setValidateAlert(true);
-      inputRef.current.focus();
+    if (textValue && regexValidation) {
+      let regexObject = regexValidation;
+      if (props.pos?.options?.validation?.type === "regex") {
+        regexObject = RegexParser(regexValidation);
+      }
+      // new RegExp(regexValidation);
+      let isValidate = regexObject.test(textValue);
+      if (!isValidate) {
+        props?.setValidateAlert(true);
+        inputRef.current.focus();
+      }
    }
  };

@@ -54,22 +56,18 @@ function PlaceholderType(props) {
    props.setDraggingEnabled(true);
    const validateType = props.pos?.options?.validation?.type;
    let regexValidation;
-    if (validateType) {
+    if (validateType && validateType !== "text") {
      switch (validateType) {
        case "email":
          regexValidation = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
          validateExpression(regexValidation);
          break;
        case "number":
-          regexValidation = /^\d+$/;
-          validateExpression(regexValidation);
-          break;
-        case "text":
-          regexValidation = /^[a-zA-Z\s]+$/;
+          regexValidation = /^[0-9\s]*$/;
          validateExpression(regexValidation);
          break;
        default:
-          regexValidation = props.pos?.options.validation.pattern;
+          regexValidation = props.pos?.options?.validation?.pattern || "";
          validateExpression(regexValidation);
      }
    }
@@ -87,11 +85,11 @@ function PlaceholderType(props) {
      case "number":
        setValidatePlaceholder("12345");
        break;
-      case textInputWidget:
-        setValidatePlaceholder("enter text");
+      case "text":
+        setValidatePlaceholder("please enter text");
        break;
      default:
-        setValidatePlaceholder("enter text");
+        setValidatePlaceholder("please enter value");
    }
  }

@@ -135,7 +133,7 @@ function PlaceholderType(props) {
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.pos]);
+  }, [props.pos?.options?.defaultValue]);

  const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (
    <div
@@ -288,7 +286,7 @@ function PlaceholderType(props) {
  };
  //handle height on enter press in text area
  const handleEnterPress = (e) => {
-    const height = 15;
+    const height = 18;
    if (e.key === "Enter") {
      //function to save height of text area
      onChangeHeightOfTextArea(
@@ -403,19 +401,12 @@ function PlaceholderType(props) {
    case textInputWidget:
      return props.isSignYourself ||
        (props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
-        <input
-          className="inputPlaceholder"
+        <textarea
          ref={inputRef}
-          placeholder={validatePlaceholder}
-          style={{ fontSize: calculateFontSize() }}
+          placeholder={validatePlaceholder || "please enter value"}
+          rows={1}
+          onKeyDown={handleEnterPress}
          value={textValue}
-          type="text"
-          tabIndex="0"
-          disabled={
-            props.isNeedSign && props.data?.signerObjId !== props.signerObjId
-              ? true
-              : props.isPlaceholder
-          }
          onBlur={handleInputBlur}
          onChange={(e) => {
            setTextValue(e.target.value);
@@ -429,6 +420,13 @@ function PlaceholderType(props) {
              false
            );
          }}
+          className={
+            isMobile
+              ? "labelTextArea labelWidthMobile"
+              : "labelTextArea labelWidthDesktop"
+          }
+          style={{ whiteSpace: "pre-wrap" }}
+          cols="50"
        />
      ) : (
        <div
@@ -506,15 +504,12 @@ function PlaceholderType(props) {
    case "name":
      return props.isSignYourself ||
        (props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
-        <input
-          tabIndex="0"
+        <textarea
          ref={inputRef}
          placeholder={"name"}
-          style={{ fontSize: calculateFontSize() }}
-          className="inputPlaceholder"
-          type="text"
+          rows={1}
+          onKeyDown={handleEnterPress}
          value={textValue}
-          onBlur={handleInputBlur}
          onChange={(e) => {
            const isDefault = false;
            handleTextValid(e);
@@ -528,6 +523,13 @@ function PlaceholderType(props) {
              isDefault
            );
          }}
+          className={
+            isMobile
+              ? "labelTextArea labelWidthMobile"
+              : "labelTextArea labelWidthDesktop"
+          }
+          style={{ whiteSpace: "pre-wrap" }}
+          cols="50"
        />
      ) : (
        <div
@@ -542,14 +544,12 @@ function PlaceholderType(props) {
    case "company":
      return props.isSignYourself ||
        (props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
-        <input
-          className="inputPlaceholder"
-          type="text"
+        <textarea
          ref={inputRef}
-          placeholder={"company"}
-          style={{ fontSize: calculateFontSize() }}
+          placeholder="Enter text"
+          rows={1}
+          onKeyDown={handleEnterPress}
          value={textValue}
-          onBlur={handleInputBlur}
          onChange={(e) => {
            handleTextValid(e);
            onChangeInput(
@@ -562,6 +562,13 @@ function PlaceholderType(props) {
              false
            );
          }}
+          className={
+            isMobile
+              ? "labelTextArea labelWidthMobile"
+              : "labelTextArea labelWidthDesktop"
+          }
+          style={{ whiteSpace: "pre-wrap" }}
+          cols="50"
        />
      ) : (
        <div
@@ -576,14 +583,12 @@ function PlaceholderType(props) {
    case "job title":
      return props.isSignYourself ||
        (props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
-        <input
-          className="inputPlaceholder"
-          type="text"
+        <textarea
          ref={inputRef}
          placeholder={"job title"}
-          style={{ fontSize: calculateFontSize() }}
+          rows={1}
+          onKeyDown={handleEnterPress}
          value={textValue}
-          onBlur={handleInputBlur}
          onChange={(e) => {
            handleTextValid(e);
            onChangeInput(
@@ -596,6 +601,13 @@ function PlaceholderType(props) {
              false
            );
          }}
+          className={
+            isMobile
+              ? "labelTextArea labelWidthMobile"
+              : "labelTextArea labelWidthDesktop"
+          }
+          style={{ whiteSpace: "pre-wrap" }}
+          cols="50"
        />
      ) : (
        <div
@@ -692,12 +704,11 @@ function PlaceholderType(props) {
    case "email":
      return props.isSignYourself ||
        (props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
-        <input
-          className="inputPlaceholder"
-          type="text"
+        <textarea
          ref={inputRef}
-          placeholder={"email"}
-          style={{ fontSize: calculateFontSize() }}
+          placeholder={"enter email"}
+          rows={1}
+          onKeyDown={handleEnterPress}
          value={textValue}
          onBlur={handleInputBlur}
          onChange={(e) => {
@@ -712,6 +723,13 @@ function PlaceholderType(props) {
              false
            );
          }}
+          className={
+            isMobile
+              ? "labelTextArea labelWidthMobile"
+              : "labelTextArea labelWidthDesktop"
+          }
+          style={{ whiteSpace: "pre-wrap" }}
+          cols="50"
        />
      ) : (
        <div
@@ -760,7 +778,7 @@ function PlaceholderType(props) {
    case textWidget:
      return (
        <textarea
-          placeholder="Enter label"
+          placeholder="Enter text"
          rows={1}
          onKeyDown={handleEnterPress}
          value={textValue}
@@ -782,7 +800,7 @@ function PlaceholderType(props) {
              ? "labelTextArea labelWidthMobile"
              : "labelTextArea labelWidthDesktop"
          }
-          style={{ whiteSpace: "pre-wrap" }}
+          style={{ whiteSpace: "pre-wrap", overflow: "hidden" }}
          cols="50"
        />
      );
@@ -1,4 +1,5 @@
 import React from "react";
+import { themeColor } from "../../constant/const";

 function PrevNext({ pageNumber, allPages, changePage }) {
  //for go to previous page
@@ -14,41 +15,35 @@ function PrevNext({ pageNumber, allPages, changePage }) {
    <div>
      <div className="preBtn1">
        <button
-          style={{
-            padding: "3px 20px ",
-            fontSize: "10px",
-            background: "#d3edeb",
-            fontWeight: "600",
-
-            border: "0px",
-            marginRight: "5px"
-          }}
+          className="py-[3px] px-[10px] text-xs bg-[#d3edeb] font-[600] mr-[5px]"
          disabled={pageNumber <= 1}
          onClick={previousPage}
        >
-          Prev
+          <span className="block lg:hidden">
+            <i
+              className="fa fa-backward"
+              aria-hidden="true"
+              style={{ color: themeColor, cursor: "pointer" }}
+            ></i>
+          </span>
+          <span className="lg:block hidden">Prev</span>
        </button>
-        <span
-          style={{
-            fontSize: "13px",
-            fontWeight: "600"
-          }}
-        >
+        <span className="text-xs font-[500]">
          {pageNumber || (allPages ? 1 : "--")} of {allPages || "--"}
        </span>
        <button
-          style={{
-            padding: "3px 20px ",
-            fontSize: "10px",
-            background: "#d3edeb",
-            fontWeight: "600",
-            marginLeft: "5px",
-            border: "0px"
-          }}
+          className="py-[3px] px-[10px] text-xs bg-[#d3edeb] font-[600] ml-[5px]"
          disabled={pageNumber >= allPages}
          onClick={nextPage}
        >
-          Next
+          <span className="block lg:hidden">
+            <i
+              className="fa fa-forward"
+              aria-hidden="true"
+              style={{ color: themeColor, cursor: "pointer" }}
+            ></i>
+          </span>
+          <span className="lg:block hidden">Next</span>
        </button>
      </div>
    </div>
@@ -230,7 +230,11 @@ const RecipientList = (props) => {
                      </span>
                    </>
                  )}
-                  {obj.Name && <span className={"useEmail"}>{obj.Role}</span>}
+                  {obj.Name && (
+                    <span className={"useEmail"}>
+                      {obj?.Role || obj?.Email}
+                    </span>
+                  )}
                </div>
              </div>
              {isMobile && props.sendInOrder && (
@@ -1,22 +1,62 @@
-import React from "react";
+import React, { useState } from "react";
 import RSC from "react-scrollbars-custom";
 import { Document, Page } from "react-pdf";
 import { themeColor } from "../../constant/const";

 function RenderAllPdfPage({
-  pdfUrl,
  signPdfUrl,
  allPages,
  setAllPages,
  setPageNumber,
  setSignBtnPosition,
-  pageNumber
+  pageNumber,
+  signerPos,
+  signerObjectId
 }) {
+  const [signPageNumber, setSignPageNumber] = useState([]);
+  const [bookmarkColor, setBookmarkColor] = useState("");
  //set all number of pages after load pdf
  function onDocumentLoad({ numPages }) {
    setAllPages(numPages);
+    //check if signerPos array exist then save page number exist in signerPos array to show bookmark icon
+    if (signerPos) {
+      const checkUser = signerPos.filter(
+        (data) => data.signerObjId === signerObjectId
+      );
+      setBookmarkColor(checkUser[0]?.blockColor);
+      let pageNumberArr = [];
+      if (checkUser?.length > 0) {
+        checkUser[0]?.placeHolder?.map((data) => {
+          pageNumberArr.push(data?.pageNumber);
+        });
+
+        setSignPageNumber(pageNumberArr);
+      }
+    }
  }

+  //'function `addSignatureBookmark` is used to display the page where the user's signature is located.
+  const addSignatureBookmark = (index) => {
+    const ispageNumber = signPageNumber.includes(index + 1);
+    return (
+      ispageNumber && (
+        <div
+          style={{
+            position: "absolute",
+            zIndex: 2,
+            top: -12,
+            right: -7,
+            transform: "translate(50% -50%)"
+          }}
+        >
+          <i
+            style={{ color: bookmarkColor || "red" }}
+            className="fa-solid fa-bookmark"
+          ></i>
+        </div>
+      )
+    );
+  };
  return (
    <div className="showPages">
      <div
@@ -50,8 +90,7 @@ function RenderAllPdfPage({
              <Document
                loading={"Loading Document.."}
                onLoadSuccess={onDocumentLoad}
-                file={pdfUrl ? pdfUrl : signPdfUrl}
-                //   file="https://api.printnode.com/static/test/pdf/multipage.pdf"
+                file={signPdfUrl}
              >
                {Array.from(new Array(allPages), (el, index) => (
                  <div
@@ -68,7 +107,8 @@ function RenderAllPdfPage({
                      display: "flex",
                      justifyContent: "center",
                      alignItems: "center",
-                      contain: "content"
+
+                      position: "relative"
                    }}
                    onClick={() => {
                      setPageNumber(index + 1);
@@ -77,15 +117,25 @@ function RenderAllPdfPage({
                      }
                    }}
                  >
-                    <Page
-                      key={`page_${index + 1}`}
-                      pageNumber={index + 1}
-                      width={100}
-                      height={100}
-                      scale={1}
-                      renderAnnotationLayer={false}
-                      renderTextLayer={false}
-                    />
+                    {signerPos && addSignatureBookmark(index)}
+
+                    <div
+                      style={{
+                        position: "relative",
+                        zIndex: 1,
+                        overflow: "hidden"
+                      }}
+                    >
+                      <Page
+                        key={`page_${index + 1}`}
+                        pageNumber={index + 1}
+                        width={100}
+                        height={100}
+                        scale={1}
+                        renderAnnotationLayer={false}
+                        renderTextLayer={false}
+                      />
+                    </div>
                  </div>
                ))}
              </Document>
@@ -296,9 +296,11 @@ function RenderPdf({
            {type && (
              <div style={{ fontWeight: "700", fontSize: 11 }}>{type}</div>
            )}
-            <div style={{ color: "black", fontSize: 8, fontWeight: "500" }}>
-              {`(${Role})`}
-            </div>
+            {Role && (
+              <div style={{ color: "black", fontSize: 8, fontWeight: "500" }}>
+                {`(${Role})`}
+              </div>
+            )}
          </>
        );
      } else {
@@ -214,8 +214,8 @@ function SignPad({
    const fontfamily = fontStyle
      ? fontStyle
      : fontSelect
-        ? fontSelect
-        : "Fasthand";
+      ? fontSelect
+      : "Fasthand";

    //creating span for getting text content width
    const span = document.createElement("span");
@@ -267,10 +267,10 @@ function SignPad({
                  key === 0 && penColor === "blue"
                    ? "2px solid blue"
                    : key === 1 && penColor === "red"
-                      ? "2px solid red"
-                      : key === 2 && penColor === "black"
-                        ? "2px solid black"
-                        : "2px solid white"
+                    ? "2px solid red"
+                    : key === 2 && penColor === "black"
+                    ? "2px solid black"
+                    : "2px solid white"
              }}
              onClick={() => {
                props?.convertToImg &&
@@ -536,7 +536,6 @@ function SignPad({
                      style={{
                        border: "1.3px solid #007bff",
                        borderRadius: "2px",
-
                        display: "flex",
                        flexDirection: "column",
                        justifyContent: "center",
@@ -553,7 +552,7 @@ function SignPad({
                        type="file"
                        onChange={onImageChange}
                        className="filetype"
-                        accept="image/*"
+                        accept="image/png,image/jpeg"
                        ref={imageRef}
                        hidden
                      />
@@ -1,6 +1,7 @@
 import React from "react";
 import { themeColor } from "../../constant/const";
 import RecipientList from "./RecipientList";
+import { Tooltip } from "react-tooltip";

 function SignerListPlace(props) {
  return (
@@ -13,12 +14,64 @@ function SignerListPlace(props) {
      >
        <span className="signedStyle">
          {props.title ? props.title : "Recipients"}
+          <span className="absolute text-xs z-[30] mt-1 ml-0.5">
+            {props?.title === "Roles" && (
+              <>
+                <a data-tooltip-id="my-tooltip">
+                  <sup>
+                    <i
+                      className="fa-solid fa-question rounded-full"
+                      style={{
+                        borderColor: "white",
+                        color: "white",
+                        fontSize: 11,
+                        borderWidth: 1.5,
+                        padding: "1px 3px"
+                      }}
+                    ></i>
+                  </sup>
+                </a>
+                <Tooltip id="my-tooltip">
+                  <div className="max-w-[450px]">
+                    <p className="font-bold">What are template roles?</p>
+                    <p>
+                      Begin by specifying each role needed for the completion of
+                      the document. Think about the parties involved in the
+                      signing process and what their responsibilities are.
+                      Common roles include HR for internal documents, Customer
+                      for agreements or Vendor for business agreements.{" "}
+                    </p>
+                    <p className="font-bold">
+                      Why pre-attach users to some roles?
+                    </p>
+                    <p>
+                      For roles that consistently involve the same individual
+                      (e.g., the CEO&apos;s signature on employee offer
+                      letters), you can pre-attach a user to a role within the
+                      template. This step is optional but recommended for
+                      efficiency and consistency across documents.
+                    </p>
+                    <p className="font-bold">
+                      When do i specify the user attached to each role?
+                    </p>
+                    <p>
+                      When you create a document from your template, you&apos;ll
+                      be prompted to attach users to each defined role. If a
+                      role already has a user attached, this will be pre-filled,
+                      but you can modify it as needed before sending out the
+                      document.
+                    </p>
+                  </div>
+                </Tooltip>
+              </>
+            )}
+          </span>
        </span>
      </div>
      <div className="signerList">
        <RecipientList {...props} />
      </div>
-      {props.handleAddSigner && (
+      {props.handleAddSigner ? (
        <div
          data-tut="reactourAddbtn"
          className="p-[10px] my-[2px] flex flex-row items-center justify-center border-[1px] border-[#47a3ad] hover:bg-[#47a3ad] text-[#47a3ad]  hover:text-white cursor-pointer"
@@ -31,6 +84,19 @@ function SignerListPlace(props) {
          <i className="fa-solid fa-plus"></i>
          <span style={{ marginLeft: 2 }}>Add role</span>
        </div>
+      ) : (
+        <div
+          data-tut="reactourAddbtn"
+          className="p-[10px] my-[2px] flex flex-row items-center justify-center border-[1px] border-[#47a3ad] hover:bg-[#47a3ad] text-[#47a3ad]  hover:text-white cursor-pointer"
+          onClick={() => props.setIsAddSigner(true)}
+          style={{
+            opacity: props.isMailSend && "0.5",
+            pointerEvents: props.isMailSend && "none"
+          }}
+        >
+          <i className="fa-solid fa-plus"></i>
+          <span style={{ marginLeft: 2 }}>Add recipients</span>
+        </div>
      )}
    </div>
  );
@@ -0,0 +1,85 @@
+import React from "react";
+import { rejectBtn, submitBtn, themeColor } from "../../constant/const";
+
+function VerifyEmail(props) {
+  return (
+    <div className="bg-black bg-opacity-[75%] absolute z-[999] flex flex-col items-center justify-center w-full h-full rounded">
+      <div className="bg-white rounded outline-none md:w-[40%] w-[80%]">
+        <div
+          style={{ backgroundColor: themeColor }}
+          className=" text-white p-[10px] rounded-t"
+        >
+          OTP verification
+        </div>
+        {props.isVerifyModal ? (
+          <form
+            onSubmit={(e) => {
+              props.setIsVerifyModal(false);
+              props.handleVerifyEmail(e);
+            }}
+          >
+            <div className="px-6 py-3">
+              <label className="mb-2">Enter OTP</label>
+              <input
+                required
+                type="tel"
+                pattern="[0-9]{4}"
+                className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                placeholder="Enter OTP received over email"
+                value={props.otp}
+                onChange={(e) => props.setOtp(e.target.value)}
+              />
+            </div>
+            <hr />
+            <div className="px-6 my-3">
+              <button type="submit" className={submitBtn}>
+                Verify
+              </button>
+              <button
+                className={`${rejectBtn} ml-2`}
+                onClick={(e) => props.handleResend(e)}
+              >
+                Resend
+              </button>
+            </div>
+          </form>
+        ) : props.otpLoader ? (
+          <div
+            style={{
+              height: "150px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            }}
+          >
+            <div
+              style={{
+                fontSize: "45px",
+                color: "#3dd3e0"
+              }}
+              className="loader-37"
+            ></div>
+          </div>
+        ) : (
+          <div className="px-6 py-3">
+            <p className="mb-2">Please verify your email !</p>
+            <hr />
+            <div className="px-0 mt-3">
+              <button
+                className={submitBtn}
+                type="submit"
+                onClick={() => {
+                  props.handleVerifyBtn();
+                }}
+              >
+                Send OTP
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default VerifyEmail;
@@ -38,7 +38,8 @@ function WidgetComponent({
  sendInOrder,
  isTemplateFlow,
  setBlockColor,
-  blockColor
+  blockColor,
+  setIsAddSigner
 }) {
  const [isSignersModal, setIsSignersModal] = useState(false);

@@ -319,7 +320,7 @@ function WidgetComponent({
                </span>
              </div>
            )}
-            {handleAddSigner && (
+            {handleAddSigner ? (
              <div
                data-tut="reactourAddbtn"
                style={{
@@ -333,6 +334,22 @@ function WidgetComponent({
                <i className="fa-solid fa-plus"></i>
                <span style={{ marginLeft: 2 }}>Add role</span>
              </div>
+            ) : (
+              setIsAddSigner && (
+                <div
+                  data-tut="reactourAddbtn"
+                  style={{
+                    margin: "5px 0 5px 0",
+                    backgroundColor: themeColor,
+                    color: "white"
+                  }}
+                  className="p-[10px] my-[2px] flex flex-row items-center justify-center border-[1px] border-[#47a3ad] hover:bg-[#47a3ad] text-[#47a3ad] hover:text-white cursor-pointer"
+                  onClick={() => setIsAddSigner(true)}
+                >
+                  <i className="fa-solid fa-plus"></i>
+                  <span style={{ marginLeft: 2 }}>Add recipients</span>
+                </div>
+              )
            )}

            <div
@@ -391,7 +408,7 @@ function WidgetComponent({
      )}
      {isSignersModal && (
        <ModalUi
-          title={"Roles"}
+          title={title ? title : "Recipients"}
          isOpen={isSignersModal}
          handleClose={handleModal}
        >
@@ -424,7 +441,7 @@ function WidgetComponent({
                textAlign: "center"
              }}
            >
-              Please add a role
+              Please add a {title ? title : "recipients"}
            </div>
          )}
        </ModalUi>
@@ -4,6 +4,8 @@ import "../../styles/AddUser.css";
 import RegexParser from "regex-parser";
 import { textInputWidget } from "../../constant/Utils";
 import PremiumAlertHeader from "../../primitives/PremiumAlertHeader";
+import Upgrade from "../../primitives/Upgrade";
+import { isEnableSubscription } from "../../constant/const";

 const WidgetNameModal = (props) => {
  const [formdata, setFormdata] = useState({
@@ -11,7 +13,7 @@ const WidgetNameModal = (props) => {
    defaultValue: "",
    status: "required",
    hint: "",
-    textvalidate: "text"
+    textvalidate: ""
  });
  const [isValid, setIsValid] = useState(true);
  const statusArr = ["Required", "Optional"];
@@ -46,12 +48,16 @@ const WidgetNameModal = (props) => {
        defaultValue: "",
        status: "required",
        hint: "",
-        textvalidate: "text"
+        textvalidate: ""
      });
    }
  };
  const handleChange = (e) => {
-    setFormdata({ ...formdata, [e.target.name]: e.target.value });
+    if (e) {
+      setFormdata({ ...formdata, [e.target.name]: e.target.value });
+    } else {
+      setFormdata({ ...formdata, textvalidate: "" });
+    }
  };

  const handledefaultChange = (e) => {
@@ -80,7 +86,7 @@ const WidgetNameModal = (props) => {

  function handleBlurRegex() {
    if (!formdata.textvalidate) {
-      setFormdata({ ...formdata, textvalidate: "text" });
+      setFormdata({ ...formdata, textvalidate: "" });
    } else {
      if (formdata.defaultValue) {
        const regexObject = RegexParser(
@@ -100,13 +106,14 @@ const WidgetNameModal = (props) => {
      title={"Widget info"}
    >
      {(props.defaultdata?.type === textInputWidget ||
-        props.widgetName === textInputWidget) && (
-        <PremiumAlertHeader
-          message={
-            "Field validations are free in beta, this feature will incur a fee later."
-          }
-        />
-      )}
+        props.widgetName === textInputWidget) &&
+        !isEnableSubscription && (
+          <PremiumAlertHeader
+            message={
+              "Field validations are free in beta, this feature will incur a fee later."
+            }
+          />
+        )}
      <form
        onSubmit={handleSubmit}
        className={`${
@@ -133,10 +140,20 @@ const WidgetNameModal = (props) => {
          props.widgetName === textInputWidget) && (
          <>
            <div className="form-section">
-              <label htmlFor="textvalidate" style={{ fontSize: 13 }}>
+              <label
+                htmlFor="textvalidate"
+                className={
+                  !props.isSubscribe && isEnableSubscription && "disabled"
+                }
+                style={{ fontSize: 13 }}
+              >
                Validation
              </label>
+              {!props.isSubscribe && isEnableSubscription && <Upgrade />}
              <div
+                className={
+                  !props.isSubscribe && isEnableSubscription && "disabled"
+                }
                style={{
                  display: "flex",
                  flexDirection: "row",
@@ -160,7 +177,10 @@ const WidgetNameModal = (props) => {
                    onChange={(e) => handleChange(e)}
                    onBlur={() => handleBlurRegex()}
                  >
-                    <option disabled style={{ fontSize: "13px" }}>
+                    <option
+                      disabled={formdata?.textvalidate}
+                      style={{ fontSize: "13px" }}
+                    >
                      Select...
                    </option>
                    {inputOpt.map((data, ind) => {
@@ -178,6 +198,7 @@ const WidgetNameModal = (props) => {
                </div>
              </div>
            </div>
+
            <div className="form-section">
              <label htmlFor="name" style={{ fontSize: 13 }}>
                Default value
@@ -196,7 +217,10 @@ const WidgetNameModal = (props) => {
                }}
              />
              {isValid === false && (
-                <div className="warning defaultvalueWarning" style={{ fontSize: 12 }}>
+                <div
+                  className="warning defaultvalueWarning"
+                  style={{ fontSize: 12 }}
+                >
                  <i
                    className="fas fa-exclamation-circle"
                    style={{ color: "#fab005", fontSize: 15 }}
@@ -169,32 +169,40 @@ const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
          {required && <span className="text-red-500 text-[13px]">*</span>}
        </label>
      </div>
-      <div className="relative rounded px-[20px] py-[20px] bg-white border border-gray-200 shadow flex max-w-sm gap-8 items-center">
-        <div>
-          <i
-            className="far fa-folder-open text-[40px] text-[#33bbff]"
-            style={{ fontSize: "40px" }}
-            aria-hidden="true"
-          ></i>
-        </div>
-        <div className="font-semibold ">
-          <div className="flex items-center gap-2">
-            <p>
-              {selectFolder && selectFolder.Name
-                ? selectFolder.Name
-                : "OpenSign™ Drive"}
-            </p>
-            <div className="text-black text-sm" onClick={() => SetIsOpen(true)}>
-              <i
-                className="fa fa-pencil"
-                title="Select Folder"
-                aria-hidden="true"
-              ></i>
-            </div>
+      <div className="relative max-w-sm">
+        <div
+          onClick={() => SetIsOpen(true)}
+          className=" cursor-pointer rounded px-[20px] py-[20px] bg-white border border-gray-200 shadow flex max-w-sm gap-8 items-center"
+        >
+          <div>
+            <i
+              className="far fa-folder-open text-[40px] text-[#33bbff]"
+              style={{ fontSize: "40px" }}
+              aria-hidden="true"
+            ></i>
+          </div>
+          <div className="font-semibold ">
+            <div className="flex items-center gap-2">
+              <p>
+                {selectFolder && selectFolder.Name
+                  ? selectFolder.Name
+                  : "OpenSign™ Drive"}
+              </p>
+              <div
+                className="text-black text-sm"
+                // onClick={() => SetIsOpen(true)}
+              >
+                <i
+                  className="fa fa-pencil cursor-pointer"
+                  title="Select Folder"
+                  aria-hidden="true"
+                ></i>
+              </div>
+            </div>
+            <p className="text-[10px] text-gray-400">
+              {selectFolder && selectFolder.Name ? `(${folderPath})` : ""}
+            </p>
          </div>
-          <p className="text-[10px] text-gray-400">
-            {selectFolder && selectFolder.Name ? `(${folderPath})` : ""}
-          </p>
        </div>
        <div className="absolute top-2 right-1 cursor-pointer">
          <Tooltip
@@ -53,9 +53,22 @@ const SelectSigners = (props) => {
      const contactRes = await contactbook.find();
      if (contactRes) {
        const res = JSON.parse(JSON.stringify(contactRes));
-        // console.log("userList ", res);
-        setUserList(res);
-        return await res.map((item) => ({
+        //compareArrays is a function where compare between two array (total signersList and dcument signers list)
+        //and filter signers from total signer's list which already present in document's signers list
+        const compareArrays = (res, signerObj) => {
+          return res.filter(
+            (item1) =>
+              !signerObj.find((item2) => item2.objectId === item1.objectId)
+          );
+        };
+
+        //get update signer's List if signersdata is present
+        const updateSignersList =
+          props?.signersData && compareArrays(res, props?.signersData);
+
+        const result = updateSignersList ? updateSignersList : res;
+        setUserList(result);
+        return await result.map((item) => ({
          label: item.Email,
          value: item.objectId
        }));
@@ -41,7 +41,7 @@ const Sidebar = ({ isOpen, closeSidebar }) => {
      <div className="flex px-2 py-3 gap-2 items-center shadow-md">
        <div className="w-[75px] h-[75px] rounded-full ring-[2px] ring-offset-2 ring-gray-400 overflow-hidden">
          <img
-            className="w-full h-full object-cover"
+            className="w-full h-full object-contain"
            src={image}
            alt="Profile"
          />
@@ -1,8 +1,9 @@
 import axios from "axios";
 import moment from "moment";
-import { themeColor } from "./const";
+import { isEnableSubscription, themeColor } from "./const";
 import React from "react";
 import { rgb } from "pdf-lib";
+import Parse from "parse";

 export const isMobile = window.innerWidth < 767;
 export const textInputWidget = "text input";
@@ -12,6 +13,66 @@ export const openInNewTab = (url) => {
  window.open(url, "_blank", "noopener,noreferrer");
 };

+export async function fetchSubscription(
+  extUserId,
+  contactObjId,
+  isGuestSign = false
+) {
+  try {
+    const extClass = localStorage.getItem("Extand_Class");
+    let extUser;
+    if (extClass) {
+      const jsonSender = JSON.parse(extClass);
+      extUser = jsonSender[0].objectId;
+    } else {
+      extUser = extUserId;
+    }
+    const baseURL = localStorage.getItem("baseUrl");
+    const url = `${baseURL}functions/getsubscriptions`;
+    const headers = {
+      "Content-Type": "application/json",
+      "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
+      sessionToken: localStorage.getItem("accesstoken")
+    };
+    const params = isGuestSign
+      ? { contactId: contactObjId }
+      : { extUserId: extUser };
+    const tenatRes = await axios.post(url, params, { headers: headers });
+    let plan, status, billingDate;
+    if (isGuestSign) {
+      plan = tenatRes.data?.result?.result?.plan;
+      status = tenatRes.data?.result?.result?.isSubscribed;
+    } else {
+      plan = tenatRes.data?.result?.result?.PlanCode;
+      billingDate = tenatRes.data?.result?.result?.Next_billing_date?.iso;
+    }
+    return { plan, billingDate, status };
+  } catch (err) {
+    console.log("Err in fetch subscription", err);
+    return { plan: "", billingDate: "" };
+  }
+}
+//function to get subcripition details from Extand user class
+export async function checkIsSubscribed() {
+  try {
+    const res = await fetchSubscription();
+    if (res.plan === "freeplan") {
+      return false;
+    } else if (res.billingDate) {
+      if (new Date(res.billingDate) > new Date()) {
+        return true;
+      } else {
+        return false;
+      }
+    } else {
+      return false;
+    }
+  } catch (err) {
+    console.log("Err in fetch subscription", err);
+    return false;
+  }
+}
+
 export const color = [
  "#93a3db",
  "#e6c3db",
@@ -274,15 +335,15 @@ export const addWidgetOptions = (type) => {
        options: { isReadOnly: false, isHideLabel: false }
      };
    case textInputWidget:
-      return { ...defaultOpt, validation: { type: "text", pattern: "" } };
+      return { ...defaultOpt };
    case "initials":
      return defaultOpt;
    case "name":
-      return { ...defaultOpt, validation: { type: "text", pattern: "" } };
+      return { ...defaultOpt };
    case "company":
-      return { ...defaultOpt, validation: { type: "text", pattern: "" } };
+      return { ...defaultOpt };
    case "job title":
-      return { ...defaultOpt, validation: { type: "text", pattern: "" } };
+      return { ...defaultOpt };
    case "date":
      return {
        ...defaultOpt,
@@ -477,38 +538,96 @@ export const signPdfFun = async (
  base64Url,
  documentId,
  signerObjectId,
-  setIsAlert
+  setIsAlert,
+  objectId,
+  isSubscribed,
+  activeMailAdapter,
+  xyPosition
 ) => {
-  let singleSign;
+  let singleSign,
+    isCustomCompletionMail = false;

-  singleSign = {
-    pdfFile: base64Url,
-    docId: documentId,
-    userId: signerObjectId
-  };
-
-  const response = await axios
-    .post(`${localStorage.getItem("baseUrl")}functions/signPdf`, singleSign, {
-      headers: {
-        "Content-Type": "application/json",
-        "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-        sessionToken: localStorage.getItem("accesstoken")
+  try {
+    //get tenant details
+    const tenantDetails = await getTenantDetails(objectId);
+    if (tenantDetails && tenantDetails === "user does not exist!") {
+      alert("User does not exist");
+    } else {
+      if (
+        tenantDetails?.CompletionBody &&
+        tenantDetails?.CompletionSubject &&
+        (!isEnableSubscription || isSubscribed)
+      ) {
+        isCustomCompletionMail = true;
      }
-    })
-    .then((Listdata) => {
-      const json = Listdata.data;
-      const res = json.result;
-      return res;
-    })
-    .catch((err) => {
-      console.log("Err ", err);
-      setIsAlert({
-        isShow: true,
-        alertMessage: "something went wrong"
-      });
-    });
+    }
+    
+    // below for loop is used to get first signature of user to send if to signpdf
+    // for adding it in completion certificate
+    let getSignature;
+    for (let item of xyPosition) {
+      if (!getSignature) {
+        const typeExist = item.pos.some((data) => data?.type);
+        if (typeExist) {
+          getSignature = item.pos.find((data) => data?.type === "signature");
+        } else {
+          getSignature = item.pos.find((data) => !data.isStamp);
+        }
+      }
+    }

-  return response;
+    let base64Sign = getSignature.SignUrl;
+    //check https type signature (default signature exist) then convert in base64
+    const isUrl = base64Sign.includes("https");
+    if (isUrl) {
+      try {
+        base64Sign = await fetchImageBase64(base64Sign);
+      } catch (e) {
+        console.log("error", e);
+      }
+    }
+    //change image width and height to 104/44 in png base64
+    const getNewse64 = await changeImageWH(base64Sign);
+    //remove suffiix of base64
+    const suffixbase64 = getNewse64 && getNewse64.split(",").pop();
+
+    singleSign = {
+      mailProvider: activeMailAdapter,
+      pdfFile: base64Url,
+      docId: documentId,
+      userId: signerObjectId,
+      isCustomCompletionMail: isCustomCompletionMail,
+      signature: suffixbase64
+    };
+    const response = await axios
+      .post(`${localStorage.getItem("baseUrl")}functions/signPdf`, singleSign, {
+        headers: {
+          "Content-Type": "application/json",
+          "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
+          //  sessionToken: localStorage.getItem("accesstoken")
+          "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+        }
+      })
+      .then((Listdata) => {
+        const json = Listdata.data;
+        const res = json.result;
+        return res;
+      })
+      .catch((err) => {
+        console.log("Err ", err);
+        setIsAlert({
+          isShow: true,
+          alertMessage: "something went wrong"
+        });
+      });
+
+    return response;
+  } catch (e) {
+    setIsAlert({
+      isShow: true,
+      alertMessage: "something went wrong"
+    });
+  }
 };

 export const randomId = () => {
@@ -1045,7 +1164,6 @@ export const onImageSelect = (event, setImgWH, setImage) => {
  const imageType = event.target.files[0].type;
  const reader = new FileReader();
  reader.readAsDataURL(event.target.files[0]);
-
  reader.onloadend = function (e) {
    let width, height;
    const image = new Image();
@@ -1073,6 +1191,50 @@ export const onImageSelect = (event, setImgWH, setImage) => {
  };
 };

+//convert https url to base64
+export const fetchImageBase64 = async (imageUrl) => {
+  try {
+    const response = await fetch(imageUrl);
+    const blob = await response.blob();
+
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(blob);
+      reader.onloadend = () => {
+        const base64data = reader.result;
+        resolve(base64data);
+      };
+      reader.onerror = (error) => {
+        reject(error);
+      };
+    });
+  } catch (error) {
+    throw new Error("Error converting URL to base64:", error);
+  }
+};
+//function for select image and upload image
+export const changeImageWH = async (base64Image) => {
+  const newWidth = 100;
+  const newHeight = 40;
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.src = base64Image;
+    img.onload = async () => {
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      canvas.width = newWidth;
+      canvas.height = newHeight;
+      ctx.imageSmoothingEnabled = false;
+      ctx.drawImage(img, 0, 0, newWidth, newHeight);
+      const resizedBase64 = canvas.toDataURL("image/png", 1);
+      resolve(resizedBase64);
+    };
+    img.onerror = (error) => {
+      reject(error);
+    };
+  });
+};
+
 //function for embed multiple signature using pdf-lib
 export const multiSignEmbed = async (
  pngUrl,
@@ -1111,10 +1273,10 @@ export const multiSignEmbed = async (
            const newUrl = await convertPNGtoJPEG(signUrl);
            signUrl = newUrl;
          }
-          const checkUrl = urlValidator(signUrl);
-          if (checkUrl) {
-            signUrl = signUrl + "?get";
-          }
+          // const checkUrl = urlValidator(signUrl);
+          // if (checkUrl) {
+          //   signUrl = signUrl + "?get";
+          // }
          const res = await fetch(signUrl);
          return res.arrayBuffer();
        }
@@ -1187,8 +1349,8 @@ export const multiSignEmbed = async (
          position.type === radioButtonWidget
            ? 10
            : position.type === "checkbox"
-              ? 10
-              : newUpdateHeight;
+            ? 10
+            : newUpdateHeight;
        const newHeight = ind ? (ind > 0 ? widgetHeight : 0) : widgetHeight;

        if (signyourself) {
@@ -1249,6 +1411,7 @@ export const multiSignEmbed = async (
        }
      };
      const widgetTypeExist = [
+        textWidget,
        textInputWidget,
        "name",
        "company",
@@ -1304,7 +1467,7 @@ export const multiSignEmbed = async (
            checkbox.enableReadOnly();
          });
        }
-      } else if (position.type === textWidget) {
+      } else if (widgetTypeExist) {
        const font = await pdfDoc.embedFont("Helvetica");
        const fontSize = 12;
        let textContent;
@@ -1380,24 +1543,8 @@ export const multiSignEmbed = async (
            color: rgb(0, 0, 0),
            size: fontSize
          });
-          y -= 15; // Adjust the line height as needed
+          y -= 18; // Adjust the line height as needed
        }
-      } else if (widgetTypeExist) {
-        const font = await pdfDoc.embedFont("Helvetica");
-        const fontSize = 12;
-        let textContent;
-        if (position?.options?.response) {
-          textContent = position.options?.response;
-        } else if (position?.options?.defaultValue) {
-          textContent = position?.options?.defaultValue;
-        }
-        page.drawText(textContent, {
-          x: xPos(position),
-          y: yPos(position) + 10,
-          size: fontSize,
-          font,
-          color: rgb(0, 0, 0)
-        });
      } else if (position.type === "dropdown") {
        const dropdownRandomId = "dropdown" + randomId();
        const dropdown = form.createDropdown(dropdownRandomId);
@@ -1768,3 +1915,116 @@ export const handleCopyNextToWidget = (
    setXyPostion(updatePlaceholder);
  }
 };
+
+export const getFileName = (fileUrl) => {
+  if (fileUrl) {
+    const url = new URL(fileUrl);
+    const filename = url.pathname.substring(url.pathname.indexOf("_") + 1);
+    return filename || "";
+  } else {
+    return "";
+  }
+};
+
+//fetch tenant app logo from `partners_Tenant` class by domain name
+export const getAppLogo = async () => {
+  const domainName = window.location.host;
+  try {
+    const tenantCreditsQuery = new Parse.Query("partners_Tenant");
+    tenantCreditsQuery.equalTo("Domain", domainName);
+    const res = await tenantCreditsQuery.first();
+
+    if (res) {
+      const updateRes = JSON.parse(JSON.stringify(res));
+      return updateRes?.Logo;
+    }
+  } catch (e) {
+    return null;
+  }
+};
+
+export const getTenantDetails = async (objectId) => {
+  try {
+    const tenantCreditsQuery = new Parse.Query("partners_Tenant");
+    tenantCreditsQuery.equalTo("UserId", {
+      __type: "Pointer",
+      className: "_User",
+      objectId: objectId
+    });
+    const res = await tenantCreditsQuery.first();
+    if (res) {
+      const updateRes = JSON.parse(JSON.stringify(res));
+      return updateRes;
+    }
+  } catch (e) {
+    return "user does not exist!";
+  }
+};
+
+//function to convert variable string name to variable value of email body and subject
+export function replaceMailVaribles(subject, body, variables) {
+  let replacedSubject = subject;
+  let replacedBody = body;
+
+  for (const variable in variables) {
+    const regex = new RegExp(`{{${variable}}}`, "g");
+    if (subject) {
+      replacedSubject = replacedSubject.replace(regex, variables[variable]);
+    }
+    if (body) {
+      replacedBody = replacedBody.replace(regex, variables[variable]);
+    }
+  }
+
+  const result = {
+    subject: replacedSubject,
+    body: replacedBody
+  };
+  return result;
+}
+
+export const copytoData = (text) => {
+  // navigator.clipboard.writeText(text);
+  if (navigator.clipboard) {
+    navigator.clipboard.writeText(text);
+  } else {
+    // Fallback for browsers that don't support navigator.clipboard
+    const textArea = document.createElement("textarea");
+    textArea.value = text;
+    document.body.appendChild(textArea);
+    textArea.select();
+    document.execCommand("copy");
+    document.body.removeChild(textArea);
+  }
+};
+
+export const convertPdfArrayBuffer = async (url) => {
+  try {
+    const response = await fetch(url);
+    // Check if the response was successful (status 200)
+    if (!response.ok) {
+      return "Error";
+    }
+    // Convert the response to ArrayBuffer
+    const arrayBuffer = await response.arrayBuffer();
+    return arrayBuffer;
+  } catch (error) {
+    console.error("Error fetching data:", error);
+    return "Error";
+  }
+};
+
+//`handleSendOTP` function is used to send otp on user's email using `SendOTPMailV1` cloud function
+export const handleSendOTP = async (email) => {
+  try {
+    let url = `${localStorage.getItem("baseUrl")}functions/SendOTPMailV1`;
+    const headers = {
+      "Content-Type": "application/json",
+      "X-Parse-Application-Id": localStorage.getItem("parseAppId")
+    };
+    const body = { email: email };
+    await axios.post(url, body, { headers: headers });
+  } catch (error) {
+    alert(error.message);
+  }
+};
@@ -9,3 +9,4 @@ export const modalSubmitBtnColor = "#17a2b8";
 export const modalCancelBtnColor = "white";
 export const themeColor = "#47a3ad";
 export const iconColor = "#686968";
+export const isEnableSubscription = process.env.REACT_APP_ENABLE_SUBSCRIPTION;
@@ -1,27 +1,30 @@
 import axios from "axios";
-const parseAppId = localStorage.getItem("parseAppId");
-const serverUrl = localStorage.getItem("baseUrl");
+const parseAppId = process.env.REACT_APP_APPID
+  ? process.env.REACT_APP_APPID
+  : "opensign";
+const serverUrl = process.env.REACT_APP_SERVERURL
+  ? process.env.REACT_APP_SERVERURL
+  : window.location.origin + "/api/app";

-export const SaveFileSize = async (size, imageUrl) => {
+export const SaveFileSize = async (size, imageUrl, tenantId) => {
  //checking server url and save file's size
-
+  const tenantPtr = {
+    __type: "Pointer",
+    className: "partners_Tenant",
+    objectId: tenantId
+  };
+  const _tenantPtr = JSON.stringify(tenantPtr);
  try {
-    const response = await axios
-      .get(`${serverUrl}classes/partners_TenantCredits`, {
+    const res = await axios.get(
+      `${serverUrl}/classes/partners_TenantCredits?where={"PartnersTenant":${_tenantPtr}}`,
+      {
        headers: {
          "Content-Type": "application/json",
          "X-Parse-Application-Id": parseAppId
        }
-      })
-      .then((result) => {
-        const res = result.data;
-        //  console.log("res", res);
-
-        return res.results;
-      })
-      .catch((err) => {
-        console.log("axois err ", err);
-      });
+      }
+    );
+    const response = res.data.results;
    let data;
    // console.log("response", response);
    if (response && response.length > 0) {
@@ -30,69 +33,48 @@ export const SaveFileSize = async (size, imageUrl) => {
          ? response[0].usedStorage + size
          : size
      };
-      await axios
-        .put(
-          `${serverUrl}classes/partners_TenantCredits/${response[0].objectId}`,
-          data,
-          {
-            headers: {
-              "Content-Type": "application/json",
-              "X-Parse-Application-Id": parseAppId
-            }
-          }
-        )
-        .then(() => {
-          // const res = result.data;
-          // console.log("save res", res);
-        })
-        .catch((err) => {
-          console.log("axois err ", err);
-        });
-    } else {
-      data = {
-        usedStorage: size
-      };
-      await axios
-        .post(`${serverUrl}classes/partners_TenantCredits`, data, {
+      await axios.put(
+        `${serverUrl}/classes/partners_TenantCredits/${response[0].objectId}`,
+        data,
+        {
          headers: {
            "Content-Type": "application/json",
            "X-Parse-Application-Id": parseAppId
          }
-        })
-        .then(() => {
-          // const res = result.data;
-          // console.log("res", res);
-        })
-        .catch((err) => {
-          console.log("axois err ", err);
-        });
+        }
+      );
+    } else {
+      data = { usedStorage: size, PartnersTenant: tenantPtr };
+      await axios.post(`${serverUrl}/classes/partners_TenantCredits`, data, {
+        headers: {
+          "Content-Type": "application/json",
+          "X-Parse-Application-Id": parseAppId
+        }
+      });
    }
-  } catch (e) {
-    console.log("org app error", e);
+  } catch (err) {
+    console.log("err in save usage", err);
  }
-  saveDataFile(size, imageUrl);
+  saveDataFile(size, imageUrl, tenantPtr);
 };

 //function for save fileUrl and file size in particular client db class partners_DataFiles
-const saveDataFile = async (size, imageUrl) => {
+const saveDataFile = async (size, imageUrl, tenantPtr) => {
  const data = {
    FileUrl: imageUrl,
-    FileSize: size
+    FileSize: size,
+    TenantPtr: tenantPtr
  };

  // console.log("data save",file, data)
-  await axios
-    .post(`${serverUrl}classes/partners_DataFiles`, data, {
+  try {
+    await axios.post(`${serverUrl}/classes/partners_DataFiles`, data, {
      headers: {
        "Content-Type": "application/json",
        "X-Parse-Application-Id": parseAppId
      }
-    })
-    .then(() => {
-      // const res = result.data;
-      // console.log("res", res);
-    })
-    .catch((err) => {
-      console.log("axois err ", err);
    });
+  } catch (err) {
+    console.log("err in save usage ", err);
+  }
 };
@@ -4,6 +4,7 @@ import "./index.css";
 import App from "./App";
 import { Provider } from "react-redux";
 import { store } from "./redux/store";
+import { CookiesProvider } from "react-cookie";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { TouchBackend } from "react-dnd-touch-backend";
 import {
@@ -62,10 +63,12 @@ if (process.env.REACT_APP_GTM) {

 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
-  <Provider store={store}>
-    <DndProvider options={HTML5toTouch}>
-      <Preview>{generatePreview}</Preview>
-      <App />
-    </DndProvider>
-  </Provider>
+  <CookiesProvider defaultSetOptions={{ path: "/" }}>
+    <Provider store={store}>
+      <DndProvider options={HTML5toTouch}>
+        <Preview>{generatePreview}</Preview>
+        <App />
+      </DndProvider>
+    </Provider>
+  </CookiesProvider>
 );
@@ -12,14 +12,26 @@ export default function reportJson(id) {
        heading: head,
        actions: [
          {
-            btnLabel: "sign",
+            btnId: "1231",
+            hoverLabel: "Edit",
            btnColor: "#4bd396",
            textColor: "white",
-            btnIcon: "fa fa-plus",
-            redirectUrl: "draftDocument"
+            btnIcon: "fa-solid fa-pen",
+            redirectUrl: "draftDocument",
+            action: "redirect"
+          },
+          {
+            btnId: "2142",
+            hoverLabel: "Delete",
+            btnColor: "#ff4848",
+            textColor: "white",
+            btnIcon: "fa fa-trash",
+            redirectUrl: "",
+            action: "delete"
          }
        ],
-        helpMsg: "This are documents you have started but have not finalized for sending."
+        helpMsg:
+          "These are documents you have started but have not finalized for sending."
      };
    // Need your sign report
    case "4Hhwbp482K":
@@ -28,11 +40,14 @@ export default function reportJson(id) {
        heading: head,
        actions: [
          {
+            btnId: "4536",
            btnLabel: "sign",
+            hoverLabel: "Sign",
            btnColor: "#3ac9d6",
            textColor: "white",
-            btnIcon: "fa fa-eye",
-            redirectUrl: "pdfRequestFiles"
+            btnIcon: "fa-solid fa-signature",
+            redirectUrl: "pdfRequestFiles",
+            action: "redirect"
          }
        ],
        helpMsg:
@@ -45,11 +60,48 @@ export default function reportJson(id) {
        heading: head,
        actions: [
          {
-            btnLabel: "View",
+            btnId: "8901",
+            hoverLabel: "Share",
+            btnColor: "#4bd396",
+            textColor: "white",
+            btnIcon: "fa-solid fa-share",
+            redirectUrl: "",
+            action: "share"
+          },
+          {
+            btnId: "1588",
+            hoverLabel: "View",
            btnColor: "#3ac9d6",
            textColor: "white",
            btnIcon: "fa fa-eye",
-            redirectUrl: "pdfRequestFiles"
+            redirectUrl: "pdfRequestFiles",
+            action: "redirect"
+          },
+          {
+            btnId: "2234",
+            hoverLabel: "option",
+            btnColor: "transparent",
+            textColor: "black",
+            btnIcon: "fa-solid fa-ellipsis-vertical fa-lg",
+            action: "option",
+            subaction: [
+              {
+                btnId: "1688",
+                btnLabel: "Revoke",
+                hoverLabel: "Revoke",
+                btnIcon: "fa-solid fa-file-circle-xmark",
+                redirectUrl: "",
+                action: "revoke"
+              },
+              {
+                btnId: "1488",
+                btnLabel: "Delete",
+                hoverLabel: "Delete",
+                btnIcon: "fa fa-trash",
+                redirectUrl: "",
+                action: "delete"
+              }
+            ]
          }
        ],
        helpMsg:
@@ -62,14 +114,26 @@ export default function reportJson(id) {
        heading: head,
        actions: [
          {
-            btnLabel: "View",
+            btnId: "1378",
+            hoverLabel: "Edit",
            btnColor: "#4bd396",
            textColor: "white",
            btnIcon: "fa fa-eye",
-            redirectUrl: "draftDocument"
+            redirectUrl: "draftDocument",
+            action: "redirect"
+          },
+          {
+            btnId: "1278",
+            hoverLabel: "Delete",
+            btnColor: "#ff4848",
+            textColor: "white",
+            btnIcon: "fa fa-trash",
+            redirectUrl: "",
+            action: "delete"
          }
        ],
-        helpMsg: "This is a list of documents that have been signed by all parties."
+        helpMsg:
+          "This is a list of documents that have been signed by all parties."
      };
    //  declined documents report
    case "UPr2Fm5WY3":
@@ -78,14 +142,26 @@ export default function reportJson(id) {
        heading: head,
        actions: [
          {
-            btnLabel: "View",
+            btnId: "1458",
+            hoverLabel: "View",
            btnColor: "#4bd396",
            textColor: "white",
            btnIcon: "fa fa-eye",
-            redirectUrl: "draftDocument"
+            redirectUrl: "draftDocument",
+            action: "redirect"
+          },
+          {
+            btnId: "1358",
+            hoverLabel: "Delete",
+            btnColor: "#ff4848",
+            textColor: "white",
+            btnIcon: "fa fa-trash",
+            redirectUrl: "",
+            action: "delete"
          }
        ],
-        helpMsg: "This is a list of documents that have been declined by one of the signers."
+        helpMsg:
+          "This is a list of documents that have been declined by one of the signers."
      };
    //  Expired Documents report
    case "zNqBHXHsYH":
@@ -94,14 +170,26 @@ export default function reportJson(id) {
        heading: head,
        actions: [
          {
-            btnLabel: "View",
+            btnId: "1898",
+            hoverLabel: "View",
            btnColor: "#4bd396",
            textColor: "white",
            btnIcon: "fa fa-eye",
-            redirectUrl: "draftDocument"
+            redirectUrl: "draftDocument",
+            action: "redirect"
+          },
+          {
+            btnId: "1998",
+            hoverLabel: "Delete",
+            btnColor: "#ff4848",
+            textColor: "white",
+            btnIcon: "fa fa-trash",
+            redirectUrl: "",
+            action: "delete"
          }
        ],
-        helpMsg: "This is a list of documents that have reached their expiration date."
+        helpMsg:
+          "This is a list of documents that have reached their expiration date."
      };
    //  Recently sent for signatures report show on dashboard
    case "d9k3UfYHBc":
@@ -110,11 +198,48 @@ export default function reportJson(id) {
        heading: dashboardReportHead,
        actions: [
          {
-            btnLabel: "View",
+            btnId: "1999",
+            hoverLabel: "Share",
            btnColor: "#4bd396",
            textColor: "white",
+            btnIcon: "fa-solid fa-share",
+            redirectUrl: "",
+            action: "share"
+          },
+          {
+            btnId: "1999",
+            hoverLabel: "View",
+            btnColor: "#3ac9d6",
+            textColor: "white",
            btnIcon: "fa fa-eye",
-            redirectUrl: "pdfRequestFiles"
+            redirectUrl: "pdfRequestFiles",
+            action: "redirect"
+          },
+          {
+            btnId: "2234",
+            hoverLabel: "option",
+            btnColor: "transparent",
+            textColor: "black",
+            btnIcon: "fa-solid fa-ellipsis-vertical fa-lg",
+            action: "option",
+            subaction: [
+              {
+                btnId: "6788",
+                btnLabel: "Revoke",
+                hoverLabel: "Revoke",
+                btnIcon: "fa-solid fa-file-circle-xmark",
+                redirectUrl: "",
+                action: "revoke"
+              },
+              {
+                btnId: "2000",
+                btnLabel: "Delete",
+                hoverLabel: "Delete",
+                btnIcon: "fa fa-trash",
+                redirectUrl: "",
+                action: "delete"
+              }
+            ]
          }
        ]
      };
@@ -125,11 +250,14 @@ export default function reportJson(id) {
        heading: dashboardReportHead,
        actions: [
          {
-            btnLabel: "Sign",
-            btnColor: "#4bd396",
+            btnId: "2001",
+            btnLabel: "sign",
+            hoverLabel: "Sign",
+            btnColor: "#3ac9d6",
            textColor: "white",
-            btnIcon: "fa fa-eye",
-            redirectUrl: "pdfRequestFiles"
+            btnIcon: "fa-solid fa-signature",
+            redirectUrl: "pdfRequestFiles",
+            action: "redirect"
          }
        ]
      };
@@ -140,11 +268,22 @@ export default function reportJson(id) {
        heading: ["Title", "Note", "Folder", "File", "Owner", "Signers"],
        actions: [
          {
-            btnLabel: "sign",
+            btnId: "2003",
+            hoverLabel: "Edit",
            btnColor: "#4bd396",
            textColor: "white",
-            btnIcon: "fa fa-plus",
-            redirectUrl: "draftDocument"
+            btnIcon: "fa-solid fa-pen",
+            redirectUrl: "draftDocument",
+            action: "redirect"
+          },
+          {
+            btnId: "2004",
+            hoverLabel: "Delete",
+            btnColor: "#ff4848",
+            textColor: "white",
+            btnIcon: "fa fa-trash",
+            redirectUrl: "",
+            action: "delete"
          }
        ]
      };
@@ -155,14 +294,17 @@ export default function reportJson(id) {
        heading: contactbook,
        actions: [
          {
-            btnLabel: "",
+            btnId: "2204",
+            hoverLabel: "Delete",
            btnColor: "#f55a42",
            textColor: "white",
-            btnIcon: "fa-solid fa-trash"
+            btnIcon: "fa-solid fa-trash",
+            action: "delete"
          }
        ],
        form: "ContactBook",
-        helpMsg: "This is a list of contacts/signers added by you. These will appear as suggestions when you try to add signers to a new document."
+        helpMsg:
+          "This is a list of contacts/signers added by you. These will appear as suggestions when you try to add signers to a new document."
      };
    // template report
    case "6TeaPr321t":
@@ -171,18 +313,46 @@ export default function reportJson(id) {
        heading: head,
        actions: [
          {
+            btnId: "2234",
            btnLabel: "Use",
+            hoverLabel: "Use",
            btnColor: "#4bd396",
            textColor: "white",
            btnIcon: "fa fa-plus",
-            redirectUrl: "placeHolderSign"
+            redirectUrl: "placeHolderSign",
+            action: "redirect",
+            selector: "reactourSecond",
+            message:
+              "Click the 'Use' button to create a new document from an existing template. "
          },
          {
-            btnLabel: "Edit",
-            btnColor: "#00c9d5",
-            textColor: "white",
-            btnIcon: "fa fa-plus",
-            redirectUrl: "template"
+            btnId: "2234",
+            hoverLabel: "option",
+            btnColor: "transparent",
+            textColor: "black",
+            btnIcon: "fa-solid fa-ellipsis-vertical fa-lg",
+            action: "option",
+            selector: "reactourThird",
+            message:
+              "This menu reveals more options such as Edit & Delete. Use the 'Edit' button to add signer roles, modify fields, and update your template. Changes will apply to all future documents created from this template but won’t affect existing documents.Use the Delete button you can delete template. ",
+            subaction: [
+              {
+                btnId: "2434",
+                btnLabel: "Edit",
+                hoverLabel: "Edit",
+                btnIcon: "fa-solid fa-pen",
+                redirectUrl: "template",
+                action: "redirect"
+              },
+              {
+                btnId: "1834",
+                btnLabel: "Delete",
+                hoverLabel: "Delete",
+                btnIcon: "fa fa-trash",
+                redirectUrl: "",
+                action: "delete"
+              }
+            ]
          }
        ],
        helpMsg:
@@ -0,0 +1,78 @@
+const plans = [
+  {
+    planName: "OPENSIGN™ FREE",
+    currency: "",
+    monthlyPrice: "Free",
+    yearlyPrice: "Free",
+    subtitle: "Free Unlimited E-signatures, Forever.",
+    btnText: "Subscribe",
+    url: "",
+    target: "_blank",
+    benefits: [
+      "Unlimited envelopes",
+      "Sign documents yourself",
+      "Request signatures from others",
+      "14 field types",
+      "Automatic e-signatures",
+      "Completion certificates",
+      "Send in order",
+      "Document templates",
+      "Import from Dropbox",
+      "Contact book",
+      "Document expiry support",
+      "Decline document support",
+      "Email notifications",
+      "Recipient authentication using OTP",
+      "And much more"
+    ]
+  },
+  {
+    planName: "OPENSIGN™ PROFESSIONAL",
+    currency: "$",
+    monthlyPrice: "29.99",
+    yearlyPrice: "329.99",
+    subtitle: "Exclusive Access to advanced features.",
+    btnText: "Subscribe",
+    url:
+      window.location.origin === "https://staging-app.opensignlabs.com"
+        ? "https://billing.zoho.in/subscribe/9627f62a09df1c8ce500f2f4dc8328dd84ecda20eeae13878ce581d60240f206/pro-weekly"
+        : "https://billing.opensignlabs.com/subscribe/ef798486e6a0a11ea65f2bae8f2af901d1a09dfa8085585cdd4ec4d7f32137f3/professional-monthly",
+    yearlyUrl:
+      window.location.origin === "https://staging-app.opensignlabs.com"
+        ? "https://billing.zoho.in/subscribe/9627f62a09df1c8ce500f2f4dc8328ddc184411129224f1f29ed84f6cef3b862/pro-yearly"
+        : "https://billing.opensignlabs.com/subscribe/ef798486e6a0a11ea65f2bae8f2af901d8ad1135190dff951330360e47585a71/professional-yearly",
+    target: "_self",
+    benefits: [
+      "Everything in OpenSign™ free",
+      "Field validations",
+      "Regular expression validations",
+      "Organize docs in OpenSign™ Drive",
+      "Webhooks",
+      "Zapier integration",
+      "API Access",
+      "100 API signatures included",
+      "DocumentId removal from signed docs",
+      "Custom email templates"
+    ]
+  },
+  {
+    planName: "OPENSIGN™ ENTERPRISE",
+    currency: "",
+    monthlyPrice: "Request Price",
+    yearlyPrice: "Request Price",
+    subtitle: "Scalable Features with priority support.",
+    btnText: "Contact us",
+    url: "https://www.opensignlabs.com/contact-us",
+    target: "_blank",
+    benefits: [
+      "All features",
+      "Custom domain",
+      "Custom branding",
+      "Uptime SLA",
+      "SSO support",
+      "Priority support"
+    ]
+  }
+];
+
+export default plans;
@@ -1,65 +0,0 @@
-[
-    {
-        "planName": "SELF HOSTED",
-        "currency": "",
-        "price": "Free",
-        "subtitle": "Free for life One click install.",
-        "btnText": "Visit github",
-        "url": "https://github.com/opensignlabs/opensign",
-        "target": "_blank",
-        "benefits": [
-            "Sign Unlimited Documents",
-            "S3 Doc Storage",
-            "Unlimited Guest Signers",
-            "Unlimited completion certificates",
-            "Unique Code(OTP) verification for guest signers",
-            "Expiring docs & reject signature support",
-            "PDF Template Creation(coming soon)",
-            "Audit Trails",
-            "API support",
-            "Add-ons support(coming soon)",
-            "Self hosted cloud infrastructure",
-            "Free for lifetime",
-            "Community support"
-        ]
-    },
-    {
-        "planName": "THANKS PLAN",
-        "currency": "$",
-        "price": "29.99",
-        "subtitle": "Use code <span style='background-color: yellow;'>'FREEBETA'</span> to get this for free(First 1000 users)",
-        "btnText": "Subscribe",
-        "url": "https://subscriptions.zoho.in/subscribe/ef798486e6a0a11ea65f2bae8f2af901dbadf3175d495584fd25b9af5d2f2b9e/thanks",
-        "target": "_self",
-        "benefits": [
-            "Sign Unlimited Documents",
-            "Unlimited Secure Doc Storage with OpenSign™ Drive",
-            "Unlimited Guest Signers",
-            "Unlimited completion certificates",
-            "Unique Code(OTP) verification for guest signers",
-            "Expiring docs & reject signature support",
-            "PDF Template Creation(coming soon)",
-            "Audit Trails",
-            "API support",
-            "Add-ons support(coming soon)",
-            "Self hosted cloud infrastructure"
-        ]
-    },
-    {
-        "planName": "ENTERPRISE",
-        "currency": "",
-        "price": "Request Price",
-        "subtitle": "Customization available Priority support.",
-        "btnText": "Contact us",
-        "url": "https://www.opensignlabs.com/contact-us",
-        "target": "_blank",
-        "benefits": [
-            "All features",
-            "Custom domain",
-            "Whitelabeling",
-            "Uptime SLA",
-            "SSO support",
-            "24/7 support"
-        ]
-    }
-]
@@ -9,6 +9,9 @@ import { useSelector } from "react-redux";
 import Parse from "parse";
 import ModalUi from "../primitives/ModalUi";
 import { useNavigate, useLocation, Outlet } from "react-router-dom";
+import { isEnableSubscription } from "../constant/const";
+import { useCookies } from "react-cookie";
+import { fetchSubscription } from "../constant/Utils";

 const HomeLayout = () => {
  const navigate = useNavigate();
@@ -18,33 +21,80 @@ const HomeLayout = () => {
  const arr = useSelector((state) => state.TourSteps);
  const [isUserValid, setIsUserValid] = useState(true);
  const [isLoader, setIsLoader] = useState(true);
-  useEffect(() => {
-    (async () => {
-      try {
-        // Use the session token to validate the user
-        const userQuery = new Parse.Query(Parse.User);
-        const user = await userQuery.get(Parse.User.current().id, {
-          sessionToken: localStorage.getItem("accesstoken")
-        });
-        if (user) {
-          setIsUserValid(true);
-          setIsLoader(false);
-        } else {
-          setIsUserValid(false);
-        }
-      } catch (error) {
-        // Session token is invalid or there was an error
-        setIsUserValid(false);
-      }
-    })();
-  }, []);
-
  // reactour state
  const [isCloseBtn, setIsCloseBtn] = useState(true);
  const [isTour, setIsTour] = useState(false);
  const [tourStatusArr, setTourStatusArr] = useState([]);
  const [tourConfigs, setTourConfigs] = useState([]);
+  const [, setCookie] = useCookies(["accesstoken", "main_Domain"]);

+  const tenantId = localStorage.getItem("TenantId");
+  useEffect(() => {
+    if (!tenantId) {
+      setIsUserValid(false);
+    } else {
+      (async () => {
+        try {
+          // Use the session token to validate the user
+          const userQuery = new Parse.Query(Parse.User);
+          const user = await userQuery.get(Parse.User.current().id, {
+            sessionToken: localStorage.getItem("accesstoken")
+          });
+          if (user) {
+            localStorage.setItem("profileImg", user.get("ProfilePic") || "");
+            checkIsSubscribed();
+          } else {
+            setIsUserValid(false);
+          }
+        } catch (error) {
+          // Session token is invalid or there was an error
+          setIsUserValid(false);
+        }
+      })();
+      saveCookies();
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tenantId]);
+  //function to use save data in cookies storage
+  const saveCookies = () => {
+    const main_Domain = window.location.origin;
+    const domainName = window.location.hostname; //app.opensignlabs.com
+    // Find the index of the first dot in the string
+    const indexOfFirstDot = domainName.indexOf(".");
+    // Remove the first dot and get the substring starting from the next character
+    const updateDomain = domainName.substring(indexOfFirstDot); //.opensignlabs.com
+    setCookie("accesstoken", localStorage.getItem("accesstoken"), {
+      secure: true,
+      domain: updateDomain
+    });
+    setCookie("main_Domain", main_Domain, {
+      secure: true,
+      domain: updateDomain
+    });
+  };
+
+  async function checkIsSubscribed() {
+    if (isEnableSubscription) {
+      const res = await fetchSubscription();
+      if (res.plan === "freeplan") {
+        setIsUserValid(true);
+        setIsLoader(false);
+      } else if (res.billingDate) {
+        if (new Date(res.billingDate) > new Date()) {
+          setIsUserValid(true);
+          setIsLoader(false);
+        } else {
+          navigate(`/subscription`);
+        }
+      } else {
+        navigate(`/subscription`);
+      }
+    } else {
+      setIsUserValid(true);
+      setIsLoader(false);
+    }
+  }
  const showSidebar = () => {
    setIsOpen((value) => !value);
  };
@@ -198,7 +248,7 @@ const HomeLayout = () => {
  return (
    <div>
      <div className="sticky top-0 z-50">
-        <Header showSidebar={showSidebar} />
+        {!isLoader && <Header showSidebar={showSidebar} />}
      </div>
      {isUserValid ? (
        <>
@@ -223,7 +273,6 @@ const HomeLayout = () => {
            <>
              <div className="flex md:flex-row flex-col z-50">
                <Sidebar isOpen={isOpen} closeSidebar={closeSidebar} />
-
                <div
                  id="renderList"
                  className="relative h-screen flex flex-col justify-between w-full overflow-y-auto"
@@ -6,6 +6,7 @@ import { useNavigate, useParams } from "react-router-dom";
 import Title from "../components/Title";
 import { useDispatch } from "react-redux";
 import { saveTourSteps } from "../redux/reducers/TourStepsReducer";
+
 const Dashboard = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
@@ -23,7 +24,7 @@ const Dashboard = () => {
        getDashboard(localStorage.getItem("PageLanding"));
      }
    } else {
-      navigate("/", { replace: true, state: { from: location } });
+      navigate("/", { replace: true, state: { from: "" } });
    }
    // eslint-disable-next-line
  }, [id]);
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { formJson } from "../json/FormJson";
 import AddUser from "../components/AddUser";
@@ -10,6 +10,13 @@ import SelectFolder from "../components/shared/fields/SelectFolder";
 import SignersInput from "../components/shared/fields/SignersInput";
 import Title from "../components/Title";
 import PageNotFound from "./PageNotFound";
+import { SaveFileSize } from "../constant/saveFileSize";
+import { getFileName, toDataUrl } from "../constant/Utils";
+import { PDFDocument } from "pdf-lib";
+import axios from "axios";
+import { isEnableSubscription, submitBtn } from "../constant/const";
+import ModalUi from "../primitives/ModalUi";
+import { Tooltip } from "react-tooltip";

 // `Form` render all type of Form on this basis of their provided in path
 function Form() {
@@ -29,6 +36,8 @@ function Form() {

 const Forms = (props) => {
  const maxFileSize = 20;
+  const abortController = new AbortController();
+  const inputFileRef = useRef(null);
  const navigate = useNavigate();
  const [signers, setSigners] = useState([]);
  const [folder, setFolder] = useState({ ObjectId: "", Name: "" });
@@ -37,37 +46,234 @@ const Forms = (props) => {
    Description: "",
    Note: "",
    TimeToCompleteDays: 15,
-    SendinOrder: "false"
+    SendinOrder: "false",
+    password: "",
+    file: ""
  });
-  const [fileupload, setFileUpload] = useState([]);
+  const [fileupload, setFileUpload] = useState("");
  const [fileload, setfileload] = useState(false);
  const [percentage, setpercentage] = useState(0);
  const [isReset, setIsReset] = useState(false);
  const [isAlert, setIsAlert] = useState(false);
  const [isSubmit, setIsSubmit] = useState(false);
  const [isErr, setIsErr] = useState("");
+  const [isPassword, setIsPassword] = useState(false);
+  const [isDecrypting, setIsDecrypting] = useState(false);
+  const [isCorrectPass, setIsCorrectPass] = useState(true);
  const handleStrInput = (e) => {
+    setIsCorrectPass(true);
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };
  useEffect(() => {
    handleReset();
+    return () => abortController.abort();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [props.title]);
-  const handleFileInput = (e) => {
+
+  function getFileAsArrayBuffer(file) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+
+      reader.onload = (e) => {
+        resolve(e.target.result);
+      };
+
+      reader.onerror = (e) => {
+        reject(e.target.error);
+      };
+
+      reader.readAsArrayBuffer(file);
+    });
+  }
+  const handleFileInput = async (e) => {
    setpercentage(0);
    try {
      let files = e.target.files;
+      setFormData((prev) => ({ ...prev, file: e.target.files[0] }));
      if (typeof files[0] !== "undefined") {
        const mb = Math.round(files[0].size / Math.pow(1024, 2));
        if (mb > maxFileSize) {
          alert(
            `The selected file size is too large. Please select a file less than ${maxFileSize} MB`
          );
-          setFileUpload([]);
+          setFileUpload("");
          e.target.value = "";
          return;
        } else {
-          handleFileUpload(files[0]);
+          if (files?.[0]?.type === "application/pdf") {
+            try {
+              const res = await getFileAsArrayBuffer(files[0]);
+              await PDFDocument.load(res);
+              handleFileUpload(files[0]);
+            } catch (err) {
+              if (err?.message?.includes("is encrypted")) {
+                try {
+                  await Parse.Cloud.run("encryptedpdf", {
+                    email: Parse.User.current().getEmail()
+                  });
+                } catch (err) {
+                  console.log("err in sending posthog encryptedpdf", err);
+                }
+                // console.log("err ", err);
+                try {
+                  setIsDecrypting(true);
+                  const fileName = files?.[0].name;
+                  const size = files?.[0].size;
+                  const name = sanitizeFileName(fileName);
+                  const url = "https://ai.nxglabs.in/decryptpdf"; //"https://ai.nxglabs.in/decryptpdf"; //
+                  let formData = new FormData();
+                  formData.append("file", files[0]);
+                  formData.append("password", "");
+                  const config = {
+                    headers: {
+                      "content-type": "multipart/form-data"
+                      // sessiontoken: Parse.User.current().getSessionToken()
+                    },
+                    responseType: "blob"
+                  };
+                  const response = await axios.post(url, formData, config);
+                  const pdfBlob = new Blob([response.data], {
+                    type: "application/pdf"
+                  });
+                  const pdfFile = new File([pdfBlob], name, {
+                    type: "application/pdf"
+                  });
+                  setIsDecrypting(false);
+                  setfileload(true);
+
+                  // Upload the file to Parse Server
+                  const parseFile = new Parse.File(
+                    name,
+                    pdfFile,
+                    "application/pdf"
+                  );
+
+                  await parseFile.save({
+                    progress: (progressValue, loaded, total, { type }) => {
+                      if (type === "upload" && progressValue !== null) {
+                        const percentCompleted = Math.round(
+                          (loaded * 100) / total
+                        );
+                        setpercentage(percentCompleted);
+                      }
+                    }
+                  });
+
+                  // Retrieve the URL of the uploaded file
+                  if (parseFile.url()) {
+                    setFileUpload(parseFile.url());
+                    setfileload(false);
+                    const tenantId = localStorage.getItem("TenantId");
+                    SaveFileSize(size, parseFile.url(), tenantId);
+                    return parseFile.url();
+                  }
+                } catch (err) {
+                  setfileload(false);
+                  setpercentage(0);
+                  if (err?.response?.status === 401) {
+                    setIsPassword(true);
+                  } else {
+                    console.log("Error uploading file: ", err?.response);
+                    setIsDecrypting(false);
+                    e.target.value = "";
+                  }
+                }
+              } else {
+                console.log("err ", err);
+                setFileUpload("");
+                e.target.value = "";
+              }
+            }
+          } else {
+            const isImage = files?.[0]?.type.includes("image/");
+            if (isImage) {
+              const image = await toDataUrl(files[0]);
+              const pdfDoc = await PDFDocument.create();
+              let embedImg;
+              if (files?.[0]?.type === "image/png") {
+                embedImg = await pdfDoc.embedPng(image);
+              } else {
+                embedImg = await pdfDoc.embedJpg(image);
+              }
+
+              // Get image dimensions
+              const imageWidth = embedImg.width;
+              const imageHeight = embedImg.height;
+              const page = pdfDoc.addPage([imageWidth, imageHeight]);
+              page.drawImage(embedImg, {
+                x: 0,
+                y: 0,
+                width: imageWidth,
+                height: imageHeight
+              });
+              const getFile = await pdfDoc.save({
+                useObjectStreams: false
+              });
+              setfileload(true);
+              const fileName = files[0].name;
+              const size = files[0].size;
+              const name = sanitizeFileName(fileName);
+              const pdfName = `${name?.split(".")[0]}.pdf`;
+              const parseFile = new Parse.File(
+                pdfName,
+                [...getFile],
+                "application/pdf"
+              );
+
+              try {
+                const response = await parseFile.save({
+                  progress: (progressValue, loaded, total, { type }) => {
+                    if (type === "upload" && progressValue !== null) {
+                      const percentCompleted = Math.round(
+                        (loaded * 100) / total
+                      );
+                      setpercentage(percentCompleted);
+                    }
+                  }
+                });
+                // The response object will contain information about the uploaded file
+                // You can access the URL of the uploaded file using response.url()
+                setFileUpload(response.url());
+                setfileload(false);
+                if (response.url()) {
+                  const tenantId = localStorage.getItem("TenantId");
+                  SaveFileSize(size, response.url(), tenantId);
+                  return response.url();
+                }
+              } catch (error) {
+                e.target.value = "";
+                setfileload(false);
+                setpercentage(0);
+                console.error("Error uploading file:", error);
+              }
+            } else {
+              if (isEnableSubscription) {
+                try {
+                  setfileload(true);
+                  const url = "https://ai.nxglabs.in/docxtopdf";
+                  let formData = new FormData();
+                  formData.append("file", files[0]);
+                  const config = {
+                    headers: {
+                      "content-type": "multipart/form-data",
+                      sessiontoken: Parse.User.current().getSessionToken()
+                    },
+                    signal: abortController.signal
+                  };
+                  const res = await axios.post(url, formData, config);
+                  if (res.data) {
+                    setFileUpload(res.data.url);
+                    setfileload(false);
+                  }
+                } catch (err) {
+                  e.target.value = "";
+                  setfileload(false);
+                  setpercentage(0);
+                  console.log("err in libreconverter ", err);
+                }
+              }
+            }
+          }
        }
      } else {
        alert("Please select file.");
@@ -82,6 +288,7 @@ const Forms = (props) => {
  const handleFileUpload = async (file) => {
    setfileload(true);
    const fileName = file.name;
+    const size = file.size;
    const name = sanitizeFileName(fileName);
    const pdfFile = file;
    const parseFile = new Parse.File(name, pdfFile);
@@ -101,6 +308,8 @@ const Forms = (props) => {
      setFileUpload(response.url());
      setfileload(false);
      if (response.url()) {
+        const tenantId = localStorage.getItem("TenantId");
+        SaveFileSize(size, response.url(), tenantId);
        return response.url();
      }
    } catch (error) {
@@ -113,6 +322,7 @@ const Forms = (props) => {
  const dropboxSuccess = async (files) => {
    setfileload(true);
    const file = files[0];
+    const size = file.bytes;
    const url = file.link;
    const mb = Math.round(file.bytes / Math.pow(1024, 2));

@@ -141,6 +351,8 @@ const Forms = (props) => {
        setfileload(false);

        if (response.url()) {
+          const tenantId = localStorage.getItem("TenantId");
+          SaveFileSize(size, response.url(), tenantId);
          return response.url();
        }
      } catch (error) {
@@ -154,64 +366,68 @@ const Forms = (props) => {
  const handleSubmit = async (e) => {
    e.preventDefault();
    e.stopPropagation();
-    setIsSubmit(true);
-    try {
-      const currentUser = Parse.User.current();
-      const object = new Parse.Object(props.Cls);
-      object.set("Name", formData?.Name);
-      object.set("Description", formData?.Description);
-      object.set("Note", formData?.Note);
-      if (props.title === "Request Signatures") {
-        object.set(
-          "TimeToCompleteDays",
-          parseInt(formData?.TimeToCompleteDays)
-        );
-      }
-      if (props.title !== "Sign Yourself") {
-        const isChecked = formData.SendinOrder === "false" ? false : true;
-        object.set("SendinOrder", isChecked);
-      }
-      object.set("URL", fileupload);
-      object.set("CreatedBy", Parse.User.createWithoutData(currentUser.id));
-      if (folder && folder.ObjectId) {
-        object.set("Folder", {
+    if (fileupload) {
+      setIsSubmit(true);
+      try {
+        const currentUser = Parse.User.current();
+        const object = new Parse.Object(props.Cls);
+        object.set("Name", formData?.Name);
+        object.set("Description", formData?.Description);
+        object.set("Note", formData?.Note);
+        if (props.title === "Request Signatures") {
+          object.set(
+            "TimeToCompleteDays",
+            parseInt(formData?.TimeToCompleteDays)
+          );
+        }
+        if (props.title !== "Sign Yourself") {
+          const isChecked = formData.SendinOrder === "false" ? false : true;
+          object.set("SendinOrder", isChecked);
+        }
+        object.set("URL", fileupload);
+        object.set("CreatedBy", Parse.User.createWithoutData(currentUser.id));
+        if (folder && folder.ObjectId) {
+          object.set("Folder", {
+            __type: "Pointer",
+            className: props.Cls,
+            objectId: folder.ObjectId
+          });
+        }
+        if (signers && signers.length > 0) {
+          object.set("Signers", signers);
+        }
+        const ExtCls = JSON.parse(localStorage.getItem("Extand_Class"));
+        object.set("ExtUserPtr", {
          __type: "Pointer",
-          className: props.Cls,
-          objectId: folder.ObjectId
+          className: "contracts_Users",
+          objectId: ExtCls[0].objectId
        });
-      }
-      if (signers && signers.length > 0) {
-        object.set("Signers", signers);
-      }
-      const ExtCls = JSON.parse(localStorage.getItem("Extand_Class"));
-      object.set("ExtUserPtr", {
-        __type: "Pointer",
-        className: "contracts_Users",
-        objectId: ExtCls[0].objectId
-      });

-      const res = await object.save();
-      if (res) {
-        setSigners([]);
-        setFolder({ ObjectId: "", Name: "" });
-        setFormData({
-          Name: "",
-          Description: "",
-          Note: ""
-        });
-        setFileUpload([]);
-        setpercentage(0);
-        navigate(`/${props?.redirectRoute}/${res.id}`);
+        const res = await object.save();
+        if (res) {
+          setSigners([]);
+          setFolder({ ObjectId: "", Name: "" });
+          setFormData({
+            Name: "",
+            Description: "",
+            Note: ""
+          });
+          setFileUpload("");
+          setpercentage(0);
+          navigate(`/${props?.redirectRoute}/${res.id}`);
+        }
+      } catch (err) {
+        console.log("err ", err);
+        setIsErr(true);
+      } finally {
+        setIsAlert(true);
+        setTimeout(() => {
+          setIsAlert(false);
+        }, 1000);
+        setIsSubmit(false);
      }
-    } catch (err) {
-      console.log("err ", err);
-      setIsErr(true);
-    } finally {
-      setIsAlert(true);
-      setTimeout(() => {
-        setIsAlert(false);
-      }, 1000);
-      setIsSubmit(false);
+    } else {
+      alert("Please wait until the PDF has been uploading.");
    }
  };

@@ -243,10 +459,83 @@ const Forms = (props) => {
      TimeToCompleteDays: 15,
      SendinOrder: "true"
    });
-    setFileUpload([]);
+    setFileUpload("");
    setpercentage(0);
    setTimeout(() => setIsReset(false), 50);
  };
+  const handlePasswordSubmit = async (e) => {
+    e.preventDefault();
+    setIsPassword(false);
+    setfileload(true);
+    try {
+      const fileName = formData?.file?.name;
+      const size = formData?.file?.size;
+      const name = sanitizeFileName(fileName);
+      const url = "https://ai.nxglabs.in/decryptpdf"; //
+      let Data = new FormData();
+      Data.append("file", formData?.file);
+      Data.append("password", formData.password);
+      const config = {
+        headers: {
+          "content-type": "multipart/form-data"
+          // sessiontoken: Parse.User.current().getSessionToken()
+        },
+        responseType: "blob"
+      };
+      const response = await axios.post(url, Data, config);
+      const pdfBlob = new Blob([response.data], {
+        type: "application/pdf"
+      });
+      const pdfFile = new File([pdfBlob], name, {
+        type: "application/pdf"
+      });
+      setIsDecrypting(false);
+      // Upload the file to Parse Server
+      const parseFile = new Parse.File(name, pdfFile, "application/pdf");
+
+      await parseFile.save({
+        progress: (progressValue, loaded, total, { type }) => {
+          if (type === "upload" && progressValue !== null) {
+            const percentCompleted = Math.round((loaded * 100) / total);
+            setpercentage(percentCompleted);
+          }
+        }
+      });
+
+      // Retrieve the URL of the uploaded file
+      if (parseFile.url()) {
+        setFormData((prev) => ({ ...prev, password: "" }));
+        setFileUpload(parseFile.url());
+        setfileload(false);
+        const tenantId = localStorage.getItem("TenantId");
+        SaveFileSize(size, parseFile.url(), tenantId);
+        return parseFile.url();
+      }
+    } catch (err) {
+      setfileload(false);
+      setpercentage(0);
+      if (err?.response?.status === 401) {
+        setIsPassword(true);
+        setIsCorrectPass(false);
+      } else {
+        console.log("Error uploading file: ", err?.response);
+        setFormData((prev) => ({ ...prev, password: "" }));
+        setIsDecrypting(false);
+        if (inputFileRef.current) {
+          inputFileRef.current.value = ""; // Set file input value to empty string
+        }
+      }
+    }
+  };
+  const handeCloseModal = () => {
+    setIsPassword(false);
+    setFormData((prev) => ({ ...prev, file: "", password: "" }));
+    setIsDecrypting(false);
+    setfileload(false);
+    if (inputFileRef.current) {
+      inputFileRef.current.value = ""; // Set file input value to empty string
+    }
+  };
  return (
    <div className="shadow-md rounded my-2 p-3 bg-[#ffffff] md:border-[1px] md:border-gray-600/50">
      <Title title={props?.title} />
@@ -270,169 +559,282 @@ const Forms = (props) => {
          ></div>
        </div>
      ) : (
-        <form onSubmit={handleSubmit}>
-          <h1 className="text-[20px] font-semibold mb-4">{props?.title}</h1>
-          {fileload && (
-            <div className="flex items-center gap-x-2">
-              <div className="h-2 rounded-full w-[200px] md:w-[400px] bg-gray-200">
-                <div
-                  className="h-2 rounded-full bg-blue-500"
-                  style={{ width: `${percentage}%` }}
-                ></div>
-              </div>
-              <span className="text-black text-sm">{percentage}%</span>
-            </div>
-          )}
-          <div className="text-xs">
-            <label className="block">
-              File<span className="text-red-500 text-[13px]">*</span>
-            </label>
-            {fileupload.length > 0 ? (
-              <div className="flex gap-2 justify-center items-center">
-                <div className="flex justify-between items-center px-2 py-2 w-full font-bold rounded border-[1px] border-[#ccc] text-gray-500 bg-white text-[13px]">
-                  <div className="break-all">
-                    file selected :{" "}
-                    {fileupload?.split("/")?.pop()?.split("_")[1]}
-                  </div>
-                  <div
-                    onClick={() => {
-                      setFileUpload([]);
-                    }}
-                    className="cursor-pointer px-[10px] text-[20px] font-bold bg-white text-red-500"
-                  >
-                    <i className="fa-solid fa-xmark"></i>
-                  </div>
-                </div>
-                {process.env.REACT_APP_DROPBOX_API_KEY && (
-                  <DropboxChooser
-                    onSuccess={dropboxSuccess}
-                    onCancel={dropboxCancel}
-                  />
-                )}
-              </div>
-            ) : (
-              <div className="flex gap-2 justify-center items-center">
+        <>
+          <ModalUi
+            isOpen={isPassword}
+            handleClose={() => handeCloseModal()}
+            title={"Enter Pdf Password"}
+          >
+            <form onSubmit={handlePasswordSubmit}>
+              <div className="px-6 pt-3 pb-2">
+                <label className="mb-2 text-xs">Password</label>
                <input
-                  type="file"
-                  className="bg-white px-2 py-1.5 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
-                  onChange={(e) => handleFileInput(e)}
-                  accept="application/pdf"
+                  type="text"
+                  name="password"
+                  value={formData.password}
+                  onChange={(e) => handleStrInput(e)}
+                  className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                  placeholder="Enter pdf password"
                  required
                />
-                {process.env.REACT_APP_DROPBOX_API_KEY && (
-                  <DropboxChooser
-                    onSuccess={dropboxSuccess}
-                    onCancel={dropboxCancel}
-                  />
+                {!isCorrectPass ? (
+                  <p className="ml-2 text-[11px] text-red-600">
+                    Please provide correct password
+                  </p>
+                ) : (
+                  <p className="ml-2 text-[11px] text-transparent text-red-600">
+                    .
+                  </p>
                )}
              </div>
+              <hr />
+              <div className="px-6 my-3">
+                <button type="submit" className={submitBtn}>
+                  Submit
+                </button>
+              </div>
+            </form>
+          </ModalUi>
+          <form onSubmit={handleSubmit}>
+            <h1 className="text-[20px] font-semibold mb-4">{props?.title}</h1>
+            {fileload && (
+              <div className="flex items-center gap-x-2">
+                <div className="h-2 rounded-full w-[200px] md:w-[400px] bg-gray-200">
+                  <div
+                    className="h-2 rounded-full bg-blue-500"
+                    style={{ width: `${percentage}%` }}
+                  ></div>
+                </div>
+                <span className="text-black text-sm">{percentage}%</span>
+              </div>
            )}
-          </div>
-          <div className="text-xs mt-2">
-            <label className="block">
-              {props.title === "New Template"
-                ? "Template Title"
-                : "Document Title"}
-              <span className="text-red-500 text-[13px]">*</span>
-            </label>
-            <input
-              name="Name"
-              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
-              value={formData.Name}
-              onChange={(e) => handleStrInput(e)}
-              required
-            />
-          </div>
-          <div className="text-xs mt-2">
-            <label className="block">Description</label>
-            <input
-              name="Description"
-              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
-              value={formData.Description}
-              onChange={(e) => handleStrInput(e)}
-            />
-          </div>
-          {props.signers && (
-            <SignersInput onChange={handleSigners} isReset={isReset} required />
-          )}
-          <div className="text-xs mt-2">
-            <label className="block">
-              Note<span className="text-red-500 text-[13px]">*</span>
-            </label>
-            <input
-              name="Note"
-              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
-              value={formData.Note}
-              onChange={(e) => handleStrInput(e)}
-              required
-            />
-          </div>
-          <SelectFolder
-            onSuccess={handleFolder}
-            folderCls={props.Cls}
-            isReset={isReset}
-          />
-
-          {props.title === "Request Signatures" && (
+            {isDecrypting && (
+              <div className="flex items-center gap-x-2">
+                <span className="text-black text-sm">
+                  Decrypting pdf please wait...
+                </span>
+              </div>
+            )}
+            <div className="text-xs">
+              <label className="block">
+                {`File (pdf, png, jpg, jpeg${
+                  isEnableSubscription ? ", docx)" : ")"
+                }`}
+                <span className="text-red-500 text-[13px]">*</span>
+              </label>
+              {fileupload.length > 0 ? (
+                <div className="flex gap-2 justify-center items-center">
+                  <div className="flex justify-between items-center px-2 py-2 w-full font-bold rounded border-[1px] border-[#ccc] text-gray-500 bg-white text-[13px]">
+                    <div className="break-all">
+                      file selected : {getFileName(fileupload)}
+                    </div>
+                    <div
+                      onClick={() => setFileUpload("")}
+                      className="cursor-pointer px-[10px] text-[20px] font-bold bg-white text-red-500"
+                    >
+                      <i className="fa-solid fa-xmark"></i>
+                    </div>
+                  </div>
+                  {process.env.REACT_APP_DROPBOX_API_KEY && (
+                    <DropboxChooser
+                      onSuccess={dropboxSuccess}
+                      onCancel={dropboxCancel}
+                    />
+                  )}
+                </div>
+              ) : (
+                <div className="flex gap-2 justify-center items-center">
+                  <input
+                    type="file"
+                    className="bg-white px-2 py-1.5 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                    onChange={(e) => handleFileInput(e)}
+                    ref={inputFileRef}
+                    accept={
+                      isEnableSubscription
+                        ? "application/pdf,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/png,image/jpeg"
+                        : "application/pdf,image/png,image/jpeg"
+                    }
+                    required
+                  />
+                  {process.env.REACT_APP_DROPBOX_API_KEY && (
+                    <DropboxChooser
+                      onSuccess={dropboxSuccess}
+                      onCancel={dropboxCancel}
+                    />
+                  )}
+                </div>
+              )}
+            </div>
            <div className="text-xs mt-2">
              <label className="block">
-                Time To Complete (Days)
+                {props.title === "New Template"
+                  ? "Template Title"
+                  : "Document Title"}
                <span className="text-red-500 text-[13px]">*</span>
              </label>
              <input
-                type="number"
-                name="TimeToCompleteDays"
+                name="Name"
                className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
-                value={formData.TimeToCompleteDays}
+                value={formData.Name}
                onChange={(e) => handleStrInput(e)}
                required
              />
            </div>
-          )}
-          {props.title !== "Sign Yourself" && (
            <div className="text-xs mt-2">
-              <label className="block">Send In Order</label>
-              <div className="flex items-center gap-2 ml-2 mb-1">
+              <label className="block">Description</label>
+              <input
+                name="Description"
+                className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                value={formData.Description}
+                onChange={(e) => handleStrInput(e)}
+              />
+            </div>
+            {props.signers && (
+              <SignersInput
+                onChange={handleSigners}
+                isReset={isReset}
+                required
+              />
+            )}
+            <div className="text-xs mt-2">
+              <label className="block">
+                Note<span className="text-red-500 text-[13px]">*</span>
+              </label>
+              <input
+                name="Note"
+                className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                value={formData.Note}
+                onChange={(e) => handleStrInput(e)}
+                required
+              />
+            </div>
+            {props.title !== "New Template" && (
+              <SelectFolder
+                onSuccess={handleFolder}
+                folderCls={props.Cls}
+                isReset={isReset}
+              />
+            )}
+            {props.title === "Request Signatures" && (
+              <div className="text-xs mt-2">
+                <label className="block">
+                  Time To Complete (Days)
+                  <span className="text-red-500 text-[13px]">*</span>
+                </label>
                <input
-                  type="radio"
-                  value={"true"}
-                  name="SendinOrder"
-                  checked={formData.SendinOrder === "true"}
-                  className=""
-                  onChange={handleStrInput}
+                  type="number"
+                  name="TimeToCompleteDays"
+                  className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                  value={formData.TimeToCompleteDays}
+                  onChange={(e) => handleStrInput(e)}
+                  required
                />
-                <div className="text-center">Yes</div>
              </div>
-              <div className="flex items-center gap-2 ml-2 mb-1">
-                <input
-                  type="radio"
-                  value={"false"}
-                  name="SendinOrder"
-                  checked={formData.SendinOrder === "false"}
-                  onChange={handleStrInput}
-                />
-                <div className="text-center">No</div>
+            )}
+            {props.title !== "Sign Yourself" && (
+              <div className="text-xs mt-2">
+                <label className="block">
+                  Send In Order
+                  <a data-tooltip-id="sendInOrder-tooltip" className="ml-1">
+                    <sup>
+                      <i
+                        className="fa-solid fa-question rounded-full"
+                        style={{
+                          borderColor: "#33bbff",
+                          color: "#33bbff",
+                          fontSize: 13,
+                          borderWidth: 1.5,
+                          padding: "1.5px 4px"
+                        }}
+                      ></i>
+                    </sup>
+                  </a>
+                  <Tooltip id="sendInOrder-tooltip" className="z-50">
+                    <div className="max-w-[200px] md:max-w-[450px]">
+                      <p className="font-bold">Send in Order</p>
+                      <p>
+                        Choose how you want the signing requests to be sent to
+                        the document signers:
+                      </p>
+                      <p className="p-[5px]">
+                        <ol className="list-disc">
+                          <li>
+                            <span className="font-bold">Yes:</span>
+                            <span>
+                              {" "}
+                              Selecting this option will send the signing
+                              request to the first signer initially. Once the
+                              first signer completes their part, the next signer
+                              in the sequence will receive the request. This
+                              process continues until all signers have signed
+                              the document. This method ensures that the
+                              document is signed in a specific order.
+                            </span>
+                          </li>
+                          <li>
+                            <span className="font-bold">No: </span>
+                            <span>
+                              Selecting this option will send the signing links
+                              to all signers simultaneously. Every signer can
+                              sign the document at their convenience, regardless
+                              of whether other signers have completed their
+                              signatures. This method is faster but does not
+                              enforce any signing order among the participants.
+                            </span>
+                          </li>
+                        </ol>
+                      </p>
+
+                      <p>
+                        Select the option that best suits the needs of your
+                        document processing.
+                      </p>
+                    </div>
+                  </Tooltip>
+                </label>
+
+                <div className="flex items-center gap-2 ml-2 mb-1">
+                  <input
+                    type="radio"
+                    value={"true"}
+                    name="SendinOrder"
+                    checked={formData.SendinOrder === "true"}
+                    className=""
+                    onChange={handleStrInput}
+                  />
+                  <div className="text-center">Yes</div>
+                </div>
+                <div className="flex items-center gap-2 ml-2 mb-1">
+                  <input
+                    type="radio"
+                    value={"false"}
+                    name="SendinOrder"
+                    checked={formData.SendinOrder === "false"}
+                    onChange={handleStrInput}
+                  />
+                  <div className="text-center">No</div>
+                </div>
+              </div>
+            )}
+            <div className="flex items-center mt-3 gap-2 text-white">
+              <button
+                className={`${
+                  isSubmit && "cursor-progress"
+                } bg-[#1ab6ce] rounded-sm shadow-md text-[13px] font-semibold uppercase text-white py-1.5 px-2.5 focus:outline-none`}
+                type="submit"
+                disabled={isSubmit}
+              >
+                Next
+              </button>
+              <div
+                className="cursor-pointer bg-[#188ae2] rounded-sm shadow-md text-[13px] font-semibold uppercase text-white py-1.5 px-2.5 text-center ml-[2px] focus:outline-none"
+                onClick={() => handleReset()}
+              >
+                Reset
              </div>
            </div>
-          )}
-          <div className="flex items-center mt-3 gap-2 text-white">
-            <button
-              className={`${
-                isSubmit && "cursor-progress"
-              } bg-[#1ab6ce] rounded-sm shadow-md text-[13px] font-semibold uppercase text-white py-1.5 px-2.5 focus:outline-none`}
-              type="submit"
-              disabled={isSubmit}
-            >
-              Next
-            </button>
-            <div
-              className="cursor-pointer bg-[#188ae2] rounded-sm shadow-md text-[13px] font-semibold uppercase text-white py-1.5 px-2.5 text-center ml-[2px] focus:outline-none"
-              onClick={() => handleReset()}
-            >
-              Reset
-            </div>
-          </div>
-        </form>
+          </form>
+        </>
      )}
    </div>
  );
@@ -1,14 +1,16 @@
 import React, { useEffect, useState } from "react";
 import Title from "../components/Title";
 import axios from "axios";
+import { useNavigate } from "react-router-dom";
 import Alert from "../primitives/Alert";
 import ModalUi from "../primitives/ModalUi";
-import { rejectBtn, submitBtn } from "../constant/const";
-import { openInNewTab } from "../constant/Utils";
+import { isEnableSubscription, rejectBtn, submitBtn } from "../constant/const";
+import { checkIsSubscribed, copytoData, openInNewTab } from "../constant/Utils";
 import PremiumAlertHeader from "../primitives/PremiumAlertHeader";
 import Tooltip from "../primitives/Tooltip";

 function GenerateToken() {
+  const navigation = useNavigate();
  const [parseBaseUrl] = useState(localStorage.getItem("baseUrl"));
  const [parseAppId] = useState(localStorage.getItem("parseAppId"));
  const [apiToken, SetApiToken] = useState("");
@@ -17,6 +19,7 @@ function GenerateToken() {
  const [isGenerate, setIsGenerate] = useState(false);
  const [isErr, setIsErr] = useState(false);
  const [isModal, setIsModal] = useState(false);
+  const [isSubscribe, setIsSubscribe] = useState(false);

  useEffect(() => {
    fetchToken();
@@ -25,6 +28,11 @@ function GenerateToken() {

  const fetchToken = async () => {
    try {
+      if (isEnableSubscription) {
+        const getIsSubscribe = await checkIsSubscribed();
+        setIsSubscribe(getIsSubscribe);
+      }
+
      const url = parseBaseUrl + "functions/getapitoken";
      const headers = {
        "Content-Type": "application/json",
@@ -35,6 +43,7 @@ function GenerateToken() {
      if (res) {
        SetApiToken(res.data.result.result);
      }
+
      setIsLoader(false);
    } catch (err) {
      SetApiToken();
@@ -83,13 +92,14 @@ function GenerateToken() {
  };

  const copytoclipboard = (text) => {
-    navigator.clipboard.writeText(text);
+    copytoData(text);
    setCopied(true);
    setTimeout(() => {
      setCopied(false);
    }, 1500); // Reset copied state after 1.5 seconds
  };
  const handleModal = () => setIsModal(!isModal);
+
  return (
    <React.Fragment>
      <Title title={"API Token"} />
@@ -117,35 +127,47 @@ function GenerateToken() {
        </div>
      ) : (
        <div className="bg-white flex flex-col justify-center shadow rounded">
-          <PremiumAlertHeader />
-          <h1 className="ml-4 mt-3 mb-2 font-semibold">
-            API Token{" "}
+          {!isEnableSubscription && <PremiumAlertHeader />}
+          <h1 className={"ml-4 mt-3 mb-2 font-semibold"}>
+            OpenSign™ API{" "}
            <Tooltip
-              url={"https://docs.opensignlabs.com/docs/API-docs/opensign-api-v-1"}
+              url={
+                "https://docs.opensignlabs.com/docs/API-docs/opensign-api-v-1"
+              }
+              isSubscribe={true}
            />
          </h1>
-          <ul className="w-full flex flex-col p-2 text-sm">
+          <ul
+            className={
+              isSubscribe || !isEnableSubscription
+                ? "w-full flex flex-col p-2 text-sm "
+                : "w-full flex flex-col p-2 text-sm opacity-20 pointer-events-none select-none"
+            }
+          >
            <li
-              className={`flex justify-between items-center border-y-[1px] border-gray-300 break-all py-2`}
+              className={`flex flex-col md:flex-row  justify-between items-center border-y-[1px] border-gray-300 break-all py-2`}
            >
-              <span className="w-[40%]">Api Token:</span>{" "}
-              <span
-                id="token"
-                className="w-[60%] md:text-end cursor-pointer"
-                onClick={() => copytoclipboard(apiToken)}
+              <div className="w-[70%] flex-col md:flex-row flex items-center gap-5 ">
+                <span className="">Api Token:</span>{" "}
+                <span
+                  id="token"
+                  className=" md:text-end cursor-pointer"
+                  onClick={() => copytoclipboard(apiToken)}
+                >
+                  {apiToken ? apiToken : "_____"}
+                </span>
+              </div>
+              <button
+                type="button"
+                onClick={apiToken ? handleModal : handleSubmit}
+                className="rounded hover:bg-[#15b4e9] border-[1px] border-[#15b4e9] text-[#15b4e9] hover:text-white px-4 py-2 text-xs md:text-base focus:outline-none"
              >
-                {apiToken && apiToken}
-              </span>
+                {apiToken ? "Regenerate Token" : "Generate Token"}
+              </button>
            </li>
          </ul>
-          <div className="flex flex-col md:flex-row items-center justify-center gap-2 pb-4">
-            <button
-              type="button"
-              onClick={apiToken ? handleModal : handleSubmit}
-              className="rounded hover:bg-[#15b4e9] border-[1px] border-[#15b4e9] text-[#15b4e9] hover:text-white px-4 py-2 text-xs md:text-base focus:outline-none"
-            >
-              {apiToken ? "Regenerate Token" : "Generate Token"}
-            </button>
+
+          <div className="flex   items-center justify-center ">
            <button
              type="button"
              onClick={() =>
@@ -153,12 +175,41 @@ function GenerateToken() {
                  "https://docs.opensignlabs.com/docs/API-docs/opensign-api-v-1"
                )
              }
-              className="rounded hover:bg-[#15b4e9] border-[1px] border-[#15b4e9] text-[#15b4e9] hover:text-white px-11 py-2 text-xs md:text-base focus:outline-none"
+              className="rounded hover:bg-[#15b4e9] border-[1px] my-2 border-[#15b4e9] text-[#15b4e9] hover:text-white px-11 py-2 text-xs md:text-base focus:outline-none"
            >
              View Docs
            </button>
          </div>

+          {!isSubscribe && isEnableSubscription && (
+            <>
+              <h1 className={"ml-4 mt-3 mb-2 font-semibold"}>
+                Upgrade to PRO Plan
+              </h1>
+              <ul className={"w-full flex flex-col p-2 text-sm "}>
+                <li
+                  className={`flex flex-col md:flex-row justify-between items-center border-y-[1px] border-gray-300 break-all py-2`}
+                >
+                  <div className="w-[70%] flex-col md:flex-row flex items-center gap-3 ">
+                    <span className="">$29.99/month:</span>{" "}
+                    <span id="token" className=" md:text-end cursor-pointer">
+                      Sign 100 docs using API. Only 0.15/docs after that.
+                    </span>
+                  </div>
+                  {!isSubscribe && isEnableSubscription && (
+                    <button
+                      type="button"
+                      onClick={() => navigation("/subscription")}
+                      className="rounded hover:bg-[#15b4e9] border-[1px] border-[#15b4e9] text-[#15b4e9] hover:text-white px-11 py-2 text-xs md:text-base focus:outline-none"
+                    >
+                      Upgrade Now
+                    </button>
+                  )}
+                </li>
+              </ul>
+            </>
+          )}
+
          <ModalUi
            isOpen={isModal}
            title={"Regenerate Token"}
@@ -3,36 +3,59 @@ import { useNavigate, useParams } from "react-router-dom";
 import "../styles/loginPage.css";
 import loader from "../assets/images/loader2.gif";
 import axios from "axios";
-import { themeColor } from "../constant/const";
-import { contractUsers } from "../constant/Utils";
+import { isEnableSubscription, themeColor } from "../constant/const";
+import { contractUsers, getAppLogo } from "../constant/Utils";
+import logo from "../assets/images/logo.png";
+import { appInfo } from "../constant/appinfo";

 function GuestLogin() {
-  const { id, userMail, contactBookId, serverUrl } = useParams();
+  const { id, userMail, contactBookId, base64url } = useParams();
  let navigate = useNavigate();
  const [email, setEmail] = useState(userMail);
  const [OTP, setOTP] = useState("");
  const [EnterOTP, setEnterOtp] = useState(false);
  const [loading, setLoading] = useState(false);
  const [isLoading, setIsLoading] = useState(true);
-
+  const [appLogo, setAppLogo] = useState("");
+  const [documentId, setDocumentId] = useState(id);
+  const [contactId, setContactId] = useState(contactBookId);
  useEffect(() => {
    handleServerUrl();
+
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  //function generate serverUrl and parseAppId from url and save it in local storage
-  const handleServerUrl = () => {
-    //split url in array from '&'
-    localStorage.clear();
-    const checkSplit = serverUrl.split("&");
-    const server = checkSplit[0];
-    const parseId = checkSplit[1];
-    const appName = checkSplit[2];
+  const handleServerUrl = async () => {
+    if (isEnableSubscription) {
+      const applogo = await getAppLogo();
+      if (applogo) {
+        setAppLogo(applogo);
+      } else {
+        setAppLogo(logo);
+      }
+    } else {
+      setAppLogo(logo);
+    }

-    const newServer = server.replaceAll("%2F", "/");
+    localStorage.clear();
+    const parseId = appInfo.appId;
+    const newServer = `${appInfo.baseUrl}/`;
+    const appName = appInfo.appname;
    localStorage.setItem("baseUrl", newServer);
    localStorage.setItem("parseAppId", parseId);
    localStorage.setItem("_appName", appName);
+    //this condition is used decode base64 to string and get userEmail,documentId, contactBoookId data.
+    if (!id) {
+      //`atob` function is used to decode base64
+      const decodebase64 = atob(base64url);
+      //split url in array from '/'
+      const checkSplit = decodebase64.split("/");
+      setDocumentId(checkSplit[0]);
+      setEmail(checkSplit[1]);
+      setContactId(checkSplit[2]);
+    }
+
    setIsLoading(false);
  };

@@ -59,7 +82,8 @@ function GuestLogin() {
          "X-Parse-Application-Id": parseId
        };
        let body = {
-          email: email.toString()
+          email: email.toString(),
+          docId: documentId
        };
        let Otp = await axios.post(url, body, { headers: headers });

@@ -122,7 +146,7 @@ function GuestLogin() {
          //save isGuestSigner true in local to handle login flow header in mobile view
          localStorage.setItem("isGuestSigner", true);
          setLoading(false);
-          navigate(`/load/recipientSignPdf/${id}/${contactBookId}`);
+          navigate(`/load/recipientSignPdf/${documentId}/${contactId}`);
        }
      } catch (error) {
        console.log("err ", error);
@@ -163,12 +187,14 @@ function GuestLogin() {
          }}
        >
          <div className="main_head">
-            <div className="main-logo">
-              <img
-                alt="sign img"
-                src="https://qikinnovation.ams3.digitaloceanspaces.com/logo.png"
-                width="100%"
-              />
+            <div className="w-[250px] h-[66px] inline-block overflow-hidden">
+              {appLogo && (
+                <img
+                  src={appLogo}
+                  className="object-contain h-full"
+                  alt="logo"
+                />
+              )}
            </div>
          </div>

@@ -10,11 +10,16 @@ import { NavLink, useNavigate, useLocation } from "react-router-dom";
 import login_img from "../assets/images/login_img.svg";
 import { useWindowSize } from "../hook/useWindowSize";
 import ModalUi from "../primitives/ModalUi";
-import { modalCancelBtnColor, modalSubmitBtnColor } from "../constant/const";
+import {
+  isEnableSubscription,
+  modalCancelBtnColor,
+  modalSubmitBtnColor
+} from "../constant/const";
 import Alert from "../primitives/Alert";
 import { appInfo } from "../constant/appinfo";
 import { fetchAppInfo } from "../redux/reducers/infoReducer";
 import { showTenant } from "../redux/reducers/ShowTenant";
+import { fetchSubscription, getAppLogo } from "../constant/Utils";
 function Login() {
  const navigate = useNavigate();
  const location = useLocation();
@@ -39,7 +44,7 @@ function Login() {
    Destination: ""
  });
  const [isModal, setIsModal] = useState(false);
-  const image = appInfo?.applogo || undefined;
+  const [image, setImage] = useState();

  useEffect(() => {
    if (localStorage.getItem("accesstoken")) {
@@ -47,8 +52,23 @@ function Login() {
      GetLoginData();
    }
    dispatch(fetchAppInfo());
+    saveLogo();
+
    // eslint-disable-next-line
  }, []);
+
+  const saveLogo = async () => {
+    if (isEnableSubscription) {
+      const logo = await getAppLogo();
+      if (logo) {
+        setImage(logo);
+      } else {
+        setImage(appInfo?.applogo || undefined);
+      }
+    } else {
+      setImage(appInfo?.applogo || undefined);
+    }
+  };
  const handleChange = (event) => {
    const { name, value } = event.target;
    setState({ ...state, [name]: value });
@@ -149,7 +169,7 @@ function Login() {
                              await Parse.Cloud.run("getUserDetails", {
                                email: currentUser.get("email")
                              }).then(
-                                (result) => {
+                                async (result) => {
                                  let tenentInfo = [];
                                  const results = [result];
                                  if (results) {
@@ -209,7 +229,7 @@ function Login() {
                                              x.TenantId.TenantName || ""
                                          };
                                          localStorage.setItem(
-                                            "TenetId",
+                                            "TenantId",
                                            x.TenantId.objectId
                                          );
                                          tenentInfo.push(obj);
@@ -239,10 +259,7 @@ function Login() {
                                        element.pageType
                                      );
                                      setState({ ...state, loading: false });
-                                      if (
-                                        process.env
-                                          .REACT_APP_ENABLE_SUBSCRIPTION
-                                      ) {
+                                      if (isEnableSubscription) {
                                        const LocalUserDetails = {
                                          name: results[0].get("Name"),
                                          email: results[0].get("Email"),
@@ -253,11 +270,15 @@ function Login() {
                                          "userDetails",
                                          JSON.stringify(LocalUserDetails)
                                        );
-                                        const billingDate =
-                                          results[0].get("Next_billing_date") &&
-                                          results[0].get("Next_billing_date");
-                                        if (billingDate) {
-                                          if (billingDate > new Date()) {
+                                        const res = await fetchSubscription();
+                                        const freeplan = res.plan;
+                                        const billingDate = res.billingDate;
+                                        if (freeplan === "freeplan") {
+                                          navigate(redirectUrl);
+                                        } else if (billingDate) {
+                                          if (
+                                            new Date(billingDate) > new Date()
+                                          ) {
                                            localStorage.removeItem(
                                              "userDetails"
                                            );
@@ -292,9 +313,7 @@ function Login() {
                                      element.pageType
                                    );
                                    setState({ ...state, loading: false });
-                                    if (
-                                      process.env.REACT_APP_ENABLE_SUBSCRIPTION
-                                    ) {
+                                    if (isEnableSubscription) {
                                      const LocalUserDetails = {
                                        name: _user.name,
                                        email: email,
@@ -391,7 +410,19 @@ function Login() {
  const setThirdpartyLoader = (value) => {
    setState({ ...state, thirdpartyLoader: value });
  };
-  const thirdpartyLoginfn = async (sessionToken, billingDate) => {
+  const handleFreePlan = async (id) => {
+    try {
+      const params = { userId: id };
+      const res = await Parse.Cloud.run("freesubscription", params);
+      if (res.status === "error") {
+        alert(res.result);
+      }
+    } catch (err) {
+      console.log("err in free subscribe", err.message);
+      alert("Somenthing went wrong, please try again later!");
+    }
+  };
+  const thirdpartyLoginfn = async (sessionToken) => {
    const baseUrl = localStorage.getItem("baseUrl");
    const parseAppId = localStorage.getItem("parseAppId");
    const res = await axios.get(baseUrl + "users/me", {
@@ -400,6 +431,11 @@ function Login() {
        "X-Parse-Application-Id": parseAppId
      }
    });
+    const param = new URLSearchParams(location.search);
+    const isFreeplan = param?.get("subscription") === "freeplan";
+    if (isFreeplan) {
+      await handleFreePlan(res.data.objectId);
+    }
    await Parse.User.become(sessionToken).then(() => {
      window.localStorage.setItem("accesstoken", sessionToken);
    });
@@ -485,7 +521,7 @@ function Login() {
                      await Parse.Cloud.run("getUserDetails", {
                        email: currentUser.get("email")
                      }).then(
-                        (result) => {
+                        async (result) => {
                          let tenentInfo = [];
                          const results = [result];
                          if (results) {
@@ -535,14 +571,14 @@ function Login() {
                              setState({ ...state, loading: false });
                              navigate("/");
                            } else {
-                              extendedInfo.forEach((x) => {
+                              extendedInfo.forEach(async (x) => {
                                if (x.TenantId) {
                                  let obj = {
                                    tenentId: x.TenantId.objectId,
                                    tenentName: x.TenantId.TenantName || ""
                                  };
                                  localStorage.setItem(
-                                    "TenetId",
+                                    "TenantId",
                                    x.TenantId.objectId
                                  );
                                  tenentInfo.push(obj);
@@ -571,18 +607,33 @@ function Login() {
                              );
                              setThirdpartyLoader(false);
                              setState({ ...state, loading: false });
-                              if (process.env.REACT_APP_ENABLE_SUBSCRIPTION) {
-                                if (billingDate) {
-                                  if (billingDate > new Date()) {
+                              if (isEnableSubscription) {
+                                const res = await fetchSubscription();
+                                const freeplan = res.plan;
+                                const billingDate = res.billingDate;
+                                if (freeplan === "freeplan") {
+                                  navigate(redirectUrl);
+                                } else if (billingDate) {
+                                  if (new Date(billingDate) > new Date()) {
                                    localStorage.removeItem("userDetails");
                                    navigate(redirectUrl);
+                                  } else {
+                                    if (isFreeplan) {
+                                      navigate(redirectUrl);
+                                    } else {
+                                      navigate(`/subscription`, {
+                                        replace: true
+                                      });
+                                    }
+                                  }
+                                } else {
+                                  if (isFreeplan) {
+                                    navigate(redirectUrl);
                                  } else {
                                    navigate(`/subscription`, {
                                      replace: true
                                    });
                                  }
-                                } else {
-                                  navigate(`/subscription`, { replace: true });
                                }
                              } else {
                                navigate(redirectUrl);
@@ -597,17 +648,34 @@ function Login() {
                            localStorage.setItem("pageType", element.pageType);
                            setState({ ...state, loading: false });
                            setThirdpartyLoader(false);
-                            if (process.env.REACT_APP_ENABLE_SUBSCRIPTION) {
-                              if (billingDate) {
-                                if (billingDate > new Date()) {
+                            if (isEnableSubscription) {
+                              const res = await fetchSubscription();
+                              const freeplan = res.plan;
+                              const billingDate = res.billingDate;
+                              if (freeplan === "freeplan") {
+                                navigate(redirectUrl);
+                              } else if (billingDate) {
+                                if (new Date(billingDate) > new Date()) {
                                  localStorage.removeItem("userDetails");
                                  // Redirect to the appropriate URL after successful login
                                  navigate(redirectUrl);
                                } else {
-                                  navigate(`/subscription`, { replace: true });
+                                  if (isFreeplan) {
+                                    navigate(redirectUrl);
+                                  } else {
+                                    navigate(`/subscription`, {
+                                      replace: true
+                                    });
+                                  }
                                }
                              } else {
-                                navigate(`/subscription`, { replace: true });
+                                if (isFreeplan) {
+                                  navigate(redirectUrl);
+                                } else {
+                                  navigate(`/subscription`, {
+                                    replace: true
+                                  });
+                                }
                              }
                            } else {
                              navigate(redirectUrl);
@@ -745,10 +813,17 @@ function Login() {
                    // Get TenentID from Extendend Class
                    localStorage.setItem("extended_class", item.extended_class);
                    const currentUser = Parse.User.current();
+                    const userSettings = appInfo.settings;
+                    const setting = userSettings.find(
+                      (x) => x.role === _currentRole
+                    );
+                    const redirectUrl =
+                      location?.state?.from ||
+                      `/${setting.pageType}/${setting.pageId}`;
                    await Parse.Cloud.run("getUserDetails", {
                      email: currentUser.get("email")
                    }).then(
-                      (result) => {
+                      async (result) => {
                        let tenentInfo = [];
                        const results = [result];
                        if (results) {
@@ -777,22 +852,74 @@ function Login() {
                                  tenentName: x.TenantId.TenantName || ""
                                };
                                localStorage.setItem(
-                                  "TenetId",
+                                  "TenantId",
                                  x.TenantId.objectId
                                );
                                tenentInfo.push(obj);
                              }
                            });
-                            localStorage.setItem("PageLanding", item.pageId);
-                            localStorage.setItem("defaultmenuid", item.menuId);
-                            localStorage.setItem("pageType", item.pageType);
-                            navigate(`/${item.pageType}/${item.pageId}`);
+                            localStorage.setItem("PageLanding", setting.pageId);
+                            localStorage.setItem(
+                              "defaultmenuid",
+                              setting.menuId
+                            );
+                            localStorage.setItem("pageType", setting.pageType);
+                            if (isEnableSubscription) {
+                              const LocalUserDetails = {
+                                name: results[0].get("Name"),
+                                email: results[0].get("Email"),
+                                phone: results[0].get("Phone"),
+                                company: results[0].get("Company")
+                              };
+                              localStorage.setItem(
+                                "userDetails",
+                                JSON.stringify(LocalUserDetails)
+                              );
+                              const res = await fetchSubscription();
+                              const billingDate = res.billingDate;
+                              const freeplan = res.plan;
+                              if (freeplan === "freeplan") {
+                                navigate(redirectUrl);
+                              } else if (billingDate) {
+                                if (new Date(billingDate) > new Date()) {
+                                  localStorage.removeItem("userDetails");
+                                  // Redirect to the appropriate URL after successful login
+                                  navigate(redirectUrl);
+                                } else {
+                                  navigate(`/subscription`);
+                                }
+                              } else {
+                                navigate(`/subscription`);
+                              }
+                            } else {
+                              // Redirect to the appropriate URL after successful login
+                              navigate(redirectUrl);
+                            }
                          }
                        } else {
-                          localStorage.setItem("PageLanding", item.pageId);
-                          localStorage.setItem("defaultmenuid", item.menuId);
-                          localStorage.setItem("pageType", item.pageType);
-                          navigate(`/${item.pageType}/${item.pageId}`);
+                          localStorage.setItem("PageLanding", setting.pageId);
+                          localStorage.setItem("defaultmenuid", setting.menuId);
+                          localStorage.setItem("pageType", setting.pageType);
+                          setState({ ...state, loading: false });
+                          if (isEnableSubscription) {
+                            const LocalUserDetails = {
+                              name: results[0].get("Name"),
+                              email: results[0].get("Email"),
+                              phone: results[0].get("Phone")
+                              // company: results.get("Company"),
+                            };
+                            localStorage.setItem(
+                              "userDetails",
+                              JSON.stringify(LocalUserDetails)
+                            );
+                            const billingDate = "";
+                            if (billingDate) {
+                              navigate(`/subscription`);
+                            }
+                          } else {
+                            // Redirect to the appropriate URL after successful login
+                            navigate(redirectUrl);
+                          }
                        }
                      },
                      (error) => {
@@ -949,12 +1076,14 @@ function Login() {
        <>
          <div aria-labelledby="loginHeading" role="region">
            <div className="md:m-10 lg:m-16 md:p-4 lg:p-10 p-4 bg-[#ffffff] md:border-[1px] md:border-gray-400 ">
-              <div className="w-[250px] h-[66px] inline-block">
-                <img
-                  src={image}
-                  width="100%"
-                  alt="The image displays the OpenSign logo with a stylized blue square with an open corner, accompanied by the tagline Seal the Deal, Openly."
-                />
+              <div className="w-[250px] h-[66px] inline-block overflow-hidden">
+                {image && (
+                  <img
+                    src={image}
+                    className="object-contain h-full"
+                    alt="The image displays the OpenSign logo with a stylized blue square with an open corner, accompanied by the tagline Seal the Deal, Openly."
+                  />
+                )}
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-x-2">
                <div>
@@ -1045,7 +1174,11 @@ function Login() {
                        </button>
                        <NavLink
                          className="rounded-sm cursor-pointer bg-white border-[1px] border-[#15b4e9] text-[#15b4e9] w-full py-3 shadow uppercase"
-                          to="/signup"
+                          to={
+                            location.search
+                              ? "/signup" + location.search
+                              : "/signup"
+                          }
                          style={width < 768 ? { textAlign: "center" } : {}}
                        >
                          Create Account
@@ -1054,25 +1187,12 @@ function Login() {
                    </form>
                    <br />
                    {(appInfo.fbAppId || appInfo.googleClietId) && (
-                      <div
-                        style={{
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "center"
-                        }}
-                        className="text-sm"
-                      >
-                        <hr
-                          className={"border-[1px] border-gray-300 w-full"}
-                          style={{ color: "grey" }}
-                        />
-                        <span style={{ color: "grey" }} className="px-2 ">
+                      <div className="text-sm flex justify-center items-center">
+                        <hr className="border-[1px] border-gray-300 w-full" />
+                        <span className="px-2 text-gray-500 cursor-default">
                          OR
                        </span>
-                        <hr
-                          className={"border-[1px] border-gray-300 w-full"}
-                          style={{ color: "grey" }}
-                        />
+                        <hr className="border-[1px] border-gray-300 w-full" />
                      </div>
                    )}
                    <br />
@@ -5,6 +5,7 @@ import "../styles/signature.css";
 import { toDataUrl } from "../constant/Utils";
 import Parse from "parse";
 import { appInfo } from "../constant/appinfo";
+import { SaveFileSize } from "../constant/saveFileSize";
 const ManageSign = () => {
  const appName = appInfo.appname;
  const [penColor, setPenColor] = useState("blue");
@@ -158,7 +159,11 @@ const ManageSign = () => {
    try {
      const parseFile = new Parse.File(file.name, file);
      const response = await parseFile.save();
-      return response?.url();
+      if (response?.url()) {
+        const tenantId = localStorage.getItem("TenantId");
+        SaveFileSize(file.size, response.url(), tenantId);
+        return response?.url();
+      }
    } catch (err) {
      console.log("sign upload err", err);
      setIsLoader(false);
@@ -7,6 +7,10 @@ import { useNavigate } from "react-router-dom";
 import Title from "../components/Title";
 import Parse from "parse";
 import ModalUi from "../primitives/ModalUi";
+import TourContentWithBtn from "../primitives/TourContentWithBtn";
+import Tour from "reactour";
+import axios from "axios";
+
 const DriveBody = React.lazy(
  () => import("../components/opensigndrive/DriveBody")
 );
@@ -42,6 +46,8 @@ function Opensigndrive() {
  const [error, setError] = useState();
  const [folderLoader, setIsFolderLoader] = useState(false);
  const [isShowSort, setIsShowSort] = useState(false);
+  const [isTour, setIsTour] = useState(false);
+  const [tourStatusArr, setTourStatusArr] = useState([]);
  const [isLoading, setIsLoading] = useState({
    isLoad: true,
    message: "This might take some time"
@@ -56,6 +62,9 @@ function Opensigndrive() {
  const [loading, setLoading] = useState(false);
  const sortOrder = ["Ascending", "Descending"];
  const sortingValue = ["Name", "Date"];
+  const [isDontShow, setIsDontShow] = useState(false);
+  const [tourData, setTourData] = useState();
+  const [showTourFirstTIme, setShowTourFirstTime] = useState(true);
  const orderName = {
    Ascending: "Ascending",
    Descending: "Descending",
@@ -73,12 +82,62 @@ function Opensigndrive() {

  useEffect(() => {
    getPdfDocumentList();
+
    // eslint-disable-next-line
  }, [docId]);

+  const tourConfigs = [
+    {
+      selector: '[data-tut="reactourFirst"]',
+      content: () => (
+        <TourContentWithBtn
+          message={`Click on the breadcrumb links to easily navigate through the folder hierarchy and view the documents within each folder.`}
+          isChecked={handleDontShow}
+        />
+      ),
+      position: "top",
+      style: { fontSize: "13px" }
+    },
+    {
+      selector: '[data-tut="reactourSecond"]',
+      content: () => (
+        <TourContentWithBtn
+          message={`Click the add button to create a new folder or document.`}
+          isChecked={handleDontShow}
+        />
+      ),
+      position: "top",
+      style: { fontSize: "13px" }
+    },
+    {
+      selector: '[data-tut="reactourThird"]',
+      content: () => (
+        <TourContentWithBtn
+          message={`Sort your documents by Date or Name using this menu.`}
+          isChecked={handleDontShow}
+        />
+      ),
+      position: "top",
+      style: { fontSize: "13px" }
+    },
+    {
+      selector: '[data-tut="reactourForth"]',
+      content: () => (
+        <TourContentWithBtn
+          message={`Click on this menu to display the documents in list view.`}
+          isChecked={handleDontShow}
+        />
+      ),
+      position: "top",
+      style: { fontSize: "13px" }
+    }
+  ];
  //function for get all pdf document list
  const getPdfDocumentList = async (disbaleLoading) => {
    setLoading(true);
+    if (showTourFirstTIme) {
+      checkTourStatus();
+    }
    if (!disbaleLoading) {
      setIsLoading({ isLoad: true, message: "This might take some time" });
    }
@@ -87,8 +146,61 @@ function Opensigndrive() {
      if (driveDetails && driveDetails === "Error: Something went wrong!") {
        setHandleError("Error: Something went wrong!");
      } else if (driveDetails && driveDetails.length > 0) {
+        const addMoreTour = [
+          {
+            selector: '[data-tut="reactourFifth"]',
+            content: () => (
+              <TourContentWithBtn
+                message={`The document list is displayed according to the selected sorting option. Icons next to each document indicate its current status.`}
+                isChecked={handleDontShow}
+              />
+            ),
+            position: "bottom",
+            style: { fontSize: "13px" }
+          },
+          {
+            selector: '[data-tut="reactourSixth"]',
+            content: () => (
+              <TourContentWithBtn
+                message={`Right-click on a document to see options such as Download, Rename, Move, and Delete. Click on the document to open it.`}
+                isChecked={handleDontShow}
+              />
+            ),
+            position: "bottom",
+            style: { fontSize: "13px" }
+          },
+          {
+            selector: '[data-tut="reactourSeventh"]',
+            content: () => (
+              <TourContentWithBtn
+                message={`Right-click on any folder to see options. Choose ‘Rename’ to change the folder’s name or click on the folder to navigate through its contents.`}
+                isChecked={handleDontShow}
+              />
+            ),
+            position: "bottom",
+            style: { fontSize: "13px" }
+          }
+        ];
+        let newTour = [...tourConfigs, ...addMoreTour];
+        const isFolderExist = driveDetails.some(
+          (data) => data.Type === "Folder"
+        );
+        if (!isFolderExist) {
+          newTour = newTour.filter(
+            (data) => data.selector !== '[data-tut="reactourSeventh"]'
+          );
+        }
+        const isDocumentExist = driveDetails.some((data) => data.URL);
+        if (!isDocumentExist) {
+          newTour = newTour.filter(
+            (data) => data.selector !== '[data-tut="reactourSixth"]'
+          );
+        }
+        setTourData(newTour);
        setSkip((prevSkip) => prevSkip + limit);
        sortingData(null, null, driveDetails, true);
+      } else {
+        setTourData(tourConfigs);
      }
      if (!docId) {
        setFolderName([{ name: "OpenSign™ Drive", objectId: "" }]);
@@ -141,17 +253,23 @@ function Opensigndrive() {
  }, [loading, sortingOrder, selectedSort]); // Add/remove scroll event listener when loading changes

  //function for handle folder name path
-  const handleRoute = (index) => {
-    setPdfData([]);
+  const handleRoute = (index, folderData) => {
    setSkip(0);
+    // after onclick on route filter route from that index
    const updateFolderName = folderName.filter((x, i) => {
      if (i <= index) {
        return x;
      }
    });
    setFolderName(updateFolderName);
+    //get route details after onclick path of folder name
+    const getCurrentId = folderData[index];
    const getLastId = updateFolderName[updateFolderName.length - 1];
-    setDocId(getLastId.objectId);
+    //below condition is used to check if user click on same route which already open then don't change any thing
+    if (docId !== getCurrentId.objectId) {
+      setPdfData([]);
+      setDocId(getLastId.objectId);
+    }
  };

  //function for add new folder name
@@ -203,6 +321,7 @@ function Opensigndrive() {
            const result = JSON.parse(JSON.stringify(res));

            setPdfData((prev) => [...prev, result]);
+            sortingData(null, null, [result], true);
            setNewFolderName();
            setIsFolderLoader(false);
            setIsFolder(false);
@@ -223,9 +342,13 @@ function Opensigndrive() {
  const sortedBy = (appInfo, type, order) => {
    if (type === orderName.Name) {
      if (order === orderName.Ascending) {
-        return appInfo.sort((a, b) => (a.Name > b.Name ? 1 : -1));
+        return appInfo.sort((a, b) =>
+          a.Name.toLowerCase() < b.Name.toLowerCase() ? -1 : 1
+        );
      } else if (order === orderName.Descending) {
-        return appInfo.sort((a, b) => (a.Name > b.Name ? -1 : 1));
+        return appInfo.sort((a, b) =>
+          a.Name.toLowerCase() < b.Name.toLowerCase() ? 1 : -1
+        );
      }
    } else if (type === orderName.Date) {
      if (order === orderName.Ascending) {
@@ -325,7 +448,7 @@ function Opensigndrive() {
      return (
        <React.Fragment key={id}>
          <span
-            onClick={() => handleRoute(id)}
+            onClick={() => handleRoute(id, folderData)}
            style={{
              color: "#a64b4e",
              fontWeight: "400",
@@ -353,9 +476,77 @@ function Opensigndrive() {
    setNewFolderName("");
    setError("");
  };
+
+  const handleDontShow = (isChecked) => {
+    setIsDontShow(isChecked);
+  };
+
+  const closeTour = async () => {
+    setIsTour(false);
+    setShowTourFirstTime(false);
+    if (isDontShow) {
+      const serverUrl = localStorage.getItem("baseUrl");
+      const appId = localStorage.getItem("parseAppId");
+      const extUserClass = localStorage.getItem("extended_class");
+      const json = JSON.parse(localStorage.getItem("Extand_Class"));
+      const extUserId = json && json.length > 0 && json[0].objectId;
+      let updatedTourStatus = [];
+      if (tourStatusArr.length > 0) {
+        updatedTourStatus = [...tourStatusArr];
+        const driveTourIndex = tourStatusArr.findIndex(
+          (obj) => obj["driveTour"] === false || obj["driveTour"] === true
+        );
+        if (driveTourIndex !== -1) {
+          updatedTourStatus[driveTourIndex] = { driveTour: true };
+        } else {
+          updatedTourStatus.push({ driveTour: true });
+        }
+      } else {
+        updatedTourStatus = [{ driveTour: true }];
+      }
+      await axios.put(
+        serverUrl + "classes/" + extUserClass + "/" + extUserId,
+        {
+          TourStatus: updatedTourStatus
+        },
+        {
+          headers: {
+            "X-Parse-Application-Id": appId
+          }
+        }
+      );
+    }
+  };
+  //function to use check tour status of open sign drive
+  async function checkTourStatus() {
+    const currentUser = Parse.User.current();
+    const cloudRes = await Parse.Cloud.run("getUserDetails", {
+      email: currentUser.get("email")
+    });
+    const res = { data: cloudRes.toJSON() };
+    if (res.data && res.data.TourStatus && res.data.TourStatus.length > 0) {
+      const tourStatus = res.data.TourStatus;
+      setTourStatusArr(tourStatus);
+      const filteredtourStatus = tourStatus.filter((obj) => obj["driveTour"]);
+      if (filteredtourStatus.length > 0) {
+        const driveTour = filteredtourStatus[0]["driveTour"];
+        // console.log("loginTour", loginTour);
+        if (driveTour) {
+          setIsTour(false);
+        } else {
+          setIsTour(true);
+        }
+      } else {
+        setIsTour(true);
+      }
+    } else {
+      setIsTour(true);
+    }
+  }
  return (
    <div style={{ backgroundColor: "white" }} className="folderComponent">
      <Title title={"OpenSign™ Drive"} drive={true} />
+
      <div>
        <ModalUi
          headerColor={"#dc3545"}
@@ -518,7 +709,19 @@ function Opensigndrive() {
        ) : (
          <>
            <div className="folderContainer">
+              {tourData && (
+                <Tour
+                  onRequestClose={closeTour}
+                  steps={tourData}
+                  isOpen={isTour}
+                  closeWithMask={false}
+                  scrollOffset={-100}
+                  rounded={5}
+                />
+              )}
+
              <div
+                data-tut="reactourFirst"
                onMouseEnter={(e) => handleMouseEnter(e)}
                ref={scrollRef}
                style={{
@@ -536,7 +739,7 @@ function Opensigndrive() {
                  }
                  onClick={() => setIsNewFol(!isNewFol)}
                >
-                  <div className="sort">
+                  <div className="sort" data-tut="reactourSecond">
                    <i
                      className="fa fa-plus-square"
                      aria-hidden="true"
@@ -597,7 +800,11 @@ function Opensigndrive() {
                  className={isShowSort ? "dropdown show" : "dropdown"}
                  onClick={() => setIsShowSort(!isShowSort)}
                >
-                  <div className=" sort  " data-toggle="dropdown">
+                  <div
+                    data-tut="reactourThird"
+                    className=" sort  "
+                    data-toggle="dropdown"
+                  >
                    <i
                      className="fa fa-sort-amount-asc"
                      aria-hidden="true"
@@ -687,7 +894,11 @@ function Opensigndrive() {
                      ></i>
                    </div>
                  ) : (
-                    <div className="sort" onClick={() => setIsList(!isList)}>
+                    <div
+                      data-tut="reactourForth"
+                      className="sort"
+                      onClick={() => setIsList(!isList)}
+                    >
                      <i
                        className="fa fa-list"
                        aria-hidden="true"
@@ -712,23 +923,28 @@ function Opensigndrive() {
                <span style={{ fontWeight: "bold" }}>No Data Found!</span>
              </div>
            ) : (
-              <React.Suspense fallback={<Loader />}>
-                <DriveBody
-                  pdfData={pdfData}
-                  setFolderName={setFolderName}
-                  setIsLoading={setIsLoading}
-                  setDocId={setDocId}
-                  getPdfDocumentList={getPdfDocumentList}
-                  isDocId={docId}
-                  setPdfData={setPdfData}
-                  isList={isList}
-                  setIsAlert={setIsAlert}
-                  setSkip={setSkip}
-                />
-                {loading && (
-                  <div style={{ textAlign: "center" }}>Loading...</div>
-                )}
-              </React.Suspense>
+              <div data-tut="reactourFifth">
+                <React.Suspense fallback={<Loader />}>
+                  <DriveBody
+                    dataTutSixth="reactourSixth"
+                    dataTutSeventh="reactourSeventh"
+                    pdfData={pdfData}
+                    setFolderName={setFolderName}
+                    setIsLoading={setIsLoading}
+                    setDocId={setDocId}
+                    getPdfDocumentList={getPdfDocumentList}
+                    isDocId={docId}
+                    setPdfData={setPdfData}
+                    isList={isList}
+                    setIsAlert={setIsAlert}
+                    setSkip={setSkip}
+                    sortingData={sortingData}
+                  />
+                  {loading && (
+                    <div style={{ textAlign: "center" }}>Loading...</div>
+                  )}
+                </React.Suspense>
+              </div>
            )}
          </>
        )}
@@ -41,12 +41,8 @@ const PgSignUp = () => {
        const url = window.location.href;
        let paramString = url.split("?")[1];
        let queryString = new URLSearchParams(paramString);
-        // console.log("url ", queryString);
-
        let obj = { ...formData };
        for (let pair of queryString.entries()) {
-          // console.log("Key is: " + pair[0]);
-          // console.log("Value is: " + pair[1]);
          obj = { ...obj, [pair[0]]: pair[1] };
        }
        const zohoRes = await axios.post(
@@ -61,34 +57,27 @@ const PgSignUp = () => {
            }
          }
        );
-        // console.log("zohoRes ", zohoRes);
        const userSettings = JSON.parse(localStorage.getItem("userSettings"));
-        const extClass = userSettings[0].extended_class;
-        // console.log("extClass ", extClass);
-        const params = { email: userDetails.email };
-        const res = await Parse.Cloud.run("getUserDetails", params);
-        // console.log("res", res);
-        if (res) {
-          const updateQuery = new Parse.Object(extClass);
-          updateQuery.id = res.id;
-          updateQuery.set(
-            "Next_billing_date",
-            new Date(zohoRes.data.result.nextBillingDate)
-          );
-          updateQuery.set("Plan", zohoRes.data.result.plan);
-          updateQuery.set("Customer_id", zohoRes.data.result.customer_id);
-          updateQuery.set(
-            "Subscription_id",
-            zohoRes.data.result.subscription_id
-          );
-          const updateRes = await updateQuery.save();
-          if (updateRes) {
+        const params = { subscription: zohoRes.data.result.subscription };
+        const baseurl = `${parseBaseUrl}functions/savesubscription`;
+        try {
+          const res = await axios.post(baseurl, params, {
+            headers: {
+              "Content-Type": "application/json",
+              "X-Parse-Application-Id": parseAppId,
+              sessiontoken: localStorage.getItem("accesstoken")
+            }
+          });
+          if (res) {
            localStorage.removeItem("userDetails");
            navigate(
              "/" + userSettings[0].pageType + "/" + userSettings[0].pageId
            );
            setIsLoader(false);
          }
+        } catch (err) {
+          console.log("err ", err.message);
+          setIsLoader(false);
        }
      } catch (err) {
        console.log("err ", err);
@@ -108,12 +97,8 @@ const PgSignUp = () => {
        const url = window.location.href;
        let paramString = url.split("?")[1];
        let queryString = new URLSearchParams(paramString);
-        // console.log("url ", queryString);
-
        let obj = { ...formData };
        for (let pair of queryString.entries()) {
-          // console.log("Key is: " + pair[0]);
-          // console.log("Value is: " + pair[1]);
          obj = { ...obj, [pair[0]]: pair[1] };
        }
        saveUser(obj);
@@ -157,19 +142,8 @@ const PgSignUp = () => {
            email: zohoRes.data.result.email,
            phone: zohoRes.data.result.phone,
            role: obj.role
-            // "pincode": "",
-            // "address": "",
-            // "country": "",
-            // "state": "",
-            // "city": ""
          },
-
-          planDetails: {
-            plan: zohoRes.data.result.plan || {},
-            nextBillingDate: zohoRes.data.result.nextBillingDate || "",
-            customer_id: zohoRes.data.result.customer_id || "",
-            subscription_id: zohoRes.data.result.subscription_id || ""
-          }
+          subscription: zohoRes.data.result.subscription
        };
        const usersignup = await Parse.Cloud.run("usersignup", params);
        // console.log("usersignup ", usersignup);
@@ -353,7 +327,7 @@ const PgSignUp = () => {
                                    tenentName: x.TenantId.TenantName || ""
                                  };
                                  localStorage.setItem(
-                                    "TenetId",
+                                    "TenantId",
                                    x.TenantId.objectId
                                  );
                                  tenentInfo.push(obj);
@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from "react";
-import { useNavigate } from "react-router";
-import { NavLink } from "react-router-dom";
+import { NavLink, useNavigate } from "react-router-dom";
 import checkmark from "../assets/images/checkmark.png";
-import plansArr from "../json/plansArr.json";
+import plansArr from "../json/plansArr";
 import Title from "../components/Title";
+import Parse from "parse";
 const listItemStyle = {
  paddingLeft: "20px", // Add padding to create space for the image
  backgroundImage: `url(${checkmark})`, // Set your image as the list style image
@@ -19,15 +19,22 @@ const PlanSubscriptions = () => {

  const userDetails = JSON.parse(localStorage.getItem("userDetails"));
  const name =
-    userDetails && userDetails.name ? "first_name=" + userDetails.name : "";
+    userDetails && userDetails.name
+      ? "first_name=" + encodeURIComponent(userDetails.name)
+      : "";
  const email =
-    userDetails && userDetails.email ? "&email=" + userDetails.email : "";
+    userDetails && userDetails.email
+      ? "&email=" + encodeURIComponent(userDetails.email)
+      : "";
  const company =
    userDetails && userDetails.company
-      ? "&company_name=" + userDetails.company
+      ? "&company_name=" + encodeURIComponent(userDetails.company)
      : "";
  const phone =
-    userDetails && userDetails.phone ? "&mobile=" + userDetails.phone : "";
+    userDetails && userDetails.phone
+      ? "&mobile=" + encodeURIComponent(userDetails.phone)
+      : "";
+
  const details =
    "?shipping_country_code=US&billing_country_code=US&billing_state_code=CA&" +
    name +
@@ -35,15 +42,35 @@ const PlanSubscriptions = () => {
    company +
    phone;
  useEffect(() => {
-    if (localStorage.getItem("accesstoken")) {
-      setIsLoader(false);
-      setYearlyVisible(false);
-    } else {
-      navigate("/", { replace: true });
-    }
+    // if (localStorage.getItem("accesstoken")) {
+    setIsLoader(false);
+    // } else {
+    //   navigate("/", { replace: true });
+    // }
    // eslint-disable-next-line
  }, []);

+  const handleFreePlan = async () => {
+    setIsLoader(true);
+    try {
+      const params = { userId: Parse.User.current().id };
+      const res = await Parse.Cloud.run("freesubscription", params);
+      if (res.status === "success" && res.result === "already subscribed!") {
+        setIsLoader(false);
+        alert("You have already subscribed to plan!");
+      } else if (res.status === "success") {
+        setIsLoader(false);
+        navigate("/");
+      } else if (res.status === "error") {
+        setIsLoader(false);
+        alert(res.result);
+      }
+    } catch (err) {
+      setIsLoader(false);
+      console.log("err in free subscribe", err.message);
+      alert("Somenthing went wrong, please try again later!");
+    }
+  };
  return (
    <>
      <Title title={"Subscriptions"} />
@@ -69,23 +96,40 @@ const PlanSubscriptions = () => {
          style={{
            backgroundColor: "white",
            overflowY: "auto",
-            maxHeight: "100%",
-            "--theme-color": "#7952b3",
-            "--plan-width": 30
+            maxHeight: "100%"
          }}
        >
-          <div
-            id="monthlyPlans"
-            className={`${yearlyVisible ? "none" : "block my-2"}`}
-          >
-            <div className="flex justify-center w-full my-2">
-              <ul className=" flex flex-col md:flex-row h-full bg-white justify-center border-collapse border-[1px] border-gray-300">
+          <div className="block my-2">
+            <div className="flex flex-col justify-center items-center w-full">
+              <div className="mb-6 mt-2 flex flex-row border-[1px] p-2 border-gray-300 rounded text-sm">
+                <span
+                  onClick={() => setYearlyVisible(false)}
+                  className={`${
+                    !yearlyVisible
+                      ? "bg-[#002862] text-white"
+                      : "bg-white text-black"
+                  } px-4 py-1 rounded cursor-pointer`}
+                >
+                  Monthly
+                </span>
+                <span
+                  onClick={() => setYearlyVisible(true)}
+                  className={`${
+                    yearlyVisible
+                      ? "bg-[#002862] text-white"
+                      : "bg-white text-black"
+                  } px-4 py-1 rounded cursor-pointer`}
+                >
+                  Yearly (10% off)
+                </span>
+              </div>
+              <ul className="flex flex-col md:flex-row h-full bg-white justify-center">
                {plansArr.map((item) => (
                  <li
-                    className="flex flex-col md:my-0 text-center border-[1px] border-gray-300 w-[260px]"
+                    className="flex flex-col text-center border-collapse border-[1px] border-gray-300 max-w-[250px]"
                    key={item.planName}
                  >
-                    <div className="p-2 flex flex-col justify-center items-center">
+                    <div className="p-2 flex flex-col justify-center items-center max-h-[310px]">
                      <h3 className="text-[#002862] uppercase">
                        {item.planName}
                      </h3>
@@ -96,20 +140,20 @@ const PlanSubscriptions = () => {
                          alt="freeimg"
                        />
                      </div>
-                      <div className="">
+                      <div>
                        <span className="text-3xl">
                          {item.currency && <small>{item.currency}</small>}
-                          {item.price}
+                          {yearlyVisible
+                            ? item?.yearlyPrice
+                            : item.monthlyPrice}
                        </span>
-                        <div
-                          className={`${
-                            item.subtitle.length <= 32
-                              ? "w-[150px] text-center"
-                              : ""
-                          } text-sm text-center my-2`}
-                        >
-                          <p
+                        <p className="font-semibold pt-2 text-sm">
+                          {yearlyVisible ? "Billed Yearly" : "Billed Monthly"}
+                        </p>
+                        <div className="max-w-[250px] h-[40px] text-center text-sm my-2">
+                          <div
                            style={{
+                              textAlign: "center",
                              backgroundColor: item.subtitlecolor
                                ? item.subtitlecolor
                                : "white"
@@ -124,23 +168,33 @@ const PlanSubscriptions = () => {
                            ) : (
                              <span>{item.subtitle}</span>
                            )}
-                          </p>
+                          </div>
                        </div>
                      </div>
-
-                      <NavLink
-                        to={
-                          item.btnText === "Subscribe"
-                            ? item.url + details
-                            : item.url
-                        }
-                        className="bg-[#002862] w-full text-white py-2 rounded uppercase hover:no-underline hover:text-white"
-                        target={item.target}
-                      >
-                        {item.btnText}
-                      </NavLink>
+                      {item.url ? (
+                        <NavLink
+                          to={
+                            item.btnText === "Subscribe"
+                              ? yearlyVisible
+                                ? item.yearlyUrl + details
+                                : item.url + details
+                              : item.url
+                          }
+                          className="bg-[#002862] w-full text-white py-2 rounded uppercase hover:no-underline hover:text-white cursor-pointer"
+                          target={item.target}
+                        >
+                          {item.btnText}
+                        </NavLink>
+                      ) : (
+                        <button
+                          className="bg-[#002862] w-full text-white py-2 rounded uppercase hover:text-white cursor-pointer"
+                          onClick={() => handleFreePlan()}
+                        >
+                          {item.btnText}
+                        </button>
+                      )}
                    </div>
-                    <hr className="w-full bg-gray-300 p-[.5px]" />
+                    <hr className="w-full bg-gray-300 h-[0.5px]" />
                    <ul className="mx-1 p-3 text-left break-words text-sm list-none">
                      {item.benefits.map((subitem, index) => (
                        <li style={listItemStyle} key={index} className="m-1">
@@ -154,6 +208,23 @@ const PlanSubscriptions = () => {
                ))}
              </ul>
            </div>
+            <div className="text-sm flex justify-center items-center">
+              <hr className="border-[1px] border-gray-300 w-[20%]" />
+              <span className="px-2 text-gray-500 cursor-default">or</span>
+              <hr className="border-[1px] border-gray-300 w-[20%]" />
+            </div>
+            <div className="flex flex-col justify-center w-full items-center">
+              <h3 className="text-[#002862] mt-1 mb-2">
+                Host it yourself for free
+              </h3>
+              <NavLink
+                to={"https://github.com/OpenSignLabs/OpenSign"}
+                className="bg-[#002862] w-[200px] text-center text-white py-2 rounded uppercase hover:no-underline hover:text-white cursor-pointer"
+                target={"_blank"}
+              >
+                Visit Github
+              </NavLink>
+            </div>
          </div>
        </div>
      )}
@@ -6,6 +6,7 @@ import reportJson from "../json/ReportJson";
 import { useParams } from "react-router-dom";
 import Title from "../components/Title";
 import PageNotFound from "./PageNotFound";
+import TourContentWithBtn from "../primitives/TourContentWithBtn";

 const Report = () => {
  const { id } = useParams();
@@ -18,6 +19,8 @@ const Report = () => {
  const [isNextRecord, setIsNextRecord] = useState(false);
  const [isMoreDocs, setIsMoreDocs] = useState(true);
  const [form, setForm] = useState("");
+  const [tourData, setTourData] = useState([]);
+  const [isDontShow, setIsDontShow] = useState(false);
  const abortController = new AbortController();
  const docPerPage = 10;

@@ -46,6 +49,9 @@ const Report = () => {
    // eslint-disable-next-line
  }, [isNextRecord]);

+  const handleDontShow = (isChecked) => {
+    setIsDontShow(isChecked);
+  };
  const getReportData = async (skipUserRecord = 0, limit = 200) => {
    // setIsLoader(true);
    const json = reportJson(id);
@@ -54,7 +60,7 @@ const Report = () => {
      setHeading(json.heading);
      setReportName(json.reportName);
      setForm(json.form);
-      setReportHelp(json?.helpMsg)
+      setReportHelp(json?.helpMsg);
      const currentUser = Parse.User.current().id;

      const headers = {
@@ -69,6 +75,42 @@ const Report = () => {
          headers: headers,
          signal: abortController.signal // is used to cancel fetch query
        });
+        if (id === "6TeaPr321t") {
+          const tourConfig = [
+            {
+              selector: "[data-tut=reactourFirst]",
+              content: () => (
+                <TourContentWithBtn
+                  message={
+                    "Click the 'Add' button to create a new template. Templates are reusable documents designed to quickly generate new documents with the same structure and varying signers. For example, an HR template for onboarding could have predefined roles like ‘HR Manager’ and ‘New Employee’. Each time you use the template, you can assign the ‘New Employee’ role to different incoming staff members, while the ‘HR Manager’ role remains constant, facilitating a seamless onboarding process for each recruit. "
+                  }
+                  isChecked={handleDontShow}
+                />
+              ),
+              position: "top",
+              style: { fontSize: "13px" }
+            }
+          ];
+
+          if (res.data.result && res.data.result?.length > 0) {
+            json.actions.map((data) => {
+              const newConfig = {
+                selector: `[data-tut="${data?.selector}"]`,
+                content: () => (
+                  <TourContentWithBtn
+                    message={data?.message}
+                    isChecked={handleDontShow}
+                  />
+                ),
+                position: "top",
+                style: { fontSize: "13px" }
+              };
+              tourConfig.push(newConfig);
+            });
+          }
+
+          setTourData(tourConfig);
+        }
        if (id === "4Hhwbp482K") {
          const listData = res.data?.result.filter((x) => x.Signers.length > 0);
          let arr = [];
@@ -106,12 +148,14 @@ const Report = () => {
          } else {
            setIsMoreDocs(false);
          }
-          setIsNextRecord(false);
-          setList((prevRecord) =>
-            prevRecord.length > 0
-              ? [...prevRecord, ...res.data.result]
-              : res.data.result
-          );
+          if (!res.data.result.error) {
+            setIsNextRecord(false);
+            setList((prevRecord) =>
+              prevRecord.length > 0
+                ? [...prevRecord, ...res.data.result]
+                : res.data.result
+            );
+          }
        }
        setIsLoader(false);
      } catch (err) {
@@ -159,6 +203,8 @@ const Report = () => {
              docPerPage={docPerPage}
              form={form}
              report_help={reporthelp}
+              tourData={tourData}
+              isDontShow={isDontShow}
            />
          ) : (
            <PageNotFound prefix={"Report"} />
@@ -2,17 +2,20 @@ import React, { useState, useEffect } from "react";
 import Parse from "parse";
 import axios from "axios";
 import Title from "../components/Title";
-import { useNavigate, NavLink } from "react-router-dom";
+import { useNavigate, NavLink, useLocation } from "react-router-dom";
 import login_img from "../assets/images/login_img.svg";
 import { useWindowSize } from "../hook/useWindowSize";
 import Alert from "../primitives/Alert";
 import { appInfo } from "../constant/appinfo";
 import { useDispatch } from "react-redux";
 import { fetchAppInfo } from "../redux/reducers/infoReducer";
-import  { showTenant } from "../redux/reducers/ShowTenant";
+import { showTenant } from "../redux/reducers/ShowTenant";
+import { isEnableSubscription } from "../constant/const";
+import { getAppLogo } from "../constant/Utils";
 const Signup = () => {
  const { width } = useWindowSize();
  const navigate = useNavigate();
+  const location = useLocation();
  const dispatch = useDispatch();
  const [name, setName] = useState("");
  const [phone, setPhone] = useState("");
@@ -20,6 +23,7 @@ const Signup = () => {
  const [email, setEmail] = useState("");
  const [company, setCompany] = useState("");
  const [jobTitle, setJobTitle] = useState("");
+  const [image, setImage] = useState();
  const [state, setState] = useState({
    loading: false,
    alertType: "success",
@@ -31,7 +35,6 @@ const Signup = () => {
  const [specialCharValid, setSpecialCharValid] = useState(false);

  const togglePasswordVisibility = () => setShowPassword(!showPassword);
-  const image = appInfo.applogo;

  const clearStorage = async () => {
    if (Parse.User.current()) {
@@ -67,6 +70,19 @@ const Signup = () => {
    localStorage.setItem("baseUrl", baseUrl);
    localStorage.setItem("parseAppId", appid);
  };
+
+  const handleFreePlan = async (id) => {
+    try {
+      const params = { userId: id };
+      const res = await Parse.Cloud.run("freesubscription", params);
+      if (res.status === "error") {
+        alert(res.result);
+      }
+    } catch (err) {
+      console.log("err in free subscribe", err.message);
+      alert("Somenthing went wrong, please try again later!");
+    }
+  };
  const handleSubmit = (event) => {
    event.preventDefault();
    if (lengthValid && caseDigitValid && specialCharValid) {
@@ -110,7 +126,13 @@ const Signup = () => {
                    params
                  );
                  if (usersignup) {
-                    handleNavigation(r.getSessionToken());
+                    const param = new URLSearchParams(location.search);
+                    const isFreeplan =
+                      param?.get("subscription") === "freeplan";
+                    if (isFreeplan) {
+                      await handleFreePlan(r.id);
+                    }
+                    handleNavigation(r.getSessionToken(), isFreeplan);
                  }
                } catch (err) {
                  alert(err.message);
@@ -155,7 +177,7 @@ const Signup = () => {
    }
  };

-  const handleNavigation = async (sessionToken) => {
+  const handleNavigation = async (sessionToken, isFreeplan = false) => {
    const baseUrl = localStorage.getItem("baseUrl");
    const parseAppId = localStorage.getItem("parseAppId");
    const res = await axios.get(baseUrl + "users/me", {
@@ -259,9 +281,7 @@ const Signup = () => {
                              });
                              if (tenentInfo.length) {
                                dispatch(
-                                  showTenant(
-                                    tenentInfo[0].tenentName || ""
-                                  )
+                                  showTenant(tenentInfo[0].tenentName || "")
                                );
                                localStorage.setItem(
                                  "TenantName",
@@ -297,7 +317,7 @@ const Signup = () => {
                                    tenentName: x.TenantId.TenantName || ""
                                  };
                                  localStorage.setItem(
-                                    "TenetId",
+                                    "TenantId",
                                    x.TenantId.objectId
                                  );
                                  tenentInfo.push(obj);
@@ -325,8 +345,14 @@ const Signup = () => {
                                element.pageType
                              );
                              setState({ loading: false });
-                              if (process.env.REACT_APP_ENABLE_SUBSCRIPTION) {
-                                navigate(`/subscription`, { replace: true });
+                              if (isEnableSubscription) {
+                                if (isFreeplan) {
+                                  navigate(
+                                    `/${element.pageType}/${element.pageId}`
+                                  );
+                                } else {
+                                  navigate(`/subscription`, { replace: true });
+                                }
                              } else {
                                alert("Registered user successfully");
                                navigate(
@@ -343,8 +369,14 @@ const Signup = () => {
                            );
                            localStorage.setItem("pageType", element.pageType);
                            setState({ loading: false });
-                            if (process.env.REACT_APP_ENABLE_SUBSCRIPTION) {
-                              navigate(`/subscription`, { replace: true });
+                            if (isEnableSubscription) {
+                              if (isFreeplan) {
+                                navigate(
+                                  `/${element.pageType}/${element.pageId}`
+                                );
+                              } else {
+                                navigate(`/subscription`, { replace: true });
+                              }
                            } else {
                              navigate(
                                `/${element.pageType}/${element.pageId}`
@@ -438,9 +470,23 @@ const Signup = () => {
  };
  useEffect(() => {
    dispatch(fetchAppInfo());
+    saveLogo();
    // eslint-disable-next-line
  }, []);

+  const saveLogo = async () => {
+    if (isEnableSubscription) {
+      const logo = await getAppLogo();
+      if (logo) {
+        setImage(logo);
+      } else {
+        setImage(appInfo?.applogo || undefined);
+      }
+    } else {
+      setImage(appInfo?.applogo || undefined);
+    }
+  };
+
  const handlePasswordChange = (e) => {
    const newPassword = e.target.value;
    setPassword(newPassword);
@@ -486,8 +532,10 @@ const Signup = () => {
      {appInfo && appInfo.applogo ? (
        <div>
          <div className="md:m-10 lg:m-16 md:p-4 lg:p-10 p-5 bg-[#ffffff] md:border-[1px] md:border-gray-400 ">
-            <div className="w-[250px] h-[66px] inline-block">
-              <img src={image} width="100%" alt="" />
+            <div className="w-[250px] h-[66px] inline-block overflow-hidden">
+              {image && (
+                <img src={image} className="object-contain h-full" alt="logo" />
+              )}
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-x-2">
              <div className="">
@@ -626,7 +674,7 @@ const Signup = () => {
                    </button>
                    <NavLink
                      className="rounded-sm cursor-pointer bg-white border-[1px] border-[#15b4e9] text-[#15b4e9] w-full py-3 shadow uppercase"
-                      to="/"
+                      to={location.search ? "/" + location.search : "/"}
                      style={width < 768 ? { textAlign: "center" } : {}}
                    >
                      Login
@@ -661,4 +709,4 @@ const Signup = () => {
  );
 };

-export default Signup
+export default Signup;
@@ -1,7 +1,8 @@
 import React, { useState, useRef, useEffect } from "react";
 import { PDFDocument } from "pdf-lib";
 import "../styles/signature.css";
-import { themeColor } from "../constant/const";
+import Parse from "parse";
+import { isEnableSubscription, themeColor } from "../constant/const";
 import axios from "axios";
 import Loader from "../primitives/LoaderWithMsg";
 import loader from "../assets/images/loader2.gif";
@@ -26,7 +27,13 @@ import {
  contactBook,
  randomId,
  getDate,
-  textWidget
+  textWidget,
+  getTenantDetails,
+  checkIsSubscribed,
+  convertPdfArrayBuffer,
+  fetchImageBase64,
+  changeImageWH,
+  handleSendOTP
 } from "../constant/Utils";
 import { useParams } from "react-router-dom";
 import Tour from "reactour";
@@ -39,6 +46,7 @@ import TourContentWithBtn from "../primitives/TourContentWithBtn";
 import Title from "../components/Title";
 import ModalUi from "../primitives/ModalUi";
 import DropdownWidgetOption from "../components/pdf/DropdownWidgetOption";
+import VerifyEmail from "../components/pdf/VerifyEmail";

 //For signYourself inProgress section signer can add sign and complete doc sign.
 function SignYourSelf() {
@@ -67,7 +75,6 @@ function SignYourSelf() {
  const [pdfOriginalWidth, setPdfOriginalWidth] = useState();
  const [successEmail, setSuccessEmail] = useState(false);
  const imageRef = useRef(null);
-  const [documentStatus, setDocumentStatus] = useState({ isCompleted: false });
  const [myInitial, setMyInitial] = useState("");
  const [isInitial, setIsInitial] = useState(false);
  const [isUiLoading, setIsUiLoading] = useState(false);
@@ -87,6 +94,7 @@ function SignYourSelf() {
  const [containerWH, setContainerWH] = useState({});
  const [isPageCopy, setIsPageCopy] = useState(false);
  const [selectWidgetId, setSelectWidgetId] = useState("");
+  const [otpLoader, setOtpLoader] = useState(false);
  const [showAlreadySignDoc, setShowAlreadySignDoc] = useState({
    status: false
  });
@@ -99,6 +107,13 @@ function SignYourSelf() {
  });
  const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" });
  const [isDontShow, setIsDontShow] = useState(false);
+  const [extUserId, setExtUserId] = useState("");
+  const [isCompleted, setIsCompleted] = useState(false);
+  const [pdfArrayBuffer, setPdfArrayBuffer] = useState("");
+  const [activeMailAdapter, setActiveMailAdapter] = useState("");
+  const [isEmailVerified, setIsEmailVerified] = useState(true);
+  const [isVerifyModal, setIsVerifyModal] = useState(false);
+  const [otp, setOtp] = useState("");
  const divRef = useRef(null);
  const nodeRef = useRef(null);
  const [, drop] = useDrop({
@@ -186,13 +201,23 @@ function SignYourSelf() {

    if (documentData && documentData.length > 0) {
      setPdfDetails(documentData);
+      setExtUserId(documentData[0]?.ExtUserPtr?.objectId);
+      const url = documentData[0] && documentData[0]?.URL;
+      if (url) {
+        //convert document url in array buffer format to use embed widgets in pdf using pdf-lib
+        const arrayBuffer = await convertPdfArrayBuffer(url);
+        if (arrayBuffer === "Error") {
+          setHandleError("Error: Something went wrong!");
+        } else {
+          setPdfArrayBuffer(arrayBuffer);
+        }
+      } else {
+        setHandleError("Error: Something went wrong!");
+      }

      isCompleted = documentData[0].IsCompleted && documentData[0].IsCompleted;
      if (isCompleted) {
-        const docStatus = {
-          isCompleted: isCompleted
-        };
-        setDocumentStatus(docStatus);
+        setIsCompleted(true);
        setPdfUrl(documentData[0].SignedUrl);
        const alreadySign = {
          status: true,
@@ -255,10 +280,15 @@ function SignYourSelf() {
        setHandleError("Error: Something went wrong!");
        setIsLoading(loadObj);
      });
-
    const contractUsersRes = await contractUsers(jsonSender.email);
-
-    if (contractUsersRes[0] && contractUsersRes.length > 0) {
+    if (contractUsersRes === "Error: Something went wrong!") {
+      const loadObj = {
+        isLoad: false
+      };
+      setHandleError("Error: Something went wrong!");
+      setIsLoading(loadObj);
+    } else if (contractUsersRes[0] && contractUsersRes.length > 0) {
+      setActiveMailAdapter(contractUsersRes[0]?.active_mail_adapter);
      setContractName("_Users");
      setSignerUserId(contractUsersRes[0].objectId);
      const tourstatuss =
@@ -278,12 +308,6 @@ function SignYourSelf() {
        isLoad: false
      };
      setIsLoading(loadObj);
-    } else if (contractUsersRes === "Error: Something went wrong!") {
-      const loadObj = {
-        isLoad: false
-      };
-      setHandleError("Error: Something went wrong!");
-      setIsLoading(loadObj);
    } else if (contractUsersRes.length === 0) {
      const contractContactBook = await contactBook(jsonSender.objectId);
      if (contractContactBook && contractContactBook.length > 0) {
@@ -517,89 +541,217 @@ function SignYourSelf() {
    setSignKey(key);
  };

+  //`handleResend` function is used to resend otp for email verification
+  const handleResend = async (e) => {
+    e.preventDefault();
+    setOtpLoader(true);
+    await handleSendOTP(Parse.User.current().getEmail());
+    setOtpLoader(false);
+    alert("OTP sent on you email");
+  };
+  //`handleVerifyEmail` function is used to verify email with otp
+  const handleVerifyEmail = async (e) => {
+    e.preventDefault();
+    setOtpLoader(true);
+    try {
+      const resEmail = await Parse.Cloud.run("verifyemail", {
+        otp: otp,
+        email: Parse.User.current().getEmail()
+      });
+      if (resEmail?.message === "Email is verified.") {
+        setIsEmailVerified(true);
+      } else if (resEmail?.message === "Email is already verified.") {
+        setIsEmailVerified(true);
+      }
+      setOtp("");
+      alert(resEmail.message);
+      setIsVerifyModal(false);
+      // handleRecipientSign();
+    } catch (error) {
+      alert(error.message);
+    } finally {
+      setOtpLoader(false);
+    }
+  };
+  //`handleVerifyBtn` function is used to send otp on user mail
+  const handleVerifyBtn = async () => {
+    setIsVerifyModal(true);
+    await handleSendOTP(Parse.User.current().getEmail());
+  };
  //function for send placeholder's co-ordinate(x,y) position embed signature url or stamp url
  async function embedWidgetsData() {
-    let showAlert = false;
-
-    for (let i = 0; i < xyPostion?.length; i++) {
-      const requiredWidgets = xyPostion[i].pos.filter(
-        (position) => position.type !== "checkbox"
-      );
-      if (requiredWidgets && requiredWidgets?.length > 0) {
-        let checkSigned;
-        for (let i = 0; i < requiredWidgets?.length; i++) {
-          checkSigned = requiredWidgets[i]?.options?.response;
-          if (!checkSigned) {
-            const checkSignUrl = requiredWidgets[i]?.pos?.SignUrl;
-            let checkDefaultSigned = requiredWidgets[i]?.options?.defaultValue;
-            if (!checkSignUrl) {
-              if (!checkDefaultSigned) {
-                if (!showAlert) {
-                  showAlert = true;
+    //check current user email is verified or not
+    const currentUser = JSON.parse(JSON.stringify(Parse.User.current()));
+    let isEmailVerified;
+    isEmailVerified = currentUser?.emailVerified;
+    if (isEmailVerified) {
+      setIsEmailVerified(isEmailVerified);
+    } else {
+      try {
+        const userQuery = new Parse.Query(Parse.User);
+        const user = await userQuery.get(currentUser.objectId, {
+          sessionToken: localStorage.getItem("accesstoken")
+        });
+        if (user) {
+          isEmailVerified = user?.get("emailVerified");
+          setIsEmailVerified(isEmailVerified);
+        }
+      } catch (e) {
+        setHandleError("Error: Something went wrong!");
+      }
+    }
+    if (isEmailVerified) {
+      let showAlert = false,
+        isSignatureExist = false;
+      try {
+        for (let i = 0; i < xyPostion?.length; i++) {
+          const requiredWidgets = xyPostion[i].pos.filter(
+            (position) => position.type !== "checkbox"
+          );
+          if (requiredWidgets && requiredWidgets?.length > 0) {
+            let checkSigned;
+            for (let i = 0; i < requiredWidgets?.length; i++) {
+              checkSigned = requiredWidgets[i]?.options?.response;
+              if (!checkSigned) {
+                const checkSignUrl = requiredWidgets[i]?.pos?.SignUrl;
+                let checkDefaultSigned =
+                  requiredWidgets[i]?.options?.defaultValue;
+                if (!checkSignUrl) {
+                  if (!checkDefaultSigned) {
+                    if (!showAlert) {
+                      showAlert = true;
+                    }
+                  }
                }
              }
            }
          }
+          //condition to check exist signature widget or not
+          if (!isSignatureExist) {
+            isSignatureExist = xyPostion[i].pos.some(
+              (data) => data?.type === "signature"
+            );
+          }
+        }
+        if (xyPostion.length === 0 || !isSignatureExist) {
+          setIsAlert({
+            header: "Fields required",
+            isShow: true,
+            alertMessage:
+              "Please ensure there's at least one signature widget added"
+          });
+          return;
+        } else if (showAlert) {
+          setIsAlert({
+            isShow: true,
+            alertMessage:
+              "Please ensure all field is accurately filled and meets all requirements."
+          });
+          return;
+        } else {
+          setIsCeleb(true);
+          setTimeout(() => {
+            setIsCeleb(false);
+          }, 3000);
+          setIsUiLoading(true);
+          const existingPdfBytes = pdfArrayBuffer;
+          // Load a PDFDocument from the existing PDF bytes
+          try {
+            const pdfDoc = await PDFDocument.load(existingPdfBytes);
+            const isSignYourSelfFlow = true;
+            const extUserPtr = pdfDetails[0].ExtUserPtr;
+            const HeaderDocId = extUserPtr?.HeaderDocId;
+            //embed document's object id to all pages in pdf document
+            if (!HeaderDocId) {
+              await embedDocId(pdfDoc, documentId, allPages);
+            }
+            //embed multi signature in pdf
+            const pdfBytes = await multiSignEmbed(
+              xyPostion,
+              pdfDoc,
+              pdfOriginalWidth,
+              isSignYourSelfFlow,
+              containerWH
+            );
+            // console.log("pdf", pdfBytes);
+            //function for call to embed signature in pdf and get digital signature pdf
+            await signPdfFun(pdfBytes, documentId);
+          } catch (err) {
+            setIsUiLoading(false);
+            if (err && err.message.includes("is encrypted.")) {
+              setIsAlert({
+                isShow: true,
+                alertMessage: `Currently encrypted pdf files are not supported.`
+              });
+            } else {
+              console.log("err in signing", err);
+              setIsAlert({
+                isShow: true,
+                alertMessage: `Something went wrong.`
+              });
+            }
+          }
+        }
+      } catch (err) {
+        console.log("err in embedselfsign ", err);
+        setIsUiLoading(false);
+        setIsAlert({
+          isShow: true,
+          alertMessage: "something went wrong, please try again later."
+        });
+      }
+    }
+  }
+  //function for get digital signature
+  const signPdfFun = async (base64Url, documentId) => {
+    let isCustomCompletionMail = false;
+    const getIsSubscribe = await checkIsSubscribed();
+    const tenantDetails = await getTenantDetails(jsonSender.objectId);
+    if (tenantDetails && tenantDetails === "user does not exist!") {
+      alert("User does not exist");
+    } else {
+      if (
+        tenantDetails?.CompletionBody &&
+        tenantDetails?.CompletionSubject &&
+        (!isEnableSubscription || getIsSubscribe)
+      ) {
+        isCustomCompletionMail = true;
+      }
+    }
+    // below for loop is used to get first signature of user to send if to signpdf
+    // for adding it in completion certificate
+    let getSignature;
+    for (let item of xyPostion) {
+      if (!getSignature) {
+        const typeExist = item.pos.some((data) => data?.type);
+        if (typeExist) {
+          getSignature = item.pos.find((data) => data?.type === "signature");
+        } else {
+          getSignature = item.pos.find((data) => !data.isStamp);
        }
      }
    }
-    if (xyPostion.length === 0) {
-      setIsAlert({
-        isShow: true,
-        alertMessage: "Please complete your signature!"
-      });
-      return;
-    } else if (showAlert) {
-      setIsAlert({
-        isShow: true,
-        alertMessage: "Please complete your signature!"
-      });
-      return;
-    } else {
-      setIsCeleb(true);
-      setTimeout(() => {
-        setIsCeleb(false);
-      }, 3000);
-      setIsUiLoading(true);
-      const url = pdfDetails[0] && pdfDetails[0].URL;
-
-      const existingPdfBytes = await fetch(url).then((res) =>
-        res.arrayBuffer()
-      );
-
-      // Load a PDFDocument from the existing PDF bytes
-      const pdfDoc = await PDFDocument.load(existingPdfBytes, {
-        ignoreEncryption: true
-      });
-
-      const flag = true;
-
-      const extUserPtr = pdfDetails[0].ExtUserPtr;
-      const HeaderDocId = extUserPtr?.HeaderDocId;
-
-      //embed document's object id to all pages in pdf document
-      if (!HeaderDocId) {
-        await embedDocId(pdfDoc, documentId, allPages);
+    let base64Sign = getSignature.SignUrl;
+    //check https type signature (default signature exist) then convert in base64
+    const isUrl = base64Sign.includes("https");
+    if (isUrl) {
+      try {
+        base64Sign = await fetchImageBase64(base64Sign);
+      } catch (e) {
+        console.log("error", e);
      }
-      //embed multi signature in pdf
-      const pdfBytes = await multiSignEmbed(
-        xyPostion,
-        pdfDoc,
-        pdfOriginalWidth,
-        flag,
-        containerWH
-      );
-      // console.log("pdf", pdfBytes);
-      //function for call to embed signature in pdf and get digital signature pdf
-      await signPdfFun(pdfBytes, documentId);
    }
-  }
-  // console.log("signyourself", xyPostion);
-  //function for get digital signature
-  const signPdfFun = async (base64Url, documentId) => {
+    //change image width and height to 104/44 in png base64
+    const getNewse64 = await changeImageWH(base64Sign);
+    //remove suffiix of base64
+    const suffixbase64 = getNewse64 && getNewse64.split(",").pop();
+
    let singleSign = {
      pdfFile: base64Url,
-      docId: documentId
+      docId: documentId,
+      isCustomCompletionMail: isCustomCompletionMail,
+      mailProvider: activeMailAdapter,
+      signature: suffixbase64
    };

    await axios
@@ -607,7 +759,8 @@ function SignYourSelf() {
        headers: {
          "Content-Type": "application/json",
          "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-          sessionToken: localStorage.getItem("accesstoken")
+          // sessionToken: localStorage.getItem("accesstoken")
+          "X-Parse-Session-Token": localStorage.getItem("accesstoken")
        }
      })
      .then((Listdata) => {
@@ -971,6 +1124,18 @@ function SignYourSelf() {
          )}

          <div className="signatureContainer" ref={divRef}>
+            {!isEmailVerified && (
+              <VerifyEmail
+                isVerifyModal={isVerifyModal}
+                setIsVerifyModal={setIsVerifyModal}
+                handleVerifyEmail={handleVerifyEmail}
+                setOtp={setOtp}
+                otp={otp}
+                otpLoader={otpLoader}
+                handleVerifyBtn={handleVerifyBtn}
+                handleResend={handleResend}
+              />
+            )}
            {/* this component used for UI interaction and show their functionality */}
            {pdfLoadFail && !checkTourStatus && (
              <Tour
@@ -985,8 +1150,9 @@ function SignYourSelf() {
            {/* this component used to render all pdf pages in left side */}

            <RenderAllPdfPage
-              pdfUrl={pdfUrl}
-              signPdfUrl={pdfDetails[0] && pdfDetails[0].URL}
+              signPdfUrl={
+                pdfDetails[0] && (pdfDetails[0].SignedUrl || pdfDetails[0].URL)
+              }
              allPages={allPages}
              setAllPages={setAllPages}
              setPageNumber={setPageNumber}
@@ -1004,7 +1170,7 @@ function SignYourSelf() {
              <ModalUi
                headerColor={"#dc3545"}
                isOpen={isAlert.isShow}
-                title={"Alert"}
+                title={isAlert?.header || "Alert"}
                handleClose={() => {
                  setIsAlert({
                    isShow: false,
@@ -1014,28 +1180,6 @@ function SignYourSelf() {
              >
                <div style={{ height: "100%", padding: 20 }}>
                  <p>{isAlert.alertMessage}</p>
-
-                  <div
-                    style={{
-                      height: "1px",
-                      backgroundColor: "#9f9f9f",
-                      width: "100%",
-                      marginTop: "15px",
-                      marginBottom: "15px"
-                    }}
-                  ></div>
-                  <button
-                    onClick={() => {
-                      setIsAlert({
-                        isShow: false,
-                        alertMessage: ""
-                      });
-                    }}
-                    type="button"
-                    className="finishBtn cancelBtn"
-                  >
-                    Ok
-                  </button>
                </div>
              </ModalUi>

@@ -1120,6 +1264,8 @@ function SignYourSelf() {
                setSuccessEmail={setSuccessEmail}
                sender={jsonSender}
                setIsAlert={setIsAlert}
+                extUserId={extUserId}
+                activeMailAdapter={activeMailAdapter}
              />
              {/* pdf header which contain funish back button */}
              <Header
@@ -1127,7 +1273,6 @@ function SignYourSelf() {
                allPages={allPages}
                changePage={changePage}
                pdfUrl={pdfUrl}
-                documentStatus={documentStatus}
                embedWidgetsData={embedWidgetsData}
                pdfDetails={pdfDetails}
                isShowHeader={true}
@@ -1135,6 +1280,7 @@ function SignYourSelf() {
                alreadySign={pdfUrl ? true : false}
                isSignYourself={true}
                setIsEmail={setIsEmail}
+                isCompleted={isCompleted}
              />

              <div data-tut="reactourSecond">
@@ -1187,7 +1333,7 @@ function SignYourSelf() {
              }}
              className="autoSignScroll"
            >
-              {!documentStatus.isCompleted ? (
+              {!isCompleted ? (
                <div>
                  <WidgetComponent
                    dataTut="reactourFirst"
@@ -3,7 +3,7 @@ import RenderAllPdfPage from "../components/pdf/RenderAllPdfPage";
 import { useParams, useNavigate } from "react-router-dom";
 import axios from "axios";
 import "../styles/signature.css";
-import { themeColor } from "../constant/const";
+import { isEnableSubscription, themeColor } from "../constant/const";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { useDrag, useDrop } from "react-dnd";
@@ -23,7 +23,8 @@ import {
  defaultWidthHeight,
  addWidgetOptions,
  textInputWidget,
-  radioButtonWidget
+  radioButtonWidget,
+  fetchSubscription
 } from "../constant/Utils";
 import RenderPdf from "../components/pdf/RenderPdf";
 import "../styles/AddUser.css";
@@ -52,6 +53,7 @@ const TemplatePlaceholder = () => {
  const [isSelectListId, setIsSelectId] = useState();
  const [isSendAlert, setIsSendAlert] = useState(false);
  const [isCreateDocModal, setIsCreateDocModal] = useState(false);
+  const [isSubscribe, setIsSubscribe] = useState(false);
  const [isLoading, setIsLoading] = useState({
    isLoad: true,
    message: "This might take some time"
@@ -143,6 +145,7 @@ const TemplatePlaceholder = () => {
  const [currWidgetsDetails, setCurrWidgetsDetails] = useState([]);
  const [isCheckbox, setIsCheckbox] = useState(false);
  const [widgetName, setWidgetName] = useState(false);
+  const [isAddRole, setIsAddRole] = useState(false);
  const senderUser =
    localStorage.getItem(
      `Parse/${localStorage.getItem("parseAppId")}/currentUser`
@@ -168,7 +171,23 @@ const TemplatePlaceholder = () => {
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [divRef.current]);
-
+  async function checkIsSubscribed() {
+    const res = await fetchSubscription();
+    const freeplan = res.plan;
+    const billingDate = res.billingDate;
+    if (freeplan === "freeplan") {
+      return true;
+    } else if (billingDate) {
+      if (new Date(billingDate) > new Date()) {
+        setIsSubscribe(true);
+        return true;
+      } else {
+        navigate(`/subscription`);
+      }
+    } else {
+      navigate(`/subscription`);
+    }
+  }
  // `fetchTemplate` function in used to get Template from server and setPlaceholder ,setSigner if present
  const fetchTemplate = async () => {
    try {
@@ -190,6 +209,9 @@ const TemplatePlaceholder = () => {
          : [];

      if (documentData && documentData.length > 0) {
+        if (isEnableSubscription) {
+          checkIsSubscribed(documentData[0]?.ExtUserPtr?.Email);
+        }
        setPdfDetails(documentData);
        setIsSigners(true);
        if (documentData[0].Signers && documentData[0].Signers.length > 0) {
@@ -287,10 +309,10 @@ const TemplatePlaceholder = () => {
      if (tourstatus && tourstatus.length > 0) {
        setTourStatus(tourstatus);
        const checkTourRecipients = tourstatus.filter(
-          (data) => data.templatetour
+          (data) => data.templateTour
        );
        if (checkTourRecipients && checkTourRecipients.length > 0) {
-          setCheckTourStatus(checkTourRecipients[0].templatetour);
+          setCheckTourStatus(checkTourRecipients[0].templateTour);
        }
      }
      const loadObj = {
@@ -460,9 +482,20 @@ const TemplatePlaceholder = () => {
      } else {
        setIsReceipent(false);
      }
+    } else {
+      setIsAddRole(true);
    }
  };

+  const tourAddRole = [
+    {
+      selector: '[data-tut="reactourAddbtn"]',
+      content: "You need to add a role before you can add fields for it. ",
+      position: "top",
+      style: { fontSize: "13px" }
+    }
+  ];
+
  //function for get pdf page details
  const pageDetails = async (pdf) => {
    const load = {
@@ -741,7 +774,7 @@ const TemplatePlaceholder = () => {
      selector: '[data-tut="reactourSecond"]',
      content: () => (
        <TourContentWithBtn
-          message={`Drag a widget placeholder onto the PDF to choose your desired signing location.`}
+          message={`Drag or click on a field to add it to the document.`}
          isChecked={handleDontShow}
        />
      ),
@@ -763,7 +796,7 @@ const TemplatePlaceholder = () => {
      selector: '[data-tut="reactourFour"]',
      content: () => (
        <TourContentWithBtn
-          message={`Clicking "Save" button will save the template and will ask you if you want to create a new document using this template.`}
+          message={`Clicking ‘Save’ will store the current template. After saving, you’ll be prompted to create a new document from this template if you wish.`}
          isChecked={handleDontShow}
        />
      ),
@@ -781,15 +814,15 @@ const TemplatePlaceholder = () => {
      if (tourStatus.length > 0) {
        updatedTourStatus = [...tourStatus];
        const templatetourIndex = tourStatus.findIndex(
-          (obj) => obj["templatetour"] === false || obj["templatetour"] === true
+          (obj) => obj["templateTour"] === false || obj["templateTour"] === true
        );
        if (templatetourIndex !== -1) {
-          updatedTourStatus[templatetourIndex] = { templatetour: true };
+          updatedTourStatus[templatetourIndex] = { templateTour: true };
        } else {
-          updatedTourStatus.push({ templatetour: true });
+          updatedTourStatus.push({ templateTour: true });
        }
      } else {
-        updatedTourStatus = [{ templatetour: true }];
+        updatedTourStatus = [{ templateTour: true }];
      }
      await axios
        .put(
@@ -1099,8 +1132,6 @@ const TemplatePlaceholder = () => {
      inputype = options.includes(defaultdata.textvalidate)
        ? defaultdata.textvalidate
        : "regex";
-    } else {
-      inputype = "text";
    }

    const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
@@ -1125,11 +1156,14 @@ const TemplatePlaceholder = () => {
                  status: defaultdata?.status || "required",
                  hint: defaultdata?.hint || "",
                  defaultValue: defaultdata?.defaultValue || "",
-                  validation: {
-                    type: inputype,
-                    pattern:
-                      inputype === "regex" ? defaultdata.textvalidate : ""
-                  }
+                  validation:
+                    (isSubscribe || !isEnableSubscription) && inputype
+                      ? {
+                          type: inputype,
+                          pattern:
+                            inputype === "regex" ? defaultdata.textvalidate : ""
+                        }
+                      : {}
                }
              };
            } else {
@@ -1173,6 +1207,7 @@ const TemplatePlaceholder = () => {
    setIsCheckbox(false);
  };

+  console.log("signerpos", signerPos);
  return (
    <div>
      <Title title={"Template"} />
@@ -1197,6 +1232,15 @@ const TemplatePlaceholder = () => {
                closeWithMask={false}
              />
            )}
+            {isAddRole && (
+              <Tour
+                onRequestClose={() => setIsAddRole(false)}
+                steps={tourAddRole}
+                isOpen={isAddRole}
+                rounded={5}
+                closeWithMask={false}
+              />
+            )}
            {/* this component used to render all pdf pages in left side */}
            <RenderAllPdfPage
              signPdfUrl={pdfDetails[0].URL}
@@ -1222,7 +1266,7 @@ const TemplatePlaceholder = () => {
                handleClose={() => setIsSendAlert(false)}
              >
                <div style={{ height: "100%", padding: 20 }}>
-                  <p>Please add field for all recipients.</p>
+                  <p>Please add at least one signature field for all roles.</p>
                </div>
              </ModalUi>
              <ModalUi
@@ -1323,6 +1367,7 @@ const TemplatePlaceholder = () => {
                currWidgetsDetails={currWidgetsDetails}
                setCurrWidgetsDetails={setCurrWidgetsDetails}
                handleClose={handleNameModal}
+                isSubscribe={isSubscribe}
              />
              <DropdownWidgetOption
                type="checkbox"
@@ -1333,6 +1378,7 @@ const TemplatePlaceholder = () => {
                currWidgetsDetails={currWidgetsDetails}
                setCurrWidgetsDetails={setCurrWidgetsDetails}
                handleClose={handleNameModal}
+                isSubscribe={isSubscribe}
              />
              <DropdownWidgetOption
                type="dropdown"
@@ -1343,6 +1389,7 @@ const TemplatePlaceholder = () => {
                currWidgetsDetails={currWidgetsDetails}
                setCurrWidgetsDetails={setCurrWidgetsDetails}
                handleClose={handleNameModal}
+                isSubscribe={isSubscribe}
              />
              <PlaceholderCopy
                isPageCopy={isPageCopy}
@@ -1524,6 +1571,7 @@ const TemplatePlaceholder = () => {
          isAddUser={isAddUser}
          uniqueId={uniqueId}
          closePopup={closePopup}
+          signersData={signersdata}
        />
      </div>
      <ModalUi
@@ -1542,6 +1590,7 @@ const TemplatePlaceholder = () => {
        isOpen={isNameModal}
        handleClose={handleNameModal}
        handleData={handleWidgetdefaultdata}
+        isSubscribe={isSubscribe}
      />
    </div>
  );
@@ -8,10 +8,15 @@ import sanitizeFileName from "../primitives/sanitizeFileName";
 import axios from "axios";
 import PremiumAlertHeader from "../primitives/PremiumAlertHeader";
 import Tooltip from "../primitives/Tooltip";
+import { isEnableSubscription, rejectBtn, submitBtn } from "../constant/const";
+import { checkIsSubscribed, handleSendOTP } from "../constant/Utils";
+import Upgrade from "../primitives/Upgrade";
+import ModalUi from "../primitives/ModalUi";

 function UserProfile() {
  const navigate = useNavigate();
  let UserProfile = JSON.parse(localStorage.getItem("UserInformation"));
+  let extendUser = JSON.parse(localStorage.getItem("Extand_Class"));
  const [parseBaseUrl] = useState(localStorage.getItem("baseUrl"));
  const [parseAppId] = useState(localStorage.getItem("parseAppId"));
  const [editmode, setEditMode] = useState(false);
@@ -21,15 +26,54 @@ function UserProfile() {
  const [isLoader, setIsLoader] = useState(false);
  const [percentage, setpercentage] = useState(0);
  const [isDisableDocId, setIsDisableDocId] = useState(false);
-
+  const [isSubscribe, setIsSubscribe] = useState(false);
+  const [company, setCompany] = useState(
+    extendUser && extendUser?.[0]?.Company
+  );
+  const [jobTitle, setJobTitle] = useState(
+    extendUser && extendUser?.[0]?.JobTitle
+  );
+  const [isVerifyModal, setIsVerifyModal] = useState(false);
+  const [otp, setOtp] = useState("");
+  const [otpLoader, setOtpLoader] = useState(false);
+  const [isEmailVerified, setIsEmailVerified] = useState(false);
  useEffect(() => {
+    getUserDetail();
+  }, []);
+
+  const getUserDetail = async () => {
+    setIsLoader(true);
    const extClass = localStorage.getItem("Extand_Class");
    const jsonSender = JSON.parse(extClass);
    const HeaderDocId = jsonSender[0]?.HeaderDocId;
+    if (isEnableSubscription) {
+      const getIsSubscribe = await checkIsSubscribed();
+      setIsSubscribe(getIsSubscribe);
+    }
    if (HeaderDocId) {
      setIsDisableDocId(HeaderDocId);
    }
-  }, []);
+    const currentUser = JSON.parse(JSON.stringify(Parse.User.current()));
+    let isEmailVerified = currentUser?.emailVerified || false;
+    if (isEmailVerified) {
+      setIsEmailVerified(isEmailVerified);
+      setIsLoader(false);
+    } else {
+      try {
+        const userQuery = new Parse.Query(Parse.User);
+        const user = await userQuery.get(currentUser.objectId, {
+          sessionToken: localStorage.getItem("accesstoken")
+        });
+        if (user) {
+          isEmailVerified = user?.get("emailVerified");
+          setIsEmailVerified(isEmailVerified);
+          setIsLoader(false);
+        }
+      } catch (e) {
+        alert("something went wrong!");
+      }
+    }
+  };
  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsLoader(true);
@@ -54,6 +98,7 @@ function UserProfile() {
              SetPhone(res.phone);
              setImage(res.ProfilePic);
              localStorage.setItem("username", res.name);
+              localStorage.setItem("profileImg", res.ProfilePic);
              await updateExtUser({ Name: res.name, Phone: res.phone });
              alert("Profile updated successfully.");
              setEditMode(false);
@@ -81,7 +126,9 @@ function UserProfile() {
    const body = {
      Phone: obj.Phone,
      Name: obj.Name,
-      HeaderDocId: isDisableDocId
+      HeaderDocId: isDisableDocId,
+      JobTitle: jobTitle,
+      Company: company
    };
    await axios.put(
      parseBaseUrl + "classes/" + extClass + "/" + ExtUserId,
@@ -135,9 +182,9 @@ function UserProfile() {
      // console.log("File URL:", response.url());
      if (response.url()) {
        setImage(response.url());
-        localStorage.setItem("profileImg", response.url());
        setpercentage(0);
-        SaveFileSize(size, response.url());
+        const tenantId = localStorage.getItem("TenantId");
+        SaveFileSize(size, response.url(), tenantId);
        return response.url();
      }
    } catch (error) {
@@ -155,7 +202,45 @@ function UserProfile() {
  const handleDisableDocId = () => {
    setIsDisableDocId((prevChecked) => !prevChecked);
  };
-
+  //`handleVerifyBtn` function is used to send otp on user mail
+  const handleVerifyBtn = async () => {
+    setIsVerifyModal(true);
+    await handleSendOTP(Parse.User.current().getEmail());
+  };
+  const handleCloseVerifyModal = async () => {
+    setIsVerifyModal(false);
+  };
+  //`handleVerifyEmail` function is used to verify email with otp
+  const handleVerifyEmail = async (e) => {
+    e.preventDefault();
+    setOtpLoader(true);
+    try {
+      const resEmail = await Parse.Cloud.run("verifyemail", {
+        otp: otp,
+        email: Parse.User.current().getEmail()
+      });
+      if (resEmail?.message === "Email is verified.") {
+        setIsEmailVerified(true);
+      } else if (resEmail?.message === "Email is already verified.") {
+        setIsEmailVerified(true);
+      }
+      setOtp("");
+      alert(resEmail.message);
+      setIsVerifyModal(false);
+    } catch (error) {
+      alert(error.message);
+    } finally {
+      setOtpLoader(false);
+    }
+  };
+  //function to use resend otp for email verification
+  const handleResend = async (e) => {
+    e.preventDefault();
+    setOtpLoader(true);
+    await handleSendOTP();
+    setOtpLoader(false);
+    alert("OTP sent on you email");
+  };
  return (
    <React.Fragment>
      <Title title={"Profile"} />
@@ -252,24 +337,84 @@ function UserProfile() {
                <span className="font-semibold">Email:</span>{" "}
                <span>{UserProfile && UserProfile.email}</span>
              </li>
+              <li
+                className={`flex justify-between items-center border-t-[1px] border-gray-300 break-all ${
+                  editmode ? "py-1" : "py-2"
+                }`}
+              >
+                <span className="font-semibold">Company:</span>{" "}
+                {editmode ? (
+                  <input
+                    type="text"
+                    value={company}
+                    className="py-1 px-2 text-sm border-[1px] border-[#15b4e9] text-black rounded"
+                    onChange={(e) => setCompany(e.target.value)}
+                  />
+                ) : (
+                  <span>{extendUser?.[0].Company}</span>
+                )}
+              </li>
+              <li
+                className={`flex justify-between items-center border-t-[1px] border-gray-300 break-all ${
+                  editmode ? "py-1" : "py-2"
+                }`}
+              >
+                <span className="font-semibold">Job title:</span>{" "}
+                {editmode ? (
+                  <input
+                    type="text"
+                    value={jobTitle}
+                    className="py-1 px-2 text-sm border-[1px] border-[#15b4e9] text-black rounded"
+                    onChange={(e) => setJobTitle(e.target.value)}
+                  />
+                ) : (
+                  <span>{extendUser?.[0]?.JobTitle}</span>
+                )}
+              </li>
              <li className="flex justify-between items-center border-t-[1px] border-gray-300 py-2 break-all">
                <span className="font-semibold">Is Email verified:</span>{" "}
                <span>
-                  {UserProfile && UserProfile.emailVerified
-                    ? "Verified"
-                    : "Not verified"}
+                  {isEmailVerified ? (
+                    "Verified"
+                  ) : (
+                    <span>
+                      Not verified(
+                      <span
+                        onClick={() => handleVerifyBtn()}
+                        className="hover:underline text-blue-600 cursor-pointer"
+                      >
+                        verify
+                      </span>
+                      )
+                    </span>
+                  )}
                </span>
              </li>
              <li className="border-y-[1px] border-gray-300 break-all">
                <div className="flex justify-between items-center py-2">
-                  <span className="font-semibold">
+                  <span
+                    className={
+                      isSubscribe || !isEnableSubscription
+                        ? "font-semibold"
+                        : "font-semibold text-gray-300"
+                    }
+                  >
                    Disable DocumentId :{" "}
-                    <Tooltip url={"https://docs.opensignlabs.com/docs/help/Settings/disabledocumentid"} />{" "}
+                    <Tooltip
+                      url={
+                        "https://docs.opensignlabs.com/docs/help/Settings/disabledocumentid"
+                      }
+                    />{" "}
+                    {!isSubscribe && isEnableSubscription && <Upgrade />}
                  </span>{" "}
                  <label
-                    className={`${
-                      editmode ? "cursor-pointer" : ""
-                    } relative inline-flex items-center mb-0`}
+                    className={
+                      isSubscribe || !isEnableSubscription
+                        ? `${
+                            editmode ? "cursor-pointer" : ""
+                          } relative inline-flex items-center mb-0`
+                        : "relative inline-flex items-center mb-0 pointer-events-none opacity-50"
+                    }
                  >
                    <input
                      disabled={editmode ? false : true}
@@ -282,11 +427,13 @@ function UserProfile() {
                    <div className="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-1 peer-focus:ring-black rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-black peer-checked:bg-blue-600"></div>
                  </label>
                </div>
-                <PremiumAlertHeader
-                  message={
-                    "Disable documentId is free in beta, this feature will incur a fee later."
-                  }
-                />
+                {!isEnableSubscription && (
+                  <PremiumAlertHeader
+                    message={
+                      "Disable documentId is free in beta, this feature will incur a fee later."
+                    }
+                  />
+                )}
              </li>
            </ul>
            <div className="flex justify-center pt-2 pb-3 md:pt-3 md:pb-4">
@@ -326,6 +473,60 @@ function UserProfile() {
              </button>
            </div>
          </div>
+
+          {isVerifyModal && (
+            <ModalUi
+              isOpen
+              title={"OTP verification"}
+              handleClose={handleCloseVerifyModal}
+            >
+              {otpLoader ? (
+                <div
+                  style={{
+                    height: "150px",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center"
+                  }}
+                >
+                  <div
+                    style={{
+                      fontSize: "45px",
+                      color: "#3dd3e0"
+                    }}
+                    className="loader-37"
+                  ></div>
+                </div>
+              ) : (
+                <form onSubmit={(e) => handleVerifyEmail(e)}>
+                  <div className="px-6 py-3">
+                    <label className="mb-2">Enter OTP</label>
+                    <input
+                      required
+                      type="tel"
+                      pattern="[0-9]{4}"
+                      className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                      placeholder="Enter OTP received over email"
+                      value={otp}
+                      onChange={(e) => setOtp(e.target.value)}
+                    />
+                  </div>
+                  <hr />
+                  <div className="px-6 my-3">
+                    <button type="submit" className={submitBtn}>
+                      Verify
+                    </button>
+                    <button
+                      className={`${rejectBtn} ml-2`}
+                      onClick={(e) => handleResend(e)}
+                    >
+                      Resend
+                    </button>
+                  </div>
+                </form>
+              )}
+            </ModalUi>
+          )}
        </div>
      )}
    </React.Fragment>
@@ -1,15 +1,17 @@
 import React, { useEffect, useState } from "react";
 import Title from "../components/Title";
 import axios from "axios";
+import { useNavigate } from "react-router-dom";
 import Alert from "../primitives/Alert";
 import ModalUi from "../primitives/ModalUi";
-import { rejectBtn, submitBtn } from "../constant/const";
-import { openInNewTab } from "../constant/Utils";
+import { isEnableSubscription, rejectBtn, submitBtn } from "../constant/const";
+import { checkIsSubscribed, openInNewTab } from "../constant/Utils";
 import Parse from "parse";
 import PremiumAlertHeader from "../primitives/PremiumAlertHeader";
 import Tooltip from "../primitives/Tooltip";

 function Webhook() {
+  const navigation = useNavigate();
  const [parseBaseUrl] = useState(localStorage.getItem("baseUrl"));
  const [parseAppId] = useState(localStorage.getItem("parseAppId"));
  const [webhook, setWebhook] = useState();
@@ -17,6 +19,8 @@ function Webhook() {
  const [isGenerate, setIsGenerate] = useState(false);
  const [isErr, setIsErr] = useState(false);
  const [isModal, setIsModal] = useState(false);
+  const [isSubscribe, setIsSubscribe] = useState(false);
+  const [error, setError] = useState("");

  useEffect(() => {
    fetchWebhook();
@@ -25,6 +29,10 @@ function Webhook() {

  const fetchWebhook = async () => {
    const email = Parse.User.current().getEmail();
+    if (isEnableSubscription) {
+      const getIsSubscribe = await checkIsSubscribed();
+      setIsSubscribe(getIsSubscribe);
+    }
    const params = { email: email };
    try {
      const extRes = await Parse.Cloud.run("getUserDetails", params);
@@ -40,41 +48,48 @@ function Webhook() {
  };
  const handleSubmit = async (e) => {
    e.preventDefault();
-    setIsLoader(true);
-    setIsModal(false);
-    try {
-      const params = { url: webhook };
-      const url = parseBaseUrl + "functions/savewebhook";
-      const headers = {
-        "Content-Type": "application/json",
-        "X-Parse-Application-Id": parseAppId,
-        sessiontoken: localStorage.getItem("accesstoken")
-      };
-      await axios.post(url, params, { headers: headers }).then((res) => {
-        if (res.data && res.data.result && res.data.result.Webhook) {
-          setWebhook(res.data.result.Webhook);
-          setIsGenerate(true);
-          setTimeout(() => {
-            setIsGenerate(false);
-          }, 1500);
-          setIsLoader(false);
-        } else {
-          console.error("Error while generating webhook");
-          setIsLoader(false);
-          setIsErr(true);
-          setTimeout(() => {
-            setIsErr(false);
-          }, 1500);
-        }
-      });
-    } catch (error) {
-      setIsLoader(false);
-      setIsErr(true);
-      setTimeout(() => {
-        setIsErr(false);
-      }, 1500);
+    if (webhook && webhook.startsWith("https://")) {
+      setIsLoader(true);
+      setIsModal(false);
+      try {
+        const params = { url: webhook };
+        const url = parseBaseUrl + "functions/savewebhook";
+        const headers = {
+          "Content-Type": "application/json",
+          "X-Parse-Application-Id": parseAppId,
+          sessiontoken: localStorage.getItem("accesstoken")
+        };
+        await axios.post(url, params, { headers: headers }).then((res) => {
+          if (res.data && res.data.result && res.data.result.Webhook) {
+            setWebhook(res.data.result.Webhook);
+            setIsGenerate(true);
+            setTimeout(() => {
+              setIsGenerate(false);
+            }, 1500);
+            setIsLoader(false);
+          } else {
+            console.error("Error while generating webhook");
+            setIsLoader(false);
+            setIsErr(true);
+            setTimeout(() => {
+              setIsErr(false);
+            }, 1500);
+          }
+        });
+      } catch (error) {
+        setIsLoader(false);
+        setIsErr(true);
+        setTimeout(() => {
+          setIsErr(false);
+        }, 1500);

-      console.log("err", error);
+        console.log("err", error);
+      }
+    } else {
+      setError("The webhook url should always start with https://");
+      setTimeout(() => {
+        setError("");
+      }, 1500);
    }
  };

@@ -84,6 +99,7 @@ function Webhook() {
      <Title title={"Webhook"} />
      {isGenerate && <Alert type="success">Webhook added successfully!</Alert>}
      {isErr && <Alert type="danger">Something went wrong!</Alert>}
+
      {isLoader ? (
        <div
          style={{
@@ -103,31 +119,41 @@ function Webhook() {
        </div>
      ) : (
        <div className="bg-white flex flex-col justify-center shadow rounded">
-          <PremiumAlertHeader />
-          <h1 className="ml-4 mt-3 mb-2 font-semibold">
-            Webhook{" "}
+          {!isEnableSubscription && <PremiumAlertHeader />}
+          <h1 className={"ml-4 mt-3 mb-2 font-semibold"}>
+            OpenSign™ Webhook{" "}
            <Tooltip
              url={"https://docs.opensignlabs.com/docs/API-docs/get-webhook"}
+              isSubscribe={true}
            />
          </h1>
-          <ul className="w-full flex flex-col  p-2 text-sm">
+          <ul
+            className={
+              isSubscribe || !isEnableSubscription
+                ? "w-full flex flex-col p-2 text-sm "
+                : "w-full flex flex-col p-2 text-sm opacity-20 pointer-events-none select-none"
+            }
+          >
            <li
-              className={`flex justify-between items-center border-y-[1px] border-gray-300 break-all py-2`}
+              className={`flex flex-col md:flex-row  justify-between items-center border-y-[1px] border-gray-300 break-all py-2`}
            >
-              <span className="w-[40%]">Webhook:</span>{" "}
-              <span id="token" className="w-[60%] md:text-end cursor-pointer">
-                {webhook && webhook}
-              </span>
+              <div className="w-[70%] flex-col md:flex-row flex items-center gap-5 ">
+                <span className="">Webhook:</span>{" "}
+                <span id="token" className=" md:text-end cursor-pointer">
+                  {webhook ? webhook : "_____"}
+                </span>
+              </div>
+              <button
+                type="button"
+                onClick={handleModal}
+                className="rounded hover:bg-[#15b4e9] border-[1px] border-[#15b4e9] text-[#15b4e9] hover:text-white px-4 py-2 text-xs md:text-base focus:outline-none"
+              >
+                {webhook ? "Update Webhook" : "Add Webhook"}
+              </button>
            </li>
          </ul>
-          <div className="flex flex-col md:flex-row items-center justify-center gap-2 pb-4">
-            <button
-              type="button"
-              onClick={handleModal}
-              className="rounded hover:bg-[#15b4e9] border-[1px] border-[#15b4e9] text-[#15b4e9] hover:text-white px-4 py-2 text-xs md:text-base focus:outline-none"
-            >
-              {webhook ? "Update Webhook" : "Add Webhook"}
-            </button>
+
+          <div className="flex   items-center justify-center ">
            <button
              type="button"
              onClick={() =>
@@ -135,17 +161,47 @@ function Webhook() {
                  "https://docs.opensignlabs.com/docs/API-docs/save-update-webhook"
                )
              }
-              className="rounded hover:bg-[#15b4e9] border-[1px] border-[#15b4e9] text-[#15b4e9] hover:text-white px-11 py-2 text-xs md:text-base focus:outline-none"
+              className="rounded hover:bg-[#15b4e9] border-[1px] my-2 border-[#15b4e9] text-[#15b4e9] hover:text-white px-11 py-2 text-xs md:text-base focus:outline-none"
            >
              View Docs
            </button>
          </div>

+          {!isSubscribe && isEnableSubscription && (
+            <>
+              <h1 className={"ml-4 mt-3 mb-2 font-semibold"}>
+                Upgrade to PRO Plan
+              </h1>
+              <ul className={"w-full flex flex-col p-2 text-sm "}>
+                <li
+                  className={`flex flex-col md:flex-row justify-between items-center border-y-[1px] border-gray-300 break-all py-2`}
+                >
+                  <div className="w-[70%] flex-col md:flex-row flex items-center gap-3 ">
+                    <span className="">$29.99/month:</span>{" "}
+                    <span id="token" className=" md:text-end cursor-pointer">
+                      First 100 documents included, then just $0.15 per
+                      document.
+                    </span>
+                  </div>
+                  {!isSubscribe && isEnableSubscription && (
+                    <button
+                      type="button"
+                      onClick={() => navigation("/subscription")}
+                      className="rounded hover:bg-[#15b4e9] border-[1px] border-[#15b4e9] text-[#15b4e9] hover:text-white px-11 py-2 text-xs md:text-base focus:outline-none"
+                    >
+                      Upgrade Now
+                    </button>
+                  )}
+                </li>
+              </ul>
+            </>
+          )}
          <ModalUi
            isOpen={isModal}
            title={"Regenerate Token"}
            handleClose={handleModal}
          >
+            {error && <Alert type="danger">{error}</Alert>}
            <div className="m-[20px]">
              <div className="text-lg font-normal text-black">
                <label className="text-sm ml-2">Webhook</label>
@@ -54,11 +54,11 @@ const AddUser = (props) => {
      contactQuery.set("Email", email);
      contactQuery.set("UserRole", "contracts_Guest");

-      if (localStorage.getItem("TenetId")) {
+      if (localStorage.getItem("TenantId")) {
        contactQuery.set("TenantId", {
          __type: "Pointer",
          className: "partners_Tenant",
-          objectId: localStorage.getItem("TenetId")
+          objectId: localStorage.getItem("TenantId")
        });
      }

@@ -7,12 +7,16 @@ const LinkUserModal = (props) => {
  return (
    <ModalUi
      title={"Add/Choose Signer"}
-      isOpen={props.isAddUser[props.uniqueId]}
+      isOpen={
+        props?.isAddSigner ||
+        (props?.isAddUser && props?.isAddUser[props?.uniqueId])
+      }
      handleClose={props.closePopup}
    >
      <SelectSigners
        details={props.handleAddUser}
        closePopup={props.closePopup}
+        signersData={props?.signersData}
      />
      <div
        style={{
@@ -1,4 +1,6 @@
 import React from "react";
+import { isEnableSubscription } from "../constant/const";
+import PremiumAlertHeader from "./PremiumAlertHeader";

 const ModalUi = ({
  children,
@@ -8,12 +10,13 @@ const ModalUi = ({
  handleClose,
  showHeader = true,
  showClose = true,
-  styleClass
+  styleClass,
+  showHeaderMessage
 }) => {
  return (
    <>
      {isOpen && (
-        <div className="fixed z-[999] top-0 left-0 w-[100%] h-[100%] bg-black bg-opacity-[75%]">
+        <div className="fixed z-[999] 2   top-0 left-0 w-[100%] h-[100%] bg-black bg-opacity-[75%]">
          <div
            className={
              styleClass
@@ -37,6 +40,13 @@ const ModalUi = ({
                )}
              </div>
            )}
+            {!isEnableSubscription && showHeaderMessage && (
+              <PremiumAlertHeader
+                message={
+                  "Cutomize Email is free in beta, this feature will incur a fee later."
+                }
+              />
+            )}
            <div>{children}</div>
          </div>
        </div>
@@ -8,19 +8,11 @@ function CustomModal({
  bodyMssg,
  footerMessage,
  declineDoc,
-  setIsDecline,
-  containerWH
+  setIsDecline
 }) {
-  const isMobile = window.innerWidth < 767;
  return (
    show && (
-      <div
-        className="bg-black bg-opacity-[75%] absolute z-[999] flex flex-col items-center justify-center"
-        style={{
-          width: containerWH && containerWH.width,
-          height: isMobile ? "100%" : containerWH && containerWH.height
-        }}
-      >
+      <div className="bg-black bg-opacity-[75%] absolute z-[999] flex flex-col items-center justify-center w-full h-full rounded">
        <div className="bg-white rounded outline-none md:w-[40%] w-[80%]">
          <div className="bg-[#de4337] text-white p-[10px] rounded-t">
            {headMsg && headMsg}
@@ -3,7 +3,7 @@ import { Tooltip as ReactTooltip } from "react-tooltip";
 import { openInNewTab } from "../constant/Utils";
 const Tooltip = ({ id, message, url, iconColor }) =>
  url ? (
-    <button onClick={() => openInNewTab(url)} className="text-center">
+    <button onClick={() => openInNewTab(url)} className={"text-center"}>
      <sup>
        <i
          className="fa-solid fa-question rounded-full"
@@ -0,0 +1,27 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { openInNewTab } from "../constant/Utils";
+
+function Upgrade({ message, newWindow }) {
+  const navigation = useNavigate();
+
+  return (
+    <sup>
+      <span
+        onClick={() => {
+          if (newWindow) {
+            const url = window.location.origin + "/subscription";
+            openInNewTab(url);
+          } else {
+            navigation("/subscription");
+          }
+        }}
+        className="text-blue-800 text-sm cursor-pointer underline"
+      >
+        {message ? message : "Upgrade now"}
+      </span>
+    </sup>
+  );
+}
+
+export default Upgrade;
@@ -9,9 +9,15 @@ const Validate = () => {
  useEffect(() => {
    (async () => {
      try {
+        const userDetails = JSON.parse(
+          localStorage.getItem(
+            `Parse/${localStorage.getItem("parseAppId")}/currentUser`
+          )
+        );
+
        // Use the session token to validate the user
        const userQuery = new Parse.Query(Parse.User);
-        const user = await userQuery.get(Parse.User.current().id, {
+        const user = await userQuery.get(userDetails?.objectId, {
          sessionToken: localStorage.getItem("accesstoken")
        });
        if (user) {
@@ -24,7 +30,10 @@ const Validate = () => {
        setIsUserValid(false);
      }
    })();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
+
  const handleLoginBtn = () => {
    try {
      Parse.User.logOut();
@@ -395,14 +395,6 @@
  margin-left: 10px;
 }

-.backBtn {
-  background-color: white;
-}
-
-.backBtn:hover {
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
-}
-
 .defaultBtn {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
  padding: 3px 26px;
@@ -420,42 +412,6 @@
  outline: none;
 }

-.downloadBtn {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
-  padding: 3px 15px !important;
-  background-color: rgb(241 79 79);
-  border: none !important;
-  color: white !important;
-}
-
-.downloadBtn:hover {
-  box-shadow: 0 2px 4px rgba(154, 36, 36, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
-}
-
-.printBtn {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
-  padding: 3px 15px !important;
-  background: #188ae2;
-  border: none !important;
-  color: white !important;
-}
-
-.printBtn:hover {
-  box-shadow: 0 2px 4px rgba(23, 48, 137, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
-}
-
-.certificateBtn {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
-  padding: 3px 15px !important;
-  background: #08bc66;
-  border: none !important;
-  color: white !important;
-  text-decoration: none !important;
-}
-
-.certificateBtn:hover {
-  box-shadow: 0 2px 4px rgba(15, 150, 87, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
-}

 .signerList {
  overflow-y: scroll;
@@ -496,11 +452,15 @@
  overflow: hidden !important;
  text-overflow: ellipsis;
 }
+
 .disabled {
-  opacity: 0.5; /* Example: reduce opacity to visually indicate disabled state */
-  pointer-events: none; /* Prevents mouse clicks and other events */
+  opacity: 0.5;
+  /* Example: reduce opacity to visually indicate disabled state */
+  pointer-events: none;
+  /* Prevents mouse clicks and other events */
  /* background-color: #888; */
 }
+
 .useEmail {
  font-size: 10px;
  color: #424242;
@@ -557,13 +517,6 @@
  position: "relative";
 }

-.signatureHeader {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 5px;
-}

 .signerComponent {
  /* box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; */
@@ -851,6 +804,7 @@ option {
  z-index: 999;
  border-radius: 2px;
  resize: none;
+  overflow: hidden;
 }

 .labelTextArea:focus {
@@ -1014,6 +968,9 @@ option {
  }
 }

+.scroll-hide::-webkit-scrollbar {
+  display: none;
+}
@media screen and (max-width: 350px) and (min-width: 311px) {
  .signatureCanvas {
    width: 280px;
@@ -1,3 +1,9 @@
+import axios from 'axios';
+import dotenv from 'dotenv';
+dotenv.config();
+
+const appId = process.env.APP_ID;
+const serverUrl = process.env.SERVER_URL;
 export function customAPIurl() {
  const url = new URL(process.env.SERVER_URL);
  return url.pathname === '/api/app' ? url.origin + '/api' : url.origin;
@@ -38,3 +44,206 @@ export function replaceMailVaribles(subject, body, variables) {
  };
  return result;
 }
+
+export const saveFileUsage = async (size, imageUrl, userId) => {
+  //checking server url and save file's size
+
+  try {
+    const tenantQuery = new Parse.Query('partners_Tenant');
+    tenantQuery.equalTo('UserId', {
+      __type: 'Pointer',
+      className: '_User',
+      objectId: userId,
+    });
+    const tenant = await tenantQuery.first();
+    if (tenant) {
+      const tenantPtr = {
+        __type: 'Pointer',
+        className: 'partners_Tenant',
+        objectId: tenant.id,
+      };
+      const _tenantPtr = JSON.stringify(tenantPtr);
+      try {
+        const res = await axios.get(
+          `${serverUrl}/classes/partners_TenantCredits?where={"PartnersTenant":${_tenantPtr}}`,
+          {
+            headers: {
+              'Content-Type': 'application/json',
+              'X-Parse-Application-Id': appId,
+            },
+          }
+        );
+        const response = res.data.results;
+
+        let data;
+        // console.log("response", response);
+        if (response && response.length > 0) {
+          data = {
+            usedStorage: response[0].usedStorage ? response[0].usedStorage + size : size,
+          };
+          await axios.put(
+            `${serverUrl}/classes/partners_TenantCredits/${response[0].objectId}`,
+            data,
+            {
+              headers: {
+                'Content-Type': 'application/json',
+                'X-Parse-Application-Id': appId,
+              },
+            }
+          );
+        } else {
+          data = { usedStorage: size, PartnersTenant: tenantPtr };
+          await axios.post(`${serverUrl}/classes/partners_TenantCredits`, data, {
+            headers: {
+              'Content-Type': 'application/json',
+              'X-Parse-Application-Id': appId,
+            },
+          });
+        }
+      } catch (err) {
+        console.log('err in save usage', err);
+      }
+      saveDataFile(size, imageUrl, tenantPtr);
+    }
+  } catch (err) {
+    console.log('err in fetch tenant Id', err);
+  }
+};
+
+//function for save fileUrl and file size in particular client db class partners_DataFiles
+const saveDataFile = async (size, imageUrl, tenantPtr) => {
+  const data = {
+    FileUrl: imageUrl,
+    FileSize: size,
+    TenantPtr: tenantPtr,
+  };
+
+  // console.log("data save",file, data)
+  try {
+    await axios.post(`${serverUrl}/classes/partners_DataFiles`, data, {
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Parse-Application-Id': appId,
+      },
+    });
+  } catch (err) {
+    console.log('error in save usage ', err);
+  }
+};
+
+export const updateMailCount = async extUserId => {
+  // Update count in contracts_Users class
+  const query = new Parse.Query('contracts_Users');
+  query.equalTo('objectId', extUserId);
+
+  try {
+    const contractUser = await query.first({ useMasterKey: true });
+    if (contractUser) {
+      contractUser.increment('EmailCount', 1);
+      await contractUser.save(null, { useMasterKey: true });
+    } else {
+      // Create new entry if not found
+      const ContractsUsers = Parse.Object.extend('contracts_users');
+      const newContractUser = new ContractsUsers();
+      newContractUser.set('EmailCount', 1);
+      await newContractUser.save(null, { useMasterKey: true });
+    }
+  } catch (error) {
+    console.log('Error updating EmailCount in contracts_users: ' + error.message);
+  }
+};
+
+export function formatWidgetOptions(type, options) {
+  const status = options?.required === true ? 'required' : 'optional' || 'required';
+  const defaultValue = options?.default || '';
+  const values = options?.values || [];
+  switch (type) {
+    case 'signature':
+      return { name: 'signature', status: 'required' };
+    case 'stamp':
+      return { status: status, name: 'stamp' };
+    case 'initials':
+      return { status: status, name: options.name || 'initials' };
+    case 'image':
+      return { status: status, name: options.name || 'image' };
+    case 'email':
+      return { status: status, name: options.name || 'email', validation: { type: 'email' } };
+    case 'name':
+      return { status: status, name: options.name || 'name' };
+    case 'job title':
+      return { status: status, name: options.name || 'job title' };
+    case 'company':
+      return { status: status, name: options.name || 'company' };
+    case 'date': {
+      let today = new Date();
+      let dd = String(today.getDate()).padStart(2, '0');
+      let mm = String(today.getMonth() + 1).padStart(2, '0'); // January is 0!
+      let yyyy = today.getFullYear();
+      today = dd + '-' + mm + '-' + yyyy;
+      let dateFormat = options?.format;
+      dateFormat = dateFormat.replace(/m/g, 'M');
+      return {
+        status: status,
+        name: options.name || 'date',
+        response: defaultValue || today,
+        validation: { format: dateFormat || 'dd-MM-yyyy', type: 'date-format' },
+      };
+    }
+    case 'textbox':
+      return {
+        status: status,
+        name: 'textbox',
+        defaultValue: defaultValue,
+        hint: options.hint,
+        validation: { type: 'regex', pattern: options?.regularexpression || '/^[a-zA-Z0-9s]+$/' },
+      };
+    case 'checkbox': {
+      const arr = options?.values;
+      let selectedvalues = [];
+      for (const obj of options.selectedvalues) {
+        const index = arr.indexOf(obj);
+        selectedvalues.push(index);
+      }
+      return {
+        status: status,
+        name: options.name || 'checkbox',
+        values: values,
+        isReadOnly: options?.readonly || false,
+        isHideLabel: options?.hidelabel || false,
+        validation: {
+          minRequiredCount: options?.validation?.minselections || 0,
+          maxRequiredCount: options?.validation?.maxselections || 0,
+        },
+        defaultValue: selectedvalues || [],
+      };
+    }
+    case 'radio button': {
+      return {
+        status: status,
+        name: options.name || 'radio',
+        values: values,
+        isReadOnly: options?.readonly || false,
+        isHideLabel: options?.hidelabel || false,
+        defaultValue: defaultValue,
+      };
+    }
+    case 'dropdown':
+      return {
+        status: status,
+        name: options.name || 'dropdown',
+        values: values,
+        defaultValue: defaultValue,
+      };
+    default:
+      break;
+  }
+}
+
+export function sanitizeFileName(fileName) {
+  // Remove spaces and invalid characters
+  const file = fileName.replace(/[^a-zA-Z0-9._-]/g, '');
+  const removedot = file.replace(/\.(?=.*\.)/g, '');
+  return removedot.replace(/[^a-zA-Z0-9._-]/g, '');
+}
+
+export const useLocal = process.env.USE_LOCAL ? process.env.USE_LOCAL.toLowerCase() : 'false';
@@ -1,12 +1,25 @@
 //--npm modules
 import express from 'express';
 import cors from 'cors';
-export const app = express();
 import dotenv from 'dotenv';
+import uploadFile from './uploadFile.js';
+import saveSubscription from './saveSubscription.js';
+import saveInvoice from './saveInvoice.js';
+import savePayments from './savePayments.js';
+import gooogleauth from './googleauth.js';
+export const app = express();
+
 dotenv.config();
 app.use(cors());
-app.use(express.json());
-app.use(express.urlencoded({ extended: true }));
-import uploadFile from './uploadFile.js';
+app.use(express.json({ limit: '50mb' }));
+app.use(express.urlencoded({ limit: '50mb', extended: true }));

 app.post('/file_upload', uploadFile);
+
+app.post('/savesubscription', saveSubscription)
+app.post('/saveinvoice', saveInvoice)
+app.post('/savepayment', savePayments)
+app.post('/googleauth', gooogleauth)
+
+
+
@@ -0,0 +1,59 @@
+import axios from 'axios';
+const appId = process.env.APP_ID;
+const serverUrl = process.env.SERVER_URL;
+export default async function gooogleauth(request, response) {
+  const code = request.body.code;
+  const baseUrl = new URL(process.env.SERVER_URL);
+
+  try {
+    const userRes = await axios.get(serverUrl + '/users/me', {
+      headers: {
+        'X-Parse-Application-Id': appId,
+        'X-Parse-Session-Token': request.headers['sessiontoken'],
+      },
+    });
+    const userId = userRes.data && userRes.data.objectId;
+    if (userId) {
+      const clientId = process.env.GOOGLE_CLIENT_ID;
+      const clientSecret = process.env.GOOGLE_CLIENT_SECRET;
+      const redirectUri =
+        baseUrl?.hostname === 'localhost'
+          ? 'http://localhost:3000'
+          : 'https://console.opensignlabs.com'; // Should match the redirect URI used in the authorization request
+      const tokenEndpoint = 'https://oauth2.googleapis.com/token';
+
+      const params = new URLSearchParams();
+      params.append('code', code);
+      params.append('client_id', clientId);
+      params.append('client_secret', clientSecret);
+      params.append('redirect_uri', redirectUri);
+      params.append('grant_type', 'authorization_code');
+
+      const res = await axios.post(tokenEndpoint, params);
+      //   console.log('oauthres ', res.data);
+      const refresh_token = res.data.refresh_token;
+      const extUserCls = new Parse.Query('contracts_Users');
+      extUserCls.equalTo('UserId', { __type: 'Pointer', className: '_User', objectId: userId });
+      const extUser = await extUserCls.first({ useMasterKey: true });
+
+      if (extUser) {
+        const extUserCls = new Parse.Object('contracts_Users');
+        extUserCls.id = extUser.id;
+        extUserCls.set('google_refresh_token', refresh_token);
+        extUserCls.set('active_mail_adapter', 'google');
+        const updateExtUser = await extUserCls.save(null, { useMasterKey: true });
+        // console.log('updateExtUser ', updateExtUser);
+      }
+      return response.status(200).json({ status: 'success' });
+    } else {
+      return response.status(404).json({ message: 'user not found!' });
+    }
+  } catch (err) {
+    console.log('err in google auth', err);
+    if (err?.response?.data?.error) {
+      return response.status(404).json({ message: err.response.data.error });
+    } else {
+      return response.status(404).json({ message: err.message });
+    }
+  }
+}
@@ -0,0 +1,51 @@
+export default async function saveInvoice(request, response) {
+  const InvoiceId = request.body.data.invoice.invoice_id;
+  const body = request.body;
+  const Email = request.body.data.invoice.email;
+
+  try {
+    const extUserCls = new Parse.Query('contracts_Users');
+    extUserCls.equalTo('Email', Email);
+    const extUser = await extUserCls.first({ useMasterKey: true });
+    if (extUser) {
+      const invoiceCls = new Parse.Query('contracts_Invoices');
+      invoiceCls.equalTo('InvoiceId', InvoiceId);
+      const invoice = await invoiceCls.first({ useMasterKey: true });
+      if (invoice) {
+        const updateInvoice = new Parse.Object('contracts_Invoices');
+        updateInvoice.id = invoice.id;
+        updateInvoice.set('InvoiceDetails', body);
+        await updateInvoice.save(null, { useMasterKey: true });
+        return response.status(200).json({ status: 'update invoice!' });
+      } else {
+        const createInvoice = new Parse.Object('contracts_Invoices');
+        createInvoice.set('InvoiceId', InvoiceId);
+        createInvoice.set('InvoiceDetails', body);
+        createInvoice.set('ExtUserPtr', {
+          __type: 'Pointer',
+          className: 'contracts_Users',
+          objectId: extUser.id,
+        });
+        createInvoice.set('CreatedBy', {
+          __type: 'Pointer',
+          className: '_User',
+          objectId: extUser.get('UserId').id,
+        });
+        if (extUser?.get('TenantId')?.id) {
+          createInvoice.set('TenantId', {
+            __type: 'Pointer',
+            className: 'partners_Tenant',
+            objectId: extUser.get('TenantId').id,
+          });
+        }
+        await createInvoice.save(null, { useMasterKey: true });
+        return response.status(200).json({ status: 'create invoice!' });
+      }
+    } else {
+      return response.status(404).json({ status: 'user not found!' });
+    }
+  } catch (err) {
+    console.log('Err in save invoice', err);
+    return response.status(400).json({ status: 'error:' + err.message });
+  }
+}
@@ -0,0 +1,50 @@
+export default async function savePayments(request, response) {
+  const PaymentId = request.body.data.payment.payment_id;
+  const body = request.body;
+  const Email = request.body.data.payment.email;
+  try {
+    const extUserCls = new Parse.Query('contracts_Users');
+    extUserCls.equalTo('Email', Email);
+    const extUser = await extUserCls.first({ useMasterKey: true });
+    if (extUser) {
+      const paymentCls = new Parse.Query('contracts_Payments');
+      paymentCls.equalTo('PaymentId', PaymentId);
+      const payment = await paymentCls.first({ useMasterKey: true });
+      if (payment) {
+        const updatePayment = new Parse.Object('contracts_Payments');
+        updatePayment.id = payment.id;
+        updatePayment.set('PaymentDetails', body);
+        await updatePayment.save(null, { useMasterKey: true });
+        return response.status(200).json({ status: 'update Payment!' });
+      } else {
+        const createPayment = new Parse.Object('contracts_Payments');
+        createPayment.set('PaymentId', PaymentId);
+        createPayment.set('PaymentDetails', body);
+        createPayment.set('ExtUserPtr', {
+          __type: 'Pointer',
+          className: 'contracts_Users',
+          objectId: extUser.id,
+        });
+        createPayment.set('CreatedBy', {
+          __type: 'Pointer',
+          className: '_User',
+          objectId: extUser.get('UserId').id,
+        });
+        if (extUser?.get('TenantId')?.id) {
+          createPayment.set('TenantId', {
+            __type: 'Pointer',
+            className: 'partners_Tenant',
+            objectId: extUser.get('TenantId').id,
+          });
+        }
+        await createPayment.save(null, { useMasterKey: true });
+        return response.status(200).json({ status: 'create payments!' });
+      }
+    } else {
+      return response.status(404).json({ status: 'user not found!' });
+    }
+  } catch (err) {
+    console.log('Err in save payment', err);
+    return response.status(400).json({ status: 'error:' + err.message });
+  }
+}
@@ -0,0 +1,60 @@
+export default async function saveSubscription(request, response) {
+  const SubscriptionId = request.body.data.subscription.subscription_id;
+  const body = request.body;
+  const Email = request.body.data.subscription.customer.email;
+  const Next_billing_date = request.body.data.subscription.next_billing_at;
+  const planCode = request.body.data.subscription.plan.plan_code
+
+  try {
+    const extUserCls = new Parse.Query('contracts_Users');
+    extUserCls.equalTo('Email', Email);
+    const extUser = await extUserCls.first({ useMasterKey: true });
+    if (extUser) {
+      const subcriptionCls = new Parse.Query('contracts_Subscriptions');
+      subcriptionCls.equalTo('TenantId', {
+        __type: 'Pointer',
+        className: 'partners_Tenant',
+        objectId: extUser.get('TenantId').id,
+      });
+      const subscription = await subcriptionCls.first({ useMasterKey: true });
+      if (subscription) {
+        const updateSubscription = new Parse.Object('contracts_Subscriptions');
+        updateSubscription.id = subscription.id;
+        updateSubscription.set('SubscriptionId', SubscriptionId);
+        updateSubscription.set('SubscriptionDetails', body);
+        updateSubscription.set('Next_billing_date', new Date(Next_billing_date));
+        updateSubscription.set('PlanCode', planCode);
+        await updateSubscription.save(null, { useMasterKey: true });
+        return response.status(200).json({ status: 'update subscription!' });
+      } else {
+        const createSubscription = new Parse.Object('contracts_Subscriptions');
+        createSubscription.set('SubscriptionId', SubscriptionId);
+        createSubscription.set('SubscriptionDetails', body);
+        createSubscription.set('ExtUserPtr', {
+          __type: 'Pointer',
+          className: 'contracts_Users',
+          objectId: extUser.id,
+        });
+        createSubscription.set('CreatedBy', {
+          __type: 'Pointer',
+          className: '_User',
+          objectId: extUser.get('UserId').id,
+        });
+        createSubscription.set('TenantId', {
+          __type: 'Pointer',
+          className: 'partners_Tenant',
+          objectId: extUser.get('TenantId').id,
+        });
+        createSubscription.set('Next_billing_date', new Date(Next_billing_date));
+        createSubscription.set('PlanCode', planCode);
+        await createSubscription.save(null, { useMasterKey: true });
+        return response.status(200).json({ status: 'create subscription!' });
+      }
+    } else {
+      return response.status(404).json({ status: 'user not found!' });
+    }
+  } catch (err) {
+    console.log('Err in save subscription', err);
+    return response.status(400).json({ status: 'error:' + err.message });
+  }
+}
@@ -3,6 +3,7 @@ import multer from 'multer';
 import multerS3 from 'multer-s3';
 import aws from 'aws-sdk';
 import dotenv from 'dotenv';
+import { useLocal } from '../../Utils.js';
 dotenv.config();

 function sanitizeFileName(fileName) {
@@ -51,7 +52,7 @@ async function uploadFile(req, res) {
    const parseBaseUrl = process.env.SERVER_URL;
    const parseAppId = process.env.APP_ID;
    let fileStorage;
-    if (process.env.USE_LOCAL == 'TRUE') {
+    if (useLocal === 'true') {
      fileStorage = multer.diskStorage({
        destination: function (req, file, cb) {
          cb(null, 'files/files');
@@ -147,7 +148,7 @@ async function uploadFile(req, res) {
      const status = 'Success';
      //res.header("Access-Control-Allow-Headers", "Content-Type");
      //res.setHeader("Access-Control-Allow-Origin", "*");
-      if (process.env.USE_LOCAL == 'TRUE') {
+      if (useLocal === 'true') {
        console.log(req.file);
        var fileUrl = `${parseBaseUrl}/files/${parseAppId}/${req.file.filename}`;
      } else {
@@ -17,7 +17,6 @@ import getTemplatetList from './routes/getTemplateList.js';
 import updateTemplate from './routes/updateTemplate.js';
 import createContact from './routes/createContact.js';
 import multer from 'multer';
-// import fs from 'node:fs';
 import updateDocument from './routes/updateDocument.js';
 import deleteDocument from './routes/deleteDocument.js';
 import createDocumentWithTemplate from './routes/CreateDocumentWithTemplate.js';
@@ -26,6 +25,11 @@ import deleteWebhook from './routes/deleteWebhook.js';
 import getWebhook from './routes/getWebhook.js';
 import createDocumentwithCoordinate from './routes/createDocumentwithCoordinate.js';
 import createTemplatewithCoordinate from './routes/createTemplatewithCoordinate.js';
+import resendMail from './routes/resendMail.js';
+import getFolder from './routes/getFolder.js';
+import createFolder from './routes/createFolder.js';
+import updateFolder from './routes/updateFolder.js';
+import getFolderList from './routes/getFolderList.js';
 dotenv.config();
 const storage = multer.memoryStorage();
 const upload = multer({ storage: storage });
@@ -102,3 +106,18 @@ app.post('/webhook', saveWebhook);

 // set and update webhook
 app.delete('/webhook', deleteWebhook);
+
+// resend mail
+app.post('/resendmail', resendMail);
+
+// create folder
+app.post('/createfolder', createFolder);
+
+// update folder
+app.put('/folder/:folder_id', updateFolder);
+
+// get folder
+app.get('/folder/:folder_id', getFolder);
+
+// get folder list
+app.get('/folderlist', getFolderList);
@@ -50,11 +50,12 @@ export default async function createDocumentWithTemplate(request, response) {
  const folderId = request.body.folderId;
  const templateId = request.params.template_id;
  const protocol = customAPIurl();
-  const baseUrl = new URL(process.env.SERVER_URL);
+  const baseUrl = new URL(process.env.PUBLIC_URL);
  const send_email = request.body.send_email;
  const email_subject = request.body.email_subject;
  const email_body = request.body.email_body;
  const sendInOrder = request.body.sendInOrder || false;
+  const TimeToCompleteDays = request.body.timeToCompleteDays || 15;

  try {
    const reqToken = request.headers['x-api-token'];
@@ -88,12 +89,20 @@ export default async function createDocumentWithTemplate(request, response) {
          const updateSigners = placeholder.every(y => signers?.some(x => x.role === y.Role));
          // console.log('isValid ', isValid);
          if (isValid && updateSigners) {
+            //Check if every item's placeholders contain at least one placeholder with type 'signature'.
+            let isSignature = template?.Placeholders?.every(item =>
+              item?.placeHolder.some(x => x?.pos.some(data => data?.type === 'signature'))
+            );
+            if (!isSignature) {
+              return response
+                .status(400)
+                .json({ error: 'Please add at least one signature widget for all signers' });
+            }
            const folderPtr = {
              __type: 'Pointer',
              className: 'contracts_Document',
              objectId: folderId,
            };
-            const template = JSON.parse(JSON.stringify(templateRes));
            const object = new Parse.Object('contracts_Document');
            object.set('Name', template.Name);
            if (template?.Note) {
@@ -169,6 +178,10 @@ export default async function createDocumentWithTemplate(request, response) {
              object.set('Signers', templateSigner);
            }
            object.set('URL', template.URL);
+            object.set('SignedUrl', template.URL);
+            if (TimeToCompleteDays) {
+              object.set('TimeToCompleteDays', TimeToCompleteDays);
+            }
            object.set('CreatedBy', template.CreatedBy);
            object.set('ExtUserPtr', {
              __type: 'Pointer',
@@ -217,9 +230,10 @@ export default async function createDocumentWithTemplate(request, response) {
                  };

                  const objectId = contactMail[i].contactPtr.objectId;
-
                  const hostUrl = baseUrl.origin;
-                  let signPdf = `${hostUrl}/login/${res.id}/${contactMail[i].email}/${objectId}/${serverParams}`;
+                  //encode this url value `${res.id}/${contactMail[i].email}/${objectId}` to base64 using `btoa` function
+                  const encodeBase64 = btoa(`${res.id}/${contactMail[i].email}/${objectId}`);
+                  let signPdf = `${hostUrl}/login/${encodeBase64}`;
                  const openSignUrl = 'https://www.opensignlabs.com/contact-us';
                  const orgName = template.ExtUserPtr.Company ? template.ExtUserPtr.Company : '';
                  const themeBGcolor = '#47a3ad';
@@ -266,13 +280,13 @@ export default async function createDocumentWithTemplate(request, response) {
                    replaceVar = { subject: replaceVar.subject, body: email_html };
                  } else if (email_body) {
                    replaceVar = replaceMailVaribles(
-                      `${template.ExtUserPtr.Name} has requested you to sign ${template.Name}`,
+                      `${template.ExtUserPtr.Name} has requested you to sign "${template.Name}"`,
                      email_body,
                      variables
                    );
                  } else {
                    replaceVar = {
-                      subject: `${template.ExtUserPtr.Name} has requested you to sign ${template.Name}`,
+                      subject: `${template.ExtUserPtr.Name} has requested you to sign "${template.Name}"`,
                      body: email_html,
                    };
                  }
@@ -284,6 +298,7 @@ export default async function createDocumentWithTemplate(request, response) {
                    subject: subject,
                    from: sender,
                    html: html,
+                    extUserId: template.ExtUserPtr.objectId,
                  };
                  sendMail = await axios.post(url, params, { headers: headers });
                } catch (error) {
@@ -319,7 +334,9 @@ export default async function createDocumentWithTemplate(request, response) {
              objectId: res.id,
              signurl: contact.map(x => ({
                email: x.email,
-                url: `${baseUrl.origin}/login/${res.id}/${x.email}/${x.contactPtr.objectId}/${serverParams}`,
+                url: `${baseUrl.origin}/login/${btoa(
+                  `${res.id}/${x.email}/${x.contactPtr.objectId}`
+                )}`,
              })),
              message: 'Document sent successfully!',
            });
@@ -1,5 +1,12 @@
 import axios from 'axios';
-import { color, customAPIurl, replaceMailVaribles } from '../../../../Utils.js';
+import {
+  color,
+  customAPIurl,
+  replaceMailVaribles,
+  saveFileUsage,
+  formatWidgetOptions,
+  sanitizeFileName,
+} from '../../../../Utils.js';

 // `sendDoctoWebhook` is used to send res data of document on webhook
 async function sendDoctoWebhook(doc, WebhookUrl, userId) {
@@ -8,6 +15,7 @@ async function sendDoctoWebhook(doc, WebhookUrl, userId) {
      event: 'created',
      ...doc,
    };
+
    await axios
      .post(WebhookUrl, params, {
        headers: { 'Content-Type': 'application/json' },
@@ -58,13 +66,15 @@ export default async function createDocumentwithCoordinate(request, response) {
  const email_subject = request.body.email_subject;
  const email_body = request.body.email_body;
  const sendInOrder = request.body.sendInOrder || false;
+  const TimeToCompleteDays = request.body.timeToCompleteDays || 15;
  // console.log('fileData ', fileData);
  const protocol = customAPIurl();
-  const baseUrl = new URL(process.env.SERVER_URL);
+  const baseUrl = new URL(process.env.PUBLIC_URL);
  const reqToken = request.headers['x-api-token'];
  if (!reqToken) {
    return response.status(400).json({ error: 'Please Provide API Token' });
  }
+
  try {
    const tokenQuery = new Parse.Query('appToken');
    tokenQuery.equalTo('token', reqToken);
@@ -79,19 +89,32 @@ export default async function createDocumentwithCoordinate(request, response) {
        objectId: parseUser.userId.objectId,
      };
      if (signers && signers.length > 0) {
+        // Check if at least one signature exists among all items in the signers array
+        let isSignExist = signers.every(item =>
+          item.widgets.some(data => data?.type === 'signature')
+        );
+        if (!isSignExist) {
+          return response
+            .status(400)
+            .json({ error: 'Please add at least one signature widget for all signers' });
+        }
        let fileUrl;
        if (request.files?.[0]) {
+          const base64 = fileData?.toString('base64');
          const file = new Parse.File(request.files?.[0]?.originalname, {
-            base64: fileData?.toString('base64'),
+            base64: base64,
          });
          await file.save({ useMasterKey: true });
          fileUrl = file.url();
+          const buffer = Buffer.from(base64, 'base64');
+          saveFileUsage(buffer.length, fileUrl, parseUser.userId.objectId);
        } else {
-          const file = new Parse.File(`${name}.pdf`, {
-            base64: base64File,
-          });
+          const filename = sanitizeFileName(`${name}.pdf`);
+          const file = new Parse.File(filename, { base64: base64File }, 'application/pdf');
          await file.save({ useMasterKey: true });
          fileUrl = file.url();
+          const buffer = Buffer.from(base64File, 'base64');
+          saveFileUsage(buffer.length, fileUrl, parseUser.userId.objectId);
        }
        const contractsUser = new Parse.Query('contracts_Users');
        contractsUser.equalTo('UserId', userPtr);
@@ -117,8 +140,12 @@ export default async function createDocumentwithCoordinate(request, response) {
          object.set('SendinOrder', sendInOrder);
        }
        object.set('URL', fileUrl);
+        object.set('SignedUrl', fileUrl);
        object.set('CreatedBy', userPtr);
        object.set('ExtUserPtr', extUserPtr);
+        if (TimeToCompleteDays) {
+          object.set('TimeToCompleteDays', TimeToCompleteDays);
+        }
        object.set('IsSendMail', send_email);
        let contact = [];
        if (signers && signers.length > 0) {
@@ -170,17 +197,17 @@ export default async function createDocumentwithCoordinate(request, response) {

            for (const widget of signer.widgets) {
              const pageNumber = widget.page;
+              const options = formatWidgetOptions(widget.type, widget.options);
              const page = placeHolder.find(page => page.pageNumber === pageNumber);
-              const signOpt = { name: 'signature', status: 'required' };
              const widgetData = {
-                isStamp: widget.type === 'stamp',
+                isStamp: widget.type === 'stamp' || widget.type === 'image',
                key: randomId(),
                isDrag: false,
                scale: 1,
                isMobile: false,
                zIndex: 1,
-                type: widget.type,
-                options: widget.type === 'signature' ? signOpt : widget.options,
+                type: widget.type === 'textbox' ? 'text input' : widget.type,
+                options: options,
                Width: widget.w,
                Height: widget.h,
                xPosition: widget.x,
@@ -242,7 +269,6 @@ export default async function createDocumentwithCoordinate(request, response) {
          year: 'numeric',
        });
        let sender = parseExtUser.Email;
-        let sendMail;
        const serverUrl = process.env.SERVER_URL;
        const newServer = serverUrl.replaceAll('/', '%2F');
        const serverParams = `${newServer}%2F&${process.env.APP_ID}&contracts`;
@@ -266,7 +292,9 @@ export default async function createDocumentwithCoordinate(request, response) {

              const objectId = contactMail[i].contactPtr.objectId;
              const hostUrl = baseUrl.origin;
-              let signPdf = `${hostUrl}/login/${res.id}/${contactMail[i].email}/${objectId}/${serverParams}`;
+              //encode this url value `${response.id}/${contactMail[i].email}/${objectId}` to base64 using `btoa` function
+              const encodeBase64 = btoa(`${res.id}/${contactMail[i].email}/${objectId}`);
+              let signPdf = `${hostUrl}/login/${encodeBase64}`;
              const openSignUrl = 'https://www.opensignlabs.com/contact-us';
              const orgName = parseExtUser.Company ? parseExtUser.Company : '';
              const themeBGcolor = '#47a3ad';
@@ -312,13 +340,13 @@ export default async function createDocumentwithCoordinate(request, response) {
                replaceVar = { subject: replaceVar.subject, body: email_html };
              } else if (email_body) {
                replaceVar = replaceMailVaribles(
-                  `${parseExtUser.Name} has requested you to sign ${name}`,
+                  `${parseExtUser.Name} has requested you to sign "${name}"`,
                  email_body,
                  variables
                );
              } else {
                replaceVar = {
-                  subject: `${parseExtUser.Name} has requested you to sign ${parseExtUser.Name}`,
+                  subject: `${parseExtUser.Name} has requested you to sign "${name}"`,
                  body: email_html,
                };
              }
@@ -330,9 +358,10 @@ export default async function createDocumentwithCoordinate(request, response) {
                subject: subject,
                from: sender,
                html: html,
+                extUserId: extUser.id,
              };

-              sendMail = await axios.post(url, params, { headers: headers });
+              await axios.post(url, params, { headers: headers });
            } catch (error) {
              console.log('error', error);
            }
@@ -350,7 +379,7 @@ export default async function createDocumentwithCoordinate(request, response) {
          objectId: res.id,
          signurl: contact.map(x => ({
            email: x.email,
-            url: `${baseUrl.origin}/login/${res.id}/${x.email}/${x.contactPtr.objectId}/${serverParams}`,
+            url: `${baseUrl.origin}/login/${btoa(`${res.id}/${x.email}/${x.contactPtr.objectId}`)}`,
          })),
          message: 'Document sent successfully!',
        });
@@ -0,0 +1,73 @@
+export default async function createFolder(request, response) {
+  const apiToken = request.headers['x-api-token'];
+  const folderName = request.body.folderName;
+  const parentFolderId = request.body.parentFolderId;
+  if (!apiToken) {
+    return response.status(400).json({ error: 'Please Provide API Token' });
+  }
+  try {
+    const tokenQuery = new Parse.Query('appToken');
+    tokenQuery.equalTo('token', apiToken);
+    tokenQuery.include('userId');
+    const token = await tokenQuery.first({ useMasterKey: true });
+    if (token !== undefined) {
+      // Valid Token then proceed request
+      const parseUser = JSON.parse(JSON.stringify(token));
+      const userPtr = {
+        __type: 'Pointer',
+        className: '_User',
+        objectId: parseUser.userId.objectId,
+      };
+      const userQuery = new Parse.Query('contracts_Users');
+      userQuery.equalTo('UserId', userPtr);
+      const extUser = await userQuery.first({ useMasterKey: true });
+
+      const folderCls = new Parse.Object('contracts_Document');
+      folderCls.set('Name', folderName);
+      folderCls.set('CreatedBy', userPtr);
+      folderCls.set('Type', 'Folder');
+      folderCls.set('ExtUserPtr', {
+        __type: 'Pointer',
+        className: 'contracts_Users',
+        objectId: extUser.id,
+      });
+      if (parentFolderId) {
+        folderCls.set('Folder', {
+          __type: 'Pointer',
+          className: 'contracts_Document',
+          objectId: parentFolderId,
+        });
+      }
+      const acl = new Parse.ACL();
+      acl.setReadAccess(parseUser.userId.objectId, true); // Allow read access to the userPtr
+      acl.setWriteAccess(parseUser.userId.objectId, true); // Allow write access to the userPtr
+
+      // Set the ACL to the document
+      folderCls.setACL(acl);
+
+      const _resFolder = await folderCls.save(null, { useMasterKey: true });
+      if (_resFolder) {
+        if (request.posthog) {
+          request.posthog?.capture({
+            distinctId: parseUser.userId.email,
+            event: 'api_create_folder',
+            properties: { response_code: 200 },
+          });
+        }
+        const parseRes = JSON.parse(JSON.stringify(_resFolder));
+        return response.json({
+          objectId: parseRes.objectId,
+          folderName: parseRes.Name,
+          parentFolderId: parseRes?.Folder?.objectId || '',
+          createdAt: parseRes.createdAt,
+          updatedAt: parseRes.updatedAt,
+        });
+      }
+    } else {
+      return response.status(405).json({ error: 'Invalid API Token!' });
+    }
+  } catch (err) {
+    console.log('err ', err);
+    return response.status(400).json({ error: 'Something went wrong, please try again later!' });
+  }
+}
@@ -1,6 +1,4 @@
-import { customAPIurl } from '../../../../Utils.js';
-
-const randomId = () => Math.floor(1000 + Math.random() * 9000);
+import { saveFileUsage } from '../../../../Utils.js';
 export default async function createTemplate(request, response) {
  const name = request.body?.title;
  const note = request.body?.note;
@@ -10,7 +8,7 @@ export default async function createTemplate(request, response) {
  const base64File = request.body.file;
  const SendinOrder = request.body.sendInOrder || false;
  const fileData = request.files?.[0] ? request.files[0].buffer : null;
-  const baseUrl = new URL(process.env.SERVER_URL);
+  const baseUrl = new URL(process.env.PUBLIC_URL);

  try {
    const reqToken = request.headers['x-api-token'];
@@ -36,12 +34,17 @@ export default async function createTemplate(request, response) {
        });
        await file.save({ useMasterKey: true });
        fileUrl = file.url();
+        const buffer = Buffer.from(base64File, 'base64');
+        saveFileUsage(buffer.length, fileUrl, parseUser.userId.objectId);
      } else {
+        const base64 = fileData?.toString('base64');
        const file = new Parse.File(request.files?.[0]?.originalname, {
-          base64: fileData?.toString('base64'),
+          base64: base64,
        });
        await file.save({ useMasterKey: true });
        fileUrl = file.url();
+        const buffer = Buffer.from(base64, 'base64');
+        saveFileUsage(buffer.length, fileUrl, parseUser.userId.objectId);
      }

      const contractsUser = new Parse.Query('contracts_Users');
@@ -1,5 +1,11 @@
 import axios from 'axios';
-import { color, customAPIurl } from '../../../../Utils.js';
+import {
+  color,
+  customAPIurl,
+  saveFileUsage,
+  formatWidgetOptions,
+  sanitizeFileName,
+} from '../../../../Utils.js';

 const randomId = () => Math.floor(1000 + Math.random() * 9000);
 export default async function createTemplatewithCoordinate(request, response) {
@@ -34,17 +40,21 @@ export default async function createTemplatewithCoordinate(request, response) {
      if (signers && signers.length > 0) {
        let fileUrl;
        if (request.files?.[0]) {
+          const base64 = fileData?.toString('base64');
          const file = new Parse.File(request.files?.[0]?.originalname, {
-            base64: fileData?.toString('base64'),
+            base64: base64,
          });
          await file.save({ useMasterKey: true });
          fileUrl = file.url();
+          const buffer = Buffer.from(base64, 'base64');
+          saveFileUsage(buffer.length, fileUrl, parseUser.userId.objectId);
        } else {
-          const file = new Parse.File(`${name}.pdf`, {
-            base64: base64File,
-          });
+          const filename = sanitizeFileName(`${name}.pdf`);
+          const file = new Parse.File(filename, { base64: base64File }, 'application/pdf');
          await file.save({ useMasterKey: true });
          fileUrl = file.url();
+          const buffer = Buffer.from(base64File, 'base64');
+          saveFileUsage(buffer.length, fileUrl, parseUser.userId.objectId);
        }
        const contractsUser = new Parse.Query('contracts_Users');
        contractsUser.equalTo('UserId', userPtr);
@@ -129,16 +139,16 @@ export default async function createTemplatewithCoordinate(request, response) {
            for (const widget of signer.widgets) {
              const pageNumber = widget.page;
              const page = placeHolder.find(page => page.pageNumber === pageNumber);
-              const signOpt = { name: 'signature', status: 'required' };
+              const options = formatWidgetOptions(widget.type, widget.options);
              const widgetData = {
-                isStamp: widget.type === 'stamp',
+                isStamp: widget.type === 'stamp' || widget.type === 'image',
                key: randomId(),
                isDrag: false,
                scale: 1,
                isMobile: false,
                zIndex: 1,
-                type: widget.type,
-                options: widget.type === 'signature' ? signOpt : widget.options,
+                type: widget.type === 'textbox' ? 'text input' : widget.type,
+                options: options,
                Width: widget.w,
                Height: widget.h,
                xPosition: widget.x,
@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { customAPIurl } from '../../../../Utils.js';
+import { customAPIurl, saveFileUsage } from '../../../../Utils.js';

 // const randomId = () => Math.floor(1000 + Math.random() * 9000);
 export default async function draftDocument(request, response) {
@@ -14,7 +14,7 @@ export default async function draftDocument(request, response) {
  const SendinOrder = request.body.sendInOrder || false;
  // console.log('fileData ', fileData);
  const protocol = customAPIurl();
-  const baseUrl = new URL(process.env.SERVER_URL);
+  const baseUrl = new URL(process.env.PUBLIC_URL);

  try {
    const reqToken = request.headers['x-api-token'];
@@ -36,17 +36,22 @@ export default async function draftDocument(request, response) {
      if (signers && signers.length > 0) {
        let fileUrl;
        if (request.files?.[0]) {
+          const base64 = fileData?.toString('base64');
          const file = new Parse.File(request.files?.[0]?.originalname, {
-            base64: fileData?.toString('base64'),
+            base64: base64,
          });
          await file.save({ useMasterKey: true });
          fileUrl = file.url();
+          const buffer = Buffer.from(base64, 'base64');
+          saveFileUsage(buffer.length, fileUrl, parseUser.userId.objectId);
        } else {
          const file = new Parse.File(`${name}.pdf`, {
            base64: base64File,
          });
          await file.save({ useMasterKey: true });
          fileUrl = file.url();
+          const buffer = Buffer.from(base64File, 'base64');
+          saveFileUsage(buffer.length, fileUrl, parseUser.userId.objectId);
        }
        const contractsUser = new Parse.Query('contracts_Users');
        contractsUser.equalTo('UserId', userPtr);
@@ -40,6 +40,7 @@ export default async function getDocument(request, response) {
          note: document.Note || '',
          folder: { objectId: document?.Folder?.objectId, name: document?.Folder?.Name } || '',
          file: document?.SignedUrl || document.URL,
+          certificate: document?.CertificateUrl || '',
          owner: document?.ExtUserPtr?.Name,
          signers:
            document?.Placeholders?.map(y => ({
@@ -77,7 +77,7 @@ export default async function getDocumentList(request, response) {
              title: x.Name,
              note: x.Note || '',
              folder: { objectId: x?.Folder?.objectId, name: x?.Folder?.Name } || '',
-              file: x?.SignedUrl || x.URL,
+              // file: x?.SignedUrl || x.URL,
              owner: x?.ExtUserPtr?.Name,
              signers:
                x?.Placeholders?.map(y => ({
@@ -0,0 +1,64 @@
+export default async function getFolder(request, response) {
+  const apiToken = request.headers['x-api-token'];
+  const folder_id = request.params.folder_id;
+  if (!apiToken) {
+    return response.status(400).json({ error: 'Please Provide API Token' });
+  }
+  try {
+    const tokenQuery = new Parse.Query('appToken');
+    tokenQuery.equalTo('token', apiToken);
+    tokenQuery.include('userId');
+    const token = await tokenQuery.first({ useMasterKey: true });
+    if (token !== undefined) {
+      // Valid Token then proceed request
+      const parseUser = JSON.parse(JSON.stringify(token));
+      const userPtr = {
+        __type: 'Pointer',
+        className: '_User',
+        objectId: parseUser.userId.objectId,
+      };
+
+      const folderCls = new Parse.Query('contracts_Document');
+      folderCls.equalTo('CreatedBy', userPtr);
+      folderCls.equalTo('objectId', folder_id);
+      folderCls.equalTo('Type', 'Folder');
+      folderCls.notEqualTo('IsArchive', true);
+      folderCls.descending('createdAt');
+      folderCls.include('Folder');
+
+      const res = await folderCls.first({ useMasterKey: true });
+      if (res) {
+        const parseRes = JSON.parse(JSON.stringify(res));
+        if (request.posthog) {
+          request.posthog?.capture({
+            distinctId: parseUser.userId.email,
+            event: 'api_get_folder',
+            properties: { response_code: 200 },
+          });
+        }
+        return response.json({
+          objectId: parseRes.objectId,
+          folderName: parseRes.Name,
+          parentFolderId: parseRes?.Folder?.objectId || '',
+          parentFolderName: parseRes?.Folder?.Name || '',
+          createdAt: parseRes.createdAt,
+          updatedAt: parseRes.updatedAt,
+        });
+      } else {
+        if (request.posthog) {
+          request.posthog?.capture({
+            distinctId: parseUser.userId.email,
+            event: 'api_get_folder',
+            properties: { response_code: 404 },
+          });
+        }
+        return response.status(404).json({ error: 'folder not found.' });
+      }
+    } else {
+      return response.status(405).json({ error: 'Invalid API Token!' });
+    }
+  } catch (err) {
+    console.log('err ', err);
+    return response.status(400).json({ error: 'Something went wrong, please try again later!' });
+  }
+}
@@ -0,0 +1,76 @@
+export default async function getFolderList(request, response) {
+  const apiToken = request.headers['x-api-token'];
+  const parentFolderId = request.query?.parentFolderId || '';
+  if (!apiToken) {
+    return response.status(400).json({ error: 'Please Provide API Token' });
+  }
+  try {
+    const tokenQuery = new Parse.Query('appToken');
+    tokenQuery.equalTo('token', apiToken);
+    tokenQuery.include('userId');
+    const token = await tokenQuery.first({ useMasterKey: true });
+    if (token !== undefined) {
+      // Valid Token then proceed request
+      const parseUser = JSON.parse(JSON.stringify(token));
+      const userPtr = {
+        __type: 'Pointer',
+        className: '_User',
+        objectId: parseUser.userId.objectId,
+      };
+      const limit = request?.query?.limit ? parseInt(request.query.limit) : 100;
+      const skip = request?.query?.skip ? parseInt(request.query.skip) : 0;
+      const folderCls = new Parse.Query('contracts_Document');
+      folderCls.equalTo('CreatedBy', userPtr);
+      folderCls.equalTo('Type', 'Folder');
+      folderCls.notEqualTo('IsArchive', true);
+      folderCls.descending('createdAt');
+      folderCls.include('Folder');
+      if (parentFolderId) {
+        folderCls.equalTo('Folder', {
+          __type: 'Pointer',
+          className: 'contracts_Document',
+          objectId: parentFolderId,
+        });
+      } else {
+        folderCls.doesNotExist('Folder');
+      }
+      folderCls.descending('createdAt');
+      folderCls.limit(limit);
+      folderCls.skip(skip);
+      const res = await folderCls.find({ useMasterKey: true });
+      if (res && res.length > 0) {
+        const parseRes = JSON.parse(JSON.stringify(res));
+        const folderlist = parseRes.map(x => ({
+          objectId: x.objectId,
+          folderName: x.Name,
+          parentFolderId: x?.Folder?.objectId || '',
+          parentFolderName: x?.Folder?.Name || '',
+          createdAt: x.createdAt,
+          updatedAt: x.updatedAt,
+        }));
+        if (request.posthog) {
+          request.posthog?.capture({
+            distinctId: parseUser.userId.email,
+            event: 'api_get_Folder_list',
+            properties: { response_code: 200 },
+          });
+        }
+        return response.json({ result: folderlist });
+      } else {
+        if (request.posthog) {
+          request.posthog?.capture({
+            distinctId: parseUser.userId.email,
+            event: 'api_get_Folder_list',
+            properties: { response_code: 200 },
+          });
+        }
+        return response.json({ result: [] });
+      }
+    } else {
+      return response.status(405).json({ error: 'Invalid API Token!' });
+    }
+  } catch (err) {
+    console.log('err ', err);
+    return response.status(400).json({ error: 'Something went wrong, please try again later!' });
+  }
+}
@@ -0,0 +1,157 @@
+import axios from 'axios';
+import { replaceMailVaribles } from '../../../../Utils.js';
+
+export default async function resendMail(request, response) {
+  try {
+    const reqToken = request.headers['x-api-token'];
+    const docId = request.body.document_id;
+    const userMail = request.body.email;
+    const email_subject = request.body.email_subject;
+    const email_body = request.body.email_body;
+    const baseUrl = new URL(process.env.SERVER_URL);
+
+    if (!reqToken) {
+      return response.status(400).json({ error: 'Please Provide API Token' });
+    }
+    const tokenQuery = new Parse.Query('appToken');
+    tokenQuery.equalTo('token', reqToken);
+    tokenQuery.include('userId');
+    const token = await tokenQuery.first({ useMasterKey: true });
+    if (token !== undefined) {
+      // Valid Token then proceed request
+      const parseUser = JSON.parse(JSON.stringify(token));
+      const userPtr = {
+        __type: 'Pointer',
+        className: '_User',
+        objectId: parseUser.userId.objectId,
+      };
+
+      const docQuery = new Parse.Query('contracts_Document');
+      docQuery.equalTo('objectId', docId);
+      docQuery.equalTo('CreatedBy', userPtr);
+      docQuery.include('Signers,ExtUserPtr');
+      docQuery.notEqualTo('IsCompleted', true);
+      docQuery.notEqualTo('IsDeclined', true);
+      docQuery.notEqualTo('IsArchive', true);
+      docQuery.greaterThanOrEqualTo('ExpiryDate', new Date());
+      docQuery.exists('SignedUrl');
+
+      const resDoc = await docQuery.first({ useMasterKey: true });
+      // console.log("resDoc ",resDoc)
+      if (resDoc) {
+        const _resDoc = resDoc.toJSON();
+        const contact = _resDoc.Signers.find(x => x.Email === userMail);
+        if (contact) {
+          try {
+            const imgPng = 'https://qikinnovation.ams3.digitaloceanspaces.com/logo.png';
+            let url = `${process.env.SERVER_URL}/functions/sendmailv3/`;
+            const headers = {
+              'Content-Type': 'application/json',
+              'X-Parse-Application-Id': process.env.APP_ID,
+              'X-Parse-Master-Key': process.env.MASTER_KEY,
+            };
+
+            const objectId = contact.objectId;
+            const hostUrl = baseUrl.origin;
+            const title = _resDoc.Name;
+            const receiverMail = contact.Email;
+            //encode this url value `${response.id}/${receiverMail}/${objectId}` to base64 using `btoa` function
+            const encodeBase64 = btoa(`${_resDoc.objectId}/${receiverMail}/${objectId}`);
+            let signPdf = `${hostUrl}/login/${encodeBase64}`;
+            const openSignUrl = 'https://www.opensignlabs.com/contact-us';
+            const orgName = _resDoc.ExtUserPtr.Company ? _resDoc.ExtUserPtr.Company : '';
+            const newDate = new Date(_resDoc.ExpiryDate.iso);
+            newDate.setDate(newDate.getDate() + 15);
+            const sender = _resDoc.ExtUserPtr.Email;
+            const localExpireDate = newDate.toLocaleDateString('en-US', {
+              day: 'numeric',
+              month: 'long',
+              year: 'numeric',
+            });
+
+            const themeBGcolor = '#47a3ad';
+            const email_html =
+              "<html><head><meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /> </head>   <body> <div style='background-color: #f5f5f5; padding: 20px'> <div style=' box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;background: white;padding-bottom: 20px;'> <div style='padding:10px 10px 0 10px'><img src=" +
+              imgPng +
+              " height='50' style='padding:20px; width:170px; height:40px;' /></div>  <div  style='padding:2px; font-family: system-ui;background-color:" +
+              themeBGcolor +
+              ";'><p style='font-size: 20px;font-weight: 400;color: white;padding-left: 20px;' > Digital Signature Request</p></div><div><p style='padding: 20px;font-family: system-ui;font-size: 14px; margin-bottom: 10px;'> " +
+              _resDoc.ExtUserPtr.Name +
+              ' has requested you to review and sign <strong> ' +
+              title +
+              "</strong>.</p><div style='padding: 5px 0px 5px 25px;display: flex;flex-direction: row;justify-content: space-around;'><table> <tr> <td style='font-weight:bold;font-family:sans-serif;font-size:15px'>Sender</td> <td> </td> <td  style='color:#626363;font-weight:bold'>" +
+              sender +
+              "</td></tr><tr><td style='font-weight:bold;font-family:sans-serif;font-size:15px'>Organization</td> <td> </td><td style='color:#626363;font-weight:bold'> " +
+              orgName +
+              "</td></tr> <tr> <td style='font-weight:bold;font-family:sans-serif;font-size:15px'>Expires on</td><td> </td> <td style='color:#626363;font-weight:bold'>" +
+              localExpireDate +
+              "</td></tr><tr> <td></td> <td> </td></tr></table> </div> <div style='margin-left:70px'><a href=" +
+              signPdf +
+              "> <button style='padding: 12px 12px 12px 12px;background-color: #d46b0f;color: white;  border: 0px;box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;font-weight:bold;margin-top:30px'>Sign here</button></a> </div> <div style='display: flex; justify-content: center;margin-top: 10px;'> </div></div></div><div><p> This is an automated email from OpenSign™. For any queries regarding this email, please contact the sender " +
+              sender +
+              ' directly.If you think this email is inappropriate or spam, you may file a complaint with OpenSign™   <a href=' +
+              openSignUrl +
+              ' target=_blank>here</a>.</p> </div></div></body> </html>';
+            let replaceVar;
+            const variables = {
+              document_title: title,
+              sender_name: _resDoc.ExtUserPtr.Name,
+              sender_mail: _resDoc.ExtUserPtr.Email,
+              sender_phone: _resDoc.ExtUserPtr.Phone,
+              receiver_name: contact.Name,
+              receiver_email: contact.Email,
+              receiver_phone: contact.Phone,
+              expiry_date: localExpireDate,
+              company_name: orgName,
+              signing_url: signPdf,
+            };
+            if (email_subject && email_body) {
+              replaceVar = replaceMailVaribles(email_subject, email_body, variables);
+            } else if (email_subject) {
+              replaceVar = replaceMailVaribles(email_subject, '', variables);
+              replaceVar = { subject: replaceVar.subject, body: email_html };
+            } else if (email_body) {
+              replaceVar = replaceMailVaribles(
+                `${_resDoc.ExtUserPtr.Name} has requested you to sign "${title}"`,
+                email_body,
+                variables
+              );
+            } else {
+              replaceVar = {
+                subject: `${_resDoc.ExtUserPtr.Name} has requested you to sign "${title}"`,
+                body: email_html,
+              };
+            }
+            const subject = replaceVar.subject;
+            const html = replaceVar.body;
+
+            let params = {
+              recipient: contact.Email,
+              subject: subject,
+              from: sender,
+              html: html,
+              extUserId: _resDoc.ExtUserPtr.objectId,
+            };
+
+            const res = await axios.post(url, params, { headers: headers });
+            if (res.data.result && res.data.result.status === 'success') {
+              return response.json({ result: 'mail sent successfully.' });
+            }
+          } catch (error) {
+            console.log('error', error);
+            return response.status(400).json({ error: error.message });
+          }
+        } else {
+          return response.status(404).json({ error: 'user not found.' });
+        }
+      } else {
+        return response.status(404).json({ error: 'document not found.' });
+      }
+    } else {
+      return response.status(405).json({ error: 'Invalid API Token.' });
+    }
+  } catch (err) {
+    console.log('err in resendmail', err);
+    return response.status(400).json({ error: err.message || 'Something went wrong.' });
+  }
+}
@@ -0,0 +1,67 @@
+export default async function updateFolder(request, response) {
+  const apiToken = request.headers['x-api-token'];
+  const folderId = request.params.folder_id;
+  const name = request.body.folderName;
+  const parentFolderId = request.body.parentFolderId;
+  if (!apiToken) {
+    return response.status(400).json({ error: 'Please Provide API Token' });
+  }
+  try {
+    const tokenQuery = new Parse.Query('appToken');
+    tokenQuery.equalTo('token', apiToken);
+    tokenQuery.include('userId');
+    const token = await tokenQuery.first({ useMasterKey: true });
+    if (token !== undefined) {
+      // Valid Token then proceed request
+      const parseUser = JSON.parse(JSON.stringify(token));
+      const userPtr = {
+        __type: 'Pointer',
+        className: '_User',
+        objectId: parseUser.userId.objectId,
+      };
+
+      const folderCls = new Parse.Query('contracts_Document');
+      folderCls.equalTo('CreatedBy', userPtr);
+      folderCls.equalTo('objectId', folderId);
+      folderCls.equalTo('Type', 'Folder');
+      folderCls.notEqualTo('IsArchive', true);
+
+      const res = await folderCls.first({ useMasterKey: true });
+      if (res) {
+        const updateFolder = new Parse.Object('contracts_Document');
+        updateFolder.id = res.id;
+        updateFolder.set('Name', name);
+        if (parentFolderId) {
+          updateFolder.set('Folder', {
+            __type: 'Pointer',
+            className: 'contracts_Document',
+            objectId: parentFolderId,
+          });
+        }
+        const updateRes = await updateFolder.save(null, { useMasterKey: true });
+        if (request.posthog) {
+          request.posthog?.capture({
+            distinctId: parseUser.userId.email,
+            event: 'api_update_folder',
+            properties: { response_code: 200 },
+          });
+        }
+        return response.json({ objectId: updateRes.id, updatedAt: updateRes.updatedAt });
+      } else {
+        if (request.posthog) {
+          request.posthog?.capture({
+            distinctId: parseUser.userId.email,
+            event: 'api_update_folder',
+            properties: { response_code: 404 },
+          });
+        }
+        return response.status(404).json({ error: 'folder not found.' });
+      }
+    } else {
+      return response.status(405).json({ error: 'Invalid API Token!' });
+    }
+  } catch (err) {
+    console.log('err ', err);
+    return response.status(400).json({ error: 'Something went wrong, please try again later!' });
+  }
+}
@@ -1,5 +1,5 @@
 import PDF from './parsefunction/pdf/PDF.min.js';
-import sendmail from './parsefunction/sendMail.js';
+import sendmailv3 from './parsefunction/sendMailv3.js';
 import GoogleSign from './parsefunction/GoogleSign.js';
 import ZohoDetails from './parsefunction/ZohoDetails.js';
 import usersignup from './parsefunction/usersignup.js';
@@ -10,7 +10,6 @@ import DocumentAftersave from './parsefunction/DocumentAftersave.js';
 import ContactbookAftersave from './parsefunction/ContactBookAftersave.js';
 import ContractUsersAftersave from './parsefunction/ContractUsersAftersave.js';
 import sendMailOTPv1 from './parsefunction/SendMailOTPv1.js';
-import SendMailv1 from './parsefunction/SendMailv1.js';
 import AuthLoginAsMail from './parsefunction/AuthLoginAsMail.js';
 import getUserId from './parsefunction/getUserId.js';
 import getUserDetails from './parsefunction/getUserDetails.js';
@@ -23,17 +22,31 @@ import TemplateAfterSave from './parsefunction/TemplateAfterSave.js';
 import GetTemplate from './parsefunction/GetTemplate.js';
 import savewebhook from './parsefunction/saveWebhook.js';
 import callWebhook from './parsefunction/callWebhook.js';
+import SubscribeFree from './parsefunction/SubscribeFree.js';
+import DocumentBeforesave from './parsefunction/DocumentBeforesave.js';
+import TemplateBeforeSave from './parsefunction/TemplateBeforesave.js';
+import DocumentBeforeFind from './parsefunction/DocumentAfterFind.js';
+import TemplateAfterFind from './parsefunction/TemplateAfterFind.js';
+import UserAfterFind from './parsefunction/UserAfterFInd.js';
+import SignatureAfterFind from './parsefunction/SignatureAfterFind.js';
+import getInvoices from './parsefunction/getInvoices.js';
+import getPayments from './parsefunction/getPayments.js';
+import getSubscriptions from './parsefunction/getSubscriptions.js';
+import TenantAterFind from './parsefunction/TenantAfterFind.js';
+import saveSubscription from './parsefunction/saveSubscription.js';
+import VerifyEmail from './parsefunction/VerifyEmail.js';
+import encryptedpdf from './parsefunction/encryptedPdf.js';
+import { getSignedUrl } from './parsefunction/getSignedUrl.js';

 Parse.Cloud.define('AddUserToRole', addUserToGroups);
 Parse.Cloud.define('UserGroups', getUserGroups);
 Parse.Cloud.define('signPdf', PDF);
-Parse.Cloud.define('sendmailv3', sendmail);
+Parse.Cloud.define('sendmailv3', sendmailv3);
 Parse.Cloud.define('googlesign', GoogleSign);
 Parse.Cloud.define('zohodetails', ZohoDetails);
 Parse.Cloud.define('usersignup', usersignup);
 Parse.Cloud.define('facebooksign', FacebookSign);
 Parse.Cloud.define('SendOTPMailV1', sendMailOTPv1);
-Parse.Cloud.define('sendmail', SendMailv1);
 Parse.Cloud.define('AuthLoginAsMail', AuthLoginAsMail);
 Parse.Cloud.define('getUserId', getUserId);
 Parse.Cloud.define('getUserDetails', getUserDetails);
@@ -45,7 +58,22 @@ Parse.Cloud.define('getapitoken', getapitoken);
 Parse.Cloud.define('getTemplate', GetTemplate);
 Parse.Cloud.define('savewebhook', savewebhook);
 Parse.Cloud.define('callwebhook', callWebhook);
+Parse.Cloud.define('freesubscription', SubscribeFree);
+Parse.Cloud.define('getinvoices', getInvoices);
+Parse.Cloud.define('getpayments', getPayments);
+Parse.Cloud.define('getsubscriptions', getSubscriptions);
 Parse.Cloud.afterSave('contracts_Document', DocumentAftersave);
 Parse.Cloud.afterSave('contracts_Contactbook', ContactbookAftersave);
 Parse.Cloud.afterSave('contracts_Users', ContractUsersAftersave);
 Parse.Cloud.afterSave('contracts_Template', TemplateAfterSave);
+Parse.Cloud.beforeSave('contracts_Document', DocumentBeforesave);
+Parse.Cloud.beforeSave('contracts_Template', TemplateBeforeSave);
+Parse.Cloud.afterFind(Parse.User, UserAfterFind);
+Parse.Cloud.afterFind('contracts_Document', DocumentBeforeFind);
+Parse.Cloud.afterFind('contracts_Template', TemplateAfterFind);
+Parse.Cloud.afterFind('contracts_Signature', SignatureAfterFind);
+Parse.Cloud.afterFind('partners_Tenant', TenantAterFind);
+Parse.Cloud.define('savesubscription', saveSubscription);
+Parse.Cloud.define('verifyemail', VerifyEmail);
+Parse.Cloud.define('encryptedpdf', encryptedpdf);
+Parse.Cloud.define('getsignedurl', getSignedUrl);
@@ -0,0 +1,26 @@
+import { useLocal } from '../../Utils.js';
+import getPresignedUrl from './getSignedUrl.js';
+
+async function DocumentAfterFind(request) {
+  if (useLocal !== 'true') {
+    if (request.objects.length === 1) {
+      if (request.objects) {
+        const obj = request.objects[0];
+        const SignedUrl = obj?.get('SignedUrl') && obj?.get('SignedUrl');
+        const Url = obj?.get('URL') && obj?.get('URL');
+        const certificateUrl = obj.get('CertificateUrl') && obj.get('CertificateUrl');
+        if (SignedUrl) {
+          obj.set('SignedUrl', getPresignedUrl(SignedUrl));
+        }
+        if (Url) {
+          obj.set('URL', getPresignedUrl(Url));
+        }
+        if (certificateUrl) {
+          obj.set('CertificateUrl', getPresignedUrl(certificateUrl));
+        }
+        return [obj];
+      }
+    }
+  }
+}
+export default DocumentAfterFind;
@@ -4,6 +4,7 @@ async function DocumentAftersave(request) {
      console.log('new entry is insert in contracts_Document');
      const createdAt = request.object.get('createdAt');
      const Folder = request.object.get('Type');
+      const ip = request?.headers?.['x-real-ip'] || '';
      if (createdAt && Folder === undefined) {
        // console.log("IN If condition")
        const TimeToCompleteDays = request.object.get('TimeToCompleteDays');
@@ -12,6 +13,7 @@ async function DocumentAftersave(request) {
        const documentQuery = new Parse.Query('contracts_Document');
        const updateQuery = await documentQuery.get(request.object.id, { useMasterKey: true });
        updateQuery.set('ExpiryDate', ExpiryDate);
+        updateQuery.set('OriginIp', ip);
        await updateQuery.save(null, { useMasterKey: true });
      } else if (createdAt && Folder === 'AIDoc') {
        const TimeToCompleteDays = request.object.get('TimeToCompleteDays');
@@ -24,6 +26,7 @@ async function DocumentAftersave(request) {
        const documentQuery = new Parse.Query('contracts_Document');
        const updateQuery = await documentQuery.get(request.object.id, { useMasterKey: true });
        updateQuery.set('ExpiryDate', ExpiryDate);
+        updateQuery.set('OriginIp', ip);
        await updateQuery.save(null, { useMasterKey: true });
      }

@@ -0,0 +1,37 @@
+async function DocumentBeforesave(request) {
+  try {
+    // below code is used to update document when user sent document or self signed
+    const document = request.object;
+    const oldDocument = request.original;
+
+    // Check if SignedUrl field has been added (transition from undefined to defined)
+    if (!oldDocument?.get('SignedUrl') && document?.get('SignedUrl')) {
+      // Update count in contracts_Users class
+      const query = new Parse.Query('contracts_Users');
+      query.equalTo('objectId', oldDocument.get('ExtUserPtr').id);
+
+      try {
+        const contractUser = await query.first({ useMasterKey: true });
+        if (contractUser) {
+          contractUser.increment('DocumentCount', 1);
+          await contractUser.save(null, { useMasterKey: true });
+        } else {
+          // Create new entry if not found
+          const ContractsUsers = Parse.Object.extend('contracts_users');
+          const newContractUser = new ContractsUsers();
+          newContractUser.set('DocumentCount', 1);
+          await newContractUser.save(null, { useMasterKey: true });
+        }
+      } catch (error) {
+        console.log('Error updating document count in contracts_users: ' + error.message);
+      }
+      if (document?.get('Signers') && document.get('Signers').length > 0) {
+        document.set('DocSentAt', new Date());
+        document.save(null, { useMasterKey: true });
+      }
+    }
+  } catch (err) {
+    console.log('err in document beforesave', err.message);
+  }
+}
+export default DocumentBeforesave;
@@ -1,47 +1,65 @@
-import axios from 'axios'
-
+import { updateMailCount } from '../../Utils.js';
+async function getDocument(docId) {
+  try {
+    const query = new Parse.Query('contracts_Document');
+    query.equalTo('objectId', docId);
+    query.include('ExtUserPtr');
+    query.include('CreatedBy');
+    query.include('Signers');
+    query.include('AuditTrail.UserPtr');
+    query.include('Placeholders');
+    query.notEqualTo('IsArchive', true);
+    const res = await query.first({ useMasterKey: true });
+    const _res = res.toJSON();
+    return _res?.ExtUserPtr?.objectId;
+  } catch (err) {
+    console.log('err ', err);
+  }
+}
 async function sendMailOTPv1(request) {
  try {
    //--for elearning app side
    let code = Math.floor(1000 + Math.random() * 9000);
    let email = request.params.email;
    var TenantId = request.params.TenantId ? request.params.TenantId : undefined;
-    // console.log("In tempSendOTPv2");
-
-    // console.log(JSON.stringify(request));

    if (email) {
-      axios({
-        method: 'POST',
-        url: process.env.SERVER_URL + '/functions/sendmail',
-        headers: {
-          'Content-Type': 'application/json',
-          'X-Parse-Application-Id': process.env.APP_ID,
-        },
-        params: {
-          otp: code,
-          email: email,
-          TenantId: TenantId,
-        },
-      }).then(
-        function (httpResponse) {},
-        function (httpResponse) {
-          console.error('sms Request failed with response code ' + httpResponse.status);
-          return Promise.reject('sms Request failed with response code ' + httpResponse.status);
+      const recipient = request.params.email;
+      const mailsender = process.env.SMTP_ENABLE
+        ? process.env.SMTP_USER_EMAIL
+        : process.env.MAILGUN_SENDER;
+      try {
+        await Parse.Cloud.sendEmail({
+          from: 'Opensign™' + ' <' + mailsender + '>',
+          recipient: recipient,
+          subject: 'Your OpenSign™ OTP',
+          text: 'This email is a test.',
+          html:
+            "<html><head><meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /></head><body><div style='background-color:#f5f5f5;padding:20px'><div style='box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;background-color:white;'><div style='background-color:red;padding:2px;font-family:system-ui; background-color:#47a3ad;'>    <p style='font-size:20px;font-weight:400;color:white;padding-left:20px',>OTP Verification</p></div><div style='padding:20px'><p style='font-family:system-ui;font-size:14px'>Your OTP for OpenSign™ verification is:</p><p style=' text-decoration: none; font-weight: bolder; color:blue;font-size:45px;margin:20px'>" +
+            code +
+            '</p></div> </div> </div></body></html>',
+        });
+        console.log('OTP sent');
+        if (request.params?.docId) {
+          const extUserId = await getDocument(request.params?.docId);
+          if (extUserId) {
+            updateMailCount(extUserId);
+          }
        }
-      );
-
+      } catch (err) {
+        console.log('error in send OTP mail', err);
+      }
      const tempOtp = new Parse.Query('defaultdata_Otp');
      tempOtp.equalTo('Email', email);
      const resultOTP = await tempOtp.first({ useMasterKey: true });
-      console.log('resultOTP', resultOTP);
+      // console.log('resultOTP', resultOTP);
      if (resultOTP !== undefined) {
        const updateOtpQuery = new Parse.Query('defaultdata_Otp');
        const updateOtp = await updateOtpQuery.get(resultOTP.id, {
          useMasterKey: true,
        });
        updateOtp.set('OTP', code);
-        const updateRes = updateOtp.save(null, { useMasterKey: true });
+        updateOtp.save(null, { useMasterKey: true });
        //   console.log("update otp Res in tempSendOtp ", updateRes);
      } else {
        const otpClass = Parse.Object.extend('defaultdata_Otp');
@@ -49,17 +67,17 @@ async function sendMailOTPv1(request) {
        newOtpQuery.set('OTP', code);
        newOtpQuery.set('Email', email);
        newOtpQuery.set('TenantId', TenantId);
-        const newRes = await newOtpQuery.save(null, { useMasterKey: true });
+        await newOtpQuery.save(null, { useMasterKey: true });
        //   console.log("new otp Res in tempSendOtp ", newRes);
      }
      return 'Otp send';
    } else {
-      return Promise.reject('Please Enter valid email');
+      return 'Please Enter valid email';
    }
  } catch (err) {
    console.log('err in sendMailOTPv1');
    console.log(err);
-    return Promise.reject(err);
+    return err;
  }
 }
 export default sendMailOTPv1;
@@ -1,27 +0,0 @@
-async function SendMailv1(request) {
-  console.log('in SendMailv1');
-
-  try {
-    const recipient = request.params.email;
-    const otp = request.params.otp;
-    const res = await Parse.Cloud.sendEmail({
-      from: 'Test user' + ' <' + process.env.SMTP_ENABLE ? process.env.SMTP_USER_EMAIL : process.env.MAILGUN_SENDER + '>',
-      recipient: recipient,
-      subject: 'Your OpenSign™ OTP',
-      text: 'This email is a test.',
-      html:
-        "<html><head><meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /></head><body><div style='background-color:#f5f5f5;padding:20px'><div style='box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;background-color:white;'><div style='background-color:red;padding:2px;font-family:system-ui; background-color:#47a3ad;'>    <p style='font-size:20px;font-weight:400;color:white;padding-left:20px',>OTP Verification</p></div><div style='padding:20px'><p style='font-family:system-ui;font-size:14px'>Your OTP for OpenSign™ verification is:</p><p style=' text-decoration: none; font-weight: bolder; color:blue;font-size:45px;margin:20px'>" +
-        otp +
-        '</p></div> </div> </div></body></html>',
-      // "<html><head><meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /></head><body style='text-align: center;'><div style='display:flex;flex-direction:column;justify-content:center;align-item:center;margin:40px'>  <p style='font-weight: bolder; font-size: large;'>Hello,</p> <span>Your OTP for LegaDaft verification . </span> <p style=' text-decoration: none; font-weight: bolder; color:blue;font-size:45px'>76984</p><span>Thank You!</span> </div> </body></html>"
-    });
-    console.log('Res');
-    console.log(res);
-    return otp;
-  } catch (err) {
-    console.log('err in SendMailv1');
-    console.log(err);
-    return err;
-  }
-}
-export default SendMailv1;
@@ -0,0 +1,22 @@
+import { useLocal } from '../../Utils.js';
+import getPresignedUrl from './getSignedUrl.js';
+
+async function SignatureAfterFind(request) {
+  if (useLocal !== 'true') {
+    if (request.objects.length === 1) {
+      if (request.objects) {
+        const obj = request.objects[0];
+        const ImageURL = obj?.get('ImageURL') && obj?.get('ImageURL');
+        const Initials = obj?.get('Initials') && obj?.get('Initials');
+        if (ImageURL) {
+          obj.set('ImageURL', getPresignedUrl(ImageURL));
+        }
+        if (Initials) {
+          obj.set('Initials', getPresignedUrl(Initials));
+        }
+        return [obj];
+      }
+    }
+  }
+}
+export default SignatureAfterFind;
@@ -0,0 +1,67 @@
+export default async function SubscribeFree(request) {
+  const userId = request.params.userId;
+  const userPtr = { __type: 'Pointer', className: '_User', objectId: userId };
+  try {
+    const extQuery = new Parse.Query('contracts_Users');
+    extQuery.equalTo('UserId', userPtr);
+    const extUser = await extQuery.first({ useMasterKey: true });
+    if (extUser) {
+      const subscriptionCls = new Parse.Query('contracts_Subscriptions');
+      subscriptionCls.equalTo('TenantId', {
+        __type: 'Pointer',
+        className: 'partners_Tenant',
+        objectId: extUser.get('TenantId').id,
+      });
+      subscriptionCls.descending('createdAt');
+      const subcripitions = await subscriptionCls.first({ useMasterKey: true });
+      if (subcripitions?.get('PlanCode') === 'freeplan') {
+        return { status: 'success', result: 'already subscribed!' };
+      } else if (subcripitions?.get('Next_billing_date') < new Date()) {
+        try {
+          const updateSubscription = new Parse.Object('contracts_Subscriptions');
+          updateSubscription.id = subcripitions.id;
+          updateSubscription.set('PlanCode', 'freeplan');
+          await updateSubscription.save(null, { useMasterKey: true });
+          return { status: 'success', result: 'subscribed!' };
+        } catch (err) {
+          console.log('err ', err);
+          return { status: 'error', result: err.message };
+        }
+      } else if (subcripitions?.get('Next_billing_date') > new Date()) {
+        return { status: 'success', result: 'already subscribed!' };
+      } else {
+        try {
+          const createSubscription = new Parse.Object('contracts_Subscriptions');
+          createSubscription.set('PlanCode', 'freeplan');
+          createSubscription.set('ExtUserPtr', {
+            __type: 'Pointer',
+            className: 'contracts_Users',
+            objectId: extUser.id,
+          });
+          createSubscription.set('CreatedBy', {
+            __type: 'Pointer',
+            className: '_User',
+            objectId: extUser.get('UserId').id,
+          });
+          if (extUser?.get('TenantId')) {
+            createSubscription.set('TenantId', {
+              __type: 'Pointer',
+              className: 'partners_Tenant',
+              objectId: extUser.get('TenantId').id,
+            });
+          }
+          await createSubscription.save(null, { useMasterKey: true });
+          return { status: 'success', result: 'subscribed!' };
+        } catch (err) {
+          console.log('err ', err);
+          return { status: 'error', result: err.message };
+        }
+      }
+    } else {
+      return { status: 'error', result: 'User not found!' };
+    }
+  } catch (err) {
+    console.log('err ', err);
+    return { status: 'error', result: err.message };
+  }
+}
@@ -0,0 +1,27 @@
+import { useLocal } from '../../Utils.js';
+import getPresignedUrl from './getSignedUrl.js';
+
+async function TemplateAfterFind(request) {
+  if (useLocal !== 'true') {
+    if (request.objects.length === 1) {
+      if (request.objects) {
+        const obj = request.objects[0];
+        const SignedUrl = obj?.get('SignedUrl') && obj?.get('SignedUrl');
+        const Url = obj?.get('URL') && obj?.get('URL');
+        const certificateUrl = obj.get('CertificateUrl') && obj.get('CertificateUrl');
+        if (SignedUrl) {
+          obj.set('SignedUrl', getPresignedUrl(SignedUrl));
+        }
+        if (Url) {
+          obj.set('URL', getPresignedUrl(Url));
+        }
+        if (certificateUrl) {
+          obj.set('CertificateUrl', getPresignedUrl(certificateUrl));
+        }
+
+        return [obj];
+      }
+    }
+  }
+}
+export default TemplateAfterFind;
@@ -0,0 +1,31 @@
+async function TemplateBeforeSave(request) {
+  try {
+    if (!request.original) {
+      // below code is used to update template when user sent template or self signed
+      const template = request.object;
+
+      // Update count in contracts_Users class
+      const query = new Parse.Query('contracts_Users');
+      query.equalTo('objectId', template.get('ExtUserPtr').id);
+
+      try {
+        const contractUser = await query.first({ useMasterKey: true });
+        if (contractUser) {
+          contractUser.increment('TemplateCount', 1);
+          await contractUser.save(null, { useMasterKey: true });
+        } else {
+          // Create new entry if not found
+          const ContractsUsers = Parse.Object.extend('contracts_users');
+          const newContractUser = new ContractsUsers();
+          newContractUser.set('TemplateCount', 1);
+          await newContractUser.save(null, { useMasterKey: true });
+        }
+      } catch (error) {
+        console.log('Error updating template count in contracts_users: ' + error.message);
+      }
+    }
+  } catch (err) {
+    console.log('err in template beforesave', err.message);
+  }
+}
+export default TemplateBeforeSave;
@@ -0,0 +1,18 @@
+import { useLocal } from '../../Utils.js';
+import getPresignedUrl from './getSignedUrl.js';
+
+async function TenantAterFind(request) {
+  if (useLocal !== 'true') {
+    if (request.objects.length === 1) {
+      if (request.objects) {
+        const obj = request.objects[0];
+        const Logo = obj?.get('Logo') && obj?.get('Logo');
+        if (Logo) {
+          obj.set('Logo', getPresignedUrl(Logo));
+        }
+        return [obj];
+      }
+    }
+  }
+}
+export default TenantAterFind;
--- a/Show More
+++ b/Show More