Merge pull request #1764 from OpenSignLabs/updates-15349515719

v2.23.0
Merge pull request #708 from OpenSignLabs/staging
2026-09-05 01:07:39 +02:00 · 2025-05-30 20:26:41 +05:30 · 2025-05-30 14:54:53 +00:00 · 2025-05-27 18:13:12 +05:30 · 2025-05-27 12:28:40 +00:00 · 2025-05-21 13:09:14 +05:30
161 changed files with 19526 additions and 25843 deletions
@@ -1,4 +1,10 @@
 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:
@@ -1,25 +0,0 @@
 # Use an official Node runtime as the base image
 FROM node:18
 # Set the working directory inside the container
 WORKDIR /usr/src/app
 # Copy package.json and package-lock.json first to leverage Docker cache
 COPY ./package*.json ./
 # Install application dependencies
 RUN npm install
 # Copy the current directory contents into the container
 COPY ./ .
 COPY ./.husky .
 # Make port 3000 available to the world outside this container
 EXPOSE 3000
 # Define environment variables if needed
 # ENV NODE_ENV production
 # Run the application
 ENTRYPOINT npm run start
@@ -13,6 +13,10 @@ RUN npm install
 # Copy the current directory contents into the container
 COPY apps/OpenSign/ .
 COPY apps/OpenSign/.husky .
 COPY apps/OpenSign/entrypoint.sh .
 # make the entrypoint.sh file executable
 RUN chmod +x entrypoint.sh
 # Define environment variables if needed
 ENV NODE_ENV=production
@@ -20,8 +24,13 @@ ENV GENERATE_SOURCEMAP=false
 # build
 RUN npm run build
 # Inject env.js loader into index.html
 RUN sed -i '/<head>/a\<script src="/env.js"></script>' build/index.html
 # Make port 3000 available to the world outside this container
 EXPOSE 3000
 ENTRYPOINT ["./entrypoint.sh"]
 # Run the application
 CMD ["npm", "start"]
@@ -0,0 +1,29 @@
 #!/bin/sh
 ENV_FILE=./build/env.js
 DOTENV_FILE=./.env.prod # ✅ use .env.prod
 echo "Generating runtime env file at $ENV_FILE..."
 echo "window.RUNTIME_ENV = {" > $ENV_FILE
 # List of keys to include
 RUNTIME_KEYS="REACT_APP_SERVERURL"
 for key in $RUNTIME_KEYS; do
  # First check docker env (-e), fallback to .env file
  value=$(printenv "$key")
  if [ -z "$value" ] && [ -f "$DOTENV_FILE" ]; then
    # fallback: read from .env
    value=$(grep "^$key=" "$DOTENV_FILE" | cut -d '=' -f2- | tr -d '\r\n' | sed 's/"/\\"/g')
  else
    value=$(echo "$value" | sed 's/"/\\"/g')
  fi
  echo "  $key: \"$value\"," >> $ENV_FILE
 done
 echo "};" >> $ENV_FILE
 exec "$@"
@@ -3,11 +3,11 @@
 <head>
  <meta charset="utf-8" />
-  <link rel="icon" href="/favicon.ico" />
+  <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"
@@ -17,5 +17,6 @@
 </head>
 <body>
  <div id="root" style="touch-action:pan-x pan-y;"></div>
  <script type="module" src="/src/index.jsx"></script>
 </body>
