Merge pull request #1737 from OpenSignLabs/updates-15043583319

v2.21.1
2026-09-03 16:28:56 +02:00 · 2025-05-15 16:48:53 +05:30 · 2025-05-15 11:17:30 +00:00 · 2025-05-14 20:55:08 +05:30 · 2025-05-14 15:24:27 +00:00 · 2025-05-14 20:26:36 +05:30
352 changed files with 51479 additions and 291694 deletions
@@ -232,6 +232,15 @@
      "contributions": [
        "code"
      ]
+    },
+    {
+      "login": "1024mb",
+      "name": "1024mb",
+      "avatar_url": "https://avatars.githubusercontent.com/u/9301204?v=4",
+      "profile": "https://github.com/1024mb",
+      "contributions": [
+        "translation"
+      ]
    }
  ]
 }
@@ -3,18 +3,16 @@
 # Note that any data in staging will get cleared from time to time and you may have to sign up again and again

 # Set it to the URL form where the app home page will be accessed
-PUBLIC_URL=http://localhost:3000
+PUBLIC_URL=https://localhost:3001
 # Set it to true if you want to generate the Sourcemap for debugging
 GENERATE_SOURCEMAP=false
 # Set it to the URL from where APIs will be accessible, for local development it should be localhost:3000/api/app (use your local port number instead)
 # REACT_APP_SERVERURL=http://localhost:8080/app
-# A 12 character long random app identifier. The value of this should be same as APP_ID which is a variable used by backend API.
+# (DEPRECATED) This should not be changed if provided; it should be 'opensign'.
 REACT_APP_APPID=opensign


 # Backend ExpressJS config ****************************************************************************************************************************************************************************************
-# A 12 character long random app identifier. The value of this should be same as REACT_APP_APPID which is a variable used by Frontend React App.
-APP_ID=opensign
 # Name of the app. It will be visible in the verification emails sent out.
 appName=open_sign_server
 # A 12 character long random secret key that allows access to all the data. It is used in Parse dashboard config to view all the data in the database.
@@ -111,3 +109,6 @@ CRUxFgQUDYlgGVxSxuOknhQc256x3++7BDwwMTAhMAkGBSsOAwIaBQAEFFjASdYl

 # Provide Pass pharse of above PFX or p12 document
 PASS_PHRASE=opensign 
+
+# (DEPRECATED) This should not be changed if provided; it should be 'opensign'.
+APP_ID=opensign
@@ -1,8 +1,15 @@
 name: ci
+
+# 👇 add this block
+permissions:
+  contents: read        # allow checkout & metadata-action to read repo
+  id-token: write       # needed by docker/metadata-action v4
+
 on:
  push:
    branches:
      - 'main'
+      - 'staging'

 jobs:
  docker:
@@ -77,6 +77,6 @@ Engage with the community on our [Gitter Channel](https://gitter.im/OpenSignLabs

 ## License

-By contributing, you agree that your contributions will be licensed under its [MIT License](LICENSE).
+By contributing, you agree that your contributions will be licensed under its [AGPL-V3 License](LICENSE).

---
+---
@@ -1,7 +1,7 @@
 {$HOST_URL} {
    reverse_proxy client:3000
-    handle_path /app/* {
+    handle_path /api/* {
        reverse_proxy server:8080
-            rewrite * /app{uri}
+            rewrite * {uri}
    }
 }
@@ -1,4 +1,9 @@
-                    GNU AFFERO GENERAL PUBLIC LICENSE
+* All content that resides under the "apps/OpenSignServer/cloud/customRoute" directory of this repository, if that directory exists, is licensed under the license defined in "apps/OpenSignServer/cloud/customRoute".
+* All third party components incorporated into the OpenSign Software are licensed under the original license provided by the owner of the applicable component.
+* Content outside of the above mentioned directories or restrictions above is available under the "GNU AFFERO GENERAL PUBLIC LICENSE" as defined below -
+
+
+                  GNU AFFERO GENERAL PUBLIC LICENSE
                       Version 3, 19 November 2007

 Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
@@ -77,7 +77,7 @@ Welcome to OpenSign, the premier open source docusign alternative - document e-s

 The simplest way to install OpenSign on your own server is using official docker images by running the following command -
 ``` 
-export HOST_URL=https://opensign.yourdomain.com && curl --remote-name-all https://raw.githubusercontent.com/OpenSignLabs/OpenSign/docker_beta/docker-compose.yml https://raw.githubusercontent.com/OpenSignLabs/OpenSign/docker_beta/Caddyfile https://raw.githubusercontent.com/OpenSignLabs/OpenSign/docker_beta/.env.local_dev && mv .env.local_dev .env.prod && docker compose up --force-recreate
+export HOST_URL=https://opensign.yourdomain.com && curl --remote-name-all https://raw.githubusercontent.com/OpenSignLabs/OpenSign/main/docker-compose.yml https://raw.githubusercontent.com/OpenSignLabs/OpenSign/main/Caddyfile https://raw.githubusercontent.com/OpenSignLabs/OpenSign/main/.env.local_dev && mv .env.local_dev .env.prod && docker compose up --force-recreate
 ```
 Make sure that you have `Docker` and `git` installed before you run this command -

@@ -147,7 +147,8 @@ We would like to thank all our contributors and users for their support and feed
      <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><a href="#security-Zathiel" title="Security">🛡️</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>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/1024mb"><img src="https://avatars.githubusercontent.com/u/9301204?v=4?s=100" width="100px;" alt="1024mb"/><br /><sub><b>1024mb</b></sub></a><br /><a href="#translation-1024mb" title="Translation">🌍</a></td>
    </tr>
  </tbody>
 </table>
@@ -157,3 +158,5 @@ We would like to thank all our contributors and users for their support and feed

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

+This project is tested with BrowserStack.
+
@@ -1,5 +1,5 @@
 # Use an official Node runtime as the base image
-FROM node:18
+FROM node:22.14.0

 # Set the working directory inside the container
 WORKDIR /usr/src/app
@@ -14,14 +14,14 @@ RUN npm install
 COPY apps/OpenSign/ .
 COPY apps/OpenSign/.husky .

+# Define environment variables if needed
+ENV NODE_ENV=production
+ENV GENERATE_SOURCEMAP=false
 # build
 RUN npm run build

 # Make port 3000 available to the world outside this container
 EXPOSE 3000

-# Define environment variables if needed
-# ENV NODE_ENV production
-
 # Run the application
 CMD ["npm", "start"]
@@ -1,20 +1,22 @@
 <!DOCTYPE html>
 <html lang="en" data-theme="opensigncss">
+
 <head>
  <meta charset="utf-8" />
-  <link rel="icon" href="/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+  <link rel="icon"  type="image/x-icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="The fastest way to sign PDFs & request signatures from others" />
-  <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
+  <!-- <link rel="apple-touch-icon" href="/logo192.png" /> -->

  <link rel="manifest" href="/manifest.json" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
-    <link rel="stylesheet" href="https://cdn.opensignlabs.com/fonts.css" />
-  <title>OpenSign™</title>
+  <link rel="stylesheet" href="https://cdn.opensignlabs.com/fonts.css" />
+  <title>...Loading</title>
 </head>
 <body>
-  <div id="root"></div>
+  <div id="root" style="touch-action:pan-x pan-y;"></div>
+  <script type="module" src="/src/index.jsx"></script>
 </body>
-</html>
+</html>
@@ -4,68 +4,73 @@
  "private": true,
  "dependencies": {
    "@formkit/auto-animate": "^0.8.2",
-    "@lottiefiles/dotlottie-react": "^0.8.7",
+    "@lottiefiles/dotlottie-react": "^0.13.5",
    "@pdf-lib/fontkit": "^1.1.1",
-    "@radix-ui/themes": "^3.1.1",
-    "@react-pdf/renderer": "^3.4.4",
-    "@reduxjs/toolkit": "^2.2.7",
-    "axios": "^1.7.3",
+    "@radix-ui/themes": "^3.1.6",
+    "@reduxjs/toolkit": "^2.7.0",
+    "axios": "^1.9.0",
+    "css-minimizer-webpack-plugin": "^7.0.2",
+    "date-fns-tz": "^3.2.0",
    "file-saver": "^2.0.5",
-    "i18next": "^23.12.2",
-    "i18next-browser-languagedetector": "^8.0.0",
-    "i18next-http-backend": "^2.5.2",
+    "i18next": "^23.16.8",
+    "i18next-browser-languagedetector": "^8.1.0",
+    "i18next-http-backend": "^3.0.2",
+    "jszip": "^3.10.1",
    "jwt-decode": "^4.0.0",
    "moment": "^2.30.1",
    "nth-check": "^2.1.1",
-    "parse": "^5.3.0",
+    "parse": "^6.1.1",
    "pdf-lib": "^1.17.1",
    "print-js": "^1.6.0",
    "radix-ui": "^1.0.1",
    "react": "^18.2.0",
-    "react-bootstrap": "^2.10.4",
-    "react-confetti": "^6.1.0",
-    "react-cookie": "^7.2.0",
-    "react-datepicker": "^7.3.0",
+    "react-bootstrap": "^2.10.9",
+    "react-confetti": "^6.4.0",
+    "react-cookie": "^7.2.2",
+    "react-datepicker": "^7.6.0",
    "react-dnd": "^16.0.1",
    "react-dnd-html5-backend": "^16.0.1",
-    "react-dnd-multi-backend": "^8.0.3",
+    "react-dnd-multi-backend": "^9.0.0",
    "react-dnd-touch-backend": "^16.0.1",
    "react-dom": "^18.2.0",
    "react-gtm-module": "^2.0.11",
    "react-helmet": "^6.1.0",
-    "react-i18next": "^15.0.1",
+    "react-i18next": "^15.5.0",
    "react-konva": "^18.2.10",
-    "react-pdf": "^9.1.0",
-    "react-quill-new": "^3.2.2",
-    "react-redux": "^9.1.2",
-    "react-rnd": "^10.4.11",
-    "react-router-dom": "^6.26.0",
-    "react-scripts": "5.0.1",
+    "react-pdf": "^9.2.1",
+    "react-quill-new": "^3.4.6",
+    "react-redux": "^9.2.0",
+    "react-rnd": "^10.5.2",
+    "react-router": "^7.5.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.28.0",
+    "react-select": "^5.10.1",
+    "react-signature-canvas": "^1.0.7",
+    "react-syntax-highlighter": "^15.6.1",
+    "react-timezone-select": "^3.2.8",
+    "react-tooltip": "^5.28.1",
    "react-web-share": "^2.0.2",
    "reactour": "^1.19.4",
    "redux": "^5.0.1",
    "redux-thunk": "^3.1.0",
-    "regex-parser": "^2.3.0",
-    "serve": "^14.2.3",
+    "regex-parser": "^2.3.1",
+    "serve": "^14.2.4",
    "styled-components": "^5.3.0",
-    "web-vitals": "^4.2.2",
-    "ws": "^8.18.0"
+    "web-vitals": "^4.2.4",
+    "ws": "^8.18.2",
+    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz"
  },
  "scripts": {
-    "build-webpack": "webpack --config webpack.config.js",
-    "build": "npm run version && npm run build-webpack && react-scripts build",
-    "build-watch": "webpack --config webpack.config.js --watch",
-    "start-dev": "concurrently \"npm run build-watch\" \"react-scripts start\"",
+    "build": "npm run version && NODE_OPTIONS=\"--max-old-space-size=8192\" vite build",
+    "start-dev": "vite",
+    "dev": "vite",
+    "preview": "vite preview",
    "start": "serve -s build",
    "version": "curl -s https://api.github.com/repos/opensignlabs/opensign/releases/latest | grep '\"tag_name\":' | awk -F '\"' '{print $4}' > ./public/version.txt",
    "version-win": "powershell -Command \"Invoke-RestMethod -Uri 'https://api.github.com/repos/opensignlabs/opensign/releases/latest' | Select-Object -ExpandProperty tag_name | Out-File -FilePath ./public/version.txt\"",
-    "build-win": "npm run version-win && npm run build-webpack && react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "build-win": "npm run version-win && vite build",
+    "test": "vitest run",
+    "test:watch": "vitest",
    "release": "standard-version",
    "commit": "cz"
  },
@@ -93,33 +98,46 @@
    }
  },
  "devDependencies": {
-    "@babel/core": "^7.25.2",
-    "@babel/preset-env": "^7.25.3",
-    "@babel/preset-react": "^7.24.7",
-    "@babel/runtime-corejs2": "^7.25.0",
-    "autoprefixer": "^10.4.19",
-    "babel-loader": "^9.1.3",
-    "clean-webpack-plugin": "^4.0.0",
-    "commitizen": "^4.3.0",
-    "concurrently": "^8.2.2",
+    "@babel/core": "^7.27.1",
+    "@babel/preset-env": "^7.27.1",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/runtime-corejs2": "^7.27.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^18.3.21",
+    "@vitejs/plugin-react": "^4.4.1",
+    "@vitejs/plugin-react-swc": "^3.9.0",
+    "autoprefixer": "^10.4.21",
+    "babel-loader": "^10.0.0",
+    "commitizen": "^4.3.1",
+    "concurrently": "^9.1.2",
    "css-loader": "^7.1.2",
-    "daisyui": "^4.12.10",
-    "dotenv": "^16.4.5",
+    "daisyui": "^4.12.24",
+    "dotenv": "^16.5.0",
    "dotenv-webpack": "^8.1.0",
-    "eslint": "^8.57.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.34.3",
-    "lint-staged": "^15.2.8",
-    "mini-css-extract-plugin": "^2.9.0",
-    "postcss": "^8.4.41",
-    "prettier": "^3.3.3",
-    "pretty-quick": "^4.0.0",
-    "tailwindcss": "^3.4.9",
-    "terser-webpack-plugin": "^5.3.10",
+    "eslint": "^8.57.1",
+    "eslint-plugin-prettier": "^5.4.0",
+    "eslint-plugin-react": "^7.37.5",
+    "lint-staged": "^15.5.1",
+    "mini-css-extract-plugin": "^2.9.2",
+    "postcss": "^8.5.3",
+    "prettier": "^3.5.3",
+    "pretty-quick": "^4.1.1",
+    "rollup-plugin-node-polyfills": "^0.2.1",
+    "tailwindcss": "^3.4.17",
+    "terser-webpack-plugin": "^5.3.14",
+    "vite": "^6.3.5",
+    "vite-plugin-svgr": "^4.3.0",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.1.3",
    "webpack-cli": "^5.1.4"
  },
  "overrides": {
    "nth-check": "$nth-check",
    "ws": "$ws"
+  },
+  "engines": {
+    "node": "18 || 20 || 22"
  }
-}
+}
@@ -0,0 +1,975 @@
+{ 
+  "header-news": "Neue Funktion: Benutzer des Teams-Plans können jetzt ihre eigenen AWS S3-Buckets für die Dateispeicherung integrieren",
+  "header-news-btn": "Jetzt einrichten",
+  "create-account": "Konto erstellen",
+  "login": "Anmelden",
+  "language": "Sprache",
+  "name": "Name",
+  "phone": "Telefon",
+  "phone-optional": "optional",
+  "email": "E-Mail",
+  "company": "Unternehmen",
+  "job-title": "Berufsbezeichnung",
+  "profile": "Profil",
+  "log-out": "Abmelden",
+  "is-email-verified": "Ist E-Mail verifiziert",
+  "public-profile": "Öffentliches Profil",
+  "tagline": "Slogan",
+  "has-requested-you-to-sign": "hat Sie gebeten, zu unterschreiben",
+  "has-requested-you-to-review-and-sign": "hat Sie gebeten, zu prüfen und zu unterschreiben",
+  "input-required": "Bitte füllen Sie dieses Feld aus.",
+  "sort-order": {
+    "Ascending": "Aufsteigend",
+    "Descending": "Absteigend",
+    "Name": "Name",
+    "Date": "Datum"
+  },
+  "context-menu": {
+    "Download": "Herunterladen",
+    "Rename": "Umbenennen",
+    "Move": "Verschieben",
+    "Delete": "Löschen"
+  },
+  "action": "Aktion",
+  "add": "Hinzufügen",
+  "add-new-folder": "Neuen Ordner hinzufügen",
+  "disable-documentId": "DocumentId deaktivieren",
+  "edit": "Bearbeiten",
+  "change-password": "Passwort ändern",
+  "save": "Speichern",
+  "cancel": "Abbrechen",
+  "upgrade-now": "Jetzt upgraden",
+  "upgrade-to": "Upgrade zu",
+  "plan": "Plan",
+  "subscribe-card-teamplan": "Entfesseln Sie die volle Kraft der Zusammenarbeit! Erstellen Sie unbegrenzt Organisationen, Teams und Hierarchien. Teilen Sie Vorlagen nahtlos zwischen Teams und weisen Sie benutzerdefinierte Benutzerrollen zu. Optimieren Sie Ihren Workflow noch heute!",
+  "subscribe-card-plan": "Entsperren Sie Premium-Funktionen ab nur {{premiumPrice}}/Monat. Genießen Sie eine verbesserte Leistung und zahlen Sie nur {{addonPrice}} pro zusätzlichem Credit nach den enthaltenen Premium-Credits.",
+  "user-name-limit-char": "Um einen Benutzernamen mit weniger als 8 Zeichen zu haben, abonnieren Sie bitte.",
+  "tour-content": "Nicht erneut anzeigen",
+  "pro": "PRO",
+  "team": "TEAM",
+  "user": "Benutzer",
+  "docs": "Dokumente",
+  "session-expired": "Ihre Sitzung ist abgelaufen.",
+  "public-profile-help": "Dies ist Ihre öffentliche URL. Kopieren oder teilen Sie sie mit dem Unterzeichner, und Sie können alle öffentlich eingestellten Vorlagen sehen.",
+  "welcome": "Willkommen zurück!",
+  "Login-to-your-account": "Melden Sie sich bei Ihrem Konto an",
+  "password": "Passwort",
+  "forgot-password": "Passwort vergessen?",
+  "loading": "Wird geladen...",
+  "of": "von",
+  "sign-SSO": "Mit SSO anmelden",
+  "login-page": "Anmeldeseite",
+  "or": "ODER",
+  "signup-page": "Registrierungsseite",
+  "password-length": "Das Passwort sollte 8 Zeichen lang sein",
+  "password-case": "Das Passwort sollte einen Großbuchstaben, einen Kleinbuchstaben und eine Zahl enthalten",
+  "password-special-char": "Das Passwort sollte ein Sonderzeichen enthalten",
+  "agreee": "Ich stimme den",
+  "term": "Nutzungsbedingungen zu",
+  "subscribe-to-opensign": "Abonnieren Sie den OpenSign-Newsletter",
+  "register": "Registrieren",
+  "sidebar": {
+    "Dashboard": "Armaturenbrett",
+    "Sign yourself": "Selbst unterschreiben",
+    "Request signatures": "Signaturen anfordern",
+    "Templates": "Vorlagen",
+    "Analytics": "Analytik",
+    "Branding": "Markenbildung",
+    "Mail": "Mail",
+    "Storage": "Speicher",
+    "Signing certificate": "Signierzertifikat",
+    "Teams": "Teams",
+    "General": "Allgemein",
+    "Teams-Children": {
+      "Organizations": "Organisationen",
+      "OrgAdmins": "OrgAdmins"
+    },
+    "Templates-Children": {
+      "Create template": "Vorlage erstellen",
+      "Manage templates": "Vorlagen verwalten",
+      "Embedding": "Einbetten"
+    },
+    "OpenSign™ Drive": "{{appName}} Drive",
+    "Documents": "Dokumente",
+    "Reports": "Berichte",
+    "Documents-Children": {
+      "Need your sign": "Benötigt Ihre Unterschrift",
+      "In Progress": "In Bearbeitung",
+      "Completed": "Abgeschlossen",
+      "Drafts": "Entwürfe",
+      "Declined": "Abgelehnt",
+      "Expired": "Abgelaufen"
+    },
+    "Contactbook": "Kontaktbuch",
+    "Settings": "Einstellungen",
+    "Settings-Children": {
+      "My Signature": "Meine Unterschrift",
+      "API Token": "API-Token",
+      "Webhook": "Webhook",
+      "Preferences": "Einstellungen",
+      "Teams": "Teams",
+      "Team-update-successfully": "Team erfolgreich aktualisiert.",
+      "Users": "Benutzer"
+    }
+  },
+  "dashboard-card": {
+    "Need your Signature": "Benötigt Ihre Unterschrift",
+    "Out for signatures": "Ausstehende Signaturen"
+  },
+  "report-name": {
+    "Draft Documents": "Entwurfsdokumente",
+    "Need your sign": "Benötigt Ihre Unterschrift",
+    "In-progress documents": "Dokumente in Bearbeitung",
+    "Completed Documents": "Abgeschlossene Dokumente",
+    "Declined Documents": "Abgelehnte Dokumente",
+    "Expired Documents": "Abgelaufene Dokumente",
+    "Recently sent for signatures": "Kürzlich für Signaturen versendet",
+    "Recent signature requests": "Kürzliche Signaturanfragen",
+    "Drafts": "Entwürfe",
+    "Contactbook": "Kontaktbuch",
+    "Templates": "Vorlagen",
+    "Teams": "Teams",
+    "Users": "Benutzer"
+  },
+  "btnLabel": {
+    "sign": "unterschreiben",
+    "Sign": "UNTERSCHREIBEN",
+    "Resend": "Erneut senden",
+    "Rename": "Umbenennen",
+    "Revoke": "Widerrufen",
+    "Delete": "Löschen",
+    "Use": "Verwenden",
+    "Quick send": "Schnell senden",
+    "Edit": "Bearbeiten",
+    "Share with team": "Mit Team teilen",
+    "Share": "Teilen",
+    "View": "Ansehen",
+    "option": "Option",
+    "Embed": "Einbetten",
+    "Copy TemplateId": "Vorlagen-ID kopieren",
+    "Copy Public URL": "Öffentliche URL kopieren",
+    "extend-expiry-date": "Ablaufdatum verlängern",
+    "Duplicate Template": "Vorlage duplizieren",
+    "Duplicate": "Duplikat",
+    "daily-mail-quota": "Tägliches E-Mail-Kontingent",
+    "Save as template": "Als Vorlage speichern",
+    "Fix & resend": "Korrigieren und erneut senden",
+    "Kiosk Mode": "Kiosk Modus"
+  },
+  "report-heading": {
+    "Sr.No": "Nr.",
+    "Title": "Titel",
+    "Email": "E-Mail",
+    "Phone": "Telefon",
+    "File": "Datei",
+    "Owner": "Besitzer",
+    "Signers": "Unterzeichner",
+    "Note": "Notiz",
+    "Folder": "Ordner",
+    "Reason": "Grund",
+    "Parent Team": "Übergeordnetes Team",
+    "Active": "Aktiv",
+    "Role": "Rolle",
+    "Team": "Team",
+    "Name": "Name",
+    "Status": "Status",
+    "created-date": "Erstellungsdatum",
+    "Type": "Type",
+    "Logs": "Protokolle",
+    "Expiry-date": "Ablaufdatum"
+  },
+  "report-help": {
+    "Draft Documents": "Dies sind Dokumente, die Sie begonnen, aber noch nicht zum Versenden fertiggestellt haben.",
+    "Need your sign": "Dies ist eine Liste von Dokumenten, die auf Ihre Unterschrift warten.",
+    "In-progress documents": "Dies ist eine Liste von Dokumenten, die Sie anderen Parteien zur Unterschrift gesendet haben.",
+    "Completed Documents": "Dies ist eine Liste von Dokumenten, die von allen Parteien unterzeichnet wurden.",
+    "Declined Documents": "Dies ist eine Liste von Dokumenten, die von einem der Unterzeichner abgelehnt wurden.",
+    "Expired Documents": "Dies ist eine Liste von Dokumenten, deren Ablaufdatum erreicht wurde.",
+    "Contactbook": "Dies ist eine Liste von Kontakten/Unterzeichnern, die Sie hinzugefügt haben. Diese erscheinen als Vorschläge, wenn Sie neue Unterzeichner hinzufügen möchten.",
+    "Templates": "Dies ist eine Liste von Vorlagen, die Ihnen zur Verfügung stehen, um Dokumente zu erstellen. Sie können die Schaltfläche 'Verwenden' anklicken, um ein neues Dokument mit einer Vorlage zu erstellen, das Dokument zu ändern und Unterzeichner im nächsten Schritt hinzuzufügen."
+  },
+  "form-name": {
+    "Sign Yourself": "Selbst unterschreiben",
+    "Request Signatures": "Signaturen anfordern",
+    "New Template": "Neue Vorlage"
+  },
+  "file-type": "pdf, png, jpg, jpeg",
+  "docx": "docx",
+  "file-selected": "Datei ausgewählt",
+  "template-title": "Vorlagentitel",
+  "document-title": "Dokumenttitel",
+  "description": "Beschreibung",
+  "time-to-complete": "Bearbeitungszeit (Tage)",
+  "send-in-order": "In der Reihenfolge senden",
+  "send-in-order-help": {
+    "p1": "Wählen Sie aus, wie Sie die Unterzeichnungsanfragen an die Dokumentenunterzeichner senden möchten:",
+    "p2": "Wenn Sie diese Option auswählen, wird die Unterzeichnungsanfrage zunächst an den ersten Unterzeichner gesendet. Sobald dieser seine Aufgabe abgeschlossen hat, erhält der nächste Unterzeichner in der Reihenfolge die Anfrage. Dieser Prozess setzt sich fort, bis alle Unterzeichner das Dokument unterschrieben haben. Diese Methode stellt sicher, dass das Dokument in einer bestimmten Reihenfolge unterzeichnet wird.",
+    "p3": "Wenn Sie diese Option auswählen, werden die Signaturlinks gleichzeitig an alle Unterzeichner gesendet. Jeder Unterzeichner kann das Dokument nach Belieben unterzeichnen, unabhängig davon, ob andere Unterzeichner ihre Unterschriften abgeschlossen haben. Diese Methode ist schneller, erzwingt jedoch keine Reihenfolge unter den Teilnehmern.",
+    "p4": "Wählen Sie die Option, die am besten zu den Anforderungen Ihrer Dokumentenverarbeitung passt."
+  },
+  "no": "Nein",
+  "auto-reminder": "Automatische Erinnerung",
+  "remind-once": "Einmal erinnern alle (Tage)",
+  "next": "Weiter",
+  "select-folder": "Ordner auswählen",
+  "OpenSign-drive": "{{appName}} Drive",
+  "drive-document-status": {
+    "Completed": "Abgeschlossen",
+    "Declined": "Abgelehnt",
+    "Draft": "Entwurf",
+    "Expired": "Abgelaufen",
+    "In Progress": "In Bearbeitung"
+  },
+  "select-folder-help": "Wenn Sie keinen Ordner auswählen, wird Ihr unterzeichnetes Dokument im Hauptordner des {{appName}} Drive gespeichert.",
+  "no-data": "Keine Daten gefunden",
+  "save-here": "Hier speichern",
+  "back": "Zurück",
+  "add-folder": "Ordner hinzufügen",
+  "create-folder": "Ordner erstellen",
+  "parent-folder": "Übergeordneter Ordner",
+  "create": "Erstellen",
+  "signers": "Unterzeichner",
+  "signers-help": "Beginnen Sie mit der Eingabe eines Kontaktnamens, um vorgeschlagene Unterzeichner aus Ihren gespeicherten Kontakten zu sehen, oder fügen Sie neue hinzu. Ordnen Sie die Reihenfolge der Unterzeichner, indem Sie sie in der gewünschten Reihenfolge hinzufügen. Verwenden Sie die '+'-Schaltfläche, um Unterzeichner hinzuzufügen, und 'x', um sie zu entfernen. Jeder Unterzeichner erhält eine E-Mail-Aufforderung, das Dokument in der aufgelisteten Reihenfolge zu unterzeichnen.",
+  "bcc-help": "Beginnen Sie mit der Eingabe des Namens eines Kontakts, um Vorschläge aus Ihren gespeicherten Kontakten anzuzeigen oder neue hinzuzufügen. Verwenden Sie die Schaltfläche '+', um einen Benutzer hinzuzufügen, und das 'x', um ihn zu entfernen. Die E-Mail des ausgewählten Benutzers wird als Bcc (Blindkopie) hinzugefügt. Jeder Benutzer erhält eine E-Mail-Benachrichtigung, sobald das Dokument fertig ist.",
+  "add-signer": "Unterzeichner hinzufügen",
+  "contact-not-found": "Kontakt nicht gefunden",
+  "add-yourself": "Sich selbst hinzufügen",
+  "submit": "Absenden",
+  "reset": "Zurücksetzen",
+  "my-signature": "Meine Unterschrift",
+  "signature": "Unterschrift",
+  "upload-image": "Bild hochladen",
+  "clear": "Löschen",
+  "upload-signature/Image": "Bitte Unterschrift/Bild hochladen",
+  "initials": "Initialen",
+  "API": "API",
+  "api-token": "API-Token",
+  "regenerate-token": "Live-Token neu generieren",
+  "generate-token": "Live-Token generieren",
+  "view-docs": "Dokumentation ansehen",
+  "generate-token-alert": "Sind Sie sicher, dass Sie das Token neu generieren möchten? Das alte Token wird ablaufen.",
+  "yes": "Ja",
+  "copied": "Kopiert",
+  "something-went-wrong-mssg": "Etwas ist schiefgelaufen, Das Aktualisieren dieser Seite kann das Problem lösen.",
+  "token-generated": "Token erfolgreich generiert.",
+  "webhook": "Webhook",
+  "update-webhook": "Webhook aktualisieren",
+  "add-webhook": "Webhook hinzufügen",
+  "webhook-added": "Webhook erfolgreich hinzugefügt.",
+  "team-disabled": "Team deaktiviert",
+  "Team enabled": "Team aktiviert",
+  "are-you-sure": "Sind Sie sicher, dass Sie",
+  "disable": "deaktivieren",
+  "enable": "aktivieren",
+  "this-team": "dieses Team möchten?",
+  "edit-team": "Team bearbeiten",
+  "name-of-team": "Name des Teams",
+  "prev": "Zurück",
+  "no-data-avaliable": "Keine Daten verfügbar",
+  "add-team": "Team hinzufügen",
+  "page-not-found": "Seite nicht gefunden",
+  "users-from-teams": "Benutzer aus Teams",
+  "user-status": "Benutzerstatus",
+  "activate": "aktivieren",
+  "deactivate": "deaktivieren",
+  "this-user": "diesen Benutzer",
+  "delete-user": "Benutzer löschen",
+  "delete": "löschen",
+  "add-user": "Benutzer hinzufügen",
+  "password-generateed": "Das Passwort wird nur einmal generiert; stellen Sie sicher, dass Sie es kopieren.",
+  "Team status": "Teamstatus",
+  "user-deactivated": "Benutzer deaktiviert.",
+  "user-activated": "Benutzer aktiviert.",
+  "public": "Öffentlich",
+  "download": "Herunterladen",
+  "view": "Ansehen",
+  "make-template-public": "Vorlage öffentlich machen",
+  "make-template-private": "Vorlage privat machen",
+  "make-template-public-alert": "Sind Sie sicher, dass Sie diese Vorlage öffentlich machen möchten?",
+  "make-template-private-alert-non": "Sind Sie sicher, dass Sie diese Vorlage privat machen möchten?",
+  "make-template-private-alert": "Sind Sie sicher, dass Sie diese Vorlage privat machen möchten? Dadurch wird sie aus Ihrem öffentlichen Profil entfernt.",
+  "public-role": "Öffentliche Rolle",
+  "public-url": "Öffentliches Profil",
+  "embed-template": "Vorlage einbetten",
+  "public-url-copy": "Hier ist Ihre öffentliche URL: ",
+  "public-url-copy-mssg": "Kopieren oder teilen Sie diese URL, und Sie können alle öffentlich eingestellten Vorlagen sehen.",
+  "add-public-url-alert": "Sie können Ihr öffentliches {{appName}} Profil generieren",
+  "share-with-alert": "Sie können eine Vorlage nicht teilen, wenn Rollen bereits Kontakte zugewiesen haben. Entfernen Sie bitte alle Kontaktzuweisungen von den Rollen, bevor Sie die Vorlage teilen.",
+  "share-with": "Teilen mit",
+  "team-not-found": "Team nicht gefunden",
+  "roles": "Rollen",
+  "delete-document": "Dokument löschen",
+  "delete-document-alert": "Sind Sie sicher, dass Sie dieses Dokument löschen möchten?",
+  "quick-send": "Schnell senden",
+  "add-new": "Neu hinzufügen",
+  "send": "Senden",
+  "quick-send-alert-1": "Alle Rollen in diesem Dokument sind derzeit mit Kontakten verknüpft. Um Kopien dieser Vorlage schnell an mehrere Unterzeichner zu senden, stellen Sie sicher, dass mindestens eine Rolle keinem Kontakt zugeordnet ist.",
+  "quick-send-alert-2": "Bitte stellen Sie sicher, dass für alle Empfänger mindestens ein Signatur-Widget hinzugefügt wurde.",
+  "quick-send-alert-3": "Bitte fügen Sie diesem template mindestens eine Rolle hinzu.",
+  "quick-send-alert-4": "Das Limit für Schnellsendungen wurde erreicht.",
+  "copy-link": "Link kopieren",
+  "copy": "Kopieren",
+  "revoke-document": "Dokument widerrufen",
+  "revoke-document-alert": "Sind Sie sicher, dass Sie dieses Dokument widerrufen möchten?",
+  "resend-mail": "E-Mail erneut senden",
+  "resend-mail-help": "Sie können folgende Variablen verwenden, die durch ihre tatsächlichen Werte ersetzt werden: {{document_title}}, {{sender_name}}, {{sender_mail}}, {{sender_phone}}, {{receiver_name}}, {{receiver_email}}, {{receiver_phone}}, {{expiry_date}}, {{company_name}}, {{signing_url}}, {{note}}.",
+  "subject": "Betreff",
+  "body": "Inhalt",
+  "add-contact": "Kontakt hinzufügen",
+  "edit-contact": "Kontakt bearbeiten",
+  "add-signer-alert": "Kontakt existiert bereits! Bitte wählen Sie ihn aus dem Dropdown-Menü 'Unterzeichner' aus.",
+  "record-delete-alert": "Datensatz erfolgreich gelöscht!",
+  "record-revoke-alert": "Datensatz erfolgreich widerrufen!",
+  "mail-sent-alert": "E-Mail erfolgreich gesendet.",
+  "document-sent-alert": "Dokument erfolgreich gesendet!",
+  "template-share-alert": "Vorlage erfolgreich geteilt.",
+  "template-public-alert-1": "Sie haben die Vorlage erfolgreich öffentlich gemacht.",
+  "template-public-alert-2": "Sie haben die Vorlage erfolgreich privat gemacht.",
+  "template-public-alert-3": "Sie müssen eine Rolle für die öffentlichen Unterzeichner auswählen.",
+  "template-public-alert-4": "Bitte stellen Sie sicher, dass für alle Unterzeichner mindestens ein Signatur-Widget hinzugefügt wurde.",
+  "template-public-alert-5": "Da für diese Vorlage das Senden in Reihenfolge aktiviert ist, muss die öffentliche Rolle oben positioniert sein.",
+  "template-public-alert-6": "Bitte verknüpfen Sie Unterzeichner mit allen Rollen, außer mit der öffentlichen Rolle.",
+  "template-public-alert-7": "Bitte weisen Sie mindestens eine öffentliche Rolle zu, um diese Vorlage öffentlich zu machen.",
+  "loader": "Das könnte etwas Zeit in Anspruch nehmen",
+  "pages": "Seiten",
+  "document-signed": "Dokument unterzeichnet",
+  "close": "Schließen",
+  "validation-alert": "Validierungswarnung",
+  "validate-alert-mssg": "Die Eingabe erfüllt nicht die Kriterien des regulären Ausdrucks.",
+  "otp-verification": "OTP-Verifizierung",
+  "enter-otp": "OTP eingeben",
+  "verify": "Verifizieren",
+  "verify-email-1": "E-Mail verifizieren",
+  "resend": "Erneut senden",
+  "contact-details": "Kontaktdetails",
+  "verify-email": "Bitte bestätigen Sie Ihre E-Mail, um fortzufahren. Dies ist ein einmaliger Schritt, um die mit Ihrem OpenSign-Konto verknüpfte E-Mail zu bestätigen.",
+  "send-otp": "OTP senden",
+  "otp-placeholder": "Verifizierungscode aus der E-Mail eingeben",
+  "loading-doc": "Dokument wird geladen...",
+  "widgets-name": {
+    "signature": "Unterschrift",
+    "stamp": "Stempel",
+    "initials": "Initialen",
+    "name": "Name",
+    "job title": "Berufsbezeichnung",
+    "company": "Unternehmen",
+    "date": "Datum",
+    "text": "Text",
+    "text input": "Texteingabe",
+    "checkbox": "Checkbox",
+    "dropdown": "Dropdown",
+    "radio button": "Radiobutton",
+    "image": "Bild",
+    "email": "E-Mail"
+  },
+  "fields": "Felder",
+  "recipients": "Empfänger",
+  "please-add": "Bitte fügen Sie hinzu",
+  "signed-by": "Unterzeichnet von",
+  "more": "mehr",
+  "sent": "gesendet",
+  "print": "Drucken",
+  "certificate": "Zertifikat",
+  "decline": "Ablehnen",
+  "finish": "Fertigstellen",
+  "mail": "E-Mail",
+  "sign-now": "Jetzt unterzeichnen",
+  "successfully-signed": "Erfolgreich unterzeichnet!",
+  "email-mssg": "Empfänger, die hier hinzugefügt werden, erhalten eine Kopie des unterzeichneten Dokuments.",
+  "email-error-1": "Bitte geben Sie eine korrekte E-Mail-Adresse an.",
+  "email-error-2": "Sie können nur an maximal zehn Empfänger gleichzeitig senden.",
+  "Email-verified-alert-1": "E-Mail wurde verifiziert.",
+  "Email-verified-alert-2": "E-Mail wurde bereits verifiziert.",
+  "upload-stamp-image": "Stempelbild hochladen",
+  "draw": "Zeichnen",
+  "type": "Schreiben",
+  "color-type": {
+    "red": "rot",
+    "blue": "blau",
+    "black": "schwarz",
+    "yellow": "gelb"
+  },
+  "my-initials": "Meine Initialen",
+  "upload": "Hochladen",
+  "initial-teb": "Initialen",
+  "signature-tab": "Unterschrift",
+  "initial-alert": "Meine Initiale nicht gefunden",
+  "copy-title": "Widget kopieren zu",
+  "contact-delete-alert": "Sind Sie sicher, dass Sie diesen Kontakt löschen möchten?",
+  "reset-password-alert-1": "Ein Link zum Zurücksetzen des Passworts wurde an Ihre E-Mail-Adresse gesendet.",
+  "reset-password-alert-2": "Bitte richten Sie den E-Mail-Adapter ein.",
+  "reset-password-alert-3": "Setzen Sie Ihr Passwort zurück",
+  "faild-animation": "Animation konnte nicht geladen werden",
+  "apply": "Anwenden",
+  "copy-type": {
+    "All pages": "Alle Seiten",
+    "All pages but last": "Alle Seiten außer der letzten",
+    "All pages but first": "Alle Seiten außer der ersten",
+    "Next to current widget": "Neben dem aktuellen Widget"
+  },
+  "options": "Optionen",
+  "minimun-check": "Minimale Anzahl",
+  "maximum-check": "Maximale Anzahl",
+  "default-value": "Standardwert",
+  "select": "Auswählen",
+  "read-only": "Nur lesen",
+  "hide-labels": "Labels ausblenden",
+  "checkbox": "Checkbox",
+  "alert": "Warnung",
+  "zoom-in": "Vergrößern",
+  "zoom-out": "Verkleinern",
+  "document-signed-alert": "Herzlichen Glückwunsch! 🎉 Dieses Dokument wurde erfolgreich von Ihnen unterzeichnet!",
+  "otp-sent-alert": "OTP wurde an Ihre E-Mail gesendet",
+  "fields-required": "Erforderliche Felder",
+  "signature-widget-alert-1": "Bitte stellen Sie sicher, dass mindestens ein Signatur-Widget hinzugefügt wurde",
+  "signature-widget-alert-2": "Bitte stellen Sie sicher, dass alle Felder korrekt ausgefüllt sind und die Anforderungen erfüllen.",
+  "encrypted-pdf-alert": "Derzeit werden verschlüsselte PDF-Dateien nicht unterstützt.",
+  "encrypted-pdf-alert-1": "Das Passwort der PFX-Datei ist ungültig.",
+  "user-not-exist": "Benutzer existiert nicht",
+  "template-role-alert": "Bitte fügen Sie zuerst Rollen hinzu",
+  "create-document": "Dokument erstellen",
+  "template-created-alert": "Möchten Sie ein Dokument mit der gerade erstellten Vorlage erstellen?",
+  "signers-alert": "Unterzeichner-Warnung",
+  "template-creation-alert-1": "Bitte wählen Sie einen Unterzeichner aus, um Platzhalter hinzuzufügen!",
+  "ok": "OK",
+  "radio-group": "Radiogruppe",
+  "dropdown-options": "Dropdown-Optionen",
+  "add-role": "Rolle hinzufügen",
+  "role-ex": "z. B.: Kunde, Personalabteilung, Direktor, Manager, Student, etc.",
+  "add/choose-signer": "Unterzeichner hinzufügen/auswählen",
+  "choose-from-contacts": "Aus Kontakten auswählen",
+  "select-signer": "Bitte Unterzeichner auswählen",
+  "edit-template": "Vorlage bearbeiten",
+  "widget-info": "Widget-Info",
+  "validation": "Validierung",
+  "invalid-default-value": "Ungültiger Standardwert",
+  "hint": "Hinweis",
+  "color": "Farbe",
+  "role-help": {
+    "p1": "Was sind Vorlagenrollen?",
+    "p2": "Beginnen Sie damit, jede Rolle zu definieren, die für die Fertigstellung des Dokuments erforderlich ist. Überlegen Sie, welche Parteien in den Unterschriftsprozess einbezogen sind und welche Aufgaben sie haben. Häufige Rollen sind z. B. Personalabteilung für interne Dokumente, Kunde für Vereinbarungen oder Anbieter für Geschäftsvereinbarungen.",
+    "p3": "Warum Benutzer an bestimmte Rollen vorab anhängen?",
+    "p4": "Für Rollen, die regelmäßig dieselbe Person betreffen (z. B. die Unterschrift des CEOs bei Mitarbeiterangebotsschreiben), können Sie einen Benutzer in der Vorlage vorab an eine Rolle anhängen. Dieser Schritt ist optional, aber empfohlen für Effizienz und Konsistenz.",
+    "p5": "Wann lege ich den Benutzer für jede Rolle fest?",
+    "p6": "Wenn Sie ein Dokument aus Ihrer Vorlage erstellen, werden Sie aufgefordert, Benutzer an jede definierte Rolle anzuhängen. Wenn eine Rolle bereits einen Benutzer hat, wird diese vorausgefüllt, kann aber vor dem Versand des Dokuments geändert werden."
+  },
+  "add-recipients": "Empfänger hinzufügen",
+  "loading-mssg": "Das könnte etwas Zeit in Anspruch nehmen",
+  "send-mail": "E-Mail senden",
+  "signature-field-widget": "Für jeden Benutzer muss mindestens ein Signaturfeld hinzugefügt werden. Sie haben keine Signaturfelder für {{signersName}} hinzugefügt",
+  "placeholder-alert-1": "Bitte stellen Sie sicher, dass für alle Empfänger mindestens ein Signatur-Widget hinzugefügt wurde.",
+  "placeholder-alert-2": "Bitte bestätigen Sie, dass Sie das Textfeld ausgefüllt haben.",
+  "placeholder-alert-3": "Sind Sie sicher, dass Sie dieses Dokument zur Unterzeichnung senden möchten?",
+  "placeholder-alert-4": "Sie haben erfolgreich E-Mails an alle Empfänger gesendet!",
+  "placeholder-mail-alert": "Sie haben erfolgreich eine E-Mail an {{name}} gesendet. Die nachfolgenden Unterzeichner erhalten eine E-Mail, sobald {{name}} das Dokument unterzeichnet.",
+  "placeholder-mail-alert-you": "Nachfolgende Unterzeichner erhalten E-Mails, sobald Sie das Dokument unterschreiben.",
+  "placeholder-alert-5": "Möchten Sie die Dokumente jetzt unterschreiben?",
+  "placeholder-alert-6": "Bitte richten Sie den E-Mail-Adapter ein, um E-Mails zu senden!",
+  "placeholder-alert-7": "Bitte wählen Sie einen Unterzeichner aus, um Platzhalter hinzuzufügen!",
+  "email-subject": "E-Mail-Betreff",
+  "email-body": "E-Mail-Inhalt",
+  "email-placeholder": "E-Mail-Text eingeben",
+  "reset-to-default": "Auf Standard zurücksetzen",
+  "cutomize-email": "E-Mail anpassen",
+  "upgrade-to-customize-email": "Upgrade, um E-Mails anzupassen",
+  "sign-url": "Signatur-URL",
+  "mails-sent": "E-Mails gesendet",
+  "mail-not-delivered": "E-Mail nicht zugestellt",
+  "document-alert": "Dokument-Warnung",
+  "owner-subscription-expired": "Das Abonnement des Besitzers ist abgelaufen.",
+  "subscription-expired": "Abonnement abgelaufen",
+  "alert-message": "Warnmeldung",
+  "document-decline": "Dokument ablehnen",
+  "decline-alert-1": "Sind Sie sicher, dass Sie dieses Dokument ablehnen möchten?",
+  "decline-alert-2": "Sie haben dieses Dokument abgelehnt!",
+  "decline-alert-3": "Sie können dieses Dokument nicht unterschreiben, da es abgelehnt/widerrufen wurde.",
+  "sign here": "Hier unterschreiben",
+  "guest-email-alert": "Ein Verifizierungscode wurde an Ihre E-Mail gesendet",
+  "get-otp-alert": "Sie erhalten einen Verifizierungscode per E-Mail",
+  "user-already-exist": "Benutzer existiert bereits.",
+  "server-error": "Interner Serverfehler!",
+  "fill-required-details!": "Bitte füllen Sie die erforderlichen Felder aus!",
+  "sign-up-form": "Registrierungsformular",
+  "sign-up": "Registrieren",
+  "folder-already-exist!": "Ordner existiert bereits!",
+  "please-select-position!": "Bitte Position auswählen!",
+  "default-sign-alert": "Möchten Sie wirklich alle angeforderten {{widgetsType}}-Widgets automatisch anmelden?",
+  "Your-Signature": "Ihre Unterschrift",
+  "auto-sign-all": "Alles automatisch unterschreiben",
+  "generating-certificate": "Zertifikat wird generiert",
+  "pdf-download": "PDF herunterladen",
+  "generate-certificate-alert": "Ihr Abschlusszertifikat wird gerade generiert. Bitte warten Sie einen Moment. Wenn der Download nicht bald beginnt, klicken Sie erneut auf die Schaltfläche.",
+  "generate-certificate-err": "Wir haben derzeit ein Problem mit der Zertifikatserstellung. Bitte versuchen Sie es später erneut",
+  "folder-already-exist": "Ordner existiert bereits!",
+  "folder-created-successfully": "Ordner erfolgreich erstellt!",
+  "fill-folder-name": "Bitte Ordnernamen eingeben",
+  "already-exists-this-username": "Ein Benutzer mit diesem Benutzernamen existiert bereits!",
+  "verification-code-sent": "Verifizierungs-Mail wurde an Ihre E-Mail gesendet!",
+  "registered-user-successfully": "Benutzer erfolgreich registriert.",
+  "role-not-found": "Rolle nicht gefunden.",
+  "do-not-access": "Sie haben keinen Zugriff. Bitte kontaktieren Sie den Administrator.",
+  "add-admin": "Admin hinzufügen",
+  "opensign-setup": "{{appName}} Einrichtung",
+  "join-discord": "Treten Sie unserem Discord-Server bei",
+  "admin-already-exist": "Admin existiert bereits.",
+  "password-update-alert-1": "Passwort erfolgreich aktualisiert.",
+  "password-update-alert-2": "Ihr aktuelles Passwort fehlt oder ist falsch.",
+  "password-update-alert-3": "Ihr aktuelles Passwort fehlt oder ist falsch.",
+  "password-update-alert-4": "Ihr Passwort und die Bestätigung stimmen nicht überein.",
+  "current-password": "Aktuelles Passwort",
+  "new-password": "Neues Passwort",
+  "confirm-password": "Passwort bestätigen",
+  "file-alert-1": "Die ausgewählte Datei ist zu groß. Bitte wählen Sie eine Datei, die kleiner als",
+  "file-alert-2": "Bitte Datei auswählen.",
+  "file-alert-3": "Bitte warten, während das Dokument hochgeladen wird.",
+  "enter-pdf-password": "PDF-Passwort eingeben",
+  "correct-password": "Bitte korrektes Passwort angeben",
+  "decrypting-pdf": "PDF wird entschlüsselt, bitte warten...",
+  "invalid-otp": "Ungültiger OTP",
+  "user-not-found": "Benutzer nicht gefunden",
+  "enter-otp-alert": "Bitte OTP eingeben!",
+  "get-verification-code": "Verifizierungscode erhalten",
+  "get-verification-code-2": "Sie erhalten einen Verifizierungscode per E-Mail",
+  "enter-verification-code": "Verifizierungscode eingeben",
+  "provide-your-details": "Bitte geben Sie Ihre Daten an",
+  "provide-email": "Bitte E-Mail angeben.",
+  "additional-info": "Zusätzliche Informationen",
+  "signature-saved-alert": "Unterschrift erfolgreich gespeichert.",
+  "saved-successfully": "Erfolgreich gespeichert.",
+  "fill-field": "Bitte dieses Feld ausfüllen",
+  "error-template": "Fehler: Vorlage nicht gefunden!",
+  "error": "Fehler",
+  "invalid-document": "Fehler: ungültiges Dokument!",
+  "document-not-found": "Dokument nicht gefunden!",
+  "document-signed-alert-1": "Sie haben das Dokument erfolgreich unterzeichnet. Sie können eine Kopie des teilweise unterzeichneten Dokuments herunterladen oder drucken. Eine Kopie des digital signierten Dokuments und des Abschlusszertifikats wird per E-Mail an den Besitzer und alle Unterzeichner gesendet, sobald alle unterzeichnet haben.",
+  "encrypted-pdf-not-support": "Derzeit werden verschlüsselte PDF-Dateien nicht unterstützt.",
+  "document-signed-alert-4": "Herzlichen Glückwunsch! 🎉 Dieses Dokument wurde erfolgreich von allen Teilnehmern unterzeichnet!",
+  "document-signed-alert-5": "Dieses Dokument wurde von allen Unterzeichnern unterzeichnet.",
+  "document-signed-alert-6": "Dieses Dokument wurde von einem oder mehreren Empfängern abgelehnt.",
+  "document-signed-alert-7": "Dieses Dokument ist nicht mehr verfügbar.",
+  "document-signed-alert-8": "Das Dokument wurde bereits zum Unterzeichnen versendet.",
+  "yet-to-sign": "Noch zu unterzeichnen",
+  "validation-alert-1": "Die Eingabe erfüllt nicht die Kriterien des regulären Ausdrucks.",
+  "account-already-exists": "Konto existiert bereits!",
+  "choose-password": "Passwort wählen",
+  "enter-password": "Passwort eingeben",
+  "sure": "Sicher",
+  "subscribed-alert": "Sie haben diesen Plan bereits abonniert!",
+  "monthly": "Monatlich",
+  "yearly-upto": "Jährlich (bis zu 66 % Rabatt)",
+  "billed-yearly": "Jährlich abgerechnet",
+  "billed-monthly": "Monatlich abgerechnet",
+  "plansubscription-1": "Hosten Sie es selbst kostenlos",
+  "visit-github": "Besuchen Sie Github",
+  "user-already-exist-name": "Ein Benutzer mit diesem Benutzernamen existiert bereits!",
+  "do-not-access-contact-admin": "Sie haben keinen Zugriff, bitte kontaktieren Sie den Administrator.",
+  "filed-required-correctly": "Bitte füllen Sie die erforderlichen Details korrekt aus.",
+  "admin-created": "Admin erstellt",
+  "invalid-masterkey": "Ungültiger Hauptschlüssel",
+  "master-key": "Hauptschlüssel",
+  "profile-update-alert": "Profil erfolgreich aktualisiert.",
+  "date": "Datum",
+  "report-not-found": "Bericht nicht gefunden",
+  "please-wait": "Bitte warten",
+  "select-foler": "Ordner auswählen",
+  "generated-on": "Erstellt am",
+  "text-field": "Textfeld",
+  "font-size": "Schriftgröße",
+  "widget-status": {
+    "Required": "Erforderlich",
+    "Optional": "Optional"
+  },
+  "all-right": "Alle Rechte vorbehalten",
+  "version": "version",
+  "social-media": {
+    "github": "Github",
+    "linked-in": "LinkedIn",
+    "twitter": "Twitter",
+    "discord": "Discord"
+  },
+  "tour-mssg": {
+    "home-layout-1": "Sie haben sich erfolgreich angemeldet! Werfen wir einen Blick darauf.",
+    "home-layout-2": "Um Dokumente zum Selbstunterzeichnen hochzuladen oder um Unterschriften anderer anzufordern, wählen Sie einfach die entsprechenden Schaltflächen.",
+    "home-layout-3": "Sie sind bereit, {{appName}} zu verwenden! Wenn Sie Unterstützung benötigen, kontaktieren Sie uns gerne.",
+    "generate-token": "Jetzt upgraden, um ein Produktions-API-Token zu generieren.",
+    "opensign-drive-1": "Klicken Sie auf die Breadcrumb-Links, um einfach durch die Ordnerhierarchie zu navigieren und die Dokumente in jedem Ordner anzuzeigen.",
+    "opensign-drive-2": "Klicken Sie auf die Schaltfläche Hinzufügen, um einen neuen Ordner oder ein neues Dokument zu erstellen.",
+    "opensign-drive-3": "Sortieren Sie Ihre Dokumente nach Datum oder Name über dieses Menü.",
+    "opensign-drive-4": "Klicken Sie auf dieses Menü, um die Dokumente in der Listenansicht anzuzeigen.",
+    "opensign-drive-5": "Die Dokumentenliste wird entsprechend der ausgewählten Sortieroption angezeigt. Symbole neben jedem Dokument zeigen den aktuellen Status an.",
+    "opensign-drive-6": "Klicken Sie mit der rechten Maustaste auf ein Dokument, um Optionen wie Herunterladen, Umbenennen, Verschieben und Löschen anzuzeigen. Klicken Sie auf das Dokument, um es zu öffnen.",
+    "opensign-drive-7": "Klicken Sie mit der rechten Maustaste auf einen Ordner, um Optionen anzuzeigen. Wählen Sie Umbenennen, um den Namen des Ordners zu ändern, oder klicken Sie auf den Ordner, um seinen Inhalt anzuzeigen.",
+    "pdf-request-file-1": "Liste der Unterzeichner, die das Dokument noch unterschreiben müssen.",
+    "pdf-request-file-2": "Klicken Sie auf die Platzhalter im Dokument, um zu unterschreiben. Sie sehen dann Optionen, Ihre Unterschrift zu zeichnen, einzugeben oder ein Bild hochzuladen.",
+    "pdf-request-file-3": "Klicken Sie auf die Schaltflächen Ablehnen oder Fertig stellen, um durch Ihr Dokument zu navigieren. Verwenden Sie das Auslassungsmenü für weitere Optionen, einschließlich der Schaltfläche Herunterladen.",
+    "pdf-request-file-4": "Liste der Unterzeichner, die das Dokument bereits unterzeichnet haben.",
+    "pdf-request-file-5": "Sie können auf Automatisch alles unterschreiben klicken, um automatisch an allen für Sie vorgesehenen Stellen zu unterschreiben. Überprüfen Sie das Dokument gründlich, bevor Sie diese Schaltfläche verwenden.",
+    "pdf-request-file-6": "Bitte füllen Sie die Felder auf Seite {{pagenumbers}} aus, die alle zur einfachen Identifizierung in der gleichen Farbe hervorgehoben sind.",
+    "placeholder-sign-1": "Wählen Sie einen Empfänger aus dieser Liste aus, um einen Platzhalter hinzuzufügen, an dem er unterschreiben soll. Der Platzhalter wird in der gleichen Farbe wie der Empfängername angezeigt, sobald Sie ihn im Dokument ablegen.",
+    "placeholder-sign-2": "Das Klicken auf die Schaltfläche 'Empfänger hinzufügen' ermöglicht es Ihnen, weitere Unterzeichner hinzuzufügen.",
+    "placeholder-sign-3": "Klicken Sie auf diese Schaltfläche, um weitere Empfänger/Unterzeichner zum Dokument hinzuzufügen.",
+    "placeholder-sign-4": "Ziehen Sie ein Feld in das Dokument oder klicken Sie darauf, um es hinzuzufügen.",
+    "placeholder-sign-5": "Der PDF-Inhaltsbereich zeigt bereits die vorhandenen Platzhalter der Vorlage an. Diese Platzhalter entsprechen der Farbe des Empfängernamens, um sie leicht erkennbar zu machen.",
+    "placeholder-sign-6": "Mit einem Klick auf 'Weiter' wird das Dokument gespeichert. Im nächsten Schritt können Sie die E-Mails, die an die Empfänger versendet werden sollen, anpassen oder die Signaturlinks kopieren und diese selbst mit den Empfängern teilen.",
+    "report-1":"Klicken Sie auf die Schaltfläche „Hinzufügen“, um eine neue Vorlage zu erstellen. Vorlagen sind wiederverwendbare Dokumente, mit denen schnell neue Dokumente mit derselben Struktur und unterschiedlichen Unterzeichnern erstellt werden können. Eine HR-Vorlage für die Einarbeitung könnte beispielsweise vordefinierte Rollen wie „Personalleiter“ und „Neuer Mitarbeiter“ enthalten. Bei jeder Verwendung der Vorlage können Sie die Rolle „Neuer Mitarbeiter“ verschiedenen neuen Mitarbeitern zuweisen, während die Rolle „Personalleiter“ unverändert bleibt. So wird ein nahtloser Einarbeitungsprozess für jeden neuen Mitarbeiter ermöglicht.",
+    "redirect": "Klicken Sie auf die Schaltfläche 'Verwenden', um ein neues Dokument aus einer bestehenden Vorlage zu erstellen.",
+    "bulksend": "Um schnell mehrere Dokumente mithilfe einer vorhandenen Vorlage zu versenden, indem Sie einfach die E-Mail-Adressen der Empfänger erstellen, klicken Sie auf die Schaltfläche ‚Massenversand‘",
+    "option": "Dieses Menü zeigt weitere Optionen wie Bearbeiten und Löschen. Verwenden Sie die Schaltfläche 'Bearbeiten', um Unterzeichnerrollen hinzuzufügen, Felder zu ändern und Ihre Vorlage zu aktualisieren. Änderungen gelten für alle zukünftigen Dokumente, die aus dieser Vorlage erstellt werden, wirken sich jedoch nicht auf vorhandene Dokumente aus. Verwenden Sie die Schaltfläche 'Löschen', um die Vorlage zu entfernen.",
+    "signyour-self-1": "Wählen und ziehen Sie Ihre bevorzugten Widgets auf das PDF, um Ihr Dokument vor dem Unterzeichnen anzupassen. Wählen Sie die perfekten Stellen für jede Anpassung aus, um das Dokument an Ihre Bedürfnisse anzupassen.",
+    "signyour-self-2": "Ziehen Sie ein Widget irgendwo in diesen Bereich. Sie können es später in der Größe ändern und verschieben.",
+    "template-placeholder-1": "Das Klicken auf die Schaltfläche 'Rolle hinzufügen' ermöglicht es Ihnen, verschiedene Unterzeichnerrollen hinzuzufügen. Sie können Benutzern diese Rollen in den folgenden Schritten zuweisen.",
+    "template-placeholder-2": "Sobald Rollen hinzugefügt wurden, wählen Sie eine Rolle aus der Liste aus, um einen Platzhalter hinzuzufügen, an dem der Unterzeichner unterschreiben soll. Der Platzhalter wird in der gleichen Farbe wie der Rollenname angezeigt, sobald Sie ihn im Dokument ablegen.",
+    "template-placeholder-3": "Ziehen Sie ein Feld in das Dokument oder klicken Sie darauf, um es hinzuzufügen.",
+    "template-placeholder-4": "Ziehen Sie den Platzhalter für eine Rolle an eine beliebige Stelle im Dokument. Denken Sie daran, dass er in der gleichen Farbe wie der Name des Empfängers angezeigt wird, um die Zuordnung zu erleichtern.",
+    "template-placeholder-5": "Das Klicken auf 'Weiter' speichert die aktuelle Vorlage. Nach dem Speichern werden Sie gefragt, ob Sie ein neues Dokument aus dieser Vorlage erstellen möchten.",
+    "webhook-1": "Jetzt upgraden, um einen Webhook einzurichten",
+    "Need your Signature": "Das Klicken auf diese Karte führt Sie zu einer Liste der Dokumente, die auf Ihre Überprüfung warten.",
+    "Out for signatures": "Das Klicken auf diese Karte führt Sie zu einer Liste der Dokumente, die auf eine Signatur warten.",
+    "Recent signature requests": "Dies ist eine Liste von Dokumenten, die auf Ihre Unterschrift warten.",
+    "Recently sent for signatures": "Dies ist eine Liste von Dokumenten, die Sie an andere Parteien zur Unterschrift gesendet haben.",
+    "Drafts": "Dies sind Dokumente, die Sie begonnen, aber noch nicht zum Versenden fertiggestellt haben.",
+    "public-template": "Dieses Video zeigt Ihnen, wie Sie Ihr personalisiertes öffentliches Profil einrichten, z. B. 'https://opensign.me/Ihr-Benutzername'. Sie lernen auch, wie Sie Ihren Slogan anpassen und Ihre Vorlagen für öffentliche Signaturen verfügbar machen.",
+    "allowModify-widgets": "Sie können jedes dieser Felder per Drag & Drop in das Dokument ziehen, zusätzlich zu den Feldern, die der Dokumentersteller bereits für Sie festgelegt hat."
+  },
+  "enter-email-plaholder": "E-Mail-Adresse hinzufügen und Enter drücken",
+  "success-email-alert": "E-Mail erfolgreich gesendet!",
+  "expired-doc-title": "Abgelaufenes Dokument",
+  "expired-on-mssg": "Dieses Dokument ist am {{expiredDate}} abgelaufen und nicht mehr verfügbar zum Unterzeichnen.",
+  "signature-validate-alert": "Bitte bestätigen Sie, dass Sie mindestens {{minRequiredCount}} Kontrollkästchen ausgewählt haben.",
+  "signature-validate-alert-2": "Stellen Sie sicher, dass dieses Feld korrekt ausgefüllt ist und alle Anforderungen erfüllt.",
+  "remaing-users": "Verbleibende Benutzer",
+  "Role": "Rolle",
+  "additional-users": "Bitte kaufen Sie zusätzliche Benutzer hinzu.",
+  "Quantity-of-users": "Anzahl der Benutzer",
+  "Price": "Preis",
+  "Total-price-for-next-time": "Gesamtpreis für das nächste Mal",
+  "Proceed": "Fortfahren",
+  "Select": "Auswählen",
+  "Add-seats": "Plätze hinzufügen",
+  "user-name-exist": "Benutzername existiert bereits",
+  "format": "Format",
+  "select-date-format": "Wählen Sie ein Datumsformat",
+  "quantity-of-credits": "Anzahl der Premium-Credits",
+  "remaining-credits": "Verfügbare Premium-Credits:",
+  "remaining-credits-help": "Verwenden Sie Premium-Credits für API-Dokumentensignaturen, Massenversand oder die Einbettung der OpenSign-Integration auf Ihrer Website. Sie haben {{allowedcredits}} enthaltene Credits und {{addoncredits}} zusätzlich gekaufte Credits übrig.",
+  "additional-credits": "Bitte kaufen Sie Premium-Credits hinzu",
+  "quota-err-quicksend": "Kontingent erreicht, Sie haben nicht genügend Credits.",
+  "buy-credits": "Premium-Credits kaufen",
+  "rotate-right": "Nach rechts drehen",
+  "rotate-left": "Nach links drehen",
+  "rotate-alert-mssg": "Alle Widgets auf dieser Seite gehen verloren. Sind Sie sicher, dass Sie fortfahren möchten?",
+  "templateid": "Vorlagen-ID",
+  "bulk-send-subcription-alert": "Bitte upgraden Sie auf den Professional- oder Team-Plan, um den Massenversand zu nutzen.",
+  "generate-test-token": "Test-Token generieren",
+  "regenerate-test-token": "Test-Token neu generieren",
+  "help-test-token": "Dieses Token kann verwendet werden, um die APIs unter https://sandbox.opensignlabs.com/api/v1 zu testen und unbegrenzt Dokumente zu signieren. Beachten Sie, dass die Sandbox-API Ihre Dokumente mit selbstsignierten Zertifikaten signiert, die möglicherweise von Adobe nicht als gültig erkannt werden. Nach Abschluss Ihrer Tests können Sie auf einen unserer kostenpflichtigen Pläne upgraden, um ein Produktionstoken zu generieren.",
+  "help-api-token": "Dieses Token kann verwendet werden, um auf die Produktions-APIs unter {{origin}}/api/v1 zuzugreifen. Es kann nur auf einem unserer kostenpflichtigen Pläne generiert werden.",
+  "reason": "Grund",
+  "decline-by": "Abgelehnt/widerrufen von",
+  "document-declined": "Dokument abgelehnt",
+  "public-template-mssg-1": "Um OpenSign in Ihr React- oder Next.js-Projekt zu integrieren, führen Sie einfach den folgenden Befehl aus:",
+  "public-template-mssg-2": "Stellen Sie sicher, dass npm oder yarn in Ihrem Projekt eingerichtet ist. Wenn Sie Yarn verwenden, können Sie npm install durch yarn add @opensign/react ersetzen.",
+  "public-template-mssg-3": "Benötigen Sie weitere Details oder Beispiele?",
+  "public-template-mssg-4": "Besuchen Sie die",
+  "public-template-mssg-5": " npm für die neuesten Updates, detaillierte Dokumentationen und Versionshistorie.",
+  "public-template-mssg-6": "Bevor Sie diesen Code-Schnipsel verwenden können, müssen Sie diese Vorlage öffentlich machen.",
+  "public-template-mssg-7": "Bevor Sie einen öffentlichen Link generieren können, müssen Sie diese Vorlage öffentlich machen.",
+  "here": "Hier",
+  "copy-code": "KOPIEREN",
+  "copied-code": "KOPIERT",
+  "Installation": "Installation",
+  "Usage": "Nutzung",
+  "insufficient-credits": "Nicht genügend Signatur-Credits",
+  "insufficient-credits-mssg": "Der Besitzer dieses Dokuments verfügt derzeit nicht über die notwendigen OpenSign-Credits, damit Sie unterzeichnen können. Bitte wenden Sie sich an den Besitzer, wenn Sie weitere Informationen benötigen.",
+  "angular-npm-mssg-1": "Um OpenSign in Ihr Angular-Projekt zu integrieren, führen Sie einfach den folgenden Befehl aus:",
+  "quota-mail-info-head": "Monatliches E-Mail-Limit",
+  "quota-mail-info": "Um die Servicequalität aufrechtzuerhalten und Spam zu verhindern, erlaubt OpenSign bis zu 15 E-Mails pro Monat im kostenlosen Plan. Upgraden Sie jetzt für unbegrenzten E-Mail-Versand.",
+  "quota-mail-reset": "Ihre Credits für Signaturanfragen per E-Mail werden zurückgesetzt am",
+  "quota-mail": "Sie haben Ihr monatliches Limit von 15 Signaturanfragen per E-Mail erreicht. Jetzt upgraden, um weiter E-Mails direkt zu senden.",
+  "quota-mail-tip": "Tipp: Sie können weiterhin <1>unbegrenzt Dokumente</1> signieren, indem Sie den Signaturanfragelink manuell teilen.",
+  "quota-mail-head": "Kontingent erreicht",
+  "unauthorized-modal": "Sie haben keine Berechtigung, diese Aktion auszuführen. Bitte kontaktieren Sie {{adminEmail}}.",
+  "sent-this-month": "Diesen Monat gesendet",
+  "available-seats": "Verfügbare Plätze",
+  "buy-users": "Weitere Benutzer kaufen",
+  "isenable-otp": "OTP-Verifizierung aktivieren",
+  "isenable-otp-help": {
+    "p1": "Möchten Sie den Verifizierungsprozess mit einem einmaligen Passwort (OTP) aktivieren?",
+    "p2": "Wenn Sie diese Option auswählen, wird die OTP-Verifizierung aktiviert. Benutzer erhalten einen Verifizierungscode per E-Mail, den sie eingeben müssen, um das Dokument zu unterzeichnen.",
+    "p3": "Wenn Sie diese Option deaktivieren, können Benutzer das Dokument direkt ohne zusätzliche Schritte unterzeichnen.",
+    "p4": "Bitte wählen Sie die Option, die am besten zu Ihren Anforderungen für die Dokumentenunterzeichnung passt."
+  },
+  "advanced-options": "Erweiterte Optionen",
+  "hide-advanced-options": "Erweiterte Optionen ausblenden",
+  "download-files": "Dateien herunterladen",
+  "download-pdf": "PDF herunterladen",
+  "pdf-certificate": "PDF + Zertifikat herunterladen",
+  "document-logs": "Dokumentenprotokolle",
+  "server-down": "Verbindung zum {{appName}} Server nicht möglich. Wenn Sie {{appName}} selbst hosten, stellen Sie bitte sicher, dass alle Schritte in der Dokumentation korrekt befolgt wurden. Wenn Sie {{appName}} lokal ausführen, verwenden Sie möglicherweise eine falsche Portnummer.",
+  "admin-exists": "Admin existiert bereits. Bitte melden Sie sich mit den Admin-Anmeldedaten an, um Benutzer zu verwalten.",
+  "enable-tour": "Tour aktivieren",
+  "istourenabled-help": {
+    "p1": "Dies aktiviert eine geführte Tour für Unterzeichner, die während des Unterzeichnungsprozesses Anweisungen gibt.",
+    "p2": "Dies deaktiviert die geführte Tour, wodurch ein schneller, ununterbrochener Unterzeichnungsprozess gewährleistet wird.",
+    "p3": "Tipp: Wenn Ihre Unterzeichner mit {{appName}} vertraut sind und es häufig verwenden, können Sie die geführte Tour deaktivieren, um ein nahtloses Erlebnis zu gewährleisten. Wählen Sie die Option, die am besten zu Ihren Anforderungen passt."
+  },
+  "form-title-1": "Dokumentenfluss-Einstellungen",
+  "form-title-2": "Sicherheitseinstellungen",
+  "public-tour-message": "Die Vorlage muss öffentlich sein, bevor Sie einen teilbaren Link generieren können.",
+  "add-user-template": "Sie müssen eine Rolle hinzufügen, bevor Sie Felder dafür hinzufügen können.",
+  "pdf-uncompatible": "Diese PDF-Datei ist nicht kompatibel, bitte kontaktieren Sie {{appName}}",
+  "text-field-tour": "Felder vom Typ 'Text' müssen im Voraus ausgefüllt werden, bevor das Dokument versendet wird. Wenn Sie möchten, dass die Unterzeichner Eingaben machen, verwenden Sie das Feld 'Texteingabe'.",
+  "attach-signer-tour": "Sie müssen einen Unterzeichner jeder Rolle zuweisen. Dies können Sie durch Klicken auf dieses Symbol tun. Sobald Sie einen Unterzeichner auswählen, wird er allen Feldern der zugehörigen Rolle zugewiesen, die in derselben Farbe erscheinen.",
+  "allowed-signature-types": "Erlaubte Signaturtypen",
+  "at-least-one-signature-type": "Mindestens ein Signaturtyp sollte aktiviert sein.",
+  "expect-default-one-signature-type": "Bitte aktivieren Sie einen zusätzlichen Signaturtyp neben dem Standard.",
+  "add-signer-note": "Hinweis - Dieser Kontakt wird zu Ihrer Kontaktliste hinzugefügt",
+  "allowed-signature-types-help": {
+    "p1": "Diese Signaturpräferenz steuert, welche Signaturoptionen Ihren Unterzeichnern zur Verfügung stehen. Nur die Signaturtypen, die Sie auswählen, werden im Signatur-Widget angezeigt, wenn ein Dokument unterzeichnet wird. Wenn Sie beispielsweise nur die Option 'Zeichnen' in den Einstellungen auswählen, sieht Ihr Unterzeichner nur die Option 'Zeichnen' im Signatur-Widget, während die anderen drei Optionen nicht verfügbar sind.",
+    "l1": "Erstellen Sie eine handschriftliche Signatur direkt auf dem Bildschirm mit Ihrem Finger oder einem Stift.",
+    "l2": "Geben Sie Ihren Namen ein und wählen Sie aus verschiedenen Schriftarten, um eine Signatur zu erstellen.",
+    "l3": "Laden Sie eine vorhandene digitale Version Ihrer Signatur hoch.",
+    "l4": "Verwenden Sie einen voreingestellten Signaturstil, der unter 'Meine Signatur' in Ihren Einstellungen gespeichert ist."
+  },
+  "notify-on-signatures": "Benachrichtigen bei Signaturen",
+  "notify-on-signatures-help": {
+    "p1": "Der Ersteller des Dokuments erhält eine E-Mail-Benachrichtigung, sobald ein Unterzeichner das Dokument unterschreibt.",
+    "note": "Hinweis: Unabhängig von dieser Einstellung wird immer eine Abschluss-E-Mail mit dem signierten Dokument und dem Abschlusszertifikat im Anhang an alle Unterzeichner und den Dokumentbesitzer gesendet."
+  },
+  "expiry-date": "Ablaufdatum",
+  "expiry-date-updated": "Das Ablaufdatum wurde erfolgreich auf {{newexpirydate}} verlängert.",
+  "expiry-date-error": "Bitte geben Sie ein neues Ablaufdatum an, das nach dem aktuellen liegt.",
+  "duplicate-template-alert": "Sind Sie sicher, dass Sie eine Kopie dieser Vorlage erstellen möchten?",
+  "duplicate-template-created": "Kopie der Vorlage erfolgreich erstellt.",
+  "delete-page": "Seite löschen",
+  "merge-pdf": "PDFs zusammenführen",
+  "add-pages": "Seiten hinzufügen",
+  "delete-alert": "Einzelne Seite kann nicht gelöscht werden.",
+  "delete-alert-2": "Sind Sie sicher, dass Sie diese Seite löschen möchten?",
+  "delete-note": "Hinweis: Sobald Sie diese Seite löschen, kann dies nicht rückgängig gemacht werden.",
+  "Rotation-alert": "Seite drehen",
+  "bulk-import": "Massenimport",
+  "contacts-file": "Kontaktdatei (xlsx, csv)",
+  "100-records-only": "Derzeit können Sie nur bis zu 100 Datensätze importieren.",
+  "csv-excel-support-only": "Laden Sie eine Datei in einem der folgenden Formate hoch: CSV, XLSX oder XLS.",
+  "contact-imported": "{{imported}} Kontakte wurden importiert. {{failed}} Kontakte konnten nicht importiert werden.",
+  "invalid-data": "Ungültige Daten",
+  "delete-folder-alert": "Sind Sie sicher, dass Sie diesen Ordner löschen möchten?",
+  "delete-folder-alert-1": "Löschen nicht möglich: Der Ordner muss leer sein.",
+  "defaultSign-alert": "{{widgetsType}} Widgets sind nicht für die automatische Signatur verfügbar.",
+  "embed-heading": "{{appName}} Vorlagen einbetten",
+  "public-template-edit-title": "Öffentliche Vorlage bearbeiten",
+  "public-template-edit-mssg": "Eine öffentliche Vorlage können Sie nicht direkt bearbeiten. Um Änderungen vorzunehmen, wird die Vorlage auf privat gesetzt und Sie müssen sie anschließend wieder öffentlich machen. Möchten Sie fortfahren?",
+  "agree-p1": "Ich bestätige, dass ich die ",
+  "agree-p2": "Offenlegung elektronischer Aufzeichnungen und Signaturen",
+  "agree-p3": "gelesen und verstanden habe und der Verwendung elektronischer Aufzeichnungen und Signaturen zustimme.",
+  "agrre-button": "Zustimmen & Fortfahren",
+  "term-cond-title": "Allgemeine Geschäftsbedingungen",
+  "term-cond-h": "OFFENLEGUNG ELEKTRONISCHER AUFZEICHNUNGEN UND SIGNATUREN",
+  "term-cond-p1": "Diese Offenlegung elektronischer Aufzeichnungen und Signaturen ('Offenlegung') ist eine Vereinbarung zwischen dem Dokumentersteller ('Sender') und dem Unterzeichner ('Ihnen'), bereitgestellt über die {{appName}} Plattform ('Plattform'). Durch das Signieren von Dokumenten über {{appName}} stimmen Sie den in dieser Offenlegung beschriebenen Bedingungen zu. Bitte lesen Sie sie sorgfältig durch, bevor Sie fortfahren.",
+  "term-cond-h1": "1. Zweck und Geltungsbereich",
+  "term-cond-p2": "Diese Offenlegung regelt die Nutzung elektronischer Aufzeichnungen und Signaturen für Dokumente, die vom Sender bereitgestellt und von Ihnen über die {{appName}} Plattform unterzeichnet werden. Mit Ihrer Zustimmung erkennen Sie an, dass:",
+  "term-cond-p3": "Sie Dokumente elektronisch über {{appName}} empfangen und unterzeichnen werden.",
+  "term-cond-p4": "Ihre elektronische Signatur rechtlich bindend und einer handschriftlichen Signatur gleichgestellt ist.",
+  "term-cond-h2": "2. Zustimmung zur Nutzung elektronischer Aufzeichnungen und Signaturen",
+  "term-cond-p5": "Durch Ihre Zustimmung zu dieser Offenlegung:",
+  "term-cond-p6": "Erklären Sie sich einverstanden, elektronisch mit dem Sender über {{appName}} zu kommunizieren, und verstehen, dass diese Zustimmung gültig ist, bis sie widerrufen wird.",
+  "term-cond-p7": "Stimmen Sie zu, Dokumente über {{appName}} elektronisch zu prüfen, zu unterzeichnen und zurückzusenden.",
+  "term-cond-p8": "Diese Zustimmung gilt nur für die spezifischen Dokumente, die vom Sender bereitgestellt werden.",
+  "term-cond-h3": "3. Recht auf Widerruf der Zustimmung",
+  "term-cond-p9": "Sie haben das Recht, Ihre Zustimmung zur Nutzung elektronischer Aufzeichnungen und Unterschriften zu widerrufen, indem Sie:",
+  "term-cond-p10": "Den Absender direkt über die in seiner Kommunikation angegebenen Kontaktdaten kontaktieren.",
+  "term-cond-p11": "Den Absender vor Abschluss des Unterschriftsprozesses benachrichtigen.",
+  "term-cond-h4": "4. Hardware- und Softwareanforderungen",
+  "term-cond-p12": "Um Dokumente mit {{appName}} zu unterzeichnen, benötigen Sie:",
+  "term-cond-p13": "Ein Gerät mit Internetzugang.",
+  "term-cond-p14": "Einen kompatiblen Webbrowser mit aktiviertem JavaScript.",
+  "term-cond-p15": "Ein E-Mail-Konto, um Benachrichtigungen und unterzeichnete Dokumente zu erhalten.",
+  "term-cond-p16": "Wenn sich diese Anforderungen ändern, werden Sie vom Absender oder {{appName}} über die Aktualisierungen informiert.",
+  "term-cond-h5": "5. Aufbewahrung von Unterlagen und Anforderung von Papierkopien",
+  "term-cond-p17": "Sie sind dafür verantwortlich, sicherzustellen, dass Sie auf die elektronisch unterzeichneten Dokumente zugreifen und diese aufbewahren können. {{appName}} stellt Tools zur Verfügung, mit denen Sie das unterzeichnete Dokument unmittelbar nach Abschluss des Unterzeichnungsprozesses herunterladen oder ausdrucken können.",
+  "term-cond-p18": "Wenn Sie eine Papierkopie eines elektronisch unterzeichneten Dokuments bevorzugen, können Sie diese direkt beim Absender anfordern. Der Absender kann eine angemessene Gebühr für die Bereitstellung von Papierkopien erheben, sofern dies nicht durch geltendes Recht verboten ist.",
+  "term-cond-h6": "6. Anerkennung und Zustimmung",
+  "term-cond-p19": "Durch das Fortfahren bestätigen Sie:",
+  "term-cond-p20": "Dass Sie in der Lage sind, elektronische Dokumente wie in dieser Offenlegung beschrieben zu öffnen und zu überprüfen.",
+  "term-cond-p21": "Der Nutzung elektronischer Aufzeichnungen und Unterschriften für die angegebenen Transaktionen mit dem Absender zuzustimmen.",
+  "term-cond-p22": "Zu verstehen, dass {{appName}} eine Plattform zur Unterstützung der Transaktion ist und keine Partei der Vereinbarung ist.",
+  "term-cond-h7": "7. Rechtliche Wirkung",
+  "term-cond-p23": "Ihre durch {{appName}} vermittelte elektronische Unterschrift:",
+  "term-cond-p24": "Entspricht den geltenden Gesetzen über elektronische Unterschriften, einschließlich, aber nicht beschränkt auf den E-SIGN Act in den Vereinigten Staaten, die EU-eIDAS-Verordnung und das indische Information Technology Act.",
+  "term-cond-p25": "Ist rechtlich bindend zwischen Ihnen und dem Absender für die unterzeichneten Dokumente.",
+  "term-cond-h8": "8. Plattformrolle und Haftungsbeschränkung",
+  "term-cond-p26": "{{appName}} dient als Plattform zur Unterstützung elektronischer Transaktionen. Es ist nicht verantwortlich für den Inhalt, die Gültigkeit oder die Durchsetzbarkeit der vom Absender gesendeten Dokumente. Alle Streitigkeiten oder Probleme im Zusammenhang mit dem Dokument oder seiner Unterzeichnung müssen direkt zwischen Ihnen und dem Absender gelöst werden.",
+  "term-cond-h9": "9. Beendigung der Vereinbarung",
+  "term-cond-p27": "Ihre Zustimmung gilt nur für die aktuelle Transaktion, es sei denn, der Absender gibt etwas anderes an. {{appName}} behält sich das Recht vor, den Zugriff auf seine Plattform bei Verstößen gegen die Nutzungsbedingungen oder Richtlinien zu beenden.",
+  "term-cond-p28": "Durch Auswahl von 'Ich stimme zu' bestätigen Sie, dass Sie die Bedingungen dieser Offenlegung über elektronische Aufzeichnungen und Unterschriften verstanden haben und diesen zustimmen sowie der elektronischen Unterzeichnung der vom Absender über {{appName}} bereitgestellten Dokumente zustimmen.",
+  "term-cond-p29": "Wenn Sie Fragen zu dieser Offenlegung haben, kontaktieren Sie den Absender direkt. Für technischen Support mit {{appName}} besuchen Sie ",
+  "term-cond-p30": " oder senden Sie eine E-Mail an",
+  "js-snippet-msg": "Um {{appName}} Vorlagen in Ihre HTML-Websites oder Landingpages zu integrieren, können Sie den folgenden Code verwenden:",
+  "js-snippet-msg-1": "Die TemplateId erhalten Sie von der",
+  "js-snippet-msg-2": "Vorlagen verwalten",
+  "js-snippet-msg-3": "Seite.",
+  "agrrement-alert": "Um fortzufahren, müssen Sie der Offenlegung über elektronische Aufzeichnungen und Unterschriften zustimmen.",
+  "webhook-already-exists": "Die URL existiert bereits! Bitte versuchen Sie eine andere.",
+  "webhook-must-be-secure": "Die Webhook-URL muss sicher sein und https:// verwenden.",
+  "provide-test-token": "Bitte generieren Sie einen API-Test-Token.",
+  "invalid-redirect-url": "Bitte geben Sie eine gültige Weiterleitungs-URL an.",
+  "auto-sign-mssg": "Alles automatisch unterzeichnen",
+  "already-exist-signer": "Der ausgewählte Unterzeichner ist bereits in der Empfängerliste vorhanden.",
+  "change-signer": "Unterzeichner ändern",
+  "signyour-self-button": "Verwenden Sie diese Option, um das Dokument selbst zu unterschreiben, ohne andere hinzuzufügen.",
+  "requestsign-button": "Verwenden Sie diese Option, um Unterschriften von anderen und sich selbst anzufordern.",
+  "signyour-self-description": "Verwenden Sie dieses Formular, um das Dokument selbst zu unterschreiben, ohne andere hinzuzufügen.",
+  "requestsign-description": "Verwenden Sie dieses Formular, um Unterschriften von anderen und sich selbst anzufordern.",
+  "template-form-description": "Verwenden Sie dieses Formular, um wiederverwendbare Vorlagen für Ihre Dokumente zu erstellen.",
+  "allow-modify": "Änderungen erlauben",
+  "allow-modify-help": {
+    "p1": "Möchten Sie während des Unterzeichnungsprozesses Änderungen am Dokument erlauben?",
+    "p2": "Durch Auswahl dieser Option können Unterzeichner zusätzliche Elemente wie Unterschriften, Initialen, Stempel oder Texte zu den vorhandenen Widgets hinzufügen.",
+    "p3": "Durch Auswahl dieser Option wird verhindert, dass Unterzeichner während des Unterzeichnungsprozesses Ergänzungen zum Dokument vornehmen."
+  },
+  "signature-setting": "Signatur-Einstellungen",
+  "activation-key": "Aktivierungsschlüssel",
+  "paid-selfhost-help": "Bitte kontaktieren Sie {{appName}} für weitere Informationen unter ",
+  "remaining-credits-selfhost-help": "Verwenden Sie Premium-Credits für API-Dokumentensignaturen, den Massenversand und die {{appName}} Integration auf Ihrer Website. Sie haben {{allowedcredits}} enthaltene Credits und {{addoncredits}} zusätzlich gekaufte Credits übrig.",
+  "signature-type": "Ihre Signatur",
+  "initial-type": "Ihre Initialen",
+  "redirect-url": "Weiterleitungs-URL",
+  "bulk-send": "Massenversand",
+  "select-timezone": "Zeitzone",
+  "current-time": "Aktuelle Uhrzeit",
+  "email-help": "Aus Sicherheitsgründen dürfen Sie die E-Mail-Adresse nicht ändern. Bitte erstellen Sie ein weiteres kostenloses Konto mit der neuen E-Mail-Adresse.",
+  "doc-sent": "Dokument erfolgreich gesendet.",
+  "no-signer": "Entfernen",
+  "and": "und",
+  "make-public": "Öffentlich machen",
+  "general": "Allgemein",
+  "request-email": "Anfrage-E-Mail",
+  "completion-email": "Abschluss-E-Mail",
+  "variables-use": "Zu verwendende Variablen",
+  "send-to-sign": "hat Sie gebeten zu unterschreiben",
+  "use-template": "Vorlage verwenden",
+  "contact-already-exists": "Der Kontakt existiert bereits.",
+  "docx-error": "Wir haben derzeit Probleme mit der Verarbeitung von DOCX-Dateien. Bitte laden Sie die PDF-Datei hoch",
+  "docx-error-contact": "oder kontaktieren Sie uns unter support@opensignlabs.com",
+  "agreement-note": "Hinweis: Durch Ihre Zustimmung unterzeichnen Sie das Dokument nicht sofort. Sie können das Dokument nur elektronisch einsehen. Sie haben die Möglichkeit, es vollständig zu lesen und anschließend zu entscheiden, ob Sie es unterzeichnen möchten.",
+  "draft-template-info-p1": "Um Ihre Vorlage öffentlich zu machen, muss sie entweder eine einzelne Rolle enthalten oder, wenn sie mehrere Rollen umfasst, müssen alle zusätzlichen Rollen bereits den Unterzeichnern zugewiesen sein. Die nicht zugewiesene öffentliche Rolle muss leer bleiben und an erster Stelle stehen.",
+  "visit-below-link": "Besuchen Sie den untenstehenden Link, um mehr zu erfahren -",
+  "storage-help": "Durch die Aktivierung von BYOC können Sie Ihren eigenen S3-Speicher verbinden, sodass Ihre Dateien vollständig unter Ihrer Kontrolle bleiben und keine externen Kopien gespeichert werden. Wenn Ihnen Datenautonomie wichtig ist, erwägen Sie ein Upgrade auf Teams, um diese Funktion freizuschalten.",
+  "daily-quota-reached": "Sie haben Ihr tägliches Kontingent erreicht. Für Unterstützung kontaktieren Sie bitte quotas@opensignlabs.com.",
+  "enabled-signature-type": "Aktivierte Signaturtypen",
+  "enabled-signature-type-help": "Die Einstellung 'Aktivierte Signaturtypen' bestimmt, welche Signaturoptionen in Ihrer Organisation verfügbar sind. Wenn Sie beispielsweise die Option 'Zeichnen' deaktivieren, wird sie den Mitgliedern Ihrer Organisation im Signatur-Widget nicht angezeigt, während die anderen drei Optionen weiterhin zugänglich bleiben.",
+  "indexing-public-profile": "Erlaube die Indexierung des öffentlichen Profils durch Suchmaschinen",
+  "user-created-successfully": "Benutzer erfolgreich erstellt.",
+  "only-15-reminder-allowed": "Sie können bis zu 15 automatische Erinnerungen festlegen. Wenn zum Beispiel 'TimeToComplete' auf 15 Tage und 'RemindOnceInEvery' auf 1 Tag eingestellt ist, erreichen Sie das maximale Limit von 15 Erinnerungen. Passen Sie Ihre Einstellungen entsprechend an.",
+  "rate-your-experience": "Wie war Ihre Erfahrung mit {{appName}}?",
+  "thanks-for-feedback": "Danke für Ihr Feedback 🙏",
+  "share-your-feedback": "Teilen Sie Ihr Feedback",
+  "share-your-review": "Teilen Sie Ihre Bewertung",
+  "date-format": "Datumsformat",
+  "document-deleted": "Das Dokument wurde gelöscht oder Sie haben keinen Zugriff. Bitte kontaktieren Sie den Absender.",
+  "save-as-template-?": "Sind Sie sicher, dass Sie dieses Dokument als Vorlage speichern möchten?",
+  "go-to-manage-templates": "Zu 'Vorlagen verwalten' gehen",
+  "template-created": "Vorlage erstellt",
+  "how-would-you-like-to-proceed?": "Wie möchten Sie fortfahren?",
+  "failed-to-load-refresh-page": "Fehler beim Laden des Dokuments. Bitte versuchen Sie, diese Seite zu aktualisieren.",
+  "document-has-been-signed": "Das Dokument wurde erfolgreich unterschrieben!",
+  "document-has-been-signed-by-you": "Das Dokument wurde erfolgreich von Ihnen unterschrieben!",
+  "participant-completed-signing": "Alle Teilnehmer haben den Signaturprozess abgeschlossen.",
+  "you-will-receive-email-shortly": "✅ Das war's! Sie erhalten in Kürze eine Bestätigungs-E-Mail.",
+  "please-provide-templateid": "Bitte geben Sie templateid an",
+  "this-template-is-not-public": "Dieses template ist nicht öffentlich",
+  "invalid-templateid": "Ungültige templateid",
+  "contact-billing-at-opensign": "Um weitere Plätze hinzuzufügen, kontaktieren Sie bitte OpenSign™ unter <1>billing@opensignlabs.com</1> für Unterstützung.",
+  "title-length-alert": "Der Titel darf höchstens 250 Zeichen lang sein.",
+  "note-length-alert": "Die Notiz darf höchstens 200 Zeichen lang sein.",
+  "description-length-alert": "Die Beschreibung darf höchstens 500 Zeichen lang sein.",
+  "fix-&-resend-document": "Dokument korrigieren und erneut senden",
+  "do-you-want-recreate-document?": "Dadurch wird ein Entwurf aus diesem Dokument mit allen vorhandenen Feldern erstellt. Sind Sie sicher, dass Sie dieses Dokument neu erstellen möchten?",
+  "start-editing": "Bearbeitung starten",
+  "unsaved-changes-discard-them?": "Sie haben ungespeicherte Änderungen. Verwerfen?",
+  "yes-discard": "Ja, verwerfen",
+  "LTV-enabled-signatures": "LTV-fähige Signaturen",
+  "BETA": "BETA",
+  "two-factor-authentication": "Zwei-Faktor-Authentifizierung",
+  "2fa-help-text": "Die Zwei-Faktor-Authentifizierung fügt Ihrem Konto eine zusätzliche Sicherheitsebene hinzu, indem sie mehr als nur ein Passwort zum Anmelden erfordert.",
+  "2fa-help-bullet1": "Erhöht die Sicherheit, indem sowohl Ihr Passwort als auch ein Bestätigungscode erforderlich sind.",
+  "2fa-help-bullet2": "Der Bestätigungscode wird von einer Authentifizierungs-App auf Ihrem Gerät generiert.",
+  "2fa-help-bullet3": "Schützt Ihr Konto, selbst wenn Ihr Passwort kompromittiert wurde.",
+  "setup-2fa": "2FA einrichten",
+  "setup-2fa-again": "2FA erneut einrichten",
+  "2fa-setup-intro": "Schützen Sie Ihr Konto mit der Zwei-Faktor-Authentifizierung. Wenn aktiviert, müssen Sie bei jeder Anmeldung einen Code aus Ihrer Authentifizierungs-App eingeben.",
+  "scan-qr-code": "QR-Code scannen",
+  "scan-qr-instructions": "Verwenden Sie eine Authentifizierungs-App wie Google Authenticator, Microsoft Authenticator oder Authy, um diesen QR-Code zu scannen.",
+  "manual-setup-instructions": "Können Sie den Code nicht scannen? Sie können Ihre Authentifizierungs-App manuell mit diesem geheimen Schlüssel einrichten:",
+  "secret-key": "Geheimer Schlüssel",
+  "copied-to-clipboard": "In die Zwischenablage kopiert",
+  "copy-to-clipboard": "In die Zwischenablage kopieren",
+  "recovery-codes": "Wiederherstellungscodes",
+  "recovery-codes-instructions": "Speichern Sie diese Wiederherstellungscodes an einem sicheren Ort. Wenn Sie den Zugriff auf Ihre Authentifizierungs-App verlieren, können Sie einen dieser Einmal-Codes verwenden, um sich anzumelden.",
+  "download-recovery-codes": "Wiederherstellungscodes herunterladen",
+  "verification-code": "Bestätigungscode",
+  "enter-code-from-authenticator-app": "Geben Sie den 6-stelligen Code aus Ihrer Authentifizierungs-App ein",
+  "verification-code-required": "Bestätigungscode ist erforderlich",
+  "verification-code-invalid": "Ungültiger Bestätigungscode. Bitte versuchen Sie es erneut.",
+  "2fa-enabled": "2FA aktiviert",
+  "2fa-enabled-successfully": "Zwei-Faktor-Authentifizierung erfolgreich aktiviert",
+  "2fa-setup-complete": "Einrichtung abgeschlossen!",
+  "2fa-setup-complete-instructions": "Ihr Konto ist jetzt mit der Zwei-Faktor-Authentifizierung geschützt. Sie müssen bei jeder Anmeldung einen Bestätigungscode eingeben.",
+  "two-factor-verification": "Zwei-Faktor-Verifizierung",
+  "enter-verification-code-instructions": "Geben Sie den 6-stelligen Bestätigungscode aus Ihrer Authentifizierungs-App ein, um fortzufahren.",
+  "recovery-code": "Wiederherstellungscode",
+  "enter-recovery-code-help": "Geben Sie einen Ihrer Wiederherstellungscodes ein",
+  "recovery-code-required": "Wiederherstellungscode ist erforderlich",
+  "use-verification-code-instead": "Stattdessen Bestätigungscode verwenden",
+  "use-recovery-code-instead": "Stattdessen Wiederherstellungscode verwenden",
+  "regenerate-2fa-remove-existing": "Sind Sie sicher, dass Sie die Zwei-Faktor-Authentifizierung neu generieren möchten? Diese Aktion entfernt Ihre bestehenden Authentifizierungseinstellungen.",
+  "use-passkey": "Mit Passkey anmelden",
+  "security-section": "Sicherheit",
+  "passkey-authentication": "Passkey-Authentifizierung",
+  "passkey-not-supported": "Ihr Browser oder Gerät unterstützt keine Passkey-Authentifizierung",
+  "passkey-description": "Passkeys bieten eine stärkere, phishing-resistente Alternative zu Passwörtern. Sie können Ihren Fingerabdruck, Ihre Gesichtserkennung oder Ihre Geräte-PIN verwenden, um sich sicher anzumelden.",
+  "passkey-tooltip": "Passkeys sind eine einfachere und sicherere Alternative zu Passwörtern. Sie verwenden biometrische Daten wie Fingerabdrücke oder Gesichtserkennung, die bereits auf Ihrem Gerät gespeichert sind.",
+  "security-section-help": "Verwalten Sie Sicherheitsoptionen, einschließlich Passkeys und Authentifizierungsmethoden, um Ihr Konto zu schützen.",
+  "passkey-register": "Passkey registrieren",
+  "passkey-register-another": "Weiteren Passkey registrieren",
+  "passkey-registered": "Passkey registriert",
+  "passkey-registering": "Passkey wird registriert...",
+  "passkey-registered-success": "Passkey erfolgreich registriert!",
+  "passkey-registration-failed": "Passkey-Registrierung fehlgeschlagen",
+  "passkey-auth-failed": "Passkey-Authentifizierung fehlgeschlagen",
+  "passkey-missing-user-info": "Benutzerinformationen erforderlich",
+  "passkeys-list": "Ihre Passkeys",
+  "default-passkey": "Ihr Passkey",
+  "passkey-rename": "Umbenennen",
+  "passkey-delete": "Löschen",
+  "passkey-rename-title": "Passkey umbenennen",
+  "passkey-delete-title": "Passkey löschen",
+  "passkey-delete-confirm": "Möchten Sie den Passkey \"{{name}}\" wirklich löschen?",
+  "passkey-name": "Passkey-Name",
+  "passkey-name-placeholder": "Geben Sie einen beschreibenden Namen für diesen Passkey ein",
+  "passkey-renamed-success": "Passkey erfolgreich umbenannt",
+  "passkey-deleted-success": "Passkey erfolgreich gelöscht",
+  "passkey-rename-failed": "Passkey konnte nicht umbenannt werden",
+  "passkey-delete-failed": "Passkey konnte nicht gelöscht werden",
+  "processing": "Wird verarbeitet...",
+  "today": "Heute",
+  "yesterday": "Gestern",
+  "days-ago": "Vor {{days}} Tagen",
+  "verify-with-passkey": "Mit Passkey verifizieren",
+  "verify-with-otp": "Mit OTP verifizieren",
+  "verify-identity": "Identität verifizieren",
+  "verify-account": "Verifizieren Sie Ihre Identität",
+  "verification": "Verifizierung",
+  "passkey-verification-failed": "Passkey-Verifizierung fehlgeschlagen",
+  "security-auth-help": {
+    "p1": "Administre la configuración de seguridad de su cuenta para mantener sus datos seguros. OpenSign admite métodos de autenticación avanzados para mejorar la protección de la cuenta.",
+    "2fa-auth-help": "Agregue una capa adicional de seguridad activando 2FA. Esto requiere ingresar un código de verificación desde una aplicación autenticadora después de su contraseña.",
+    "passkey-auth-help": "Use claves de acceso para iniciar sesión sin contraseña con verificación biométrica o basada en el dispositivo, proporcionando una seguridad sólida y comodidad."
+  },
+  "signer-already-present": "Unterzeichner bereits vorhanden",
+  "kiosk-sign": "Kiosk-Unterschrift",
+  "dont-have-access-to-template": "Das template wurde gelöscht oder Sie haben keinen Zugriff. Bitte kontaktieren Sie den Absender.",
+  "kiosk-info": "Kiosk Modus ermöglicht es Ihnen, persönliche Unterschriften schnell und effizient zu erfassen. Ideal für Messen, Veranstaltungen oder Laufkundschaft, bei denen alle Unterzeichner physisch anwesend sind. ",
+  "learn-more": "Mehr erfahren"
+}
@@ -0,0 +1,975 @@
+{
+  "header-news": "Nueva característica: los usuarios del plan Teams ahora pueden integrar sus propios depósitos de AWS S3 para el almacenamiento de archivos",
+  "header-news-btn": "Configurar ahora",
+  "create-account": "Crear cuenta",
+  "login": "Iniciar sesión",
+  "language": "Idioma",
+  "name": "Nombre",
+  "phone": "Teléfono",
+  "phone-optional": "opcional",
+  "email": "Correo",
+  "company": "Compañía",
+  "job-title": "Título del puesto",
+  "profile": "Perfil",
+  "log-out": "Cerrar sesión",
+  "is-email-verified": "El correo está verificado",
+  "public-profile": "Perfil público",
+  "tagline": "Eslogan ",
+  "has-requested-you-to-sign": "ha solicitado que firmes",
+  "has-requested-you-to-review-and-sign": " ha solicitado que revises y firmes",
+  "input-required": "Por favor, rellena este campo.",
+  "sort-order": {
+    "Ascending": "Ascendente",
+    "Descending": "Descendente",
+    "Name": "Nombre",
+    "Date": "Fecha"
+  },
+  "context-menu": {
+    "Download": "Descargar",
+    "Rename": "Renombrar",
+    "Move": "Mover",
+    "Delete": "Eliminar"
+  },
+  "action": "Acción",
+  "add": "Agregar",
+  "add-new-folder": "Agregar nueva carpeta",
+  "disable-documentId": "Desactivar ID de documento",
+  "edit": "Editar",
+  "change-password": "Cambiar contraseña",
+  "save": "Guardar",
+  "cancel": "Cancelar",
+  "upgrade-now": "Mejorar ahora",
+  "upgrade-to": "Mejorar a",
+  "plan": "Plan",
+  "subscribe-card-teamplan": "¡Libera todo el poder de la colaboración! Crea organizaciones, equipos y jerarquías ilimitadas. Comparte plantillas sin problemas entre equipos y asigna funciones de usuario personalizadas. ¡Mejora tu flujo de trabajo hoy mismo!",
+  "subscribe-card-plan": "Desbloquea funciones premium desde solo {{premiumPrice}}/mes. Disfruta de un rendimiento mejorado y solo {{addonPrice}} por crédito adicional después de tus créditos premium incluidos.",
+  "user-name-limit-char": "Para tener un nombre de usuario menor a 8 caracteres por favor suscríbete",
+  "tour-content": "No mostrar esto otra vez",
+  "pro": "PRO",
+  "team": "EQUIPO",
+  "user": "Usuario",
+  "docs": "Documentación",
+  "session-expired": "Tu sesión ha expirado.",
+  "public-profile-help": "Esta es tu URL pública. Cópiala o compártela con el firmante, y podrás ver todas tus plantillas públicas.",
+  "welcome": "¡Bienvenido de nuevo!",
+  "Login-to-your-account": "Ingresa a tu cuenta",
+  "password": "Contraseña",
+  "forgot-password": "¿Olvidaste la contraseña?",
+  "loading": "Cargando...",
+  "of": "de",
+  "sign-SSO": "Ingresar con SSO",
+  "login-page": "Página de inicio de sesión",
+  "or": "O",
+  "signup-page": "Página de registro",
+  "password-length": "La contraseña debe tener 8 caracteres",
+  "password-case": "La contraseña debe incluir mayúsculas, minúsculas y números",
+  "password-special-char": " La contraseña debe incluir caracteres especiales",
+  "agreee": "Estoy de acuerdo con los",
+  "term": "Términos de Servicio",
+  "subscribe-to-opensign": "Suscribirse al boletín de OpenSign",
+  "register": "Registrarse",
+  "sidebar": {
+    "Dashboard": "Panel",
+    "Sign yourself": "Firma tu mismo",
+    "Request signatures": "Solicitar firmas",
+    "Templates": "Plantillas",
+    "Analytics": "Analítica",
+    "Branding": "Marca",
+    "Mail": "Correo",
+    "Storage": "Almacenamiento",
+    "Signing certificate": "Certificado de firma",
+    "Teams": "Equipos",
+    "General": "General",
+    "Teams-Children": {
+      "Organizations": "Organizaciones",
+      "OrgAdmins": "OrgAdmins"
+    },
+    "Templates-Children": {
+      "Create template": "Crear plantilla",
+      "Manage templates": "Administrar plantillas",
+      "Embedding": "Incrustar"
+    },
+    "OpenSign™ Drive": "{{appName}} Drive",
+    "Reports": "Reportes",
+    "Documents": "Documentos",
+    "Documents-Children": {
+      "Need your sign": "Necesitan tu firma",
+      "In Progress": "En progreso",
+      "Completed": "Completado",
+      "Drafts": "Borradores",
+      "Declined": "Rechazados",
+      "Expired": "Expirados"
+    },
+    "Contactbook": "Agenda de contactos",
+    "Settings": "Ajustes",
+    "Settings-Children": {
+      "My Signature": "Mi firma",
+      "API Token": "Token API",
+      "Webhook": "Webhook",
+      "Preferences": "Preferencias",
+      "Teams": "Equipos",
+      "Team-update-successfully": "Equipo actualizado correctamente.",
+      "Users": "Usuarios"
+    }
+  },
+  "dashboard-card": {
+    "Need your Signature": "Necesitan tu firma",
+    "Out for signatures": "En espera de ser firmados"
+  },
+  "report-name": {
+    "Draft Documents": "Documentos borradores",
+    "Need your sign": "Necesitan tu firma",
+    "In-progress documents": "Documentos en progreso",
+    "Completed Documents": "Documentos completados",
+    "Declined Documents": "Documentos rechazados",
+    "Expired Documents": "Documentos expirados",
+    "Recently sent for signatures": "Recientemente enviados para ser firmados",
+    "Recent signature requests": "Solicitudes de firma recientes",
+    "Drafts": "Borradores",
+    "Contactbook": "Agenda de contactos",
+    "Templates": "Plantillas",
+    "Teams": "Equipos",
+    "Users": "Usuarios"
+  },
+  "btnLabel": {
+    "sign": "firmar",
+    "Sign": "FIRMAR",
+    "Resend": "Reenviar",
+    "Rename": "Renombrar",
+    "Revoke": "Revocar",
+    "Delete": "Eliminar",
+    "Use": "Usar",
+    "Quick send": "Envío rápido",
+    "Edit": "Editar",
+    "Share with team": "Compartir con el equipo",
+    "Share": "Compartir",
+    "View": "Ver",
+    "option": "Opción",
+    "Embed": "Incrustar",
+    "Copy TemplateId": "Copiar ID de plantilla",
+    "Copy Public URL": "Copiar URL pública",
+    "extend-expiry-date": "Date d'expiration",
+    "Duplicate Template": "Plantilla duplicada",
+    "Duplicate": "Duplicada",
+    "daily-mail-quota": "Cuota diaria de correos electrónicos",
+    "Save as template": "Guardar como plantilla",
+    "Fix & resend": "Corregir y reenviar",
+    "Kiosk Mode": "Modo Kiosco"
+  },
+  "report-heading": {
+    "Sr.No": "Nº",
+    "Title": "Título",
+    "Email": "Correo",
+    "Phone": "Teléfono",
+    "File": "Archivo",
+    "Owner": "Propietario",
+    "Signers": "Firmantes",
+    "Note": "Nota",
+    "Folder": "Carpeta",
+    "Reason": "Razón",
+    "Parent Team": "Equipo padre",
+    "Active": "Activo",
+    "Role": "Rol",
+    "Team": "Equipo",
+    "Name": "Nombre",
+    "Status": "Estado",
+    "created-date": "Fecha de creación",
+    "Type": "Tipo",
+    "Logs": "Registros",
+    "Expiry-date": "Date d'expiration"
+  },
+  "report-help": {
+    "Draft Documents": "Estos son documentos que has iniciado pero no has finalizado para su envío.",
+    "Need your sign": "Esta es una lista de documentos que esperan tu firma.",
+    "In-progress documents": "Esta es una lista de documentos que has enviado a otras partes para su firma.",
+    "Completed Documents": "Esta es una lista de documentos en los que todas las partes han firmado.",
+    "Declined Documents": "Esta es una lista de documentos que han sido rechazados por uno de los firmantes.",
+    "Expired Documents": "Esta es una lista de documentos que han alcanzado su fecha de caducidad.",
+    "Contactbook": "Esta es una lista de contactos/firmantes añadidos por ti. Aparecerán como sugerencias cuando intentes añadir firmantes a un nuevo documento.",
+    "Templates": "Esta es una lista de plantillas que están a tu disposición para crear documentos. Puedes hacer clic en el botón «usar» para crear un nuevo documento utilizando una plantilla, modifica el documento y añade firmantes en el siguiente paso."
+  },
+  "form-name": {
+    "Sign Yourself": "Firmar",
+    "Request Signatures": "Solicitar firmas",
+    "New Template": "Nueva plantilla"
+  },
+  "file-type": "pdf, png, jpg, jpeg",
+  "docx": "docx",
+  "file-selected": "archivo seleccionado",
+  "template-title": "Título de la plantilla",
+  "document-title": "Título del documento",
+  "description": "Descripción",
+  "time-to-complete": "Plazo de finalización (días)",
+  "send-in-order": "Enviar en orden",
+  "send-in-order-help": {
+    "p1": "Elige cómo quieres que se envíen las solicitudes de firma a los firmantes del documento:",
+    "p2": "Seleccionando esta opción se enviará inicialmente la solicitud de firma al primer firmante. Una vez que el primer firmante complete su parte, el siguiente firmante en la secuencia recibirá la solicitud. Este proceso continúa hasta que todos los firmantes hayan firmado el documento. Este método garantiza que el documento se firme en un orden específico.",
+    "p3": "Seleccionando esta opción se enviarán los enlaces para la firma a todos los firmantes simultáneamente. Cada firmante puede firmar el documento cuando le convenga, independientemente de si otros firmantes han completado sus firmas. Este método es más rápido, pero no impone ningún orden de firma entre los participantes.",
+    "p4": "Selecciona la opción que mejor se adapte a las necesidades de tu tramitación de documentos."
+  },
+  "no": "No",
+  "auto-reminder": "Recordatorio automático",
+  "remind-once": " Recordar una vez cada (Días)",
+  "next": "Siguiente",
+  "select-folder": "Seleccionar carpeta",
+  "OpenSign-drive": "{{appName}} Drive",
+  "drive-document-status": {
+    "Completed": "Completado",
+    "Declined": "Rechazado",
+    "Draft": "Borrador",
+    "Expired": "Expirado",
+    "In Progress": "En progreso"
+  },
+  "select-folder-help": "Si no seleccionas una carpeta, tu documento firmado se guardará en la carpeta principal de {{appName}} Drive.",
+  "no-data": "No se encontraron datos",
+  "save-here": "Guardar aquí",
+  "back": "Atrás",
+  "add-folder": "Añadir carpeta",
+  "create-folder": "Crear carpeta",
+  "parent-folder": "Carpeta superior",
+  "create": "Crear",
+  "signers": "Firmantes",
+  "signers-help": "Empieza a escribir el nombre de un contacto para ver los firmantes sugeridos entre tus contactos guardados o añade otros nuevos. Organiza el orden de firma añadiendo firmantes en la secuencia deseada. Utiliza el botón «+» para añadir nuevos firmantes y la «X» para quitar todos. Cada firmante recibirá una solicitud por correo electrónico para que firme el documento según el orden indicado.",
+  "bcc-help": "Empieza a escribir el nombre de un contacto para ver sugerencias de tus contactos guardados o agregar nuevos. Usa el botón '+' para añadir un usuario y el botón 'x' para eliminarlo. El correo electrónico del usuario seleccionado se añadirá como Bcc (copia oculta). Cada usuario recibirá una notificación por correo electrónico una vez que el documento esté completado.",
+  "add-signer": "Añadir firmante",
+  "contact-not-found": "Contacto no encontrado",
+  "add-yourself": "Añadirte a ti mismo",
+  "submit": "Enviar",
+  "reset": "Volver a empezar",
+  "my-signature": "Mi firma",
+  "initial-alert": "Mi inicial no encontrada",
+  "signature": "Firma",
+  "upload-image": " Subir imagen",
+  "clear": "Limpiar",
+  "upload-signature/Image": "Por favor, sube la firma/imagen",
+  "initials": "Iniciales",
+  "API": "API",
+  "api-token": "Token API",
+  "regenerate-token": "Regenerar token activo",
+  "generate-token": "Generar token activo",
+  "view-docs": "Ver documentación",
+  "generate-token-alert": "¿En definitiva quieres regenerar el token? Esto expirará el token antiguo.",
+  "yes": "Sí",
+  "copied": "Copiado",
+  "something-went-wrong-mssg": "Un problème est survenu, Actualiser cette page peut résoudre le problème.",
+  "token-generated": "Token generado exitosamente.",
+  "webhook": "Webhook",
+  "update-webhook": "Actualizar webhook",
+  "add-webhook": "Agregar webhook",
+  "webhook-added": "Webhook agregado exitosamente.",
+  "team-disabled": "Equipo deshabilitado",
+  "Team enabled": "Equipo habilitado",
+  "are-you-sure": "¿En definitiva quieres ",
+  "disable": "deshabilitar",
+  "enable": "habilitar",
+  "this-team": " este equipo?",
+  "edit-team": "Editar equipo",
+  "name-of-team": "Nombre del equipo",
+  "prev": "Anterior",
+  "no-data-avaliable": "No hay datos disponibles",
+  "add-team": "Agregar equipo",
+  "page-not-found": "Página no encontrada",
+  "users-from-teams": "usuarios de equipos",
+  "user-status": "Estado del usuario",
+  "activate": "activar",
+  "deactivate": "desactivar",
+  "this-user": " este usuario",
+  "delete-user": "Eliminar usuario",
+  "delete": "eliminar",
+  "add-user": "Agregar usuario",
+  "password-generateed": "La contraseña solo será generada una vez; asegúrate de copiarla.",
+  "Team status": "Estado del equipo",
+  "user-deactivated": "Usuario desactivado.",
+  "user-activated": "Usuario activado.",
+  "public": "Público",
+  "download": "Descargar",
+  "view": "Ver",
+  "make-template-public": "Convertir la plantilla en pública",
+  "make-template-private": "Convertir la plantilla en privada",
+  "make-template-public-alert": "¿En definitiva quieres convertir esta plantilla en pública?",
+  "make-template-private-alert-non": "¿Está seguro de que desea hacer este plantilla privado?",
+  "make-template-private-alert": "¿En definitiva quieres convertir esta plantilla en privada? Esto lo removerá de tu perfil público.",
+  "public-role": "Rol público",
+  "public-url": "Perfil publico",
+  "embed-template": "Insertar plantilla",
+  "public-url-copy": "Aquí está tu URL pública: ",
+  "public-url-copy-mssg": "Cópiala o compártela con el firmante y podrás ver todas tus plantillas públicas.",
+  "add-public-url-alert": "Puedes generar tu perfil público {{appName}}",
+  "share-with-alert": "No puedes compartir una plantilla si alguno de los roles ya tiene contactos asignados. Elimina todas las asignaciones de contactos de los roles antes de compartir la plantilla.",
+  "share-with": "Compartir con",
+  "team-not-found": "Equipo no encontrado",
+  "roles": "Roles",
+  "delete-document": "Eliminar documento",
+  "delete-document-alert": "¿En definitiva quieres eliminar este documento?",
+  "quick-send": "Envío rápido",
+  "add-new": "Agregar nuevo",
+  "send": "Enviar",
+  "quick-send-alert-1": "Todos los roles de este documento están actualmente vinculados a contactos. Para enviar rápidamente copias de esta plantilla a varios firmantes, por favor, asegúrate de que al menos un rol no esté vinculado a ningún contacto.",
+  "quick-send-alert-2": "Por favor, asegúrate de que hay al menos un widget de firma añadido para cada destinatario.",
+  "quick-send-alert-3": "Veuillez ajouter au moins un rôle à ce template.",
+  "quick-send-alert-4": "El envío rápido ha alcanzado el límite.",
+  "copy-link": "Copiar enlace",
+  "copy": "Copiar",
+  "revoke-document": "Revocar documento",
+  "revoke-document-alert": "¿En definitiva quieres revocar este documento?",
+  "resend-mail": "Reenviar correo",
+  "resend-mail-help": "Puedes usar las siguientes variables que serán reemplazadas por sus valores reales:- {{document_title}}, {{sender_name}}, {{sender_mail}}, {{sender_phone}}, {{receiver_name}}, {{receiver_email}}, {{receiver_phone}}, {{expiry_date}}, {{company_name}}, {{signing_url}}, {{note}}.",
+  "subject": "Asunto",
+  "body": "Cuerpo",
+  "add-contact": "Agregar contacto",
+  "edit-contact": "Editar contacto",
+  "add-signer-alert": "¡El contacto ya existe! Selecciónelo en el menú desplegable 'Firmantes'",
+  "record-delete-alert": "¡Entrada eliminada exitosamente!",
+  "record-revoke-alert": "¡Entrada revocada exitosamente!",
+  "mail-sent-alert": "Correo enviado exitosamente.",
+  "document-sent-alert": "¡Documento enviado exitosamente!",
+  "template-share-alert": "Plantilla compartida exitosamente.",
+  "template-public-alert-1": "Has convertido exitosamente la plantilla en pública.",
+  "template-public-alert-2": "Has convertido exitosamente la plantilla en privada.",
+  "template-public-alert-3": "Tienes que seleccionar un rol para los firmantes públicos.",
+  "template-public-alert-4": "Por favor, asegúrate de que has añadido al menos un widget de firma para cada firmante.",
+  "template-public-alert-5": "Dado que esta plantilla tiene «enviar en orden» habilitado, el rol público debe estar posicionado arriba al inicio.",
+  "template-public-alert-6": "Por favor, enlaza firmantes a todos los roles excepto al usuario de rol público.",
+  "template-public-alert-7": "Por favor, asigna al menos un rol público para convertir está plantilla en pública.",
+  "loader": " Esto podría llevar algún tiempo",
+  "pages": "Páginas",
+  "document-signed": "Documento firmado",
+  "close": "Cerrar",
+  "validation-alert": "Alerta de validación",
+  "validate-alert-mssg": " Los datos ingresados no cumplen con los criterios establecidos por la expresión regular.",
+  "otp-verification": "Verificación OTP",
+  "enter-otp": "Ingresar OTP",
+  "verify": "Verificar",
+  "verify-email-1": "Verificar correo",
+  "resend": "Reenviar",
+  "contact-details": "Detalles del contacto",
+  "verify-email": "Por favor verifique su correo electrónico para continuar. Este es un paso único para confirmar el correo electrónico asociado a su cuenta de OpenSign.",
+  "send-otp": " Enviar OTP",
+  "otp-placeholder": "Ingresa el código de verificación enviado por correo",
+  "loading-doc": "Cargando documento...",
+  "widgets-name": {
+    "signature": "firma",
+    "stamp": "sello",
+    "initials": "iniciales",
+    "name": "nombre",
+    "job title": "título del puesto",
+    "company": "compañía",
+    "date": "fecha",
+    "text": "texto",
+    "text input": "entrada de texto",
+    "checkbox": "casilla",
+    "dropdown": "desplegable",
+    "radio button": "botón de radio",
+    "image": "imagen",
+    "email": "correo"
+  },
+  "fields": "Campos",
+  "recipients": "Destinatarios",
+  "please-add": "Por favor, agrega un",
+  "signed-by": "Firmado por",
+  "more": "más",
+  "sent": "enviado",
+  "print": "Imprimir",
+  "certificate": "Certificado",
+  "decline": "Rechazar",
+  "finish": "Finalizar",
+  "mail": "Correo",
+  "sign-now": "Firmar ahora",
+  "successfully-signed": "¡Firmado exitosamente!",
+  "email-mssg": " Los destinatarios agregados aquí recibirán una copia del documento firmado.",
+  "email-error-1": " por favor, proporciona una dirección de correo correcta",
+  "email-error-2": "Solo puedes enviar hasta a 10 destinatarios a la vez.",
+  "Email-verified-alert-1": "El correo está verificado.",
+  "Email-verified-alert-2": "El correo ya ha sido verificado.",
+  "upload-stamp-image": "Subir imagen del sello",
+  "draw": "Dibujar",
+  "type": "Escribir",
+  "color-type": {
+    "red": "rojo",
+    "blue": "azul",
+    "black": "negro",
+    "yellow": "amarillo"
+  },
+  "my-initials": "Mis iniciales",
+  "upload": "Subir",
+  "initial-teb": "Iniciales",
+  "signature-tab": "Firma",
+  "your-signature": "Tu firma",
+  "copy-title": "Copiar widget a",
+  "contact-delete-alert": "¿En definitiva quieres eliminar este contacto?",
+  "reset-password-alert-1": "El enlace para restablecer la contraseña ha sido enviado a tu correo electrónico",
+  "reset-password-alert-2": "Por favor, configura un adaptador de correo ",
+  "reset-password-alert-3": "Restablece tu contraseña",
+  "faild-animation": "Error al cargar la animación",
+  "apply": "Aplicar",
+  "copy-type": {
+    "All pages": "Todas las páginas",
+    "All pages but last": "Todas las páginas menos la última",
+    "All pages but first": "Todas las páginas menos la primera",
+    "Next to current widget": "Junto al widget actual"
+  },
+  "options": "Opciones",
+  "minimun-check": "Chequeo mínimo",
+  "maximum-check": "Chequeo máximo",
+  "default-value": "Valor por defecto",
+  "select": "Seleccionar",
+  "read-only": "Es de solo lectura",
+  "hide-labels": "Esconder etiquetas",
+  "checkbox": "Casilla",
+  "alert": "Alerta",
+  "zoom-in": "Acercar",
+  "zoom-out": "Alejar",
+  "document-signed-alert": "¡Felicitaciones! 🎉 ¡Este documento ha sido firmado por ti exitosamente!",
+  "otp-sent-alert": "OTP enviado a tu correo",
+  "fields-required": "Campos requeridos",
+  "signature-widget-alert-1": "Por favor, asegúrate de que hay al menos un widget de firma agregado",
+  "signature-widget-alert-2": "Por favor, asegúrate de que todos los campos están correctamente rellenados y de que cumplen todos los requisitos.",
+  "encrypted-pdf-alert": "Actualmente los archivos PDF encriptados no están soportados.",
+  "encrypted-pdf-alert-1": "La contraseña del archivo PFX es inválida.",
+  "user-not-exist": "El usuario no existe",
+  "template-role-alert": "Por favor, primero agrega roles",
+  "create-document": "Crear documento",
+  "template-created-alert": "¿Qué te gustaría hacer con la plantilla que acabas de crear?",
+  "signers-alert": "alerta de firmantes",
+  "template-creation-alert-1": "¡Por favor, selecciona un firmante para agregar un marcador de posición!",
+  "ok": "OK",
+  "radio-group": "Grupo de radio",
+  "dropdown-options": "Opciones del desplegable",
+  "add-role": "Agregar rol",
+  "role-ex": " por ejem.: Cliente, RRHH, Director, Administrador, Estudiante, etc.",
+  "add/choose-signer": "Agregar/Elegir firmante",
+  "choose-from-contacts": "Elegir desde los contactos",
+  "select-signer": " Por favor, selecciona el firmante",
+  "edit-template": "Editar plantilla",
+  "widget-info": "Información del widget",
+  "validation": "Validación",
+  "invalid-default-value": "valor por defecto inválido",
+  "hint": "Pista",
+  "color": "color",
+  "role-help": {
+    "p1": "¿Qué son los roles de una plantilla?",
+    "p2": "Empieza por especificar cada uno de los roles necesarios para completar el documento. Piensa en las partes implicadas en el proceso de firma y cuáles son sus responsabilidades. Los roles más habituales son RRHH para los documentos internos, Cliente para los contratos o Proveedor para los convenios comerciales.",
+    "p3": "¿Por qué preasignar usuarios a algunos roles?",
+    "p4": "Para los roles que consistentemente involucran al mismo individuo (por ejem., la firma del Gerente en las ofertas de empleo), puedes preasignar un usuario a un rol dentro de una plantilla. Este paso es opcional pero recomendado para la eficiencia y consistencia entre documentos",
+    "p5": "¿Cuando especifico el usuario asignado a cada rol?",
+    "p6": "Cuando crees un documento usando tu plantilla, se te pedirá que asignes usuarios a cada rol definido. Si un rol ya tiene un usuario asignado, este será rellenado con anticipación, pero puedes modificarlo según lo necesites antes de enviar el documento."
+  },
+  "add-recipients": "Agregar destinatarios",
+  "loading-mssg": "Esto podría llevar algún tiempo",
+  "send-mail": "Enviar correo",
+  "placeholder-alert-1": "Por favor, asegúrate de que hay al menos un widget de firma para cada destinatario.",
+  "placeholder-alert-2": "Por favor, confirma que hayas rellenado el campo de texto.",
+  "placeholder-alert-3": " ¿En definitiva quieres enviar este documento para ser firmado?",
+  "placeholder-alert-4": "¡Has enviado exitosamente correos a todos los destinatarios!",
+  "placeholder-mail-alert": "Has enviado un correo electrónico con éxito a {{name}}. Los siguientes firmantes recibirán un correo electrónico una vez que {{name}} firme el documento.",
+  "placeholder-mail-alert-you": "Los firmantes posteriores recibirán correos electrónicos una vez que firme el documento.",
+  "placeholder-alert-5": "¿Quieres firmar documentos ahora mismo?",
+  "placeholder-alert-6": "¡Por favor, configura el adaptador de correo para enviar correos!",
+  "placeholder-alert-7": "¡Por favor, selecciona un firmante para agregar un marcador de posición!",
+  "email-subject": "asunto del correo",
+  "email-body": "cuerpo del correo",
+  "email-placeholder": "agregar cuerpo del correo",
+  "reset-to-default": "Restablecer a por defecto",
+  "cutomize-email": "Personalizar correo",
+  "upgrade-to-customize-email": "Mejora para personalizar el correo",
+  "sign-url": "URL de firma",
+  "mails-sent": "Correos enviados",
+  "mail-not-delivered": "correo no entregado",
+  "document-alert": "Alerta de documento",
+  "owner-subscription-expired": "La suscripción del propietario ha expirado.",
+  "subscription-expired": "Suscripción expirada",
+  "alert-message": "Mensaje de alerta",
+  "document-decline": "Rechazar documento",
+  "decline-alert-1": "¿En definitiva quieres rechazar este documento?",
+  "decline-alert-2": "¡Has rechazado este documento!",
+  "decline-alert-3": "No puedes firmar este documento ya que ha sido rechazado/revocado.",
+  "sign here": "Firma aquí",
+  "guest-email-alert": "el código de verificación ha sido enviado a tu correo",
+  "get-otp-alert": "recibirás un código de verificación por correo",
+  "user-already-exist": "El usuario ya existe.",
+  "server-error": "¡Error interno del servidor!",
+  "fill-required-details!": "¡Por favor, rellena los detalles requeridos!",
+  "sign-up-form": "Formulario de registro",
+  "sign-up": "Registrarse",
+  "folder-already-exist!": "¡la carpeta ya existe!",
+  "please-select-position!": "¡por favor, selecciona una posición!",
+  "default-sign-alert": "¿Está seguro de que desea iniciar sesión automáticamente en todos los {{widgetsType}} widgets solicitados?",
+  "Your-Signature": "Tu firma",
+  "auto-sign-all": "Firmar todo automáticamente",
+  "generating-certificate": "Generando certificado",
+  "pdf-download": "Descargar PDF",
+  "generate-certificate-alert": " Tu certificado de finalización se está generando. Por favor, espera un momento. Si la descarga no inicia pronto, presiona el botón otra vez.",
+  "generate-certificate-err": "Estamos experimentando un problema al generar el certificado. Por favor, inténtelo de nuevo más tarde.",
+  "folder-already-exist": "¡La carpeta ya existe!",
+  "folder-created-successfully": "¡Carpeta creada exitosamente!",
+  "fill-folder-name": "Por favor, rellena el nombre de la carpeta",
+  "already-exists-this-username": "¡Un usuario con este nombre de usuario ya existe!",
+  "verification-code-sent": "¡El correo de verificación ha sido enviado a tu correo!",
+  "registered-user-successfully": "Usuario registrado exitosamente.",
+  "role-not-found": "Rol no encontrado.",
+  "do-not-access": "No tienes acceso, por favor, contacta al administrador.",
+  "add-admin": "Agregar administrador",
+  "opensign-setup": "Instalación de {{appName}}",
+  "join-discord": "Únete a nuestro servidor de Discord",
+  "admin-already-exist": "El administrador ya existe.",
+  "password-update-alert-1": "Contraseña actualizada exitosamente.",
+  "password-update-alert-2": "Tu contraseña actual es incorrecta o falta.",
+  "password-update-alert-3": "Tu contraseña actual es incorrecta o falta.",
+  "password-update-alert-4": "Tu contraseña y su confirmación no son iguales.",
+  "current-password": "Contraseña actual",
+  "new-password": "Contraseña nueva",
+  "confirm-password": "Confirmar contraseña",
+  "file-alert-1": "El tamaño del archivo seleccionado es muy grande. Por favor, selecciona un archivo con un tamaño menor a",
+  "file-alert-2": "Por favor, selecciona un archivo.",
+  "file-alert-3": "Por favor, espera mientras se sube el documento.",
+  "enter-pdf-password": "Ingresa la contraseña del PDF",
+  "correct-password": "Por favor, proporciona la contraseña correcta",
+  "decrypting-pdf": " Desencriptando PDF, por favor, espera...",
+  "invalid-otp": "OTP inválido",
+  "user-not-found": "Usuario no encontrado",
+  "enter-otp-alert": "¡Por favor, ingresa el OTP!",
+  "get-verification-code": "Obtener código de verificación",
+  "get-verification-code-2": "Obtendrás un código de verificación por correo",
+  "enter-verification-code": "Ingresar código de verificación",
+  "provide-your-details": "Proporciona tus detalles",
+  "provide-email": "Por favor, proporciona un correo.",
+  "additional-info": "Información adicional",
+  "signature-saved-alert": "Firma guardada exitosamente.",
+  "saved-successfully": "Guardado con éxito.",
+  "fill-field": "Por favor, rellena este campo",
+  "error-template": "Error: ¡Plantilla no encontrada!",
+  "error": "Error",
+  "invalid-document": "Error: ¡Documento inválido!",
+  "document-not-found": "¡Documento no encontrado!",
+  "document-signed-alert-1": "Ha firmado exitosamente el documento. Puede descargar o imprimir una copia del documento parcialmente firmado. Se enviará una copia del documento firmado digitalmente y del certificado de finalización al propietario y a todos los firmantes por correo electrónico una vez que todos los firmantes lo hayan firmado.",
+  "encrypted-pdf-not-support": "Los archivos PDF encriptados no están soportados actualmente.",
+  "document-signed-alert-4": " ¡Felicitaciones! 🎉 ¡Este documento ha sido firmado exitosamente por todos los participantes!",
+  "document-signed-alert-5": "Este documento ha sido firmado por todos los firmantes.",
+  "document-signed-alert-6": "Este documento ha sido rechazado por uno o más destinatarios.",
+  "document-signed-alert-7": "Este documento ya no está disponible.",
+  "document-signed-alert-8": "Este documento ya ha sido enviado para ser firmado.",
+  "yet-to-sign": "Todavía por firmar",
+  "validation-alert-1": "Los datos ingresados no cumplen con los criterios establecidos por la expresión regular.",
+  "account-already-exists": "¡La cuenta ya existe!",
+  "choose-password": "Elegir contraseña",
+  "enter-password": "Ingresar contraseña",
+  "sure": "claro",
+  "subscribed-alert": "¡Ya te has suscrito al plan!",
+  "monthly": "Mensual",
+  "yearly-upto": "Anual (hasta 66% de descuento)",
+  "billed-yearly": "Facturado anualmente",
+  "billed-monthly": "Facturado mensualmente",
+  "plansubscription-1": "Alójalo por tu cuenta gratuitamente",
+  "visit-github": "Visitar GitHub",
+  "user-already-exist-name": "¡Un usuario con este nombre de usuario ya existe!",
+  "do-not-access-contact-admin": "No tienes acceso, por favor, contacta a un administrador.",
+  "filed-required-correctly": "Por favor, rellena correctamente los detalles requeridos.",
+  "admin-created": "Administrador creado",
+  "invalid-masterkey": "Llave maestra inválida",
+  "master-key": " Llave maestra",
+  "profile-update-alert": "Perfil actualizado exitosamente.",
+  "date": "Fecha",
+  "report-not-found": "Reporte no encontrado",
+  "please-wait": "por favor, espera",
+  "select-foler": "Seleccionar carpeta",
+  "generated-on": "Generado el",
+  "text-field": "Campo de texto",
+  "font-size": "Tamaño de la fuente",
+  "widget-status": {
+    "Required": "Requerido",
+    "Optional": "Opcional"
+  },
+  "all-right": "Todos los derechos reservados",
+  "version": "versión",
+  "social-media": {
+    "github": "GitHub",
+    "linked-in": "LinkedIn",
+    "twitter": "Twitter",
+    "discord": "Discord"
+  },
+  "tour-mssg": {
+    "home-layout-1": "¡Has iniciado sesión exitosamente! Echemos un vistazo.",
+    "home-layout-2": "Para subir documentos para firmar tú mismo o para solicitar la firma de otros, simplemente selecciona los botones correspondientes.",
+    "home-layout-3": "¡Ya puedes empezar a utilizar {{appName}}! Si necesitas soporte siéntete libre de contactarnos.",
+    "generate-token": "Mejora ahora para generar un token API de producción.",
+    "opensign-drive-1": "Haz clic en los enlaces para navegar fácilmente por la estructura jerárquica de carpetas y ver los documentos de cada carpeta.",
+    "opensign-drive-2": "Haz clic en el botón «Agregar» para crear una nueva carpeta o documento.",
+    "opensign-drive-3": "Ordena tus documentos por «Fecha» o «Nombre» usando este menú.",
+    "opensign-drive-4": "Haz clic en este menú para mostrar los documentos en vista de lista.",
+    "opensign-drive-5": "La lista de documentos es mostrada de acuerdo a la opción de ordenamiento seleccionada. Los íconos situados junto a cada documento indican su estado actual.",
+    "opensign-drive-6": "Haz clic con el botón derecho en un documento para ver opciones como «Descargar», «Renombrar», «Mover» y «Eliminar». Haz clic en el documento para abrirlo.",
+    "opensign-drive-7": "Haz clic con el botón derecho en cualquier carpeta para ver las opciones. Elige «Renombrar» para cambiar el nombre de la carpeta o haz clic en ella para navegar por su contenido.",
+    "pdf-request-file-1": "Lista de firmantes que todavía tienen que firmar este documento.",
+    "pdf-request-file-2": "Haz clic en cualquiera de los marcadores de posición que aparecen en el documento para firmar. A continuación, verás opciones para dibujar tu firma, escribirla o subir una imagen .",
+    "pdf-request-file-3": "Haga clic en los botones Rechazar o Finalizar para navegar por el documento. Utilice el menú de puntos suspensivos para ver opciones adicionales, incluido el botón Descargar.",
+    "pdf-request-file-4": "Lista de firmantes que ya han firmado el documento.",
+    "pdf-request-file-5": "Puedes hacer clic en «Firmar todo automáticamente» para firmar de manera automática en todos los lugares que deban ser firmados por ti. Asegúrate de revisar correctamente el documento antes de hacer clic en ese botón.",
+    "pdf-request-file-6": "Por favor, complete los campos en la página {{pagenumbers}}, todos resaltados con el mismo color para facilitar la identificación.",
+    "placeholder-sign-1": "Selecciona un destinatario de esta lista para agregar un marcador de posición dónde este destinatario tendrá que firmar. El marcador de posición aparecerá con el mismo color que el nombre del destinatario una vez lo sueltes en el documento.",
+    "placeholder-sign-2": "Hacer clic en el botón «Agregar destinatarios» te permitirá añadir más firmantes.",
+    "placeholder-sign-3": "Haz clic en este botón para agregar más destinatarios/firmantes al documento.",
+    "placeholder-sign-4": "Arrastra o haz clic en un capo para agregarlo al documento.",
+    "placeholder-sign-5": "El área de contenido del PDF ya muestra los marcadores de posición existentes en la plantilla. Para tu comodidad, estos marcadores de posición coincidirán con el color del nombre del destinatario, haciéndolos fácilmente identificables.",
+    "placeholder-sign-6": "Al hacer clic en 'Siguiente' se guardará el documento. En el siguiente paso, puede personalizar los correos electrónicos que se enviarán a los destinatarios o copiar los enlaces de firma y compartirlos usted mismo con los destinatarios.",
+    "report-1": "Haz clic en el botón «Agregar» para crear una nueva plantilla. Las plantillas son documentos reusables diseñados para generar rápidamente nuevos documentos con la misma estructura pero diferentes firmantes. Por ejemplo, una plantilla de RR.HH. para el proceso de incorporación podría tener roles predefinidos como «Director de RR.HH.» y «Nuevo empleado». Cada vez que utilices la plantilla, puedes asignar el rol de «Nuevo empleado» a los distintos miembros del personal que se incorporen, mientras que el rol de « Director de RR.HH.» permanece constante, lo que facilita un proceso de incorporación fluido para cada persona contratada.",
+    "redirect": "Haz clic en el botón «Usar» para crear un nuevo documento desde una plantilla existente.",
+    "bulksend": "Para enviar rápidamente múltiples documentos utilizando una plantilla existente creando simplemente las direcciones de correo electrónico de los destinatarios, haz clic en el botón 'Envío Masivo'.",
+    "option": "Este menú revela más opciones como «Editar» y «Eliminar». Usa el botón «Editar» para agregar roles, modificar campos y actualizar tu plantilla. Los cambios aplicarán para todos los documentos futuros que sean creados usando esta plantilla pero no afectarán a los documentos ya existentes. Con el botón «Eliminar» puedes eliminar la plantilla.",
+    "signyour-self-1": "Para personalizar el documento antes de que sea firmado, selecciona y arrastra al documento los widgets que prefieras. Escoge el espacio perfecto para cada modificación para adaptar el documento a tus necesidades.",
+    "signyour-self-2": "Arrastra y suelta en cualquier lugar de esta área. Después podrás cambiar el tamaño y moverlo.",
+    "template-placeholder-1": "Hacer clic en el botón «Agregar rol» te permitirá agregar varios roles de firmantes. Puedes asociar usuarios a cada rol en los siguientes pasos.",
+    "template-placeholder-2": "Una vez que los roles hayan sido agregados, selecciona un rol de la lista para agregar un marcador de posición donde éste tendrá que firmar. El marcador de posición aparecerá con el mismo color que el nombre del rol una vez lo sueltes en el documento.",
+    "template-placeholder-3": "Arrastra o haz clic en un capo para agregarlo al documento.",
+    "template-placeholder-4": "Arrastra el marcador de posición para un rol a cualquier lugar del documento. Recuerda, aparecerá con el mismo color que el nombre del rol para poder referenciarlo fácilmente.",
+    "template-placeholder-5": "Hacer clic en «Siguiente» guardará la plantilla actual. Luego de guardar, se te consultará si deseas crear un nuevo documento usando esta plantilla.",
+    "webhook-1": "Mejora ahora para configurar un webhook",
+    "Need your Signature": "Hacer clic en esta tarjeta te llevará a la lista de documentos que esperan por tu revisión.",
+    "Out for signatures": "Hacer clic en esta tarjeta te llevará a la lista de documentos que esperan tu firma.",
+    "Recent signature requests": "Esta es una lista de documentos que esperan por tu firma.",
+    "Recently sent for signatures": "Esta es una lista de documentos que has enviado a otras partes para que sea firmado.",
+    "Drafts": "Estos son documentos que has empezado pero que todavía no finalizas para su envío.",
+    "public-template": "Este video muestra cómo puedes configurar tu perfil público personalizado, como «https://opensign.me/tu-nombre-de-usuario». También aprenderás cómo personalizar tu eslogan y cómo hacer tus plantillas disponibles para su firmado público.",
+    "allowModify-widgets": "Puede arrastrar y soltar cualquiera de estos campos en el documento, además de los campos ya designados para usted por el creador del documento"
+  },
+  "enter-email-plaholder": "Agrega una dirección de correo y presiona «Enter»",
+  "success-email-alert": "¡Correo enviado exitosamente!",
+  "expired-doc-title": "Documento expirado",
+  "expired-on-mssg": "Este documento expiro el {{expiredDate}} y ya no está disponible para ser firmado.",
+  "signature-validate-alert": "Por favor, confirma que has seleccionado al menos {{minRequiredCount}} casillas.",
+  "signature-validate-alert-2": "Asegúrate de que este campo esté correctamente rellenado y que cumpla con todos los requisitos.",
+  "remaing-users": "Usuarios restantes",
+  "Role": "Rol",
+  "additional-users": "Por favor, compra el complemento Usuarios.",
+  "Quantity-of-users": "Cantidad de usuarios",
+  "Price": "Precio",
+  "Total-price-for-next-time": "Precio total para la próxima vez",
+  "Proceed": "Proceder",
+  "Select": "Seleccionar",
+  "Add-seats": "Agregar plazas",
+  "user-name-exist": "el nombre de usuario ya existe",
+  "format": "formato",
+  "select-date-format": "Selecciona un formato de fecha",
+  "quantity-of-credits": "Cantidad de créditos premium",
+  "remaining-credits": "Créditos premium disponibles:",
+  "remaining-credits-help": "Usa créditos premium para la API para la firma de documentos, envío en masa, o para incorporar la integración de OpenSign en tu página web. Te quedan {{allowedcredits}} créditos incluidos y {{addoncredits}} créditos comprados adicionalmente.",
+  "additional-credits": "Por favor, compra créditos premium",
+  "quota-err-quicksend": "Cuota alcanzada, no tienes créditos suficientes.",
+  "buy-credits": "Comprar créditos premium",
+  "rotate-right": "Rotar a la derecha",
+  "rotate-left": "Rotar a la izquierda",
+  "rotate-alert-mssg": "Todos los widgets de esta página se perderán. ¿En definitiva quieres proceder?",
+  "templateid": "ID de plantilla",
+  "bulk-send-subcription-alert": "Por favor, mejora al plan a Professional o Team para usar envío en masa.",
+  "generate-test-token": "Generar token de prueba",
+  "regenerate-test-token": "Regenerar token de prueba",
+  "help-test-token": "Este token puede ser usado para probar las API en el punto de acceso «https://sandbox.opensignlabs.com/api/v1», permitiéndote realizar firmas de documentos ilimitadas. Por favor, ten en cuenta que el API de pruebas firmará tus documentos con certificados autofirmados, que podrían no ser reconocidos por Adobe como válidos. Una vez hayas completado tus pruebas, puedes mejorar a uno de nuestros planes de pago para generar un token de producción.",
+  "help-api-token": "Este token puede ser usado para acceder a las API de producción en el punto de acceso «{{origin}}/api/v1». Solo puede ser generado con uno de nuestros planes de pago.",
+  "reason": "Razón",
+  "decline-by": "Rechazado/revocado por",
+  "document-declined": "Documento rechazado",
+  "public-template-mssg-1": "Para integrar OpenSign a tu proyecto React o Next.js, simplemente ejecuta los siguientes comandos:",
+  "public-template-mssg-2": "Asegúrate de tener «npm» o «yarn» configurado en tu proyecto. Si estás usando «yarn», puedes reemplazar «npm install» con «yarn add @opensign/react».",
+  "public-template-mssg-3": "¿Necesitas más detalles o ejemplos?",
+  "public-template-mssg-4": "Visita la",
+  "public-template-mssg-5": " «npm» para las últimas actualizaciones, documentación detallada e historial de versiones.",
+  "public-template-mssg-6": "Antes de que puedas usar este fragmento de código, debes convertir esta plantilla en pública.",
+  "public-template-mssg-7": "Antes de poder generar un enlace público, debes hacer que esta plantilla sea pública.",
+  "here": "aquí",
+  "copy-code": "COPIAR",
+  "copied-code": "COPIADO",
+  "Installation": "Instalación",
+  "Usage": "Uso",
+  "insufficient-credits": "Créditos de firma insuficientes",
+  "insufficient-credits-mssg": "El propietario de este documento actualmente carece de los créditos OpenSign necesarios para que puedas firmarlo. Por favor, contacta al propietario si necesitas más detalles.",
+  "angular-npm-mssg-1": "Para integrar OpenSign a tu proyecto Angular, simplemente ejecuta los siguientes comandos:",
+  "quota-mail-info-head": "Límite mensual de correos electrónicos",
+  "quota-mail-info": "Para mantener la calidad del servicio y prevenir el spam, OpenSign permite hasta 15 correos electrónicos por mes en el plan gratuito. Mejora tu plan ahora para envíos ilimitados de correos electrónicos.",
+  "quota-mail-reset": "Los créditos de tu correo electrónico de solicitud de firma se restablecerán el",
+  "quota-mail": "Has alcanzado tu límite de 15 solicitudes de firma por correo para este mes. Mejora ahora para continuar enviando correos.",
+  "quota-mail-tip": "Consejo: Aún puedes firmar <1>documentos ilimitados</1> compartiendo manualmente el enlace de solicitud de firma.",
+  "quota-mail-head": "Cuota alcanzada",
+  "unauthorized-modal": "No tienes permisos para realizar esta acción, por favor, contacta a {{adminEmail}}.",
+  "sent-this-month": "Enviados este mes",
+  "available-seats": "Plazas disponibles",
+  "buy-users": "Comprar más usuarios",
+  "isenable-otp": "Habilitar verificación con OTP",
+  "isenable-otp-help": {
+    "p1": "¿Te gustaría habilitar el proceso de verificación usando una contraseña de un solo uso (OTP)?",
+    "p2": "Seleccionar esta opción habilitará la verificación con OTP. Los usuarios recibirán un código de verificación por correo, la cual tendrán que ingresar para poder firmar el documento.",
+    "p3": "Seleccionar esta opción deshabilitará la verificación con OTP, lo cual permitirá a los usuarios firmar el documento directamente sin pasos adicionales.",
+    "p4": "Por favor, selecciona la opción que mejor se adapte a tus requisitos para la firma de documentos."
+  },
+  "advanced-options": "Opciones avanzadas",
+  "hide-advanced-options": "Ocultar las opciones avanzadas",
+  "download-files": "Descargar archivos",
+  "download-pdf": "Descargar PDF",
+  "pdf-certificate": "Descargar PDF + Certificado",
+  "document-logs": "Registros de documentos",
+  "server-down": "No se pudo conectar al servidor de {{appName}}. Si estás alojando {{appName}} por tu cuenta, por favor, asegúrate de que todos los pasos de la documentación han sido seguidos correctamente. Si estás ejecutando {{appName}} localmente, puedes estar accediendo a {{appName}} por un número de puerto incorrecto.",
+  "admin-exists": "El administrador ya existe. Por favor, inicia sesión en la aplicación usando las credenciales de administrador para poder administrar los usuarios.",
+  "public-tour-message": "Por favor, convierte la plantilla en pública para copiar la URL pública",
+  "add-user-template": "Es necesario agregar un rol antes de poder agregarle campos.",
+  "pdf-uncompatible": "Este PDF no es compatible, por favor contacta con {{appName}}",
+  "enable-tour": "Habilitar recorrido",
+  "istourenabled-help": {
+    "p1": "Esto permitirá realizar una visita guiada para los firmantes, brindando instrucciones durante el proceso de firma.",
+    "p2": "Esto desactivará la visita guiada, lo que garantizará una experiencia de firma más rápida e ininterrumpida.",
+    "p3": "Consejo: si sus firmantes están familiarizados con {{appName}} y lo utilizan con frecuencia, es posible que desee desactivar la visita guiada para disfrutar de una experiencia más fluida. Elija la opción que mejor se adapte a sus necesidades de firma de documentos"
+  },
+  "form-title-1": "Configuración del flujo de documentos",
+  "form-title-2": "Configuración de seguridad",
+  "text-field-tour": "Los campos de tipo 'Texto' deben completarse con anticipación antes de enviar el documento. Si necesita que los firmantes proporcionen información, utilice el campo 'Entrada de texto'",
+  "attach-signer-tour": "Debe adjuntar un firmante a cada función. Puede hacerlo haciendo clic en este icono. Una vez que seleccione un Firmante, se adjuntará a todos los campos asociados con ese rol que aparecen en el mismo color.",
+  "allowed-signature-types": "Tipos de firma permitidos",
+  "at-least-one-signature-type": "Se debe habilitar al menos un tipo de firma.",
+  "expect-default-one-signature-type": "Habilite un tipo de firma adicional aparte del predeterminado.",
+  "add-signer-note": "Nota - Este contacto se guardará en sus Contactos",
+  "allowed-signature-types-help": {
+    "p1": "Esta preferencia de firma controla qué opciones de firma están disponibles para sus firmantes. Solo los tipos de firma que seleccione aparecerán en el widget de firma cuando se firme un documento. Por ejemplo, si elige sólo la opción 'Draw' en las preferencias, su firmante verá sólo la opción 'Draw' en el widget de firma, mientras que las otras tres opciones no estarán disponibles.",
+    "l1": "Cree una firma manuscrita directamente en la pantalla usando su dedo o un lápiz.",
+    "l2": "Ingrese su nombre y elija entre varios estilos de fuente para crear una firma.",
+    "l3": "Cargue una versión digital existente de su firma.",
+    "l4": "Utilice un estilo de firma preestablecido guardado en 'Mi firma' en su configuración."
+  },
+  "notify-on-signatures": "Notificar sobre firmas",
+  "notify-on-signatures-help": {
+    "p1": "El creador del documento recibirá una notificación por correo electrónico cada vez que un firmante firme el documento.",
+    "note": "Nota: Independientemente de esta configuración, siempre se envía un correo electrónico de finalización con el documento firmado y el certificado de finalización adjunto a todos los firmantes y al propietario del documento."
+  },
+  "expiry-date": "Date d'expiration",
+  "expiry-date-updated": "La fecha de vencimiento se ha extendido con éxito hasta el {{newexpirydate}}",
+  "expiry-date-error": "Proporcione una nueva fecha de vencimiento que sea posterior a la actual",
+  "duplicate-template-alert": "¿Está seguro de que desea crear un duplicado de esta plantilla?",
+  "duplicate-template-created": "Plantilla duplicada creada correctamente.",
+  "delete-page": "eliminar página",
+  "merge-pdf": "fusionar pdf",
+  "add-pages": "Agregar páginas",
+  "delete-alert": "No se puede eliminar una sola página",
+  "delete-alert-2": "¿Está seguro de que desea eliminar esta página?",
+  "delete-note": "Nota: una vez que elimines esta página, no podrás deshacerla",
+  "Rotation-alert": "Girar página",
+  "bulk-import": "Importación masiva",
+  "contacts-file": "Archivo de contactos (xlsx, csv)",
+  "100-records-only": "Currently you can only import up to 100 records.",
+  "csv-excel-support-only": "Cargue un archivo en uno de los siguientes formatos: CSV, XLSX o XLS.",
+  "contact-imported": "Se importaron {{imported}} contactos. {{failed}} contactos no pudieron importarse.",
+  "invalid-data": "Datos no válidos",
+  "delete-folder-alert": "¿Está seguro de que desea eliminar este Carpeta?",
+  "delete-folder-alert-1": "No se puede eliminar: la carpeta debe estar vacía",
+  "defaultSign-alert": "Los widgets {{widgetsType}} no están disponibles para la firma automática",
+  "embed-heading": "Incrustar plantillas de {{appName}}",
+  "public-template-edit-title": "Editar plantilla pública",
+  "public-template-edit-mssg": "No puede editar una plantilla pública directamente. Para realizar cambios, la plantilla se configurará como privada y luego tendrás que volver a hacerla pública. ¿Quieres continuar?",
+  "agree-p1": "Confirmo que he leído y comprendido el ",
+  "agree-p2": "Registro Electrónico y Divulgación de Firma",
+  "agree-p3": "y consentimiento para utilizar registros y firmas electrónicas.",
+  "agrre-button": "Aceptar y continuar",
+  "term-cond-title": "Términos y condiciones",
+  "term-cond-h": "DIVULGACIÓN DE REGISTRO ELECTRÓNICO Y FIRMA",
+  "term-cond-p1": "Esta Divulgación de Firma y Registro Electrónico ('Divulgación') es un acuerdo entre el Creador del Documento ('Remitente') y el Firmante ('Usted'), facilitado a través de la plataforma {{appName}} ('Plataforma'). Al firmar documentos a través de {{appName}}, usted acepta los términos descritos en esta Divulgación. Léala detenidamente antes de continuar.",
+  "term-cond-h1": "1. Objet et portée",
+  "term-cond-p2": "Esta Divulgación rige el uso de registros y firmas electrónicas para los documentos enviados por el Remitente y firmados por Usted a través de la plataforma {{appName}}. Al aceptar, Usted reconoce que:",
+  "term-cond-p3": "Recibirá y firmará documentos electrónicamente a través de {{appName}}.",
+  "term-cond-p4": "Su firma electrónica es jurídicamente vinculante y equivalente a una firma manuscrita.",
+  "term-cond-h2": "2. Consentimiento para el uso de registros y firmas electrónicas",
+  "term-cond-p5": "Al aceptar esta Divulgación:",
+  "term-cond-p6": "Usted acepta realizar transacciones electrónicas con el Remitente utilizando {{appName}} y comprende que este consentimiento es válido hasta que se retire.",
+  "term-cond-p7": "Usted acepta revisar, firmar y devolver documentos electrónicamente utilizando {{appName}}.",
+  "term-cond-p8": "Este consentimiento se aplica únicamente a los documentos específicos proporcionados por el Remitente.",
+  "term-cond-h3": "3. Derecho a retirar el consentimiento",
+  "term-cond-p9": "Tiene derecho a retirar su consentimiento para el uso de registros y firmas electrónicas mediante:",
+  "term-cond-p10": "Contactar directamente con el Remitente utilizando la información de contacto proporcionada en su comunicación.",
+  "term-cond-p11": "Notificar al remitente antes de completar el proceso de firma.",
+  "term-cond-h4": "4. Requisitos de hardware y software",
+  "term-cond-p12": "Para firmar documentos usando {{appName}}, debe tener:",
+  "term-cond-p13": "Un dispositivo con acceso a Internet.",
+  "term-cond-p14": "Un navegador web compatible con JavaScript habilitado.",
+  "term-cond-p15": "Una cuenta de correo electrónico para recibir notificaciones y documentos firmados.",
+  "term-cond-p16": "Si estos requisitos cambian, el Remitente u {{appName}} le notificarán las actualizaciones.",
+  "term-cond-h5": "5. Conservación de registros y solicitud de copias en papel",
+  "term-cond-p17": "Usted es responsable de garantizar que pueda acceder y conservar los documentos firmados electrónicamente. {{appName}} proporciona herramientas para descargar o imprimir el documento firmado inmediatamente después de que se complete el proceso de firma.",
+  "term-cond-p18": "Si prefiere una copia en papel de cualquier documento firmado electrónicamente, puede solicitarla directamente al Remitente. El Remitente puede cobrar una tarifa razonable por proporcionar copias en papel, a menos que lo prohíba la ley aplicable.",
+  "term-cond-h6": "6. Reconocimiento y Acuerdo",
+  "term-cond-p19": "Al continuar, usted:",
+  "term-cond-p20": "Confirme que puede acceder y revisar documentos electrónicos como se describe en esta Divulgación.",
+  "term-cond-p21": "Acepta utilizar registros y firmas electrónicas para las transacciones especificadas con el Remitente.",
+  "term-cond-p22": "Comprenda que {{appName}} es una plataforma que facilita la transacción y no es parte del acuerdo.",
+  "term-cond-h7": "7. Efecto jurídico",
+  "term-cond-p23": "Tu firma electrónica facilitada a través de {{appName}}:",
+  "term-cond-p24": "Cumple con las leyes de firma electrónica aplicables, incluidas, entre otras, la Ley E-SIGN de los Estados Unidos, el Reglamento eIDAS de la UE y la Ley de tecnología de la información de la India",
+  "term-cond-p25": "Es legalmente vinculante entre Usted y el Remitente para los documentos firmados",
+  "term-cond-h8": "8. Platform Role and Limitation of Liability",
+  "term-cond-p26": "{{appName}} sirve como plataforma para facilitar transacciones electrónicas. No es responsable del contenido, validez o aplicabilidad de los documentos enviados por el Remitente. Cualquier disputa o problema relacionado con el documento o su firma debe resolverse directamente entre Usted y el Remitente.",
+  "term-cond-h9": "9. Terminación del Acuerdo",
+  "term-cond-p27": "Su consentimiento se aplica únicamente a la transacción actual a menos que el Remitente especifique lo contrario. {{appName}} se reserva el derecho de cancelar el acceso a su plataforma por violaciones de sus Términos de Servicio o políticas.",
+  "term-cond-p28": "Al seleccionar 'Acepto', usted confirma que comprende y acepta los términos de este Registro electrónico y Divulgación de firma y acepta firmar electrónicamente los documentos proporcionados por el Remitente a través de {{appName}}.",
+  "term-cond-p29": "Si tiene preguntas sobre esta Divulgación, comuníquese directamente con el Remitente. Para obtener soporte técnico con {{appName}}, visite ",
+  "term-cond-p30": " o correo electrónico",
+  "js-snippet-msg": "Para integrar plantillas {{appName}} en sus sitios web HTML o páginas de destino, puede utilizar el siguiente código:",
+  "js-snippet-msg-1": "Puede obtener el TemplateId en la página Administrar plantillas",
+  "js-snippet-msg-2": "Administrar plantillas",
+  "js-snippet-msg-3": "página.",
+  "agrrement-alert": "Para continuar, debe consentir la divulgación de registros y firmas electrónicas.",
+  "webhook-already-exists": "¡La URL ya existe! Pruebe con uno diferente.",
+  "webhook-must-be-secure": "La URL del webhook debe ser segura y utilizar https://",
+  "provide-test-token": "Por favor genere un token de prueba de API",
+  "invalid-redirect-url": "Proporcione una URL de redireccionamiento válida.",
+  "auto-sign-mssg": "firmar automáticamente todo",
+  "already-exist-signer": "El firmante seleccionado ya está presente en la lista de destinatarios",
+  "allow-modify": "Permitir modificaciones",
+  "allow-modify-help": {
+    "p1": "¿Desea permitir modificaciones al documento durante el proceso de firma?",
+    "p2": "Seleccionar esta opción permite a los firmantes agregar elementos adicionales, como firmas, iniciales, sellos o texto, sobre los widgets existentes.",
+    "p3": "Seleccionar esta opción restringe a los firmantes de realizar cualquier adición al documento durante el proceso de firma."
+  },
+  "signature-setting": "Configuración de firmas",
+  "signyour-self-button": "Utilice este formulario para crear plantillas reutilizables para sus documentos.",
+  "requestsign-button": "Utilice esta opción para solicitar firmas de otras personas y de usted mismo en conjunto.",
+  "signyour-self-description": "Utilice este formulario para firmar el documento usted mismo sin agregar otros.",
+  "requestsign-description": "Utilice este formulario para solicitar firmas de otras personas y de usted mismo en conjunto.",
+  "template-form-description": "Utilice este formulario para crear plantillas reutilizables para sus documentos.",
+  "change-signer": "Cambiar firmante",
+  "activation-key": "Clave de activación",
+  "paid-selfhost-help": "Por favor, póngase en contacto con {{appName}} para más información en ",
+  "remaining-credits-selfhost-help": "Use créditos premium para firmar documentos mediante la API, enviar en masa e integrar {{appName}} en su sitio web. Tiene {{allowedcredits}} créditos incluidos y {{addoncredits}} créditos adicionales comprados restantes.",
+  "signature-type": "Tu firma",
+  "initial-type": "Tus iniciales",
+  "redirect-url": "URL de redireccionamiento",
+  "bulk-send": "envío masivo",
+  "select-timezone": "Zona horaria",
+  "current-time": "Hora actual",
+  "email-help": "No se permite cambiar la dirección de correo electrónico por razones de seguridad. Por favor, cree otra cuenta gratuita utilizando la nueva dirección de correo electrónico.",
+  "doc-sent": "Documento enviado con éxito.",
+  "no-signer": "Eliminar",
+  "and": "y",
+  "make-public": "Hacer público",
+  "general": "General",
+  "request-email": "Correo de solicitud",
+  "completion-email": "Correo de finalización",
+  "variables-use": "Variables para usar",
+  "send-to-sign": "le ha solicitado que firme",
+  "use-template": "Usar plantilla",
+  "contact-already-exists": "El contacto ya existe.",
+  "docx-error": "Actualmente estamos experimentando problemas con el procesamiento de archivos DOCX. Por favor, sube el archivo PDF",
+  "docx-error-contact": "o contáctanos en support@opensignlabs.com",
+  "agreement-note": "Nota: Aceptar esto no significa que esté firmando el documento de inmediato. Esto solo le permite revisar el documento electrónicamente. Tendrá la oportunidad de leerlo en su totalidad y decidir si desea firmarlo después.",
+  "draft-template-info-p1": "Para hacer que tu plantilla sea pública, debe contener un único rol o, si incluye múltiples roles, todos los roles adicionales deben estar ya asignados a firmantes. El rol público no asignado debe permanecer vacío y debe estar en la primera posición.",
+  "visit-below-link": "Visita el siguiente enlace para saber más -",
+  "storage-help": "Habilitar BYOC te permite conectar tu propio almacenamiento S3 para que tus archivos permanezcan completamente bajo tu control, sin copias externas retenidas. Si la autonomía de los datos es importante para ti, considera actualizar a Teams para desbloquear esta función.",
+  "daily-quota-reached": "Ha alcanzado su cuota diaria. Para obtener ayuda, comuníquese con quotas@opensignlabs.com.",
+  "enabled-signature-type": "Tipos de firma habilitados",
+  "enabled-signature-type-help": "La configuración de 'Tipos de firma habilitados' determina qué opciones de firma están disponibles en su organización. Por ejemplo, si desactiva la opción 'Dibujar', los miembros de su organización no la verán en el widget de firma, mientras que las otras tres opciones seguirán siendo accesibles.",
+  "indexing-public-profile": "Permitir la indexación del perfil público por los motores de búsqueda",
+  "user-created-successfully": "Usuario creado con éxito.",
+  "only-15-reminder-allowed": "Puede configurar hasta 15 recordatorios automáticos. Por ejemplo, si 'TimeToComplete' es de 15 días y 'RemindOnceInEvery' es de 1 día, alcanzará el límite máximo de 15 recordatorios. Ajuste su configuración en consecuencia.",
+  "rate-your-experience": "¿Cómo fue su experiencia con {{appName}}?",
+  "thanks-for-feedback": "Gracias por su comentario 🙏",
+  "share-your-feedback": "Comparta sus comentarios",
+  "share-your-review": "Comparta su reseña",
+  "date-format": "Formato de fecha",
+  "document-deleted": "El documento ha sido eliminado o no tiene acceso. Por favor, contacte al remitente.",
+  "save-as-template-?": "¿Está seguro de que desea guardar este documento como plantilla?",
+  "go-to-manage-templates": "Ir a 'Gestionar plantillas'",
+  "template-created": "Plantilla creada",
+  "how-would-you-like-to-proceed?": "¿Cómo le gustaría proceder?",
+  "failed-to-load-refresh-page": "Error al cargar el documento. Intente actualizar esta página.",
+  "document-has-been-signed": "¡El documento ha sido firmado con éxito!",
+  "document-has-been-signed-by-you": "¡El documento ha sido firmado con éxito por usted!",
+  "participant-completed-signing": "Todos los participantes han completado el proceso de firma.",
+  "you-will-receive-email-shortly": "✅ ¡Eso es todo! Recibirá un correo de confirmación en breve.",
+  "please-provide-templateid": "Por favor, proporcione templateid",
+  "this-template-is-not-public": "Esta template no es pública",
+  "invalid-templateid": "templateid no válida",
+  "contact-billing-at-opensign": "Para agregar más asientos, comuníquese con OpenSign™ a <1>billing@opensignlabs.com</1> para obtener ayuda.",
+  "title-length-alert": "El título debe tener como máximo 250 caracteres.",
+  "note-length-alert": "La nota debe tener como máximo 200 caracteres.",
+  "description-length-alert": "La descripción debe tener como máximo 500 caracteres.",
+  "fix-&-resend-document": "Corregir y reenviar el documento",
+  "do-you-want-recreate-document?": "Esto creará un borrador a partir de este documento con todos los campos intactos. ¿Está seguro de que desea recrear este documento?",
+  "start-editing": "Comenzar a editar",
+  "unsaved-changes-discard-them?": "Tienes cambios sin guardar. ¿Deseas descartarlos?",
+  "yes-discard": "Sí, descartar",
+  "LTV-enabled-signatures": "Firmas con LTV habilitado",
+  "BETA": "BETA",
+  "two-factor-authentication": "Autenticación de dos factores",
+  "2fa-help-text": "La autenticación de dos factores agrega una capa adicional de seguridad a su cuenta al requerir más que solo una contraseña para iniciar sesión.",
+  "2fa-help-bullet1": "Mejora la seguridad al requerir tanto su contraseña como un código de verificación.",
+  "2fa-help-bullet2": "El código de verificación es generado por una aplicación de autenticación en su dispositivo.",
+  "2fa-help-bullet3": "Protege su cuenta incluso si su contraseña se ve comprometida.",
+  "setup-2fa": "Configurar 2FA",
+  "setup-2fa-again": "Configurar 2FA nuevamente",
+  "2fa-setup-intro": "Proteja su cuenta con la autenticación de dos factores. Cuando esté habilitada, deberá ingresar un código de su aplicación de autenticación cada vez que inicie sesión.",
+  "scan-qr-code": "Escanear código QR",
+  "scan-qr-instructions": "Use una aplicación de autenticación como Google Authenticator, Microsoft Authenticator o Authy para escanear este código QR.",
+  "manual-setup-instructions": "¿No puede escanear el código? Puede configurar manualmente su aplicación de autenticación utilizando esta clave secreta:",
+  "secret-key": "Clave secreta",
+  "copied-to-clipboard": "Copiado al portapapeles",
+  "copy-to-clipboard": "Copiar al portapapeles",
+  "recovery-codes": "Códigos de recuperación",
+  "recovery-codes-instructions": "Guarde estos códigos de recuperación en un lugar seguro. Si pierde el acceso a su aplicación de autenticación, puede usar uno de estos códigos de un solo uso para iniciar sesión.",
+  "download-recovery-codes": "Descargar códigos de recuperación",
+  "verification-code": "Código de verificación",
+  "enter-code-from-authenticator-app": "Ingrese el código de 6 dígitos de su aplicación de autenticación",
+  "verification-code-required": "Se requiere el código de verificación",
+  "verification-code-invalid": "Código de verificación inválido. Por favor, inténtelo de nuevo.",
+  "2fa-enabled": "2FA activado",
+  "2fa-enabled-successfully": "Autenticación de dos factores habilitada con éxito",
+  "2fa-setup-complete": "¡Configuración completa!",
+  "2fa-setup-complete-instructions": "Su cuenta ahora está protegida con autenticación de dos factores. Deberá ingresar un código de verificación cada vez que inicie sesión.",
+  "two-factor-verification": "Verificación de dos factores",
+  "enter-verification-code-instructions": "Ingrese el código de verificación de 6 dígitos de su aplicación de autenticación para continuar.",
+  "recovery-code": "Código de recuperación",
+  "enter-recovery-code-help": "Ingrese uno de sus códigos de recuperación",
+  "recovery-code-required": "Se requiere el código de recuperación",
+  "use-verification-code-instead": "Usar código de verificación en su lugar",
+  "use-recovery-code-instead": "Usar código de recuperación en su lugar",
+  "regenerate-2fa-remove-existing": "¿Está seguro de que desea regenerar la autenticación de dos factores? Esta acción eliminará su configuración de autenticación actual.",
+  "use-passkey": "Iniciar sesión con passkey",
+  "security-section": "Seguridad",
+  "passkey-authentication": "Autenticación con passkey",
+  "passkey-not-supported": "Tu navegador o dispositivo no admite la autenticación con passkey",
+  "passkey-description": "Las passkeys proporcionan una alternativa más segura y resistente al phishing que las contraseñas. Puedes usar tu huella digital, reconocimiento facial o PIN del dispositivo para iniciar sesión de forma segura.",
+  "passkey-tooltip": "Las passkeys son una alternativa más simple y segura a las contraseñas. Usan datos biométricos como huellas digitales o reconocimiento facial ya almacenados en tu dispositivo.",
+  "security-section-help": "Administra las opciones de seguridad, incluidas las passkeys y métodos de autenticación para proteger tu cuenta.",
+  "passkey-register": "Registrar passkey",
+  "passkey-register-another": "Registrar otra passkey",
+  "passkey-registered": "Passkey registrada",
+  "passkey-registering": "Registrando passkey...",
+  "passkey-registered-success": "¡Passkey registrada con éxito!",
+  "passkey-registration-failed": "Fallo al registrar la passkey",
+  "passkey-auth-failed": "Falló la autenticación con passkey",
+  "passkey-missing-user-info": "Se requiere información del usuario",
+  "passkeys-list": "Tus passkeys",
+  "default-passkey": "Tu passkey",
+  "passkey-rename": "Renombrar",
+  "passkey-delete": "Eliminar",
+  "passkey-rename-title": "Renombrar passkey",
+  "passkey-delete-title": "Eliminar passkey",
+  "passkey-delete-confirm": "¿Estás seguro de que deseas eliminar la passkey \"{{name}}\"?",
+  "passkey-name": "Nombre de la passkey",
+  "passkey-name-placeholder": "Introduce un nombre descriptivo para esta passkey",
+  "passkey-renamed-success": "Passkey renombrada con éxito",
+  "passkey-deleted-success": "Passkey eliminada con éxito",
+  "passkey-rename-failed": "No se pudo renombrar la passkey",
+  "passkey-delete-failed": "No se pudo eliminar la passkey",
+  "processing": "Procesando...",
+  "today": "Hoy",
+  "yesterday": "Ayer",
+  "days-ago": "Hace {{days}} días",
+  "verify-with-passkey": "Verificar con passkey",
+  "verify-with-otp": "Verificar con OTP",
+  "verify-identity": "Verificar identidad",
+  "verify-account": "Verifique su identidad",
+  "verification": "Verificación",
+  "passkey-verification-failed": "La verificación con passkey ha fallado",
+  "security-auth-help": {
+    "p1": "Administre la configuración de seguridad de su cuenta para mantener sus datos seguros. OpenSign admite métodos de autenticación avanzados para mejorar la protección de la cuenta.",
+    "2fa-auth-help": "Agregue una capa adicional de seguridad activando 2FA. Esto requiere ingresar un código de verificación desde una aplicación autenticadora después de su contraseña.",
+    "passkey-auth-help": "Use claves de acceso para iniciar sesión sin contraseña con verificación biométrica o basada en el dispositivo, proporcionando una seguridad sólida y comodidad."
+  },
+  "signer-already-present": "Firmante ya presente",
+  "kiosk-sign": "Firma en quiosco",
+  "dont-have-access-to-template": "El template ha sido eliminado o no tiene acceso. Por favor, contacte al remitente.",
+  "kiosk-info": "El Modo Kiosco le permite recopilar firmas en persona de forma rápida y eficiente. Ideal para ferias, eventos o situaciones con personas que firman en el lugar. ",
+  "learn-more": "Más información"
+}
@@ -0,0 +1,975 @@
+{
+  "header-news": "Nuova funzionalità: Gli utenti del piano Teams possono ora integrare i propri bucket AWS S3 per l'archiviazione dei file",
+  "header-news-btn": "Configura Ora",
+  "create-account": "Crea Account",
+  "login": "Accedi",
+  "language": "Lingua",
+  "name": "Nome",
+  "phone": "Telefono",
+  "phone-optional": "facoltativo",
+  "email": "Email",
+  "company": "Azienda",
+  "job-title": "Titolo professionale",
+  "profile": "Profilo",
+  "log-out": "Disconnetti",
+  "is-email-verified": "Email verificata",
+  "public-profile": "Profilo pubblico",
+  "tagline": "Slogan",
+  "has-requested-you-to-sign": "ha richiesto la tua firma",
+  "has-requested-you-to-review-and-sign": "ha richiesto la tua revisione e firma",
+  "input-required": "Per favore, compila questo campo.",
+  "sort-order": {
+    "Ascending": "Crescente",
+    "Descending": "Decrescente",
+    "Name": "Nome",
+    "Date": "Data"
+  },
+  "context-menu": {
+    "Download": "Scarica",
+    "Rename": "Rinomina",
+    "Move": "Sposta",
+    "Delete": "Elimina"
+  },
+  "action": "Azione",
+  "add": "Aggiungi",
+  "add-new-folder": "Aggiungi una nuova cartella",
+  "disable-documentId": "Disabilita DocumentId",
+  "edit": "Modifica",
+  "change-password": "Cambia Password",
+  "save": "Salva",
+  "cancel": "Annulla",
+  "upgrade-now": "Aggiorna ora",
+  "upgrade-to": "Aggiorna a",
+  "plan": "Piano",
+  "subscribe-card-teamplan": "Sblocca tutto il potenziale della collaborazione! Crea organizzazioni, team e gerarchie illimitati. Condividi modelli senza problemi tra i team e assegna ruoli personalizzati agli utenti. Migliora il tuo flusso di lavoro oggi stesso!",
+  "subscribe-card-plan": "Sblocca le funzionalità premium a partire da soli {{premiumPrice}}/mese. Approfitta di prestazioni migliorate e paga solo {{addonPrice}} per ogni credito aggiuntivo dopo quelli inclusi.",
+  "user-name-limit-char": "Per un nome utente con meno di 8 caratteri, abbonati",
+  "tour-content": "Non mostrare più",
+  "pro": "PRO",
+  "team": "TEAM",
+  "user": "Utente",
+  "docs": "Documenti",
+  "session-expired": "La tua sessione è scaduta.",
+  "public-profile-help": "Questo è il tuo URL pubblico. Copialo o condividilo con il firmatario, e potrai visualizzare tutti i tuoi modelli pubblici.",
+  "welcome": "Bentornato!",
+  "Login-to-your-account": "Accedi al tuo account",
+  "password": "Password",
+  "forgot-password": "Password dimenticata?",
+  "loading": "Caricamento...",
+  "of": "di",
+  "sign-SSO": "Accedi con SSO",
+  "login-page": "Pagina di accesso",
+  "or": "O",
+  "signup-page": "Pagina di registrazione",
+  "password-length": "La password deve contenere almeno 8 caratteri",
+  "password-case": "La password deve contenere una lettera maiuscola, una minuscola e un numero",
+  "password-special-char": "La password deve contenere un carattere speciale",
+  "agreee": "Accetto i",
+  "term": "Termini di servizio",
+  "subscribe-to-opensign": "Iscriviti alla newsletter di OpenSign",
+  "register": "Registrati",
+  "sidebar": {
+    "Dashboard": "Dashboard",
+    "Sign yourself": "Firma tu stesso",
+    "Request signatures": "Richiedi firme",
+    "Templates": "Modelli",
+    "Analytics": "Analitica",
+    "Branding": "Marchio",
+    "Mail": "Posta",
+    "Storage": "Archiviazione",
+    "Signing certificate": "Certificato di firma",
+    "Teams": "Squadre",
+    "General": "Generale",
+    "Teams-Children": {
+      "Organizations": "Organizzazioni",
+      "OrgAdmins": "OrgAdmins"
+    },
+    "Templates-Children": {
+      "Create template": "Crea modello",
+      "Manage templates": "Gestisci modelli",
+      "Embedding": "Incorporazione"
+    },
+    "OpenSign™ Drive": "{{appName}} Drive",
+    "Reports": "Report",
+    "Documents": "Documenti",
+    "Documents-Children": {
+      "Need your sign": "Necessita della tua firma",
+      "In Progress": "In corso",
+      "Completed": "Completati",
+      "Drafts": "Bozze",
+      "Declined": "Rifiutati",
+      "Expired": "Scaduti"
+    },
+    "Contactbook": "Rubrica",
+    "Settings": "Impostazioni",
+    "Settings-Children": {
+      "My Signature": "La mia firma",
+      "API Token": "Token API",
+      "Webhook": "Webhook",
+      "Preferences": "Preferenze",
+      "Teams": "Team",
+      "Team-update-successfully": "Team aggiornato con successo.",
+      "Users": "Utenti"
+    }
+  },
+  "dashboard-card": {
+    "Need your Signature": "Necessita della tua firma",
+    "Out for signatures": "In attesa di firme"
+  },
+  "report-name": {
+    "Draft Documents": "Documenti in bozza",
+    "Need your sign": "Necessita della tua firma",
+    "In-progress documents": "Documenti in corso",
+    "Completed Documents": "Documenti completati",
+    "Declined Documents": "Documenti rifiutati",
+    "Expired Documents": "Documenti scaduti",
+    "Recently sent for signatures": "Inviati recentemente per firme",
+    "Recent signature requests": "Richieste di firma recenti",
+    "Drafts": "Bozze",
+    "Contactbook": "Rubrica",
+    "Templates": "Modelli",
+    "Teams": "Team",
+    "Users": "Utenti"
+  },
+  "btnLabel": {
+    "sign": "firma",
+    "Sign": "FIRMA",
+    "Resend": "Reinvia",
+    "Rename": "Rinominare",
+    "Revoke": "Revoca",
+    "Delete": "Elimina",
+    "Use": "Usa",
+    "Quick send": "Invio rapido",
+    "Edit": "Modifica",
+    "Share with team": "Condividi con il team",
+    "Share": "Condividi",
+    "View": "Visualizza",
+    "option": "Opzione",
+    "Embed": "Incorpora",
+    "Copy TemplateId": "Copia TemplateId",
+    "Copy Public URL": "Copia URL pubblico",
+    "extend-expiry-date": "Estendi data di scadenza",
+    "Duplicate Template": "Duplica modello",
+    "Duplicate": "Duplica",
+    "daily-mail-quota": "Quota e-mail giornaliera",
+    "Save as template": "Salva come modello",
+    "Fix & resend": "Correggi e reinvia",
+    "Kiosk Mode": "Modalità Kiosk"
+  },
+  "report-heading": {
+    "Sr.No": "Nr.",
+    "Title": "Titolo",
+    "Email": "Email",
+    "Phone": "Telefono",
+    "File": "File",
+    "Owner": "Proprietario",
+    "Signers": "Firmatari",
+    "Note": "Nota",
+    "Folder": "Cartella",
+    "Reason": "Motivo",
+    "Parent Team": "Team genitore",
+    "Active": "Attivo",
+    "Role": "Ruolo",
+    "Team": "Team",
+    "Name": "Nome",
+    "Status": "Stato",
+    "created-date": "Data di creazione",
+    "Type": "Tipo",
+    "Logs": "Log",
+    "Expiry-date": "Data di scadenza"
+  },
+  "report-help": {
+    "Draft Documents": "Questi sono documenti che hai iniziato ma non hai ancora finalizzato per l'invio.",
+    "Need your sign": "Questa è una lista di documenti in attesa della tua firma.",
+    "In-progress documents": "Questa è una lista di documenti che hai inviato ad altre parti per la firma.",
+    "Completed Documents": "Questa è una lista di documenti firmati da tutte le parti.",
+    "Declined Documents": "Questa è una lista di documenti rifiutati da uno dei firmatari.",
+    "Expired Documents": "Questa è una lista di documenti che hanno raggiunto la data di scadenza.",
+    "Contactbook": "Questa è una lista di contatti/firmatari aggiunti da te. Appariranno come suggerimenti quando provi ad aggiungere firmatari a un nuovo documento.",
+    "Templates": "Questa è una lista di modelli disponibili per creare documenti. Puoi fare clic sul pulsante 'Usa' per creare un nuovo documento utilizzando un modello, modificare il documento e aggiungere firmatari nel passaggio successivo."
+  },
+  "form-name": {
+    "Sign Yourself": "Firma tu stesso",
+    "Request Signatures": "Richiedi firme",
+    "New Template": "Nuovo modello"
+  },
+  "file-type": "pdf, png, jpg, jpeg",
+  "docx": "docx",
+  "file-selected": "file selezionato",
+  "template-title": "Titolo del modello",
+  "document-title": "Titolo del documento",
+  "description": "Descrizione",
+  "time-to-complete": "Tempo per completare (giorni)",
+  "send-in-order": "Invia in ordine",
+  "send-in-order-help": {
+    "p1": "Scegli come desideri inviare le richieste di firma ai firmatari del documento:",
+    "p2": "Selezionando questa opzione, la richiesta di firma verrà inviata inizialmente al primo firmatario. Una volta che il primo firmatario avrà completato la propria parte, il successivo nella sequenza riceverà la richiesta. Questo processo continua fino a quando tutti i firmatari hanno firmato il documento. Questo metodo garantisce che il documento venga firmato in un ordine specifico.",
+    "p3": "Selezionando questa opzione, i link di firma verranno inviati a tutti i firmatari contemporaneamente. Ogni firmatario può firmare il documento a sua discrezione, indipendentemente dal fatto che altri firmatari abbiano completato le firme. Questo metodo è più veloce ma non impone un ordine di firma tra i partecipanti.",
+    "p4": "Seleziona l'opzione che meglio si adatta alle esigenze del tuo processo documentale."
+  },
+  "no": "No",
+  "auto-reminder": "Promemoria automatico",
+  "remind-once": "Ricorda una volta ogni (giorni)",
+  "next": "Avanti",
+  "select-folder": "Seleziona cartella",
+  "OpenSign-drive": "{{appName}} Drive",
+  "drive-document-status": {
+    "Completed": "Completato",
+    "Declined": "Rifiutato",
+    "Draft": "Bozza",
+    "Expired": "Scaduto",
+    "In Progress": "In corso"
+  },
+  "select-folder-help": "Se non selezioni una cartella, il tuo documento firmato verrà salvato nella cartella principale di {{appName}} Drive.",
+  "no-data": "Nessun dato trovato",
+  "save-here": "Salva qui",
+  "back": "Indietro",
+  "add-folder": "Aggiungi cartella",
+  "create-folder": "Crea cartella",
+  "parent-folder": "Cartella principale",
+  "create": "Crea",
+  "signers": "Firmatari",
+  "signers-help": "Inizia a digitare il nome di un contatto per vedere i firmatari suggeriti dai tuoi contatti salvati o aggiungerne di nuovi. Organizza l'ordine di firma aggiungendo firmatari nella sequenza desiderata. Usa il pulsante '+' per includere firmatari e 'x' per rimuoverli. Ogni firmatario riceverà una notifica via email per firmare il documento nell'ordine elencato.",
+  "bcc-help": "it-Start it-typing it-a it-contact's it-name it-to it-see it-suggestions it-from it-your it-saved it-contacts it-or it-add it-new it-ones. it-Use it-the '+' it-button it-to it-add it-a it-user it-and it-the 'x' it-to it-remove it-them. it-The it-selected it-user's it-email it-will it-be it-added it-as it-a it-Bcc (it-blind it-carbon it-copy). it-Each it-user it-will it-receive it-an it-email it-notification it-once it-the it-document it-is it-completed.",
+  "add-signer": "Aggiungi firmatario",
+  "contact-not-found": "Contatto non trovato",
+  "add-yourself": "Aggiungi te stesso",
+  "submit": "Invia",
+  "reset": "Reimposta",
+  "my-signature": "La mia firma",
+  "signature": "Firma",
+  "upload-image": "Carica immagine",
+  "clear": "Chiara",
+  "upload-signature/Image": "Carica firma/immagine",
+  "initials": "Iniziali",
+  "API": "API",
+  "api-token": "Token API",
+  "regenerate-token": "Rigenera token live",
+  "generate-token": "Genera token live",
+  "view-docs": "Visualizza documenti",
+  "generate-token-alert": "Sei sicuro di voler rigenerare il token? Questo invaliderà il vecchio token.",
+  "yes": "Sì",
+  "copied": "Copiato",
+  "something-went-wrong-mssg": "Si è verificato un errore, L'aggiornamento della pagina potrebbe risolvere il problema.",
+  "token-generated": "Token generato con successo.",
+  "webhook": "Webhook",
+  "update-webhook": "Aggiorna Webhook",
+  "add-webhook": "Aggiungi Webhook",
+  "webhook-added": "Webhook aggiunto con successo.",
+  "team-disabled": "Team disabilitato",
+  "Team enabled": "Team abilitato",
+  "are-you-sure": "Sei sicuro di voler",
+  "disable": "disabilitare",
+  "enable": "abilitare",
+  "this-team": "questo team?",
+  "edit-team": "Modifica Team",
+  "name-of-team": "Nome del Team",
+  "prev": "Precedente",
+  "no-data-avaliable": "Nessun dato disponibile",
+  "add-team": "Aggiungi Team",
+  "page-not-found": "Pagina non trovata",
+  "users-from-teams": "utenti dai Team",
+  "user-status": "Stato utente",
+  "activate": "attiva",
+  "deactivate": "disattiva",
+  "this-user": "questo utente",
+  "delete-user": "Elimina utente",
+  "delete": "elimina",
+  "add-user": "Aggiungi utente",
+  "password-generateed": "La password verrà generata solo una volta; assicurati di copiarla.",
+  "Team status": "Stato del Team",
+  "user-deactivated": "Utente disattivato.",
+  "user-activated": "Utente attivato.",
+  "public": "Pubblico",
+  "download": "Scarica",
+  "view": "Visualizza",
+  "make-template-public": "Rendi il modello pubblico",
+  "make-template-private": "Rendi il modello privato",
+  "make-template-public-alert": "Sei sicuro di voler rendere pubblico questo modello?",
+  "make-template-private-alert-non": "Sei sicuro di voler rendere privato questo modello?",
+  "make-template-private-alert": "Sei sicuro di voler rendere privato questo modello? Questo lo rimuoverà dal tuo profilo pubblico.",
+  "public-role": "Ruolo pubblico",
+  "public-url": "Profilo pubblico",
+  "embed-template": "Incorpora Modello",
+  "public-url-copy": "Ecco il tuo URL pubblico: ",
+  "public-url-copy-mssg": "Copialo o condividilo con il firmatario; potrai vedere tutti i tuoi modelli impostati come pubblici.",
+  "add-public-url-alert": "Completa la configurazione del tuo profilo pubblico {{appName}}. Dopo, potrai rendere i modelli pubblici. Questo processo è necessario solo una volta.",
+  "share-with-alert": "Non puoi condividere un modello se alcuni ruoli hanno già contatti assegnati. Rimuovi tutte le assegnazioni di contatti dai ruoli prima di condividere il modello.",
+  "share-with": "Condividi con",
+  "team-not-found": "Team non trovato",
+  "roles": "Ruoli",
+  "delete-document": "Elimina documento",
+  "delete-document-alert": "Sei sicuro di voler eliminare questo documento?",
+  "quick-send": "Invio rapido",
+  "add-new": "Aggiungi nuovo",
+  "send": "Invia",
+  "quick-send-alert-1": "Tutti i ruoli in questo documento sono attualmente collegati a contatti. Per inviare rapidamente copie di questo modello a più firmatari, assicurati che almeno un ruolo non sia collegato a nessun contatto.",
+  "quick-send-alert-2": "Assicurati che ci sia almeno un widget firma aggiunto per tutti i destinatari.",
+  "quick-send-alert-3": "Si prega di aggiungere almeno un ruolo a questo template.",
+  "quick-send-alert-4": "Limite di invio rapido raggiunto.",
+  "copy-link": "Copia link",
+  "copy": "Copia",
+  "revoke-document": "Revoca documento",
+  "revoke-document-alert": "Sei sicuro di voler revocare questo documento?",
+  "resend-mail": "Reinvia email",
+  "resend-mail-help": "Puoi usare le seguenti variabili che verranno sostituite con i loro valori effettivi: {{document_title}}, {{sender_name}}, {{sender_mail}}, {{sender_phone}}, {{receiver_name}}, {{receiver_email}}, {{receiver_phone}}, {{expiry_date}}, {{company_name}}, {{signing_url}}, {{note}}.",
+  "subject": "Oggetto",
+  "body": "Corpo del messaggio",
+  "add-contact": "Aggiungi contatto",
+  "edit-contact": "Modifica contatto",
+  "add-signer-alert": "Il contatto esiste già! Selezionalo dal menu a tendina 'Firmatari'.",
+  "record-delete-alert": "Record eliminato con successo!",
+  "record-revoke-alert": "Record revocato con successo!",
+  "mail-sent-alert": "Email inviata con successo.",
+  "document-sent-alert": "Documento inviato con successo!",
+  "template-share-alert": "Modello condiviso con successo.",
+  "template-public-alert-1": "Hai reso pubblico il modello con successo.",
+  "template-public-alert-2": "Hai reso privato il modello con successo.",
+  "template-public-alert-3": "Devi selezionare un ruolo per i firmatari pubblici.",
+  "template-public-alert-4": "Assicurati che ci sia almeno un widget firma aggiunto per tutti i firmatari.",
+  "template-public-alert-5": "Poiché questo modello ha l'invio in ordine abilitato, il ruolo pubblico deve essere posizionato in cima.",
+  "template-public-alert-6": "Assegna firmatari a tutti i ruoli tranne che per l'utente ruolo pubblico.",
+  "template-public-alert-7": "Assegna almeno un ruolo pubblico per rendere questo modello pubblico.",
+  "loader": "Questo potrebbe richiedere del tempo.",
+  "pages": "Pagine",
+  "document-signed": "Documento firmato",
+  "close": "Chiudi",
+  "validation-alert": "Avviso di validazione",
+  "validate-alert-mssg": "L'input non soddisfa i criteri impostati dall'espressione regolare.",
+  "otp-verification": "Verifica OTP",
+  "enter-otp": "Inserisci OTP",
+  "verify": "Verifica",
+  "verify-email-1": "Verifica email",
+  "resend": "Reinvia",
+  "contact-details": "Dettagli contatto",
+  "verify-email": "Si prega di verificare l'e-mail per continuare. Questo è un passaggio unico per confermare l'e-mail associata al tuo account OpenSign.",
+  "send-otp": "Invia OTP",
+  "otp-placeholder": "Inserisci il codice di verifica ricevuto via email",
+  "loading-doc": "Caricamento del documento...",
+  "widgets-name": {
+    "signature": "firma",
+    "stamp": "timbro",
+    "initials": "iniziali",
+    "name": "nome",
+    "job title": "titolo lavorativo",
+    "company": "azienda",
+    "date": "data",
+    "text": "testo",
+    "text input": "campo di testo",
+    "checkbox": "casella di controllo",
+    "dropdown": "menu a tendina",
+    "radio button": "pulsante di opzione",
+    "image": "immagine",
+    "email": "email"
+  },
+  "fields": "Campi",
+  "recipients": "Destinatari",
+  "please-add": "Aggiungi un",
+  "signed-by": "Firmato da",
+  "more": "altro",
+  "sent": "inviato",
+  "print": "Stampa",
+  "certificate": "Certificato",
+  "decline": "Rifiuta",
+  "finish": "Completa",
+  "mail": "Email",
+  "sign-now": "Firma ora",
+  "successfully-signed": "Firmato con successo!",
+  "email-mssg": "I destinatari aggiunti qui riceveranno una copia del documento firmato.",
+  "email-error-1": "fornisci un indirizzo email corretto",
+  "email-error-2": "Puoi inviare solo a dieci destinatari alla volta.",
+  "Email-verified-alert-1": "Email verificata.",
+  "Email-verified-alert-2": "Email già verificata.",
+  "upload-stamp-image": "Carica immagine timbro",
+  "draw": "Disegno",
+  "type": "Digitata",
+  "color-type": {
+    "red": "rosso",
+    "blue": "blu",
+    "black": "nero",
+    "yellow": "giallo"
+  },
+  "my-initials": "Le mie iniziali",
+  "upload": "Caricamento",
+  "initial-teb": "Iniziali",
+  "signature-tab": "Firma",
+  "your-signature": "La tua firma",
+  "copy-title": "Copia widget in",
+  "contact-delete-alert": "Sei sicuro di voler eliminare questo contatto?",
+  "reset-password-alert-1": "Il link per reimpostare la password è stato inviato al tuo indirizzo email",
+  "reset-password-alert-2": "Si prega di configurare l'adattatore email",
+  "reset-password-alert-3": "Reimposta la tua password",
+  "faild-animation": "Caricamento animazione non riuscito",
+  "apply": "Applica",
+  "copy-type": {
+    "All pages": "Tutte le pagine",
+    "All pages but last": "Tutte le pagine tranne l'ultima",
+    "All pages but first": "Tutte le pagine tranne la prima",
+    "Next to current widget": "Accanto al widget corrente"
+  },
+  "options": "Opzioni",
+  "minimun-check": "Controllo minimo",
+  "maximum-check": "Controllo massimo",
+  "default-value": "Valore predefinita",
+  "select": "Seleziona",
+  "read-only": "È solo lettura",
+  "hide-labels": "Nascondi etichette",
+  "checkbox": "Casella di controllo",
+  "alert": "Avviso",
+  "zoom-in": "Ingrandisci",
+  "zoom-out": "Riduci",
+  "document-signed-alert": "Congratulazioni! 🎉 Questo documento è stato firmato con successo da te!",
+  "otp-sent-alert": "OTP inviato alla tua email",
+  "fields-required": "Campi richiesti",
+  "signature-widget-alert-1": "Assicurati che sia stato aggiunto almeno un widget per la firma",
+  "signature-widget-alert-2": "Assicurati che tutti i campi siano compilati correttamente e soddisfino tutti i requisiti.",
+  "encrypted-pdf-alert": "Attualmente i file PDF crittografati non sono supportati.",
+  "encrypted-pdf-alert-1": "La password del file PFX non è valida.",
+  "user-not-exist": "L'utente non esiste",
+  "template-role-alert": "Aggiungi prima i ruoli",
+  "create-document": "Crea Documento",
+  "template-created-alert": "Cosa vorresti fare con il modello che hai appena creato?",
+  "signers-alert": "Avviso firmatari",
+  "template-creation-alert-1": "Seleziona il firmatario per aggiungere un segnaposto!",
+  "ok": "Ok",
+  "radio-group": "Gruppo radio",
+  "dropdown-options": "Opzioni a discesa",
+  "add-role": "Aggiungi Ruolo",
+  "role-ex": "es: Cliente, HR, Direttore, Manager, Studente, ecc.",
+  "add/choose-signer": "Aggiungi/Scegli Firmatario",
+  "choose-from-contacts": "Scegli dai contatti",
+  "select-signer": "Seleziona il firmatario",
+  "edit-template": "Modifica Modello",
+  "widget-info": "Informazioni Widget",
+  "validation": "Validazione",
+  "invalid-default-value": "Valore predefinita non valido",
+  "hint": "Suggerimento",
+  "color": "Colore",
+  "role-help": {
+    "p1": "Cosa sono i ruoli del modello?",
+    "p2": "Inizia specificando ogni ruolo necessario per completare il documento. Pensa alle parti coinvolte nel processo di firma e alle loro responsabilità. I ruoli comuni includono HR per documenti interni, Cliente per accordi o Fornitore per accordi commerciali.",
+    "p3": "Perché pre-assegnare utenti a determinati ruoli?",
+    "p4": "Per ruoli che coinvolgono sempre la stessa persona (es. la firma del CEO sulle lettere di offerta ai dipendenti), puoi pre-assegnare un utente a un ruolo nel modello. Questo passaggio è facoltativo ma consigliato per efficienza e coerenza nei documenti.",
+    "p5": "Quando specifico l'utente associato a ciascun ruolo?",
+    "p6": "Quando crei un documento dal tuo modello, ti verrà chiesto di assegnare utenti a ciascun ruolo definito. Se un ruolo ha già un utente associato, sarà precompilato, ma puoi modificarlo se necessario prima di inviare il documento."
+  },
+  "add-recipients": "Aggiungi destinatari",
+  "loading-mssg": "Questo potrebbe richiedere del tempo",
+  "send-mail": "Invia Mail",
+  "signature-field-widget":"È necessario aggiungere almeno un campo firma per ogni utente. Non hai aggiunto campi firma per {{signersName}}",
+  "placeholder-alert-1": "Assicurati che sia stato aggiunto almeno un widget per la firma per tutti i destinatari.",
+  "placeholder-alert-2": "Conferma di aver compilato il campo di testo.",
+  "placeholder-alert-3": "Sei sicuro di voler inviare questo documento per le firme?",
+  "placeholder-alert-4": "Hai inviato con successo le mail a tutti i destinatari!",
+  "placeholder-mail-alert": "Hai inviato con successo un'e-mail a {{name}}. I firmatari successivi riceveranno un'e-mail una volta che {{name}} avrà firmato il documento.",
+  "placeholder-mail-alert-you": "I firmatari successivi riceveranno un'email non appena firmi il documento.",
+  "placeholder-alert-5": "Vuoi firmare i documenti ora?",
+  "placeholder-alert-6": "Configura l'adattatore email per inviare mail!",
+  "placeholder-alert-7": "Seleziona il firmatario per aggiungere un segnaposto!",
+  "email-subject": "Oggetto email",
+  "email-body": "Corpo email",
+  "email-placeholder": "aggiungi corpo dell'email",
+  "reset-to-default": "Reimposta predefinita",
+  "cutomize-email": "Personalizza Email",
+  "upgrade-to-customize-email": "Aggiorna per personalizzare l'Email",
+  "sign-url": "URL Firma",
+  "mails-sent": "Mail inviate",
+  "mail-not-delivered": "Mail non consegnata",
+  "document-alert": "Avviso Documento",
+  "owner-subscription-expired": "L'abbonamento del proprietario è scaduto.",
+  "subscription-expired": "Abbonamento Scaduto",
+  "alert-message": "Messaggio di avviso",
+  "document-decline": "Documento rifiutato",
+  "decline-alert-1": "Sei sicuro di voler rifiutare questo documento?",
+  "decline-alert-2": "Hai rifiutato questo documento!",
+  "decline-alert-3": "Non puoi firmare questo documento poiché è stato rifiutato/revocato.",
+  "sign here": "Firma qui",
+  "guest-email-alert": "Il codice di verifica è stato inviato alla tua email",
+  "get-otp-alert": "Riceverai un codice di verifica tramite Email",
+  "user-already-exist": "L'utente esiste già.",
+  "server-error": "Errore interno del server!",
+  "fill-required-details!": "Compila i dettagli richiesti!",
+  "sign-up-form": "Modulo di registrazione",
+  "sign-up": "Registrati",
+  "folder-already-exist!": "La cartella esiste già!",
+  "please-select-position!": "Seleziona la posizione!",
+  "default-sign-alert": "Sei sicuro di voler firmare automaticamente in tutte le posizioni richieste?",
+  "Your-Signature": "La tua Firma",
+  "auto-sign-all": "Firma tutto automaticamente",
+  "generating-certificate": "Generazione certificato",
+  "pdf-download": "Scarica PDF",
+  "generate-certificate-alert": "Il certificato di completamento è in fase di generazione. Attendi momentaneamente. Se il download non inizia a breve, fai clic nuovamente sul pulsante.",
+  "generate-certificate-err": "Stiamo attualmente riscontrando un problema con la generazione del certificato. Per favore riprova più tardi.",
+  "folder-already-exist": "La cartella esiste già!",
+  "folder-created-successfully": "Cartella creata con successo!",
+  "fill-folder-name": "Compila il nome della cartella",
+  "already-exists-this-username": "Un utente con questo nome utente esiste già!",
+  "verification-code-sent": "Una mail di verifica è stata inviata al tuo indirizzo email!",
+  "registered-user-successfully": "Utente registrato con successo.",
+  "role-not-found": "Ruolo non trovato.",
+  "do-not-access": "Non hai accesso, contatta l'amministratore.",
+  "add-admin": "Aggiungi amministratore",
+  "opensign-setup": "Configurazione {{appName}}",
+  "join-discord": "Unisciti al nostro server Discord",
+  "admin-already-exist": "L'amministratore esiste già.",
+  "password-update-alert-1": "Password aggiornata con successo.",
+  "password-update-alert-2": "La tua password attuale manca o è errata.",
+  "password-update-alert-3": "La tua password attuale è mancante o errata.",
+  "password-update-alert-4": "La tua password e la password di conferma non corrispondono.",
+  "current-password": "Password attuale",
+  "new-password": "Nuova Password",
+  "confirm-password": "Conferma Password",
+  "file-alert-1": "La dimensione del file selezionato è troppo grande. Seleziona un file inferiore a",
+  "file-alert-2": "Seleziona un file.",
+  "file-alert-3": "Attendi mentre il documento viene caricato.",
+  "enter-pdf-password": "Inserisci la password del PDF",
+  "correct-password": "Fornisci la password corretta",
+  "decrypting-pdf": "Decrittazione PDF, attendi...",
+  "invalid-otp": "OTP non valido",
+  "user-not-found": "Utente non trovato",
+  "enter-otp-alert": "Inserisci l'OTP!",
+  "get-verification-code": "Ottieni codice di verifica",
+  "get-verification-code-2": "Riceverai un codice di verifica tramite Email",
+  "enter-verification-code": "Inserisci il codice di verifica",
+  "provide-your-details": "Fornisci i tuoi dettagli",
+  "provide-email": "Fornisci l'email.",
+  "additional-info": "Informazioni aggiuntive",
+  "signature-saved-alert": "Firma salvata con successo.",
+  "saved-successfully": "Salvato con successo.",
+  "fill-field": "Compila questo campo",
+  "error-template": "Errore: Modello non trovato!",
+  "error": "Errore",
+  "invalid-document": "Errore: documento non valido!",
+  "document-not-found": "Documento non trovato!",
+  "document-signed-alert-1": "Hai firmato con successo il documento. Puoi scaricare o stampare una copia del documento parzialmente firmato. Una copia del documento firmato digitalmente e del certificato di completamento verrà inviata al proprietario e a tutti i firmatari via email una volta che tutti avranno firmato.",
+  "encrypted-pdf-not-support": "Attualmente i file PDF crittografati non sono supportati.",
+  "document-signed-alert-4": "Congratulazioni! 🎉 Questo documento è stato firmato con successo da tutti i partecipanti!",
+  "document-signed-alert-5": "Questo documento è stato firmato da tutti i firmatari.",
+  "document-signed-alert-6": "Questo documento è stato rifiutato da uno o più destinatari.",
+  "document-signed-alert-7": "Questo documento non è più disponibile.",
+  "document-signed-alert-8": "Il documento è già stato inviato per la firma.",
+  "yet-to-sign": "Ancora da firmare",
+  "validation-alert-1": "L'input non soddisfa i criteri impostati dall'espressione regolare.",
+  "account-already-exists": "L'account esiste già!",
+  "choose-password": "Scegli Password",
+  "enter-password": "Inserisci Password",
+  "sure": "sicuro",
+  "subscribed-alert": "Hai già sottoscritto il piano!",
+  "monthly": "Mensile",
+  "yearly-upto": "Annuale (fino al 66% di sconto)",
+  "billed-yearly": "Fatturato annualmente",
+  "billed-monthly": "Fatturato mensilmente",
+  "plansubscription-1": "Ospitalo tu stesso gratuitamente",
+  "visit-github": "Visita Github",
+  "user-already-exist-name": "Esiste già un utente con questo nome utente!",
+  "do-not-access-contact-admin": "Non hai accesso, contatta l'amministratore.",
+  "filed-required-correctly": "Compila i dettagli richiesti correttamente.",
+  "admin-created": "Amministratore creato",
+  "invalid-masterkey": "Masterkey non valida",
+  "master-key": "Chiave principale",
+  "profile-update-alert": "Profilo aggiornato con successo.",
+  "date": "Data",
+  "report-not-found": "Report non trovato",
+  "please-wait": "attendere prego",
+  "select-foler": "Seleziona cartella",
+  "generated-on": "Generato il",
+  "text-field": "Campo di testo",
+  "font-size": "Dimensione carattere",
+  "widget-status": {
+    "Required": "Richiesto",
+    "Optional": "Opzionale"
+  },
+  "all-right": "Tutti i diritti riservati",
+  "version": "versione",
+  "social-media": {
+    "github": "Github",
+    "linked-in": "LinkedIn",
+    "twitter": "Twitter",
+    "discord": "Discord"
+  },
+  "tour-mssg": {
+    "home-layout-1": "Accesso effettuato con successo! Diamo un'occhiata.",
+    "home-layout-2": "Per caricare documenti da firmare personalmente o richiedere le firme di altri, seleziona semplicemente i pulsanti corrispondenti.",
+    "home-layout-3": "Sei pronto per iniziare a usare {{appName}}! Se hai bisogno di supporto, contattaci pure.",
+    "generate-token": "Esegui l'upgrade ora per generare un token API di produzione.",
+    "opensign-drive-1": "Fai clic sui collegamenti breadcrumb per navigare facilmente attraverso la gerarchia delle cartelle e visualizzare i documenti in ciascuna cartella.",
+    "opensign-drive-2": "Fai clic sul pulsante aggiungi per creare una nuova cartella o documento.",
+    "opensign-drive-3": "Ordina i tuoi documenti per data o nome utilizzando questo menu.",
+    "opensign-drive-4": "Fai clic su questo menu per visualizzare i documenti in modalità elenco.",
+    "opensign-drive-5": "L'elenco dei documenti è visualizzato in base all'opzione di ordinamento selezionata. Le icone accanto a ciascun documento indicano il suo stato attuale.",
+    "opensign-drive-6": "Fai clic con il tasto destro su un documento per vedere opzioni come Scarica, Rinomina, Sposta e Elimina. Fai clic sul documento per aprirlo.",
+    "opensign-drive-7": "Fai clic con il tasto destro su qualsiasi cartella per vedere le opzioni. Scegli 'Rinomina' per cambiare il nome della cartella o fai clic sulla cartella per navigare nei suoi contenuti.",
+    "pdf-request-file-1": "Elenco dei firmatari che devono ancora firmare il documento.",
+    "pdf-request-file-2": "Fai clic su uno dei segnaposto che appaiono sul documento per firmare. Vedrai poi le opzioni per disegnare la tua firma, digitarla o caricare un'immagine.",
+    "pdf-request-file-3": "Clicca sui pulsanti Rifiuta o Fine per navigare nel tuo documento. Usa il menu con i puntini di sospensione per opzioni aggiuntive, incluso il pulsante Scarica.",
+    "pdf-request-file-4": "Elenco dei firmatari che hanno già firmato il documento.",
+    "pdf-request-file-5": "Puoi fare clic su 'Firma Tutto Automaticamente' per firmare automaticamente in tutte le posizioni previste per te. Assicurati di esaminare attentamente il documento prima di fare clic su questo pulsante.",
+    "pdf-request-file-6": "Si prega di completare i campi alla pagina {{pagenumbers}}, tutti evidenziati con lo stesso colore per una facile identificazione.",
+    "placeholder-sign-1": "Seleziona un destinatario da questo elenco per aggiungere un segnaposto dove deve firmare. Il segnaposto apparirà dello stesso colore del nome del destinatario una volta posizionato sul documento.",
+    "placeholder-sign-2": "Facendo clic sul pulsante 'Aggiungi destinatari' potrai aggiungere più firmatari.",
+    "placeholder-sign-3": "Fai clic su questo pulsante per aggiungere altri destinatari/firmatari al documento.",
+    "placeholder-sign-4": "Trascina o fai clic su un campo per aggiungerlo al documento.",
+    "placeholder-sign-5": "L'area del contenuto PDF visualizza già i segnaposti esistenti del modello. Per tua comodità, questi segnaposti corrisponderanno al colore del nome del destinatario, rendendoli facilmente identificabili.",
+    "placeholder-sign-6": "Facendo clic su 'Invia' il documento verrà salvato. Nel passaggio successivo potrai personalizzare le email da inviare ai destinatari o copiare i link di firma e condividerli direttamente con i destinatari.",
+    "report-1": "Fai clic sul pulsante 'Aggiungi' per creare un nuovo modello. I modelli sono documenti riutilizzabili progettati per generare rapidamente nuovi documenti con la stessa struttura e firmatari diversi. Ad esempio, un modello HR per l'onboarding potrebbe avere ruoli predefinita come 'Responsabile HR' e 'Nuovo Dipendente'. Ogni volta che usi il modello, puoi assegnare il ruolo 'Nuovo Dipendente' a membri dello staff in arrivo, mentre il ruolo 'Responsabile HR' rimane costante, facilitando un processo di onboarding fluido per ogni nuovo assunto.",
+    "redirect": "Fai clic sul pulsante 'Usa' per creare un nuovo documento da un modello esistente.",
+    "bulksend": "Per inviare rapidamente più documenti utilizzando un modello esistente creando semplicemente gli indirizzi e-mail dei destinatari, fai clic sul pulsante 'Invio Multiplo'.",
+    "option": "Questo menu rivela altre opzioni come Modifica ed Elimina. Usa il pulsante 'Modifica' per aggiungere ruoli di firmatari, modificare i campi e aggiornare il modello. Le modifiche si applicheranno a tutti i futuri documenti creati da questo modello ma non influiranno sui documenti esistenti. Usa il pulsante Elimina per eliminare il modello.",
+    "signyour-self-1": "Seleziona e trascina i widget preferiti sul PDF per personalizzare il documento prima di firmarlo. Scegli i punti perfetti per ogni modifica per adattare il documento alle tue esigenze.",
+    "signyour-self-2": "Trascina e rilascia ovunque in quest'area. Puoi ridimensionarlo e spostarlo in seguito.",
+    "template-placeholder-1": "Facendo clic sul pulsante 'Aggiungi ruolo' potrai aggiungere vari ruoli di firmatari. Puoi assegnare utenti a ciascun ruolo nei passaggi successivi.",
+    "template-placeholder-2": "Una volta aggiunti i ruoli, seleziona un ruolo dall'elenco per aggiungere un segnaposto dove deve firmare. Il segnaposto apparirà dello stesso colore del nome del ruolo una volta posizionato sul documento.",
+    "template-placeholder-3": "Trascina o fai clic su un campo per aggiungerlo al documento.",
+    "template-placeholder-4": "Trascina il segnaposto per un ruolo ovunque sul documento. Ricorda, apparirà dello stesso colore del nome del destinatario per un facile riferimento.",
+    "template-placeholder-5": "Facendo clic su 'Avanti' il modello corrente verrà memorizzato. Dopo averlo salvato, ti verrà chiesto di creare un nuovo documento da questo modello, se lo desideri.",
+    "webhook-1": "Esegui l'upgrade ora per configurare il webhook.",
+    "Need your Signature": "Facendo clic su questa scheda, accederai all'elenco dei documenti in attesa della tua revisione.",
+    "Out for signatures": "Facendo clic su questa scheda, accederai all'elenco dei documenti in attesa di firma.",
+    "Recent signature requests": "Questo è un elenco di documenti che aspettano la tua firma.",
+    "Recently sent for signatures": "Questo è un elenco di documenti che hai inviato ad altre parti per la firma.",
+    "Drafts": "Questi sono documenti che hai iniziato ma non hai finalizzato per l'invio.",
+    "public-template": "Questo video dimostra come configurare il tuo profilo pubblico personalizzato, come 'https://opensign.me/tuo-username'. Imparerai anche come personalizzare il tuo slogan e rendere i tuoi modelli disponibili per la firma pubblica.",
+    "allowModify-widgets": "È possibile trascinare e rilasciare uno qualsiasi di questi campi nel documento, oltre ai campi già designati dal creatore del documento."
+  },
+  "enter-email-plaholder": "Aggiungi un indirizzo email e premi invio",
+  "success-email-alert": "Email inviata con successo!",
+  "expired-doc-title": "Documento Scaduto",
+  "expired-on-mssg": "Questo documento è scaduto il {{expiredDate}} e non è più disponibile per la firma.",
+  "signature-validate-alert": "Conferma di aver selezionato almeno {{minRequiredCount}} caselle di controllo.",
+  "signature-validate-alert-2": "Assicurati che questo campo sia compilato correttamente e soddisfi tutti i requisiti.",
+  "remaing-users": "Utenti rimanenti",
+  "Role": "Ruolo",
+  "additional-users": "Acquista utenti aggiuntivi.",
+  "Quantity-of-users": "Quantità di utenti",
+  "Price": "Prezzo",
+  "Total-price-for-next-time": "Prezzo totale per la prossima volta",
+  "Proceed": "Procedi",
+  "Select": "Seleziona",
+  "Add-seats": "Aggiungi Posti",
+  "user-name-exist": "Il nome utente esiste già",
+  "format": "formato",
+  "select-date-format": "Seleziona un formato data",
+  "quantity-of-credits": "Quantità di crediti premium",
+  "remaining-credits": "Crediti premium disponibili:",
+  "remaining-credits-help": "Usa i crediti premium per firmare documenti API, invii in massa o per integrare OpenSign nel tuo sito web. Hai a disposizione {{allowedcredits}} crediti inclusi e {{addoncredits}} crediti acquistati aggiuntivi rimanenti.",
+  "additional-credits": "Acquista crediti premium",
+  "quota-err-quicksend": "Quota raggiunta, non hai abbastanza crediti.",
+  "buy-credits": "Acquista Crediti Premium",
+  "rotate-right": "Ruota a destra",
+  "rotate-left": "Ruota a sinistra",
+  "rotate-alert-mssg": "Tutti i widget su questa pagina andranno persi. Sei sicuro di voler procedere?",
+  "templateid": "ID Modello",
+  "bulk-send-subcription-alert": "Esegui l'upgrade al piano Professionale o Team per utilizzare l'invio in massa.",
+  "generate-test-token": "Genera Token di Test",
+  "regenerate-test-token": "Rigenera Token di Test",
+  "help-test-token": "Questo token può essere utilizzato per testare le API all'endpoint https://sandbox.opensignlabs.com/api/v1, consentendoti di firmare documenti illimitati. Nota che le API sandbox firmeranno i tuoi documenti con certificati autofirmati, che potrebbero non essere riconosciuti come validi da Adobe. Una volta completati i test, puoi eseguire l'upgrade a uno dei nostri piani a pagamento per generare un token di produzione.",
+  "help-api-token": "Questo token può essere utilizzato per accedere alle API di produzione all'endpoint {{origin}}/api/v1. Può essere generato solo su uno dei nostri piani a pagamento.",
+  "reason": "Motivo",
+  "decline-by": "Rifiutato/revocato da",
+  "document-declined": "Documento rifiutato",
+  "public-template-mssg-1": "Per integrare OpenSign nel tuo progetto React o Next.js, esegui semplicemente il seguente comando:",
+  "public-template-mssg-2": "Assicurati di avere npm o yarn configurato nel tuo progetto. Se usi Yarn, puoi sostituire npm install con yarn add @opensign/react.",
+  "public-template-mssg-3": "Hai bisogno di maggiori dettagli o esempi?",
+  "public-template-mssg-4": "Visita il",
+  "public-template-mssg-5": " npm per gli aggiornamenti più recenti, documentazione dettagliata e cronologia delle versioni.",
+  "public-template-mssg-6": "Prima di poter utilizzare questo frammento di codice, devi rendere questo modello pubblico.",
+  "public-template-mssg-7": "Prima di poter generare un link pubblico, devi rendere questo modello pubblico.",
+  "here": "Qui",
+  "copy-code": "COPIA",
+  "copied-code": "COPIATO",
+  "Installation": "Installazione",
+  "Usage": "Utilizzo",
+  "insufficient-credits": "Crediti di firma insufficienti",
+  "insufficient-credits-mssg": "Il proprietario di questo documento non dispone attualmente dei crediti OpenSign necessari affinché tu possa firmare. Contatta il proprietario per ulteriori dettagli.",
+  "angular-npm-mssg-1": "Per integrare OpenSign nel tuo progetto Angular, esegui semplicemente il seguente comando:",
+  "quota-mail-info-head": "Limite mensile di email",
+  "quota-mail-info": "Per mantenere la qualità del servizio e prevenire lo spam, OpenSign consente fino a 15 email al mese con il piano gratuito. Esegui l'upgrade ora per l'invio illimitato di email.",
+  "quota-mail-reset": "I tuoi crediti email per richieste di firma saranno ripristinati il",
+  "quota-mail": "Hai raggiunto il limite di 15 email di richiesta di firma per questo mese. Passa al piano superiore per continuare a inviare email direttamente.",
+  "quota-mail-tip": "Suggerimento: Puoi ancora firmare un numero <1>illimitato de documenti</1> condividendo manualmente il link della richiesta di firma.",
+  "quota-mail-head": "Quota Raggiunta",
+  "unauthorized-modal": "Non hai l'autorizzazione per eseguire questa azione, contatta {{adminEmail}}.",
+  "sent-this-month": "Inviati questo mese",
+  "available-seats": "Posti disponibili",
+  "buy-users": "Acquista più utenti",
+  "isenable-otp": "Abilita verifica OTP",
+  "isenable-otp-help": {
+    "p1": "Vuoi abilitare il processo di verifica tramite password monouso (OTP)?",
+    "p2": "Selezionando questa opzione, abiliterai la verifica OTP. Gli utenti riceveranno un codice di verifica via email che dovranno inserire per firmare il documento.",
+    "p3": "Selezionando questa opzione, disabiliterai la verifica OTP, consentendo agli utenti di firmare il documento direttamente senza passaggi aggiuntivi.",
+    "p4": "Scegli l'opzione che meglio si adatta alle tue esigenze di firma dei documenti."
+  },
+  "advanced-options": "Opzioni avanzate",
+  "hide-advanced-options": "Nascondi opzioni avanzate",
+  "download-files": "Scarica file",
+  "download-pdf": "Scarica Pdf",
+  "pdf-certificate": "Scarica Pdf + Certificato",
+  "document-logs": "Log del documento",
+  "server-down": "Impossibile connettersi al server {{appName}}. Se stai ospitando {{appName}} autonomamente, assicurati che tutti i passaggi nella documentazione siano stati seguiti correttamente. Se stai eseguendo {{appName}} localmente, potresti accedervi tramite un numero di porta errato.",
+  "admin-exists": "L'amministratore esiste già. Accedi all'applicazione utilizzando le credenziali di amministratore per gestire gli utenti.",
+  "enable-tour": "Abilita tour",
+  "istourenabled-help": {
+    "p1": "Questo abiliterà un tour guidato per i firmatari, fornendo istruzioni durante il processo di firma.",
+    "p2": "Questo disabiliterà il tour guidato, garantendo un'esperienza di firma più veloce e senza interruzioni.",
+    "p3": "Suggerimento: Se i tuoi firmatari sono familiari con {{appName}} e lo usano frequentemente, potresti voler disabilitare il tour guidato per un'esperienza più fluida. Scegli l'opzione che meglio si adatta alle tue esigenze di firma dei documenti."
+  },
+  "form-title-1": "Impostazioni del flusso del documento",
+  "form-title-2": "Impostazioni di sicurezza",
+  "public-tour-message": "Il modello deve essere pubblico prima di poter generare un link condivisibile.",
+  "add-user-template": "Devi aggiungere un ruolo prima di poter aggiungere i campi per esso.",
+  "pdf-uncompatible": "Questo PDF non è compatibile, contatta {{appName}}",
+  "text-field-tour": "I campi di tipo 'Testo' devono essere compilati in anticipo prima che il documento venga inviato. Se hai bisogno che i firmatari forniscano un input, usa invece il campo 'Testo di input'.",
+  "attach-signer-tour": "Devi allegare un firmatario a ogni ruolo. Puoi farlo cliccando su questa icona. Una volta selezionato un firmatario, sarà associato a tutti i campi associati a quel ruolo che appariranno dello stesso colore.",
+  "allowed-signature-types": "Tipi di firma consentiti",
+  "at-least-one-signature-type": "Almeno un tipo di firma deve essere abilitato.",
+  "expect-default-one-more-signature-type": "Abilita un tipo di firma aggiuntivo oltre al tipo predefinita.",
+  "add-signer-note": "Nota - Questo contatto verrà aggiunto alla tua lista di contatti",
+  "allowed-signature-types-help": {
+    "p1": "Questa preferenza di firma controlla le opzioni di firma disponibili per i tuoi firmatari. Solo i tipi di firma che selezioni appariranno nel widget di firma quando un documento viene firmato. Ad esempio, se scegli solo l'opzione 'Disegna' nelle preferenze, il tuo firmatario vedrà solo l'opzione 'Disegna' nel widget di firma, mentre gli altri tre tipi non saranno disponibili.",
+    "l1": "Crea una firma scritta a mano direttamente sullo schermo utilizzando il dito o una penna digitale.",
+    "l2": "Inserisci il tuo nome e scegli tra vari stili di font per creare una firma.",
+    "l3": "Carica una versione digitale esistente della tua firma.",
+    "l4": "Usa uno stile di firma preimpostato salvato sotto 'La mia firma' nelle tue impostazioni."
+  },
+  "notify-on-signatures": "Notifica sulle firme",
+  "notify-on-signatures-help": {
+    "p1": "Il creatore del documento riceverà una notifica via email ogni volta che un firmatario firma il documento.",
+    "note": "Nota: L'email di notifica non verrà inviata per l'ultimo firmatario, poiché il creatore del documento riceverà invece un'email di completamento."
+  },
+  "expiry-date": "Data di scadenza",
+  "expiry-date-updated": "La data di scadenza è stata estesa con successo a {{newexpirydate}}",
+  "expiry-date-error": "Fornisci una nuova data di scadenza successiva a quella attuale",
+  "duplicate-template-alert": "Sei sicuro di voler creare un duplicato di questo modello?",
+  "duplicate-template-created": "Modello duplicato creato con successo.",
+  "delete-page": "Elimina pagina",
+  "merge-pdf": "Unisci PDF",
+  "add-pages": "Aggiungi pagine",
+  "delete-alert": "Non è possibile eliminare una singola pagina",
+  "delete-alert-2": "Sei sicuro di voler eliminare questa pagina?",
+  "delete-note": "Nota: Una volta eliminata questa pagina, non potrai annullare l'operazione.",
+  "Rotation-alert": "Ruota pagina",
+  "bulk-import": "Importazione massiva",
+  "contacts-file": "File contatti (xlsx, csv)",
+  "100-records-only": "Attualmente puoi importare solo fino a 100 record.",
+  "csv-excel-support-only": "Carica un file nei seguenti formati: CSV, XLSX o XLS.",
+  "contact-imported": "{{imported}} contatti importati. {{failed}} contatti non sono stati importati.",
+  "invalid-data": "Dati non validi",
+  "delete-folder-alert": "Sei sicuro di voler eliminare questa cartella?",
+  "delete-folder-alert-1": "Impossibile eliminare: la cartella deve essere vuota.",
+  "defaultSign-alert": "I widget {{widgetsType}} non sono disponibili per la firma automatica.",
+  "embed-heading": "Incorpora modelli {{appName}}",
+  "public-template-edit-title": "Modifica Modello Pubblico",
+  "public-template-edit-mssg": "Non puoi modificare direttamente un modello pubblico. Per apportare modifiche, il modello sarà impostato come privato e dovrai renderlo pubblico di nuovo successivamente. Vuoi continuare?",
+  "agree-p1": "Confermo di aver letto e compreso il",
+  "agree-p2": "Divulgazione sulle registrazioni e firme elettroniche",
+  "agree-p3": "e acconsento all'uso di registrazioni e firme elettroniche.",
+  "agrre-button": "Accetta e Continua",
+  "term-cond-title": "Termini e Condizioni",
+  "term-cond-h": "DIVULGAZIONE SULLE REGISTRAZIONI E FIRME ELETTRONICHE",
+  "term-cond-p1": "Questa Divulgazione sulle Registrazioni e Firme Elettroniche ('Divulgazione') è un accordo tra il Creatore del Documento ('Mittente') e il Firmatario ('Tu'), facilitato tramite la piattaforma {{appName}} (Piattaforma). Firmando documenti tramite {{appName}}, accetti i termini descritti in questa Divulgazione. Ti preghiamo di leggerla attentamente prima di procedere.",
+  "term-cond-h1": "1. Scopo e ambito",
+  "term-cond-p2": "Questa Divulgazione regola l'uso di registrazioni e firme elettroniche per i documenti inviati dal Mittente e firmati da Te tramite la piattaforma {{appName}}. Accettando, riconosci che:",
+  "term-cond-p3": "Riceverai e firmerai documenti elettronicamente tramite {{appName}}.",
+  "term-cond-p4": "La tua firma elettronica è legalmente vincolante ed equivalente a una firma manoscritta.",
+  "term-cond-h2": "2. Consenso all'uso di registrazioni e firme elettroniche",
+  "term-cond-p5": "Accettando questa Divulgazione:",
+  "term-cond-p6": "Consenti di effettuare transazioni elettroniche con il Mittente utilizzando {{appName}} e comprendi che questo consenso è valido fino a revoca.",
+  "term-cond-p7": "Accetti di rivedere, firmare e restituire documenti elettronicamente utilizzando {{appName}}.",
+  "term-cond-p8": "Questo consenso si applica solo ai documenti specifici forniti dal Mittente.",
+  "term-cond-h3": "3. Diritto di revoca del consenso",
+  "term-cond-p9": "Hai il diritto di ritirare il tuo consenso all'uso di registrazioni elettroniche e firme contattando direttamente il mittente tramite le informazioni di contatto fornite nella loro comunicazione.",
+  "term-cond-p10": "Contattando il mittente direttamente utilizzando le informazioni di contatto fornite nella loro comunicazione.",
+  "term-cond-p11": "Notificando il mittente prima di completare il processo di firma.",
+  "term-cond-h4": "4. Requisiti hardware e software",
+  "term-cond-p12": "Per firmare documenti utilizzando {{appName}}, devi avere:",
+  "term-cond-p13": "Un dispositivo con accesso a Internet.",
+  "term-cond-p14": "Un browser web compatibile con JavaScript abilitato.",
+  "term-cond-p15": "Un account email per ricevere notifiche e documenti firmati.",
+  "term-cond-p16": "Se questi requisiti cambiano, il mittente o {{appName}} ti notificheranno gli aggiornamenti.",
+  "term-cond-h5": "5. Conservazione dei documenti e richiesta di copie cartacee",
+  "term-cond-p17": "Sei responsabile di assicurarti di poter accedere e conservare il documento(i) firmato(i) elettronicamente. {{appName}} fornisce strumenti per scaricare o stampare il documento firmato subito dopo che il processo di firma è completo.",
+  "term-cond-p18": "Se preferisci una copia cartacea di qualsiasi documento firmato elettronicamente, puoi richiederla direttamente al mittente. Il mittente può addebitare una tariffa ragionevole per fornire copie cartacee, salvo quanto vietato dalla legge applicabile.",
+  "term-cond-h6": "6. Riconoscimento e Accordo",
+  "term-cond-p19": "Procedendo, confermi che:",
+  "term-cond-p20": "Confermi di poter accedere e rivedere i documenti elettronici come descritto in questa divulgazione.",
+  "term-cond-p21": "Accetti di utilizzare registrazioni elettroniche e firme per le transazioni specificate con il mittente.",
+  "term-cond-p22": "Comprendi che {{appName}} è una piattaforma che facilita la transazione e non è parte dell'accordo.",
+  "term-cond-h7": "7. Effetto Legale",
+  "term-cond-p23": "La tua firma elettronica facilitata tramite {{appName}}:",
+  "term-cond-p24": "Rispetta le leggi applicabili sulle firme elettroniche, inclusa, ma non limitata alla Legge E-SIGN negli Stati Uniti, al Regolamento eIDAS dell'UE e alla Legge sull'Information Technology in India.",
+  "term-cond-p25": "È legalmente vincolante tra te e il mittente per il/i documento(i) firmato(i).",
+  "term-cond-h8": "8. Ruolo della piattaforma e limitazione di responsabilità",
+  "term-cond-p26": "{{appName}} funge da piattaforma per facilitare le transazioni elettroniche. Non è responsabile del contenuto, della validità o dell'applicabilità dei documenti inviati dal mittente. Eventuali controversie o problemi relativi al documento o alla sua firma devono essere risolti direttamente tra te e il mittente.",
+  "term-cond-h9": "9. Risoluzione dell'accordo",
+  "term-cond-p27": "Il tuo consenso si applica solo alla transazione corrente, salvo diverso accordo da parte del mittente. {{appName}} si riserva il diritto di terminare l'accesso alla sua piattaforma per violazioni dei suoi Termini di servizio o delle politiche.",
+  "term-cond-p28": "Selezionando 'Accetto', confermi di aver compreso e accettato i termini di questa divulgazione delle registrazioni elettroniche e delle firme e acconsenti a firmare elettronicamente il/i documento(i) fornito(i) dal mittente tramite {{appName}}.",
+  "term-cond-p29": "Se hai domande su questa divulgazione, contatta direttamente il mittente. Per supporto tecnico con {{appName}}, visita ",
+  "term-cond-p30": " o invia una email a",
+  "js-snippet-msg": "Per integrare i modelli {{appName}} nel tuo sito web HTML o nelle tue pagine di destinazione, puoi usare il codice qui sotto:",
+  "js-snippet-msg-1": "Puoi ottenere il TemplateId dalla",
+  "js-snippet-msg-2": "pagina di gestione modelli",
+  "js-snippet-msg-3": "pagina.",
+  "agrrement-alert": "Per procedere, devi acconsentire alla divulgazione delle registrazioni elettroniche e delle firme.",
+  "webhook-already-exists": "L'URL esiste già! Prova con uno diverso.",
+  "webhook-must-be-secure": "L'URL del webhook deve essere sicuro e utilizzare https://",
+  "provide-test-token": "Si prega di generare il token di test API",
+  "invalid-redirect-url": "Si prega di fornire un URL di reindirizzamento valido.",
+  "auto-sign-mssg": "Firma automatica per tutti",
+  "already-exist-signer": "Il firmatario selezionato è già presente nell'elenco dei destinatari",
+  "change-signer": "Cambia firmatario",
+  "signyour-self-button": "Usa questa opzione per firmare il documento da solo senza aggiungere altri.",
+  "requestsign-button": "Usa questa opzione per richiedere firme da altri e da te stesso insieme.",
+  "signyour-self-description": "Usa questo modulo per firmare il documento da solo senza aggiungere altri.",
+  "requestsign-description": "Usa questo modulo per richiedere firme da altri e da te stesso insieme.",
+  "template-form-description": "Usa questo modulo per creare modelli riutilizzabili per i tuoi documenti.",
+  "allow-modify": "Consenti Modifiche",
+  "allow-modify-help": {
+    "p1": "Vuoi consentire modifiche al documento durante il processo di firma?",
+    "p2": "Selezionando questa opzione, i firmatari possono aggiungere elementi aggiuntivi, come firme, iniziali, timbri o testo, sopra i widget esistenti.",
+    "p3": "Selezionando questa opzione, i firmatari non potranno apportare alcuna aggiunta al documento durante il processo di firma."
+  },
+  "signature-setting": "Impostazioni Firma",
+  "activation-key": "Chiave di attivazione",
+  "paid-selfhost-help": "Si prega di contattare {{appName}} per ulteriori informazioni all'indirizzo ",
+  "remaining-credits-selfhost-help": "Utilizza i crediti premium per la firma di documenti tramite API, l'invio in massa e l'integrazione di {{appName}} sul tuo sito web. Hai {{allowedcredits}} crediti inclusi e {{addoncredits}} crediti aggiuntivi acquistati rimanenti.",
+  "signature-type": "La tua firma",
+  "initial-type": "Le tue iniziali",
+  "redirect-url": "URL di reindirizzamento",
+  "bulk-send": "Invio in blocco",
+  "select-timezone": "Fuso orario",
+  "current-time": "Ora corrente",
+  "email-help": "Non ti è permesso cambiare l'indirizzo email per motivi di sicurezza. Ti preghiamo di creare un altro account gratuito utilizzando il nuovo indirizzo email.",
+  "doc-sent": "Documento inviato con successo.",
+  "no-signer": "Rimuovi",
+  "and": "e",
+  "make-public": "Rendere pubblico",
+  "general": "Generale",
+  "request-email": "Email di richiesta",
+  "completion-email": "Email di completamento",
+  "variables-use": "Variabili da utilizzare",
+  "send-to-sign": "ha richiesto la tua firma",
+  "use-template": "Usa modello",
+  "contact-already-exists": "Il contatto esiste già.",
+  "docx-error": "Stiamo riscontrando alcuni problemi con l'elaborazione dei file DOCX. Per favore, carica il file PDF",
+  "docx-error-contact": "o contattaci a support@opensignlabs.com",
+  "agreement-note": "Nota: Accettare questo non significa che stai firmando immediatamente il documento. Questo ti consente solo di esaminare il documento elettronicamente. Avrai l'opportunità di leggerlo per intero e decidere successivamente se firmarlo.",
+  "draft-template-info-p1": "Per rendere il tuo modello pubblico, deve contenere un solo ruolo oppure, se include più ruoli, tutti i ruoli aggiuntivi devono essere già assegnati ai firmatari. Il ruolo pubblico non assegnato deve rimanere vuoto e deve essere posizionato per primo.",
+  "visit-below-link": "Visita il link qui sotto per saperne di più -",
+  "storage-help": "Abilitare BYOC ti consente di collegare il tuo archivio S3 in modo che i tuoi file rimangano completamente sotto il tuo controllo, senza copie esterne conservate. Se l'autonomia dei dati è importante per te, considera l'upgrade a Teams per sbloccare questa funzionalità.",
+  "daily-quota-reached": "Hai raggiunto la tua quota giornaliera. Per assistenza, contatta quotas@opensignlabs.com.",
+  "enabled-signature-type": "Tipi di firma abilitati",
+  "enabled-signature-type-help": "L'impostazione 'Tipi di firma abilitati' determina quali opzioni di firma sono disponibili nella tua organizzazione. Ad esempio, se disabiliti l'opzione 'Disegna', i membri della tua organizzazione non la vedranno nel widget della firma, mentre le altre tre opzioni resteranno accessibili.",
+  "indexing-public-profile": "Consenti l'indicizzazione del profilo pubblico dai motori di ricerca",
+  "user-created-successfully": "Utente creato con successo.",
+  "only-15-reminder-allowed": "Puoi impostare fino a 15 promemoria automatici. Ad esempio, se 'TimeToComplete' è di 15 giorni e 'RemindOnceInEvery' è di 1 giorno, raggiungerai il limite massimo di 15 promemoria. Regola le tue impostazioni di conseguenza.",
+  "rate-your-experience": "Com'è stata la sua esperienza con {{appName}}?",
+  "thanks-for-feedback": "Grazie per il tuo feedback 🙏",
+  "share-your-feedback": "Condividi il tuo feedback",
+  "share-your-review": "Condividi la tua recensione",
+  "date-format": "Formato data",
+  "document-deleted": "Il documento è stato eliminato o non hai accesso. Si prega di contattare il mittente.",
+  "save-as-template-?": "Sei sicuro di voler salvare questo documento come modello?",
+  "go-to-manage-templates": "Vai a 'Gestisci modelli'",
+  "template-created": "Modello creato",
+  "how-would-you-like-to-proceed?": "Come desideri procedere?",
+  "failed-to-load-refresh-page": "Impossibile caricare il documento. Prova ad aggiornare questa pagina.",
+  "document-has-been-signed": "Il documento è stato firmato con successo!",
+  "document-has-been-signed-by-you": "Il documento è stato firmato con successo da lei!",
+  "participant-completed-signing": "Tutti i partecipanti hanno completato il processo di firma.",
+  "you-will-receive-email-shortly": "✅ È tutto! Riceverà a breve un'e-mail di conferma.",
+  "please-provide-templateid": "Si prega di fornire templateid",
+  "this-template-is-not-public": "Questo template non è pubblico",
+  "invalid-templateid": "templateid non valido",
+  "contact-billing-at-opensign": " Per aggiungere altri posti, contattare OpenSign™ all'indirizzo <1>billing@opensignlabs.com</1> per assistenza.",
+  "title-length-alert": "Il titolo può contenere al massimo 250 caratteri.",
+  "note-length-alert": "La nota può contenere al massimo 200 caratteri.",
+  "description-length-alert": " La descrizione può contenere al massimo 500 caratteri.",
+  "fix-&-resend-document": "Correggi e reinvia il documento",
+  "do-you-want-recreate-document?": "Questo creerà una bozza da questo documento con tutti i campi intatti. Sei sicuro di voler ricreare questo documento?",  
+  "start-editing": "Inizia a modificare",
+  "unsaved-changes-discard-them?": "Hai modifiche non salvate. Vuoi scartarle?",
+  "yes-discard": "Sì, scarta",
+  "LTV-enabled-signatures": "Firme con LTV abilitato",
+  "BETA": "BETA",
+  "two-factor-authentication": "Autenticazione a due fattori",
+  "2fa-help-text": "L'autenticazione a due fattori aggiunge un ulteriore livello di sicurezza al tuo account richiedendo più di una semplice password per accedere.",
+  "2fa-help-bullet1": "Aumenta la sicurezza richiedendo sia la password che un codice di verifica.",
+  "2fa-help-bullet2": "Il codice di verifica viene generato da un'app di autenticazione sul tuo dispositivo.",
+  "2fa-help-bullet3": "Protegge il tuo account anche se la password è stata compromessa.",
+  "setup-2fa": "Configura 2FA",
+  "setup-2fa-again": "Configura nuovamente 2FA",
+  "2fa-setup-intro": "Proteggi il tuo account con l'autenticazione a due fattori. Quando è attiva, dovrai inserire un codice dall'app di autenticazione ogni volta che accedi.",
+  "scan-qr-code": "Scansiona il codice QR",
+  "scan-qr-instructions": "Usa un'app di autenticazione come Google Authenticator, Microsoft Authenticator o Authy per scansionare questo codice QR.",
+  "manual-setup-instructions": "Non riesci a scansionare il codice? Puoi configurare manualmente l'app usando questa chiave segreta:",
+  "secret-key": "Chiave segreta",
+  "copied-to-clipboard": "Copiato negli appunti",
+  "copy-to-clipboard": "Copia negli appunti",
+  "recovery-codes": "Codici di recupero",
+  "recovery-codes-instructions": "Salva questi codici di recupero in un luogo sicuro. Se perdi l'accesso all'app di autenticazione, puoi usarne uno per accedere.",
+  "download-recovery-codes": "Scarica i codici di recupero",
+  "verification-code": "Codice di verifica",
+  "enter-code-from-authenticator-app": "Inserisci il codice a 6 cifre dalla tua app di autenticazione",
+  "verification-code-required": "È richiesto il codice di verifica",
+  "verification-code-invalid": "Codice di verifica non valido. Riprova.",
+  "2fa-enabled": "2FA abilitato",
+  "2fa-enabled-successfully": "Autenticazione a due fattori attivata con successo",
+  "2fa-setup-complete": "Configurazione completata!",
+  "2fa-setup-complete-instructions": "Il tuo account è ora protetto da autenticazione a due fattori. Dovrai inserire un codice ogni volta che accedi.",
+  "two-factor-verification": "Verifica a due fattori",
+  "enter-verification-code-instructions": "Inserisci il codice di verifica a 6 cifre dalla tua app di autenticazione per continuare.",
+  "recovery-code": "Codice di recupero",
+  "enter-recovery-code-help": "Inserisci uno dei tuoi codici di recupero",
+  "recovery-code-required": "È richiesto il codice di recupero",
+  "use-verification-code-instead": "Usa il codice di verifica invece",
+  "use-recovery-code-instead": "Usa il codice di recupero invece",
+  "regenerate-2fa-remove-existing": "Sei sicuro di voler rigenerare l'autenticazione a due fattori? Questa azione rimuoverà le impostazioni di autenticazione esistenti.",
+  "use-passkey": "Accedi con passkey",
+  "security-section": "Sicurezza",
+  "passkey-authentication": "Autenticazione passkey",
+  "passkey-not-supported": "Il tuo browser o dispositivo non supporta l'autenticazione passkey",
+  "passkey-description": "Le passkey offrono un’alternativa più sicura e resistente al phishing rispetto alle password. Puoi usare l’impronta digitale, il riconoscimento facciale o il PIN del dispositivo per accedere in sicurezza.",
+  "passkey-tooltip": "Le passkey sono un’alternativa più semplice e sicura alle password. Usano dati biometrici come impronte digitali o riconoscimento facciale già presenti sul tuo dispositivo.",
+  "security-section-help": "Gestisci le opzioni di sicurezza, incluse passkey e metodi di autenticazione, per proteggere il tuo account.",
+  "passkey-register": "Registra passkey",
+  "passkey-register-another": "Registra un'altra passkey",
+  "passkey-registered": "Passkey registrata",
+  "passkey-registering": "Registrazione passkey in corso...",
+  "passkey-registered-success": "Passkey registrata con successo!",
+  "passkey-registration-failed": "Registrazione della passkey non riuscita",
+  "passkey-auth-failed": "Autenticazione passkey fallita",
+  "passkey-missing-user-info": "Informazioni utente richieste",
+  "passkeys-list": "Le tue passkey",
+  "default-passkey": "La tua passkey",
+  "passkey-rename": "Rinomina",
+  "passkey-delete": "Elimina",
+  "passkey-rename-title": "Rinomina passkey",
+  "passkey-delete-title": "Elimina passkey",
+  "passkey-delete-confirm": "Sei sicuro di voler eliminare la passkey \"{{name}}\"?",
+  "passkey-name": "Nome della passkey",
+  "passkey-name-placeholder": "Inserisci un nome descrittivo per questa passkey",
+  "passkey-renamed-success": "Passkey rinominata con successo",
+  "passkey-deleted-success": "Passkey eliminata con successo",
+  "passkey-rename-failed": "Impossibile rinominare la passkey",
+  "passkey-delete-failed": "Impossibile eliminare la passkey",
+  "processing": "Elaborazione...",
+  "today": "Oggi",
+  "yesterday": "Ieri",
+  "days-ago": "{{days}} giorni fa",
+  "verify-with-passkey": "Verifica con passkey",
+  "verify-with-otp": "Verifica con OTP",
+  "verify-identity": "Verifica identità",
+  "verify-account": "Verifica la tua identità",
+  "verification": "Verifica",
+  "passkey-verification-failed": "Verifica con passkey fallita",
+  "security-auth-help": {
+    "p1": "Gestisci le impostazioni di sicurezza del tuo account per proteggere i tuoi dati. OpenSign supporta metodi di autenticazione avanzati per migliorare la protezione dell’account.",
+    "2fa-auth-help": "Aggiungi un ulteriore livello di sicurezza abilitando 2FA. Ti verrà richiesto di inserire un codice di verifica da un'app di autenticazione dopo la password.",
+    "passkey-auth-help": "Usa le passkey per accedere senza password con verifica biometrica o basata sul dispositivo, garantendo sicurezza elevata e praticità."
+  },
+  "signer-already-present": "Firmatario già presente",
+  "kiosk-sign": "Firma su chiosco",
+  "dont-have-access-to-template": "Il template è stato eliminato o non hai accesso. Si prega di contattare il mittente.",
+  "kiosk-info": "La Modalità Kiosk consente di raccogliere firme in presenza in modo rapido ed efficiente. Ideale per fiere, eventi o situazioni con firmatari fisicamente presenti. ",
+  "learn-more": "Scopri di più"
+}
@@ -0,0 +1 @@
+import "@testing-library/jest-dom";
@@ -1,7 +1,6 @@
 import React, { useState, useEffect, lazy } from "react";
-import { Routes, Route, BrowserRouter } from "react-router-dom";
+import { Routes, Route, BrowserRouter } from "react-router";
 import { pdfjs } from "react-pdf";
-import Login from "./pages/Login";
 import Form from "./pages/Form";
 import Report from "./pages/Report";
 import Dashboard from "./pages/Dashboard";
@@ -15,26 +14,22 @@ 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";
-import SSOVerify from "./pages/SSOVerify";
 import Loader from "./primitives/Loader";
-import TeamList from "./pages/TeamList";
 import UserList from "./pages/UserList";
 import { serverUrl_fn } from "./constant/appinfo";
+import DocSuccessPage from "./pages/DocSuccessPage";
+import ValidateSession from "./primitives/ValidateSession";
 const DebugPdf = lazy(() => import("./pages/DebugPdf"));
 const ForgetPassword = lazy(() => import("./pages/ForgetPassword"));
 const GuestLogin = lazy(() => import("./pages/GuestLogin"));
-const Pgsignup = lazy(() => import("./pages/Pgsignup"));
-const Subscriptions = lazy(() => import("./pages/PlanSubscriptions"));
 const ChangePassword = lazy(() => import("./pages/ChangePassword"));
 const UserProfile = lazy(() => import("./pages/UserProfile"));
-const Signup = lazy(() => import("./pages/Signup"));
 const Opensigndrive = lazy(() => import("./pages/Opensigndrive"));
 const ManageSign = lazy(() => import("./pages/Managesign"));
-const GenerateToken = lazy(() => import("./pages/GenerateToken"));
-const Webhook = lazy(() => import("./pages/Webhook"));
 const AddAdmin = lazy(() => import("./pages/AddAdmin"));
 const UpdateExistUserAdmin = lazy(() => import("./pages/UpdateExistUserAdmin"));
+const Preferences = lazy(() => import("./pages/Preferences"));
+const Login = lazy(() => import("./pages/Login"));

 pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.mjs`;
 const AppLoader = () => {
@@ -72,12 +67,7 @@ function App() {
        <BrowserRouter>
          <Routes>
            <Route element={<ValidateRoute />}>
-              <Route exact path="/" element={<Login />} />
-              {isEnableSubscription && (
-                <Route path="/signup" element={<LazyPage Page={Signup} />} />
-              )}
-              {!isEnableSubscription && (
-                <>
+              <Route exact path="/" element={<LazyPage Page={Login} />} />
                  <Route
                    path="/addadmin"
                    element={<LazyPage Page={AddAdmin} />}
@@ -86,8 +76,6 @@ function App() {
                    path="/upgrade-2.1"
                    element={<LazyPage Page={UpdateExistUserAdmin} />}
                  />
-                </>
-              )}
            </Route>
            <Route element={<Validate />}>
              <Route
@@ -122,19 +110,13 @@ function App() {
              path="/forgetpassword"
              element={<LazyPage Page={ForgetPassword} />}
            />
-            {isEnableSubscription && (
-              <>
-                <Route
-                  path="/pgsignup"
-                  element={<LazyPage Page={Pgsignup} />}
-                />
-                <Route
-                  path="/subscription"
-                  element={<LazyPage Page={Subscriptions} />}
-                />
-              </>
-            )}
-            <Route element={<HomeLayout />}>
+            <Route
+              element={
+                <ValidateSession>
+                  <HomeLayout />
+                </ValidateSession>
+              }
+            >
              <Route
                path="/changepassword"
                element={<LazyPage Page={ChangePassword} />}
@@ -147,7 +129,7 @@ function App() {
                element={<LazyPage Page={UserProfile} />}
              />
              <Route
-                path="/opensigndrive"
+                path="/drive"
                element={<LazyPage Page={Opensigndrive} />}
              />
              <Route
@@ -174,7 +156,6 @@ function App() {
                path="/pdfRequestFiles/:docId"
                element={<PdfRequestFiles />}
              />
-
              {/* recipient signature route with no rowlevel data using docId from url */}
              <Route
                path="/recipientSignPdf/:docId/:contactBookId"
@@ -184,22 +165,13 @@ function App() {
                path="/recipientSignPdf/:docId"
                element={<PdfRequestFiles />}
              />
-              {isEnableSubscription && (
-                <>
-                  <Route path="/teams" element={<TeamList />} />
-                  <Route
-                    path="/generatetoken"
-                    element={<LazyPage Page={GenerateToken} />}
-                  />
-                  <Route
-                    path="/webhook"
-                    element={<LazyPage Page={Webhook} />}
-                  />
-                </>
-              )}
              <Route path="/users" element={<UserList />} />
+              <Route
+                path="/preferences"
+                element={<LazyPage Page={Preferences} />}
+              />
            </Route>
-            <Route path="/sso" element={<SSOVerify />} />
+            <Route path="/success" element={<DocSuccessPage />} />
            <Route path="*" element={<PageNotFound />} />
          </Routes>
        </BrowserRouter>
@@ -1,184 +1,184 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="691.365" height="586.346" viewBox="0 0 691.365 586.346">
-  <defs>
-    <linearGradient id="linear-gradient" x1="0.5" y1="1" x2="0.5" y2="-0.001" gradientUnits="objectBoundingBox">
-      <stop offset="0" stop-color="gray" stop-opacity="0.251"/>
-      <stop offset="0.54" stop-color="gray" stop-opacity="0.122"/>
-      <stop offset="1" stop-color="gray" stop-opacity="0.102"/>
-    </linearGradient>
-  </defs>
-  <g id="Group_644" data-name="Group 644" transform="translate(-588.635 -80)">
-    <g id="Group_642" data-name="Group 642" transform="translate(22538.635 6999)">
-      <path id="Path_472" data-name="Path 472" d="M482.764,637.675c51.612-29.22,67.336-29.693,124.954-17.169,81.646,17.758,88.43-49.93,108.306-186.933,33.946-233.98-108.306-295.737-108.306-295.737s-94.6-8.1-150.536-38.963C377.726,55.027,286.9,49.443,207.046,86.542c-51.069,23.7-93.125,56.714-100.31,102.034-20.09,126.746,12.9,196.58-48.819,237.954S48.944,581.5,96.263,577.564c34.968-2.906,80.842,52.415,130.687,60.111,17.382,2.684,88.7-13.043,99.578,0C341.327,655.4,464.763,647.87,482.764,637.675Z" transform="translate(-21979.895 -6980.982)" fill="#00ddf1" opacity="0.1"/>
-      <g id="Group_641" data-name="Group 641" transform="translate(-21545.08 -6816.88)">
-        <rect id="Rectangle_263" data-name="Rectangle 263" width="217.867" height="15.073" transform="translate(0 39.052)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_264" data-name="Rectangle 264" width="217.867" height="15.073" transform="translate(0 104.137)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_265" data-name="Rectangle 265" width="217.867" height="15.073" transform="translate(0 171.964)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_266" data-name="Rectangle 266" width="13.702" height="39.052" transform="translate(19.183)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_267" data-name="Rectangle 267" width="13.702" height="2.74" transform="translate(19.183 6.166)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_268" data-name="Rectangle 268" width="13.702" height="2.74" transform="translate(19.183 27.405)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_269" data-name="Rectangle 269" width="13.702" height="39.052" transform="translate(39.737)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_270" data-name="Rectangle 270" width="13.702" height="2.74" transform="translate(39.737 6.166)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_271" data-name="Rectangle 271" width="13.702" height="2.74" transform="translate(39.737 27.405)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_272" data-name="Rectangle 272" width="13.702" height="39.052" transform="translate(60.29)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_273" data-name="Rectangle 273" width="13.702" height="2.74" transform="translate(60.29 6.166)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_274" data-name="Rectangle 274" width="13.702" height="2.74" transform="translate(60.29 27.405)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_275" data-name="Rectangle 275" width="13.702" height="39.052" transform="translate(80.844)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_276" data-name="Rectangle 276" width="13.702" height="2.74" transform="translate(80.844 6.166)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_277" data-name="Rectangle 277" width="13.702" height="2.74" transform="translate(80.844 27.405)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_278" data-name="Rectangle 278" width="13.702" height="39.052" transform="translate(101.397)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_279" data-name="Rectangle 279" width="13.702" height="2.74" transform="translate(101.397 6.166)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_280" data-name="Rectangle 280" width="13.702" height="2.74" transform="translate(101.397 27.405)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_281" data-name="Rectangle 281" width="13.702" height="39.052" transform="translate(121.95)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_282" data-name="Rectangle 282" width="13.702" height="2.74" transform="translate(121.95 6.166)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_283" data-name="Rectangle 283" width="13.702" height="2.74" transform="translate(121.95 27.405)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_284" data-name="Rectangle 284" width="13.702" height="39.052" transform="translate(142.504)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_285" data-name="Rectangle 285" width="13.702" height="2.74" transform="translate(142.504 6.166)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_286" data-name="Rectangle 286" width="13.702" height="2.74" transform="translate(142.504 27.405)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_287" data-name="Rectangle 287" width="13.702" height="39.052" transform="matrix(0.894, -0.448, 0.448, 0.894, 135.847, 138.025)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_288" data-name="Rectangle 288" width="13.702" height="2.74" transform="matrix(0.894, -0.448, 0.448, 0.894, 138.614, 143.541)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_289" data-name="Rectangle 289" width="13.702" height="2.74" transform="matrix(0.894, -0.448, 0.448, 0.894, 148.128, 162.529)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_290" data-name="Rectangle 290" width="13.702" height="39.052" transform="translate(19.183 65.771)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_291" data-name="Rectangle 291" width="13.702" height="2.74" transform="translate(19.183 71.937)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_292" data-name="Rectangle 292" width="13.702" height="2.74" transform="translate(19.183 93.176)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_293" data-name="Rectangle 293" width="13.702" height="39.052" transform="translate(39.737 65.771)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_294" data-name="Rectangle 294" width="13.702" height="2.74" transform="translate(39.737 71.937)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_295" data-name="Rectangle 295" width="13.702" height="2.74" transform="translate(39.737 93.176)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_296" data-name="Rectangle 296" width="13.702" height="39.052" transform="translate(60.29 65.771)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_297" data-name="Rectangle 297" width="13.702" height="2.74" transform="translate(60.29 71.937)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_298" data-name="Rectangle 298" width="13.702" height="2.74" transform="translate(60.29 93.176)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_299" data-name="Rectangle 299" width="13.702" height="39.052" transform="translate(145.93 65.771)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_300" data-name="Rectangle 300" width="13.702" height="2.74" transform="translate(145.93 71.937)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_301" data-name="Rectangle 301" width="13.702" height="2.74" transform="translate(145.93 93.176)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_302" data-name="Rectangle 302" width="13.702" height="39.052" transform="translate(166.483 65.771)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_303" data-name="Rectangle 303" width="13.702" height="2.74" transform="translate(166.483 71.937)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_304" data-name="Rectangle 304" width="13.702" height="2.74" transform="translate(166.483 93.176)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_305" data-name="Rectangle 305" width="13.702" height="39.052" transform="translate(187.036 65.771)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_306" data-name="Rectangle 306" width="13.702" height="2.74" transform="translate(187.036 71.937)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_307" data-name="Rectangle 307" width="13.702" height="2.74" transform="translate(187.036 93.176)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_308" data-name="Rectangle 308" width="13.702" height="39.052" transform="translate(19.183 132.912)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_309" data-name="Rectangle 309" width="13.702" height="2.74" transform="translate(19.183 139.078)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_310" data-name="Rectangle 310" width="13.702" height="2.74" transform="translate(19.183 160.317)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_311" data-name="Rectangle 311" width="13.702" height="39.052" transform="translate(39.737 132.912)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_312" data-name="Rectangle 312" width="13.702" height="2.74" transform="translate(39.737 139.078)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_313" data-name="Rectangle 313" width="13.702" height="2.74" transform="translate(39.737 160.317)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_314" data-name="Rectangle 314" width="13.702" height="39.052" transform="translate(60.29 132.912)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_315" data-name="Rectangle 315" width="13.702" height="2.74" transform="translate(60.29 139.078)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_316" data-name="Rectangle 316" width="13.702" height="2.74" transform="translate(60.29 160.317)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_317" data-name="Rectangle 317" width="13.702" height="39.052" transform="translate(80.844 132.912)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_318" data-name="Rectangle 318" width="13.702" height="2.74" transform="translate(80.844 139.078)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_319" data-name="Rectangle 319" width="13.702" height="2.74" transform="translate(80.844 160.317)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_320" data-name="Rectangle 320" width="13.702" height="39.052" transform="translate(101.397 132.912)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_321" data-name="Rectangle 321" width="13.702" height="2.74" transform="translate(101.397 139.078)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_322" data-name="Rectangle 322" width="13.702" height="2.74" transform="translate(101.397 160.317)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_323" data-name="Rectangle 323" width="13.702" height="39.052" transform="translate(121.95 132.912)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_324" data-name="Rectangle 324" width="13.702" height="2.74" transform="translate(121.95 139.078)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_325" data-name="Rectangle 325" width="13.702" height="2.74" transform="translate(121.95 160.317)" fill="#00ddf1" opacity="0.1"/>
-        <path id="Path_473" data-name="Path 473" d="M797.862,159.09v35.571h-13.7V156.48Q791.039,157.693,797.862,159.09Z" transform="translate(-621.103 -155.61)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_326" data-name="Rectangle 326" width="13.702" height="2.74" transform="translate(163.057 6.166)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_327" data-name="Rectangle 327" width="13.702" height="2.74" transform="translate(163.057 27.405)" fill="#00ddf1" opacity="0.1"/>
-        <path id="Path_474" data-name="Path 474" d="M827.862,165.719v30.83h-13.7V162.43c1.781.391,3.556.8,5.33,1.22Q823.7,164.636,827.862,165.719Z" transform="translate(-630.549 -157.483)" fill="#00ddf1" opacity="0.1"/>
-        <path id="Path_475" data-name="Path 475" d="M827.862,166.285v.685h-13.7v-2.74h5.33Q823.7,165.2,827.862,166.285Z" transform="translate(-630.549 -158.05)" fill="#00ddf1" opacity="0.1"/>
-        <rect id="Rectangle_328" data-name="Rectangle 328" width="13.702" height="2.74" transform="translate(183.611 27.405)" fill="#00ddf1" opacity="0.1"/>
-        <path id="Path_476" data-name="Path 476" d="M691.358,287.276s-4.152-1.411-6.166,2.254a6.68,6.68,0,0,0,.089,6.426,9.4,9.4,0,0,0,9.146,5.179c4.35-.233,5.8-3.549,6.166-6.639a6.851,6.851,0,0,0-9.057-7.3Z" transform="translate(-589.693 -196.649)" fill="#00ddf1"/>
-        <path id="Path_477" data-name="Path 477" d="M686.2,296.239a6.68,6.68,0,0,1-.089-6.426c2-3.659,6.166-2.254,6.166-2.254l.212-.075a6.762,6.762,0,0,1,4.885.11,6.762,6.762,0,0,0-5.762-.548l-.212.075s-4.152-1.411-6.166,2.254a6.68,6.68,0,0,0,.089,6.426,9.982,9.982,0,0,0,4.7,4.446A10.277,10.277,0,0,1,686.2,296.239Z" transform="translate(-589.706 -196.595)" fill="#00ddf1" opacity="0.1"/>
-        <path id="Path_478" data-name="Path 478" d="M691.42,290.06s1.542,1.213,5.282,0" transform="translate(-591.9 -197.672)" fill="#00ddf1" opacity="0.2"/>
-        <path id="Path_479" data-name="Path 479" d="M690.93,277.21s2.638,7.153,2.418,9.023l2.09-.219s-3.521-6.269-2.638-8.8Z" transform="translate(-591.746 -193.626)" fill="#00ddf1"/>
-        <path id="Path_480" data-name="Path 480" d="M690.93,277.21s2.638,7.153,2.418,9.023l2.09-.219s-3.521-6.269-2.638-8.8Z" transform="translate(-591.746 -193.626)" fill="#00ddf1" opacity="0.2"/>
-        <path id="Path_481" data-name="Path 481" d="M702.92,277.6s-4.159-2.124-6.015-.37-2.144,6.241-2.144,6.241S701.536,284.391,702.92,277.6Z" transform="translate(-592.952 -193.414)" fill="#00ddf1"/>
-        <path id="Path_482" data-name="Path 482" d="M702.92,277.6s-4.159-2.124-6.015-.37-2.144,6.241-2.144,6.241S701.536,284.391,702.92,277.6Z" transform="translate(-592.952 -193.414)" fill="#00ddf1" opacity="0.1"/>
-        <path id="Path_483" data-name="Path 483" d="M694.75,283.958s1.089-5.207,8.16-5.878" transform="translate(-592.949 -193.9)" fill="#00ddf1"/>
-        <path id="Path_484" data-name="Path 484" d="M819.358,386.276s-4.152-1.411-6.166,2.254a6.68,6.68,0,0,0,.089,6.426,9.4,9.4,0,0,0,9.146,5.18c4.35-.233,5.8-3.549,6.166-6.639a6.851,6.851,0,0,0-9.057-7.3Z" transform="translate(-629.999 -227.823)" fill="#00ddf1"/>
-        <path id="Path_485" data-name="Path 485" d="M814.2,395.239a6.68,6.68,0,0,1-.089-6.426c2-3.659,6.166-2.254,6.166-2.254l.212-.075a6.762,6.762,0,0,1,4.885.11,6.762,6.762,0,0,0-5.762-.548l-.212.075s-4.152-1.411-6.166,2.254a6.68,6.68,0,0,0,.089,6.426,9.982,9.982,0,0,0,4.7,4.446A10.276,10.276,0,0,1,814.2,395.239Z" transform="translate(-630.011 -227.769)" fill="#00ddf1" opacity="0.1"/>
-        <path id="Path_486" data-name="Path 486" d="M819.42,389.06s1.542,1.213,5.282,0" transform="translate(-632.206 -228.846)" fill="#00ddf1" opacity="0.2"/>
-        <path id="Path_487" data-name="Path 487" d="M818.93,376.21s2.638,7.153,2.419,9.023l2.09-.219s-3.522-6.269-2.638-8.8Z" transform="translate(-632.051 -224.799)" fill="#00ddf1"/>
-        <path id="Path_488" data-name="Path 488" d="M818.93,376.21s2.638,7.153,2.419,9.023l2.09-.219s-3.522-6.269-2.638-8.8Z" transform="translate(-632.051 -224.799)" fill="#00ddf1" opacity="0.2"/>
-        <path id="Path_489" data-name="Path 489" d="M830.92,376.6s-4.159-2.124-6.015-.37-2.144,6.241-2.144,6.241S829.536,383.391,830.92,376.6Z" transform="translate(-633.257 -224.588)" fill="#00ddf1"/>
-        <path id="Path_490" data-name="Path 490" d="M830.92,376.6s-4.159-2.124-6.015-.37-2.144,6.241-2.144,6.241S829.536,383.391,830.92,376.6Z" transform="translate(-633.257 -224.588)" fill="#00ddf1" opacity="0.1"/>
-        <path id="Path_491" data-name="Path 491" d="M822.75,382.958s1.089-5.207,8.16-5.878" transform="translate(-633.254 -225.073)" fill="#00ddf1"/>
-      </g>
-    </g>
-    <g id="Group_643" data-name="Group 643" transform="translate(7 -63)">
-      <g id="Group_639" data-name="Group 639" transform="translate(21233 8372)">
-        <ellipse id="Ellipse_73" data-name="Ellipse 73" cx="49.851" cy="8.007" rx="49.851" ry="8.007" transform="translate(-20118.443 -7772.555)" fill="#00abf6" opacity="0.1"/>
-        <rect id="Rectangle_182" data-name="Rectangle 182" width="3.208" height="72.224" transform="translate(-20070.199 -7917.934)" fill="#535461"/>
-        <path id="Path_268" data-name="Path 268" d="M1025.906,587.251l-.2,3.254-.287,4.6-.118,1.913-.281,4.6-.123,1.913-.286,4.6-3.233,52.22a8.851,8.851,0,0,1-8.83,8.268H995.731a8.841,8.841,0,0,1-8.82-8.3l-3.244-52.225-.281-4.6-.117-1.913-.292-4.6-.117-1.913-.281-4.6-.2-3.254a4.6,4.6,0,0,1,4.574-4.865h34.391a4.6,4.6,0,0,1,4.569,4.9Z" transform="translate(-21072.734 -8433.181)" fill="#565661"/>
-        <path id="Path_269" data-name="Path 269" d="M990.949,517.36l-.287,4.589H948.106l-.286-4.589Z" transform="translate(-21037.977 -8360.036)" fill="#9d9cb5"/>
-        <path id="Path_270" data-name="Path 270" d="M990.93,530.08l-.281,4.594H948.9l-.286-4.594Z" transform="translate(-21038.363 -8366.248)" fill="#9d9cb5"/>
-        <path id="Path_271" data-name="Path 271" d="M990.912,542.8l-.287,4.589H949.686L949.4,542.8Z" transform="translate(-21038.748 -8372.46)" fill="#9d9cb5"/>
-        <path id="Path_272" data-name="Path 272" d="M933.875,490.464c18.684,13.517,26.466,34.656,26.466,34.656s-22.511-.773-41.2-14.289-26.46-34.651-26.46-34.651S915.2,476.953,933.875,490.464Z" transform="translate(-21028.934 -8381.328)" fill="#00abf6"/>
-        <path id="Path_273" data-name="Path 273" d="M892.68,476.18s23.365,12.969,30.865,23.708,36.8,25.233,36.8,25.233" transform="translate(-21028.934 -8381.328)" fill="none" stroke="#535461" stroke-miterlimit="10" stroke-width="2"/>
-        <path id="Path_274" data-name="Path 274" d="M975.393,443.457c10.171,7.352,14.407,18.863,14.407,18.863s-12.279-.425-22.424-7.776S953,435.68,953,435.68,965.227,436.1,975.393,443.457Z" transform="translate(-21058.393 -8361.549)" fill="#00abf6"/>
-        <path id="Path_275" data-name="Path 275" d="M953,435.68s12.719,7.06,16.8,12.9,20.03,13.737,20.03,13.737" transform="translate(-21058.393 -8361.549)" fill="none" stroke="#535461" stroke-miterlimit="10" stroke-width="2"/>
-        <path id="Path_276" data-name="Path 276" d="M1040.3,470.483c-11.68,12.836-14.151,29.612-14.151,29.612s16.469-4.042,28.139-16.883,14.151-29.612,14.151-29.612S1051.981,457.647,1040.3,470.483Z" transform="translate(-21094.119 -8370.301)" fill="#00abf6"/>
-        <path id="Path_277" data-name="Path 277" d="M1068.45,453.61s-15.215,13.159-19.083,22.224S1026.15,500.1,1026.15,500.1" transform="translate(-21094.119 -8370.306)" fill="none" stroke="#535461" stroke-miterlimit="10" stroke-width="2"/>
-      </g>
-      <g id="Group_638" data-name="Group 638" transform="translate(-40 36)">
-        <rect id="Rectangle_254" data-name="Rectangle 254" width="12.343" height="37.459" transform="translate(741.459 392.675)" fill="#3f3d56"/>
-        <rect id="Rectangle_255" data-name="Rectangle 255" width="12.343" height="39.629" transform="translate(1073.647 390.726)" fill="#3f3d56"/>
-        <path id="Path_418" data-name="Path 418" d="M597.889,523.665v8.446l-98.7.909-1.052.02-37.511.344-.9.013-11.4.1h-.338l-69.5.643L264.408,535.2h-.1l-29.007.273-.312.007L106.1,536.658v-9.745l30.306-18.19,60.808-.507,1.3-.007.429-.007,1.3-.019,29.2-.24,1.306-.007.416-.007,1.3-.006,9.362-.078.247-.006,23.1-.195h.188l180.214-1.52,4.411-.032h.442l3.365-.033,24.459-.2,1.3-.02,1.2-.013h.624l7.607-.058,1.507-.02,2.02-.013,6.334-.058,10.05-.084,1.3-.013,2.261-.013h.422l48.536-.416Z" transform="translate(566.82 43)" fill="#65617d"/>
-        <path id="Path_419" data-name="Path 419" d="M597.889,523.665v8.446l-98.7.909-1.052.02-37.511.344-.9.013-11.4.1h-.338l-69.5.643L264.408,535.2h-.1l-29.007.273-.312.007L106.1,536.658v-9.745l30.306-18.19,60.808-.507,1.3-.007.429-.007,1.3-.019,29.2-.24,1.306-.007.416-.007,1.3-.006,9.362-.078.247-.006,23.1-.195h.188l180.214-1.52,4.411-.032h.442l3.365-.033,24.459-.2,1.3-.02,1.2-.013h.624l7.607-.058,1.507-.02,2.02-.013,6.334-.058,10.05-.084,1.3-.013,2.261-.013h.422l48.536-.416Z" transform="translate(566.82 43)" opacity="0.2"/>
-        <path id="Path_420" data-name="Path 420" d="M358.914,656.57v15.91a3.982,3.982,0,0,1-2.274,3.6,3.9,3.9,0,0,1-1.624.39l-22.673.481a3.9,3.9,0,0,1-1.754-.37,3.976,3.976,0,0,1-2.319-3.619V656.57Z" transform="translate(437.441 -122.381)" fill="#3f3d56"/>
-        <path id="Path_421" data-name="Path 421" d="M358.914,656.57v15.91a3.982,3.982,0,0,1-2.274,3.6,3.9,3.9,0,0,1-1.624.39l-22.673.481a3.9,3.9,0,0,1-1.754-.37,3.976,3.976,0,0,1-2.319-3.619V656.57Z" transform="translate(437.441 -122.381)" opacity="0.1"/>
-        <path id="Path_422" data-name="Path 422" d="M360.914,656.57v15.91a3.982,3.982,0,0,1-2.274,3.6,3.9,3.9,0,0,1-1.624.39l-22.673.481a3.9,3.9,0,0,1-1.754-.37,3.976,3.976,0,0,1-2.319-3.619V656.57Z" transform="translate(436.74 -122.381)" fill="#3f3d56"/>
-        <rect id="Rectangle_256" data-name="Rectangle 256" width="30.644" height="20.464" transform="translate(1046.362 534.189)" fill="#3f3d56"/>
-        <rect id="Rectangle_257" data-name="Rectangle 257" width="30.644" height="20.464" transform="translate(1046.362 534.189)" opacity="0.1"/>
-        <rect id="Rectangle_258" data-name="Rectangle 258" width="30.644" height="20.464" transform="translate(1045.062 534.189)" fill="#3f3d56"/>
-        <path id="Path_423" data-name="Path 423" d="M223.943,265.82v3.723l-12.343-.318v-3.4Z" transform="translate(529.859 126.848)" opacity="0.1"/>
-        <path id="Path_424" data-name="Path 424" d="M358.741,271.246,343.909,377.789a2.794,2.794,0,0,1-2.839,2.41L222.314,377.12l-2.254-.058a2.794,2.794,0,0,1-2.7-3.164l16.651-111.533a2.794,2.794,0,0,1,2.949-2.358l119.186,8.069a2.787,2.787,0,0,1,2.6,3.17Z" transform="translate(476.307 16.556)" fill="#65617d"/>
-        <path id="Path_425" data-name="Path 425" d="M169.158,99.16,156.6,197.472l109.142,3.463,13.422-94.85Z" transform="translate(549.128 185.237)" fill="#00ddf1"/>
-        <rect id="Rectangle_259" data-name="Rectangle 259" width="132.965" height="112.605" rx="5.33" transform="translate(853.849 282.877)" fill="#65617d"/>
-        <rect id="Rectangle_260" data-name="Rectangle 260" width="120.836" height="93.765" transform="translate(860.125 290.458)" fill="#00ddf1"/>
-        <path id="Path_426" data-name="Path 426" d="M735.273,262.82v2.462l-12.343.253V262.82Z" transform="translate(350.717 127.899)" opacity="0.1"/>
-        <path id="Path_427" data-name="Path 427" d="M833.626,371a2,2,0,0,1-1.949,2.131l-121.615,2.514a2,2,0,0,1-2.033-1.813L697.575,265.156a2,2,0,0,1,1.9-2.189l120.693-6,1.3-.065a1.994,1.994,0,0,1,2.092,1.819Z" transform="translate(308.06 17.643)" fill="#65617d"/>
-        <path id="Path_428" data-name="Path 428" d="M628.93,100.238,739.157,94.82l9.31,98.748-109.356,2.6Z" transform="translate(383.65 186.757)" fill="#00ddf1"/>
-        <path id="Path_429" data-name="Path 429" d="M899.741,371a2,2,0,0,1-1.949,2.131L886.28,256.963l1.3-.065a2,2,0,0,1,2.092,1.819Z" transform="translate(241.945 17.643)" opacity="0.1"/>
-        <rect id="Rectangle_261" data-name="Rectangle 261" width="12.343" height="11.096" transform="translate(741.459 419.038)" opacity="0.1"/>
-        <path id="Path_431" data-name="Path 431" d="M281.574,483.65v3.229l-30.644.819V483.65Z" transform="translate(516.08 50.533)" opacity="0.1"/>
-        <path id="Path_432" data-name="Path 432" d="M390.8,483.886V593.158a2.6,2.6,0,0,1-2.5,2.566l-124.506,3.313h-.033a2.6,2.6,0,0,1-2.566-2.566V483.886a2.6,2.6,0,0,1,2.566-2.566H388.23A2.6,2.6,0,0,1,390.8,483.886Z" transform="translate(460.942 -60.983)" fill="#65617d"/>
-        <path id="Path_434" data-name="Path 434" d="M194.6,319.15H309.914v96.311L194.6,418.06Z" transform="translate(535.815 108.164)" fill="#d4dfec"/>
-        <rect id="Rectangle_262" data-name="Rectangle 262" width="12.343" height="11.317" transform="translate(1073.647 419.038)" opacity="0.1"/>
-        <path id="Path_435" data-name="Path 435" d="M709.574,483.65v4.164L678.93,487V483.65Z" transform="translate(366.132 50.533)" opacity="0.1"/>
-        <path id="Path_436" data-name="Path 436" d="M797.782,483.886V596.471a2.6,2.6,0,0,1-2.6,2.566h0l-124.532-3.313a2.6,2.6,0,0,1-2.5-2.566V483.886a2.6,2.6,0,0,1,2.566-2.566H795.19a2.6,2.6,0,0,1,2.592,2.566Z" transform="translate(318.365 -60.983)" fill="#65617d"/>
-        <path id="Path_437" data-name="Path 437" d="M866.289,483.886V596.471a2.6,2.6,0,0,1-2.6,2.566h0V481.32h0a2.6,2.6,0,0,1,2.6,2.566Z" transform="translate(249.859 -60.983)" opacity="0.1"/>
-        <path id="Path_438" data-name="Path 438" d="M713.414,319.15H598.1v96.311l115.314,2.6Z" transform="translate(394.451 108.164)" fill="#d4dfec"/>
-        <path id="Path_439" data-name="Path 439" d="M593.3,483.886V593.158a2.6,2.6,0,0,1-2.5,2.566l-124.506,3.313h0a2.6,2.6,0,0,1-2.6-2.566V483.886a2.6,2.6,0,0,1,2.566-2.566H590.73A2.6,2.6,0,0,1,593.3,483.886Z" transform="translate(389.997 -60.983)" fill="#65617d"/>
-        <path id="Path_440" data-name="Path 440" d="M397.1,319.15H512.414v96.311L397.1,418.06Z" transform="translate(464.87 108.164)" fill="#d4dfec"/>
-        <path id="Path_441" data-name="Path 441" d="M597.889,533.65V542.1l-98.7.909-1.052.02-37.511.344-.9.013-11.4.1h-.338l-69.5.643-114.086,1.059h-.1l-29.007.273-.312.007L106.1,546.643V536.9l131.562-.864h.312l26.629-.182h.123l183.9-1.215h.188l.11-.006h.305l3.112-.019h.948l48.393-.325,2.858-.013.637-.007Z" transform="translate(566.82 33.015)" opacity="0.1"/>
-        <circle id="Ellipse_99" data-name="Ellipse 99" cx="33.347" cy="33.347" r="33.347" transform="translate(887.196 363.44)" fill="#fbbebe"/>
-        <path id="Path_442" data-name="Path 442" d="M383.74,592.973a.806.806,0,0,1,.065-.227c.65-2.332,1.806-6.276,2.67-9.427.11-.39.214-.773.312-1.137.955-3.554,2.813-11.876,3.846-17.066.364-1.826.65-3.248.708-3.963.13-1.1,2.085-5.795,4.3-11.194,1.553-3.794,3.248-7.939,4.489-11.434a39.876,39.876,0,0,0,1.9-6.4,3.313,3.313,0,0,0,0-1.384,9.543,9.543,0,0,1-.312-2.274h0c-.149-4.028,1.052-10.394,2.91-13.065,2.274-3.248,3.9-15.371,3.9-15.371s3.365.487,3.9-2.293a4,4,0,0,0,.065-.91,4.815,4.815,0,0,0-.058-.721c-.578-4.054,9.563-8.368,15.267-9.3a12.769,12.769,0,0,1,1.949-.182,17.694,17.694,0,0,0,4.06-.935q.909-.279,1.949-.65c2.391-.806,5.249-1.871,8.283-3.04,11.408-4.424,25.22-10.394,25.22-10.394.1-.461.208-.9.331-1.338a18,18,0,0,1,10.622-12.3h0v-1.3c0-2.241-.1-4.548-.195-6.847,0-.448-.039-.9-.065-1.345v-.734c0-.455-.046-.91-.071-1.358l-.117-.091a10.66,10.66,0,0,1-2.534-2.729,9.916,9.916,0,0,1-.923-1.949c-.812-2.2-1-4.658-1.546-6.984l-.117-.481a54.579,54.579,0,0,0-2.6-6.873c-1.436-3.521-2.54-7.146-3.638-10.817q-1-3.333-2.02-6.678l-1.026-3.4c-.195-.65-.39-1.3-.539-1.949h0a8.627,8.627,0,0,1-.169-.91h0a6.5,6.5,0,0,1,.156-2.995,20.854,20.854,0,0,1,.858-1.949,5.113,5.113,0,0,0,.325-.9h0a1.947,1.947,0,0,0,.052-.208,3.667,3.667,0,0,0,.071-.7,11.993,11.993,0,0,0-.338-2.527.045.045,0,0,1,0-.032,1.661,1.661,0,0,0-.032-.175,16.564,16.564,0,0,1-.234-1.949,18.483,18.483,0,0,1,2.254-10.115l.123-.234a16.383,16.383,0,0,1,1.2-1.806h0a9.122,9.122,0,0,1,.65-.793,2.594,2.594,0,0,1-3.606-.936,2.475,2.475,0,0,1-.149-.292c-.033-.078-.059-.162-.085-.247-.455-1.592.338-3.287,1.377-4.58a12.012,12.012,0,0,1,3.729-3.053h0a2.51,2.51,0,0,1,.26-.136,11.125,11.125,0,0,1,1.715-.689h0a9.781,9.781,0,0,1,1.059-.286l-2.41-.221-.974-.091A9.414,9.414,0,0,1,479,361.527h.7a7.625,7.625,0,0,1,1.02.084A2.885,2.885,0,0,1,479,358.8a9.362,9.362,0,0,0,5.97,1.988h.247a19.494,19.494,0,0,1-.221-2.124h0a21.545,21.545,0,0,1,0-2.9,5.483,5.483,0,0,0,4.4,1.468l-1.351-1.884a6.165,6.165,0,0,0,4.262,1.332l.312-.033a4.547,4.547,0,0,0,.773-.149h.058c-.123-.156-.234-.318-.344-.487l-.039-.078a6.282,6.282,0,0,1-.65-1.358,4.284,4.284,0,0,1-.156-.565h0a5.684,5.684,0,0,1,.292-3.541c2.1,1.754,4.4,4.151,7.146,2.339s2.839-5.139,7.146-4.8a6.626,6.626,0,0,1,5.464,3.976,4.385,4.385,0,0,1,4.983-1.137,4.45,4.45,0,0,1,2.521,4.476c1.786-.448,3.71-.89,5.425-.214s2.82,2.865,1.845,4.327a.931.931,0,0,1-.091.13c-.8,1.033-2.566,1.6-2.378,2.9l.273.195.845.611q4.97,3.586,9.68,7.536c1.611,1.351,3.326,2.975,3.437,5.087a5.617,5.617,0,0,1-.156,1.54h0c-.1.507-.247,1.013-.357,1.52a12.676,12.676,0,0,0-.221,3.93h0c.045.383.1.76.175,1.143.994,5.022,5.009,9.167,5.405,14.292v.364a11.546,11.546,0,0,1-.045,1.644c-.3,3.118-1.741,6.113-2.91,9.1-.072.182-.143.364-.208.546a90.5,90.5,0,0,0-4.548,18.294,65.14,65.14,0,0,1-1.3,6.555,17.365,17.365,0,0,1-3.307,6.776,10.536,10.536,0,0,1-2.183,1.949,12.132,12.132,0,0,1-1.722.916v.039c.071.4.13.793.2,1.189.039.208.071.416.11.65h0a.089.089,0,0,0,0,.039c.546,3.073,1.169,6.081,1.826,8.939l.331,1.423c8.186,2.956,9.154,9.011,9.212,11.33a6.259,6.259,0,0,1,0,.929s12.343.325,17.216,3.9a13.21,13.21,0,0,0,2.93,1.494,53.917,53.917,0,0,0,6.009,1.877c1.046.273,2.137.539,3.248.8,1.949.448,4.015.884,6.009,1.3,5.321,1.072,10.33,1.949,12.87,2.6,6.061,1.533,19.925,14.825,19.925,14.825s1.624,13.409,3.248,15.364,4.548,8.829,4.548,8.829l10.745,19.106,4.548,8.036h2.923a4.97,4.97,0,0,1,2.085,1.364c.773.689,1.631,1.546,2.384,2.326l1.247,1.332.78.864s4.723.117,6,3.852c3.846-.11,8.569.143,11.876,1.624a9.187,9.187,0,0,1,1.3.7,5.639,5.639,0,0,1,2.683,3.677,5.422,5.422,0,0,1,.117.935c0,.37,0,.741,0,1.1-.234,4.918-3.437,9.011-6.38,11.765l.208.37s-.1.234-.286.65c-.052.123-.117.26-.188.416h0c-.383.819-.994,2.046-1.793,3.482a41.136,41.136,0,0,1-6.217,8.556l-.188.195-37.511.344-.11-.13-7.276-8.679-3.619-4.314-.11-.136-.1,1.033-.351,3.443-.845,8.322-.045.416v.11l-.1.961.071-.961h-.188l-69.513.65-114.092,1.26v.546h-.091v-.546l-29.072.312Z" transform="translate(418.007 -14.269)" fill="url(#linear-gradient)"/>
-        <path id="Path_443" data-name="Path 443" d="M586.185,511.522s-64.641,7.8-58.469,0c2.235-2.82,2.852-11.174,2.729-20.691-.039-2.891-.143-5.886-.292-8.868-.715-14.292-2.436-28.26-2.436-28.26s56.52-26.636,50.023-5.522c-2.6,8.53-1.748,20.51.227,31.755.578,3.281,1.247,6.5,1.949,9.55a223.892,223.892,0,0,0,6.269,22.036Z" transform="translate(367.711 -46.521)" fill="#fbbebe"/>
-        <path id="Path_444" data-name="Path 444" d="M586.185,537.354s-64.641,7.8-58.469,0c2.235-2.82,2.852-11.174,2.729-20.692,9.855-4.21,22.394-1.072,22.394-1.072,13.2-2.631,21.666-2.118,27.078-.273A223.888,223.888,0,0,0,586.185,537.354Z" transform="translate(367.711 -72.353)" opacity="0.1"/>
-        <path id="Path_445" data-name="Path 445" d="M413.346,651.973v-.546l114.092-1.241,69.513-.65h.195l-.071.961.1-.961h.123v-.11l.89-8.738.338-3.307.1-1.033.091-.864,4.015-13.389,4.015-13.37,3.378-11.258,5.158-17.2s-2.923-6.821-4.548-8.77-3.248-15.267-3.248-15.267-13.864-13.208-19.925-14.728c-2.54-.65-7.555-1.514-12.883-2.6-1.994-.4-4.041-.832-6.009-1.3-1.111-.253-2.2-.52-3.248-.786a57.086,57.086,0,0,1-6.009-1.858,13.448,13.448,0,0,1-2.924-1.488c-4.775-3.5-16.742-3.9-17.2-3.9h0a.269.269,0,0,1,0-.045v-.058a6.66,6.66,0,0,0,0-.819,5.208,5.208,0,0,0-.059-.91.82.82,0,0,0-.045-.325c-.032-.234-.071-.481-.13-.741a3.226,3.226,0,0,0-.078-.344,11.181,11.181,0,0,0-.812-2.267c-.045-.1-.1-.214-.156-.318a11.861,11.861,0,0,0-1.1-1.709c-.084-.11-.175-.227-.273-.338a12.721,12.721,0,0,0-1.767-1.715c-.175-.136-.357-.279-.546-.409a3.026,3.026,0,0,0-.331-.234l-.578-.377-.539-.312c-.474-.26-.974-.513-1.52-.754-.169-.078-.351-.149-.533-.221s-.468-.182-.708-.273h-.039l-.487-.195c-.37-.123-.747-.234-1.143-.344l-.6-.156-.65-.149-.65-.136c-.65-.13-1.345-.247-2.072-.338l-.741-.091-.76-.078-.786-.065-1.117-.065-1.3-.045a81.017,81.017,0,0,0-17.054,1.814,46.946,46.946,0,0,0-11.855-1.093h-.565l-.65.039h-.416l-.838.078a6.224,6.224,0,0,0-.845.1c-.279.039-.572.071-.851.117l-.429.071c-.422.071-.851.149-1.3.24q-.214.039-.429.1c-.565.123-1.13.273-1.689.442-.279.078-.559.169-.838.266-.143.039-.279.091-.416.143l-.416.149-.409.162-.487.195c-.247.1-.487.214-.728.331-.136.058-.273.123-.4.195s-.266.13-.39.2a18.03,18.03,0,0,0-4.034,2.846l-.331.318-.325.331c-.11.11-.214.227-.318.344a15.473,15.473,0,0,0-1.182,1.462c-.1.136-.2.273-.3.416a17.335,17.335,0,0,0-1.117,1.9c-.084.156-.162.318-.24.474a21.243,21.243,0,0,0-1.3,3.411q-.182.65-.331,1.3s-13.753,6.068-25.161,10.46c-3.034,1.169-5.892,2.228-8.283,3.027-.7.234-1.345.448-1.949.65a17.347,17.347,0,0,1-4.06.935,12.778,12.778,0,0,0-1.949.182c-5.243.851-14.227,4.548-15.208,8.257a2.4,2.4,0,0,0-.065.91v.071c.65,4.548-3.9,3.9-3.9,3.9s-1.624,12.019-3.9,15.267c-1.644,2.339-2.768,7.555-2.91,11.492h0a12.741,12.741,0,0,0,.286,3.658v.091c.26.871-.364,3.248-1.423,6.3-1.15,3.346-2.826,7.5-4.437,11.427-2.43,5.925-4.716,11.3-4.859,12.486-.058.526-.227,1.468-.461,2.683-.948,4.95-3.053,14.377-4.093,18.19-.773,2.845-1.9,6.743-2.67,9.42a.91.91,0,0,1-.065.227l29.124-.286v.546h.091Z" transform="translate(417.856 -73.042)" fill="#00ddf1"/>
-        <path id="Path_446" data-name="Path 446" d="M445.44,607.57s37.03,19.165,50.348,16.891Z" transform="translate(396.391 -105.214)" opacity="0.1"/>
-        <path id="Path_447" data-name="Path 447" d="M561.44,595.57s36.056,11.694,48.074,13.318S561.44,595.57,561.44,595.57Z" transform="translate(355.751 -101.01)" opacity="0.1"/>
-        <path id="Path_448" data-name="Path 448" d="M585.443,530.686c-18.84,3.469-54.311,2.722-69.643,2.2,5.62-20.139,33.022-13.292,33.022-13.292C582.74,512.821,585.339,526.866,585.443,530.686Z" transform="translate(371.74 -73.754)" opacity="0.1"/>
-        <path id="Path_449" data-name="Path 449" d="M585.443,528.686c-18.84,3.469-54.311,2.722-69.643,2.2,5.62-20.139,33.022-13.292,33.022-13.292C582.74,510.821,585.339,524.866,585.443,528.686Z" transform="translate(371.74 -73.053)" fill="#00ddf1"/>
-        <path id="Path_450" data-name="Path 450" d="M776.94,672.008s22.192-3.411,22.628,6.334S788.25,694.9,788.25,694.9Z" transform="translate(280.251 -127.587)" fill="#fbbebe"/>
-        <path id="Path_451" data-name="Path 451" d="M578.17,479.936a30.558,30.558,0,0,1-2.923,1.13c-7,2.417-14.065,4.853-21.439,5.736s-15.111.1-21.543-3.573a18.685,18.685,0,0,1-1.949-1.267c-.715-14.292-2.436-28.26-2.436-28.26s56.52-26.636,50.023-5.522C575.318,456.711,576.195,468.69,578.17,479.936Z" transform="translate(367.508 -46.521)" opacity="0.1"/>
-        <path id="Path_452" data-name="Path 452" d="M536.9,360.29a6.153,6.153,0,0,1-5.405-1.137l1.351,1.878a5.5,5.5,0,0,1-4.4-1.462,22.146,22.146,0,0,0,.208,5.035,9.433,9.433,0,0,1-6.211-1.949,2.872,2.872,0,0,0,1.715,2.8,9.316,9.316,0,0,0-10.135,6.958l3.391.312a12,12,0,0,0-6.782,4.138c-1.039,1.3-1.832,2.962-1.377,4.548s2.651,2.6,3.846,1.468a18.151,18.151,0,0,0-3.963,14.806,9.4,9.4,0,0,1,.3,3.417,28.993,28.993,0,0,1-1.228,3.047c-.65,1.9-.032,3.956.546,5.847l3.047,10.018c1.1,3.619,2.2,7.244,3.645,10.745a53.328,53.328,0,0,1,2.6,6.828c.819,3.144.851,6.588,2.6,9.336a12.948,12.948,0,0,0,4.665,4.112c6.425,3.677,14.188,4.457,21.542,3.573s14.409-3.32,21.406-5.736a20.141,20.141,0,0,0,4.444-1.949c4.84-3.17,5.918-9.654,6.821-15.364a87.242,87.242,0,0,1,4.736-18.71c1.416-3.567,3.248-7.185,2.936-11.005-.4-5.074-4.411-9.186-5.405-14.175a12.344,12.344,0,0,1,.045-5.048,11.473,11.473,0,0,0,.513-3.053c-.11-2.092-1.826-3.7-3.437-5.048q-5.243-4.379-10.823-8.277c-.188-1.3,1.579-1.858,2.378-2.884,1.13-1.449-.039-3.748-1.754-4.424s-3.638-.234-5.425.214a4.281,4.281,0,0,0-7.5-3.32,6.627,6.627,0,0,0-5.47-3.95c-4.307-.338-4.392,2.956-7.146,4.768s-5.028-.578-7.146-2.319A6.029,6.029,0,0,0,536.9,360.29Z" transform="translate(374.5 -15.625)" fill="#3f3d56"/>
-        <path id="Path_453" data-name="Path 453" d="M768.171,669.128s-.578,1.377-1.644,3.372a44.83,44.83,0,0,1-5.847,8.556l-.175.188h-1.052l-37.511.344h-.9l-.11-.13-7.276-8.634-2.741-3.255-.11-.136-.234-.273-.13-.156-.169-.2-5.334-6.328,1.949-8.121,3.32-13.682.084-.331.65-2.6.461-1.949,1.546-6.354,5.3-21.861,9.42,4.872,9.933,17.541,5.334,9.42h2.923c.552,0,1.819,1.065,3.092,2.293.455.435.91.9,1.3,1.3,1.156,1.2,2.072,2.222,2.072,2.222s4.736.1,6.009,3.833a4.537,4.537,0,0,1,.162.552,26.191,26.191,0,0,0,1.644,4.262c.838,1.826,1.891,3.9,2.956,5.97,1.981,3.8,4,7.419,4.736,8.731l.091.162Z" transform="translate(305.476 -105.217)" fill="#00ddf1"/>
-        <path id="Path_454" data-name="Path 454" d="M615.681,653.093l-.065.929v.065l-.11,1.494-.864,12.025L613.6,682.093l-.3,4.08-.65,8.731v.11l-69.513.65L429.061,696.9v.546h-.091v-.728l.292-9.329.559-18.229L430.3,653.7l.045-1.54a6.841,6.841,0,0,1,7.419-6.607c3.066.26,7.049.578,11.811.916l1.949.143c27.5,1.91,78.322,4.379,129.606,1.3,1.078-.059,2.163-.123,3.248-.2,7.952-.5,15.9-1.143,23.764-1.949a6.841,6.841,0,0,1,7.536,7.3Z" transform="translate(402.161 -118.514)" opacity="0.1"/>
-        <path id="Path_455" data-name="Path 455" d="M429.08,698.857v-.546l114.092-1.241,69.513-.65h.195v-.11l.65-8.731.279-3.9,1.065-14.689.838-11.629v-.286a6.893,6.893,0,0,0-.071-1.6.2.2,0,0,0,0-.065,6.751,6.751,0,0,0-1.3-3.014,6.847,6.847,0,0,0-6.12-2.6c-7.867.806-15.813,1.449-23.764,1.949-1.085.078-2.17.143-3.248.2-51.284,3.047-102.106.578-129.606-1.3l-1.949-.143c-4.762-.338-8.744-.65-11.811-.916a6.847,6.847,0,0,0-7.3,5.542,7.146,7.146,0,0,0-.117,1.065l-.442,14.4-.6,18.236-.286,9.329v.728Z" transform="translate(402.122 -119.926)" fill="#3f3d56"/>
-        <path id="Path_456" data-name="Path 456" d="M615.925,661.692l-.8,9.959L613.937,686.5l-.3,3.716-.65,8.322-.039.416v.11h0l-.1.961.071-.961h-.188l-69.513.65L429.11,700.944v-.182l.318-9.329.65-18.229.416-12.116a4.132,4.132,0,0,1,1.988-3.411,4.061,4.061,0,0,1,2.456-.585c1.364.11,3.04.24,5,.383,3.177.234,7.094.507,11.655.793,8.445.533,19.041,1.1,31.183,1.572,33.782,1.3,79.388,1.735,122.707-2.059,1.949-.169,3.963-.357,5.931-.546a4.066,4.066,0,0,1,2.261.429,3.346,3.346,0,0,1,.559.351,3.989,3.989,0,0,1,1.3,1.6,2.315,2.315,0,0,1,.162.4A4.08,4.08,0,0,1,615.925,661.692Z" transform="translate(402.112 -122.559)" opacity="0.1"/>
-        <path id="Path_457" data-name="Path 457" d="M360.914,677.87v2.072a3.982,3.982,0,0,1-2.274,3.6l-26.051.5a3.976,3.976,0,0,1-2.319-3.619v-1.949Z" transform="translate(436.74 -129.843)" opacity="0.1"/>
-        <path id="Path_458" data-name="Path 458" d="M280.294,512.532l-33.944.65V507.55l33.944-.65Z" transform="translate(517.685 42.387)" fill="#3f3d56"/>
-        <path id="Path_459" data-name="Path 459" d="M280.294,512.532l-33.944.65V507.55l33.944-.65Z" transform="translate(517.685 42.387)" opacity="0.1"/>
-        <path id="Path_460" data-name="Path 460" d="M282.294,512.532l-33.944.65V507.55l33.944-.65Z" transform="translate(516.984 42.387)" fill="#3f3d56"/>
-        <path id="Path_461" data-name="Path 461" d="M552.228,360.039A6.334,6.334,0,0,1,551,357.22a6.165,6.165,0,0,0,.273,2.988A5.847,5.847,0,0,0,552.228,360.039Z" transform="translate(359.434 -17.505)"/>
-        <path id="Path_462" data-name="Path 462" d="M540.1,366.9a22.83,22.83,0,0,1-.24-2.4c0,.8,0,1.6,0,2.41Z" transform="translate(363.311 -20.056)"/>
-        <path id="Path_463" data-name="Path 463" d="M621.706,398.627a11.912,11.912,0,0,1,.234-1.722,11.7,11.7,0,0,0,.52-3.047,4.008,4.008,0,0,0-.1-.689c-.11.6-.286,1.2-.416,1.787a12.433,12.433,0,0,0-.234,3.671Z" transform="translate(334.652 -30.1)"/>
-        <path id="Path_464" data-name="Path 464" d="M600.922,368.894l.708.513a12.8,12.8,0,0,0,1.67-1.442,2.384,2.384,0,0,0,.247-2.365,1.95,1.95,0,0,1-.247.416C602.5,367.042,600.734,367.607,600.922,368.894Z" transform="translate(341.923 -20.441)"/>
-        <path id="Path_465" data-name="Path 465" d="M518.455,380.29a8,8,0,0,0-.565,1.481,11.8,11.8,0,0,1,3.248-1.228Z" transform="translate(371.008 -25.587)"/>
-        <path id="Path_466" data-name="Path 466" d="M531.888,368.979a9.637,9.637,0,0,1-1.221-.8,2.758,2.758,0,0,0,.058.767,7.7,7.7,0,0,1,1.163.033Z" transform="translate(366.534 -21.345)"/>
-        <path id="Path_467" data-name="Path 467" d="M587.579,428.33c-.266,3.151-1.735,6.185-2.923,9.173a87.2,87.2,0,0,0-4.736,18.717c-.9,5.71-1.949,12.194-6.821,15.358a19.488,19.488,0,0,1-4.437,1.949c-7,2.423-14.065,4.853-21.439,5.736s-15.111.11-21.543-3.567a12.993,12.993,0,0,1-4.664-4.112c-1.735-2.748-1.767-6.191-2.6-9.336a53.424,53.424,0,0,0-2.6-6.834c-1.436-3.5-2.54-7.146-3.638-10.739q-1.527-5.009-3.047-10.024a18.716,18.716,0,0,1-.741-3.086,11.644,11.644,0,0,0,.741,5.035q1.52,5.022,3.047,10.024c1.1,3.619,2.2,7.244,3.638,10.739a53.417,53.417,0,0,1,2.6,6.834c.819,3.144.851,6.587,2.6,9.336a12.993,12.993,0,0,0,4.664,4.112c6.432,3.677,14.188,4.45,21.543,3.567s14.409-3.313,21.439-5.736a19.487,19.487,0,0,0,4.437-1.949c4.84-3.164,5.918-9.647,6.821-15.358a87.2,87.2,0,0,1,4.736-18.717c1.416-3.56,3.248-7.179,2.936-11.005C587.592,428.408,587.579,428.369,587.579,428.33Z" transform="translate(374.359 -42.418)"/>
-        <path id="Path_468" data-name="Path 468" d="M510.318,421.419v-.071a9.1,9.1,0,0,0-.3-3.411,17.272,17.272,0,0,1-.253-2.157,17.769,17.769,0,0,0,.253,4.106C510.123,420.393,510.24,420.906,510.318,421.419Z" transform="translate(373.864 -38.021)"/>
-        <path id="Path_469" data-name="Path 469" d="M512.452,397.929a18.02,18.02,0,0,1,1.7-2.384c-1.189,1.137-3.385.123-3.846-1.455a3.788,3.788,0,0,0,0,1.949,2.852,2.852,0,0,0,2.15,1.89Z" transform="translate(373.712 -30.422)"/>
-        <path id="Path_470" data-name="Path 470" d="M762.946,656.57s2.059,7.471,0,13.968S762.946,656.57,762.946,656.57Z" transform="translate(285.475 -122.381)" opacity="0.1"/>
-        <path id="Path_471" data-name="Path 471" d="M776,668.3s.864,9.485-1.085,11.168S776,668.3,776,668.3Z" transform="translate(281.189 -126.49)" opacity="0.1"/>
-        <line id="Line_88" data-name="Line 88" y1="0.65" x2="66.011" transform="translate(733.267 442.068)" fill="none" stroke="#00ddf1" stroke-miterlimit="10" stroke-width="2"/>
-        <line id="Line_89" data-name="Line 89" y1="0.643" x2="66.011" transform="translate(733.267 450.176)" fill="none" stroke="#00ddf1" stroke-miterlimit="10" stroke-width="2"/>
-        <line id="Line_90" data-name="Line 90" y1="0.65" x2="66.011" transform="translate(733.267 458.277)" fill="none" stroke="#00ddf1" stroke-miterlimit="10" stroke-width="2"/>
-      </g>
-    </g>
-  </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="691.365" height="586.346" viewBox="0 0 691.365 586.346">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" y1="1" x2="0.5" y2="-0.001" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="gray" stop-opacity="0.251"/>
+      <stop offset="0.54" stop-color="gray" stop-opacity="0.122"/>
+      <stop offset="1" stop-color="gray" stop-opacity="0.102"/>
+    </linearGradient>
+  </defs>
+  <g id="Group_644" data-name="Group 644" transform="translate(-588.635 -80)">
+    <g id="Group_642" data-name="Group 642" transform="translate(22538.635 6999)">
+      <path id="Path_472" data-name="Path 472" d="M482.764,637.675c51.612-29.22,67.336-29.693,124.954-17.169,81.646,17.758,88.43-49.93,108.306-186.933,33.946-233.98-108.306-295.737-108.306-295.737s-94.6-8.1-150.536-38.963C377.726,55.027,286.9,49.443,207.046,86.542c-51.069,23.7-93.125,56.714-100.31,102.034-20.09,126.746,12.9,196.58-48.819,237.954S48.944,581.5,96.263,577.564c34.968-2.906,80.842,52.415,130.687,60.111,17.382,2.684,88.7-13.043,99.578,0C341.327,655.4,464.763,647.87,482.764,637.675Z" transform="translate(-21979.895 -6980.982)" fill="#00ddf1" opacity="0.1"/>
+      <g id="Group_641" data-name="Group 641" transform="translate(-21545.08 -6816.88)">
+        <rect id="Rectangle_263" data-name="Rectangle 263" width="217.867" height="15.073" transform="translate(0 39.052)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_264" data-name="Rectangle 264" width="217.867" height="15.073" transform="translate(0 104.137)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_265" data-name="Rectangle 265" width="217.867" height="15.073" transform="translate(0 171.964)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_266" data-name="Rectangle 266" width="13.702" height="39.052" transform="translate(19.183)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_267" data-name="Rectangle 267" width="13.702" height="2.74" transform="translate(19.183 6.166)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_268" data-name="Rectangle 268" width="13.702" height="2.74" transform="translate(19.183 27.405)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_269" data-name="Rectangle 269" width="13.702" height="39.052" transform="translate(39.737)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_270" data-name="Rectangle 270" width="13.702" height="2.74" transform="translate(39.737 6.166)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_271" data-name="Rectangle 271" width="13.702" height="2.74" transform="translate(39.737 27.405)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_272" data-name="Rectangle 272" width="13.702" height="39.052" transform="translate(60.29)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_273" data-name="Rectangle 273" width="13.702" height="2.74" transform="translate(60.29 6.166)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_274" data-name="Rectangle 274" width="13.702" height="2.74" transform="translate(60.29 27.405)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_275" data-name="Rectangle 275" width="13.702" height="39.052" transform="translate(80.844)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_276" data-name="Rectangle 276" width="13.702" height="2.74" transform="translate(80.844 6.166)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_277" data-name="Rectangle 277" width="13.702" height="2.74" transform="translate(80.844 27.405)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_278" data-name="Rectangle 278" width="13.702" height="39.052" transform="translate(101.397)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_279" data-name="Rectangle 279" width="13.702" height="2.74" transform="translate(101.397 6.166)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_280" data-name="Rectangle 280" width="13.702" height="2.74" transform="translate(101.397 27.405)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_281" data-name="Rectangle 281" width="13.702" height="39.052" transform="translate(121.95)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_282" data-name="Rectangle 282" width="13.702" height="2.74" transform="translate(121.95 6.166)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_283" data-name="Rectangle 283" width="13.702" height="2.74" transform="translate(121.95 27.405)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_284" data-name="Rectangle 284" width="13.702" height="39.052" transform="translate(142.504)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_285" data-name="Rectangle 285" width="13.702" height="2.74" transform="translate(142.504 6.166)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_286" data-name="Rectangle 286" width="13.702" height="2.74" transform="translate(142.504 27.405)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_287" data-name="Rectangle 287" width="13.702" height="39.052" transform="matrix(0.894, -0.448, 0.448, 0.894, 135.847, 138.025)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_288" data-name="Rectangle 288" width="13.702" height="2.74" transform="matrix(0.894, -0.448, 0.448, 0.894, 138.614, 143.541)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_289" data-name="Rectangle 289" width="13.702" height="2.74" transform="matrix(0.894, -0.448, 0.448, 0.894, 148.128, 162.529)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_290" data-name="Rectangle 290" width="13.702" height="39.052" transform="translate(19.183 65.771)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_291" data-name="Rectangle 291" width="13.702" height="2.74" transform="translate(19.183 71.937)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_292" data-name="Rectangle 292" width="13.702" height="2.74" transform="translate(19.183 93.176)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_293" data-name="Rectangle 293" width="13.702" height="39.052" transform="translate(39.737 65.771)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_294" data-name="Rectangle 294" width="13.702" height="2.74" transform="translate(39.737 71.937)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_295" data-name="Rectangle 295" width="13.702" height="2.74" transform="translate(39.737 93.176)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_296" data-name="Rectangle 296" width="13.702" height="39.052" transform="translate(60.29 65.771)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_297" data-name="Rectangle 297" width="13.702" height="2.74" transform="translate(60.29 71.937)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_298" data-name="Rectangle 298" width="13.702" height="2.74" transform="translate(60.29 93.176)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_299" data-name="Rectangle 299" width="13.702" height="39.052" transform="translate(145.93 65.771)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_300" data-name="Rectangle 300" width="13.702" height="2.74" transform="translate(145.93 71.937)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_301" data-name="Rectangle 301" width="13.702" height="2.74" transform="translate(145.93 93.176)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_302" data-name="Rectangle 302" width="13.702" height="39.052" transform="translate(166.483 65.771)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_303" data-name="Rectangle 303" width="13.702" height="2.74" transform="translate(166.483 71.937)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_304" data-name="Rectangle 304" width="13.702" height="2.74" transform="translate(166.483 93.176)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_305" data-name="Rectangle 305" width="13.702" height="39.052" transform="translate(187.036 65.771)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_306" data-name="Rectangle 306" width="13.702" height="2.74" transform="translate(187.036 71.937)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_307" data-name="Rectangle 307" width="13.702" height="2.74" transform="translate(187.036 93.176)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_308" data-name="Rectangle 308" width="13.702" height="39.052" transform="translate(19.183 132.912)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_309" data-name="Rectangle 309" width="13.702" height="2.74" transform="translate(19.183 139.078)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_310" data-name="Rectangle 310" width="13.702" height="2.74" transform="translate(19.183 160.317)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_311" data-name="Rectangle 311" width="13.702" height="39.052" transform="translate(39.737 132.912)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_312" data-name="Rectangle 312" width="13.702" height="2.74" transform="translate(39.737 139.078)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_313" data-name="Rectangle 313" width="13.702" height="2.74" transform="translate(39.737 160.317)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_314" data-name="Rectangle 314" width="13.702" height="39.052" transform="translate(60.29 132.912)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_315" data-name="Rectangle 315" width="13.702" height="2.74" transform="translate(60.29 139.078)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_316" data-name="Rectangle 316" width="13.702" height="2.74" transform="translate(60.29 160.317)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_317" data-name="Rectangle 317" width="13.702" height="39.052" transform="translate(80.844 132.912)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_318" data-name="Rectangle 318" width="13.702" height="2.74" transform="translate(80.844 139.078)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_319" data-name="Rectangle 319" width="13.702" height="2.74" transform="translate(80.844 160.317)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_320" data-name="Rectangle 320" width="13.702" height="39.052" transform="translate(101.397 132.912)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_321" data-name="Rectangle 321" width="13.702" height="2.74" transform="translate(101.397 139.078)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_322" data-name="Rectangle 322" width="13.702" height="2.74" transform="translate(101.397 160.317)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_323" data-name="Rectangle 323" width="13.702" height="39.052" transform="translate(121.95 132.912)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_324" data-name="Rectangle 324" width="13.702" height="2.74" transform="translate(121.95 139.078)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_325" data-name="Rectangle 325" width="13.702" height="2.74" transform="translate(121.95 160.317)" fill="#00ddf1" opacity="0.1"/>
+        <path id="Path_473" data-name="Path 473" d="M797.862,159.09v35.571h-13.7V156.48Q791.039,157.693,797.862,159.09Z" transform="translate(-621.103 -155.61)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_326" data-name="Rectangle 326" width="13.702" height="2.74" transform="translate(163.057 6.166)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_327" data-name="Rectangle 327" width="13.702" height="2.74" transform="translate(163.057 27.405)" fill="#00ddf1" opacity="0.1"/>
+        <path id="Path_474" data-name="Path 474" d="M827.862,165.719v30.83h-13.7V162.43c1.781.391,3.556.8,5.33,1.22Q823.7,164.636,827.862,165.719Z" transform="translate(-630.549 -157.483)" fill="#00ddf1" opacity="0.1"/>
+        <path id="Path_475" data-name="Path 475" d="M827.862,166.285v.685h-13.7v-2.74h5.33Q823.7,165.2,827.862,166.285Z" transform="translate(-630.549 -158.05)" fill="#00ddf1" opacity="0.1"/>
+        <rect id="Rectangle_328" data-name="Rectangle 328" width="13.702" height="2.74" transform="translate(183.611 27.405)" fill="#00ddf1" opacity="0.1"/>
+        <path id="Path_476" data-name="Path 476" d="M691.358,287.276s-4.152-1.411-6.166,2.254a6.68,6.68,0,0,0,.089,6.426,9.4,9.4,0,0,0,9.146,5.179c4.35-.233,5.8-3.549,6.166-6.639a6.851,6.851,0,0,0-9.057-7.3Z" transform="translate(-589.693 -196.649)" fill="#00ddf1"/>
+        <path id="Path_477" data-name="Path 477" d="M686.2,296.239a6.68,6.68,0,0,1-.089-6.426c2-3.659,6.166-2.254,6.166-2.254l.212-.075a6.762,6.762,0,0,1,4.885.11,6.762,6.762,0,0,0-5.762-.548l-.212.075s-4.152-1.411-6.166,2.254a6.68,6.68,0,0,0,.089,6.426,9.982,9.982,0,0,0,4.7,4.446A10.277,10.277,0,0,1,686.2,296.239Z" transform="translate(-589.706 -196.595)" fill="#00ddf1" opacity="0.1"/>
+        <path id="Path_478" data-name="Path 478" d="M691.42,290.06s1.542,1.213,5.282,0" transform="translate(-591.9 -197.672)" fill="#00ddf1" opacity="0.2"/>
+        <path id="Path_479" data-name="Path 479" d="M690.93,277.21s2.638,7.153,2.418,9.023l2.09-.219s-3.521-6.269-2.638-8.8Z" transform="translate(-591.746 -193.626)" fill="#00ddf1"/>
+        <path id="Path_480" data-name="Path 480" d="M690.93,277.21s2.638,7.153,2.418,9.023l2.09-.219s-3.521-6.269-2.638-8.8Z" transform="translate(-591.746 -193.626)" fill="#00ddf1" opacity="0.2"/>
+        <path id="Path_481" data-name="Path 481" d="M702.92,277.6s-4.159-2.124-6.015-.37-2.144,6.241-2.144,6.241S701.536,284.391,702.92,277.6Z" transform="translate(-592.952 -193.414)" fill="#00ddf1"/>
+        <path id="Path_482" data-name="Path 482" d="M702.92,277.6s-4.159-2.124-6.015-.37-2.144,6.241-2.144,6.241S701.536,284.391,702.92,277.6Z" transform="translate(-592.952 -193.414)" fill="#00ddf1" opacity="0.1"/>
+        <path id="Path_483" data-name="Path 483" d="M694.75,283.958s1.089-5.207,8.16-5.878" transform="translate(-592.949 -193.9)" fill="#00ddf1"/>
+        <path id="Path_484" data-name="Path 484" d="M819.358,386.276s-4.152-1.411-6.166,2.254a6.68,6.68,0,0,0,.089,6.426,9.4,9.4,0,0,0,9.146,5.18c4.35-.233,5.8-3.549,6.166-6.639a6.851,6.851,0,0,0-9.057-7.3Z" transform="translate(-629.999 -227.823)" fill="#00ddf1"/>
+        <path id="Path_485" data-name="Path 485" d="M814.2,395.239a6.68,6.68,0,0,1-.089-6.426c2-3.659,6.166-2.254,6.166-2.254l.212-.075a6.762,6.762,0,0,1,4.885.11,6.762,6.762,0,0,0-5.762-.548l-.212.075s-4.152-1.411-6.166,2.254a6.68,6.68,0,0,0,.089,6.426,9.982,9.982,0,0,0,4.7,4.446A10.276,10.276,0,0,1,814.2,395.239Z" transform="translate(-630.011 -227.769)" fill="#00ddf1" opacity="0.1"/>
+        <path id="Path_486" data-name="Path 486" d="M819.42,389.06s1.542,1.213,5.282,0" transform="translate(-632.206 -228.846)" fill="#00ddf1" opacity="0.2"/>
+        <path id="Path_487" data-name="Path 487" d="M818.93,376.21s2.638,7.153,2.419,9.023l2.09-.219s-3.522-6.269-2.638-8.8Z" transform="translate(-632.051 -224.799)" fill="#00ddf1"/>
+        <path id="Path_488" data-name="Path 488" d="M818.93,376.21s2.638,7.153,2.419,9.023l2.09-.219s-3.522-6.269-2.638-8.8Z" transform="translate(-632.051 -224.799)" fill="#00ddf1" opacity="0.2"/>
+        <path id="Path_489" data-name="Path 489" d="M830.92,376.6s-4.159-2.124-6.015-.37-2.144,6.241-2.144,6.241S829.536,383.391,830.92,376.6Z" transform="translate(-633.257 -224.588)" fill="#00ddf1"/>
+        <path id="Path_490" data-name="Path 490" d="M830.92,376.6s-4.159-2.124-6.015-.37-2.144,6.241-2.144,6.241S829.536,383.391,830.92,376.6Z" transform="translate(-633.257 -224.588)" fill="#00ddf1" opacity="0.1"/>
+        <path id="Path_491" data-name="Path 491" d="M822.75,382.958s1.089-5.207,8.16-5.878" transform="translate(-633.254 -225.073)" fill="#00ddf1"/>
+      </g>
+    </g>
+    <g id="Group_643" data-name="Group 643" transform="translate(7 -63)">
+      <g id="Group_639" data-name="Group 639" transform="translate(21233 8372)">
+        <ellipse id="Ellipse_73" data-name="Ellipse 73" cx="49.851" cy="8.007" rx="49.851" ry="8.007" transform="translate(-20118.443 -7772.555)" fill="#00abf6" opacity="0.1"/>
+        <rect id="Rectangle_182" data-name="Rectangle 182" width="3.208" height="72.224" transform="translate(-20070.199 -7917.934)" fill="#535461"/>
+        <path id="Path_268" data-name="Path 268" d="M1025.906,587.251l-.2,3.254-.287,4.6-.118,1.913-.281,4.6-.123,1.913-.286,4.6-3.233,52.22a8.851,8.851,0,0,1-8.83,8.268H995.731a8.841,8.841,0,0,1-8.82-8.3l-3.244-52.225-.281-4.6-.117-1.913-.292-4.6-.117-1.913-.281-4.6-.2-3.254a4.6,4.6,0,0,1,4.574-4.865h34.391a4.6,4.6,0,0,1,4.569,4.9Z" transform="translate(-21072.734 -8433.181)" fill="#565661"/>
+        <path id="Path_269" data-name="Path 269" d="M990.949,517.36l-.287,4.589H948.106l-.286-4.589Z" transform="translate(-21037.977 -8360.036)" fill="#9d9cb5"/>
+        <path id="Path_270" data-name="Path 270" d="M990.93,530.08l-.281,4.594H948.9l-.286-4.594Z" transform="translate(-21038.363 -8366.248)" fill="#9d9cb5"/>
+        <path id="Path_271" data-name="Path 271" d="M990.912,542.8l-.287,4.589H949.686L949.4,542.8Z" transform="translate(-21038.748 -8372.46)" fill="#9d9cb5"/>
+        <path id="Path_272" data-name="Path 272" d="M933.875,490.464c18.684,13.517,26.466,34.656,26.466,34.656s-22.511-.773-41.2-14.289-26.46-34.651-26.46-34.651S915.2,476.953,933.875,490.464Z" transform="translate(-21028.934 -8381.328)" fill="#00abf6"/>
+        <path id="Path_273" data-name="Path 273" d="M892.68,476.18s23.365,12.969,30.865,23.708,36.8,25.233,36.8,25.233" transform="translate(-21028.934 -8381.328)" fill="none" stroke="#535461" stroke-miterlimit="10" stroke-width="2"/>
+        <path id="Path_274" data-name="Path 274" d="M975.393,443.457c10.171,7.352,14.407,18.863,14.407,18.863s-12.279-.425-22.424-7.776S953,435.68,953,435.68,965.227,436.1,975.393,443.457Z" transform="translate(-21058.393 -8361.549)" fill="#00abf6"/>
+        <path id="Path_275" data-name="Path 275" d="M953,435.68s12.719,7.06,16.8,12.9,20.03,13.737,20.03,13.737" transform="translate(-21058.393 -8361.549)" fill="none" stroke="#535461" stroke-miterlimit="10" stroke-width="2"/>
+        <path id="Path_276" data-name="Path 276" d="M1040.3,470.483c-11.68,12.836-14.151,29.612-14.151,29.612s16.469-4.042,28.139-16.883,14.151-29.612,14.151-29.612S1051.981,457.647,1040.3,470.483Z" transform="translate(-21094.119 -8370.301)" fill="#00abf6"/>
+        <path id="Path_277" data-name="Path 277" d="M1068.45,453.61s-15.215,13.159-19.083,22.224S1026.15,500.1,1026.15,500.1" transform="translate(-21094.119 -8370.306)" fill="none" stroke="#535461" stroke-miterlimit="10" stroke-width="2"/>
+      </g>
+      <g id="Group_638" data-name="Group 638" transform="translate(-40 36)">
+        <rect id="Rectangle_254" data-name="Rectangle 254" width="12.343" height="37.459" transform="translate(741.459 392.675)" fill="#3f3d56"/>
+        <rect id="Rectangle_255" data-name="Rectangle 255" width="12.343" height="39.629" transform="translate(1073.647 390.726)" fill="#3f3d56"/>
+        <path id="Path_418" data-name="Path 418" d="M597.889,523.665v8.446l-98.7.909-1.052.02-37.511.344-.9.013-11.4.1h-.338l-69.5.643L264.408,535.2h-.1l-29.007.273-.312.007L106.1,536.658v-9.745l30.306-18.19,60.808-.507,1.3-.007.429-.007,1.3-.019,29.2-.24,1.306-.007.416-.007,1.3-.006,9.362-.078.247-.006,23.1-.195h.188l180.214-1.52,4.411-.032h.442l3.365-.033,24.459-.2,1.3-.02,1.2-.013h.624l7.607-.058,1.507-.02,2.02-.013,6.334-.058,10.05-.084,1.3-.013,2.261-.013h.422l48.536-.416Z" transform="translate(566.82 43)" fill="#65617d"/>
+        <path id="Path_419" data-name="Path 419" d="M597.889,523.665v8.446l-98.7.909-1.052.02-37.511.344-.9.013-11.4.1h-.338l-69.5.643L264.408,535.2h-.1l-29.007.273-.312.007L106.1,536.658v-9.745l30.306-18.19,60.808-.507,1.3-.007.429-.007,1.3-.019,29.2-.24,1.306-.007.416-.007,1.3-.006,9.362-.078.247-.006,23.1-.195h.188l180.214-1.52,4.411-.032h.442l3.365-.033,24.459-.2,1.3-.02,1.2-.013h.624l7.607-.058,1.507-.02,2.02-.013,6.334-.058,10.05-.084,1.3-.013,2.261-.013h.422l48.536-.416Z" transform="translate(566.82 43)" opacity="0.2"/>
+        <path id="Path_420" data-name="Path 420" d="M358.914,656.57v15.91a3.982,3.982,0,0,1-2.274,3.6,3.9,3.9,0,0,1-1.624.39l-22.673.481a3.9,3.9,0,0,1-1.754-.37,3.976,3.976,0,0,1-2.319-3.619V656.57Z" transform="translate(437.441 -122.381)" fill="#3f3d56"/>
+        <path id="Path_421" data-name="Path 421" d="M358.914,656.57v15.91a3.982,3.982,0,0,1-2.274,3.6,3.9,3.9,0,0,1-1.624.39l-22.673.481a3.9,3.9,0,0,1-1.754-.37,3.976,3.976,0,0,1-2.319-3.619V656.57Z" transform="translate(437.441 -122.381)" opacity="0.1"/>
+        <path id="Path_422" data-name="Path 422" d="M360.914,656.57v15.91a3.982,3.982,0,0,1-2.274,3.6,3.9,3.9,0,0,1-1.624.39l-22.673.481a3.9,3.9,0,0,1-1.754-.37,3.976,3.976,0,0,1-2.319-3.619V656.57Z" transform="translate(436.74 -122.381)" fill="#3f3d56"/>
+        <rect id="Rectangle_256" data-name="Rectangle 256" width="30.644" height="20.464" transform="translate(1046.362 534.189)" fill="#3f3d56"/>
+        <rect id="Rectangle_257" data-name="Rectangle 257" width="30.644" height="20.464" transform="translate(1046.362 534.189)" opacity="0.1"/>
+        <rect id="Rectangle_258" data-name="Rectangle 258" width="30.644" height="20.464" transform="translate(1045.062 534.189)" fill="#3f3d56"/>
+        <path id="Path_423" data-name="Path 423" d="M223.943,265.82v3.723l-12.343-.318v-3.4Z" transform="translate(529.859 126.848)" opacity="0.1"/>
+        <path id="Path_424" data-name="Path 424" d="M358.741,271.246,343.909,377.789a2.794,2.794,0,0,1-2.839,2.41L222.314,377.12l-2.254-.058a2.794,2.794,0,0,1-2.7-3.164l16.651-111.533a2.794,2.794,0,0,1,2.949-2.358l119.186,8.069a2.787,2.787,0,0,1,2.6,3.17Z" transform="translate(476.307 16.556)" fill="#65617d"/>
+        <path id="Path_425" data-name="Path 425" d="M169.158,99.16,156.6,197.472l109.142,3.463,13.422-94.85Z" transform="translate(549.128 185.237)" fill="#00ddf1"/>
+        <rect id="Rectangle_259" data-name="Rectangle 259" width="132.965" height="112.605" rx="5.33" transform="translate(853.849 282.877)" fill="#65617d"/>
+        <rect id="Rectangle_260" data-name="Rectangle 260" width="120.836" height="93.765" transform="translate(860.125 290.458)" fill="#00ddf1"/>
+        <path id="Path_426" data-name="Path 426" d="M735.273,262.82v2.462l-12.343.253V262.82Z" transform="translate(350.717 127.899)" opacity="0.1"/>
+        <path id="Path_427" data-name="Path 427" d="M833.626,371a2,2,0,0,1-1.949,2.131l-121.615,2.514a2,2,0,0,1-2.033-1.813L697.575,265.156a2,2,0,0,1,1.9-2.189l120.693-6,1.3-.065a1.994,1.994,0,0,1,2.092,1.819Z" transform="translate(308.06 17.643)" fill="#65617d"/>
+        <path id="Path_428" data-name="Path 428" d="M628.93,100.238,739.157,94.82l9.31,98.748-109.356,2.6Z" transform="translate(383.65 186.757)" fill="#00ddf1"/>
+        <path id="Path_429" data-name="Path 429" d="M899.741,371a2,2,0,0,1-1.949,2.131L886.28,256.963l1.3-.065a2,2,0,0,1,2.092,1.819Z" transform="translate(241.945 17.643)" opacity="0.1"/>
+        <rect id="Rectangle_261" data-name="Rectangle 261" width="12.343" height="11.096" transform="translate(741.459 419.038)" opacity="0.1"/>
+        <path id="Path_431" data-name="Path 431" d="M281.574,483.65v3.229l-30.644.819V483.65Z" transform="translate(516.08 50.533)" opacity="0.1"/>
+        <path id="Path_432" data-name="Path 432" d="M390.8,483.886V593.158a2.6,2.6,0,0,1-2.5,2.566l-124.506,3.313h-.033a2.6,2.6,0,0,1-2.566-2.566V483.886a2.6,2.6,0,0,1,2.566-2.566H388.23A2.6,2.6,0,0,1,390.8,483.886Z" transform="translate(460.942 -60.983)" fill="#65617d"/>
+        <path id="Path_434" data-name="Path 434" d="M194.6,319.15H309.914v96.311L194.6,418.06Z" transform="translate(535.815 108.164)" fill="#d4dfec"/>
+        <rect id="Rectangle_262" data-name="Rectangle 262" width="12.343" height="11.317" transform="translate(1073.647 419.038)" opacity="0.1"/>
+        <path id="Path_435" data-name="Path 435" d="M709.574,483.65v4.164L678.93,487V483.65Z" transform="translate(366.132 50.533)" opacity="0.1"/>
+        <path id="Path_436" data-name="Path 436" d="M797.782,483.886V596.471a2.6,2.6,0,0,1-2.6,2.566h0l-124.532-3.313a2.6,2.6,0,0,1-2.5-2.566V483.886a2.6,2.6,0,0,1,2.566-2.566H795.19a2.6,2.6,0,0,1,2.592,2.566Z" transform="translate(318.365 -60.983)" fill="#65617d"/>
+        <path id="Path_437" data-name="Path 437" d="M866.289,483.886V596.471a2.6,2.6,0,0,1-2.6,2.566h0V481.32h0a2.6,2.6,0,0,1,2.6,2.566Z" transform="translate(249.859 -60.983)" opacity="0.1"/>
+        <path id="Path_438" data-name="Path 438" d="M713.414,319.15H598.1v96.311l115.314,2.6Z" transform="translate(394.451 108.164)" fill="#d4dfec"/>
+        <path id="Path_439" data-name="Path 439" d="M593.3,483.886V593.158a2.6,2.6,0,0,1-2.5,2.566l-124.506,3.313h0a2.6,2.6,0,0,1-2.6-2.566V483.886a2.6,2.6,0,0,1,2.566-2.566H590.73A2.6,2.6,0,0,1,593.3,483.886Z" transform="translate(389.997 -60.983)" fill="#65617d"/>
+        <path id="Path_440" data-name="Path 440" d="M397.1,319.15H512.414v96.311L397.1,418.06Z" transform="translate(464.87 108.164)" fill="#d4dfec"/>
+        <path id="Path_441" data-name="Path 441" d="M597.889,533.65V542.1l-98.7.909-1.052.02-37.511.344-.9.013-11.4.1h-.338l-69.5.643-114.086,1.059h-.1l-29.007.273-.312.007L106.1,546.643V536.9l131.562-.864h.312l26.629-.182h.123l183.9-1.215h.188l.11-.006h.305l3.112-.019h.948l48.393-.325,2.858-.013.637-.007Z" transform="translate(566.82 33.015)" opacity="0.1"/>
+        <circle id="Ellipse_99" data-name="Ellipse 99" cx="33.347" cy="33.347" r="33.347" transform="translate(887.196 363.44)" fill="#fbbebe"/>
+        <path id="Path_442" data-name="Path 442" d="M383.74,592.973a.806.806,0,0,1,.065-.227c.65-2.332,1.806-6.276,2.67-9.427.11-.39.214-.773.312-1.137.955-3.554,2.813-11.876,3.846-17.066.364-1.826.65-3.248.708-3.963.13-1.1,2.085-5.795,4.3-11.194,1.553-3.794,3.248-7.939,4.489-11.434a39.876,39.876,0,0,0,1.9-6.4,3.313,3.313,0,0,0,0-1.384,9.543,9.543,0,0,1-.312-2.274h0c-.149-4.028,1.052-10.394,2.91-13.065,2.274-3.248,3.9-15.371,3.9-15.371s3.365.487,3.9-2.293a4,4,0,0,0,.065-.91,4.815,4.815,0,0,0-.058-.721c-.578-4.054,9.563-8.368,15.267-9.3a12.769,12.769,0,0,1,1.949-.182,17.694,17.694,0,0,0,4.06-.935q.909-.279,1.949-.65c2.391-.806,5.249-1.871,8.283-3.04,11.408-4.424,25.22-10.394,25.22-10.394.1-.461.208-.9.331-1.338a18,18,0,0,1,10.622-12.3h0v-1.3c0-2.241-.1-4.548-.195-6.847,0-.448-.039-.9-.065-1.345v-.734c0-.455-.046-.91-.071-1.358l-.117-.091a10.66,10.66,0,0,1-2.534-2.729,9.916,9.916,0,0,1-.923-1.949c-.812-2.2-1-4.658-1.546-6.984l-.117-.481a54.579,54.579,0,0,0-2.6-6.873c-1.436-3.521-2.54-7.146-3.638-10.817q-1-3.333-2.02-6.678l-1.026-3.4c-.195-.65-.39-1.3-.539-1.949h0a8.627,8.627,0,0,1-.169-.91h0a6.5,6.5,0,0,1,.156-2.995,20.854,20.854,0,0,1,.858-1.949,5.113,5.113,0,0,0,.325-.9h0a1.947,1.947,0,0,0,.052-.208,3.667,3.667,0,0,0,.071-.7,11.993,11.993,0,0,0-.338-2.527.045.045,0,0,1,0-.032,1.661,1.661,0,0,0-.032-.175,16.564,16.564,0,0,1-.234-1.949,18.483,18.483,0,0,1,2.254-10.115l.123-.234a16.383,16.383,0,0,1,1.2-1.806h0a9.122,9.122,0,0,1,.65-.793,2.594,2.594,0,0,1-3.606-.936,2.475,2.475,0,0,1-.149-.292c-.033-.078-.059-.162-.085-.247-.455-1.592.338-3.287,1.377-4.58a12.012,12.012,0,0,1,3.729-3.053h0a2.51,2.51,0,0,1,.26-.136,11.125,11.125,0,0,1,1.715-.689h0a9.781,9.781,0,0,1,1.059-.286l-2.41-.221-.974-.091A9.414,9.414,0,0,1,479,361.527h.7a7.625,7.625,0,0,1,1.02.084A2.885,2.885,0,0,1,479,358.8a9.362,9.362,0,0,0,5.97,1.988h.247a19.494,19.494,0,0,1-.221-2.124h0a21.545,21.545,0,0,1,0-2.9,5.483,5.483,0,0,0,4.4,1.468l-1.351-1.884a6.165,6.165,0,0,0,4.262,1.332l.312-.033a4.547,4.547,0,0,0,.773-.149h.058c-.123-.156-.234-.318-.344-.487l-.039-.078a6.282,6.282,0,0,1-.65-1.358,4.284,4.284,0,0,1-.156-.565h0a5.684,5.684,0,0,1,.292-3.541c2.1,1.754,4.4,4.151,7.146,2.339s2.839-5.139,7.146-4.8a6.626,6.626,0,0,1,5.464,3.976,4.385,4.385,0,0,1,4.983-1.137,4.45,4.45,0,0,1,2.521,4.476c1.786-.448,3.71-.89,5.425-.214s2.82,2.865,1.845,4.327a.931.931,0,0,1-.091.13c-.8,1.033-2.566,1.6-2.378,2.9l.273.195.845.611q4.97,3.586,9.68,7.536c1.611,1.351,3.326,2.975,3.437,5.087a5.617,5.617,0,0,1-.156,1.54h0c-.1.507-.247,1.013-.357,1.52a12.676,12.676,0,0,0-.221,3.93h0c.045.383.1.76.175,1.143.994,5.022,5.009,9.167,5.405,14.292v.364a11.546,11.546,0,0,1-.045,1.644c-.3,3.118-1.741,6.113-2.91,9.1-.072.182-.143.364-.208.546a90.5,90.5,0,0,0-4.548,18.294,65.14,65.14,0,0,1-1.3,6.555,17.365,17.365,0,0,1-3.307,6.776,10.536,10.536,0,0,1-2.183,1.949,12.132,12.132,0,0,1-1.722.916v.039c.071.4.13.793.2,1.189.039.208.071.416.11.65h0a.089.089,0,0,0,0,.039c.546,3.073,1.169,6.081,1.826,8.939l.331,1.423c8.186,2.956,9.154,9.011,9.212,11.33a6.259,6.259,0,0,1,0,.929s12.343.325,17.216,3.9a13.21,13.21,0,0,0,2.93,1.494,53.917,53.917,0,0,0,6.009,1.877c1.046.273,2.137.539,3.248.8,1.949.448,4.015.884,6.009,1.3,5.321,1.072,10.33,1.949,12.87,2.6,6.061,1.533,19.925,14.825,19.925,14.825s1.624,13.409,3.248,15.364,4.548,8.829,4.548,8.829l10.745,19.106,4.548,8.036h2.923a4.97,4.97,0,0,1,2.085,1.364c.773.689,1.631,1.546,2.384,2.326l1.247,1.332.78.864s4.723.117,6,3.852c3.846-.11,8.569.143,11.876,1.624a9.187,9.187,0,0,1,1.3.7,5.639,5.639,0,0,1,2.683,3.677,5.422,5.422,0,0,1,.117.935c0,.37,0,.741,0,1.1-.234,4.918-3.437,9.011-6.38,11.765l.208.37s-.1.234-.286.65c-.052.123-.117.26-.188.416h0c-.383.819-.994,2.046-1.793,3.482a41.136,41.136,0,0,1-6.217,8.556l-.188.195-37.511.344-.11-.13-7.276-8.679-3.619-4.314-.11-.136-.1,1.033-.351,3.443-.845,8.322-.045.416v.11l-.1.961.071-.961h-.188l-69.513.65-114.092,1.26v.546h-.091v-.546l-29.072.312Z" transform="translate(418.007 -14.269)" fill="url(#linear-gradient)"/>
+        <path id="Path_443" data-name="Path 443" d="M586.185,511.522s-64.641,7.8-58.469,0c2.235-2.82,2.852-11.174,2.729-20.691-.039-2.891-.143-5.886-.292-8.868-.715-14.292-2.436-28.26-2.436-28.26s56.52-26.636,50.023-5.522c-2.6,8.53-1.748,20.51.227,31.755.578,3.281,1.247,6.5,1.949,9.55a223.892,223.892,0,0,0,6.269,22.036Z" transform="translate(367.711 -46.521)" fill="#fbbebe"/>
+        <path id="Path_444" data-name="Path 444" d="M586.185,537.354s-64.641,7.8-58.469,0c2.235-2.82,2.852-11.174,2.729-20.692,9.855-4.21,22.394-1.072,22.394-1.072,13.2-2.631,21.666-2.118,27.078-.273A223.888,223.888,0,0,0,586.185,537.354Z" transform="translate(367.711 -72.353)" opacity="0.1"/>
+        <path id="Path_445" data-name="Path 445" d="M413.346,651.973v-.546l114.092-1.241,69.513-.65h.195l-.071.961.1-.961h.123v-.11l.89-8.738.338-3.307.1-1.033.091-.864,4.015-13.389,4.015-13.37,3.378-11.258,5.158-17.2s-2.923-6.821-4.548-8.77-3.248-15.267-3.248-15.267-13.864-13.208-19.925-14.728c-2.54-.65-7.555-1.514-12.883-2.6-1.994-.4-4.041-.832-6.009-1.3-1.111-.253-2.2-.52-3.248-.786a57.086,57.086,0,0,1-6.009-1.858,13.448,13.448,0,0,1-2.924-1.488c-4.775-3.5-16.742-3.9-17.2-3.9h0a.269.269,0,0,1,0-.045v-.058a6.66,6.66,0,0,0,0-.819,5.208,5.208,0,0,0-.059-.91.82.82,0,0,0-.045-.325c-.032-.234-.071-.481-.13-.741a3.226,3.226,0,0,0-.078-.344,11.181,11.181,0,0,0-.812-2.267c-.045-.1-.1-.214-.156-.318a11.861,11.861,0,0,0-1.1-1.709c-.084-.11-.175-.227-.273-.338a12.721,12.721,0,0,0-1.767-1.715c-.175-.136-.357-.279-.546-.409a3.026,3.026,0,0,0-.331-.234l-.578-.377-.539-.312c-.474-.26-.974-.513-1.52-.754-.169-.078-.351-.149-.533-.221s-.468-.182-.708-.273h-.039l-.487-.195c-.37-.123-.747-.234-1.143-.344l-.6-.156-.65-.149-.65-.136c-.65-.13-1.345-.247-2.072-.338l-.741-.091-.76-.078-.786-.065-1.117-.065-1.3-.045a81.017,81.017,0,0,0-17.054,1.814,46.946,46.946,0,0,0-11.855-1.093h-.565l-.65.039h-.416l-.838.078a6.224,6.224,0,0,0-.845.1c-.279.039-.572.071-.851.117l-.429.071c-.422.071-.851.149-1.3.24q-.214.039-.429.1c-.565.123-1.13.273-1.689.442-.279.078-.559.169-.838.266-.143.039-.279.091-.416.143l-.416.149-.409.162-.487.195c-.247.1-.487.214-.728.331-.136.058-.273.123-.4.195s-.266.13-.39.2a18.03,18.03,0,0,0-4.034,2.846l-.331.318-.325.331c-.11.11-.214.227-.318.344a15.473,15.473,0,0,0-1.182,1.462c-.1.136-.2.273-.3.416a17.335,17.335,0,0,0-1.117,1.9c-.084.156-.162.318-.24.474a21.243,21.243,0,0,0-1.3,3.411q-.182.65-.331,1.3s-13.753,6.068-25.161,10.46c-3.034,1.169-5.892,2.228-8.283,3.027-.7.234-1.345.448-1.949.65a17.347,17.347,0,0,1-4.06.935,12.778,12.778,0,0,0-1.949.182c-5.243.851-14.227,4.548-15.208,8.257a2.4,2.4,0,0,0-.065.91v.071c.65,4.548-3.9,3.9-3.9,3.9s-1.624,12.019-3.9,15.267c-1.644,2.339-2.768,7.555-2.91,11.492h0a12.741,12.741,0,0,0,.286,3.658v.091c.26.871-.364,3.248-1.423,6.3-1.15,3.346-2.826,7.5-4.437,11.427-2.43,5.925-4.716,11.3-4.859,12.486-.058.526-.227,1.468-.461,2.683-.948,4.95-3.053,14.377-4.093,18.19-.773,2.845-1.9,6.743-2.67,9.42a.91.91,0,0,1-.065.227l29.124-.286v.546h.091Z" transform="translate(417.856 -73.042)" fill="#00ddf1"/>
+        <path id="Path_446" data-name="Path 446" d="M445.44,607.57s37.03,19.165,50.348,16.891Z" transform="translate(396.391 -105.214)" opacity="0.1"/>
+        <path id="Path_447" data-name="Path 447" d="M561.44,595.57s36.056,11.694,48.074,13.318S561.44,595.57,561.44,595.57Z" transform="translate(355.751 -101.01)" opacity="0.1"/>
+        <path id="Path_448" data-name="Path 448" d="M585.443,530.686c-18.84,3.469-54.311,2.722-69.643,2.2,5.62-20.139,33.022-13.292,33.022-13.292C582.74,512.821,585.339,526.866,585.443,530.686Z" transform="translate(371.74 -73.754)" opacity="0.1"/>
+        <path id="Path_449" data-name="Path 449" d="M585.443,528.686c-18.84,3.469-54.311,2.722-69.643,2.2,5.62-20.139,33.022-13.292,33.022-13.292C582.74,510.821,585.339,524.866,585.443,528.686Z" transform="translate(371.74 -73.053)" fill="#00ddf1"/>
+        <path id="Path_450" data-name="Path 450" d="M776.94,672.008s22.192-3.411,22.628,6.334S788.25,694.9,788.25,694.9Z" transform="translate(280.251 -127.587)" fill="#fbbebe"/>
+        <path id="Path_451" data-name="Path 451" d="M578.17,479.936a30.558,30.558,0,0,1-2.923,1.13c-7,2.417-14.065,4.853-21.439,5.736s-15.111.1-21.543-3.573a18.685,18.685,0,0,1-1.949-1.267c-.715-14.292-2.436-28.26-2.436-28.26s56.52-26.636,50.023-5.522C575.318,456.711,576.195,468.69,578.17,479.936Z" transform="translate(367.508 -46.521)" opacity="0.1"/>
+        <path id="Path_452" data-name="Path 452" d="M536.9,360.29a6.153,6.153,0,0,1-5.405-1.137l1.351,1.878a5.5,5.5,0,0,1-4.4-1.462,22.146,22.146,0,0,0,.208,5.035,9.433,9.433,0,0,1-6.211-1.949,2.872,2.872,0,0,0,1.715,2.8,9.316,9.316,0,0,0-10.135,6.958l3.391.312a12,12,0,0,0-6.782,4.138c-1.039,1.3-1.832,2.962-1.377,4.548s2.651,2.6,3.846,1.468a18.151,18.151,0,0,0-3.963,14.806,9.4,9.4,0,0,1,.3,3.417,28.993,28.993,0,0,1-1.228,3.047c-.65,1.9-.032,3.956.546,5.847l3.047,10.018c1.1,3.619,2.2,7.244,3.645,10.745a53.328,53.328,0,0,1,2.6,6.828c.819,3.144.851,6.588,2.6,9.336a12.948,12.948,0,0,0,4.665,4.112c6.425,3.677,14.188,4.457,21.542,3.573s14.409-3.32,21.406-5.736a20.141,20.141,0,0,0,4.444-1.949c4.84-3.17,5.918-9.654,6.821-15.364a87.242,87.242,0,0,1,4.736-18.71c1.416-3.567,3.248-7.185,2.936-11.005-.4-5.074-4.411-9.186-5.405-14.175a12.344,12.344,0,0,1,.045-5.048,11.473,11.473,0,0,0,.513-3.053c-.11-2.092-1.826-3.7-3.437-5.048q-5.243-4.379-10.823-8.277c-.188-1.3,1.579-1.858,2.378-2.884,1.13-1.449-.039-3.748-1.754-4.424s-3.638-.234-5.425.214a4.281,4.281,0,0,0-7.5-3.32,6.627,6.627,0,0,0-5.47-3.95c-4.307-.338-4.392,2.956-7.146,4.768s-5.028-.578-7.146-2.319A6.029,6.029,0,0,0,536.9,360.29Z" transform="translate(374.5 -15.625)" fill="#3f3d56"/>
+        <path id="Path_453" data-name="Path 453" d="M768.171,669.128s-.578,1.377-1.644,3.372a44.83,44.83,0,0,1-5.847,8.556l-.175.188h-1.052l-37.511.344h-.9l-.11-.13-7.276-8.634-2.741-3.255-.11-.136-.234-.273-.13-.156-.169-.2-5.334-6.328,1.949-8.121,3.32-13.682.084-.331.65-2.6.461-1.949,1.546-6.354,5.3-21.861,9.42,4.872,9.933,17.541,5.334,9.42h2.923c.552,0,1.819,1.065,3.092,2.293.455.435.91.9,1.3,1.3,1.156,1.2,2.072,2.222,2.072,2.222s4.736.1,6.009,3.833a4.537,4.537,0,0,1,.162.552,26.191,26.191,0,0,0,1.644,4.262c.838,1.826,1.891,3.9,2.956,5.97,1.981,3.8,4,7.419,4.736,8.731l.091.162Z" transform="translate(305.476 -105.217)" fill="#00ddf1"/>
+        <path id="Path_454" data-name="Path 454" d="M615.681,653.093l-.065.929v.065l-.11,1.494-.864,12.025L613.6,682.093l-.3,4.08-.65,8.731v.11l-69.513.65L429.061,696.9v.546h-.091v-.728l.292-9.329.559-18.229L430.3,653.7l.045-1.54a6.841,6.841,0,0,1,7.419-6.607c3.066.26,7.049.578,11.811.916l1.949.143c27.5,1.91,78.322,4.379,129.606,1.3,1.078-.059,2.163-.123,3.248-.2,7.952-.5,15.9-1.143,23.764-1.949a6.841,6.841,0,0,1,7.536,7.3Z" transform="translate(402.161 -118.514)" opacity="0.1"/>
+        <path id="Path_455" data-name="Path 455" d="M429.08,698.857v-.546l114.092-1.241,69.513-.65h.195v-.11l.65-8.731.279-3.9,1.065-14.689.838-11.629v-.286a6.893,6.893,0,0,0-.071-1.6.2.2,0,0,0,0-.065,6.751,6.751,0,0,0-1.3-3.014,6.847,6.847,0,0,0-6.12-2.6c-7.867.806-15.813,1.449-23.764,1.949-1.085.078-2.17.143-3.248.2-51.284,3.047-102.106.578-129.606-1.3l-1.949-.143c-4.762-.338-8.744-.65-11.811-.916a6.847,6.847,0,0,0-7.3,5.542,7.146,7.146,0,0,0-.117,1.065l-.442,14.4-.6,18.236-.286,9.329v.728Z" transform="translate(402.122 -119.926)" fill="#3f3d56"/>
+        <path id="Path_456" data-name="Path 456" d="M615.925,661.692l-.8,9.959L613.937,686.5l-.3,3.716-.65,8.322-.039.416v.11h0l-.1.961.071-.961h-.188l-69.513.65L429.11,700.944v-.182l.318-9.329.65-18.229.416-12.116a4.132,4.132,0,0,1,1.988-3.411,4.061,4.061,0,0,1,2.456-.585c1.364.11,3.04.24,5,.383,3.177.234,7.094.507,11.655.793,8.445.533,19.041,1.1,31.183,1.572,33.782,1.3,79.388,1.735,122.707-2.059,1.949-.169,3.963-.357,5.931-.546a4.066,4.066,0,0,1,2.261.429,3.346,3.346,0,0,1,.559.351,3.989,3.989,0,0,1,1.3,1.6,2.315,2.315,0,0,1,.162.4A4.08,4.08,0,0,1,615.925,661.692Z" transform="translate(402.112 -122.559)" opacity="0.1"/>
+        <path id="Path_457" data-name="Path 457" d="M360.914,677.87v2.072a3.982,3.982,0,0,1-2.274,3.6l-26.051.5a3.976,3.976,0,0,1-2.319-3.619v-1.949Z" transform="translate(436.74 -129.843)" opacity="0.1"/>
+        <path id="Path_458" data-name="Path 458" d="M280.294,512.532l-33.944.65V507.55l33.944-.65Z" transform="translate(517.685 42.387)" fill="#3f3d56"/>
+        <path id="Path_459" data-name="Path 459" d="M280.294,512.532l-33.944.65V507.55l33.944-.65Z" transform="translate(517.685 42.387)" opacity="0.1"/>
+        <path id="Path_460" data-name="Path 460" d="M282.294,512.532l-33.944.65V507.55l33.944-.65Z" transform="translate(516.984 42.387)" fill="#3f3d56"/>
+        <path id="Path_461" data-name="Path 461" d="M552.228,360.039A6.334,6.334,0,0,1,551,357.22a6.165,6.165,0,0,0,.273,2.988A5.847,5.847,0,0,0,552.228,360.039Z" transform="translate(359.434 -17.505)"/>
+        <path id="Path_462" data-name="Path 462" d="M540.1,366.9a22.83,22.83,0,0,1-.24-2.4c0,.8,0,1.6,0,2.41Z" transform="translate(363.311 -20.056)"/>
+        <path id="Path_463" data-name="Path 463" d="M621.706,398.627a11.912,11.912,0,0,1,.234-1.722,11.7,11.7,0,0,0,.52-3.047,4.008,4.008,0,0,0-.1-.689c-.11.6-.286,1.2-.416,1.787a12.433,12.433,0,0,0-.234,3.671Z" transform="translate(334.652 -30.1)"/>
+        <path id="Path_464" data-name="Path 464" d="M600.922,368.894l.708.513a12.8,12.8,0,0,0,1.67-1.442,2.384,2.384,0,0,0,.247-2.365,1.95,1.95,0,0,1-.247.416C602.5,367.042,600.734,367.607,600.922,368.894Z" transform="translate(341.923 -20.441)"/>
+        <path id="Path_465" data-name="Path 465" d="M518.455,380.29a8,8,0,0,0-.565,1.481,11.8,11.8,0,0,1,3.248-1.228Z" transform="translate(371.008 -25.587)"/>
+        <path id="Path_466" data-name="Path 466" d="M531.888,368.979a9.637,9.637,0,0,1-1.221-.8,2.758,2.758,0,0,0,.058.767,7.7,7.7,0,0,1,1.163.033Z" transform="translate(366.534 -21.345)"/>
+        <path id="Path_467" data-name="Path 467" d="M587.579,428.33c-.266,3.151-1.735,6.185-2.923,9.173a87.2,87.2,0,0,0-4.736,18.717c-.9,5.71-1.949,12.194-6.821,15.358a19.488,19.488,0,0,1-4.437,1.949c-7,2.423-14.065,4.853-21.439,5.736s-15.111.11-21.543-3.567a12.993,12.993,0,0,1-4.664-4.112c-1.735-2.748-1.767-6.191-2.6-9.336a53.424,53.424,0,0,0-2.6-6.834c-1.436-3.5-2.54-7.146-3.638-10.739q-1.527-5.009-3.047-10.024a18.716,18.716,0,0,1-.741-3.086,11.644,11.644,0,0,0,.741,5.035q1.52,5.022,3.047,10.024c1.1,3.619,2.2,7.244,3.638,10.739a53.417,53.417,0,0,1,2.6,6.834c.819,3.144.851,6.587,2.6,9.336a12.993,12.993,0,0,0,4.664,4.112c6.432,3.677,14.188,4.45,21.543,3.567s14.409-3.313,21.439-5.736a19.487,19.487,0,0,0,4.437-1.949c4.84-3.164,5.918-9.647,6.821-15.358a87.2,87.2,0,0,1,4.736-18.717c1.416-3.56,3.248-7.179,2.936-11.005C587.592,428.408,587.579,428.369,587.579,428.33Z" transform="translate(374.359 -42.418)"/>
+        <path id="Path_468" data-name="Path 468" d="M510.318,421.419v-.071a9.1,9.1,0,0,0-.3-3.411,17.272,17.272,0,0,1-.253-2.157,17.769,17.769,0,0,0,.253,4.106C510.123,420.393,510.24,420.906,510.318,421.419Z" transform="translate(373.864 -38.021)"/>
+        <path id="Path_469" data-name="Path 469" d="M512.452,397.929a18.02,18.02,0,0,1,1.7-2.384c-1.189,1.137-3.385.123-3.846-1.455a3.788,3.788,0,0,0,0,1.949,2.852,2.852,0,0,0,2.15,1.89Z" transform="translate(373.712 -30.422)"/>
+        <path id="Path_470" data-name="Path 470" d="M762.946,656.57s2.059,7.471,0,13.968S762.946,656.57,762.946,656.57Z" transform="translate(285.475 -122.381)" opacity="0.1"/>
+        <path id="Path_471" data-name="Path 471" d="M776,668.3s.864,9.485-1.085,11.168S776,668.3,776,668.3Z" transform="translate(281.189 -126.49)" opacity="0.1"/>
+        <line id="Line_88" data-name="Line 88" y1="0.65" x2="66.011" transform="translate(733.267 442.068)" fill="none" stroke="#00ddf1" stroke-miterlimit="10" stroke-width="2"/>
+        <line id="Line_89" data-name="Line 89" y1="0.643" x2="66.011" transform="translate(733.267 450.176)" fill="none" stroke="#00ddf1" stroke-miterlimit="10" stroke-width="2"/>
+        <line id="Line_90" data-name="Line 90" y1="0.65" x2="66.011" transform="translate(733.267 458.277)" fill="none" stroke="#00ddf1" stroke-miterlimit="10" stroke-width="2"/>
+      </g>
+    </g>
+  </g>
+</svg>
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import Parse from "parse";
 import Loader from "../primitives/Loader";
 import { useTranslation } from "react-i18next";
+import { emailRegex } from "../constant/const";

 const AddSigner = (props) => {
  const { t } = useTranslation();
@@ -23,7 +24,7 @@ const AddSigner = (props) => {
    if (savedUserDetails && addYourself) {
      setName(savedUserDetails.name);
      setPhone(savedUserDetails?.phone || "");
-      setEmail(savedUserDetails.email);
+      setEmail(savedUserDetails.email?.toLowerCase()?.replace(/\s/g, ""));
    }
  }, [addYourself]);

@@ -47,139 +48,145 @@ const AddSigner = (props) => {
  const handleSubmit = async (e) => {
    e.preventDefault();
    e.stopPropagation();
-    setIsLoader(true);
-    if (localStorage.getItem("TenantId")) {
-      try {
-        const user = Parse.User.current();
-        const query = new Parse.Query("contracts_Contactbook");
-        query.equalTo("CreatedBy", user);
-        query.notEqualTo("IsDeleted", true);
-        query.equalTo("Email", email);
-        const res = await query.first();
-        // console.log(res);
-        if (!res) {
-          const contactQuery = new Parse.Object("contracts_Contactbook");
-          contactQuery.set("Name", name);
-          if (phone) {
-            contactQuery.set("Phone", phone);
-          }
-          contactQuery.set("Email", email);
-          contactQuery.set("UserRole", "contracts_Guest");
-
-          contactQuery.set("TenantId", {
-            __type: "Pointer",
-            className: "partners_Tenant",
-            objectId: localStorage.getItem("TenantId")
-          });
-
-          try {
-            const _users = Parse.Object.extend("User");
-            const _user = new _users();
-            _user.set("name", name);
-            _user.set("username", email);
-            _user.set("email", email);
-            _user.set("password", email);
+    if (!emailRegex.test(email)) {
+      alert("Please enter a valid email address.");
+    } else {
+      setIsLoader(true);
+      if (localStorage.getItem("TenantId")) {
+        try {
+          const user = Parse.User.current();
+          const query = new Parse.Query("contracts_Contactbook");
+          query.equalTo("CreatedBy", user);
+          query.notEqualTo("IsDeleted", true);
+          query.equalTo("Email", email);
+          const res = await query.first();
+          // console.log(res);
+          if (!res) {
+            const contactQuery = new Parse.Object("contracts_Contactbook");
+            contactQuery.set("Name", name);
            if (phone) {
-              _user.set("phone", phone);
+              contactQuery.set("Phone", phone);
            }
-            const user = await _user.save();
-            if (user) {
-              const currentUser = Parse.User.current();
-              contactQuery.set(
-                "CreatedBy",
-                Parse.User.createWithoutData(currentUser.id)
-              );
+            contactQuery.set("Email", email);
+            contactQuery.set("UserRole", "contracts_Guest");

-              contactQuery.set("UserId", user);
-              const acl = new Parse.ACL();
-              acl.setPublicReadAccess(true);
-              acl.setPublicWriteAccess(true);
-              acl.setReadAccess(currentUser.id, true);
-              acl.setWriteAccess(currentUser.id, true);
+            contactQuery.set("TenantId", {
+              __type: "Pointer",
+              className: "partners_Tenant",
+              objectId: localStorage.getItem("TenantId")
+            });

-              contactQuery.setACL(acl);
+            try {
+              const _users = Parse.Object.extend("User");
+              const _user = new _users();
+              _user.set("name", name);
+              _user.set("username", email);
+              _user.set("email", email);
+              _user.set("password", email);
+              if (phone) {
+                _user.set("phone", phone);
+              }
+              const user = await _user.save();
+              if (user) {
+                const currentUser = Parse.User.current();
+                contactQuery.set(
+                  "CreatedBy",
+                  Parse.User.createWithoutData(currentUser.id)
+                );

-              const res = await contactQuery.save();
+                contactQuery.set("UserId", user);
+                const acl = new Parse.ACL();
+                acl.setPublicReadAccess(true);
+                acl.setPublicWriteAccess(true);
+                acl.setReadAccess(currentUser.id, true);
+                acl.setWriteAccess(currentUser.id, true);

-              const parseData = JSON.parse(JSON.stringify(res));
-              if (props.details) {
-                props.details({
-                  value: parseData[props.valueKey],
-                  label: parseData[props.displayKey]
+                contactQuery.setACL(acl);
+
+                const res = await contactQuery.save();
+
+                const parseData = JSON.parse(JSON.stringify(res));
+                if (props.details) {
+                  props.details({
+                    value: parseData[props.valueKey],
+                    label: parseData[props.displayKey],
+                    email: parseData?.Email
+                  });
+                }
+                if (props.closePopup) {
+                  props.closePopup();
+                }
+                if (props.handleUserData) {
+                  props.handleUserData(parseData);
+                }
+
+                setIsLoader(false);
+                // Reset the form fields
+                setAddYourself(false);
+                setName("");
+                setPhone("");
+                setEmail("");
+              }
+            } catch (err) {
+              console.log("err ", err);
+              if (err.code === 202) {
+                const params = { email: email };
+                const userRes = await Parse.Cloud.run("getUserId", params);
+                const currentUser = Parse.User.current();
+                contactQuery.set(
+                  "CreatedBy",
+                  Parse.User.createWithoutData(currentUser.id)
+                );
+
+                contactQuery.set("UserId", {
+                  __type: "Pointer",
+                  className: "_User",
+                  objectId: userRes.id
                });
-              }
-              if (props.closePopup) {
-                props.closePopup();
-              }
-              if (props.handleUserData) {
-                props.handleUserData(parseData);
-              }
+                const acl = new Parse.ACL();
+                acl.setPublicReadAccess(true);
+                acl.setPublicWriteAccess(true);
+                acl.setReadAccess(currentUser.id, true);
+                acl.setWriteAccess(currentUser.id, true);

-              setIsLoader(false);
-              // Reset the form fields
-              setAddYourself(false);
-              setName("");
-              setPhone("");
-              setEmail("");
-            }
-          } catch (err) {
-            console.log("err ", err);
-            if (err.code === 202) {
-              const params = { email: email };
-              const userRes = await Parse.Cloud.run("getUserId", params);
-              const currentUser = Parse.User.current();
-              contactQuery.set(
-                "CreatedBy",
-                Parse.User.createWithoutData(currentUser.id)
-              );
-
-              contactQuery.set("UserId", {
-                __type: "Pointer",
-                className: "_User",
-                objectId: userRes.id
-              });
-              const acl = new Parse.ACL();
-              acl.setPublicReadAccess(true);
-              acl.setPublicWriteAccess(true);
-              acl.setReadAccess(currentUser.id, true);
-              acl.setWriteAccess(currentUser.id, true);
-
-              contactQuery.setACL(acl);
-              const res = await contactQuery.save();
-
-              const parseData = JSON.parse(JSON.stringify(res));
-              if (props.details) {
-                props.details({
-                  value: parseData[props.valueKey],
-                  label: parseData[props.displayKey]
-                });
-              }
-              if (props.closePopup) {
-                props.closePopup();
-              }
-              if (props.handleUserData) {
-                props.handleUserData(parseData);
-              }
-              setIsLoader(false);
-              // Reset the form fields
-              setAddYourself(false);
-              setName("");
-              setPhone("");
-              setEmail("");
+                contactQuery.setACL(acl);
+                const res = await contactQuery.save();
+
+                const parseData = JSON.parse(JSON.stringify(res));
+                if (props.details) {
+                  props.details({
+                    value: parseData[props.valueKey],
+                    label: parseData[props.displayKey],
+                    email: parseData?.Email
+                  });
+                }
+                if (props.closePopup) {
+                  props.closePopup();
+                }
+                if (props.handleUserData) {
+                  props.handleUserData(parseData);
+                }
+                setIsLoader(false);
+                // Reset the form fields
+                setAddYourself(false);
+                setName("");
+                setPhone("");
+                setEmail("");
+              }
            }
+          } else {
+            alert(t("add-signer-alert"));
+            setIsLoader(false);
          }
-        } else {
-          alert(t("add-signer-alert"));
+        } catch (err) {
+          console.log("err in fetch contact", err);
          setIsLoader(false);
+          alert(t("something-went-wrong-mssg"));
        }
-      } catch (err) {
-        console.log("err in fetch contact", err);
+      } else {
        setIsLoader(false);
        alert(t("something-went-wrong-mssg"));
      }
-    } else {
-      setIsLoader(false);
-      alert(t("something-went-wrong-mssg"));
    }
  };

@@ -206,6 +213,7 @@ const AddSigner = (props) => {
        </div>
      )}
      <div className="w-full mx-auto p-2 text-base-content">
+        <p className="mb-3 text-xs text-gray-500">{t("add-signer-note")}</p>
        {isUserExist && (
          <div className="mb-3 flex items-center">
            <input
@@ -268,6 +276,7 @@ const AddSigner = (props) => {
              onChange={(e) => setPhone(e.target.value)}
              disabled={addYourself}
              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+              placeholder={t("phone-optional")}
            />
          </div>
          <div className="mt-4 flex gap-x-2 justify-start">
@@ -1,198 +0,0 @@
-import React, { useEffect, useState } from "react";
-import Parse from "parse";
-import Title from "./Title";
-import Loader from "../primitives/Loader";
-import { useTranslation } from "react-i18next";
-
-const AddTeam = (props) => {
-  const { t } = useTranslation();
-  const [formdata, setFormdata] = useState({
-    name: "",
-    team: ""
-  });
-  const [isLoader, setIsLoader] = useState(false);
-  const [teamList, setTeamList] = useState([]);
-  useEffect(() => {
-    getTeamList();
-  }, []);
-
-  const getTeamList = async () => {
-    setIsLoader(true);
-    try {
-      const teams = await Parse.Cloud.run("getteams", { active: true });
-      const teamRes = JSON.parse(JSON.stringify(teams));
-      if (teamRes.length > 0) {
-        const _teamRes = JSON.parse(JSON.stringify(teamRes));
-        const allUsersteam = _teamRes.find((x) => x.Name === "All Users");
-        if (allUsersteam) {
-          setFormdata({ team: allUsersteam.objectId });
-        }
-        setTeamList(_teamRes);
-      }
-    } catch (err) {
-      console.log("Err in fetch top level teamList", err);
-    } finally {
-      setIsLoader(false);
-    }
-  };
-
-  const handleDropdown = (e) => {
-    setFormdata((prev) => ({ ...prev, [e.target.name]: e.target.value }));
-  };
-  // Define a function to handle form submission
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    // Extracting values except for the 'name' key
-    let updatedAncestors = [];
-    if (formdata.team) {
-      const Ancestors = teamList.find(
-        (x) => x.objectId === formdata.team
-      )?.Ancestors;
-      if (Ancestors && Ancestors.length > 0) {
-        updatedAncestors = Ancestors.map((x) => ({
-          __type: "Pointer",
-          className: "contracts_Teams",
-          objectId: x.objectId
-        }));
-      } else {
-        const AllUser = teamList.find((x) => x.objectId === "All Users");
-        updatedAncestors = [
-          AllUser,
-          {
-            __type: "Pointer",
-            className: "contracts_Teams",
-            objectId: formdata.team
-          }
-        ];
-      }
-    }
-    try {
-      setIsLoader(true);
-      let data = { Name: formdata.name };
-      if (updatedAncestors.length > 0) {
-        const ParentId = updatedAncestors[updatedAncestors.length - 1];
-        data["ParentId"] = ParentId?.objectId;
-        data["Ancestors"] = updatedAncestors;
-      }
-      const newTeamRes = await Parse.Cloud.run("addteam", data);
-      // console.log("teamRes ", newTeamRes);
-      if (updatedAncestors.length > 0) {
-        const ParentId = teamList.find((x) => x.objectId === formdata.team);
-        props.handleTeamInfo({
-          objectId: newTeamRes.id,
-          Name: formdata.name,
-          ParentId: ParentId,
-          Ancestors: updatedAncestors,
-          IsActive: true
-        });
-      } else {
-        props.handleTeamInfo({
-          objectId: newTeamRes.id,
-          Name: formdata.name,
-          ParentId: "",
-          Ancestors: "",
-          IsActive: true
-        });
-      }
-      if (props.closePopup) {
-        props.closePopup();
-      }
-      setFormdata({ name: "", team: { name: "", objectId: "" } });
-      props.setIsAlert({ type: "success", msg: "Team created successfully." });
-    } catch (err) {
-      console.log("err in save team", err);
-      if (err.code === 137) {
-        props.setIsAlert({ type: "danger", msg: "Teams already exists." });
-      } else if (err.code === 102) {
-        props.setIsAlert({ type: "warning", msg: "Provide team name." });
-      } else {
-        props.setIsAlert({ type: "danger", msg: "Something went wrong." });
-      }
-    } finally {
-      setTimeout(() => props.setIsAlert({ type: "success", msg: "" }), 1500);
-      setIsLoader(false);
-    }
-  };
-
-  // Define a function to handle the "add yourself" checkbox
-  const handleReset = () => {
-    setFormdata({
-      name: "",
-      team: { name: "", objectId: "" }
-    });
-  };
-  const handleChange = (e) => {
-    setFormdata((prev) => ({ ...prev, [e.target.name]: e.target.value }));
-  };
-
-  return (
-    <div className="shadow-md rounded-box my-[1px] p-3 bg-base-100 relative">
-      <Title title="Add Team" />
-      {isLoader && (
-        <div className="absolute w-full h-full inset-0 flex justify-center items-center bg-base-content/30 z-50">
-          <Loader />
-        </div>
-      )}
-      <div className="w-full mx-auto">
-        <form onSubmit={handleSubmit}>
-          {/* <h1 className="text-[20px] font-semibold mb-4">Add User</h1> */}
-          <div className="mb-3">
-            <label
-              htmlFor="name"
-              className="block text-xs text-gray-700 font-semibold"
-            >
-              {t("name")}
-              <span className="text-[red] text-[13px]"> *</span>
-            </label>
-            <input
-              type="text"
-              name="name"
-              value={formdata.name}
-              onChange={(e) => handleChange(e)}
-              onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
-              onInput={(e) => e.target.setCustomValidity("")}
-              required
-              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-            />
-          </div>
-          <div className="mb-3">
-            <label
-              htmlFor="phone"
-              className="block text-xs text-gray-700 font-semibold"
-            >
-              {t("report-heading.Parent Team")}
-            </label>
-            <select
-              value={formdata.team}
-              onChange={(e) => handleDropdown(e)}
-              name="team"
-              className="op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content w-full text-xs"
-            >
-              {teamList.length > 0 &&
-                teamList.map((x) => (
-                  <option key={x.objectId} value={x.objectId}>
-                    {x.Name}
-                  </option>
-                ))}
-            </select>
-          </div>
-          <div className="flex items-center mt-3 gap-2 text-white">
-            <button type="submit" className="op-btn op-btn-primary">
-              {t("submit")}
-            </button>
-            <div
-              type="button"
-              onClick={() => handleReset()}
-              className="op-btn op-btn-secondary"
-            >
-              {t("reset")}
-            </div>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-};
-
-export default AddTeam;
@@ -1,420 +0,0 @@
-import React, { useEffect, useState } from "react";
-import Parse from "parse";
-import Title from "./Title";
-import Loader from "../primitives/Loader";
-import { copytoData } from "../constant/Utils";
-import { isEnableSubscription } from "../constant/const";
-import { useTranslation } from "react-i18next";
-function generatePassword(length) {
-  const characters =
-    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-  let result = "";
-  const charactersLength = characters.length;
-
-  for (let i = 0; i < length; i++) {
-    result += characters.charAt(Math.floor(Math.random() * charactersLength));
-  }
-  return result;
-}
-
-const AddUser = (props) => {
-  const { t } = useTranslation();
-  const [formdata, setFormdata] = useState({
-    name: "",
-    phone: "",
-    email: "",
-    team: "",
-    password: "",
-    role: ""
-  });
-  const [isLoader, setIsLoader] = useState(false);
-  const [teamList, setTeamList] = useState([]);
-  const role = ["OrgAdmin", "Editor", "User"];
-
-  useEffect(() => {
-    getTeamList();
-  }, []);
-
-  const getTeamList = async () => {
-    setFormdata((prev) => ({ ...prev, password: generatePassword(12) }));
-    const teamRes = await Parse.Cloud.run("getteams", { active: true });
-    if (teamRes.length > 0) {
-      const _teamRes = JSON.parse(JSON.stringify(teamRes));
-      setTeamList(_teamRes);
-      if (!isEnableSubscription) {
-        const allUserId =
-          _teamRes.find((x) => x.Name === "All Users")?.objectId || "";
-        setFormdata((prev) => ({ ...prev, team: allUserId }));
-      }
-    }
-  };
-  const checkUserExist = async () => {
-    try {
-      const res = await Parse.Cloud.run("getUserDetails", {
-        email: formdata.email
-      });
-      if (res) {
-        return true;
-      } else {
-        return false;
-      }
-    } catch (err) {
-      console.log("err", err);
-    }
-  };
-  // Define a function to handle form submission
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    const localUser = JSON.parse(localStorage.getItem("Extand_Class"))?.[0];
-    setIsLoader(true);
-    const res = await checkUserExist();
-    if (res) {
-      props.setIsAlert({ type: "danger", msg: t("user-already-exist") });
-      setIsLoader(false);
-      setTimeout(() => {
-        props.setIsAlert({ type: "success", msg: "" });
-      }, 1000);
-    } else {
-      try {
-        const extUser = new Parse.Object("contracts_Users");
-        extUser.set("Name", formdata.name);
-        if (formdata.phone) {
-          extUser.set("Phone", formdata.phone);
-        }
-        extUser.set("Email", formdata.email);
-        extUser.set("UserRole", `contracts_${formdata.role}`);
-        if (formdata?.team) {
-          extUser.set("TeamIds", [
-            {
-              __type: "Pointer",
-              className: "contracts_Teams",
-              objectId: formdata.team
-            }
-          ]);
-        }
-        if (localUser && localUser.OrganizationId) {
-          extUser.set("OrganizationId", {
-            __type: "Pointer",
-            className: "contracts_Organizations",
-            objectId: localUser.OrganizationId.objectId
-          });
-        }
-        if (localUser && localUser.Company) {
-          extUser.set("Company", localUser.Company);
-        }
-
-        if (localStorage.getItem("TenantId")) {
-          extUser.set("TenantId", {
-            __type: "Pointer",
-            className: "partners_Tenant",
-            objectId: localStorage.getItem("TenantId")
-          });
-        }
-
-        try {
-          const _users = Parse.Object.extend("User");
-          const _user = new _users();
-          _user.set("name", formdata.name);
-          _user.set("username", formdata.email);
-          _user.set("email", formdata.email);
-          _user.set("password", formdata.password);
-          if (formdata.phone) {
-            _user.set("phone", formdata.phone);
-          }
-
-          const user = await _user.save();
-          if (user) {
-            const currentUser = Parse.User.current();
-            extUser.set(
-              "CreatedBy",
-              Parse.User.createWithoutData(currentUser.id)
-            );
-
-            extUser.set("UserId", user);
-            const acl = new Parse.ACL();
-            acl.setPublicReadAccess(true);
-            acl.setPublicWriteAccess(true);
-            acl.setReadAccess(currentUser.id, true);
-            acl.setWriteAccess(currentUser.id, true);
-
-            extUser.setACL(acl);
-
-            const res = await extUser.save();
-
-            const parseData = JSON.parse(JSON.stringify(res));
-
-            if (props.closePopup) {
-              props.closePopup();
-            }
-            if (props.handleUserData) {
-              if (formdata?.team) {
-                const team = teamList.find((x) => x.objectId === formdata.team);
-                parseData.TeamIds = parseData.TeamIds.map((y) =>
-                  y.objectId === team.objectId ? team : y
-                );
-              }
-              props.handleUserData(parseData);
-            }
-
-            setIsLoader(false);
-            setFormdata({
-              name: "",
-              email: "",
-              phone: "",
-              team: "",
-              role: ""
-            });
-          }
-        } catch (err) {
-          console.log("err ", err);
-          if (err.code === 202) {
-            const params = { email: formdata.email };
-            const userRes = await Parse.Cloud.run("getUserId", params);
-            const currentUser = Parse.User.current();
-            extUser.set(
-              "CreatedBy",
-              Parse.User.createWithoutData(currentUser.id)
-            );
-
-            extUser.set("UserId", {
-              __type: "Pointer",
-              className: "_User",
-              objectId: userRes.id
-            });
-            const acl = new Parse.ACL();
-            acl.setPublicReadAccess(true);
-            acl.setPublicWriteAccess(true);
-            acl.setReadAccess(currentUser.id, true);
-            acl.setWriteAccess(currentUser.id, true);
-
-            extUser.setACL(acl);
-            const res = await extUser.save();
-
-            const parseData = JSON.parse(JSON.stringify(res));
-            if (props.closePopup) {
-              props.closePopup();
-            }
-            if (props.handleUserData) {
-              if (formdata?.team) {
-                const team = teamList.find((x) => x.objectId === formdata.team);
-                parseData.TeamIds = parseData.TeamIds.map((y) =>
-                  y.objectId === team.objectId ? team : y
-                );
-              }
-              props.handleUserData(parseData);
-            }
-            setIsLoader(false);
-            setFormdata({
-              name: "",
-              email: "",
-              phone: "",
-              team: "",
-              role: ""
-            });
-          }
-        }
-      } catch (err) {
-        console.log("err", err);
-        setIsLoader(false);
-        props.setIsAlert({
-          type: "danger",
-          msg: t("something-went-wrong-mssg")
-        });
-      } finally {
-        setTimeout(() => props.setIsAlert({ type: "success", msg: "" }), 1500);
-      }
-    }
-  };
-
-  // Define a function to handle the "add yourself" checkbox
-  const handleReset = () => {
-    setFormdata({
-      name: "",
-      email: "",
-      phone: "",
-      team: "",
-      role: ""
-    });
-    if (props.closePopup) {
-      props.closePopup();
-    }
-  };
-  const handleChange = (event) => {
-    let { name, value } = event.target;
-    if (name === "email") {
-      value = value?.toLowerCase()?.replace(/\s/g, "");
-    }
-    setFormdata((prev) => ({
-      ...prev,
-      [name]: value
-    }));
-  };
-
-  const copytoclipboard = (text) => {
-    copytoData(text);
-    props.setIsAlert({ type: "success", msg: t("copied") });
-    setTimeout(() => props.setIsAlert({ type: "success", msg: "" }), 1500); // Reset copied state after 1.5 seconds
-  };
-  return (
-    <div className="shadow-md rounded-box my-[1px] p-3 bg-[#ffffff]">
-      <Title title={"Add User"} />
-      {isLoader && (
-        <div className="fixed inset-0 flex justify-center items-center bg-black bg-opacity-30 z-50 rounded-box">
-          <Loader />
-        </div>
-      )}
-      <div className="w-full mx-auto">
-        <form onSubmit={handleSubmit}>
-          {/* <h1 className="text-[20px] font-semibold mb-4">Add User</h1> */}
-          <div className="mb-3">
-            <label
-              htmlFor="name"
-              className="block text-xs text-gray-700 font-semibold"
-            >
-              {t("name")}
-              <span className="text-[red] text-[13px]"> *</span>
-            </label>
-            <input
-              type="text"
-              name="name"
-              value={formdata.name}
-              onChange={(e) => handleChange(e)}
-              onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
-              onInput={(e) => e.target.setCustomValidity("")}
-              required
-              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-            />
-          </div>
-          <div className="mb-3">
-            <label
-              htmlFor="email"
-              className="block text-xs text-gray-700 font-semibold"
-            >
-              {t("email")}
-              <span className="text-[red] text-[13px]"> *</span>
-            </label>
-            <input
-              type="email"
-              name="email"
-              value={formdata.email}
-              onChange={(e) => handleChange(e)}
-              onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
-              onInput={(e) => e.target.setCustomValidity("")}
-              required
-              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-            />
-          </div>
-          <div className="mb-3">
-            <label
-              htmlFor="email"
-              className="block text-xs text-gray-700 font-semibold"
-            >
-              {t("password")}
-            </label>
-            <div className="flex justify-between items-center op-input op-input-bordered op-input-sm text-base-content w-full h-full text-[13px]">
-              <div className="break-all">{formdata?.password}</div>
-              <i
-                onClick={() => copytoclipboard(formdata?.password)}
-                className="fa-light fa-copy rounded-full hover:bg-base-300 p-[8px] cursor-pointer "
-              ></i>
-            </div>
-            <div className="text-[12px] ml-2 mb-0 text-[red] select-none">
-              {t("password-generateed")}
-            </div>
-          </div>
-          <div className="mb-3">
-            <label
-              htmlFor="phone"
-              className="block text-xs text-gray-700 font-semibold"
-            >
-              {t("phone")}
-              {/* <span className="text-[red] text-[13px]"> *</span> */}
-            </label>
-            <input
-              type="text"
-              name="phone"
-              placeholder="optional"
-              value={formdata.phone}
-              onChange={(e) => handleChange(e)}
-              // required
-              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-            />
-          </div>
-          {isEnableSubscription && (
-            <div className="mb-3">
-              <label
-                htmlFor="phone"
-                className="block text-xs text-gray-700 font-semibold"
-              >
-                Team<span className="text-[red] text-[13px]"> *</span>
-              </label>
-              <select
-                value={formdata.team}
-                onChange={(e) => handleChange(e)}
-                name="team"
-                className="op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content w-full text-xs"
-                onInvalid={(e) =>
-                  e.target.setCustomValidity(t("input-required"))
-                }
-                onInput={(e) => e.target.setCustomValidity("")}
-                required
-              >
-                <option defaultValue={""} value={""}>
-                  select
-                </option>
-                {teamList.length > 0 &&
-                  teamList.map((x) => (
-                    <option key={x.objectId} value={x.objectId}>
-                      {x.Name}
-                    </option>
-                  ))}
-              </select>
-            </div>
-          )}
-          <div className="mb-3">
-            <label
-              htmlFor="phone"
-              className="block text-xs text-gray-700 font-semibold"
-            >
-              Role<span className="text-[red] text-[13px]"> *</span>
-            </label>
-            <select
-              value={formdata.role}
-              onChange={(e) => handleChange(e)}
-              name="role"
-              className="op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content w-full text-xs"
-              onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
-              onInput={(e) => e.target.setCustomValidity("")}
-              required
-            >
-              <option defaultValue={""} value={""}>
-                select
-              </option>
-              {role.length > 0 &&
-                role.map((x) => (
-                  <option key={x} value={x}>
-                    {x}
-                  </option>
-                ))}
-            </select>
-          </div>
-          <div className="flex items-center mt-3 gap-2 text-white">
-            <button type="submit" className="op-btn op-btn-primary">
-              Submit
-            </button>
-            <div
-              type="button"
-              onClick={() => handleReset()}
-              className="op-btn op-btn-secondary"
-            >
-              Cancel
-            </div>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-};
-
-export default AddUser;
@@ -0,0 +1,288 @@
+import React, { useEffect, useState } from "react";
+import Parse from "parse";
+import Title from "./Title";
+import Loader from "../primitives/Loader";
+import {
+  copytoData,
+  usertimezone
+} from "../constant/Utils";
+import {
+  emailRegex,
+} from "../constant/const";
+import {
+  useTranslation
+} from "react-i18next";
+function generatePassword(length) {
+  const characters =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  let result = "";
+  const charactersLength = characters.length;
+
+  for (let i = 0; i < length; i++) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+  }
+  return result;
+}
+
+const AddUser = (props) => {
+  const { t } = useTranslation();
+  const [formdata, setFormdata] = useState({
+    name: "",
+    phone: "",
+    email: "",
+    team: "",
+    password: "",
+    role: ""
+  });
+  const [isFormLoader, setIsFormLoader] = useState(false);
+  const [teamList, setTeamList] = useState([]);
+  const role = ["OrgAdmin", "Editor", "User"];
+  useEffect(() => {
+    getTeamList();
+    // eslint-disable-next-line
+  }, []);
+
+  const getTeamList = async () => {
+    setFormdata((prev) => ({ ...prev, password: generatePassword(12) }));
+    const teamRes = await Parse.Cloud.run("getteams", { active: true });
+    if (teamRes.length > 0) {
+      const _teamRes = JSON.parse(JSON.stringify(teamRes));
+      setTeamList(_teamRes);
+        const allUserId =
+          _teamRes.find((x) => x.Name === "All Users")?.objectId || "";
+        setFormdata((prev) => ({ ...prev, team: allUserId }));
+    }
+  };
+  const checkUserExist = async () => {
+    try {
+      const res = await Parse.Cloud.run("getUserDetails", {
+        email: formdata.email
+      });
+      if (res) {
+        return true;
+      } else {
+        return false;
+      }
+    } catch (err) {
+      console.log("err", err);
+    }
+  };
+  // Define a function to handle form submission
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!emailRegex.test(formdata.email)) {
+      alert("Please enter a valid email address.");
+    } else {
+      const localUser = JSON.parse(localStorage.getItem("Extand_Class"))?.[0];
+      setIsFormLoader(true);
+      const res = await checkUserExist();
+      if (res) {
+        props.showAlert("danger", t("user-already-exist"));
+        setIsFormLoader(false);
+      } else {
+        if (localStorage.getItem("TenantId")) {
+          const timezone = usertimezone;
+          try {
+            const params = {
+              name: formdata.name,
+              email: formdata.email,
+              phone: formdata.phone,
+              password: formdata.password,
+              role: formdata.role,
+              team: formdata.team,
+              timezone: timezone,
+              tenantId: localStorage.getItem("TenantId"),
+              organization: {
+                objectId: localUser?.OrganizationId?.objectId,
+                company: localUser?.Company
+              },
+            };
+            const res = await Parse.Cloud.run("adduser", params);
+            const parseData = JSON.parse(JSON.stringify(res));
+            console.log("parseData ", parseData);
+            if (props.closePopup) {
+              props.closePopup();
+            }
+            if (props.handleUserData) {
+              if (formdata?.team) {
+                const team = teamList.find((x) => x.objectId === formdata.team);
+                parseData.TeamIds = parseData.TeamIds.map((y) =>
+                  y.objectId === team.objectId ? team : y
+                );
+              }
+              props.handleUserData(parseData);
+            }
+            setIsFormLoader(false);
+            setFormdata({
+              name: "",
+              email: "",
+              phone: "",
+              team: "",
+              role: ""
+            });
+            props.showAlert("success", t("user-created-successfully"));
+          } catch (err) {
+            console.log("err", err);
+            setIsFormLoader(false);
+            props.showAlert("danger", t("something-went-wrong-mssg"));
+          }
+        } else {
+          props.showAlert("danger", t("something-went-wrong-mssg"));
+        }
+      }
+    }
+  };
+
+  // Define a function to handle the "add yourself" checkbox
+  const handleReset = () => {
+    setFormdata({ name: "", email: "", phone: "", team: "", role: "" });
+    if (props.closePopup) {
+      props.closePopup();
+    }
+  };
+  const handleChange = (event) => {
+    let { name, value } = event.target;
+    if (name === "email") {
+      value = value?.toLowerCase()?.replace(/\s/g, "");
+    }
+    setFormdata((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const copytoclipboard = (text) => {
+    copytoData(text);
+    props.showAlert("success", t("copied"));
+  };
+  return (
+    <div className="shadow-md rounded-box my-[1px] p-3 bg-base-100 relative">
+      <Title title={t("add-user")} />
+      {isFormLoader && (
+        <div className="absolute w-full h-full inset-0 flex justify-center items-center bg-base-content/30 z-50">
+          <Loader />
+        </div>
+      )}
+              <div className="w-full mx-auto">
+                    <form onSubmit={handleSubmit}>
+                      <div className="mb-3">
+                        <label
+                          htmlFor="name"
+                          className="block text-xs text-gray-700 font-semibold"
+                        >
+                          {t("name")}
+                          <span className="text-[red] text-[13px]"> *</span>
+                        </label>
+                        <input
+                          type="text"
+                          name="name"
+                          value={formdata.name}
+                          onChange={(e) => handleChange(e)}
+                          onInvalid={(e) =>
+                            e.target.setCustomValidity(t("input-required"))
+                          }
+                          onInput={(e) => e.target.setCustomValidity("")}
+                          required
+                          className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                        />
+                      </div>
+                      <div className="mb-3">
+                        <label
+                          htmlFor="email"
+                          className="block text-xs text-gray-700 font-semibold"
+                        >
+                          {t("email")}
+                          <span className="text-[red] text-[13px]"> *</span>
+                        </label>
+                        <input
+                          type="email"
+                          name="email"
+                          value={formdata.email}
+                          onChange={(e) => handleChange(e)}
+                          required
+                          onInvalid={(e) =>
+                            e.target.setCustomValidity(t("input-required"))
+                          }
+                          onInput={(e) => e.target.setCustomValidity("")}
+                          className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                        />
+                      </div>
+                      <div className="mb-3">
+                        <label className="block text-xs text-gray-700 font-semibold">
+                          {t("password")}
+                        </label>
+                        <div className="flex justify-between items-center op-input op-input-bordered op-input-sm text-base-content w-full h-full text-[13px]">
+                          <div className="break-all">{formdata?.password}</div>
+                          <i
+                            onClick={() => copytoclipboard(formdata?.password)}
+                            className="fa-light fa-copy rounded-full hover:bg-base-300 p-[8px] cursor-pointer "
+                          ></i>
+                        </div>
+                        <div className="text-[12px] ml-2 mb-0 text-[red] select-none">
+                          {t("password-generateed")}
+                        </div>
+                      </div>
+                      <div className="mb-3">
+                        <label
+                          htmlFor="phone"
+                          className="block text-xs text-gray-700 font-semibold"
+                        >
+                          {t("phone")}
+                          {/* <span className="text-[red] text-[13px]"> *</span> */}
+                        </label>
+                        <input
+                          type="text"
+                          name="phone"
+                          placeholder={t("phone-optional")}
+                          value={formdata.phone}
+                          onChange={(e) => handleChange(e)}
+                          className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                        />
+                      </div>
+                      <div className="mb-3">
+                        <label
+                          htmlFor="phone"
+                          className="block text-xs text-gray-700 font-semibold"
+                        >
+                          {t("Role")}
+                          <span className="text-[red] text-[13px]"> *</span>
+                        </label>
+                        <select
+                          value={formdata.role}
+                          onChange={(e) => handleChange(e)}
+                          name="role"
+                          className="op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content w-full text-xs"
+                          onInvalid={(e) =>
+                            e.target.setCustomValidity(t("input-required"))
+                          }
+                          onInput={(e) => e.target.setCustomValidity("")}
+                          required
+                        >
+                          <option defaultValue={""} value={""}>
+                            {t("Select")}
+                          </option>
+                          {role.length > 0 &&
+                            role.map((x) => (
+                              <option key={x} value={x}>
+                                {x}
+                              </option>
+                            ))}
+                        </select>
+                      </div>
+                      <div className="flex items-center mt-3 gap-2 text-white">
+                        <button type="submit" className="op-btn op-btn-primary">
+                          {t("submit")}
+                        </button>
+                        <div
+                          type="button"
+                          onClick={() => handleReset()}
+                          className="op-btn op-btn-secondary"
+                        >
+                          {t("cancel")}
+                        </div>
+                      </div>
+                    </form>
+              </div>
+    </div>
+  );
+};
+
+export default AddUser;
@@ -1,281 +0,0 @@
-import React, { useState, useEffect, useRef } from "react";
-import axios from "axios";
-import SuggestionInput from "./shared/fields/SuggestionInput";
-import Loader from "../primitives/Loader";
-import { useTranslation } from "react-i18next";
-
-const BulkSendUi = (props) => {
-  const { t } = useTranslation();
-  const [forms, setForms] = useState([]);
-  const [formId, setFormId] = useState(2);
-  const formRef = useRef(null);
-  const [scrollOnNextUpdate, setScrollOnNextUpdate] = useState(false);
-  const [isSubmit, setIsSubmit] = useState(false);
-  const [allowedForm, setAllowedForm] = useState(0);
-  const [isSignatureExist, setIsSignatureExist] = useState();
-  const allowedSigners = 50;
-  useEffect(() => {
-    signatureExist();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  //function to check atleast one signature field exist
-  const signatureExist = () => {
-    const getPlaceholder = props.item?.Placeholders;
-    const checkIsSignatureExistt = getPlaceholder?.every((placeholderObj) =>
-      placeholderObj?.placeHolder?.some((holder) =>
-        holder?.pos?.some((posItem) => posItem?.type === "signature")
-      )
-    );
-    setIsSignatureExist(checkIsSignatureExistt);
-  };
-  useEffect(() => {
-    if (scrollOnNextUpdate && formRef.current) {
-      formRef.current.scrollIntoView({
-        behavior: "smooth",
-        block: "end",
-        inline: "nearest"
-      });
-      setScrollOnNextUpdate(false);
-    }
-  }, [forms, scrollOnNextUpdate]);
-
-  useEffect(() => {
-    (() => {
-      if (props?.Placeholders?.length > 0) {
-        let users = [];
-        props?.Placeholders?.forEach((element) => {
-          if (!element.signerObjId) {
-            users = [
-              ...users,
-              {
-                fieldId: element.Id,
-                email: "",
-                label: element.Role,
-                signer: {}
-              }
-            ];
-          }
-        });
-        setForms((prevForms) => [...prevForms, { Id: 1, fields: users }]);
-        const totalForms = Math.floor(allowedSigners / users?.length);
-        setAllowedForm(totalForms);
-      }
-    })();
-    // eslint-disable-next-line
-  }, []);
-  const handleInputChange = (index, signer, fieldIndex) => {
-    const newForms = [...forms];
-    newForms[index].fields[fieldIndex].email = signer?.Email
-      ? signer?.Email
-      : signer || "";
-    newForms[index].fields[fieldIndex].signer = signer?.objectId ? signer : "";
-    setForms(newForms);
-  };
-
-  const handleAddForm = (e) => {
-    e.preventDefault();
-    // Check if the quick send limit has been reached
-    if (forms?.length < allowedForm) {
-      if (props?.Placeholders.length > 0) {
-        let newForm = [];
-        props?.Placeholders?.forEach((element) => {
-          if (!element.signerObjId) {
-            newForm = [
-              ...newForm,
-              {
-                fieldId: element.Id,
-                email: "",
-                label: element.Role,
-                signer: {}
-              }
-            ];
-          }
-        });
-        setForms([...forms, { Id: formId, fields: newForm }]);
-      }
-      setFormId(formId + 1);
-      setScrollOnNextUpdate(true);
-    } else {
-      // If the limit has been reached, throw an error with the appropriate message
-      alert(t("quick-send-alert-4"));
-    }
-  };
-
-  const handleRemoveForm = (index) => {
-    const updatedForms = forms.filter((_, i) => i !== index);
-    setForms(updatedForms);
-  };
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsSubmit(true);
-
-    // Create a copy of Placeholders array from props.item
-    let Placeholders = [...props.item.Placeholders];
-    // Initialize an empty array to store updated documents
-    let Documents = [];
-    // Loop through each form
-    forms.forEach((form) => {
-      //checking if user enter email which already exist as a signer then add user in a signers array
-      let existSigner = [];
-      form.fields.map((data) => {
-        if (data.signer) {
-          existSigner.push(data.signer);
-        }
-      });
-      // Map through the copied Placeholders array to update email values
-      const updatedPlaceholders = Placeholders.map((placeholder) => {
-        // Find the field in the current form that matches the placeholder Id
-        const field = form.fields.find(
-          (element) => parseInt(element.fieldId) === placeholder.Id
-        );
-        // If a matching field is found, update the email value in the placeholder
-        const signer = field?.signer?.objectId ? field.signer : "";
-        if (field) {
-          if (signer) {
-            return {
-              ...placeholder,
-              signerObjId: field?.signer?.objectId || "",
-              signerPtr: signer
-            };
-          } else {
-            return {
-              ...placeholder,
-              email: field.email,
-              signerObjId: field?.signer?.objectId || "",
-              signerPtr: signer
-            };
-          }
-        }
-        // If no matching field is found, keep the placeholder as is
-        return placeholder;
-      });
-
-      // Push a new document object with updated Placeholders into the Documents array
-      if (existSigner?.length > 0) {
-        Documents.push({
-          ...props.item,
-          Placeholders: updatedPlaceholders,
-          Signers: props.item.Signers
-            ? [...props.item.Signers, ...existSigner]
-            : [...existSigner]
-        });
-      } else {
-        Documents.push({
-          ...props.item,
-          Placeholders: updatedPlaceholders
-        });
-      }
-    });
-    //console.log("Documents ", Documents);
-    await batchQuery(Documents);
-  };
-
-  const batchQuery = async (Documents) => {
-    const serverUrl = localStorage.getItem("baseUrl");
-    const functionsUrl = `${serverUrl}functions/batchdocuments`;
-    const headers = {
-      "Content-Type": "application/json",
-      "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-      sessionToken: localStorage.getItem("accesstoken")
-    };
-    const params = {
-      Documents: JSON.stringify(Documents)
-    };
-    try {
-      const res = await axios.post(functionsUrl, params, { headers: headers });
-      // console.log("res ", res);
-      if (res.data && res.data.result) {
-        props.handleClose("success", Documents?.length);
-      }
-    } catch (err) {
-      console.log("Err ", err);
-      props.handleClose("error", 0);
-    } finally {
-      setIsSubmit(false);
-    }
-  };
-
-  return (
-    <>
-      {isSubmit && (
-        <div className="absolute z-[999] h-full w-full flex justify-center items-center bg-black bg-opacity-30">
-          <Loader />
-        </div>
-      )}
-      {props.Placeholders?.length > 0 ? (
-        isSignatureExist ? (
-          <>
-            {props.Placeholders?.some((x) => !x.signerObjId) ? (
-              <form onSubmit={handleSubmit}>
-                <div className="min-h-max max-h-[250px] overflow-y-auto">
-                  {forms?.map((form, index) => (
-                    <div
-                      key={form.Id}
-                      className="p-3 op-card border-[1px] border-gray-400 mt-3 mx-4 mb-4 bg-base-200 text-base-content grid grid-cols-1 md:grid-cols-2 gap-2 relative"
-                    >
-                      {form?.fields?.map((field, fieldIndex) => (
-                        <div className="flex flex-col" key={field.fieldId}>
-                          <label>{field.label}</label>
-                          <SuggestionInput
-                            required
-                            type="email"
-                            value={field.value}
-                            index={fieldIndex}
-                            onChange={(signer) =>
-                              handleInputChange(index, signer, fieldIndex)
-                            }
-                          />
-                        </div>
-                      ))}
-                      {forms?.length > 1 && (
-                        <button
-                          onClick={() => handleRemoveForm(index)}
-                          className="absolute right-3 top-1 text-[red] border-[1px] border-[red] rounded-lg w-[1.7rem] h-[1.7rem]"
-                        >
-                          <i className="fa-light fa-trash"></i>
-                        </button>
-                      )}
-                      <div ref={formRef}></div>
-                    </div>
-                  ))}
-                </div>
-                <div className="flex flex-col mx-4 mb-4 gap-3">
-                  <button
-                    onClick={handleAddForm}
-                    className="op-btn op-btn-primary focus:outline-none"
-                  >
-                    <i className="fa-light fa-plus"></i>{" "}
-                    <span>{t("add-new")}</span>
-                  </button>
-                  <button
-                    type="submit"
-                    className="op-btn op-btn-secondary focus:outline-none"
-                  >
-                    <i className="fa-light fa-paper-plane"></i>{" "}
-                    <span>{t("send")}</span>
-                  </button>
-                </div>
-              </form>
-            ) : (
-              <div className="text-black p-3 bg-white w-full text-sm md:text-base flex justify-center items-center">
-                {t("quick-send-alert-1")}
-              </div>
-            )}
-          </>
-        ) : (
-          <div className="text-black p-3 bg-white w-full text-sm md:text-base flex justify-center items-center">
-            {t("quick-send-alert-2")}
-          </div>
-        )
-      ) : (
-        <div className="text-black p-3 bg-white w-full text-sm md:text-base flex justify-center items-center">
-          {t("quick-send-alert-3")}
-        </div>
-      )}
-    </>
-  );
-};
-
-export default BulkSendUi;
@@ -0,0 +1,289 @@
+import React, { useState, useEffect, useRef } from "react";
+import axios from "axios";
+import SuggestionInput from "./shared/fields/SuggestionInput";
+import Loader from "../primitives/Loader";
+import { useTranslation } from "react-i18next";
+import {
+  emailRegex,
+} from "../constant/const";
+const BulkSendUi = (props) => {
+  const { t } = useTranslation();
+  const [forms, setForms] = useState([]);
+  const formRef = useRef(null);
+  const [scrollOnNextUpdate, setScrollOnNextUpdate] = useState(false);
+  const [isSubmit, setIsSubmit] = useState(false);
+  const [isSignatureExist, setIsSignatureExist] = useState();
+  const [isDisableBulkSend, setIsDisableBulkSend] = useState(false);
+  const [isLoader, setIsLoader] = useState(false);
+  useEffect(() => {
+    signatureExist();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  //function to check atleast one signature field exist
+  const signatureExist = async () => {
+      setIsDisableBulkSend(false);
+      const getPlaceholder = props?.Placeholders;
+      const checkIsSignatureExistt = getPlaceholder?.every((placeholderObj) =>
+        placeholderObj?.placeHolder?.some((holder) =>
+          holder?.pos?.some((posItem) => posItem?.type === "signature")
+        )
+      );
+      setIsSignatureExist(checkIsSignatureExistt);
+      setIsLoader(false);
+  };
+  useEffect(() => {
+    if (scrollOnNextUpdate && formRef.current) {
+      formRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "end",
+        inline: "nearest"
+      });
+      setScrollOnNextUpdate(false);
+    }
+  }, [forms, scrollOnNextUpdate]);
+
+  useEffect(() => {
+    (() => {
+      if (props?.Placeholders?.length > 0) {
+        let users = [];
+        props?.Placeholders?.forEach((element) => {
+          if (!element.signerObjId) {
+            users = [
+              ...users,
+              {
+                fieldId: element.Id,
+                email: "",
+                label: element.Role,
+                signer: {}
+              }
+            ];
+          }
+        });
+        setForms((prevForms) => [...prevForms, { Id: 1, fields: users }]);
+      }
+    })();
+    // eslint-disable-next-line
+  }, []);
+  const handleInputChange = (index, signer, fieldIndex) => {
+    const newForms = [...forms];
+    newForms[index].fields[fieldIndex].email = signer?.Email
+      ? signer?.Email
+      : signer || "";
+    newForms[index].fields[fieldIndex].signer = signer?.objectId ? signer : "";
+    setForms(newForms);
+  };
+
+
+  const handleRemoveForm = (index) => {
+    const updatedForms = forms.filter((_, i) => i !== index);
+    setForms(updatedForms);
+  };
+
+  function validateEmails(data) {
+    for (const item of data) {
+      for (const field of item.fields) {
+        if (!emailRegex.test(field.email)) {
+          alert(`Invalid email found: ${field.email}`);
+          return false;
+        }
+      }
+    }
+
+    return true;
+  }
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+      setIsSubmit(true);
+      if (validateEmails(forms)) {
+        // Create a copy of Placeholders array from props.item
+        let Placeholders = [...props.Placeholders];
+        // Initialize an empty array to store updated documents
+        let Documents = [];
+        // Loop through each form
+        forms.forEach((form) => {
+          //checking if user enter email which already exist as a signer then add user in a signers array
+          let existSigner = [];
+          form.fields.map((data) => {
+            if (data.signer) {
+              existSigner.push(data.signer);
+            }
+          });
+          // Map through the copied Placeholders array to update email values
+          const updatedPlaceholders = Placeholders.map((placeholder) => {
+            // Find the field in the current form that matches the placeholder Id
+            const field = form.fields.find(
+              (element) => parseInt(element.fieldId) === placeholder.Id
+            );
+            // If a matching field is found, update the email value in the placeholder
+            const signer = field?.signer?.objectId ? field.signer : "";
+            if (field) {
+              if (signer) {
+                return {
+                  ...placeholder,
+                  signerObjId: field?.signer?.objectId || "",
+                  signerPtr: signer
+                };
+              } else {
+                return {
+                  ...placeholder,
+                  email: field.email,
+                  signerObjId: field?.signer?.objectId || "",
+                  signerPtr: signer
+                };
+              }
+            }
+            // If no matching field is found, keep the placeholder as is
+            return placeholder;
+          });
+
+          // Push a new document object with updated Placeholders into the Documents array
+          if (existSigner?.length > 0) {
+            Documents.push({
+              ...props.item,
+              Placeholders: updatedPlaceholders,
+              Signers: props.item.Signers
+                ? [...props.item.Signers, ...existSigner]
+                : [...existSigner]
+            });
+          } else {
+            Documents.push({
+              ...props.item,
+              Placeholders: updatedPlaceholders,
+              SignatureType: props.signatureType
+            });
+          }
+        });
+        await batchQuery(Documents);
+      } else {
+        setIsSubmit(false);
+      }
+  };
+
+  const batchQuery = async (Documents) => {
+    const token =
+          { "X-Parse-Session-Token": localStorage.getItem("accesstoken") };
+    const functionsUrl = `${localStorage.getItem(
+      "baseUrl"
+    )}functions/batchdocuments`;
+    const headers = {
+      "Content-Type": "application/json",
+      "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
+      ...token,
+    };
+    const params = { Documents: JSON.stringify(Documents) };
+    try {
+      const res = await axios.post(functionsUrl, params, { headers: headers });
+      // console.log("res ", res);
+      if (res.data && res.data.result) {
+        props.handleClose("success", Documents?.length);
+      }
+    } catch (err) {
+      console.log("Err ", err);
+      props.handleClose("error", 0);
+    } finally {
+      setIsSubmit(false);
+    }
+  };
+  return (
+    <>
+      {isLoader ? (
+        <div className="w-full h-[100px] flex justify-center items-center z-[999]">
+          <Loader />
+        </div>
+      ) : (
+        <>
+          {isSubmit && (
+            <div className="absolute z-[999] h-full w-full flex justify-center items-center bg-black bg-opacity-30">
+              <Loader />
+            </div>
+          )}
+          {!isDisableBulkSend ? (
+            <>
+              {props.Placeholders?.length > 0 ? (
+                isSignatureExist ? (
+                  <>
+                    {props.Placeholders?.some((x) => !x.signerObjId) ? (
+                      <>
+                        <form onSubmit={handleSubmit}>
+                          <div className="min-h-max max-h-[250px] overflow-y-auto">
+                            {forms?.map((form, index) => (
+                              <div
+                                key={form.Id}
+                                className="p-3 op-card border-[1px] border-gray-400 mt-3 mx-4 mb-4 bg-base-200 text-base-content grid grid-cols-1 md:grid-cols-2 gap-2 relative"
+                              >
+                                {form?.fields?.map((field, fieldIndex) => (
+                                  <div
+                                    className="flex flex-col"
+                                    key={field.fieldId}
+                                  >
+                                    <label className="block text-xs font-semibold">
+                                      {field.label}
+                                    </label>
+                                    <SuggestionInput
+                                      required
+                                      type="email"
+                                      value={field.value}
+                                      index={fieldIndex}
+                                      onChange={(signer) =>
+                                        handleInputChange(
+                                          index,
+                                          signer,
+                                          fieldIndex
+                                        )
+                                      }
+                                    />
+                                  </div>
+                                ))}
+                                {forms?.length > 1 && (
+                                  <button
+                                    onClick={() => handleRemoveForm(index)}
+                                    className="absolute right-3 top-1 text-[red] border-[1px] border-[red] rounded-lg w-[1.7rem] h-[1.7rem]"
+                                  >
+                                    <i className="fa-light fa-trash"></i>
+                                  </button>
+                                )}
+                                <div ref={formRef}></div>
+                              </div>
+                            ))}
+                          </div>
+                          <div className="flex flex-col mx-4 mb-4 gap-3">
+                            <button
+                              type="submit"
+                              className="op-btn op-btn-accent focus:outline-none"
+                            >
+                              <i className="fa-light fa-paper-plane"></i>{" "}
+                              <span>{t("send")}</span>
+                            </button>
+                          </div>
+                        </form>
+                      </>
+                    ) : (
+                      <div className="text-black p-3 bg-white w-full text-sm md:text-base flex justify-center items-center">
+                        {t("quick-send-alert-1")}
+                      </div>
+                    )}
+                  </>
+                ) : (
+                  <div className="text-black p-3 bg-white w-full text-sm md:text-base flex justify-center items-center">
+                    {t("quick-send-alert-2")}
+                  </div>
+                )
+              ) : (
+                <div className="text-black p-3 bg-white w-full text-sm md:text-base flex justify-center items-center">
+                  {t("quick-send-alert-3")}
+                </div>
+              )}
+            </>
+          ) : (
+            <>
+            </>
+          )}
+        </>
+      )}
+    </>
+  );
+};
+
+export default BulkSendUi;
@@ -0,0 +1,126 @@
+import React, { useEffect, useState } from "react";
+import Loader from "../primitives/Loader";
+import { useTranslation } from "react-i18next";
+import Parse from "parse";
+const EditContactForm = (props) => {
+  const { t } = useTranslation();
+  const [isLoader, setIsLoader] = useState(false);
+  const [formData, setFormData] = useState({ Name: "", Email: "", Phone: "" });
+  useEffect(() => {
+    if (props.contact?.Email) {
+      setFormData((prev) => ({ ...prev, ...props.contact }));
+    }
+  }, [props.contact]);
+  const handleChange = (e) => {
+    if (e.target.name === "Email") {
+      setFormData((prev) => ({
+        ...prev,
+        [e.target.name]: e.target.value?.toLowerCase()?.replace(/\s/g, "")
+      }));
+    } else {
+      setFormData((prev) => ({ ...prev, [e.target.name]: e.target.value }));
+    }
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (props.handleEditContact) {
+      try {
+        setIsLoader(true);
+        const params = {
+          contactId: props.contact.objectId,
+          name: formData.Name,
+          email: formData.Email,
+          phone: formData.Phone,
+          tenantId: localStorage.getItem("TenantId")
+        };
+        const res = await Parse.Cloud.run("editcontact", params);
+        const updateContact = {
+          ...res,
+          Name: formData.Name,
+          Email: formData.Email,
+          Phone: formData.Phone
+        };
+        props.handleEditContact(updateContact);
+      } catch (err) {
+        console.log("err in edit contact ", err);
+        if (err.code === 137) {
+          alert(t("contact-already-exists"));
+        } else {
+          alert(t("something-went-wrong-mssg"));
+        }
+      } finally {
+        setIsLoader(false);
+        props.handleClose && props.handleClose();
+      }
+    }
+  };
+  return (
+    <div className="h-full p-[20px]">
+      {isLoader && (
+        <div className="fixed inset-0 flex justify-center items-center bg-black bg-opacity-30">
+          <Loader />
+        </div>
+      )}
+      <div className="w-full mx-auto p-2 text-base-content">
+        <form onSubmit={handleSubmit}>
+          <div className="mb-3">
+            <label htmlFor="name" className="block text-xs font-semibold">
+              {t("name")}
+              <span className="text-[red] text-[13px]"> *</span>
+            </label>
+            <input
+              type="text"
+              id="name"
+              name="Name"
+              value={formData.Name}
+              onChange={(e) => handleChange(e)}
+              onInput={(e) => e.target.setCustomValidity("")}
+              onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+              required
+            />
+          </div>
+          <div className="mb-3">
+            <label htmlFor="email" className="block text-xs font-semibold">
+              {t("email")}
+              <span className="text-[red] text-[13px]"> *</span>
+            </label>
+            <input
+              type="email"
+              id="email"
+              name="Email"
+              value={formData.Email}
+              onChange={(e) => handleChange(e)}
+              onInput={(e) => e.target.setCustomValidity("")}
+              onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+              required
+            />
+          </div>
+          <div className="mb-3">
+            <label htmlFor="phone" className="block text-xs font-semibold">
+              {t("phone")}
+            </label>
+            <input
+              type="text"
+              id="phone"
+              name="Phone"
+              value={formData.Phone}
+              onChange={(e) => handleChange(e)}
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+              placeholder={t("phone-optional")}
+            />
+          </div>
+          <div className="mt-4 flex gap-x-2 justify-start">
+            <button type="submit" className="op-btn op-btn-primary">
+              {t("submit")}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default EditContactForm;
@@ -4,6 +4,7 @@ import axios from "axios";
 import { openInNewTab } from "../constant/Utils";
 import { useTranslation } from "react-i18next";
 const Footer = () => {
+  const appName = "OpenSign™";
  const { t } = useTranslation();
  const [showButton, setShowButton] = useState(false);
  const [version, setVersion] = useState("");
@@ -39,7 +40,6 @@ const Footer = () => {
    };
  }, []);

-  const appName = "OpenSign™";
  const openUrl = () => {
    openInNewTab(
      "https://github.com/OpenSignLabs/OpenSign/releases/tag/" + version
@@ -1,233 +0,0 @@
-import React, { useState, useEffect } from "react";
-import dp from "../assets/images/dp.png";
-import FullScreenButton from "./FullScreenButton";
-import { useNavigate } from "react-router-dom";
-import Parse from "parse";
-import { useWindowSize } from "../hook/useWindowSize";
-import {
-  checkIsSubscribed,
-  checkIsSubscribedTeam,
-  getAppLogo,
-  openInNewTab,
-  saveLanguageInLocal
-} from "../constant/Utils";
-import { isEnableSubscription, isStaging } from "../constant/const";
-import { useTranslation } from "react-i18next";
-
-const Header = ({ showSidebar }) => {
-  const { t, i18n } = useTranslation();
-  const navigate = useNavigate();
-  const { width } = useWindowSize();
-  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 [isTeam, setIsTeam] = 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();
-      const getIsTeam = await checkIsSubscribedTeam();
-      if (getIsSubscribe) {
-        const applogo = await getAppLogo();
-        if (applogo?.logo) {
-          setAppLogo(applogo?.logo);
-        } else {
-          setAppLogo(localStorage.getItem("appLogo") || "");
-        }
-      }
-      setIsPro(getIsSubscribe);
-      setIsTeam(getIsTeam);
-      setIsSubscribe(getIsSubscribe);
-    }
-  }
-
-  const closeDropdown = () => {
-    setIsOpen(false);
-    if (Parse?.User?.current()) {
-      try {
-        Parse.User.logOut();
-      } catch (err) {
-        console.log("Err", err);
-      }
-    }
-    let appdata = localStorage.getItem("userSettings");
-    let applogo = localStorage.getItem("appLogo");
-    let defaultmenuid = localStorage.getItem("defaultmenuid");
-    let PageLanding = localStorage.getItem("PageLanding");
-    let baseUrl = localStorage.getItem("baseUrl");
-    let appid = localStorage.getItem("parseAppId");
-
-    localStorage.clear();
-    saveLanguageInLocal(i18n);
-    localStorage.setItem("appLogo", applogo);
-    localStorage.setItem("defaultmenuid", defaultmenuid);
-    localStorage.setItem("PageLanding", PageLanding);
-    localStorage.setItem("userSettings", appdata);
-    localStorage.setItem("baseUrl", baseUrl);
-    localStorage.setItem("parseAppId", appid);
-
-    navigate("/");
-  };
-
-  //handle to close profile drop down menu onclick screen
-  useEffect(() => {
-    const closeMenuOnOutsideClick = (e) => {
-      if (isOpen && !e.target.closest("#profile-menu")) {
-        setIsOpen(false);
-      }
-    };
-
-    document.addEventListener("click", closeMenuOnOutsideClick);
-
-    return () => {
-      // Cleanup the event listener when the component unmounts
-      document.removeEventListener("click", closeMenuOnOutsideClick);
-    };
-  }, [isOpen]);
-  const handleConsoleRedirect = () => {
-    if (isStaging) {
-      window.open(" https://staging-console.opensignlabs.com/");
-    } else {
-      window.open("https://console.opensignlabs.com/");
-    }
-  };
-  return (
-    <div className="op-navbar bg-base-100 shadow">
-      <div className="flex-none">
-        <button
-          className="op-btn op-btn-square op-btn-ghost focus:outline-none hover:bg-transparent op-btn-sm no-animation"
-          onClick={showSidebar}
-        >
-          <i className="fa-light fa-bars text-xl text-base-content"></i>
-        </button>
-      </div>
-      <div className="flex-1 ml-2">
-        <div className="h-[25px] md:h-[40px] w-auto overflow-hidden">
-          <img
-            className="object-contain h-full w-auto"
-            src={applogo}
-            alt="img"
-          />
-        </div>
-      </div>
-      <div id="profile-menu" className="flex-none gap-2">
-        {!isSubscribe && (
-          <div>
-            <button
-              className="text-xs md:text-sm shadow op-btn op-btn-outline op-btn-sm md:op-btn-md op-btn-accent"
-              onClick={() => navigate("/subscription")}
-            >
-              {t("upgrade-now")}
-            </button>
-          </div>
-        )}
-        {!isTeam && isPro && (
-          <div className="w-[35px] h-[35px] bg-white rounded-full ring-[1px] ring-offset-2 ring-[#002862] text-[#002862] overflow-hidden font-semibold flex items-center justify-center">
-            {t("pro")}
-          </div>
-        )}
-        {isTeam && (
-          <div className="w-[35px] h-[35px] bg-white rounded-full ring-[1px] text-[13px] ring-offset-2 ring-[#002862] text-[#002862] overflow-hidden font-semibold flex items-center justify-center">
-            {t("team")}
-          </div>
-        )}
-        <div>
-          <FullScreenButton />
-        </div>
-        {width >= 768 && (
-          <div
-            onClick={toggleDropdown}
-            className="cursor-pointer w-[35px] h-[35px] rounded-full ring-[1px] ring-offset-2 ring-gray-400 overflow-hidden"
-          >
-            <img
-              className="w-[35px] h-[35px] object-contain"
-              src={image}
-              alt="img"
-            />
-          </div>
-        )}
-        {width >= 768 && (
-          <div
-            onClick={toggleDropdown}
-            className="cursor-pointer text-base-content text-sm"
-          >
-            {username && username}
-          </div>
-        )}
-        <div className="op-dropdown op-dropdown-end" id="profile-menu">
-          <div
-            tabIndex={0}
-            role="button"
-            className="op-btn op-btn-ghost op-btn-xs w-[10px] h-[20px] hover:bg-transparent"
-          >
-            <i
-              tabIndex={0}
-              role="button"
-              onClick={toggleDropdown}
-              className="fa-light fa-angle-down text-base-content"
-            ></i>
-          </div>
-          <ul
-            tabIndex={0}
-            className="mt-3 z-[1] p-2 shadow op-menu op-menu-sm op-dropdown-content text-base-content bg-base-100 rounded-box w-52"
-          >
-            <li onClick={() => openInNewTab("https://docs.opensignlabs.com")}>
-              <span>
-                <i className="fa-light fa-book"></i> {t("docs")}
-              </span>
-            </li>
-            <li
-              onClick={() => {
-                setIsOpen(false);
-                navigate("/profile");
-              }}
-            >
-              <span>
-                <i className="fa-light fa-user"></i> {t("profile")}
-              </span>
-            </li>
-            <li
-              onClick={() => {
-                setIsOpen(false);
-                navigate("/changepassword");
-              }}
-            >
-              <span>
-                <i className="fa-light fa-lock"></i> {t("change-password")}
-              </span>
-            </li>
-            <li
-              onClick={() => {
-                handleConsoleRedirect();
-              }}
-            >
-              <span>
-                <i className="fa-light fa-id-card"></i> Console
-              </span>
-            </li>
-            <li onClick={closeDropdown}>
-              <span>
-                <i className="fa-light fa-arrow-right-from-bracket"></i>{" "}
-                {t("log-out")}
-              </span>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Header;
@@ -0,0 +1,202 @@
+import React, { useState, useEffect } from "react";
+import dp from "../assets/images/dp.png";
+import FullScreenButton from "./FullScreenButton";
+import { useNavigate } from "react-router";
+import Parse from "parse";
+import { useWindowSize } from "../hook/useWindowSize";
+import {
+  getAppLogo,
+  openInNewTab,
+  saveLanguageInLocal
+} from "../constant/Utils";
+import { useTranslation } from "react-i18next";
+import { appInfo } from "../constant/appinfo";
+
+const Header = ({ showSidebar, setIsMenu, isConsole }) => {
+  const { t, i18n } = useTranslation();
+  const navigate = useNavigate();
+  const { width } = useWindowSize();
+  const username = localStorage.getItem("username") || "";
+  const image = localStorage.getItem("profileImg") || dp;
+  const [isOpen, setIsOpen] = useState(false);
+  const [applogo, setAppLogo] = useState("");
+
+  const toggleDropdown = () => {
+    setIsOpen(!isOpen);
+    if (width <= 768) {
+      setIsMenu(false);
+    }
+  };
+  useEffect(() => {
+    initializeHead();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+
+  async function initializeHead() {
+      const applogo = await getAppLogo();
+      if (applogo?.logo) {
+        setAppLogo(applogo?.logo);
+      } else {
+        const logo = localStorage.getItem("appLogo") || appInfo.applogo;
+        setAppLogo(logo);
+      }
+  }
+
+  const closeDropdown = async () => {
+    setIsOpen(false);
+    try {
+      await Parse.User.logOut();
+    } catch (err) {
+      console.log("Err while logging out", err);
+    }
+    let appdata = localStorage.getItem("userSettings");
+    let applogo = localStorage.getItem("appLogo");
+    let defaultmenuid = localStorage.getItem("defaultmenuid");
+    let PageLanding = localStorage.getItem("PageLanding");
+    let baseUrl = localStorage.getItem("baseUrl");
+    let appid = localStorage.getItem("parseAppId");
+
+    localStorage.clear();
+    saveLanguageInLocal(i18n);
+    localStorage.setItem("appLogo", applogo);
+    localStorage.setItem("defaultmenuid", defaultmenuid);
+    localStorage.setItem("PageLanding", PageLanding);
+    localStorage.setItem("userSettings", appdata);
+    localStorage.setItem("baseUrl", baseUrl);
+    localStorage.setItem("parseAppId", appid);
+
+    navigate("/");
+  };
+
+  //handle to close profile drop down menu onclick screen
+  useEffect(() => {
+    const closeMenuOnOutsideClick = (e) => {
+      if (isOpen && !e.target.closest("#profile-menu")) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("click", closeMenuOnOutsideClick);
+
+    return () => {
+      // Cleanup the event listener when the component unmounts
+      document.removeEventListener("click", closeMenuOnOutsideClick);
+    };
+  }, [isOpen]);
+
+  return (
+    <div>
+      <div className="op-navbar bg-base-100 shadow">
+        <div className="flex-none">
+          <button
+            className="op-btn op-btn-square op-btn-ghost focus:outline-none hover:bg-transparent op-btn-sm no-animation"
+            onClick={showSidebar}
+          >
+            <i className="fa-light fa-bars text-xl text-base-content"></i>
+          </button>
+        </div>
+        <div className="flex-1 ml-2">
+          <div className="h-[25px] md:h-[40px] w-auto overflow-hidden">
+            {applogo && (
+              <img
+                className="object-contain h-full w-auto"
+                src={applogo}
+                alt="logo"
+              />
+            )}
+          </div>
+        </div>
+        <div id="profile-menu" className="flex-none gap-2">
+          <div>
+            <FullScreenButton />
+          </div>
+          {width >= 768 && (
+            <div
+              onClick={toggleDropdown}
+              className="cursor-pointer w-[35px] h-[35px] rounded-full ring-[1px] ring-offset-2 ring-gray-400 overflow-hidden"
+            >
+              <img
+                className="w-[35px] h-[35px] object-contain"
+                src={image}
+                alt="img"
+              />
+            </div>
+          )}
+          {width >= 768 && (
+            <div
+              onClick={toggleDropdown}
+              role="button"
+              tabIndex="0"
+              className="cursor-pointer text-base-content text-sm"
+            >
+              {username && username}
+            </div>
+          )}
+          <div
+            className="op-dropdown op-dropdown-open op-dropdown-end"
+            id="profile-menu"
+          >
+            <div
+              tabIndex={0}
+              role="button"
+              onClick={toggleDropdown}
+              className="op-btn op-btn-ghost op-btn-xs w-[10px] h-[20px] hover:bg-transparent"
+            >
+              <i className="fa-light fa-angle-down text-base-content"></i>
+            </div>
+            <ul
+              tabIndex={0}
+              className={`mt-3 z-[1] p-2 shadow op-dropdown-open op-menu op-menu-sm op-dropdown-content text-base-content bg-base-100 rounded-box w-52 ${
+                isOpen ? "" : "hidden"
+              }`}
+            >
+              {!isConsole && (
+                <>
+                    <li
+                      onClick={() =>
+                        openInNewTab("https://docs.opensignlabs.com")
+                      }
+                    >
+                      <span>
+                        <i className="fa-light fa-book"></i> {t("docs")}
+                      </span>
+                    </li>
+                  <li
+                    onClick={() => {
+                      setIsOpen(false);
+                      navigate("/profile");
+                    }}
+                  >
+                    <span>
+                      <i className="fa-light fa-user"></i> {t("profile")}
+                    </span>
+                  </li>
+                  <li
+                    onClick={() => {
+                      setIsOpen(false);
+                      navigate("/changepassword");
+                    }}
+                  >
+                    <span>
+                      <i className="fa-light fa-lock"></i>{" "}
+                      {t("change-password")}
+                    </span>
+                  </li>
+                </>
+              )}
+              <li onClick={closeDropdown}>
+                <span>
+                  <i className="fa-light fa-arrow-right-from-bracket"></i>{" "}
+                  {t("log-out")}
+                </span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Header;
@@ -1,220 +0,0 @@
-import React, { useState } from "react";
-import Parse from "parse";
-import Loader from "../primitives/Loader";
-import { useTranslation } from "react-i18next";
-// import FacebookLogin from "react-facebook-login";
-
-const LoginFacebook = ({
-  FBCred,
-  thirdpartyLoginfn,
-  thirdpartyLoader,
-  setThirdpartyLoader
-}) => {
-  const { t } = useTranslation();
-  const [isModal, setIsModal] = useState(false);
-  const [userDetails, setUserDetails] = useState({
-    Phone: "",
-    Company: "",
-    Name: "",
-    Email: ""
-  });
-  const [fBDetails, setFBDetails] = useState({
-    Id: "",
-    AccessToken: "",
-    Name: "",
-    Email: ""
-  });
-  const responseFacebook = async (response) => {
-    // console.log("response ", response);
-    if (response.userID) {
-      setThirdpartyLoader(true);
-      const details = {
-        Email: response.email,
-        Name: response.name
-      };
-      setUserDetails({ ...userDetails, ...details });
-      const fDetails = {
-        Id: response.userID,
-        AccessToken: response.accessToken,
-        Name: response.name,
-        Email: response.email
-      };
-      setFBDetails({ ...fBDetails, ...fDetails });
-      const res = await checkExtUser(fDetails);
-    }
-  };
-
-  const checkExtUser = async (details) => {
-    // const extUser = new Parse.Query("contracts_Users");
-    // extUser.equalTo("Email", details.Email);
-    // const extRes = await extUser.first();
-    const params = { email: details.Email };
-    const extRes = await Parse.Cloud.run("getUserDetails", params);
-    // console.log("extRes ", extRes);
-    if (extRes) {
-      const params = { ...details, Phone: extRes?.get("Phone") || "" };
-      const payload = await Parse.Cloud.run("facebooksign", params);
-      //   console.log("payload ", payload);
-      if (payload && payload.sessiontoken) {
-        const billingDate =
-          extRes.get("Next_billing_date") && extRes.get("Next_billing_date");
-        // console.log("billingDate expired", billingDate > new Date());
-        const LocalUserDetails = {
-          name: details.Name,
-          email: details.Email,
-          phone: extRes?.get("Phone") || "",
-          company: extRes.get("Company")
-        };
-        localStorage.setItem("userDetails", JSON.stringify(LocalUserDetails));
-        thirdpartyLoginfn(payload.sessiontoken, billingDate);
-      }
-      return { msg: "exist" };
-    } else {
-      setIsModal(true);
-      setThirdpartyLoader(false);
-      return { msg: "notexist" };
-    }
-  };
-  const handleSubmitbtn = async () => {
-    if (userDetails.Phone && userDetails.Company) {
-      setThirdpartyLoader(true);
-      const params = { ...fBDetails, Phone: userDetails?.Phone || "" };
-      const payload = await Parse.Cloud.run("facebooksign", params);
-      // console.log("payload ", payload);
-
-      if (payload && payload.sessiontoken) {
-        const params = {
-          userDetails: {
-            name: userDetails.Name,
-            email: userDetails.Email,
-            // "passsword":userDetails.Phone,
-            phone: userDetails?.Phone || "",
-            role: "contracts_User",
-            company: userDetails.Company
-          }
-        };
-        const userSignUp = await Parse.Cloud.run("usersignup", params);
-        // console.log("userSignUp ", userSignUp);
-        if (userSignUp && userSignUp.sessionToken) {
-          const LocalUserDetails = {
-            name: userDetails.Name,
-            email: userDetails.Email,
-            phone: userDetails?.Phone || "",
-            company: userDetails.Company
-          };
-          localStorage.setItem("userDetails", JSON.stringify(LocalUserDetails));
-          thirdpartyLoginfn(userSignUp.sessionToken);
-        } else {
-          alert(userSignUp.message);
-        }
-      } else {
-        alert(t("server-error"));
-      }
-    } else {
-      alert(t("fill-required-details!"));
-    }
-  };
-  return (
-    <div className="relative">
-      {thirdpartyLoader && (
-        <div className="fixed flex justify-center items-center inset-0 bg-black bg-opacity-25 z-20 ">
-          <Loader />
-        </div>
-      )}
-      {/* <FacebookLogin
-        appId={FBCred}
-        fields="name,email,picture"
-        callback={responseFacebook}
-        cssClass="btn btn-info btn-md btn-fb"
-        icon="fa fa-facebook-f"
-      /> */}
-      {isModal && (
-        <div
-          className="modal fade show block z-[1]"
-          id="exampleModal"
-          tabIndex="-1"
-          role="dialog"
-        >
-          <div className="modal-dialog" role="document">
-            <div className="modal-content">
-              <div className="modal-header">
-                <h5 className="modal-title">{t("sign-up-form")}</h5>
-                <span>
-                  <span></span>
-                </span>
-              </div>
-              <div className="modal-body">
-                <form>
-                  <div className="form-group">
-                    <label htmlFor="Phone" className="col-form-label">
-                      {t("phone")}{" "}
-                      <span className="text-[red] text-[13px]">*</span>
-                    </label>
-                    <input
-                      type="tel"
-                      className="form-control"
-                      id="Phone"
-                      value={userDetails.Phone}
-                      onChange={(e) =>
-                        setUserDetails({
-                          ...userDetails,
-                          Phone: e.target.value
-                        })
-                      }
-                      onInvalid={(e) =>
-                        e.target.setCustomValidity(t("input-required"))
-                      }
-                      onInput={(e) => e.target.setCustomValidity("")}
-                      required
-                    />
-                  </div>
-                  <div className="form-group">
-                    <label htmlFor="Company" className="col-form-label">
-                      {t("company")}{" "}
-                      <span className="text-[red] text-[13px]">*</span>
-                    </label>
-                    <input
-                      type="text"
-                      className="form-control"
-                      id="Company"
-                      value={userDetails.Company}
-                      onChange={(e) =>
-                        setUserDetails({
-                          ...userDetails,
-                          Company: e.target.value
-                        })
-                      }
-                      onInvalid={(e) =>
-                        e.target.setCustomValidity(t("input-required"))
-                      }
-                      onInput={(e) => e.target.setCustomValidity("")}
-                      required
-                    />
-                  </div>
-                  <div>
-                    <button
-                      type="button"
-                      onClick={() => handleSubmitbtn()}
-                      className="btn btn-info mr-[10px]"
-                    >
-                      {t("sign-up")}
-                    </button>
-                    <button
-                      type="button"
-                      className="btn btn-secondary w-[90px]"
-                      onClick={() => setIsModal(false)}
-                    >
-                      {t("cancel")}
-                    </button>
-                  </div>
-                </form>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default LoginFacebook;
@@ -1,275 +0,0 @@
-import React, { useState, useRef } from "react";
-import Parse from "parse";
-import { jwtDecode } from "jwt-decode";
-import { useScript } from "../hook/useScript";
-import ModalUi from "../primitives/ModalUi";
-import Loader from "../primitives/Loader";
-import { useTranslation } from "react-i18next";
-import { saveLanguageInLocal } from "../constant/Utils";
-/*
- * `GoogleSignInBtn`as it's name indicates it render google sign in button
- * and in this `useScript` in which we have created for generate google sign button
- * and when user click on sign in with google it will be verify on server side
- * and then generate token
- */
-const GoogleSignInBtn = ({
-  GoogleCred,
-  thirdpartyLoginfn,
-  thirdpartyLoader,
-  setThirdpartyLoader
-}) => {
-  const { t, i18n } = useTranslation();
-  const [isModal, setIsModal] = useState(false);
-  const googleBtn = useRef();
-  const [userDetails, setUserDetails] = useState({
-    Phone: "",
-    Company: "",
-    Name: "",
-    Email: "",
-    Destination: ""
-  });
-  const [googleDetails, setGoogleDetails] = useState({
-    Id: "",
-    TokenId: "",
-    Gmail: "",
-    Name: ""
-  });
-  useScript("https://accounts.google.com/gsi/client", () => {
-    window.google.accounts.id.initialize({
-      client_id: GoogleCred,
-      callback: responseGoogle,
-      auto_select: false
-    });
-    window.google.accounts.id.renderButton(googleBtn.current, {
-      theme: "outline",
-      size: "large",
-      width: "187px"
-    });
-  });
-  const clearStorage = async () => {
-    if (Parse.User.current()) {
-      await Parse.User.logOut();
-    }
-    let baseUrl = localStorage.getItem("baseUrl");
-    let appid = localStorage.getItem("parseAppId");
-    let applogo = localStorage.getItem("appLogo");
-    let defaultmenuid = localStorage.getItem("defaultmenuid");
-    let PageLanding = localStorage.getItem("PageLanding");
-    let userSettings = localStorage.getItem("userSettings");
-
-    localStorage.clear();
-    saveLanguageInLocal(i18n);
-
-    localStorage.setItem("baseUrl", baseUrl);
-    localStorage.setItem("parseAppId", appid);
-    localStorage.setItem("appLogo", applogo);
-    localStorage.setItem("defaultmenuid", defaultmenuid);
-    localStorage.setItem("PageLanding", PageLanding);
-    localStorage.setItem("userSettings", userSettings);
-    localStorage.setItem("baseUrl", baseUrl);
-    localStorage.setItem("parseAppId", appid);
-  };
-  const responseGoogle = async (response) => {
-    clearStorage();
-    setThirdpartyLoader(true);
-    // console.log("response ", response);
-    if (response.credential) {
-      const data = jwtDecode(response.credential);
-      // console.log("data ", data);
-      if (data.sub && data.email) {
-        const details = { Email: data.email, Name: data.name };
-        setUserDetails({ ...userDetails, ...details });
-        const Gdetails = {
-          Id: data.sub,
-          TokenId: response.credential,
-          Gmail: data.email,
-          Name: data.name
-        };
-        setGoogleDetails({ ...googleDetails, ...Gdetails });
-        await checkExtUser(Gdetails);
-      }
-    }
-  };
-  const checkExtUser = async (details) => {
-    const params = { email: details.Gmail };
-    const extRes = await Parse.Cloud.run("getUserDetails", params);
-    if (extRes) {
-      // const params = { ...details, Phone: extRes?.get("Phone") || "" };
-      const params = { ...details, extUserId: extRes.objectId };
-      const payload = await Parse.Cloud.run("googlesign", params);
-      if (payload && payload.sessiontoken) {
-        const LocalUserDetails = {
-          name: details.Name,
-          email: details.Gmail,
-          phone: payload?.phone || "",
-          company: payload.company
-        };
-        localStorage.setItem("userDetails", JSON.stringify(LocalUserDetails));
-        thirdpartyLoginfn(payload.sessiontoken);
-      }
-      return { msg: "exist" };
-    } else {
-      setIsModal(true);
-      setThirdpartyLoader(false);
-      return { msg: "notexist" };
-    }
-  };
-  const handleSubmitbtn = async () => {
-    if (userDetails.Phone && userDetails.Company) {
-      setThirdpartyLoader(true);
-      // e.preventDefault()
-      // console.log("handelSubmit", userDetails);
-      const params = { ...googleDetails, Phone: userDetails?.Phone };
-      const payload = await Parse.Cloud.run("googlesign", params);
-
-      // console.log("payload ", payload);
-      if (payload && payload.sessiontoken) {
-        const params = {
-          userDetails: {
-            name: userDetails.Name,
-            email: userDetails.Email,
-            // "passsword":userDetails.Phone,
-            phone: userDetails?.Phone || "",
-            role: "contracts_User",
-            company: userDetails.Company,
-            jobTitle: userDetails.Destination
-          }
-        };
-        const userSignUp = await Parse.Cloud.run("usersignup", params);
-        // console.log("userSignUp ", userSignUp);
-        if (userSignUp && userSignUp.sessionToken) {
-          const LocalUserDetails = {
-            name: userDetails.Name,
-            email: userDetails.Email,
-            phone: userDetails?.Phone || "",
-            company: userDetails.Company
-            // jobTitle: userDetails.JobTitle
-          };
-          localStorage.setItem("userDetails", JSON.stringify(LocalUserDetails));
-          thirdpartyLoginfn(userSignUp.sessionToken);
-        } else {
-          alert(userSignUp.message);
-        }
-      } else if (
-        payload &&
-        payload.message.replace(/ /g, "_") === "Internal_server_err"
-      ) {
-        alert(t("server-error"));
-      }
-    } else {
-      alert(t("fill-required-details!"));
-    }
-  };
-  const handleCloseModal = () => {
-    setIsModal(false);
-    Parse.User.logOut();
-
-    let appdata = localStorage.getItem("userSettings");
-    let applogo = localStorage.getItem("appLogo");
-    let defaultmenuid = localStorage.getItem("defaultmenuid");
-    let PageLanding = localStorage.getItem("PageLanding");
-    let baseUrl = localStorage.getItem("baseUrl");
-    let appid = localStorage.getItem("parseAppId");
-
-    localStorage.clear();
-    saveLanguageInLocal(i18n);
-    localStorage.setItem("appLogo", applogo);
-    localStorage.setItem("defaultmenuid", defaultmenuid);
-    localStorage.setItem("PageLanding", PageLanding);
-    localStorage.setItem("userSettings", appdata);
-    localStorage.setItem("baseUrl", baseUrl);
-    localStorage.setItem("parseAppId", appid);
-  };
-  return (
-    <div className="relative">
-      {thirdpartyLoader && (
-        <div className="fixed flex justify-center items-center inset-0 bg-black bg-opacity-25 z-20 ">
-          <Loader />
-        </div>
-      )}
-      <div ref={googleBtn} className="text-sm"></div>
-      <ModalUi showClose={false} isOpen={isModal} title={t("sign-up-form")}>
-        <form className="px-4 py-3 text-base-content">
-          <div className="mb-3">
-            <label htmlFor="Phone" className="block text-xs font-semibold">
-              {t("phone")} <span className="text-[13px] text-[red]">*</span>
-            </label>
-            <input
-              type="tel"
-              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-              id="Phone"
-              value={userDetails.Phone}
-              onChange={(e) =>
-                setUserDetails({
-                  ...userDetails,
-                  Phone: e.target.value
-                })
-              }
-              onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
-              onInput={(e) => e.target.setCustomValidity("")}
-              required
-            />
-          </div>
-          <div className="mb-3">
-            <label htmlFor="Company" className="block text-xs font-semibold">
-              {t("company")} <span className="text-[13px] text-[red]">*</span>
-            </label>
-            <input
-              type="text"
-              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-              id="Company"
-              value={userDetails.Company}
-              onChange={(e) =>
-                setUserDetails({
-                  ...userDetails,
-                  Company: e.target.value
-                })
-              }
-              onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
-              onInput={(e) => e.target.setCustomValidity("")}
-              required
-            />
-          </div>
-          <div className="mb-3">
-            <label htmlFor="JobTitle" className="block text-xs font-semibold">
-              {t("job-title")} <span className="text-[13px] text-[red]">*</span>
-            </label>
-            <input
-              type="text"
-              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-              id="JobTitle"
-              value={userDetails.Destination}
-              onChange={(e) =>
-                setUserDetails({
-                  ...userDetails,
-                  Destination: e.target.value
-                })
-              }
-              onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
-              onInput={(e) => e.target.setCustomValidity("")}
-              required
-            />
-          </div>
-          <div className="flex flex-row gap-2">
-            <button
-              type="button"
-              className="op-btn op-btn-primary"
-              onClick={() => handleSubmitbtn()}
-            >
-              {t("sign-up")}
-            </button>
-            <button
-              type="button"
-              className="op-btn op-btn-ghost"
-              onClick={handleCloseModal}
-            >
-              {t("cancel")}
-            </button>
-          </div>
-        </form>
-      </ModalUi>
-    </div>
-  );
-};
-
-export default GoogleSignInBtn;
@@ -1,7 +1,9 @@
 import React from "react";
 import { Document, Page } from "react-pdf";
 import { Stage, Layer, Rect, Text } from "react-konva";
+import { useTranslation } from "react-i18next";
 const RenderDebugPdf = (props) => {
+  const { t } = useTranslation();
  return (
    <div>
      <div className="sticky top-0 p-[10px] z-10 bg-white border-[1px] border-[gray] my-[5px]">
@@ -12,10 +14,9 @@ const RenderDebugPdf = (props) => {
        onMouseMove={props.handleMouseMoveDiv}
      >
        <Document
-          onLoadError={() => {
-            props.setPdfLoadFail(false);
-          }}
-          loading={"Loading Document.."}
+          onLoadError={() => props.setPdfLoadFail(false)}
+          loading={t("loading-doc")}
+          error={<p className="mx-2">{t("failed-to-load-refresh-page")}</p>}
          onLoadSuccess={props.pageDetails}
          ref={props.pdfRef}
          file={props.pdfUrl}
@@ -0,0 +1,39 @@
+import React from "react";
+import ModalUi from "../primitives/ModalUi";
+import { useTranslation } from "react-i18next";
+
+function RotateAlert(props) {
+  const { t } = useTranslation();
+  return (
+    <ModalUi
+      isOpen={props.showRotateAlert}
+      title={t("Rotation-alert")}
+      handleClose={() => props.setShowRotateAlert({ status: false, degree: 0 })}
+    >
+      <div className="p-[20px] h-full">
+        <p>{t("rotate-alert-mssg")}</p>
+        <div className="h-[1px]  w-full my-[15px] bg-[#9f9f9f]"></div>
+        <div className="flex gap-1">
+          <button
+            onClick={() => props.handleRemoveWidgets()}
+            type="button"
+            className="op-btn op-btn-primary"
+          >
+            {t("yes")}
+          </button>
+          <button
+            onClick={() =>
+              props.setShowRotateAlert({ status: false, degree: 0 })
+            }
+            type="button"
+            className="op-btn op-btn-ghost shadow-md"
+          >
+            {t("no")}
+          </button>
+        </div>
+      </div>
+    </ModalUi>
+  );
+}
+
+export default RotateAlert;
@@ -1,6 +1,6 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { NavLink } from "react-router-dom";
+import { NavLink } from "react-router";

 const SocialMedia = () => {
  const { t } = useTranslation();
@@ -2,10 +2,12 @@ import React from "react";
 import { Helmet } from "react-helmet";

 function Title({ title, drive }) {
+  const appName =
+    "OpenSign™";
  return (
    <Helmet>
-      <title>{drive ? title : `${title} - OpenSign™`}</title>
-      <meta name="description" content={`${title} - OpenSign™`} />
+      <title>{drive ? title : `${title} - ${appName}`}</title>
+      <meta name="description" content={`${title} - ${appName}`} />
      <link
        rel="icon"
        type="image/png"
@@ -1,5 +1,5 @@
 import React from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { openInNewTab } from "../../constant/Utils";
 import { useTranslation } from "react-i18next";

@@ -30,15 +30,27 @@ const DashboardButton = (props) => {
      } w-full shadow-md px-3 py-2 op-card bg-base-100`}
    >
      <div className="flex flex-row items-center">
-        <span className="rounded-full bg-base-content bg-opacity-20 w-[60px] h-[60px] self-start flex justify-center items-center">
-          <i
-            className={`${
-              props.Icon ? props.Icon : "fa-light fa-info"
-            } text-[25px] lg:text-[30px]`}
-          ></i>
-        </span>
-        <div className=" text-lg ml-3 text-base-content">
+        <div className="flex flex-row items-center">
+          <span className="rounded-full bg-base-content bg-opacity-20 w-[60px] h-[60px] self-start flex justify-center items-center">
+            <i
+              className={`${
+                props.Icon ? props.Icon : "fa-light fa-info"
+              } text-[25px] lg:text-[30px]`}
+            ></i>
+          </span>
+        </div>
+        <div className="text-lg ml-3 text-base-content">
          {t(`sidebar.${props.Label}`)}
+          {props.Label === "Sign yourself" && (
+            <div className="text-gray-500 text-xs mt-1">
+              {t("signyour-self-button")}
+            </div>
+          )}
+          {props.Label === "Request signatures" && (
+            <div className="text-gray-500 text-xs mt-1">
+              {t("requestsign-button")}
+            </div>
+          )}
        </div>
      </div>
    </div>
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import axios from "axios";
 import Parse from "parse";
 import getReplacedHashQuery from "../../constant/getReplacedHashQuery";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import Tooltip from "../../primitives/Tooltip";
 import { useTranslation } from "react-i18next";

@@ -133,7 +133,7 @@ const DashboardCard = (props) => {
            skip: 0,
            limit: 200
          };
-          const url = `${parseBaseUrl}/functions/getReport`;
+          const url = `${parseBaseUrl}functions/getReport`;
          await axios
            .post(url, params, {
              headers: {
@@ -346,7 +346,6 @@ const DashboardCard = (props) => {
          id={props.Label}
          iconColor={"white"}
          message={t(`tour-mssg.${props.Label}`)}
-          // {props?.Data?.tourMessage}
        />
      </div>
    </div>
@@ -36,12 +36,12 @@ function DashboardReport(props) {
  // below useEffect call when isNextRecord state is true and fetch next record
  useEffect(() => {
    if (isNextRecord) {
-      getReportData(props.Record.reportId, List.length, 200);
+      getReportData(props.Record.reportId, List.length, 20);
    }
    // eslint-disable-next-line
  }, [isNextRecord]);

-  const getReportData = async (id, skipUserRecord = 0, limit = 200) => {
+  const getReportData = async (id, skipUserRecord = 0, limit = 20) => {
    setIsLoader(true);
    const json = reportJson(id);
    if (json) {
@@ -56,8 +56,10 @@ function DashboardReport(props) {
        sessiontoken: localStorage.getItem("accesstoken")
      };
      try {
-        const params = { reportId: id, skip: skipUserRecord, limit: limit };
-        const url = `${localStorage.getItem("baseUrl")}/functions/getReport`;
+        const skipRecord = id === "5Go51Q7T8r" ? 0 : skipUserRecord;
+        const limitRecord = id === "5Go51Q7T8r" ? 200 : limit;
+        const params = { reportId: id, skip: skipRecord, limit: limitRecord };
+        const url = `${localStorage.getItem("baseUrl")}functions/getReport`;
        const res = await axios.post(url, params, {
          headers: headers,
          signal: abortController.signal // is used to cancel fetch query
@@ -94,7 +96,7 @@ function DashboardReport(props) {
            prevRecord.length > 0 ? [...prevRecord, ...arr] : arr
          );
        } else {
-          if (res.data.result.length === docPerPage) {
+          if (res.data.result.length >= docPerPage) {
            setIsMoreDocs(true);
          } else {
            setIsMoreDocs(false);
@@ -2,13 +2,14 @@ import React, { useState, useEffect, useRef } from "react";
 import "../../styles/opensigndrive.css";
 import axios from "axios";
 import * as ContextMenu from "@radix-ui/react-context-menu";
-import { saveAs } from "file-saver";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import Table from "react-bootstrap/Table";
 import * as HoverCard from "@radix-ui/react-hover-card";
 import ModalUi from "../../primitives/ModalUi";
 import FolderModal from "../shared/fields/FolderModal";
 import { useTranslation } from "react-i18next";
+import { handleDownloadPdf, isMobile } from "../../constant/Utils";
+import Parse from "parse";

 function DriveBody(props) {
  const { t } = useTranslation();
@@ -17,7 +18,7 @@ function DriveBody(props) {
  const inputRef = useRef(null);
  const [isOpenMoveModal, setIsOpenMoveModal] = useState(false);
  const [selectDoc, setSelectDoc] = useState();
-  const [isDeleteDoc, setIsDeleteDoc] = useState(false);
+  const [isDeleteDoc, setIsDeleteDoc] = useState({});
  const contextMenu = [
    { type: "Download", icon: "fa-light fa-arrow-down" },
    { type: "Rename", icon: "fa-light fa-font" },
@@ -100,16 +101,17 @@ function DriveBody(props) {

  //function for navigate user to microapp-signature component
  const checkPdfStatus = async (data) => {
-    const signerExist = data.Signers && data.Signers;
-    const isDecline = data.IsDeclined && data.IsDeclined;
-    const isPlaceholder = data.Placeholders && data.Placeholders;
-    const signedUrl = data.SignedUrl;
+    const signerExist = data?.Signers;
+    const isDecline = data?.IsDeclined;
+    const isPlaceholder = data?.Placeholders;
+    const signedUrl = data?.SignedUrl;
+    const isSignYourself = data?.IsSignyourself;
    //checking if document has completed and request signature flow
    if (data?.IsCompleted && signerExist?.length > 0) {
      navigate(`/recipientSignPdf/${data.objectId}`);
    }
    //checking if document has completed and signyour-self flow
-    else if (!signerExist && !isPlaceholder) {
+    else if ((!signerExist && !isPlaceholder) || isSignYourself) {
      navigate(`/signaturePdf/${data.objectId}`);
    }
    //checking if document has declined by someone
@@ -136,12 +138,10 @@ function DriveBody(props) {
    }
  };

-  const handleMenuItemClick = (selectType, data) => {
+  const handleMenuItemClick = async (selectType, data, deleteType) => {
    switch (selectType) {
      case "Download": {
-        const pdfName = data && data.Name;
-        const pdfUrl = data && data.SignedUrl ? data.SignedUrl : data.URL;
-        saveAs(pdfUrl, `${sanitizeFileName(pdfName)}_signed_by_OpenSign™.pdf`);
+        await handleDownloadPdf([data]);
        break;
      }
      case "Rename": {
@@ -150,7 +150,7 @@ function DriveBody(props) {
        break;
      }
      case "Delete": {
-        setIsDeleteDoc(true);
+        setIsDeleteDoc({ status: true, deleteType });
        setSelectDoc(data);
        break;
      }
@@ -164,7 +164,7 @@ function DriveBody(props) {
  };
  //function for delete document
  const handleDeleteDocument = async (docData) => {
-    setIsDeleteDoc(false);
+    setIsDeleteDoc({});
    const docId = docData.objectId;
    const data = {
      IsArchive: true
@@ -264,18 +264,56 @@ function DriveBody(props) {
      setIsOpenMoveModal(false);
    }
  };
-
-  const sanitizeFileName = (pdfName) => {
-    // Replace spaces with underscore
-    return pdfName.replace(/ /g, "_");
-  };
-
  const handleEnterPress = (e, data) => {
    if (e.key === "Enter") {
      handledRenameDoc(data);
    }
  };

+  const checkFolderEmpty = async (docData) => {
+    let isEmptyFolder = true;
+    const query = new Parse.Query("contracts_Document");
+    query.equalTo("Folder", {
+      __type: "Pointer",
+      className: "contracts_Document",
+      objectId: docData.objectId
+    });
+    query.notEqualTo("IsArchive", true);
+    const res = await query.find();
+    const jsonRes = JSON.parse(JSON.stringify(res));
+    if (jsonRes && jsonRes.length > 0) {
+      isEmptyFolder = false;
+      return isEmptyFolder;
+    } else {
+      return isEmptyFolder;
+    }
+  };
+  const handleDeleteFolder = async (docData) => {
+    setIsDeleteDoc({});
+    const isEmptyFolder = await checkFolderEmpty(docData);
+    if (isEmptyFolder) {
+      const docId = docData?.objectId;
+      try {
+        const updateQuery = new Parse.Query("contracts_Document");
+        const updateObj = await updateQuery.get(docId);
+        updateObj.set("IsArchive", true);
+        const res = await updateObj.save();
+        if (res) {
+          const updatedData = props.pdfData.filter((x) => x.objectId !== docId);
+          props.setPdfData(updatedData);
+        }
+      } catch (err) {
+        console.log("Err ", err);
+        props.setIsAlert({
+          isShow: true,
+          alertMessage: t("something-went-wrong-mssg")
+        });
+      }
+    } else {
+      alert(t("delete-folder-alert-1"));
+    }
+  };
+
  //component to handle type of document and render according to type
  const handleFolderData = (data, ind, listType) => {
    let createddate, status, isDecline, signerExist, isComplete;
@@ -309,15 +347,18 @@ function DriveBody(props) {
    }

    const signersName = () => {
-      const getSignersName = signerExist.map((data) => data.Name);
-      const signerName = getSignersName.join(", ");
+      const getSignersName =
+        signerExist?.length > 0 && signerExist?.map((data) => data?.Name || "");
+      const signerName =
+        getSignersName?.length > 0 ? getSignersName?.join(", ") : "";

      return (
        <span className="text-[12px] font-medium w-[90%] break-words">
-          {signerName}
+          {signerName && signerName}
        </span>
      );
    };
+
    return listType === "table" ? (
      data.Type === "Folder" ? (
        <tr onClick={() => handleOnclikFolder(data)}>
@@ -357,7 +398,7 @@ function DriveBody(props) {
                e.stopPropagation();
                handleMenuItemClick("Download", data);
              }}
-              className="fa-light fa-download mr-[8px] op-text-primary"
+              className="fa-light fa-download mr-[8px] op-text-primary cursor-pointer"
              aria-hidden="true"
            ></i>
          </td>
@@ -366,11 +407,15 @@ function DriveBody(props) {
    ) : listType === "list" && data.Type === "Folder" ? (
      <div key={ind} className="relative w-[100px] h-[100px] mx-2 my-3">
        <ContextMenu.Root>
-          <ContextMenu.Trigger className="flex flex-col justify-center items-center">
+          <ContextMenu.Trigger className="flex flex-col justify-center items-center select-none-cls">
            {/* folder */}
            <div
              data-tut={props.dataTutSeventh}
-              onClick={() => handleOnclikFolder(data)}
+              onClick={() => {
+                if (!rename) {
+                  handleOnclikFolder(data);
+                }
+              }}
              className="cursor-pointer"
            >
              <svg
@@ -383,7 +428,6 @@ function DriveBody(props) {
              {rename === data.objectId ? (
                <input
                  onFocus={() => {
-                    inputRef.current.setSelectionRange(0, 0);
                    const input = inputRef.current;
                    if (input) {
                      input.select();
@@ -395,12 +439,11 @@ function DriveBody(props) {
                  onKeyDown={(e) => handleEnterPress(e, data)}
                  ref={inputRef}
                  defaultValue={renameValue}
-                  // value={renameValue}
                  onChange={(e) => setRenameValue(e.target.value)}
-                  className="w-[100px] border-[1.5px] border-black rounded-sm text-[10px]"
+                  className="op-input op-input-bordered op-input-xs w-[100px] focus:outline-none hover:border-base-content text-[10px]"
                />
              ) : (
-                <span className="fileName">{data.Name}</span>
+                <span className="fileName select-none-cls">{data.Name}</span>
              )}
            </div>
          </ContextMenu.Trigger>
@@ -418,21 +461,39 @@ function DriveBody(props) {
                <i className="fa-light fa-font mr-[8px]"></i>
                <span>Rename</span>
              </ContextMenu.Item>
+              <ContextMenu.Item
+                onClick={() => handleMenuItemClick("Delete", data, data.Type)}
+                className="ContextMenuItem"
+              >
+                <i className="fa-light fa-trash mr-[8px]"></i>
+                <span>Delete</span>
+              </ContextMenu.Item>
            </ContextMenu.Content>
          </ContextMenu.Portal>
        </ContextMenu.Root>
      </div>
    ) : (
-      <HoverCard.Root openDelay={0} closeDelay={100}>
+      <HoverCard.Root
+        open={rename || isMobile ? false : undefined}
+        openDelay={0}
+        closeDelay={100}
+      >
        <HoverCard.Trigger asChild>
          <div>
            <ContextMenu.Root>
              <div className="relative w-[100px] h-[100px] mx-2 my-3">
-                <ContextMenu.Trigger className="flex flex-col justify-center items-center">
+                <ContextMenu.Trigger
+                  asChild
+                  className="flex flex-col justify-center items-center select-none-cls"
+                >
                  {/* pdf */}
                  <div
                    data-tut={props.dataTutSixth}
-                    onClick={() => checkPdfStatus(data)}
+                    onClick={() => {
+                      if (!rename) {
+                        checkPdfStatus(data);
+                      }
+                    }}
                    className="cursor-pointer"
                  >
                    <svg
@@ -447,22 +508,22 @@ function DriveBody(props) {
                        autoFocus={true}
                        type="text"
                        onFocus={() => {
-                          inputRef.current.setSelectionRange(0, 0);
                          const input = inputRef.current;
                          if (input) {
                            input.select();
                          }
                        }}
                        onBlur={() => handledRenameDoc(data)}
-                        onKeyDown={(e) => handleEnterPress(e, data)}
+                        onKeyDown={(e) => handleEnterPress(e, data, data.Type)}
                        ref={inputRef}
                        defaultValue={renameValue}
-                        // value={renameValue}
                        onChange={(e) => setRenameValue(e.target.value)}
-                        className="w-[100px] border-[1.5px] border-black rounded-sm text-[10px]"
+                        className="op-input op-input-bordered op-input-xs w-[100px] focus:outline-none hover:border-base-content text-[10px]"
                      />
                    ) : (
-                      <span className="fileName">{data.Name}</span>
+                      <span className="fileName select-none-cls">
+                        {data.Name}
+                      </span>
                    )}
                  </div>
                </ContextMenu.Trigger>
@@ -567,7 +628,7 @@ function DriveBody(props) {
              </tr>
            </thead>
            <tbody>
-              {props.pdfData.map((data, ind) => {
+              {props?.pdfData?.map((data, ind) => {
                return (
                  <React.Fragment key={ind}>
                    {handleFolderData(data, ind, "table")}
@@ -595,22 +656,33 @@ function DriveBody(props) {
        />
      )}
      <ModalUi
-        isOpen={isDeleteDoc}
+        isOpen={isDeleteDoc.status}
        title={t("delete-document")}
-        handleClose={() => setIsDeleteDoc(false)}
+        handleClose={() => setIsDeleteDoc({})}
      >
        <div className="h-full p-[20px] text-base-content">
-          <p>{t("delete-document-alert")}</p>
+          {isDeleteDoc.deleteType ? (
+            <p>{t("delete-folder-alert")}</p>
+          ) : (
+            <p>{t("delete-document-alert")}</p>
+          )}
+
          <div className="h-[1px] w-full bg-[#9f9f9f] my-[15px]"></div>
          <button
-            onClick={() => handleDeleteDocument(selectDoc)}
+            onClick={() => {
+              if (isDeleteDoc.deleteType) {
+                handleDeleteFolder(selectDoc);
+              } else {
+                handleDeleteDocument(selectDoc);
+              }
+            }}
            type="button"
            className="op-btn op-btn-primary mr-2"
          >
            {t("yes")}
          </button>
          <button
-            onClick={() => setIsDeleteDoc(false)}
+            onClick={() => setIsDeleteDoc({})}
            type="button"
            className="op-btn op-btn-neutral"
          >
@@ -17,8 +17,8 @@ const AddRoleModal = (props) => {
            onChange={(e) => props.setRoleName(e.target.value)}
            placeholder={
              props.signersdata.length > 0
-                ? "User " + (props.signersdata.length + 1)
-                : "User 1"
+                ? "Role " + (props.signersdata.length + 1)
+                : "Role 1"
            }
            className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs mt-1"
          />
@@ -0,0 +1,134 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import ModalUi from "../../primitives/ModalUi";
+
+function AgreementContent(props) {
+  const { t } = useTranslation();
+  const appName =
+    "OpenSign™";
+  const h2Style = "text-base-content font-medium text-lg";
+  const ulStyle = "list-disc px-4 py-3";
+  const handleOnclick = () => {
+    props.setIsAgreeTour(false);
+    props.setIsAgree(true);
+    props.setIsShowAgreeTerms(false);
+    props.showFirstWidget();
+  };
+  return (
+    <div>
+      <ModalUi
+        isOpen={true}
+        title={t("term-cond-title")}
+        handleClose={() => props.setIsShowAgreeTerms(false)}
+      >
+        <div className="h-[100%] p-[20px]">
+          <h2 className={h2Style}>{t("term-cond-h")}</h2>
+          <span className="mt-2">
+            {t("term-cond-p1", { appName: appName })}
+          </span>
+          <hr className="bg-[#9f9f9f] w-full my-[15px]" />
+          <h2 className={h2Style}>{t("term-cond-h1")}</h2>
+          <span className="mt-2">
+            {t("term-cond-p2", { appName: appName })}
+          </span>
+          <ul className={ulStyle}>
+            <li>{t("term-cond-p3", { appName: appName })}</li>
+            <li>{t("term-cond-p4")}</li>
+          </ul>
+          <hr className="bg-[#9f9f9f] w-full my-[15px]" />
+          <h2 className={h2Style}>{t("term-cond-h2")}</h2>
+          <span className="mt-2">{t("term-cond-p5")}</span>
+          <ul className={ulStyle}>
+            <li>{t("term-cond-p6", { appName: appName })}</li>
+            <li>{t("term-cond-p7", { appName: appName })}</li>
+            <li>{t("term-cond-p8")}</li>
+          </ul>
+          <hr className="bg-[#9f9f9f] w-full my-[15px]" />
+          <h2 className={h2Style}>{t("term-cond-h3")}</h2>
+          <span className="mt-2">{t("term-cond-p9")}</span>
+          <ul className={ulStyle}>
+            <li>{t("term-cond-p10")}</li>
+            <li>{t("term-cond-p11")}</li>
+          </ul>
+          <hr className="bg-[#9f9f9f] w-full my-[15px]" />
+          <h2 className={h2Style}>{t("term-cond-h4")}</h2>
+          <span className="mt-2">
+            {t("term-cond-p12", { appName: appName })}
+          </span>
+          <ul className={ulStyle}>
+            <li>{t("term-cond-p13")}</li>
+            <li>{t("term-cond-p14")}</li>
+            <li>{t("term-cond-p15")}</li>
+          </ul>
+          <span>{t("term-cond-p16", { appName: appName })}</span>
+          <hr className="bg-[#9f9f9f] w-full my-[15px]" />
+          <h2 className={h2Style}>{t("term-cond-h5")}</h2>
+          <p>{t("term-cond-p17", { appName: appName })}</p>
+          <p className="mt-2">{t("term-cond-p18")}</p>
+          <hr className="bg-[#9f9f9f] w-full my-[15px]" />
+          <h2 className={h2Style}>{t("term-cond-h6")}</h2>
+          <span className="mt-2">{t("term-cond-p19")}</span>
+          <ul className={ulStyle}>
+            <li>{t("term-cond-p20")}</li>
+            <li>{t("term-cond-p21")}</li>
+            <li>{t("term-cond-p22", { appName: appName })}</li>
+          </ul>
+          <hr className="bg-[#9f9f9f] w-full my-[15px]" />
+          <h2 className={h2Style}>{t("term-cond-h7")}</h2>
+          <span className="mt-2">
+            {t("term-cond-p23", { appName: appName })}
+          </span>
+          <ul className={ulStyle}>
+            <li>{t("term-cond-p24")}</li>
+            <li>{t("term-cond-p25")}</li>
+          </ul>
+          <hr className="bg-[#9f9f9f] w-full my-[15px]" />
+          <h2 className={h2Style}>{t("term-cond-h8")}</h2>
+          <span className="mt-2">
+            {t("term-cond-p26", { appName: appName })}
+          </span>
+          <hr className="bg-[#9f9f9f] w-full my-[15px]" />
+          <h2 className={h2Style}>{t("term-cond-h9")}</h2>
+          <span className="mt-2">
+            {t("term-cond-p27", { appName: appName })}
+          </span>
+          <hr className="bg-[#9f9f9f] w-full my-[15px]" />
+          <span className="mt-2 font-medium">
+            {t("term-cond-p28", { appName: appName })}
+          </span>
+              <hr className="bg-[#9f9f9f] w-full my-[15px]" />
+              <span className="mt-2">
+                {t("term-cond-p29", { appName: appName })}
+              </span>
+              <a
+                href="www.opensignlabs.com"
+                target="_blank"
+                className="text-blue-700 cursor-pointer"
+              >
+                www.opensignlabs.com
+              </a>
+
+              <span>{t("term-cond-p30")}</span>
+              <span className="font-medium"> support@opensignlabs.com </span>
+          <hr className="bg-[#9f9f9f] w-full my-[15px]" />
+          <div className="mt-6 flex justify-start gap-2">
+            <button
+              onClick={() => handleOnclick()}
+              className="op-btn op-btn-primary"
+            >
+              {t("agrre-button")}
+            </button>
+            <button
+              className="op-btn op-btn-ghost"
+              onClick={() => props.setIsShowAgreeTerms(false)}
+            >
+              {t("close")}
+            </button>
+          </div>
+        </div>
+      </ModalUi>
+    </div>
+  );
+}
+
+export default AgreementContent;
@@ -0,0 +1,74 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import AgreementContent from "./AgreementContent";
+
+function AgreementSign(props) {
+  const { t } = useTranslation();
+  const [isChecked, setIsChecked] = useState(false);
+  const [isShowAgreeTerms, setIsShowAgreeTerms] = useState(false);
+
+  return (
+    <>
+      <div className="op-modal op-modal-open absolute z-[448]">
+        <div className="w-[95%] md:w-[60%] lg:w-[40%] op-modal-box overflow-y-auto hide-scrollbar text-sm p-4">
+          <div className="flex flex-row items-center">
+            <input
+              data-tut="IsAgree"
+              className="mr-3 op-checkbox op-checkbox-m"
+              type="checkbox"
+              value={isChecked}
+              onChange={(e) => {
+                setIsChecked(e.target.checked);
+                if (e.target.checked) {
+                  props.setIsAgreeTour(false);
+                }
+                props.showFirstWidget();
+              }}
+            />
+            <div className="text-[11px] md:text-base">
+              <span>{t("agree-p1")}</span>
+              <span
+                className="font-bold text-blue-600 cursor-pointer"
+                onClick={() => {
+                  setIsShowAgreeTerms(true);
+                  props.setIsAgreeTour(false);
+                }}
+              >
+                {t("agree-p2")}
+              </span>
+              <span> {t("agree-p3")}</span>
+            </div>
+          </div>
+          <div className="flex ml-[35px] mt-3">
+            <button
+              onClick={() => {
+                if (isChecked) {
+                  props.setIsAgreeTour(false);
+                  props.setIsAgree(true);
+                } else {
+                  props.setIsAgreeTour(true);
+                }
+              }}
+              className="op-btn op-btn-primary op-btn-sm w-full md:w-auto"
+            >
+              {t("agrre-button")}
+            </button>
+          </div>
+          <div className="mt-2">
+            <span className="text-[11px]">{t("agreement-note")}</span>
+          </div>
+        </div>
+      </div>
+      {isShowAgreeTerms && (
+        <AgreementContent
+          setIsAgreeTour={props.setIsAgreeTour}
+          setIsAgree={props.setIsAgree}
+          setIsShowAgreeTerms={setIsShowAgreeTerms}
+          showFirstWidget={props.showFirstWidget}
+        />
+      )}
+    </>
+  );
+}
+
+export default AgreementSign;
@@ -1,13 +0,0 @@
-import React from "react";
-
-function BorderResize({ right, top }) {
-  return (
-    <div
-      className={`${right ? `-right-[12px]` : "-right-[1px]"} ${
-        top ? `-bottom-[11px]` : "-bottom-[1px]"
-      } absolute inline-block w-[14px] h-[14px] hover:cursor-sw-resize border-r-[3px] border-b-[3px] border-[#188ae2]`}
-    ></div>
-  );
-}
-
-export default BorderResize;
@@ -0,0 +1,26 @@
+import React from "react";
+
+function BorderResize(props) {
+  const getHeight = () => {
+    const height = props.posHeight(props.pos, props.isSignYourself);
+    if (height > 14) {
+      return "14px";
+    } else {
+      return `${height}px`;
+    }
+  };
+
+  return (
+    <div
+      style={{
+        width: getHeight() || "14px",
+        height: getHeight() || "14px"
+      }}
+      className={`${props.right ? `-right-[12px]` : "-right-[2px]"} ${
+        props.top ? `-bottom-[12px]` : "-bottom-[2px] "
+      } absolute inline-block hover:cursor-sw-resize border-r-[3px] border-b-[3px] border-[#188ae2]`}
+    ></div>
+  );
+}
+
+export default BorderResize;
@@ -1,276 +0,0 @@
-import React, { useEffect, useState } from "react";
-import opensignLogo from "../../assets/images/logo.png";
-import {
-  Page,
-  Text,
-  View,
-  Document,
-  StyleSheet,
-  Image
-} from "@react-pdf/renderer";
-
-function Certificate({ pdfData }) {
-  const [isMultiSigners, setIsMultiSigners] = useState();
-  const [multiSigner, setMultiSigners] = useState([]);
-  const [isLoad, setIsLoad] = useState(false);
-
-  useEffect(() => {
-    handleSignerData();
-    // eslint-disable-next-line
-  }, []);
-
-  const handleSignerData = () => {
-    const checkSigners = pdfData.filter((data) => data.Signers);
-    if (checkSigners && checkSigners.length > 0) {
-      setIsMultiSigners(true);
-
-      const checkSignSigners =
-        pdfData[0].AuditTrail &&
-        pdfData[0].AuditTrail.length > 0 &&
-        pdfData[0].AuditTrail.filter((data) => data.Activity === "Signed");
-
-      setMultiSigners(checkSignSigners);
-    } else {
-      setIsMultiSigners(false);
-    }
-    setIsLoad(true);
-  };
-
-  const styles = StyleSheet.create({
-    page: {
-      borderRadius: "5px",
-      padding: "10px",
-      backgroundColor: "white"
-    },
-    section1: {
-      border: "1px solid rgb(177, 174, 174)",
-      padding: "20px"
-    },
-    textStyle: {
-      fontWeight: "bold",
-      fontSize: "11px",
-      marginBottom: "10px"
-    },
-    textStyle2: {
-      fontWeight: "600",
-      fontSize: "11px",
-      marginBottom: "10px",
-      color: "gray"
-    },
-    image: {
-      width: "71px",
-      height: "17px"
-    }
-  });
-
-  const generatedDate = () => {
-    const newDate = new Date();
-    const utcTime = newDate.toUTCString();
-
-    return (
-      <Text
-        style={{
-          color: "gray",
-          fontSize: "10px"
-        }}
-      >
-        Generated On {utcTime}
-      </Text>
-    );
-  };
-  const changeCompletedDate = () => {
-    const completedOn = pdfData[0].updatedAt;
-    const newDate = new Date(completedOn);
-    const utcTime = newDate.toUTCString();
-
-    return <Text style={styles.textStyle2}>{utcTime}</Text>;
-  };
-
-  const signerName = (data) => {
-    const getSignerName = pdfData[0].Signers.filter(
-      (sign) => sign.objectId === data.UserPtr.objectId
-    );
-
-    return (
-      getSignerName[0] &&
-      getSignerName.length > 0 && (
-        <>
-          <Text style={styles.textStyle}>
-            Name : &nbsp;
-            <Text style={styles.textStyle2}>{getSignerName[0].Name}</Text>
-          </Text>
-          <Text style={styles.textStyle}>
-            Email : &nbsp;
-            <Text style={styles.textStyle2}>{getSignerName[0].Email}</Text>
-          </Text>
-        </>
-      )
-    );
-  };
-
-  return (
-    isLoad && (
-      <Document>
-        {/** Page defines a single page of content. */}
-        <Page size="A4" style={styles.page}>
-          <View style={styles.section1}>
-            <View
-              style={{
-                display: "flex",
-                flexDirection: "row",
-                justifyContent: "space-between",
-                alignItems: "center",
-                marginBottom: "30px"
-              }}
-            >
-              <Image src={opensignLogo} style={styles.image} />
-              {generatedDate()}
-            </View>
-
-            <View style={{ justifyContent: "center" }}>
-              <Text
-                style={{
-                  textAlign: "center",
-                  fontSize: "20px",
-                  fontWeight: "bold",
-                  color: "#31bceb",
-                  marginBottom: "10px"
-                }}
-              >
-                {" "}
-                Certificate of Completion
-              </Text>
-              <View style={{ border: "1px solid #bdbbbb" }}></View>
-              <View>
-                <View>
-                  <Text
-                    style={{
-                      fontSize: "16px",
-                      fontWeight: "bold",
-                      color: "#31bceb",
-                      margin: "10px 0px 10px 0px"
-                    }}
-                  >
-                    Summary
-                  </Text>
-                </View>
-                <View style={{ display: "flex", flexDirection: "column" }}>
-                  <Text style={styles.textStyle}>
-                    Document ID : &nbsp;
-                    <Text style={styles.textStyle2}>{pdfData[0].objectId}</Text>
-                  </Text>
-                  <Text style={styles.textStyle}>
-                    Document Name : &nbsp;
-                    <Text style={styles.textStyle2}>{pdfData[0].Name}</Text>
-                  </Text>
-                  <Text style={styles.textStyle}>
-                    Organization : &nbsp;
-                    <Text style={styles.textStyle2}>
-                      {pdfData[0].ExtUserPtr.Company}
-                    </Text>
-                  </Text>
-                  <Text style={styles.textStyle}>
-                    Completed on : &nbsp;{changeCompletedDate()}
-                  </Text>
-                  {multiSigner && multiSigner.length > 0 && (
-                    <Text style={styles.textStyle}>
-                      Signers : &nbsp;
-                      <Text style={styles.textStyle2}>
-                        {multiSigner.length}
-                      </Text>
-                    </Text>
-                  )}
-                </View>
-                {isMultiSigners ? (
-                  <View style={{ display: "flex", flexDirection: "column" }}>
-                    <Text
-                      style={{
-                        fontSize: "16px",
-                        fontWeight: "bold",
-                        color: "#31bceb",
-                        margin: "10px 0px 10px 0px"
-                      }}
-                    >
-                      Recipients
-                    </Text>
-
-                    <View>
-                      {multiSigner &&
-                        multiSigner.map((data, ind) => {
-                          return (
-                            <View
-                              key={ind}
-                              style={{
-                                display: "flex",
-                                flexDirection: "column"
-                              }}
-                            >
-                              <View
-                                style={{
-                                  border: "0.4px solid #bdbbbb",
-                                  marginBottom: "10px"
-                                }}
-                              ></View>
-                              {signerName(data)}
-
-                              <Text style={styles.textStyle}>
-                                Accessed from : &nbsp;
-                                <Text style={styles.textStyle2}>
-                                  {data.ipAddress}
-                                </Text>
-                              </Text>
-                            </View>
-                          );
-                        })}
-                    </View>
-                  </View>
-                ) : (
-                  <View style={{ display: "flex", flexDirection: "column" }}>
-                    <Text
-                      style={{
-                        fontSize: "16px",
-                        fontWeight: "bold",
-                        color: "#31bceb",
-                        margin: "10px 0px 10px 0px"
-                      }}
-                    >
-                      Recipients
-                    </Text>
-                    <Text style={styles.textStyle}>
-                      Signers : &nbsp;<Text style={styles.textStyle2}>1</Text>
-                    </Text>
-                    <Text style={styles.textStyle}>
-                      Name : &nbsp;
-                      <Text style={styles.textStyle2}>
-                        {pdfData[0].ExtUserPtr.Name}
-                      </Text>
-                    </Text>
-                    <Text style={styles.textStyle}>
-                      Email : &nbsp;
-                      <Text style={styles.textStyle2}>
-                        {pdfData[0].ExtUserPtr.Email}
-                      </Text>
-                    </Text>
-                    <Text style={styles.textStyle}>
-                      Accessed from : &nbsp;
-                      <Text style={styles.textStyle2}>
-                        {pdfData[0].AuditTrail &&
-                          pdfData[0].AuditTrail[0].ipAddress}
-                      </Text>
-                    </Text>
-
-                    <Text style={styles.textStyle}>
-                      Signed on : &nbsp;{changeCompletedDate()}
-                    </Text>
-                  </View>
-                )}
-              </View>
-            </View>
-          </View>
-        </Page>
-      </Document>
-    )
-  );
-}
-
-export default Certificate;
@@ -1,46 +0,0 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-function DefaultSignature({ defaultSignImg, xyPostion, setDefaultSignAlert }) {
-  const { t } = useTranslation();
-
-  const confirmToaddDefaultSign = () => {
-    if (xyPostion.length > 0) {
-      setDefaultSignAlert({
-        isShow: true,
-        alertMessage: t("default-sign-alert")
-      });
-    } else {
-      setDefaultSignAlert({
-        isShow: true,
-        alertMessage: t("please-select-position!")
-      });
-    }
-  };
-
-  return (
-    <div data-tut="reactourThird">
-      <div className="mx-2 pr-2 pt-2 pb-1 text-[15px] text-base-content font-semibold border-b-[1px] border-base-300">
-        {t("signature")}
-      </div>
-      <div className="flex flex-col items-center mt-[10px] font-semibold">
-        <p className="text-base-content">{t("Your-Signature")}</p>
-        <div className="op-card shadow-md h-[111px] w-[90%] p-2">
-          <img
-            alt="signature"
-            className="w-full h-full object-contain"
-            src={defaultSignImg}
-          />
-        </div>
-        <button
-          type="button"
-          className="op-btn op-btn-primary op-btn-sm mt-[10px]"
-          onClick={() => confirmToaddDefaultSign()}
-        >
-          {t("auto-sign-all")}
-        </button>
-      </div>
-    </div>
-  );
-}
-
-export default DefaultSignature;
@@ -0,0 +1,119 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+function DefaultSignature(props) {
+  const { t } = useTranslation();
+  const tabName = ["my-signature", "my-initials"];
+  const [activeTab, setActiveTab] = useState(0);
+  const confirmToaddDefaultSign = (type) => {
+    if (!props.isAgree) {
+      props.setIsAgreeTour(true);
+    } else {
+      if (props?.xyPosition.length > 0) {
+        //check signature or initial widgets exist or not for auto signing
+        const getCurrentSignerXY = props?.xyPosition.filter(
+          (data) => data.Id === props.uniqueId
+        );
+        const checkIsSignInitialExist = getCurrentSignerXY?.every(
+          (placeholderObj) =>
+            placeholderObj?.placeHolder?.some((placeholder) =>
+              placeholder?.pos?.some((posItem) => posItem?.type === type)
+            )
+        );
+        if (checkIsSignInitialExist) {
+          props?.setDefaultSignAlert({
+            isShow: true,
+            alertMessage: t("default-sign-alert", { widgetsType: type }),
+            type: type
+          });
+        } else {
+          props?.setDefaultSignAlert({
+            isShow: true,
+            alertMessage: t("defaultSign-alert", { widgetsType: type })
+          });
+        }
+      } else {
+        props?.setDefaultSignAlert({
+          isShow: true,
+          alertMessage: t("please-select-position!")
+        });
+      }
+    }
+  };
+
+  return (
+    <div data-tut="reactourThird">
+      <div className="mx-2 pr-2 pt-2 pb-1 text-[15px] text-base-content font-semibold border-b-[1px] border-base-300">
+        <p className="text-base-content">{t("signature")}</p>
+      </div>
+      <div className="flex justify-center items-center mt-2">
+        <div role="tablist" className="op-tabs op-tabs-bordered">
+          {tabName.map((tabData, ind) => (
+            <div
+              onClick={() => setActiveTab(ind)}
+              key={ind}
+              role="tab"
+              className={`${
+                activeTab === ind ? "op-tab-active" : ""
+              } op-tab flex items-center pb-10 md:pb-0`}
+            >
+              <span className="ml-1 text-[7px] font-medium md:font-normal md:text-[12px]">
+                {t(`${tabData}`)}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="flex flex-col items-center mt-[10px] font-semibold relative">
+        <div className="op-card shadow-md h-[111px] w-[90%] p-2">
+          {activeTab === 0 ? (
+            <img
+              alt="signature"
+              className="w-full h-full object-contain"
+              src={props?.defaultSignImg}
+            />
+          ) : (
+            activeTab === 1 &&
+            (props?.myInitial ? (
+              <img
+                alt="signature"
+                className="w-full h-full object-contain"
+                src={props?.myInitial}
+              />
+            ) : (
+              <div className="flex justify-center items-center h-full">
+                <span>{t("initial-alert")}</span>
+              </div>
+            ))
+          )}
+        </div>
+        <button
+          type="button"
+          className="op-btn op-btn-primary op-btn-sm mt-[10px]"
+          onClick={() =>
+            confirmToaddDefaultSign(
+              activeTab === 0 ? "signature" : activeTab === 1 && "initials"
+            )
+          }
+          disabled={
+            activeTab === 0 && !props?.isDefault
+              ? true
+              : activeTab === 1 && !props.myInitial
+                ? true
+                : false
+          }
+        >
+          {t("auto-sign-all")}
+        </button>
+        {!props.isDefault && (
+          <div className="absolute bg-black/70 text-white w-full h-full flex items-center justify-center text-[11px] cursor-default">
+            <span className="-rotate-45">
+              Document creator has disabled this option
+            </span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default DefaultSignature;
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import LoaderWithMsg from "../../primitives/LoaderWithMsg";
 import { contractDocument } from "../../constant/Utils";
 import HandleError from "../../primitives/HandleError";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router";
 import { useTranslation } from "react-i18next";
 function useQuery() {
  return new URLSearchParams(useLocation().search);
@@ -30,15 +30,19 @@ function DraftDocument() {
      documentData === "Error: Something went wrong!" ||
      (documentData.result && documentData.result.error)
    ) {
-      setIsLoading({
-        isLoader: false,
-        message: "Error: Something went wrong!"
-      });
+      if (documentData?.result?.error?.includes("deleted")) {
+        setIsLoading({
+          isLoader: false,
+          message: t("document-deleted")
+        });
+      } else {
+        setIsLoading({
+          isLoader: false,
+          message: t("something-went-wrong-mssg")
+        });
+      }
    } else {
-      setIsLoading({
-        isLoader: false,
-        message: "No data found!"
-      });
+      setIsLoading({ isLoader: false, message: t("no-data") });
    }
  };

@@ -54,7 +58,7 @@ function DraftDocument() {
      navigate(`/recipientSignPdf/${data.objectId}`);
    }
    //checking if document has completed and signyour-self flow
-    else if (!signerExist && !isPlaceholder) {
+    else if ((!signerExist && !isPlaceholder) || data?.IsSignyourself) {
      navigate(`/signaturePdf/${data.objectId}`);
    }
    //checking if document has declined by someone
@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from "react";
-import { isEnableSubscription } from "../../constant/const";
 import ModalUi from "../../primitives/ModalUi";
 import { radioButtonWidget } from "../../constant/Utils";
-import Upgrade from "../../primitives/Upgrade";
 import { useTranslation } from "react-i18next";
+import { fontColorArr, fontsizeArr } from "../../constant/Utils";
+
 function DropdownWidgetOption(props) {
  const { t } = useTranslation();
  const [dropdownOptionList, setDropdownOptionList] = useState([
@@ -128,14 +128,6 @@ function DropdownWidgetOption(props) {
    setDefaultValue("");
  };

-  const handleSetMinMax = (e) => {
-    const minValue = e.target.value;
-    if (minValue > dropdownOptionList.length) {
-      return "";
-    } else {
-      return minValue;
-    }
-  };

  const handleDefaultCheck = (index) => {
    const getDefaultCheck = defaultCheckbox.includes(index);
@@ -179,7 +171,7 @@ function DropdownWidgetOption(props) {
                  key={index}
                  className="flex flex-row mb-[5px] items-center"
                >
-                  {props.type === "checkbox" && !props.isSignYourself && (
+                  {props.type === "checkbox" && props.isShowAdvanceFeature && (
                    <input
                      type="checkbox"
                      checked={handleDefaultCheck(index)}
@@ -222,65 +214,6 @@ function DropdownWidgetOption(props) {
                onClick={handleAddInput}
                className="fa-light fa-square-plus text-[25px] ml-[10px] op-text-primary cursor-pointer"
              ></i>
-              {isEnableSubscription && (
-                <div>
-                  {props.type === "checkbox" && !props.isSignYourself && (
-                    <>
-                      <label
-                        className={`${
-                          !props.isSubscribe ? "text-[gray]" : ""
-                        } text-[13px] font-semibold`}
-                      >
-                        {t("minimun-check")}
-                      </label>
-                      {!props.isSubscribe && isEnableSubscription && (
-                        <Upgrade />
-                      )}
-                      <input
-                        onInvalid={(e) =>
-                          e.target.setCustomValidity(t("input-required"))
-                        }
-                        onInput={(e) => e.target.setCustomValidity("")}
-                        required
-                        defaultValue={0}
-                        value={minCount}
-                        disabled={props.isSubscribe ? false : true}
-                        onChange={(e) => {
-                          const count = handleSetMinMax(e);
-                          setMinCount(count);
-                        }}
-                        className={`${
-                          props.isSubscribe ? "" : "pointer-events-none"
-                        } op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs`}
-                      />
-                      <label
-                        className={`${
-                          !props.isSubscribe ? "text-[gray]" : ""
-                        } text-[13px] font-semibold`}
-                      >
-                        {t("maximum-check")}
-                      </label>
-                      <input
-                        onInvalid={(e) =>
-                          e.target.setCustomValidity(t("input-required"))
-                        }
-                        onInput={(e) => e.target.setCustomValidity("")}
-                        required
-                        defaultValue={0}
-                        value={maxCount}
-                        disabled={props.isSubscribe ? false : true}
-                        onChange={(e) => {
-                          const count = handleSetMinMax(e);
-                          setMaxCount(count);
-                        }}
-                        className={`${
-                          props.isSubscribe ? "" : "pointer-events-none"
-                        } op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs`}
-                      />
-                    </>
-                  )}
-                </div>
-              )}
            </div>
            {["dropdown", radioButtonWidget].includes(props.type) && (
              <>
@@ -330,9 +263,60 @@ function DropdownWidgetOption(props) {
                </div>
              </>
            )}
-            {["checkbox", radioButtonWidget].includes(props.type) && (
+            <div className="flex items-center mt-3 mb-3">
+              <span>{t("font-size")} :</span>
+              <select
+                className="ml-[7px] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
+                value={
+                  props.fontSize ||
+                  props.currWidgetsDetails?.options?.fontSize ||
+                  12
+                }
+                onChange={(e) => props.setFontSize(parseInt(e.target.value))}
+              >
+                {fontsizeArr.map((size, ind) => {
+                  return (
+                    <option className="text-[13px]" value={size} key={ind}>
+                      {size}
+                    </option>
+                  );
+                })}
+              </select>
+              <div className="flex flex-row gap-1 items-center ml-4  ">
+                <span>{t("color")} : </span>
+                <select
+                  value={
+                    props.fontColor ||
+                    props.currWidgetsDetails?.options?.fontColor ||
+                    "black"
+                  }
+                  onChange={(e) => props.setFontColor(e.target.value)}
+                  className="ml-[7px] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
+                >
+                  {fontColorArr.map((color, ind) => {
+                    return (
+                      <option value={color} key={ind}>
+                        {t(`color-type.${color}`)}
+                      </option>
+                    );
+                  })}
+                </select>
+                <span
+                  style={{
+                    background:
+                      props.fontColor ||
+                      props.currWidgetsDetails?.options?.fontColor ||
+                      "black"
+                  }}
+                  className="w-5 h-[19px] ml-1"
+                ></span>
+              </div>
+            </div>
+            {["checkbox", radioButtonWidget, "dropdown"].includes(
+              props.type
+            ) && (
              <div className="flex flex-row gap-5 my-2 items-center text-center">
-                {!props.isSignYourself && (
+                {props.isShowAdvanceFeature && (
                  <div className="flex items-center">
                    <input
                      id="isreadonly"
@@ -346,25 +330,28 @@ function DropdownWidgetOption(props) {
                    </label>
                  </div>
                )}
-                <div className="flex items-center">
-                  <input
-                    id="ishidelabel"
-                    type="checkbox"
-                    checked={isHideLabel}
-                    className="op-checkbox op-checkbox-sm"
-                    onChange={(e) => setIsHideLabel(e.target.checked)}
-                  />
+                {props.type !== "dropdown" && (
+                  <div className="flex items-center">
+                    <input
+                      id="ishidelabel"
+                      type="checkbox"
+                      checked={isHideLabel}
+                      className="op-checkbox op-checkbox-sm"
+                      onChange={(e) => setIsHideLabel(e.target.checked)}
+                    />

-                  <label className="ml-1 mb-0" htmlFor="ishidelabel">
-                    {t("hide-labels")}
-                  </label>
-                </div>
+                    <label className="ml-1 mb-0" htmlFor="ishidelabel">
+                      {t("hide-labels")}
+                    </label>
+                  </div>
+                )}
              </div>
            )}
          </div>
+
          <div
            className={`${
-              props.type === "checkbox" && !props.isSignYourself
+              props.type === "checkbox" && props.isShowAdvanceFeature
                ? "mb-[15px]"
                : "my-[15px]"
            } w-full h-[1px] bg-[#9f9f9f]`}
@@ -1,198 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { checkIsSubscribed, getFileName } from "../../constant/Utils";
-import Upgrade from "../../primitives/Upgrade";
-import { isEnableSubscription } from "../../constant/const";
-import { useTranslation } from "react-i18next";
-// import SelectFolder from "../../premitives/SelectFolder";
-
-const EditTemplate = ({ template, onSuccess }) => {
-  const { t } = useTranslation();
-  // const [folder, setFolder] = useState({ ObjectId: "", Name: "" });
-  const [formData, setFormData] = useState({
-    Name: template?.Name || "",
-    Note: template?.Note || "",
-    Description: template?.Description || "",
-    SendinOrder: template?.SendinOrder ? `${template?.SendinOrder}` : "false",
-    AutomaticReminders: template?.AutomaticReminders || false,
-    RemindOnceInEvery: template?.RemindOnceInEvery || 5
-  });
-  const [isSubscribe, setIsSubscribe] = useState(false);
-  useEffect(() => {
-    fetchSubscription();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  const fetchSubscription = async () => {
-    if (isEnableSubscription) {
-      const getIsSubscribe = await checkIsSubscribed();
-      setIsSubscribe(getIsSubscribe);
-    }
-  };
-  const handleStrInput = (e) => {
-    setFormData({ ...formData, [e.target.name]: e.target.value });
-  };
-  // const handleFolder = (data) => {
-  //   console.log("handleFolder ", data)
-  //   setFolder(data);
-  // };
-
-  // Define a function to handle form submission
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    const isChecked = formData.SendinOrder === "true" ? true : false;
-    const AutoReminder = formData?.AutomaticReminders || false;
-
-    let reminderDate = {};
-    if (AutoReminder) {
-      const RemindOnceInEvery = parseInt(formData?.RemindOnceInEvery);
-      const ReminderDate = new Date(template?.createdAt);
-      ReminderDate.setDate(ReminderDate.getDate() + RemindOnceInEvery);
-      reminderDate = { NextReminderDate: ReminderDate };
-    }
-    const data = { ...formData, SendinOrder: isChecked, ...reminderDate };
-    onSuccess(data);
-  };
-  const handleAutoReminder = () => {
-    setFormData((prev) => ({
-      ...prev,
-      AutomaticReminders: !formData.AutomaticReminders
-    }));
-  };
-  return (
-    <div className="max-h-[300px] md:max-h-[400px] overflow-y-scroll p-[10px]">
-      <div className="text-base-content">
-        <form onSubmit={handleSubmit}>
-          <div className="mb-[0.35rem]">
-            <label htmlFor="name" className="text-[13px]">
-              {t("report-heading.File")}
-            </label>
-            <div className="op-input op-input-bordered op-input-sm focus:outline-none py-2 font-semibold w-full text-xs">
-              {getFileName(template.URL)}
-            </div>
-          </div>
-          <div className="mb-[0.35rem]">
-            <label htmlFor="name" className="text-[13px]">
-              {t("name")}
-              <span className="text-[13px] text-[red]"> *</span>
-            </label>
-            <input
-              type="text"
-              name="Name"
-              value={formData.Name}
-              onChange={(e) => handleStrInput(e)}
-              onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
-              onInput={(e) => e.target.setCustomValidity("")}
-              required
-              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-            />
-          </div>
-          <div className="mb-[0.35rem]">
-            <label htmlFor="Note" className="text-[13px]">
-              {t("report-heading.Note")}
-            </label>
-            <input
-              type="text"
-              name="Note"
-              id="Note"
-              value={formData.Note}
-              onChange={(e) => handleStrInput(e)}
-              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-            />
-          </div>
-          <div className="mb-[0.35rem]">
-            <label htmlFor="Description" className="text-[13px]">
-              {t("description")}
-            </label>
-            <input
-              type="text"
-              name="Description"
-              id="Description"
-              value={formData.Description}
-              onChange={(e) => handleStrInput(e)}
-              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-            />
-          </div>
-          <div className="mb-[0.35rem]">
-            <label className="text-[13px]">{t("send-in-order")}</label>
-            <div className="flex items-center gap-[8px] ml-[8px] mb-[5px]">
-              <input
-                type="radio"
-                value={"true"}
-                className="op-radio op-radio-xs"
-                name="SendinOrder"
-                checked={formData.SendinOrder === "true"}
-                onChange={handleStrInput}
-              />
-              <div className="text-[12px]">{t("yes")}</div>
-            </div>
-            <div className="flex items-center gap-[8px] ml-[8px] mb-[5px]">
-              <input
-                type="radio"
-                value={"false"}
-                name="SendinOrder"
-                className="op-radio op-radio-xs"
-                checked={formData.SendinOrder === "false"}
-                onChange={handleStrInput}
-              />
-              <div className="text-[12px]">{t("no")}</div>
-            </div>
-          </div>
-          {isEnableSubscription && (
-            <div className="text-xs mt-2">
-              <span
-                className={
-                  isSubscribe ? "font-semibold" : "font-semibold text-gray-300"
-                }
-              >
-                {t("auto-reminder")}
-                {"  "}
-                {!isSubscribe && isEnableSubscription && <Upgrade />}
-              </span>
-              <label
-                className={`${
-                  isSubscribe
-                    ? "cursor-pointer "
-                    : "pointer-events-none opacity-50"
-                } relative block items-center mb-0`}
-              >
-                <input
-                  checked={formData.AutomaticReminders}
-                  onChange={handleAutoReminder}
-                  type="checkbox"
-                  className="op-toggle transition-all checked:[--tglbg:#3368ff] checked:bg-white mt-2"
-                />
-              </label>
-            </div>
-          )}
-          {isSubscribe && formData?.AutomaticReminders === true && (
-            <div className="text-xs mt-2">
-              <label className="block">
-                {t("remind-once")}
-                <span className="text-red-500 text-[13px]">*</span>
-              </label>
-              <input
-                type="number"
-                value={formData.RemindOnceInEvery}
-                name="RemindOnceInEvery"
-                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-                onChange={handleStrInput}
-                onInvalid={(e) =>
-                  e.target.setCustomValidity(t("input-required"))
-                }
-                onInput={(e) => e.target.setCustomValidity("")}
-                required
-              />
-            </div>
-          )}
-          <div className="mt-[1rem] flex justify-start">
-            <button type="submit" className="op-btn op-btn-primary">
-              {t("submit")}
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-};
-
-export default EditTemplate;
@@ -0,0 +1,538 @@
+import React, {
+  useState,
+  useRef,
+} from "react";
+import {
+  base64ToArrayBuffer,
+  convertBase64ToFile,
+  generatePdfName,
+  getFileName
+} from "../../constant/Utils";
+import {
+  maxDescriptionLength,
+  maxNoteLength,
+  maxTitleLength
+} from "../../constant/const";
+import { useTranslation } from "react-i18next";
+import { Tooltip } from "react-tooltip";
+import SignersInput from "../shared/fields/SignersInput";
+import { PDFDocument } from "pdf-lib";
+import ModalUi from "../../primitives/ModalUi";
+import { SaveFileSize } from "../../constant/saveFileSize";
+
+const EditTemplate = ({
+  title,
+  handleClose,
+  pdfbase64,
+  template,
+  onSuccess,
+  setPdfArrayBuffer,
+  setPdfBase64Url,
+}) => {
+  const appName =
+    "OpenSign™";
+  const { t } = useTranslation();
+  const inputFileRef = useRef(null);
+  const [formData, setFormData] = useState({
+    Name: template?.Name || "",
+    Note: template?.Note || "",
+    Description: template?.Description || "",
+    SendinOrder: template?.SendinOrder ? `${template?.SendinOrder}` : "false",
+    AutomaticReminders: template?.AutomaticReminders || false,
+    RemindOnceInEvery: template?.RemindOnceInEvery || 5,
+    IsEnableOTP: template?.IsEnableOTP ? `${template?.IsEnableOTP}` : "false",
+    IsTourEnabled: template?.IsTourEnabled
+      ? `${template?.IsTourEnabled}`
+      : "false",
+    NotifyOnSignatures:
+      template?.NotifyOnSignatures !== undefined
+        ? template?.NotifyOnSignatures
+        : false,
+    Bcc: template?.Bcc,
+    RedirectUrl: template?.RedirectUrl || "",
+    AllowModifications: template?.AllowModifications || false,
+    TimeToCompleteDays: template?.TimeToCompleteDays || 15
+  });
+  const [isUpdate, setIsUpdate] = useState(false);
+  const [showConfirm, setShowConfirm] = useState(false);
+  const [uploadPdf, setUploadPdf] = useState({
+    name: "",
+    base64: "",
+    url: ""
+  });
+  const handleDrop = (e) => {
+    e.preventDefault();
+    const file = e.dataTransfer.files[0];
+    handleFile(file);
+  };
+
+  const handleFile = (file) => {
+    if (file && file.type === "application/pdf") {
+      handleReplaceFileValdition(file);
+      // You can handle the file here
+    } else {
+      alert("Only pdf files are allowed.");
+      if (inputFileRef.current) inputFileRef.current.value = "";
+    }
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+  };
+
+  // `isValidURL` is used to check valid webhook url
+  function isValidURL(value) {
+    try {
+      const url = new URL(value);
+      return url.protocol === "https:" || url.protocol === "http:";
+    } catch (error) {
+      return false;
+    }
+  }
+
+  const handleStrInput = (e) => {
+    setIsUpdate(true);
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
+  const getPdfMetadataHash = async (pdfBytes) => {
+    const pdfDoc = await PDFDocument.load(pdfBytes);
+    const pages = pdfDoc.getPages();
+    const metaString = pages
+      .map((page, index) => {
+        const { width, height } = page.getSize();
+        return `${index + 1}:${Math.round(width)}x${Math.round(height)}`;
+      })
+      .join("|");
+    const encoder = new TextEncoder();
+    const data = encoder.encode(metaString);
+    const hashBuffer = await crypto.subtle.digest("SHA-256", data);
+    return Array.from(new Uint8Array(hashBuffer))
+      .map((b) => b.toString(16).padStart(2, "0"))
+      .join("");
+  };
+
+  const handleFileInput = async (e) => {
+    const file = e.target.files[0];
+    if (!file) return;
+    handleReplaceFileValdition(file);
+  };
+  const handleReplaceFileValdition = async (file) => {
+    try {
+      const basePdfBytes = base64ToArrayBuffer(pdfbase64);
+      const expectedHash = await getPdfMetadataHash(basePdfBytes);
+      const fileReader = new FileReader();
+      fileReader.onload = async (event) => {
+        const uploadedPdfBytes = event.target.result;
+        const uploadedHash = await getPdfMetadataHash(uploadedPdfBytes);
+
+        if (expectedHash === uploadedHash) {
+          const arrayBuffer = uploadedPdfBytes;
+          const uint8Array = new Uint8Array(arrayBuffer);
+          const binaryString = Array.from(uint8Array)
+            .map((b) => String.fromCharCode(b))
+            .join("");
+          const base64 = btoa(binaryString);
+          const pdfName = generatePdfName(16);
+          setIsUpdate(true);
+          setUploadPdf((prev) => ({ ...prev, name: pdfName, base64: base64 }));
+          // alert("✅ PDFs match (based on page number, width, height)");
+        } else {
+          alert("❌ PDF do NOT match based on page number, width, height");
+          if (inputFileRef.current) inputFileRef.current.value = "";
+        }
+      };
+
+      fileReader.readAsArrayBuffer(file);
+    } catch (err) {
+      alert("Error: " + err.message);
+      if (inputFileRef.current) inputFileRef.current.value = "";
+    }
+  };
+  // Define a function to handle form submission
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (formData.RedirectUrl && !isValidURL(formData?.RedirectUrl)) {
+      alert(t("invalid-redirect-url"));
+      return;
+    }
+    if (formData?.Name?.length > maxTitleLength) {
+      alert(t("title-length-alert"));
+      return;
+    }
+    if (formData?.Note?.length > maxNoteLength) {
+      alert(t("note-length-alert"));
+      return;
+    }
+    if (formData?.Description?.length > maxDescriptionLength) {
+      alert(t("description-length-alert"));
+      return;
+    }
+    let pdfUrl;
+    if (uploadPdf?.base64) {
+      pdfUrl = await convertBase64ToFile(
+        uploadPdf.name,
+        uploadPdf.base64,
+      );
+      setUploadPdf((prev) => ({ ...prev, url: pdfUrl }));
+      const pdfBuffer = base64ToArrayBuffer(uploadPdf.base64);
+      setPdfArrayBuffer && setPdfArrayBuffer(pdfBuffer);
+      setPdfBase64Url && setPdfBase64Url(uploadPdf.base64);
+      const tenantId =
+        localStorage.getItem("TenantId") ||
+        template?.ExtUserPtr?.TenantId?.objectId;
+      const buffer = atob(uploadPdf.base64);
+      SaveFileSize(buffer.length, pdfUrl, tenantId);
+    }
+    const isChecked = formData.SendinOrder === "true" ? true : false;
+    const isTourEnabled = formData?.IsTourEnabled === "false" ? false : true;
+    const AutoReminder = formData?.AutomaticReminders || false;
+    const IsEnableOTP = formData.IsEnableOTP === "true" ? true : false;
+    const allowModify = formData?.AllowModifications || false;
+    let reminderDate = {};
+    const remindOnceInEvery = formData?.RemindOnceInEvery;
+    const TimeToCompleteDays = parseInt(formData?.TimeToCompleteDays);
+    const reminderCount = TimeToCompleteDays / remindOnceInEvery;
+    if (AutoReminder && reminderCount > 15) {
+      alert(t("only-15-reminder-allowed"));
+      return;
+    }
+    if (AutoReminder) {
+      const RemindOnceInEvery = parseInt(formData?.RemindOnceInEvery);
+      const ReminderDate = new Date(template?.createdAt);
+      ReminderDate.setDate(ReminderDate.getDate() + RemindOnceInEvery);
+      reminderDate = { NextReminderDate: ReminderDate };
+    }
+    const data = {
+      ...formData,
+      ...(pdfUrl ? { URL: pdfUrl } : {}),
+      SendinOrder: isChecked,
+      IsEnableOTP: IsEnableOTP,
+      IsTourEnabled: isTourEnabled,
+      AllowModifications: allowModify,
+      ...reminderDate
+    };
+    onSuccess(data);
+  };
+
+  // `handleNotifySignChange` is trigger when user change radio of notify on signatures
+  const handleNotifySignChange = (value) => {
+    setIsUpdate(true);
+    setFormData((obj) => ({ ...obj, NotifyOnSignatures: value }));
+  };
+  const handleBcc = (data) => {
+    if (data && data.length > 0) {
+      const trimEmail = data.map((item) => ({
+        objectId: item?.value,
+        Name: item?.label,
+        Email: item?.email
+      }));
+      setIsUpdate(true);
+      setFormData((prev) => ({ ...prev, Bcc: trimEmail }));
+    }
+  };
+
+  const handleEditTemplateClose = () => {
+    if (isUpdate) {
+      setShowConfirm(true);
+    } else {
+      handleClose();
+    }
+  };
+  const discardChanges = () => {
+    setShowConfirm(false);
+    handleClose();
+  };
+  return (
+    <ModalUi
+      isOpen
+      title={isUpdate ? `${title} (unsaved)` : title}
+      handleClose={handleEditTemplateClose}
+    >
+      <ModalUi isOpen={showConfirm} showClose={false}>
+        <div className="p-[20px]">
+          <p className="text-base font-normal text-base-content py-[5px] md:py-[6px] px-[5px]">
+            {t("unsaved-changes-discard-them?")}
+          </p>
+          <div className="flex items-center mt-2.5 gap-2 md:gap-3 text-white">
+            <button
+              className="op-btn op-btn-primary px-6"
+              onClick={discardChanges}
+            >
+              {t("yes-discard")}
+            </button>
+            <button
+              className="op-btn op-btn-secondary px-4 md:px-6"
+              onClick={() => setShowConfirm(false)}
+            >
+              {t("cancel")}
+            </button>
+          </div>
+        </div>
+      </ModalUi>
+      <div className="max-h-[300px] md:max-h-[400px] overflow-y-scroll p-[10px]">
+        <div className="text-base-content">
+          <form onSubmit={handleSubmit}>
+            <div className="mb-[0.35rem]">
+              <label htmlFor="name" className="text-[13px]">
+                {t("report-heading.File")}
+              </label>
+              <div
+                className="border-[1.5px] border-dashed border-gray-300 rounded-lg px-4 py-6 text-center text-gray-500 bg-white cursor-pointer hover:border-base-content transition"
+                onDrop={handleDrop}
+                onDragOver={handleDragOver}
+                onClick={() => inputFileRef?.current?.click()}
+              >
+                <label
+                  htmlFor="fileUpload"
+                  className="cursor-pointer text-center mb-0"
+                >
+                  Browse or drag & drop a new file to replace the existng one
+                </label>
+              </div>
+              <input
+                ref={inputFileRef}
+                type="file"
+                className="hidden"
+                accept="application/pdf"
+                onChange={(e) => handleFileInput(e)}
+                onInvalid={(e) =>
+                  e.target.setCustomValidity(t("input-required"))
+                }
+                onInput={(e) => e.target.setCustomValidity("")}
+              />
+              {uploadPdf?.name && (
+                <div
+                  onClick={() => inputFileRef?.current?.click()}
+                  className="mt-2 cursor-pointer op-input op-input-bordered op-input-sm focus:outline-none py-2 font-semibold w-full text-xs"
+                >
+                  selected:{" "}
+                  {uploadPdf?.url
+                    ? `${uploadPdf?.name}.pdf`
+                    : getFileName(template.URL)}
+                </div>
+              )}
+            </div>
+            <div className="mb-[0.35rem]">
+              <label htmlFor="name" className="text-[13px]">
+                {t("Title")}
+                <span className="text-[13px] text-[red]"> *</span>
+              </label>
+              <input
+                type="text"
+                name="Name"
+                value={formData.Name}
+                onChange={(e) => handleStrInput(e)}
+                onInvalid={(e) =>
+                  e.target.setCustomValidity(t("input-required"))
+                }
+                onInput={(e) => e.target.setCustomValidity("")}
+                required
+                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+              />
+            </div>
+            <div className="mb-[0.35rem]">
+              <label htmlFor="Note" className="text-[13px]">
+                {t("report-heading.Note")}
+              </label>
+              <input
+                type="text"
+                name="Note"
+                id="Note"
+                value={formData.Note}
+                onChange={(e) => handleStrInput(e)}
+                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+              />
+            </div>
+            <div className="mb-[0.35rem]">
+              <label htmlFor="Description" className="text-[13px]">
+                {t("description")}
+              </label>
+              <input
+                type="text"
+                name="Description"
+                id="Description"
+                value={formData.Description}
+                onChange={(e) => handleStrInput(e)}
+                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+              />
+            </div>
+            <div className="mb-[0.35rem]">
+              <label className="text-[13px]">{t("send-in-order")}</label>
+              <div className="flex flex-col md:flex-row md:gap-4">
+                <div className="flex items-center gap-[8px] ml-[8px] mb-[5px]">
+                  <input
+                    type="radio"
+                    value={"true"}
+                    className="op-radio op-radio-xs"
+                    name="SendinOrder"
+                    checked={formData.SendinOrder === "true"}
+                    onChange={handleStrInput}
+                  />
+                  <div className="text-[12px]">{t("yes")}</div>
+                </div>
+                <div className="flex items-center gap-[8px] ml-[8px] mb-[5px]">
+                  <input
+                    type="radio"
+                    value={"false"}
+                    name="SendinOrder"
+                    className="op-radio op-radio-xs"
+                    checked={formData.SendinOrder === "false"}
+                    onChange={handleStrInput}
+                  />
+                  <div className="text-[12px]">{t("no")}</div>
+                </div>
+              </div>
+            </div>
+            <div className="text-xs mt-3">
+              <label className="block">
+                <span>
+                  {t("enable-tour")}
+                  <a data-tooltip-id="istourenabled-tooltip" className="ml-1">
+                    <sup>
+                      <i className="fa-light fa-question rounded-full border-[#33bbff] text-[#33bbff] text-[13px] border-[1px] py-[1.5px] px-[4px]"></i>
+                    </sup>
+                  </a>{" "}
+                </span>
+                <Tooltip id="istourenabled-tooltip" className="z-50">
+                  <div className="max-w-[200px] md:max-w-[450px]">
+                    <p className="font-bold">{t("enable-tour")}</p>
+                    <div className="p-[5px]">
+                      <ol className="list-disc">
+                        <li>
+                          <span className="font-bold">{t("yes")}: </span>
+                          <span>{t("istourenabled-help.p1")}</span>
+                        </li>
+                        <li>
+                          <span className="font-bold">{t("no")}: </span>
+                          <span>{t("istourenabled-help.p2")}</span>
+                        </li>
+                      </ol>
+                    </div>
+                    <p>{t("istourenabled-help.p3", { appName: appName })}</p>
+                  </div>
+                </Tooltip>
+              </label>
+              <div className="flex flex-col md:flex-row md:gap-4">
+                <div className="flex items-center gap-2 ml-2 mb-1">
+                  <input
+                    type="radio"
+                    value={"true"}
+                    className="op-radio op-radio-xs"
+                    name="IsTourEnabled"
+                    checked={formData.IsTourEnabled === "true"}
+                    onChange={handleStrInput}
+                  />
+                  <div className="text-center">{t("yes")}</div>
+                </div>
+                <div className="flex items-center gap-2 ml-2 mb-1">
+                  <input
+                    type="radio"
+                    value={"false"}
+                    name="IsTourEnabled"
+                    className="op-radio op-radio-xs"
+                    checked={formData.IsTourEnabled === "false"}
+                    onChange={handleStrInput}
+                  />
+                  <div className="text-center">{t("no")}</div>
+                </div>
+              </div>
+            </div>
+            <div className="text-xs mt-3">
+              <label>
+                {t("notify-on-signatures")}
+                <a data-tooltip-id="nos-tooltip" className="ml-1">
+                  <sup>
+                    <i className="fa-light fa-question rounded-full border-[#33bbff] text-[#33bbff] text-[13px] border-[1px] py-[1.5px] px-[4px]"></i>
+                  </sup>
+                </a>{" "}
+                <Tooltip id="nos-tooltip" className="z-[999]">
+                  <div className="max-w-[200px] md:max-w-[450px] text-[11px]">
+                    <p className="font-bold">{t("notify-on-signatures")}</p>
+                    <p>{t("notify-on-signatures-help.p1")}</p>
+                    <p>{t("notify-on-signatures-help.note")}</p>
+                  </div>
+                </Tooltip>
+              </label>
+              <div className="flex flex-col md:flex-row md:gap-4">
+                <div
+                  className={
+                    `flex items-center gap-2 ml-2 mb-1`
+                  }
+                >
+                  <input
+                    className="mr-[2px] op-radio op-radio-xs"
+                    type="radio"
+                    onChange={() => handleNotifySignChange(true)}
+                    checked={formData.NotifyOnSignatures === true}
+                  />
+                  <div className="text-center">{t("yes")}</div>
+                </div>
+                <div
+                  className={
+                    `flex items-center gap-2 ml-2 mb-1`
+                  }
+                >
+                  <input
+                    className="mr-[2px] op-radio op-radio-xs"
+                    type="radio"
+                    onChange={() => handleNotifySignChange(false)}
+                    checked={formData.NotifyOnSignatures === false}
+                  />
+                  <div className="text-center">{t("no")}</div>
+                </div>
+              </div>
+            </div>
+            <div className="text-xs mt-3">
+              <SignersInput
+                label={t("Bcc")}
+                initialData={template?.Bcc}
+                onChange={handleBcc}
+                helptextZindex={50}
+                helpText={t("bcc-help")}
+                isCaptureAllData
+              />
+            </div>
+            <div className="text-xs mt-2">
+              <label className="block">Redirect Url</label>
+              <input
+                name="RedirectUrl"
+                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                value={formData.RedirectUrl}
+                onChange={handleStrInput}
+                onInvalid={(e) =>
+                  e.target.setCustomValidity(t("input-required"))
+                }
+                onInput={(e) => e.target.setCustomValidity("")}
+              />
+            </div>
+            <div className="text-xs mt-2">
+              <label className="block">
+                {t("time-to-complete")}
+                <span className="text-red-500 text-[13px]">*</span>
+              </label>
+              <input
+                type="number"
+                name="TimeToCompleteDays"
+                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                value={formData.TimeToCompleteDays}
+                onChange={(e) => handleStrInput(e)}
+                onInvalid={(e) =>
+                  e.target.setCustomValidity(t("input-required"))
+                }
+                onInput={(e) => e.target.setCustomValidity("")}
+                required
+              />
+            </div>
+            <div className="mt-[1rem] flex justify-start">
+              <button type="submit" className="op-btn op-btn-primary">
+                {t("submit")}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </ModalUi>
+  );
+};
+
+export default EditTemplate;
@@ -54,17 +54,20 @@ Quill.register(Font, true);
 export const module1 = {
  toolbar: {
    container: "#toolbar1",
-    handlers: {
-      undo: undoChange,
-      redo: redoChange
-    }
+    handlers: { undo: undoChange, redo: redoChange }
  },
-  history: {
-    delay: 500,
-    maxStack: 100,
-    userOnly: true
-  }
+  history: { delay: 500, maxStack: 100, userOnly: true }
 };
+
+// Modules object for setting up the Quill editor
+export const module2 = {
+  toolbar: {
+    container: "#toolbar2",
+    handlers: { undo: undoChange, redo: redoChange }
+  },
+  history: { delay: 500, maxStack: 100, userOnly: true }
+};
+
 // Formats objects for setting up the Quill editor
 export const formats = [
  "header",
@@ -1,21 +1,22 @@
 import React, { useState } from "react";
-import axios from "axios";
-import { handleDownloadPdf, handleToPrint } from "../../constant/Utils";
-import { themeColor, emailRegex } from "../../constant/const";
+import {
+  handleToPrint,
+} from "../../constant/Utils";
+import {
+  emailRegex,
+} from "../../constant/const";
 import Loader from "../../primitives/Loader";
 import ModalUi from "../../primitives/ModalUi";
 import { useTranslation } from "react-i18next";
+import Parse from "parse";

 function EmailComponent({
  isEmail,
-  pdfUrl,
  setIsEmail,
  setSuccessEmail,
  pdfDetails,
-  sender,
  setIsAlert,
-  extUserId,
-  activeMailAdapter
+  setIsDownloadModal
 }) {
  const { t } = useTranslation();
  const [emailList, setEmailList] = useState([]);
@@ -24,77 +25,24 @@ function EmailComponent({
  const [emailErr, setEmailErr] = useState(false);
  const [isDownloading, setIsDownloading] = useState("");
  const isAndroid = /Android/i.test(navigator.userAgent);
+
  //function for send email
  const sendEmail = async () => {
-    const pdfName = pdfDetails[0]?.Name;
    setIsLoading(true);
-    let sendMail;
-    for (let i = 0; i < emailList.length; i++) {
-      try {
-        const imgPng =
-          "https://qikinnovation.ams3.digitaloceanspaces.com/logo.png";
-
-        let url = `${localStorage.getItem("baseUrl")}functions/sendmailv3/`;
-        const headers = {
-          "Content-Type": "application/json",
-          "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-          sessionToken: localStorage.getItem("accesstoken")
-        };
-        const openSignUrl = "https://www.opensignlabs.com/contact-us";
-        const themeBGcolor = themeColor;
-        let params = {
-          mailProvider: activeMailAdapter,
-          extUserId: extUserId,
-          pdfName: pdfName,
-          url: pdfUrl,
-          recipient: emailList[i],
-          subject: `${sender.name} has signed the doc - ${pdfName}`,
-          from: sender.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-color:white;'> <div><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',>  Document Copy</p></div><div><p style='padding:20px;font-family:system-ui;font-size:14px'>A copy of the document <strong>" +
-            pdfName +
-            " </strong>is attached to this email. Kindly download the document from the attachment.</p></div> </div><div><p>This is an automated email from OpenSign™. For any queries regarding this email, please contact the sender " +
-            sender.email +
-            " 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>"
-        };
-        sendMail = await axios.post(url, params, { headers: headers });
-      } catch (error) {
-        console.log("error", error);
-        setIsLoading(false);
-        setIsEmail(false);
-        setIsAlert({
-          isShow: true,
-          alertMessage: t("something-went-wrong-mssg")
-        });
-      }
-    }
-
-    if (sendMail && sendMail.data.result.status === "success") {
+    const params = { docId: pdfDetails?.[0]?.objectId, recipients: emailList };
+    const sendmail = await Parse.Cloud.run("forwarddoc", params);
+    console.log("sendmail ", sendmail);
+    if (sendmail?.status === "success") {
      setSuccessEmail(true);
+      setIsEmail(false);
      setTimeout(() => {
        setSuccessEmail(false);
-        setIsEmail(false);
        setEmailValue("");
        setEmailList([]);
      }, 1500);
-
      setIsLoading(false);
-    } else if (sendMail && sendMail.data.result.status === "error") {
-      setIsLoading(false);
-      setIsEmail(false);
-      setIsAlert({
-        isShow: true,
-        alertMessage: t("something-went-wrong-mssg")
-      });
-      setEmailValue("");
-      setEmailList([]);
-    } else {
+    }
+    else {
      setIsLoading(false);
      setIsEmail(false);
      setIsAlert({
@@ -140,6 +88,11 @@ function EmailComponent({
      }
    }
  };
+  const handleClose = () => {
+    setIsEmail(false);
+    setEmailValue("");
+    setEmailList([]);
+  };
  return (
    <div>
      {/* isEmail */}
@@ -159,24 +112,27 @@ function EmailComponent({
            </div>
          )}
          <div className="flex justify-between items-center py-[10px] px-[20px] border-b-[1px] border-base-content">
-            <span className="text-base-content font-semibold">
+            <span className="text-base-content font-bold text-sm md:text-lg">
              {t("successfully-signed")}
            </span>
            <div className="flex flex-row">
              {!isAndroid && (
                <button
-                  onClick={(e) => handleToPrint(e, pdfUrl, setIsDownloading)}
-                  className="op-btn op-btn-neutral op-btn-sm text-[15px]"
+                  onClick={(e) =>
+                    handleToPrint(e, setIsDownloading, pdfDetails)
+                  }
+                  className="op-btn op-btn-neutral op-btn-sm text-xs md:text-[15px]"
                >
                  <i className="fa-light fa-print" aria-hidden="true"></i>
                  {t("print")}
                </button>
              )}
              <button
-                className="op-btn op-btn-primary op-btn-sm text-[15px] ml-2"
-                onClick={() =>
-                  handleDownloadPdf(pdfDetails, pdfUrl, setIsDownloading)
-                }
+                className="op-btn op-btn-primary op-btn-sm text-xs md:text-[15px] ml-2"
+                onClick={() => {
+                  handleClose();
+                  setIsDownloadModal(true);
+                }}
              >
                <i className="fa-light fa-download" aria-hidden="true"></i>
                {t("download")}
@@ -188,12 +144,12 @@ function EmailComponent({
              {t("email-mssg")}
            </p>
            {emailList.length > 0 ? (
-              <div className="p-0 border-[1.5px] op-border-primary rounded w-full text-[15px]">
+              <div className="p-0 border-[1px] op-border-primary w-full rounded-md text-[15px] overflow-hidden">
                <div className="flex flex-row flex-wrap">
                  {emailList.map((data, ind) => {
                    return (
                      <div
-                        className="flex flex-row items-center op-bg-primary m-[4px] rounded-md py-[5px] px-[10px]"
+                        className="flex flex-row items-center op-bg-primary mx-[2px] mt-[2px] rounded-md py-[5px] px-[10px]"
                        key={ind}
                      >
                        <span className="text-base-100 text-[13px]">
@@ -213,7 +169,7 @@ function EmailComponent({
                  <input
                    type="email"
                    value={emailValue}
-                    className="p-[10px] pb-[20px] rounded w-full text-[15px] bg-transparent outline-none"
+                    className="p-[10px] rounded-md w-full text-[15px] bg-transparent outline-none"
                    onChange={handleEmailValue}
                    onKeyDown={handleEnterPress}
                    onBlur={() => emailValue && handleEnterPress("add")}
@@ -230,7 +186,7 @@ function EmailComponent({
                <input
                  type="email"
                  value={emailValue}
-                  className="p-[10px] pb-[20px] rounded w-full text-[15px] outline-none bg-transparent border-[1.5px] op-border-primary"
+                  className="p-[10px] pb-[20px] rounded-md w-full text-[15px] outline-none bg-transparent border-[1px] op-border-primary"
                  onChange={handleEmailValue}
                  onKeyDown={handleEnterPress}
                  placeholder={t("enter-email-plaholder")}
@@ -248,7 +204,7 @@ function EmailComponent({
                {t("email-error-1")}
              </p>
            )}
-            <button
+            {/* <button
              className={`${
                emailValue ? "cursor-pointer" : "cursor-default"
              } op-btn op-btn-primary op-btn-sm m-2 shadow-md`}
@@ -256,30 +212,27 @@ function EmailComponent({
            >
              <i className="fa-light fa-plus" aria-hidden="true"></i>
            </button>
-
            <div className="bg-[#e3e2e1] mt-[10px] p-[5px] rounded">
              <span className="font-bold">{t("report-heading.Note")}: </span>
              <span className="text-[15px]">{t("email-error-2")}</span>
            </div>
-            <hr className="w-full my-[15px] bg-base-content" />
-            <button
-              type="button"
-              className="op-btn op-btn-secondary"
-              onClick={() => emailList.length > 0 && sendEmail()}
-            >
-              {t("send")}
-            </button>
-            <button
-              type="button"
-              className="op-btn op-btn-ghost ml-2"
-              onClick={() => {
-                setIsEmail(false);
-                setEmailValue("");
-                setEmailList([]);
-              }}
-            >
-              {t("close")}
-            </button>
+            <hr className="w-full my-[15px] bg-base-content" /> */}
+            <div className="mt-2">
+              <button
+                type="button"
+                className="op-btn op-btn-secondary"
+                onClick={() => emailList.length > 0 && sendEmail()}
+              >
+                {t("send")}
+              </button>
+              <button
+                type="button"
+                className="op-btn op-btn-ghost ml-2"
+                onClick={() => handleClose()}
+              >
+                {t("close")}
+              </button>
+            </div>
          </div>
        </ModalUi>
      )}
@@ -1,480 +0,0 @@
-import React, { useState } from "react";
-import PrevNext from "./PrevNext";
-import {
-  handleDownloadCertificate,
-  handleDownloadPdf,
-  handleToPrint
-} from "../../constant/Utils";
-import "../../styles/signature.css";
-import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import ModalUi from "../../primitives/ModalUi";
-import Loader from "../../primitives/Loader";
-import { useTranslation } from "react-i18next";
-
-function Header({
-  isPdfRequestFiles,
-  isPlaceholder,
-  setIsDecline,
-  pageNumber,
-  allPages,
-  changePage,
-  pdfUrl,
-  embedWidgetsData,
-  pdfDetails,
-  signerPos,
-  signersdata,
-  isMailSend,
-  alertSendEmail,
-  isCompleted,
-  isShowHeader,
-  decline,
-  currentSigner,
-  alreadySign,
-  isSignYourself,
-  setIsEmail,
-  completeBtnTitle,
-  setIsEditTemplate,
-  isPublicTemplate
-}) {
-  const { t } = useTranslation();
-  const filterPrefill =
-    signerPos && signerPos?.filter((data) => data.Role !== "prefill");
-  const isMobile = window.innerWidth < 767;
-  const [isDownloading, setIsDownloading] = useState("");
-  const isGuestSigner = localStorage.getItem("isGuestSigner");
-
-  //function for show decline alert
-  const handleDeclinePdfAlert = async () => {
-    const currentDecline = { currnt: "Sure", isDeclined: true };
-    setIsDecline(currentDecline);
-  };
-
-  return (
-    <div className="flex py-[5px]">
-      {isMobile && isShowHeader ? (
-        <div
-          id="navbar"
-          className={isGuestSigner ? "stickySignerHead" : "stickyHead"}
-          style={{
-            width: isGuestSigner
-              ? window.innerWidth
-              : window.innerWidth - 30 + "px"
-          }}
-        >
-          <div className="flex justify-between items-center py-[5px] px-[10px] ">
-            <div onClick={() => window.history.go(-2)}>
-              <i
-                className="fa-light fa-arrow-left text-base-content"
-                aria-hidden="true"
-              ></i>
-            </div>
-            <PrevNext
-              pageNumber={pageNumber}
-              allPages={allPages}
-              changePage={changePage}
-            />
-            {pdfUrl && alreadySign ? (
-              <DropdownMenu.Root>
-                <DropdownMenu.Trigger asChild>
-                  <div className="op-link op-link-primary no-underline text-[16px] font-semibold pr-[3px] pl-[5px]">
-                    <i
-                      className="fa-light fa-ellipsis-v"
-                      aria-hidden="true"
-                    ></i>
-                  </div>
-                </DropdownMenu.Trigger>
-                <DropdownMenu.Portal>
-                  <DropdownMenu.Content
-                    className="DropdownMenuContent"
-                    sideOffset={5}
-                  >
-                    <DropdownMenu.Item
-                      className="DropdownMenuItem"
-                      onClick={() =>
-                        handleDownloadPdf(pdfDetails, pdfUrl, setIsDownloading)
-                      }
-                    >
-                      <div className="flex flex-row">
-                        <i
-                          className="fa-light fa-arrow-down mr-[3px]"
-                          aria-hidden="true"
-                        ></i>
-                        {t("download")}
-                      </div>
-                    </DropdownMenu.Item>
-                    {isCompleted && (
-                      <DropdownMenu.Item
-                        className="DropdownMenuItem"
-                        onClick={() =>
-                          handleDownloadCertificate(
-                            pdfDetails,
-                            setIsDownloading
-                          )
-                        }
-                      >
-                        <div className="border-none bg-[#fff]">
-                          <i
-                            className="fa-light fa-award mr-[3px]"
-                            aria-hidden="true"
-                          ></i>
-                          {t("certificate")}
-                        </div>
-                      </DropdownMenu.Item>
-                    )}
-                    {isSignYourself && (
-                      <DropdownMenu.Item
-                        className="DropdownMenuItem"
-                        onClick={() => setIsEmail(true)}
-                      >
-                        <div className="flex flex-row">
-                          <i
-                            className="fa-light fa-envelope mr-[3px]"
-                            aria-hidden="true"
-                          ></i>
-                          {t("mail")}
-                        </div>
-                      </DropdownMenu.Item>
-                    )}
-                    <DropdownMenu.Item
-                      className="DropdownMenuItem"
-                      onClick={(e) =>
-                        handleToPrint(e, pdfUrl, setIsDownloading)
-                      }
-                    >
-                      <div className="flex flex-row">
-                        <i
-                          className="fa-light fa-print mr-[3px]"
-                          aria-hidden="true"
-                        ></i>
-                        {t("print")}
-                      </div>
-                    </DropdownMenu.Item>
-                  </DropdownMenu.Content>
-                </DropdownMenu.Portal>
-              </DropdownMenu.Root>
-            ) : (
-              <div className="flex justify-around items-center">
-                {/* current signer is checking user send request and check status of pdf sign than if current 
-                user exist than show finish button else no
-                */}
-                {currentSigner && (
-                  <div className="flex items-center" data-tut="reactourFifth">
-                    {decline && (
-                      <div
-                        onClick={() => handleDeclinePdfAlert()}
-                        className="text-[red] border-none font-[650] text-[14px] mr-2"
-                      >
-                        {t("decline")}
-                      </div>
-                    )}
-                    {isPlaceholder ? (
-                      <div
-                        onClick={() => {
-                          if (!isMailSend) {
-                            alertSendEmail();
-                          }
-                        }}
-                        className={`${
-                          isMailSend ? "" : "op-link-primary"
-                        } op-link no-underline font-[650] text-[14px]`}
-                        data-tut="headerArea"
-                      >
-                        {completeBtnTitle ? completeBtnTitle : t("send")}
-                      </div>
-                    ) : (
-                      <div
-                        data-tut="reactourThird"
-                        onClick={() => {
-                          if (!pdfUrl) {
-                            embedWidgetsData();
-                          } else if (isPdfRequestFiles) {
-                            embedWidgetsData();
-                          }
-                        }}
-                        className="border-none font-[650] text-[14px] op-link op-link-primary no-underline"
-                      >
-                        {t("finish")}
-                      </div>
-                    )}
-                    <DropdownMenu.Root>
-                      <DropdownMenu.Trigger asChild>
-                        <div className="font-[650] text-[18px] px-2 ml-[4px] text-base-content no-underline">
-                          <i
-                            className="fa-light fa-ellipsis-v"
-                            aria-hidden="true"
-                          ></i>
-                        </div>
-                      </DropdownMenu.Trigger>
-                      <DropdownMenu.Portal>
-                        <DropdownMenu.Content
-                          className="bg-white shadow-md rounded-full px-3 py-2"
-                          sideOffset={5}
-                        >
-                          <DropdownMenu.Item
-                            className="flex flex-row justify-center items-center text-[13px] focus:outline-none cursor-pointer"
-                            onClick={() =>
-                              handleDownloadPdf(
-                                pdfDetails,
-                                pdfUrl,
-                                setIsDownloading
-                              )
-                            }
-                          >
-                            <i
-                              className="fa-light fa-arrow-down mr-[3px]"
-                              aria-hidden="true"
-                            ></i>
-                            <span className="font-[500]">{t("download")}</span>
-                          </DropdownMenu.Item>
-                        </DropdownMenu.Content>
-                      </DropdownMenu.Portal>
-                    </DropdownMenu.Root>
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
-        </div>
-      ) : (
-        <div className="flex flex-wrap justify-between items-center w-full gap-y-1 ml-1">
-          <PrevNext
-            pageNumber={pageNumber}
-            allPages={allPages}
-            changePage={changePage}
-          />
-          {isPlaceholder ? (
-            <>
-              <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 className="text-[13px] text-[#f5405e]">
-                          {t("add")} {signersdata.length - filterPrefill.length}{" "}
-                          {t("recipients")} {t("widgets-name.signature")}
-                        </span>
-                      ) : (
-                        <span className="text-[13px] text-[#f5405e]">
-                          {t("add")} {signersdata.length - filterPrefill.length}{" "}
-                          {t("more")}
-                          {t("recipients")} {t("widgets-name.signature")}
-                        </span>
-                      )}
-                    </div>
-                  )}
-              </div>
-              <div className="flex">
-                {setIsEditTemplate && (
-                  <button
-                    onClick={() => setIsEditTemplate(true)}
-                    className="outline-none border-none text-center mr-[3px]"
-                  >
-                    <i className="fa-light fa-gear fa-lg"></i>
-                  </button>
-                )}
-                <button
-                  onClick={() => window.history.go(-2)}
-                  type="button"
-                  className="op-btn op-btn-ghost op-btn-sm mr-[3px]"
-                >
-                  {t("back")}
-                </button>
-                <button
-                  disabled={isMailSend && true}
-                  data-tut="headerArea"
-                  className="op-btn op-btn-primary op-btn-sm mr-[3px]"
-                  onClick={() => alertSendEmail()}
-                >
-                  {completeBtnTitle
-                    ? completeBtnTitle
-                    : isMailSend
-                      ? t("sent")
-                      : t("send")}
-                </button>
-              </div>
-            </>
-          ) : isPdfRequestFiles ? (
-            alreadySign ? (
-              <div className="flex flex-row">
-                <button
-                  onClick={(e) => handleToPrint(e, pdfUrl, setIsDownloading)}
-                  type="button"
-                  className="op-btn op-btn-neutral op-btn-sm mr-[3px] shadow"
-                >
-                  <i
-                    className="fa-light fa-print py-[3px]"
-                    aria-hidden="true"
-                  ></i>
-                  <span className="hidden lg:block">{t("print")}</span>
-                </button>
-                {isCompleted && (
-                  <button
-                    type="button"
-                    onClick={() =>
-                      handleDownloadCertificate(pdfDetails, setIsDownloading)
-                    }
-                    className="op-btn op-btn-secondary op-btn-sm mr-[3px] shadow"
-                  >
-                    <i
-                      className="fa-light fa-award py-[3px]"
-                      aria-hidden="true"
-                    ></i>
-                    <span className="hidden lg:block">{t("certificate")}</span>
-                  </button>
-                )}
-                <button
-                  type="button"
-                  className="op-btn op-btn-primary op-btn-sm mr-[3px] shadow"
-                  onClick={() =>
-                    handleDownloadPdf(pdfDetails, pdfUrl, setIsDownloading)
-                  }
-                >
-                  <i
-                    className="fa-light fa-download py-[3px]"
-                    aria-hidden="true"
-                  ></i>
-                  <span className="hidden lg:block">{t("download")}</span>
-                </button>
-              </div>
-            ) : (
-              <div className="flex" data-tut="reactourFifth">
-                <button
-                  onClick={() => window.history.go(-2)}
-                  type="button"
-                  className="op-btn op-btn-ghost op-btn-sm mr-[3px]"
-                >
-                  {t("back")}
-                </button>
-                {currentSigner && (
-                  <>
-                    <button
-                      className="op-btn op-btn-secondary op-btn-sm mr-[3px] shadow"
-                      onClick={() => handleDeclinePdfAlert()}
-                    >
-                      {t("decline")}
-                    </button>
-                    <button
-                      type="button"
-                      className="op-btn op-btn-primary op-btn-sm mr-[3px] shadow"
-                      onClick={() => embedWidgetsData()}
-                    >
-                      {t("finish")}
-                    </button>
-                    <button
-                      type="button"
-                      className="op-btn op-btn-neutral op-btn-sm mr-[3px] shadow"
-                      onClick={() =>
-                        handleDownloadPdf(pdfDetails, pdfUrl, setIsDownloading)
-                      }
-                    >
-                      <i className="fa-light fa-arrow-down font-semibold lg:hidden"></i>
-                      <span className="hidden lg:block">{t("download")}</span>
-                    </button>
-                  </>
-                )}
-              </div>
-            )
-          ) : isCompleted ? (
-            <div className="flex flex-row">
-              {isCompleted && (
-                <button
-                  type="button"
-                  onClick={() =>
-                    handleDownloadCertificate(pdfDetails, setIsDownloading)
-                  }
-                  className="op-btn op-btn-secondary op-btn-sm gap-0 font-medium text-[12px] mr-[3px] shadow"
-                >
-                  <i className="fa-light fa-award" aria-hidden="true"></i>
-                  <span className="hidden lg:block ml-1">
-                    {t("certificate")}
-                  </span>
-                </button>
-              )}
-              <button
-                onClick={(e) => handleToPrint(e, pdfUrl, setIsDownloading)}
-                type="button"
-                className="op-btn op-btn-neutral op-btn-sm gap-0 font-medium text-[12px] mr-[3px] shadow"
-              >
-                <i className="fa-light fa-print" aria-hidden="true"></i>
-                <span className="hidden lg:block ml-1">{t("print")}</span>
-              </button>
-              <button
-                type="button"
-                className="op-btn op-btn-primary op-btn-sm gap-0 font-medium text-[12px] mr-[3px] shadow"
-                onClick={() =>
-                  handleDownloadPdf(pdfDetails, pdfUrl, setIsDownloading)
-                }
-              >
-                <i className="fa-light fa-download" aria-hidden="true"></i>
-                <span className="hidden lg:block ml-1">{t("download")}</span>
-              </button>
-              <button
-                type="button"
-                className="op-btn op-btn-info op-btn-sm gap-0 font-medium text-[12px] mr-[3px] shadow"
-                onClick={() => setIsEmail(true)}
-              >
-                <i className="fa-light fa-envelope" aria-hidden="true"></i>
-                <span className="hidden lg:block ml-1">{t("mail")}</span>
-              </button>
-            </div>
-          ) : isPublicTemplate ? (
-            <div className="flex">
-              <button
-                type="button"
-                className="op-btn op-btn-primary op-btn-sm  shadow"
-                onClick={() => {
-                  embedWidgetsData();
-                }}
-              >
-                {t("sign-now")}
-              </button>
-            </div>
-          ) : (
-            <div className="flex">
-              <button
-                onClick={() => window.history.go(-2)}
-                type="button"
-                className="op-btn op-btn-ghost op-btn-sm mr-[3px]"
-              >
-                {t("back")}
-              </button>
-              <button
-                type="button"
-                className="op-btn op-btn-primary op-btn-sm mr-[3px]"
-                onClick={() => {
-                  if (!pdfUrl) {
-                    embedWidgetsData();
-                  }
-                }}
-              >
-                {t("finish")}
-              </button>
-            </div>
-          )}
-        </div>
-      )}
-      {isDownloading === "pdf" && (
-        <div className="fixed z-[200] inset-0 flex justify-center items-center bg-black bg-opacity-30">
-          <Loader />
-        </div>
-      )}
-      <ModalUi
-        isOpen={isDownloading === "certificate"}
-        title={
-          isDownloading === "certificate"
-            ? t("generating-certificate")
-            : t("pdf-download")
-        }
-        handleClose={() => setIsDownloading("")}
-      >
-        <div className="p-3 md:p-5 text-[13px] md:text-base text-center text-base-content">
-          {isDownloading === "certificate"}{" "}
-          <p>{t("generate-certificate-alert")}</p>
-        </div>
-      </ModalUi>
-    </div>
-  );
-}
-
-export default Header;
@@ -0,0 +1,703 @@
+import React, { useRef, useState } from "react";
+import PrevNext from "./PrevNext";
+import {
+  base64ToArrayBuffer,
+  deletePdfPage,
+  handleDownloadCertificate,
+  handleDownloadPdf,
+  handleRemoveWidgets,
+  handleToPrint
+} from "../../constant/Utils";
+import "../../styles/signature.css";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import ModalUi from "../../primitives/ModalUi";
+import Loader from "../../primitives/Loader";
+import { useTranslation } from "react-i18next";
+import { PDFDocument } from "pdf-lib";
+import { maxFileSize } from "../../constant/const";
+
+function Header(props) {
+  const { t } = useTranslation();
+  const filterPrefill =
+    props?.signerPos &&
+    props?.signerPos?.filter((data) => data.Role !== "prefill");
+  const isMobile = window.innerWidth < 767;
+  const [isDownloading, setIsDownloading] = useState("");
+  const [isDeletePage, setIsDeletePage] = useState(false);
+  const mergePdfInputRef = useRef(null);
+  const enabledBackBtn = props?.disabledBackBtn === true ? false : true;
+  //function for show decline alert
+  const handleDeclinePdfAlert = async () => {
+    if (props?.handleDecline) {
+      props.handleDecline();
+    } else {
+      const currentDecline = { currnt: "Sure", isDeclined: true };
+      props?.setIsDecline(currentDecline);
+    }
+  };
+  const handleDetelePage = async () => {
+    props?.setIsUploadPdf && props?.setIsUploadPdf(true);
+    const pdfupdatedData = await deletePdfPage(
+      props?.pdfArrayBuffer,
+      props?.pageNumber
+    );
+    if (pdfupdatedData?.totalPages === 1) {
+      alert(t("delete-alert"));
+    } else {
+      props?.setPdfBase64Url(pdfupdatedData.base64);
+      props?.setPdfArrayBuffer(pdfupdatedData.arrayBuffer);
+      setIsDeletePage(false);
+      handleRemoveWidgets(
+        props?.setSignerPos,
+        props?.signerPos,
+        props?.pageNumber
+      );
+    }
+  };
+
+  // `removeFile` is used to  remove file if exists
+  const removeFile = (e) => {
+    if (e) {
+      e.target.value = "";
+    }
+  };
+
+  const handleFileUpload = async (e) => {
+    const file = e.target.files[0];
+    if (!file) {
+      alert("Please upload a valid PDF file.");
+      return;
+    }
+    if (!file.type.includes("pdf")) {
+      alert("Only PDF files are allowed.");
+      return;
+    }
+
+    const mb = Math.round(file?.size / Math.pow(1024, 2));
+    if (mb > maxFileSize) {
+      alert(`${t("file-alert-1")} ${maxFileSize} MB`);
+      removeFile(e);
+      return;
+    }
+    try {
+      const uploadedPdfBytes = await file.arrayBuffer();
+      const uploadedPdfDoc = await PDFDocument.load(uploadedPdfBytes, {
+        ignoreEncryption: true
+      });
+      const basePdfDoc = await PDFDocument.load(props.pdfArrayBuffer);
+
+      // Copy pages from the uploaded PDF to the base PDF
+      const uploadedPdfPages = await basePdfDoc.copyPages(
+        uploadedPdfDoc,
+        uploadedPdfDoc.getPageIndices()
+      );
+      uploadedPdfPages.forEach((page) => basePdfDoc.addPage(page));
+      // Save the updated PDF
+      const pdfBase64 = await basePdfDoc.saveAsBase64({
+        useObjectStreams: false
+      });
+      const pdfBuffer = base64ToArrayBuffer(pdfBase64);
+      props.setPdfArrayBuffer(pdfBuffer);
+      props.setPdfBase64Url(pdfBase64);
+      props.setIsUploadPdf && props.setIsUploadPdf(true);
+      mergePdfInputRef.current.value = "";
+    } catch (error) {
+      mergePdfInputRef.current.value = "";
+      console.error("Error merging PDF:", error);
+    }
+  };
+  return (
+    <div className="flex py-[5px]">
+      {isMobile && props?.isShowHeader ? (
+        <div
+          id="navbar"
+          className="stickyHead"
+          style={{
+            width: window.innerWidth + "px"
+          }}
+        >
+          <div className="flex justify-between items-center py-[5px] pl-[10px] ">
+            <div onClick={() => window.history.go(-2)}>
+              <i
+                className="fa-light fa-arrow-left text-base-content"
+                aria-hidden="true"
+              ></i>
+            </div>
+            <PrevNext
+              pageNumber={props?.pageNumber}
+              allPages={props?.allPages}
+              changePage={props?.changePage}
+            />
+            {props?.isCompleted || props?.alreadySign ? (
+              <DropdownMenu.Root>
+                <DropdownMenu.Trigger asChild>
+                  <div className="op-link op-link-primary no-underline text-[16px] font-semibold px-3">
+                    <i
+                      className="fa-light fa-ellipsis-v"
+                      aria-hidden="true"
+                    ></i>
+                  </div>
+                </DropdownMenu.Trigger>
+                <DropdownMenu.Portal>
+                  <DropdownMenu.Content
+                    className="DropdownMenuContent"
+                    sideOffset={5}
+                  >
+                    <DropdownMenu.Item
+                      className="DropdownMenuItem"
+                      onClick={() => {
+                        if (props?.isCompleted) {
+                          props?.setIsDownloadModal(true);
+                        } else {
+                          handleDownloadPdf(
+                            props?.pdfDetails,
+                            setIsDownloading,
+                            props.pdfBase64
+                          );
+                        }
+                      }}
+                    >
+                      <div className="flex flex-row">
+                        <i
+                          className="fa-light fa-arrow-down mr-[3px]"
+                          aria-hidden="true"
+                        ></i>
+                        {t("download")}
+                      </div>
+                    </DropdownMenu.Item>
+                    {props?.isCompleted && (
+                      <DropdownMenu.Item
+                        className="DropdownMenuItem"
+                        onClick={() =>
+                          handleDownloadCertificate(
+                            props?.pdfDetails,
+                            setIsDownloading
+                          )
+                        }
+                      >
+                        <div className="border-none bg-[#fff]">
+                          <i
+                            className="fa-light fa-award mr-[3px]"
+                            aria-hidden="true"
+                          ></i>
+                          {t("certificate")}
+                        </div>
+                      </DropdownMenu.Item>
+                    )}
+                    {props?.isSignYourself && (
+                      <DropdownMenu.Item
+                        className="DropdownMenuItem"
+                        onClick={() => props?.setIsEmail(true)}
+                      >
+                        <div className="flex flex-row">
+                          <i
+                            className="fa-light fa-envelope mr-[3px]"
+                            aria-hidden="true"
+                          ></i>
+                          {t("mail")}
+                        </div>
+                      </DropdownMenu.Item>
+                    )}
+                    <DropdownMenu.Item
+                      className="DropdownMenuItem"
+                      onClick={(e) =>
+                        handleToPrint(e, setIsDownloading, props?.pdfDetails)
+                      }
+                    >
+                      <div className="flex flex-row">
+                        <i
+                          className="fa-light fa-print mr-[3px]"
+                          aria-hidden="true"
+                        ></i>
+                        {t("print")}
+                      </div>
+                    </DropdownMenu.Item>
+                  </DropdownMenu.Content>
+                </DropdownMenu.Portal>
+              </DropdownMenu.Root>
+            ) : (
+              <div className="flex justify-around items-center">
+                {/* current signer is checking user send request and check status of pdf sign than if current 
+                user exist than show finish button else no
+                */}
+                {props?.currentSigner && (
+                  <div className="flex items-center" data-tut="reactourFifth">
+                    {props?.decline && (
+                      <div
+                        onClick={() => handleDeclinePdfAlert()}
+                        className="text-[red] border-none font-[650] text-[14px] mr-2"
+                      >
+                        {t("decline")}
+                      </div>
+                    )}
+                    {props?.isPlaceholder ? (
+                      <div
+                        onClick={() => {
+                          if (!props?.isMailSend) {
+                            props?.alertSendEmail();
+                          }
+                        }}
+                        className={`${
+                          props?.isMailSend ? "" : "op-link-primary"
+                        } op-link no-underline font-[650] text-[14px]`}
+                        data-tut="headerArea"
+                      >
+                        {props?.completeBtnTitle
+                          ? props?.completeBtnTitle
+                          : t("send")}
+                      </div>
+                    ) : (
+                      <div
+                        data-tut="reactourThird"
+                        onClick={() => props?.embedWidgetsData()}
+                        className="border-none font-[650] text-[14px] op-link op-link-primary no-underline"
+                      >
+                        {t("finish")}
+                      </div>
+                    )}
+                    <input
+                      type="file"
+                      className="hidden"
+                      accept="application/pdf"
+                      ref={mergePdfInputRef}
+                      onChange={handleFileUpload}
+                    />
+                    <DropdownMenu.Root>
+                      <DropdownMenu.Trigger asChild>
+                        <div className="font-[650] text-[18px] px-3  text-base-content no-underline">
+                          <i
+                            className="fa-light fa-ellipsis-v"
+                            aria-hidden="true"
+                          ></i>
+                        </div>
+                      </DropdownMenu.Trigger>
+                      <DropdownMenu.Portal>
+                        <DropdownMenu.Content
+                          className="bg-white shadow-md rounded-md px-3 py-2"
+                          sideOffset={5}
+                        >
+                          {props?.setIsEditTemplate && (
+                            <DropdownMenu.Item
+                              className="DropdownMenuItem"
+                              onClick={() => props?.setIsEditTemplate(true)}
+                            >
+                              <div className="flex flex-row">
+                                <i
+                                  className="fa-light fa-gear mr-[3px]"
+                                  aria-hidden="true"
+                                ></i>
+                                <span className="font-[500]">{t("Edit")}</span>
+                              </div>
+                            </DropdownMenu.Item>
+                          )}
+                          <DropdownMenu.Item
+                            className="DropdownMenuItem"
+                            onClick={() =>
+                              handleDownloadPdf(
+                                props?.pdfDetails,
+                                setIsDownloading,
+                                props.pdfBase64
+                              )
+                            }
+                          >
+                            <div className="flex flex-row">
+                              <i
+                                className="fa-light fa-arrow-down mr-[3px]"
+                                aria-hidden="true"
+                              ></i>
+                              <span className="font-[500]">
+                                {t("download")}
+                              </span>
+                            </div>
+                          </DropdownMenu.Item>
+                          {!props?.isDisablePdfEditTools && (
+                            <>
+                              <DropdownMenu.Item
+                                className="DropdownMenuItem"
+                                onClick={() => mergePdfInputRef.current.click()}
+                              >
+                                <div className="flex flex-row">
+                                  <i className="fa-light fa-plus text-gray-500 2xl:text-[30px] mr-[3px]"></i>
+                                  <span className="font-[500]">
+                                    {t("add-pages")}
+                                  </span>
+                                </div>
+                              </DropdownMenu.Item>
+                              <DropdownMenu.Item
+                                className="DropdownMenuItem"
+                                onClick={() => setIsDeletePage(true)}
+                              >
+                                <div className="flex flex-row">
+                                  <i className="fa-light fa-trash text-gray-500 2xl:text-[30px] mr-[3px]"></i>
+                                  <span className="font-[500]">
+                                    {t("delete-page")}
+                                  </span>
+                                </div>
+                              </DropdownMenu.Item>
+
+                              <DropdownMenu.Item
+                                className="DropdownMenuItem"
+                                onClick={() => props?.handleRotationFun(90)}
+                              >
+                                <div className="flex flex-row">
+                                  <i className="fa-light fa-rotate-right text-gray-500 2xl:text-[30px] mr-[3px]"></i>
+                                  <span className="font-[500]">
+                                    {t("rotate-right")}
+                                  </span>
+                                </div>
+                              </DropdownMenu.Item>
+                              <DropdownMenu.Item
+                                className="DropdownMenuItem"
+                                onClick={() => props?.handleRotationFun(-90)}
+                              >
+                                <div className="flex flex-row">
+                                  <i className="fa-light fa-rotate-left text-gray-500 2xl:text-[30px] mr-[3px]"></i>
+                                  <span className="font-[500]">
+                                    {t("rotate-left")}
+                                  </span>
+                                </div>
+                              </DropdownMenu.Item>
+                            </>
+                          )}
+
+                          <DropdownMenu.Item
+                            className="DropdownMenuItem"
+                            onClick={() => props?.clickOnZoomIn()}
+                          >
+                            <div className="flex flex-row">
+                              <i className="fa-light fa-magnifying-glass-plus text-gray-500 2xl:text-[30px] mr-[3px]"></i>
+                              <span className="font-[500]">{t("zoom-in")}</span>
+                            </div>
+                          </DropdownMenu.Item>
+                          <DropdownMenu.Item
+                            className="DropdownMenuItem"
+                            onClick={() => props?.clickOnZoomOut()}
+                          >
+                            <div className="flex flex-row">
+                              <i className="fa-light fa-magnifying-glass-minus text-gray-500 2xl:text-[30px] mr-[3px]"></i>
+                              <span className="font-[500]">
+                                {t("zoom-out")}
+                              </span>
+                            </div>
+                          </DropdownMenu.Item>
+                        </DropdownMenu.Content>
+                      </DropdownMenu.Portal>
+                    </DropdownMenu.Root>
+                  </div>
+                )}
+                {props?.isPublicTemplate && (
+                  <div
+                    data-tut="reactourThird"
+                    onClick={() => props?.embedWidgetsData()}
+                    className="border-none font-[650] text-[14px] pr-2 op-link op-link-primary no-underline"
+                  >
+                    {t("sign-now")}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      ) : (
+        <div className="flex flex-wrap justify-between items-center w-full gap-y-1 ml-1">
+          <PrevNext
+            pageNumber={props?.pageNumber}
+            allPages={props?.allPages}
+            changePage={props?.changePage}
+          />
+          {props?.isPlaceholder ? (
+            <>
+              <div className="flex mx-[100px] lg:mx-0 order-last lg:order-none">
+                {!props?.isMailSend &&
+                  props?.signersdata.length > 0 &&
+                  props?.signersdata.length !== filterPrefill.length && (
+                    <div>
+                      {filterPrefill.length === 0 ? (
+                        <span className="text-[13px] text-[#f5405e]">
+                          {t("add")}{" "}
+                          {props?.signersdata.length - filterPrefill.length}{" "}
+                          {t("recipients")} {t("widgets-name.signature")}
+                        </span>
+                      ) : (
+                        <span className="text-[13px] text-[#f5405e]">
+                          {t("add")}{" "}
+                          {props?.signersdata.length - filterPrefill.length}{" "}
+                          {t("more")}
+                          {t("recipients")} {t("widgets-name.signature")}
+                        </span>
+                      )}
+                    </div>
+                  )}
+              </div>
+              <div className="flex">
+                {props?.setIsEditTemplate && (
+                  <button
+                    onClick={() => props?.setIsEditTemplate(true)}
+                    className="outline-none border-none text-center mr-[3px]"
+                  >
+                    <i className="fa-light fa-gear fa-lg"></i>
+                  </button>
+                )}
+                {enabledBackBtn && (
+                  <button
+                    onClick={() => window.history.go(-2)}
+                    type="button"
+                    className="op-btn op-btn-ghost op-btn-sm mr-[3px]"
+                  >
+                    {t("back")}
+                  </button>
+                )}
+                <button
+                  disabled={props?.isMailSend && true}
+                  data-tut="headerArea"
+                  className="op-btn op-btn-primary op-btn-sm mr-[3px]"
+                  onClick={() => props?.alertSendEmail()}
+                >
+                  {props?.completeBtnTitle
+                    ? props?.completeBtnTitle
+                    : props?.isMailSend
+                      ? t("sent")
+                      : t("send")}
+                </button>
+              </div>
+            </>
+          ) : props?.isPdfRequestFiles || props?.isSelfSign ? (
+            props?.alreadySign || (props?.isSelfSign && props?.isCompleted) ? (
+              <div className="flex flex-row">
+                <button
+                  onClick={(e) =>
+                    handleToPrint(e, setIsDownloading, props?.pdfDetails)
+                  }
+                  type="button"
+                  className="op-btn op-btn-neutral op-btn-sm mr-[3px] shadow"
+                >
+                  <i
+                    className="fa-light fa-print py-[3px]"
+                    aria-hidden="true"
+                  ></i>
+                  <span className="hidden lg:block">{t("print")}</span>
+                </button>
+                {props?.isCompleted && (
+                  <button
+                    type="button"
+                    onClick={() =>
+                      handleDownloadCertificate(
+                        props?.pdfDetails,
+                        setIsDownloading
+                      )
+                    }
+                    className="op-btn op-btn-secondary op-btn-sm mr-[3px] shadow"
+                  >
+                    <i
+                      className="fa-light fa-award py-[3px]"
+                      aria-hidden="true"
+                    ></i>
+                    <span className="hidden lg:block">{t("certificate")}</span>
+                  </button>
+                )}
+                <button
+                  type="button"
+                  className="op-btn op-btn-primary op-btn-sm mr-[3px] shadow"
+                  onClick={() => {
+                    if (props?.isCompleted) {
+                      props?.setIsDownloadModal(true);
+                    } else {
+                      handleDownloadPdf(
+                        props?.pdfDetails,
+                        setIsDownloading,
+                        props.pdfBase64
+                      );
+                    }
+                  }}
+                >
+                  <i
+                    className="fa-light fa-download py-[3px]"
+                    aria-hidden="true"
+                  ></i>
+                  <span className="hidden lg:block">{t("download")}</span>
+                </button>
+              </div>
+            ) : (
+              <div className="flex" data-tut="reactourFifth">
+                {props?.currentSigner && (
+                  <>
+                    {props?.templateId && (
+                      <button
+                        onClick={() =>
+                          handleDownloadPdf(
+                            props?.pdfDetails,
+                            setIsDownloading,
+                            props.pdfBase64
+                          )
+                        }
+                        type="button"
+                        className="op-btn op-btn-ghost op-btn-sm mr-[3px]"
+                      >
+                        <span className="hidden lg:block">{t("download")}</span>
+                      </button>
+                    )}
+                    {!props?.isSelfSign && (
+                      <button
+                        className="op-btn op-btn-secondary op-btn-sm mr-[3px] shadow"
+                        onClick={() => handleDeclinePdfAlert()}
+                      >
+                        {t("decline")}
+                      </button>
+                    )}
+                    {!props?.templateId && (
+                      <button
+                        type="button"
+                        className="op-btn op-btn-ghost op-btn-sm mr-[3px]"
+                        onClick={() =>
+                          handleDownloadPdf(
+                            props?.pdfDetails,
+                            setIsDownloading,
+                            props.pdfBase64
+                          )
+                        }
+                      >
+                        <i className="fa-light fa-arrow-down font-semibold lg:hidden"></i>
+                        <span className="hidden lg:block">{t("download")}</span>
+                      </button>
+                    )}
+                    <button
+                      type="button"
+                      className="op-btn op-btn-primary op-btn-sm mr-[3px] shadow"
+                      onClick={() => props?.embedWidgetsData()}
+                    >
+                      {t("finish")}
+                    </button>
+                  </>
+                )}
+              </div>
+            )
+          ) : props?.isCompleted ? (
+            <div className="flex flex-row">
+              {props?.isCompleted && (
+                <button
+                  type="button"
+                  onClick={() =>
+                    handleDownloadCertificate(
+                      props?.pdfDetails,
+                      setIsDownloading
+                    )
+                  }
+                  className="op-btn op-btn-secondary op-btn-sm gap-0 font-medium text-[12px] mr-[3px] shadow"
+                >
+                  <i className="fa-light fa-award" aria-hidden="true"></i>
+                  <span className="hidden lg:block ml-1">
+                    {t("certificate")}
+                  </span>
+                </button>
+              )}
+              <button
+                onClick={(e) =>
+                  handleToPrint(e, setIsDownloading, props?.pdfDetails)
+                }
+                type="button"
+                className="op-btn op-btn-neutral op-btn-sm gap-0 font-medium text-[12px] mr-[3px] shadow"
+              >
+                <i className="fa-light fa-print" aria-hidden="true"></i>
+                <span className="hidden lg:block ml-1">{t("print")}</span>
+              </button>
+              <button
+                type="button"
+                className="op-btn op-btn-primary op-btn-sm gap-0 font-medium text-[12px] mr-[3px] shadow"
+                onClick={() => props?.setIsDownloadModal(true)}
+              >
+                <i className="fa-light fa-download" aria-hidden="true"></i>
+                <span className="hidden lg:block ml-1">{t("download")}</span>
+              </button>
+              <button
+                type="button"
+                className="op-btn op-btn-info op-btn-sm gap-0 font-medium text-[12px] mr-[3px] shadow"
+                onClick={() => props?.setIsEmail(true)}
+              >
+                <i className="fa-light fa-envelope" aria-hidden="true"></i>
+                <span className="hidden lg:block ml-1">{t("mail")}</span>
+              </button>
+            </div>
+          ) : props?.isPublicTemplate ? (
+            <div className="flex">
+              <button
+                type="button"
+                className="op-btn op-btn-primary op-btn-sm  shadow"
+                onClick={() => props?.embedWidgetsData()}
+              >
+                {t("sign-now")}
+              </button>
+            </div>
+          ) : (
+            <div className="flex">
+              <button
+                onClick={() => window.history.go(-2)}
+                type="button"
+                className="op-btn op-btn-ghost op-btn-sm mr-[3px]"
+              >
+                {t("back")}
+              </button>
+              <button
+                type="button"
+                className="op-btn op-btn-primary op-btn-sm mr-[3px]"
+                onClick={() => props?.embedWidgetsData()}
+              >
+                {t("finish")}
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+      {isDownloading === "pdf" && (
+        <div className="fixed z-[200] inset-0 flex justify-center items-center bg-black bg-opacity-30">
+          <Loader />
+        </div>
+      )}
+      <ModalUi
+        isOpen={
+          isDownloading === "certificate" || isDownloading === "certificate_err"
+        }
+        title={
+          isDownloading === "certificate" || isDownloading === "certificate_err"
+            ? t("generating-certificate")
+            : t("pdf-download")
+        }
+        handleClose={() => setIsDownloading("")}
+      >
+        <div className="p-3 md:p-5 text-[13px] md:text-base text-center text-base-content">
+          {isDownloading === "certificate" ? (
+            <p>{t("generate-certificate-alert")}</p>
+          ) : (
+            <p>{t("generate-certificate-err")}</p>
+          )}
+        </div>
+      </ModalUi>
+      <ModalUi
+        isOpen={isDeletePage}
+        title={t("delete-page")}
+        handleClose={() => setIsDeletePage(false)}
+      >
+        <div className="h-[100%] p-[20px]">
+          <p className="font-medium">{t("delete-alert-2")}</p>
+          <p className="pt-3">{t("delete-note")}</p>
+          <div className="h-[1px] bg-[#9f9f9f] w-full my-[15px]"></div>
+          <button
+            onClick={() => handleDetelePage()}
+            type="button"
+            className="op-btn op-btn-primary"
+          >
+            {t("yes")}
+          </button>
+          <button
+            onClick={() => setIsDeletePage(false)}
+            type="button"
+            className="op-btn op-btn-ghost"
+          >
+            {t("no")}
+          </button>
+        </div>
+      </ModalUi>
+    </div>
+  );
+}
+
+export default Header;
@@ -1,55 +0,0 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-
-function PdfZoom(props) {
-  const { t } = useTranslation();
-  const onClickZoomIn = () => {
-    props.setScale(props.scale + 0.1 * props.scale);
-    props.setZoomPercent(props.zoomPercent + 10);
-  };
-  const onClickZoomOut = () => {
-    if (props.zoomPercent > 0) {
-      if (props.zoomPercent === 10) {
-        props.setScale(1);
-      } else {
-        props.setScale(props.scale - 0.1 * props.scale);
-      }
-      props.setZoomPercent(props.zoomPercent - 10);
-    }
-  };
-  const handleReset = () => {
-    props.setScale(1);
-    props.setZoomPercent(0);
-  };
-  return (
-    // md:mt-[41px] xl:mt-[63px]mt=[]
-    <span className="hidden md:flex flex-col gap-1 text-center md:w-[5%] mt-[50px] 2xl:mt-[63px]">
-      <span
-        className="bg-gray-50 px-[4px] 2xl:px-[15px] 2xl:py-[10px] cursor-pointer"
-        onClick={onClickZoomIn}
-        title={t("zoom-in")}
-      >
-        <i className="fa-light fa-magnifying-glass-plus text-gray-500 2xl:text-[30px]"></i>
-      </span>
-      <span
-        className="bg-gray-50 px-[4px] 2xl:px-[15px] 2xl:py-[10px] cursor-pointer"
-        onClick={handleReset}
-        title={t("reset")}
-      >
-        <i className="fa-light fa-magnifying-glass-arrows-rotate text-gray-500 2xl:text-[30px]"></i>
-      </span>
-      <span
-        className="bg-gray-50 px-[4px] 2xl:px-[15px] 2xl:py-[10px]"
-        onClick={onClickZoomOut}
-        style={{
-          cursor: props.zoomPercent > 0 ? "pointer" : "default"
-        }}
-        title={t("zoom-out")}
-      >
-        <i className="fa-light fa-magnifying-glass-minus text-gray-500 2xl:text-[30px]"></i>
-      </span>
-    </span>
-  );
-}
-
-export default PdfZoom;
@@ -0,0 +1,192 @@
+import React, { useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  base64ToArrayBuffer,
+  deletePdfPage,
+  handleRemoveWidgets
+} from "../../constant/Utils";
+import ModalUi from "../../primitives/ModalUi";
+import { PDFDocument } from "pdf-lib";
+import { maxFileSize } from "../../constant/const";
+
+function PdfZoom(props) {
+  const { t } = useTranslation();
+  const mergePdfInputRef = useRef(null);
+  const [isDeletePage, setIsDeletePage] = useState(false);
+  const handleDetelePage = async () => {
+    props.setIsUploadPdf && props.setIsUploadPdf(true);
+    try {
+      const pdfupdatedData = await deletePdfPage(
+        props.pdfArrayBuffer,
+        props.pageNumber
+      );
+      if (pdfupdatedData?.totalPages === 1) {
+        alert(t("delete-alert"));
+      } else {
+        props.setPdfBase64Url(pdfupdatedData.base64);
+        props.setPdfArrayBuffer(pdfupdatedData.arrayBuffer);
+        setIsDeletePage(false);
+        handleRemoveWidgets(
+          props.setSignerPos,
+          props.signerPos,
+          props.pageNumber
+        );
+        props.setAllPages(pdfupdatedData.remainingPages || 1);
+        if (props.allPages === props.pageNumber) {
+          props.setPageNumber(props.pageNumber - 1);
+        } else if (props.allPages > 2) {
+          props.setPageNumber(props.pageNumber);
+        }
+      }
+    } catch (e) {
+      console.log("error in delete pdf page", e);
+    }
+  };
+
+  // `removeFile` is used to  remove file if exists
+  const removeFile = (e) => {
+    if (e) {
+      e.target.value = "";
+    }
+  };
+
+  const handleFileUpload = async (e) => {
+    const file = e.target.files[0];
+    if (!file) {
+      alert("Please upload a valid PDF file.");
+      return;
+    }
+    if (!file.type.includes("pdf")) {
+      alert("Only PDF files are allowed.");
+      return;
+    }
+    const mb = Math.round(file?.size / Math.pow(1024, 2));
+    if (mb > maxFileSize) {
+      alert(`${t("file-alert-1")} ${maxFileSize} MB`);
+      removeFile(e);
+      return;
+    }
+    try {
+      const uploadedPdfBytes = await file.arrayBuffer();
+      const uploadedPdfDoc = await PDFDocument.load(uploadedPdfBytes, {
+        ignoreEncryption: true
+      });
+      const basePdfDoc = await PDFDocument.load(props.pdfArrayBuffer);
+
+      // Copy pages from the uploaded PDF to the base PDF
+      const uploadedPdfPages = await basePdfDoc.copyPages(
+        uploadedPdfDoc,
+        uploadedPdfDoc.getPageIndices()
+      );
+      uploadedPdfPages.forEach((page) => basePdfDoc.addPage(page));
+      // Save the updated PDF
+      const pdfBase64 = await basePdfDoc.saveAsBase64({
+        useObjectStreams: false
+      });
+      const pdfBuffer = base64ToArrayBuffer(pdfBase64);
+      props.setPdfArrayBuffer(pdfBuffer);
+      props.setPdfBase64Url(pdfBase64);
+      props.setIsUploadPdf && props.setIsUploadPdf(true);
+      mergePdfInputRef.current.value = "";
+    } catch (error) {
+      mergePdfInputRef.current.value = "";
+      console.error("Error merging PDF:", error);
+    }
+  };
+
+  return (
+    <>
+      <span className="hidden md:flex flex-col gap-1 text-center md:w-[5%] mt-[42px]">
+        {!props.isDisableEditTools && (
+          <>
+            <span
+              className="bg-gray-50 px-[4px]  2xl:py-[10px] cursor-pointer"
+              onClick={() => mergePdfInputRef.current.click()}
+              title={t("add-pages")}
+            >
+              <input
+                type="file"
+                className="hidden"
+                accept="application/pdf"
+                ref={mergePdfInputRef}
+                onChange={handleFileUpload}
+              />
+              <i className="fa-light fa-plus text-gray-500 2xl:text-[25px]"></i>
+            </span>
+            <span
+              className="bg-gray-50 px-[4px]  2xl:py-[10px] cursor-pointer"
+              onClick={() => setIsDeletePage(true)}
+              title={t("delete-page")}
+            >
+              <i className="fa-light fa-trash text-gray-500 2xl:text-[25px]"></i>
+            </span>
+          </>
+        )}
+        <span
+          className="bg-gray-50 px-[4px] 2xl:py-[10px] cursor-pointer"
+          onClick={() => props.clickOnZoomIn()}
+          title={t("zoom-in")}
+        >
+          <i className="fa-light fa-magnifying-glass-plus text-gray-500 2xl:text-[25px]"></i>
+        </span>
+
+        {!props.isDisableEditTools && (
+          <>
+            <span
+              className="bg-gray-50 px-[4px] 2xl:py-[10px] cursor-pointer"
+              onClick={() => props.handleRotationFun(90)}
+              title={t("rotate-right")}
+            >
+              <i className="fa-light fa-rotate-right text-gray-500 2xl:text-[25px]"></i>
+            </span>
+            <span
+              className="bg-gray-50 px-[4px] 2xl:py-[10px] cursor-pointer"
+              title={t("rotate-left")}
+              onClick={() => props.handleRotationFun(-90)}
+            >
+              <i className="fa-light fa-rotate-left text-gray-500 2xl:text-[25px]"></i>
+            </span>
+          </>
+        )}
+        <span
+          className="bg-gray-50 px-[4px]  2xl:py-[10px]"
+          onClick={() => props.clickOnZoomOut()}
+          style={{
+            cursor: props.zoomPercent > 0 ? "pointer" : "default"
+          }}
+          title={t("zoom-out")}
+        >
+          <i className="fa-light fa-magnifying-glass-minus text-gray-500 2xl:text-[30px]"></i>
+        </span>
+      </span>
+
+      <ModalUi
+        isOpen={isDeletePage}
+        title={t("delete-page")}
+        handleClose={() => setIsDeletePage(false)}
+      >
+        <div className="h-[100%] p-[20px]">
+          <p className="font-medium">{t("delete-alert-2")}</p>
+          <p className="pt-3">{t("delete-note")}</p>
+          <div className="h-[1px] bg-[#9f9f9f] w-full my-[15px]"></div>
+          <button
+            onClick={() => handleDetelePage()}
+            type="button"
+            className="op-btn op-btn-primary"
+          >
+            {t("yes")}
+          </button>
+          <button
+            onClick={() => setIsDeletePage(false)}
+            type="button"
+            className="op-btn op-btn-ghost ml-1"
+          >
+            {t("no")}
+          </button>
+        </div>
+      </ModalUi>
+    </>
+  );
+}
+
+export default PdfZoom;
@@ -1,933 +0,0 @@
-import React, { useState, useEffect } from "react";
-import BorderResize from "./BorderResize";
-import PlaceholderBorder from "./PlaceholderBorder";
-import { Rnd } from "react-rnd";
-import {
-  defaultWidthHeight,
-  getContainerScale,
-  handleCopyNextToWidget,
-  isTabAndMobile,
-  onChangeInput,
-  radioButtonWidget,
-  textInputWidget,
-  textWidget
-} from "../../constant/Utils";
-import PlaceholderType from "./PlaceholderType";
-import moment from "moment";
-import "../../styles/opensigndrive.css";
-
-const selectFormat = (data) => {
-  switch (data) {
-    case "L":
-      return "MM/dd/yyyy";
-    case "DD-MM-YYYY":
-      return "dd-MM-yyyy";
-    case "DD/MM/YYYY":
-      return "dd/MM/yyyy";
-    case "LL":
-      return "MMMM dd, yyyy";
-    case "DD MMM, YYYY":
-      return "dd MMM, yyyy";
-    case "YYYY-MM-DD":
-      return "yyyy-MM-dd";
-    case "MM-DD-YYYY":
-      return "MM-dd-yyyy";
-    case "MM.DD.YYYY":
-      return "MM.dd.yyyy";
-    case "MMM DD, YYYY":
-      return "MMM dd, yyyy";
-    case "DD MMMM, YYYY":
-      return "dd MMMM, yyyy";
-    default:
-      return "MM/dd/yyyy";
-  }
-};
-
-const changeDateToMomentFormat = (format) => {
-  switch (format) {
-    case "MM/dd/yyyy":
-      return "L";
-    case "dd-MM-yyyy":
-      return "DD-MM-YYYY";
-    case "dd/MM/yyyy":
-      return "DD/MM/YYYY";
-    case "MMMM dd, yyyy":
-      return "LL";
-    case "dd MMM, yyyy":
-      return "DD MMM, YYYY";
-    case "yyyy-MM-dd":
-      return "YYYY-MM-DD";
-    case "MM-dd-yyyy":
-      return "MM-DD-YYYY";
-    case "MM.dd.yyyy":
-      return "MM.DD.YYYY";
-    case "MMM dd, yyyy":
-      return "MMM DD, YYYY";
-    case "dd MMMM, yyyy":
-      return "DD MMMM, YYYY";
-    default:
-      return "L";
-  }
-};
-
-//function to get default date
-const getDefaultdate = (selectedDate, format = "dd-MM-yyyy") => {
-  let date;
-  if (format && format === "dd-MM-yyyy") {
-    const newdate = selectedDate
-      ? selectedDate
-      : moment(new Date()).format(changeDateToMomentFormat(format));
-    const [day, month, year] = newdate.split("-");
-    date = new Date(`${year}-${month}-${day}`);
-  } else {
-    date = new Date(selectedDate);
-  }
-  const value = date;
-  return value;
-};
-//function to get default format
-const getDefaultFormat = (dateFormat) => dateFormat || "MM/dd/yyyy";
-
-function Placeholder(props) {
-  const [placeholderBorder, setPlaceholderBorder] = useState({ w: 0, h: 0 });
-  const [isDraggingEnabled, setDraggingEnabled] = useState(true);
-  const [isShowDateFormat, setIsShowDateFormat] = useState(false);
-  const [containerScale, setContainerScale] = useState();
-  const [selectDate, setSelectDate] = useState({
-    date:
-      props.pos.type === "date"
-        ? moment(
-            getDefaultdate(
-              props?.pos?.options?.response,
-              props.pos?.options?.validation?.format
-            ).getTime()
-          ).format(
-            changeDateToMomentFormat(props.pos?.options?.validation?.format)
-          )
-        : "",
-    format:
-      props.pos.type === "date"
-        ? getDefaultFormat(props.pos?.options?.validation?.format)
-        : ""
-  });
-  const [dateFormat, setDateFormat] = useState([]);
-  const [startDate, setStartDate] = useState(
-    props.pos.type === "date" &&
-      getDefaultdate(
-        props?.pos?.options?.response,
-        props.pos?.options?.validation?.format
-      )
-  );
-  const [getCheckboxRenderWidth, setGetCheckboxRenderWidth] = useState({
-    width: null,
-    height: null
-  });
-
-  useEffect(() => {
-    const getPdfPageWidth = props.pdfOriginalWH.find(
-      (data) => data.pageNumber === props.pageNumber
-    );
-    setContainerScale(props.containerWH.width / getPdfPageWidth.width);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.containerWH.width, props.pdfOriginalWH]);
-  const dateFormatArr = [
-    "L",
-    "DD-MM-YYYY",
-    "YYYY-MM-DD",
-    "MM.DD.YYYY",
-    "MM-DD-YYYY",
-    "MMM DD, YYYY",
-    "LL",
-    "DD MMM, YYYY",
-    "DD MMMM, YYYY"
-  ];
-
-  useEffect(() => {
-    const updateWidth = () => {
-      const rndElement = document.getElementById(props.pos.key);
-      if (rndElement) {
-        const { width, height } = rndElement.getBoundingClientRect();
-        setGetCheckboxRenderWidth({ width: width, height: height });
-      }
-    };
-
-    // Delay to ensure rendering is complete
-    const timer = setTimeout(updateWidth, 0);
-
-    return () => clearTimeout(timer);
-  }, [props.pos]);
-
-  useEffect(() => {
-    const closeMenuOnOutsideClick = (e) => {
-      if (!isDraggingEnabled && !e.target.closest("#changeIsDragging")) {
-        setDraggingEnabled(true);
-      }
-    };
-
-    document.addEventListener("click", closeMenuOnOutsideClick);
-
-    return () => {
-      // Cleanup the event listener when the component unmounts
-      document.removeEventListener("click", closeMenuOnOutsideClick);
-    };
-  }, [isDraggingEnabled]);
-  //function change format array list with selected date and format
-  const changeDateFormat = () => {
-    const updateDate = [];
-    dateFormatArr.map((data) => {
-      let date;
-      if (selectDate && selectDate.format === "dd-MM-yyyy") {
-        const [day, month, year] = selectDate.date.split("-");
-        date = new Date(`${year}-${month}-${day}`);
-      } else {
-        date = new Date(selectDate?.date);
-      }
-      const milliseconds = date.getTime();
-      const newDate = moment(milliseconds).format(data);
-      const dateObj = {
-        date: newDate,
-        format: selectFormat(data)
-      };
-      updateDate.push(dateObj);
-    });
-    setDateFormat(updateDate);
-  };
-
-  useEffect(() => {
-    if (props.isPlaceholder || props.isSignYourself) {
-      selectDate && changeDateFormat();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectDate]);
-
-  //it detect outside click of date dropdown menu
-  useEffect(() => {
-    const closeMenuOnOutsideClick = (e) => {
-      if (isShowDateFormat && !e.target.closest("#menu-container")) {
-        setIsShowDateFormat(!isShowDateFormat);
-      }
-    };
-    document.addEventListener("click", closeMenuOnOutsideClick);
-    return () => {
-      // Cleanup the event listener when the component unmounts
-      document.removeEventListener("click", closeMenuOnOutsideClick);
-    };
-  }, [isShowDateFormat]);
-
-  //`handleWidgetIdandPopup` is used to set current widget id and open relative popup
-  const handleWidgetIdandPopup = () => {
-    if (props.setSelectWidgetId) {
-      props.setSelectWidgetId(props.pos.key);
-    }
-
-    const widgetTypeExist = [
-      textInputWidget,
-      "checkbox",
-      "name",
-      "company",
-      "job title",
-      "date",
-      "email",
-      textWidget
-    ].includes(props.pos.type);
-
-    if (widgetTypeExist) {
-      setDraggingEnabled(false);
-    }
-    if ((props.isNeedSign || props.isSignYourself) && !props.isDragging) {
-      if (props?.ispublicTemplate) {
-        props.handleUserDetails();
-      } else {
-        if (props.pos.type) {
-          if (
-            props.pos.type === "signature" ||
-            props.pos.type === "stamp" ||
-            props.pos.type === "image"
-          ) {
-            props.setIsSignPad(true);
-            props.setSignKey(props.pos.key);
-            props.setIsStamp(props.pos.isStamp);
-          } else if (props.pos.type === "initials") {
-            props.setIsSignPad(true);
-            props.setSignKey(props.pos.key);
-            props.setIsStamp(props.pos.isStamp);
-            props.setIsInitial(true);
-          }
-        } else {
-          props.setIsSignPad(true);
-          props.setSignKey(props.pos.key);
-          props.setIsStamp(props.pos?.isStamp ? props.pos.isStamp : false);
-        }
-      }
-    } else if (
-      props.isPlaceholder &&
-      !props.isDragging &&
-      props.pos.type !== textWidget
-    ) {
-      if (props.pos.key === props.selectWidgetId) {
-        props.handleLinkUser(props.data.Id);
-        props.setUniqueId(props.data.Id);
-        const checkIndex = props.xyPostion.findIndex(
-          (data) => data.Id === props.data.Id
-        );
-        props.setIsSelectId(checkIndex || 0);
-      }
-    } else if (!props.pos.type) {
-      if (
-        !props.pos.type &&
-        props.isNeedSign &&
-        props.data.signerObjId === props.signerObjId
-      ) {
-        props.setIsSignPad(true);
-        props.setSignKey(props.pos.key);
-        props.setIsStamp(props.pos.isStamp);
-      } else if (
-        (props.isNeedSign && props.pos.type === "signature") ||
-        props.pos.type === "stamp"
-      ) {
-        props.setIsSignPad(true);
-        props.setSignKey(props.pos.key);
-        props.setIsStamp(props.pos.isStamp);
-      } else if (props.isNeedSign && props.pos.type === "dropdown") {
-        props.setSignKey(props.pos.key);
-      }
-    }
-  };
-  const handleOnClickPlaceholder = () => {
-    props.setCurrWidgetsDetails && props.setCurrWidgetsDetails(props.pos);
-    if (!props.isNeedSign) {
-      props.setWidgetType(props.pos.type);
-    }
-    if (props.isNeedSign && props.data?.signerObjId === props.signerObjId) {
-      handleWidgetIdandPopup();
-    } else if (
-      props?.isNeedSign &&
-      props?.uniqueId &&
-      props.data?.Id === props?.uniqueId
-    ) {
-      handleWidgetIdandPopup();
-    } else if (props.isPlaceholder || props.isSignYourself) {
-      handleWidgetIdandPopup();
-    }
-  };
-  //`handleOnClickSettingIcon` is used set current widget details and open setting of it
-  const handleOnClickSettingIcon = () => {
-    if (props.pos.type === radioButtonWidget) {
-      props.setIsRadio(true);
-    } else if (props.pos.type === "dropdown") {
-      props?.setShowDropdown(true);
-    } else if (props.pos.type === "checkbox") {
-      props?.setIsCheckbox(true);
-    }
-    //condition to handle setting icon for signyour-self flow for all type text widgets
-    else if (
-      [
-        textInputWidget,
-        textWidget,
-        "name",
-        "company",
-        "job title",
-        "email"
-      ].includes(props.pos.type) &&
-      props.isSignYourself
-    ) {
-      props.handleTextSettingModal(true);
-    } else {
-      props?.handleNameModal && props?.handleNameModal(true);
-    }
-
-    //condition for only placeholder and template flow
-    if (props.data && props?.pos?.type !== textWidget) {
-      props.setSignerObjId(props?.data?.signerObjId);
-      props.setUniqueId(props?.data?.Id);
-      const checkIndex = props.xyPostion.findIndex(
-        (data) => data.Id === props.data.Id
-      );
-
-      props.setIsSelectId(checkIndex || 0);
-    }
-    //condition to handle in placeholder and template flow for text widget signerId for text widgets i have to set uniqueId in tempSignerId because
-    //it does not have any signer user and any signerobjId
-    else if (props.data && props.pos.type === textWidget) {
-      props.setTempSignerId(props.uniqueId);
-      props.setUniqueId(props?.data?.Id);
-      const checkIndex = props.xyPostion.findIndex(
-        (data) => data.Id === props.data.Id
-      );
-      props.setIsSelectId(checkIndex || 0);
-    }
-    props.setSignKey(props.pos.key);
-    props.setWidgetType(props.pos.type);
-    props.setCurrWidgetsDetails(props.pos);
-  };
-  //function to set required state value onclick on widget's copy icon
-  const handleCopyPlaceholder = (e) => {
-    e.stopPropagation();
-    //condition to handle text widget signer obj id and unique id
-    //when user click on copy icon of text widget in that condition text widget does not have any signerObjId
-    //in that case i have to save in tempSignerId as a unique id of previous select signer's unique id
-    //and on save or cancel button of copy all page popup i have set this temp signer Id in unique id
-
-    if (props.data && props?.pos?.type !== textWidget) {
-      props.setSignerObjId(props?.data?.signerObjId);
-      props.setUniqueId(props?.data?.Id);
-      const checkIndex = props.xyPostion.findIndex(
-        (data) => data.Id === props.data.Id
-      );
-
-      props.setIsSelectId(checkIndex || 0);
-    } else if (props.data && props.pos.type === textWidget) {
-      props.setTempSignerId(props.uniqueId);
-      props.setSignerObjId(props?.data?.signerObjId);
-      props.setUniqueId(props?.data?.Id);
-      const checkIndex = props.xyPostion.findIndex(
-        (data) => data.Id === props.data.Id
-      );
-      props.setIsSelectId(checkIndex || 0);
-    }
-
-    //checking widget's type and open widget copy modal for required widgets
-    if (
-      ["signature", textWidget, "stamp", "initial"].includes(props.pos.type)
-    ) {
-      props.setIsPageCopy(true);
-      props.setSignKey(props.pos.key);
-    } else {
-      //function to create new widget next to just widget
-      handleCopyNextToWidget(
-        props.pos,
-        props.pos.type,
-        props.xyPostion,
-        props.index,
-        props.setXyPostion,
-        props.data && props.data?.Id
-      );
-    }
-  };
-
-  //function to save date and format on local array onchange date and onclick format
-  const handleSaveDate = (data, isDateChange) => {
-    let updateDate = data.date;
-    //check if date change by user
-    if (isDateChange) {
-      //`changeDateToMomentFormat` is used to convert date as per required to moment package
-      updateDate = moment(data.date).format(
-        changeDateToMomentFormat(data.format)
-      );
-    }
-    //using moment package is used to change date as per the format provided in selectDate obj e.g. - MM/dd/yyyy -> 03/12/2024
-    //`getDefaultdate` is used to convert update date in new Date() format
-    const date = moment(
-      getDefaultdate(updateDate, data?.format).getTime()
-    ).format(changeDateToMomentFormat(data?.format));
-
-    //`onChangeInput` is used to save data related to date in a placeholder field
-    onChangeInput(
-      date,
-      props.pos.key,
-      props.xyPostion,
-      props.index,
-      props.setXyPostion,
-      props.data && props.data.Id,
-      false,
-      data?.format
-    );
-    setSelectDate({ date: date, format: data?.format });
-  };
-  const PlaceholderIcon = () => {
-    return (
-      props.isShowBorder && (
-        <>
-          {(props.isPlaceholder || props.isSignYourself) && (
-            <>
-              {/* condition to add setting icon for signyour-self flow for particular text widgets
-            and also it have diffrent position 
-            */}
-              {[
-                "checkbox",
-                textInputWidget,
-                textWidget,
-                "name",
-                "company",
-                "job title",
-                "email"
-              ].includes(props.pos.type) && props.isSignYourself ? (
-                <i
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    handleOnClickSettingIcon();
-                  }}
-                  onTouchEnd={(e) => {
-                    e.stopPropagation();
-                    handleOnClickSettingIcon();
-                  }}
-                  className="fa-light fa-gear icon"
-                  style={{
-                    color: "#188ae2",
-                    right: "29px",
-                    top: "-19px"
-                  }}
-                ></i>
-              ) : (
-                /* condition to add setting icon for placeholder & template flow for all widgets except signature and date */
-                ((!props?.pos?.type && props.pos.isStamp) ||
-                  (props?.pos?.type &&
-                    !["date", "signature"].includes(props.pos.type) &&
-                    !props.isSignYourself)) && (
-                  <i
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      handleOnClickSettingIcon();
-                    }}
-                    onTouchEnd={(e) => {
-                      e.stopPropagation();
-                      handleOnClickSettingIcon();
-                    }}
-                    className="fa-light fa-gear icon"
-                    style={{
-                      color: "#188ae2",
-                      right: props?.pos?.type === textWidget ? "32px" : "47px",
-                      top: "-19px"
-                    }}
-                  ></i>
-                )
-              )}
-              {/* condition for usericon for all widgets except text widgets and signyour-self flow */}
-              {props.pos.type !== textWidget && !props.isSignYourself && (
-                <i
-                  data-tut="assignSigner"
-                  className="fa-light fa-user icon"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    props.handleLinkUser(props.data.Id);
-                    props.setUniqueId(props.data.Id);
-                    const checkIndex = props.xyPostion.findIndex(
-                      (data) => data.Id === props.data.Id
-                    );
-                    props.setIsSelectId(checkIndex || 0);
-                  }}
-                  onTouchEnd={(e) => {
-                    e.stopPropagation();
-                    props.handleLinkUser(props.data.Id);
-                    props.setUniqueId(props.data.Id);
-                    const checkIndex = props.xyPostion.findIndex(
-                      (data) => data.Id === props.data.Id
-                    );
-                    props.setIsSelectId(checkIndex || 0);
-                  }}
-                  style={{ color: "#188ae2", right: "32px", top: "-18px" }}
-                ></i>
-              )}
-            </>
-          )}
-          {/* setting icon only for date widgets */}
-          {props.pos.type === "date" && selectDate && (
-            <div
-              id="menu-container"
-              style={{
-                zIndex: "99",
-                top: "-19px",
-                right: props.isPlaceholder ? "60px" : "44px"
-              }}
-              className={`${isShowDateFormat ? "show" : ""} dropdown icon`}
-              onClick={(e) => {
-                setIsShowDateFormat(!isShowDateFormat);
-                e.stopPropagation();
-                if (props.data) {
-                  props.setSignKey(props.pos.key);
-                  props.setUniqueId(props.data.Id);
-                  const checkIndex = props.xyPostion.findIndex(
-                    (data) => data.Id === props.data.Id
-                  );
-                  props.setIsSelectId(checkIndex || 0);
-                }
-              }}
-              onTouchEnd={(e) => {
-                e.stopPropagation();
-                setIsShowDateFormat(!isShowDateFormat);
-                if (props.data) {
-                  props.setSignKey(props.pos.key);
-                  props.setUniqueId(props.data.Id);
-                  const checkIndex = props.xyPostion.findIndex(
-                    (data) => data.Id === props.data.Id
-                  );
-                  props.setIsSelectId(checkIndex || 0);
-                }
-              }}
-            >
-              <i
-                className="fa-light fa-gear icon"
-                style={{
-                  color: "#188ae2",
-                  fontSize: "14px"
-                }}
-              ></i>
-              <div
-                className={
-                  isShowDateFormat ? "dropdown-menu show" : "dropdown-menu"
-                }
-                aria-labelledby="dropdownMenuButton"
-                aria-expanded={isShowDateFormat ? "true" : "false"}
-              >
-                {dateFormat.map((data, ind) => {
-                  return (
-                    <span
-                      key={ind}
-                      onTouchEnd={(e) => {
-                        e.stopPropagation();
-                        setIsShowDateFormat(!isShowDateFormat);
-                        setSelectDate(data);
-                        handleSaveDate(data);
-                      }}
-                      onClick={() => {
-                        setIsShowDateFormat(!isShowDateFormat);
-                        setSelectDate(data);
-                        handleSaveDate(data);
-                      }}
-                      className="dropdown-item text-[13px]"
-                    >
-                      {data?.date ? data?.date : "nodata"}
-                    </span>
-                  );
-                })}
-              </div>
-            </div>
-          )}
-          {/* copy icon for all widgets */}
-          <i
-            className="fa-light fa-copy icon"
-            onClick={(e) => handleCopyPlaceholder(e)}
-            onTouchEnd={(e) => handleCopyPlaceholder(e)}
-            style={{ color: "#188ae2", right: "12px", top: "-18px" }}
-          ></i>
-          {/* delete icon for all widgets */}
-          <i
-            className="fa-light fa-circle-xmark icon"
-            onClick={(e) => {
-              e.stopPropagation();
-              //condition for template and placeholder flow
-              if (props.data) {
-                props.handleDeleteSign(props.pos.key, props.data.Id);
-              }
-              //condition for signyour-self flow
-              else {
-                props.handleDeleteSign(props.pos.key);
-                props.setIsStamp(false);
-              }
-            }}
-            //for mobile and tablet touch event
-            onTouchEnd={(e) => {
-              e.stopPropagation();
-              //condition for template and placeholder flow
-              if (props.data) {
-                props.handleDeleteSign(props.pos.key, props.data?.Id);
-              }
-              //condition for signyour-self flow
-              else {
-                props.handleDeleteSign(props.pos.key);
-                props.setIsStamp(false);
-              }
-            }}
-            style={{ color: "#188ae2", right: "-8px", top: "-18px" }}
-          ></i>
-        </>
-      )
-    );
-  };
-  const xPos = (pos, signYourself) => {
-    const containerScale = getContainerScale(
-      props.pdfOriginalWH,
-      props.pageNumber,
-      props.containerWH
-    );
-    const resizePos = pos.xPosition;
-    if (signYourself) {
-      return resizePos * containerScale * props.scale;
-    } else {
-      //checking both condition mobile and desktop view
-      if (pos.isMobile && pos.scale) {
-        if (props.scale > 1) {
-          return resizePos * pos.scale * containerScale * props.scale;
-        } else {
-          return resizePos * pos.scale * containerScale;
-        }
-      } else {
-        // if (pos.scale === containerScale) {
-        //   return resizePos * pos.scale * props.scale;
-        // } else {
-        return resizePos * containerScale * props.scale;
-        // }
-      }
-    }
-  };
-  const yPos = (pos, signYourself) => {
-    const containerScale = getContainerScale(
-      props.pdfOriginalWH,
-      props.pageNumber,
-      props.containerWH
-    );
-    const resizePos = pos.yPosition;
-
-    if (signYourself) {
-      return resizePos * containerScale * props.scale;
-    } else {
-      //checking both condition mobile and desktop view
-      if (pos.isMobile && pos.scale) {
-        if (props.scale > 1) {
-          return resizePos * pos.scale * containerScale * props.scale;
-        } else {
-          return resizePos * pos.scale * containerScale;
-        }
-      }
-      // else if (pos.scale === containerScale) {
-      //   if (props.scale > 1) {
-      //     return resizePos * pos.scale * props.scale;
-      //   } else {
-      //     return resizePos * pos.scale;
-      //   }
-      // }
-      else {
-        return resizePos * containerScale * props.scale;
-      }
-    }
-  };
-
-  const getCursor = () => {
-    if (props.data && props.isNeedSign) {
-      if (props?.signerObjId && props.data?.signerObjId === props.signerObjId) {
-        return "pointer";
-      } else if (props?.uniqueId && props.data?.Id === props.uniqueId) {
-        return "pointer";
-      } else {
-        return "not-allowed";
-      }
-    } else {
-      return "all-scroll";
-    }
-  };
-  return (
-    <Rnd
-      id={props.pos.key}
-      data-tut={props.pos.key === props.unSignedWidgetId ? "IsSigned" : ""}
-      key={props.pos.key}
-      lockAspectRatio={
-        ![
-          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 /
-            defaultWidthHeight(props.pos.type).height)
-      }
-      enableResizing={{
-        top: false,
-        right: false,
-        bottom: false,
-        left: false,
-        topRight: false,
-        bottomRight:
-          props.data && props.isNeedSign
-            ? props.data?.signerObjId === props.signerObjId &&
-              props.pos.type !== "checkbox" &&
-              props.pos.type !== radioButtonWidget
-              ? true
-              : false
-            : props.pos.type !== radioButtonWidget &&
-              props.pos.type !== "checkbox" &&
-              props.pos.key === props.selectWidgetId &&
-              true,
-        bottomLeft: false,
-        topLeft: false
-      }}
-      bounds="parent"
-      className="signYourselfBlock"
-      style={{
-        border: "1px solid #007bff",
-        borderRadius: "2px",
-        textAlign:
-          props.pos.type !== "name" &&
-          props.pos.type !== "company" &&
-          props.pos.type !== "job title" &&
-          "center",
-        cursor: getCursor(),
-        zIndex:
-          props.pos.type === "date"
-            ? props.pos.key === props.selectWidgetId
-              ? 99 + 1
-              : 99
-            : props?.pos?.zIndex
-              ? props.pos.zIndex
-              : "5",
-        background: props.data ? props.data.blockColor : "rgb(203 233 237)"
-      }}
-      onDrag={() => {
-        setDraggingEnabled(true);
-        props.handleTabDrag && props.handleTabDrag(props.pos.key);
-      }}
-      size={{
-        width:
-          props.pos.type === radioButtonWidget || props.pos.type === "checkbox"
-            ? "auto"
-            : props.posWidth(props.pos, props.isSignYourself),
-        height:
-          props.pos.type === radioButtonWidget || props.pos.type === "checkbox"
-            ? "auto"
-            : props.posHeight(props.pos, props.isSignYourself)
-      }}
-      onResizeStart={() => {
-        setDraggingEnabled(true);
-        props.setIsResize && props.setIsResize(true);
-      }}
-      onResizeStop={(e, direction, ref) => {
-        props.setIsResize && props.setIsResize(false);
-        props.handleSignYourselfImageResize &&
-          props.handleSignYourselfImageResize(
-            ref,
-            props.pos.key,
-            props.xyPostion,
-            props.setXyPostion,
-            props.index,
-            containerScale,
-            props.scale,
-            props.data && props.data.Id,
-            props.isResize
-          );
-      }}
-      disableDragging={
-        props.isNeedSign
-          ? true
-          : props.isPlaceholder && ![textWidget].includes(props.pos.type)
-            ? false
-            : !isDraggingEnabled
-      }
-      onDragStop={(event, dragElement) =>
-        props.handleStop &&
-        props.handleStop(event, dragElement, props.data?.Id, props.pos?.key)
-      }
-      position={{
-        x: xPos(props.pos, props.isSignYourself),
-        y: yPos(props.pos, props.isSignYourself)
-      }}
-      onResize={(e, direction, ref) => {
-        setPlaceholderBorder({
-          w: ref.offsetWidth / (props.scale * containerScale),
-          h: ref.offsetHeight / (props.scale * containerScale)
-        });
-      }}
-      onClick={() => handleOnClickPlaceholder()}
-    >
-      {props.isShowBorder &&
-      props.pos.type !== radioButtonWidget &&
-      props.pos.type !== "checkbox" &&
-      props.pos.key === props.selectWidgetId ? (
-        <BorderResize right={-12} top={-11} />
-      ) : props.data && props.isNeedSign && props.pos.type !== "checkbox" ? (
-        props.data?.signerObjId === props.signerObjId &&
-        props.pos.type !== radioButtonWidget &&
-        props.pos.type !== "checkbox" ? (
-          <BorderResize />
-        ) : (
-          <></>
-        )
-      ) : (
-        props.pos.type !== radioButtonWidget &&
-        props.pos.type !== "checkbox" &&
-        props.pos.key === props.selectWidgetId && <BorderResize />
-      )}
-
-      {props.isShowBorder && props.pos.key === props.selectWidgetId && (
-        <PlaceholderBorder
-          setDraggingEnabled={setDraggingEnabled}
-          pos={props.pos}
-          isPlaceholder={props.isPlaceholder}
-          getCheckboxRenderWidth={getCheckboxRenderWidth}
-          scale={props.scale}
-          containerScale={containerScale}
-          placeholderBorder={placeholderBorder}
-        />
-      )}
-      {isTabAndMobile ? (
-        <div
-          className="flex items-stretch"
-          style={{
-            left: xPos(props.pos, props.isSignYourself),
-            top: yPos(props.pos, props.isSignYourself),
-            width:
-              props.pos.type === radioButtonWidget ||
-              props.pos.type === "checkbox"
-                ? "auto"
-                : props.posWidth(props.pos, props.isSignYourself),
-            height:
-              props.pos.type === radioButtonWidget ||
-              props.pos.type === "checkbox"
-                ? "auto"
-                : props.posHeight(props.pos, props.isSignYourself),
-            zIndex: "10"
-          }}
-          onTouchEnd={() => handleOnClickPlaceholder()}
-          onClick={() => handleOnClickPlaceholder()}
-        >
-          {props.pos.key === props.selectWidgetId && <PlaceholderIcon />}
-
-          <PlaceholderType
-            pos={props.pos}
-            xyPostion={props.xyPostion}
-            index={props.index}
-            setXyPostion={props.setXyPostion}
-            data={props.data}
-            setSignKey={props.setSignKey}
-            isShowDropdown={props?.isShowDropdown}
-            isPlaceholder={props.isPlaceholder}
-            isSignYourself={props.isSignYourself}
-            signerObjId={props.signerObjId}
-            handleUserName={props.handleUserName}
-            setDraggingEnabled={setDraggingEnabled}
-            pdfDetails={props?.pdfDetails && props?.pdfDetails[0]}
-            isNeedSign={props.isNeedSign}
-            setSelectDate={setSelectDate}
-            selectDate={selectDate}
-            setValidateAlert={props.setValidateAlert}
-            setStartDate={setStartDate}
-            startDate={startDate}
-            handleSaveDate={handleSaveDate}
-            xPos={props.xPos}
-          />
-        </div>
-      ) : (
-        <>
-          {props.pos.key === props.selectWidgetId && <PlaceholderIcon />}
-          <PlaceholderType
-            pos={props.pos}
-            xyPostion={props.xyPostion}
-            index={props.index}
-            setXyPostion={props.setXyPostion}
-            data={props.data}
-            setSignKey={props.setSignKey}
-            isShowDropdown={props?.isShowDropdown}
-            isPlaceholder={props.isPlaceholder}
-            isSignYourself={props.isSignYourself}
-            signerObjId={props.signerObjId}
-            handleUserName={props.handleUserName}
-            setDraggingEnabled={setDraggingEnabled}
-            pdfDetails={props?.pdfDetails && props?.pdfDetails[0]}
-            isNeedSign={props.isNeedSign}
-            setSelectDate={setSelectDate}
-            selectDate={selectDate}
-            setValidateAlert={props.setValidateAlert}
-            setStartDate={setStartDate}
-            startDate={startDate}
-            handleSaveDate={handleSaveDate}
-            xPos={props.xPos}
-          />
-        </>
-      )}
-    </Rnd>
-  );
-}
-
-export default Placeholder;
@@ -43,9 +43,9 @@ function PlaceholderBorder(props) {
  };
  return (
    <div
-      onMouseEnter={() => !isMobile && props?.setDraggingEnabled(true)}
+      onMouseEnter={() => !isMobile && props?.setDraggingEnabled(false)}
      onTouchEnd={() =>
-        props.pos.type === textWidget && props?.setDraggingEnabled(true)
+        props.pos.type === textWidget && props?.setDraggingEnabled(false)
      }
      className="absolute inline-block w-[14px] h-[14px]  border-[0.2px] overflow-hidden border-dashed"
      style={{
@@ -1,65 +1,107 @@
 import React, { useState } from "react";
 import ModalUi from "../../primitives/ModalUi";
-import { randomId, textWidget } from "../../constant/Utils";
+import {
+  handleCopyNextToWidget,
+  randomId,
+  textWidget
+} from "../../constant/Utils";
 import { useTranslation } from "react-i18next";

 function PlaceholderCopy(props) {
  const { t } = useTranslation();
-  const copyType = ["All pages", "All pages but last", "All pages but first"];
-  const [selectCopyType, setSelectCopyType] = useState("");
+  const copyType = [
+    { id: 1, type: "All pages" },
+    { id: 2, type: "All pages but last" },
+    { id: 3, type: "All pages but first" },
+    { id: 4, type: "Next to current widget" }
+  ];
+  const [selectCopyType, setSelectCopyType] = useState(1);
  //function for get copy placeholder position
  const getCopyPlaceholderPosition = (
    type,
-    currentPlaceholder,
+    newPlaceholder,
    newPageNumber,
    existPlaceholderPosition
  ) => {
+    //remove existing page position when used option copy but first or copy but last
    const filterPosition =
      existPlaceholderPosition &&
      existPlaceholderPosition.filter(
-        (data) => data.xPosition !== currentPlaceholder.xPosition
+        (data) => data.xPosition !== newPlaceholder.xPosition
      );
+    //first option - copy all page but not first
    //copy all page placeholder at requested position except first page
-    if (newPageNumber === 1 && type === "first") {
-      if (filterPosition && filterPosition.length > 0) {
+    if (newPageNumber === 1 && type === 3) {
+      //when user choose this option and placed widget on first page then do not remove first page widget
+      //it should be copy all page included first page on same postion
+      if (props.pageNumber === 1) {
+        return {
+          pageNumber: newPageNumber,
+          pos: [...existPlaceholderPosition]
+        };
+      } //else when user copy widget and choose this option and not at first page then copy all page but not at first
+      else if (filterPosition && filterPosition.length > 0) {
        return {
          pageNumber: newPageNumber,
          pos: [...filterPosition]
        };
      }
    }
+    //second option - copy all page but not last
    //copy all page placeholder at requested position except  last page
-    else if (newPageNumber === props.allPages && type === "last") {
+    else if (newPageNumber === props.allPages && type === 2) {
      if (existPlaceholderPosition) {
-        return {
-          pageNumber: newPageNumber,
-          pos: [...filterPosition]
-        };
+        //when user choose this option and placed widget on last page then do not remove last page widget
+        //it should be copy all page included last page on same postion
+        if (props.pageNumber === props.allPages) {
+          return {
+            pageNumber: newPageNumber,
+            pos: [...existPlaceholderPosition]
+          };
+        } else {
+          return {
+            pageNumber: newPageNumber,
+            pos: [...filterPosition]
+          };
+        }
      }
    }
+    //this optin - copy all page with exiting widgets on same page
    //copy all page placeholder at requested position with existing placeholder position
    else if (existPlaceholderPosition) {
-      return {
-        pageNumber: newPageNumber,
-        pos: [...filterPosition, currentPlaceholder]
-      };
+      if (newPageNumber === props.pageNumber) {
+        return {
+          pageNumber: props.pageNumber,
+          pos: [...existPlaceholderPosition]
+        };
+      } else {
+        return {
+          pageNumber: newPageNumber,
+          pos: [...existPlaceholderPosition, newPlaceholder]
+        };
+      }
    }
    //copy all page placeholder at requested position
    else {
-      return {
-        pageNumber: newPageNumber,
-        pos: [currentPlaceholder]
-      };
+      if (newPageNumber === props.pageNumber) {
+        return {
+          pageNumber: props.pageNumber,
+          pos: [...existPlaceholderPosition]
+        };
+      } else {
+        return {
+          pageNumber: newPageNumber,
+          pos: [newPlaceholder]
+        };
+      }
    }
  };
-
  //function for copy placeholder as per select copy type
  const copyPlaceholder = (type) => {
    let newPlaceholderPosition = [];
    let newPageNumber = 1;
-    const signerPosition = props.xyPostion;
+    const signerPosition = props.xyPosition;
    const signerId = props.signerObjId ? props.signerObjId : props.Id;
-
    //handle placeholder array and copy for multiple signers placeholder at requested location
    if (signerId) {
      //get current signers data
@@ -81,10 +123,9 @@ function PlaceholderCopy(props) {
      const currentPlaceholder = placeholderPosition[0].pos.find(
        (position) => position.key === props.signKey
      );
-
      for (let i = 0; i < props.allPages; i++) {
        const newId = randomId();
-        currentPlaceholder.key = newId;
+        const newPlaceholder = { ...currentPlaceholder, key: newId };
        //get exist placeholder position for particular page
        const existPlaceholder = filterSignerPosition[0].placeHolder.filter(
          (data) => data.pageNumber === newPageNumber
@@ -95,11 +136,11 @@ function PlaceholderCopy(props) {
        //function for get copy to requested location of placeholder position
        const getPlaceholderObj = getCopyPlaceholderPosition(
          type,
-          currentPlaceholder,
+          newPlaceholder,
          newPageNumber,
          existPlaceholderPosition
        );
-        if (getPlaceholderObj) {
+        if (getPlaceholderObj?.pos) {
          newPlaceholderPosition.push(getPlaceholderObj);
        }
        newPageNumber++;
@@ -129,13 +170,13 @@ function PlaceholderCopy(props) {

      const signersData = signerPosition;
      signersData.splice(0, signerPosition.length, ...updatedSignerPlaceholder);
-      props.setXyPostion(signersData);
+      props.setXyPosition(signersData);
    }
    //handle signyourself array and copy for single signers placeholder at requested location
    else {
-      const xyPostion = props.xyPostion;
+      const xyPosition = props.xyPosition;

-      const placeholderPosition = xyPostion.filter(
+      const placeholderPosition = xyPosition.filter(
        (data) => data.pageNumber === props.pageNumber
      );
      //get current placeholder position data which user want to copy
@@ -145,18 +186,18 @@ function PlaceholderCopy(props) {

      for (let i = 0; i < props.allPages; i++) {
        //get exist placeholder position for particular page
-        const existPlaceholder = xyPostion.filter(
+        const existPlaceholder = xyPosition.filter(
          (data) => data.pageNumber === newPageNumber
        );
        const existPlaceholderPosition =
          existPlaceholder[0] && existPlaceholder[0].pos;

        const newId = randomId();
-        currentPlaceholder.key = newId;
+        const newPlaceholder = { ...currentPlaceholder, key: newId };
        //function for get copy to requested location of placeholder position
        const getPlaceholderObj = getCopyPlaceholderPosition(
          type,
-          currentPlaceholder,
+          newPlaceholder,
          newPageNumber,
          existPlaceholderPosition
        );
@@ -166,31 +207,71 @@ function PlaceholderCopy(props) {

        newPageNumber++;
      }
-      props.setXyPostion(newPlaceholderPosition);
+      props.setXyPosition(newPlaceholderPosition);
    }
  };

  //function for getting selected type placeholder copy
  const handleApplyCopy = () => {
-    if (selectCopyType === "All pages") {
-      copyPlaceholder("all");
-    } else if (selectCopyType === "All pages but last") {
-      copyPlaceholder("last");
-    } else if (selectCopyType === "All pages but first") {
-      copyPlaceholder("first");
+    if (selectCopyType === 4) {
+      const signerPosition = props.xyPosition;
+      let currentXYposition;
+      const signerId = props.signerObjId ? props.signerObjId : props.Id;
+      if (signerId) {
+        const filterSignerPosition = signerPosition.filter(
+          (item) => item?.Id === signerId
+        );
+        currentXYposition = filterSignerPosition[0].placeHolder.filter(
+          (data) => data.pageNumber === props?.pageNumber
+        );
+        //get current placeholder position data which user want to copy
+        currentXYposition = currentXYposition[0].pos.find(
+          (position) => position.key === props.signKey
+        );
+        //function to create new widget next to just widget
+        handleCopyNextToWidget(
+          currentXYposition,
+          props.widgetType,
+          props.xyPosition,
+          props.pageNumber,
+          props.setXyPosition,
+          props?.Id
+        );
+      } else {
+        const getIndex = props?.xyPosition.findIndex(
+          (data) => data.pageNumber === props.pageNumber
+        );
+        const placeholderPosition = props?.xyPosition[getIndex];
+        //get current placeholder position data which user want to copy
+        currentXYposition = placeholderPosition.pos.find(
+          (pos) => pos.key === props.signKey
+        );
+        //function to create new widget next to just widget
+        handleCopyNextToWidget(
+          currentXYposition,
+          props.widgetType,
+          props.xyPosition,
+          getIndex,
+          props.setXyPosition
+        );
+      }
+    } else {
+      copyPlaceholder(selectCopyType);
    }
  };
  const handleUniqueId = () => {
-    if (props.widgetType === textWidget) {
+    const signerId = props.signerObjId ? props.signerObjId : props.Id;
+    if (signerId && props.widgetType === textWidget && props.setTempSignerId) {
      props.setUniqueId(props?.tempSignerId);
      props.setTempSignerId("");
    }
    props.setIsPageCopy(false);
+    setSelectCopyType(1);
  };
  return (
    <ModalUi
      isOpen={props.isPageCopy}
-      title={t("copy-to-all-pages")}
+      title={t("copy-title")}
      handleClose={() => handleUniqueId()}
    >
      <div className="h-full p-[20px] text-base-content">
@@ -201,17 +282,17 @@ function PlaceholderCopy(props) {
                <input
                  className="mr-[8px] op-radio op-radio-xs"
                  type="radio"
-                  value={data}
-                  onChange={() => setSelectCopyType(data)}
-                  checked={selectCopyType === data}
+                  value={data.id}
+                  onChange={() => setSelectCopyType(data.id)}
+                  checked={selectCopyType === data.id}
                />
-                {t(`copy-type.${data}`)}
+                {t(`copy-type.${data.type}`)}
              </label>
            </div>
          );
        })}

-        <div className="flex bg-[#9f9f9f] w-full my-[15px]"></div>
+        <div className="flex flex-row bg-[#9f9f9f] w-full my-[15px]"></div>
        <button
          onClick={() => {
            handleApplyCopy();
@@ -225,7 +306,7 @@ function PlaceholderCopy(props) {
        </button>
        <button
          type="button"
-          className="op-btn op-btn-ghost"
+          className="op-btn op-btn-ghost ml-2"
          onClick={() => handleUniqueId()}
        >
          {t("cancel")}
@@ -7,7 +7,8 @@ import {
  radioButtonWidget,
  range,
  textInputWidget,
-  textWidget
+  textWidget,
+  widgetDataValue
 } from "../../constant/Utils";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
@@ -19,16 +20,23 @@ const textWidgetCls =
  "w-full h-full md:min-w-full md:min-h-full z-[999] text-[12px] rounded-[2px] border-[1px] border-[#007bff] overflow-hidden resize-none outline-none text-base-content item-center whitespace-pre-wrap bg-white";
 const selectWidgetCls =
  "w-full h-full absolute left-0 top-0 border-[1px] border-[#007bff] rounded-[2px] focus:outline-none text-base-content";
+const widgetCls =
+  "select-none-cls overflow-hidden w-full h-full text-black flex flex-col justify-center items-center";
 function PlaceholderType(props) {
  const { t } = useTranslation();
  const type = props?.pos?.type;
-  const widgetTypeTraslation = t(`widgets-name.${props?.pos?.type}`);
+  const widgetData =
+    props.pos?.options?.defaultValue || props.pos?.options?.response;
+  const widgetTypeTranslation = t(`widgets-name.${props?.pos?.type}`);
  const [selectOption, setSelectOption] = useState("");
  const [validatePlaceholder, setValidatePlaceholder] = useState("");
  const inputRef = useRef(null);
  const [textValue, setTextValue] = useState();
  const [selectedCheckbox, setSelectedCheckbox] = useState([]);
-  const years = range(1990, getYear(new Date()) + 16, 1);
+  const [hint, setHint] = useState("");
+  const years = range(1950, getYear(new Date()) + 16, 1);
+  const fontSize = props.calculateFont(props.pos.options?.fontSize);
+  const fontColor = props.pos.options?.fontColor || "black";
  const months = [
    "January",
    "February",
@@ -43,6 +51,16 @@ function PlaceholderType(props) {
    "November",
    "December"
  ];
+  const textWidgetStyle = {
+    fontSize: fontSize,
+    color: fontColor,
+    fontFamily: "Arial, sans-serif",
+    overflow: "hidden",
+    textAlign: "start",
+    width: "100%",
+    display: "flex",
+    height: "100%"
+  };
  const validateExpression = (regexValidation) => {
    if (textValue && regexValidation) {
      let regexObject = regexValidation;
@@ -59,7 +77,6 @@ function PlaceholderType(props) {
  };

  const handleInputBlur = () => {
-    props.setDraggingEnabled(true);
    const validateType = props.pos?.options?.validation?.type;
    let regexValidation;
    if (validateType && validateType !== "text") {
@@ -127,53 +144,42 @@ function PlaceholderType(props) {
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

-  useEffect(() => {
-    if (
-      ["name", "email", "job title", "company"].includes(props.pos?.type) &&
-      props.isNeedSign &&
-      props.data?.signerObjId === props?.signerObjId
-    ) {
-      const defaultData = props.pos?.options?.defaultValue;
-      if (defaultData) {
-        setTextValue(defaultData);
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.pos?.options?.defaultValue]);
-
  const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (
    <div
-      className={`${selectWidgetCls} text-[12px] overflow-hidden`}
+      style={{
+        fontSize: fontSize,
+        color: fontColor,
+        fontFamily: "Arial, sans-serif"
+      }}
+      className={`${selectWidgetCls} overflow-hidden`}
      onClick={onClick}
      ref={ref}
    >
      {value}
-      <i className="fa-light fa-calendar  ml-[5px]"></i>
+      <i className="fa-light fa-calendar ml-[5px]"></i>
    </div>
  ));
  ExampleCustomInput.displayName = "ExampleCustomInput";
-
  useEffect(() => {
    if (
-      ["name", "email", "job title", "company"].includes(type) &&
+      ["name", "email", "job title", "company", textInputWidget].includes(
+        type
+      ) &&
      props.isNeedSign &&
      props.data?.signerObjId === props.signerObjId
    ) {
-      const isDefault = true;
-      const senderUser = localStorage.getItem(`Extand_Class`);
-      const jsonSender = JSON.parse(senderUser);
-      onChangeInput(
-        jsonSender && jsonSender[0],
-        null,
-        props.xyPostion,
-        null,
-        props.setXyPostion,
-        props.data.Id,
-        isDefault
-      );
+      if (widgetData) {
+        setTextValue(widgetData);
+      }
+    }
+
+    if (props.pos?.options?.hint) {
+      setHint(props.pos?.options.hint);
+    } else {
+      setHint(props.pos?.type);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [type]);
+  }, [type, widgetData]);
  //function for show checked checkbox
  const selectCheckbox = (ind) => {
    const res = props.pos.options?.response;
@@ -233,9 +239,9 @@ function PlaceholderType(props) {
      onChangeInput(
        checkedList ? checkedList : updateSelectedCheckbox,
        props.pos.key,
-        props.xyPostion,
+        props.xyPosition,
        props.index,
-        props.setXyPostion,
+        props.setXyPosition,
        props.data && props.data.Id,
        false,
        null,
@@ -263,9 +269,9 @@ function PlaceholderType(props) {
    onChangeInput(
      data,
      props.pos.key,
-      props.xyPostion,
+      props.xyPosition,
      props.index,
-      props.setXyPostion,
+      props.setXyPosition,
      props.data && props.data.Id,
      false,
      null,
@@ -276,12 +282,6 @@ function PlaceholderType(props) {
  //function to set onchange date
  const handleOnDateChange = (date) => {
    props.setStartDate(date);
-    const isDateChange = true;
-    const dateObj = {
-      date: date,
-      format: props.selectDate.format
-    };
-    props.handleSaveDate(dateObj, isDateChange);
  };
  //handle height on enter press in text area
  const handleEnterPress = (e) => {
@@ -292,9 +292,9 @@ function PlaceholderType(props) {
        height,
        props.pos.type,
        props.pos.key,
-        props.xyPostion,
+        props.xyPosition,
        props.index,
-        props.setXyPostion,
+        props.setXyPosition,
        props.data && props.data?.Id
      );
    }
@@ -306,16 +306,24 @@ function PlaceholderType(props) {
          alt="signature"
          draggable="false"
          src={props.pos.SignUrl}
-          className="w-full h-full "
+          className="w-full h-full select-none-cls "
        />
      ) : (
-        <div className="text-[11px] w-full h-full text-black flex flex-col justify-center items-center">
-          {props?.handleUserName &&
-            props?.handleUserName(
-              props?.data?.Id,
-              props?.data?.Role,
-              widgetTypeTraslation
-            )}
+        <div className={widgetCls}>
+          {props.pos.type && (
+            <div
+              style={{
+                fontSize: props.pos
+                  ? props.calculateFontsize(props.pos)
+                  : "11px"
+              }}
+              className="font-medium"
+            >
+              {props.isNeedSign
+                ? props.pos?.options?.hint || widgetTypeTranslation
+                : widgetTypeTranslation}
+            </div>
+          )}
        </div>
      );
    case "stamp":
@@ -324,16 +332,24 @@ function PlaceholderType(props) {
          alt="stamp"
          draggable="false"
          src={props.pos.SignUrl}
-          className="w-full h-full"
+          className="w-full h-full select-none-cls"
        />
      ) : (
-        <div className="text-[11px] w-full h-full text-black flex flex-col justify-center items-center">
-          {props?.handleUserName &&
-            props?.handleUserName(
-              props?.data?.Id,
-              props?.data?.Role,
-              widgetTypeTraslation
-            )}
+        <div className={widgetCls}>
+          {props.pos.type && (
+            <div
+              style={{
+                fontSize: props.pos
+                  ? props.calculateFontsize(props.pos)
+                  : "11px"
+              }}
+              className="font-medium"
+            >
+              {props.isNeedSign
+                ? props.pos?.options?.hint || widgetTypeTranslation
+                : widgetTypeTranslation}
+            </div>
+          )}
        </div>
      );
    case "checkbox":
@@ -341,11 +357,16 @@ function PlaceholderType(props) {
        <div style={{ zIndex: props.isSignYourself && "99" }}>
          {props.pos.options?.values?.map((data, ind) => {
            return (
-              <div key={ind} className="flex items-center text-center gap-0.5">
+              <div
+                key={ind}
+                className="select-none-cls flex items-center text-center gap-0.5"
+              >
                <input
+                  id={`checkbox-${props.pos.key + ind}`}
+                  style={{ width: fontSize, height: fontSize }}
                  className={`${
                    ind === 0 ? "mt-0" : "mt-[5px]"
-                  } flex justify-center op-checkbox op-checkbox-xs rounded-[0.350rem]`}
+                  } flex justify-center op-checkbox rounded-[1px] `}
                  onBlur={handleInputBlur}
                  disabled={
                    props.isNeedSign &&
@@ -379,7 +400,13 @@ function PlaceholderType(props) {
                  }}
                />
                {!props.pos.options?.isHideLabel && (
-                  <label className="text-xs mb-0 text-center">{data}</label>
+                  <label
+                    htmlFor={`checkbox-${props.pos.key + ind}`}
+                    style={{ fontSize: fontSize, color: fontColor }}
+                    className="text-xs mb-0 text-center"
+                  >
+                    {data}
+                  </label>
                )}
              </div>
            );
@@ -388,10 +415,11 @@ function PlaceholderType(props) {
      );
    case textInputWidget:
      return props.isSignYourself ||
+        (props.isSelfSign && props.data?.signerObjId === props.signerObjId) ||
        (props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
        <textarea
          ref={inputRef}
-          placeholder={validatePlaceholder || "please enter value"}
+          placeholder={validatePlaceholder || t("widgets-name.text")}
          rows={1}
          onKeyDown={handleEnterPress}
          value={textValue}
@@ -401,39 +429,48 @@ function PlaceholderType(props) {
            onChangeInput(
              e.target.value,
              props.pos.key,
-              props.xyPostion,
+              props.xyPosition,
              props.index,
-              props.setXyPostion,
+              props.setXyPosition,
              props.data && props.data?.Id,
              false
            );
          }}
-          className={textWidgetCls}
+          className={`${
+            props.isNeedSign &&
+            (props.pos.options?.isReadOnly ||
+              props.data?.signerObjId !== props.signerObjId)
+              ? "select-none"
+              : "" + textWidgetCls
+          }`}
          style={{
-            fontSize: props.pos.options?.fontSize
-              ? props.pos.options?.fontSize + "px"
-              : "12px",
-            color: props.pos.options?.fontColor || "black"
+            fontSize: fontSize,
+            color: fontColor,
+            background: props.data?.blockColor
          }}
+          disabled={
+            props.isNeedSign &&
+            (props.pos.options?.isReadOnly ||
+              props.data?.signerObjId !== props.signerObjId)
+          }
          cols="50"
        />
      ) : (
-        <div
-          style={{
-            fontSize: props.pos.options?.fontSize
-              ? props.pos.options?.fontSize + "px"
-              : "12px",
-            color: props.pos.options?.fontColor || "black",
-            overflow: "hidden"
-          }}
-        >
-          <span>{widgetTypeTraslation}</span>
+        <div style={textWidgetStyle} className="select-none-cls">
+          <span>{textValue || widgetTypeTranslation}</span>
        </div>
      );
    case "dropdown":
      return props.data?.signerObjId === props.signerObjId ? (
        <select
-          className={`${selectWidgetCls} text-[12px] bg-inherit`}
+          style={{ fontSize: fontSize, color: fontColor }}
+          className={`${
+            props.isNeedSign &&
+            (props.pos.options?.isReadOnly ||
+              props.data?.signerObjId !== props.signerObjId)
+              ? " disabled:bg-inherit select-none "
+              : "" + `${selectWidgetCls} text-[12px] bg-inherit`
+          }`}
          id="myDropdown"
          value={selectOption}
          onChange={(e) => {
@@ -441,32 +478,50 @@ function PlaceholderType(props) {
            onChangeInput(
              e.target.value,
              props.pos.key,
-              props.xyPostion,
+              props.xyPosition,
              props.index,
-              props.setXyPostion,
+              props.setXyPosition,
              props.data && props.data?.Id,
              false
            );
          }}
+          disabled={
+            props.isNeedSign &&
+            (props.pos.options?.isReadOnly ||
+              props.data?.signerObjId !== props.signerObjId)
+          }
        >
          {/* Default/Title option */}
-          <option value="" disabled hidden>
+          <option
+            style={{ fontSize: fontSize, color: fontColor }}
+            value=""
+            disabled
+            hidden
+          >
            {props?.pos?.options?.name}
          </option>

          {props.pos?.options?.values?.map((data, ind) => {
            return (
-              <option key={ind} value={data}>
+              <option
+                style={{ fontSize: fontSize, color: fontColor }}
+                key={ind}
+                value={data}
+              >
                {data}
              </option>
            );
          })}
        </select>
      ) : (
-        <div className="text-[12px] overflow-hidden">
+        <div
+          style={textWidgetStyle}
+          className="select-none-cls flex justify-between items-center"
+        >
          {props.pos?.options?.name
            ? props.pos.options.name
-            : widgetTypeTraslation}
+            : widgetTypeTranslation}
+          <i className="fa-light fa-circle-chevron-down mr-1 "></i>
        </div>
      );
    case "initials":
@@ -475,24 +530,33 @@ function PlaceholderType(props) {
          alt="initials"
          draggable="false"
          src={props.pos.SignUrl}
-          className="w-full h-full"
+          className="w-full h-full select-none-cls"
        />
      ) : (
-        <div className="text-[11px] w-full h-full text-black flex flex-col justify-center items-center">
-          {props?.handleUserName &&
-            props?.handleUserName(
-              props?.data?.Id,
-              props?.data?.Role,
-              widgetTypeTraslation
-            )}
+        <div className={widgetCls}>
+          {props.pos.type && (
+            <div
+              style={{
+                fontSize: props.pos
+                  ? props.calculateFontsize(props.pos)
+                  : "11px"
+              }}
+              className="font-medium text-center"
+            >
+              {props.isNeedSign
+                ? props.pos?.options?.hint || widgetTypeTranslation
+                : widgetTypeTranslation}
+            </div>
+          )}
        </div>
      );
    case "name":
      return props.isSignYourself ||
+        (props.isSelfSign && props.data?.signerObjId === props.signerObjId) ||
        (props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
        <textarea
          ref={inputRef}
-          placeholder={"name"}
+          placeholder={hint || widgetTypeTranslation}
          rows={1}
          onKeyDown={handleEnterPress}
          value={textValue}
@@ -502,42 +566,29 @@ function PlaceholderType(props) {
            onChangeInput(
              e.target.value,
              props.pos.key,
-              props.xyPostion,
+              props.xyPosition,
              props.index,
-              props.setXyPostion,
+              props.setXyPosition,
              props.data && props.data?.Id,
              isDefault
            );
          }}
          className={textWidgetCls}
-          style={{
-            fontSize: props.pos.options?.fontSize
-              ? props.pos.options?.fontSize + "px"
-              : "12px",
-            color: props.pos.options?.fontColor || "black"
-          }}
+          style={{ fontSize: fontSize, color: fontColor }}
          cols="50"
        />
      ) : (
-        <div
-          style={{
-            fontSize: props.pos.options?.fontSize
-              ? props.pos.options?.fontSize + "px"
-              : "12px",
-            color: props.pos.options?.fontColor || "black",
-            fontFamily: "Arial, sans-serif",
-            overflow: "hidden"
-          }}
-        >
-          <span>{widgetTypeTraslation}</span>
+        <div className="flex h-full select-none-cls" style={textWidgetStyle}>
+          <span>{widgetTypeTranslation}</span>
        </div>
      );
    case "company":
      return props.isSignYourself ||
+        (props.isSelfSign && props.data?.signerObjId === props.signerObjId) ||
        (props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
        <textarea
          ref={inputRef}
-          placeholder="Enter text"
+          placeholder={hint || widgetTypeTranslation}
          rows={1}
          onKeyDown={handleEnterPress}
          value={textValue}
@@ -546,42 +597,29 @@ function PlaceholderType(props) {
            onChangeInput(
              e.target.value,
              props.pos.key,
-              props.xyPostion,
+              props.xyPosition,
              props.index,
-              props.setXyPostion,
+              props.setXyPosition,
              props.data && props.data?.Id,
              false
            );
          }}
          className={textWidgetCls}
-          style={{
-            fontSize: props.pos.options?.fontSize
-              ? props.pos.options?.fontSize + "px"
-              : "12px",
-            color: props.pos.options?.fontColor || "black"
-          }}
+          style={{ fontSize: fontSize, color: fontColor }}
          cols="50"
        />
      ) : (
-        <div
-          style={{
-            fontSize: props.pos.options?.fontSize
-              ? props.pos.options?.fontSize + "px"
-              : "12px",
-            color: props.pos.options?.fontColor || "black",
-            overflow: "hidden",
-            fontFamily: "Arial, sans-serif"
-          }}
-        >
-          <span>{widgetTypeTraslation}</span>
+        <div style={textWidgetStyle} className="select-none-cls">
+          <span>{widgetTypeTranslation}</span>
        </div>
      );
    case "job title":
      return props.isSignYourself ||
+        (props.isSelfSign && props.data?.signerObjId === props.signerObjId) ||
        (props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
        <textarea
          ref={inputRef}
-          placeholder={"job title"}
+          placeholder={hint || widgetTypeTranslation}
          rows={1}
          onKeyDown={handleEnterPress}
          value={textValue}
@@ -590,97 +628,79 @@ function PlaceholderType(props) {
            onChangeInput(
              e.target.value,
              props.pos.key,
-              props.xyPostion,
+              props.xyPosition,
              props.index,
-              props.setXyPostion,
+              props.setXyPosition,
              props.data && props.data?.Id,
              false
            );
          }}
          className={textWidgetCls}
-          style={{
-            fontSize: props.pos.options?.fontSize
-              ? props.pos.options?.fontSize + "px"
-              : "12px",
-            color: props.pos.options?.fontColor || "black"
-          }}
+          style={{ fontSize: fontSize, color: fontColor }}
          cols="50"
        />
      ) : (
-        <div
-          style={{
-            fontSize: props.pos.options?.fontSize
-              ? props.pos.options?.fontSize + "px"
-              : "12px",
-            color: props.pos.options?.fontColor || "black",
-            fontFamily: "Arial, sans-serif",
-            overflow: "hidden"
-          }}
-        >
-          <span>{widgetTypeTraslation}</span>
+        <div style={textWidgetStyle} className="select-none-cls">
+          <span>{widgetTypeTranslation}</span>
        </div>
      );
    case "date":
      return props.isSignYourself ||
+        (props.isSelfSign && props.data?.signerObjId === props.signerObjId) ||
        (props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
-        <div>
-          <DatePicker
-            renderCustomHeader={({ date, changeYear, changeMonth }) => (
-              <div className="flex justify-start ml-2 ">
-                <select
-                  className="bg-transparent outline-none"
-                  value={months[getMonth(date)]}
-                  onChange={({ target: { value } }) =>
-                    changeMonth(months.indexOf(value))
-                  }
-                >
-                  {months.map((option) => (
-                    <option key={option} value={option}>
-                      {option}
-                    </option>
-                  ))}
-                </select>
-                <select
-                  className="bg-transparent outline-none"
-                  value={getYear(date)}
-                  onChange={({ target: { value } }) => changeYear(value)}
-                >
-                  {years.map((option) => (
-                    <option key={option} value={option}>
-                      {option}
-                    </option>
-                  ))}
-                </select>
-              </div>
-            )}
-            disabled={
-              props.isPlaceholder ||
-              (props.isNeedSign &&
-                props.data?.signerObjId !== props.signerObjId)
-            }
-            onBlur={handleInputBlur}
-            closeOnScroll={true}
-            className={`${selectWidgetCls} outline-[#007bff]`}
-            selected={
-              props?.startDate
-                ? props?.startDate
-                : props.pos.options?.response &&
-                  new Date(props.pos.options.response)
-            }
-            onChange={(date) => handleOnDateChange(date)}
-            popperPlacement="top-end"
-            customInput={<ExampleCustomInput />}
-            dateFormat={
-              props.selectDate
-                ? props.selectDate?.format
-                : props.pos?.options?.validation?.format
-                  ? props.pos?.options?.validation?.format
-                  : "MM/dd/yyyy"
-            }
-          />
-        </div>
+        <DatePicker
+          renderCustomHeader={({ date, changeYear, changeMonth }) => (
+            <div className="flex justify-start ml-2 ">
+              <select
+                className="bg-transparent outline-none"
+                value={months[getMonth(date)]}
+                onChange={({ target: { value } }) =>
+                  changeMonth(months.indexOf(value))
+                }
+              >
+                {months.map((option) => (
+                  <option key={option} value={option}>
+                    {option}
+                  </option>
+                ))}
+              </select>
+              <select
+                className="bg-transparent outline-none"
+                value={getYear(date)}
+                onChange={({ target: { value } }) => changeYear(value)}
+              >
+                {years.map((option) => (
+                  <option key={option} value={option}>
+                    {option}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )}
+          disabled={
+            props.isPlaceholder ||
+            (props.isNeedSign && props.data?.signerObjId !== props.signerObjId)
+          }
+          onBlur={handleInputBlur}
+          closeOnScroll={true}
+          className={`${selectWidgetCls} outline-[#007bff]`}
+          selected={props?.startDate}
+          onChange={(date) => handleOnDateChange(date)}
+          popperPlacement="top-end"
+          customInput={<ExampleCustomInput />}
+          dateFormat={
+            props.selectDate
+              ? props.selectDate?.format
+              : props.pos?.options?.validation?.format
+                ? props.pos?.options?.validation?.format
+                : "MM/dd/yyyy"
+          }
+        />
      ) : (
-        <div className="text-[12px] text-black items-center overflow-hidden">
+        <div
+          style={textWidgetStyle}
+          className="select-none-cls overflow-hidden"
+        >
          <span>
            {props.selectDate
              ? props.selectDate?.format
@@ -696,26 +716,40 @@ function PlaceholderType(props) {
          alt="image"
          draggable="false"
          src={props.pos.SignUrl}
-          className="w-full h-full"
+          className="w-full h-full select-none-cls"
        />
      ) : (
-        <div className="text-[11px] w-full h-full text-black flex flex-col justify-center items-center">
-          {props?.handleUserName &&
-            props?.handleUserName(
-              props?.data?.Id,
-              props?.data?.Role,
-              widgetTypeTraslation
-            )}
+        <div className={widgetCls}>
+          {props.pos.type && (
+            <div
+              style={{
+                fontSize: props.pos
+                  ? props.calculateFontsize(props.pos)
+                  : "11px"
+              }}
+              className="font-medium text-center"
+            >
+              {props.isNeedSign
+                ? props.pos?.options?.hint || widgetTypeTranslation
+                : widgetTypeTranslation}
+            </div>
+          )}
        </div>
      );
    case "email":
      return props.isSignYourself ||
+        (props.isSelfSign && props.data?.signerObjId === props.signerObjId) ||
        (props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
        <textarea
          ref={inputRef}
-          placeholder={"enter email"}
+          placeholder={hint || widgetTypeTranslation}
          rows={1}
-          onKeyDown={handleEnterPress}
+          onKeyDown={(e) => {
+            // Prevent new line on Enter key press
+            if (e.key === "Enter") {
+              e.preventDefault();
+            }
+          }}
          value={textValue}
          onBlur={handleInputBlur}
          onChange={(e) => {
@@ -723,35 +757,24 @@ function PlaceholderType(props) {
            onChangeInput(
              e.target.value,
              props.pos.key,
-              props.xyPostion,
+              props.xyPosition,
              props.index,
-              props.setXyPostion,
+              props.setXyPosition,
              props.data && props.data?.Id,
              false
            );
          }}
          className={textWidgetCls}
          style={{
-            fontSize: props.pos.options?.fontSize
-              ? props.pos.options?.fontSize + "px"
-              : "12px",
-            color: props.pos.options?.fontColor || "black",
+            fontSize: fontSize,
+            color: fontColor,
            fontFamily: "Arial, sans-serif"
          }}
-          cols="50"
+          cols="1"
        />
      ) : (
-        <div
-          style={{
-            fontSize: props.pos.options?.fontSize
-              ? props.pos.options?.fontSize + "px"
-              : "12px",
-            color: props.pos.options?.fontColor || "black",
-            fontFamily: "Arial, sans-serif",
-            overflow: "hidden"
-          }}
-        >
-          <span>{widgetTypeTraslation}</span>
+        <div style={textWidgetStyle} className="select-none-cls">
+          <span>{widgetTypeTranslation}</span>
        </div>
      );
    case radioButtonWidget:
@@ -759,11 +782,18 @@ function PlaceholderType(props) {
        <div>
          {props.pos.options?.values.map((data, ind) => {
            return (
-              <div key={ind} className="flex items-center text-center gap-0.5">
+              <div
+                key={ind}
+                className="select-none-cls flex items-center text-center gap-0.5"
+              >
                <input
-                  className={`${
-                    ind === 0 ? "mt-0" : "mt-[5px]"
-                  } ${"w-[15px] h-[15px]"} flex justify-center op-radio`}
+                  id={`radio-${props.pos.key + ind}`}
+                  style={{
+                    width: fontSize,
+                    height: fontSize,
+                    marginTop: ind > 0 ? "10px" : "0px"
+                  }}
+                  className={`flex justify-center op-radio`}
                  type="radio"
                  disabled={
                    props.isNeedSign &&
@@ -778,7 +808,13 @@ function PlaceholderType(props) {
                  }}
                />
                {!props.pos.options?.isHideLabel && (
-                  <label className="text-xs mb-0">{data}</label>
+                  <label
+                    htmlFor={`radio-${props.pos.key + ind}`}
+                    style={{ fontSize: fontSize, color: fontColor }}
+                    className="text-xs mb-0"
+                  >
+                    {data}
+                  </label>
                )}
              </div>
            );
@@ -788,7 +824,7 @@ function PlaceholderType(props) {
    case textWidget:
      return (
        <textarea
-          placeholder="Enter text"
+          placeholder={t("widgets-name.text")}
          rows={1}
          onKeyDown={handleEnterPress}
          value={textValue}
@@ -798,9 +834,9 @@ function PlaceholderType(props) {
            onChangeInput(
              e.target.value,
              props.pos.key,
-              props.xyPostion,
+              props.xyPosition,
              props.index,
-              props.setXyPostion,
+              props.setXyPosition,
              props.data && props.data?.Id,
              false
            );
@@ -808,10 +844,8 @@ function PlaceholderType(props) {
          className={textWidgetCls}
          style={{
            fontFamily: "Arial, sans-serif",
-            fontSize: props.pos.options?.fontSize
-              ? props.pos.options?.fontSize + "px"
-              : "12px",
-            color: props.pos.options?.fontColor || "black"
+            fontSize: fontSize,
+            color: fontColor
          }}
          cols="50"
        />
@@ -823,14 +857,26 @@ function PlaceholderType(props) {
            alt="image"
            draggable="false"
            src={props.pos.SignUrl}
-            className="w-full h-full"
+            className="w-full h-full "
          />
        </div>
      ) : (
-        <div className="text-[11px] w-full h-full text-black flex flex-col justify-center items-center">
+        <div className={widgetCls}>
          {props.pos.isStamp ? <div>stamp</div> : <div>signature</div>}
-          {props?.handleUserName &&
-            props?.handleUserName(props?.data?.Id, props?.data?.Role)}
+          {props.pos.type && (
+            <div
+              style={{
+                fontSize: props.pos
+                  ? props.calculateFontsize(props.pos)
+                  : "11px"
+              }}
+              className="font-medium"
+            >
+              {props.isNeedSign
+                ? props.pos?.options?.hint || widgetTypeTranslation
+                : widgetTypeTranslation}
+            </div>
+          )}
        </div>
      );
  }
@@ -23,7 +23,7 @@ function PrevNext({ pageNumber, allPages, changePage }) {
          <i className="fa-light fa-backward" aria-hidden="true"></i>
        </span>
      </button>
-      <span className="text-xs text-base-content font-medium mx-2 2xl:text-[30px]">
+      <span className="text-xs text-base-content font-medium mx-2 2xl:text-[20px]">
        {pageNumber || (allPages ? 1 : "--")} {t("of")} {allPages || "--"}
      </span>
      <button
@@ -16,7 +16,7 @@ const RecipientList = (props) => {
  //function for onhover signer name change background color
  const inputRef = useRef(null);
  const isWidgetExist = (Id) => {
-    return props.signerPos.some((x) => x.Id === Id);
+    return props.signerPos.some((x) => x.Id === Id && x.placeHolder);
  };

  //handle drag start
@@ -32,7 +32,7 @@ const RecipientList = (props) => {
  };

  //handle draggable element drop and also used in mobile view on up and down key to chnage sequence of recipient's list
-  const handleChangeSequence = (e, ind, isUp, isDown) => {
+  const handleChangeSequence = (e, ind, isUp, isDown, obj) => {
    e.preventDefault();
    let draggedItemId;
    let index = ind;
@@ -63,13 +63,10 @@ const RecipientList = (props) => {
    remainingItems.splice(index, 0, ...draggedItem);
    //set current draggable recipient details,objectId,index,contract_className ... after replace recipient list
    props?.setSignersData(remainingItems);
-    props?.setSignerObjId(remainingItems[index]?.objectId || "");
    props?.setIsSelectId(index);
-    props?.setContractName(remainingItems[index]?.className || "");
    props?.setUniqueId(remainingItems[index]?.Id);
    props?.setRoleName(remainingItems[index]?.Role);
-    props?.setBlockColor(remainingItems[index]?.blockColor);
-
+    props?.setBlockColor(obj.blockColor);
    //change order of placeholder's list using sorting method
    //`remainingItems` is correct order of signers after change order
    const changeOrderSignerList = props?.signerPos.sort((a, b) => {
@@ -99,7 +96,9 @@ const RecipientList = (props) => {
                props.sendInOrder && !isMobile && handleDragOver(e)
              }
              onDrop={(e) =>
-                props.sendInOrder && !isMobile && handleChangeSequence(e, ind)
+                props.sendInOrder &&
+                !isMobile &&
+                handleChangeSequence(e, ind, null, null, obj)
              }
              data-tut="recipientArea"
              onMouseEnter={() => setIsHover(ind)}
@@ -121,9 +120,7 @@ const RecipientList = (props) => {
              }}
              onClick={(e) => {
                e.preventDefault();
-                props.setSignerObjId(obj?.objectId || "");
                props.setIsSelectId(ind);
-                props.setContractName(obj?.className || "");
                props.setUniqueId(obj.Id);
                props.setRoleName(obj.Role);
                props.setBlockColor(obj?.blockColor);
@@ -200,7 +197,7 @@ const RecipientList = (props) => {
                          }}
                        />
                      ) : (
-                        <span className="text-[13px] 2xl:text-[25px]">
+                        <span className="text-[13px] 2xl:text-[17px]">
                          {obj.Role}
                        </span>
                      )}
@@ -226,7 +223,7 @@ const RecipientList = (props) => {
                    onClick={(e) => {
                      if (ind !== 0) {
                        e.stopPropagation();
-                        handleChangeSequence(e, ind, "up");
+                        handleChangeSequence(e, ind, "up", null, obj);
                      }
                    }}
                    className={ind === 0 ? "text-[gray]" : "text-black"}
@@ -237,7 +234,7 @@ const RecipientList = (props) => {
                    onClick={(e) => {
                      if (ind !== props.signersdata.length - 1) {
                        e.stopPropagation();
-                        handleChangeSequence(e, ind, null, "down");
+                        handleChangeSequence(e, ind, null, "down", obj);
                      }
                    }}
                    className={
@@ -263,7 +260,7 @@ const RecipientList = (props) => {
                      : "text-base-content"
                  } cursor-pointer`}
                >
-                  <i className="fa-light fa-trash-can 2xl:text-[30px]"></i>
+                  <i className="fa-light fa-trash-can 2xl:text-[22px]"></i>
                </div>
              )}
              <hr />
@@ -1,116 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { Document, Page } from "react-pdf";
-import { useSelector } from "react-redux";
-
-function RenderAllPdfPage({
-  signPdfUrl,
-  allPages,
-  setAllPages,
-  setPageNumber,
-  setSignBtnPosition,
-  pageNumber,
-  signerPos,
-  signerObjectId,
-  containerWH
-}) {
-  const { t } = useTranslation();
-  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);
-      }
-    }
-  }
-  const pageContainer = useRef();
-  const isHeader = useSelector((state) => state.showHeader);
-  const [pageWidth, setPageWidth] = useState("");
-
-  useEffect(() => {
-    const updateSize = () => {
-      if (pageContainer.current) {
-        setPageWidth(pageContainer.current.offsetWidth);
-      }
-    };
-
-    // Use setTimeout to wait for the transition to complete
-    const timer = setTimeout(updateSize, 100); // match the transition duration
-
-    return () => clearTimeout(timer);
-  }, [isHeader, pageContainer, containerWH]);
-  //'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 className="absolute z-20 top-[1px] -right-[13px] -translate-x-1/2 -translate-y-1/2">
-          <i
-            style={{ color: bookmarkColor || "red" }}
-            className="fa-solid fa-bookmark"
-          ></i>
-        </div>
-      )
-    );
-  };
-  return (
-    <div ref={pageContainer} className="hidden w-[20%] bg-base-100 md:block">
-      <div className="mx-2 pr-2 pt-2 pb-1 text-[15px] text-base-content font-semibold border-b-[1px] border-base-300">
-        {t("pages")}
-      </div>
-      <div
-        className={`flex h-[90%] flex-col items-center m-2  
-         autoSignScroll hide-scrollbar max-h-[100vh] `}
-      >
-        <Document
-          loading={t("loading-doc")}
-          onLoadSuccess={onDocumentLoad}
-          file={signPdfUrl}
-        >
-          {Array.from(new Array(allPages), (el, index) => (
-            <div
-              key={index}
-              className={`${
-                pageNumber - 1 === index ? "border-[red]" : "border-[#878787]"
-              } border-2   m-[10px] flex justify-center items-center relative`}
-              onClick={() => {
-                setPageNumber(index + 1);
-                if (setSignBtnPosition) {
-                  setSignBtnPosition([]);
-                }
-              }}
-            >
-              {signerPos && addSignatureBookmark(index)}
-
-              <div className="relative z-[1] overflow-hidden">
-                <Page
-                  key={`page_${index + 1}`}
-                  pageNumber={index + 1}
-                  width={pageWidth - 60}
-                  scale={1}
-                  renderAnnotationLayer={false}
-                  renderTextLayer={false}
-                />
-              </div>
-            </div>
-          ))}
-        </Document>
-      </div>
-    </div>
-  );
-}
-
-export default RenderAllPdfPage;
@@ -0,0 +1,182 @@
+import React, { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Document, Page } from "react-pdf";
+import { useSelector } from "react-redux";
+import { PDFDocument } from "pdf-lib";
+import { base64ToArrayBuffer } from "../../constant/Utils";
+import { maxFileSize } from "../../constant/const";
+
+function RenderAllPdfPage(props) {
+  const { t } = useTranslation();
+  const pageContainer = useRef();
+  const mergePdfInputRef = useRef(null);
+  const [signPageNumber, setSignPageNumber] = useState([]);
+  const [bookmarkColor, setBookmarkColor] = useState("");
+  const isHeader = useSelector((state) => state.showHeader);
+  const [pageWidth, setPageWidth] = useState("");
+
+  //set all number of pages after load pdf
+  function onDocumentLoad({ numPages }) {
+    props?.setAllPages(numPages);
+    //check if signerPos array exist then save page number exist in signerPos array to show bookmark icon
+    if (props?.signerPos) {
+      const checkUser = props?.signerPos.filter(
+        (data) => data.Id === props?.id
+      );
+      setBookmarkColor(checkUser[0]?.blockColor);
+      let pageNumberArr = [];
+      if (checkUser?.length > 0) {
+        checkUser[0]?.placeHolder?.map((data) => {
+          pageNumberArr.push(data?.pageNumber);
+        });
+
+        setSignPageNumber(pageNumberArr);
+      }
+    }
+  }
+
+  useEffect(() => {
+    const updateSize = () => {
+      if (pageContainer.current) {
+        setPageWidth(pageContainer.current.offsetWidth);
+      }
+    };
+
+    // Use setTimeout to wait for the transition to complete
+    const timer = setTimeout(updateSize, 100); // match the transition duration
+
+    return () => clearTimeout(timer);
+  }, [isHeader, pageContainer, props?.containerWH]);
+  //'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 className="absolute z-20 top-[1px] -right-[13px] -translate-x-1/2 -translate-y-1/2">
+          <i
+            style={{ color: bookmarkColor || "red" }}
+            className="fa-solid fa-bookmark"
+          ></i>
+        </div>
+      )
+    );
+  };
+  const pdfDataBase64 = `data:application/pdf;base64,${props?.pdfBase64Url}`;
+
+  // `removeFile` is used to  remove file if exists
+  const removeFile = (e) => {
+    if (e) {
+      e.target.value = "";
+    }
+  };
+  // `handleFileUpload` is trigger when user click on add pages btn and is used to merge multiple pdf
+  const handleFileUpload = async (e) => {
+    const file = e.target.files[0];
+    if (!file) {
+      alert("Please upload a valid PDF file.");
+      return;
+    }
+    if (!file.type.includes("pdf")) {
+      alert("Only PDF files are allowed.");
+      return;
+    }
+    const mb = Math.round(file?.size / Math.pow(1024, 2));
+    if (mb > maxFileSize) {
+      alert(`${t("file-alert-1")} ${maxFileSize} MB`);
+      removeFile(e);
+      return;
+    }
+    try {
+      const uploadedPdfBytes = await file.arrayBuffer();
+      const uploadedPdfDoc = await PDFDocument.load(uploadedPdfBytes, {
+        ignoreEncryption: true
+      });
+      const basePdfDoc = await PDFDocument.load(props.pdfArrayBuffer);
+
+      // Copy pages from the uploaded PDF to the base PDF
+      const uploadedPdfPages = await basePdfDoc.copyPages(
+        uploadedPdfDoc,
+        uploadedPdfDoc.getPageIndices()
+      );
+      uploadedPdfPages.forEach((page) => basePdfDoc.addPage(page));
+      // Save the updated PDF
+      const pdfBase64 = await basePdfDoc.saveAsBase64({
+        useObjectStreams: false
+      });
+      const pdfBuffer = base64ToArrayBuffer(pdfBase64);
+      props.setPdfArrayBuffer(pdfBuffer);
+      props.setPdfBase64Url(pdfBase64);
+      props.setIsUploadPdf && props.setIsUploadPdf(true);
+      mergePdfInputRef.current.value = "";
+    } catch (error) {
+      mergePdfInputRef.current.value = "";
+      console.error("Error merging PDF:", error);
+    }
+  };
+  return (
+    <div ref={pageContainer} className="hidden w-[20%] bg-base-100 md:block">
+      <div className="mx-2 pr-2 pt-2 pb-1 text-[15px] text-base-content font-semibold border-b-[1px] border-base-300">
+        {t("pages")}
+      </div>
+      <div
+        className={`flex h-[90%] flex-col items-center m-2  
+         autoSignScroll hide-scrollbar max-h-[100vh] `}
+      >
+        <Document
+          error=""
+          loading={t("loading-doc")}
+          onLoadSuccess={onDocumentLoad}
+          file={pdfDataBase64}
+        >
+          {Array.from(new Array(props?.allPages), (el, index) => (
+            <div
+              key={index}
+              className={`${
+                props?.pageNumber - 1 === index
+                  ? "border-[red]"
+                  : "border-[#878787]"
+              } border-2 m-[10px] flex justify-center items-center relative`}
+              onClick={() => {
+                props?.setPageNumber(index + 1);
+                if (props?.setSignBtnPosition) {
+                  props?.setSignBtnPosition([]);
+                }
+              }}
+            >
+              {props?.signerPos && addSignatureBookmark(index)}
+              <Page
+                key={`page_${index + 1}`}
+                pageNumber={index + 1}
+                width={pageWidth - 60}
+                scale={1}
+                renderAnnotationLayer={false}
+                renderTextLayer={false}
+              />
+            </div>
+          ))}
+        </Document>
+        {props?.isMergePdfBtn && (
+          <button
+            className="mb-2 bg-base-100 px-2 py-2 ring-[0.5px] ring-base-content rounded-box flex gap-1 justify-center items-center"
+            onClick={() => mergePdfInputRef.current.click()}
+            title={t("add-pages")}
+          >
+            <input
+              type="file"
+              className="hidden"
+              accept="application/pdf"
+              ref={mergePdfInputRef}
+              onChange={handleFileUpload}
+            />
+            <i className="fa-light fa-plus text-gray-500"></i>
+            <span className="text-xs lg:text-sm text-base-content ">
+              Add pages
+            </span>
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default RenderAllPdfPage;
@@ -1,611 +0,0 @@
-import React from "react";
-import RSC from "react-scrollbars-custom";
-import { Document, Page } from "react-pdf";
-import {
-  defaultWidthHeight,
-  getContainerScale,
-  handleImageResize,
-  handleSignYourselfImageResize
-} from "../../constant/Utils";
-import Placeholder from "./Placeholder";
-import Alert from "../../primitives/Alert";
-import { useTranslation } from "react-i18next";
-
-function RenderPdf({
-  pageNumber,
-  drop,
-  signerPos,
-  successEmail,
-  handleTabDrag,
-  handleStop,
-  isDragging,
-  setIsSignPad,
-  setIsStamp,
-  handleDeleteSign,
-  setSignKey,
-  pdfDetails,
-  xyPostion,
-  pageDetails,
-  pdfRequest,
-  signerObjectId,
-  signedSigners,
-  pdfLoad,
-  setPdfLoad,
-  placeholder,
-  setSignerPos,
-  setXyPostion,
-  index,
-  containerWH,
-  setIsResize,
-  handleLinkUser,
-  setUniqueId,
-  signersdata,
-  setIsPageCopy,
-  setSignerObjId,
-  setShowDropdown,
-  setIsInitial,
-  setIsValidate,
-  setWidgetType,
-  setValidateAlert,
-  setIsRadio,
-  setCurrWidgetsDetails,
-  setSelectWidgetId,
-  selectWidgetId,
-  unSignedWidgetId,
-  setIsCheckbox,
-  handleNameModal,
-  handleTextSettingModal,
-  setTempSignerId,
-  uniqueId,
-  pdfOriginalWH,
-  scale,
-  setIsSelectId,
-  ispublicTemplate,
-  handleUserDetails
-}) {
-  const { t } = useTranslation();
-  const isMobile = window.innerWidth < 767;
-  //check isGuestSigner is present in local if yes than handle login flow header in mobile view
-  const isGuestSigner = localStorage.getItem("isGuestSigner");
-
-  // handle signature block width and height according to screen
-  const posWidth = (pos, signYourself) => {
-    const containerScale = getContainerScale(
-      pdfOriginalWH,
-      pageNumber,
-      containerWH
-    );
-    const defaultWidth = defaultWidthHeight(pos.type).width;
-    const posWidth = pos.Width ? pos.Width : defaultWidth;
-    if (signYourself) {
-      return posWidth * scale * containerScale;
-    } else {
-      if (pos.isMobile && pos.scale) {
-        if (pos.IsResize) {
-          if (scale > 1) {
-            return posWidth * pos.scale * containerScale * scale;
-          } else {
-            return posWidth * containerScale;
-          }
-        } else {
-          if (scale > 1) {
-            return posWidth * pos.scale * containerScale * scale;
-          } else {
-            return posWidth * pos.scale * containerScale;
-          }
-        }
-      } else {
-        return posWidth * scale * containerScale;
-      }
-    }
-  };
-  const posHeight = (pos, signYourself) => {
-    const containerScale = getContainerScale(
-      pdfOriginalWH,
-      pageNumber,
-      containerWH
-    );
-    const posHeight = pos.Height || defaultWidthHeight(pos.type).height;
-    if (signYourself) {
-      return posHeight * scale * containerScale;
-    } else {
-      if (pos.isMobile && pos.scale) {
-        if (pos.IsResize) {
-          if (scale > 1) {
-            return posHeight * pos.scale * containerScale * scale;
-          } else {
-            return posHeight * containerScale;
-          }
-        } else {
-          if (scale > 1) {
-            return posHeight * pos.scale * containerScale * scale;
-          } else {
-            return posHeight * pos.scale * containerScale;
-          }
-        }
-      } else {
-        return posHeight * scale * containerScale;
-      }
-    }
-  };
-
-  //function for render placeholder block over pdf document
-  const checkSignedSigners = (data) => {
-    let checkSign = [];
-    //condition to handle quick send flow and using normal request sign flow
-    checkSign = signedSigners
-      ? signedSigners?.filter(
-          (sign) =>
-            sign?.Id === data?.Id || sign?.objectId === data?.signerObjId
-        )
-      : [];
-    const handleAllUserName = (Id, Role, type) => {
-      return (
-        <React.Fragment>
-          <div className="text-black text-[8px] font-bold">
-            {
-              pdfDetails[0].Signers?.find(
-                (signer) => signer.objectId === data.signerObjId
-              )?.Name
-            }
-          </div>
-          {type && <div className="text-[11px] font-bold">{type}</div>}
-          {Role && (
-            <div className="text-black text-[8px] font-medium">
-              {`(${Role})`}
-            </div>
-          )}
-        </React.Fragment>
-      );
-    };
-    return (
-      checkSign.length === 0 &&
-      data.placeHolder.map((placeData, key) => {
-        return (
-          <React.Fragment key={key}>
-            {placeData.pageNumber === pageNumber &&
-              placeData.pos.map((pos) => {
-                return (
-                  pos && (
-                    <React.Fragment key={pos.key}>
-                      <Placeholder
-                        pos={pos}
-                        setSignKey={setSignKey}
-                        setIsSignPad={setIsSignPad}
-                        setIsStamp={setIsStamp}
-                        handleSignYourselfImageResize={handleImageResize}
-                        index={pageNumber}
-                        xyPostion={signerPos}
-                        setXyPostion={setSignerPos}
-                        data={data}
-                        setIsResize={setIsResize}
-                        isShowBorder={false}
-                        signerObjId={signerObjectId}
-                        isShowDropdown={true}
-                        isNeedSign={true}
-                        isSignYourself={false}
-                        posWidth={posWidth}
-                        posHeight={posHeight}
-                        handleUserName={handleAllUserName}
-                        isDragging={false}
-                        pdfDetails={pdfDetails}
-                        setIsInitial={setIsInitial}
-                        setValidateAlert={setValidateAlert}
-                        unSignedWidgetId={unSignedWidgetId}
-                        setSelectWidgetId={setSelectWidgetId}
-                        selectWidgetId={selectWidgetId}
-                        setCurrWidgetsDetails={setCurrWidgetsDetails}
-                        uniqueId={uniqueId}
-                        scale={scale}
-                        containerWH={containerWH}
-                        pdfOriginalWH={pdfOriginalWH}
-                        pageNumber={pageNumber}
-                        ispublicTemplate={ispublicTemplate}
-                        handleUserDetails={handleUserDetails}
-                      />
-                    </React.Fragment>
-                  )
-                );
-              })}
-          </React.Fragment>
-        );
-      })
-    );
-  };
-  //function for render placeholder block over pdf document
-
-  const handleUserName = (Id, Role, type) => {
-    if (Id) {
-      const checkSign = signersdata.find((sign) => sign.Id === Id);
-      if (checkSign?.Name) {
-        return (
-          <>
-            <div className="text-black text-[8px] font-medium">
-              {checkSign?.Name}
-            </div>
-            {type && <div className="text-[11px] font-bold">{type}</div>}
-            {Role && (
-              <div className="text-black text-[8px] font-medium">
-                {`(${Role})`}
-              </div>
-            )}
-          </>
-        );
-      } else {
-        return (
-          <>
-            {type && <div className="text-[11px] font-bold">{type}</div>}
-            <div className="text-black text-[8px] font-medium">{Role}</div>
-          </>
-        );
-      }
-    } else {
-      return (
-        <>
-          {type && <div className="text-[11px] font-bold">{type}</div>}
-          <div className="text-black text-[8px] font-medium">{Role}</div>
-        </>
-      );
-    }
-  };
-  return (
-    <>
-      {successEmail && (
-        <Alert type={"success"}>{t("success-email-alert")}</Alert>
-      )}
-      {isMobile ? (
-        <div
-          data-tut="reactourForth"
-          className={`${
-            isGuestSigner ? "30px" : ""
-          } border-[0.1px] border-[#ebe8e8]`}
-          ref={drop}
-          id="container"
-        >
-          {containerWH?.width &&
-            pdfOriginalWH.length > 0 &&
-            (pdfRequest
-              ? signerPos.map((data, key) => {
-                  return (
-                    <React.Fragment key={key}>
-                      {checkSignedSigners(data)}
-                    </React.Fragment>
-                  );
-                })
-              : placeholder // placeholder mobile
-                ? signerPos.map((data, ind) => {
-                    return (
-                      <React.Fragment key={ind}>
-                        {data.placeHolder.map((placeData, index) => {
-                          return (
-                            <React.Fragment key={index}>
-                              {placeData.pageNumber === pageNumber &&
-                                placeData.pos.map((pos) => {
-                                  return (
-                                    <React.Fragment key={pos.key}>
-                                      <Placeholder
-                                        pos={pos}
-                                        setIsPageCopy={setIsPageCopy}
-                                        setSignKey={setSignKey}
-                                        handleDeleteSign={handleDeleteSign}
-                                        setIsStamp={setIsStamp}
-                                        handleTabDrag={handleTabDrag}
-                                        handleStop={handleStop}
-                                        handleSignYourselfImageResize={
-                                          handleImageResize
-                                        }
-                                        index={pageNumber}
-                                        xyPostion={signerPos}
-                                        setXyPostion={setSignerPos}
-                                        setSignerObjId={setSignerObjId}
-                                        data={data}
-                                        setIsResize={setIsResize}
-                                        setShowDropdown={setShowDropdown}
-                                        isShowBorder={true}
-                                        isPlaceholder={true}
-                                        setUniqueId={setUniqueId}
-                                        handleLinkUser={handleLinkUser}
-                                        handleUserName={handleUserName}
-                                        isSignYourself={false}
-                                        posWidth={posWidth}
-                                        posHeight={posHeight}
-                                        isDragging={isDragging}
-                                        setIsValidate={setIsValidate}
-                                        setWidgetType={setWidgetType}
-                                        setIsRadio={setIsRadio}
-                                        setIsCheckbox={setIsCheckbox}
-                                        setCurrWidgetsDetails={
-                                          setCurrWidgetsDetails
-                                        }
-                                        setSelectWidgetId={setSelectWidgetId}
-                                        selectWidgetId={selectWidgetId}
-                                        handleNameModal={handleNameModal}
-                                        setTempSignerId={setTempSignerId}
-                                        uniqueId={uniqueId}
-                                        handleTextSettingModal={
-                                          handleTextSettingModal
-                                        }
-                                        scale={scale}
-                                        containerWH={containerWH}
-                                        pdfOriginalWH={pdfOriginalWH}
-                                        pageNumber={pageNumber}
-                                        setIsSelectId={setIsSelectId}
-                                      />
-                                    </React.Fragment>
-                                  );
-                                })}
-                            </React.Fragment>
-                          );
-                        })}
-                      </React.Fragment>
-                    );
-                  })
-                : xyPostion.map((data, ind) => {
-                    return (
-                      <React.Fragment key={ind}>
-                        {data.pageNumber === pageNumber &&
-                          data.pos.map((pos) => {
-                            return (
-                              pos && (
-                                <Placeholder
-                                  pos={pos}
-                                  setIsPageCopy={setIsPageCopy}
-                                  setSignKey={setSignKey}
-                                  handleDeleteSign={handleDeleteSign}
-                                  setIsStamp={setIsStamp}
-                                  handleTabDrag={handleTabDrag}
-                                  handleStop={handleStop}
-                                  handleSignYourselfImageResize={
-                                    handleSignYourselfImageResize
-                                  }
-                                  index={index}
-                                  xyPostion={xyPostion}
-                                  setXyPostion={setXyPostion}
-                                  containerWH={containerWH}
-                                  setIsSignPad={setIsSignPad}
-                                  isShowBorder={true}
-                                  isSignYourself={true}
-                                  posWidth={posWidth}
-                                  posHeight={posHeight}
-                                  pdfDetails={pdfDetails[0]}
-                                  isDragging={isDragging}
-                                  setIsInitial={setIsInitial}
-                                  setWidgetType={setWidgetType}
-                                  setSelectWidgetId={setSelectWidgetId}
-                                  selectWidgetId={selectWidgetId}
-                                  handleUserName={handleUserName}
-                                  setIsCheckbox={setIsCheckbox}
-                                  setValidateAlert={setValidateAlert}
-                                  setCurrWidgetsDetails={setCurrWidgetsDetails}
-                                  handleTextSettingModal={
-                                    handleTextSettingModal
-                                  }
-                                  scale={scale}
-                                  pdfOriginalWH={pdfOriginalWH}
-                                  pageNumber={pageNumber}
-                                />
-                              )
-                            );
-                          })}
-                      </React.Fragment>
-                    );
-                  }))}
-
-          {/* this component for render pdf document is in middle of the component */}
-          <div className="flex items-center justify-center">
-            <Document
-              onLoadError={() => {
-                setPdfLoad(false);
-              }}
-              loading={t("loading-doc")}
-              onLoadSuccess={pageDetails}
-              // ref={pdfRef}'
-              onClick={() => {
-                if (setSelectWidgetId) {
-                  setSelectWidgetId("");
-                }
-              }}
-              file={pdfDetails[0]?.SignedUrl || pdfDetails[0]?.URL}
-            >
-              <Page
-                key={index}
-                pageNumber={pageNumber}
-                width={containerWH.width}
-                renderAnnotationLayer={false}
-                renderTextLayer={false}
-                onGetAnnotationsError={(error) => {
-                  console.log("annotation error", error);
-                }}
-              />
-            </Document>
-          </div>
-        </div>
-      ) : (
-        <RSC
-          style={{
-            position: "relative",
-            boxShadow: "rgba(17, 12, 46, 0.15) 0px 48px 100px 0px",
-            height: window.innerHeight + "px",
-            zIndex: 0
-          }}
-          noScrollY={false}
-          noScrollX={scale === 1 ? true : false}
-        >
-          <div
-            style={{
-              width: containerWH?.width && containerWH?.width * scale
-            }}
-            ref={drop}
-            id="container"
-          >
-            {pdfLoad &&
-              containerWH?.width &&
-              pdfOriginalWH.length > 0 &&
-              (pdfRequest //pdf request sign flow
-                ? signerPos?.map((data, key) => {
-                    return (
-                      <React.Fragment key={key}>
-                        {checkSignedSigners(data)}
-                      </React.Fragment>
-                    );
-                  })
-                : placeholder //placeholder and template flow
-                  ? signerPos.map((data, ind) => {
-                      return (
-                        <React.Fragment key={ind}>
-                          {data.placeHolder.map((placeData, index) => {
-                            return (
-                              <React.Fragment key={index}>
-                                {placeData.pageNumber === pageNumber &&
-                                  placeData.pos.map((pos) => {
-                                    return (
-                                      <React.Fragment key={pos.key}>
-                                        <Placeholder
-                                          pos={pos}
-                                          setIsPageCopy={setIsPageCopy}
-                                          setSignKey={setSignKey}
-                                          handleDeleteSign={handleDeleteSign}
-                                          setIsStamp={setIsStamp}
-                                          handleTabDrag={handleTabDrag}
-                                          handleStop={handleStop}
-                                          handleSignYourselfImageResize={
-                                            handleImageResize
-                                          }
-                                          index={pageNumber}
-                                          xyPostion={signerPos}
-                                          setXyPostion={setSignerPos}
-                                          setSignerObjId={setSignerObjId}
-                                          data={data}
-                                          setIsResize={setIsResize}
-                                          setShowDropdown={setShowDropdown}
-                                          isShowBorder={true}
-                                          isPlaceholder={true}
-                                          setUniqueId={setUniqueId}
-                                          handleLinkUser={handleLinkUser}
-                                          handleUserName={handleUserName}
-                                          isSignYourself={false}
-                                          posWidth={posWidth}
-                                          posHeight={posHeight}
-                                          isDragging={isDragging}
-                                          setIsValidate={setIsValidate}
-                                          setWidgetType={setWidgetType}
-                                          setIsRadio={setIsRadio}
-                                          setIsCheckbox={setIsCheckbox}
-                                          setCurrWidgetsDetails={
-                                            setCurrWidgetsDetails
-                                          }
-                                          setSelectWidgetId={setSelectWidgetId}
-                                          selectWidgetId={selectWidgetId}
-                                          handleNameModal={handleNameModal}
-                                          setTempSignerId={setTempSignerId}
-                                          uniqueId={uniqueId}
-                                          handleTextSettingModal={
-                                            handleTextSettingModal
-                                          }
-                                          scale={scale}
-                                          containerWH={containerWH}
-                                          pdfOriginalWH={pdfOriginalWH}
-                                          pageNumber={pageNumber}
-                                          setIsSelectId={setIsSelectId}
-                                        />
-                                      </React.Fragment>
-                                    );
-                                  })}
-                              </React.Fragment>
-                            );
-                          })}
-                        </React.Fragment>
-                      );
-                    })
-                  : xyPostion.map((data, ind) => {
-                      // signyourself flow
-                      return (
-                        <React.Fragment key={ind}>
-                          {data.pageNumber === pageNumber &&
-                            data.pos.map((pos) => {
-                              return (
-                                <React.Fragment key={pos.key}>
-                                  <Placeholder
-                                    pos={pos}
-                                    setIsPageCopy={setIsPageCopy}
-                                    setSignKey={setSignKey}
-                                    handleDeleteSign={handleDeleteSign}
-                                    setIsStamp={setIsStamp}
-                                    handleTabDrag={handleTabDrag}
-                                    handleStop={(event, dragElement) =>
-                                      handleStop(event, dragElement, pos.type)
-                                    }
-                                    handleSignYourselfImageResize={
-                                      handleSignYourselfImageResize
-                                    }
-                                    index={index}
-                                    xyPostion={xyPostion}
-                                    setXyPostion={setXyPostion}
-                                    setIsSignPad={setIsSignPad}
-                                    isShowBorder={true}
-                                    isSignYourself={true}
-                                    posWidth={posWidth}
-                                    posHeight={posHeight}
-                                    pdfDetails={pdfDetails[0]}
-                                    isDragging={isDragging}
-                                    setIsInitial={setIsInitial}
-                                    setWidgetType={setWidgetType}
-                                    setSelectWidgetId={setSelectWidgetId}
-                                    selectWidgetId={selectWidgetId}
-                                    handleUserName={handleUserName}
-                                    setIsCheckbox={setIsCheckbox}
-                                    setValidateAlert={setValidateAlert}
-                                    setCurrWidgetsDetails={
-                                      setCurrWidgetsDetails
-                                    }
-                                    handleTextSettingModal={
-                                      handleTextSettingModal
-                                    }
-                                    scale={scale}
-                                    containerWH={containerWH}
-                                    pdfOriginalWH={pdfOriginalWH}
-                                    pageNumber={pageNumber}
-                                  />
-                                </React.Fragment>
-                              );
-                            })}
-                        </React.Fragment>
-                      );
-                    }))}
-
-            {/* this component for render pdf document is in middle of the component */}
-            <Document
-              onLoadError={() => {
-                setPdfLoad(false);
-              }}
-              loading={t("loading-doc")}
-              onLoadSuccess={pageDetails}
-              onClick={() => {
-                if (setSelectWidgetId) {
-                  setSelectWidgetId("");
-                }
-              }}
-              // ref={pdfRef}
-              file={pdfDetails[0]?.SignedUrl || pdfDetails[0].URL}
-            >
-              <Page
-                key={index}
-                width={containerWH.width}
-                scale={scale || 1}
-                className={"-z-[1]"} // when user zoom-in in tablet widgets move backward that's why pass -z-[1]
-                pageNumber={pageNumber}
-                renderAnnotationLayer={false}
-                renderTextLayer={false}
-                onGetAnnotationsError={(error) => {
-                  console.log("annotation error", error);
-                }}
-              />
-            </Document>
-          </div>
-        </RSC>
-      )}
-    </>
-  );
-}
-
-export default RenderPdf;
@@ -0,0 +1,635 @@
+import React, { useState } from "react";
+import RSC from "react-scrollbars-custom";
+import { Document, Page } from "react-pdf";
+import {
+  defaultWidthHeight,
+  getContainerScale,
+  handleImageResize,
+  handleSignYourselfImageResize,
+  isMobile
+} from "../../constant/Utils";
+import Placeholder from "./Placeholder";
+import Alert from "../../primitives/Alert";
+import { useTranslation } from "react-i18next";
+
+function RenderPdf(props) {
+  const { t } = useTranslation();
+  const [scaledHeight, setScaledHeight] = useState();
+  //check isGuestSigner is present in local if yes than handle login flow header in mobile view
+  const isGuestSigner = localStorage.getItem("isGuestSigner");
+
+  // handle signature block width and height according to screen
+  const posWidth = (pos, signYourself) => {
+    const containerScale = getContainerScale(
+      props.pdfOriginalWH,
+      props.pageNumber,
+      props.containerWH
+    );
+    const defaultWidth = defaultWidthHeight(pos.type).width;
+    const posWidth = pos.Width ? pos.Width : defaultWidth;
+    if (signYourself) {
+      return posWidth * props.scale * containerScale;
+    } else {
+      if (pos.isMobile && pos.scale) {
+        if (pos.IsResize) {
+          if (props.scale > 1) {
+            return posWidth * pos.scale * containerScale * props.scale;
+          } else {
+            return posWidth * containerScale;
+          }
+        } else {
+          if (props.scale > 1) {
+            return posWidth * pos.scale * containerScale * props.scale;
+          } else {
+            return posWidth * pos.scale * containerScale;
+          }
+        }
+      } else {
+        return posWidth * props.scale * containerScale;
+      }
+    }
+  };
+  const posHeight = (pos, signYourself) => {
+    const containerScale = getContainerScale(
+      props.pdfOriginalWH,
+      props.pageNumber,
+      props.containerWH
+    );
+    const posHeight = pos.Height || defaultWidthHeight(pos.type).height;
+    if (signYourself) {
+      return posHeight * props.scale * containerScale;
+    } else {
+      if (pos.isMobile && pos.scale) {
+        if (pos.IsResize) {
+          if (props.scale > 1) {
+            return posHeight * pos.scale * containerScale * props.scale;
+          } else {
+            return posHeight * containerScale;
+          }
+        } else {
+          if (props.scale > 1) {
+            return posHeight * pos.scale * containerScale * props.scale;
+          } else {
+            return posHeight * pos.scale * containerScale;
+          }
+        }
+      } else {
+        return posHeight * props.scale * containerScale;
+      }
+    }
+  };
+
+  //function for render placeholder block over pdf document
+  const checkSignedSigners = (data) => {
+    let checkSign = [];
+    //condition to handle quick send flow and using normal request sign flow
+    checkSign = props.signedSigners
+      ? props.signedSigners?.filter(
+          (sign) =>
+            sign?.Id === data?.Id || sign?.objectId === data?.signerObjId
+        )
+      : [];
+    return (
+      checkSign.length === 0 &&
+      data?.placeHolder?.map((placeData, key) => {
+        return (
+          <React.Fragment key={key}>
+            {placeData.pageNumber === props.pageNumber &&
+              placeData.pos.map((pos) => {
+                return (
+                  pos && (
+                    <React.Fragment key={pos.key}>
+                      <Placeholder
+                        pos={pos}
+                        setSignKey={props.setSignKey}
+                        setIsSignPad={props.setIsSignPad}
+                        setIsStamp={props.setIsStamp}
+                        handleSignYourselfImageResize={handleImageResize}
+                        index={props.pageNumber}
+                        xyPosition={props.signerPos}
+                        setXyPosition={props.setSignerPos}
+                        data={data}
+                        setIsResize={props.setIsResize}
+                        isShowBorder={props.isSelfSign}
+                        isAlllowModify={props.isAlllowModify}
+                        signerObjId={props.signerObjectId}
+                        isShowDropdown={true}
+                        isNeedSign={props.pdfRequest}
+                        isSelfSign={true}
+                        isSignYourself={false}
+                        posWidth={posWidth}
+                        posHeight={posHeight}
+                        isDragging={props.isDragging}
+                        pdfDetails={props.pdfDetails}
+                        setIsInitial={props.setIsInitial}
+                        setValidateAlert={props.setValidateAlert}
+                        unSignedWidgetId={props.unSignedWidgetId}
+                        setSelectWidgetId={props.setSelectWidgetId}
+                        selectWidgetId={props.selectWidgetId}
+                        setCurrWidgetsDetails={props.setCurrWidgetsDetails}
+                        uniqueId={props.uniqueId}
+                        scale={props.scale}
+                        containerWH={props.containerWH}
+                        pdfOriginalWH={props.pdfOriginalWH}
+                        pageNumber={props.pageNumber}
+                        ispublicTemplate={props.ispublicTemplate}
+                        handleUserDetails={props.handleUserDetails}
+                        isResize={props.isResize}
+                        setIsAgreeTour={props.setIsAgreeTour}
+                        isAgree={props.isAgree}
+                        handleTabDrag={props.handleTabDrag}
+                        handleStop={props.handleStop}
+                        setWidgetType={props.setWidgetType}
+                        setUniqueId={props.setUniqueId}
+                        setIsSelectId={props.setIsSelectId}
+                        handleDeleteSign={props.handleDeleteSign}
+                        setIsPageCopy={props.setIsPageCopy}
+                        handleTextSettingModal={props.handleTextSettingModal}
+                        setIsCheckbox={props.setIsCheckbox}
+                        isFreeResize={false}
+                        isOpenSignPad={true}
+                        assignedWidgetId={props.assignedWidgetId}
+                        isApplyAll={true}
+                        setFontSize={props.setFontSize}
+                        fontSize={props.fontSize}
+                        fontColor={props.fontColor}
+                        setFontColor={props.setFontColor}
+                        setRequestSignTour={props.setRequestSignTour}
+                        calculateFontsize={calculateFontsize}
+                      />
+                    </React.Fragment>
+                  )
+                );
+              })}
+          </React.Fragment>
+        );
+      })
+    );
+  };
+
+  const calculateFontsize = (pos) => {
+    const width = posWidth(pos);
+    const height = posHeight(pos);
+
+    if (height === width || height < width) {
+      return `${height / 5}px`;
+    } else if (width < height) {
+      return `${width / 10}px`;
+    }
+  };
+  const pdfDataBase64 = `data:application/pdf;base64,${props.pdfBase64Url}`;
+  //calculate render height of pdf in mobile view
+  const handlePageLoadSuccess = (page) => {
+    const containerWidth = props.divRef.current.offsetWidth; // Get container width
+    const viewport = page.getViewport({ scale: 1 });
+    const scale = containerWidth / viewport.width; // Scale to fit container width
+    const scaleHeight = viewport.height * scale;
+    setScaledHeight(scaleHeight);
+  };
+  return (
+    <>
+      {props.successEmail && (
+        <Alert type={"success"}>{t("success-email-alert")}</Alert>
+      )}
+      {isMobile ? (
+        <RSC
+          style={{
+            position: "relative",
+            boxShadow: "rgba(17, 12, 46, 0.15) 0px 48px 100px 0px",
+            //49 is height of header
+            height: isGuestSigner ? window.innerHeight - 49 : scaledHeight,
+            zIndex: 0
+          }}
+          noScrollY={props.scale === 1 ? true : false}
+          noScrollX={props.scale === 1 ? true : false}
+        >
+          <div
+            data-tut="reactourForth"
+            className={`${
+              isGuestSigner ? "30px" : ""
+            } border-[0.1px] border-[#ebe8e8] overflow-x-auto`}
+            style={{
+              width:
+                props.containerWH?.width &&
+                props.containerWH?.width * props.scale
+            }}
+            ref={props.drop}
+            id="container"
+          >
+            {props.containerWH?.width &&
+              props.pdfOriginalWH.length > 0 &&
+              (props.pdfRequest || props.isSelfSign
+                ? props.signerPos?.map((data, key) => {
+                    return (
+                      <React.Fragment key={key}>
+                        {checkSignedSigners(data)}
+                      </React.Fragment>
+                    );
+                  })
+                : props.placeholder // placeholder mobile
+                  ? props.signerPos?.map((data, ind) => {
+                      return (
+                        <React.Fragment key={ind}>
+                          {data?.placeHolder &&
+                            data?.placeHolder.map((placeData, index) => {
+                              return (
+                                <React.Fragment key={index}>
+                                  {placeData.pageNumber === props.pageNumber &&
+                                    placeData.pos.map((pos) => {
+                                      return (
+                                        <React.Fragment key={pos.key}>
+                                          <Placeholder
+                                            pos={pos}
+                                            setIsPageCopy={props.setIsPageCopy}
+                                            setSignKey={props.setSignKey}
+                                            handleDeleteSign={
+                                              props.handleDeleteSign
+                                            }
+                                            setIsStamp={props.setIsStamp}
+                                            handleTabDrag={props.handleTabDrag}
+                                            handleStop={props.handleStop}
+                                            handleSignYourselfImageResize={
+                                              handleImageResize
+                                            }
+                                            index={props.pageNumber}
+                                            xyPosition={props.signerPos}
+                                            setXyPosition={props.setSignerPos}
+                                            data={data}
+                                            setIsResize={props.setIsResize}
+                                            setShowDropdown={
+                                              props.setShowDropdown
+                                            }
+                                            isShowBorder={true}
+                                            isPlaceholder={true}
+                                            setUniqueId={props.setUniqueId}
+                                            handleLinkUser={
+                                              props.handleLinkUser
+                                            }
+                                            isSignYourself={false}
+                                            posWidth={posWidth}
+                                            posHeight={posHeight}
+                                            isDragging={props.isDragging}
+                                            setIsValidate={props.setIsValidate}
+                                            setWidgetType={props.setWidgetType}
+                                            setIsRadio={props.setIsRadio}
+                                            setIsCheckbox={props.setIsCheckbox}
+                                            setCurrWidgetsDetails={
+                                              props.setCurrWidgetsDetails
+                                            }
+                                            setSelectWidgetId={
+                                              props.setSelectWidgetId
+                                            }
+                                            selectWidgetId={
+                                              props.selectWidgetId
+                                            }
+                                            handleNameModal={
+                                              props.handleNameModal
+                                            }
+                                            setTempSignerId={
+                                              props.setTempSignerId
+                                            }
+                                            uniqueId={props.uniqueId}
+                                            handleTextSettingModal={
+                                              props.handleTextSettingModal
+                                            }
+                                            scale={props.scale}
+                                            containerWH={props.containerWH}
+                                            pdfOriginalWH={props.pdfOriginalWH}
+                                            pageNumber={props.pageNumber}
+                                            setIsSelectId={props.setIsSelectId}
+                                            fontSize={props.fontSize}
+                                            setFontSize={props.setFontSize}
+                                            fontColor={props.fontColor}
+                                            setFontColor={props.setFontColor}
+                                            isResize={props.isResize}
+                                            unSignedWidgetId={
+                                              props.unSignedWidgetId
+                                            }
+                                            isFreeResize={true}
+                                            calculateFontsize={
+                                              calculateFontsize
+                                            }
+                                          />
+                                        </React.Fragment>
+                                      );
+                                    })}
+                                </React.Fragment>
+                              );
+                            })}
+                        </React.Fragment>
+                      );
+                    })
+                  : !props.pdfDetails?.[0]?.IsCompleted &&
+                    props.xyPosition?.map((data, ind) => {
+                      return (
+                        <React.Fragment key={ind}>
+                          {data.pageNumber === props.pageNumber &&
+                            data.pos.map((pos, id) => {
+                              return (
+                                pos && (
+                                  <Placeholder
+                                    key={id}
+                                    pos={pos}
+                                    setIsPageCopy={props.setIsPageCopy}
+                                    setSignKey={props.setSignKey}
+                                    handleDeleteSign={props.handleDeleteSign}
+                                    setIsStamp={props.setIsStamp}
+                                    handleTabDrag={props.handleTabDrag}
+                                    handleStop={props.handleStop}
+                                    handleSignYourselfImageResize={
+                                      handleSignYourselfImageResize
+                                    }
+                                    index={props.index}
+                                    xyPosition={props.xyPosition}
+                                    setXyPosition={props.setXyPosition}
+                                    containerWH={props.containerWH}
+                                    setIsSignPad={props.setIsSignPad}
+                                    isShowBorder={true}
+                                    isSignYourself={true}
+                                    posWidth={posWidth}
+                                    posHeight={posHeight}
+                                    pdfDetails={props.pdfDetails[0]}
+                                    isDragging={props.isDragging}
+                                    setIsInitial={props.setIsInitial}
+                                    setWidgetType={props.setWidgetType}
+                                    setSelectWidgetId={props.setSelectWidgetId}
+                                    selectWidgetId={props.selectWidgetId}
+                                    setIsCheckbox={props.setIsCheckbox}
+                                    setValidateAlert={props.setValidateAlert}
+                                    setCurrWidgetsDetails={
+                                      props.setCurrWidgetsDetails
+                                    }
+                                    handleTextSettingModal={
+                                      props.handleTextSettingModal
+                                    }
+                                    scale={props.scale}
+                                    pdfOriginalWH={props.pdfOriginalWH}
+                                    pageNumber={props.pageNumber}
+                                    fontSize={props.fontSize}
+                                    setFontSize={props.setFontSize}
+                                    fontColor={props.fontColor}
+                                    setFontColor={props.setFontColor}
+                                    isResize={props.isResize}
+                                    setIsResize={props.setIsResize}
+                                    isFreeResize={false}
+                                    isOpenSignPad={true}
+                                    calculateFontsize={calculateFontsize}
+                                  />
+                                )
+                              );
+                            })}
+                        </React.Fragment>
+                      );
+                    }))}
+            {/* Mobile */}
+            <Document
+              error={<p className="mx-2">{t("failed-to-load-refresh-page")}</p>}
+              onLoadError={() => props.setPdfLoad(false)}
+              loading={t("loading-doc")}
+              onLoadSuccess={props.pageDetails}
+              onClick={() =>
+                props.setSelectWidgetId && props.setSelectWidgetId("")
+              }
+              file={pdfDataBase64}
+            >
+              <Page
+                onLoadSuccess={handlePageLoadSuccess}
+                scale={props.scale || 1}
+                key={props.index}
+                pageNumber={props.pageNumber}
+                width={props.containerWH.width}
+                renderAnnotationLayer={false}
+                renderTextLayer={false}
+                onGetAnnotationsError={(error) => {
+                  console.log("annotation error", error);
+                }}
+                className="select-none touch-callout-none"
+              />
+            </Document>
+          </div>
+        </RSC>
+      ) : (
+        <RSC
+          style={{
+            position: "relative",
+            boxShadow: "rgba(17, 12, 46, 0.15) 0px 48px 100px 0px",
+            height: window.innerHeight + "px",
+            zIndex: 0
+          }}
+          noScrollY={false}
+          noScrollX={props.scale === 1 ? true : false}
+        >
+          <div
+            style={{
+              width:
+                props.containerWH?.width &&
+                props.containerWH?.width * props.scale
+            }}
+            ref={props.drop}
+            id="container"
+          >
+            {props.pdfLoad &&
+              props.containerWH?.width &&
+              props.pdfOriginalWH.length > 0 &&
+              (props.pdfRequest || props.isSelfSign //pdf request sign flow
+                ? props.signerPos?.map((data, key) => {
+                    return (
+                      <React.Fragment key={key}>
+                        {checkSignedSigners(data)}
+                      </React.Fragment>
+                    );
+                  })
+                : props.placeholder //placeholder and template flow
+                  ? props.signerPos.map((data, ind) => {
+                      return (
+                        <React.Fragment key={ind}>
+                          {data?.placeHolder &&
+                            data?.placeHolder.map((placeData, index) => {
+                              return (
+                                <React.Fragment key={index}>
+                                  {placeData.pageNumber === props.pageNumber &&
+                                    placeData.pos.map((pos) => {
+                                      return (
+                                        <React.Fragment key={pos.key}>
+                                          <Placeholder
+                                            pos={pos}
+                                            setIsPageCopy={props.setIsPageCopy}
+                                            setSignKey={props.setSignKey}
+                                            handleDeleteSign={
+                                              props.handleDeleteSign
+                                            }
+                                            setIsStamp={props.setIsStamp}
+                                            handleTabDrag={props.handleTabDrag}
+                                            handleStop={props.handleStop}
+                                            handleSignYourselfImageResize={
+                                              handleImageResize
+                                            }
+                                            index={props.pageNumber}
+                                            xyPosition={props.signerPos}
+                                            setXyPosition={props.setSignerPos}
+                                            data={data}
+                                            setIsResize={props.setIsResize}
+                                            setShowDropdown={
+                                              props.setShowDropdown
+                                            }
+                                            isShowBorder={true}
+                                            isPlaceholder={true}
+                                            setUniqueId={props.setUniqueId}
+                                            handleLinkUser={
+                                              props.handleLinkUser
+                                            }
+                                            isSignYourself={false}
+                                            posWidth={posWidth}
+                                            posHeight={posHeight}
+                                            isDragging={props.isDragging}
+                                            setIsValidate={props.setIsValidate}
+                                            setWidgetType={props.setWidgetType}
+                                            setIsRadio={props.setIsRadio}
+                                            setIsCheckbox={props.setIsCheckbox}
+                                            setCurrWidgetsDetails={
+                                              props.setCurrWidgetsDetails
+                                            }
+                                            setSelectWidgetId={
+                                              props.setSelectWidgetId
+                                            }
+                                            selectWidgetId={
+                                              props.selectWidgetId
+                                            }
+                                            handleNameModal={
+                                              props.handleNameModal
+                                            }
+                                            setTempSignerId={
+                                              props.setTempSignerId
+                                            }
+                                            uniqueId={props.uniqueId}
+                                            handleTextSettingModal={
+                                              props.handleTextSettingModal
+                                            }
+                                            scale={props.scale}
+                                            containerWH={props.containerWH}
+                                            pdfOriginalWH={props.pdfOriginalWH}
+                                            pageNumber={props.pageNumber}
+                                            setIsSelectId={props.setIsSelectId}
+                                            fontSize={props.fontSize}
+                                            setFontSize={props.setFontSize}
+                                            fontColor={props.fontColor}
+                                            setFontColor={props.setFontColor}
+                                            isResize={props.isResize}
+                                            unSignedWidgetId={
+                                              props.unSignedWidgetId
+                                            }
+                                            isFreeResize={true}
+                                            calculateFontsize={
+                                              calculateFontsize
+                                            }
+                                          />
+                                        </React.Fragment>
+                                      );
+                                    })}
+                                </React.Fragment>
+                              );
+                            })}
+                        </React.Fragment>
+                      );
+                    })
+                  : !props.pdfDetails?.[0]?.IsCompleted &&
+                    props.xyPosition?.map((data, ind) => {
+                      // signyourself flow
+                      return (
+                        <React.Fragment key={ind}>
+                          {data.pageNumber === props.pageNumber &&
+                            data.pos.map((pos) => {
+                              return (
+                                <React.Fragment key={pos.key}>
+                                  <Placeholder
+                                    pos={pos}
+                                    setIsPageCopy={props.setIsPageCopy}
+                                    setSignKey={props.setSignKey}
+                                    handleDeleteSign={props.handleDeleteSign}
+                                    setIsStamp={props.setIsStamp}
+                                    handleTabDrag={props.handleTabDrag}
+                                    handleStop={(event, dragElement) =>
+                                      props.handleStop(
+                                        event,
+                                        dragElement,
+                                        pos.type
+                                      )
+                                    }
+                                    handleSignYourselfImageResize={
+                                      handleSignYourselfImageResize
+                                    }
+                                    index={props.index}
+                                    xyPosition={props.xyPosition}
+                                    setXyPosition={props.setXyPosition}
+                                    setIsSignPad={props.setIsSignPad}
+                                    isShowBorder={true}
+                                    isSignYourself={true}
+                                    posWidth={posWidth}
+                                    posHeight={posHeight}
+                                    pdfDetails={props.pdfDetails[0]}
+                                    isDragging={props.isDragging}
+                                    setIsInitial={props.setIsInitial}
+                                    setWidgetType={props.setWidgetType}
+                                    setSelectWidgetId={props.setSelectWidgetId}
+                                    selectWidgetId={props.selectWidgetId}
+                                    setIsCheckbox={props.setIsCheckbox}
+                                    setValidateAlert={props.setValidateAlert}
+                                    setCurrWidgetsDetails={
+                                      props.setCurrWidgetsDetails
+                                    }
+                                    handleTextSettingModal={
+                                      props.handleTextSettingModal
+                                    }
+                                    scale={props.scale}
+                                    containerWH={props.containerWH}
+                                    pdfOriginalWH={props.pdfOriginalWH}
+                                    pageNumber={props.pageNumber}
+                                    fontSize={props.fontSize}
+                                    setFontSize={props.setFontSize}
+                                    fontColor={props.fontColor}
+                                    setFontColor={props.setFontColor}
+                                    isResize={props.isResize}
+                                    setIsResize={props.setIsResize}
+                                    isFreeResize={false}
+                                    isOpenSignPad={true}
+                                    calculateFontsize={calculateFontsize}
+                                  />
+                                </React.Fragment>
+                              );
+                            })}
+                        </React.Fragment>
+                      );
+                    }))}
+            {/* large device */}
+            {/* this component for render pdf document is in middle of the component */}
+            <Document
+              error={<p className="mx-2">{t("failed-to-load-refresh-page")}</p>}
+              onLoadError={() => props.setPdfLoad(false)}
+              loading={t("loading-doc")}
+              onLoadSuccess={props.pageDetails}
+              onClick={() =>
+                props.setSelectWidgetId && props.setSelectWidgetId("")
+              }
+              file={pdfDataBase64}
+            >
+              <Page
+                key={props.index}
+                width={props.containerWH.width}
+                scale={props.scale || 1}
+                className={"-z-[1]"} // when user zoom-in in tablet widgets move backward that's why pass -z-[1]
+                pageNumber={props.pageNumber}
+                renderAnnotationLayer={false}
+                renderTextLayer={false}
+                onGetAnnotationsError={(error) => {
+                  console.log("annotation error", error);
+                }}
+              />
+            </Document>
+          </div>
+        </RSC>
+      )}
+    </>
+  );
+}
+
+export default RenderPdf;
@@ -5,35 +5,34 @@ import { useTranslation } from "react-i18next";
 function SelectLanguage(props) {
  const { i18n } = useTranslation();
  const languages = [
-    { value: "en", text: "English" },
-    { value: "fr", text: "Français" }
+    { value: "en", text: "English" }, //english
+    { value: "es", text: "Española" }, //spanish
+    { value: "fr", text: "Français" }, //french
+    { value: "it", text: "Italiano" }, //italian
+    { value: "de", text: "Deutsch" } //german
  ];
-  const [lang, setLang] = useState(i18next.language || "en");
+  const defaultLanguage = i18next.language || "en";
+  const [lang, setLang] = useState(defaultLanguage);
  // This function put query that helps to change the language
  const handleChangeLang = (e) => {
    setLang(e.target.value);
    i18n.changeLanguage(e.target.value);
-    props?.updateExtUser &&
-      props.updateExtUser({
-        language: e.target.value
-      });
+    props?.updateExtUser && props.updateExtUser({ language: e.target.value });
  };
  return (
    <div
      className={`${
-        !props.isProfile && " mt-3 pb-2 md:pb-0 "
+        !props.isProfile && " mt-[9px] pb-2 md:pb-0 "
      } flex justify-center items-center `}
    >
      <select
        value={lang}
        onChange={handleChangeLang}
        className={`${
-          !props.isProfile && " md:w-[15%] w-[50%]"
-        } op-select op-select-bordered  bg-white op-select-sm`}
+          !props.isProfile ? " md:w-[15%] w-[50%]" : "w-[180px]"
+        } op-select op-select-bordered  bg-white op-select-sm `}
      >
-        <option disabled selected>
-          select
-        </option>
+        <option disabled>select</option>
        {languages.map((item) => {
          return (
            <option key={item.value} value={item.value}>
@@ -1,618 +0,0 @@
-import React, { useRef, useState, useEffect } from "react";
-import { useTranslation } from "react-i18next";
-import SignatureCanvas from "react-signature-canvas";
-function SignPad({
-  isSignPad,
-  isStamp,
-  setIsImageSelect,
-  onSaveSign,
-  setIsSignPad,
-  setImage,
-  isImageSelect,
-  imageRef,
-  onImageChange,
-  onSaveImage,
-  image,
-  defaultSign,
-  setSignature,
-  myInitial,
-  isInitial,
-  setIsInitial,
-  setIsStamp,
-  widgetType,
-  currWidgetsDetails,
-  setCurrWidgetsDetails
-}) {
-  const { t } = useTranslation();
-  const [penColor, setPenColor] = useState("blue");
-  const allColor = ["blue", "red", "black"];
-  const canvasRef = useRef(null);
-  const [isDefaultSign, setIsDefaultSign] = useState(false);
-  const [isTab, setIsTab] = useState("draw");
-  const [isSignImg, setIsSignImg] = useState("");
-  const [signValue, setSignValue] = useState("");
-  const [textWidth, setTextWidth] = useState(null);
-  const [textHeight, setTextHeight] = useState(null);
-  const [signatureType, setSignatureType] = useState("draw");
-  const fontOptions = [
-    { value: "Fasthand" },
-    { value: "Dancing Script" },
-    { value: "Cedarville Cursive" },
-    { value: "Delicious Handrawn" }
-    // Add more font options as needed
-  ];
-  const [fontSelect, setFontSelect] = useState(fontOptions[0].value);
-
-  const senderUser =
-    localStorage.getItem(
-      `Parse/${localStorage.getItem("parseAppId")}/currentUser`
-    ) &&
-    localStorage.getItem(
-      `Parse/${localStorage.getItem("parseAppId")}/currentUser`
-    );
-  const jsonSender = JSON.parse(senderUser);
-  const currentUserName = jsonSender && jsonSender.name;
-
-  //function for clear signature image
-  const handleClear = () => {
-    setCurrWidgetsDetails({});
-    if (isTab === "draw") {
-      if (canvasRef.current) {
-        canvasRef.current.clear();
-      } else if (isStamp) {
-        setImage("");
-      }
-      setIsSignImg("");
-    } else if (isTab === "uploadImage") {
-      setImage("");
-    }
-    // setIsInitial(false);
-  };
-  //function for set signature url
-  const handleSignatureChange = (data) => {
-    setSignature(data);
-    setIsSignImg(data);
-  };
-  //save button component
-  const SaveBtn = () => {
-    return (
-      <div>
-        {(isTab === "draw" || isTab === "uploadImage") && (
-          <button
-            type="button"
-            className="op-btn op-btn-ghost mr-1 mt-[2px]"
-            onClick={() => handleClear()}
-          >
-            {t("clear")}
-          </button>
-        )}
-        <button
-          onClick={() => {
-            setCurrWidgetsDetails({});
-            if (!image) {
-              if (isTab === "mysignature") {
-                setIsSignImg("");
-                if (isInitial) {
-                  onSaveSign(signatureType, "initials");
-                } else {
-                  onSaveSign(null, "default");
-                }
-              } else {
-                if (isTab === "type") {
-                  setIsSignImg("");
-                  onSaveSign(
-                    null,
-                    false,
-                    !isInitial && textWidth > 150 ? 150 : textWidth,
-                    !isInitial && textHeight > 35 ? 35 : textHeight
-                  );
-                } else {
-                  setIsSignImg("");
-                  canvasRef.current.clear();
-                  onSaveSign(signatureType);
-                }
-              }
-
-              setPenColor("blue");
-            } else {
-              setIsSignImg("");
-              onSaveImage(signatureType);
-            }
-            setIsSignPad(false);
-            setIsInitial(false);
-            setIsImageSelect(false);
-            setIsDefaultSign(false);
-            setImage();
-            setIsTab("draw");
-            setSignValue("");
-            setIsStamp(false);
-          }}
-          type="button"
-          className={`${
-            isSignImg || image || isDefaultSign || textWidth
-              ? ""
-              : "pointer-events-none"
-          } op-btn op-btn-primary shadow-lg`}
-          disabled={
-            (isTab === "draw" && isSignImg) ||
-            (isTab === "image" && image) ||
-            (isTab === "mysignature" && isDefaultSign) ||
-            (isTab === "type" && textWidth)
-              ? false
-              : image
-                ? false
-                : true
-          }
-        >
-          {t("save")}
-        </button>
-      </div>
-    );
-  };
-  //useEffect for set already draw or save signature url/text url of signature text type and draw type for initial type and signature type widgets
-  useEffect(() => {
-    if (currWidgetsDetails && canvasRef.current) {
-      const isWidgetType = currWidgetsDetails?.type;
-      const signatureType = currWidgetsDetails?.signatureType;
-      const url = currWidgetsDetails?.SignUrl;
-      //checking widget type and draw type signature url
-      if (isInitial) {
-        if (isWidgetType === "initials" && signatureType === "draw" && url) {
-          canvasRef.current.fromDataURL(url);
-        }
-      } else if (
-        isWidgetType === "signature" &&
-        signatureType === "draw" &&
-        url
-      ) {
-        canvasRef.current.fromDataURL(url);
-      }
-    }
-
-    const trimmedName = currentUserName && currentUserName.trim();
-    const firstCharacter = trimmedName?.charAt(0);
-    const userName = isInitial ? firstCharacter : currentUserName;
-    setSignValue(userName);
-    setFontSelect("Fasthand");
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isSignPad]);
-  useEffect(() => {
-    const loadFont = async () => {
-      try {
-        await document.fonts.load(`20px ${fontSelect}`);
-        const selectFontSTyle = fontOptions.find(
-          (font) => font.value === fontSelect
-        );
-        setFontSelect(selectFontSTyle?.value || fontOptions[0].value);
-      } catch (error) {
-        console.error("Error loading font:", error);
-      }
-    };
-
-    loadFont();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fontSelect]);
-
-  useEffect(() => {
-    // Load the default signature after the component mounts
-    if (canvasRef.current) {
-      canvasRef.current.fromDataURL(isSignImg);
-    }
-    if (isTab === "type") {
-      const trimmedName = signValue ? signValue.trim() : currentUserName.trim();
-      const firstCharacter = trimmedName.charAt(0);
-      const userName = isInitial ? firstCharacter : signValue;
-      setSignValue(userName);
-      convertToImg(fontSelect, userName);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isTab]);
-  //function for convert input text value in image
-  const convertToImg = async (fontStyle, text, color) => {
-    //get text content to convert in image
-    const textContent = text;
-    const fontfamily = fontStyle
-      ? fontStyle
-      : fontSelect
-        ? fontSelect
-        : "Fasthand";
-    const fontSizeValue = "40px";
-    //creating span for getting text content width
-    const span = document.createElement("span");
-    span.textContent = textContent;
-    span.style.font = `${fontSizeValue} ${fontfamily}`; // here put your text size and font family
-    span.style.color = color ? color : penColor;
-    span.style.display = "hidden";
-    document.body.appendChild(span); // Replace 'container' with the ID of the container element
-
-    //create canvas to render text in canvas and convert in image
-    const canvasElement = document.createElement("canvas");
-    // Draw the text content on the canvas
-    const ctx = canvasElement.getContext("2d");
-    const pixelRatio = window.devicePixelRatio || 1;
-    const addExtraWidth = isInitial ? 10 : 50;
-    const width = span.offsetWidth + addExtraWidth;
-    const height = span.offsetHeight;
-    setTextWidth(width);
-    setTextHeight(height);
-    const font = span.style["font"];
-    // Set the canvas dimensions to match the span
-    canvasElement.width = width * pixelRatio;
-    canvasElement.height = height * pixelRatio;
-
-    // You can customize text styles if needed
-    ctx.font = font;
-    ctx.fillStyle = color ? color : penColor; // Set the text color
-    ctx.textAlign = "center";
-    ctx.textBaseline = "middle";
-    ctx.scale(pixelRatio, pixelRatio);
-    // Draw the content of the span onto the canvas
-    ctx.fillText(span.textContent, width / 2, height / 2); // Adjust the x,y-coordinate as needed
-    //remove span tag
-    document.body.removeChild(span);
-    // Convert the canvas to image data
-    const dataUrl = canvasElement.toDataURL("image/png");
-    setSignature(dataUrl);
-  };
-
-  const PenColorComponent = (props) => {
-    return (
-      <div className="flex flex-row items-start">
-        {allColor.map((data, key) => {
-          return (
-            <i
-              style={{
-                margin: "5px",
-                color: data,
-                borderBottom:
-                  key === 0 && penColor === "blue"
-                    ? "2px solid blue"
-                    : key === 1 && penColor === "red"
-                      ? "2px solid red"
-                      : key === 2 && penColor === "black"
-                        ? "2px solid black"
-                        : "2px solid white"
-              }}
-              onClick={() => {
-                props?.convertToImg &&
-                  props?.convertToImg(fontSelect, signValue, data);
-                if (key === 0) {
-                  setPenColor("blue");
-                } else if (key === 1) {
-                  setPenColor("red");
-                } else if (key === 2) {
-                  setPenColor("black");
-                }
-              }}
-              key={key}
-              className="fa-light fa-pen-nib"
-              width={20}
-              height={20}
-            ></i>
-          );
-        })}
-      </div>
-    );
-  };
-  return (
-    <div>
-      {isSignPad && (
-        <div className="op-modal op-modal-open">
-          <div className="op-modal-box px-[13px] pt-2 pb-0">
-            <div className="flex justify-between text-base-content items-center">
-              <div className="text-[1.2rem]">
-                <div className="flex flex-row justify-between mt-[3px]">
-                  <div className="flex flex-row justify-between gap-[5px] md:gap-[8px] text-[11px] md:text-base">
-                    {isStamp ? (
-                      <span className="text-base-content font-bold text-lg">
-                        {widgetType === "image" ||
-                        currWidgetsDetails?.type === "image"
-                          ? t("upload-image")
-                          : t("upload-stamp-image")}
-                      </span>
-                    ) : (
-                      <>
-                        <div>
-                          <span
-                            onClick={() => {
-                              setIsDefaultSign(false);
-                              setIsImageSelect(false);
-                              setIsTab("draw");
-                              setImage();
-                              if (isSignImg) {
-                                setSignature(isSignImg);
-                              }
-                            }}
-                            className={`${
-                              isTab === "draw"
-                                ? "op-link-primary"
-                                : "no-underline"
-                            } op-link underline-offset-8 ml-[2px]`}
-                          >
-                            {t("draw")}
-                          </span>
-                        </div>
-                        <div>
-                          <span
-                            onClick={() => {
-                              setIsDefaultSign(false);
-                              setIsImageSelect(true);
-                              setIsTab("uploadImage");
-                              setSignatureType("");
-                            }}
-                            className={`${
-                              isTab === "uploadImage"
-                                ? "op-link-primary"
-                                : "no-underline"
-                            } op-link underline-offset-8 ml-[2px]`}
-                          >
-                            {t("upload-image")}
-                          </span>
-                        </div>
-                        <div>
-                          <span
-                            onClick={() => {
-                              setIsDefaultSign(false);
-                              setIsImageSelect(false);
-                              setIsTab("type");
-                              setSignatureType("");
-                              setImage();
-                            }}
-                            className={`${
-                              isTab === "type"
-                                ? "op-link-primary"
-                                : "no-underline"
-                            } op-link underline-offset-8 ml-[2px]`}
-                          >
-                            {t("type")}
-                          </span>
-                        </div>
-                        {!isInitial && defaultSign ? (
-                          <div>
-                            <span
-                              onClick={() => {
-                                setIsDefaultSign(true);
-                                setIsImageSelect(true);
-                                setIsTab("mysignature");
-                                setSignatureType("");
-                                setImage();
-                              }}
-                              className={`${
-                                isTab === "mysignature"
-                                  ? "op-link-primary"
-                                  : "no-underline"
-                              } op-link underline-offset-8 ml-[2px]`}
-                            >
-                              {t("my-signature")}
-                            </span>
-                          </div>
-                        ) : (
-                          isInitial &&
-                          myInitial && (
-                            <div>
-                              <span
-                                onClick={() => {
-                                  setIsDefaultSign(true);
-                                  setIsImageSelect(true);
-                                  setIsTab("mysignature");
-                                  setSignatureType("");
-                                  setImage();
-                                }}
-                                className={`${
-                                  isTab === "mysignature"
-                                    ? "op-link-primary"
-                                    : "no-underline"
-                                } op-link underline-offset-8 ml-[2px]`}
-                              >
-                                {t("my-initials")}
-                              </span>
-                            </div>
-                          )
-                        )}
-                      </>
-                    )}
-                  </div>
-                </div>
-              </div>
-              <div
-                className="text-[1.5rem] cursor-pointer"
-                onClick={() => {
-                  setPenColor("blue");
-                  setIsSignPad(false);
-                  setIsInitial(false);
-                  setIsImageSelect(false);
-                  setIsDefaultSign(false);
-                  setImage();
-                  setIsTab("draw");
-                  setSignatureType("draw");
-                  setSignValue("");
-                  setIsStamp(false);
-                }}
-              >
-                &times;
-              </div>
-            </div>
-            <div className="p-[20px] h-full">
-              {isDefaultSign ? (
-                <>
-                  <div className="flex justify-center">
-                    <div
-                      style={{
-                        border: "1.3px solid #007bff",
-                        borderRadius: "2px",
-                        display: "flex",
-                        flexDirection: "column",
-                        justifyContent: "center",
-                        alignItems: "center",
-                        marginBottom: 6,
-                        cursor: "pointer"
-                      }}
-                      className={
-                        isInitial ? "intialSignatureCanvas" : "signatureCanvas"
-                      }
-                    >
-                      <img
-                        alt="stamp img"
-                        className="w-full h-full object-contain bg-white"
-                        draggable="false"
-                        src={isInitial ? myInitial : defaultSign}
-                      />
-                    </div>
-                  </div>
-                  <div className="flex justify-end">
-                    <SaveBtn />
-                  </div>
-                </>
-              ) : isImageSelect || isStamp ? (
-                !image ? (
-                  <div className="flex justify-center">
-                    <div
-                      style={{
-                        border: "1.3px solid #007bff",
-                        borderRadius: "2px",
-                        display: "flex",
-                        flexDirection: "column",
-                        justifyContent: "center",
-                        alignItems: "center",
-                        marginBottom: 6,
-                        cursor: "pointer"
-                      }}
-                      className={
-                        isInitial ? "intialSignatureCanvas" : "signatureCanvas"
-                      }
-                      onClick={() => imageRef.current.click()}
-                    >
-                      <input
-                        type="file"
-                        onChange={onImageChange}
-                        className="filetype"
-                        accept="image/png,image/jpeg"
-                        ref={imageRef}
-                        hidden
-                      />
-                      <i className="fa-light fa-cloud-upload-alt uploadImgLogo"></i>
-                      <div className="text-[10px]">{t("upload")}</div>
-                    </div>
-                  </div>
-                ) : (
-                  <>
-                    <div className="flex justify-center">
-                      <div
-                        style={{
-                          border: "1.3px solid #007bff",
-                          borderRadius: "2px",
-                          marginBottom: 6,
-                          overflow: "hidden"
-                        }}
-                        className={
-                          isInitial
-                            ? "intialSignatureCanvas"
-                            : "signatureCanvas"
-                        }
-                      >
-                        <img
-                          alt="print img"
-                          ref={imageRef}
-                          src={image.src}
-                          draggable="false"
-                          className=" object-contain h-full w-full"
-                        />
-                      </div>
-                    </div>
-                    <div className="flex justify-end">
-                      <SaveBtn />
-                    </div>
-                  </>
-                )
-              ) : isTab === "type" ? (
-                <div>
-                  <div className="flex justify-between items-center">
-                    <span className="mr-[5px] text-[12px]">
-                      {isInitial ? t("initial-teb") : t("signature-tab")}:
-                    </span>
-                    <input
-                      maxLength={isInitial ? 3 : 30}
-                      style={{ fontFamily: fontSelect, color: penColor }}
-                      type="text"
-                      className="ml-1 op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-[20px]"
-                      placeholder="Your signature"
-                      value={signValue}
-                      onChange={(e) => {
-                        setSignValue(e.target.value);
-                        convertToImg(fontSelect, e.target.value);
-                      }}
-                    />
-                  </div>
-                  <div className="border-[1px] border-[#d6d3d3] mt-[10px] ml-[5px]">
-                    {fontOptions.map((font, ind) => {
-                      return (
-                        <div
-                          key={ind}
-                          style={{
-                            cursor: "pointer",
-                            fontFamily: font.value,
-                            backgroundColor:
-                              fontSelect === font.value && "rgb(206 225 247)"
-                          }}
-                          onClick={() => {
-                            setFontSelect(font.value);
-                            convertToImg(font.value, signValue);
-                          }}
-                        >
-                          <div
-                            style={{
-                              padding: "5px 10px 5px 10px",
-                              fontSize: "20px",
-                              color: penColor
-                            }}
-                          >
-                            {signValue ? signValue : "Your signature"}
-                          </div>
-                        </div>
-                      );
-                    })}
-                  </div>
-
-                  <div className="flex flex-row justify-between mt-[10px]">
-                    <PenColorComponent convertToImg={convertToImg} />
-                    <SaveBtn />
-                  </div>
-                </div>
-              ) : (
-                <>
-                  <div className="flex justify-center">
-                    <SignatureCanvas
-                      ref={canvasRef}
-                      penColor={penColor}
-                      canvasProps={{
-                        className: isInitial
-                          ? "intialSignatureCanvas"
-                          : "signatureCanvas",
-                        style: {
-                          border: "1.6px solid #007bff",
-                          borderRadius: "2px"
-                        }
-                      }}
-                      backgroundColor="rgb(255, 255, 255)"
-                      onEnd={() =>
-                        handleSignatureChange(canvasRef.current?.toDataURL())
-                      }
-                      dotSize={1}
-                    />
-                  </div>
-                  <div className="flex flex-row justify-between mt-[10px]">
-                    <PenColorComponent />
-                    <SaveBtn />
-                  </div>
-                </>
-              )}
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default SignPad;
@@ -0,0 +1,854 @@
+import React, { useRef, useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import SignatureCanvas from "react-signature-canvas";
+import Parse from "parse";
+import {
+  generateTitleFromFilename,
+  getBase64FromUrl,
+  getSecureUrl
+} from "../../constant/Utils";
+import sanitizeFileName from "../../primitives/sanitizeFileName";
+import { SaveFileSize } from "../../constant/saveFileSize";
+import Loader from "../../primitives/Loader";
+
+function SignPad(props) {
+  const { t } = useTranslation();
+  const [penColor, setPenColor] = useState("blue");
+  const allColor = ["blue", "red", "black"];
+  const canvasRef = useRef(null);
+  const [isDefaultSign, setIsDefaultSign] = useState(false);
+  const [isTab, setIsTab] = useState("");
+  const [isSignImg, setIsSignImg] = useState("");
+  const [textWidth, setTextWidth] = useState(0);
+  const [textHeight, setTextHeight] = useState(0);
+  const [signatureType, setSignatureType] = useState("");
+  const [isSignTypes, setIsSignTypes] = useState(true);
+  const [typedSignature, setTypedSignature] = useState("");
+  const fontOptions = [
+    { value: "Fasthand" },
+    { value: "Dancing Script" },
+    { value: "Cedarville Cursive" },
+    { value: "Delicious Handrawn" }
+    // Add more font options as needed
+  ];
+  const [fontSelect, setFontSelect] = useState(fontOptions[0].value);
+  const [isSavedSign, setIsSavedSign] = useState(false);
+  const [isLoader, setIsLoader] = useState(false);
+  const accesstoken = localStorage.getItem("accesstoken") || "";
+  const senderUser = localStorage.getItem(
+    `Parse/${localStorage.getItem("parseAppId")}/currentUser`
+  );
+  const jsonSender = senderUser && JSON.parse(senderUser);
+  const currentUserName = jsonSender && jsonSender?.name;
+  useEffect(() => {
+    handleTab();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.signatureTypes]);
+  function handleTab() {
+    const signtypes = props?.signatureTypes || [];
+    const defaultIndex = signtypes?.findIndex(
+      (x) =>
+        x.name === "default" &&
+        x.enabled === true &&
+        props.defaultSign &&
+        (props?.currWidgetsDetails?.type || props.widgetType) !== "image" &&
+        (props?.currWidgetsDetails?.type || props.widgetType) !== "stamp"
+    );
+    const getIndex =
+      defaultIndex !== -1 // Check if the default index exists
+        ? defaultIndex // If found, use it
+        : signtypes?.findIndex((x) => x.enabled === true);
+
+    if (getIndex !== -1) {
+      setIsSignTypes(true);
+      const tab = props?.signatureTypes[getIndex].name;
+      if (tab === "draw") {
+        setIsTab("draw");
+        setSignatureType("draw");
+      } else if (tab === "upload") {
+        props?.setIsImageSelect(true);
+        setIsTab("uploadImage");
+      } else if (tab === "typed") {
+        setIsTab("type");
+      } else if (tab === "default") {
+        if (
+          (props?.isInitial && props?.myInitial) ||
+          (!props?.isInitial && props?.defaultSign)
+        ) {
+          setIsDefaultSign(true);
+          setIsTab("mysignature");
+        } else {
+          setIsTab("draw");
+        }
+      } else {
+        setIsTab(true);
+      }
+    } else {
+      setIsSignTypes(false);
+    }
+  }
+  function isTabEnabled(tabName) {
+    const isEnabled = props?.signatureTypes.find(
+      (x) => x.name === tabName
+    )?.enabled;
+    return isEnabled;
+  }
+
+  //function for clear signature image
+  const handleClear = () => {
+    if (isTab === "draw") {
+      if (canvasRef.current) {
+        canvasRef.current.clear();
+      } else if (props?.isStamp) {
+        props?.setImage("");
+      }
+      setIsSignImg("");
+    } else if (isTab === "uploadImage") {
+      props?.setImage("");
+    }
+  };
+  //function for set signature url
+  const handleSignatureChange = (data) => {
+    props?.setSignature(data);
+    setIsSignImg(data);
+  };
+  function base64StringtoFile(base64String, filename) {
+    let arr = base64String.split(","),
+      // type of uploaded image
+      mime = arr[0].match(/:(.*?);/)[1],
+      // decode base64
+      bstr = atob(arr[1]),
+      n = bstr.length,
+      u8arr = new Uint8Array(n);
+    while (n--) {
+      u8arr[n] = bstr.charCodeAt(n);
+    }
+    const ext = mime.split("/").pop();
+    const name = `${filename}.${ext}`;
+    return new File([u8arr], name, { type: mime });
+  }
+
+  const uploadFile = async (file) => {
+    try {
+      const parseFile = new Parse.File(file.name, file);
+      const response = await parseFile.save();
+      if (response?.url()) {
+        const fileRes = await getSecureUrl(response.url());
+        if (fileRes.url) {
+          const tenantId = localStorage.getItem("TenantId");
+          SaveFileSize(file.size, fileRes.url, tenantId);
+          return fileRes?.url;
+        } else {
+          alert(`${t("something-went-wrong-mssg")}`);
+          return false;
+        }
+      } else {
+        alert(`${t("something-went-wrong-mssg")}`);
+        return false;
+      }
+    } catch (err) {
+      console.log("sign upload err", err);
+      alert(`${err.message}`);
+      return false;
+    }
+  };
+
+  // `handlesavesign` is used to save signaute, initials, stamp as a default
+  const handleSaveSign = async () => {
+    if (isSignImg || props?.image?.src) {
+      setIsLoader(true);
+      try {
+        const User = Parse?.User?.current();
+        const sanitizename = generateTitleFromFilename(User?.get("name"));
+        const replaceSpace = sanitizeFileName(sanitizename);
+        let file;
+        if (isSignImg) {
+          file = base64StringtoFile(isSignImg, `${replaceSpace}__sign`);
+        } else {
+          file = base64StringtoFile(props?.image?.src, `${replaceSpace}__sign`);
+        }
+        const imageUrl = await uploadFile(file);
+        const userId = {
+          __type: "Pointer",
+          className: "_User",
+          objectId: User?.id
+        };
+        if (imageUrl) {
+          //  below code is used to save or update default signaute, initials, stamp
+          try {
+            const signCls = new Parse.Object("contracts_Signature");
+            if (props?.saveSignCheckbox?.signId) {
+              signCls.id = props.saveSignCheckbox.signId;
+            }
+            if (
+              props.currWidgetsDetails?.type === "initials" ||
+              props?.widgetType === "initials"
+            ) {
+              signCls.set("Initials", imageUrl);
+            } else if (
+              props.currWidgetsDetails?.type === "signature" ||
+              props?.widgetType === "signature"
+            ) {
+              signCls.set("ImageURL", imageUrl);
+            }
+            signCls.set("UserId", userId);
+            const signRes = await signCls.save();
+            if (signRes) {
+              props.saveSignCheckbox.signId;
+              props.setSaveSignCheckbox((prev) => ({
+                ...prev,
+                signId: signRes?.id
+              }));
+              const _signRes = JSON.parse(JSON.stringify(signRes));
+              if (
+                props.currWidgetsDetails?.type === "signature" ||
+                props?.widgetType === "signature"
+              ) {
+                const defaultSign = await getBase64FromUrl(
+                  _signRes?.ImageURL,
+                  true
+                );
+                props.setDefaultSignImg(defaultSign);
+              } else if (
+                props.currWidgetsDetails?.type === "initials" ||
+                props?.widgetType === "initials"
+              ) {
+                const defaultInitials = await getBase64FromUrl(
+                  _signRes?.Initials,
+                  true
+                );
+                props.setMyInitial(defaultInitials);
+              }
+              alert(t("saved-successfully"));
+            }
+            return signRes;
+          } catch (err) {
+            console.log(err);
+            alert(`${err.message}`);
+          } finally {
+            setIsLoader(false);
+          }
+        }
+      } catch (err) {
+        console.log("Err while saving signature", err);
+      }
+    }
+  };
+
+  const handleSaveBtn = async () => {
+    if (accesstoken && isSavedSign) {
+      await handleSaveSign();
+      resetToDefault();
+    } else {
+      resetToDefault();
+    }
+  };
+  const resetToDefault = () => {
+    props?.setCurrWidgetsDetails({});
+    if (!props?.image) {
+      if (isTab === "mysignature") {
+        setIsSignImg("");
+        if (props?.isInitial) {
+          props?.onSaveSign(signatureType, "initials");
+        } else {
+          props?.onSaveSign(null, "default");
+        }
+      } else {
+        if (isTab === "type") {
+          setIsSignImg("");
+          props?.onSaveSign(
+            null,
+            false,
+            !props?.isInitial && textWidth > 150 ? 150 : textWidth,
+            !props?.isInitial && textHeight > 35 ? 35 : textHeight,
+            typedSignature
+          );
+        } else {
+          setIsSignImg("");
+          canvasRef.current.clear();
+          props?.onSaveSign(signatureType);
+        }
+      }
+      setPenColor("blue");
+    } else {
+      setIsSignImg("");
+      props?.onSaveImage(signatureType);
+    }
+    props?.setIsSignPad(false);
+    props?.setIsInitial && props?.setIsInitial(false);
+    props?.setIsImageSelect(false);
+    setIsDefaultSign(false);
+    props?.setImage();
+    handleTab();
+    props?.setIsStamp(false);
+  };
+  //save button component
+  const SaveBtn = () => {
+    return (
+      <div>
+        {(isTab === "draw" || isTab === "uploadImage") && (
+          <button
+            type="button"
+            className="op-btn op-btn-ghost mr-1 mt-[2px]"
+            onClick={() => handleClear()}
+          >
+            {t("clear")}
+          </button>
+        )}
+        <button
+          onClick={() => handleSaveBtn()}
+          type="button"
+          className={`${
+            isSignImg ||
+            props?.image ||
+            isDefaultSign ||
+            textWidth ||
+            props.isAutoSign
+              ? ""
+              : "pointer-events-none"
+          } op-btn op-btn-primary shadow-lg`}
+          disabled={
+            (isTab === "draw" && isSignImg) ||
+            (isTab === "image" && props?.image) ||
+            (isTab === "mysignature" && isDefaultSign) ||
+            (isTab === "type" && typedSignature) ||
+            props.isAutoSign
+              ? false
+              : props?.image
+                ? false
+                : true
+          }
+        >
+          {t("save")}
+        </button>
+      </div>
+    );
+  };
+  const autoSignAll = () => {
+    return (
+      <label className="cursor-pointer flex items-center mb-[6px] text-center text-[11px] md:text-base">
+        <input
+          className="mr-2 md:mr-3 op-checkbox op-checkbox-xs md:op-checkbox-sm"
+          type="checkbox"
+          value={props.isAutoSign}
+          onChange={(e) => {
+            props.setIsAutoSign(e.target.checked);
+          }}
+        />
+        {t("auto-sign-mssg")}
+      </label>
+    );
+  };
+  //useEffect for set already draw or save signature url/text url of signature text type and draw type for initial type and signature type widgets
+  useEffect(() => {
+    if (props?.currWidgetsDetails && canvasRef.current && props.isSignPad) {
+      const isWidgetType = props?.currWidgetsDetails?.type;
+      const signatureType = props?.currWidgetsDetails?.signatureType;
+      const url = props?.currWidgetsDetails?.SignUrl;
+      //checking widget type and draw type signature url
+      if (props?.isInitial) {
+        if (isWidgetType === "initials" && signatureType === "draw" && url) {
+          canvasRef.current.fromDataURL(url);
+        }
+      } else if (
+        isWidgetType === "signature" &&
+        signatureType === "draw" &&
+        url
+      ) {
+        canvasRef.current.fromDataURL(url);
+      }
+
+      const trimmedName = currentUserName && currentUserName?.trim();
+      const firstCharacter = trimmedName?.charAt(0);
+      const userName = props?.isInitial ? firstCharacter : currentUserName;
+      const signatureValue = props?.currWidgetsDetails?.typeSignature;
+      setTypedSignature(signatureValue || userName || "");
+      setFontSelect("Fasthand");
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.isSignPad]);
+  useEffect(() => {
+    const loadFont = async () => {
+      try {
+        await document.fonts.load(`20px ${fontSelect}`);
+        const selectFontSTyle = fontOptions.find(
+          (font) => font.value === fontSelect
+        );
+        setFontSelect(selectFontSTyle?.value || fontOptions[0].value);
+      } catch (error) {
+        console.error("Error loading font:", error);
+      }
+    };
+
+    loadFont();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fontSelect]);
+  useEffect(() => {
+    // Load the default signature after the component mounts
+    if (canvasRef.current) {
+      canvasRef.current.fromDataURL(isSignImg);
+    }
+    if (isTab === "type") {
+      const trimmedName = typedSignature
+        ? typedSignature?.trim()
+        : currentUserName?.trim();
+      const firstCharacter = trimmedName?.charAt(0);
+      const userName = props?.isInitial ? firstCharacter : typedSignature;
+      const signatureValue = props?.currWidgetsDetails?.typeSignature;
+      setTypedSignature(signatureValue || userName || "");
+      convertToImg(fontSelect, userName);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isTab]);
+  //function for convert input text value in image
+  const convertToImg = async (fontStyle, text, color) => {
+    //get text content to convert in image
+    const textContent = text;
+    const fontfamily = fontStyle
+      ? fontStyle
+      : fontSelect
+        ? fontSelect
+        : "Fasthand";
+    const fontSizeValue = "40px";
+    //creating span for getting text content width
+    const span = document.createElement("span");
+    span.textContent = textContent;
+    span.style.font = `${fontSizeValue} ${fontfamily}`; // here put your text size and font family
+    span.style.color = color ? color : penColor;
+    span.style.display = "hidden";
+    document.body.appendChild(span); // Replace 'container' with the ID of the container element
+
+    //create canvas to render text in canvas and convert in image
+    const canvasElement = document.createElement("canvas");
+    // Draw the text content on the canvas
+    const ctx = canvasElement.getContext("2d");
+    const pixelRatio = window.devicePixelRatio || 1;
+    const addExtraWidth = props?.isInitial ? 10 : 50;
+    const width = span.offsetWidth + addExtraWidth;
+    const height = span.offsetHeight;
+    setTextWidth(width);
+    setTextHeight(height);
+    const font = span.style["font"];
+    // Set the canvas dimensions to match the span
+    canvasElement.width = width * pixelRatio;
+    canvasElement.height = height * pixelRatio;
+
+    // You can customize text styles if needed
+    ctx.font = font;
+    ctx.fillStyle = color ? color : penColor; // Set the text color
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.scale(pixelRatio, pixelRatio);
+    // Draw the content of the span onto the canvas
+    ctx.fillText(span.textContent, width / 2, height / 2); // Adjust the x,y-coordinate as needed
+    //remove span tag
+    document.body.removeChild(span);
+    // Convert the canvas to image data
+    const dataUrl = canvasElement.toDataURL("image/png");
+    props?.setSignature(dataUrl);
+  };
+  const PenColorComponent = (props) => {
+    return (
+      <div className="flex flex-row items-center m-[5px] gap-2">
+        {allColor.map((data, key) => {
+          return (
+            <i
+              key={key}
+              onClick={() => {
+                props?.convertToImg &&
+                  props?.convertToImg(fontSelect, typedSignature, data);
+                setPenColor(allColor[key]);
+              }}
+              className={`border-b-[2px] ${key === 0 && penColor === "blue" ? "border-blue-600" : key === 1 && penColor === "red" ? "border-red-500" : key === 2 && penColor === "black" ? "border-black" : "border-white"} text-[${data}] text-[16px] fa-light fa-pen-nib`}
+            ></i>
+          );
+        })}
+      </div>
+    );
+  };
+
+  // `handleCancelBtn` function trigger when user click on cross button
+  const handleCancelBtn = () => {
+    setPenColor("blue");
+    props?.setIsSignPad(false);
+    props?.setIsInitial && props?.setIsInitial(false);
+    props?.setIsImageSelect(false);
+    setIsDefaultSign(false);
+    props?.setImage();
+    handleTab();
+    props?.setIsStamp(false);
+  };
+
+  const savesigncheckbox = (
+    <label className="cursor-pointer flex items-center mb-0 text-center text-[11px] md:text-base">
+      <input
+        className="mr-2 md:mr-3 op-checkbox op-checkbox-xs md:op-checkbox-sm"
+        type="checkbox"
+        checked={isSavedSign}
+        onChange={(e) => setIsSavedSign(e.target.checked)}
+      />
+      Save {props?.currWidgetsDetails?.type || props?.widgetType}
+    </label>
+  );
+  return (
+    <div>
+      {props?.isSignPad && (
+        <div className="op-modal op-modal-open">
+          <div className="op-modal-box px-[13px] pt-2 pb-0">
+            {isLoader && (
+              <div className="absolute w-full h-full inset-0 flex justify-center items-center bg-base-content/30 z-50">
+                <Loader />
+              </div>
+            )}
+            {isSignTypes ? (
+              <>
+                <div className="flex justify-between text-base-content items-center">
+                  <div className="text-[1.2rem]">
+                    <div className="flex flex-row justify-between mt-[3px]">
+                      <div className="flex flex-row justify-between gap-[5px] md:gap-[8px] text-[11px] md:text-base">
+                        {props?.isStamp ? (
+                          <span className="text-base-content font-bold text-lg">
+                            {props?.widgetType === "image" ||
+                            props?.currWidgetsDetails?.type === "image"
+                              ? t("upload-image")
+                              : t("upload-stamp-image")}
+                          </span>
+                        ) : (
+                          <>
+                            {!props?.isInitial &&
+                            props?.defaultSign &&
+                            isTabEnabled("default") ? (
+                              <div>
+                                <span
+                                  onClick={() => {
+                                    setIsDefaultSign(true);
+                                    props?.setIsImageSelect(true);
+                                    setIsTab("mysignature");
+                                    setSignatureType("");
+                                    props?.setImage();
+                                  }}
+                                  className={`${
+                                    isTab === "mysignature"
+                                      ? "op-link-primary"
+                                      : "no-underline"
+                                  } op-link underline-offset-8 ml-[2px]`}
+                                >
+                                  {t("my-signature")}
+                                </span>
+                              </div>
+                            ) : (
+                              props?.isInitial &&
+                              props?.myInitial &&
+                              isTabEnabled("default") && (
+                                <div>
+                                  <span
+                                    onClick={() => {
+                                      setIsDefaultSign(true);
+                                      props?.setIsImageSelect(true);
+                                      setIsTab("mysignature");
+                                      setSignatureType("");
+                                      props?.setImage();
+                                    }}
+                                    className={`${
+                                      isTab === "mysignature"
+                                        ? "op-link-primary"
+                                        : "no-underline"
+                                    } op-link underline-offset-8 ml-[2px]`}
+                                  >
+                                    {t("my-initials")}
+                                  </span>
+                                </div>
+                              )
+                            )}
+                            {isTabEnabled("draw") && (
+                              <div>
+                                <span
+                                  onClick={() => {
+                                    setIsDefaultSign(false);
+                                    props?.setIsImageSelect(false);
+                                    setIsTab("draw");
+                                    props?.setImage();
+                                    if (isSignImg) {
+                                      props?.setSignature(isSignImg);
+                                    }
+                                  }}
+                                  className={`${
+                                    isTab === "draw"
+                                      ? "op-link-primary"
+                                      : "no-underline"
+                                  } op-link underline-offset-8 ml-[2px]`}
+                                >
+                                  {t("draw")}
+                                </span>
+                              </div>
+                            )}
+                            {isTabEnabled("upload") && (
+                              <div>
+                                <span
+                                  onClick={() => {
+                                    setIsDefaultSign(false);
+                                    props?.setIsImageSelect(true);
+                                    setIsTab("uploadImage");
+                                    setSignatureType("");
+                                  }}
+                                  className={`${
+                                    isTab === "uploadImage"
+                                      ? "op-link-primary"
+                                      : "no-underline"
+                                  } op-link underline-offset-8 ml-[2px]`}
+                                >
+                                  {t("upload-image")}
+                                </span>
+                              </div>
+                            )}
+                            {isTabEnabled("typed") && (
+                              <div>
+                                <span
+                                  onClick={() => {
+                                    setIsDefaultSign(false);
+                                    props?.setIsImageSelect(false);
+                                    setIsTab("type");
+                                    setSignatureType("");
+                                    props?.setImage();
+                                  }}
+                                  className={`${
+                                    isTab === "type"
+                                      ? "op-link-primary"
+                                      : "no-underline"
+                                  } op-link underline-offset-8 ml-[2px]`}
+                                >
+                                  {t("type")}
+                                </span>
+                              </div>
+                            )}
+                          </>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    className="text-[1.5rem] cursor-pointer"
+                    onClick={handleCancelBtn}
+                  >
+                    &times;
+                  </div>
+                </div>
+                <div className="p-[20px] h-full">
+                  {isDefaultSign ? (
+                    <>
+                      {!props?.isInitial &&
+                        props?.defaultSign &&
+                        isTabEnabled("default") && (
+                          <>
+                            <div className="flex justify-center">
+                              <div
+                                className={`${props?.isInitial ? "intialSignatureCanvas" : "signatureCanvas"} bg-white border-[1.3px] border-[#007bff] flex flex-col justify-center items-center mb-[6px] cursor-pointer`}
+                              >
+                                <img
+                                  alt="stamp img"
+                                  className="w-full h-full object-contain bg-white"
+                                  draggable="false"
+                                  src={
+                                    props?.isInitial
+                                      ? props?.myInitial
+                                      : props?.defaultSign
+                                  }
+                                />
+                              </div>
+                            </div>
+                            {props.setIsAutoSign && autoSignAll()}
+                            <div className="flex justify-end">
+                              <SaveBtn />
+                            </div>
+                          </>
+                        )}
+
+                      {props?.isInitial &&
+                        props?.myInitial &&
+                        isTabEnabled("default") && (
+                          <>
+                            <div className="flex justify-center">
+                              <div
+                                className={`${props?.isInitial ? "intialSignatureCanvas" : "signatureCanvas"} bg-white border-[1.3px] border-[#007bff] flex flex-col justify-center items-center mb-[6px] cursor-pointer`}
+                              >
+                                <img
+                                  alt="stamp img"
+                                  className="w-full h-full object-contain bg-white"
+                                  draggable="false"
+                                  src={
+                                    props?.isInitial
+                                      ? props?.myInitial
+                                      : props?.defaultSign
+                                  }
+                                />
+                              </div>
+                            </div>
+                            {props.setIsAutoSign && autoSignAll()}
+                            <div className="flex justify-end">
+                              <SaveBtn />
+                            </div>
+                          </>
+                        )}
+                    </>
+                  ) : props?.isImageSelect || props?.isStamp ? (
+                    !props?.image ? (
+                      <div className="flex justify-center">
+                        <div
+                          className={`${props?.isInitial ? "intialSignatureCanvas" : "signatureCanvas"} bg-white border-[1.3px] border-[#007bff] flex flex-col justify-center items-center mb-[6px] cursor-pointer`}
+                          onClick={() => props?.imageRef.current.click()}
+                        >
+                          <input
+                            type="file"
+                            onChange={props?.onImageChange}
+                            className="filetype"
+                            accept="image/png,image/jpeg"
+                            ref={props?.imageRef}
+                            hidden
+                          />
+                          <i className="fa-light fa-cloud-upload-alt uploadImgLogo"></i>
+                          <div className="text-[10px]">{t("upload")}</div>
+                        </div>
+                      </div>
+                    ) : (
+                      <>
+                        <div className="flex justify-center">
+                          <div
+                            className={`${props?.isInitial ? "intialSignatureCanvas" : "signatureCanvas"} bg-white border-[1.3px] border-[#007bff] mb-[6px] overflow-hidden`}
+                          >
+                            <img
+                              alt="print img"
+                              ref={props?.imageRef}
+                              src={props?.image.src}
+                              draggable="false"
+                              className="object-contain h-full w-full"
+                            />
+                          </div>
+                        </div>
+                        {props.setIsAutoSign && autoSignAll()}
+                        <div className="flex justify-end">
+                          <SaveBtn />
+                        </div>
+                      </>
+                    )
+                  ) : isTab === "type" ? (
+                    <div>
+                      <div className="flex justify-between items-center">
+                        <span className="mr-[5px] text-[12px]">
+                          {props?.isInitial
+                            ? t("initial-teb")
+                            : t("signature-tab")}
+                          :
+                        </span>
+                        <input
+                          maxLength={props?.isInitial ? 3 : 30}
+                          style={{ fontFamily: fontSelect, color: penColor }}
+                          type="text"
+                          className="ml-1 op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-[20px]"
+                          placeholder={
+                            props?.isInitial
+                              ? t("initial-type")
+                              : t("signature-type")
+                          }
+                          value={typedSignature}
+                          onChange={(e) => {
+                            setTypedSignature(e.target.value);
+                            convertToImg(fontSelect, e.target.value);
+                          }}
+                        />
+                      </div>
+                      <div className="border-[1px] border-[#d6d3d3] mt-[10px] ml-[5px]">
+                        {fontOptions.map((font, ind) => {
+                          return (
+                            <div
+                              key={ind}
+                              style={{
+                                cursor: "pointer",
+                                fontFamily: font.value,
+                                backgroundColor:
+                                  fontSelect === font.value &&
+                                  "rgb(206 225 247)"
+                              }}
+                              onClick={() => {
+                                setFontSelect(font.value);
+                                convertToImg(font.value, typedSignature);
+                              }}
+                            >
+                              <div
+                                className="py-[5px] px-[10px] text-[20px]"
+                                style={{ color: penColor }}
+                              >
+                                {typedSignature
+                                  ? typedSignature
+                                  : "Your signature"}
+                              </div>
+                            </div>
+                          );
+                        })}
+                      </div>
+
+                      <div className="flex flex-col justify-between mt-[10px]">
+                        {props.setIsAutoSign && autoSignAll()}
+                        <div className="flex flex-row justify-between mt-[10px]">
+                          <PenColorComponent convertToImg={convertToImg} />
+                          <SaveBtn />
+                        </div>
+                      </div>
+                    </div>
+                  ) : (
+                    <>
+                      <div className="flex justify-center">
+                        <SignatureCanvas
+                          ref={canvasRef}
+                          penColor={penColor}
+                          canvasProps={{
+                            className: `${props?.isInitial ? "intialSignatureCanvas" : "signatureCanvas"} border-[1.3px] border-[#007bff]`
+                          }}
+                          onEnd={() =>
+                            handleSignatureChange(
+                              canvasRef.current?.toDataURL()
+                            )
+                          }
+                          dotSize={1}
+                        />
+                      </div>
+                      <div className="flex flex-col justify-between mt-[10px]">
+                        {props.setIsAutoSign && autoSignAll()}
+                        {accesstoken &&
+                          props?.saveSignCheckbox?.isVisible &&
+                          savesigncheckbox}
+                        <div className="flex flex-row justify-between mt-[10px]">
+                          <PenColorComponent />
+                          <SaveBtn />
+                        </div>
+                      </div>
+                    </>
+                  )}
+                </div>
+              </>
+            ) : (
+              <div>
+                <div className="relative flex flex-row items-center justify-between">
+                  <div className="text-base-content font-bold text-lg">
+                    Signature
+                  </div>
+                  <div
+                    className="text-[1.5rem] cursor-pointer"
+                    onClick={handleCancelBtn}
+                  >
+                    &times;
+                  </div>
+                </div>
+                <div className="mx-3 mb-6 mt-3">
+                  <p>{t("at-least-one-signature-type")}</p>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default SignPad;
@@ -1,31 +1,41 @@
 import React from "react";
 import "../../styles/signature.css";
 import { useTranslation } from "react-i18next";
-function Signedby({ pdfDetails }) {
+function Signedby(props) {
  const { t } = useTranslation();
-  const getFirstLetter = (name) => {
+  const getFirstLetter = (pdfData) => {
+    const name = props.isSelfSign
+      ? (pdfData?.Signers && pdfData?.Signers[0]?.Name) || "User"
+      : pdfData.ExtUserPtr?.Name;
    const firstLetter = name.charAt(0);
    return firstLetter;
  };
-
  return (
    <div className="hidden md:block w-full h-full bg-base-100">
      <div className="mx-2 pr-2 pt-2 pb-1 text-[15px] text-base-content font-semibold border-b-[1px] border-base-300">
-        {t("signed-by")}
+        {props.isSelfSign ? t("user") : t("signed-by")}
      </div>
      <div className="mt-[2px] bg-base-100">
        <div className="bg-[#93a3db] rounded-xl mx-1 flex flex-row items-center py-[10px]">
          <div className="bg-[#576081] flex w-[30px] h-[30px] rounded-full justify-center items-center mx-1">
            <span className="text-[12px] text-center font-bold text-white uppercase">
-              {getFirstLetter(pdfDetails.ExtUserPtr.Name)}
+              {getFirstLetter(props.pdfDetails)}
            </span>
          </div>
          <div className="flex flex-col">
            <span className="text-[12px] font-bold text-[#424242] w-[100px] whitespace-nowrap overflow-hidden text-ellipsis">
-              {pdfDetails.ExtUserPtr.Name}
+              {props.isSelfSign
+                ? (props.pdfDetails?.Signers &&
+                    props.pdfDetails?.Signers[0]?.Name) ||
+                  "User"
+                : props.pdfDetails.ExtUserPtr.Name || "User"}
            </span>
            <span className="text-[10px] font-medium text-[#424242] w-[100px] whitespace-nowrap overflow-hidden text-ellipsis">
-              {pdfDetails.ExtUserPtr.Email}
+              {props.isSelfSign
+                ? (props.pdfDetails?.Signers &&
+                    props.pdfDetails?.Signers[0]?.Email) ||
+                  ""
+                : props.pdfDetails.ExtUserPtr.Email || ""}
            </span>
          </div>
        </div>
@@ -19,7 +19,7 @@ function SignerListPlace(props) {
                  </sup>
                </a>
                <Tooltip id="my-tooltip" className="z-[100]">
-                  <div className="max-w-[450px] 2xl:max-w-[500px] 2xl:text-[20px] p-[1px]">
+                  <div className="max-w-[450px] 2xl:max-w-[500px] p-[1px]">
                    <p className="font-bold pb-[1px]">{t("role-help.p1")}</p>
                    <p>{t("role-help.p2")} </p>
                    <p className="font-bold">{t("role-help.p3")}</p>
@@ -1,79 +0,0 @@
-import React from "react";
-import ModalUi from "../../primitives/ModalUi";
-import { fontColorArr, fontsizeArr } from "../../constant/Utils";
-import { useTranslation } from "react-i18next";
-
-function TextFontSetting(props) {
-  const { t } = useTranslation();
-  return (
-    <ModalUi
-      headerColor={"#dc3545"}
-      isOpen={props.isTextSetting}
-      reduceWidth={"max-w-[350px]"}
-      title={t("text-field")}
-      handleClose={() => props.setIsTextSetting(false)}
-    >
-      <div className="h-full p-[20px]">
-        <div className="flex items-center">
-          <span>{t("font-size")} :</span>
-          <select
-            className="ml-[7px] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
-            value={
-              props.fontSize ||
-              props.currWidgetsDetails?.options?.fontSize ||
-              "12"
-            }
-            onChange={(e) => props.setFontSize(e.target.value)}
-          >
-            {fontsizeArr.map((size, ind) => {
-              return (
-                <option className="text-[13px]" value={size} key={ind}>
-                  {size}
-                </option>
-              );
-            })}
-          </select>
-          <div className="flex flex-row gap-1 items-center ml-4">
-            <span>{t("color")}: </span>
-            <select
-              value={
-                props.fontColor ||
-                props.currWidgetsDetails?.options?.fontColor ||
-                "black"
-              }
-              onChange={(e) => props.setFontColor(e.target.value)}
-              className="ml-[7px] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
-            >
-              {fontColorArr.map((color, ind) => {
-                return (
-                  <option value={color} key={ind}>
-                    {t(`color-type.${color}`)}
-                  </option>
-                );
-              })}
-            </select>
-            <span
-              style={{
-                background:
-                  props.fontColor ||
-                  props.currWidgetsDetails?.options?.fontColor
-              }}
-              className="w-5 h-[19px] ml-1"
-            ></span>
-          </div>
-        </div>
-
-        <div className="h-[1px] bg-[#9f9f9f] w-full mt-[15px] mb-2"></div>
-        <button
-          onClick={() => props.handleSaveFontSize()}
-          type="button"
-          className="op-btn op-btn-primary mt-2"
-        >
-          {t("save")}
-        </button>
-      </div>
-    </ModalUi>
-  );
-}
-
-export default TextFontSetting;
@@ -0,0 +1,81 @@
+import React from "react";
+import ModalUi from "../../primitives/ModalUi";
+import { fontColorArr, fontsizeArr } from "../../constant/Utils";
+import { useTranslation } from "react-i18next";
+
+function TextFontSetting(props) {
+  const { t } = useTranslation();
+  return (
+    <ModalUi
+      headerColor={"#dc3545"}
+      isOpen={props.isTextSetting}
+      reduceWidth={"max-w-[350px]"}
+      title={t("text-field")}
+      handleClose={() => props.setIsTextSetting(false)}
+    >
+      <div className="h-full p-[20px]">
+        <div className="flex flex-col md:flex-row md:items-center gap-3">
+          {/* Font Size Selector */}
+          <div className="flex items-center gap-2">
+            <span className="whitespace-nowrap">{t("font-size")}:</span>
+            <select
+              className="ml-[7px] w-[60%] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
+              value={
+                props.fontSize ||
+                props.currWidgetsDetails?.options?.fontSize ||
+                12
+              }
+              onChange={(e) => props.setFontSize(parseInt(e.target.value))}
+            >
+              {fontsizeArr.map((size, ind) => (
+                <option key={ind} className="text-[13px]" value={size}>
+                  {size}
+                </option>
+              ))}
+            </select>
+          </div>
+          {/* Font Color Selector */}
+          <div className="flex items-center">
+            <span className="whitespace-nowrap">{t("color")}:</span>
+            <select
+              className="ml-[33px] md:ml-4 w-[65%] md:w-[full] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
+              value={
+                props.fontColor ||
+                props.currWidgetsDetails?.options?.fontColor ||
+                "black"
+              }
+              onChange={(e) => props.setFontColor(e.target.value)}
+            >
+              {fontColorArr.map((color, ind) => (
+                <option key={ind} value={color}>
+                  {t(`color-type.${color}`)}
+                </option>
+              ))}
+            </select>
+            {/* Color Preview Box */}
+            <span
+              className="w-5 h-5 ml-2 rounded border border-gray-300"
+              style={{
+                backgroundColor:
+                  props.fontColor ||
+                  props.currWidgetsDetails?.options?.fontColor ||
+                  "black"
+              }}
+            ></span>
+          </div>
+        </div>
+
+        <div className="h-[1px] bg-[#9f9f9f] w-full mt-[15px] mb-2"></div>
+        <button
+          onClick={() => props.handleSaveFontSize()}
+          type="button"
+          className="op-btn op-btn-primary mt-2"
+        >
+          {t("save")}
+        </button>
+      </div>
+    </ModalUi>
+  );
+}
+
+export default TextFontSetting;
@@ -56,9 +56,7 @@ function VerifyEmail(props) {
              <button
                className="op-btn op-btn-primary"
                type="submit"
-                onClick={() => {
-                  props.handleVerifyBtn();
-                }}
+                onClick={() => props.handleVerifyBtn()}
              >
                {t("send-otp")}
              </button>
@@ -4,212 +4,84 @@ import RecipientList from "./RecipientList";
 import { useDrag } from "react-dnd";
 import WidgetList from "./WidgetList";
 import {
+  color,
+  isMobile,
  radioButtonWidget,
  textInputWidget,
  textWidget,
  widgets
 } from "../../constant/Utils";
 import { useTranslation } from "react-i18next";
-function WidgetComponent({
-  dragSignature,
-  signRef,
-  handleDivClick,
-  handleMouseLeave,
-  dragStamp,
-  isSignYourself,
-  addPositionOfSignature,
-  signersdata,
-  isSelectListId,
-  setSignerObjId,
-  setIsSelectId,
-  setContractName,
-  isSigners,
-  dataTut,
-  isMailSend,
-  handleAddSigner,
-  setUniqueId,
-  setRoleName,
-  handleDeleteUser,
-  signerPos,
-  handleRoleChange,
-  handleOnBlur,
-  title,
-  setSignersData,
-  sendInOrder,
-  isTemplateFlow,
-  setBlockColor,
-  setIsAddSigner,
-  uniqueId
-}) {
+function WidgetComponent(props) {
  const { t } = useTranslation();
+  const signRef = useRef(null);
+  const userInformation = localStorage.getItem("UserInformation");
  const [isSignersModal, setIsSignersModal] = useState(false);
+  const [, signature] = useDrag({
+    type: "BOX",
+    item: { type: "BOX", id: 1, text: "signature" }
+  });
+  const [, stamp] = useDrag({
+    type: "BOX",
+    item: { type: "BOX", id: 2, text: "stamp" }
+  });
  const [, dropdown] = useDrag({
    type: "BOX",
-    item: {
-      type: "BOX",
-      id: 5,
-      text: "dropdown"
-    },
-
-    collect: (monitor) => ({
-      isDragDropdown: !!monitor.isDragging()
-    })
+    item: { type: "BOX", id: 5, text: "dropdown" }
  });
  const [, checkbox] = useDrag({
    type: "BOX",
-    item: {
-      type: "BOX",
-      id: 6,
-      text: "checkbox"
-    },
-
-    collect: (monitor) => ({
-      isDragCheck: !!monitor.isDragging()
-    })
+    item: { type: "BOX", id: 6, text: "checkbox" }
  });
  const [, textInput] = useDrag({
    type: "BOX",
-    item: {
-      type: "BOX",
-      id: 7,
-      text: textInputWidget
-    },
-    collect: (monitor) => ({
-      isDragTextInput: !!monitor.isDragging()
-    })
+    item: { type: "BOX", id: 7, text: textInputWidget }
  });
  const [, initials] = useDrag({
    type: "BOX",
-    item: {
-      type: "BOX",
-      id: 8,
-      text: "initials"
-    },
-
-    collect: (monitor) => ({
-      isDragInitial: !!monitor.isDragging()
-    })
+    item: { type: "BOX", id: 8, text: "initials" }
  });
  const [, name] = useDrag({
    type: "BOX",
-    item: {
-      type: "BOX",
-      id: 9,
-      text: "name"
-    },
-
-    collect: (monitor) => ({
-      isDragName: !!monitor.isDragging()
-    })
+    item: { type: "BOX", id: 9, text: "name" }
  });
  const [, company] = useDrag({
    type: "BOX",
-    item: {
-      type: "BOX",
-      id: 10,
-      text: "company"
-    },
-
-    collect: (monitor) => ({
-      isDragCompany: !!monitor.isDragging()
-    })
+    item: { type: "BOX", id: 10, text: "company" }
  });
  const [, jobTitle] = useDrag({
    type: "BOX",
-    item: {
-      type: "BOX",
-      id: 11,
-      text: "job title"
-    },
-
-    collect: (monitor) => ({
-      isDragJobtitle: !!monitor.isDragging()
-    })
+    item: { type: "BOX", id: 11, text: "job title" }
  });
  const [, date] = useDrag({
    type: "BOX",
-    item: {
-      type: "BOX",
-      id: 12,
-      text: "date"
-    },
-
-    collect: (monitor) => ({
-      isDragDate: !!monitor.isDragging()
-    })
+    item: { type: "BOX", id: 12, text: "date" }
  });
  const [, image] = useDrag({
    type: "BOX",
-    item: {
-      type: "BOX",
-      id: 13,
-      text: "image"
-    },
-
-    collect: (monitor) => ({
-      isDragImage: !!monitor.isDragging()
-    })
+    item: { type: "BOX", id: 13, text: "image" }
  });
  const [, email] = useDrag({
    type: "BOX",
-    item: {
-      type: "BOX",
-      id: 14,
-      text: "email"
-    },
-    collect: (monitor) => ({
-      isDragEmail: !!monitor.isDragging()
-    })
+    item: { type: "BOX", id: 14, text: "email" }
  });
  const [, radioButton] = useDrag({
    type: "BOX",
-
-    item: {
-      type: "BOX",
-      id: 15,
-      text: radioButtonWidget
-    },
-    collect: (monitor) => ({
-      isDragRadiotton: !!monitor.isDragging()
-    })
+    item: { type: "BOX", id: 15, text: radioButtonWidget }
  });
  const [, text] = useDrag({
    type: "BOX",
-
-    item: {
-      type: "BOX",
-      id: 16,
-      text: textWidget
-    },
-    collect: (monitor) => ({
-      isDragText: !!monitor.isDragging()
-    })
+    item: { type: "BOX", id: 16, text: textWidget }
  });
-  const isMobile = window.innerWidth < 767;
-  const scrollContainerRef = useRef(null);
  const [widget, setWidget] = useState([]);
-  const color = [
-    "#93a3db",
-    "#e6c3db",
-    "#c0e3bc",
-    "#bce3db",
-    "#b8ccdb",
-    "#ceb8db",
-    "#ffccff",
-    "#99ffcc",
-    "#cc99ff",
-    "#ffcc99",
-    "#66ccff",
-    "#ffffcc"
-  ];
  const handleModal = () => {
    setIsSignersModal(!isSignersModal);
  };

  useEffect(() => {
    const widgetRef = [
-      dragSignature,
-      dragStamp,
+      signature,
+      stamp,
      initials,
      name,
      jobTitle,
@@ -232,37 +104,67 @@ function WidgetComponent({
    // eslint-disable-next-line
  }, []);

+  const modifiedWidgets = widget.filter(
+    (data) =>
+      ![
+        "dropdown",
+        radioButtonWidget,
+        textInputWidget,
+        "date",
+        "image",
+        "checkbox"
+      ].includes(data.type)
+  );
+  const unlogedInUserWidgets = widget.filter(
+    (data) =>
+      ![
+        "dropdown",
+        radioButtonWidget,
+        textInputWidget,
+        "date",
+        "image",
+        "checkbox",
+        "name",
+        "email",
+        "job title",
+        "company"
+      ].includes(data.type)
+  );
  const filterWidgets = widget.filter(
    (data) =>
-      data.type !== "dropdown" &&
-      data.type !== radioButtonWidget &&
-      data.type !== textInputWidget
+      !["dropdown", radioButtonWidget, textInputWidget].includes(data.type)
  );
  const textWidgetData = widget.filter((data) => data.type !== textWidget);
-  const updateWidgets = isSignYourself
+  const updateWidgets = props.isSignYourself
    ? filterWidgets
-    : isTemplateFlow
+    : props.isTemplateFlow
      ? textWidgetData
-      : widget;
+      : props.isAlllowModify
+        ? userInformation
+          ? modifiedWidgets
+          : unlogedInUserWidgets
+        : widget;

  const handleSelectRecipient = () => {
    if (
-      signersdata[isSelectListId]?.Email ||
-      signersdata[isSelectListId]?.Role
+      props.signersdata[props.isSelectListId]?.Email ||
+      props.signersdata[props.isSelectListId]?.Role
    ) {
      const userData =
-        signersdata[isSelectListId]?.Name || signersdata[isSelectListId]?.Role;
+        props.signersdata[props.isSelectListId]?.Name ||
+        props.signersdata[props.isSelectListId]?.Role;
      const name =
        userData?.length > 20 ? `${userData.slice(0, 20)}...` : userData;
      return name;
    }
  };
+
  return (
    <>
      {isMobile ? (
-        !isMailSend && (
+        !props.isMailSend && (
          <div id="navbar" className="fixed z-[99] bottom-0 right-0 w-full">
-            {isSigners && (
+            {props.isSigners && (
              <div className="w-full mb-[5px] flex justify-center items-center gap-1">
                <div className="w-full ml-[5px]" onClick={() => handleModal()}>
                  <select
@@ -270,8 +172,8 @@ function WidgetComponent({
                    className="w-full op-select op-select-bordered  pointer-events-none"
                    value={handleSelectRecipient()}
                    style={{
-                      backgroundColor: isSelectListId
-                        ? color[isSelectListId % color.length]
+                      backgroundColor: props.blockColor
+                        ? props.blockColor
                        : color[0]
                    }}
                  >
@@ -282,19 +184,19 @@ function WidgetComponent({
                </div>

                <div className="w-[18%]">
-                  {handleAddSigner ? (
+                  {props.handleAddSigner ? (
                    <button
                      data-tut="reactourAddbtn"
-                      onClick={() => handleAddSigner()}
+                      onClick={() => props.handleAddSigner()}
                      className="op-btn op-btn-accent"
                    >
                      <i className="fa-light fa-plus "></i>
                    </button>
                  ) : (
-                    setIsAddSigner && (
+                    props.setIsAddSigner && (
                      <button
                        data-tut="addRecipient"
-                        onClick={() => setIsAddSigner(true)}
+                        onClick={() => props.setIsAddSigner(true)}
                        className="op-btn op-btn-accent"
                      >
                        <i className="fa-light fa-plus"></i>
@@ -307,18 +209,16 @@ function WidgetComponent({

            <div
              data-tut="addWidgets"
-              ref={scrollContainerRef}
              className="bg-base-100 border-[2px] border-t-primary"
            >
              <div className="flex whitespace-nowrap overflow-x-scroll pt-[10px] pb-[5px] pr-[5px]">
                <WidgetList
                  updateWidgets={updateWidgets}
-                  handleDivClick={handleDivClick}
-                  handleMouseLeave={handleMouseLeave}
+                  handleDivClick={props.handleDivClick}
+                  handleMouseLeave={props.handleMouseLeave}
                  signRef={signRef}
                  marginLeft={5}
-                  addPositionOfSignature={addPositionOfSignature}
-                  isMobile={isMobile}
+                  addPositionOfSignature={props.addPositionOfSignature}
                />
              </div>
            </div>
@@ -326,23 +226,20 @@ function WidgetComponent({
        )
      ) : (
        <div
-          data-tut={dataTut}
+          data-tut={props.dataTut}
          className={`${
-            isMailSend ? "bg-opacity-50 pointer-events-none" : ""
+            props.isMailSend ? "bg-opacity-50 pointer-events-none" : ""
          } hidden md:block h-full bg-base-100`}
        >
          <div className="mx-2 pr-2 pt-2 pb-1 text-[15px] text-base-content font-semibold border-b-[1px] border-base-300">
            <span>{t("fields")}</span>
          </div>

-          <div
-            className="p-[15px] flex flex-col pt-4 2xl:m-5"
-            data-tut="addWidgets"
-          >
+          <div className="p-[15px] flex flex-col pt-4" data-tut="addWidgets">
            <WidgetList
              updateWidgets={updateWidgets}
-              handleDivClick={handleDivClick}
-              handleMouseLeave={handleMouseLeave}
+              handleDivClick={props.handleDivClick}
+              handleMouseLeave={props.handleMouseLeave}
              signRef={signRef}
            />
          </div>
@@ -350,34 +247,33 @@ function WidgetComponent({
      )}
      {isSignersModal && (
        <ModalUi
-          title={title ? title : t("recipients")}
+          title={props.title ? props.title : t("recipients")}
          isOpen={isSignersModal}
          handleClose={handleModal}
        >
-          {signersdata.length > 0 ? (
+          {props.signersdata.length > 0 ? (
            <div className="max-h-[600px] overflow-auto pb-1">
              <RecipientList
-                signerPos={signerPos}
-                signersdata={signersdata}
-                isSelectListId={isSelectListId}
-                setSignerObjId={setSignerObjId}
-                setIsSelectId={setIsSelectId}
-                setContractName={setContractName}
-                setUniqueId={setUniqueId}
-                setRoleName={setRoleName}
-                handleDeleteUser={handleDeleteUser}
-                handleRoleChange={handleRoleChange}
-                handleOnBlur={handleOnBlur}
+                signerPos={props.signerPos}
+                signersdata={props.signersdata}
+                isSelectListId={props.isSelectListId}
+                setIsSelectId={props.setIsSelectId}
+                setUniqueId={props.setUniqueId}
+                setRoleName={props.setRoleName}
+                handleDeleteUser={props.handleDeleteUser}
+                handleRoleChange={props.handleRoleChange}
+                handleOnBlur={props.handleOnBlur}
                handleModal={handleModal}
-                sendInOrder={sendInOrder}
-                setSignersData={setSignersData}
-                setBlockColor={setBlockColor}
-                uniqueId={uniqueId}
+                sendInOrder={props.sendInOrder}
+                setSignersData={props.setSignersData}
+                setBlockColor={props.setBlockColor}
+                uniqueId={props.uniqueId}
+                setSignerPos={props.setSignerPos}
              />
            </div>
          ) : (
            <div className=" p-[20px] text-[15px] font-medium text-center">
-              {t("please-add")} {title ? title : t("recipients")}
+              {t("please-add")} {props.title ? props.title : t("recipients")}
            </div>
          )}
        </ModalUi>
@@ -1,32 +1,23 @@
 import React from "react";
-import { getWidgetType } from "../../constant/Utils";
+import { getWidgetType, isMobile } from "../../constant/Utils";
 import { useTranslation } from "react-i18next";

 function WidgetList(props) {
  const { t } = useTranslation();
-
  return props.updateWidgets.map((item, ind) => {
    return (
-      <div className="2xl:p-3 mb-[5px]" key={ind}>
+      <div className="2xl:p-1 mb-[5px]" key={ind}>
        <div
+          data-tut="isSignatureWidget"
          className="select-none mx-[2px] md:mx-0 cursor-all-scroll"
          onClick={() => {
            props.addPositionOfSignature &&
              props.addPositionOfSignature("onclick", item);
          }}
-          ref={(element) => {
-            if (!props.isMobile) {
-              item.ref(element);
-              if (element) {
-                if (props?.signRef) {
-                  props.signRef.current = element;
-                }
-              }
-            }
-          }}
-          onMouseMove={props?.handleDivClick}
-          onMouseDown={() => props?.handleMouseLeave()}
-          onTouchStart={props?.handleDivClick}
+          ref={(element) => !isMobile && item.ref(element)}
+          onMouseMove={(e) => !isMobile && props?.handleDivClick(e)}
+          onMouseDown={() => !isMobile && props?.handleMouseLeave()}
+          onTouchStart={(e) => !isMobile && props?.handleDivClick(e)}
        >
          {item.ref && getWidgetType(item, t(`widgets-name.${item.type}`))}
        </div>
@@ -1,332 +0,0 @@
-import React, { useEffect, useState } from "react";
-import ModalUi from "../../primitives/ModalUi";
-import "../../styles/AddUser.css";
-import RegexParser from "regex-parser";
-import { textInputWidget, textWidget } from "../../constant/Utils";
-import Upgrade from "../../primitives/Upgrade";
-import { isEnableSubscription } from "../../constant/const";
-import Tooltip from "../../primitives/Tooltip";
-import { fontColorArr, fontsizeArr } from "../../constant/Utils";
-import { useTranslation } from "react-i18next";
-
-const WidgetNameModal = (props) => {
-  const { t } = useTranslation();
-  const [formdata, setFormdata] = useState({
-    name: "",
-    defaultValue: "",
-    status: "required",
-    hint: "",
-    textvalidate: ""
-  });
-  const [isValid, setIsValid] = useState(true);
-  const statusArr = ["Required", "Optional"];
-  const inputOpt = ["text", "email", "number"];
-
-  useEffect(() => {
-    if (props.defaultdata) {
-      setFormdata({
-        name: props.defaultdata?.options?.name || "",
-        defaultValue: props.defaultdata?.options?.defaultValue || "",
-        status: props.defaultdata?.options?.status || "required",
-        hint: props.defaultdata?.options?.hint || "",
-        textvalidate:
-          props.defaultdata?.options?.validation?.type === "regex"
-            ? props.defaultdata?.options?.validation?.pattern
-            : props.defaultdata?.options?.validation?.type || ""
-      });
-    } else {
-      setFormdata({
-        ...formdata,
-        name: props.defaultdata?.options?.name || ""
-      });
-    }
-    // eslint-disable-next-line
-  }, [props.defaultdata]);
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    if (props.handleData) {
-      props.handleData(formdata);
-      setFormdata({
-        name: "",
-        defaultValue: "",
-        status: "required",
-        hint: "",
-        textvalidate: ""
-      });
-    }
-  };
-  const handleChange = (e) => {
-    if (e) {
-      setFormdata({ ...formdata, [e.target.name]: e.target.value });
-    } else {
-      setFormdata({ ...formdata, textvalidate: "" });
-    }
-  };
-
-  const handledefaultChange = (e) => {
-    if (formdata.textvalidate) {
-      const regexObject = RegexParser(handleValidation(formdata.textvalidate));
-      const isValidate = regexObject?.test(e.target.value);
-      setIsValid(isValidate);
-    } else {
-      setIsValid(true);
-    }
-    setFormdata({ ...formdata, [e.target.name]: e.target.value });
-  };
-
-  function handleValidation(type) {
-    switch (type) {
-      case "email":
-        return "/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/";
-      case "number":
-        return "/^\\d+$/";
-      case "text":
-        return "/^[a-zA-Zs]+$/";
-      default:
-        return type;
-    }
-  }
-
-  function handleBlurRegex() {
-    if (!formdata.textvalidate) {
-      setFormdata({ ...formdata, textvalidate: "" });
-    } else {
-      if (formdata.defaultValue) {
-        const regexObject = RegexParser(
-          handleValidation(formdata.textvalidate)
-        );
-        const isValidate = regexObject?.test(formdata.defaultValue);
-        if (isValidate === false) {
-          setFormdata({ ...formdata, defaultValue: "" });
-        }
-      }
-    }
-  }
-  return (
-    <ModalUi
-      isOpen={props.isOpen}
-      handleClose={props.handleClose && props.handleClose}
-      title={t("widget-info")}
-    >
-      <form
-        onSubmit={handleSubmit}
-        className={`${
-          props.defaultdata?.type === textInputWidget ? "pt-0" : ""
-        } p-[20px] text-base-content`}
-      >
-        <div className="mb-[0.75rem] text-[13px]">
-          <label htmlFor="name">
-            {t("name")}
-            <span className="text-[red]"> *</span>
-          </label>
-          <input
-            className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-            name="name"
-            value={formdata.name}
-            onChange={(e) => handleChange(e)}
-            onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
-            onInput={(e) => e.target.setCustomValidity("")}
-            required
-          />
-        </div>
-        {props.defaultdata?.type === textInputWidget && (
-          <>
-            {isEnableSubscription && (
-              <div className="mb-[0.75rem]">
-                <div className="flex items-center gap-1">
-                  <label
-                    htmlFor="textvalidate"
-                    className={`${
-                      !props.isSubscribe && isEnableSubscription
-                        ? "bg-opacity-50 pointer-events-none"
-                        : ""
-                    } text-[13px]`}
-                  >
-                    {t("validation")}
-                  </label>
-                  <Tooltip
-                    url={"https://www.w3schools.com/jsref/jsref_obj_regexp.asp"}
-                  />
-                  {!props.isSubscribe && isEnableSubscription && <Upgrade />}
-                </div>
-                <div
-                  className={`${
-                    !props.isSubscribe && isEnableSubscription
-                      ? "bg-opacity-50 pointer-events-none"
-                      : ""
-                  } flex flex-row gap-[10px] mb-[0.5rem]`}
-                >
-                  <div className="w-full relative group">
-                    <input
-                      className="z-20 relative op-input op-input-bordered rounded-r-none op-input-sm focus:outline-none group-hover:border-base-content w-[87%] md:w-[92%] text-xs"
-                      name="textvalidate"
-                      placeholder="Enter custom regular expression"
-                      value={formdata.textvalidate}
-                      onChange={(e) => handleChange(e)}
-                      // onBlur={() => handleBlurRegex()}
-                    />
-                    <select
-                      className="validationlist op-input op-input-bordered op-input-sm focus:outline-none group-hover:border-base-content w-full text-xs"
-                      name="textvalidate"
-                      value={formdata.textvalidate}
-                      onChange={(e) => handleChange(e)}
-                      onBlur={() => handleBlurRegex()}
-                    >
-                      <option
-                        disabled={formdata?.textvalidate}
-                        className="text-[13px]"
-                      >
-                        Select...
-                      </option>
-                      {inputOpt.map((data, ind) => {
-                        return (
-                          <option
-                            className="text-[13px]"
-                            key={ind}
-                            value={data}
-                          >
-                            {data}
-                          </option>
-                        );
-                      })}
-                    </select>
-                  </div>
-                </div>
-              </div>
-            )}
-            <div className="mb-[0.75rem]">
-              <label htmlFor="name" className="text-[13px]">
-                {t("default-value")}
-              </label>
-              <input
-                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-                name="defaultValue"
-                value={formdata.defaultValue}
-                onChange={(e) => handledefaultChange(e)}
-                autoComplete="off"
-                onBlur={() => {
-                  if (isValid === false) {
-                    setFormdata({ ...formdata, defaultValue: "" });
-                    setIsValid(true);
-                  }
-                }}
-              />
-              {isValid === false && (
-                <div
-                  className="warning defaultvalueWarning"
-                  style={{ fontSize: 12 }}
-                >
-                  <i
-                    className="fa-light fa-exclamation-circle text-[15px]"
-                    style={{ color: "#fab005" }}
-                  ></i>
-                  {t("invalid-default-value")}
-                </div>
-              )}
-            </div>
-          </>
-        )}
-        <div className="mb-[0.75rem]">
-          <div className="flex flex-row gap-[10px] mb-[0.5rem]">
-            {statusArr.map((data, ind) => {
-              return (
-                <div key={ind} className="flex flex-row gap-[5px] items-center">
-                  <input
-                    className="mr-[2px] op-radio op-radio-xs"
-                    type="radio"
-                    name="status"
-                    onChange={() =>
-                      setFormdata({ ...formdata, status: data.toLowerCase() })
-                    }
-                    checked={
-                      formdata.status.toLowerCase() === data.toLowerCase()
-                    }
-                  />
-                  <div className="text-[13px] font-medium">
-                    {t(`widget-status.${data}`)}
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        </div>
-        {props.defaultdata?.type === textInputWidget && (
-          <div className="mb-[0.75rem]">
-            <label htmlFor="hint" className="text-[13px]">
-              {t("hint")}
-            </label>
-            <input
-              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-              name="hint"
-              value={formdata.hint}
-              onChange={(e) => handleChange(e)}
-            />
-          </div>
-        )}
-        {[
-          textInputWidget,
-          textWidget,
-          "name",
-          "company",
-          "job title",
-          "email"
-        ].includes(props.defaultdata?.type) && (
-          <div className="flex items-center mb-[0.75rem]">
-            <span>{t("font-size")}:</span>
-            <select
-              className="ml-[7px] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
-              value={
-                props.fontSize || props.defaultdata?.options?.fontSize || "12"
-              }
-              onChange={(e) => props.setFontSize(e.target.value)}
-            >
-              {fontsizeArr.map((size, ind) => {
-                return (
-                  <option className="text-[13px]" value={size} key={ind}>
-                    {size}
-                  </option>
-                );
-              })}
-            </select>
-            <div className="flex flex-row gap-1 items-center ml-4">
-              <span>{t("color")}: </span>
-              <select
-                value={
-                  props.fontColor ||
-                  props.defaultdata?.options?.fontColor ||
-                  "black"
-                }
-                onChange={(e) => props.setFontColor(e.target.value)}
-                className="ml-[7px] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
-              >
-                {fontColorArr.map((color, ind) => {
-                  return (
-                    <option value={color} key={ind}>
-                      {t(`color-type.${color}`)}
-                    </option>
-                  );
-                })}
-              </select>
-              <span
-                style={{
-                  background:
-                    props.fontColor ||
-                    props.defaultdata?.options?.fontColor ||
-                    "black"
-                }}
-                className="w-5 h-[19px] ml-1"
-              ></span>
-            </div>
-          </div>
-        )}
-
-        <div className="h-[1px] w-full mb-[16px] bg-[#b7b3b3]"></div>
-        <button type="submit" className="op-btn op-btn-primary">
-          {t("save")}
-        </button>
-      </form>
-    </ModalUi>
-  );
-};
-
-export default WidgetNameModal;
@@ -0,0 +1,361 @@
+import React, { useEffect, useState } from "react";
+import ModalUi from "../../primitives/ModalUi";
+import "../../styles/AddUser.css";
+import RegexParser from "regex-parser";
+import {
+  signatureTypes,
+  textInputWidget,
+  textWidget
+} from "../../constant/Utils";
+import { fontColorArr, fontsizeArr } from "../../constant/Utils";
+import { useTranslation } from "react-i18next";
+
+const WidgetNameModal = (props) => {
+  const { t } = useTranslation();
+  const signTypes = props?.signatureType || signatureTypes;
+  const [formdata, setFormdata] = useState({
+    name: "",
+    defaultValue: "",
+    status: "required",
+    hint: "",
+    textvalidate: "",
+    isReadOnly: false
+  });
+  const [isValid, setIsValid] = useState(true);
+  const statusArr = ["Required", "Optional"];
+  const [signatureType, setSignatureType] = useState([]);
+
+  useEffect(() => {
+    if (props.defaultdata) {
+      setFormdata({
+        name: props.defaultdata?.options?.name || "",
+        defaultValue: props.defaultdata?.options?.defaultValue || "",
+        status: props.defaultdata?.options?.status || "required",
+        hint:
+          props.defaultdata?.options?.hint ||
+          (props.defaultdata?.type === textInputWidget
+            ? "Enter text"
+            : `Enter ${props.defaultdata?.options?.name}`),
+        textvalidate:
+          props.defaultdata?.options?.validation?.type === "regex"
+            ? props.defaultdata?.options?.validation?.pattern
+            : props.defaultdata?.options?.validation?.type || "",
+        isReadOnly: props.defaultdata?.options?.isReadOnly || false
+      });
+    } else {
+      setFormdata({
+        ...formdata,
+        name: props.defaultdata?.options?.name || ""
+      });
+    }
+
+    if (signTypes.length > 0) {
+      const defaultSignatureType = signTypes || [];
+      setSignatureType(defaultSignatureType);
+    }
+    // eslint-disable-next-line
+  }, [props.defaultdata]);
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (props.handleData) {
+      if (["signature", "initials"].includes(props.defaultdata?.type)) {
+        const enabledSignTypes = signatureType?.filter((x) => x.enabled);
+        const isDefaultSignTypeOnly =
+          enabledSignTypes?.length === 1 &&
+          enabledSignTypes[0]?.name === "default";
+        if (enabledSignTypes.length === 0) {
+          alert(t("at-least-one-signature-type"));
+        } else if (isDefaultSignTypeOnly) {
+          alert(t("expect-default-one-more-signature-type"));
+        } else {
+          const data = { ...formdata, signatureType };
+          props.handleData(data, props.defaultdata?.type);
+        }
+      } else {
+        props.handleData(formdata);
+      }
+      setFormdata({
+        isReadOnly: false,
+        name: "",
+        defaultValue: "",
+        status: "required",
+        hint: "",
+        textvalidate: ""
+      });
+      setSignatureType(signTypes);
+    }
+  };
+  const handleChange = (e) => {
+    if (e) {
+      setFormdata({ ...formdata, [e.target.name]: e.target.value });
+    } else {
+      setFormdata({ ...formdata, textvalidate: "" });
+    }
+  };
+
+  const handledefaultChange = (e) => {
+    if (formdata.textvalidate) {
+      const regexObject = RegexParser(handleValidation(formdata.textvalidate));
+      const isValidate = regexObject?.test(e.target.value);
+      setIsValid(isValidate);
+    } else {
+      setIsValid(true);
+    }
+    setFormdata({ ...formdata, [e.target.name]: e.target.value });
+  };
+
+  function handleValidation(type) {
+    switch (type) {
+      case "email":
+        return "/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/";
+      case "number":
+        return "/^\\d+$/";
+      case "text":
+        return "/^[a-zA-Zs]+$/";
+      default:
+        return type;
+    }
+  }
+
+
+  const handleCheckboxChange = (index) => {
+    // Update the state with the modified array
+    setSignatureType((prev) =>
+      prev.map((item, i) =>
+        i === index ? { ...item, enabled: !item.enabled } : item
+      )
+    );
+  };
+  return (
+    <ModalUi
+      isOpen={props.isOpen}
+      handleClose={props.handleClose && props.handleClose}
+      title={
+        ["signature", "initials"].includes(props.defaultdata?.type)
+          ? t("signature-setting")
+          : t("widget-info")
+      }
+    >
+      <form
+        onSubmit={handleSubmit}
+        className={`${
+          props.defaultdata?.type === textInputWidget
+            ? "pt-0"
+            : ["signature", "initials"].includes(props.defaultdata?.type)
+              ? "pt-2"
+              : ""
+        } p-[20px] text-base-content`}
+      >
+        {!["signature", "initials"].includes(props.defaultdata?.type) && (
+          <div className="mb-[0.75rem] text-[13px]">
+            <label htmlFor="name">
+              {t("name")}
+              <span className="text-[red]"> *</span>
+            </label>
+            <input
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+              name="name"
+              value={formdata.name}
+              onChange={(e) => handleChange(e)}
+              onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
+              onInput={(e) => e.target.setCustomValidity("")}
+              required
+            />
+          </div>
+        )}
+        {props.defaultdata?.type === textInputWidget && (
+          <>
+            <div className="mb-[0.75rem]">
+              <label htmlFor="name" className="text-[13px]">
+                {t("default-value")}
+              </label>
+              <input
+                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                name="defaultValue"
+                value={formdata.defaultValue}
+                onChange={(e) => handledefaultChange(e)}
+                autoComplete="off"
+                onBlur={() => {
+                  if (isValid === false) {
+                    setFormdata({ ...formdata, defaultValue: "" });
+                    setIsValid(true);
+                  }
+                }}
+              />
+              {isValid === false && (
+                <div
+                  className="warning defaultvalueWarning"
+                  style={{ fontSize: 12 }}
+                >
+                  <i
+                    className="fa-light fa-exclamation-circle text-[15px]"
+                    style={{ color: "#fab005" }}
+                  ></i>
+                  {t("invalid-default-value")}
+                </div>
+              )}
+            </div>
+          </>
+        )}
+        {!["signature", "initials", textWidget].includes(
+          props.defaultdata?.type
+        ) && (
+          <div className="mb-[0.75rem]">
+            <div className="flex flex-row gap-[10px] mb-[0.5rem]">
+              {statusArr.map((data, ind) => {
+                return (
+                  <div
+                    key={ind}
+                    className="flex flex-row gap-[5px] items-center"
+                  >
+                    <input
+                      className="mr-[2px] op-radio op-radio-xs"
+                      type="radio"
+                      name="status"
+                      onChange={() =>
+                        setFormdata({ ...formdata, status: data.toLowerCase() })
+                      }
+                      checked={
+                        formdata.status.toLowerCase() === data.toLowerCase()
+                      }
+                    />
+                    <div className="text-[13px] font-medium">
+                      {t(`widget-status.${data}`)}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+            {[textInputWidget].includes(props.defaultdata?.type) && (
+              <div className="flex items-center">
+                <input
+                  id="isReadOnly"
+                  name="isReadOnly"
+                  type="checkbox"
+                  checked={formdata.isReadOnly}
+                  className="op-checkbox op-checkbox-xs"
+                  onChange={() =>
+                    setFormdata((prev) => ({
+                      ...formdata,
+                      isReadOnly: !prev.isReadOnly
+                    }))
+                  }
+                />
+                <label className="ml-1 mb-0" htmlFor="isreadonly">
+                  {t("read-only")}
+                </label>
+              </div>
+            )}
+          </div>
+        )}
+        {["signature", "initials"].includes(props.defaultdata?.type) && (
+          <div className="mb-[0.75rem]">
+            <label htmlFor="signaturetype" className="text-[14px] mb-[0.7rem]">
+              {t("allowed-signature-types")}
+            </label>
+            <div className=" ml-[7px] flex flex-col md:flex-row gap-[10px] mb-[0.7rem]">
+              {signatureType.map((type, i) => {
+                return (
+                  <div key={i} className="flex flex-row gap-[5px] items-center">
+                    <input
+                      className="mr-[2px] op-checkbox op-checkbox-xs"
+                      type="checkbox"
+                      name="signaturetype"
+                      onChange={() => handleCheckboxChange(i)}
+                      checked={type.enabled}
+                    />
+                    <div
+                      className="text-[13px] font-medium hover:underline underline-offset-2 cursor-default capitalize"
+                      title={`Enabling this allow signers to ${type.name} signature`}
+                    >
+                      {type.name}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
+        {props.defaultdata?.type !== textWidget && (
+          <div className="mb-[0.75rem]">
+            <label htmlFor="hint" className="text-[13px]">
+              {t("hint")}
+            </label>
+            <input
+              maxLength={40}
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+              name="hint"
+              value={formdata.hint}
+              onChange={(e) => handleChange(e)}
+            />
+          </div>
+        )}
+        {[
+          textInputWidget,
+          textWidget,
+          "name",
+          "company",
+          "job title",
+          "email"
+        ].includes(props.defaultdata?.type) && (
+          <div className="flex flex-col md:flex-row md:items-center gap-3 mb-3">
+            <div className="flex items-center gap-2 ">
+              <span className="whitespace-nowrap">{t("font-size")}: </span>
+              <select
+                className="ml-[7px] w-[60%] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
+                value={
+                  props.fontSize || props.defaultdata?.options?.fontSize || 12
+                }
+                onChange={(e) => props.setFontSize(parseInt(e.target.value))}
+              >
+                {fontsizeArr.map((size, ind) => {
+                  return (
+                    <option className="text-[13px]" value={size} key={ind}>
+                      {size}
+                    </option>
+                  );
+                })}
+              </select>
+            </div>
+            <div className="flex items-center">
+              <span>{t("color")}: </span>
+              <select
+                value={
+                  props.fontColor ||
+                  props.defaultdata?.options?.fontColor ||
+                  "black"
+                }
+                onChange={(e) => props.setFontColor(e.target.value)}
+                className="ml-[33px] md:ml-4 w-[65%] md:w-[full] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
+              >
+                {fontColorArr.map((color, ind) => {
+                  return (
+                    <option value={color} key={ind}>
+                      {t(`color-type.${color}`)}
+                    </option>
+                  );
+                })}
+              </select>
+              <span
+                style={{
+                  background:
+                    props.fontColor ||
+                    props.defaultdata?.options?.fontColor ||
+                    "black"
+                }}
+                className="w-5 h-[19px] ml-1"
+              ></span>
+            </div>
+          </div>
+        )}
+
+        <div className="h-[1px] w-full mb-[16px] bg-[#b7b3b3]"></div>
+        <button type="submit" className="op-btn op-btn-primary">
+          {t("save")}
+        </button>
+      </form>
+    </ModalUi>
+  );
+};
+
+export default WidgetNameModal;
@@ -1,173 +0,0 @@
-import React, { useEffect, useState } from "react";
-import Parse from "parse";
-import Alert from "../../../primitives/Alert";
-import Loader from "../../../primitives/Loader";
-import { useTranslation } from "react-i18next";
-
-const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
-  const folderPtr = {
-    __type: "Pointer",
-    className: folderCls,
-    objectId: parentFolderId
-  };
-  const { t } = useTranslation();
-  const [name, setName] = useState("");
-  const [folderList, setFolderList] = useState([]);
-  const [isAlert, setIsAlert] = useState(false);
-  const [isLoader, setIsLoader] = useState(false);
-  const [selectedParent, setSelectedParent] = useState();
-  const [alert, setAlert] = useState({ type: "info", message: "" });
-  useEffect(() => {
-    fetchFolder();
-    // eslint-disable-next-line
-  }, []);
-
-  const fetchFolder = async () => {
-    try {
-      const FolderQuery = new Parse.Query(folderCls);
-      if (parentFolderId) {
-        FolderQuery.equalTo("Folder", folderPtr);
-        FolderQuery.equalTo("Type", "Folder");
-        FolderQuery.notEqualTo("IsArchive", true);
-        FolderQuery.equalTo("CreatedBy", Parse.User.current());
-      } else {
-        FolderQuery.doesNotExist("Folder");
-        FolderQuery.equalTo("Type", "Folder");
-        FolderQuery.notEqualTo("IsArchive", true);
-        FolderQuery.equalTo("CreatedBy", Parse.User.current());
-      }
-
-      const res = await FolderQuery.find();
-      if (res) {
-        const result = JSON.parse(JSON.stringify(res));
-        if (result) {
-          setFolderList(result);
-        }
-      }
-    } catch (error) {
-      console.log("Err ", error);
-    }
-  };
-  const handleCreateFolder = async (event) => {
-    event.preventDefault();
-    handleLoader(true);
-    if (name) {
-      const currentUser = Parse.User.current();
-      const exsitQuery = new Parse.Query(folderCls);
-      exsitQuery.equalTo("Name", name);
-      exsitQuery.equalTo("Type", "Folder");
-      exsitQuery.notEqualTo("IsArchive", true);
-      if (parentFolderId) {
-        exsitQuery.equalTo("Folder", folderPtr);
-      }
-      const templExist = await exsitQuery.first();
-      if (templExist) {
-        setAlert({ type: "danger", message: t("folder-already-exist") });
-        setIsAlert(true);
-        setTimeout(() => {
-          setIsAlert(false);
-        }, 1000);
-      } else {
-        const template = new Parse.Object(folderCls);
-        template.set("Name", name);
-        template.set("Type", "Folder");
-
-        if (selectedParent) {
-          template.set("Folder", {
-            __type: "Pointer",
-            className: folderCls,
-            objectId: selectedParent
-          });
-        } else if (parentFolderId) {
-          template.set("Folder", folderPtr);
-        }
-        template.set("CreatedBy", Parse.User.createWithoutData(currentUser.id));
-        const res = await template.save();
-        if (res) {
-          handleLoader(false);
-          setAlert({
-            type: "success",
-            message: t("folder-created-successfully")
-          });
-          setIsAlert(true);
-          setTimeout(() => {
-            setIsAlert(false);
-          }, 1000);
-          if (onSuccess) {
-            onSuccess(res);
-          }
-        }
-      }
-    } else {
-      handleLoader(false);
-      setAlert({ type: "info", message: t("fill-folder-name") });
-      setIsAlert(true);
-      setTimeout(() => {
-        setIsAlert(false);
-      }, 1000);
-    }
-  };
-  const handleOptions = (e) => {
-    setSelectedParent(e.target.value);
-  };
-  const handleLoader = (status) => {
-    setIsLoader(status);
-  };
-  return (
-    <div>
-      {isAlert && <Alert type={alert.type}>{alert.message}</Alert>}
-      <div id="createFolder" className="relative">
-        {isLoader && (
-          <div className="absolute h-full w-full flex justify-center items-center">
-            <Loader />
-          </div>
-        )}
-        <h1 className="text-base font-semibold mt-[0.4rem]">
-          {t("create-folder")}
-        </h1>
-        <div className="text-xs mt-2">
-          <label className="block">
-            {t("name")}
-            <span className="text-red-500 text-[13px]">*</span>
-          </label>
-          <input
-            className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-            onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
-            onInput={(e) => e.target.setCustomValidity("")}
-            required
-          />
-        </div>
-        <div className="text-xs mt-2">
-          <label className="block">{t("parent-folder")}</label>
-          <select
-            value={selectedParent}
-            onChange={handleOptions}
-            className="op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content w-full text-xs"
-          >
-            <option>select</option>
-            {folderList.length > 0 &&
-              folderList.map((x) => (
-                <option key={x.objectId} value={x.objectId}>
-                  {x.Name}
-                </option>
-              ))}
-          </select>
-        </div>
-        <div>
-          <button
-            onClick={handleCreateFolder}
-            disabled={isLoader}
-            className="op-btn op-btn-primary op-btn-sm mt-3"
-          >
-            <i className="fa-light fa-plus"></i>
-            <span>{t("create")}</span>
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default CreateFolder;
@@ -0,0 +1,109 @@
+import React, { useState } from "react";
+import Parse from "parse";
+import Alert from "../../../primitives/Alert";
+import Loader from "../../../primitives/Loader";
+import { useTranslation } from "react-i18next";
+
+const CreateFolder = ({ parentFolderId, onSuccess, folderCls, onBack }) => {
+  const folderPtr = {
+    __type: "Pointer",
+    className: folderCls,
+    objectId: parentFolderId
+  };
+  const { t } = useTranslation();
+  const [name, setName] = useState("");
+  const [isLoader, setIsLoader] = useState(false);
+  const [alert, setAlert] = useState({ type: "info", message: "" });
+  const showToast = (type, msg) => {
+    setAlert({ type: type, message: msg });
+    setTimeout(() => setAlert({ type: type, message: "" }), 1000);
+  };
+  const handleCreateFolder = async (event) => {
+    event.preventDefault();
+    handleLoader(true);
+    if (name) {
+      const currentUser = Parse.User.current();
+      const exsitQuery = new Parse.Query(folderCls);
+      exsitQuery.equalTo("Name", name);
+      exsitQuery.equalTo("Type", "Folder");
+      exsitQuery.notEqualTo("IsArchive", true);
+      if (parentFolderId) {
+        exsitQuery.equalTo("Folder", folderPtr);
+      }
+      const templExist = await exsitQuery.first();
+      if (templExist) {
+        showToast("danger", t("folder-already-exist"));
+      } else {
+        const template = new Parse.Object(folderCls);
+        template.set("Name", name);
+        template.set("Type", "Folder");
+        if (parentFolderId) {
+          template.set("Folder", folderPtr);
+        }
+        template.set("CreatedBy", Parse.User.createWithoutData(currentUser.id));
+        const res = await template.save();
+        if (res) {
+          handleLoader(false);
+          showToast("success", t("folder-created-successfully"));
+          onSuccess && onSuccess(res?.toJSON());
+        }
+      }
+    } else {
+      handleLoader(false);
+      showToast("info", t("fill-folder-name"));
+    }
+  };
+  const handleLoader = (status) => setIsLoader(status);
+
+  return (
+    <div>
+      {alert.message && <Alert type={alert.type}>{alert.message}</Alert>}
+      <div id="createFolder" className="relative">
+        {isLoader && (
+          <div className="absolute h-full w-full flex justify-center items-center">
+            <Loader />
+          </div>
+        )}
+        <h1 className="text-base font-semibold mt-[0.4rem]">
+          {t("create-folder")}
+        </h1>
+        <div className="text-xs mt-2">
+          <label className="block">
+            {t("name")}
+            <span className="text-red-500 text-[13px]">*</span>
+          </label>
+          <input
+            className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
+            onInput={(e) => e.target.setCustomValidity("")}
+            required
+          />
+        </div>
+        <div className="flex justify-between items-center py-[1rem] ">
+          <button
+            onClick={handleCreateFolder}
+            disabled={isLoader}
+            className="op-btn op-btn-primary op-btn-sm"
+          >
+            <i className="fa-light fa-plus"></i>
+            <span>{t("create")}</span>
+          </button>
+          {onBack && (
+            <div
+              className="op-btn op-btn-seconday op-btn-sm"
+              title={t("back")}
+              onClick={() => onBack()}
+            >
+              <i className="fa-light fa-arrow-left" aria-hidden="true"></i>
+              <span className="text-xs">{t("back")}</span>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CreateFolder;
@@ -0,0 +1,79 @@
+import React, { useState } from "react";
+import { formatDateTime } from "../../../constant/Utils";
+import { useTranslation } from "react-i18next";
+
+const DateFormatSelector = (props) => {
+  const { t } = useTranslation();
+  const date = new Date();
+  const [selectedFormat, setSelectedFormat] = useState(props.dateFormat);
+  const [is12Hour, setIs12Hour] = useState(props?.is12HourTime);
+
+  const dateFormats = [
+    "MM/DD/YYYY",
+    "MMMM DD, YYYY",
+    "DD MMMM, YYYY",
+    "DD-MM-YYYY",
+    "DD MMM, YYYY",
+    "YYYY-MM-DD",
+    "MM-DD-YYYY",
+    "MM.DD.YYYY",
+    "MMM DD, YYYY"
+  ];
+
+  // Handle format change
+  const handleFormatChange = (event) => {
+    setSelectedFormat(event.target.value);
+    props.setDateFormat && props.setDateFormat(event.target.value);
+  };
+  const handleHrInput = () => {
+    setIs12Hour(!is12Hour);
+    props.setIs12HourTime && props.setIs12HourTime(!is12Hour);
+  };
+  return (
+    <div className="max-w-[400px] pr-[20px]">
+      <label className="text-[14px] mb-[0.7rem] font-medium">
+        {t("date-format")}
+      </label>
+      <select
+        className="op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content w-full h-full text-[11px]"
+        value={selectedFormat}
+        onChange={handleFormatChange}
+      >
+        {dateFormats.map((format) => (
+          <option key={format} value={format}>
+            {format}
+          </option>
+        ))}
+      </select>
+      <div className="flex flex-row gap-4 mt-[0.75rem] text-[12px]">
+        <div className="flex items-center gap-2 ml-2">
+          <input
+            type="radio"
+            value={true}
+            className="op-radio op-radio-xs"
+            checked={is12Hour}
+            onChange={handleHrInput}
+          />
+          <div className="text-center">12 hr</div>
+        </div>
+        <div className="flex items-center gap-2 ml-2">
+          <input
+            type="radio"
+            value={false}
+            className="op-radio op-radio-xs"
+            checked={!is12Hour}
+            onChange={handleHrInput}
+          />
+          <div className="text-center">24 hr</div>
+        </div>
+      </div>
+      <p className="mt-[12px] ml-[10px] text-[13px] font-medium">
+        <strong>
+          {formatDateTime(date, selectedFormat, props?.timezone, is12Hour)}
+        </strong>
+      </p>
+    </div>
+  );
+};
+
+export default DateFormatSelector;
--- a/Show More
+++ b/Show More