-</html>
+</html>
@@ -1,74 +1,71 @@
 {
  "name": "open_sign",
-  "version": "0.1.0",
+  "version": "2.21.1",
  "private": true,
  "dependencies": {
    "@formkit/auto-animate": "^0.8.2",
-    "@lottiefiles/dotlottie-react": "^0.13.2",
+    "@lottiefiles/dotlottie-react": "^0.13.5",
    "@pdf-lib/fontkit": "^1.1.1",
-    "@radix-ui/themes": "^3.1.6",
+    "@radix-ui/themes": "^3.2.1",
-    "@reduxjs/toolkit": "^2.5.1",
+    "@reduxjs/toolkit": "^2.8.2",
-    "axios": "^1.8.4",
+    "@imgly/background-removal": "^1.6.0",
-    "css-minimizer-webpack-plugin": "^7.0.2",
+    "axios": "^1.9.0",
    "date-fns-tz": "^3.2.0",
    "file-saver": "^2.0.5",
    "i18next": "^23.16.8",
-    "i18next-browser-languagedetector": "^8.0.4",
+    "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": "^6.1.1",
-    "parse": "^5.3.0",
+    "pkijs": "^3.0.8",
    "pdf-lib": "^1.17.1",
    "print-js": "^1.6.0",
-    "radix-ui": "^1.0.1",
+    "prismjs": "^1.30.0",
-    "react": "^18.2.0",
+    "radix-ui": "^1.4.2",
-    "react-bootstrap": "^2.10.9",
+    "react": "^18.3.1",
    "react-bootstrap": "^2.10.10",
    "react-confetti": "^6.4.0",
-    "react-cookie": "^7.2.2",
+    "react-datepicker": "^8.3.0",
    "react-datepicker": "^7.6.0",
    "react-dnd": "^16.0.1",
    "react-dnd-html5-backend": "^16.0.1",
    "react-dnd-multi-backend": "^9.0.0",
    "react-dnd-touch-backend": "^16.0.1",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.3.1",
    "react-gtm-module": "^2.0.11",
    "react-helmet": "^6.1.0",
-    "react-i18next": "^15.4.1",
+    "react-i18next": "^15.5.1",
    "react-konva": "^18.2.10",
    "react-pdf": "^9.2.1",
    "react-quill-new": "^3.4.6",
    "react-redux": "^9.2.0",
    "react-rnd": "^10.5.2",
-    "react-router": "^7.1.5",
+    "react-router": "^7.6.0",
    "react-scripts": "^5.0.1",
    "react-scrollbars-custom": "^4.1.1",
    "react-select": "^5.10.1",
-    "react-signature-canvas": "^1.0.7",
+    "react-signature-canvas": "^1.1.0-alpha.2",
    "react-syntax-highlighter": "^15.6.1",
    "react-timezone-select": "^3.2.8",
-    "react-tooltip": "^5.28.0",
+    "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.1",
    "serve": "^14.2.4",
-    "styled-components": "^5.3.0",
+    "styled-components": "^5.3.11",
-    "web-vitals": "^4.2.4",
+    "web-vitals": "^5.0.1",
    "ws": "^8.18.1",
    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz"
  },
  "scripts": {
-    "build": "npm run version && react-scripts build",
+    "build": "npm run version && NODE_OPTIONS=\"--max-old-space-size=8192\" vite build",
-    "start-dev": "react-scripts start",
+    "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 && react-scripts build",
+    "build-win": "npm run version-win && vite build",
-    "test": "react-scripts test",
+    "test": "vitest run",
-    "eject": "react-scripts eject",
+    "test:watch": "vitest",
    "release": "standard-version",
    "commit": "cz"
  },
@@ -96,33 +93,36 @@
    }
  },
  "devDependencies": {
-    "@babel/core": "^7.26.10",
+    "@babel/core": "^7.27.1",
-    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-env": "^7.27.2",
-    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-react": "^7.27.1",
-    "@babel/runtime-corejs2": "^7.27.0",
+    "@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.22",
    "@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.23",
+    "daisyui": "^4.12.24",
-    "dotenv": "^16.4.7",
+    "dotenv": "^16.5.0",
-    "dotenv-webpack": "^8.1.0",
+    "eslint": "^9.27.0",
-    "eslint": "^9.23.0",
+    "eslint-plugin-prettier": "^5.4.0",
-    "eslint-plugin-prettier": "^5.2.5",
+    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react": "^7.37.4",
+    "lint-staged": "^16.0.0",
    "lint-staged": "^15.5.0",
    "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.11",
+    "vite": "^6.3.5",
-    "webpack-cli": "^5.1.4"
+    "vite-plugin-svgr": "^4.3.0",
-  },
+    "vite-tsconfig-paths": "^5.1.4",
-  "overrides": {
+    "vitest": "^3.1.4"
    "nth-check": "$nth-check",
    "ws": "$ws"
  },
  "engines": {
    "node": "18 || 20 || 22"
@@ -1,6 +1,7 @@
-{
+{ 
  "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",
  "sandbox-news": "Dies ist eine Sandbox-Umgebung. Bitte nicht für produktive Zwecke verwenden.",
  "create-account": "Konto erstellen",
  "login": "Anmelden",
  "language": "Sprache",
@@ -39,8 +40,10 @@
  "save": "Speichern",
  "cancel": "Abbrechen",
  "upgrade-now": "Jetzt upgraden",
  "contact-now": "Jetzt kontaktieren",
  "upgrade-to": "Upgrade zu",
  "plan": "Plan",
  "subscription-renew-warning": "Ihr Abonnement läuft in {{remainingDays}} Tagen ab. Bitte verlängern Sie Ihr Abonnement.",
  "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.",
@@ -142,6 +145,7 @@
    "Quick send": "Schnell senden",
    "Edit": "Bearbeiten",
    "Share with team": "Mit Team teilen",
    "Share with user": "Mit Kollegen teilen",
    "Share": "Teilen",
    "View": "Ansehen",
    "option": "Option",
@@ -153,7 +157,8 @@
    "Duplicate": "Duplikat",
    "daily-mail-quota": "Tägliches E-Mail-Kontingent",
    "Save as template": "Als Vorlage speichern",
-    "Fix & resend": "Korrigieren und erneut senden"
+    "Fix & resend": "Korrigieren und erneut senden",
    "Kiosk Mode": "Kiosk Modus"
  },
  "report-heading": {
    "Sr.No": "Nr.",
@@ -244,6 +249,7 @@
  "API": "API",
  "api-token": "API-Token",
  "regenerate-token": "Live-Token neu generieren",
  "remove-background": "Hintergrund entfernen",
  "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.",
@@ -304,7 +310,7 @@
  "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 mindestens eine Rolle zu dieser Vorlage hinzu, um Kopien davon schnell an mehrere Unterzeichner zu senden.",
+  "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",
@@ -341,7 +347,7 @@
  "verify-email-1": "E-Mail verifizieren",
  "resend": "Erneut senden",
  "contact-details": "Kontaktdetails",
-  "verify-email": "Bitte verifizieren Sie Ihre E-Mail!",
+  "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...",
@@ -477,6 +483,7 @@
  "document-alert": "Dokument-Warnung",
  "owner-subscription-expired": "Das Abonnement des Besitzers ist abgelaufen.",
  "subscription-expired": "Abonnement abgelaufen",
  "owner-doesnt-have-paid-plan": "Der Inhaber hat keinen kostenpflichtigen Plan.",
  "alert-message": "Warnmeldung",
  "document-decline": "Dokument ablehnen",
  "decline-alert-1": "Sind Sie sicher, dass Sie dieses Dokument ablehnen möchten?",
@@ -669,7 +676,7 @@
  "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-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.",
@@ -887,5 +894,133 @@
  "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"
+  "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",
  "finish-mssg": "Sind Sie sicher, dass Sie das Dokument abschließen möchten?",
  "review": "Überprüfen",
  "next-field": "Nächstes Feld",
  "required-mssg": "{{leftRequiredWidget}} von {{totalWidget}} Feldern übrig",
  "verify-document-signature": "Dokumentensignatur überprüfen",
  "select-pdf-document": "PDF-Dokument auswählen",
  "selected-file": "Ausgewählte Datei",
  "verify-signature": "Signatur überprüfen",
  "verification-status": "Überprüfungsstatus",
  "verification-in-progress": "Überprüfung läuft...",
  "verification-results-will-appear-here": "Überprüfungsergebnisse werden hier angezeigt",
  "please-select-pdf": "Bitte wählen Sie eine gültige PDF-Datei aus",
  "please-select-file-to-verify": "Bitte wählen Sie eine Datei zur Überprüfung aus",
  "no-signature-found": "Keine Signatur im Dokument gefunden",
  "error-verifying-pdf": "Fehler beim Überprüfen der PDF",
  "signature-valid-basic": "Signatur ist gültig",
  "signature-invalid-basic": "Signatur ist ungültig",
  "all-signatures-verified-convincing": "Dokument überprüft: Alle Signaturen wurden erfolgreich validiert.",
  "some-signatures-invalid-basic": "Einige Signaturen sind ungültig",
  "no-signatures-processed": "Keine Signaturen verarbeitet",
  "unnamed-signature-field": "Unbenanntes Signaturfeld",
  "error-processing-signature": "Fehler beim Verarbeiten der Signatur",
  "signer-info-not-available": "Signaturinformationen nicht verfügbar",
  "cert-validity-not-checked": "Gültigkeit des Zertifikats nicht geprüft",
  "valid": "Gültig",
  "expired-or-not-yet-valid": "Abgelaufen oder noch nicht gültig",
  "valid-from": "Gültig von",
  "to": "bis",
  "signer": "Unterzeichner",
  "issuer": "Aussteller",
  "not-available": "Nicht verfügbar",
  "not-performed": "Nicht durchgeführt",
  "missing-acrofield-dict": "Fehlendes Acrofield-Wörterbuch",
  "signature-dictionary-not-found-or-invalid": "Signaturwörterbuch nicht gefunden oder ungültig",
  "missing-or-invalid-byterange": "Fehlender oder ungültiger ByteRange",
  "missing-or-invalid-contents": "Fehlender oder ungültiger Inhalt",
  "missing-signature-contents": "Fehlender Signaturinhalt",
  "invalid-signature-hex-format": "Ungültiges Signatur-Hex-Format",
  "unsupported-signature-format-not-signeddata": "Nicht unterstütztes Signaturformat - nicht SignedData",
  "signer-certificate-not-found": "Unterzeichnerzertifikat nicht gefunden",
  "no-certificates-in-signature": "Keine Zertifikate in der Signatur",
  "no-signer-info-in-pkcs7": "Keine Signaturinformationen in PKCS#7",
  "could-not-parse-signer-info": "Signaturinformationen konnten nicht analysiert werden",
  "not-calculated": "Nicht berechnet",
  "not-found-in-signature": "Nicht in Signatur gefunden"
 }
@@ -1,6 +1,7 @@
 {
-  "header-news": "New feature: Teams plan users can now integrate their own AWS S3 buckets for file storage",
+  "header-news": "New feature: Protect your account with Two-Factor Authentication (2FA) and enjoy the future of login with Passkeys — no passwords needed.",
  "header-news-btn": "Setup now",
  "sandbox-news": "This is a sandbox environment. Please do not use it for production purposes.",
  "create-account": "Create account",
  "login": "Login",
  "language": "Language",
@@ -39,8 +40,10 @@
  "save": "Save",
  "cancel": "Cancel",
  "upgrade-now": "Upgrade now",
  "contact-now": "Contact now",
  "upgrade-to": "Upgrade to",
  "plan": "Plan",
  "subscription-renew-warning": "Your subscription will expire in {{remainingDays}} days. Please renew your subscription.",
  "subscribe-card-teamplan": "Unlock the full power of collaboration! Create unlimited organizations, teams, and hierarchies. Share templates seamlessly across teams and assign custom user roles. Elevate your workflow today!",
  "subscribe-card-plan": "Unlock premium features starting at just {{premiumPrice}}/month. Enjoy enhanced performance and only {{addonPrice}} per additional credit after your included premium credits.",
  "user-name-limit-char": "To have a username less than 8 character please subscribe",
@@ -142,6 +145,7 @@
    "Quick send": "Quick send",
    "Edit": "Edit",
    "Share with team": "Share with team",
    "Share with user": "Share with colleague",
    "Share": "Share",
    "View": "View",
    "option": "Option",
@@ -153,7 +157,8 @@
    "Duplicate": "Duplicate",
    "daily-mail-quota": "Daily Email Quota",
    "Save as template": "Save as template",
-    "Fix & resend": "Fix & Resend"
+    "Fix & resend": "Fix & Resend",
    "Kiosk Mode": "Kiosk Mode"
  },
  "report-heading": {
    "Sr.No": "Sr.No",
@@ -244,6 +249,7 @@
  "API": "API",
  "api-token": "API token",
  "regenerate-token": "Regenerate live token",
  "remove-background": "Remove Background",
  "generate-token": "Generate live token",
  "view-docs": "View docs",
  "generate-token-alert": "Are you sure you want to regenerate token it will expire old token?",
@@ -304,7 +310,7 @@
  "send": "Send",
  "quick-send-alert-1": "All roles in this document are currently linked to contacts. To quick send copies of this template to multiple signers, please ensure that at least one role is not linked to any contact.",
  "quick-send-alert-2": "Please ensure there's at least one signature widget added for all recipients.",
-  "quick-send-alert-3": "Please add at least one role to this template in order to 'quick send' copies of it to multiple signers.",
+  "quick-send-alert-3": "Please add at least one role to this template.",
  "quick-send-alert-4": "Quick send reached limit.",
  "copy-link": "Copy link",
  "copy": "Copy",
@@ -341,7 +347,7 @@
  "verify-email-1": "Verify email",
  "resend": "Resend",
  "contact-details": "Contact details",
-  "verify-email": "Please verify your email !",
+  "verify-email": "Please verify your email to continue. This is a one-time step to confirm the email associated with your OpenSign account.",
  "send-otp": " Send OTP",
  "otp-placeholder": "Enter verification code received over email",
  "loading-doc": "Loading document..",
@@ -477,6 +483,7 @@
  "document-alert": "Document alert",
  "owner-subscription-expired": "Owner's subscription has expired.",
  "subscription-expired": "Subscription Expired",
  "owner-doesnt-have-paid-plan": "Owner doesn't have paid plan.",
  "alert-message": "Alert message",
  "document-decline": "Document decline",
  "decline-alert-1": "Are you sure want to decline this document ?",
@@ -669,7 +676,7 @@
  "public-template-mssg-1": "To integrate OpenSign into your React or Next.js project, simply run the following command:",
  "public-template-mssg-2": "Ensure you have npm or yarn set up in your project. If you're using Yarn, you can replace npm install with yarn add @opensign/react.",
  "public-template-mssg-3": "Need more details or examples?",
-  "public-template-mssg-4": "Visit the",
+  "public-template-mssg-4": "Visit the ",
  "public-template-mssg-5": " npm for the latest updates, detailed documentation, and version history.",
  "public-template-mssg-6": "Before you can use this code snippet, you must make this template public.",
  "public-template-mssg-7": "Before you can generate a public link you must make this template public.",
@@ -887,5 +894,133 @@
  "do-you-want-recreate-document?": "This will create a draft from this document with all fields intact. Are you sure you want to recreate this document?",
  "start-editing": "Start Editing",
  "unsaved-changes-discard-them?": "You have unsaved changes. Discard them?",
-  "yes-discard": "Yes, Discard"
+  "yes-discard": "Yes, Discard",
-}
+  "LTV-enabled-signatures": "LTV enabled signatures",
  "BETA": "BETA",
  "two-factor-authentication": "Two-Factor Authentication",
  "2fa-help-text": "Two-factor authentication adds an extra layer of security to your account by requiring more than just a password to sign in.",
  "2fa-help-bullet1": "Enhances security by requiring both your password and a verification code.",
  "2fa-help-bullet2": "The verification code is generated by an authenticator app on your device.",
  "2fa-help-bullet3": "Protects your account even if your password is compromised.",
  "setup-2fa": "Setup 2FA",
  "setup-2fa-again": "Setup 2FA again",
  "2fa-setup-intro": "Protect your account with two-factor authentication. When enabled, you'll need to enter a code from your authenticator app whenever you sign in.",
  "scan-qr-code": "Scan QR Code",
  "scan-qr-instructions": "Use an authenticator app like Google Authenticator, Microsoft Authenticator, or Authy to scan this QR code.",
  "manual-setup-instructions": "Can't scan the code? You can manually set up your authenticator app using this secret key:",
  "secret-key": "Secret Key",
  "copied-to-clipboard": "Copied to clipboard",
  "copy-to-clipboard": "Copy to clipboard",
  "recovery-codes": "Recovery Codes",
  "recovery-codes-instructions": "Save these recovery codes in a secure location. If you lose access to your authenticator app, you can use one of these one-time codes to sign in.",
  "download-recovery-codes": "Download Recovery Codes",
  "verification-code": "Verification Code",
  "enter-code-from-authenticator-app": "Enter the 6-digit code from your authenticator app",
  "verification-code-required": "Verification code is required",
  "verification-code-invalid": "Invalid verification code. Please try again.",
  "2fa-enabled": "2FA enabled",
  "2fa-enabled-successfully": "Two-factor authentication enabled successfully",
  "2fa-setup-complete": "Setup Complete!",
  "2fa-setup-complete-instructions": "Your account is now protected with two-factor authentication. You'll need to enter a verification code each time you sign in.",
  "two-factor-verification": "Two-Factor Verification",
  "enter-verification-code-instructions": "Enter the 6-digit verification code from your authenticator app to continue.",
  "recovery-code": "Recovery Code",
  "enter-recovery-code-help": "Enter one of your recovery codes",
  "recovery-code-required": "Recovery code is required",
  "use-verification-code-instead": "Use verification code instead",
  "use-recovery-code-instead": "Use recovery code instead",
  "regenerate-2fa-remove-existing": "Are you sure you want to regenerate two-factor authentication? This action will remove your existing authentication settings.",
  "use-passkey": "Sign in with passkey",
  "security-section": "Security",
  "passkey-authentication": "Passkey Authentication",
  "passkey-not-supported": "Your browser or device doesn't support passkey authentication",
  "passkey-description": "Passkeys provide a stronger, phishing-resistant alternative to passwords. You can use your fingerprint, face recognition, or device PIN to sign in securely.",
  "passkey-tooltip": "Passkeys are a simpler and more secure alternative to passwords. They use biometric data like fingerprints or facial recognition that's already stored on your device.",
  "security-section-help": "Manage security options including passkeys and authentication methods to protect your account.",
  "passkey-register": "Register passkey",
  "passkey-register-another": "Register another passkey",
  "passkey-registered": "Passkey registered",
  "passkey-registering": "Registering passkey...",
  "passkey-registered-success": "Passkey successfully registered!",
  "passkey-registration-failed": "Failed to register passkey",
  "passkey-auth-failed": "Passkey authentication failed",
  "passkey-missing-user-info": "User information is required",
  "passkeys-list": "Your Passkeys",
  "default-passkey": "Your Passkey",
  "passkey-rename": "Rename",
  "passkey-delete": "Delete",
  "passkey-rename-title": "Rename Passkey",
  "passkey-delete-title": "Delete Passkey",
  "passkey-delete-confirm": "Are you sure you want to delete passkey \"{{name}}\"?",
  "passkey-name": "Passkey Name",
  "passkey-name-placeholder": "Enter a descriptive name for this passkey",
  "passkey-renamed-success": "Passkey renamed successfully",
  "passkey-deleted-success": "Passkey deleted successfully",
  "passkey-rename-failed": "Failed to rename passkey",
  "passkey-delete-failed": "Failed to delete passkey",
  "processing": "Processing...",
  "today": "Today",
  "yesterday": "Yesterday",
  "days-ago": "{{days}} days ago",
  "verify-with-passkey": "Verify with passkey",
  "verify-with-otp": "Verify with OTP",
  "verification": "Verification",
  "verify-account": "Verify your account",
  "verify-identity": "Verify identity",
  "passkey-verification-failed": "Passkey verification failed. Please try again or use OTP.",
  "security-auth-help": {
    "p1":"Manage your account's security settings to keep your data safe. OpenSign supports advanced authentication methods to enhance account protection.",
    "2fa-auth-help":" Add an extra layer of security by enabling 2FA. This requires you to enter a verification code from an authenticator app after your password.",
    "passkey-auth-help":"Use passkeys for passwordless sign-in with biometric or device-based verification, providing both strong security and convenience."
  },
  "signer-already-present": "Signer already present",
  "kiosk-sign": "Kiosk Sign",
  "dont-have-access-to-template": "The template has been deleted or you don't have access. Please contact the sender.",
  "kiosk-info": "Kiosk Mode lets you collect in-person signatures quickly and efficiently. Ideal for trade shows, events, or walk-in scenarios where all signers are physically present. ",
  "learn-more": "Learn more",
  "finish-mssg":" Are you sure you want to finish the document ?",
  "review":"Review",
  "next-field":"Next Field",
  "required-mssg":"{{leftRequiredWidget}} of {{totalWidget}} fields left",
  "verify-document-signature": "Verify Document Signature",
  "select-pdf-document": "Select PDF Document",
  "selected-file": "Selected file",
  "verify-signature": "Verify Signature",
  "verification-status": "Verification Status",
  "verification-in-progress": "Verification in progress...",
  "verification-results-will-appear-here": "Verification results will appear here",
  "please-select-pdf": "Please select a valid PDF file",
  "please-select-file-to-verify": "Please select a file to verify",
  "no-signature-found": "No signature found in the document",
  "error-verifying-pdf": "Error verifying PDF",
  "signature-valid-basic": "Signature is valid",
  "signature-invalid-basic": "Signature is invalid",
  "all-signatures-verified-convincing": "Document Verified: All signatures have been successfully validated.",
  "some-signatures-invalid-basic": "Some signatures are invalid",
  "no-signatures-processed": "No signatures were processed",
  "unnamed-signature-field": "Unnamed Signature Field",
  "error-processing-signature": "Error processing signature",
  "signer-info-not-available": "Signer information not available",
  "cert-validity-not-checked": "Certificate validity not checked",
  "valid": "Valid",
  "expired-or-not-yet-valid": "Expired or not yet valid",
  "valid-from": "Valid from",
  "to": "to",
  "signer": "Signer",
  "issuer": "Issuer",
  "not-available": "Not available",
  "not-performed": "Not performed",
  "missing-acrofield-dict": "Missing acrofield dictionary",
  "signature-dictionary-not-found-or-invalid": "Signature dictionary not found or invalid",
  "missing-or-invalid-byterange": "Missing or invalid ByteRange",
  "missing-or-invalid-contents": "Missing or invalid Contents",
  "missing-signature-contents": "Missing signature contents",
  "invalid-signature-hex-format": "Invalid signature hex format",
  "unsupported-signature-format-not-signeddata": "Unsupported signature format - not SignedData",
  "signer-certificate-not-found": "Signer certificate not found",
  "no-certificates-in-signature": "No certificates in signature",
  "no-signer-info-in-pkcs7": "No signer info in PKCS#7",
  "could-not-parse-signer-info": "Could not parse signer info",
  "not-calculated": "Not calculated",
  "not-found-in-signature": "Not found in signature"
 }
@@ -1,6 +1,7 @@
 {
  "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",
  "sandbox-news": "Este es un entorno sandbox. Por favor, no lo utilice con fines de producción.",
  "create-account": "Crear cuenta",
  "login": "Iniciar sesión",
  "language": "Idioma",
@@ -39,8 +40,10 @@
  "save": "Guardar",
  "cancel": "Cancelar",
  "upgrade-now": "Mejorar ahora",
  "contact-now": "Contactar ahora",
  "upgrade-to": "Mejorar a",
  "plan": "Plan",
  "subscription-renew-warning": "Su suscripción vencerá en {{remainingDays}} días. Por favor, renueve su suscripción.",
  "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",
@@ -142,6 +145,7 @@
    "Quick send": "Envío rápido",
    "Edit": "Editar",
    "Share with team": "Compartir con el equipo",
    "Share with user": "Compartir con un colega",
    "Share": "Compartir",
    "View": "Ver",
    "option": "Opción",
@@ -153,7 +157,8 @@
    "Duplicate": "Duplicada",
    "daily-mail-quota": "Cuota diaria de correos electrónicos",
    "Save as template": "Guardar como plantilla",
-    "Fix & resend": "Corregir y reenviar"
+    "Fix & resend": "Corregir y reenviar",
    "Kiosk Mode": "Modo Kiosco"
  },
  "report-heading": {
    "Sr.No": "Nº",
@@ -245,6 +250,7 @@
  "API": "API",
  "api-token": "Token API",
  "regenerate-token": "Regenerar token activo",
  "remove-background": "Eliminar fondo",
  "generate-token": "Generar token activo",
  "view-docs": "Ver documentación",
  "generate-token-alert": "¿En definitiva quieres regenerar el token? Esto expirará el token antiguo.",
@@ -305,7 +311,7 @@
  "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": "Por favor, añade al menos un rol a esta plantilla para poder hacer un «envío rápido» de copias a varios firmantes.",
+  "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",
@@ -342,7 +348,7 @@
  "verify-email-1": "Verificar correo",
  "resend": "Reenviar",
  "contact-details": "Detalles del contacto",
-  "verify-email": "¡Por favor, verifica tu correo!",
+  "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...",
@@ -476,6 +482,7 @@
  "mail-not-delivered": "correo no entregado",
  "document-alert": "Alerta de documento",
  "owner-subscription-expired": "La suscripción del propietario ha expirado.",
  "owner-doesnt-have-paid-plan": "El propietario no tiene un plan de pago.",
  "subscription-expired": "Suscripción expirada",
  "alert-message": "Mensaje de alerta",
  "document-decline": "Rechazar documento",
@@ -669,7 +676,7 @@
  "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-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.",
@@ -887,5 +894,133 @@
  "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"
+  "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",
  "finish-mssg": "¿Está seguro de que desea finalizar el documento?",
  "review": "Revisar",
  "next-field": "Siguiente campo",
  "required-mssg": "{{leftRequiredWidget}} de {{totalWidget}} campos restantes",
  "verify-document-signature": "Verificar firma del documento",
  "select-pdf-document": "Seleccionar documento PDF",
  "selected-file": "Archivo seleccionado",
  "verify-signature": "Verificar firma",
  "verification-status": "Estado de verificación",
  "verification-in-progress": "Verificación en curso...",
  "verification-results-will-appear-here": "Los resultados de la verificación aparecerán aquí",
  "please-select-pdf": "Por favor, seleccione un archivo PDF válido",
  "please-select-file-to-verify": "Por favor, seleccione un archivo para verificar",
  "no-signature-found": "No se encontró ninguna firma en el documento",
  "error-verifying-pdf": "Error al verificar el PDF",
  "signature-valid-basic": "La firma es válida",
  "signature-invalid-basic": "La firma no es válida",
  "all-signatures-verified-convincing": "Documento verificado: Todas las firmas han sido validadas exitosamente.",
  "some-signatures-invalid-basic": "Algunas firmas no son válidas",
  "no-signatures-processed": "No se procesaron firmas",
  "unnamed-signature-field": "Campo de firma sin nombre",
  "error-processing-signature": "Error al procesar la firma",
  "signer-info-not-available": "Información del firmante no disponible",
  "cert-validity-not-checked": "Validez del certificado no verificada",
  "valid": "Válido",
  "expired-or-not-yet-valid": "Caducado o aún no válido",
  "valid-from": "Válido desde",
  "to": "hasta",
  "signer": "Firmante",
  "issuer": "Emisor",
  "not-available": "No disponible",
  "not-performed": "No realizado",
  "missing-acrofield-dict": "Falta el diccionario Acrofield",
  "signature-dictionary-not-found-or-invalid": "Diccionario de firmas no encontrado o inválido",
  "missing-or-invalid-byterange": "ByteRange faltante o inválido",
  "missing-or-invalid-contents": "Contenido faltante o inválido",
  "missing-signature-contents": "Falta el contenido de la firma",
  "invalid-signature-hex-format": "Formato hexadecimal de firma inválido",
  "unsupported-signature-format-not-signeddata": "Formato de firma no compatible - no SignedData",
  "signer-certificate-not-found": "Certificado del firmante no encontrado",
  "no-certificates-in-signature": "No hay certificados en la firma",
  "no-signer-info-in-pkcs7": "No hay información del firmante en PKCS#7",
  "could-not-parse-signer-info": "No se pudo analizar la información del firmante",
  "not-calculated": "No calculado",
  "not-found-in-signature": "No encontrado en la firma"
 }
@@ -1,6 +1,7 @@
 {
  "header-news": "Nouvelle fonctionnalité : les utilisateurs du forfait Teams peuvent désormais intégrer leurs propres compartiments AWS S3 pour le stockage de fichiers",
  "header-news-btn": "Configurer maintenant",
  "sandbox-news": "Ceci est un environnement sandbox. Veuillez ne pas l'utiliser à des fins de production.",
  "create-account": "Créer un compte",
  "login": "Se Connecter",
  "language": "Langue",
@@ -39,9 +40,11 @@
  "save": "Sauvegarder",
  "cancel": "Annuler",
  "upgrade-now": "Mettre à jour maintenant",
  "contact-now": "Contacter maintenant",
  "upgrade-to": "Mettre à niveau vers",
  "pro": "PRO",
  "plan": "Offre",
  "subscription-renew-warning": "Votre abonnement expirera dans {{remainingDays}} jours. Veuillez renouveler votre abonnement.",
  "subscribe-card-teamplan": "Libérez toute la puissance de la collaboration ! Créez un nombre illimité d'organisations, d'équipes et de hiérarchies. Partagez des modèles de manière transparente entre les équipes et attribuez des rôles d'utilisateur personnalisés. Améliorez votre flux de travail dès aujourd'hui !",
  "subscribe-card-plan": "Débloquez des fonctionnalités premium à partir de seulement {{premiumPrice}}/mois. Bénéficiez de performances améliorées et de seulement {{addonPrice}} par crédit supplémentaire après vos crédits premium inclus.",
  "user-name-limit-char": "Pour avoir un nom d'utilisateur de moins de 8 caractères s'il vous plaît s'abonner",
@@ -163,6 +166,7 @@
    "Quick send": "Envoi rapide",
    "Edit": "Modifier",
    "Share with team": "Partager avec l'équipe",
    "Share with user": "Partager avec un collègue",
    "Share": "Partager",
    "View": "Voir",
    "option": "Option",
@@ -174,7 +178,8 @@
    "Duplicate": "Double",
    "daily-mail-quota": "Quota d'e-mails quotidien",
    "Save as template": "Enregistrer comme modèle",
-    "Fix & resend": "Corriger et renvoyer"
+    "Fix & resend": "Corriger et renvoyer",
    "Kiosk Mode": "Mode Kiosque"
  },
  "report-help": {
    "Draft Documents": "Il s'agit de documents que vous avez commencés mais que vous n'avez pas finalisés pour envoi.",
@@ -244,6 +249,7 @@
  "API": "API",
  "api-token": "Jeton API",
  "regenerate-token": "Régénérer en direct jeton",
  "remove-background": "Supprimer l'arrière-plan",
  "generate-token": "Générer en direct jeton",
  "view-docs": "Afficher les documents",
  "generate-token-alert": "Êtes-vous sûr de vouloir régénérer le jeton, votre ancien jeton sera supprimer?",
@@ -304,7 +310,7 @@
  "send": "envoyer",
  "quick-send-alert-1": "Tous les rôles dans ce document sont actuellement liés à des contacts. Pour envoyer rapidement des copies de ce modèle à plusieurs signataires, veuillez vous assurer qu'au moins un rôle n'est lié à aucun contact.",
  "quick-send-alert-2": "Veuillez vous assurer qu'au moins un widget de signature est ajouté pour tous les destinataires.",
-  "quick-send-alert-3": "Veuillez ajouter au moins un rôle à ce modèle afin d'en « envoyer rapidement » des copies à plusieurs signataires.",
+  "quick-send-alert-3": "Veuillez ajouter au moins un rôle à ce template.",
  "quick-send-alert-4": "L'envoi rapide a atteint la limite.",
  "copy-link": "Copier le lien",
  "copy": "Copier",
@@ -341,7 +347,7 @@
  "verify-email-1": "Vérifier l'e-mail",
  "resend": "Renvoyer",
  "contact-details": "Coordonnées",
-  "verify-email": "Veuillez vérifier votre email!",
+  "verify-email": "Veuillez vérifier votre e-mail pour continuer. C'est une étape unique pour confirmer l'adresse e-mail associée à votre compte OpenSign.",
  "send-otp": "envoyer un code à usage unique",
  "otp-placeholder": "Entrez le code de vérification reçu par e-mail",
  "loading-doc": "Chargement du document..",
@@ -476,6 +482,7 @@
  "mail-not-delivered": "Courrier non distribué",
  "document-alert": "Alerte document",
  "owner-subscription-expired": "L'abonnement du propriétaire a expiré.",
  "owner-doesnt-have-paid-plan": "Le propriétaire n'a pas de plan payant.",
  "subscription-expired": "Abonnement expiré",
  "alert-message": "Message d'alerte",
  "document-decline": "Document-refusé",
@@ -669,7 +676,7 @@
  "public-template-mssg-1": "Pour intégrer OpenSign dans votre projet React ou Next.js, exécutez simplement la commande suivante :",
  "public-template-mssg-2": "Assurez-vous que npm ou Yarn est configuré dans votre projet. Si vous utilisez Yarn, vous pouvez remplacer npm install par Yarn Add @opensign/react.",
  "public-template-mssg-3": "Besoin de plus de détails ou d'exemples ?",
-  "public-template-mssg-4": "Visitez le",
+  "public-template-mssg-4": "Visitez le ",
  "public-template-mssg-5": "npm pour les dernières mises à jour, une documentation détaillée et l'historique des versions.",
  "public-template-mssg-6": "Avant de pouvoir utiliser cet extrait de code, vous devez rendre ce modèle public.",
  "public-template-mssg-7": "Avant de pouvoir générer un lien public, vous devez rendre ce modèle public.",
@@ -887,5 +894,133 @@
  "do-you-want-recreate-document?": "Cela créera un brouillon à partir de ce document avec tous les champs intacts. Êtes-vous sûr de vouloir recréer ce document ?",
  "start-editing": "Commencer l'édition",
  "unsaved-changes-discard-them?": "Vous avez des modifications non enregistrées. Les supprimer ?",
-  "yes-discard": "Oui, supprimer"
+  "yes-discard": "Oui, supprimer",
  "LTV-enabled-signatures": "Signatures avec LTV activée",
  "BETA": "BETA",
  "two-factor-authentication": "Authentification à deux facteurs",
  "2fa-help-text": "L'authentification à deux facteurs ajoute une couche de sécurité supplémentaire à votre compte en exigeant plus qu'un simple mot de passe pour se connecter.",
  "2fa-help-bullet1": "Renforce la sécurité en demandant à la fois votre mot de passe et un code de vérification.",
  "2fa-help-bullet2": "Le code de vérification est généré par une application d'authentification sur votre appareil.",
  "2fa-help-bullet3": "Protège votre compte même si votre mot de passe est compromis.",
  "setup-2fa": "Configurer 2FA",
  "setup-2fa-again": "Reconfigurer 2FA",
  "2fa-setup-intro": "Protégez votre compte avec l'authentification à deux facteurs. Une fois activée, vous devrez saisir un code provenant de votre application d'authentification à chaque connexion.",
  "scan-qr-code": "Scanner le code QR",
  "scan-qr-instructions": "Utilisez une application d'authentification comme Google Authenticator, Microsoft Authenticator ou Authy pour scanner ce code QR.",
  "manual-setup-instructions": "Vous ne pouvez pas scanner le code ? Configurez manuellement votre application d'authentification avec cette clé secrète :",
  "secret-key": "Clé secrète",
  "copied-to-clipboard": "Copié dans le presse-papiers",
  "copy-to-clipboard": "Copier dans le presse-papiers",
  "recovery-codes": "Codes de récupération",
  "recovery-codes-instructions": "Enregistrez ces codes de récupération dans un endroit sûr. Si vous perdez l'accès à votre application d'authentification, vous pourrez utiliser l'un de ces codes à usage unique pour vous connecter.",
  "download-recovery-codes": "Télécharger les codes de récupération",
  "verification-code": "Code de vérification",
  "enter-code-from-authenticator-app": "Saisissez le code à 6 chiffres de votre application d'authentification",
  "verification-code-required": "Le code de vérification est requis",
  "verification-code-invalid": "Code de vérification invalide. Veuillez réessayer.",
  "2fa-enabled": "2FA activé",
  "2fa-enabled-successfully": "Authentification à deux facteurs activée avec succès",
  "2fa-setup-complete": "Configuration terminée !",
  "2fa-setup-complete-instructions": "Votre compte est maintenant protégé par l'authentification à deux facteurs. Vous devrez entrer un code de vérification à chaque connexion.",
  "two-factor-verification": "Vérification en deux étapes",
  "enter-verification-code-instructions": "Saisissez le code de vérification à 6 chiffres de votre application d'authentification pour continuer.",
  "recovery-code": "Code de récupération",
  "enter-recovery-code-help": "Saisissez l'un de vos codes de récupération",
  "recovery-code-required": "Le code de récupération est requis",
  "use-verification-code-instead": "Utiliser le code de vérification à la place",
  "use-recovery-code-instead": "Utiliser le code de récupération à la place",
  "regenerate-2fa-remove-existing": "Êtes-vous sûr de vouloir régénérer l'authentification à deux facteurs ? Cette action supprimera vos paramètres d'authentification existants.",
  "use-passkey": "Se connecter avec une clé d'accès",
  "security-section": "Sécurité",
  "passkey-authentication": "Authentification par clé d'accès",
  "passkey-not-supported": "Votre navigateur ou appareil ne prend pas en charge l'authentification par clé d'accès",
  "passkey-description": "Les clés d'accès offrent une alternative plus sécurisée et résistante au phishing que les mots de passe. Vous pouvez utiliser votre empreinte digitale, reconnaissance faciale ou code PIN de l'appareil pour vous connecter en toute sécurité.",
  "passkey-tooltip": "Les clés d'accès sont une alternative plus simple et plus sécurisée aux mots de passe. Elles utilisent des données biométriques comme les empreintes digitales ou la reconnaissance faciale déjà stockées sur votre appareil.",
  "security-section-help": "Gérez les options de sécurité, y compris les clés d'accès et les méthodes d'authentification pour protéger votre compte.",
  "passkey-register": "Enregistrer une clé d'accès",
  "passkey-register-another": "Enregistrer une autre clé d'accès",
  "passkey-registered": "Clé d'accès enregistrée",
  "passkey-registering": "Enregistrement de la clé d'accès...",
  "passkey-registered-success": "Clé d'accès enregistrée avec succès !",
  "passkey-registration-failed": "Échec de l'enregistrement de la clé d'accès",
  "passkey-auth-failed": "Échec de l'authentification avec la clé d'accès",
  "passkey-missing-user-info": "Informations utilisateur requises",
  "passkeys-list": "Vos clés d'accès",
  "default-passkey": "Votre clé d'accès",
  "passkey-rename": "Renommer",
  "passkey-delete": "Supprimer",
  "passkey-rename-title": "Renommer la clé d'accès",
  "passkey-delete-title": "Supprimer la clé d'accès",
  "passkey-delete-confirm": "Êtes-vous sûr de vouloir supprimer la clé d'accès « {{name}} » ?",
  "passkey-name": "Nom de la clé d'accès",
  "passkey-name-placeholder": "Entrez un nom descriptif pour cette clé d'accès",
  "passkey-renamed-success": "Clé d'accès renommée avec succès",
  "passkey-deleted-success": "Clé d'accès supprimée avec succès",
  "passkey-rename-failed": "Échec du renommage de la clé d'accès",
  "passkey-delete-failed": "Échec de la suppression de la clé d'accès",
  "processing": "Traitement en cours...",
  "today": "Aujourd'hui",
  "yesterday": "Hier",
  "days-ago": "Il y a {{days}} jours",
  "verify-with-passkey": "Vérifier avec une passkey",
  "verify-with-otp": "Vérifier avec OTP",
  "verify-identity": "Vérifier l'identité",
  "verify-account": "Vérifiez votre identité",
  "verification": "Vérification",
  "passkey-verification-failed": "La vérification par passkey a échoué",
  "security-auth-help": {
    "p1": "Gérez les paramètres de sécurité de votre compte pour protéger vos données. OpenSign prend en charge des méthodes d'authentification avancées pour renforcer la protection de votre compte.",
    "2fa-auth-help": "Ajoutez une couche de sécurité supplémentaire en activant 2FA. Cela vous demandera de saisir un code de vérification provenant d’une application d’authentification après votre mot de passe.",
    "passkey-auth-help": "Utilisez des passkeys pour une connexion sans mot de passe grâce à une vérification biométrique ou basée sur l’appareil, offrant à la fois une sécurité renforcée et une grande commodité."
  },
  "signer-already-present": "Signataire déjà présent",
  "kiosk-sign": "Signature sur kiosque",
  "dont-have-access-to-template": "Le template a été supprimé ou vous n'y avez pas accès. Veuillez contacter l'expéditeur.",
  "kiosk-info": "Le Mode Kiosque vous permet de recueillir des signatures en personne rapidement et efficacement. Idéal pour les salons, événements ou situations où tous les signataires sont physiquement présents. ",
  "learn-more": "En savoir plus",
  "finish-mssg": "Êtes-vous sûr de vouloir terminer le document ?",
  "review": "Revoir",
  "next-field": "Champ suivant",
  "required-mssg":"{{leftRequiredWidget}} champs sur {{totalWidget}} restants",
  "verify-document-signature": "Vérifier la signature du document",
  "select-pdf-document": "Sélectionner le document PDF",
  "selected-file": "Fichier sélectionné",
  "verify-signature": "Vérifier la signature",
  "verification-status": "État de la vérification",
  "verification-in-progress": "Vérification en cours...",
  "verification-results-will-appear-here": "Les résultats de la vérification apparaîtront ici",
  "please-select-pdf": "Veuillez sélectionner un fichier PDF valide",
  "please-select-file-to-verify": "Veuillez sélectionner un fichier à vérifier",
  "no-signature-found": "Aucune signature trouvée dans le document",
  "error-verifying-pdf": "Erreur lors de la vérification du PDF",
  "signature-valid-basic": "La signature est valide",
  "signature-invalid-basic": "La signature est invalide",
  "all-signatures-verified-convincing": "Document vérifié : Toutes les signatures ont été validées avec succès.",
  "some-signatures-invalid-basic": "Certaines signatures sont invalides",
  "no-signatures-processed": "Aucune signature traitée",
  "unnamed-signature-field": "Champ de signature sans nom",
  "error-processing-signature": "Erreur lors du traitement de la signature",
  "signer-info-not-available": "Informations sur le signataire non disponibles",
  "cert-validity-not-checked": "Validité du certificat non vérifiée",
  "valid": "Valide",
  "expired-or-not-yet-valid": "Expiré ou pas encore valide",
  "valid-from": "Valide du",
  "to": "au",
  "signer": "Signataire",
  "issuer": "Émetteur",
  "not-available": "Non disponible",
  "not-performed": "Non effectué",
  "missing-acrofield-dict": "Dictionnaire Acrofield manquant",
  "signature-dictionary-not-found-or-invalid": "Dictionnaire de signatures introuvable ou invalide",
  "missing-or-invalid-byterange": "ByteRange manquant ou invalide",
  "missing-or-invalid-contents": "Contenu manquant ou invalide",
  "missing-signature-contents": "Contenu de la signature manquant",
  "invalid-signature-hex-format": "Format hexadécimal de signature invalide",
  "unsupported-signature-format-not-signeddata": "Format de signature non pris en charge - pas SignedData",
  "signer-certificate-not-found": "Certificat du signataire introuvable",
  "no-certificates-in-signature": "Aucun certificat dans la signature",
  "no-signer-info-in-pkcs7": "Aucune information sur le signataire dans PKCS#7",
  "could-not-parse-signer-info": "Impossible d'analyser les informations sur le signataire",
  "not-calculated": "Non calculé",
  "not-found-in-signature": "Introuvable dans la signature"
 }
@@ -1,6 +1,7 @@
 {
  "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",
  "sandbox-news": "Questo è un ambiente sandbox. Si prega di non utilizzarlo per scopi di produzione.",  
  "create-account": "Crea Account",
  "login": "Accedi",
  "language": "Lingua",
@@ -39,8 +40,10 @@
  "save": "Salva",
  "cancel": "Annulla",
  "upgrade-now": "Aggiorna ora",
  "contact-now": "Contatta ora",
  "upgrade-to": "Aggiorna a",
  "plan": "Piano",
  "subscription-renew-warning": "Il tuo abbonamento scadrà tra {{remainingDays}} giorni. Ti preghiamo di rinnovarlo.",
  "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",
@@ -142,6 +145,7 @@
    "Quick send": "Invio rapido",
    "Edit": "Modifica",
    "Share with team": "Condividi con il team",
    "Share with user": "Condividi con un collega",
    "Share": "Condividi",
    "View": "Visualizza",
    "option": "Opzione",
@@ -153,7 +157,8 @@
    "Duplicate": "Duplica",
    "daily-mail-quota": "Quota e-mail giornaliera",
    "Save as template": "Salva come modello",
-    "Fix & resend": "Correggi e reinvia"
+    "Fix & resend": "Correggi e reinvia",
    "Kiosk Mode": "Modalità Kiosk"
  },
  "report-heading": {
    "Sr.No": "Nr.",
@@ -244,6 +249,7 @@
  "API": "API",
  "api-token": "Token API",
  "regenerate-token": "Rigenera token live",
  "remove-background": "Rimuovi sfondo",
  "generate-token": "Genera token live",
  "view-docs": "Visualizza documenti",
  "generate-token-alert": "Sei sicuro di voler rigenerare il token? Questo invaliderà il vecchio token.",
@@ -304,7 +310,7 @@
  "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": "Aggiungi almeno un ruolo a questo modello per 'invio rapido' a più firmatari.",
+  "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",
@@ -341,7 +347,7 @@
  "verify-email-1": "Verifica email",
  "resend": "Reinvia",
  "contact-details": "Dettagli contatto",
-  "verify-email": "Verifica la tua email!",
+  "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...",
@@ -476,6 +482,7 @@
  "mail-not-delivered": "Mail non consegnata",
  "document-alert": "Avviso Documento",
  "owner-subscription-expired": "L'abbonamento del proprietario è scaduto.",
  "owner-doesnt-have-paid-plan": "Il proprietario non ha un piano a pagamento.",
  "subscription-expired": "Abbonamento Scaduto",
  "alert-message": "Messaggio di avviso",
  "document-decline": "Documento rifiutato",
@@ -669,7 +676,7 @@
  "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-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.",
@@ -887,5 +894,133 @@
  "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"
+  "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ù",
  "finish-mssg": "Sei sicuro di voler completare il documento?",
  "review": "Rivedere",
  "next-field": "Campo successivo",
  "required-mssg":"{{leftRequiredWidget}} di {{totalWidget}} campi rimanenti",
  "verify-document-signature": "Verifica firma documento",
  "select-pdf-document": "Seleziona documento PDF",
  "selected-file": "File selezionato",
  "verify-signature": "Verifica firma",
  "verification-status": "Stato verifica",
  "verification-in-progress": "Verifica in corso...",
  "verification-results-will-appear-here": "I risultati della verifica appariranno qui",
  "please-select-pdf": "Seleziona un file PDF valido",
  "please-select-file-to-verify": "Seleziona un file da verificare",
  "no-signature-found": "Nessuna firma trovata nel documento",
  "error-verifying-pdf": "Errore durante la verifica del PDF",
  "signature-valid-basic": "La firma è valida",
  "signature-invalid-basic": "La firma non è valida",
  "all-signatures-verified-convincing": "Documento Verificato: Tutte le firme sono state validate con successo.",
  "some-signatures-invalid-basic": "Alcune firme non sono valide",
  "no-signatures-processed": "Nessuna firma elaborata",
  "unnamed-signature-field": "Campo firma senza nome",
  "error-processing-signature": "Errore durante l'elaborazione della firma",
  "signer-info-not-available": "Informazioni firmatario non disponibili",
  "cert-validity-not-checked": "Validità certificato non verificata",
  "valid": "Valido",
  "expired-or-not-yet-valid": "Scaduto o non ancora valido",
  "valid-from": "Valido dal",
  "to": "al",
  "signer": "Firmatario",
  "issuer": "Emittente",
  "not-available": "Non disponibile",
  "not-performed": "Non eseguito",
  "missing-acrofield-dict": "Dizionario Acrofield mancante",
  "signature-dictionary-not-found-or-invalid": "Dizionario firme non trovato o non valido",
  "missing-or-invalid-byterange": "ByteRange mancante o non valido",
  "missing-or-invalid-contents": "Contenuto mancante o non valido",
  "missing-signature-contents": "Contenuto firma mancante",
  "invalid-signature-hex-format": "Formato esadecimale firma non valido",
  "unsupported-signature-format-not-signeddata": "Formato firma non supportato - non SignedData",
  "signer-certificate-not-found": "Certificato firmatario non trovato",
  "no-certificates-in-signature": "Nessun certificato nella firma",
  "no-signer-info-in-pkcs7": "Nessuna informazione firmatario in PKCS#7",
  "could-not-parse-signer-info": "Impossibile analizzare le informazioni del firmatario",
  "not-calculated": "Non calcolato",
  "not-found-in-signature": "Non trovato nella firma"
 }
@@ -0,0 +1 @@
 import "@testing-library/jest-dom";
@@ -1,7 +1,6 @@
-import React, { useState, useEffect, lazy } from "react";
+import { useState, useEffect, lazy } from "react";
 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";
@@ -30,6 +29,7 @@ const ManageSign = lazy(() => import("./pages/Managesign"));
 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 = () => {
@@ -67,7 +67,7 @@ function App() {
        <BrowserRouter>
          <Routes>
            <Route element={<ValidateRoute />}>
-              <Route exact path="/" element={<Login />} />
+              <Route exact path="/" element={<LazyPage Page={Login} />} />
                  <Route
                    path="/addadmin"
                    element={<LazyPage Page={AddAdmin} />}
@@ -106,10 +106,10 @@ function App() {
              element={<LazyPage Page={GuestLogin} />}
            />
            <Route path="/debugpdf" element={<LazyPage Page={DebugPdf} />} />
-            <Route
+              <Route
-              path="/forgetpassword"
+                path="/forgetpassword"
-              element={<LazyPage Page={ForgetPassword} />}
+                element={<LazyPage Page={ForgetPassword} />}
-            />
+              />
            <Route
              element={
                <ValidateSession>
@@ -117,10 +117,10 @@ function App() {
                </ValidateSession>
              }
            >
-              <Route
+                <Route
-                path="/changepassword"
+                  path="/changepassword"
-                element={<LazyPage Page={ChangePassword} />}
+                  element={<LazyPage Page={ChangePassword} />}
-              />
+                />
              <Route path="/form/:id" element={<Form />} />
              <Route path="/report/:id" element={<Report />} />
              <Route path="/dashboard/:id" element={<Dashboard />} />
@@ -165,7 +165,7 @@ function App() {
                path="/recipientSignPdf/:docId"
                element={<PdfRequestFiles />}
              />
-              <Route path="/users" element={<UserList />} />
+                <Route path="/users" element={<UserList />} />
              <Route
                path="/preferences"
                element={<LazyPage Page={Preferences} />}
@@ -1,275 +0,0 @@
 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;
@@ -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;
@@ -3,7 +3,9 @@ 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";
+import {
  emailRegex,
 } from "../constant/const";
 const BulkSendUi = (props) => {
  const { t } = useTranslation();
  const [forms, setForms] = useState([]);
@@ -20,15 +22,15 @@ const BulkSendUi = (props) => {
  //function to check atleast one signature field exist
  const signatureExist = async () => {
-    setIsDisableBulkSend(false);
+      setIsDisableBulkSend(false);
-    const getPlaceholder = props?.Placeholders;
+      const getPlaceholder = props?.Placeholders;
-    const checkIsSignatureExistt = getPlaceholder?.every((placeholderObj) =>
+      const checkIsSignatureExistt = getPlaceholder?.every((placeholderObj) =>
-      placeholderObj?.placeHolder?.some((holder) =>
+        placeholderObj?.placeHolder?.some((holder) =>
-        holder?.pos?.some((posItem) => posItem?.type === "signature")
+          holder?.pos?.some((posItem) => posItem?.type === "signature")
-      )
+        )
-    );
+      );
-    setIsSignatureExist(checkIsSignatureExistt);
+      setIsSignatureExist(checkIsSignatureExistt);
-    setIsLoader(false);
+      setIsLoader(false);
  };
  useEffect(() => {
    if (scrollOnNextUpdate && formRef.current) {
@@ -72,6 +74,7 @@ const BulkSendUi = (props) => {
    setForms(newForms);
  };
  const handleRemoveForm = (index) => {
    const updatedForms = forms.filter((_, i) => i !== index);
    setForms(updatedForms);
@@ -92,83 +95,82 @@ const BulkSendUi = (props) => {
  const handleSubmit = async (e) => {
    e.preventDefault();
    e.stopPropagation();
-    setIsSubmit(true);
+      setIsSubmit(true);
-    if (validateEmails(forms)) {
+      if (validateEmails(forms)) {
-      // Create a copy of Placeholders array from props.item
+        // Create a copy of Placeholders array from props.item
-      let Placeholders = [...props.Placeholders];
+        let Placeholders = [...props.Placeholders];
-      // Initialize an empty array to store updated documents
+        // Initialize an empty array to store updated documents
-      let Documents = [];
+        let Documents = [];
-      // Loop through each form
+        // Loop through each form
-      forms.forEach((form) => {
+        forms.forEach((form) => {
-        //checking if user enter email which already exist as a signer then add user in a signers array
+          //checking if user enter email which already exist as a signer then add user in a signers array
-        let existSigner = [];
+          let existSigner = [];
-        form.fields.map((data) => {
+          form.fields.map((data) => {
-          if (data.signer) {
+            if (data.signer) {
-            existSigner.push(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
+          // Map through the copied Placeholders array to update email values
-          return placeholder;
+          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
+          // Push a new document object with updated Placeholders into the Documents array
-        if (existSigner?.length > 0) {
+          if (existSigner?.length > 0) {
-          Documents.push({
+            Documents.push({
-            ...props.item,
+              ...props.item,
-            Placeholders: updatedPlaceholders,
+              Placeholders: updatedPlaceholders,
-            Signers: props.item.Signers
+              Signers: props.item.Signers
-              ? [...props.item.Signers, ...existSigner]
+                ? [...props.item.Signers, ...existSigner]
-              : [...existSigner]
+                : [...existSigner]
-          });
+            });
-        } else {
+          } else {
-          Documents.push({
+            Documents.push({
-            ...props.item,
+              ...props.item,
-            Placeholders: updatedPlaceholders,
+              Placeholders: updatedPlaceholders,
-            SignatureType: props.signatureType
+              SignatureType: props.signatureType
-          });
+            });
-        }
+          }
-      });
+        });
-      await batchQuery(Documents);
+        await batchQuery(Documents);
-    } else {
+      } else {
-      setIsSubmit(false);
+        setIsSubmit(false);
-    }
+      }
  };
  const batchQuery = async (Documents) => {
-    const token = {
+    const token =
-      "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+          { "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
+      ...token,
    };
    const params = { Documents: JSON.stringify(Documents) };
    try {
@@ -275,7 +277,8 @@ const BulkSendUi = (props) => {
              )}
            </>
          ) : (
-            <></>
+            <>
            </>
          )}
        </>
      )}
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import dp from "../assets/images/dp.png";
 import FullScreenButton from "./FullScreenButton";
 import { useNavigate } from "react-router";
@@ -31,6 +31,8 @@ const Header = ({ showSidebar, setIsMenu, isConsole }) => {
    initializeHead();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  async function initializeHead() {
      const applogo = await getAppLogo();
      if (applogo?.logo) {
@@ -170,17 +172,17 @@ const Header = ({ showSidebar, setIsMenu, isConsole }) => {
                      <i className="fa-light fa-user"></i> {t("profile")}
                    </span>
                  </li>
-                  <li
+                    <li
-                    onClick={() => {
+                      onClick={() => {
-                      setIsOpen(false);
+                        setIsOpen(false);
-                      navigate("/changepassword");
+                        navigate("/changepassword");
-                    }}
+                      }}
-                  >
+                    >
-                    <span>
+                      <span>
-                      <i className="fa-light fa-lock"></i>{" "}
+                        <i className="fa-light fa-lock"></i>{" "}
-                      {t("change-password")}
+                        {t("change-password")}
-                    </span>
+                      </span>
-                  </li>
+                    </li>
                </>
              )}
              <li onClick={closeDropdown}>
@@ -1,4 +1,3 @@
 import React from "react";
 import { Helmet } from "react-helmet";
 function Title({ title, drive }) {
@@ -1,10 +1,10 @@
 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 { ContextMenu } from "radix-ui";
 import { useNavigate } from "react-router";
 import Table from "react-bootstrap/Table";
-import * as HoverCard from "@radix-ui/react-hover-card";
+import { HoverCard } from "radix-ui";
 import ModalUi from "../../primitives/ModalUi";
 import FolderModal from "../shared/fields/FolderModal";
 import { useTranslation } from "react-i18next";
@@ -1,7 +1,10 @@
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
 function DefaultSignature(props) {
  const { t } = useTranslation();
   const defaultSignImg = useSelector((state) => state.widget.defaultSignImg);
   const myInitial = useSelector((state) => state.widget.myInitial)
  const tabName = ["my-signature", "my-initials"];
  const [activeTab, setActiveTab] = useState(0);
  const confirmToaddDefaultSign = (type) => {
@@ -69,15 +72,15 @@ function DefaultSignature(props) {
            <img
              alt="signature"
              className="w-full h-full object-contain"
-              src={props?.defaultSignImg}
+              src={defaultSignImg}
            />
          ) : (
            activeTab === 1 &&
-            (props?.myInitial ? (
+            (myInitial ? (
              <img
                alt="signature"
                className="w-full h-full object-contain"
-                src={props?.myInitial}
+                src={myInitial}
              />
            ) : (
              <div className="flex justify-center items-center h-full">
@@ -97,7 +100,7 @@ function DefaultSignature(props) {
          disabled={
            activeTab === 0 && !props?.isDefault
              ? true
-              : activeTab === 1 && !props.myInitial
+              : activeTab === 1 && !myInitial
                ? true
                : false
          }
@@ -12,7 +12,7 @@ function DropdownWidgetOption(props) {
  ]);
  const [minCount, setMinCount] = useState(0);
  const [maxCount, setMaxCount] = useState(0);
-  const [dropdownName, setDropdownName] = useState(props.type);
+  const [dropdownName, setDropdownName] = useState();
  const [isReadOnly, setIsReadOnly] = useState(false);
  const [isHideLabel, setIsHideLabel] = useState(false);
  const [status, setStatus] = useState("required");
@@ -22,7 +22,7 @@ function DropdownWidgetOption(props) {
  const resetState = () => {
    setDropdownOptionList(["option-1", "option-2"]);
-    setDropdownName(props.type);
+    setDropdownName(props.currWidgetsDetails?.options?.name || props.type);
    setIsReadOnly(false);
    setIsHideLabel(false);
    setMinCount(0);
@@ -30,11 +30,10 @@ function DropdownWidgetOption(props) {
    setDefaultCheckbox([]);
    setDefaultValue("");
  };
  useEffect(() => {
    if (
      props.currWidgetsDetails?.options?.name &&
-      props.currWidgetsDetails?.options?.values
+      props.currWidgetsDetails?.options?.values?.length > 0
    ) {
      setDropdownName(props.currWidgetsDetails?.options?.name);
      setDropdownOptionList(props.currWidgetsDetails?.options?.values);
@@ -116,16 +115,7 @@ function DropdownWidgetOption(props) {
      defaultData,
      isHideLabel
    );
-    //  props.setShowDropdown(false);
+    resetState();
    setDropdownOptionList(["option-1", "option-2"]);
    setDropdownName(props.type);
    //  props.setCurrWidgetsDetails({});
    setIsReadOnly(false);
    setIsHideLabel(false);
    setMinCount(0);
    setMaxCount(0);
    setDefaultCheckbox([]);
    setDefaultValue("");
  };
@@ -137,7 +127,6 @@ function DropdownWidgetOption(props) {
      return false;
    }
  };
  return (
    <ModalUi isOpen={props.showDropdown} title={props.title} showClose={false}>
      <div className="h-full p-[15px] text-base-content">
@@ -156,7 +145,6 @@ function DropdownWidgetOption(props) {
              onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
              onInput={(e) => e.target.setCustomValidity("")}
              required
              defaultValue={dropdownName}
              value={dropdownName}
              onChange={(e) => setDropdownName(e.target.value)}
              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
@@ -166,7 +154,7 @@ function DropdownWidgetOption(props) {
              {t("options")}
            </label>
            <div className="flex flex-col">
-              {dropdownOptionList.map((option, index) => (
+              {dropdownOptionList?.map((option, index) => (
                <div
                  key={index}
                  className="flex flex-row mb-[5px] items-center"
@@ -1,4 +1,7 @@
-import React, { useState, useRef } from "react";
+import {
  useState,
  useRef,
 } from "react";
 import {
  base64ToArrayBuffer,
  convertBase64ToFile,
@@ -24,9 +27,10 @@ const EditTemplate = ({
  template,
  onSuccess,
  setPdfArrayBuffer,
-  setPdfBase64Url
+  setPdfBase64Url,
 }) => {
-  const appName = "OpenSign™";
+  const appName =
    "OpenSign™";
  const { t } = useTranslation();
  const inputFileRef = useRef(null);
  const [formData, setFormData] = useState({
@@ -165,7 +169,10 @@ const EditTemplate = ({
    }
    let pdfUrl;
    if (uploadPdf?.base64) {
-      pdfUrl = await convertBase64ToFile(uploadPdf.name, uploadPdf.base64);
+      pdfUrl = await convertBase64ToFile(
        uploadPdf.name,
        uploadPdf.base64,
      );
      setUploadPdf((prev) => ({ ...prev, url: pdfUrl }));
      const pdfBuffer = base64ToArrayBuffer(uploadPdf.base64);
      setPdfArrayBuffer && setPdfArrayBuffer(pdfBuffer);
@@ -447,7 +454,11 @@ const EditTemplate = ({
                </Tooltip>
              </label>
              <div className="flex flex-col md:flex-row md:gap-4">
-                <div className={`flex items-center gap-2 ml-2 mb-1`}>
+                <div
                  className={
                    `flex items-center gap-2 ml-2 mb-1`
                  }
                >
                  <input
                    className="mr-[2px] op-radio op-radio-xs"
                    type="radio"
@@ -456,7 +467,11 @@ const EditTemplate = ({
                  />
                  <div className="text-center">{t("yes")}</div>
                </div>
-                <div className={`flex items-center gap-2 ml-2 mb-1`}>
+                <div
                  className={
                    `flex items-center gap-2 ml-2 mb-1`
                  }
                >
                  <input
                    className="mr-[2px] op-radio op-radio-xs"
                    type="radio"
@@ -1,6 +1,10 @@
 import React, { useState } from "react";
-import { handleToPrint } from "../../constant/Utils";
+import {
-import { emailRegex } from "../../constant/const";
+  handleToPrint,
 } from "../../constant/Utils";
 import {
  emailRegex,
 } from "../../constant/const";
 import Loader from "../../primitives/Loader";
 import ModalUi from "../../primitives/ModalUi";
 import { useTranslation } from "react-i18next";
@@ -37,7 +41,8 @@ function EmailComponent({
        setEmailList([]);
      }, 1500);
      setIsLoading(false);
-    } else {
+    }
    else {
      setIsLoading(false);
      setIsEmail(false);
      setIsAlert({
@@ -9,7 +9,7 @@ import {
  handleToPrint
 } from "../../constant/Utils";
 import "../../styles/signature.css";
-import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import { DropdownMenu } from "radix-ui";
 import ModalUi from "../../primitives/ModalUi";
 import Loader from "../../primitives/Loader";
 import { useTranslation } from "react-i18next";
@@ -28,8 +28,12 @@ function Header(props) {
  const enabledBackBtn = props?.disabledBackBtn === true ? false : true;
  //function for show decline alert
  const handleDeclinePdfAlert = async () => {
-    const currentDecline = { currnt: "Sure", isDeclined: true };
+    if (props?.handleDecline) {
-    props?.setIsDecline(currentDecline);
+      props.handleDecline();
    } else {
      const currentDecline = { currnt: "Sure", isDeclined: true };
      props?.setIsDecline(currentDecline);
    }
  };
  const handleDetelePage = async () => {
    props?.setIsUploadPdf && props?.setIsUploadPdf(true);
@@ -102,7 +106,6 @@ function Header(props) {
      console.error("Error merging PDF:", error);
    }
  };
  return (
    <div className="flex py-[5px]">
      {isMobile && props?.isShowHeader ? (
@@ -273,6 +276,20 @@ function Header(props) {
                          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={() =>
@@ -502,16 +519,6 @@ function Header(props) {
              </div>
            ) : (
              <div className="flex" data-tut="reactourFifth">
                {(!props?.templateId && !props?.isSelfSign) ||
                  (!props.isGuestSignFlow && (
                    <button
                      onClick={() => window.history.go(-2)}
                      type="button"
                      className="op-btn op-btn-ghost op-btn-sm mr-[3px]"
                    >
                      {t("back")}
                    </button>
                  ))}
                {props?.currentSigner && (
                  <>
                    {props?.templateId && (
@@ -1,8 +1,8 @@
-import React, { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef } from "react";
 import BorderResize from "./BorderResize";
 import PlaceholderBorder from "./PlaceholderBorder";
 import { Rnd } from "react-rnd";
 import {
  changeDateToMomentFormat,
  defaultWidthHeight,
  fontColorArr,
  fontsizeArr,
@@ -20,6 +20,9 @@ import moment from "moment";
 import "../../styles/opensigndrive.css";
 import ModalUi from "../../primitives/ModalUi";
 import { useTranslation } from "react-i18next";
 import { useDispatch } from "react-redux";
 import { setIsShowModal } from "../../redux/reducers/widgetSlice";
 import { themeColor } from "../../constant/const";
 const selectFormat = (data) => {
  switch (data) {
@@ -52,32 +55,6 @@ const selectFormat = (data) => {
  }
 };
 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 format
 const getDefaultFormat = (dateFormat) => dateFormat || "MM/dd/yyyy";
@@ -97,31 +74,24 @@ const getDefaultDate = (dateStr, format) => {
 };
 function Placeholder(props) {
  //'isTouchDevice' is used to detect whether a device has a touchscreen or is mouse-based
  const isTouchDevice = navigator.maxTouchPoints > 0;
  const { t } = useTranslation();
-  const [placeholderBorder, setPlaceholderBorder] = useState({ w: 0, h: 0 });
+  const dispatch = useDispatch();
-  const [isDraggingEnabled, setDraggingEnabled] = useState(true);
+  const widgetData =
    props.pos?.options?.defaultValue || props.pos?.options?.response;
  const [isDateModal, setIsDateModal] = useState(false);
  const [containerScale, setContainerScale] = useState();
  const holdTimeout = useRef(null);
  const startTime = useRef(null); // Track when the user starts holdings
  const [isDisableDragging, setIsDisableDragging] = useState(true);
  const [selectDate, setSelectDate] = useState({});
  const [dateFormat, setDateFormat] = useState([]);
  const [clickonWidget, setClickonWidget] = useState({});
-  const [startDate, setStartDate] = useState(
+  const startDate = props?.pos?.options?.response
-    props?.pos?.options?.response
+    ? getDefaultDate(
-      ? getDefaultDate(
+        props?.pos?.options?.response,
-          props?.pos?.options?.response,
+        props.pos?.options?.validation?.format
-          props.pos?.options?.validation?.format
+      )
-        )
+    : new Date();
-      : new Date()
+
  );
  const [getCheckboxRenderWidth, setGetCheckboxRenderWidth] = useState({
    width: null,
    height: null
  });
  useEffect(() => {
    const getPdfPageWidth = props.pdfOriginalWH.find(
      (data) => data.pageNumber === props.pageNumber
@@ -142,33 +112,16 @@ function Placeholder(props) {
  ];
  useEffect(() => {
-    const updateWidth = () => {
+    if (props?.pos?.type === "date") {
-      const rndElement = document.getElementById(props.pos.key);
+      const isDateChange = true;
-      if (rndElement) {
+      const dateObj = {
-        const { width, height } = rndElement.getBoundingClientRect();
+        date: startDate,
-        setGetCheckboxRenderWidth({ width: width, height: height });
+        format: getDefaultFormat(props.pos?.options?.validation?.format)
-      }
+      };
-    };
+      handleSaveDate(dateObj, isDateChange); //function to save date and format in local array
    }
  }, [widgetData]);
    // Delay to ensure rendering is complete
    const timer = setTimeout(updateWidth, 0);
    return () => clearTimeout(timer);
  }, [props.pos]);
  useEffect(() => {
    const onOutsideClick = () => {
      if (!isDraggingEnabled) {
        setDraggingEnabled(true);
      }
    };
    document.addEventListener("click", onOutsideClick);
    return () => {
      // Cleanup the event listener when the component unmounts
      document.removeEventListener("click", onOutsideClick);
    };
  }, [isDraggingEnabled]);
  //function change format array list with selected date and format
  const changeDateFormat = () => {
    const updateDate = [];
@@ -199,61 +152,40 @@ function Placeholder(props) {
  }, [selectDate]);
  //`handleWidgetIdandPopup` is used to set current widget id and open relative popup
-  const handleWidgetIdandPopup = () => {
+  const handleWidgetIdandPopup = async () => {
-    if (props.setSelectWidgetId) {
+    //'props.isOpenSignPad' variable is used to check flow to open signature pad for finish document
-      props.setSelectWidgetId(props.pos.key);
+    if (
-    }
+      props.isOpenSignPad &&
-
+      !props.isDragging &&
-    const widgetTypeExist = [
+      !props.pos.options?.isReadOnly &&
-      textInputWidget,
+      props.pos.type !== textWidget
-      "checkbox",
+    ) {
      "name",
      "company",
      "job title",
      "date",
      "email",
      textWidget
    ].includes(props.pos.type);
    if (widgetTypeExist) {
      setDraggingEnabled(false);
    }
    if (props.isOpenSignPad && !props.isDragging) {
      if (props?.ispublicTemplate) {
        props.handleUserDetails();
      } else {
-        if (props?.isNeedSign) {
+          if (props?.isNeedSign) {
-          //funcion is used to height widgets on top if two widgets on overlap
+            //funcion is used to highlight widgets on top when click any widget if two widgets on overlap
-          const getCurrentSignerPos = props.xyPosition.find(
+            const getCurrentSignerPos = props.xyPosition.find(
-            (x) => x.Id === props.uniqueId
+              (x) => x.Id === props.uniqueId
-          );
+            );
-          const updateZindex = handleHeighlightWidget(
+            const updateZindex = handleHeighlightWidget(
-            getCurrentSignerPos,
+              getCurrentSignerPos,
-            props.pos.key,
+              props.pos.key,
-            props.pageNumber
+              props.pageNumber
-          );
+            );
-          const updatesignerPos = props.xyPosition.map((x) =>
+            const updatesignerPos = props.xyPosition.map((x) =>
-            x.Id === props.uniqueId ? { ...x, placeHolder: updateZindex } : x
+              x.Id === props.uniqueId ? { ...x, placeHolder: updateZindex } : x
-          );
+            );
-          props.setXyPosition(updatesignerPos);
+            props.setXyPosition(updatesignerPos);
-        }
+          }
-        if (
+          dispatch(setIsShowModal({ [props.pos.key]: true }));
          ["signature", "stamp", "image", "initials"].includes(props.pos.type)
        ) {
          props.setIsSignPad(true);
          props.setSignKey(props.pos.key);
          props.setIsStamp(props.pos.isStamp);
        }
        if (props.pos.type === "initials") {
          props.setIsInitial(true);
        }
      }
    } else if (
      props.isPlaceholder &&
      !props.isDragging &&
      props.pos.type !== textWidget
    ) {
-      if (props.pos.key === props.selectWidgetId) {
+      if (props.pos.key === props?.currWidgetsDetails?.key) {
        props.handleLinkUser(props.data.Id);
        props.setUniqueId(props.data.Id);
        const checkIndex = props.xyPosition.findIndex(
@@ -261,31 +193,17 @@ function Placeholder(props) {
        );
        props.setIsSelectId(checkIndex || 0);
      }
-    } else if (!props.pos.type) {
+      //handle prefill 'text widget' click then save previos in tem variable after save or close button again assign current selected userId
-      if (
+    } else if (props.pos.type === textWidget) {
-        !props.pos.type &&
+      dispatch(setIsShowModal({ [props.pos.key]: true }));
-        props.isNeedSign &&
+      props.setTempSignerId(props?.uniqueId);
-        props.data.signerObjId === props.signerObjId
+      props.setUniqueId(props?.data?.Id);
      ) {
        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 widgetClickHandler = () => {
    //The else condition opens the signature pad if it's a request signature flow and the user clicking is identified as a signer.
    props.setCurrWidgetsDetails && props.setCurrWidgetsDetails(props.pos);
    //condition to check in request signing flow user click on agree or not
    if (props?.data?.signerObjId === props?.signerObjId && !props.isDragging) {
      if (!props.isAgree && !props.isSelfSign) {
        props.setIsAgreeTour && props.setIsAgreeTour(true);
@@ -297,7 +215,10 @@ function Placeholder(props) {
      handleWidgetIdandPopup();
    }
  };
  const handleOnClickPlaceholder = () => {
    //'props.isDragging' variable is used to checking if user take any widget and try to drag then in that case
    //onclick event call. so to prevent onclick and do not open unecessary modal open.
    //condition only for request signing flow and self signing flow then apply one click copy sign url of previous drawn signature
    if (props.isApplyAll) {
      props.setRequestSignTour && props.setRequestSignTour(true);
@@ -370,7 +291,6 @@ function Placeholder(props) {
    } else {
      //The else condition is used to handle the case when the user clicks on a widget and open signature pad to draw sign
      props.setCurrWidgetsDetails && props.setCurrWidgetsDetails(props.pos);
      props.setWidgetType(props.pos.type);
      handleWidgetIdandPopup();
    }
  };
@@ -414,8 +334,6 @@ function Placeholder(props) {
      props.setTempSignerId(props.uniqueId);
      props.setUniqueId(props?.data?.Id);
    }
    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
@@ -448,7 +366,7 @@ function Placeholder(props) {
      )
    ) {
      props.setIsPageCopy(true);
-      props.setSignKey(props.pos.key);
+      props.setCurrWidgetsDetails(props.pos);
    } else {
      //function to create new widget next to just widget
      handleCopyNextToWidget(
@@ -462,18 +380,6 @@ function Placeholder(props) {
    }
  };
  //function to save date and format after seleted new date in response field and after finish document it should be emebed new selected date instead of current date
  useEffect(() => {
    if (props.pos.type === "date") {
      const isDateChange = true;
      const dateObj = {
        date: startDate,
        format: getDefaultFormat(props.pos?.options?.validation?.format)
      };
      handleSaveDate(dateObj, isDateChange); //function to save date and format in local array
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [startDate]);
  //function to save date and format on local array onchange date and onclick format
  const handleSaveDate = (data, isDateChange) => {
    let updateDate = data.date;
@@ -499,8 +405,6 @@ function Placeholder(props) {
      props.data && props.data.Id,
      false,
      data?.format,
      null,
      null,
      props.fontSize || props.pos?.options?.fontSize || 12,
      props.fontColor || props.pos?.options?.fontColor || "black"
    );
@@ -609,7 +513,7 @@ function Placeholder(props) {
                e.stopPropagation();
                setClickonWidget(props.pos);
                if (props.data) {
-                  props.setSignKey(props.pos.key);
+                  props.setCurrWidgetsDetails(props.pos);
                  props.setUniqueId(props.data.Id);
                  const checkIndex = props.xyPosition.findIndex(
                    (data) => data.Id === props.data.Id
@@ -622,7 +526,7 @@ function Placeholder(props) {
                e.stopPropagation();
                setIsDateModal(!isDateModal);
                if (props.data) {
-                  props.setSignKey(props.pos.key);
+                  props.setCurrWidgetsDetails(props.pos);
                  props.setUniqueId(props.data.Id);
                  const checkIndex = props.xyPosition.findIndex(
                    (data) => data.Id === props.data.Id
@@ -659,7 +563,6 @@ function Placeholder(props) {
              //condition for signyour-self flow
              else {
                props.handleDeleteSign(props.pos.key);
                props.setIsStamp(false);
              }
            }}
            //for mobile and tablet touch event
@@ -672,7 +575,6 @@ function Placeholder(props) {
              //condition for signyour-self flow
              else {
                props.handleDeleteSign(props.pos.key);
                props.setIsStamp(false);
              }
            }}
            style={{ color: "#188ae2", right: "-8px", top: "-18px" }}
@@ -767,43 +669,7 @@ function Placeholder(props) {
      return "all-scroll";
    }
  };
-  const handleDragging = () => {
+
    //condition for request signing flow
    if (props.isNeedSign) {
      //enable dragging functionality only if isAlllowModify true on tab that widget and hold 1sec
      if (
        props.isAlllowModify &&
        props?.assignedWidgetId.includes(props.pos.key) &&
        props.data?.signerObjId === props.signerObjId
      ) {
        //if 'isTouchDevice' then handle dragging functionality conditionaly
        if (isTouchDevice) {
          return isDisableDragging;
        } else {
          //no need to handle dragging functionality it auto enable and working or mouse click devices
          return false;
        }
      } else if (
        //condition when 'isAlllowModify' is true and user add new widgets then handle dragging functionality like signyourself flow
        props.isAlllowModify &&
        !props?.assignedWidgetId.includes(props.pos.key) &&
        props.data?.signerObjId === props.signerObjId
      ) {
        return !isDraggingEnabled;
      } else {
        //if 'isAlllowModify' is false then disbale dragging functionality
        return true;
      }
    } //dragging enable in placeholder,template and not text widget flow
    else if (props.isPlaceholder && ![textWidget].includes(props.pos.type)) {
      return false;
    } //dragging depend on 'isDraggingEnabled' variable in self sign and signyourself flow
    else if (isTouchDevice) {
      return !isDraggingEnabled;
    } else {
      return false;
    }
  };
  //function to handle widget background color
  const handleBackground = () => {
    if (props.data) {
@@ -835,42 +701,38 @@ function Placeholder(props) {
    }
    if (!props.isNeedSign || props.isAlllowModify) handleOnClickPlaceholder();
  };
  const handleTouchStart = () => {
    clearTimeout(holdTimeout.current); // Ensure no previous timeouts are running
    startTime.current = Date.now(); // Store touch start time
    holdTimeout.current = setTimeout(() => {
      //handlle vibration and tab any widget and hold for 1 sec then show border outside widget and then user can able to drag
      if (isDisableDragging) {
        if (
          props.isNeedSign &&
          props.isAlllowModify &&
          props?.assignedWidgetId.includes(props.pos.key)
        ) {
          try {
            navigator.vibrate(200); // Vibrate for 200ms
          } catch (e) {
            console.log("error in  navigator.vibrate", e);
          }
          setIsDisableDragging(false);
          props.setSelectWidgetId(props.pos.key);
        } else if (!props.isNeedSign) {
          setIsDisableDragging(false);
        }
      }
    }, 1000); // Hold for 1 second before vibrating
  };
  const fontSize = calculateFont(props.pos.options?.fontSize);
  const fontColor = props.pos.options?.fontColor || "black";
  const handleDragging = () => {
    //condition for request signing flow
    if (props.isNeedSign) {
      //enable dragging functionality only if isAlllowModify true on tab that widget and hold 1sec
      if (
        props.isAlllowModify &&
        !props?.assignedWidgetId.includes(props.pos.key) &&
        props.data?.signerObjId === props.signerObjId
      ) {
        return false;
      } else {
        //if 'isAlllowModify' is false then disbale dragging functionality
        return true;
      }
    } else {
      return false;
    }
  };
  return (
    <>
      {/*  Check if a text widget (prefill type) exists. Once the user enters a value and clicks outside or the widget becomes non-selectable, it should appear as plain text (just like embedded text in a document). When the user clicks on the text again, it should become editable. */}
      {props.pos?.options?.response &&
-      props.pos.key !== props.selectWidgetId &&
+      props.pos.key !== props?.currWidgetsDetails?.key &&
      props.pos.type === textWidget ? (
        <span
          onClick={() => {
-            props.setSelectWidgetId && props.setSelectWidgetId(props.pos.key);
+            props.setCurrWidgetsDetails &&
              props.setCurrWidgetsDetails(props.pos);
          }}
          style={{
            fontFamily: "Arial, sans-serif",
@@ -919,7 +781,7 @@ function Placeholder(props) {
                  : false
                : props.pos.type !== radioButtonWidget &&
                  props.pos.type !== "checkbox" &&
-                  props.pos.key === props.selectWidgetId &&
+                  props.pos.key === props?.currWidgetsDetails?.key &&
                  true,
            bottomLeft: false,
            topLeft: false
@@ -932,7 +794,7 @@ function Placeholder(props) {
            cursor: getCursor(),
            zIndex:
              props.pos.type === "date"
-                ? props.pos.key === props.selectWidgetId
+                ? props.pos.key === props?.currWidgetsDetails?.key
                  ? 99 + 1
                  : 99
                : props?.pos?.zIndex
@@ -943,7 +805,6 @@ function Placeholder(props) {
            background: handleBackground()
          }}
          onDrag={() => {
            setDraggingEnabled(true);
            props.handleTabDrag && props.handleTabDrag(props.pos.key);
          }}
          size={{
@@ -958,10 +819,12 @@ function Placeholder(props) {
                ? "auto"
                : props.posHeight(props.pos, props.isSignYourself)
          }}
-          minHeight={calculateFont(props.pos.options?.fontSize, true)}
+          minHeight={
            props.pos.type !== "checkbox" &&
            calculateFont(props.pos.options?.fontSize, true)
          }
          maxHeight="auto"
          onResizeStart={() => {
            setDraggingEnabled(true);
            props.setIsResize && props.setIsResize(true);
          }}
          onResizeStop={(e, direction, ref) => {
@@ -981,9 +844,7 @@ function Placeholder(props) {
                props.isResize
              );
          }}
          disableDragging={handleDragging()}
          onDragStop={(event, dragElement) => {
            setIsDisableDragging(true);
            props.handleStop &&
              props.handleStop(
                event,
@@ -996,17 +857,9 @@ function Placeholder(props) {
            x: xPos(props.pos, props.isSignYourself),
            y: yPos(props.pos, props.isSignYourself)
          }}
-          onResize={(e, direction, ref) => {
+          disableDragging={handleDragging()}
            setPlaceholderBorder({
              w: ref.offsetWidth / (props.scale * containerScale),
              h: ref.offsetHeight / (props.scale * containerScale)
            });
          }}
          // onClick={() =>
          //   !props.isResize && !isMobile && handleOnClickPlaceholder()
          // }
        >
-          {props.pos.key === props.selectWidgetId &&
+          {props.pos.key === props?.currWidgetsDetails?.key &&
          ((props.isShowBorder &&
            ![radioButtonWidget, "checkbox"].includes(props.pos.type)) ||
            (props?.isAlllowModify &&
@@ -1033,59 +886,44 @@ function Placeholder(props) {
            )
          ) : (
            ![radioButtonWidget, "checkbox"].includes(props.pos.type) &&
-            props.pos.key === props.selectWidgetId && <BorderResize />
+            props.pos.key === props?.currWidgetsDetails?.key && <BorderResize />
          )}
-          {/* 1- Show a border if props.pos.key === props.selectWidgetId, indicating the current user's selected widget.
+          {/* 1- Show a ouline if props.pos.key === props?.currWidgetsDetails?.key, indicating the current user's selected widget.
-            2- If props.isShowBorder is true, display borders for all widgets. 
+            2- If props.isShowBorder is true, display ouline for all widgets. 
-            3- Use the combination of props?.isAlllowModify and !props?.assignedWidgetId.includes(props.pos.key) to determine when to show borders:
+            3- Use the combination of props?.isAlllowModify and !props?.assignedWidgetId.includes(props.pos.key) to determine when to show ouline:
-               1- When isAlllowModify is true, show borders.
+              3.1- When isAlllowModify is true, show ouline.
-               2- Do not display border for widgets already assigned (props.assignedWidgetId.includes(props.pos.key) is true).
+              3.2- Do not display ouline for widgets already assigned (props.assignedWidgetId.includes(props.pos.key) is true). 
-    */}
+            */}
          {props.pos.key === props.selectWidgetId &&
            (props.isShowBorder ||
              !isDisableDragging ||
              (props?.isAlllowModify &&
                !props?.assignedWidgetId.includes(props.pos.key))) && (
              <PlaceholderBorder
                setDraggingEnabled={setDraggingEnabled}
                pos={props.pos}
                isPlaceholder={props.isPlaceholder}
                getCheckboxRenderWidth={getCheckboxRenderWidth}
                scale={props.scale}
                containerScale={containerScale}
                placeholderBorder={placeholderBorder}
              />
            )}
          <div
-            className="flex items-stretch justify-center"
+            className={`${
              props.pos.key === props?.currWidgetsDetails?.key &&
              (props.isShowBorder ||
                (props?.isAlllowModify &&
                  !props?.assignedWidgetId.includes(props.pos.key)))
                ? "outline-[0.3px] outline-dashed outline-offset-[10px]"
                : ""
            } flex items-stretch justify-center`}
            style={{
              outlineColor: themeColor,
              left: xPos(props.pos, props.isSignYourself),
              top: yPos(props.pos, props.isSignYourself),
-              width:
+              width: "100%",
-                props.pos.type === radioButtonWidget ||
+              height: "100%",
                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={() => handleTouchEnd()}
+            onTouchEnd={() => handleOnClickPlaceholder()}
            onClick={() => handleOnClickPlaceholder()}
            onTouchStart={() => handleTouchStart()}
          >
-            {props.pos.key === props.selectWidgetId && <PlaceholderIcon />}
+            {props.pos.key === props?.currWidgetsDetails?.key && (
              <PlaceholderIcon />
            )}
            <PlaceholderType
              pos={props.pos}
              xyPosition={props.xyPosition}
              index={props.index}
              setXyPosition={props.setXyPosition}
              data={props.data}
              setSignKey={props.setSignKey}
              isShowDropdown={props?.isShowDropdown}
              isPlaceholder={props.isPlaceholder}
              isSignYourself={props.isSignYourself}
@@ -1096,8 +934,6 @@ function Placeholder(props) {
              isNeedSign={props.isNeedSign}
              setSelectDate={setSelectDate}
              selectDate={selectDate}
              setValidateAlert={props.setValidateAlert}
              setStartDate={setStartDate}
              startDate={startDate}
              handleSaveDate={handleSaveDate}
              xPos={props.xPos}
@@ -1,60 +0,0 @@
 import React from "react";
 import { themeColor } from "../../constant/const";
 import {
  defaultWidthHeight,
  isMobile,
  radioButtonWidget,
  resizeBorderExtraWidth,
  textWidget
 } from "../../constant/Utils";
 function PlaceholderBorder(props) {
  const getResizeBorderExtraWidth = resizeBorderExtraWidth();
  const defaultWidth = defaultWidthHeight(props.pos.type).width;
  const defaultHeight = defaultWidthHeight(props.pos.type).height;
  const width = () => {
    const getWidth =
      props.placeholderBorder.w || props.pos.Width || defaultWidth;
    return (
      getWidth * props.scale * props.containerScale + getResizeBorderExtraWidth
    );
  };
  const height = () => {
    const getHeight =
      props.placeholderBorder.h || props.pos.Height || defaultHeight;
    return (
      getHeight * props.scale * props.containerScale + getResizeBorderExtraWidth
    );
  };
  const handleMinWidth = () => {
    if (props.pos.type === "checkbox" || props.pos.type === radioButtonWidget) {
      return props.getCheckboxRenderWidth.width + getResizeBorderExtraWidth;
    } else {
      return width();
    }
  };
  const handleMinHeight = () => {
    if (props.pos.type === "checkbox" || props.pos.type === radioButtonWidget) {
      return props.getCheckboxRenderWidth.height + getResizeBorderExtraWidth;
    } else {
      return height();
    }
  };
  return (
    <div
      onMouseEnter={() => !isMobile && props?.setDraggingEnabled(false)}
      onTouchEnd={() =>
        props.pos.type === textWidget && props?.setDraggingEnabled(false)
      }
      className="absolute inline-block w-[14px] h-[14px]  border-[0.2px] overflow-hidden border-dashed"
      style={{
        borderColor: themeColor,
        minWidth: handleMinWidth() || 0,
        minHeight: handleMinHeight() || 0
      }}
    ></div>
  );
 }
 export default PlaceholderBorder;
@@ -1,903 +0,0 @@
 import React, { useEffect, useState, forwardRef, useRef } from "react";
 import {
  getMonth,
  getYear,
  onChangeHeightOfTextArea,
  onChangeInput,
  radioButtonWidget,
  range,
  textInputWidget,
  textWidget
 } from "../../constant/Utils";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import "../../styles/signature.css";
 import RegexParser from "regex-parser";
 import { emailRegex } from "../../constant/const";
 import { useTranslation } from "react-i18next";
 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 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 [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",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "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;
      if (props.pos?.options?.validation?.type === "regex") {
        regexObject = RegexParser(regexValidation);
      }
      // new RegExp(regexValidation);
      let isValidate = regexObject.test(textValue);
      if (!isValidate) {
        props?.setValidateAlert(true);
        inputRef.current.focus();
      }
    }
  };
  const handleInputBlur = () => {
    const validateType = props.pos?.options?.validation?.type;
    let regexValidation;
    if (validateType && validateType !== "text") {
      switch (validateType) {
        case "email":
          regexValidation = emailRegex;
          validateExpression(regexValidation);
          break;
        case "number":
          regexValidation = /^[0-9\s]*$/;
          validateExpression(regexValidation);
          break;
        default:
          regexValidation = props.pos?.options?.validation?.pattern || "";
          validateExpression(regexValidation);
      }
    }
  };
  const handleTextValid = (e) => {
    const textInput = e.target.value;
    setTextValue(textInput);
  };
  function checkRegularExpress(validateType) {
    switch (validateType) {
      case "email":
        setValidatePlaceholder("demo@gmail.com");
        break;
      case "number":
        setValidatePlaceholder("12345");
        break;
      case "text":
        setValidatePlaceholder("please enter text");
        break;
      default:
        setValidatePlaceholder("please enter value");
    }
  }
  useEffect(() => {
    if (type && type === "checkbox" && props.isNeedSign) {
      const isDefaultValue = props.pos.options?.defaultValue;
      if (isDefaultValue) {
        setSelectedCheckbox(isDefaultValue);
      }
    } else if (props.pos?.options?.hint) {
      setValidatePlaceholder(props.pos?.options.hint);
    } else if (props.pos?.options?.validation?.type) {
      checkRegularExpress(props.pos?.options?.validation?.type);
    }
    setTextValue(
      props.pos?.options?.response
        ? props.pos?.options?.response
        : props.pos?.options?.defaultValue
          ? props.pos?.options?.defaultValue
          : ""
    );
    setSelectOption(
      props.pos?.options?.response
        ? props.pos?.options?.response
        : props.pos?.options?.defaultValue
          ? props.pos?.options?.defaultValue
          : ""
    );
    // 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);
      }
      if (props.pos?.options?.hint) {
        setHint(props.pos?.options.hint);
      } else {
        setHint(props.pos?.type);
      }
    } else if ([textInputWidget].includes(props.pos?.type)) {
      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
      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>
    </div>
  ));
  ExampleCustomInput.displayName = "ExampleCustomInput";
  useEffect(() => {
    if (
      ["name", "email", "job title", "company"].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.xyPosition,
        null,
        props.setXyPosition,
        props.data.Id,
        isDefault
      );
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [type]);
  //function for show checked checkbox
  const selectCheckbox = (ind) => {
    const res = props.pos.options?.response;
    const defaultCheck = props.pos.options?.defaultValue;
    if (res && res?.length > 0) {
      const isSelectIndex = res.indexOf(ind);
      if (isSelectIndex > -1) {
        return true;
      } else {
        return false;
      }
      // }
    } else if (defaultCheck) {
      const isSelectIndex = defaultCheck.indexOf(ind);
      if (isSelectIndex > -1) {
        return true;
      } else {
        return false;
      }
    } else {
      return false;
    }
  };
  const handleRadioCheck = (data) => {
    const defaultData = props.pos.options?.defaultValue;
    if (textValue === data) {
      return true;
    } else if (defaultData === data) {
      return true;
    } else {
      return false;
    }
  };
  //function for set checked and unchecked value of checkbox
  const handleCheckboxValue = (isChecked, ind) => {
    let updateSelectedCheckbox = [],
      checkedList;
    let isDefaultValue, isDefaultEmpty;
    if (type === "checkbox") {
      updateSelectedCheckbox = selectedCheckbox ? selectedCheckbox : [];
      if (isChecked) {
        updateSelectedCheckbox.push(ind);
        setSelectedCheckbox(updateSelectedCheckbox);
      } else {
        checkedList = selectedCheckbox.filter((data) => data !== ind);
        setSelectedCheckbox(checkedList);
      }
      if (props.isNeedSign) {
        isDefaultValue = props.pos.options?.defaultValue;
      }
      if (isDefaultValue && isDefaultValue.length > 0) {
        isDefaultEmpty = true;
      }
      onChangeInput(
        checkedList ? checkedList : updateSelectedCheckbox,
        props.pos.key,
        props.xyPosition,
        props.index,
        props.setXyPosition,
        props.data && props.data.Id,
        false,
        null,
        isDefaultEmpty
      );
    }
  };
  //function to handle select radio widget and set value seletced by user
  const handleCheckRadio = (isChecked, data) => {
    let isDefaultValue,
      isDefaultEmpty,
      isRadio = true;
    if (props.isNeedSign) {
      isDefaultValue = props.pos.options?.defaultValue;
    }
    if (isDefaultValue) {
      isDefaultEmpty = true;
    }
    if (isChecked) {
      setTextValue(data);
    } else {
      setTextValue("");
    }
    onChangeInput(
      data,
      props.pos.key,
      props.xyPosition,
      props.index,
      props.setXyPosition,
      props.data && props.data.Id,
      false,
      null,
      isDefaultEmpty,
      isRadio
    );
  };
  //function to set onchange date
  const handleOnDateChange = (date) => {
    props.setStartDate(date);
  };
  //handle height on enter press in text area
  const handleEnterPress = (e) => {
    const height = 18;
    if (e.key === "Enter") {
      //function to save height of text area
      onChangeHeightOfTextArea(
        height,
        props.pos.type,
        props.pos.key,
        props.xyPosition,
        props.index,
        props.setXyPosition,
        props.data && props.data?.Id
      );
    }
  };
  switch (type) {
    case "signature":
      return props.pos.SignUrl ? (
        <img
          alt="signature"
          draggable="false"
          src={props.pos.SignUrl}
          className="w-full h-full select-none-cls "
        />
      ) : (
        <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":
      return props.pos.SignUrl ? (
        <img
          alt="stamp"
          draggable="false"
          src={props.pos.SignUrl}
          className="w-full h-full select-none-cls"
        />
      ) : (
        <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":
      return (
        <div style={{ zIndex: props.isSignYourself && "99" }}>
          {props.pos.options?.values?.map((data, ind) => {
            return (
              <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 rounded-[1px] `}
                  onBlur={handleInputBlur}
                  disabled={
                    props.isNeedSign &&
                    (props.pos.options?.isReadOnly ||
                      props.data?.signerObjId !== props.signerObjId)
                  }
                  type="checkbox"
                  checked={selectCheckbox(ind)}
                  onChange={(e) => {
                    if (e.target.checked) {
                      if (!props.isPlaceholder) {
                        const maxRequired =
                          props.pos.options?.validation?.maxRequiredCount;
                        const maxCountInt =
                          maxRequired && parseInt(maxRequired);
                        if (maxCountInt > 0) {
                          if (
                            selectedCheckbox &&
                            selectedCheckbox?.length <= maxCountInt - 1
                          ) {
                            handleCheckboxValue(e.target.checked, ind);
                          }
                        } else {
                          handleCheckboxValue(e.target.checked, ind);
                        }
                      }
                    } else {
                      handleCheckboxValue(e.target.checked, ind);
                    }
                  }}
                />
                {!props.pos.options?.isHideLabel && (
                  <label
                    htmlFor={`checkbox-${props.pos.key + ind}`}
                    style={{ fontSize: fontSize, color: fontColor }}
                    className="text-xs mb-0 text-center"
                  >
                    {data}
                  </label>
                )}
              </div>
            );
          })}
        </div>
      );
    case textInputWidget:
      return props.isSignYourself ||
        (props.isSelfSign && props.data?.signerObjId === props.signerObjId) ||
        (props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
        <textarea
          ref={inputRef}
          placeholder={validatePlaceholder || t("widgets-name.text")}
          rows={1}
          onKeyDown={handleEnterPress}
          value={textValue}
          onBlur={handleInputBlur}
          onChange={(e) => {
            setTextValue(e.target.value);
            onChangeInput(
              e.target.value,
              props.pos.key,
              props.xyPosition,
              props.index,
              props.setXyPosition,
              props.data && props.data?.Id,
              false
            );
          }}
          className={`${
            props.isNeedSign &&
            (props.pos.options?.isReadOnly ||
              props.data?.signerObjId !== props.signerObjId)
              ? " bg-black/68 select-none "
              : "" + textWidgetCls
          }`}
          style={{ fontSize: fontSize, color: fontColor }}
          disabled={
            props.isNeedSign &&
            (props.pos.options?.isReadOnly ||
              props.data?.signerObjId !== props.signerObjId)
          }
          cols="50"
        />
      ) : (
        <div style={textWidgetStyle} className="select-none-cls">
          <span>{textValue || widgetTypeTranslation}</span>
        </div>
      );
    case "dropdown":
      return props.data?.signerObjId === props.signerObjId ? (
        <select
          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) => {
            setSelectOption(e.target.value);
            onChangeInput(
              e.target.value,
              props.pos.key,
              props.xyPosition,
              props.index,
              props.setXyPosition,
              props.data && props.data?.Id,
              false
            );
          }}
          disabled={
            props.isNeedSign &&
            (props.pos.options?.isReadOnly ||
              props.data?.signerObjId !== props.signerObjId)
          }
        >
          {/* Default/Title option */}
          <option
            style={{ fontSize: fontSize, color: fontColor }}
            value=""
            disabled
            hidden
          >
            {props?.pos?.options?.name}
          </option>
          {props.pos?.options?.values?.map((data, ind) => {
            return (
              <option
                style={{ fontSize: fontSize, color: fontColor }}
                key={ind}
                value={data}
              >
                {data}
              </option>
            );
          })}
        </select>
      ) : (
        <div
          style={textWidgetStyle}
          className="select-none-cls flex justify-between items-center"
        >
          {props.pos?.options?.name
            ? props.pos.options.name
            : widgetTypeTranslation}
          <i className="fa-light fa-circle-chevron-down mr-1 "></i>
        </div>
      );
    case "initials":
      return props.pos.SignUrl ? (
        <img
          alt="initials"
          draggable="false"
          src={props.pos.SignUrl}
          className="w-full h-full select-none-cls"
        />
      ) : (
        <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={hint || widgetTypeTranslation}
          rows={1}
          onKeyDown={handleEnterPress}
          value={textValue}
          onChange={(e) => {
            const isDefault = false;
            handleTextValid(e);
            onChangeInput(
              e.target.value,
              props.pos.key,
              props.xyPosition,
              props.index,
              props.setXyPosition,
              props.data && props.data?.Id,
              isDefault
            );
          }}
          className={textWidgetCls}
          style={{ fontSize: fontSize, color: fontColor }}
          cols="50"
        />
      ) : (
        <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={hint || widgetTypeTranslation}
          rows={1}
          onKeyDown={handleEnterPress}
          value={textValue}
          onChange={(e) => {
            handleTextValid(e);
            onChangeInput(
              e.target.value,
              props.pos.key,
              props.xyPosition,
              props.index,
              props.setXyPosition,
              props.data && props.data?.Id,
              false
            );
          }}
          className={textWidgetCls}
          style={{ fontSize: fontSize, color: fontColor }}
          cols="50"
        />
      ) : (
        <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={hint || widgetTypeTranslation}
          rows={1}
          onKeyDown={handleEnterPress}
          value={textValue}
          onChange={(e) => {
            handleTextValid(e);
            onChangeInput(
              e.target.value,
              props.pos.key,
              props.xyPosition,
              props.index,
              props.setXyPosition,
              props.data && props.data?.Id,
              false
            );
          }}
          className={textWidgetCls}
          style={{ fontSize: fontSize, color: fontColor }}
          cols="50"
        />
      ) : (
        <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) ? (
        <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
          style={textWidgetStyle}
          className="select-none-cls overflow-hidden"
        >
          <span>
            {props.selectDate
              ? props.selectDate?.format
              : props.pos?.options?.validation?.format
                ? props.pos?.options?.validation?.format
                : "MM/dd/yyyy"}
          </span>
        </div>
      );
    case "image":
      return props.pos.SignUrl ? (
        <img
          alt="image"
          draggable="false"
          src={props.pos.SignUrl}
          className="w-full h-full select-none-cls"
        />
      ) : (
        <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={hint || widgetTypeTranslation}
          rows={1}
          onKeyDown={(e) => {
            // Prevent new line on Enter key press
            if (e.key === "Enter") {
              e.preventDefault();
            }
          }}
          value={textValue}
          onBlur={handleInputBlur}
          onChange={(e) => {
            handleTextValid(e);
            onChangeInput(
              e.target.value,
              props.pos.key,
              props.xyPosition,
              props.index,
              props.setXyPosition,
              props.data && props.data?.Id,
              false
            );
          }}
          className={textWidgetCls}
          style={{
            fontSize: fontSize,
            color: fontColor,
            fontFamily: "Arial, sans-serif"
          }}
          cols="1"
        />
      ) : (
        <div style={textWidgetStyle} className="select-none-cls">
          <span>{widgetTypeTranslation}</span>
        </div>
      );
    case radioButtonWidget:
      return (
        <div>
          {props.pos.options?.values.map((data, ind) => {
            return (
              <div
                key={ind}
                className="select-none-cls flex items-center text-center gap-0.5"
              >
                <input
                  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 &&
                    (props.pos.options?.isReadOnly ||
                      props.data?.signerObjId !== props.signerObjId)
                  }
                  checked={handleRadioCheck(data)}
                  onChange={(e) => {
                    if (!props.isPlaceholder) {
                      handleCheckRadio(e.target.checked, data);
                    }
                  }}
                />
                {!props.pos.options?.isHideLabel && (
                  <label
                    htmlFor={`radio-${props.pos.key + ind}`}
                    style={{ fontSize: fontSize, color: fontColor }}
                    className="text-xs mb-0"
                  >
                    {data}
                  </label>
                )}
              </div>
            );
          })}
        </div>
      );
    case textWidget:
      return (
        <textarea
          placeholder={t("widgets-name.text")}
          rows={1}
          onKeyDown={handleEnterPress}
          value={textValue}
          onBlur={handleInputBlur}
          onChange={(e) => {
            setTextValue(e.target.value);
            onChangeInput(
              e.target.value,
              props.pos.key,
              props.xyPosition,
              props.index,
              props.setXyPosition,
              props.data && props.data?.Id,
              false
            );
          }}
          className={textWidgetCls}
          style={{
            fontFamily: "Arial, sans-serif",
            fontSize: fontSize,
            color: fontColor
          }}
          cols="50"
        />
      );
    default:
      return props.pos.SignUrl ? (
        <div className="pointer-events-none">
          <img
            alt="image"
            draggable="false"
            src={props.pos.SignUrl}
            className="w-full h-full "
          />
        </div>
      ) : (
        <div className={widgetCls}>
          {props.pos.isStamp ? <div>stamp</div> : <div>signature</div>}
          {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>
      );
  }
 }
 export default PlaceholderType;
@@ -0,0 +1,512 @@
 import React, { useEffect, useState, forwardRef, useRef } from "react";
 import {
  getMonth,
  getYear,
  radioButtonWidget,
  textInputWidget,
  textWidget,
  months,
  years,
  selectCheckbox,
  checkRegularExpress
 } from "../../constant/Utils";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import "../../styles/signature.css";
 import { useTranslation } from "react-i18next";
 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 iswidgetEnable =
    props.isSignYourself ||
    ((props.isSelfSign || props.isNeedSign) &&
      props.data?.signerObjId === props.signerObjId);
  const widgetData =
    props.pos?.options?.defaultValue || props.pos?.options?.response;
  const widgetTypeTranslation = t(`widgets-name.${props?.pos?.type}`);
  const inputRef = useRef(null);
  const [widgetValue, setwidgetValue] = useState();
  const [selectedCheckbox, setSelectedCheckbox] = useState([]);
  const [hint, setHint] = useState("");
  const fontSize = props.calculateFont(props.pos.options?.fontSize);
  const fontColor = props.pos.options?.fontColor || "black";
  const textWidgetStyle = {
    fontSize: fontSize,
    color: fontColor,
    fontFamily: "Arial, sans-serif",
    overflow: "hidden",
    textAlign: "start",
    width: "100%",
    display: "flex",
    height: "100%"
  };
  useEffect(() => {
    if (type !== "date") {
      if (type && type === "checkbox") {
        setSelectedCheckbox(
          props?.pos?.options?.response ||
            props?.pos?.options?.defaultValue ||
            []
        );
      } else {
        if (widgetData) {
          setwidgetValue(widgetData);
        }
      }
      if (props.pos?.options?.hint) {
        setHint(props.pos?.options.hint);
      } else if (props.pos?.options?.validation?.type) {
        checkRegularExpress(props.pos?.options?.validation?.type, setHint);
      } else {
        setHint(props.pos?.type);
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [props.pos]);
  const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (
    <div
      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>
    </div>
  ));
  ExampleCustomInput.displayName = "ExampleCustomInput";
  const handleRadioCheck = (data) => {
    const defaultData = props.pos.options?.defaultValue;
    if (widgetValue === data) {
      return true;
    } else if (defaultData === data) {
      return true;
    } else {
      return false;
    }
  };
  switch (type) {
    case "signature":
      return props.pos.SignUrl ? (
        <img
          alt="signature"
          draggable="false"
          src={props.pos.SignUrl}
          className="w-full h-full select-none-cls "
        />
      ) : (
        <div className={widgetCls}>
          {props.pos.type && (
            <div
              style={{
                fontSize: props.pos
                  ? props.calculateFontsize(props.pos)
                  : "11px"
              }}
              className="font-medium"
            >
              {hint || widgetTypeTranslation}
            </div>
          )}
        </div>
      );
    case "stamp":
      return props.pos.SignUrl ? (
        <img
          alt="stamp"
          draggable="false"
          src={props.pos.SignUrl}
          className="w-full h-full select-none-cls"
        />
      ) : (
        <div className={widgetCls}>
          {props.pos.type && (
            <div
              style={{
                fontSize: props.pos
                  ? props.calculateFontsize(props.pos)
                  : "11px"
              }}
              className="font-medium"
            >
              {hint || widgetTypeTranslation}
            </div>
          )}
        </div>
      );
    case "checkbox":
      return (
        <div style={{ zIndex: props.isSignYourself && "99" }}>
          {props.pos.options?.values?.map((data, ind) => {
            return (
              <div key={ind} className="select-none-cls pointer-events-none">
                <label
                  htmlFor={`checkbox-${props.pos.key + ind}`}
                  style={{ fontSize: fontSize, color: fontColor }}
                  className={`mb-0 flex items-center gap-1 ${
                    ind > 0 ? "mt-[3px]" : "mt-[0px]"
                  }`}
                >
                  <input
                    id={`checkbox-${props.pos.key + ind}`}
                    style={{
                      width: fontSize,
                      height: fontSize
                    }}
                    className="op-checkbox rounded-[1px]"
                    disabled={
                      props.isNeedSign &&
                      (props.pos.options?.isReadOnly ||
                        props.data?.signerObjId !== props.signerObjId)
                    }
                    type="checkbox"
                    readOnly
                    checked={!!selectCheckbox(ind, selectedCheckbox)}
                  />
                  {!props.pos.options?.isHideLabel && (
                    <span className="leading-none">{data}</span>
                  )}
                </label>
              </div>
            );
          })}
        </div>
      );
    case textInputWidget:
      return props.isSignYourself || iswidgetEnable ? (
        <textarea
          ref={inputRef}
          placeholder={hint || t("widgets-name.text")}
          rows={1}
          value={widgetValue}
          className={`${
            props.pos.options?.isReadOnly ||
            props.data?.signerObjId !== props.signerObjId
              ? "select-none"
              : textWidgetCls
          }`}
          style={{
            fontSize: fontSize,
            color: fontColor,
            background: props.data?.blockColor,
            pointerEvents: "none"
          }}
          readOnly
          disabled={
            props.isNeedSign &&
            (props.pos.options?.isReadOnly ||
              props.data?.signerObjId !== props.signerObjId)
          }
          cols="50"
        />
      ) : (
        <div style={textWidgetStyle} className="select-none-cls">
          <span>{hint || widgetTypeTranslation}</span>
        </div>
      );
    case "dropdown":
      return (
        <div
          style={textWidgetStyle}
          className="select-none-cls flex justify-between items-center"
        >
          {widgetData || hint || widgetTypeTranslation}
          <i className="fa-light fa-circle-chevron-down mr-1 "></i>
        </div>
      );
    case "initials":
      return props.pos.SignUrl ? (
        <img
          alt="initials"
          draggable="false"
          src={props.pos.SignUrl}
          className="w-full h-full select-none-cls"
        />
      ) : (
        <div className={widgetCls}>
          {props.pos.type && (
            <div
              style={{
                fontSize: props.pos
                  ? props.calculateFontsize(props.pos)
                  : "11px"
              }}
              className="font-medium text-center"
            >
              {hint || widgetTypeTranslation}
            </div>
          )}
        </div>
      );
    case "name":
      return iswidgetEnable ? (
        <textarea
          readOnly
          ref={inputRef}
          placeholder={hint || widgetTypeTranslation}
          rows={1}
          value={widgetValue}
          className={textWidgetCls}
          style={{
            fontSize: fontSize,
            color: fontColor,
            pointerEvents: "none"
          }}
          cols="50"
        />
      ) : (
        <div className="flex h-full select-none-cls" style={textWidgetStyle}>
          <span> {props.pos?.options?.hint || widgetTypeTranslation}</span>
        </div>
      );
    case "company":
      return iswidgetEnable ? (
        <textarea
          readOnly
          ref={inputRef}
          placeholder={hint || widgetTypeTranslation}
          rows={1}
          value={widgetValue}
          className={textWidgetCls}
          style={{
            fontSize: fontSize,
            color: fontColor,
            pointerEvents: "none"
          }}
          cols="50"
        />
      ) : (
        <div style={textWidgetStyle} className="select-none-cls">
          <span>{hint || widgetTypeTranslation}</span>
        </div>
      );
    case "job title":
      return iswidgetEnable ? (
        <textarea
          readOnly
          ref={inputRef}
          placeholder={hint || widgetTypeTranslation}
          rows={1}
          value={widgetValue}
          className={textWidgetCls}
          style={{
            fontSize: fontSize,
            color: fontColor,
            pointerEvents: "none"
          }}
          cols="50"
        />
      ) : (
        <div style={textWidgetStyle} className="select-none-cls">
          <span>{hint || widgetTypeTranslation}</span>
        </div>
      );
    case "date":
      return iswidgetEnable ? (
        <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={true}
          closeOnScroll={true}
          className={`${selectWidgetCls} outline-[#007bff]`}
          selected={props?.startDate}
          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
          style={textWidgetStyle}
          className="select-none-cls overflow-hidden"
        >
          <span>
            {props.selectDate
              ? props.selectDate?.format
              : props.pos?.options?.validation?.format
                ? props.pos?.options?.validation?.format
                : "MM/dd/yyyy"}
          </span>
        </div>
      );
    case "image":
      return props.pos.SignUrl ? (
        <img
          alt="image"
          draggable="false"
          src={props.pos.SignUrl}
          className="w-full h-full select-none-cls"
        />
      ) : (
        <div className={widgetCls}>
          {props.pos.type && (
            <div
              style={{
                fontSize: props.pos
                  ? props.calculateFontsize(props.pos)
                  : "11px"
              }}
              className="font-medium text-center"
            >
              {hint || widgetTypeTranslation}
            </div>
          )}
        </div>
      );
    case "email":
      return iswidgetEnable ? (
        <textarea
          readOnly
          ref={inputRef}
          placeholder={hint || widgetTypeTranslation}
          rows={1}
          value={widgetValue}
          className={textWidgetCls}
          style={{
            fontSize: fontSize,
            color: fontColor,
            fontFamily: "Arial, sans-serif",
            pointerEvents: "none"
          }}
          disabled
          cols="1"
        />
      ) : (
        <div style={textWidgetStyle} className="select-none-cls">
          <span>{hint || widgetTypeTranslation}</span>
        </div>
      );
    case radioButtonWidget:
      return (
        <div>
          {props.pos.options?.values.map((data, ind) => {
            return (
              <div key={ind} className="select-none-cls pointer-events-none">
                <label
                  htmlFor={`radio-${props.pos.key + ind}`}
                  style={{
                    fontSize: fontSize,
                    color: fontColor,
                    marginTop: ind > 0 ? "5px" : "0px"
                  }}
                  className="text-xs mb-0 flex items-center gap-1 "
                >
                  <input
                    readOnly
                    id={`radio-${props.pos.key + ind}`}
                    style={{
                      width: fontSize,
                      height: fontSize,
                      lineHeight: 2
                    }}
                    className={`op-radio rounded-full border- border-black appearance-none bg-white inline-block align-middle relative ${
                      handleRadioCheck(data) ? "checked-radio" : ""
                    }`}
                    type="radio"
                    disabled={
                      props.isNeedSign &&
                      (props.pos.options?.isReadOnly ||
                        props.data?.signerObjId !== props.signerObjId)
                    }
                    checked={handleRadioCheck(data)}
                  />
                  {!props.pos.options?.isHideLabel && (
                    <span className="leading-none">{data}</span>
                  )}
                </label>
              </div>
            );
          })}
        </div>
      );
    case textWidget:
      return (
        <textarea
          readOnly
          placeholder={t("widgets-name.text")}
          rows={1}
          value={widgetValue}
          className={textWidgetCls}
          style={{
            fontFamily: "Arial, sans-serif",
            fontSize: fontSize,
            color: fontColor
          }}
          cols="50"
        />
      );
    default:
      return props.pos.SignUrl ? (
        <div className="pointer-events-none">
          <img
            alt="image"
            draggable="false"
            src={props.pos.SignUrl}
            className="w-full h-full "
          />
        </div>
      ) : (
        <div className={widgetCls}>
          {props.pos.isStamp ? <div>stamp</div> : <div>signature</div>}
          {props.pos.type && (
            <div
              style={{
                fontSize: props.pos
                  ? props.calculateFontsize(props.pos)
                  : "11px"
              }}
              className="font-medium"
            >
              {hint || widgetTypeTranslation}
            </div>
          )}
        </div>
      );
  }
 }
 export default PlaceholderType;
@@ -95,15 +95,12 @@ function RenderPdf(props) {
        return (
          <React.Fragment key={key}>
            {placeData.pageNumber === props.pageNumber &&
-              placeData.pos.map((pos) => {
+              placeData.pos.map((pos, ind) => {
                return (
                  pos && (
-                    <React.Fragment key={pos.key}>
+                    <React.Fragment key={ind}>
                      <Placeholder
                        pos={pos}
                        setSignKey={props.setSignKey}
                        setIsSignPad={props.setIsSignPad}
                        setIsStamp={props.setIsStamp}
                        handleSignYourselfImageResize={handleImageResize}
                        index={props.pageNumber}
                        xyPosition={props.signerPos}
@@ -121,11 +118,7 @@ function RenderPdf(props) {
                        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}
@@ -139,7 +132,6 @@ function RenderPdf(props) {
                        isAgree={props.isAgree}
                        handleTabDrag={props.handleTabDrag}
                        handleStop={props.handleStop}
                        setWidgetType={props.setWidgetType}
                        setUniqueId={props.setUniqueId}
                        setIsSelectId={props.setIsSelectId}
                        handleDeleteSign={props.handleDeleteSign}
@@ -156,6 +148,8 @@ function RenderPdf(props) {
                        setFontColor={props.setFontColor}
                        setRequestSignTour={props.setRequestSignTour}
                        calculateFontsize={calculateFontsize}
                        currWidgetsDetails={props?.currWidgetsDetails}
                        setTempSignerId={props.setTempSignerId}
                      />
                    </React.Fragment>
                  )
@@ -241,11 +235,9 @@ function RenderPdf(props) {
                                          <Placeholder
                                            pos={pos}
                                            setIsPageCopy={props.setIsPageCopy}
                                            setSignKey={props.setSignKey}
                                            handleDeleteSign={
                                              props.handleDeleteSign
                                            }
                                            setIsStamp={props.setIsStamp}
                                            handleTabDrag={props.handleTabDrag}
                                            handleStop={props.handleStop}
                                            handleSignYourselfImageResize={
@@ -270,18 +262,11 @@ function RenderPdf(props) {
                                            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
                                            }
@@ -309,6 +294,9 @@ function RenderPdf(props) {
                                            calculateFontsize={
                                              calculateFontsize
                                            }
                                            currWidgetsDetails={
                                              props?.currWidgetsDetails
                                            }
                                          />
                                        </React.Fragment>
                                      );
@@ -331,9 +319,7 @@ function RenderPdf(props) {
                                    key={id}
                                    pos={pos}
                                    setIsPageCopy={props.setIsPageCopy}
                                    setSignKey={props.setSignKey}
                                    handleDeleteSign={props.handleDeleteSign}
                                    setIsStamp={props.setIsStamp}
                                    handleTabDrag={props.handleTabDrag}
                                    handleStop={props.handleStop}
                                    handleSignYourselfImageResize={
@@ -343,19 +329,13 @@ function RenderPdf(props) {
                                    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
                                    }
@@ -374,6 +354,9 @@ function RenderPdf(props) {
                                    isFreeResize={false}
                                    isOpenSignPad={true}
                                    calculateFontsize={calculateFontsize}
                                    currWidgetsDetails={
                                      props?.currWidgetsDetails
                                    }
                                  />
                                )
                              );
@@ -388,7 +371,7 @@ function RenderPdf(props) {
              loading={t("loading-doc")}
              onLoadSuccess={props.pageDetails}
              onClick={() =>
-                props.setSelectWidgetId && props.setSelectWidgetId("")
+                props.setCurrWidgetsDetails && props.setCurrWidgetsDetails({})
              }
              file={pdfDataBase64}
            >
@@ -403,6 +386,7 @@ function RenderPdf(props) {
                onGetAnnotationsError={(error) => {
                  console.log("annotation error", error);
                }}
                className="select-none touch-callout-none"
              />
            </Document>
          </div>
@@ -453,11 +437,9 @@ function RenderPdf(props) {
                                          <Placeholder
                                            pos={pos}
                                            setIsPageCopy={props.setIsPageCopy}
                                            setSignKey={props.setSignKey}
                                            handleDeleteSign={
                                              props.handleDeleteSign
                                            }
                                            setIsStamp={props.setIsStamp}
                                            handleTabDrag={props.handleTabDrag}
                                            handleStop={props.handleStop}
                                            handleSignYourselfImageResize={
@@ -482,18 +464,11 @@ function RenderPdf(props) {
                                            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
                                            }
@@ -521,6 +496,9 @@ function RenderPdf(props) {
                                            calculateFontsize={
                                              calculateFontsize
                                            }
                                            currWidgetsDetails={
                                              props?.currWidgetsDetails
                                            }
                                          />
                                        </React.Fragment>
                                      );
@@ -543,9 +521,7 @@ function RenderPdf(props) {
                                  <Placeholder
                                    pos={pos}
                                    setIsPageCopy={props.setIsPageCopy}
                                    setSignKey={props.setSignKey}
                                    handleDeleteSign={props.handleDeleteSign}
                                    setIsStamp={props.setIsStamp}
                                    handleTabDrag={props.handleTabDrag}
                                    handleStop={(event, dragElement) =>
                                      props.handleStop(
@@ -560,19 +536,13 @@ function RenderPdf(props) {
                                    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
                                    }
@@ -592,6 +562,9 @@ function RenderPdf(props) {
                                    isFreeResize={false}
                                    isOpenSignPad={true}
                                    calculateFontsize={calculateFontsize}
                                    currWidgetsDetails={
                                      props?.currWidgetsDetails
                                    }
                                  />
                                </React.Fragment>
                              );
@@ -607,7 +580,7 @@ function RenderPdf(props) {
              loading={t("loading-doc")}
              onLoadSuccess={props.pageDetails}
              onClick={() =>
-                props.setSelectWidgetId && props.setSelectWidgetId("")
+                props.setCurrWidgetsDetails && props.setCurrWidgetsDetails({})
              }
              file={pdfDataBase64}
            >
@@ -9,7 +9,8 @@ function SelectLanguage(props) {
    { value: "es", text: "Española" }, //spanish
    { value: "fr", text: "Français" }, //french
    { value: "it", text: "Italiano" }, //italian
-    { value: "de", text: "Deutsch" } //german
+    { value: "de", text: "Deutsch" }, //german
    { value: "hi", text: "हिन्दी" } //hindi
  ];
  const defaultLanguage = i18next.language || "en";
  const [lang, setLang] = useState(defaultLanguage);
@@ -1,814 +0,0 @@
 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") {
        setIsDefaultSign(true);
        setIsTab("mysignature");
      } 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 ? (
                    <>
                      <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;
@@ -25,17 +25,28 @@ const WidgetNameModal = (props) => {
  const statusArr = ["Required", "Optional"];
  const [signatureType, setSignatureType] = useState([]);
  const handleHint = () => {
    const type = props.defaultdata?.type;
    if (type === "signature") {
      return "Draw signature";
    } else if (type === "stamp" || type === "image") {
      return `Upload ${type}`;
    } else if (type === "initials") {
      return "Draw initial";
    } else if (type === textInputWidget) {
      return "Enter text";
    } else {
      return `Enter ${type}`;
    }
  };
  useEffect(() => {
    if (props.defaultdata) {
      setFormdata({
        name: props.defaultdata?.options?.name || "",
        defaultValue: props.defaultdata?.options?.defaultValue || "",
        status: props.defaultdata?.options?.status || "required",
-        hint:
+        hint: props.defaultdata?.options?.hint || handleHint(),
          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
@@ -117,6 +128,7 @@ const WidgetNameModal = (props) => {
    }
  }
  const handleCheckboxChange = (index) => {
    // Update the state with the modified array
    setSignatureType((prev) =>
@@ -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;
@@ -105,49 +105,45 @@ const FolderModal = (props) => {
  // `handleCancel` is call when user click on folder name from path/tab in popup
  const removeTabListItem = async (e, i) => {
    e.preventDefault();
-    // setEditable(false);
+
-    if (!isAdd) {
+    setIsLoader(true);
-      setIsLoader(true);
+    setIsAdd(false);
-      let folderPtr;
+    if (i !== undefined) {
-      if (i) {
+      setFolderList([]);
-        setFolderList([]);
+      const list = tabList.filter((folder, j) => j <= i && folder);
-        let list = tabList.filter((itm, j) => {
+      const index = list.length - 1;
-          if (j <= i) {
+      const folderPtr = {
-            return itm;
+        __type: "Pointer",
-          }
+        className: props.folderCls,
-        });
+        objectId: list[index].objectId
-        let _len = list.length - 1;
+      };
-        folderPtr = {
+      setTabList(list);
          __type: "Pointer",
          className: props.folderCls,
          objectId: list[_len].objectId
        };
        setTabList(list);
      } else {
        setClickFolder({});
        setFolderList([]);
        setTabList([]);
      }
      fetchFolder(folderPtr);
    } else {
      setClickFolder({});
      setFolderList([]);
      setTabList([]);
      fetchFolder();
    }
  };
  // `handleCreate` is used to open folder creation form in popup
-  const handleCreate = () => {
+  const handleCreate = () => setIsAdd(true);
-    setIsAdd(!isAdd);
+  const handleBack = () => setIsAdd(false);
  };
  // `handleAddFolder` is call when user folder created successfully and it fetch folder list on the basis of folderPtr or without folderPtr
  const handleAddFolder = (newFolder) => {
-    props.setPdfData((prev) => [...prev, newFolder?.toJSON()]);
+    props.setPdfData((prev) => [...prev, newFolder]);
    if (clickFolder && clickFolder.ObjectId) {
      fetchFolder({
        __type: "Pointer",
        className: props.folderCls,
-        objectId: clickFolder.ObjectId
+        objectId: newFolder.objectId // clickFolder.ObjectId
      });
    } else {
      fetchFolder();
    }
-    handleCreate();
+    setClickFolder({ ObjectId: newFolder.objectId, Name: newFolder.Name });
    setTabList((prev) => [...prev, newFolder]);
    handleBack();
  };
  return (
    <div className="text-xs mt-2">
@@ -180,54 +176,57 @@ const FolderModal = (props) => {
              ))}
            <hr className="bg-[#8a8a8a] mt-[0.750rem]" />
          </div>
-          <div className="mt-2 mb-3">
+          <div className={`${!isAdd ? "mb-3" : ""} mt-2`}>
-            <div className="max-h-[210px] overflow-auto">
+            {!isAdd && (
-              {!isAdd && folderList.length > 0
+              <div className="max-h-[210px] overflow-auto">
-                ? folderList.map((folder) => (
+                {folderList.length > 0
-                    <div
+                  ? folderList.map((folder) => (
-                      key={folder.objectId}
+                      <div
-                      className={`${
+                        key={folder.objectId}
-                        folder.Type === "Folder"
+                        className={`${
-                          ? "cursor-pointer"
+                          folder.Type === "Folder"
-                          : "cursor-default"
+                            ? "cursor-pointer"
-                      } border-b-[1px] border-[#8a8a8a] py-2 mb-0.5"`}
+                            : "cursor-default"
-                      onClick={() =>
+                        } border-b-[1px] border-[#8a8a8a] py-2 mb-0.5"`}
-                        folder.Type === "Folder" && handleSelect(folder)
+                        onClick={() =>
-                      }
+                          folder.Type === "Folder" && handleSelect(folder)
-                    >
+                        }
-                      <div className="flex items-center gap-2">
+                      >
-                        {folder.Type === "Folder" ? (
+                        <div className="flex items-center gap-2">
-                          <svg
+                          {folder.Type === "Folder" ? (
-                            xmlns="http://www.w3.org/2000/svg"
+                            <svg
-                            viewBox="0 0 512 512"
+                              xmlns="http://www.w3.org/2000/svg"
-                            className="w-[1.4rem] h-[1.4rem] fill-current op-text-secondary"
+                              viewBox="0 0 512 512"
-                          >
+                              className="w-[1.4rem] h-[1.4rem] fill-current op-text-secondary"
-                            <path d="M64 480H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H288c-10.1 0-19.6-4.7-25.6-12.8L243.2 57.6C231.1 41.5 212.1 32 192 32H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64z" />
+                            >
-                          </svg>
+                              <path d="M64 480H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H288c-10.1 0-19.6-4.7-25.6-12.8L243.2 57.6C231.1 41.5 212.1 32 192 32H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64z" />
-                        ) : (
+                            </svg>
-                          <svg
+                          ) : (
-                            xmlns="http://www.w3.org/2000/svg"
+                            <svg
-                            viewBox="0 0 384 512"
+                              xmlns="http://www.w3.org/2000/svg"
-                            className="w-[1.4rem] h-[1.4rem] fill-current op-text-primary"
+                              viewBox="0 0 384 512"
-                          >
+                              className="w-[1.4rem] h-[1.4rem] fill-current op-text-primary"
-                            <path d="M374.629 150.627L233.371 9.373C227.371 3.371 219.23 0 210.746 0H64C28.652 0 0 28.652 0 64V448C0 483.345 28.652 512 64 512H320C355.348 512 384 483.345 384 448V173.254C384 164.767 380.629 156.629 374.629 150.627ZM224 22.629L361.375 160H248C234.781 160 224 149.234 224 136V22.629ZM368 448C368 474.467 346.469 496 320 496H64C37.531 496 16 474.467 16 448V64C16 37.533 37.531 16 64 16H208V136C208 158.062 225.938 176 248 176H368V448ZM96 264C96 268.406 99.594 272 104 272H280C284.406 272 288 268.406 288 264S284.406 256 280 256H104C99.594 256 96 259.594 96 264ZM280 320H104C99.594 320 96 323.594 96 328S99.594 336 104 336H280C284.406 336 288 332.406 288 328S284.406 320 280 320ZM280 384H104C99.594 384 96 387.594 96 392S99.594 400 104 400H280C284.406 400 288 396.406 288 392S284.406 384 280 384Z" />
+                            >
-                          </svg>
+                              <path d="M374.629 150.627L233.371 9.373C227.371 3.371 219.23 0 210.746 0H64C28.652 0 0 28.652 0 64V448C0 483.345 28.652 512 64 512H320C355.348 512 384 483.345 384 448V173.254C384 164.767 380.629 156.629 374.629 150.627ZM224 22.629L361.375 160H248C234.781 160 224 149.234 224 136V22.629ZM368 448C368 474.467 346.469 496 320 496H64C37.531 496 16 474.467 16 448V64C16 37.533 37.531 16 64 16H208V136C208 158.062 225.938 176 248 176H368V448ZM96 264C96 268.406 99.594 272 104 272H280C284.406 272 288 268.406 288 264S284.406 256 280 256H104C99.594 256 96 259.594 96 264ZM280 320H104C99.594 320 96 323.594 96 328S99.594 336 104 336H280C284.406 336 288 332.406 288 328S284.406 320 280 320ZM280 384H104C99.594 384 96 387.594 96 392S99.594 400 104 400H280C284.406 400 288 396.406 288 392S284.406 384 280 384Z" />
-                        )}
+                            </svg>
-                        <span className="font-semibold">{folder.Name}</span>
+                          )}
                          <span className="font-semibold">{folder.Name}</span>
                        </div>
                      </div>
-                    </div>
+                    ))
-                  ))
+                  : !isLoader && (
-                : !isLoader && (
+                      <div className="text-base-content text-center my-2">
-                    <div className="text-base-content text-center my-2">
+                        {t("no-data")}
-                      {t("no-data")}
+                      </div>
-                    </div>
+                    )}
-                  )}
+              </div>
-            </div>
+            )}
            {isAdd && (
              <CreateFolder
                parentFolderId={clickFolder && clickFolder.ObjectId}
                folderCls={props.folderCls}
                onSuccess={handleAddFolder}
                onBack={handleBack}
              />
            )}
            {isLoader && (
@@ -238,33 +237,26 @@ const FolderModal = (props) => {
          </div>
        </div>
        <hr />
-        <div className="flex justify-between items-center py-[.75rem] px-[1.25rem]">
+        {!isAdd && (
-          <div
+          <div className="flex justify-between items-center py-[.75rem] px-[1.25rem]">
-            className="op-btn op-btn-seconday op-btn-sm"
+            <div
-            title={t("save-here")}
+              className="op-btn op-btn-primary op-btn-sm"
-            onClick={handleCreate}
+              title={t("save-here")}
-          >
+              onClick={handleSubmit}
-            {isAdd ? (
+            >
-              <>
+              <i className="fa-light fa-save" aria-hidden="true"></i>
-                <i className="fa-light fa-arrow-left" aria-hidden="true"></i>
+              {t("save-here")}
-                <span className="text-xs">{t("back")}</span>
+            </div>
-              </>
+            <div
-            ) : (
+              className="op-btn op-btn-seconday op-btn-sm"
-              <>
+              title={t("add-folder")}
-                <i className="fa-light fa-square-plus" aria-hidden="true"></i>
+              onClick={handleCreate}
-                <span className="">{t("add-folder")}</span>
+            >
-              </>
+              <i className="fa-light fa-square-plus" aria-hidden="true"></i>
-            )}
+              <span className="">{t("add-folder")}</span>
            </div>
          </div>
-          <div
+        )}
            className="op-btn op-btn-primary op-btn-sm"
            title={t("save-here")}
            onClick={handleSubmit}
          >
            <i className="fa-light fa-save" aria-hidden="true"></i>
            {t("save-here")}
          </div>
        </div>
      </ModalUi>
    </div>
  );
@@ -125,50 +125,46 @@ const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
  // `handleCancel` is call when user click on folder name from path/tab in popup
  const removeTabListItem = async (e, i) => {
    e.preventDefault();
-    // setEditable(false);
+    setIsLoader(true);
-    if (!isAdd) {
+    setIsAdd(false);
-      setIsLoader(true);
+    if (i !== undefined) {
-      let folderPtr;
+      setFolderList([]);
-      if (i) {
+      const list = tabList.filter((folder, j) => j <= i && folder);
-        setFolderList([]);
+      const index = list.length - 1;
-        let list = tabList.filter((itm, j) => {
+      const folderPtr = {
-          if (j <= i) {
+        __type: "Pointer",
-            return itm;
+        className: folderCls,
-          }
+        objectId: list[index].objectId
-        });
+      };
        let _len = list.length - 1;
        folderPtr = {
          __type: "Pointer",
          className: folderCls,
          objectId: list[_len].objectId
        };
        setTabList(list);
      } else {
        setClickFolder({});
        setSelectedFolder({});
        setFolderList([]);
        setTabList([]);
      }
      fetchFolder(folderPtr);
      setTabList(list);
    } else {
      setClickFolder({});
      setSelectedFolder({});
      setFolderList([]);
      setTabList([]);
      fetchFolder();
    }
  };
  // `handleCreate` is used to open folder creation form in popup
-  const handleCreate = () => {
+  const handleCreate = () => setIsAdd(true);
-    setIsAdd(!isAdd);
+  const handleBack = () => setIsAdd(false);
-  };
+
  // `handleAddFolder` is call when user folder created successfully and it fetch folder list on the basis of folderPtr or without folderPtr
-  const handleAddFolder = () => {
+  const handleAddFolder = (newFolder) => {
    setFolderList([]);
    if (clickFolder && clickFolder.ObjectId) {
      fetchFolder({
        __type: "Pointer",
        className: folderCls,
-        objectId: clickFolder.ObjectId
+        objectId: newFolder.objectId // clickFolder.ObjectId
      });
    } else {
      fetchFolder();
    }
-    handleCreate();
+    setClickFolder({ ObjectId: newFolder.objectId, Name: newFolder.Name });
    setTabList((prev) => [...prev, newFolder]);
    handleBack();
  };
  return (
    <div className="text-xs mt-2 ">
@@ -246,53 +242,56 @@ const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
            <hr className="bg-[#8a8a8a] mt-[0.750rem]" />
          </div>
          <div className="mb-2">
-            <div className="max-h-[210px] overflow-auto">
+            {!isAdd && (
-              {!isAdd && folderList.length > 0
+              <div className="max-h-[210px] overflow-auto">
-                ? folderList.map((folder) => (
+                {folderList.length > 0
-                    <div
+                  ? folderList.map((folder) => (
-                      key={folder.objectId}
+                      <div
-                      className={`${
+                        key={folder.objectId}
-                        folder.Type === "Folder"
+                        className={`${
-                          ? "cursor-pointer"
+                          folder.Type === "Folder"
-                          : "cursor-default"
+                            ? "cursor-pointer"
-                      } border-b-[1px] border-[#8a8a8a] py-2 mb-0.5"`}
+                            : "cursor-default"
-                      onClick={() =>
+                        } border-b-[1px] border-[#8a8a8a] py-2 mb-0.5"`}
-                        folder.Type === "Folder" && handleSelect(folder)
+                        onClick={() =>
-                      }
+                          folder.Type === "Folder" && handleSelect(folder)
-                    >
+                        }
-                      <div className="flex items-center gap-2">
+                      >
-                        {folder.Type === "Folder" ? (
+                        <div className="flex items-center gap-2">
-                          <svg
+                          {folder.Type === "Folder" ? (
-                            xmlns="http://www.w3.org/2000/svg"
+                            <svg
-                            viewBox="0 0 512 512"
+                              xmlns="http://www.w3.org/2000/svg"
-                            className="w-[1.4rem] h-[1.4rem] fill-current op-text-secondary"
+                              viewBox="0 0 512 512"
-                          >
+                              className="w-[1.4rem] h-[1.4rem] fill-current op-text-secondary"
-                            <path d="M64 480H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H288c-10.1 0-19.6-4.7-25.6-12.8L243.2 57.6C231.1 41.5 212.1 32 192 32H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64z" />
+                            >
-                          </svg>
+                              <path d="M64 480H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H288c-10.1 0-19.6-4.7-25.6-12.8L243.2 57.6C231.1 41.5 212.1 32 192 32H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64z" />
-                        ) : (
+                            </svg>
-                          <svg
+                          ) : (
-                            xmlns="http://www.w3.org/2000/svg"
+                            <svg
-                            viewBox="0 0 384 512"
+                              xmlns="http://www.w3.org/2000/svg"
-                            className="w-[1.4rem] h-[1.4rem] fill-current op-text-primary"
+                              viewBox="0 0 384 512"
-                          >
+                              className="w-[1.4rem] h-[1.4rem] fill-current op-text-primary"
-                            <path d="M374.629 150.627L233.371 9.373C227.371 3.371 219.23 0 210.746 0H64C28.652 0 0 28.652 0 64V448C0 483.345 28.652 512 64 512H320C355.348 512 384 483.345 384 448V173.254C384 164.767 380.629 156.629 374.629 150.627ZM224 22.629L361.375 160H248C234.781 160 224 149.234 224 136V22.629ZM368 448C368 474.467 346.469 496 320 496H64C37.531 496 16 474.467 16 448V64C16 37.533 37.531 16 64 16H208V136C208 158.062 225.938 176 248 176H368V448ZM96 264C96 268.406 99.594 272 104 272H280C284.406 272 288 268.406 288 264S284.406 256 280 256H104C99.594 256 96 259.594 96 264ZM280 320H104C99.594 320 96 323.594 96 328S99.594 336 104 336H280C284.406 336 288 332.406 288 328S284.406 320 280 320ZM280 384H104C99.594 384 96 387.594 96 392S99.594 400 104 400H280C284.406 400 288 396.406 288 392S284.406 384 280 384Z" />
+                            >
-                          </svg>
+                              <path d="M374.629 150.627L233.371 9.373C227.371 3.371 219.23 0 210.746 0H64C28.652 0 0 28.652 0 64V448C0 483.345 28.652 512 64 512H320C355.348 512 384 483.345 384 448V173.254C384 164.767 380.629 156.629 374.629 150.627ZM224 22.629L361.375 160H248C234.781 160 224 149.234 224 136V22.629ZM368 448C368 474.467 346.469 496 320 496H64C37.531 496 16 474.467 16 448V64C16 37.533 37.531 16 64 16H208V136C208 158.062 225.938 176 248 176H368V448ZM96 264C96 268.406 99.594 272 104 272H280C284.406 272 288 268.406 288 264S284.406 256 280 256H104C99.594 256 96 259.594 96 264ZM280 320H104C99.594 320 96 323.594 96 328S99.594 336 104 336H280C284.406 336 288 332.406 288 328S284.406 320 280 320ZM280 384H104C99.594 384 96 387.594 96 392S99.594 400 104 400H280C284.406 400 288 396.406 288 392S284.406 384 280 384Z" />
-                        )}
+                            </svg>
-                        <span className="font-semibold">{folder.Name}</span>
+                          )}
                          <span className="font-semibold">{folder.Name}</span>
                        </div>
                      </div>
-                    </div>
+                    ))
-                  ))
+                  : !isLoader && (
-                : !isLoader && (
+                      <div className="text-base-content text-center my-2">
-                    <div className="text-base-content text-center my-2">
+                        {t("no-data")}
-                      {t("no-data")}
+                      </div>
-                    </div>
+                    )}
-                  )}
+              </div>
-            </div>
+            )}
            {isAdd && (
              <CreateFolder
                parentFolderId={clickFolder && clickFolder.ObjectId}
                folderCls={folderCls}
                onSuccess={handleAddFolder}
                onBack={handleBack}
              />
            )}
            {isLoader && (
@@ -303,33 +302,26 @@ const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
          </div>
        </div>
        <hr />
-        <div className="flex justify-between items-center py-[.75rem] px-[1.25rem]">
+        {!isAdd && (
-          <div
+          <div className="flex justify-between items-center py-[.75rem] px-[1.25rem]">
-            className="op-btn op-btn-seconday op-btn-sm"
+            <div
-            title={t("save-here")}
+              className="op-btn op-btn-primary op-btn-sm"
-            onClick={handleCreate}
+              title={t("save-here")}
-          >
+              onClick={handleSubmit}
-            {isAdd ? (
+            >
-              <>
+              <i className="fa-light fa-save" aria-hidden="true"></i>
-                <i className="fa-light fa-arrow-left" aria-hidden="true"></i>
+              {t("save-here")}
-                <span className="text-xs">{t("back")}</span>
+            </div>
-              </>
+            <div
-            ) : (
+              className="op-btn op-btn-seconday op-btn-sm"
-              <>
+              title={t("add-folder")}
-                <i className="fa-light fa-square-plus" aria-hidden="true"></i>
+              onClick={handleCreate}
-                <span className="">{t("add-folder")}</span>
+            >
-              </>
+              <i className="fa-light fa-square-plus" aria-hidden="true"></i>
-            )}
+              <span className="">{t("add-folder")}</span>
            </div>
          </div>
-          <div
+        )}
            className="op-btn op-btn-primary op-btn-sm"
            title={t("save-here")}
            onClick={handleSubmit}
          >
            <i className="fa-light fa-save" aria-hidden="true"></i>
            {t("save-here")}
          </div>
        </div>
      </ModalUi>
    </div>
  );
@@ -2,9 +2,19 @@ import React, { useEffect, useState } from "react";
 import AsyncSelect from "react-select/async";
 import { useTranslation } from "react-i18next";
 import axios from "axios";
 import { handleUnlinkSigner } from "../../../constant/Utils";
 const SelectSigners = (props) => {
  const { t } = useTranslation();
  const {
    signerPos,
    setSignerPos,
    signersData,
    setSignersData,
    uniqueId,
    isRemove,
    handleAddUser
  } = props;
  const [userList, setUserList] = useState([]);
  const [selected, setSelected] = useState();
  const [userData, setUserData] = useState({});
@@ -30,7 +40,7 @@ const SelectSigners = (props) => {
    //checking if user select no signer option from dropdown
    if (item) {
      //checking selected signer is already assign to the document or not
-      const alreadyAssign = props.signersData.some(
+      const alreadyAssign = signersData.some(
        (item2) => item2.objectId === item.value
      );
      if (alreadyAssign) {
@@ -49,7 +59,7 @@ const SelectSigners = (props) => {
  };
  const handleAdd = () => {
    if (userData && userData.objectId) {
-      props.details(userData);
+      handleAddUser(userData);
      if (props.closePopup) {
        props.closePopup();
      }
@@ -60,7 +70,13 @@ const SelectSigners = (props) => {
  };
  //function to use remove signer from assigned widgets in create template flow
  const handleRemove = () => {
-    props.handleUnlinkSigner();
+    handleUnlinkSigner(
      signerPos,
      setSignerPos,
      signersData,
      setSignersData,
      uniqueId
    );
    if (props.closePopup) {
      props.closePopup();
    }
@@ -161,7 +177,7 @@ const SelectSigners = (props) => {
          <button className="op-btn op-btn-primary" onClick={() => handleAdd()}>
            {t("submit")}
          </button>
-          {props.isExistSigner && props.handleUnlinkSigner && (
+          {props.isExistSigner && isRemove && (
            <button
              className="op-btn op-btn-accent op-btn-outline"
              onClick={() => handleRemove()}
@@ -117,7 +117,9 @@ const SignersInput = (props) => {
  };
  const loadOptions = async (inputValue) => {
    try {
-      const contactRes = await findContact(inputValue);
+      const contactRes = await findContact(
        inputValue,
      );
      if (contactRes) {
        const res = JSON.parse(JSON.stringify(contactRes));
        //compareArrays is a function where compare between two array (total signersList and dcument signers list)
@@ -152,9 +154,7 @@ const SignersInput = (props) => {
        {props.label ? props.label : t("signers")}
        {props.required && <span className="text-red-500 text-[13px]">*</span>}
        <span
-          className={`z-[${
+          className={`z-[${props?.helptextZindex ? props.helptextZindex : 30}] absolute ml-1 text-xs`}
            props?.helptextZindex ? props.helptextZindex : 30
          }] absolute ml-1 text-xs`}
        >
          <Tooltip
            id={`${props.label ? props.label : "signers"}-tooltip`}
@@ -3,7 +3,8 @@ import { useTranslation } from "react-i18next";
 import { NavLink } from "react-router";
 const Menu = ({ item, isOpen, closeSidebar }) => {
-  const appName = "OpenSign™";
+  const appName =
    "OpenSign™";
  const drivename = appName === "OpenSign™" ? "OpenSign™" : "";
  const { t } = useTranslation();
  return (
@@ -3,7 +3,8 @@ import { useTranslation } from "react-i18next";
 import { NavLink } from "react-router";
 const Submenu = ({ item, closeSidebar, toggleSubmenu, submenuOpen }) => {
-  const appName = "OpenSign™";
+  const appName =
    "OpenSign™";
  const drivename = appName === "OpenSign™" ? "OpenSign™" : "";
  const { t } = useTranslation();
  const { title, icon, children } = item;
@@ -1,13 +1,14 @@
 import axios from "axios";
 import moment from "moment";
 import React from "react";
 import { PDFDocument, rgb, degrees } from "pdf-lib";
 import Parse from "parse";
 import { appInfo } from "./appinfo";
 import { saveAs } from "file-saver";
 import printModule from "print-js";
 import fontkit from "@pdf-lib/fontkit";
-import { themeColor } from "./const";
+import {
  themeColor
 } from "./const";
 import { format, toZonedTime } from "date-fns-tz";
 export const fontsizeArr = [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28];
@@ -19,7 +20,38 @@ export const isTabAndMobile = window.innerWidth < 1023;
 export const textInputWidget = "text input";
 export const textWidget = "text";
 export const radioButtonWidget = "radio button";
 export function getEnv() {
  return window?.RUNTIME_ENV || {};
 }
 //function for create list of year for date widget
 export const range = (start, end, step) => {
  const range = [];
  for (let i = start; i <= end; i += step) {
    range.push(i);
  }
  return range;
 };
 //function for get year
 export const getYear = (date) => {
  const newYear = new Date(date).getFullYear();
  return newYear;
 };
 export const years = range(1950, getYear(new Date()) + 16, 1);
 export const months = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December"
 ];
 export const fileasbytes = async (filepath) => {
  const response = await fetch(filepath); // Adjust the path accordingly
  const arrayBuffer = await response.arrayBuffer();
@@ -135,12 +167,15 @@ export const pdfNewWidthFun = (divRef) => {
 };
 //`contractUsers` function is used to get contract_User details
-export const contractUsers = async () => {
+export const contractUsers = async (
 ) => {
  try {
    const url = `${localStorage.getItem("baseUrl")}functions/getUserDetails`;
    const parseAppId = localStorage.getItem("parseAppId");
-    const accesstoken = localStorage.getItem("accesstoken");
+    const accesstoken =
-    const token = { "X-Parse-Session-Token": accesstoken };
+      localStorage.getItem("accesstoken");
    const token =
          { "X-Parse-Session-Token": accesstoken };
    const headers = {
      headers: {
        "Content-Type": "application/json",
@@ -272,53 +307,100 @@ export const selectFormat = (data) => {
  }
 };
-export const addWidgetOptions = (type, signer) => {
+export const changeDateToMomentFormat = (format) => {
-  const defaultOpt = { name: type, status: "required" };
+  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";
  }
 };
 export const addWidgetOptions = (type, signer, widgetValue) => {
  const status = { status: "required" };
  switch (type) {
    case "signature":
-      return defaultOpt;
+      return { ...status, name: "Signature" };
    case "stamp":
-      return defaultOpt;
+      return { ...status, name: "Upload stamp" };
    case "checkbox":
      return {
-        ...defaultOpt,
+        ...status,
-        options: { isReadOnly: false, isHideLabel: false }
+        name: "Checkbox",
        isReadOnly: false,
        isHideLabel: false
      };
    case textInputWidget:
-      return { ...defaultOpt, isReadOnly: false };
+      return { ...status, name: "Text", isReadOnly: false };
    case "initials":
-      return defaultOpt;
+      return { ...status, name: "Initials" };
    case "name":
-      return { ...defaultOpt };
+      return {
        ...status,
        name: "Name",
        defaultValue: widgetValue ? widgetValue : ""
      };
    case "company":
-      return { ...defaultOpt };
+      return {
        ...status,
        name: "Company",
        defaultValue: widgetValue ? widgetValue : ""
      };
    case "job title":
-      return { ...defaultOpt };
+      return {
        ...status,
        name: "Job title",
        defaultValue: widgetValue ? widgetValue : ""
      };
    case "date": {
      const dateFormat = signer?.DateFormat
        ? selectFormat(signer?.DateFormat)
        : "MM/dd/yyyy";
      return {
-        ...defaultOpt,
+        ...status,
        name: "Date",
        response: getDate(signer?.DateFormat),
        validation: { format: dateFormat, type: "date-format" }
      };
    }
    case "image":
-      return defaultOpt;
+      return { ...status, name: "Upload image" };
    case "email":
-      return { ...defaultOpt, validation: { type: "email", pattern: "" } };
+      return {
        ...status,
        name: "Email",
        validation: { type: "email", pattern: "" },
        defaultValue: widgetValue ? widgetValue : ""
      };
    case "dropdown":
-      return defaultOpt;
+      return { ...status, name: "Dropdown" };
    case radioButtonWidget:
      return {
-        ...defaultOpt,
+        ...status,
        name: "Radio button",
        values: [],
        isReadOnly: false,
        isHideLabel: false
      };
    case textWidget:
-      return defaultOpt;
+      return { ...status, name: "Text" };
    default:
      return {};
  }
@@ -327,30 +409,30 @@ export const addWidgetOptions = (type, signer) => {
 export const addWidgetSelfsignOptions = (type, getWidgetValue, owner) => {
  switch (type) {
    case "signature":
-      return { name: "signature" };
+      return { name: "Signature" };
    case "stamp":
-      return { name: "stamp" };
+      return { name: "Upload stamp" };
    case "checkbox":
-      return { name: "checkbox" };
+      return { name: "Checkbox" };
    case textWidget:
-      return { name: "text" };
+      return { name: "Text" };
    case "initials":
-      return { name: "initials" };
+      return { name: "Initials" };
    case "name":
      return {
-        name: "name",
+        name: "Name",
        defaultValue: getWidgetValue(type),
        validation: { type: "text", pattern: "" }
      };
    case "company":
      return {
-        name: "company",
+        name: "Company",
        defaultValue: getWidgetValue(type),
        validation: { type: "text", pattern: "" }
      };
    case "job title":
      return {
-        name: "job title",
+        name: "Job title",
        defaultValue: getWidgetValue(type),
        validation: { type: "text", pattern: "" }
      };
@@ -359,16 +441,16 @@ export const addWidgetSelfsignOptions = (type, getWidgetValue, owner) => {
        ? selectFormat(owner?.DateFormat)
        : "MM/dd/yyyy";
      return {
-        name: "date",
+        name: "Date",
        response: getDate(owner?.DateFormat),
        validation: { format: dateFormat, type: "date-format" }
      };
    }
    case "image":
-      return { name: "image" };
+      return { name: "Upload image" };
    case "email":
      return {
-        name: "email",
+        name: "Email",
        defaultValue: getWidgetValue(type),
        validation: { type: "email", pattern: "" }
      };
@@ -429,10 +511,6 @@ export const defaultWidthHeight = (type) => {
  }
 };
 export const resizeBorderExtraWidth = () => {
  return 20;
 };
 export async function getBase64FromUrl(url, autosign) {
  const data = await fetch(url);
  const blob = await data.blob();
@@ -530,7 +608,7 @@ export const signPdfFun = async (
  documentId,
  signerObjectId,
  objectId,
-  widgets
+  widgets,
 ) => {
  let isCustomCompletionMail = false;
  try {
@@ -539,7 +617,10 @@ export const signPdfFun = async (
    if (tenantDetails && tenantDetails === "user does not exist!") {
      return { status: "error", message: "User does not exist." };
    } else {
-      if (tenantDetails?.CompletionBody && tenantDetails?.CompletionSubject) {
+      if (
        tenantDetails?.CompletionBody &&
        tenantDetails?.CompletionSubject
      ) {
        isCustomCompletionMail = true;
      }
    }
@@ -777,8 +858,6 @@ export const onChangeInput = (
  userId,
  initial,
  dateFormat,
  isDefaultEmpty,
  isRadio,
  fontSize,
  fontColor
 ) => {
@@ -815,21 +894,13 @@ export const onChangeInput = (
                  }
                }
              };
            } else if (isDefaultEmpty) {
              return {
                ...position,
                options: {
                  ...position.options,
                  response: value,
                  defaultValue: isRadio ? "" : []
                }
              };
            } else {
              return {
                ...position,
                options: {
                  ...position.options,
-                  response: value
+                  response: value,
                  defaultValue: ""
                }
              };
            }
@@ -876,7 +947,8 @@ export const onChangeInput = (
            ...positionData,
            options: {
              ...positionData.options,
-              response: value
+              response: value,
              defaultValue: ""
            }
          };
        }
@@ -983,21 +1055,21 @@ export const calculateInitialWidthHeight = (widgetData) => {
  document.body.removeChild(span);
  return { getWidth: width, getHeight: height };
 };
-export const addInitialData = (signerPos, setXyPosition, value, userId) => {
+export const widgetDataValue = (type, value) => {
-  function widgetDataValue(type) {
+  switch (type) {
-    switch (type) {
+    case "name":
-      case "name":
+      return value?.Name;
-        return value?.Name;
+    case "company":
-      case "company":
+      return value?.Company;
-        return value?.Company;
+    case "job title":
-      case "job title":
+      return value?.JobTitle;
-        return value?.JobTitle;
+    case "email":
-      case "email":
+      return value?.Email;
-        return value?.Email;
+    default:
-      default:
+      return "";
        return "";
    }
  }
 };
 export const addInitialData = (signerPos, setXyPosition, value, userId) => {
  return signerPos.map((item) => {
    if (item.placeHolder && item.placeHolder.length > 0) {
      // If there is a nested array, recursively add the field to the last object
@@ -1022,7 +1094,7 @@ export const addInitialData = (signerPos, setXyPosition, value, userId) => {
        // Adjust this line to add the desired field
      };
    } else {
-      const widgetData = widgetDataValue(item.type);
+      const widgetData = widgetDataValue(item.type, value);
      if (["name", "company", "job title", "email"].includes(item.type)) {
        return {
          ...item,
@@ -1039,26 +1111,30 @@ export const addInitialData = (signerPos, setXyPosition, value, userId) => {
 };
 //function for embed document id
-export const embedDocId = async (pdfDoc, documentId, allPages) => {
+export const embedDocId = async (pdfOriginalWH, pdfDoc, documentId) => {
-  const appName = "OpenSign™";
+  const appName =
    "OpenSign™";
  // `fontBytes` is used to embed custom font in pdf
  const fontBytes = await fileasbytes(
    "https://cdn.opensignlabs.com/webfonts/times.ttf"
  );
  pdfDoc.registerFontkit(fontkit);
  const font = await pdfDoc.embedFont(fontBytes, { subset: true });
-  for (let i = 0; i < allPages; i++) {
+  //pdfOriginalWH contained all pdf's pages width and height
  for (let i = 0; i < pdfOriginalWH?.length; i++) {
    const fontSize = 10;
-    const textContent = documentId && `${appName} DocumentId: ${documentId} `;
+    const textContent =
          documentId && `${appName} DocumentId: ${documentId} `;
    const pages = pdfDoc.getPages();
    const page = pages[i];
    const getSize = pdfOriginalWH[i];
    try {
      const getObj = compensateRotation(
        page.getRotation().angle,
        10,
        5,
        1,
-        page.getSize(),
+        getSize,
        fontSize,
        rgb(0.5, 0.5, 0.5),
        font,
@@ -1155,7 +1231,6 @@ export function onSaveSign(
    return updatedArray;
  } //condition when user edit signature/initial then updated signature apply all existing drawn signatures
  else if (isApplyAll) {
    // console.log("signatureImg",signatureImg)
    const updatedArray = updateXYposition.map((page) => ({
      ...page,
      pos: page.pos.map(
@@ -1461,7 +1536,13 @@ const getWidgetsFontColor = (type) => {
  }
 };
 //function for embed multiple signature using pdf-lib
-export const multiSignEmbed = async (widgets, pdfDoc, signyourself, scale) => {
+export const multiSignEmbed = async (
  pdfOriginalWH,
  widgets,
  pdfDoc,
  signyourself,
  scale
 ) => {
  // `fontBytes` is used to embed custom font in pdf
  const fontBytes = await fileasbytes(
    "https://cdn.opensignlabs.com/webfonts/times.ttf"
@@ -1470,6 +1551,11 @@ export const multiSignEmbed = async (widgets, pdfDoc, signyourself, scale) => {
  const font = await pdfDoc.embedFont(fontBytes, { subset: true });
  let hasError = false;
  for (let item of widgets) {
    //pdfOriginalWH contained all pdf's pages width and height
    //'getSize' is used to get particular pdf's page width and height 
    const getSize = pdfOriginalWH.find(
      (page) => page?.pageNumber === item?.pageNumber
    );
    if (hasError) break; // Stop the outer loop if an error occurred
    const typeExist = item.pos.some((data) => data?.type);
    let updateItem;
@@ -1589,10 +1675,11 @@ export const multiSignEmbed = async (widgets, pdfDoc, signyourself, scale) => {
        ].includes(position.type);
        if (position.type === "checkbox") {
          let checkboxGapFromTop, isCheck;
-          let y = yPos(position);
+          let y = yPos(position) + 2;
-          const optionsFontSize = fontSize || 13;
+          //calculate checkbox size to draw on pdf
-          const checkboxSize = fontSize;
+          const checkboxSize = fontSize - 1;
-          const checkboxTextGapFromLeft = fontSize + 5 || 22;
+          //calculate gap between checkbox and options
          const checkboxTextGapFromLeft = fontSize + 5;
          if (position?.options?.values.length > 0) {
            position?.options?.values.forEach((item, ind) => {
              const checkboxRandomId = "checkbox" + randomId();
@@ -1604,13 +1691,11 @@ export const multiSignEmbed = async (widgets, pdfDoc, signyourself, scale) => {
              } else if (position?.options?.defaultValue) {
                isCheck = position?.options?.defaultValue?.includes(ind);
              }
              const checkbox = form.createCheckBox(checkboxRandomId);
              if (ind > 0) {
                y = y + checkboxGapFromTop;
              } else {
-                checkboxGapFromTop = fontSize + 5 || 26;
+                checkboxGapFromTop = fontSize + 3.2;
              }
              if (!position?.options?.isHideLabel) {
@@ -1618,10 +1703,10 @@ export const multiSignEmbed = async (widgets, pdfDoc, signyourself, scale) => {
                const optionsPosition = compensateRotation(
                  page.getRotation().angle,
                  xPos(position) + checkboxTextGapFromLeft,
-                  y,
+                  y - 3,
                  1,
-                  page.getSize(),
+                  getSize,
-                  optionsFontSize,
+                  fontSize,
                  updateColorInRgb,
                  font,
                  page
@@ -1634,7 +1719,7 @@ export const multiSignEmbed = async (widgets, pdfDoc, signyourself, scale) => {
                width: checkboxSize,
                height: checkboxSize
              };
-              checkboxObj = getWidgetPosition(page, checkboxObj, 1);
+              checkboxObj = getWidgetPosition(page, checkboxObj, 1, getSize);
              checkbox.addToPage(page, checkboxObj);
              //applied which checkbox should be checked
@@ -1704,7 +1789,7 @@ export const multiSignEmbed = async (widgets, pdfDoc, signyourself, scale) => {
            : NewbreakTextIntoLines(textContent, fixedWidth);
          // Set initial y-coordinate for the first line
          let x = xPos(position);
-          let y = yPos(position);
+          let y = yPos(position) - 4;
          // Embed each line on the page
          for (const line of lines) {
            const textPosition = compensateRotation(
@@ -1712,7 +1797,7 @@ export const multiSignEmbed = async (widgets, pdfDoc, signyourself, scale) => {
              x,
              y,
              1,
-              page.getSize(),
+              getSize,
              fontSize,
              updateColorInRgb,
              font,
@@ -1746,7 +1831,12 @@ export const multiSignEmbed = async (widgets, pdfDoc, signyourself, scale) => {
            width: widgetWidth,
            height: widgetHeight
          };
-          const dropdownOption = getWidgetPosition(page, dropdownObj, 1);
+          const dropdownOption = getWidgetPosition(
            page,
            dropdownObj,
            1,
            getSize
          );
          const dropdownSelected = { ...dropdownOption, font: font };
          dropdown.defaultUpdateAppearances(font);
          dropdown.addToPage(page, dropdownSelected);
@@ -1754,28 +1844,33 @@ export const multiSignEmbed = async (widgets, pdfDoc, signyourself, scale) => {
        } else if (position.type === radioButtonWidget) {
          const radioRandomId = "radio" + randomId();
          const radioGroup = form.createRadioGroup(radioRandomId);
-          let radioOptionGapFromTop;
+          //draw radio button on document and options if hide label is enable
-          const optionsFontSize = fontSize || 13;
+          let radioButtonFromTop;
-          const radioTextGapFromLeft = fontSize + 5 || 20;
+          //getting radio buttons options text font size
          const optionsFontSize = fontSize;
          //calculate value of gap between radio button and options
          const radioTextGapFromLeft = fontSize + 6;
          //getting radio button font size
          const radioSize = fontSize;
          //getting position of radio widget in y direction
          let y = yPos(position);
          //on the basic of option's length create radio button and message
          if (position?.options?.values.length > 0) {
            position?.options?.values.forEach((item, ind) => {
              if (ind > 0) {
-                y = y + radioOptionGapFromTop;
+                y = y + radioButtonFromTop;
              } else {
-                radioOptionGapFromTop = fontSize + 10 || 25;
+                radioButtonFromTop = fontSize + 6;
              }
              if (!position?.options?.isHideLabel) {
                // below line of code is used to embed label with radio button in pdf
                const optionsPosition = compensateRotation(
                  page.getRotation().angle,
                  xPos(position) + radioTextGapFromLeft,
-                  y,
+                  y - 2,
                  1,
-                  page.getSize(),
+                  getSize,
-                  optionsFontSize,
+                  fontSize,
                  updateColorInRgb,
                  font,
                  page
@@ -1784,13 +1879,13 @@ export const multiSignEmbed = async (widgets, pdfDoc, signyourself, scale) => {
                page.drawText(item, optionsPosition);
              }
              let radioObj = {
-                x: xPos(position),
+                x: xPos(position) + 2,
                y: y,
                width: radioSize,
                height: radioSize
              };
-              radioObj = getWidgetPosition(page, radioObj, 1);
+              radioObj = getWidgetPosition(page, radioObj, 1, getSize);
              radioGroup.addOptionToPage(item, page, radioObj);
            });
          }
@@ -1808,7 +1903,7 @@ export const multiSignEmbed = async (widgets, pdfDoc, signyourself, scale) => {
            height: widgetHeight
          };
-          const imageOptions = getWidgetPosition(page, signature, 1);
+          const imageOptions = getWidgetPosition(page, signature, 1, getSize);
          page.drawImage(img, imageOptions);
        }
      } catch (err) {
@@ -1874,7 +1969,9 @@ export const placeholderHeight = (pos) => {
 };
 //function for getting contracts_contactbook details
-export const contactBook = async (objectId) => {
+export const contactBook = async (
  objectId,
 ) => {
  const result = await axios
    .get(
      `${localStorage.getItem(
@@ -1884,7 +1981,8 @@ export const contactBook = async (objectId) => {
        headers: {
          "Content-Type": "application/json",
          "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-          "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+          "X-Parse-Session-Token":
            localStorage.getItem("accesstoken")
        }
      }
    )
@@ -1902,9 +2000,12 @@ export const contactBook = async (objectId) => {
 };
 //function for getting document details from contract_Documents class
-export const contractDocument = async (documentId) => {
+export const contractDocument = async (
  documentId,
 ) => {
  const data = { docId: documentId };
-  const token = { sessionToken: localStorage.getItem("accesstoken") };
+  const token =
        { sessionToken: localStorage.getItem("accesstoken") };
  const documentDeatils = await axios
    .post(`${localStorage.getItem("baseUrl")}functions/getDocument`, data, {
      headers: {
@@ -1993,26 +2094,12 @@ export const addDefaultSignatureImg = (xyPosition, defaultSignImg, type) => {
  return xyDefaultPos;
 };
 //function for create list of year for date widget
 export const range = (start, end, step) => {
  const range = [];
  for (let i = start; i <= end; i += step) {
    range.push(i);
  }
  return range;
 };
 //function for get month
 export const getMonth = (date) => {
  const newMonth = new Date(date).getMonth();
  return newMonth;
 };
 //function for get year
 export const getYear = (date) => {
  const newYear = new Date(date).getFullYear();
  return newYear;
 };
 //function to create/copy widget next to already dropped widget
 export const handleCopyNextToWidget = (
  position,
@@ -2088,31 +2175,36 @@ export const getFileName = (fileUrl) => {
 //fetch tenant app logo from `partners_Tenant` class by domain name
 export const getAppLogo = async () => {
-  const domain = window.location.host;
+    const domain = window.location.host;
-  try {
+    try {
-    const tenant = await Parse.Cloud.run("getlogobydomain", {
+      const tenant = await Parse.Cloud.run("getlogobydomain", {
-      domain: domain
+        domain: domain
-    });
+      });
-    if (tenant) {
+      if (tenant) {
-      localStorage.setItem("appname", "OpenSign™");
+          localStorage.setItem("appname", "OpenSign™");
-      return { logo: tenant?.logo, user: tenant?.user };
+        return { logo: tenant?.logo, user: tenant?.user };
      }
    } catch (err) {
      console.log("err in getlogo ", err);
      if (err?.message?.includes("valid JSON")) {
        return { logo: appInfo.applogo, user: "exist", error: "invalid_json" };
      } else {
        return { logo: appInfo.applogo, user: "exist" };
      }
    }
  } catch (err) {
    console.log("err in getlogo ", err);
    if (err?.message?.includes("valid JSON")) {
      return { logo: appInfo.applogo, user: "exist", error: "invalid_json" };
    } else {
      return { logo: appInfo.applogo, user: "exist" };
    }
  }
 };
-export const getTenantDetails = async (objectId, contactId) => {
+export const getTenantDetails = async (
  objectId,
  contactId
 ) => {
  try {
    const url = `${localStorage.getItem("baseUrl")}functions/gettenant`;
    const parseAppId = localStorage.getItem("parseAppId");
    const accesstoken = localStorage.getItem("accesstoken");
-    const token = { "X-Parse-Session-Token": accesstoken };
+    const token =
-    const data = { userId: objectId, contactId: contactId };
+          { "X-Parse-Session-Token": accesstoken };
    const data =
          { userId: objectId, contactId: contactId };
    const res = await axios.post(url, data, {
      headers: {
        "Content-Type": "application/json",
@@ -2193,7 +2285,7 @@ export const handleSendOTP = async (email) => {
      "X-Parse-Application-Id": localStorage.getItem("parseAppId")
    };
    const body = {
-      email: email
+      email: email,
    };
    await axios.post(url, body, { headers: headers });
  } catch (error) {
@@ -2201,7 +2293,8 @@ export const handleSendOTP = async (email) => {
  }
 };
 export const fetchUrl = async (url, pdfName) => {
-  const appName = "OpenSign™";
+  const appName =
    "OpenSign™";
  try {
    const response = await fetch(url);
    if (!response.ok) {
@@ -2215,7 +2308,11 @@ export const fetchUrl = async (url, pdfName) => {
    console.error("Error downloading the file:", error);
  }
 };
-export const getSignedUrl = async (pdfUrl, docId, templateId) => {
+export const getSignedUrl = async (
  pdfUrl,
  docId,
  templateId
 ) => {
  //use only axios here due to public template sign
  const axiosRes = await axios.post(
    `${localStorage.getItem("baseUrl")}/functions/getsignedurl`,
@@ -2276,7 +2373,10 @@ export const handleDownloadPdf = async (
    setIsDownloading && setIsDownloading("pdf");
    const docId = pdfDetails?.[0]?.objectId || "";
    try {
-      const url = await getSignedUrl(pdfUrl, docId);
+      const url = await getSignedUrl(
        pdfUrl,
        docId,
      );
      await fetchUrl(url, pdfName);
      setIsDownloading && setIsDownloading("");
    } catch (err) {
@@ -2306,7 +2406,7 @@ export const handleToPrint = async (event, setIsDownloading, pdfDetails) => {
      `${localStorage.getItem("baseUrl")}/functions/getsignedurl`,
      {
        url: pdfUrl,
-        docId: docId
+        docId: docId,
      },
      {
        headers: {
@@ -2350,7 +2450,8 @@ export const handleDownloadCertificate = async (
  setIsDownloading,
  isZip
 ) => {
-  const appName = "OpenSign™";
+  const appName =
    "OpenSign™";
  if (pdfDetails?.length > 0 && pdfDetails[0]?.CertificateUrl) {
    try {
      await fetch(pdfDetails[0] && pdfDetails[0]?.CertificateUrl);
@@ -2434,13 +2535,14 @@ export const handleDownloadCertificate = async (
 export function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // Escape special characters
 }
-export async function findContact(value) {
+export async function findContact(
  value,
 ) {
  try {
    const baseURL = localStorage.getItem("baseUrl");
    const url = `${baseURL}functions/getsigners`;
-    const token = {
+    const token =
-      "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+          { "X-Parse-Session-Token": localStorage.getItem("accesstoken") };
    };
    const headers = {
      "Content-Type": "application/json",
      "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
@@ -2528,7 +2630,7 @@ function compensateRotation(
 }
 // `getWidgetPosition` is used to calulcate position of image type widget like x, y, width, height for pdf-lib
-function getWidgetPosition(page, image, sizeRatio) {
+function getWidgetPosition(page, image, sizeRatio, getSize) {
  let pageWidth;
  // pageHeight;
  if ([90, 270].includes(page.getRotation().angle)) {
@@ -2552,7 +2654,7 @@ function getWidgetPosition(page, image, sizeRatio) {
    imageX,
    imageYFromTop,
    1,
-    page.getSize(),
+    getSize,
    imageHeight
  );
@@ -2652,20 +2754,23 @@ export function base64ToArrayBuffer(base64) {
  return bytes.buffer;
 }
-export const convertBase64ToFile = async (pdfName, pdfBase64) => {
+export const convertBase64ToFile = async (
  pdfName,
  pdfBase64,
 ) => {
  const fileName = sanitizeFileName(pdfName) + ".pdf";
-  try {
+    try {
-    const pdfFile = new Parse.File(fileName, { base64: pdfBase64 });
+        const pdfFile = new Parse.File(fileName, { base64: pdfBase64 });
-    // Save the Parse File if needed
+        // Save the Parse File if needed
-    const pdfData = await pdfFile.save();
+        const pdfData = await pdfFile.save();
-    const pdfUrl = pdfData.url();
+        const pdfUrl = pdfData.url();
-    const fileRes = await getSecureUrl(pdfUrl);
+        const fileRes = await getSecureUrl(pdfUrl);
-    if (fileRes?.url) {
+        if (fileRes?.url) {
-      return fileRes.url;
+          return fileRes.url;
        }
    } catch (e) {
      console.log("error in convertbase64tofile", e);
    }
  } catch (e) {
    console.log("error in convertbase64tofile", e);
  }
 };
 export const onClickZoomIn = (scale, zoomPercent, setScale, setZoomPercent) => {
  setScale(scale + 0.1 * scale);
@@ -2955,10 +3060,13 @@ export const flattenPdf = async (pdfFile) => {
 };
 export const mailTemplate = (param) => {
-  const appName = "OpenSign™";
+  const appName =
-  const logo = `<div style='padding:10px'><img src='https://qikinnovation.ams3.digitaloceanspaces.com/logo.png' height='50' /></div>`;
+    "OpenSign™";
  const logo =
        `<div style='padding:10px'><img src='https://qikinnovation.ams3.digitaloceanspaces.com/logo.png' height='50' /></div>`;
-  const opurl = ` <a href='https://www.opensignlabs.com' target=_blank>here</a>.</p></div></div></body></html>`;
+  const opurl =
        ` <a href='https://www.opensignlabs.com' target=_blank>here</a>.</p></div></div></body></html>`;
  const subject = `${param.senderName} has requested you to sign "${param.title}"`;
  const body =
@@ -2977,7 +3085,7 @@ export const mailTemplate = (param) => {
    "</td></tr><tr><td style='font-weight:bold;font-family:sans-serif;font-size:15px'>Note</td><td></td><td style='color:#626363;font-weight:bold'>" +
    param.note +
    "</td></tr><tr><td></td><td></td></tr></table></div> <div style='margin-left:70px'><a target=_blank href=" +
-    param.sigingUrl +
+    param.signingUrl +
    "><button style='padding:12px;background-color:#d46b0f;color:white;border:0px;font-weight:bold;margin-top:30px'>Sign here</button></a></div><div style='display:flex;justify-content:center;margin-top:10px'></div></div></div><div><p> This is an automated email from " +
    appName +
    ". For any queries regarding this email, please contact the sender " +
@@ -3000,3 +3108,118 @@ export function formatDateTime(date, dateFormat, timeZone, is12Hour) {
      )
    : formatTimeInTimezone(date, timeZone);
 }
 export const updateDateWidgetsRes = (documentData, signerId, journey) => {
  const extUser =
        localStorage.getItem("Extand_Class");
  const contactUser = documentData?.Signers.find(
    (data) => data.objectId === signerId
  );
  const placeHolders = documentData?.Placeholders;
  const userDetails = extUser ? JSON.parse(extUser)[0] : contactUser;
  return placeHolders?.map((item) => {
    if (item?.signerObjId === signerId) {
      return {
        ...item,
        placeHolder: item?.placeHolder?.map((ph) => ({
          ...ph,
          pos: ph?.pos?.map((widget) => {
            // only for date widgets *and* missing response
            if (widget.type === "date" && !widget.options.response) {
              return {
                ...widget,
                options: {
                  ...widget.options,
                  response: getDate(
                    changeDateToMomentFormat(widget.options.validation.format)
                  )
                }
              };
            } else if (
              ["name", "email", "job title", "company"].includes(widget.type) &&
              !widget.options.defaultValue &&
              !widget.options.response
            ) {
              return {
                ...widget,
                options: {
                  ...widget.options,
                  response: widgetDataValue(widget.type, userDetails)
                }
              };
            }
            return widget;
          })
        }))
      };
    } else {
      return item;
    }
  });
 };
 //function for show checked checkbox
 export const selectCheckbox = (ind, selectedCheckbox) => {
  if (selectedCheckbox && selectedCheckbox?.length > 0) {
    const isCheck = selectedCheckbox?.some((data) => data === ind);
    return isCheck || false;
  }
 };
 export const checkRegularExpress = (validateType, setValidatePlaceholder) => {
  switch (validateType) {
    case "email":
      setValidatePlaceholder("demo@gmail.com");
      break;
    case "number":
      setValidatePlaceholder("12345");
      break;
    case "text":
      setValidatePlaceholder("please enter text");
      break;
    default:
      setValidatePlaceholder("please enter value");
  }
 };
 //function to use unlink signer from widgets
 export const handleUnlinkSigner = (
  signerPos,
  setSignerPos,
  signersdata,
  setSignersData,
  uniqueId
 ) => {
  //remove existing signer's details from 'signerPos' array
  const updatePlaceHolder = signerPos.map((x) => {
    if (x.Id === uniqueId) {
      return { ...x, signerPtr: {}, signerObjId: "" };
    }
    return { ...x };
  });
  setSignerPos(updatePlaceHolder);
  //remove existing signer's details from 'signersdata' array and keep role and id
  const updateSigner = signersdata.map((item) => {
    if (item.Id == uniqueId) {
      return { Role: item.Role, Id: item.Id, blockColor: item.blockColor };
    }
    return item;
  });
  setSignersData(updateSigner);
 };
 //function is used to get pdf original width and height
 export const getOriginalWH = async (pdf) => {
  let pdfWHObj = [];
  //get total page number
  const totalPages = pdf?.numPages;
  //according to page number get all pdf's pages width and height
  for (let index = 0; index < totalPages; index++) {
    try {
      const getPage = await pdf.getPage(index + 1);
      const width = getPage?.view[2];
      const height = getPage?.view[3];
      pdfWHObj.push({ pageNumber: index + 1, width, height });
    } catch (e) {
      console.log(`Error getting page ${index + 1} of PDF: ${e.message}`);
    }
  }
  return pdfWHObj;
 };
@@ -1,9 +1,12 @@
 import logo from "../assets/images/logo.png";
 import { getEnv } from "./Utils";
 export function serverUrl_fn() {
-  let baseUrl = process.env.REACT_APP_SERVERURL
+  const env = getEnv();
-    ? process.env.REACT_APP_SERVERURL
+  const serverurl = env?.REACT_APP_SERVERURL
-    : window.location.origin + "/api/app";
+    ? env.REACT_APP_SERVERURL // env.REACT_APP_SERVERURL is used for prod
    : process.env.REACT_APP_SERVERURL; //  process.env.REACT_APP_SERVERURL is used for dev (locally)
  let baseUrl = serverurl ? serverurl : window.location.origin + "/api/app";
  return baseUrl;
 }
 export const appInfo = {
@@ -11,9 +14,6 @@ export const appInfo = {
  appId: process.env.REACT_APP_APPID ? process.env.REACT_APP_APPID : "opensign",
  baseUrl: serverUrl_fn(),
  defaultRole: "contracts_User",
  fbAppId: process.env.REACT_APP_FBAPPID
    ? `${process.env.REACT_APP_FBAPPID}`
    : "",
  fev_Icon:
    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAALlJREFUaEPtmN0NwjAMBpNxYDKYiM1Yp90g93CKStH1NbIdfz921Dker2Pc+Js1cDF7MXAxASMGYkAigBI6vh9ZwoXP53uZoAYcvhwdA3mAVbI2aSb+9zFKU4IURB6j/HoPUIEa2G3iGIAhQQDlAUIoE2diabIklISS0NoFPebo77RF6OenEF3QntOm128he0GKrwHyACFoz2MgBqSGkpAEcHs47oHtN5AFakACqMNjQEMoE8SABFCHn4HE2zGHSLeEAAAAAElFTkSuQmCC",
  googleClietId: process.env.REACT_APP_GOOGLECLIENTID
@@ -1,4 +0,0 @@
 export default function linkURL(url) {
  let newURL = (url && decodeURIComponent(url)) || "";
  return newURL.substring(newURL.indexOf(".com/") + 5, newURL.indexOf("_"));
 }
@@ -25,7 +25,7 @@ i18n
    interpolation: {
      escapeValue: false // Not needed for react as it escapes by default
    },
-    whitelist: ["en", "es", "fr", "it", "de"] // List of allowed languages
+    whitelist: ["en", "es", "fr", "it", "de", "hi"] // List of allowed languages
  });
 export default i18n;
@@ -17,6 +17,9 @@ body {
  scrollbar-width: none;
  /* Firefox */
 }
 .react-datepicker-popper {
  z-index: 9999 !important;
 }
@media screen and (max-width: 766px) {
  .reactour__close {
@@ -4,7 +4,6 @@ import "./index.css";
 import App from "./App";
 import { Provider } from "react-redux";
 import { store } from "./redux/store";
 import { CookiesProvider } from "react-cookie";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { TouchBackend } from "react-dnd-touch-backend";
 import {
@@ -13,15 +12,14 @@ import {
  MouseTransition,
  Preview
 } from "react-dnd-multi-backend";
-import DragElement from "./components/pdf/DragElement";
+import DragElement from "./components/pdf/DragElement.jsx";
 import Parse from "parse";
 import "./polyfills";
 import { serverUrl_fn } from "./constant/appinfo";
 import "./i18n";
-const appId = process.env.REACT_APP_APPID
+const appId =
-  ? process.env.REACT_APP_APPID
+  import.meta.env.VITE_APPID || process.env.REACT_APP_APPID || "opensign";
  : "opensign";
 const serverUrl = serverUrl_fn();
 Parse.initialize(appId);
 Parse.serverURL = serverUrl;
@@ -55,14 +53,13 @@ const generatePreview = (props) => {
  );
 };
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
-  <CookiesProvider defaultSetOptions={{ path: "/" }}>
+  <Provider store={store}>
-    <Provider store={store}>
+    <DndProvider options={HTML5toTouch}>
-      <DndProvider options={HTML5toTouch}>
+      <Preview>{generatePreview}</Preview>
-        <Preview>{generatePreview}</Preview>
+      <App />
-        <App />
+    </DndProvider>
-      </DndProvider>
+  </Provider>
    </Provider>
  </CookiesProvider>
 );
@@ -533,9 +533,9 @@ export default function reportJson(id) {
                btnId: "1873",
                btnLabel: "Share with team",
                hoverLabel: "Share with team",
-                btnIcon: "fa-light fa-share-nodes",
+                btnIcon: "fa-light fa-user-group",
                redirectUrl: "",
-                action: "sharewith"
+                action: "sharewithteam"
              });
              return newItem;
            }
@@ -36,7 +36,7 @@ const dashboardJson = [
            queryType: "",
            class: "contracts_Document",
            query:
-              'where={"Type":{"#*ne":"Folder"},"Signers":{"#*exists":true,"#*ne":[]},"Placeholders":{"#*ne":null},"SignedUrl":{"#*ne":null},"IsCompleted":{"#*ne":true},"IsDeclined":{"#*ne":true},"IsArchive":{"#*ne":true},"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"#UserId.objectId#"},"ExpiryDate":{"#*gt":{"__type":"#Date#","iso":"#today#"}}}&count=1',
+              'where={"Type":null,"Signers":{"#*exists":true},"Placeholders":{"#*exists":true},"SignedUrl":{"#*exists":true},"IsCompleted":false,"IsDeclined":false,"IsArchive":null,"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"#UserId.objectId#"},"ExpiryDate":{"#*gt":{"__type":"#Date#","iso":"#today#"}}}&keys=Name,ExpiryDate,SignedUrl,Signers&count=1',
            key: "count",
            Redirect_type: "Report",
            Redirect_id: "1MwEuxLEkF",
@@ -1,3 +1,13 @@
 const userssetting = [
  {
    icon: "fa-light fa-users fa-fw",
    title: "Users",
    target: "_self",
    pageType: "",
    description: "",
    objectId: "users"
  }
 ];
 export const subSetting = [
  {
    icon: "fa-light fa-sliders",
@@ -7,14 +17,7 @@ export const subSetting = [
    description: "",
    objectId: "preferences"
  },
-  {
+  ...userssetting
    icon: "fa-light fa-users fa-fw",
    title: "Users",
    target: "_self",
    pageType: "",
    description: "",
    objectId: "users"
  }
 ];
 const sidebarList = [
@@ -65,7 +68,7 @@ const sidebarList = [
        pageType: "report",
        description: "",
        objectId: "6TeaPr321t"
-      },
+      }
    ]
  },
  {
@@ -3,19 +3,19 @@ import Header from "../components/Header";
 import Footer from "../components/Footer";
 import Sidebar from "../components/sidebar/Sidebar";
 import { useWindowSize } from "../hook/useWindowSize";
-import Tour from "reactour";
+import Tour from "../primitives/Tour";
 import axios from "axios";
 import { useDispatch, useSelector } from "react-redux";
 import Parse from "parse";
 import ModalUi from "../primitives/ModalUi";
 import { useNavigate, useLocation, Outlet } from "react-router";
 import { useCookies } from "react-cookie";
 import Loader from "../primitives/Loader";
 import { showHeader } from "../redux/reducers/showHeader";
 import { useTranslation } from "react-i18next";
 const HomeLayout = () => {
-  const appName = "OpenSign™";
+  const appName =
    "OpenSign™";
  const { t, i18n } = useTranslation();
  const navigate = useNavigate();
  const location = useLocation();
@@ -29,7 +29,6 @@ const HomeLayout = () => {
  const [isTour, setIsTour] = useState(false);
  const [tourStatusArr, setTourStatusArr] = useState([]);
  const [tourConfigs, setTourConfigs] = useState([]);
  const [, setCookie] = useCookies(["accesstoken", "main_Domain"]);
  const tenantId = localStorage.getItem("TenantId");
@@ -53,8 +52,8 @@ const HomeLayout = () => {
          });
          if (user) {
            localStorage.setItem("profileImg", user.get("ProfilePic") || "");
-            setIsUserValid(true);
+              setIsUserValid(true);
-            setIsLoader(false);
+              setIsLoader(false);
          } else {
            setIsUserValid(false);
          }
@@ -63,38 +62,11 @@ const HomeLayout = () => {
          setIsUserValid(false);
        }
      })();
      saveCookies();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [tenantId]);
-  //function to use save data in cookies storage
+
  const saveCookies = () => {
    const main_Domain = window.location.origin;
    const domainName = window.location.hostname;
    // Find the index of the first dot in the string
    const indexOfFirstDot = domainName.indexOf(".");
    // Remove the first dot and get the substring starting from the next character
    const updateDomain = domainName.substring(indexOfFirstDot); //.opensignlabs.com
    const serverUrl = localStorage.getItem("baseUrl");
    const parseAppId = localStorage.getItem("parseAppId");
    setCookie("accesstoken", localStorage.getItem("accesstoken"), {
      secure: true,
      domain: updateDomain
    });
    setCookie("main_Domain", main_Domain, {
      secure: true,
      domain: updateDomain
    });
    setCookie("server_url", serverUrl, {
      secure: true,
      domain: updateDomain
    });
    setCookie("parse_app_id", parseAppId, {
      secure: true,
      domain: updateDomain
    });
  };
  const showSidebar = () => {
    setIsOpen((value) => !value);
    dispatch(showHeader(!isOpen));
@@ -119,12 +91,7 @@ const HomeLayout = () => {
      // const resArr = arr;
      const resArr = arr.map((obj, index) => {
        if (arr.length - 1 === index) {
-          return {
+          return { ...obj };
            ...obj
            // actions: () => {
            //   setIsCloseBtn(true);
            // },
          };
        } else {
          return {
            ...obj,
@@ -136,27 +103,23 @@ const HomeLayout = () => {
      });
      setTourConfigs([
        {
-          selector: '[data-tut="reactourFirst"]',
+          selector: '[data-tut="nonpresentmask"]',
          content: t("tour-mssg.home-layout-1"),
-          position: "top"
+          position: "center",
          // style: { backgroundColor: "#abd4d2" },
        },
        {
          selector: '[data-tut="tourbutton"]',
          content: t("tour-mssg.home-layout-2"),
          position: "top"
          // style: { backgroundColor: "#abd4d2" },
        },
        ...resArr,
        {
-          selector: '[data-tut="reactourLast"]',
+          selector: '[data-tut="nonpresentmask"]',
          content: t("tour-mssg.home-layout-3", { appName }),
-          position: "top"
+          position: "center",
          // style: { backgroundColor: "#abd4d2" },
        }
      ]);
      checkTourStatus();
      // console.log("resArr ", resArr);
    }
  };
  const closeTour = async () => {
@@ -16,7 +16,8 @@ import { useTranslation } from "react-i18next";
 import { emailRegex } from "../constant/const";
 const AddAdmin = () => {
-  const appName = "OpenSign™";
+  const appName =
    "OpenSign™";
  const { t, i18n } = useTranslation();
  const navigate = useNavigate();
  const dispatch = useDispatch();
@@ -175,7 +176,6 @@ const AddAdmin = () => {
      localStorage.setItem("accesstoken", sessionToken);
      localStorage.setItem("UserInformation", JSON.stringify(_user));
      localStorage.setItem("accesstoken", _user.sessionToken);
      localStorage.setItem("scriptId", true);
      if (_user.ProfilePic) {
        localStorage.setItem("profileImg", _user.ProfilePic);
      } else {
@@ -5,7 +5,7 @@ import {
  getBase64FromUrl,
  handleDownloadCertificate,
  handleDownloadPdf,
-  handleToPrint
+  handleToPrint,
 } from "../constant/Utils";
 import ModalUi from "../primitives/ModalUi";
 import Loader from "../primitives/Loader";
@@ -7,7 +7,9 @@ import Alert from "../primitives/Alert";
 import { appInfo } from "../constant/appinfo";
 import { useDispatch } from "react-redux";
 import { fetchAppInfo } from "../redux/reducers/infoReducer";
-import { emailRegex } from "../constant/const";
+import {
  emailRegex,
 } from "../constant/const";
 import { useTranslation } from "react-i18next";
 import Loader from "../primitives/Loader";
@@ -46,7 +48,7 @@ function ForgotPassword() {
      if (state.email) {
        const username = state.email;
        try {
-          await Parse.User.requestPasswordReset(username);
+            await Parse.User.requestPasswordReset(username);
          setToast({ type: "success", message: t("reset-password-alert-1") });
        } catch (err) {
          console.log("err ", err.code);
@@ -76,7 +78,7 @@ function ForgotPassword() {
    } catch (err) {
      console.log("err while logging out ", err);
    }
-    setImage(appInfo?.applogo || undefined);
+      setImage(appInfo?.applogo || undefined);
  };
  return (
    <div>
@@ -42,7 +42,8 @@ function Form() {
 }
 const Forms = (props) => {
-  const appName = "OpenSign™";
+  const appName =
    "OpenSign™";
  const { t } = useTranslation();
  const abortController = new AbortController();
  const inputFileRef = useRef(null);
@@ -105,12 +106,12 @@ const Forms = (props) => {
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const initializeValues = async () => {
-    setFormData((obj) => ({
+      setFormData((obj) => ({
-      ...obj,
+        ...obj,
-      NotifyOnSignatures: true,
+        NotifyOnSignatures: true,
-      SendinOrder: sendinorder,
+        SendinOrder: sendinorder,
-      IsTourEnabled: istourenabled
+        IsTourEnabled: istourenabled
-    }));
+      }));
  };
  function getFileAsArrayBuffer(file) {
@@ -148,81 +149,17 @@ const Forms = (props) => {
            const name = generatePdfName(16);
            const pdfName = `${name?.split(".")[0]}.pdf`;
            setfileload(true);
            try {
              const res = await getFileAsArrayBuffer(files[0]);
              const flatPdf = await flattenPdf(res);
              const parseFile = new Parse.File(
                pdfName,
                [...flatPdf],
                "application/pdf"
              );
              try {
-                const response = await parseFile.save({
+                const res = await getFileAsArrayBuffer(files[0]);
-                  progress: (progressValue, loaded, total, { type }) => {
+                const flatPdf = await flattenPdf(res);
-                    if (type === "upload" && progressValue !== null) {
+                const parseFile = new Parse.File(
-                      const percentCompleted = Math.round(
+                  pdfName,
-                        (loaded * 100) / total
+                  [...flatPdf],
-                      );
+                  "application/pdf"
-                      setpercentage(percentCompleted);
+                );
                    }
                  }
                });
                // The response object will contain information about the uploaded file
                // You can access the URL of the uploaded file using response.url()
                if (response.url()) {
                  const fileRes = await getSecureUrl(response.url());
                  if (fileRes.url) {
                    setFileUpload(fileRes.url);
                    setfileload(false);
                    const tenantId = localStorage.getItem("TenantId");
                    const title = generateTitleFromFilename(files?.[0]?.name);
                    setFormData((obj) => ({ ...obj, Name: title }));
                    SaveFileSize(size, fileRes.url, tenantId);
                    return fileRes.url;
                  } else {
                    removeFile(e);
                  }
                } else {
                  removeFile(e);
                }
              } catch (error) {
                removeFile(e);
                console.error("Error uploading file:", error);
              }
            } catch (err) {
              if (err?.message?.includes("is encrypted")) {
                try {
                  setIsDecrypting(true);
                  const size = files?.[0].size;
                  const name = generatePdfName(16);
                  const url = "https://ai.nxglabs.in/decryptpdf"; //
                  let formData = new FormData();
                  formData.append("file", files[0]);
                  formData.append("password", "");
                  const config = {
                    headers: { "content-type": "multipart/form-data" },
                    responseType: "blob"
                  };
                  const response = await axios.post(url, formData, config);
                  const pdfBlob = new Blob([response.data], {
                    type: "application/pdf"
                  });
                  const pdfFile = new File([pdfBlob], name, {
                    type: "application/pdf"
                  });
                  setIsDecrypting(false);
                  setfileload(true);
                  const res = await getFileAsArrayBuffer(pdfFile);
                  const flatPdf = await flattenPdf(res);
                  // Upload the file to Parse Server
                  const parseFile = new Parse.File(
                    name,
                    [...flatPdf],
                    "application/pdf"
                  );
-                  await parseFile.save({
+                try {
                  const response = await parseFile.save({
                    progress: (progressValue, loaded, total, { type }) => {
                      if (type === "upload" && progressValue !== null) {
                        const percentCompleted = Math.round(
@@ -232,16 +169,16 @@ const Forms = (props) => {
                      }
                    }
                  });
-
+                  // The response object will contain information about the uploaded file
-                  // Retrieve the URL of the uploaded file
+                  // You can access the URL of the uploaded file using response.url()
-                  if (parseFile.url()) {
+                  if (response.url()) {
-                    const fileRes = await getSecureUrl(parseFile.url());
+                    const fileRes = await getSecureUrl(response.url());
                    if (fileRes.url) {
                      setFileUpload(fileRes.url);
-                      removeFile();
+                      setfileload(false);
                      const tenantId = localStorage.getItem("TenantId");
                      const title = generateTitleFromFilename(files?.[0]?.name);
                      setFormData((obj) => ({ ...obj, Name: title }));
                      const tenantId = localStorage.getItem("TenantId");
                      SaveFileSize(size, fileRes.url, tenantId);
                      return fileRes.url;
                    } else {
@@ -250,22 +187,88 @@ const Forms = (props) => {
                  } else {
                    removeFile(e);
                  }
-                } catch (err) {
+                } catch (error) {
-                  removeFile();
+                  removeFile(e);
-                  if (err?.response?.status === 401) {
+                  console.error("Error uploading file:", error);
-                    setIsPassword(true);
+                }
-                  } else {
+              } catch (err) {
-                    console.log("Error uploading file: ", err?.response);
+                if (err?.message?.includes("is encrypted")) {
-                    setIsDecrypting(false);
+                  try {
-                    e.target.value = "";
+                    setIsDecrypting(true);
-                  }
+                    const size = files?.[0].size;
                    const name = generatePdfName(16);
                    const url = "https://ai.nxglabs.in/decryptpdf"; //
                    let formData = new FormData();
                    formData.append("file", files[0]);
                    formData.append("password", "");
                    const config = {
                      headers: { "content-type": "multipart/form-data" },
                      responseType: "blob"
                    };
                    const response = await axios.post(url, formData, config);
                    const pdfBlob = new Blob([response.data], {
                      type: "application/pdf"
                    });
                    const pdfFile = new File([pdfBlob], name, {
                      type: "application/pdf"
                    });
                    setIsDecrypting(false);
                    setfileload(true);
                      const res = await getFileAsArrayBuffer(pdfFile);
                      const flatPdf = await flattenPdf(res);
                      // Upload the file to Parse Server
                      const parseFile = new Parse.File(
                        name,
                        [...flatPdf],
                        "application/pdf"
                      );
                      await parseFile.save({
                        progress: (progressValue, loaded, total, { type }) => {
                          if (type === "upload" && progressValue !== null) {
                            const percentCompleted = Math.round(
                              (loaded * 100) / total
                            );
                            setpercentage(percentCompleted);
                          }
                        }
                      });
                      // Retrieve the URL of the uploaded file
                      if (parseFile.url()) {
                        const fileRes = await getSecureUrl(parseFile.url());
                        if (fileRes.url) {
                          setFileUpload(fileRes.url);
                          removeFile();
                          const title = generateTitleFromFilename(
                            files?.[0]?.name
                          );
                          setFormData((obj) => ({ ...obj, Name: title }));
                          const tenantId = localStorage.getItem("TenantId");
                          SaveFileSize(size, fileRes.url, tenantId);
                          return fileRes.url;
                        } else {
                          removeFile(e);
                        }
                      } else {
                        removeFile(e);
                      }
                  } catch (err) {
                    removeFile();
                    if (err?.response?.status === 401) {
                      setIsPassword(true);
                    } else {
                      console.log("Error uploading file: ", err?.response);
                      setIsDecrypting(false);
                      e.target.value = "";
                    }
                  }
                } else {
                  console.log("err ", err);
                  setFileUpload("");
                  removeFile(e);
                }
              } else {
                console.log("err ", err);
                setFileUpload("");
                removeFile(e);
              }
            }
          } else {
            const isImage = files?.[0]?.type.includes("image/");
            if (isImage) {
@@ -290,50 +293,50 @@ const Forms = (props) => {
              });
              const size = files?.[0]?.size;
              const name = generatePdfName(16);
-              const getFile = await pdfDoc.save({
+                const getFile = await pdfDoc.save({
-                useObjectStreams: false
+                  useObjectStreams: false
              });
              setfileload(true);
              const pdfName = `${name?.split(".")[0]}.pdf`;
              const parseFile = new Parse.File(
                pdfName,
                [...getFile],
                "application/pdf"
              );
              try {
                const response = await parseFile.save({
                  progress: (progressValue, loaded, total, { type }) => {
                    if (type === "upload" && progressValue !== null) {
                      const percentCompleted = Math.round(
                        (loaded * 100) / total
                      );
                      setpercentage(percentCompleted);
                    }
                  }
                });
-                // The response object will contain information about the uploaded file
+                setfileload(true);
-                // You can access the URL of the uploaded file using response.url()
+                const pdfName = `${name?.split(".")[0]}.pdf`;
-                if (response.url()) {
+                const parseFile = new Parse.File(
-                  const fileRes = await getSecureUrl(response.url());
+                  pdfName,
-                  if (fileRes.url) {
+                  [...getFile],
-                    setFileUpload(fileRes.url);
+                  "application/pdf"
-                    setfileload(false);
+                );
-                    const tenantId = localStorage.getItem("TenantId");
+
-                    const title = generateTitleFromFilename(files?.[0]?.name);
+                try {
-                    setFormData((obj) => ({ ...obj, Name: title }));
+                  const response = await parseFile.save({
-                    SaveFileSize(size, fileRes.url, tenantId);
+                    progress: (progressValue, loaded, total, { type }) => {
-                    return fileRes.url;
+                      if (type === "upload" && progressValue !== null) {
                        const percentCompleted = Math.round(
                          (loaded * 100) / total
                        );
                        setpercentage(percentCompleted);
                      }
                    }
                  });
                  // The response object will contain information about the uploaded file
                  // You can access the URL of the uploaded file using response.url()
                  if (response.url()) {
                    const fileRes = await getSecureUrl(response.url());
                    if (fileRes.url) {
                      setFileUpload(fileRes.url);
                      setfileload(false);
                      const tenantId = localStorage.getItem("TenantId");
                      const title = generateTitleFromFilename(files?.[0]?.name);
                      setFormData((obj) => ({ ...obj, Name: title }));
                      SaveFileSize(size, fileRes.url, tenantId);
                      return fileRes.url;
                    } else {
                      removeFile(e);
                    }
                  } else {
                    removeFile(e);
                  }
-                } else {
+                } catch (error) {
                  removeFile(e);
                  console.error("Error uploading file:", error);
                }
              } catch (error) {
                removeFile(e);
                console.error("Error uploading file:", error);
              }
            }
          }
        }
@@ -408,11 +411,11 @@ const Forms = (props) => {
          object.set("RemindOnceInEvery", remindOnceInEvery);
          object.set("IsTourEnabled", isTourEnabled);
          object.set("TimeToCompleteDays", TimeToCompleteDays);
-          object.set("AllowModifications", false);
+            object.set("AllowModifications", false);
-          object.set("IsEnableOTP", false);
+            object.set("IsEnableOTP", false);
-          if (formData.NotifyOnSignatures !== undefined) {
+            if (formData.NotifyOnSignatures !== undefined) {
-            object.set("NotifyOnSignatures", formData.NotifyOnSignatures);
+              object.set("NotifyOnSignatures", formData.NotifyOnSignatures);
-          }
+            }
          if (formData?.RedirectUrl) {
            object.set("RedirectUrl", formData.RedirectUrl);
          }
@@ -451,9 +454,10 @@ const Forms = (props) => {
          setSigners([]);
          setBcc([]);
          setFolder({ ObjectId: "", Name: "" });
-          const notifySign = extUserData?.NotifyOnSignatures
+          const notifySign =
-            ? extUserData?.NotifyOnSignatures
+                extUserData?.NotifyOnSignatures
-            : true;
+                ? extUserData?.NotifyOnSignatures
                : true;
          setFormData({
            Name: "",
            Description: "",
@@ -529,9 +533,10 @@ const Forms = (props) => {
    setSigners([]);
    setBcc([]);
    setFolder({ ObjectId: "", Name: "" });
-    const notifySign = extUserData?.NotifyOnSignatures
+    const notifySign =
-      ? extUserData?.NotifyOnSignatures
+          extUserData?.NotifyOnSignatures
-      : true;
+          ? extUserData?.NotifyOnSignatures
          : true;
    let obj = {
      Name: "",
      Description: "",
@@ -585,28 +590,36 @@ const Forms = (props) => {
        type: "application/pdf"
      });
      setIsDecrypting(false);
-      const res = await getFileAsArrayBuffer(pdfFile);
+        const res = await getFileAsArrayBuffer(pdfFile);
-      const flatPdf = await flattenPdf(res);
+        const flatPdf = await flattenPdf(res);
-      const parseFile = new Parse.File(name, [...flatPdf], "application/pdf");
+        const parseFile = new Parse.File(name, [...flatPdf], "application/pdf");
-      await parseFile.save({
+        await parseFile.save({
-        progress: (progressValue, loaded, total, { type }) => {
+          progress: (progressValue, loaded, total, { type }) => {
-          if (type === "upload" && progressValue !== null) {
+            if (type === "upload" && progressValue !== null) {
-            const percentCompleted = Math.round((loaded * 100) / total);
+              const percentCompleted = Math.round((loaded * 100) / total);
-            setpercentage(percentCompleted);
+              setpercentage(percentCompleted);
            }
          }
        });
        // Retrieve the URL of the uploaded file
        if (parseFile.url()) {
          const fileRes = await getSecureUrl(parseFile.url());
          if (fileRes.url) {
            setFileUpload(fileRes.url);
            removeFile();
            const title = generateTitleFromFilename(formData?.file?.name);
            setFormData((obj) => ({ ...obj, password: "", Name: title }));
            const tenantId = localStorage.getItem("TenantId");
            SaveFileSize(size, fileRes.url, tenantId);
            return fileRes.url;
          } else {
            removeFile();
            setFormData((prev) => ({ ...prev, password: "" }));
            setIsDecrypting(false);
            if (inputFileRef.current) {
              inputFileRef.current.value = ""; // Set file input value to empty string
            }
          }
        }
      });
      // Retrieve the URL of the uploaded file
      if (parseFile.url()) {
        const fileRes = await getSecureUrl(parseFile.url());
        if (fileRes.url) {
          setFileUpload(fileRes.url);
          removeFile();
          const title = generateTitleFromFilename(formData?.file?.name);
          setFormData((obj) => ({ ...obj, password: "", Name: title }));
          const tenantId = localStorage.getItem("TenantId");
          SaveFileSize(size, fileRes.url, tenantId);
          return fileRes.url;
        } else {
          removeFile();
          setFormData((prev) => ({ ...prev, password: "" }));
@@ -615,14 +628,6 @@ const Forms = (props) => {
            inputFileRef.current.value = ""; // Set file input value to empty string
          }
        }
      } else {
        removeFile();
        setFormData((prev) => ({ ...prev, password: "" }));
        setIsDecrypting(false);
        if (inputFileRef.current) {
          inputFileRef.current.value = ""; // Set file input value to empty string
        }
      }
    } catch (err) {
      removeFile();
      if (err?.response?.status === 401) {
@@ -744,7 +749,9 @@ const Forms = (props) => {
            )}
            <div className="text-xs">
              <label className="block">
-                {`${`${t("report-heading.File")} (${t("file-type")}`}${")"}`}
+                {`${`${t("report-heading.File")} (${t("file-type")}`}${
                      ")"
                }`}
                <span className="text-red-500 text-[13px]">*</span>
              </label>
              {fileupload.length > 0 ? (
@@ -768,7 +775,9 @@ const Forms = (props) => {
                    className="op-file-input op-file-input-bordered op-file-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                    onChange={(e) => handleFileInput(e)}
                    ref={inputFileRef}
-                    accept={"application/pdf,image/png,image/jpeg"}
+                    accept={
                          "application/pdf,image/png,image/jpeg"
                    }
                    onInvalid={(e) =>
                      e.target.setCustomValidity(t("input-required"))
                    }
@@ -1058,7 +1067,10 @@ const Forms = (props) => {
                {isAdvanceOpt && (
                  <div
                    style={{
-                      height: props.title === "New Template" ? "100px" : "280px"
+                      height:
                              props.title === "New Template"
                            ? "100px"
                            : "280px"
                    }}
                    className="w-[1px] bg-gray-300 m-auto hidden md:inline-block"
                  ></div>
@@ -1167,7 +1179,11 @@ const Forms = (props) => {
                        </Tooltip>
                      </label>
                      <div className="flex flex-col md:flex-row md:gap-4">
-                        <div className={`flex items-center gap-2 ml-2 mb-1`}>
+                        <div
                          className={
                            `flex items-center gap-2 ml-2 mb-1`
                          }
                        >
                          <input
                            className="mr-[2px] op-radio op-radio-xs"
                            type="radio"
@@ -1176,7 +1192,11 @@ const Forms = (props) => {
                          />
                          <div className="text-center">{t("yes")}</div>
                        </div>
-                        <div className={`flex items-center gap-2 ml-2 mb-1`}>
+                        <div
                          className={
                            `flex items-center gap-2 ml-2 mb-1`
                          }
                        >
                          <input
                            className="mr-[2px] op-radio op-radio-xs"
                            type="radio"
@@ -1,8 +1,13 @@
 import React, { useState, useEffect } from "react";
 import { useNavigate, useParams } from "react-router";
 import axios from "axios";
-import { emailRegex } from "../constant/const";
+import {
-import { contractUsers, saveLanguageInLocal } from "../constant/Utils";
+  emailRegex,
 } from "../constant/const";
 import {
  contractUsers,
  saveLanguageInLocal
 } from "../constant/Utils";
 import logo from "../assets/images/logo.png";
 import { appInfo } from "../constant/appinfo";
 import Parse from "parse";
@@ -10,6 +15,8 @@ import { useTranslation } from "react-i18next";
 import SelectLanguage from "../components/pdf/SelectLanguage";
 import LoaderWithMsg from "../primitives/LoaderWithMsg";
 import Title from "../components/Title";
 import ModalUi from "../primitives/ModalUi";
 import Loader from "../primitives/Loader";
 function GuestLogin() {
  const { t, i18n } = useTranslation();
@@ -30,6 +37,8 @@ function GuestLogin() {
  const [contactId, setContactId] = useState(contactBookId);
  const [sendmail, setSendmail] = useState();
  const [contact, setContact] = useState({ name: "", phone: "", email: "" });
  const navigateToDoc = async (docId, contactId) => {
    try {
      const docDetails = await Parse.Cloud.run("getDocument", {
@@ -53,17 +62,22 @@ function GuestLogin() {
      return false;
    }
  };
  useEffect(() => {
    handleServerUrl();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  //function generate serverUrl and parseAppId from url and save it in local storage
  const handleServerUrl = async () => {
-    setAppLogo(logo);
+      setAppLogo(logo);
    localStorage.clear(); // Clears everything
-    localStorage.setItem("appname", "OpenSign™");
+    localStorage.setItem(
      "appname",
        "OpenSign™"
    );
    //save isGuestSigner true in local to handle login flow header in mobile view
    localStorage.setItem("isGuestSigner", true);
    saveLanguageInLocal(i18n);
@@ -115,7 +129,7 @@ function GuestLogin() {
    try {
      const params = {
        email: email?.toLowerCase()?.replace(/\s/g, "")?.toString(),
-        docId: documentId
+        docId: documentId,
      };
      const Otp = await Parse.Cloud.run("SendOTPMailV1", params);
      if (Otp) {
@@ -124,6 +138,7 @@ function GuestLogin() {
      }
    } catch (error) {
      alert(t("something-went-wrong-mssg"));
      setLoading(false);
    }
  };
@@ -188,11 +203,14 @@ function GuestLogin() {
        }
      } catch (error) {
        console.log("err ", error);
        setLoading(false);
      }
    } else {
      alert(t("enter-otp-alert"));
    }
  };
  const handleUserData = async (e) => {
    e.preventDefault();
    if (!emailRegex.test(contact.email?.toLowerCase()?.replace(/\s/g, ""))) {
@@ -221,6 +239,7 @@ function GuestLogin() {
      }
    }
  };
  const handleInputChange = (e) => {
    if (e.target.name === "email") {
      setContact((prev) => ({
@@ -231,9 +250,56 @@ function GuestLogin() {
      setContact((prev) => ({ ...prev, [e.target.name]: e.target.value }));
    }
  };
  return (
    <div>
      <Title title="Request Sign" />
      {/* OTP Verification Modal */}
      {EnterOTP && (
        <ModalUi
          isOpen
          title={t("otp-verification")}
          handleClose={() => setEnterOtp(false)}
        >
          {loading ? (
            <div className="h-[150px] flex justify-center items-center">
              <Loader />
            </div>
          ) : (
            <form onSubmit={(e) => VerifyOTP(e)}>
              <div className="px-6 py-3 text-base-content">
                <label className="mb-2">{t("enter-otp")}</label>
                <input
                  onInvalid={(e) =>
                    e.target.setCustomValidity(t("input-required"))
                  }
                  onInput={(e) => e.target.setCustomValidity("")}
                  required
                  type="tel"
                  pattern="[0-9]{4}"
                  className="w-full op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content text-xs"
                  placeholder={t("otp-placeholder")}
                  value={OTP}
                  onChange={(e) => setOTP(e.target.value)}
                />
              </div>
              <div className="px-6 mb-3">
                <button type="submit" className="op-btn op-btn-primary">
                  {t("verify")}
                </button>
                <button
                  className="op-btn op-btn-secondary ml-2"
                  onClick={(e) => handleSendOTPBtn(e)}
                >
                  {t("resend")}
                </button>
              </div>
            </form>
          )}
        </ModalUi>
      )}
      {isLoading.isLoad ? (
        <LoaderWithMsg isLoading={isLoading} />
      ) : (
@@ -249,63 +315,34 @@ function GuestLogin() {
              )}
            </div>
            {contactId ? (
-              <>
+              <div className="w-full md:w-[50%] text-base-content">
-                {!EnterOTP ? (
+                <h1 className="text-2xl md:text-[30px]">{t("welcome")}</h1>
-                  <div className="w-full md:w-[50%] text-base-content">
+                <legend className="text-[12px] text-[#878787] mt-2 mb-1">
-                    <h1 className="text-2xl md:text-[30px]">{t("welcome")}</h1>
+                  {t("get-otp-alert")}
-                    <legend className="text-[12px] text-[#878787] mt-2 mb-1">
+                </legend>
-                      {t("get-otp-alert")}
+                <div className="p-[20px] outline outline-1 outline-slate-300/50 my-2 op-card shadow-md">
-                    </legend>
+                  <input
-                    <div className="p-[20px] outline outline-1 outline-slate-300/50 my-2 op-card shadow-md">
+                    type="email"
-                      <input
+                    name="email"
-                        type="email"
+                    value={email}
-                        name="email"
+                    className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full disabled:text-[#5c5c5c] text-xs"
-                        value={email}
+                    disabled
-                        className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full disabled:text-[#5c5c5c] text-xs"
+                  />
-                        disabled
+                </div>
-                      />
+                <div className="mt-3">
-                    </div>
+                  <button
-                    <div className="mt-3">
+                    className="op-btn op-btn-primary flex items-center"
-                      <button
+                    onClick={(e) => {
-                        className="op-btn op-btn-primary"
+                      e.preventDefault();
-                        onClick={(e) => handleSendOTPBtn(e)}
+                        SendOtp();
-                        disabled={loading}
+                    }}
-                      >
+                    disabled={loading}
                        {loading ? t("loading") : t("get-verification-code")}
                      </button>
                    </div>
                  </div>
                ) : (
                  <form
                    className="w-full md:w-[50%] text-base-content"
                    onSubmit={VerifyOTP}
                  >
-                    <h1 className="text-2xl md:text-[30px]">{t("welcome")}</h1>
+                        <i className="fa-light fa-message-sms mr-2"></i>
-                    <legend className="text-[12px] text-[#878787] mt-2">
+                        {loading ? t("loading") : t("get-verification-code")}
-                      {t("guest-email-alert")}
+                  </button>
-                    </legend>
+                </div>
-                    <div className="p-[20px] pt-[15px] outline outline-1 outline-slate-300/50 op-card my-2 shadow-md">
+              </div>
                      <p className="text-sm">{t("enter-verification-code")}</p>
                      <input
                        type="number"
                        className="mt-2 op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                        name="OTP"
                        value={OTP}
                        onChange={(e) => setOTP(e.target.value)}
                      />
                    </div>
                    <div className="mt-2.5">
                      <button
                        className="op-btn op-btn-primary"
                        type="submit"
                        disabled={loading}
                      >
                        {loading ? t("loading") : t("verify")}
                      </button>
                    </div>
                  </form>
                )}
              </>
            ) : (
              <div className="w-full md:w-[50%] text-base-content">
                <h1 className="text-2xl md:text-[30px]">{t("welcome")}</h1>
@@ -7,7 +7,9 @@ import { NavLink, useNavigate, useLocation } from "react-router";
 import login_img from "../assets/images/login_img.svg";
 import { useWindowSize } from "../hook/useWindowSize";
 import ModalUi from "../primitives/ModalUi";
-import { emailRegex } from "../constant/const";
+import {
  emailRegex,
 } from "../constant/const";
 import Alert from "../primitives/Alert";
 import { appInfo } from "../constant/appinfo";
 import { fetchAppInfo } from "../redux/reducers/infoReducer";
@@ -22,7 +24,8 @@ import { useTranslation } from "react-i18next";
 import SelectLanguage from "../components/pdf/SelectLanguage";
 function Login() {
-  const appName = "OpenSign™";
+  const appName =
    "OpenSign™";
  const { t, i18n } = useTranslation();
  const navigate = useNavigate();
  const location = useLocation();
@@ -30,17 +33,12 @@ function Login() {
  const { width } = useWindowSize();
  const [state, setState] = useState({
    email: "",
    password: "",
    alertType: "success",
    alertMsg: "",
    password: "",
    passwordVisible: false,
    mobile: "",
    phone: "",
    scanResult: "",
    baseUrl: localStorage.getItem("baseUrl"),
    parseAppId: localStorage.getItem("parseAppId"),
    loading: false,
-    thirdpartyLoader: false
+    thirdpartyLoader: false,
  });
  const [userDetails, setUserDetails] = useState({
    Company: "",
@@ -54,15 +52,30 @@ function Login() {
    // eslint-disable-next-line
  }, []);
  const setLocalVar = (user) => {
    localStorage.setItem("accesstoken", user.sessionToken);
    localStorage.setItem("UserInformation", JSON.stringify(user));
    localStorage.setItem("userEmail", user.email);
    if (user.ProfilePic) {
      localStorage.setItem("profileImg", user.ProfilePic);
    } else {
      localStorage.setItem("profileImg", "");
    }
  };
  const showToast = (type, msg) => {
    setState({ ...state, loading: false, alertType: type, alertMsg: msg });
    setTimeout(() => setState({ ...state, alertMsg: "" }), 2000);
  };
  const checkUserExt = async () => {
    const app = await getAppLogo();
    if (app?.error === "invalid_json") {
      setErrMsg(t("server-down", { appName: appName }));
-    } else if (app?.user === "not_exist") {
+    } else if (
      app?.user === "not_exist"
    ) {
      navigate("/addadmin");
    }
    if (app?.logo) {
@@ -70,11 +83,11 @@ function Login() {
    } else {
      setImage(appInfo?.applogo || undefined);
    }
    dispatch(fetchAppInfo());
    if (localStorage.getItem("accesstoken")) {
      setState({ ...state, loading: true });
      GetLoginData();
    }
    dispatch(fetchAppInfo());
  };
  const handleChange = (event) => {
    let { name, value } = event.target;
@@ -84,109 +97,50 @@ function Login() {
    setState({ ...state, [name]: value });
  };
-  const handleSubmit = async (event) => {
+  const handleLogin = async (
  ) => {
    const email = state?.email
    const password = state?.password
    if (!email || !password) {
      return;
    }
    localStorage.removeItem("accesstoken");
    try {
      setState({ ...state, loading: true });
      localStorage.setItem("appLogo", appInfo.applogo);
      const _user = await Parse.Cloud.run("loginuser", { email, password });
      if (!_user) {
        setState({ ...state, loading: false });
        return;
      }
      // Get extended user data (including 2FA status) using cloud function
      try {
        await Parse.User.become(_user.sessionToken);
        setLocalVar(_user);
        await continueLoginFlow();
      } catch (error) {
        console.error("Error checking 2FA status:", error);
        showToast("danger", t("something-went-wrong-mssg"));
      }
    } catch (error) {
      console.error("Error while logging in user", error);
      showToast("danger", "Invalid username/password or region");
    }
  };
  const handleLoginBtn = async (event) => {
    event.preventDefault();
    if (!emailRegex.test(state.email)) {
      alert("Please enter a valid email address.");
-    } else {
+      return;
      const { email, password } = state;
      if (email && password) {
        try {
          setState({ ...state, loading: true });
          localStorage.setItem("appLogo", appInfo.applogo);
          // Pass the username and password to logIn function
          const user = await Parse.User.logIn(email, password);
          if (user) {
            let _user = user.toJSON();
            localStorage.setItem("UserInformation", JSON.stringify(_user));
            localStorage.setItem("userEmail", email);
            localStorage.setItem("accesstoken", _user.sessionToken);
            localStorage.setItem("scriptId", true);
            if (_user.ProfilePic) {
              localStorage.setItem("profileImg", _user.ProfilePic);
            } else {
              localStorage.setItem("profileImg", "");
            }
            // Check extended class user role and tenentId
            try {
              const userSettings = appInfo.settings;
              await Parse.Cloud.run("getUserDetails")
                .then(async (extUser) => {
                  if (extUser) {
                    // console.log("extUser", extUser, extUser?.get("IsDisabled"));
                    const IsDisabled = extUser?.get("IsDisabled") || false;
                    if (!IsDisabled) {
                      const userRole = extUser?.get("UserRole");
                      const menu =
                        userRole &&
                        userSettings.find((menu) => menu.role === userRole);
                      if (menu) {
                        const _currentRole = userRole;
                        const redirectUrl =
                          location?.state?.from ||
                          `/${menu.pageType}/${menu.pageId}`;
                        let _role = _currentRole.replace("contracts_", "");
                        localStorage.setItem("_user_role", _role);
                        const checkLanguage = extUser?.get("Language");
                        if (checkLanguage) {
                          checkLanguage && i18n.changeLanguage(checkLanguage);
                        }
                        const results = [extUser];
                        const extUser_str = JSON.stringify(results);
                        localStorage.setItem("Extand_Class", extUser_str);
                        const extInfo = JSON.parse(JSON.stringify(extUser));
                        localStorage.setItem("userEmail", extInfo.Email);
                        localStorage.setItem("username", extInfo.Name);
                        if (extInfo?.TenantId) {
                          const tenant = {
                            Id: extInfo?.TenantId?.objectId || "",
                            Name: extInfo?.TenantId?.TenantName || ""
                          };
                          localStorage.setItem("TenantId", tenant?.Id);
                          dispatch(showTenant(tenant?.Name));
                          localStorage.setItem("TenantName", tenant?.Name);
                        }
                        localStorage.setItem("PageLanding", menu.pageId);
                        localStorage.setItem("defaultmenuid", menu.menuId);
                        localStorage.setItem("pageType", menu.pageType);
                        setState({ ...state, loading: false });
                        // Redirect to the appropriate URL after successful login
                        navigate(redirectUrl);
                      } else {
                        setState({ ...state, loading: false });
                        setIsModal(true);
                      }
                    } else {
                      showToast("danger", t("do-not-access-contact-admin"));
                      logOutUser();
                    }
                  } else {
                    showToast("danger", t("user-not-found"));
                    logOutUser();
                  }
                })
                .catch((error) => {
                  showToast("danger", t("something-went-wrong-mssg"));
                  console.error("Error while fetching Follow", error);
                });
            } catch (error) {
              showToast("danger", `${error.message}`);
            }
          }
        } catch (error) {
          console.error("Error while logging in user", error);
          showToast("danger", "Invalid username/password or region");
        }
      }
    }
    await handleLogin();
  };
  const setThirdpartyLoader = (value) => {
    setState({ ...state, thirdpartyLoader: value });
  };
  const thirdpartyLoginfn = async (sessionToken) => {
    const baseUrl = localStorage.getItem("baseUrl");
    const parseAppId = localStorage.getItem("parseAppId");
@@ -201,113 +155,27 @@ function Login() {
    });
    if (res.data) {
      let _user = res.data;
-      localStorage.setItem("UserInformation", JSON.stringify(_user));
+      setLocalVar(_user);
      localStorage.setItem("userEmail", _user.email);
      localStorage.setItem("accesstoken", _user.sessionToken);
      localStorage.setItem("scriptId", true);
      if (_user.ProfilePic) {
        localStorage.setItem("profileImg", _user.ProfilePic);
      } else {
        localStorage.setItem("profileImg", "");
      }
      // Check extended class user role and tenentId
      try {
        const userSettings = appInfo.settings;
-        await Parse.Cloud.run("getUserDetails")
+        const extUser = await Parse.Cloud.run("getUserDetails");
          .then(async (extUser) => {
            if (extUser) {
              const IsDisabled = extUser?.get("IsDisabled") || false;
              if (!IsDisabled) {
                const userRole = extUser?.get("UserRole");
                const menu =
                  userRole &&
                  userSettings.find((menu) => menu.role === userRole);
                if (menu) {
                  const _currentRole = userRole;
                  const redirectUrl =
                    location?.state?.from || `/${menu.pageType}/${menu.pageId}`;
                  const _role = _currentRole.replace("contracts_", "");
                  localStorage.setItem("_user_role", _role);
                  const results = [extUser];
                  const extUser_stringify = JSON.stringify(results);
                  localStorage.setItem("Extand_Class", extUser_stringify);
                  const extInfo = JSON.parse(JSON.stringify(extUser));
                  localStorage.setItem("userEmail", extInfo?.Email);
                  localStorage.setItem("username", extInfo?.Name);
                  if (extInfo?.TenantId) {
                    const tenant = {
                      Id: extInfo?.TenantId?.objectId || "",
                      Name: extInfo?.TenantId?.TenantName || ""
                    };
                    localStorage.setItem("TenantId", tenant?.Id);
                    dispatch(showTenant(tenant?.Name));
                    localStorage.setItem("TenantName", tenant?.Name);
                  }
                  localStorage.setItem("PageLanding", menu.pageId);
                  localStorage.setItem("defaultmenuid", menu.menuId);
                  localStorage.setItem("pageType", menu.pageType);
                  navigate(redirectUrl);
                } else {
                  showToast("danger", t("role-not-found"));
                  logOutUser();
                }
              } else {
                showToast("danger", t("do-not-access-contact-admin"));
                logOutUser();
              }
            } else {
              showToast("danger", t("user-not-found"));
              logOutUser();
            }
          })
          .catch((err) => {
            console.error("err in fetching extUser", err);
            showToast("danger", `${err.message}`);
            const payload = { sessionToken: sessionToken };
            handleSubmitbtn(payload);
          });
      } catch (error) {
        showToast("danger", `${error.message}`);
        console.log(error);
      } finally {
        setThirdpartyLoader(false);
      }
    }
  };
  const GetLoginData = async () => {
    setState({ ...state, loading: true });
    try {
      const user = await Parse.User.become(localStorage.getItem("accesstoken"));
      const _user = user.toJSON();
      localStorage.setItem("UserInformation", JSON.stringify(_user));
      localStorage.setItem("accesstoken", _user.sessionToken);
      localStorage.setItem("scriptId", true);
      if (_user.ProfilePic) {
        localStorage.setItem("profileImg", _user.ProfilePic);
      } else {
        localStorage.setItem("profileImg", "");
      }
      const userSettings = appInfo.settings;
      await Parse.Cloud.run("getUserDetails").then(async (extUser) => {
        if (extUser) {
          const IsDisabled = extUser?.get("IsDisabled") || false;
          if (!IsDisabled) {
-            const userRole = extUser.get("UserRole");
+            const userRole = extUser?.get("UserRole");
            const _currentRole = userRole;
            const menu =
              userRole && userSettings.find((menu) => menu.role === userRole);
            if (menu) {
-              const _role = _currentRole.replace("contracts_", "");
+              const _currentRole = userRole;
              localStorage.setItem("_user_role", _role);
              const redirectUrl =
                location?.state?.from || `/${menu.pageType}/${menu.pageId}`;
-              const results = [extUser];
+              const _role = _currentRole.replace("contracts_", "");
              const extendedInfo_stringify = JSON.stringify(results);
              localStorage.setItem("Extand_Class", extendedInfo_stringify);
              const extInfo = JSON.parse(JSON.stringify(extUser));
-              localStorage.setItem("userEmail", extInfo.Email);
+              localStorage.setItem("_user_role", _role);
-              localStorage.setItem("username", extInfo.Name);
+              localStorage.setItem("Extand_Class", JSON.stringify([extUser]));
              localStorage.setItem("userEmail", extInfo?.Email);
              localStorage.setItem("username", extInfo?.Name);
              if (extInfo?.TenantId) {
                const tenant = {
                  Id: extInfo?.TenantId?.objectId || "",
@@ -320,10 +188,9 @@ function Login() {
              localStorage.setItem("PageLanding", menu.pageId);
              localStorage.setItem("defaultmenuid", menu.menuId);
              localStorage.setItem("pageType", menu.pageType);
-              // Redirect to the appropriate URL after successful login
+                navigate(redirectUrl);
              navigate(redirectUrl);
            } else {
-              setState({ ...state, loading: false });
+              showToast("danger", t("role-not-found"));
              logOutUser();
            }
          } else {
@@ -334,7 +201,66 @@ function Login() {
          showToast("danger", t("user-not-found"));
          logOutUser();
        }
-      });
+      } catch (error) {
        console.error("err in fetching extUser", err);
        showToast("danger", `${err.message}`);
        const payload = { sessionToken: _user.sessionToken };
        handleSubmitbtn(payload);
      } finally {
        setThirdpartyLoader(false);
      }
    }
  };
  const GetLoginData = async () => {
    setState({ ...state, loading: true });
    try {
      const user = await Parse.User.become(localStorage.getItem("accesstoken"));
      const _user = user.toJSON();
      setLocalVar(_user);
      const userSettings = appInfo.settings;
      const extUser = await Parse.Cloud.run("getUserDetails");
      if (extUser) {
        const IsDisabled = extUser?.get("IsDisabled") || false;
        if (!IsDisabled) {
          const userRole = extUser.get("UserRole");
          const _currentRole = userRole;
          const menu =
            userRole && userSettings.find((menu) => menu.role === userRole);
          if (menu) {
            const extInfo = JSON.parse(JSON.stringify(extUser));
            const _role = _currentRole.replace("contracts_", "");
            localStorage.setItem("_user_role", _role);
            const redirectUrl =
              location?.state?.from || `/${menu.pageType}/${menu.pageId}`;
            localStorage.setItem("Extand_Class", JSON.stringify([extUser]));
            localStorage.setItem("userEmail", extInfo.Email);
            localStorage.setItem("username", extInfo.Name);
            if (extInfo?.TenantId) {
              const tenant = {
                Id: extInfo?.TenantId?.objectId || "",
                Name: extInfo?.TenantId?.TenantName || ""
              };
              localStorage.setItem("TenantId", tenant?.Id);
              dispatch(showTenant(tenant?.Name));
              localStorage.setItem("TenantName", tenant?.Name);
            }
            localStorage.setItem("PageLanding", menu.pageId);
            localStorage.setItem("defaultmenuid", menu.menuId);
            localStorage.setItem("pageType", menu.pageType);
              navigate(redirectUrl);
          } else {
            setState({ ...state, loading: false });
            logOutUser();
          }
        } else {
          showToast("danger", t("do-not-access-contact-admin"));
          logOutUser();
        }
      } else {
        showToast("danger", t("user-not-found"));
        logOutUser();
      }
    } catch (error) {
      showToast("danger", t("something-went-wrong-mssg"));
      console.log("err", error);
@@ -353,7 +279,6 @@ function Login() {
      const userInformation = JSON.parse(
        localStorage.getItem("UserInformation")
      );
      // console.log("payload ", payload);
      if (payload && payload.sessionToken) {
        const params = {
          userDetails: {
@@ -367,7 +292,6 @@ function Login() {
          }
        };
        const userSignUp = await Parse.Cloud.run("usersignup", params);
        // console.log("userSignUp ", userSignUp);
        if (userSignUp && userSignUp.sessionToken) {
          const LocalUserDetails = {
            name: userInformation.name,
@@ -417,6 +341,63 @@ function Login() {
    localStorage.setItem("parseAppId", appid);
  };
  const continueLoginFlow = async () => {
    try {
      const userSettings = appInfo.settings;
      const extUser = await Parse.Cloud.run("getUserDetails");
      if (extUser) {
        const IsDisabled = extUser?.get("IsDisabled") || false;
        if (!IsDisabled) {
          const userRole = extUser?.get("UserRole");
          const menu =
            userRole && userSettings?.find((menu) => menu.role === userRole);
          if (menu) {
            const _currentRole = userRole;
            const redirectUrl =
              location?.state?.from || `/${menu.pageType}/${menu.pageId}`;
            const _role = _currentRole.replace("contracts_", "");
            localStorage.setItem("_user_role", _role);
            const checkLanguage = extUser?.get("Language");
            if (checkLanguage) {
              checkLanguage && i18n.changeLanguage(checkLanguage);
            }
            const extInfo = JSON.parse(JSON.stringify(extUser));
            // Continue with storing user data and redirecting
            localStorage.setItem("Extand_Class", JSON.stringify([extUser]));
            localStorage.setItem("userEmail", extInfo.Email);
            localStorage.setItem("username", extInfo.Name);
            if (extInfo?.TenantId) {
              const tenant = {
                Id: extInfo?.TenantId?.objectId || "",
                Name: extInfo?.TenantId?.TenantName || ""
              };
              localStorage.setItem("TenantId", tenant?.Id);
              dispatch(showTenant(tenant?.Name));
              localStorage.setItem("TenantName", tenant?.Name);
            }
            localStorage.setItem("PageLanding", menu.pageId);
            localStorage.setItem("defaultmenuid", menu.menuId);
            localStorage.setItem("pageType", menu.pageType);
              setState({ ...state, loading: false });
              navigate(redirectUrl);
          } else {
            setState({ ...state, loading: false });
            setIsModal(true);
          }
        } else {
          showToast("danger", t("do-not-access-contact-admin"));
          logOutUser();
        }
      } else {
          showToast("danger", t("user-not-found"));
          logOutUser();
      }
    } catch (error) {
      console.error("Error during login flow", error);
      showToast("danger", error.message || t("something-went-wrong-mssg"));
    }
  };
  return errMsg ? (
    <div className="h-screen flex justify-center text-center items-center p-4 text-gray-500 text-base">
      {errMsg}
@@ -437,7 +418,7 @@ function Login() {
          <div
            aria-labelledby="loginHeading"
            role="region"
-            className="pb-1 md:pb-4 pt-10 md:px-10 lg:px-16 h-screen"
+            className="pb-1 md:pb-4 pt-10 md:px-10 lg:px-16 h-full"
          >
            <div className="md:p-4 lg:p-10 p-4 bg-base-100 text-base-content op-card">
              <div className="w-[250px] h-[66px] inline-block overflow-hidden">
@@ -451,7 +432,7 @@ function Login() {
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-x-2">
                <div>
-                  <form onSubmit={handleSubmit} aria-label="Login Form">
+                  <form onSubmit={handleLoginBtn} aria-label="Login Form">
                    <h1 className="text-[30px] mt-6">{t("welcome")}</h1>
                    <fieldset>
                      <legend className="text-[12px] text-[#878787]">
@@ -476,44 +457,47 @@ function Login() {
                          onInput={(e) => e.target.setCustomValidity("")}
                        />
                        <hr className="my-1 border-none" />
-                        <label className="block text-xs" htmlFor="password">
+                            <label className="block text-xs" htmlFor="password">
-                          {t("password")}
+                              {t("password")}
-                        </label>
+                            </label>
-                        <div className="relative">
+                            <div className="relative">
-                          <input
+                              <input
-                            id="password"
+                                id="password"
-                            type={state.passwordVisible ? "text" : "password"}
+                                type={
-                            className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                                  state.passwordVisible ? "text" : "password"
-                            name="password"
+                                }
-                            value={state.password}
+                                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-                            autoComplete="current-password"
+                                name="password"
-                            onChange={handleChange}
+                                value={state.password}
-                            onInvalid={(e) =>
+                                autoComplete="current-password"
-                              e.target.setCustomValidity(t("input-required"))
+                                onChange={handleChange}
-                            }
+                                onInvalid={(e) =>
-                            onInput={(e) => e.target.setCustomValidity("")}
+                                  e.target.setCustomValidity(
-                            required
+                                    t("input-required")
-                          />
+                                  )
-                          <span
+                                }
-                            className="absolute cursor-pointer top-[50%] right-[10px] -translate-y-[50%] text-base-content"
+                                onInput={(e) => e.target.setCustomValidity("")}
-                            onClick={togglePasswordVisibility}
+                                required
-                          >
+                              />
-                            {state.passwordVisible ? (
+                              <span
-                              <i className="fa-light fa-eye-slash text-xs pb-1" /> // Close eye icon
+                                className="absolute cursor-pointer top-[50%] right-[10px] -translate-y-[50%] text-base-content"
-                            ) : (
+                                onClick={togglePasswordVisibility}
-                              <i className="fa-light fa-eye text-xs pb-1 " /> // Open eye icon
+                              >
-                            )}
+                                {state.passwordVisible ? (
-                          </span>
+                                  <i className="fa-light fa-eye-slash text-xs pb-1" /> // Close eye icon
-                        </div>
+                                ) : (
-
+                                  <i className="fa-light fa-eye text-xs pb-1 " /> // Open eye icon
-                        <div className="relative mt-1">
+                                )}
-                          <NavLink
+                              </span>
-                            to="/forgetpassword"
+                            </div>
-                            className="text-[13px] op-link op-link-primary underline-offset-1 focus:outline-none ml-1"
+                          <div className="relative mt-1">
-                          >
+                            <NavLink
-                            {t("forgot-password")}
+                              to="/forgetpassword"
-                          </NavLink>
+                              className="text-[13px] op-link op-link-primary underline-offset-1 focus:outline-none ml-1"
-                        </div>
+                            >
                              {t("forgot-password")}
                            </NavLink>
                          </div>
                      </div>
                    </fieldset>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-center text-xs font-bold mt-2">
@@ -1,13 +1,17 @@
 import React, { useEffect, useState, useRef } from "react";
 import "../styles/opensigndrive.css";
-import { iconColor } from "../constant/const";
+import {
-import { getDrive } from "../constant/Utils";
+  iconColor,
 } from "../constant/const";
 import {
  getDrive
 } from "../constant/Utils";
 import { useNavigate } from "react-router";
 import Title from "../components/Title";
 import Parse from "parse";
 import ModalUi from "../primitives/ModalUi";
 import TourContentWithBtn from "../primitives/TourContentWithBtn";
-import Tour from "reactour";
+import Tour from "../primitives/Tour";
 import axios from "axios";
 import Loader from "../primitives/Loader";
 import { useTranslation } from "react-i18next";
@@ -25,7 +29,8 @@ const AppLoader = () => {
  );
 };
 function Opensigndrive() {
-  const appName = "OpenSign™";
+  const appName =
    "OpenSign™";
  const drivename = appName === "OpenSign™" ? "OpenSign™" : "";
  const { t } = useTranslation();
  const navigate = useNavigate();
@@ -58,6 +63,9 @@ function Opensigndrive() {
  const [isDontShow, setIsDontShow] = useState(false);
  const [tourData, setTourData] = useState();
  const [showTourFirstTIme, setShowTourFirstTime] = useState(true);
  const [searchTerm, setSearchTerm] = useState("");
  const [mobileSearchOpen, setMobileSearchOpen] = useState(false);
  const debounceTimer = useRef(null);
  const orderName = {
    Ascending: "Ascending",
    Descending: "Descending",
@@ -125,7 +133,7 @@ function Opensigndrive() {
    }
  ];
  const getDetails = async () => {
-    getPdfDocumentList();
+      getPdfDocumentList();
  };
  //function for get all pdf document list
  const getPdfDocumentList = async (disbaleLoading) => {
@@ -209,9 +217,7 @@ function Opensigndrive() {
      });
    } finally {
      setLoading(false);
-      setIsLoading({
+      setIsLoading({ isLoad: false });
        isLoad: false
      });
    }
  };
@@ -219,15 +225,16 @@ function Opensigndrive() {
  const handleScroll = () => {
    //get document of render openSign-drive component using id
    const documentList = document.getElementById("renderList");
-    //documentList.clientHeight property returns the height of an element's content area, including padding but not including borders, margins, or scrollbars.
+    const { scrollTop, clientHeight, scrollHeight } = documentList;
-    //documentList.scrollHeight property returns the entire height of an element,including the parts that are not visible due to overflow..
+    const scrolled = Math.ceil(scrollTop + clientHeight); // ceil return e.g 3.14 => 4
-    // documentList.scrollTop property show height of element, how much the content has been scrolled from the top.
+    const totalHeight = Math.floor(scrollHeight); // floor return e.g 3.14 => 3
    // clientHeight property returns the height of an element's content area, including padding but not including borders, margins, or scrollbars.
    // scrollHeight property returns the entire height of an element,including the parts that are not visible due to overflow..
    // scrollTop property show height of element, how much the content has been scrolled from the top.
    // When the sum of scrollTop and clientHeight is equal to scrollHeight, it means that the user has scrolled to the bottom of the div.
-    if (
+
-      documentList &&
+    if (scrolled >= totalHeight) {
      documentList.scrollTop + documentList.clientHeight >=
        documentList.scrollHeight
    ) {
      //disableLoading is used disable initial loader
      const disableLoading = true;
      // If the fetched data length is less than the limit, it means there's no more data to fetch
@@ -252,11 +259,7 @@ function Opensigndrive() {
  const handleRoute = (index, folderData) => {
    setSkip(0);
    // after onclick on route filter route from that index
-    const updateFolderName = folderName.filter((x, i) => {
+    const updateFolderName = folderName.filter((_, i) => i <= index);
      if (i <= index) {
        return x;
      }
    });
    setFolderName(updateFolderName);
    //get route details after onclick path of folder name
    const getCurrentId = folderData[index];
@@ -517,6 +520,34 @@ function Opensigndrive() {
      setIsTour(true);
    }
  }
  const handleSearchChange = async (e) => {
    const name = e.target.value.toLowerCase();
    setSearchTerm(name);
    // Clear previous timer
    if (debounceTimer.current) {
      clearTimeout(debounceTimer.current);
    }
    // Start new debounce timer
    debounceTimer.current = setTimeout(async () => {
      try {
        const res = await Parse.Cloud.run("filterdocs", { searchTerm: name });
        setPdfData(JSON.parse(JSON.stringify(res)));
      } catch (err) {
        console.error("Search error:", err);
        alert(`Error: ${err.message}`);
      }
    }, 300);
  };
  // Cleanup on unmount
  useEffect(() => {
    return () => {
      if (debounceTimer.current) {
        clearTimeout(debounceTimer.current);
      }
    };
  }, []);
  return (
    <div className="bg-base-100 text-base-content rounded-box w-full shadow-md">
      <Title title={`${drivename} Drive`} drive={true} />
@@ -524,22 +555,14 @@ function Opensigndrive() {
        isOpen={isAlert.isShow}
        title={t("alert")}
        handleClose={() => {
-          setIsAlert({
+          setIsAlert({ isShow: false, alertMessage: "" });
            isShow: false,
            alertMessage: ""
          });
        }}
      >
        <div className="h-full p-[20px] pb-[15px]">
          <p>{isAlert.alertMessage}</p>
          <div className="h-[1px] bg-[#9f9f9f] w-full my-[15px]"></div>
          <button
-            onClick={() =>
+            onClick={() => setIsAlert({ isShow: false, alertMessage: "" })}
              setIsAlert({
                isShow: false,
                alertMessage: ""
              })
            }
            type="button"
            className="op-btn op-btn-neutral op-btn-sm"
          >
@@ -608,7 +631,7 @@ function Opensigndrive() {
        </div>
      ) : (
        <>
-          <div className="flex flex-row justify-between items-center px-[15px] md:px-[25px] pt-[20px]">
+          <div className="flex flex-row justify-between items-center px-[15px] md:px-[25px] pt-2 md:pt-[20px]">
            {tourData && (
              <Tour
                onRequestClose={closeTour}
@@ -627,24 +650,42 @@ function Opensigndrive() {
            >
              {handleFolderTab(folderName)}
            </div>
-            <div className="flex flex-row items-center">
+            <div className="flex flex-row items-center justify-center md:gap-1">
              {/* Desktop search input */}
              <div className="hidden md:block p-2">
                <input
                  type="search"
                  value={searchTerm}
                  onChange={handleSearchChange}
                  placeholder="Search documents…"
                  className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-64 text-xs"
                />
              </div>
              {/* Mobile search toggle */}
              <button
                className="md:hidden p-2 flex justify-center items-center focus:outline-none rounded-md hover:bg-gray-200 text-[18px]"
                aria-label="Search"
                onClick={() => setMobileSearchOpen((open) => !open)}
              >
                <i
                  style={{ color: `${iconColor}` }}
                  className="fa-solid fa-magnifying-glass"
                ></i>
              </button>
              <div
                id="folder-menu"
-                className={`${
+                className={`${isOptions ? "dropdown show dropDownStyle" : "dropdown"} hidden md:block cursor-pointer hover:bg-gray-200 p-2 rounded-md`}
                  isOptions ? "dropdown show dropDownStyle" : "dropdown"
                } hidden md:block`}
                onClick={() => setIsOptions(!isOptions)}
              >
-                <div className="sort" data-tut="reactourSecond">
+                <div data-tut="reactourSecond">
                  <i
-                    className="fa-light fa-plus-square"
+                    className="fa-light fa-plus-square text-[24px]"
                    aria-hidden="true"
-                    style={{ fontSize: "25px", color: `${iconColor}` }}
+                    style={{ color: `${iconColor}` }}
                  ></i>
                </div>
                <div
                  className={`${isOptions ? "block" : "hidden"} ${dropdowncss}`}
                  // className={isOptions ? "dropdown-menu show" : "dropdown-menu"}
                  aria-labelledby="dropdownMenuButton"
                  aria-expanded={isOptions ? "true" : "false"}
                >
@@ -683,11 +724,11 @@ function Opensigndrive() {
              >
                <div
                  data-tut="reactourThird"
-                  className="sort "
+                  className="cursor-pointer flex flex-row items-center justify-center p-2 hover:bg-gray-200 rounded-md"
                  data-toggle="dropdown"
                >
                  <i
-                    className="fa-light fa-sort-amount-asc mr-[5px] text-[14px]"
+                    className="fa-light fa-sort-amount-asc mr-[5px] text-[19px]"
                    aria-hidden="true"
                    style={{ color: `${iconColor}` }}
                  ></i>
@@ -702,81 +743,67 @@ function Opensigndrive() {
                  aria-labelledby="dropdownMenuButton"
                  aria-expanded={isShowSort ? "true" : "false"}
                >
-                  {sortingValue.map((value, ind) => {
+                  {sortingValue.map((value, ind) => (
-                    return (
+                    <span
-                      <span
+                      key={ind}
-                        key={ind}
+                      onClick={() => {
-                        onClick={() => {
+                        setSelectedSort(value);
-                          setSelectedSort(value);
+                        sortingData(value, null, pdfData);
-                          sortingData(value, null, pdfData);
+                      }}
-                        }}
+                      className="dropdown-item text-[10px] md:text-[13px]"
-                        className="dropdown-item text-[10px] md:text-[13px]"
+                      style={{
-                        style={{
+                        paddingLeft: selectedSort !== value && "31px"
-                          paddingLeft: selectedSort !== value && "31px"
+                      }}
-                        }}
+                    >
-                      >
+                      {selectedSort === value && (
-                        {selectedSort === value && (
+                        <i className="fa-light fa-check" aria-hidden="true"></i>
-                          <i
+                      )}
-                            className="fa-light fa-check"
+                      <span className="ml-[5px]">
-                            aria-hidden="true"
+                        {t(`sort-order.${value}`)}
                          ></i>
                        )}
                        <span className="ml-[5px]">
                          {t(`sort-order.${value}`)}
                        </span>
                      </span>
-                    );
+                    </span>
-                  })}
+                  ))}
                  <hr className="hrStyle" />
-                  {sortOrder.map((order, ind) => {
+                  {sortOrder.map((order, ind) => (
-                    return (
+                    <span
-                      <span
+                      key={ind}
-                        key={ind}
+                      onClick={() => {
-                        onClick={() => {
+                        setSortingOrder(order);
-                          setSortingOrder(order);
+                        sortingData(null, order, pdfData);
-                          sortingData(null, order, pdfData);
+                      }}
-                        }}
+                      className="dropdown-item text-[10px] md:text-[13px]"
-                        className="dropdown-item text-[10px] md:text-[13px]"
+                      style={{
-                        style={{
+                        paddingLeft: sortingOrder !== order && "31px"
-                          paddingLeft: sortingOrder !== order && "31px"
+                      }}
-                        }}
+                    >
-                      >
+                      {sortingOrder === order && (
-                        {sortingOrder === order && (
+                        <i className="fa-light fa-check" aria-hidden="true"></i>
-                          <i
+                      )}
-                            className="fa-light fa-check"
+                      <span className="ml-[5px]">
-                            aria-hidden="true"
+                        {t(`sort-order.${order}`)}
                          ></i>
                        )}
                        <span className="ml-[5px]">
                          {t(`sort-order.${order}`)}
                        </span>
                      </span>
-                    );
+                    </span>
-                  })}
+                  ))}
                </div>
              </div>
              <div
                className="cursor-pointer p-2 hover:bg-gray-200 rounded-md flex justify-center items-center"
                data-tut="reactourForth"
                className="sort"
                onClick={() => setIsList(!isList)}
              >
                <i
-                  className={
+                  className={`${isList ? "fa-light fa-th-large" : "fa-light fa-list"} text-[20px]`}
-                    isList ? "fa-light fa-th-large" : "fa-light fa-list"
+                  style={{ color: `${iconColor}` }}
                  }
                  style={{ fontSize: "24px", color: `${iconColor}` }}
                  aria-hidden="true"
                ></i>
              </div>
              <div
                id="folder-menu"
-                className={`${
+                className={`${isOptions ? "dropdown show dropDownStyle" : "dropdown"} md:hidden`}
                  isOptions ? "dropdown show dropDownStyle" : "dropdown"
                } md:hidden`}
                onClick={() => setIsOptions(!isOptions)}
              >
                <div
-                  className="p-[19px] my-2 flex items-center justify-center cursor-pointer hover:bg-[var(--mauve-3)] rounded-[2px] shadow-[0_2px_4px_rgba(168,204,206,0.1)]"
+                  className="p-3 flex items-center justify-center cursor-pointer rounded-md hover:bg-gray-200"
                  data-tut="reactourSecond"
                >
                  <i
@@ -820,7 +847,18 @@ function Opensigndrive() {
              </div>
            </div>
          </div>
-
+          {/* Mobile search overlay */}
          {mobileSearchOpen && (
            <div className="top-full left-0 w-full bg-white px-4 py-2 shadow-md md:hidden">
              <input
                type="search"
                value={searchTerm}
                onChange={handleSearchChange}
                placeholder="Search documents…"
                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
              />
            </div>
          )}
          {pdfData && pdfData.length === 0 ? (
            <div className="flex justify-center items-center w-full h-[50vh]">
              <span className="text-base-content font-bold">
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
prafull-opensignlabsandGitHub	c4e28e6e6e	Merge pull request #1764 from OpenSignLabs/updates-15349515719 v2.23.0	2025-05-30 20:26:41 +05:30
prafull-opensignlabs	b19fb29b82	Merge pull request #708 from OpenSignLabs/staging refactor: unnecessary code	2025-05-30 14:54:53 +00:00
prafull-opensignlabsandGitHub	3d223ba343	Merge pull request #1756 from OpenSignLabs/updates-15275255429 v2.22.0	2025-05-27 18:13:12 +05:30
prafull-opensignlabs	98754c776f	Merge pull request #675 from OpenSignLabs/staging v2.22.0	2025-05-27 12:28:40 +00:00
prafull-opensignlabsandGitHub	1550e3a3d0	Merge pull request #1748 from OpenSignLabs/updates-15156338467 v2.21.2	2025-05-21 13:09:14 +05:30
prafull-opensignlabs	3500883205	v2.21.2 fix: handle subscription error in publicsign	2025-05-21 07:37:15 +00:00
prafull-opensignlabsandGitHub	8f2433fbea	Merge pull request #1737 from OpenSignLabs/updates-15043583319 v2.21.1	2025-05-15 16:48:53 +05:30
prafull-opensignlabs	b671dbac19	v2.21.1 fix: handle undefined placeholders condition	2025-05-15 11:17:30 +00:00
prafull-opensignlabsandGitHub	79cdbc9c8c	Merge pull request #1735 from OpenSignLabs/updates-15024699698 fix: resolve error cannot read undefined props	2025-05-14 20:55:08 +05:30
prafull-opensignlabs	e585b7c943	fix: resolve error cannot read undefined props	2025-05-14 15:24:27 +00:00
prafull-opensignlabsandGitHub	5336e2cb7c	Merge pull request #1734 from OpenSignLabs/prafull-opensignlabs-patch-7 refactor: remove unnecessary file	2025-05-14 20:26:36 +05:30
prafull-opensignlabsandGitHub	72401291f8	Delete apps/OpenSign/vite.public-template.config.js	2025-05-14 20:24:54 +05:30
prafull-opensignlabsandGitHub	7b34314b9e	Merge pull request #1733 from OpenSignLabs/updates-15023728155 fix: correct build commands for selfhosting	2025-05-14 20:13:14 +05:30
prafull-opensignlabs	b6f1cceeca	Merge pull request #612 from OpenSignLabs/staging fix: correct build commands for selfhosting	2025-05-14 14:42:30 +00:00
prafull-opensignlabsandGitHub	c422cdac06	Merge pull request #1732 from OpenSignLabs/updates-15023371589 fix: edit template option not visible in mobile view	2025-05-14 20:00:02 +05:30
prafull-opensignlabsandGitHub	ab08d2615d	Update package.json	2025-05-14 19:59:01 +05:30
prafull-opensignlabs	2b0c7488d9	Merge pull request #610 from OpenSignLabs/staging fix: edit template option not visible in mobile view	2025-05-14 14:27:57 +00:00
prafull-opensignlabsandGitHub	6927540741	Merge pull request #1731 from OpenSignLabs/updates-15022725718 v2.21.0	2025-05-14 19:33:19 +05:30
prafull-opensignlabs	1ceeee36ac	v2.21.0 Merge pull request #601 from OpenSignLabs/staging	2025-05-14 14:00:50 +00:00
prafull-opensignlabsandGitHub	81d3969d1f	Merge pull request #1719 from OpenSignLabs/updates-14856876951 v2.20.1	2025-05-06 15:35:42 +05:30
prafull-opensignlabs	5819103f57	v2.20.1	2025-05-06 10:01:20 +00:00
prafull-opensignlabsandGitHub	6653b7ae5a	Merge pull request #1717 from OpenSignLabs/updates-14829517615 v2.20.0	2025-05-05 10:46:07 +05:30
prafull-opensignlabs	b50c1e70ee	v2.20.0	2025-05-05 05:12:54 +00:00
prafull-opensignlabsandGitHub	365c2a217e	Merge pull request #1709 from OpenSignLabs/prafull-opensignlabs-patch-5 fix: quick send not working	2025-04-29 12:11:39 +05:30
prafull-opensignlabsandGitHub	b1b9b20e97	Update Validate.js	2025-04-29 12:10:14 +05:30
prafull-opensignlabsandGitHub	75c0cdb5f9	fix: quick send not working	2025-04-29 12:09:05 +05:30
prafull-opensignlabsandGitHub	740ccca1f6	Merge pull request #1704 from OpenSignLabs/updates-14689408163 Merge pull request #547 from OpenSignLabs/staging	2025-04-27 12:21:00 +05:30
prafull-opensignlabs	f3b79cb71f	Merge pull request #547 from OpenSignLabs/staging refactor: remove extra comment	2025-04-27 06:50:12 +00:00
prafull-opensignlabsandGitHub	f95ea0b9e9	Merge pull request #1702 from OpenSignLabs/updates-14689261849 fix: update migration script	2025-04-27 12:01:50 +05:30
prafull-opensignlabs	647a9ce5b4	Merge pull request #545 from OpenSignLabs/staging fix: update migration script	2025-04-27 06:30:15 +00:00
prafull-opensignlabsandGitHub	3f3ca668f5	Merge pull request #1700 from OpenSignLabs/updates-14666117248 fix: return https protocol for signing urls	2025-04-25 19:17:21 +05:30
prafull-opensignlabs	2fd6d1a37a	fix: return https protocol for signing urls	2025-04-25 13:46:14 +00:00
prafull-opensignlabsandGitHub	307137f926	Merge pull request #1699 from OpenSignLabs/updates-14660165068 remove non-exist class from migration script	2025-04-25 13:51:06 +05:30
prafull-opensignlabs	2394880dfc	Merge pull request #541 from OpenSignLabs/staging remove non-exist defaultOtp class from migration	2025-04-25 08:19:46 +00:00
AmolandGitHub	414cdcd4b5	Merge pull request #1698 from OpenSignLabs/prafull-opensignlabs-patch-4 fix: Workflow does not contain permissions	2025-04-25 13:29:43 +05:30
prafull-opensignlabsandGitHub	1fa6b25890	fix: Workflow does not contain permissions	2025-04-25 13:29:03 +05:30
prafull-opensignlabsandGitHub	ff2fd44b19	Merge pull request #1697 from OpenSignLabs/updates-14659684433 build(deps): update react-router package to fix vulnerabilities	2025-04-25 13:22:28 +05:30
prafull-opensignlabs	ad466fb066	build(deps): update react-router package to fix vulnerabilities	2025-04-25 07:51:45 +00:00
AmolandGitHub	0f179fed67	Merge pull request #1696 from OpenSignLabs/updates-14659482113 v2.19.0	2025-04-25 13:13:08 +05:30
nxglabs	3ded6c35a1	Merge pull request #536 from OpenSignLabs/doc_load_drive refactor: remove protected fields migration	2025-04-25 07:39:21 +00:00
AmolandGitHub	64293db3a1	Merge pull request #1695 from OpenSignLabs/prafull-opensignlabs-patch-3 Update Docker.yml	2025-04-25 13:06:15 +05:30