Merge pull request #2101 from OpenSignLabs/updates-21751052809

v2.36.0

apps/OpenSign/package.json

@@ -1,48 +1,48 @@
 {
   "name": "open_sign",
-  "version": "2.34.0",
+  "version": "2.35.0",
   "private": true,
   "dependencies": {
     "@formkit/auto-animate": "^0.9.0",
     "@imgly/background-removal": "^1.7.0",
-    "@lottiefiles/dotlottie-react": "^0.17.10",
+    "@lottiefiles/dotlottie-react": "^0.17.13",
     "@pdf-lib/fontkit": "^1.1.1",
-    "@radix-ui/themes": "^3.2.1",
+    "@radix-ui/themes": "^3.3.0",
     "@reactour/tour": "^3.8.0",
     "@reduxjs/toolkit": "^2.11.2",
-    "axios": "^1.13.2",
+    "axios": "^1.13.4",
     "body-scroll-lock": "^4.0.0-beta.0",
     "date-fns-tz": "^3.2.0",
     "file-saver": "^2.0.5",
-    "i18next": "^25.7.3",
+    "i18next": "^25.8.0",
     "i18next-browser-languagedetector": "^8.2.0",
     "i18next-http-backend": "^3.0.2",
     "jszip": "^3.10.1",
     "jwt-decode": "^4.0.0",
     "moment": "^2.30.1",
-    "parse": "^8.0.0",
+    "parse": "^8.0.3",
     "pdf-lib": "^1.17.1",
     "pkijs": "^3.3.3",
     "print-js": "^1.6.0",
     "prismjs": "^1.30.0",
     "quill-html-edit-button": "^3.0.0",
     "radix-ui": "^1.4.3",
-    "react": "^19.2.3",
+    "react": "^19.2.4",
     "react-bootstrap": "^2.10.10",
     "react-confetti": "^6.4.0",
-    "react-datepicker": "^9.0.0",
+    "react-datepicker": "^9.1.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dnd-multi-backend": "^9.0.0",
-    "react-dom": "^19.2.3",
+    "react-dom": "^19.2.4",
     "react-gtm-module": "^2.0.11",
-    "react-i18next": "^16.5.0",
+    "react-i18next": "^16.5.4",
     "react-konva": "^19.2.1",
     "react-pdf": "^10.2.0",
-    "react-quill-new": "^3.6.0",
+    "react-quill-new": "^3.8.3",
     "react-redux": "^9.2.0",
     "react-rnd": "^10.5.2",
-    "react-router": "^7.10.1",
+    "react-router": "^7.13.0",
     "react-scrollbars-custom": "^4.1.1",
     "react-select": "^5.10.2",
     "react-signature-canvas": "^1.1.0-alpha.2",
@@ -93,37 +93,37 @@
     }
   },
   "devDependencies": {
-    "@babel/core": "^7.28.3",
-    "@babel/preset-env": "^7.28.3",
+    "@babel/core": "^7.29.0",
+    "@babel/preset-env": "^7.29.0",
     "@babel/preset-react": "^7.28.5",
-    "@babel/runtime-corejs2": "^7.28.3",
-    "@testing-library/jest-dom": "^6.8.0",
-    "@testing-library/react": "^16.3.1",
+    "@babel/runtime-corejs2": "^7.28.6",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/react": "^19.2.7",
-    "@vitejs/plugin-react": "^5.1.2",
-    "@vitest/ui": "^4.0.15",
-    "autoprefixer": "^10.4.23",
+    "@types/react": "^19.2.10",
+    "@vitejs/plugin-react": "^5.1.3",
+    "@vitest/ui": "^4.0.18",
+    "autoprefixer": "^10.4.24",
     "babel-loader": "^10.0.0",
     "commitizen": "^4.3.1",
     "concurrently": "^9.2.1",
-    "css-loader": "^7.1.2",
+    "css-loader": "^7.1.3",
     "daisyui": "^4.12.24",
     "eslint": "^9.39.2",
-    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-react": "^7.37.5",
-    "jsdom": "^27.3.0",
+    "jsdom": "^28.0.0",
     "lint-staged": "^16.2.7",
     "postcss": "^8.5.6",
-    "prettier": "^3.7.4",
+    "prettier": "^3.8.1",
     "pretty-quick": "^4.2.2",
     "rollup-plugin-node-polyfills": "^0.2.1",
     "tailwindcss": "^3.4.19",
     "tmp": "^0.2.5",
-    "vite": "^7.3.0",
+    "vite": "^7.3.1",
     "vite-plugin-svgr": "^4.5.0",
-    "vite-tsconfig-paths": "^6.0.1",
-    "vitest": "^4.0.15"
+    "vite-tsconfig-paths": "^6.0.5",
+    "vitest": "^4.0.18"
   },
   "overrides": {
     "tmp": "$tmp"

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

@@ -224,7 +224,7 @@
   "New Template": "Neue Vorlage",
   "file-type": "pdf, png, jpg, jpeg",
   "docx": "docx",
-  "file-selected": "Datei ausgewählt",
+  "files-selected": "Datei(en) ausgewählt",
   "template-title": "Vorlagentitel",
   "document-title": "Dokumenttitel",
   "title": "Titel",
@@ -337,7 +337,7 @@
   "quick-send-alert-1": "Alle Rollen in diesem Dokument sind derzeit mit Kontakten verknüpft. Um Kopien dieser Vorlage schnell an mehrere Unterzeichner zu senden, stellen Sie sicher, dass mindestens eine Rolle keinem Kontakt zugeordnet ist.",
   "quick-send-alert-2": "Bitte stellen Sie sicher, dass für alle Empfänger mindestens ein Signatur-Widget hinzugefügt wurde.",
   "quick-send-alert-3": "Bitte fügen Sie diesem template mindestens eine Rolle hinzu.",
-  "quick-send-alert-4": "Das Limit für Schnellsendungen wurde erreicht.",
+  "quick-send-alert-4": "Limit für {{flow}} erreicht.",
   "copy-link": "Link kopieren",
   "copy": "Kopieren",
   "revoke-document": "Dokument widerrufen",
@@ -393,7 +393,8 @@
     "radio button": "Radiobutton",
     "image": "Bild",
     "email": "E-Mail",
-    "number": "Zahl"
+    "number": "Zahl",
+    "draw": "Zeichnen"
   },
   "fields": "Felder",
   "recipients": "Empfänger",
@@ -516,14 +517,14 @@
   "placeholder-alert-4": "Sie haben erfolgreich E-Mails an alle Empfänger gesendet!",
   "placeholder-mail-alert": "Sie haben erfolgreich eine E-Mail an {{name}} gesendet. Die nachfolgenden Unterzeichner erhalten eine E-Mail, sobald {{name}} das Dokument unterzeichnet.",
   "placeholder-mail-alert-you": "Nachfolgende Unterzeichner erhalten E-Mails, sobald Sie das Dokument unterschreiben.",
-  "placeholder-alert-5": "Möchten Sie die Dokumente jetzt unterschreiben?",
+  "placeholder-alert-5": "Sie können jetzt unterschreiben oder es an Ihre E-Mail senden, um es später abzuschließen.",
   "placeholder-alert-6": "Bitte richten Sie den E-Mail-Adapter ein, um E-Mails zu senden!",
   "placeholder-alert-7": "Bitte wählen Sie einen Unterzeichner aus, um Platzhalter hinzuzufügen!",
   "email-subject": "E-Mail-Betreff",
   "email-body": "E-Mail-Inhalt",
   "email-placeholder": "E-Mail-Text eingeben",
   "reset-to-default": "Auf Standard zurücksetzen",
-  "cutomize-email": "E-Mail anpassen",
+  "customize-email": "E-Mail anpassen",
   "upgrade-to-customize-email": "Upgrade, um E-Mails anzupassen",
   "sign-url": "Signatur-URL",
   "mails-sent": "E-Mails gesendet",
@@ -1243,6 +1244,7 @@
   },
   "read-only-date-error": "Das schreibgeschützte Datums-Widget muss ein Standarddatum haben.",
   "set-date": "Datum festlegen",
+  "default-date": "Standarddatum",
   "set-today": "Unterzeichnungsdatum",
   "enter-name": "Name eingeben",
   "enter-email": "E-Mail eingeben",
@@ -1328,5 +1330,35 @@
   "working": "In Bearbeitung",
   "test-security-key": "Sicherheitsschlüssel testen",
   "generate": "Generieren",
-  "regenerate": "Neu generieren"
+  "regenerate": "Neu generieren",
+  "signing-date": "Signierdatum",
+  "date-widget": "Datums-Widget",
+  "mail-failed": "Beim Senden der E-Mail ist etwas schiefgelaufen. Bitte versuchen Sie es erneut.",
+  "mail-status-head": "Nächster Schritt: Ihr Dokument unterschreiben?",
+  "send-to-email": "Per E-Mail senden",
+  "date-pref-help-sub-title": "Mit den Datums-Widget-Einstellungen können Sie die Standardkonfiguration für das Datums-Widget festlegen. Diese Standards werden automatisch angewendet, wenn Sie ein neues Datums-Widget zu einem Dokument oder einer Vorlage hinzufügen. Sie können jedes Datums-Widget jederzeit individuell anpassen, indem Sie auf das Zahnradsymbol klicken.",
+  "date-pref-help-format": "Wählen Sie das standardmäßige Datumsformat für Datums-Widgets.",
+  "date-pref-help-default-date": "Legen Sie einen Standard-Datumswert für Datums-Widgets fest.",
+  "date-pref-help-signing-date": "Wenn aktiviert, verwendet das Datums-Widget automatisch das Datum, an dem der Unterzeichner das Dokument signiert.",
+  "date-pref-help-read-only": "Wenn aktiviert, ist das Datums-Widget für den Unterzeichner schreibgeschützt.",
+  "upload-csv": "CSV hochladen",
+  "file-selected": "Datei ausgewählt",
+  "bulk-send-csv-helper": "Verwenden Sie Header für Unterzeichnerrollen (Rollen-E-Mail/Name/Telefon) und Vorabfüllwerte (Vorabfüllung: Feldname). Erforderliche Vorabfüllfelder müssen ausgefüllt sein.",
+  "bulk-send-csv-helper-note": "Hinweis: Für Vorabfüllfelder vom Typ Datum in der CSV muss der Wert in folgendem Format angegeben werden: {{value}} (Beispiel: {{example}}).",
+  "bulk-send-csv-summary": "{{total}} Zeilen importiert. {{invalid}} ungültige Zeilen wurden übersprungen.",
+  "bulk-send-csv-missing-headers": "Erforderliche CSV-Header fehlen. Rollen: {{roles}}. Vorabfüllung: {{prefill}}.",
+  "bulk-send-no-records": "Bitte fügen Sie vor dem Senden mindestens einen Empfänger hinzu.",
+  "csv-only-support": "Es werden nur CSV-Dateien unterstützt.",
+  "csv-no-records": "Keine Datensätze in der CSV gefunden.",
+  "select-at-least-option": "Bitte wählen Sie mindestens eine Option aus.",
+  "draw-required": "Bitte zeichnen Sie in das Feld.",
+  "enter-smtp-username": "SMTP-Benutzernamen eingeben",
+  "enter-webhook-url": "Webhook-URL eingeben",
+  "enter-user-name": "Benutzernamen eingeben",
+  "enter-tagline": "Slogan eingeben",
+  "enter-password-or-click-autogenerate": "Passwort eingeben oder auf „Automatisch generieren“ klicken",
+  "enter-daily-email-quota": "Tägliches E-Mail-Kontingent eingeben",
+  "enter-custom-regular-expression": "Benutzerdefinierten regulären Ausdruck eingeben",
+  "enter-value": "{{value}} eingeben",
+  "are-you-sure-want-to-send-document": "Sind Sie sicher, dass Sie das Dokument senden möchten?"
 }

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

@@ -224,7 +224,7 @@
   "New Template": "New template",
   "file-type": "pdf, png, jpg, jpeg",
   "docx": "docx",
-  "file-selected": "file(s) selected",
+  "files-selected": "file(s) selected",
   "template-title": "Template title",
   "document-title": "Document title",
   "title": "Title",
@@ -337,7 +337,7 @@
   "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.",
-  "quick-send-alert-4": "Quick send reached limit.",
+  "quick-send-alert-4": "Limit reached for {{flow}}.",
   "copy-link": "Copy link",
   "copy": "Copy",
   "revoke-document": "Revoke document",
@@ -393,7 +393,8 @@
     "radio button": "radio button",
     "image": "image",
     "email": "email",
-    "number": "number"
+    "number": "number",
+    "draw": "draw"
   },
   "fields": "Fields",
   "recipients": "Recipients",
@@ -517,14 +518,14 @@
   "placeholder-alert-4": "You have successfully sent mails to all recipients!",
   "placeholder-mail-alert": "You have successfully sent email to {{name}}. Subsequent signers will get email(s) once {{name}} signs the document",
   "placeholder-mail-alert-you": "Subsequent signers will get email(s) once you sign the document.",
-  "placeholder-alert-5": "Do you want to sign the document right now?",
+  "placeholder-alert-5": "You can sign now or send it to your email to complete later.",
   "placeholder-alert-6": "Please setup mail adapter to send mail!",
   "placeholder-alert-7": "Please select signer for add placeholder!",
   "email-subject": "email subject",
   "email-body": "email body",
   "email-placeholder": "add body of email",
   "reset-to-default": "Reset to default",
-  "cutomize-email": "Cutomize email",
+  "customize-email": "Customize email",
   "upgrade-to-customize-email": "Upgrade to customize Email",
   "sign-url": "Sign url",
   "mails-sent": "Mails Sent",
@@ -1244,6 +1245,7 @@
   },
   "read-only-date-error": "Read-only date widget must have a default date.",
   "set-date": "Set Date",
+  "default-date": "Default Date",
   "set-today": "Signing Date",
   "enter-name": "Enter name",
   "enter-email": "Enter email",
@@ -1329,5 +1331,35 @@
   "working": "Working",
   "test-security-key": "Test security key",
   "generate": "Generate",
-  "regenerate": "Regenerate"
+  "regenerate": "Regenerate",
+  "signing-date": "Signing Date",
+  "date-widget": "Date Widget",
+  "mail-failed": "Something went wrong while sending the email. Please try again.",
+  "mail-status-head": "Next step: Sign your document ?",
+  "send-to-email": "Send to Email",
+  "date-pref-help-sub-title": "Date Widget Preferences let you define the default settings for the Date widget. These defaults are automatically applied whenever you add a new Date widget to a document or template. You can still customize any individual Date widget at any time by clicking the gear icon.",
+  "date-pref-help-format": "Choose the default date format used for Date widgets.",
+  "date-pref-help-default-date": "Set a default date value for Date widgets.",
+  "date-pref-help-signing-date": "When enabled, the Date widget automatically uses the  date the signer signs the document.",
+  "date-pref-help-read-only": "When enabled, the Date widget is read-only for the signer.",
+  "upload-csv": "Upload CSV",
+  "file-selected": "file selected",
+  "bulk-send-csv-helper": "Use headers for signer roles (Role Email/Name/Phone) and prefill values (Prefill: Field Name). Required prefill fields must be completed.",
+  "bulk-send-csv-helper-note": "Note: For Date-type prefill fields in the CSV, the value must be provided in this format: {{value}} (example: {{example}}).",
+  "bulk-send-csv-summary": "Imported {{total}} rows. {{invalid}} invalid rows were skipped.",
+  "bulk-send-csv-missing-headers": "Missing required CSV headers. Roles: {{roles}}. Prefill: {{prefill}}.",
+  "bulk-send-no-records": "Please add at least one recipient before sending.",
+  "csv-only-support": "Only CSV files are supported.",
+  "csv-no-records": "No records found in the CSV.",
+  "select-at-least-option": "Please select at least one option.",
+  "draw-required": "Please draw in the box.",
+  "enter-smtp-username": "Enter your SMTP username",
+  "enter-webhook-url": "Enter webhook url",
+  "enter-user-name": "Enter user name",
+  "enter-tagline": "Enter tagline",
+  "enter-password-or-click-autogenerate": "Enter password or click Autogenerate",
+  "enter-daily-email-quota": "Enter daily email quota",
+  "enter-custom-regular-expression": "Enter custom regular expression",
+  "enter-value": "Enter {{value}}",
+  "are-you-sure-want-to-send-document": "Are you sure want to send document?"
 }

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

@@ -224,7 +224,7 @@
   "New Template": "Nueva plantilla",
   "file-type": "pdf, png, jpg, jpeg",
   "docx": "docx",
-  "file-selected": "archivo seleccionado",
+  "files-selected": "archivo(s) seleccionado(s)",
   "template-title": "Título de la plantilla",
   "document-title": "Título del documento",
   "title": "Título",
@@ -337,7 +337,7 @@
   "quick-send-alert-1": "Todos los roles de este documento están actualmente vinculados a contactos. Para enviar rápidamente copias de esta plantilla a varios firmantes, por favor, asegúrate de que al menos un rol no esté vinculado a ningún contacto.",
   "quick-send-alert-2": "Por favor, asegúrate de que hay al menos un widget de firma añadido para cada destinatario.",
   "quick-send-alert-3": "Veuillez ajouter au moins un rôle à ce template.",
-  "quick-send-alert-4": "El envío rápido ha alcanzado el límite.",
+  "quick-send-alert-4": "Se alcanzó el límite para {{flow}}.",
   "copy-link": "Copiar enlace",
   "copy": "Copiar",
   "revoke-document": "Revocar documento",
@@ -393,7 +393,8 @@
     "radio button": "botón de radio",
     "image": "imagen",
     "email": "correo",
-    "number": "número"
+    "number": "número",
+    "draw": "Dibujar"
   },
   "fields": "Campos",
   "recipients": "Destinatarios",
@@ -517,14 +518,14 @@
   "placeholder-alert-4": "¡Has enviado exitosamente correos a todos los destinatarios!",
   "placeholder-mail-alert": "Has enviado un correo electrónico con éxito a {{name}}. Los siguientes firmantes recibirán un correo electrónico una vez que {{name}} firme el documento.",
   "placeholder-mail-alert-you": "Los firmantes siguientes recibirán un correo electrónico una vez que usted firme el documento.",
-  "placeholder-alert-5": "¿Quieres firmar documentos ahora mismo?",
+  "placeholder-alert-5": "Puede firmar ahora o enviarlo a su correo electrónico para completarlo más tarde.",
   "placeholder-alert-6": "¡Por favor, configura el adaptador de correo para enviar correos!",
   "placeholder-alert-7": "¡Por favor, selecciona un firmante para agregar un marcador de posición!",
   "email-subject": "asunto del correo",
   "email-body": "cuerpo del correo",
   "email-placeholder": "agregar cuerpo del correo",
   "reset-to-default": "Restablecer a por defecto",
-  "cutomize-email": "Personalizar correo",
+  "customize-email": "Personalizar correo",
   "upgrade-to-customize-email": "Mejora para personalizar el correo",
   "sign-url": "URL de firma",
   "mails-sent": "Correos enviados",
@@ -1244,6 +1245,7 @@
   },
   "read-only-date-error": "El widget de fecha de solo lectura debe tener una fecha predeterminada.",
   "set-date": "Establecer fecha",
+  "default-date": "Fecha predeterminada",
   "set-today": "Fecha de firma",
   "enter-name": "Ingrese nombre",
   "enter-email": "Ingrese correo electrónico",
@@ -1329,5 +1331,35 @@
   "working": "En funcionamiento",
   "test-security-key": "Probar clave de seguridad",
   "generate": "Generar",
-  "regenerate": "Regenerar"
+  "regenerate": "Regenerar",
+  "signing-date": "Fecha de firma",
+  "date-widget": "Widget de fecha",
+  "mail-failed": "Algo salió mal al enviar el correo electrónico. Por favor, inténtelo de nuevo.",
+  "mail-status-head": "Siguiente paso: ¿Firmar su documento?",
+  "send-to-email": "Enviar por correo electrónico",
+  "date-pref-help-sub-title": "Las preferencias del widget de fecha le permiten definir la configuración predeterminada del widget de fecha. Estos valores se aplican automáticamente cada vez que añade un nuevo widget de fecha a un documento o plantilla. Aún puede personalizar cualquier widget de fecha individual en cualquier momento haciendo clic en el icono de engranaje.",
+  "date-pref-help-format": "Elija el formato de fecha predeterminado utilizado para los widgets de fecha.",
+  "date-pref-help-default-date": "Establezca un valor de fecha predeterminado para los widgets de fecha.",
+  "date-pref-help-signing-date": "Cuando está habilitado, el widget de fecha utiliza automáticamente la fecha en que el firmante firma el documento.",
+  "date-pref-help-read-only": "Cuando está habilitado, el widget de fecha es de solo lectura para el firmante.",
+  "upload-csv": "Subir CSV",
+  "file-selected": "archivo seleccionado",
+  "bulk-send-csv-helper": "Use encabezados para los roles de firmantes (Correo/Nombre/Teléfono del rol) y valores de prellenado (Prellenado: Nombre del campo). Los campos de prellenado obligatorios deben completarse.",
+  "bulk-send-csv-helper-note": "Nota: Para los campos de prellenado de tipo fecha en el CSV, el valor debe proporcionarse en el siguiente formato: {{value}} (ejemplo: {{example}}).",
+  "bulk-send-csv-summary": "{{total}} filas importadas. {{invalid}} filas no válidas fueron omitidas.",
+  "bulk-send-csv-missing-headers": "Faltan encabezados obligatorios del CSV. Roles: {{roles}}. Prellenado: {{prefill}}.",
+  "bulk-send-no-records": "Agregue al menos un destinatario antes de enviar.",
+  "csv-only-support": "Solo se admiten archivos CSV.",
+  "csv-no-records": "No se encontraron registros en el CSV.",
+  "select-at-least-option": "Por favor, seleccione al menos una opción.",
+  "draw-required": "Por favor, dibuje en el campo.",
+  "enter-smtp-username": "Ingrese su nombre de usuario SMTP",
+  "enter-webhook-url": "Ingrese la URL del webhook",
+  "enter-user-name": "Ingrese el nombre de usuario",
+  "enter-tagline": "Ingrese el eslogan",
+  "enter-password-or-click-autogenerate": "Ingrese la contraseña o haga clic en Autogenerar",
+  "enter-daily-email-quota": "Ingrese la cuota diaria de correo electrónico",
+  "enter-custom-regular-expression": "Ingrese una expresión regular personalizada",
+  "enter-value": "Ingrese {{value}}",
+  "are-you-sure-want-to-send-document": "¿Está seguro de que desea enviar el documento?"
 }

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

@@ -224,7 +224,7 @@
   "New Template": "Nouveau modèle",
   "file-type": "pdf, png, jpg, jpeg",
   "docx": "docx",
-  "file-selected": "fichier sélectionné",
+  "files-selected": "fichier(s) sélectionné(s)",
   "template-title": "Titre du modèle",
   "document-title": "Titre du document",
   "title": "Titre",
@@ -337,7 +337,7 @@
   "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 template.",
-  "quick-send-alert-4": "L'envoi rapide a atteint la limite.",
+  "quick-send-alert-4": "Limite atteint pour {{flow}}.",
   "copy-link": "Copier le lien",
   "copy": "Copier",
   "revoke-document": "Révoquer le document",
@@ -393,7 +393,8 @@
     "radio button": "bouton radio",
     "image": "image",
     "email": "e-mail",
-    "number": "nombre"
+    "number": "nombre",
+    "draw": "Dessiner"
   },
   "fields": "Des champs",
   "recipients": "Destinataires",
@@ -516,14 +517,14 @@
   "placeholder-alert-4": "Vous avez envoyé avec succès des mails à tous les",
   "placeholder-mail-alert": "Vous avez envoyé un e-mail avec succès à {{name}}. Les signataires suivants recevront un e-mail une fois que {{name}} aura signé le document.",
   "placeholder-mail-alert-you": "Les signataires suivants recevront un e-mail une fois que vous aurez signé le document.",
-  "placeholder-alert-5": "Voulez-vous signer des documents maintenant ?",
+  "placeholder-alert-5": "Vous pouvez signer maintenant ou l’envoyer à votre e-mail pour le terminer plus tard.",
   "placeholder-alert-6": "Veuillez configurer l'adaptateur de messagerie pour envoyer du courrier !",
   "placeholder-alert-7": "Veuillez sélectionner le signataire pour ajouter un espace réservé !",
   "email-subject": "Sujet du courriel",
   "email-body": "corps de l'e-mail",
   "email-placeholder": "Ajouter le corps de l'e-mail",
   "reset-to-default": "Réinitialiser aux valeurs par défaut",
-  "cutomize-email": "Personnaliser l'e-mail",
+  "customize-email": "Personnaliser l'e-mail",
   "upgrade-to-customize-email": "Mise à niveau pour personnaliser l'e-mail",
   "sign-url": "Signer l'URL",
   "mails-sent": "Mails envoyés avec succès !",
@@ -1243,6 +1244,7 @@
   },
   "read-only-date-error": "Le widget de date en lecture seule doit avoir une date par défaut.",
   "set-date": "Définir la date",
+  "default-date": "Date par défaut",
   "set-today": "Date de signature",
   "enter-name": "Saisir le nom",
   "enter-email": "Saisir l'e-mail",
@@ -1328,5 +1330,35 @@
   "working": "En cours",
   "test-security-key": "Tester la clé de sécurité",
   "generate": "Générer",
-  "regenerate": "Régénérer"
+  "regenerate": "Régénérer",
+  "signing-date": "Date de signature",
+  "date-widget": "Widget de date",
+  "mail-failed": "Une erreur s'est produite lors de l'envoi de l'e-mail. Veuillez réessayer.",
+  "mail-status-head": "Étape suivante : signer votre document ?",
+  "send-to-email": "Envoyer par e-mail",
+  "date-pref-help-sub-title": "Les préférences du widget de date vous permettent de définir les paramètres par défaut du widget de date. Ces paramètres sont automatiquement appliqués lorsque vous ajoutez un nouveau widget de date à un document ou à un modèle. Vous pouvez toujours personnaliser chaque widget de date individuellement en cliquant sur l'icône d'engrenage.",
+  "date-pref-help-format": "Choisissez le format de date par défaut utilisé pour les widgets de date.",
+  "date-pref-help-default-date": "Définissez une valeur de date par défaut pour les widgets de date.",
+  "date-pref-help-signing-date": "Lorsqu'elle est activée, le widget de date utilise automatiquement la date à laquelle le signataire signe le document.",
+  "date-pref-help-read-only": "Lorsqu'elle est activée, le widget de date est en lecture seule pour le signataire.",
+  "upload-csv": "Téléverser un CSV",
+  "file-selected": "fichier sélectionné",
+  "bulk-send-csv-helper": "Utilisez des en-têtes pour les rôles des signataires (E-mail/Nom/Téléphone du rôle) et les valeurs de préremplissage (Préremplissage : Nom du champ). Les champs de préremplissage requis doivent être complétés.",
+  "bulk-send-csv-helper-note": "Remarque : Pour les champs de préremplissage de type date dans le CSV, la valeur doit être fournie dans le format suivant : {{value}} (exemple : {{example}}).",
+  "bulk-send-csv-summary": "{{total}} lignes importées. {{invalid}} lignes non valides ont été ignorées.",
+  "bulk-send-csv-missing-headers": "En-têtes CSV requis manquants. Rôles : {{roles}}. Préremplissage : {{prefill}}.",
+  "bulk-send-no-records": "Veuillez ajouter au moins un destinataire avant l'envoi.",
+  "csv-only-support": "Seuls les fichiers CSV sont pris en charge.",
+  "csv-no-records": "Aucun enregistrement trouvé dans le CSV.",
+  "select-at-least-option": "Veuillez sélectionner au moins une option.",
+  "draw-required": "Veuillez dessiner dans le champ.",
+  "enter-smtp-username": "Saisissez votre nom d'utilisateur SMTP",
+  "enter-webhook-url": "Saisissez l'URL du webhook",
+  "enter-user-name": "Saisissez le nom d'utilisateur",
+  "enter-tagline": "Saisissez le slogan",
+  "enter-password-or-click-autogenerate": "Saisissez le mot de passe ou cliquez sur Génération automatique",
+  "enter-daily-email-quota": "Saisissez le quota quotidien d'e-mails",
+  "enter-custom-regular-expression": "Saisissez une expression régulière personnalisée",
+  "enter-value": "Saisissez {{value}}",
+  "are-you-sure-want-to-send-document": "Êtes-vous sûr de vouloir envoyer le document ?"
 }

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

@@ -224,7 +224,7 @@
   "New Template": "नया टेम्पलेट",
   "file-type": "pdf, png, jpg, jpeg",
   "docx": "docx",
-  "file-selected": "फ़ाइल चयनित",
+  "files-selected": "फ़ाइलें चयनित",
   "template-title": "टेम्पलेट शीर्षक",
   "document-title": "दस्तावेज़ शीर्षक",
   "title": "शीर्षक",
@@ -337,7 +337,7 @@
   "quick-send-alert-1": "इस दस्तावेज़ में सभी भूमिकाएँ वर्तमान में संपर्कों से जुड़ी हुई हैं। इस टेम्पलेट की प्रतियां कई हस्ताक्षरकर्ताओं को त्वरित रूप से भेजने के लिए, कृपया सुनिश्चित करें कि कम से कम एक भूमिका किसी भी संपर्क से जुड़ी नहीं है।",
   "quick-send-alert-2": "कृपया सुनिश्चित करें कि सभी प्राप्तकर्ताओं के लिए कम से कम एक हस्ताक्षर विजेट जोड़ा गया है।",
   "quick-send-alert-3": "कृपया इस टेम्पलेट में कम से कम एक भूमिका जोड़ें।",
-  "quick-send-alert-4": "त्वरित भेजें सीमा तक पहुँच गया।",
+  "quick-send-alert-4": "{{flow}} के लिए सीमा पूरी हो गई है।",
   "copy-link": "लिंक कॉपी करें",
   "copy": "कॉपी करें",
   "revoke-document": "दस्तावेज़ रद्द करें",
@@ -393,7 +393,8 @@
     "radio button": "रेडियो बटन",
     "image": "छवि",
     "email": "ईमेल",
-    "number": "संख्या"
+    "number": "संख्या",
+    "draw": "आरेखित करें"
   },
   "fields": "क्षेत्र",
   "recipients": "प्राप्तकर्ता",
@@ -516,14 +517,14 @@
   "placeholder-alert-4": "आपने सभी प्राप्तकर्ताओं को सफलतापूर्वक मेल भेज दिए हैं!",
   "placeholder-mail-alert": "आपने {{name}} को सफलतापूर्वक ईमेल भेज दिया है। {{name}} द्वारा दस्तावेज़ पर हस्ताक्षर करने के बाद बाद के हस्ताक्षरकर्ताओं को ईमेल प्राप्त होंगे",
   "placeholder-mail-alert-you": "आपके दस्तावेज़ पर हस्ताक्षर करने के बाद अगले हस्ताक्षरकर्ता को ईमेल प्राप्त होगा।",
-  "placeholder-alert-5": "क्या आप अभी दस्तावेज़ पर हस्ताक्षर करना चाहते हैं?",
+  "placeholder-alert-5": "आप अभी हस्ताक्षर कर सकते हैं या इसे बाद में पूरा करने के लिए अपने ईमेल पर भेज सकते हैं।",
   "placeholder-alert-6": "मेल भेजने के लिए कृपया मेल एडॉप्टर सेटअप करें!",
   "placeholder-alert-7": "प्लेसहोल्डर जोड़ने के लिए कृपया हस्ताक्षरकर्ता चुनें!",
   "email-subject": "ईमेल विषय",
   "email-body": "ईमेल मुख्य भाग",
   "email-placeholder": "ईमेल का मुख्य भाग जोड़ें",
   "reset-to-default": "डिफ़ॉल्ट पर रीसेट करें",
-  "cutomize-email": "ईमेल अनुकूलित करें",
+  "customize-email": "ईमेल अनुकूलित करें",
   "upgrade-to-customize-email": "ईमेल अनुकूलित करने के लिए अपग्रेड करें",
   "sign-url": "यूआरएल पर हस्ताक्षर करें",
   "mails-sent": "मेल भेजे गए",
@@ -1243,6 +1244,7 @@
   },
   "read-only-date-error": "रीड-ओनली दिनांक विजेट में एक डिफ़ॉल्ट दिनांक होना आवश्यक है।",
   "set-date": "दिनांक सेट करें",
+  "default-date": "डिफ़ॉल्ट तिथि",
   "set-today": "हस्ताक्षर की तिथि",
   "enter-name": "नाम दर्ज करें",
   "enter-email": "ईमेल दर्ज करें",
@@ -1328,5 +1330,35 @@
   "working": "कार्यरत",
   "test-security-key": "सुरक्षा कुंजी का परीक्षण करें",
   "generate": "जनरेट करें",
-  "regenerate": "पुनः जनरेट करें"
+  "regenerate": "पुनः जनरेट करें",
+  "signing-date": "हस्ताक्षर तिथि",
+  "date-widget": "तिथि विजेट",
+  "mail-failed": "ईमेल भेजते समय कुछ गलत हो गया। कृपया पुनः प्रयास करें।",
+  "mail-status-head": "अगला कदम: अपने दस्तावेज़ पर हस्ताक्षर करें?",
+  "send-to-email": "ईमेल पर भेजें",
+  "date-pref-help-sub-title": "डेट विजेट प्राथमिकताएँ आपको डेट विजेट के लिए डिफ़ॉल्ट सेटिंग्स निर्धारित करने की अनुमति देती हैं। जब भी आप किसी दस्तावेज़ या टेम्पलेट में नया डेट विजेट जोड़ते हैं, ये डिफ़ॉल्ट सेटिंग्स स्वतः लागू हो जाती हैं। आप गियर आइकन पर क्लिक करके किसी भी डेट विजेट को कभी भी अनुकूलित कर सकते हैं।",
+  "date-pref-help-format": "डेट विजेट के लिए उपयोग किए जाने वाले डिफ़ॉल्ट तिथि प्रारूप का चयन करें।",
+  "date-pref-help-default-date": "डेट विजेट के लिए एक डिफ़ॉल्ट तिथि मान सेट करें।",
+  "date-pref-help-signing-date": "सक्षम होने पर, डेट विजेट स्वतः उस तिथि का उपयोग करता है जब साइनर दस्तावेज़ पर हस्ताक्षर करता है।",
+  "date-pref-help-read-only": "सक्षम होने पर, डेट विजेट साइनर के लिए केवल-पढ़ने योग्य होता है।",
+  "upload-csv": "CSV अपलोड करें",
+  "file-selected": "फ़ाइल चयनित",
+  "bulk-send-csv-helper": "साइनर भूमिकाओं (भूमिका ईमेल/नाम/फ़ोन) और प्रीफ़िल मानों (प्रीफ़िल: फ़ील्ड नाम) के लिए हेडर का उपयोग करें। आवश्यक प्रीफ़िल फ़ील्ड भरना अनिवार्य है।",
+  "bulk-send-csv-helper-note": "नोट: CSV में तिथि-प्रकार के प्रीफ़िल फ़ील्ड्स के लिए मान इस प्रारूप में प्रदान किया जाना चाहिए: {{value}} (उदाहरण: {{example}})।",
+  "bulk-send-csv-summary": "{{total}} पंक्तियाँ आयात की गईं। {{invalid}} अमान्य पंक्तियाँ छोड़ दी गईं।",
+  "bulk-send-csv-missing-headers": "आवश्यक CSV हेडर अनुपलब्ध हैं। भूमिकाएँ: {{roles}}। प्रीफ़िल: {{prefill}}।",
+  "bulk-send-no-records": "भेजने से पहले कृपया कम से कम एक प्राप्तकर्ता जोड़ें।",
+  "csv-only-support": "केवल CSV फ़ाइलें समर्थित हैं।",
+  "csv-no-records": "CSV में कोई रिकॉर्ड नहीं मिला।",
+  "select-at-least-option": "कृपया कम से कम एक विकल्प चुनें।",
+  "draw-required": "कृपया बॉक्स में ड्रॉ करें।",
+  "enter-smtp-username": "अपना SMTP उपयोगकर्ता नाम दर्ज करें",
+  "enter-webhook-url": "Webhook URL दर्ज करें",
+  "enter-user-name": "उपयोगकर्ता नाम दर्ज करें",
+  "enter-tagline": "टैगलाइन दर्ज करें",
+  "enter-password-or-click-autogenerate": "पासवर्ड दर्ज करें या ऑटो-जनरेट पर क्लिक करें",
+  "enter-daily-email-quota": "दैनिक ईमेल कोटा दर्ज करें",
+  "enter-custom-regular-expression": "कस्टम रेगुलर एक्सप्रेशन दर्ज करें",
+  "enter-value": "{{value}} दर्ज करें",
+  "are-you-sure-want-to-send-document": "क्या आप वाकई दस्तावेज़ भेजना चाहते हैं?"
 }

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

@@ -224,7 +224,7 @@
   "New Template": "Nuovo modello",
   "file-type": "pdf, png, jpg, jpeg",
   "docx": "docx",
-  "file-selected": "file selezionato",
+  "files-selected": "file selezionati",
   "template-title": "Titolo del modello",
   "document-title": "Titolo del documento",
   "title": "Titolo",
@@ -337,7 +337,7 @@
   "quick-send-alert-1": "Tutti i ruoli in questo documento sono attualmente collegati a contatti. Per inviare rapidamente copie di questo modello a più firmatari, assicurati che almeno un ruolo non sia collegato a nessun contatto.",
   "quick-send-alert-2": "Assicurati che ci sia almeno un widget firma aggiunto per tutti i destinatari.",
   "quick-send-alert-3": "Si prega di aggiungere almeno un ruolo a questo template.",
-  "quick-send-alert-4": "Limite di invio rapido raggiunto.",
+  "quick-send-alert-4": "Limite raggiunto per {{flow}}.",
   "copy-link": "Copia link",
   "copy": "Copia",
   "revoke-document": "Revoca documento",
@@ -393,7 +393,8 @@
     "radio button": "pulsante di opzione",
     "image": "immagine",
     "email": "email",
-    "number": "numero"
+    "number": "numero",
+    "draw": "Disegno"
   },
   "fields": "Campi",
   "recipients": "Destinatari",
@@ -516,14 +517,14 @@
   "placeholder-alert-4": "Hai inviato con successo le mail a tutti i destinatari!",
   "placeholder-mail-alert": "Hai inviato con successo un'e-mail a {{name}}. I firmatari successivi riceveranno un'e-mail una volta che {{name}} avrà firmato il documento.",
   "placeholder-mail-alert-you": "I firmatari successivi riceveranno un'email dopo che avrai firmato il documento.",
-  "placeholder-alert-5": "Vuoi firmare i documenti ora?",
+  "placeholder-alert-5": "Puoi firmare ora oppure inviarlo alla tua email per completarlo in seguito.",
   "placeholder-alert-6": "Configura l'adattatore email per inviare mail!",
   "placeholder-alert-7": "Seleziona il firmatario per aggiungere un segnaposto!",
   "email-subject": "Oggetto email",
   "email-body": "Corpo email",
   "email-placeholder": "aggiungi corpo dell'email",
   "reset-to-default": "Reimposta predefinita",
-  "cutomize-email": "Personalizza Email",
+  "customize-email": "Personalizza Email",
   "upgrade-to-customize-email": "Aggiorna per personalizzare l'Email",
   "sign-url": "URL Firma",
   "mails-sent": "Mail inviate",
@@ -1243,6 +1244,7 @@
   },
   "read-only-date-error": "Il widget data di sola lettura deve avere una data predefinita.",
   "set-date": "Imposta data",
+  "default-date": "Data predefinita",
   "set-today": "Data di firma",
   "enter-name": "Inserisci nome",
   "enter-email": "Inserisci e-mail",
@@ -1328,5 +1330,35 @@
   "working": "In funzione",
   "test-security-key": "Testa la chiave di sicurezza",
   "generate": "Genera",
-  "regenerate": "Rigenera"
+  "regenerate": "Rigenera",
+  "signing-date": "Data di firma",
+  "date-widget": "Widget data",
+  "mail-failed": "Si è verificato un errore durante l'invio dell'e-mail. Per favore riprova.",
+  "mail-status-head": "Passaggio successivo: firmare il tuo documento?",
+  "send-to-email": "Invia tramite email",
+  "date-pref-help-sub-title": "Le preferenze del widget Data consentono di definire le impostazioni predefinite per il widget Data. Queste impostazioni vengono applicate automaticamente ogni volta che si aggiunge un nuovo widget Data a un documento o a un modello. È comunque possibile personalizzare qualsiasi widget Data in qualsiasi momento facendo clic sull'icona a forma di ingranaggio.",
+  "date-pref-help-format": "Scegli il formato di data predefinito utilizzato per i widget Data.",
+  "date-pref-help-default-date": "Imposta un valore di data predefinito per i widget Data.",
+  "date-pref-help-signing-date": "Quando abilitato, il widget Data utilizza automaticamente la data in cui il firmatario firma il documento.",
+  "date-pref-help-read-only": "Quando abilitato, il widget Data è in sola lettura per il firmatario.",
+  "upload-csv": "Carica CSV",
+  "file-selected": "file selezionato",
+  "bulk-send-csv-helper": "Utilizza le intestazioni per i ruoli dei firmatari (Email/Nome/Telefono del ruolo) e i valori di precompilazione (Precompilazione: Nome campo). I campi di precompilazione obbligatori devono essere compilati.",
+  "bulk-send-csv-helper-note": "Nota: Per i campi di precompilazione di tipo data nel CSV, il valore deve essere fornito in questo formato: {{value}} (esempio: {{example}}).",
+  "bulk-send-csv-summary": "{{total}} righe importate. {{invalid}} righe non valide sono state ignorate.",
+  "bulk-send-csv-missing-headers": "Intestazioni CSV obbligatorie mancanti. Ruoli: {{roles}}. Precompilazione: {{prefill}}.",
+  "bulk-send-no-records": "Aggiungi almeno un destinatario prima dell'invio.",
+  "csv-only-support": "Sono supportati solo file CSV.",
+  "csv-no-records": "Nessun record trovato nel CSV.",
+  "select-at-least-option": "Seleziona almeno un'opzione.",
+  "draw-required": "Per favore, disegna nel riquadro.",
+  "enter-smtp-username": "Inserisci il nome utente SMTP",
+  "enter-webhook-url": "Inserisci l'URL del webhook",
+  "enter-user-name": "Inserisci il nome utente",
+  "enter-tagline": "Inserisci lo slogan",
+  "enter-password-or-click-autogenerate": "Inserisci la password o fai clic su Genera automaticamente",
+  "enter-daily-email-quota": "Inserisci la quota giornaliera di e-mail",
+  "enter-custom-regular-expression": "Inserisci un'espressione regolare personalizzata",
+  "enter-value": "Inserisci {{value}}",
+  "are-you-sure-want-to-send-document": "Sei sicuro di voler inviare il documento?"
 }

apps/OpenSign/src/components/AddUser.jsx

@@ -11,6 +11,8 @@ import {
 import {
   useTranslation
 } from "react-i18next";
+import { withSessionValidation } from "../utils";
+
 function generatePassword(length) {
   const characters =
     "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
@@ -67,7 +69,7 @@ const AddUser = (props) => {
     }
   };
   // Define a function to handle form submission
-  const handleSubmit = async (e) => {
+  const handleSubmit = withSessionValidation(async (e) => {
     e.preventDefault();
     e.stopPropagation();
     if (!emailRegex.test(formdata.email)) {
@@ -130,7 +132,7 @@ const AddUser = (props) => {
         }
       }
     }
-  };
+  });
 
   // Define a function to handle the "add yourself" checkbox
   const handleReset = () => {

apps/OpenSign/src/components/BulkSendUi.jsx

@@ -1,318 +0,0 @@
-import React, { useState, useEffect, useRef } from "react";
-import axios from "axios";
-import SuggestionInput from "./shared/fields/SuggestionInput";
-import Loader from "../primitives/Loader";
-import { useTranslation } from "react-i18next";
-import {
-  emailRegex,
-} from "../constant/const";
-const BulkSendUi = (props) => {
-  const { t } = useTranslation();
-  const [forms, setForms] = useState([]);
-  const formRef = useRef(null);
-  const [scrollOnNextUpdate, setScrollOnNextUpdate] = useState(false);
-  const [isSubmit, setIsSubmit] = useState(false);
-  const [isSignatureExist, setIsSignatureExist] = useState();
-  const [isDisableBulkSend, setIsDisableBulkSend] = useState(false);
-  const [isLoader, setIsLoader] = useState(false);
-  const [signers, setSigners] = useState([]);
-  const [emails, setEmails] = useState([]);
-  const [isPrefillExist, setIsPrefillExist] = useState(false);
-  useEffect(() => {
-    signatureExist();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  //function to check at least one signature field exist
-  const signatureExist = async () => {
-    const isPrefill =
-      props?.Placeholders?.some((x) => x?.Role === "prefill") || false;
-    if (isPrefill) {
-      setIsPrefillExist(isPrefill);
-    }
-      setIsDisableBulkSend(false);
-      const getPlaceholder = props?.Placeholders;
-      const removePrefill = getPlaceholder?.filter(
-        (x) => x?.Role !== "prefill"
-      );
-      const checkIsSignatureExistt = removePrefill?.every((placeholderObj) =>
-        placeholderObj?.placeHolder?.some((holder) =>
-          holder?.pos?.some((posItem) => posItem?.type === "signature")
-        )
-      );
-      setIsSignatureExist(checkIsSignatureExistt);
-      setIsLoader(false);
-  };
-  useEffect(() => {
-    if (scrollOnNextUpdate && formRef.current) {
-      formRef.current.scrollIntoView({
-        behavior: "smooth",
-        block: "end",
-        inline: "nearest"
-      });
-      setScrollOnNextUpdate(false);
-    }
-  }, [forms, scrollOnNextUpdate]);
-
-  useEffect(() => {
-    (() => {
-      if (props?.Placeholders?.length > 0) {
-        let users = [];
-        let emails = [];
-        props?.Placeholders?.forEach((element) => {
-          const signerEmail = element?.email || element?.signerPtr?.Email;
-
-          // only add when there's a non-empty signerEmail
-          if (signerEmail) {
-            emails = [...emails, signerEmail];
-          }
-          if (!element.signerObjId) {
-            users = [
-              ...users,
-              {
-                fieldId: element.Id,
-                email: "",
-                label: element.Role,
-                signer: {}
-              }
-            ];
-          }
-        });
-        setEmails(emails);
-        setForms((prevForms) => [...prevForms, { Id: 1, fields: users }]);
-        const signer = props.item?.Signers?.filter((x) => x?.objectId);
-        setSigners(signer);
-      }
-    })();
-    // eslint-disable-next-line
-  }, []);
-  const handleInputChange = (index, signer, fieldIndex) => {
-    const newForms = [...forms];
-    newForms[index].fields[fieldIndex].email = signer?.Email
-      ? signer?.Email
-      : signer || "";
-    newForms[index].fields[fieldIndex].signer = signer?.objectId ? signer : "";
-    setForms(newForms);
-  };
-
-
-  const handleRemoveForm = (index) => {
-    const updatedForms = forms.filter((_, i) => i !== index);
-    setForms(updatedForms);
-  };
-
-  function validateEmails(data) {
-    for (const item of data) {
-      let email = "";
-      for (const field of item.fields) {
-        if (!emailRegex.test(field.email)) {
-          alert(t("invalid-email-found", { email: field.email }));
-          return false;
-        } else if (email === field.email || emails?.includes(field.email)) {
-          alert(t("duplicate-email-found", { email: field.email }));
-          return false;
-        } else {
-          email = field.email;
-        }
-      }
-    }
-
-    return true;
-  }
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-      setIsSubmit(true);
-      if (validateEmails(forms)) {
-        // Create a copy of Placeholders array from props.item
-        let Placeholders = [...props.Placeholders];
-        // Initialize an empty array to store updated documents
-        let Documents = [];
-        // Loop through each form
-        forms.forEach((form) => {
-          //checking if user enter email which already exist as a signer then add user in a signers array
-          let existSigner = [];
-          form.fields.map((data) => {
-            if (data.signer) {
-              existSigner.push(data.signer);
-            }
-          });
-          // Map through the copied Placeholders array to update email values
-          const updatedPlaceholders = Placeholders.map((placeholder) => {
-            // Find the field in the current form that matches the placeholder Id
-            const field = form.fields.find(
-              (element) => parseInt(element.fieldId) === placeholder.Id
-            );
-            // If a matching field is found, update the email value in the placeholder
-            const signer = field?.signer?.objectId ? field.signer : "";
-            if (field) {
-              if (signer) {
-                return {
-                  ...placeholder,
-                  signerObjId: field?.signer?.objectId || "",
-                  signerPtr: signer
-                };
-              } else {
-                return {
-                  ...placeholder,
-                  email: field.email,
-                  signerObjId: field?.signer?.objectId || "",
-                  signerPtr: signer
-                };
-              }
-            }
-            // If no matching field is found, keep the placeholder as is
-            return placeholder;
-          });
-
-          // Push a new document object with updated Placeholders into the Documents array
-          if (existSigner?.length > 0) {
-            Documents.push({
-              ...props.item,
-              Placeholders: updatedPlaceholders,
-              Signers: signers ? [...signers, ...existSigner] : [...existSigner]
-            });
-          } else {
-            Documents.push({
-              ...props.item,
-              Placeholders: updatedPlaceholders,
-              SignatureType: props.signatureType,
-              Signers: signers
-            });
-          }
-        });
-        await batchQuery(Documents);
-      } else {
-        setIsSubmit(false);
-      }
-  };
-
-  const batchQuery = async (Documents) => {
-    const token =
-          { "X-Parse-Session-Token": localStorage.getItem("accesstoken") };
-    const functionsUrl = `${localStorage.getItem("baseUrl")}functions/batchdocuments`;
-    const headers = {
-      "Content-Type": "application/json",
-      "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-      ...token,
-    };
-    const params = { Documents: JSON.stringify(Documents) };
-    try {
-      const res = await axios.post(functionsUrl, params, { headers: headers });
-      if (res.data && res.data.result) {
-        props.handleClose("success", Documents?.length);
-      }
-    } catch (err) {
-      const message =
-        err?.response?.data?.error || err?.message || "something went wrong.";
-      console.error("Error sending documents:", message);
-        props.handleClose("error", 0, message);
-    } finally {
-      setIsSubmit(false);
-    }
-  };
-  return (
-    <>
-      {isLoader ? (
-        <div className="w-full h-[100px] flex justify-center items-center z-[999]">
-          <Loader />
-        </div>
-      ) : (
-        <>
-          {isSubmit && (
-            <div className="absolute z-[999] h-full w-full flex justify-center items-center bg-black bg-opacity-30">
-              <Loader />
-            </div>
-          )}
-          {isPrefillExist ? (
-            <div className="text-black p-3 bg-white w-full text-sm md:text-base flex justify-center items-center">
-              {t("prefill-bulk-error")}
-            </div>
-          ) : !isDisableBulkSend ? (
-            <>
-              {props.Placeholders?.length > 0 ? (
-                isSignatureExist ? (
-                  <>
-                    {props.Placeholders?.some((x) => !x.signerObjId) ? (
-                      <>
-                        <form onSubmit={handleSubmit}>
-                          <div className="min-h-max max-h-[250px] overflow-y-auto">
-                            {forms?.map((form, index) => (
-                              <div
-                                key={form.Id}
-                                className="p-3 op-card border-[1px] border-gray-400 mt-3 mx-4 mb-4 bg-base-200 text-base-content grid grid-cols-1 md:grid-cols-2 gap-2 relative"
-                              >
-                                {form?.fields?.map((field, fieldIndex) => (
-                                  <div
-                                    className="flex flex-col"
-                                    key={field.fieldId}
-                                  >
-                                    <label className="block text-xs font-semibold">
-                                      {field.label}
-                                    </label>
-                                    <SuggestionInput
-                                      required
-                                      type="email"
-                                      value={field.value}
-                                      index={fieldIndex}
-                                      onChange={(signer) =>
-                                        handleInputChange(
-                                          index,
-                                          signer,
-                                          fieldIndex
-                                        )
-                                      }
-                                    />
-                                  </div>
-                                ))}
-                                {forms?.length > 1 && (
-                                  <button
-                                    onClick={() => handleRemoveForm(index)}
-                                    className="absolute right-3 top-1 text-[red] border-[1px] border-[red] rounded-lg w-[1.7rem] h-[1.7rem]"
-                                  >
-                                    <i className="fa-light fa-trash"></i>
-                                  </button>
-                                )}
-                                <div ref={formRef}></div>
-                              </div>
-                            ))}
-                          </div>
-                          <div className="flex flex-col mx-4 mb-4 gap-3">
-                            <button
-                              type="submit"
-                              className="op-btn op-btn-accent focus:outline-none"
-                            >
-                              <i className="fa-light fa-paper-plane"></i>{" "}
-                              <span>{t("send")}</span>
-                            </button>
-                          </div>
-                        </form>
-                      </>
-                    ) : (
-                      <div className="text-black p-3 bg-white w-full text-sm md:text-base flex justify-center items-center">
-                        {t("quick-send-alert-1")}
-                      </div>
-                    )}
-                  </>
-                ) : (
-                  <div className="text-black p-3 bg-white w-full text-sm md:text-base flex justify-center items-center">
-                    {t("quick-send-alert-2")}
-                  </div>
-                )
-              ) : (
-                <div className="text-black p-3 bg-white w-full text-sm md:text-base flex justify-center items-center">
-                  {t("quick-send-alert-3")}
-                </div>
-              )}
-            </>
-          ) : (
-            <>
-            </>
-          )}
-        </>
-      )}
-    </>
-  );
-};
-
-export default BulkSendUi;

apps/OpenSign/src/components/DateFormat.jsx

@@ -0,0 +1,35 @@
+import { useTranslation } from "react-i18next";
+
+const DateFormat = ({ selectDate, dateFormatList, handleChangeFormat }) => {
+  const selectedFormatIndex = dateFormatList?.findIndex(
+    (item) => item.format === selectDate?.format
+  );
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex flex-col md:items-center md:flex-row gap-y-3 my-2">
+      <span className="capitalize">{t("format")}: </span>
+      <select
+        className="op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs md:ml-2"
+        value={selectedFormatIndex >= 0 ? selectedFormatIndex : ""}
+        onChange={(e) => handleChangeFormat(e)}
+      >
+        <option value="" disabled>
+          {t("select-date-format")}
+        </option>
+        {dateFormatList.map((data, ind) => {
+          return (
+            <option className="text-[13px]" value={ind} key={ind}>
+              {data?.date ? data?.date : "nodata"}
+            </option>
+          );
+        })}
+      </select>
+      <span className="text-xs text-gray-400 ml-1 uppercase">
+        {selectDate.format}
+      </span>
+    </div>
+  );
+};
+
+export default DateFormat;

apps/OpenSign/src/components/DatePicker.jsx

@@ -0,0 +1,88 @@
+import { forwardRef } from "react";
+import ReactDatePicker from "react-datepicker";
+import {
+  getDefaultDate,
+  getMonth,
+  getYear,
+  months,
+  years
+} from "../constant/Utils";
+import { useTranslation } from "react-i18next";
+
+const DatePicker = ({
+  selectDate,
+  format,
+  minDate,
+  maxDate,
+  onChange,
+  handleClear
+}) => {
+  const { t } = useTranslation();
+
+  const CustomInput = forwardRef(({ value, onClick }, ref) => (
+    <div
+      className="border-gray-400 rounded-[50px] border-[1px] px-3 text-xs py-2 focus:outline-none hover:border-base-content "
+      onClick={onClick}
+      ref={ref}
+    >
+      {value}
+      <i
+        className={`${value ? "ml-[15px]" : "w-20"} fa-light fa-calendar `}
+      ></i>
+    </div>
+  ));
+  CustomInput.displayName = "CustomInput";
+
+  return (
+    <div>
+      <span>{t("default-date")}: </span>
+      <ReactDatePicker
+        renderCustomHeader={({ date, changeYear, changeMonth }) => (
+          <div className="flex justify-start md: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>
+        )}
+        closeOnScroll={true}
+        selected={getDefaultDate(selectDate?.date, selectDate?.format)}
+        popperPlacement="top-end"
+        customInput={<CustomInput />}
+        onChange={(date) => onChange(date)}
+        dateFormat={
+          selectDate ? selectDate?.format : format ? format : "MM/dd/yyyy"
+        }
+        portalId="root-portal"
+      />
+      <span
+        onClick={() => handleClear()}
+        className="underline text-blue-500 cursor-pointer ml-2"
+      >
+        {t("clear")}
+      </span>
+    </div>
+  );
+};
+
+export default DatePicker;

apps/OpenSign/src/components/bulksend/BulkSendUi.jsx

@@ -0,0 +1,605 @@
+import {
+  useState,
+  useEffect,
+  useMemo
+} from "react";
+import axios from "axios";
+import SuggestionInput from "../shared/fields/SuggestionInput";
+import Loader from "../../primitives/Loader";
+import { useTranslation } from "react-i18next";
+import {
+  emailRegex,
+} from "../../constant/const";
+import {
+  convertPdfArrayBuffer,
+  getSignedUrl,
+  isBase64,
+  getBase64FromUrl,
+} from "../../constant/Utils";
+import {
+  formatCSVDate,
+  handleEmbedPrefillToDoc,
+  normalizeKey
+} from "../../utils";
+import RenderWidgets from "./components/RenderWidgets";
+import { useDispatch, useSelector } from "react-redux";
+import { setBulkLoader } from "../../redux/reducers/widgetSlice";
+
+const EXCLUDED_PREFILL_TYPES = new Set(["image", "draw"]);
+const EXCLUDED_WIDGET_TYPES = new Set([
+  "image",
+  "signature",
+  "stamp",
+  "initials"
+]);
+const ALL_EXCLUDED_TYPES = new Set([
+  ...EXCLUDED_PREFILL_TYPES,
+  ...EXCLUDED_WIDGET_TYPES
+]);
+
+const requiredAsteriskCls = (isRequired = false) => {
+  return isRequired ? "after:content-['_*'] after:text-red-500" : "";
+};
+const BulkSendUi = (props) => {
+  const { t } = useTranslation();
+  const appName =
+    "OpenSign™";
+  const dispatch = useDispatch();
+  const { isBulkLoader } = useSelector((state) => state.widget);
+  const [forms, setForms] = useState([]);
+  const [isSignatureExist, setIsSignatureExist] = useState();
+  const [isLoader, setIsLoader] = useState(false);
+  const [signers, setSigners] = useState([]);
+  const [emails, setEmails] = useState([]);
+  const [isVacantRoles, setIsVacantRoles] = useState(false);
+  const [fields, setFields] = useState([]);
+  const [headers, setHeaders] = useState([]);
+
+  const tokenHeader = useMemo(() => {
+    const headers = {
+      "Content-Type": "application/json",
+      "X-Parse-Application-Id": localStorage.getItem("parseAppId")
+    };
+    return {
+      ...headers,
+      "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+    };
+  }, [props?.jwttoken]);
+
+  //  Initialize form state (fields, widgets/responses, emails, headers, forms, signers, allowedForm) from template placeholders with existing values.
+  const initializeWidgetsWithValues = async () => {
+    if (props?.Placeholders?.length > 0) {
+      const roles = props?.Placeholders?.filter((p) => !p.signerObjId) || [];
+      const emails = [];
+      const users = await Promise.all(
+        roles.map(async (role) => {
+          const isPrefill = role?.Role?.toLowerCase() === "prefill";
+          const uniqueNames = new Set();
+          const pages = role?.placeHolder ?? [];
+          const widgets = await Promise.all(
+            pages.flatMap((page) =>
+              page.pos
+                .filter((widget) => {
+                  const widgetName = widget?.options?.name;
+                  if (!widgetName) return false; //|| widget?.options?.isReadOnly
+                  // exclude certain widget types for non-prefill
+                  if (EXCLUDED_WIDGET_TYPES.has(widget.type) && !isPrefill)
+                    return false;
+                  // unique by widget name
+                  if (uniqueNames.has(widgetName)) return false;
+                  uniqueNames.add(widgetName);
+                  return true;
+                })
+                .map(async (widget) => {
+                  let response = "";
+                  if (ALL_EXCLUDED_TYPES.has(widget.type)) {
+                    const url =
+                      widget.options?.response ||
+                      widget.options?.defaultValue ||
+                      "";
+                    if (url && !isBase64(url)) {
+                      const signedUrl = await getSignedUrl(
+                        url,
+                        "", // docId
+                        props.item.objectId, // templateId
+                      );
+
+                      response = await getBase64FromUrl(signedUrl, true);
+                    } else {
+                      response = "";
+                    }
+                  } else {
+                    if (widget.type === "date") {
+                      const value =
+                        widget.options?.response ||
+                        widget.options?.defaultValue ||
+                        "";
+                      response = value ? formatCSVDate(widget, value) : "";
+                    } else {
+                      response =
+                        widget.options?.response ||
+                        widget.options?.defaultValue ||
+                        "";
+                    }
+                  }
+                  const label = `${role.Role}::${widget.options?.name}`;
+
+                  return {
+                    ...widget,
+                    label: label,
+                    response,
+                    pageNumber: page.pageNumber
+                  };
+                })
+            )
+          );
+          const signerEmail =
+            normalizeKey(role?.email) || role?.signerPtr?.Email;
+          if (signerEmail) emails.push(signerEmail);
+
+          return {
+            fieldId: role.Id,
+            email: "",
+            label: role.Role,
+            signer: {},
+            widgets: widgets
+          };
+        })
+      );
+      setFields(users);
+      setEmails(emails);
+
+      // Build headers with required ordering:
+      // 1) all role emails first
+      // 2) then all widgets
+      const emailHeaders = [];
+      const widgetHeaders = [];
+      for (const role of users) {
+        const isPrefill = role?.label?.toLowerCase() === "prefill";
+
+        if (!isPrefill) {
+          emailHeaders.push({
+            label: `${role.label}::Email`,
+            role: role.label,
+            type: "role",
+            isRequired: true
+          });
+        }
+
+        for (const widget of role?.widgets ?? []) {
+          const isRequired =
+            widget?.options?.status === "required" && isPrefill;
+
+          widgetHeaders.push({
+            label: widget?.label,
+            role: role?.label,
+            type: widget?.type,
+            isRequired
+          });
+        }
+      }
+      setHeaders([...emailHeaders, ...widgetHeaders]);
+      setForms((prev) => [...prev, { Id: 1, fields: users }]);
+      const signer = props.item?.Signers?.filter((x) => x?.objectId);
+      setSigners(signer);
+    }
+  };
+
+  useEffect(() => {
+    signatureExist();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const checkSignatureAndRoles = (placeholders = []) => {
+    const filtered = placeholders.filter((x) => x?.Role !== "prefill");
+
+    const isSignExist = filtered.every((p) =>
+      p?.placeHolder?.some((h) => h?.pos?.some((p) => p?.type === "signature"))
+    );
+
+    setIsSignatureExist(isSignExist);
+    setIsVacantRoles(placeholders.some((x) => !x.signerObjId));
+  };
+
+  //function to check at least one signature field exist
+  const signatureExist = async () => {
+    setIsLoader(true);
+    await initializeWidgetsWithValues();
+      checkSignatureAndRoles(props?.Placeholders);
+      setIsLoader(false);
+  };
+
+  const handleInputChange = (formIndex, signer, role) => {
+    const newForms = [...forms];
+    const email = signer?.Email ? signer?.Email : signer || "";
+    const fieldId = newForms[formIndex].fields.findIndex(
+      (f) => f.label === role
+    );
+    newForms[formIndex].fields[fieldId].email = normalizeKey(email);
+    newForms[formIndex].fields[fieldId].signer = signer?.objectId ? signer : "";
+    setForms(newForms);
+  };
+
+  const handleWidgetDetails = (
+    value = "",
+    formIndex,
+    RoleIndex = 0,
+    widgetIndex
+  ) => {
+    const newForms = [...forms];
+    newForms[formIndex].fields[RoleIndex].widgets[widgetIndex].response = value;
+    setForms(newForms);
+  };
+
+
+  function validateEmails(data) {
+    for (const item of data) {
+      let email = "";
+      const filterFields = item.fields.filter((p) => p.label !== "prefill");
+      for (const field of filterFields) {
+        if (!emailRegex.test(field.email)) {
+          alert(t("invalid-email-found", { email: field.email }));
+          return false;
+        } else if (email === field.email || emails?.includes(field.email)) {
+          alert(t("duplicate-email-found", { email: field.email }));
+          return false;
+        } else {
+          email = field.email;
+        }
+      }
+    }
+    return true;
+  }
+
+  // `updateWidgetValues` will update responses for all widget types
+  const updateWidgetValues = (widgetValues = [], placeholders = []) => {
+    if (!widgetValues?.length) return placeholders;
+    const responseByName = new Map(
+      widgetValues
+        .map((w) => [w?.options?.name, w?.response])
+        .filter(([name]) => !!name)
+    );
+
+    return placeholders.map((ph) => {
+      const updatedPages = (ph?.placeHolder ?? []).map((page) => {
+        const updatedPos = (page?.pos ?? []).map((widgetDetails) => {
+          const name = widgetDetails?.options?.name;
+          if (!name || !responseByName.has(name)) return widgetDetails;
+
+          const newResponse = responseByName.get(name);
+
+          return {
+            ...widgetDetails,
+            options: {
+              ...widgetDetails.options,
+              // update response; if you DON'T want undefined to overwrite, keep the ?? fallback
+              response:
+                newResponse ??
+                widgetDetails.options?.response ??
+                widgetDetails.options?.defaultValue
+            }
+          };
+        });
+
+        return { ...page, pos: updatedPos };
+      });
+
+      return { ...ph, placeHolder: updatedPages };
+    });
+  };
+
+  // `removeWidgetValues` will clear out responses for draw/image/signature/stamp/initials widgets
+  const removeWidgetValues = (widgetValues = [], placeholders = []) => {
+    if (!widgetValues?.length) return placeholders;
+    return placeholders.map((ph) => {
+      const updatedPages = (ph?.placeHolder ?? []).map((page) => {
+        const updatedPos = (page?.pos ?? []).map((widgetDetails) => {
+          const isImageType = ALL_EXCLUDED_TYPES.has(widgetDetails?.type);
+          return {
+            ...widgetDetails,
+            options: {
+              ...widgetDetails.options,
+              // update response; if you DON'T want undefined to overwrite, keep the ?? fallback
+              response: isImageType ? "" : widgetDetails.options?.response,
+              defaultValue: isImageType
+                ? ""
+                : widgetDetails.options?.defaultValue
+            }
+          };
+        });
+
+        return { ...page, pos: updatedPos };
+      });
+
+      return { ...ph, placeHolder: updatedPages };
+    });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+      dispatch(setBulkLoader(true));
+      if (!forms.length) {
+        alert(t("bulk-send-no-records"));
+        dispatch(setBulkLoader(false));
+        return;
+      }
+      if (validateEmails(forms)) {
+        // Create a copy of Placeholders array from props.item
+        let Placeholders = [...props.Placeholders];
+        // Initialize an empty array to store updated documents
+        let Documents = [];
+        let error = "";
+        // Loop through each form
+        for (const form of forms) {
+          //checking if user enter email which already exist as a signer then add user in a signers array
+          let existSigner = [];
+          form.fields.map((data) => {
+            if (data.signer) {
+              existSigner.push(data.signer);
+            }
+          });
+          // Map through the copied Placeholders array to update email values
+          const updatedPlaceholders = Placeholders.map((placeholder) => {
+            // Find the field in the current form that matches the placeholder Id
+            const field = form.fields.find(
+              (element) => parseInt(element.fieldId) === placeholder.Id
+            );
+            // If a matching field is found, update the email value in the placeholder
+            const signer = field?.signer?.objectId ? field.signer : "";
+            if (field) {
+              if (signer) {
+                return {
+                  ...placeholder,
+                  signerObjId: field?.signer?.objectId || "",
+                  signerPtr: signer
+                };
+              } else {
+                return {
+                  ...placeholder,
+                  email: normalizeKey(field.email),
+                  signerObjId: field?.signer?.objectId || "",
+                  signerPtr: signer
+                };
+              }
+            }
+            // If no matching field is found, keep the placeholder as is
+            return placeholder;
+          });
+          const widgetValues = form?.fields?.flatMap((f) => f.widgets);
+          const updateWidgetPlaceholder = updateWidgetValues(
+            widgetValues,
+            updatedPlaceholders
+          );
+          const url = props.item?.URL || props.item?.SignedUrl;
+          let signedUrl = await getSignedUrl(
+            url,
+            "", //docId
+            props.item.objectId, // templateId
+          );
+          const prefillField = form?.fields?.find((f) => f.label === "prefill");
+          const prefills = prefillField?.widgets ?? [];
+          if (prefills?.length > 0) {
+            const prefillDetails = updateWidgetPlaceholder?.find(
+              (x) => x.Role === "prefill"
+            );
+            const pdfArrayBuffer = await convertPdfArrayBuffer(signedUrl);
+            if (pdfArrayBuffer === "Error") {
+              error = t("something-went-wrong-mssg");
+              dispatch(setBulkLoader(false));
+              break;
+            }
+            signedUrl = await handleEmbedPrefillToDoc(
+              prefillDetails,
+              1, // scale
+              pdfArrayBuffer,
+              [], // prefillImg,
+              props.item?.ExtUserPtr?.UserId?.objectId // userId
+            );
+            if (signedUrl?.error) {
+              error = signedUrl.error.includes("not compatible")
+                ? t("pdf-uncompatible", { appName: appName })
+                : signedUrl?.error;
+              dispatch(setBulkLoader(false));
+              break;
+            }
+          }
+          const placeholders = removeWidgetValues(
+            widgetValues,
+            updateWidgetPlaceholder
+          );
+          if (!signedUrl) {
+            error = t("something-went-wrong-mssg");
+            dispatch(setBulkLoader(false));
+            break;
+          }
+          // Push a new document object with updated Placeholders into the Documents array
+          if (existSigner?.length > 0) {
+            Documents.push({
+              ...props.item,
+              URL: signedUrl,
+              Placeholders: placeholders,
+              Signers: signers ? [...signers, ...existSigner] : [...existSigner]
+            });
+          } else {
+            Documents.push({
+              ...props.item,
+              URL: signedUrl,
+              Placeholders: placeholders,
+              SignatureType: props.signatureType,
+              Signers: signers
+            });
+          }
+        }
+        if (error) {
+          alert(error);
+        } else {
+          await batchQuery(Documents);
+        }
+      } else {
+        dispatch(setBulkLoader(false));
+      }
+  };
+
+  const batchQuery = async (Documents) => {
+    const functionsUrl = `${localStorage.getItem("baseUrl")}functions/batchdocuments`;
+    const headers = {
+      ...tokenHeader,
+    };
+    const params = { Documents: JSON.stringify(Documents) };
+    try {
+      const res = await axios.post(functionsUrl, params, { headers: headers });
+      if (res.data && res.data.result) {
+        props.handleClose("success", Documents?.length);
+      }
+    } catch (err) {
+      const message =
+        err?.response?.data?.error || err?.message || "something went wrong.";
+      console.error("Error sending documents:", message);
+        props.handleClose("error", 0, message);
+    } finally {
+      dispatch(setBulkLoader(false));
+    }
+  };
+
+
+  if (isLoader) {
+    return (
+      <div className="w-full h-[100px] flex justify-center items-center z-[999]">
+        <Loader />
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative">
+      {/* {isBulkLoader && (
+        <div className="absolute z-[999] h-full w-full flex justify-center items-center bg-black bg-opacity-30">
+          <Loader />
+        </div>
+      )} */}
+      {props.Placeholders?.length > 0 ? (
+        isSignatureExist ? (
+          isVacantRoles ? (
+            <>
+              <form onSubmit={handleSubmit}>
+                <div className="min-h-max max-h-[250px] overflow-auto">
+                  {
+                      forms?.length > 0 && (
+                        <div className="mx-4">
+                          <table className="op-table border-collapse w-full">
+                            <thead className="text-[13px] text-center">
+                              <tr className="border-y-[1px]">
+                                {/* Roles + widgets */}
+                                {headers?.map((header) => (
+                                  <th
+                                    key={header.label}
+                                    className={`${requiredAsteriskCls(header?.isRequired)} p-2`}
+                                  >
+                                    {header.label}
+                                  </th>
+                                ))}
+                                {forms?.length > 1 && (
+                                  <th className="p-2">{t("action")}</th>
+                                )}
+                              </tr>
+                            </thead>
+                            <tbody className="text-[12px] text-base-content">
+                              {forms.map((form, formIndex) => {
+                                const fields = form?.fields ?? [];
+                                const emailFields = fields.filter(
+                                  (f) => f.label !== "prefill"
+                                );
+                                const widgets = fields.flatMap(
+                                  (f, fieldIndex) =>
+                                    (f.widgets ?? []).map(
+                                      (widget, widgetIndex) => ({
+                                        widget,
+                                        fieldIndex, // keep the fieldIndex that produced this widget
+                                        widgetIndex
+                                      })
+                                    )
+                                );
+
+                                return (
+                                  <tr key={form.Id}>
+                                    {/* Email cell (label + SuggestionInput) */}
+                                    {emailFields?.map((field, fieldIndex) => (
+                                      <td key={field.fieldId} className="p-2">
+                                        <div className="flex flex-col min-w-max">
+                                          <SuggestionInput
+                                            required
+                                            type="email"
+                                            value={field.email ?? ""}
+                                            index={fieldIndex}
+                                            onChange={(signer) =>
+                                              handleInputChange(
+                                                formIndex,
+                                                signer,
+                                                field.label
+                                              )
+                                            }
+                                          />
+                                        </div>
+                                      </td>
+                                    ))}
+
+                                    {widgets.map(
+                                      ({ widget, fieldIndex, widgetIndex }) => (
+                                        <td key={widget.key} className="p-2">
+                                          <RenderWidgets
+                                            widget={widget}
+                                            formIndex={formIndex}
+                                            prefillIndex={widgetIndex}
+                                            handleWidgetDetails={(value) =>
+                                              handleWidgetDetails(
+                                                value,
+                                                formIndex,
+                                                fieldIndex,
+                                                widgetIndex
+                                              )
+                                            }
+                                          />
+                                        </td>
+                                      )
+                                    )}
+                                  </tr>
+                                );
+                              })}
+                            </tbody>
+                          </table>
+                        </div>
+                      )
+                  }
+                </div>
+                <div className="flex flex-row flex-wrap pb-3 pt-2 px-3 gap-3 justify-center">
+                  <button
+                    type="submit"
+                    className="op-btn op-btn-accent w-[150px] focus:outline-none"
+                  >
+                    <i className="fa-light fa-paper-plane"></i>
+                    <span>{t("send")}</span>
+                  </button>
+                </div>
+              </form>
+            </>
+          ) : (
+            <div className="text-black p-3 bg-white w-full text-sm md:text-base flex justify-center items-center">
+              {t("quick-send-alert-1")}
+            </div>
+          )
+        ) : (
+          <div className="text-black p-3 bg-white w-full text-sm md:text-base flex justify-center items-center">
+            {t("quick-send-alert-2")}
+          </div>
+        )
+      ) : (
+        <div className="text-black p-3 bg-white w-full text-sm md:text-base flex justify-center items-center">
+          {t("quick-send-alert-3")}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default BulkSendUi;

apps/OpenSign/src/components/bulksend/components/RenderWidgets.jsx

@@ -0,0 +1,582 @@
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import DatePicker from "react-datepicker";
+import SignatureCanvas from "react-signature-canvas";
+import { useTranslation } from "react-i18next";
+import moment from "moment";
+import {
+  changeDateToMomentFormat,
+  compressedFileSize,
+  getMonth,
+  getYear,
+  months,
+  radioButtonWidget,
+  textInputWidget,
+  textWidget,
+  years
+} from "../../../constant/Utils";
+import PenColorComponent from "../../pdf/tab/PenColorComponent";
+import { getDatePickerDate, toHtmlPattern } from "../../../utils";
+import CellsInput from "../../shared/fields/CellsInput";
+import { emailRegex } from "../../../constant/const";
+
+const inputOpt = new Set(["text", "email", "number"]);
+const PREFILL_PREFIX = "prefill::";
+
+const inputTypes = {
+  email: emailRegex,
+  number: /^[0-9\s]*$/,
+  ssn: /^(?!000|666|9\d{2})\d{3}-(?!00)\d{2}-(?!0000)\d{4}$/
+};
+const inputValidation = (pattern, type) => {
+  if (pattern) return pattern;
+  return inputTypes[type] || "";
+};
+const canavasTheme = `opensigncss:bg-white opensigndark:bg-[#121212] opensigndark:border-[#f6f3f4]/20 opensigncss:border-gray-300 opensigndark:hover:border-white opensigncss:hover:border-black border-[1px]`;
+const DateWidget = ({ widget, isRequired, onChange }) => {
+  const format = widget?.options?.validation?.format || "MM/dd/yyyy";
+
+  const PrefillDateInput = forwardRef(({ value, onClick }, ref) => (
+    <div
+      style={{ fontFamily: "Arial, sans-serif" }}
+      className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full"
+      onClick={onClick}
+      ref={ref}
+    >
+      {value ? value : format}
+      <i className="fa-light fa-calendar ml-[5px]"></i>
+    </div>
+  ));
+  PrefillDateInput.displayName = "PrefillDateInput";
+
+  const handleDate = (widget) => {
+    // The getDatePickerDate function retrieves the date in the correct format supported by the DatePicker.
+    try {
+      return getDatePickerDate(widget?.response, format);
+    } catch (err) {
+      console.error("handleDate error ", err);
+      return;
+    }
+  };
+
+  //function to set date with required date format onchange date
+  const handleOnDateChange = (date) => {
+    let updateDate = date;
+    let newDate;
+    const isSpecialDateFormat =
+      format && ["dd-MM-yyyy", "dd.MM.yyyy", "dd/MM/yyyy"].includes(format);
+    if (isSpecialDateFormat) {
+      newDate = moment(updateDate).format(changeDateToMomentFormat(format));
+    } else {
+      //using moment package is used to change date as per the format provided in selectDate obj e.g. - MM/dd/yyyy -> 03/12/2024
+      newDate = new Date(updateDate);
+      newDate = moment(newDate.getTime()).format(
+        changeDateToMomentFormat(format)
+      );
+    }
+    onChange(newDate);
+  };
+
+  return (
+    <div className="flex flex-col">
+      <div className="min-w-max">
+        <DatePicker
+          portalId="datepicker-portal-root"
+          id={`widget-${widget?.options?.name}-${widget.key}`}
+          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>
+          )}
+          closeOnScroll={true}
+          selected={handleDate(widget)}
+          onChange={(date) => handleOnDateChange(date, widget)}
+          customInput={<PrefillDateInput />}
+          dateFormat={widget?.options?.validation?.format || "MM/dd/yyyy"}
+          required={isRequired}
+        />
+      </div>
+    </div>
+  );
+};
+const TextWidget = ({ widget, isRequired, onChange }) => {
+  const { t } = useTranslation();
+  const [value, setValue] = useState([]);
+  const inputType = widget?.options?.validation?.type || "";
+  const serverRegex = widget?.options?.validation?.pattern;
+  const isPredfineType = inputType ? inputOpt?.has(inputType) : "";
+  const regExpression = inputValidation(serverRegex, inputType);
+  const pattern = useMemo(() => toHtmlPattern(regExpression), [regExpression]);
+
+  useEffect(() => {
+    const response =
+      widget?.options?.response ?? widget?.options?.defaultValue ?? "";
+    const isNumber = inputType === "number" && response;
+    setValue(isNumber ? Number(response) : response);
+  }, []);
+  const handleInputChange = (e) => {
+    const text = e.target.value || "";
+    setValue(text);
+    onChange(text);
+  };
+  return (
+    <div className="flex flex-col">
+      <div className="min-w-max">
+        <input
+          type={isPredfineType ? inputType : "text"}
+          id={`widget-${widget?.options?.name}-${widget.key}`}
+          value={value}
+          placeholder={
+            widget?.options?.hint ||
+            t("enter-value", { value: widget?.options?.name })
+          }
+          className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+          onChange={(e) => handleInputChange(e)}
+          pattern={pattern || undefined} // if no pattern, browser won't do pattern validation
+          onInvalid={(e) => {
+            const el = e.currentTarget;
+            // ✅ Only override message if pattern exists AND the error is patternMismatch
+            if (pattern && el.validity.patternMismatch) {
+              el.setCustomValidity(t("validation-alert-1"));
+            } else {
+              el.setCustomValidity("");
+            }
+          }}
+          onInput={(e) => {
+            e.currentTarget.setCustomValidity("");
+          }}
+          required={isRequired}
+        />
+      </div>
+    </div>
+  );
+};
+const CheckboxWidget = ({ widget, isRequired, onChange }) => {
+  const { t } = useTranslation();
+  const [selectedCheckbox, setSelectedCheckbox] = useState([]);
+
+  useEffect(() => {
+    setSelectedCheckbox(
+      widget?.options?.response ?? widget?.options?.defaultValue ?? []
+    );
+  }, []);
+
+  const handleCheckboxValue = (isChecked, ind) => {
+    const prevArr = Array.isArray(selectedCheckbox) ? selectedCheckbox : [];
+
+    const updateResponse = isChecked
+      ? prevArr.includes(ind)
+        ? prevArr
+        : [...prevArr, ind] // add once
+      : prevArr.filter((v) => v !== ind); // remove
+
+    setSelectedCheckbox(updateResponse);
+    onChange(updateResponse);
+  };
+  const noneSelected = selectedCheckbox?.length === 0;
+  return (
+    <div className="flex flex-col">
+      <div className="flex flex-col gap-y-1 min-w-max">
+        {widget.options?.values?.map((value, ind) => (
+          <div
+            key={ind}
+            className="select-none-cls flex items-center text-center gap-0.5"
+          >
+            <input
+              id={`checkbox-${widget.key + ind}`}
+              className="mt-[2px] op-checkbox op-checkbox-xs"
+              type="checkbox"
+              checked={selectedCheckbox.includes(ind)}
+              required={isRequired && noneSelected && ind === 0} // ✅ key line
+              onInvalid={(e) =>
+                e.target.setCustomValidity(t("select-at-least-option"))
+              }
+              onChange={(e) => {
+                e.target.setCustomValidity(""); // ✅ clear message as soon as user changes
+                handleCheckboxValue(e.target.checked, ind);
+              }}
+            />
+            <label
+              htmlFor={`checkbox-${widget.key + ind}`}
+              className="text-xs mb-0 text-center ml-[3px] cursor-pointer"
+            >
+              {value}
+            </label>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+const DropdownWidget = ({ widget, isRequired, onChange }) => {
+  const { t } = useTranslation();
+  const [selected, setSelected] = useState("");
+
+  useEffect(() => {
+    setSelected(
+      widget?.options?.response ?? widget?.options?.defaultValue ?? ""
+    );
+  }, []);
+
+  const handleDropdownChange = (value) => {
+    setSelected(value);
+    onChange(value);
+  };
+
+  return (
+    <div className="flex flex-col">
+      <div className="min-w-max">
+        <select
+          className="op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-base-content w-full"
+          id={`widget-${widget?.options?.name}-${widget?.key}`}
+          value={selected}
+          onChange={(e) => handleDropdownChange(e.target.value)}
+          required={isRequired}
+        >
+          {/* Default/Title option */}
+          <option value="" disabled hidden>
+            {t("choose-one")}
+          </option>
+          {widget?.options?.values?.map((option, ind) => (
+            <option key={ind} value={option}>
+              {option}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
+  );
+};
+const RadioButtonWidget = ({ widget, isRequired, onChange, formIndex }) => {
+  const [selected, setSelected] = useState("");
+
+  useEffect(() => {
+    setSelected(
+      widget?.options?.response || widget?.options?.defaultValue || ""
+    );
+  }, []);
+
+  const handleRadioChange = (value) => {
+    setSelected(value);
+    onChange(value);
+  };
+
+  return (
+    <div className="flex flex-col">
+      <div className="flex flex-col gap-y-1 min-w-max">
+        {widget.options?.values?.map((data, ind) => (
+          <div
+            key={ind}
+            className="select-none-cls flex items-center text-center gap-0.5"
+          >
+            <input
+              id={`radio-${widget.key + ind}`}
+              className="mt-[2px] op-radio op-radio-xs"
+              name={`radio-group-${widget.key}-${formIndex}`} // ✅ same name => browser treats all radios as ONE group
+              type="radio"
+              required={isRequired && ind === 0} // ✅ set required ONCE (on first radio) to make the whole group mandatory
+              checked={selected === data}
+              onChange={() => handleRadioChange(data)}
+            />
+            <label
+              htmlFor={`radio-${widget.key + ind}`}
+              className="text-xs mb-0 ml-[2px] cursor-pointer"
+            >
+              {data}
+            </label>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+const ImageWidget = ({ widget, isRequired, onChange }) => {
+  const { t } = useTranslation();
+  const imageRef = useRef(null);
+  const [img, setImg] = useState({ src: "", imgType: "" });
+  const [defaultImg, setDefaultImg] = useState({ src: "", imgType: "" });
+
+  useEffect(() => {
+    if (widget?.response) {
+      setDefaultImg({ src: widget?.response, imgType: "" });
+    }
+  }, []);
+
+  const onImageChange = (e) => {
+    if (e.target.files && e.target.files?.[0]) {
+      const file = e.target.files?.[0];
+      compressedFileSize(file, ({ src, imgType }) => {
+        onChange(src);
+        setImg({ src, imgType });
+      });
+    }
+  };
+  const handleClearImage = () => {
+    setDefaultImg({ src: "", imgType: "" });
+    setImg({ src: "", imgType: "" });
+    onChange("");
+  };
+
+  return (
+    <div className="flex flex-col">
+      <div className="flex flex-col prefillCanvas">
+        {defaultImg?.src || img?.src ? (
+          <>
+            <div
+              className={`cursor-pointer rounded-box ${canavasTheme} flex flex-col w-full h-full justify-center items-center`}
+            >
+              <img
+                alt={`image_${widget?.options?.name}`}
+                src={img.src || defaultImg?.src}
+                draggable="false"
+                className="object-contain h-full w-full aspect-[5/2]"
+              />
+            </div>
+            <span
+              onClick={handleClearImage}
+              className="flex justify-start text-blue-500 underline cursor-pointer ml-1"
+            >
+              {t("clear")}
+            </span>
+          </>
+        ) : (
+          <div
+            className={`cursor-pointer rounded-box ${canavasTheme} overflow-hidden w-full h-full aspect-[5/2] flex flex-col justify-center items-center`}
+            onClick={() => imageRef.current?.click()}
+          >
+            <i className="fa-light text-base-content fa-cloud-upload-alt text-[25px]"></i>
+            <div className="text-[10px] text-base-content">{t("upload")}</div>
+            <input
+              type="file"
+              onChange={(e) => onImageChange?.(e, widget)}
+              className="filetype w-[1px] h-[1px] opacity-0"
+              accept="image/png,image/jpeg"
+              ref={imageRef} // Assign ref dynamically
+              required={isRequired}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+const DrawWidget = ({ widget, isRequired, onChange }) => {
+  const { t } = useTranslation();
+  const canvasRef = useRef(null);
+  const sigRequiredRef = useRef(null);
+  const [hasDraw, setHasDraw] = useState("");
+  const [penColor, setPenColor] = useState("blue");
+  const [image, setImage] = useState("");
+
+  useEffect(() => {
+    if (widget?.response) {
+      setImage(widget?.response);
+      setHasDraw("signed");
+    }
+  }, []);
+
+  const handleSignatureChange = () => {
+    const draw = canvasRef.current?.isEmpty?.() ? "" : "signed";
+    setHasDraw(draw);
+    onChange(canvasRef.current.toDataURL());
+
+    // clear custom error once user signs
+    sigRequiredRef.current?.setCustomValidity("");
+  };
+
+  const handleClear = () => {
+    setImage("");
+    if (canvasRef?.current) {
+      canvasRef.current.clear();
+      onChange("");
+      setHasDraw("");
+      // clear custom error once user signs
+      sigRequiredRef.current?.setCustomValidity("");
+    }
+  };
+
+  return (
+    <div className="flex flex-col">
+      <div className="relative">
+        {image ? (
+          <div className={`prefillCanvas ${canavasTheme} rounded-[10px]`}>
+            <img
+              alt={`draw_${widget?.options?.name}`}
+              src={image}
+              className="prefillCanvas object-contain"
+            />
+          </div>
+        ) : (
+          <SignatureCanvas
+            ref={canvasRef}
+            penColor={penColor}
+            canvasProps={{
+              className: `prefillCanvas ${canavasTheme} rounded-[10px]`
+            }}
+            onEnd={() => handleSignatureChange()}
+            dotSize={1}
+          />
+        )}
+        {/* ✅ Native form validation hook */}
+        <input
+          ref={sigRequiredRef}
+          type="text"
+          value={hasDraw}
+          required={isRequired}
+          tabIndex={-1}
+          onInvalid={(e) => e.target.setCustomValidity(t("draw-required"))}
+          onChange={() => {}}
+          className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0 w-[1px] h-[1px] pointer-events-none"
+        />
+      </div>
+      <div className="flex flex-row justify-between mt-[8px] w-[200px]">
+        <PenColorComponent
+          penColor={penColor}
+          setPenColor={setPenColor}
+          hideLabel
+          penSize="sm"
+        />
+        <span
+          onClick={handleClear}
+          className="flex justify-start text-blue-500 underline cursor-pointer"
+        >
+          {t("clear")}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+const CellsWidget = ({ widget, isRequired, onChange }) => {
+  const { t } = useTranslation();
+  const count = widget?.options?.cellCount || 1;
+  const [word, setWord] = useState("");
+  const inputType = widget?.options?.validation?.type || "";
+  const serverRegex = widget?.options?.validation?.pattern;
+  const regExpression = inputValidation(serverRegex, inputType);
+  const pattern = useMemo(() => toHtmlPattern(regExpression), [regExpression]);
+
+  useEffect(() => {
+    const response =
+      widget?.options?.response ?? widget?.options?.defaultValue ?? "";
+    const isNumber = inputType === "number" && response;
+    setWord(isNumber ? Number(response) : response);
+  }, []);
+
+  const handleChange = (words) => {
+    const value = words;
+    setWord(value);
+    onChange(value);
+  };
+
+  return (
+    <div className="flex flex-col">
+      <div className="relative">
+        <CellsInput
+          hint={
+            widget?.options?.hint ||
+            t("enter-value", { value: widget?.options?.name })
+          }
+          count={count}
+          value={word}
+          onChange={handleChange}
+          only="all"
+          autoFocus
+        />
+        <input
+          id={`widget-${widget?.options?.name}-${widget.key}`}
+          value={word}
+          required={isRequired}
+          tabIndex={-1}
+          onChange={() => {}}
+          pattern={pattern || undefined} // if no pattern, browser won't do pattern validation
+          onInvalid={(e) => {
+            const el = e.currentTarget;
+            // ✅ Only override message if pattern exists AND the error is patternMismatch
+            if (pattern && el.validity.patternMismatch) {
+              el.setCustomValidity(t("validation-alert-1"));
+            } else {
+              el.setCustomValidity("");
+            }
+          }}
+          onInput={(e) => {
+            e.currentTarget.setCustomValidity("");
+          }}
+          className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0 w-[1px] h-[1px] pointer-events-none"
+        />
+      </div>
+    </div>
+  );
+};
+
+const RenderWidgets = ({
+  widget,
+  formIndex,
+  prefillIndex,
+  handleWidgetDetails
+}) => {
+  const label = widget?.label?.toLowerCase() ?? "";
+  const isPrefill = label.includes(PREFILL_PREFIX);
+  const commonProps = {
+    widget,
+    isRequired: widget.options?.status === "required" && isPrefill,
+    formIndex
+  };
+
+  const onChange = (value) => {
+    handleWidgetDetails(value, formIndex, prefillIndex);
+  };
+
+  switch (widget.type) {
+    case "date":
+      return <DateWidget {...commonProps} onChange={onChange} />;
+    case textWidget:
+    case textInputWidget:
+    case "name":
+    case "email":
+    case "company":
+    case "job title":
+    case "number":
+      return <TextWidget {...commonProps} onChange={onChange} />;
+    case "checkbox":
+      return <CheckboxWidget {...commonProps} onChange={onChange} />;
+    case radioButtonWidget:
+      return <RadioButtonWidget {...commonProps} onChange={onChange} />;
+    case "dropdown":
+      return <DropdownWidget {...commonProps} onChange={onChange} />;
+    case "image":
+    case "stamp":
+      return <ImageWidget {...commonProps} onChange={onChange} />;
+    case "initials":
+    case "draw":
+      return <DrawWidget {...commonProps} onChange={onChange} />;
+    case "cells":
+      return <CellsWidget {...commonProps} onChange={onChange} />;
+    default:
+      return null;
+  }
+};
+
+export default RenderWidgets;

apps/OpenSign/src/components/dashboard/DashboardCard.jsx

@@ -5,6 +5,7 @@ import getReplacedHashQuery from "../../constant/getReplacedHashQuery";
 import { useNavigate } from "react-router";
 import Tooltip from "../../primitives/Tooltip";
 import { useTranslation } from "react-i18next";
+import { withSessionValidation } from "../../utils";
 
 const DashboardCard = (props) => {
   const navigate = useNavigate();
@@ -14,7 +15,7 @@ const DashboardCard = (props) => {
   const [response, setresponse] = useState("");
   const [loading, setLoading] = useState(false);
 
-  const renderData = async () => {
+  const renderData = withSessionValidation(async () => {
     if (props.Data.queryType === "function") {
       setLoading(true);
       try {
@@ -186,9 +187,9 @@ const DashboardCard = (props) => {
         setLoading(false);
       }
     }
-  };
+  });
 
-  const filterRender = async () => {
+  const filterRender = withSessionValidation(async () => {
     if (props.FilterData && props.FilterData.queryType === "function") {
       setLoading(true);
       try {
@@ -266,7 +267,7 @@ const DashboardCard = (props) => {
         setLoading(false);
       }
     }
-  };
+  });
 
   const setFormat = (val) => {
     switch (props.Format) {

apps/OpenSign/src/components/dashboard/DashboardReport.jsx

@@ -5,6 +5,7 @@ import reportJson from "../../json/ReportJson";
 import axios from "axios";
 import Loader from "../../primitives/Loader";
 import { useTranslation } from "react-i18next";
+import { withSessionValidation } from "../../utils";
 function DashboardReport(props) {
   const { t } = useTranslation();
   const [List, setList] = useState([]);
@@ -46,7 +47,7 @@ function DashboardReport(props) {
     // eslint-disable-next-line
   }, [isNextRecord]);
 
-  const handleSearchChange = async (e) => {
+  const handleSearchChange = withSessionValidation(async (e) => {
     const term = e.target.value.toLowerCase();
     setSearchTerm(term);
     if (debounceTimer.current) {
@@ -82,7 +83,7 @@ function DashboardReport(props) {
       }
     }, 300);
     setIsSearchResult(false);
-  };
+  });
 
   const handleSearchPaste = (e) => {
     setTimeout(() => {
@@ -98,96 +99,95 @@ function DashboardReport(props) {
     };
   }, []);
 
-  const getReportData = async (
-    id,
-    skipUserRecord = 0,
-    limit = 20,
-    term = searchTerm
-  ) => {
-    setIsLoader(true);
-    const json = reportJson(id);
-    if (json) {
-      setActions(json.actions);
-      setReportName(json.reportName);
-      setHeading(json.heading);
-      const currentUser = Parse.User.current().id;
+  const getReportData = withSessionValidation(
+    async (id, skipUserRecord = 0, limit = 20, term = searchTerm) => {
+      setIsLoader(true);
+      const json = reportJson(id);
+      if (json) {
+        setActions(json.actions);
+        setReportName(json.reportName);
+        setHeading(json.heading);
+        const currentUser = Parse.User.current().id;
 
-      const headers = {
-        "Content-Type": "application/json",
-        "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-        sessiontoken: localStorage.getItem("accesstoken")
-      };
-      try {
-        const skipRecord = id === "5Go51Q7T8r" ? 0 : skipUserRecord;
-        const limitRecord = id === "5Go51Q7T8r" ? 200 : limit;
-        const params = { reportId: id, skip: skipRecord, limit: limitRecord };
-        if (term) {
-          params.searchTerm = term;
-        }
-        const url = `${localStorage.getItem("baseUrl")}functions/getReport`;
-        const res = await axios.post(url, params, {
-          headers: headers,
-          signal: abortController.signal // is used to cancel fetch query
-        });
-        if (id === "5Go51Q7T8r") {
-          const listData = res.data?.result.filter((x) => x.Signers.length > 0);
-          let arr = [];
-          for (const obj of listData) {
-            const isSigner = obj.Signers?.some(
-              (item) => item.UserId.objectId === currentUser
+        const headers = {
+          "Content-Type": "application/json",
+          "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
+          sessiontoken: localStorage.getItem("accesstoken")
+        };
+        try {
+          const skipRecord = id === "5Go51Q7T8r" ? 0 : skipUserRecord;
+          const limitRecord = id === "5Go51Q7T8r" ? 200 : limit;
+          const params = { reportId: id, skip: skipRecord, limit: limitRecord };
+          if (term) {
+            params.searchTerm = term;
+          }
+          const url = `${localStorage.getItem("baseUrl")}functions/getReport`;
+          const res = await axios.post(url, params, {
+            headers: headers,
+            signal: abortController.signal // is used to cancel fetch query
+          });
+          if (id === "5Go51Q7T8r") {
+            const listData = res.data?.result.filter(
+              (x) => x.Signers.length > 0
             );
-            if (isSigner) {
-              let isRecord;
-              if (obj?.AuditTrail && obj?.AuditTrail.length > 0) {
-                isRecord = obj?.AuditTrail.some(
-                  (item) =>
-                    item?.UserPtr?.UserId?.objectId === currentUser &&
-                    item.Activity === "Signed"
-                );
-              } else {
-                isRecord = false;
-              }
-              if (isRecord === false) {
-                arr.push(obj);
+            let arr = [];
+            for (const obj of listData) {
+              const isSigner = obj.Signers?.some(
+                (item) => item.UserId.objectId === currentUser
+              );
+              if (isSigner) {
+                let isRecord;
+                if (obj?.AuditTrail && obj?.AuditTrail.length > 0) {
+                  isRecord = obj?.AuditTrail.some(
+                    (item) =>
+                      item?.UserPtr?.UserId?.objectId === currentUser &&
+                      item.Activity === "Signed"
+                  );
+                } else {
+                  isRecord = false;
+                }
+                if (isRecord === false) {
+                  arr.push(obj);
+                }
               }
             }
-          }
-          if (arr.length === docPerPage) {
-            setIsMoreDocs(true);
-          } else {
-            setIsMoreDocs(false);
-          }
-          setList((prevRecord) =>
-            prevRecord.length > 0 ? [...prevRecord, ...arr] : arr
-          );
-        } else {
-          if (res.data.result.length >= docPerPage) {
-            setIsMoreDocs(true);
-          } else {
-            setIsMoreDocs(false);
-          }
-          setIsNextRecord(false);
-          if (!res.data.result.error) {
+            if (arr.length === docPerPage) {
+              setIsMoreDocs(true);
+            } else {
+              setIsMoreDocs(false);
+            }
             setList((prevRecord) =>
-              prevRecord.length > 0
-                ? [...prevRecord, ...res.data.result]
-                : res.data.result
+              prevRecord.length > 0 ? [...prevRecord, ...arr] : arr
             );
+          } else {
+            if (res.data.result.length >= docPerPage) {
+              setIsMoreDocs(true);
+            } else {
+              setIsMoreDocs(false);
+            }
+            setIsNextRecord(false);
+            if (!res.data.result.error) {
+              setList((prevRecord) =>
+                prevRecord.length > 0
+                  ? [...prevRecord, ...res.data.result]
+                  : res.data.result
+              );
+            }
+          }
+          setIsLoader(false);
+        } catch (err) {
+          const isCancel = axios.isCancel(err);
+          if (!isCancel) {
+            console.log("err ", err);
+            setIsLoader(false);
           }
-        }
-        setIsLoader(false);
-      } catch (err) {
-        const isCancel = axios.isCancel(err);
-        if (!isCancel) {
-          console.log("err ", err);
           setIsLoader(false);
         }
+      } else {
         setIsLoader(false);
       }
-    } else {
-      setIsLoader(false);
     }
-  };
+  );
   return (
     <>
       {isLoader ? (

apps/OpenSign/src/components/opensigndrive/DriveBody.jsx

@@ -10,6 +10,7 @@ import FolderModal from "../shared/fields/FolderModal";
 import { useTranslation } from "react-i18next";
 import { handleDownloadPdf, isMobile } from "../../constant/Utils";
 import Parse from "parse";
+import { withSessionValidation } from "../../utils";
 
 function DriveBody(props) {
   const { t } = useTranslation();
@@ -52,7 +53,7 @@ function DriveBody(props) {
     props.setSkip(0);
   };
   //function for change doc name and update doc name in  _document class
-  const handledRenameDoc = async (data) => {
+  const handledRenameDoc = withSessionValidation(async (data) => {
     setRename("");
     const trimmedValue = renameValue.trim();
     if (trimmedValue.length > 0) {
@@ -89,7 +90,7 @@ function DriveBody(props) {
         });
       }
     }
-  };
+  });
 
   //function for navigate user to microapp-signature component
   const checkPdfStatus = async (data) => {
@@ -155,7 +156,7 @@ function DriveBody(props) {
     }
   };
   //function for delete document
-  const handleDeleteDocument = async (docData) => {
+  const handleDeleteDocument = withSessionValidation(async (docData) => {
     setIsDeleteDoc({});
     const docId = docData.objectId;
     const data = { IsArchive: true };
@@ -186,13 +187,13 @@ function DriveBody(props) {
           alertMessage: t("something-went-wrong-mssg")
         });
       });
-  };
+  });
   const handleMoveDocument = async (docData) => {
     setIsOpenMoveModal(true);
     setSelectDoc(docData);
   };
   //function for move document from one folder to another folder
-  const handleMoveFolder = async (selectFolderData) => {
+  const handleMoveFolder = withSessionValidation(async (selectFolderData) => {
     const selecFolderId = selectDoc?.Folder?.objectId;
     const moveFolderId = selectFolderData?.ObjectId;
     let updateDocId = selectDoc?.objectId;
@@ -229,7 +230,6 @@ function DriveBody(props) {
             }
           }
         )
-
         .then((Listdata) => {
           const res = Listdata.data;
           if (res) {
@@ -248,7 +248,7 @@ function DriveBody(props) {
       alert(t("folder-already-exist!"));
       setIsOpenMoveModal(false);
     }
-  };
+  });
   const handleEnterPress = (e, data) => {
     if (e.key === "Enter") {
       handledRenameDoc(data);

apps/OpenSign/src/components/pdf/CustomizeMail.jsx

@@ -13,7 +13,6 @@ import { useNavigate } from "react-router";
 
 function CustomizeMail(props) {
   const { t } = useTranslation();
-  const editorRef = useRef();
   const navigate = useNavigate();
   const copyUrlRef = useRef(null);
   const [isCustomize, setIsCustomize] = useState(false);
@@ -27,20 +26,17 @@ function CustomizeMail(props) {
     props?.setIsMailModal(false);
     navigate("/report/1MwEuxLEkF");
   };
-  const handleOnchangeRequest = () => {
-    if (editorRef.current) {
-      const html = editorRef.current.editor.root.innerHTML;
-      props?.setCustomizeMail((prev) => ({
-        ...prev,
-        body: html
-      }));
-    }
+  const handleOnchangeRequest = (value) => {
+    props?.setCustomizeMail((prev) => ({
+      ...prev,
+      body: value
+    }));
   };
   const handleEmailSendToSigners = async () => {
     setIsLoader(true);
     const documentData = await contractDocument(props?.documentId);
     if (documentData && documentData?.length > 0) {
-      props?.setDocumentDetails(documentData[0]);
+      props?.setDocumentDetails && props?.setDocumentDetails(documentData[0]);
       if (
         documentData?.[0]?.SendinOrder &&
         documentData?.[0]?.SendinOrder === true
@@ -49,7 +45,7 @@ function CustomizeMail(props) {
         const ownerDetails = documentData[0].Signers.find(
           (x) => x.Email === ownerEmail
         );
-        props?.setCurrUserId(ownerDetails?.objectId);
+        props?.setCurrUserId && props?.setCurrUserId(ownerDetails?.objectId);
       }
       //function is used to send email to signers for sign the document
       const mailRes = await sendEmailToSigners(
@@ -94,9 +90,8 @@ function CustomizeMail(props) {
                 isCustomize && (
                   <>
                     <EmailBody
-                      editorRef={editorRef}
-                      requestBody={props?.customizeMail.body}
-                      requestSubject={props?.customizeMail.subject}
+                      requestBody={props?.customizeMail?.body}
+                      requestSubject={props?.customizeMail?.subject}
                       handleOnchangeRequest={handleOnchangeRequest}
                       setCustomizeMail={props?.setCustomizeMail}
                     />
@@ -135,9 +130,9 @@ function CustomizeMail(props) {
                   !isCustomize && (
                     <span
                       className="op-link op-link-accent text-sm"
-                      onClick={() => setIsCustomize(!isCustomize)}
+                      onClick={() => setIsCustomize(true)}
                     >
-                      {t("cutomize-email")}
+                      {t("customize-email")}
                     </span>
                   )
               }

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

@@ -5,12 +5,17 @@ import { useEffect, useRef } from "react";
 function DragGuideLinesLayer(props) {
   const { showGuidelines } = props;
   const prevDragState = useRef({ isDragging: false, x: 0, y: 0 });
-  const { isDraggingWidgets, offset, itemType } = useDragLayer((monitor) => ({
-    isDraggingWidgets: monitor.isDragging(),
+  const { isDraggingWidget, offset, itemType } = useDragLayer((monitor) => ({
+    isDraggingWidget: monitor.isDragging(),
     offset: monitor.getClientOffset(),
     itemType: monitor.getItem()
   }));
   useEffect(() => {
+    //  Hide guidelines when dragging stops
+    if (!isDraggingWidget) {
+      showGuidelines(false);
+      return;
+    }
     if (!offset) return;
     //getting container by id
     const container = document.getElementById("container");
@@ -28,15 +33,14 @@ function DragGuideLinesLayer(props) {
       //  Check if there’s any change in the dragging state or the dragged element’s position
       // Compare the current drag state with the previously stored one
       const hasStateChanged =
-        prevDragState.current.isDragging !== isDraggingWidgets || // Drag started or stopped
+        prevDragState.current.isDragging !== isDraggingWidget || // Drag started or stopped
         prevDragState.current.x !== x || // X position changed
         prevDragState.current.y !== y; // Y position changed
 
       if (hasStateChanged) {
         //  Update the previous drag state with the latest values
-        prevDragState.current = { isDragging: isDraggingWidgets, x, y };
-
-        if (isDraggingWidgets) {
+        prevDragState.current = { isDragging: isDraggingWidget, x, y };
+        if (isDraggingWidget) {
           //  Adjust the current drag coordinates relative to the initial widgets button position
           const getXPosition = props?.signBtnPosition?.[0]
             ? x - props.signBtnPosition[0].xPos
@@ -64,13 +68,10 @@ function DragGuideLinesLayer(props) {
 
           //  Display the alignment guidelines based on the current drag position and widget size
           showGuidelines(true, getXPosition, getYPosition, getWidth, getHeight);
-        } else {
-          //  Hide guidelines when dragging stops
-          showGuidelines(false);
         }
       }
     }
-  }, [isDraggingWidgets, offset, itemType, showGuidelines]);
+  }, [isDraggingWidget, offset, itemType, showGuidelines]);
 }
 
 export default DragGuideLinesLayer;

apps/OpenSign/src/components/pdf/DropdownWidgetOption.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import ModalUi from "../../primitives/ModalUi";
 import { radioButtonWidget } from "../../constant/Utils";
 import { useTranslation } from "react-i18next";
@@ -111,16 +111,15 @@ function DropdownWidgetOption(props) {
         return;
       }
     }
-    const defaultData =
-      defaultCheckbox && defaultCheckbox.length > 0
-        ? defaultCheckbox
-        : defaultValue;
 
     const isDropdownOrRadio =
       props?.type === "dropdown" || props?.type === radioButtonWidget;
+    const isCheckbox = props?.type === "checkbox";
+
+    const defaultData = isCheckbox ? defaultCheckbox : defaultValue;
+
     const readOnlyWithoutValue =
       isReadOnly && !defaultValue && status !== "optional";
-    const isCheckbox = props?.type === "checkbox";
     const WidgetLayout = ["checkbox", radioButtonWidget].includes(props.type)
       ? layout
       : null;
@@ -157,13 +156,15 @@ function DropdownWidgetOption(props) {
   };
 
 
-  const handleDefaultCheck = (index) => {
-    const getDefaultCheck = defaultCheckbox.includes(index);
-    if (getDefaultCheck) {
-      return true;
-    } else {
-      return false;
-    }
+  const handleSelectDefaultCheckbox = (e, index) => {
+    const checked = e.target.checked;
+    setDefaultCheckbox((prev) =>
+      checked
+        ? prev.includes(index)
+          ? prev
+          : [...prev, index]
+        : prev.filter((i) => i !== index)
+    );
   };
   return (
     <ModalUi isOpen={props.showDropdown} title={props.title} showClose={false}>
@@ -201,21 +202,8 @@ function DropdownWidgetOption(props) {
                   {props.type === "checkbox" && props.isShowAdvanceFeature && (
                     <input
                       type="checkbox"
-                      checked={handleDefaultCheck(index)}
-                      onChange={(e) => {
-                        if (e.target.checked) {
-                          const getDefaultCheck =
-                            defaultCheckbox?.includes(index);
-                          if (!getDefaultCheck) {
-                            setDefaultCheckbox((prev) => [...prev, index]);
-                          }
-                        } else {
-                          const removeOption = defaultCheckbox.filter(
-                            (data) => data !== index
-                          );
-                          setDefaultCheckbox(removeOption);
-                        }
-                      }}
+                      checked={defaultCheckbox?.includes(index)}
+                      onChange={(e) => handleSelectDefaultCheckbox(e, index)}
                       className="op-checkbox focus:outline-none hover:border-base-content mr-[5px]"
                     />
                   )}
@@ -270,7 +258,8 @@ function DropdownWidgetOption(props) {
                   </select>
                 </>
               )}
-            {props.type !== "checkbox" && !isPrefillExist && (
+            {((props.type !== "checkbox" && !isPrefillExist) ||
+              isPrefillExist) && (
               <div className="flex flex-row gap-[10px] mt-[0.5rem]">
                 {statusArr.map((data, ind) => (
                   <div

apps/OpenSign/src/components/pdf/EditTemplate.jsx

@@ -577,6 +577,7 @@ const EditTemplate = ({
                   e.target.setCustomValidity(t("input-required"))
                 }
                 onInput={(e) => e.target.setCustomValidity("")}
+                min={1}
                 required
               />
             </div>

apps/OpenSign/src/components/pdf/EditorToolbar.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Quill } from "react-quill-new";
 // Use a third-party plugin so editors can toggle raw HTML view.
 import htmlEditButton from "quill-html-edit-button";

apps/OpenSign/src/components/pdf/EmailBody.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import Tooltip from "../../primitives/Tooltip";
 import ReactQuill from "react-quill-new";
 import "../../styles/quill.css";
@@ -19,7 +18,6 @@ export function EmailBody(props) {
           onInput={(e) => e.target.setCustomValidity("")}
           value={props.requestSubject}
           onChange={(e) => {
-            props?.setRequestSubject(e.target.value);
             props?.setCustomizeMail((prev) => ({
               ...prev,
               subject: e.target.value
@@ -37,7 +35,6 @@ export function EmailBody(props) {
             theme="snow"
             value={props.requestBody}
             placeholder={t("email-placeholder")}
-            ref={props.editorRef}
             modules={module1}
             formats={formats}
             onChange={props.handleOnchangeRequest}

apps/OpenSign/src/components/pdf/EmailComponent.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import {
   handleToPrint,
 } from "../../constant/Utils";

apps/OpenSign/src/components/pdf/Placeholder.jsx

@@ -25,13 +25,14 @@ import {
 import PlaceholderType from "./PlaceholderType";
 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";
 import { useGuidelinesContext } from "../../context/GuidelinesContext";
 import DatePicker from "react-datepicker";
+import DateWidgetModal from "../../primitives/DateWidgetModal";
+import { dateFormat } from "../../utils";
 
 function Placeholder(props) {
   const { t } = useTranslation();
@@ -47,11 +48,18 @@ function Placeholder(props) {
   const [clickonWidget, setClickonWidget] = useState({});
   const [formdata, setFormdata] = useState({
     status: props?.pos?.options?.status || "required",
-    isReadOnly: props?.pos?.options?.isReadOnly || false
+    isReadOnly: props?.pos?.options?.isReadOnly || false,
+    name: props?.pos?.options?.name
   });
   const [isToday, setIsToday] = useState(
     props.pos?.options?.response === "today" ? true : false
   );
+  const selectedFormatIndex = dateFormatList?.findIndex(
+    (item) =>
+      item.format === selectDate?.format ||
+      item?.format === props.pos?.options?.validation?.format
+  );
+  const isSelfSign = props.isSignYourself || props.isSelfSign;
   const startDate = props?.pos?.options?.response
     ? getDefaultDate(
         props?.pos?.options?.response,
@@ -65,20 +73,6 @@ function Placeholder(props) {
     setContainerScale(props.containerWH.width / getPdfPageWidth.width);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.containerWH.width, props.pdfOriginalWH]);
-  const dateFormatArr = [
-    "L",
-    "DD-MM-YYYY",
-    "YYYY-MM-DD",
-    "MM.DD.YYYY",
-    "MM-DD-YYYY",
-    "MMM DD, YYYY",
-    "LL",
-    "DD MMM, YYYY",
-    "DD MMMM, YYYY",
-    "DD.MM.YYYY",
-    "DD/MM/YYYY"
-  ];
-
   useEffect(() => {
     if (props?.pos?.type === "date") {
       const isDateChange = true;
@@ -91,24 +85,30 @@ function Placeholder(props) {
   }, [widgetData]);
 
   //function is used to convert date according to selected format
-  const handleGetFormatDate = (data, isDateChange) => {
+  const handleGetFormatDate = (data, isDateChange, isNewDate) => {
+    const format =
+      data?.format ||
+      selectDate?.format ||
+      props.pos?.options?.validation?.format;
     const isSpecialDateFormat =
       data?.format &&
-      ["dd-MM-yyyy", "dd.MM.yyyy", "dd/MM/yyyy"].includes(data?.format);
+      ["dd-MM-yyyy", "dd.MM.yyyy", "dd/MM/yyyy"].includes(format);
     let updateDate = data.date;
     let date = "";
     if (isSpecialDateFormat && updateDate) {
       date = isDateChange
-        ? moment(updateDate).format(changeDateToMomentFormat(data.format))
+        ? moment(updateDate).format(changeDateToMomentFormat(format))
         : updateDate;
     } else if (updateDate) {
       //using moment package is used to change date as per the format provided in selectDate obj e.g. - MM/dd/yyyy -> 03/12/2024
       const newDate = new Date(updateDate);
-      date = moment(newDate.getTime()).format(
-        changeDateToMomentFormat(data?.format)
-      );
+      date = moment(newDate.getTime()).format(changeDateToMomentFormat(format));
+    } else if (isNewDate) {
+      //using moment package is used to change date as per the format provided in selectDate obj e.g. - MM/dd/yyyy -> 03/12/2024
+      const newDate = new Date();
+      date = moment(newDate.getTime()).format(changeDateToMomentFormat(format));
     }
-    setSelectDate({ date: date, format: data?.format });
+    setSelectDate({ date: date, format: format });
     return date;
   };
   const saveDateSetting = (data) => {
@@ -123,8 +123,15 @@ function Placeholder(props) {
   };
   //function to save date and format on local array onchange date and onclick format
   const handleSaveDate = (data, isDateChange) => {
-    const date = isToday ? "today" : handleGetFormatDate(data, isDateChange);
+    const date =
+      props.isPlaceholder && isToday
+        ? "today"
+        : handleGetFormatDate(data, isDateChange);
     //`onChangeInput` is used to save data related to date in a placeholder field
+    const format =
+      data?.format ||
+      selectDate?.format ||
+      props.pos?.options?.validation?.format;
     onChangeInput(
       date,
       props.pos,
@@ -133,13 +140,12 @@ function Placeholder(props) {
       props.setXyPosition,
       props.data && props.data.Id,
       false,
-      data?.format,
+      format,
       props.fontSize || props.pos?.options?.fontSize || 12,
       props.fontColor || props.pos?.options?.fontColor || "black",
       formdata,
     );
   };
-
   //Date-picker- accept date - Thu Dec 30 2025 00:00:00 GMT+0530 (India Standard Time)
   //if date have in this format - "30/12/2025"
   //then first need to be convert in this format - Tue Dec 30 2025 00:00:00 GMT+0530 (India Standard Time)
@@ -150,7 +156,7 @@ function Placeholder(props) {
   //function change format array list with selected date and format
   const changeDateFormat = () => {
     const updateDate = [];
-    dateFormatArr.map((data) => {
+    dateFormat.map((data) => {
       let date = selectDate?.date || new Date();
       const isString = typeof date === "string";
       if (selectDate.format === "dd-MM-yyyy" && isString) {
@@ -174,7 +180,7 @@ function Placeholder(props) {
   };
 
   useEffect(() => {
-    if (props.isPlaceholder || props.isSignYourself || props.isSelfSign) {
+    if (props.isPlaceholder || isSelfSign) {
       selectDate && changeDateFormat();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -221,7 +227,7 @@ function Placeholder(props) {
         if (props?.currWidgetsDetails?.key === props.pos?.key) {
           props.handleLinkUser(props.data.Id);
         }
-        props.setUniqueId(props.data.Id);
+        props.setUniqueId && props.setUniqueId(props.data.Id);
         const checkIndex = props.xyPosition.findIndex(
           (data) => data.Id === props.data.Id
         );
@@ -244,10 +250,7 @@ function Placeholder(props) {
       props?.setIsCheckbox(true);
     }
     // cells widget settings in sign yourself flow
-    else if (
-      props.pos.type === cellsWidget &&
-      (props.isSignYourself || props.isSelfSign)
-    ) {
+    else if (props.pos.type === cellsWidget && isSelfSign) {
       props.handleCellSettingModal && props.handleCellSettingModal();
     }
     //condition to handle setting icon for signyour-self flow for all type text widgets
@@ -260,7 +263,7 @@ function Placeholder(props) {
         "job title",
         "email"
       ].includes(props.pos.type) &&
-      (props.isSignYourself || props.isSelfSign)
+      isSelfSign
     ) {
       props.handleTextSettingModal(true);
     }
@@ -373,8 +376,7 @@ function Placeholder(props) {
                 "job title",
                 "email",
                 ...isSettingForCells
-              ].includes(props.pos.type) &&
-              (props.isSignYourself || props.isSelfSign) ? (
+              ].includes(props.pos.type) && isSelfSign ? (
                 <i
                   onPointerDown={(e) => {
                     e.stopPropagation();
@@ -496,6 +498,7 @@ function Placeholder(props) {
             className="fa-light fa-circle-xmark icon text-[#188ae2] -right-[8px] -top-[18px] "
             onClick={(e) => {
               e.stopPropagation();
+              showGuidelines(false);
               //condition for template and placeholder flow
               if (props.data) {
                 props.handleDeleteWidget(props.pos.key, props.data.Id);
@@ -508,6 +511,7 @@ function Placeholder(props) {
             //for mobile and tablet touch event
             onTouchEnd={(e) => {
               e.stopPropagation();
+              showGuidelines(false);
               //condition for template and placeholder flow
               if (props.data) {
                 props.handleDeleteWidget(props.pos.key, props.data?.Id);
@@ -618,6 +622,7 @@ function Placeholder(props) {
       return false;
     }
   };
+
   const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (
     <div
       className="border-gray-400 rounded-[50px] border-[1px] px-3  text-xs py-2 focus:outline-none hover:border-base-content "
@@ -625,10 +630,11 @@ function Placeholder(props) {
       ref={ref}
     >
       {value}
-      <i className={`${value ? "ml-[5px]" : ""} fa-light fa-calendar `}></i>
+      <i className={`${value ? "ml-[5px]" : "w-20"} fa-light fa-calendar `}></i>
     </div>
   ));
   ExampleCustomInput.displayName = "ExampleCustomInput";
+
   const handleChangeFormat = (e) => {
     const selectedIndex = e.target.value;
     e.stopPropagation();
@@ -642,6 +648,17 @@ function Placeholder(props) {
         format: dateFormatList[selectedIndex]?.format
       }));
     } else {
+      if (
+        props?.data?.Role === "prefill" &&
+        (formdata.status === "optional" || props.pos?.status === "optional")
+      ) {
+        setSelectDate({
+          date: "",
+          format: dateFormatList[selectedIndex]?.format
+        });
+        return;
+      }
+
       setSelectDate(dateFormatList[selectedIndex]);
     }
   };
@@ -649,6 +666,26 @@ function Placeholder(props) {
     setIsToday(false);
     setSelectDate((prev) => ({ ...prev, date: "" }));
   };
+  const handleCloseDateModal = () => {
+    setIsDateModal(false);
+  };
+  const handleDateStatus = (data) => {
+    if (data === "Optional" && props?.data?.Role === "prefill") {
+      setSelectDate((prev) => ({ ...prev, date: "" }));
+    } else if (
+      props?.data?.Role === "prefill" &&
+      data === "Required" &&
+      props?.pos?.options?.status === "optional"
+    ) {
+      const isNewDate = true;
+      handleGetFormatDate(selectDate, null, isNewDate);
+    }
+    setFormdata({
+      ...formdata,
+      status: data.toLowerCase()
+    });
+  };
+
   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. */}
@@ -839,7 +876,7 @@ function Placeholder(props) {
               top={-11}
               pos={props.pos}
               posHeight={props.posHeight}
-              isSignYourself={props.isSignYourself || props.isSelfSign}
+              isSignYourself={isSelfSign}
             />
           ) : props.data &&
             props.isNeedSign &&
@@ -917,110 +954,147 @@ function Placeholder(props) {
           </div>
         </Rnd>
       )}
-      <ModalUi isOpen={isDateModal} title={t("widget-info")} showClose={false}>
+      <DateWidgetModal isOpen={isDateModal} title={t("widget-info")}>
         <div className="text-base-content h-[100%] p-[20px]">
-          <div className="flex flex-col gap-3">
-            <div className="flex flex-col md:items-center md:flex-row gap-y-3">
-              <span className="capitalize">{t("format")} :</span>
-              <select
-                className="op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs md:ml-4"
-                defaultValue={""}
-                onChange={(e) => handleChangeFormat(e)}
-              >
-                <option value="" disabled>
-                  {t("select-date-format")}
-                </option>
-                {dateFormatList.map((data, ind) => {
-                  return (
-                    <option className="text-[13px]" value={ind} key={ind}>
-                      {data?.date ? data?.date : "nodata"}
-                    </option>
-                  );
-                })}
-              </select>
-              <span className="text-xs text-gray-400 ml-1">
-                {selectDate.format}
-              </span>
-            </div>
-            {props?.data?.Role !== "prefill" && props?.isPlaceholder && (
-              <>
-                <div className="flex flex-col md:flex-row md:items-center gap-2">
-                  <span>{t("set-date")} :</span>
-                  <DatePicker
-                    renderCustomHeader={({ date, changeYear, changeMonth }) => (
-                      <div className="flex justify-start md: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>
-                    )}
-                    closeOnScroll={true}
-                    selected={getDefaultDate(
-                      selectDate?.date,
-                      selectDate?.format
-                    )}
-                    popperPlacement="top-end"
-                    customInput={<ExampleCustomInput />}
-                    onChange={(date) => {
-                      setIsToday(false);
-                      const isDateChange = true;
-                      const dateObj = {
-                        date: date,
-                        format: selectDate.format
-                      };
-                      handleGetFormatDate(dateObj, isDateChange);
-                    }}
-                    dateFormat={
-                      selectDate
-                        ? selectDate?.format
-                        : props.pos?.options?.validation?.format
-                          ? props.pos?.options?.validation?.format
-                          : "MM/dd/yyyy"
-                    }
-                    portalId="root-portal"
-                  />
-                  <label className="flex items-center gap-1 cursor-pointer mb-0">
-                    <input
-                      checked={isToday}
-                      type="checkbox"
-                      className="op-checkbox op-checkbox-xs"
-                      onClick={() => {
-                        setSelectDate((prev) => ({ ...prev, date: "" }));
-                        setIsToday(!isToday);
-                      }}
-                    />
-                    <span className="ml-[2px]">{t("set-today")}</span>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault();
+              saveDateSetting(selectDate);
+            }}
+          >
+            <div className="flex flex-col gap-3">
+              {!isSelfSign && (
+                <div className="mb-[0.75rem] text-[13px] md:w-[60%] w-full">
+                  <label htmlFor="name">
+                    {t("name")}
+                    <span className="text-[red]"> *</span>
                   </label>
-                  <span
-                    onClick={() => handleClearDate()}
-                    className="underline text-blue-500 cursor-pointer ml-2"
-                  >
-                    {t("clear")}
-                  </span>
+                  <input
+                    className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                    name="name"
+                    value={formdata.name}
+                    onChange={(e) =>
+                      setFormdata({
+                        ...formdata,
+                        name: e.target.value
+                      })
+                    }
+                    onInvalid={(e) =>
+                      e.target.setCustomValidity(t("input-required"))
+                    }
+                    onInput={(e) => e.target.setCustomValidity("")}
+                    required
+                  />
                 </div>
+              )}
+              <div className="flex flex-col md:items-center md:flex-row gap-y-3">
+                <span className="capitalize">{t("format")} :</span>
+                <select
+                  className="op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs md:ml-4"
+                  value={selectedFormatIndex >= 0 ? selectedFormatIndex : ""}
+                  onChange={(e) => handleChangeFormat(e)}
+                >
+                  <option value="" disabled>
+                    {t("select-date-format")}
+                  </option>
+                  {dateFormatList.map((data, ind) => {
+                    return (
+                      <option className="text-[13px]" value={ind} key={ind}>
+                        {data?.date ? data?.date : "nodata"}
+                      </option>
+                    );
+                  })}
+                </select>
+                <span className="text-xs text-gray-400 ml-1 uppercase">
+                  {selectDate.format || props.pos?.options?.validation?.format}
+                </span>
+              </div>
+              {props?.data?.Role !== "prefill" && props?.isPlaceholder && (
+                <>
+                  <div className="flex flex-col md:flex-row md:items-center gap-2">
+                    <span>{t("default-date")} :</span>
+                    <DatePicker
+                      renderCustomHeader={({
+                        date,
+                        changeYear,
+                        changeMonth
+                      }) => (
+                        <div className="flex justify-start md: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>
+                      )}
+                      closeOnScroll={true}
+                      selected={getDefaultDate(
+                        selectDate?.date,
+                        selectDate?.format
+                      )}
+                      popperPlacement="top-end"
+                      customInput={<ExampleCustomInput />}
+                      onChange={(date) => {
+                        setIsToday(false);
+                        const isDateChange = true;
+                        const dateObj = {
+                          date: date,
+                          format: selectDate.format
+                        };
+                        handleGetFormatDate(dateObj, isDateChange);
+                      }}
+                      dateFormat={
+                        selectDate
+                          ? selectDate?.format
+                          : props.pos?.options?.validation?.format
+                            ? props.pos?.options?.validation?.format
+                            : "MM/dd/yyyy"
+                      }
+                      portalId="root-portal"
+                    />
+                    <label className="flex items-center gap-1 cursor-pointer mb-0">
+                      <input
+                        checked={isToday}
+                        type="checkbox"
+                        className="op-checkbox op-checkbox-xs"
+                        onClick={() => {
+                          setSelectDate((prev) => ({ ...prev, date: "" }));
+                          setIsToday(!isToday);
+                        }}
+                      />
+                      <span className="ml-[2px]">{t("set-today")}</span>
+                    </label>
+                    <span
+                      onClick={() => handleClearDate()}
+                      className="underline text-blue-500 cursor-pointer ml-2"
+                    >
+                      {t("clear")}
+                    </span>
+                  </div>
+                </>
+              )}
+              {!isSelfSign && (
                 <div className="flex flex-row items-center gap-[10px]">
                   {statusArr.map((data, ind) => {
                     return (
@@ -1032,12 +1106,7 @@ function Placeholder(props) {
                           className="mr-[2px] op-radio op-radio-xs"
                           type="radio"
                           name="status"
-                          onChange={() =>
-                            setFormdata({
-                              ...formdata,
-                              status: data.toLowerCase()
-                            })
-                          }
+                          onChange={() => handleDateStatus(data)}
                           checked={
                             formdata.status.toLowerCase() === data.toLowerCase()
                           }
@@ -1049,80 +1118,92 @@ function Placeholder(props) {
                     );
                   })}
                 </div>
-              </>
-            )}
-
-            <div className="flex flex-col md:flex-row gap-y-2 md:gap-y-0 gap-x-2">
-              <div className="flex flex-row items-center">
-                <span className="capitalize">{t("font-size")} :</span>
-                <select
-                  className="ml-[3px] md:ml:[7px] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
-                  value={
-                    props.fontSize || clickonWidget.options?.fontSize || 12
-                  }
-                  onChange={(e) => props.setFontSize(parseInt(e.target.value))}
-                >
-                  {fontsizeArr.map((size, ind) => (
-                    <option className="text-[13px]" value={size} key={ind}>
-                      {size}
-                    </option>
-                  ))}
-                </select>
-              </div>
-              <div className="flex flex-row gap-1 items-center">
-                <span className="capitalize">{t("color")} :</span>
-                <select
-                  value={
-                    props.fontColor ||
-                    clickonWidget.options?.fontColor ||
-                    "black"
-                  }
-                  onChange={(e) => props.setFontColor(e.target.value)}
-                  className="ml-[4px] md:ml[7px] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
-                >
-                  {fontColorArr.map((color, ind) => (
-                    <option value={color} key={ind}>
-                      {t(`color-type.${color}`)}
-                    </option>
-                  ))}
-                </select>
-                <span
-                  style={{
-                    background:
-                      props.fontColor || props.pos.options?.fontColor || "black"
-                  }}
-                  className="w-5 h-[19px] ml-1"
-                ></span>
+              )}
+              <div className="flex flex-col md:flex-row gap-y-2 md:gap-y-0 gap-x-2">
+                <div className="flex flex-row items-center">
+                  <span className="capitalize">{t("font-size")} :</span>
+                  <select
+                    className="ml-[3px] md:ml:[7px] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
+                    value={
+                      props.fontSize || clickonWidget.options?.fontSize || 12
+                    }
+                    onChange={(e) =>
+                      props.setFontSize(parseInt(e.target.value))
+                    }
+                  >
+                    {fontsizeArr.map((size, ind) => (
+                      <option className="text-[13px]" value={size} key={ind}>
+                        {size}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+                <div className="flex flex-row gap-1 items-center">
+                  <span className="capitalize">{t("color")} :</span>
+                  <select
+                    value={
+                      props.fontColor ||
+                      clickonWidget.options?.fontColor ||
+                      "black"
+                    }
+                    onChange={(e) => props.setFontColor(e.target.value)}
+                    className="ml-[4px] md:ml[7px] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
+                  >
+                    {fontColorArr.map((color, ind) => (
+                      <option value={color} key={ind}>
+                        {t(`color-type.${color}`)}
+                      </option>
+                    ))}
+                  </select>
+                  <span
+                    style={{
+                      background:
+                        props.fontColor ||
+                        props.pos.options?.fontColor ||
+                        "black"
+                    }}
+                    className="w-5 h-[19px] ml-1"
+                  ></span>
+                </div>
               </div>
+              {props?.isPlaceholder && props?.data?.Role !== "prefill" && (
+                <div className="flex items-center gap-1 w-max">
+                  <input
+                    name="isReadOnly"
+                    id="isReadOnly"
+                    type="checkbox"
+                    checked={formdata?.isReadOnly}
+                    className="op-checkbox op-checkbox-xs"
+                    onChange={() =>
+                      setFormdata({
+                        ...formdata,
+                        isReadOnly: !formdata?.isReadOnly
+                      })
+                    }
+                  />
+                  <label
+                    htmlFor="isReadOnly"
+                    className="capitalize ml-[2px] mb-0 cursor-pointer"
+                  >
+                    {t("read-only")}
+                  </label>
+                </div>
+              )}
             </div>
-            {props?.isPlaceholder && props?.data?.Role !== "prefill" && (
-              <label className="flex items-center gap-1 cursor-pointer">
-                <input
-                  name="isReadOnly"
-                  type="checkbox"
-                  checked={formdata?.isReadOnly}
-                  className="op-checkbox op-checkbox-xs"
-                  onChange={() =>
-                    setFormdata({
-                      ...formdata,
-                      isReadOnly: !formdata?.isReadOnly
-                    })
-                  }
-                />
-                <span className="capitalize ml-[2px]">{t("read-only")}</span>
-              </label>
-            )}
-          </div>
-          <div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
-          <button
-            type="button"
-            className="op-btn op-btn-primary"
-            onClick={() => saveDateSetting(selectDate)}
-          >
-            {t("save")}
-          </button>
+            <div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
+            <button className="op-btn op-btn-primary" type="submit">
+              {t("save")}
+            </button>
+            <button
+              type="button"
+              className="op-btn op-btn-ghost text-base-content ml-1"
+              onClick={() => handleCloseDateModal()}
+            >
+              {t("cancel")}
+            </button>
+          </form>
         </div>
-      </ModalUi>
+      </DateWidgetModal>
     </>
   );
 }

apps/OpenSign/src/components/pdf/PlaceholderCopy.jsx

@@ -1,11 +1,16 @@
 import { useState } from "react";
 import ModalUi from "../../primitives/ModalUi";
-import { handleCopyNextToWidget, randomId } from "../../constant/Utils";
+import {
+  drawWidget,
+  handleCopyNextToWidget,
+  randomId
+} from "../../constant/Utils";
 import { useTranslation } from "react-i18next";
 import { setPrefillImg } from "../../redux/reducers/widgetSlice";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 
 function PlaceholderCopy(props) {
+  const { prefillImg } = useSelector((state) => state.widget);
   const { t } = useTranslation();
   const dispatch = useDispatch();
   const copyType = [
@@ -151,12 +156,17 @@ function PlaceholderCopy(props) {
         if (
           filterSignerPosition[0]?.Role === "prefill" &&
           currentPlaceholder?.options?.response &&
-          currentPlaceholder?.type === "image"
+          (currentPlaceholder?.type === "image" ||
+            currentPlaceholder?.type === drawWidget)
         ) {
+          const getPrefillImg = prefillImg?.find(
+            (x) => x.id === currentPlaceholder?.key
+          );
+          const base64Img = getPrefillImg?.base64;
           dispatch(
             setPrefillImg({
               id: newId,
-              base64: currentPlaceholder?.options?.response
+              base64: base64Img
             })
           );
         }
@@ -254,15 +264,20 @@ function PlaceholderCopy(props) {
           props.setXyPosition,
           props?.Id
         );
-          if (
+        if (
           filterSignerPosition[0]?.Role === "prefill" &&
           currentXYposition?.options?.response &&
-          currentXYposition?.type === "image"
+          (currentXYposition?.type === "image" ||
+            currentXYposition?.type === drawWidget)
         ) {
+          const getPrefillImg = prefillImg?.find(
+            (x) => x.id === currentXYposition?.key
+          );
+          const base64Img = getPrefillImg?.base64;
           dispatch(
             setPrefillImg({
               id: newId,
-              base64: currentXYposition?.options?.response
+              base64: base64Img
             })
           );
         }

apps/OpenSign/src/components/pdf/PlaceholderType.jsx

@@ -15,7 +15,8 @@ import {
   months,
   years,
   selectCheckbox,
-  isBase64
+  isBase64,
+  drawWidget
 } from "../../constant/Utils";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
@@ -98,14 +99,8 @@ function PlaceholderType(props) {
   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;
-    }
+    const defaultData = widgetValue || props.pos.options?.defaultValue;
+    return defaultData === data;
   };
   //function is used to get prefill image's signedUrl after expired
   useEffect(() => {
@@ -463,7 +458,7 @@ function PlaceholderType(props) {
       ) : (
         <div
           style={textWidgetStyle}
-          className="select-none-cls overflow-hidden"
+          className="select-none-cls overflow-hidden uppercase"
         >
           <span>
             {props?.selectDate?.format ||
@@ -581,6 +576,34 @@ function PlaceholderType(props) {
           className="w-full resize-none overflow-hidden text-base-content item-center outline-none"
         />
       );
+    case drawWidget:
+      return prefillImgLoad[props.pos?.key] ? (
+        <div className="absolute w-full h-full inset-0 flex justify-center items-center bg-white/30 z-50">
+          <Loader />
+        </div>
+      ) : widgetValue ? (
+        <img
+          alt="signature"
+          draggable="false"
+          src={widgetValue}
+          className={`${props.pos.signatureType !== "type" ? "object-contain" : ""} 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"
+            >
+              {formatWidgetName()}
+            </div>
+          )}
+        </div>
+      );
     default:
       return props.pos.SignUrl ? (
         <div className="pointer-events-none">

apps/OpenSign/src/components/pdf/PrefillWidgetsModal.jsx

@@ -1,4 +1,4 @@
-import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import React, { forwardRef, useEffect, useMemo, useRef, useState } from "react";
 import ModalUi from "../../primitives/ModalUi";
 import {
   getMonth,
@@ -10,6 +10,8 @@ import {
   changeDateToMomentFormat,
   convertBase64ToFile,
   generatePdfName,
+  drawWidget,
+  getBase64MimeType,
   isBase64
 } from "../../constant/Utils";
 import DatePicker from "react-datepicker";
@@ -27,9 +29,13 @@ import {
   setPrefillImg
 } from "../../redux/reducers/widgetSlice";
 import * as utils from "../../utils";
+import Draw from "./tab/Draw";
+import PenColorComponent from "./tab/PenColorComponent";
 
 const widgetTitle = "font-medium";
-
+const widgetLabelCss = (isRequired = false) => {
+  return `${isRequired ? "after:content-['_*'] after:text-red-500" : ""} block text-xs font-semibold`;
+};
 const ShowTextWidget = ({ position, handleWidgetDetails }) => {
   const inputRef = useRef(null);
   const [inputValue, setInputValue] = useState(position.options.response || "");
@@ -47,7 +53,6 @@ const ShowTextWidget = ({ position, handleWidgetDetails }) => {
     />
   );
 };
-
 const ImageComponent = (props) => {
   const { t } = useTranslation();
   const prefillImg = useSelector((state) => state.widget.prefillImg);
@@ -66,7 +71,11 @@ const ImageComponent = (props) => {
 
   return (
     <>
-      <span className={widgetTitle}>{props?.position.options?.name}</span>
+      <span
+        className={`${widgetLabelCss(props?.position?.options?.status === "required")} ${widgetTitle}`}
+      >
+        {props?.position.options?.name}
+      </span>
       {imgUrl ? (
         <>
           <div className="cursor-pointer op-card border-[1px] border-gray-400 flex flex-col w-full h-full justify-center items-center ">
@@ -111,6 +120,8 @@ const ImageComponent = (props) => {
 function PrefillWidgetModal(props) {
   const { t } = useTranslation();
   const dispatch = useDispatch();
+  const canvasRefs = useRef({});
+  const [penColor, setPenColor] = useState("blue");
   // Track already loaded image keys so they don't increment multiple times
   const loadedSet = useRef(new Set());
   const initializedRef = useRef(false); // prevent rerun on state updates
@@ -162,12 +173,12 @@ function PrefillWidgetModal(props) {
       setLoading(false);
     }
   }, [props?.isPrefillModal]);
-
   useEffect(() => {
     //function is used to save all image base64 in redux state to display prefill images
     const savePrefillImg = async () => {
       const prefillImg = await utils?.savePrefillImg(props.xyPosition);
       if (Array.isArray(prefillImg)) {
+        setLoading(true);
         prefillImg.forEach((img) => dispatch(setPrefillImg(img)));
       }
       setLoading(false);
@@ -202,25 +213,7 @@ function PrefillWidgetModal(props) {
       }
     }
   }, [props?.isPrefillModal, uniqueWidget]);
-
-  // The getDatePickerDate function retrieves the date in the correct format supported by the DatePicker.
-  const getDatePickerDate = (selectedDate, format = "dd-MM-yyyy") => {
-    let date;
-    if (format && format === "dd-MM-yyyy") {
-      const [day, month, year] = selectedDate?.split("-");
-      date = new Date(`${year}-${month}-${day}`);
-    } else if (format && format === "dd.MM.yyyy") {
-      const [day, month, year] = selectedDate?.split(".");
-      date = new Date(`${year}.${month}.${day}`);
-    } else if (format && format === "dd/MM/yyyy") {
-      const [day, month, year] = selectedDate?.split("/");
-      date = new Date(`${year}/${month}/${day}`);
-    } else {
-      date = new Date(selectedDate);
-    }
-    return date;
-  };
-
+ 
   const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (
     <div
       style={{ fontFamily: "Arial, sans-serif" }}
@@ -236,8 +229,8 @@ function PrefillWidgetModal(props) {
 
   const handleDate = (position) => {
     // The getDatePickerDate function retrieves the date in the correct format supported by the DatePicker.
-    const getDate = getDatePickerDate(
-      position?.options.response || new Date(),
+    const getDate = utils.getDatePickerDate(
+      position?.options.response,
       position?.options?.validation?.format
     );
     return getDate;
@@ -261,14 +254,15 @@ function PrefillWidgetModal(props) {
     handleWidgetDetails(position, newDate);
   };
 
-  const handleSavePrefillImg = async (widgetDetails) => {
+  const handleSavePrefillImg = async (base64) => {
     setLoading(true);
     try {
       const imageName = generatePdfName(16);
+      const imgType = image?.imgType || getBase64MimeType(base64);
       const imageUrl = await convertBase64ToFile(
         imageName,
-        image.src,
-        image.imgType
+        base64 || image.src,
+        imgType
       );
       if (imageUrl) {
         return imageUrl;
@@ -284,7 +278,7 @@ function PrefillWidgetModal(props) {
     const getPlaceholder = getPrefill?.placeHolder;
     let imgUrl;
     if (widgetDetails?.type === "image") {
-      imgUrl = await handleSavePrefillImg(widgetDetails);
+      imgUrl = await handleSavePrefillImg(response);
     }
     const updatedData = getPlaceholder.map((page) => ({
       ...page,
@@ -382,7 +376,7 @@ function PrefillWidgetModal(props) {
         if (item.options.name === position.options.name) {
           return {
             ...item,
-            SignUrl: "",
+            ...(item.SignUrl !== undefined && { SignUrl: "" }),
             options: {
               ...position.options,
               response: ""
@@ -412,12 +406,33 @@ function PrefillWidgetModal(props) {
     }
     setLoading(false);
   };
+  //function for set signature url
+  const handleSignatureChange = (drawImage, position) => {
+    handleWidgetDetails(position, drawImage);
+  };
+  const getCanvasRef = (widgetId) => {
+    if (!canvasRefs.current[widgetId]) {
+      canvasRefs.current[widgetId] = React.createRef();
+    }
+    return canvasRefs.current[widgetId];
+  };
+  const clearCanvasById = (widgetId) => {
+    const canvasRef = canvasRefs.current?.[widgetId];
+
+    if (canvasRef?.current) {
+      canvasRef.current.clear();
+    }
+  };
   const handleWidgetType = (position, id) => {
     switch (position?.type) {
       case "checkbox":
         return (
           <>
-            <span className={widgetTitle}>{position.options?.name}</span>
+            <span
+              className={`${widgetLabelCss(position?.options?.status === "required")} ${widgetTitle}`}
+            >
+              {position.options?.name}
+            </span>
             <div className="flex flex-col gap-y-1">
               {position.options?.values?.map((data, ind) => (
                 <div
@@ -447,7 +462,11 @@ function PrefillWidgetModal(props) {
       case textWidget:
         return (
           <>
-            <span className={widgetTitle}>{position.options?.name}</span>
+            <span
+              className={`${widgetLabelCss(position?.options?.status === "required")} ${widgetTitle}`}
+            >
+              {position.options?.name}
+            </span>
             <ShowTextWidget
               position={position}
               handleWidgetDetails={handleWidgetDetails}
@@ -457,7 +476,11 @@ function PrefillWidgetModal(props) {
       case "dropdown":
         return (
           <>
-            <span className={widgetTitle}>{position.options?.name}</span>
+            <span
+              className={`${widgetLabelCss(position?.options?.status === "required")} ${widgetTitle}`}
+            >
+              {position.options?.name}
+            </span>
             <select
               className="op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-base-content w-full"
               id="myDropdown"
@@ -481,7 +504,11 @@ function PrefillWidgetModal(props) {
       case "date":
         return (
           <>
-            <span className={widgetTitle}>{position.options?.name}</span>
+            <span
+              className={`${widgetLabelCss(position?.options?.status === "required")} ${widgetTitle}`}
+            >
+              {position.options?.name}
+            </span>
             <DatePicker
               portalId="datepicker-portal-root"
               renderCustomHeader={({ date, changeYear, changeMonth }) => (
@@ -533,7 +560,11 @@ function PrefillWidgetModal(props) {
       case radioButtonWidget:
         return (
           <>
-            <span className={widgetTitle}>{position.options?.name}</span>
+            <span
+              className={`${widgetLabelCss(position?.options?.status === "required")} ${widgetTitle}`}
+            >
+              {position.options?.name}
+            </span>
             <div className="flex flex-col gap-y-1">
               {position.options?.values.map((data, ind) => (
                 <div
@@ -558,6 +589,38 @@ function PrefillWidgetModal(props) {
             </div>
           </>
         );
+      case drawWidget:
+        return (
+          <div>
+            <span
+              className={`${widgetLabelCss(position?.options?.status === "required")} ${widgetTitle}`}
+            >
+              {position.options?.name}
+            </span>
+            <Draw
+              penColor={penColor}
+              canvasRef={getCanvasRef(position.key)}
+              currWidgetsDetails={position}
+              handleSignatureChange={handleSignatureChange}
+              prefillCls={"prefillCanvas"}
+            />
+            <div className="flex flex-row justify-between mt-[10px]">
+              <PenColorComponent
+                penColor={penColor}
+                setPenColor={setPenColor}
+              />
+              <span
+                onClick={() => {
+                  clearCanvasById(position?.key);
+                  handleClearImage(position);
+                }}
+                className="flex justify-start text-blue-500 underline cursor-pointer"
+              >
+                {t("clear")}
+              </span>
+            </div>
+          </div>
+        );
       default:
         return position?.SignUrl ? (
           <div className="pointer-events-none">
@@ -577,6 +640,66 @@ function PrefillWidgetModal(props) {
   };
 
   const handleEmbedPrefill = async (item) => {
+    //checking is there any draw widget response have base64 url then generate that base64 to url and save it
+    const prefillWidgets = props.xyPosition?.find((x) => x.Role === "prefill");
+    let updatedXyPosition = [];
+    if (prefillWidgets) {
+      const isDrawWidget = (prefillWidgets.placeHolder ?? []).some((ph) =>
+        (ph?.pos ?? []).some((p) => p?.type === drawWidget)
+      );
+      if (isDrawWidget) {
+        const getPrefill = props.xyPosition.find((x) => x?.Role === "prefill");
+        const getPlaceholder = getPrefill?.placeHolder ?? [];
+        const updatedData = await Promise.all(
+          getPlaceholder.map(async (page) => ({
+            ...page,
+            pos: await Promise.all(
+              page.pos.map(async (item) => {
+                if (item?.type === drawWidget) {
+                  const widgetResponse = item?.options?.response;
+
+                  // Skip if no response
+                  if (!widgetResponse) return item;
+
+                  // If already URL, do not re-upload
+                  if (
+                    typeof widgetResponse === "string" &&
+                    widgetResponse.startsWith("http")
+                  ) {
+                    return item;
+                  }
+
+                  // Convert THIS widget's base64 → URL
+                  const drawUrl = await handleSavePrefillImg(widgetResponse);
+                  return {
+                    ...item,
+                    options: {
+                      ...item.options,
+                      response: drawUrl
+                    }
+                  };
+                }
+
+                return item;
+              })
+            )
+          }))
+        );
+
+        updatedXyPosition = props.xyPosition.map((obj) => {
+          if (obj.Role === "prefill") {
+            return {
+              ...obj,
+              placeHolder: updatedData
+            };
+          }
+          return obj;
+        });
+
+        props.setXyPosition(updatedXyPosition);
+      }
+    }
+
       await props.handleCreateDocument();
   };
   //`loadOptions` function to use show all list of signer in dropdown
@@ -584,9 +707,9 @@ function PrefillWidgetModal(props) {
     try {
       const baseURL = localStorage.getItem("baseUrl");
       const url = `${baseURL}functions/getsigners`;
-      const token = {
-        "X-Parse-Session-Token": localStorage.getItem("accesstoken")
-      };
+
+      const token =
+            { "X-Parse-Session-Token": localStorage.getItem("accesstoken") };
       const headers = {
         "Content-Type": "application/json",
         "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
@@ -664,7 +787,7 @@ function PrefillWidgetModal(props) {
                     {t("recipients")}
                   </h1>
                 )}
-                <div className="py-3 px-[10px] op-card border-[1px] border-gray-400 md:mx-3 text-base-content flex flex-col relative">
+                <div className="py-3 px-[10px] op-card border-[1px] border-gray-400 text-base-content flex flex-col relative">
                   {props.forms?.map((field, id) => {
                     return (
                       <div className="flex flex-col" key={field?.value}>

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

@@ -48,7 +48,7 @@ function RenderAllPdfPage(props) {
     };
 
     // Use setTimeout to wait for the transition to complete
-    const timer = setTimeout(updateSize, 100); // match the transition duration
+    const timer = setTimeout(updateSize, 150); // match the transition duration
 
     return () => clearTimeout(timer);
   }, [isSidebar, pageContainer, props?.containerWH]);

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

@@ -29,12 +29,15 @@ import WidgetsDragPreview from "./WidgetsDragPreview";
 function RenderPdf(props) {
   const { t } = useTranslation();
   const dispatch = useDispatch();
+  const { guideline, showGuidelines } = useGuidelinesContext();
   const [, drop] = useDrop({
     accept: "BOX",
-    drop: (item, monitor) => props?.addPositionOfSignature(item, monitor)
+    drop: (item, monitor) => {
+      props?.addPositionOfSignature(item, monitor);
+      showGuidelines(false);
+    }
   });
   const [scaledHeight, setScaledHeight] = useState();
-  const { guideline, showGuidelines } = useGuidelinesContext();
   //check isGuestSigner is present in local if yes than handle login flow header in mobile view
   const isGuestSigner = localStorage.getItem("isGuestSigner");
   const scrollTriggerId = useSelector((state) => state.widget.scrollTriggerId);
@@ -511,9 +514,10 @@ function RenderPdf(props) {
               props.setPdfLoad(true);
               props.pageDetails(pdf);
             }}
-            onClick={() =>
-              props.setCurrWidgetsDetails && props.setCurrWidgetsDetails({})
-            }
+            onClick={() => {
+              props.setCurrWidgetsDetails && props.setCurrWidgetsDetails({});
+              showGuidelines(false);
+            }}
             file={pdfDataBase64}
           >
             <Page

apps/OpenSign/src/components/pdf/SelectLanguage.jsx

@@ -10,7 +10,8 @@ function SelectLanguage(props) {
     { value: "fr", text: "Français" }, //french
     { value: "it", text: "Italiano" }, //italian
     { value: "de", text: "Deutsch" }, //german
-    { value: "hi", text: "हिन्दी" } //hindi
+    { value: "hi", text: "हिन्दी" }, //hindi
+    { value: "kr", text: "한국어" } //korean
   ];
   const defaultLanguage = i18next.language || "en";
   const [lang, setLang] = useState(defaultLanguage);

apps/OpenSign/src/components/pdf/WidgetComponent.jsx

@@ -8,7 +8,8 @@ import {
   textInputWidget,
   cellsWidget,
   textWidget,
-  widgets
+  widgets,
+  drawWidget
 } from "../../constant/Utils";
 import { useTranslation } from "react-i18next";  
 import { useWidgetDrag } from "../../hook/useWidgetDrag";
@@ -34,7 +35,8 @@ function WidgetComponent(props) {
     { id: 13, text: "checkbox" },
     { id: 14, text: "dropdown" },
     { id: 15, text: radioButtonWidget },
-    { id: 16, text: "image" }
+    { id: 16, text: "image" },
+    { id: 17, text: drawWidget }
   ];
 
   // Create all drag refs in one go
@@ -65,7 +67,8 @@ function WidgetComponent(props) {
         textInputWidget,
         "date",
         "image",
-        "checkbox"
+        "checkbox",
+        drawWidget
       ].includes(data.type)
   );
   // allow only (signature, stamp, initials, text, cells) widget when isAllowModification true and user does not have session token
@@ -81,18 +84,19 @@ function WidgetComponent(props) {
         "name",
         "email",
         "job title",
-        "company"
+        "company",
+        drawWidget
       ].includes(data.type)
   );
   const selfSignWidgets = widgetList.filter(
     (data) =>
-      !["dropdown", radioButtonWidget, textInputWidget].includes(data.type)
+      !["dropdown", radioButtonWidget, textInputWidget,drawWidget].includes(data.type)
   );
   //if user select prefill role then allow only date,image,text,checkbox,radio,dropdownAdd commentMore actions
   //dropdown widget should only be show in template flow
   const prefillAllowWidgets = widgetList.filter((data) =>
     (props.isPrefillDropdown ? ["dropdown"] : [])
-      .concat([radioButtonWidget, textWidget, "date", "image", "checkbox"])
+      .concat([radioButtonWidget, textWidget, "date", "image", "checkbox",drawWidget])
       .includes(data.type)
   );
   //function to show widget on the base of conditionAdd commentMore actions
@@ -108,7 +112,7 @@ function WidgetComponent(props) {
         return unlogedInUserWidgets;
       }
     } else if (props?.roleName !== "prefill") {
-      return widgetList.filter((data) => ![textWidget].includes(data.type));
+      return widgetList.filter((data) => ![textWidget,drawWidget].includes(data.type));
     }
   };
   const handleSelectRecipient = () => {

apps/OpenSign/src/components/pdf/WidgetNameModal.jsx

@@ -309,66 +309,64 @@ const WidgetNameModal = (props) => {
               </div>
             </>
           )}
-        {!props?.isSelfSign &&
-          !isSignOrInitials &&
-          props?.roleName !== "prefill" && (
-            <div className={showFontControls ? "mb-[0.5rem]" : "mb-[0.75rem]"}>
-              <div className="flex flex-row gap-[10px] mb-[0.5rem]">
-                {statusArr.map((data, ind) => {
-                  return (
-                    <div
-                      key={ind}
-                      className="flex flex-row gap-[5px] items-center"
-                    >
-                      <input
-                        className="mr-[2px] op-radio op-radio-xs"
-                        type="radio"
-                        name="status"
-                        onChange={() =>
-                          setFormdata({
-                            ...formdata,
-                            status: data.toLowerCase()
-                          })
-                        }
-                        checked={
-                          formdata.status.toLowerCase() === data.toLowerCase()
-                        }
-                      />
-                      <div className="text-[13px] font-medium">
-                        {t(`widget-status.${data}`)}
-                      </div>
-                    </div>
-                  );
-                })}
-              </div>
-              {[
-                textInputWidget,
-                cellsWidget,
-              ].includes(props.defaultdata?.type) && (
-                <div className="flex items-center">
-                  <input
-                    id="isReadOnly"
-                    name="isReadOnly"
-                    type="checkbox"
-                    checked={formdata.isReadOnly}
-                    className="op-checkbox op-checkbox-xs"
-                    onChange={() =>
-                      setFormdata((prev) => ({
-                        ...formdata,
-                        isReadOnly: !prev.isReadOnly
-                      }))
-                    }
-                  />
-                  <label
-                    className="ml-1.5 mb-0 capitalize text-[13px]"
-                    htmlFor="isreadonly"
+        {!props?.isSelfSign && !isSignOrInitials && (
+          <div className={showFontControls ? "mb-[0.5rem]" : "mb-[0.75rem]"}>
+            <div className="flex flex-row gap-[10px] mb-[0.5rem]">
+              {statusArr.map((data, ind) => {
+                return (
+                  <div
+                    key={ind}
+                    className="flex flex-row gap-[5px] items-center"
                   >
-                    {t("read-only")}
-                  </label>
-                </div>
-              )}
+                    <input
+                      className="mr-[2px] op-radio op-radio-xs"
+                      type="radio"
+                      name="status"
+                      onChange={() =>
+                        setFormdata({
+                          ...formdata,
+                          status: data.toLowerCase()
+                        })
+                      }
+                      checked={
+                        formdata.status.toLowerCase() === data.toLowerCase()
+                      }
+                    />
+                    <div className="text-[13px] font-medium">
+                      {t(`widget-status.${data}`)}
+                    </div>
+                  </div>
+                );
+              })}
             </div>
-          )}
+            {[
+              textInputWidget,
+              cellsWidget,
+            ].includes(props.defaultdata?.type) && (
+              <div className="flex items-center">
+                <input
+                  id="isReadOnly"
+                  name="isReadOnly"
+                  type="checkbox"
+                  checked={formdata.isReadOnly}
+                  className="op-checkbox op-checkbox-xs"
+                  onChange={() =>
+                    setFormdata((prev) => ({
+                      ...formdata,
+                      isReadOnly: !prev.isReadOnly
+                    }))
+                  }
+                />
+                <label
+                  className="ml-1.5 mb-0 capitalize text-[13px]"
+                  htmlFor="isreadonly"
+                >
+                  {t("read-only")}
+                </label>
+              </div>
+            )}
+          </div>
+        )}
         {isSignOrInitials && (
           <div className="mb-[0.75rem]">
             <label htmlFor="signaturetype" className="text-[14px] mb-[0.7rem]">

apps/OpenSign/src/components/pdf/WidgetsValueModal.jsx

@@ -24,12 +24,14 @@ import {
   generatePdfName,
   getDefaultDate,
   getDefaultFormat,
-  getBase64MimeType
+  getBase64MimeType,
+  drawWidget,
+  getBase64FromUrl,
+  clearResponse
 } from "../../constant/Utils";
 import CellsWidget from "./CellsWidget";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
-import SignatureCanvas from "react-signature-canvas";
 import moment from "moment";
 import {
   setSaveSignCheckbox,
@@ -40,6 +42,7 @@ import {
   setScrollTriggerId,
   setPrefillImg,
   setPrefillImgLoad,
+  setSignatureRes,
   setTypedSignFont,
   setMyStamp
 } from "../../redux/reducers/widgetSlice";
@@ -49,7 +52,8 @@ import { emailRegex } from "../../constant/const";
 import RegexParser from "regex-parser";
 import {
   saveToMySign,
-  getInitials
+  getInitials,
+  isValidBase64
 } from "../../utils";
 import Draw from "./tab/Draw";
 import DefaultSignature from "./tab/DefaultSignature";
@@ -72,6 +76,7 @@ const isTabCls = "bg-[#002864] text-white rounded-[15px] px-[10px] py-[4px]";
 function WidgetsValueModal(props) {
   const dispatch = useDispatch();
   const {
+    signatureResponse,
     prefillImg,
     defaultSignImg,
     myInitial,
@@ -94,20 +99,26 @@ function WidgetsValueModal(props) {
     allowCellResize = true,
     penColors
   } = props;
+  const previousWidgetRes = signatureResponse?.find(
+    (item) => item.type === currWidgetsDetails?.type
+  );
   const [penColor, setPenColor] = useState("");
   const [isOptional, setIsOptional] = useState(true);
-  const [isDefaultSign, setIsDefaultSign] = useState(false);
   const [isTab, setIsTab] = useState("");
   const [textWidth, setTextWidth] = useState(0);
   const [textHeight, setTextHeight] = useState(0);
   const [isSignTypes, setIsSignTypes] = useState(true);
-  const [typedSignature, setTypedSignature] = useState("");
+  const [typedSignature, setTypedSignature] = useState(
+    previousWidgetRes?.value || ""
+  );
   const [selectDate, setSelectDate] = useState({});
   const [isLastWidget, setIsLastWidget] = useState(false);
   const [signature, setSignature] = useState();
   const [isImageSelect, setIsImageSelect] = useState(false);
   const [isFinish, setIsFinish] = useState(false);
-  const [fontSelect, setFontSelect] = useState(fontOptions[0].value);
+  const [fontSelect, setFontSelect] = useState(
+    previousWidgetRes?.font || fontOptions[0].value
+  );
   const [isSavedSign, setIsSavedSign] = useState(false);
   const [isAutoSign, setIsAutoSign] = useState(false);
   const [image, setImage] = useState(null);
@@ -159,7 +170,6 @@ function WidgetsValueModal(props) {
   const blockedTab = ["mysignature", "myinitials", "myStamp"];
   const showClearbtn =
     (!blocked.includes(type) && !blockedTab.includes(isTab));
-
   const [cellsValue, setCellsValue] = useState(() => {
     const count = currWidgetsDetails?.options?.cellCount || 5;
     const val =
@@ -231,7 +241,9 @@ function WidgetsValueModal(props) {
       }
     }
     else if (isSignOrInitials) {
-      setIsTab(currWidgetsDetails?.signatureType);
+      if (currWidgetsDetails?.signatureType) {
+        setIsTab(currWidgetsDetails?.signatureType);
+      }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currWidgetsDetails]); // Added currWidgetsDetails to dependency array for reset logic
@@ -298,17 +310,23 @@ function WidgetsValueModal(props) {
       compressedFileSize(file, setImage);
     }
   };
-  const handleSavePrefillImg = async () => {
+  const handleSavePrefillImg = async (drawImg) => {
     setIsLoader(true);
+
     try {
       dispatch(
-        setPrefillImg({ id: currWidgetsDetails?.key, base64: image?.src })
+        setPrefillImg({
+          id: currWidgetsDetails?.key,
+          base64: drawImg || image?.src
+        })
       );
       const imageName = generatePdfName(16);
+
+      const imgType = image?.imgType || getBase64MimeType(drawImg);
       const imageUrl = await convertBase64ToFile(
         imageName,
-        image.src,
-        image.imgType
+        drawImg || image.src,
+        imgType
       );
       setIsLoader(false);
       if (imageUrl) {
@@ -321,8 +339,6 @@ function WidgetsValueModal(props) {
   //function is used to save image,stamp widgets data
   const handleSaveImage = async (signatureType) => {
     const widgetsType = currWidgetsDetails?.type;
-    //`isApplyAll` is used when user edit stamp then updated signature apply all existing drawn signatures
-    const isApplyAll = true;
     let imgUrl;
     const isPrefill = xyPosition.some(
       (x) => x.Id === uniqueId && x?.Role === "prefill"
@@ -353,7 +369,6 @@ function WidgetsValueModal(props) {
             image,
             isAutoSign,
             widgetsType,
-            isApplyAll,
             isPrefill && imgUrl,
             defaultStampImg,
             defaultStampType
@@ -366,6 +381,23 @@ function WidgetsValueModal(props) {
         })
       );
       dispatch(setPrefillImgLoad({}));
+
+      if (
+        ["image", "myStamp", "uploadStamp"].includes(isTab) &&
+        ["signature", "initials", "stamp"].includes(currWidgetsDetails?.type)
+      ) {
+        if (defaultStampImg || image?.src) {
+          dispatch(
+            setSignatureRes({
+              tab: isTab,
+              value: isTab === "myStamp" ? defaultStampImg : image?.src,
+              imageType:
+                isTab === "myStamp" ? defaultStampType : image?.imgType,
+              type: currWidgetsDetails?.type
+            })
+          );
+        }
+      }
     } else {
       const index = props?.xyPosition?.findIndex((object) => {
         return object.pageNumber === pageNumber;
@@ -379,7 +411,6 @@ function WidgetsValueModal(props) {
         false,
         widgetsType,
         null,
-        null,
         defaultStampImg,
         defaultStampType
       );
@@ -411,13 +442,18 @@ function WidgetsValueModal(props) {
         ? myInitial && (await convertJpegToPng(myInitial, "myinitials")) // default initials set through my signature tab
         : await convertJpegToPng(defaultSignImg, "mysign") // default signature set through my signature tab
       : signature; // signature done by user thorugh draw, upload, typed
-    const signatureImg = signUrl;
+    let signatureImg = signUrl;
     let imgWH = { width: width ? width : "", height: height ? height : "" };
     setIsImageSelect(false);
     setImage();
-    // `isApplyAll` is used when user edit signature/initial then updated signature apply all existing drawn signatures
-    const isApplyAll = true;
     if (uniqueId) {
+      const isPrefill = xyPosition.some(
+        (x) => x.Id === uniqueId && x?.Role === "prefill"
+      );
+      if (isPrefill) {
+        dispatch(setPrefillImgLoad({ [currWidgetsDetails?.key]: true }));
+        signatureImg = await handleSavePrefillImg(signatureImg);
+      }
       setXyPosition((prevState) =>
         prevState.map((signer) => {
           if (signer.Id !== uniqueId) return signer;
@@ -436,7 +472,6 @@ function WidgetsValueModal(props) {
             typedSignature,
             isAutoSign,
             widgetsType,
-            isApplyAll,
             fontSelect,
             penColor
           );
@@ -446,6 +481,20 @@ function WidgetsValueModal(props) {
           };
         })
       );
+      dispatch(setPrefillImgLoad({}));
+      if (
+        ["signature", "initials"].includes(currWidgetsDetails?.type) &&
+        (typedSignature || signatureImg)
+      ) {
+        dispatch(
+          setSignatureRes({
+            tab: isTab,
+            value: isTab === "type" ? typedSignature : signatureImg,
+            type: currWidgetsDetails?.type,
+            ...(isTab === "type" && fontSelect && { font: fontSelect })
+          })
+        );
+      }
     } else {
       const index = props?.xyPosition?.findIndex((object) => {
         return object.pageNumber === pageNumber;
@@ -461,7 +510,6 @@ function WidgetsValueModal(props) {
         typedSignature,
         false,
         widgetsType,
-        false,
         fontSelect,
         penColor
       );
@@ -490,35 +538,42 @@ function WidgetsValueModal(props) {
       if (getIndex !== -1) {
         setIsSignTypes(true);
         const tab = signatureTypes?.[getIndex].name;
-        if (currWidgetsDetails?.signatureType === "type") {
-          setIsTab("type");
+        const previousWidgetRes = signatureResponse.find(
+          (item) => item.type === currWidgetsDetails?.type
+        );
+        if (
+          previousWidgetRes?.tab &&
+          previousWidgetRes?.type === currWidgetsDetails?.type
+        ) {
+          setIsTab(previousWidgetRes?.tab || "draw");
+        } else if (currWidgetsDetails?.signatureType) {
+          setIsTab(currWidgetsDetails?.signatureType);
         } else if (tab === "draw") {
           setIsTab("draw");
         } else if (tab === "upload") {
           setIsImageSelect(true);
-          setIsTab("uploadImage");
+          setIsTab("image");
         } else if (tab === "typed") {
           setIsTab("type");
         } else if (tab === "default") {
           if (currWidgetsDetails?.type !== "initials" && defaultSignImg) {
-            setIsDefaultSign(true);
             setIsTab("mysignature");
           } else if (currWidgetsDetails?.type === "initials" && myInitial) {
-            setIsDefaultSign(true);
             setIsTab("myinitials");
           } else {
             setIsTab("draw");
           }
-        } else {
-          setIsTab(true);
         }
       } else {
         setIsSignTypes(false);
       }
     } else if (currWidgetsDetails?.type === "image") {
-      setIsTab("uploadImage");
+      setIsTab("image");
     } else if (currWidgetsDetails?.type === "stamp") {
-      if (currWidgetsDetails?.options?.response) {
+      const previousWidgetRes = signatureResponse.find(
+        (item) => item.type === currWidgetsDetails?.type
+      );
+      if (previousWidgetRes?.tab === "uploadStamp") {
         setIsTab("uploadStamp");
       } else if (myStamp) {
         setIsTab("myStamp");
@@ -535,7 +590,7 @@ function WidgetsValueModal(props) {
   //function for clear signature image
   const handleClear = () => {
     if (
-      ["signature", "initials", "stamp", "image"].includes(
+      ["signature", "initials", "stamp", "image", drawWidget].includes(
         currWidgetsDetails?.type
       )
     ) {
@@ -621,7 +676,10 @@ function WidgetsValueModal(props) {
   };
   const resetToDefault = () => {
     props?.setCurrWidgetsDetails({});
-    if (!image) {
+    if (
+      isTab !== "image" &&
+      !["stamp", "image"].includes(currWidgetsDetails?.type)
+    ) {
       if (isTab === "myStamp" && myStamp) {
         handleSaveImage();
       } else if (isTab === "mysignature") {
@@ -657,17 +715,15 @@ function WidgetsValueModal(props) {
       } else {
         setSignature("");
         canvasRef?.current?.clear();
-        const tab = isTab === "uploadImage" ? "image" : isTab;
+        const tab = isTab;
         handleSaveSignature(tab);
       }
-      // setPenColor("blue");
       handlePenColor();
     } else {
       setSignature("");
       handleSaveImage("image");
     }
     setIsImageSelect(false);
-    setIsDefaultSign(false);
     setImage();
     handleTab();
   };
@@ -702,21 +758,60 @@ function WidgetsValueModal(props) {
     loadFont();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fontSelect]);
-
   useEffect(() => {
-    if (currWidgetsDetails?.options?.response) {
-      let url = currWidgetsDetails?.options?.response;
-      if (isSignOrInitials) {
-        if (isTab === "draw" && currWidgetsDetails?.signatureType === "draw") {
-          setSignature(url);
-          // Load the default signature after the component mounts
-          if (canvasRef.current) {
+    handleWidgetsResponse();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isTab]);
+
+  const handleWidgetsResponse = async () => {
+    //'signatureResponse' is save signature/initials widget response to show on response in signature pad
+    const previousWidgetRes = signatureResponse.find(
+      (item) => item.type === currWidgetsDetails?.type
+    );
+    let url = currWidgetsDetails?.options?.response;
+    if (currWidgetsDetails?.options?.response || previousWidgetRes) {
+      //draw widget
+      if (currWidgetsDetails?.type === drawWidget) {
+        if (canvasRef.current) {
+          const iBase64 = isValidBase64(url);
+          if (iBase64) {
             canvasRef.current.fromDataURL(url);
+          } else {
+            const isAddSuffix = true;
+            const base64Url = await getBase64FromUrl(url, isAddSuffix);
+            canvasRef.current.fromDataURL(base64Url);
           }
-        } else if (isTab === "uploadImage" && currWidgetsDetails?.ImageType) {
+        }
+      }
+      //signature and initial widgets
+      if (isSignOrInitials) {
+        if (isTab === "draw" || isTab === "image") {
+          if (
+            (previousWidgetRes?.tab === "draw" &&
+              currWidgetsDetails?.signatureType !== "draw" &&
+              previousWidgetRes?.type === currWidgetsDetails?.type) ||
+            currWidgetsDetails?.signatureType === "draw"
+          ) {
+            url = url || previousWidgetRes?.value;
+            setSignature(url);
+            canvasRef.current && canvasRef.current.fromDataURL(url);
+            return;
+          } else if (
+            previousWidgetRes?.tab === "image" &&
+            previousWidgetRes?.type === currWidgetsDetails?.type
+          ) {
+            setImage({
+              src: previousWidgetRes?.value,
+              imgType: previousWidgetRes?.imageType
+            });
+          }
+        }
+        if (isTab === "image" && currWidgetsDetails?.ImageType) {
           setImage({ imgType: currWidgetsDetails?.ImageType, src: url });
         }
-      } else if (isImageOrStamp) {
+      }
+      //image and stamp widget
+      if (isImageOrStamp) {
         const isPrefill = xyPosition.some(
           (x) => x.Id === uniqueId && x?.Role === "prefill"
         );
@@ -726,9 +821,20 @@ function WidgetsValueModal(props) {
           );
           url = getPrefillImg?.base64;
         }
-        if (isTab === "myStamp") {
+        if (
+          ["myStamp", "uploadStamp"].includes(previousWidgetRes?.tab) &&
+          previousWidgetRes?.type === currWidgetsDetails?.type
+        ) {
+          setImage({
+            imgType: previousWidgetRes?.ImageType,
+            src: previousWidgetRes?.value
+          });
+        } else if (isTab === "myStamp") {
           setImage(null);
-        } else {
+        } else if (
+          currWidgetsDetails?.options?.response &&
+          currWidgetsDetails?.type === "image"
+        ) {
           setImage({ imgType: currWidgetsDetails?.ImageType, src: url });
         }
       }
@@ -756,9 +862,7 @@ function WidgetsValueModal(props) {
       setTypedSignature(signatureValue || userName || "");
       convertToImg(fontSelect, signatureValue || userName || "");
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isTab]);
-
+  };
   // function for convert input text value in image
   const convertToImg = async (fontStyle, text, color) => {
     const maxWidth = currWidgetsDetails?.Width;
@@ -767,7 +871,7 @@ function WidgetsValueModal(props) {
     const fontFamily = fontStyle || typedSignFont || fontSelect || "Fasthand";
     const fillColor = color || penColor;
     const dataUrl = convertTextToImg(fontFamily, text, fillColor, widgetDims);
-    setSignature(dataUrl);
+    // setSignature(dataUrl);
     setTextWidth(maxWidth);
     setTextHeight(maxHeight);
     dispatch(setTypedSignFont(fontFamily));
@@ -1000,7 +1104,6 @@ function WidgetsValueModal(props) {
     handleInputBlur();
   };
 
-
   //function is used to show widgets on modal according to selected widget type checkbox/date/radio/drodown/textbox/signature/image
   const getWidgetType = (type) => {
     const isStampOrImage =
@@ -1094,10 +1197,10 @@ function WidgetsValueModal(props) {
       },
       //Upload Image tab
       {
-        id: "uploadImage",
+        id: "image",
         label: t("upload-image"),
         onClick: () => {
-          setIsTab("uploadImage");
+          setIsTab("image");
           setIsImageSelect(true);
         },
         show:
@@ -1148,7 +1251,12 @@ function WidgetsValueModal(props) {
       {
         id: "type",
         label: t("type"),
-        onClick: () => setIsTab("type"),
+        onClick: () => {
+          setIsTab("type");
+          if (previousWidgetRes?.tab !== "type") {
+            setTypedSignature("");
+          }
+        },
         show: isTabEnabled("typed") && !isStampOrImage,
         render: () => (
           <>
@@ -1476,7 +1584,7 @@ function WidgetsValueModal(props) {
               />
             </div>
             <div className="flex justify-center">
-              <span className="text-gray-300">
+              <span className="text-gray-300 uppercase">
                 {currWidgetsDetails?.options?.validation?.format}
               </span>
             </div>
@@ -1539,6 +1647,23 @@ function WidgetsValueModal(props) {
             currWidgetsDetails={currWidgetsDetails}
           />
         );
+      case drawWidget:
+        return (
+          <div>
+            <Draw
+              penColor={penColor}
+              canvasRef={canvasRef}
+              currWidgetsDetails={props?.currWidgetsDetails}
+              handleSignatureChange={handleSignatureChange}
+            />
+            <div className="flex flex-row justify-between mt-[10px]">
+              <PenColorComponent
+                penColor={penColor}
+                setPenColor={setPenColor}
+              />
+            </div>
+          </div>
+        );
       default:
         return (
           <input
@@ -1556,7 +1681,7 @@ function WidgetsValueModal(props) {
     const isCheckBox =
       !currWidgetsDetails.options?.isReadOnly &&
       currWidgetsDetails.type === "checkbox";
-    if (isCheckBox) {
+    if (isCheckBox && props?.role !== "prefill") {
       //get minimum required count if  exist
       const minCount =
         currWidgetsDetails?.options?.validation?.minRequiredCount;
@@ -1664,17 +1789,55 @@ function WidgetsValueModal(props) {
     }
   };
 
-  // focusNextWidget(currWidgetsDetails?.key, xyPosition)
+  // `clearWidgetResponse` is used to clear response of signature, stamp, image, initials, draw widget based on id
+  const clearWidgetResponse = () => {
+    const widgetKey = currWidgetsDetails?.key;
+    const isOptional =
+      currWidgetsDetails?.options?.status === "optional" || false;
+    if (widgetKey && isOptional) {
+      const isPrefill = xyPosition.some(
+        ({ Id, Role }) => Id === uniqueId && Role === "prefill"
+      );
+      if (isPrefill) dispatch(setPrefillImg({ id: widgetKey, base64: "" }));
+
+      setXyPosition((prev) =>
+        prev.map((signer) => {
+          if (signer.Id !== uniqueId) return signer;
+
+          const idx = signer?.placeHolder?.findIndex(
+            (p) => p.pageNumber === pageNumber
+          );
+          if (idx === -1) return signer;
+
+          return {
+            ...signer,
+            placeHolder: clearResponse(widgetKey, signer.placeHolder, idx)
+          };
+        })
+      );
+    }
+  };
+
   //function too use on click on next/finish button then update modal UI according to current widgets
   const handleClickOnNext = async (isFinishDoc) => {
     if (
-      ["signature", "stamp", "image", "initials"].includes(
+      ["signature", "stamp", "image", "initials", drawWidget].includes(
         currWidgetsDetails?.type
-      ) &&
-      (signature || image || myInitial || defaultSignImg || myStamp)
+      )
     ) {
-      //function to save all type draw or image
-      handleSaveBtn();
+      if (
+        signature ||
+        image ||
+        myInitial ||
+        defaultSignImg ||
+        myStamp ||
+        typedSignature
+      ) {
+        //function to save all type draw or image
+        handleSaveBtn();
+      } else {
+        clearWidgetResponse();
+      }
     }
     if (isSave) {
       handleclose();
@@ -1733,16 +1896,15 @@ function WidgetsValueModal(props) {
       if (isOptional && uniqueId) {
         return false;
       } else if (
-        ["signature", "stamp", "image", "initials"].includes(
+        ["signature", "stamp", "image", "initials", drawWidget].includes(
           currWidgetsDetails?.type
         )
       ) {
         const { type } = currWidgetsDetails || {};
         //conditions based on widget type or active tab
         const conditions = {
-          image: !image, // Image widget also requires an image
           draw: !signature, // Draw tab requires a drawn signature
-          uploadImage: !image, // Upload tab requires an image
+          image: !image, // Upload tab requires an image
           mysignature: !defaultSignImg, // My Signature tab requires a saved/default signature
           type: !(typedSignature?.trim()?.length > 0), // Type tab requires non-empty typed signature
           myinitials: !myInitial,
@@ -1925,7 +2087,9 @@ function WidgetsValueModal(props) {
                   ></button>
                 )}
                 <div className="flex items-center gap-2">
-                  {!isSave && <HandleRequiredField />}
+                  {(!isSave || props?.role === "prefill") && (
+                    <HandleRequiredField />
+                  )}
                   {isSave ? (
                     <button
                       type="button"

apps/OpenSign/src/components/pdf/tab/Draw.jsx

@@ -1,16 +1,47 @@
+import { useEffect } from "react";
 import SignatureCanvas from "react-signature-canvas";
+import { drawWidget } from "../../../constant/Utils";
+import { useSelector } from "react-redux";
 
+//this component is used for signature widget "Draw tab" and prefill user Draw widget
 function Draw(props) {
+  const { prefillImg } = useSelector((state) => state.widget);
+  useEffect(() => {
+    handleDrawResponse();
+  }, [prefillImg]);
+
+  //function is used to show draw widget response
+  const handleDrawResponse = async () => {
+    if (
+      props?.currWidgetsDetails?.type === drawWidget &&
+      props?.canvasRef.current
+    ) {
+      const getPrefillImg = prefillImg?.find(
+        (x) => x.id === props?.currWidgetsDetails?.key
+      );
+      const base64 = getPrefillImg?.base64;
+      props?.canvasRef.current.fromDataURL(base64);
+    }
+  };
   return (
     <div className="flex justify-center">
       <SignatureCanvas
         ref={props?.canvasRef}
         penColor={props?.penColor}
         canvasProps={{
-          className: `${props?.currWidgetsDetails?.type === "initials" ? "intialSignatureCanvas" : "signatureCanvas"} border-[1.3px] border-gray-300 rounded-[4px]`
+          className: `${
+            props?.prefillCls
+              ? "prefillCanvas"
+              : props?.currWidgetsDetails?.type === "initials"
+                ? "intialSignatureCanvas"
+                : "signatureCanvas"
+          } border-[1.3px] border-gray-300 rounded-[10px]`
         }}
         onEnd={() =>
-          props?.handleSignatureChange(props?.canvasRef.current?.toDataURL())
+          props?.handleSignatureChange(
+            props?.canvasRef.current?.toDataURL(),
+            props?.currWidgetsDetails
+          )
         }
         dotSize={1}
       />

apps/OpenSign/src/components/pdf/tab/PenColorComponent.jsx

@@ -16,7 +16,9 @@ function PenColorComponent({
   convertToImg,
   fontSelect,
   typedSignature,
-  setPenColor
+  setPenColor,
+  hideLabel = false,
+  penSize
 }) {
   const { t } = useTranslation();
 
@@ -32,9 +34,12 @@ function PenColorComponent({
     return filtered.length ? [...new Set(filtered)] : ALLOWED_COLORS;
   }, [providedColors]);
 
+  const PEN_SIZE = penSize === "sm" ? "text-[14px]" : "text-[16px]";
   return (
-    <div className="flex flex-row items-center m-[5px] gap-3">
-      <span className="text-base-content">{t("options")}</span>
+    <div
+      className={`flex flex-row items-center m-[5px] ${penSize === "sm" ? "gap-2" : "gap-3"}`}
+    >
+      {!hideLabel && <span className="text-base-content">{t("options")}</span>}
       {pensList.map((color) => {
         const selected = penColor === color;
         return (
@@ -45,9 +50,9 @@ function PenColorComponent({
             aria-label={`Select ${color} pen`}
             onClick={() => {
               setPenColor?.(color);
-              convertToImg?.(fontSelect, typedSignature, color);
+              convertToImg && convertToImg?.(fontSelect, typedSignature, color);
             }}
-            className={`${COLOR_CLASS[color] || "text-base-content"} ${selected ? "border-current" : "border-white"} border-b-[2px] pb-0.5 cursor-pointer text-[16px] fa-light fa-pen-nib`}
+            className={`${COLOR_CLASS[color] || "text-base-content"} ${selected ? "border-current" : "border-white"} border-b-[2px] pb-0.5 cursor-pointer ${PEN_SIZE} fa-light fa-pen-nib`}
           ></i>
         );
       })}

apps/OpenSign/src/components/preferences/DateFormatSelector.jsx

@@ -10,16 +10,16 @@ const DateFormatSelector = (props) => {
 
   const dateFormats = [
     "MM/DD/YYYY",
-    "MMMM DD, YYYY",
-    "DD MMMM, YYYY",
-    "DD-MM-YYYY",
-    "DD MMM, YYYY",
-    "YYYY-MM-DD",
     "MM-DD-YYYY",
     "MM.DD.YYYY",
-    "MMM DD, YYYY",
+    "DD/MM/YYYY",
+    "DD-MM-YYYY",
     "DD.MM.YYYY",
-    "DD/MM/YYYY"
+    "YYYY-MM-DD",
+    "MMM DD, YYYY",
+    "MMMM DD, YYYY",
+    "DD MMM, YYYY",
+    "DD MMMM, YYYY"
   ];
 
   // Handle format change

apps/OpenSign/src/components/preferences/MailTemplateEditor.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import Parse from "parse";
 import ReactQuill from "react-quill-new";
@@ -7,6 +7,7 @@ import EditorToolbar, { module1, module2, formats } from "../pdf/EditorToolbar";
 import Tooltip from "../../primitives/Tooltip";
 import Alert from "../../primitives/Alert";
 import Loader from "../../primitives/Loader";
+import { withSessionValidation } from "../../utils";
 
 const MailTemplateEditor = ({
   info,
@@ -14,8 +15,6 @@ const MailTemplateEditor = ({
 }) => {
   const appName = localStorage.getItem("appname") || "OpenSign™";
   const { t } = useTranslation();
-  const editorRef = useRef();
-  const editorRefCom = useRef();
   const [requestBody, setRequestBody] = useState("");
   const [requestSubject, setRequestSubject] = useState("");
   const [completionBody, setCompletionBody] = useState("");
@@ -79,7 +78,7 @@ const MailTemplateEditor = ({
     }
   };
   //function to save completion email template
-  const handleSaveCompletionEmail = async (e) => {
+  const handleSaveCompletionEmail = withSessionValidation(async (e) => {
     e.preventDefault();
     try {
       const replacedHtmlBody = completionBody.replace(/"/g, "'");
@@ -103,9 +102,9 @@ const MailTemplateEditor = ({
       setIsAlert({ type: "danger", msg: t("something-went-wrong-mssg") });
       setTimeout(() => setIsAlert({ type: "", msg: "" }), 1500);
     }
-  };
+  });
   //function to save request email template
-  const handleSaveRequestEmail = async (e) => {
+  const handleSaveRequestEmail = withSessionValidation(async (e) => {
     e.preventDefault();
     try {
       const replacedHtmlBody = requestBody.replace(/"/g, "'");
@@ -135,10 +134,10 @@ const MailTemplateEditor = ({
       setIsAlert({ type: "danger", msg: t("something-went-wrong-mssg") });
       setTimeout(() => setIsAlert({ type: "", msg: "" }), 1500);
     }
-  };
+  });
 
   //function to use reset form
-  const handleReset = async (request, completion) => {
+  const handleReset = withSessionValidation(async (request, completion) => {
     let extUser =
       localStorage.getItem("Extand_Class") &&
       JSON.parse(localStorage.getItem("Extand_Class"))?.[0];
@@ -185,17 +184,15 @@ const MailTemplateEditor = ({
         setIsMailLoader((p) => ({ ...p, completion: false }));
       }
     }
-  };
+  });
   //function for handle ontext change and save again text in delta
-  const handleOnchangeRequest = () => {
-    if (editorRef.current) {
-      const html = editorRef.current.editor.root.innerHTML;
+  const handleOnchangeRequest = (html) => {
+    if (html) {
       setRequestBody(html);
     }
   };
-  const handleOnchangeCompletion = () => {
-    if (editorRefCom.current) {
-      const html = editorRefCom.current.editor.root.innerHTML;
+  const handleOnchangeCompletion = (html) => {
+    if (html) {
       setCompletionBody(html);
     }
   };
@@ -258,10 +255,9 @@ const MailTemplateEditor = ({
                   theme="snow"
                   value={requestBody}
                   placeholder="add body of email"
-                  ref={editorRef}
                   modules={module1}
                   formats={formats}
-                  onChange={handleOnchangeRequest}
+                  onChange={(value) => handleOnchangeRequest(value)}
                 />
               </div>
               <div className="flex items-center mt-3 gap-2">
@@ -336,10 +332,9 @@ const MailTemplateEditor = ({
                   theme="snow"
                   value={completionBody}
                   placeholder="add body of email"
-                  ref={editorRefCom}
                   modules={module2}
                   formats={formats}
-                  onChange={handleOnchangeCompletion}
+                  onChange={(value) => handleOnchangeCompletion(value)}
                 />
               </div>
               <div className="flex items-center mt-3 gap-2">

apps/OpenSign/src/components/preferences/tabs/Email.jsx

@@ -0,0 +1,22 @@
+import { useTranslation } from "react-i18next";
+import { useSelector } from "react-redux";
+import MailTemplateEditor from "../MailTemplateEditor";
+
+const EmailTab = () => {
+  const { t } = useTranslation();
+  const {
+    tenantInfo
+  } = useSelector((state) => state.user);
+  return (
+    <div className="flex flex-col mb-4">
+        <MailTemplateEditor
+          info={
+                tenantInfo
+          }
+          tenantId={tenantInfo?.objectId}
+        />
+    </div>
+  );
+};
+
+export default EmailTab;

apps/OpenSign/src/components/preferences/tabs/Widgets.jsx

@@ -0,0 +1,268 @@
+import { useEffect, useState } from "react";
+import { dateFormat, formatDate, withSessionValidation } from "../../../utils";
+import { useTranslation } from "react-i18next";
+import { useDispatch, useSelector } from "react-redux";
+import {
+  setAlertInfo,
+  setLoader,
+  setUserInfo
+} from "../../../redux/reducers/userReducer";
+import DatePicker from "../../DatePicker";
+import DateFormat from "../../DateFormat";
+import {
+  changeDateToMomentFormat,
+  selectFormat
+} from "../../../constant/Utils";
+import moment from "moment";
+import { Tooltip as ReactTooltip } from "react-tooltip";
+
+
+const WidgetsTab = () => {
+  const { t } = useTranslation();
+  const dispatch = useDispatch();
+  const { userInfo } = useSelector((state) => state.user);
+  const [selectDate, setSelectDate] = useState({
+    date: "",
+    format: "MM/dd/yyyy"
+  });
+  const [dateFormatList, setDateFormatList] = useState([]);
+  const [dateWidget, setDateWidget] = useState({
+    isSigningDate: false,
+    isReadOnly: false,
+    date: "",
+    format: "MM/dd/yyyy"
+  });
+
+  useEffect(() => {
+    updateStates();
+  }, [userInfo]);
+
+  const updateStates = () => {
+    const widgetPreferences = userInfo?.WidgetPreferences || [];
+    const dateWidgetPref = widgetPreferences.find((w) => w.type === "date") || {
+      isSigningDate: false,
+      isReadOnly: false
+    };
+    setDateWidget({
+      isSigningDate: !!dateWidgetPref.isSigningDate,
+      isReadOnly: !!dateWidgetPref.isReadOnly,
+      date: dateWidgetPref.date,
+      format: dateWidgetPref.format
+    });
+    setSelectDate({ date: dateWidgetPref.date, format: dateWidgetPref.format });
+    const formatted = moment(
+      dateWidgetPref.date,
+      changeDateToMomentFormat(dateWidgetPref.format),
+      true
+    ).toISOString();
+    formatDateList(formatted);
+  };
+
+  const handleSigningDateChange = (e) => {
+    if (e.target.checked) {
+      setSelectDate({ date: "", format: selectDate.format });
+    }
+    setDateWidget((prev) => ({
+      ...prev,
+      date: "",
+      isSigningDate: e.target.checked
+    }));
+  };
+
+  const handleReadOnlyChange = (e) => {
+    setDateWidget({ ...dateWidget, isReadOnly: e.target.checked });
+  };
+
+  const showAlert = (type, msg) => {
+    dispatch(setAlertInfo({ type, msg }));
+    setTimeout(() => {
+      dispatch(setAlertInfo({ type: "success", msg: "" }));
+    }, 2000);
+  };
+  // `handleSave` is used save updated value signature type
+  const handleSave = withSessionValidation(async () => {
+    dispatch(setLoader(true));
+    try {
+      if (
+        dateWidget?.isReadOnly &&
+        !selectDate.date &&
+        !dateWidget.isSigningDate
+      ) {
+        alert(t("read-only-date-error"));
+        return;
+      }
+      const res = await Parse.Cloud.run("setwidgetpreferences", {
+        dateWidget: dateWidget
+      });
+      if (res) {
+        const widgetPreferences = userInfo?.WidgetPreferences || [];
+        // Normalize booleans (simple + safe)
+        const dateOpt = { type: "date", ...dateWidget };
+        // Upsert: replace if exists, otherwise append
+        const updatedWidgetPreferences =
+          widgetPreferences?.length > 0
+            ? widgetPreferences.map((w) => (w.type === "date" ? dateOpt : w))
+            : [...widgetPreferences, dateOpt];
+        const userdata = { ...userInfo };
+        userdata.WidgetPreferences = updatedWidgetPreferences;
+        dispatch(setUserInfo(userdata));
+        showAlert("success", t("saved-successfully"));
+      }
+    } catch (error) {
+      console.error("Widgets preferences error: ", error);
+      showAlert("danger", error.message);
+    } finally {
+      dispatch(setLoader(false));
+    }
+  });
+  const handleDateChange = (date) => {
+    //function to save date and format in local array
+    const formattedDate = formatDate({
+      date: date,
+      format: selectDate.format
+    });
+    setDateWidget({
+      ...dateWidget,
+      isSigningDate: false,
+      date: formattedDate,
+      format: selectDate.format
+    });
+    setSelectDate({ date: formattedDate, format: selectDate.format });
+    formatDateList(date);
+  };
+
+  const formatDateList = (selecteddate) => {
+    let date = selecteddate || new Date();
+    const list = dateFormat.map((dateFormat) => {
+      const format = selectFormat(dateFormat);
+      return { date: formatDate({ date, format }), format: format };
+    });
+    setDateFormatList(list);
+  };
+  const handleChangeFormat = (e) => {
+    e.stopPropagation();
+    const selectedIndex = Number(e.target.value);
+    const format = dateFormatList[selectedIndex]?.format;
+    const dateObj =
+      selectDate.date && !dateWidget?.isSigningDate
+        ? { date: dateFormatList[selectedIndex]?.date, format: format }
+        : { format: format };
+    setDateWidget((prev) => ({ ...prev, ...dateObj }));
+    setSelectDate((prev) => ({ ...prev, ...dateObj }));
+  };
+  const handleClear = () => {
+    setSelectDate((prev) => ({ ...prev, date: "" }));
+    setDateWidget((prev) => ({ ...prev, date: "" }));
+  };
+  return (
+    <div id="panel-widgets">
+      <div className="grid grid-cols-1 md:grid-cols-12 md:gap-x-8 gap-y-6">
+        {/* Left Column - Signature Settings */}
+        <div className="md:col-span-6 flex flex-col">
+          <div>
+            <label className="inline-flex text-[14px] mb-0 font-medium">
+              {t("date-widget")}
+              <a data-tooltip-id="date-widget-tooltip" className="ml-1">
+                <sup>
+                  <i className="fa-light fa-question rounded-full border-[#33bbff] text-[#33bbff] text-[13px] border-[1px] py-[1.5px] px-[4px]"></i>
+                </sup>
+              </a>
+              <ReactTooltip id="date-widget-tooltip" className="z-[999]">
+                <div className="max-w-[200px] md:max-w-[450px]">
+                  <p className="font-bold"> {t("date-widget")}</p>
+                  <p>{t("date-pref-help-sub-title")}</p>
+                  <div className="p-[5px]">
+                    <ol className="list-disc">
+                      <li>
+                        <span className="font-bold capitalize">
+                          {t("format")}:{" "}
+                        </span>
+                        <span>{t("date-pref-help-format")}</span>
+                      </li>
+                      <li>
+                        <span className="font-bold capitalize">
+                          {t("default-date")}:{" "}
+                        </span>
+                        <span>{t("date-pref-help-default-date")}</span>
+                      </li>
+                      <li>
+                        <span className="font-bold capitalize">
+                          {t("signing-date")}:{" "}
+                        </span>
+                        <span>{t("date-pref-help-signing-date")}</span>
+                      </li>
+                      <li>
+                        <span className="font-bold capitalize">
+                          {t("read-only")}:{" "}
+                        </span>
+                        <span>{t("date-pref-help-read-only")}</span>
+                      </li>
+                    </ol>
+                  </div>
+                </div>
+              </ReactTooltip>
+            </label>
+            <DateFormat
+              selectDate={selectDate}
+              dateFormatList={dateFormatList}
+              handleChangeFormat={handleChangeFormat}
+            />
+            <DatePicker
+              selectDate={selectDate}
+              onChange={handleDateChange}
+              handleClear={handleClear}
+            />
+            <div className="mt-3 flex flex-col gap-2">
+              <div className="flex flex-row gap-2 items-center">
+                <input
+                  className="op-checkbox op-checkbox-xs"
+                  type="checkbox"
+                  id="date-widget-signingdate"
+                  name="isSigningDate"
+                  onChange={handleSigningDateChange}
+                  checked={dateWidget.isSigningDate}
+                />
+                <label
+                  htmlFor="date-widget-signingdate"
+                  className="text-sm font-medium text-base-content hover:underline underline-offset-2 cursor-pointer capitalize mb-0"
+                  title={t("signing-date")}
+                >
+                  {t("signing-date")}
+                </label>
+              </div>
+              <div className="flex flex-row gap-2 items-center">
+                <input
+                  className="op-checkbox op-checkbox-xs"
+                  type="checkbox"
+                  id="date-widget-readonly"
+                  name="isReadOnly"
+                  onChange={handleReadOnlyChange}
+                  checked={dateWidget.isReadOnly}
+                />
+                <label
+                  htmlFor="date-widget-readonly"
+                  className="text-sm font-medium text-base-content hover:underline underline-offset-2 cursor-pointer capitalize mb-0"
+                  title={t("read-only")}
+                >
+                  {t("read-only")}
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Save Button - Full Width */}
+        <div className="md:col-span-12 flex justify-start mt-3">
+          <button
+            className="op-btn op-btn-primary w-[110px]"
+            onClick={handleSave}
+          >
+            {t("save")}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default WidgetsTab;

apps/OpenSign/src/components/preferences/tabs/index.js

@@ -0,0 +1,4 @@
+import EmailTab from "./Email";
+import WidgetsTab from "./Widgets";
+
+export { EmailTab, WidgetsTab };

apps/OpenSign/src/components/shared/fields/CellsInput.jsx

@@ -0,0 +1,214 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+
+/**
+ * CellsInput (cells for a single word/value)
+ *
+ * Props:
+ * - count: number (how many cells)
+ * - value: string (controlled)
+ * - onChange: (nextValue: string) => void
+ * - hint
+ * - textSize: number (px) default 12
+ * - textColor: string default "#000000"
+ * - only: "all" | "digits" | "letters" | "alphanumeric"
+ * - autoFocus: boolean
+ * - disabled: boolean
+ */
+export default function CellsInput({
+  count = 1,
+  value,
+  onChange,
+  hint = "",
+  textSize = 12,
+  textColor = "#000000",
+  only = "all",
+  autoFocus = false,
+  disabled = false,
+  className = ""
+}) {
+  const isControlled = value !== undefined && typeof onChange === "function";
+  const [internal, setInternal] = useState("");
+
+  const currentValue = isControlled ? value : internal;
+
+  const safeCount = useMemo(() => clampInt(count, 1, 64, 6), [count]);
+
+  // refs for focusing next/prev
+  const inputsRef = useRef([]);
+
+  // normalize value length
+  useEffect(() => {
+    const normalized = normalizeValue(currentValue, safeCount, only);
+    if (normalized !== currentValue) emit(normalized);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [safeCount, only]);
+
+  useEffect(() => {
+    if (autoFocus && !disabled) {
+      queueMicrotask(() => inputsRef.current?.[0]?.focus?.());
+    }
+  }, [autoFocus, disabled]);
+
+  function emit(next) {
+    if (isControlled) onChange(next);
+    else setInternal(next);
+  }
+
+  const chars = useMemo(() => {
+    const v = normalizeValue(currentValue, safeCount, only);
+    const arr = Array.from({ length: safeCount }, (_, i) => v[i] || "");
+    return arr;
+  }, [currentValue, safeCount, only]);
+
+  const inputStyle = {
+    fontSize: `${Number(textSize || 12)}px`,
+    color: textColor && String(textColor).trim() ? textColor : "#000000"
+  };
+
+  function focusIndex(i) {
+    const el = inputsRef.current?.[i];
+    if (el) {
+      el.focus();
+      el.select?.();
+    }
+  }
+
+  function setCharAt(index, ch) {
+    const v = normalizeValue(currentValue, safeCount, only);
+    const nextArr = Array.from({ length: safeCount }, (_, i) => v[i] || "");
+    nextArr[index] = ch;
+    emit(nextArr.join(""));
+  }
+
+  function handleChange(index, raw) {
+    if (disabled) return;
+
+    // user typed multiple chars (mobile suggestions/paste) -> distribute
+    const cleaned = filterString(raw, only);
+    if (!cleaned) {
+      setCharAt(index, "");
+      return;
+    }
+
+    const v = normalizeValue(currentValue, safeCount, only);
+    const nextArr = Array.from({ length: safeCount }, (_, i) => v[i] || "");
+
+    let writeAt = index;
+    for (const ch of cleaned) {
+      if (writeAt >= safeCount) break;
+      nextArr[writeAt] = ch;
+      writeAt++;
+    }
+    emit(nextArr.join(""));
+
+    // move focus
+    const nextFocus = Math.min(writeAt, safeCount - 1);
+    if (nextFocus !== index) focusIndex(nextFocus);
+  }
+
+  function handleKeyDown(index, e) {
+    if (disabled) return;
+
+    const key = e.key;
+
+    if (key === "Backspace") {
+      e.preventDefault();
+      const v = normalizeValue(currentValue, safeCount, only);
+      if (v[index]) {
+        setCharAt(index, "");
+        return;
+      }
+      // if empty, go previous
+      if (index > 0) {
+        focusIndex(index - 1);
+        setCharAt(index - 1, "");
+      }
+      return;
+    }
+
+    if (key === "ArrowLeft") {
+      e.preventDefault();
+      if (index > 0) focusIndex(index - 1);
+      return;
+    }
+
+    if (key === "ArrowRight") {
+      e.preventDefault();
+      if (index < safeCount - 1) focusIndex(index + 1);
+      return;
+    }
+
+    if (key === " " && only !== "all") {
+      e.preventDefault();
+      return;
+    }
+  }
+
+  function handlePaste(index, e) {
+    if (disabled) return;
+    e.preventDefault();
+    const text = e.clipboardData?.getData("text") || "";
+    const cleaned = filterString(text, only);
+    if (!cleaned) return;
+
+    const v = normalizeValue(currentValue, safeCount, only);
+    const nextArr = Array.from({ length: safeCount }, (_, i) => v[i] || "");
+
+    let writeAt = index;
+    for (const ch of cleaned) {
+      if (writeAt >= safeCount) break;
+      nextArr[writeAt] = ch;
+      writeAt++;
+    }
+    emit(nextArr.join(""));
+
+    const nextFocus = Math.min(writeAt, safeCount - 1);
+    focusIndex(nextFocus);
+  }
+
+  return (
+    <div className={`w-full ${className}`}>
+      <div className="flex items-center justify-center gap-0">
+        {chars.map((ch, i) => (
+          <input
+            key={i}
+            ref={(el) => (inputsRef.current[i] = el)}
+            type="text"
+            inputMode={only === "digits" ? "numeric" : "text"}
+            autoComplete="one-time-code"
+            className="op-input op-input-bordered op-input-sm w-9 text-center rounded-sm focus:outline-none hover:border-base-content disabled:opacity-60"
+            style={inputStyle}
+            value={ch}
+            // maxLength={safeCount} // allows multi-char suggestions; we still distribute
+            disabled={disabled}
+            onChange={(e) => handleChange(i, e.target.value)}
+            onKeyDown={(e) => handleKeyDown(i, e)}
+            onPaste={(e) => handlePaste(i, e)}
+            placeholder={hint[i]}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/* ---------------- helpers ---------------- */
+
+function clampInt(v, min, max, fallback) {
+  const n = parseInt(String(v), 10);
+  if (Number.isNaN(n)) return fallback;
+  return Math.max(min, Math.min(max, n));
+}
+
+function filterString(str, only) {
+  const s = String(str ?? "");
+  if (only === "digits") return s.replace(/[^0-9]/g, "");
+  if (only === "letters") return s.replace(/[^a-zA-Z]/g, "");
+  if (only === "alphanumeric") return s.replace(/[^a-zA-Z0-9]/g, "");
+  return s.replace(/\s/g, ""); // for "all" we still drop spaces for OTP-like behavior
+}
+
+function normalizeValue(v, count, only) {
+  const cleaned = filterString(v || "", only);
+  return cleaned.slice(0, count);
+}

apps/OpenSign/src/components/shared/fields/CreateFolder.jsx

@@ -3,6 +3,7 @@ import Parse from "parse";
 import Alert from "../../../primitives/Alert";
 import Loader from "../../../primitives/Loader";
 import { useTranslation } from "react-i18next";
+import { withSessionValidation } from "../../../utils";
 
 const CreateFolder = ({ parentFolderId, onSuccess, folderCls, onBack }) => {
   const folderPtr = {
@@ -18,7 +19,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls, onBack }) => {
     setAlert({ type: type, message: msg });
     setTimeout(() => setAlert({ type: type, message: "" }), 1000);
   };
-  const handleCreateFolder = async (event) => {
+  const handleCreateFolder = withSessionValidation(async (event) => {
     event.preventDefault();
     handleLoader(true);
     if (name) {
@@ -41,6 +42,12 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls, onBack }) => {
           template.set("Folder", folderPtr);
         }
         template.set("CreatedBy", Parse.User.createWithoutData(currentUser.id));
+        const ExtCls = JSON.parse(localStorage.getItem("Extand_Class"));
+        template.set("ExtUserPtr", {
+          __type: "Pointer",
+          className: "contracts_Users",
+          objectId: ExtCls[0].objectId
+        });
         const res = await template.save();
         if (res) {
           handleLoader(false);
@@ -52,7 +59,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls, onBack }) => {
       handleLoader(false);
       showToast("info", t("fill-folder-name"));
     }
-  };
+  });
   const handleLoader = (status) => setIsLoader(status);
 
   return (

apps/OpenSign/src/components/shared/fields/SuggestionInput.jsx

@@ -1,23 +1,98 @@
-import React, { useState, useEffect, useRef } from "react";
+import { useState, useLayoutEffect, useEffect, useRef } from "react";
 import { findContact } from "../../../constant/Utils";
+import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
+
+function findScrollParent(el) {
+  let parent = el?.parentElement;
+  while (parent) {
+    const style = window.getComputedStyle(parent);
+    const overflowY = style.overflowY;
+    if (overflowY === "auto" || overflowY === "scroll") return parent;
+    parent = parent.parentElement;
+  }
+  return window; // fallback
+}
+
 const SuggestionInput = (props) => {
+  const { t } = useTranslation();
   const [inputValue, setInputValue] = useState(props?.value || "");
   const [suggestions, setSuggestions] = useState([]);
   const [showSuggestions, setShowSuggestions] = useState(false);
-  const ref = useRef(null);
+  const inputRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const [dropdownPos, setDropdownPos] = useState({
+    top: 0,
+    left: 0,
+    width: 0,
+    placement: "bottom" // bottom | top
+  });
+
+  const updateDropdownPosition = () => {
+    const inputEl = inputRef.current;
+    if (!inputEl) return;
+
+    const rect = inputEl.getBoundingClientRect();
+    const desiredHeight = 120; // roughly max-h (adjust if you want)
+    const gap = 6;
+
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const openUpwards = spaceBelow < desiredHeight + gap;
+
+    const top = openUpwards
+      ? Math.max(gap, rect.top - desiredHeight - gap)
+      : rect.bottom + gap;
+
+    setDropdownPos({
+      top,
+      left: rect.left,
+      width: rect.width,
+      placement: openUpwards ? "top" : "bottom"
+    });
+  };
+
+  useLayoutEffect(() => {
+    if (!showSuggestions) return;
+    updateDropdownPosition();
+  }, [showSuggestions, inputValue, suggestions.length]);
 
   useEffect(() => {
-    document.addEventListener("mousedown", Clickout);
-    return () => {
-      document.removeEventListener("mousedown", Clickout);
+    const Clickout = (e) => {
+      if (
+        inputRef.current?.contains(e.target) ||
+        dropdownRef.current?.contains(e.target)
+      )
+        return;
+      setShowSuggestions(false);
     };
+    document.addEventListener("mousedown", Clickout);
+    return () => document.removeEventListener("mousedown", Clickout);
   }, []);
 
-  const Clickout = (event) => {
-    if (ref.current && !ref.current.contains(event.target)) {
-      setShowSuggestions(false);
-    }
-  };
+  useEffect(() => {
+    if (!showSuggestions) return;
+
+    const inputEl = inputRef.current;
+    if (!inputEl) return;
+
+    const scrollParent = findScrollParent(inputEl);
+
+    const onScroll = () => updateDropdownPosition();
+    const onResize = () => updateDropdownPosition();
+
+    // capture scroll on window + scroll parent
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", onResize);
+    if (scrollParent !== window)
+      scrollParent.addEventListener("scroll", onScroll, { passive: true });
+
+    return () => {
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", onResize);
+      if (scrollParent !== window)
+        scrollParent.removeEventListener("scroll", onScroll);
+    };
+  }, [showSuggestions]);
   // create debounce to avoid unnecessay api calls
   useEffect(() => {
     let timer;
@@ -63,32 +138,55 @@ const SuggestionInput = (props) => {
       props.onChange(suggestion);
     }
   };
+
+  const dropdown =
+    showSuggestions && suggestions.length > 0
+      ? createPortal(
+          <ul
+            ref={dropdownRef}
+            className="fixed z-[1002] max-h-[250px] overflow-y-auto bg-base-200 border border-gray-300 rounded shadow-md text-base-content"
+            style={{
+              top: dropdownPos?.top,
+              left: dropdownPos?.left,
+              maxWidth: dropdownPos?.width > 200 ? dropdownPos?.width : 200
+            }}
+          >
+            {suggestions.map((suggestion, index) => (
+              <li
+                key={index}
+                className="block py-2 px-2 w-full text-sm cursor-pointer hover:bg-base-300"
+                // use onMouseDown so click registers BEFORE input blur
+                onMouseDown={(e) => {
+                  e.preventDefault();
+                  handleSuggestionClick(suggestion);
+                }}
+              >
+                {suggestion.Name} {"<" + suggestion.Email + ">"}
+              </li>
+            ))}
+          </ul>,
+          document.body
+        )
+      : null;
+
   return (
     <div className="flex flex-col items-center relative text-base-content">
       <input
+        ref={inputRef}
         type={props?.type || "text"}
         value={inputValue}
         onChange={handleInputChange}
-        placeholder="Enter Email..."
-        className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs lowercase"
+        autoComplete="off"
+        autoCorrect="off"
+        autoCapitalize="none"
+        placeholder={`${t("enter-value", { value: t("Email") })}...`}
+        className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs lowercase placeholder:capitalize"
         required={props.required}
+        onFocus={() => {
+          if (suggestions.length) setShowSuggestions(true);
+        }}
       />
-      {showSuggestions && (
-        <ul
-          ref={ref}
-          className="absolute z-50 left-0 top-[2.55rem] w-full max-h-[100px] overflow-y-auto bg-base-200 border border-gray-300 rounded shadow-md"
-        >
-          {suggestions.map((suggestion, index) => (
-            <li
-              key={index}
-              className="py-2 px-2 w-full text-sm cursor-pointer hover:bg-base-300"
-              onClick={() => handleSuggestionClick(suggestion)}
-            >
-              {suggestion.Name} {"<" + suggestion.Email + ">"}
-            </li>
-          ))}
-        </ul>
-      )}
+      {dropdown}
     </div>
   );
 };

apps/OpenSign/src/constant/Utils.js

@@ -9,7 +9,11 @@ import fontkit from "@pdf-lib/fontkit";
 import { themeColor } from "./const";
 import { format, toZonedTime } from "date-fns-tz";
 import i18n from "../i18n";
-import { applyNumberFormulasToPages, buildDownloadFilename } from "../utils";
+import {
+  applyNumberFormulasToPages,
+  buildDownloadFilename,
+  addPreferenceOpt
+} from "../utils";
 
 export const fontsizeArr = [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28];
 export const fontColorArr = ["red", "black", "blue", "yellow"];
@@ -18,6 +22,7 @@ export const isTab = 767 < window.innerWidth < 1023;
 export const isHighResolution = window.innerWidth > 1023;
 export const isTabAndMobile = window.innerWidth < 1023;
 export const textInputWidget = "text input";
+export const drawWidget = "draw";
 export const textWidget = "text";
 export const radioButtonWidget = "radio button";
 export const cellsWidget = "cells";
@@ -356,7 +361,8 @@ export const widgets = [
     iconSize: "19px"
   },
   { type: radioButtonWidget, icon: "fa-light fa-circle-dot", iconSize: "20px" },
-  { type: "image", icon: "fa-light fa-image", iconSize: "20px" }
+  { type: "image", icon: "fa-light fa-image", iconSize: "20px" },
+  { type: drawWidget, icon: "fa-light fa-pen-nib", iconSize: "20px" }
 ];
 
 export const getDate = (dateformat) => {
@@ -516,10 +522,15 @@ export const addWidgetOptions = (
       const dateFormat = signer?.DateFormat
         ? selectFormat(signer?.DateFormat)
         : "MM/dd/yyyy";
+      const options = addPreferenceOpt(signer, "date", role);
       return {
         ...defaultOpt,
-        response: role === "prefill" ? getDate(signer?.DateFormat) : "",
-        validation: { format: dateFormat, type: "date-format" }
+        response: options?.response || "",
+        isReadOnly: options?.isReadOnly || false,
+        validation: {
+          format: options?.format || dateFormat,
+          type: "date-format"
+        }
       };
     }
     case "image":
@@ -540,6 +551,8 @@ export const addWidgetOptions = (
       };
     case textWidget:
       return defaultOpt;
+    case drawWidget:
+      return defaultOpt;
     default:
       return {};
   }
@@ -549,7 +562,8 @@ export const addWidgetSelfsignOptions = (
   type,
   getWidgetValue,
   owner,
-  placeholder
+  placeholder,
+  isSignyourself
 ) => {
   let defaultOpt;
   //condition to handle widgets name field
@@ -604,10 +618,17 @@ export const addWidgetSelfsignOptions = (
       const dateFormat = owner?.DateFormat
         ? selectFormat(owner?.DateFormat)
         : "MM/dd/yyyy";
+      const options = addPreferenceOpt(owner, "date", "", isSignyourself);
       return {
         ...defaultOpt,
-        response: getDate(owner?.DateFormat),
-        validation: { format: dateFormat, type: "date-format" }
+        response: options?.response || "",
+        ...(!isSignyourself
+          ? { isReadOnly: options?.isReadOnly || false }
+          : {}),
+        validation: {
+          format: options?.format || dateFormat,
+          type: "date-format"
+        }
       };
     }
     case "image":
@@ -655,10 +676,13 @@ export const defaultWidthHeight = (type) => {
       return { width: 5, height: 10 };
     case textWidget:
       return { width: 150, height: 19 };
+    case drawWidget:
+      return { width: 150, height: 60 };
     default:
       return { width: 150, height: 60 };
   }
 };
+//convert url to base64
 export async function getBase64FromUrl(url, autosign) {
   const data = await fetch(url);
   const blob = await data.blob();
@@ -1026,9 +1050,7 @@ export const addZIndex = (signerPos, key, setZIndex) => {
           zIndex: item.zIndex ? item.zIndex + 1 : 1
         };
       } else {
-        return {
-          ...item
-        };
+        return { ...item };
       }
     }
   });
@@ -1068,11 +1090,7 @@ export const onChangeInput = (
       if (getPageNumer.length > 0) {
         const getXYdata = getPageNumer[0].pos;
         const addSignPos = getXYdata.map((position) => {
-          if (
-            (position?.options?.name === currentPosition?.options?.name &&
-              filterSignerPos[0].Role === "prefill") ||
-            position.key === currentPosition.key
-          ) {
+          if (position.key === currentPosition.key) {
             if (dateFormat) {
               return {
                 ...position,
@@ -1084,13 +1102,17 @@ export const onChangeInput = (
                     ? fontColor
                     : position.options?.fontColor,
                   isReadOnly:
-                    dateDetails?.isReadOnly !== "undefined"
+                    dateDetails && dateDetails?.isReadOnly !== "undefined"
                       ? dateDetails?.isReadOnly
                       : position.options?.isReadOnly,
                   status:
-                    dateDetails?.status !== "undefined"
+                    dateDetails && dateDetails?.status !== "undefined"
                       ? dateDetails?.status
                       : position.options?.status,
+                  name:
+                    dateDetails && dateDetails?.name !== "undefined"
+                      ? dateDetails?.name
+                      : position.options?.name,
                   validation: {
                     type: "date-format",
                     format: dateFormat // This indicates the required date format explicitly.
@@ -1436,7 +1458,6 @@ export function onSaveSign(
   typedSignature,
   isAutoSign,
   widgetsType,
-  isApplyAll,
   typeFont,
   fontColor
 ) {
@@ -1458,19 +1479,26 @@ export function onSaveSign(
       const signImg = typedSignature
         ? convertTextToImg(typeFont, typedSignature, fontColor, widgetDims)
         : signatureImg;
-      return {
-        ...position,
-        ...(type === "type" ? { Width: posWidth } : {}),
-        ...(type === "type" ? { Height: posHeight } : {}),
-        SignUrl: signImg,
-        ...(isSignOrInitials && { signatureType: type || "" }),
-        options: { ...position.options, response: signImg },
-        ...(typedSignature && {
-          typeSignature: typedSignature,
-          typeFont: typeFont ?? "Fasthand",
-          fontColor: fontColor ?? "blue"
-        })
-      };
+      if (widgetsType === drawWidget) {
+        return {
+          ...position,
+          options: { ...position.options, response: signImg }
+        };
+      } else {
+        return {
+          ...position,
+          ...(type === "type" ? { Width: posWidth } : {}),
+          ...(type === "type" ? { Height: posHeight } : {}),
+          SignUrl: signImg,
+          ...(isSignOrInitials && { signatureType: type || "" }),
+          options: { ...position.options, response: signImg },
+          ...(typedSignature && {
+            typeSignature: typedSignature,
+            typeFont: typeFont ?? "Fasthand",
+            fontColor: fontColor ?? "blue"
+          })
+        };
+      }
     }
     return position;
   });
@@ -1482,7 +1510,7 @@ export function onSaveSign(
     return obj;
   });
   //condition  when draw/upload signature/initials then apply it all related to widgets (draw, typed signature or default signature)
-  if (isApplyAll || isAutoSign) {
+  if (isAutoSign && widgetsType !== drawWidget) {
     const updatedArray = updateXYposition.map((page) => ({
       ...page,
       pos: page.pos.map((item) => {
@@ -1512,6 +1540,26 @@ export function onSaveSign(
   }
 }
 
+export function clearResponse(widgetKey, placeholder = [], index) {
+  if (!Array.isArray(placeholder) || !placeholder[index]?.pos) {
+    return placeholder;
+  }
+  const getXYdata = placeholder[index]?.pos;
+  const updateXYData = getXYdata.map((widget) => {
+    if (widget?.key !== widgetKey) return widget;
+    return {
+      ...widget,
+      options: { ...widget.options, response: "" },
+      SignUrl: ""
+    };
+  });
+
+  const updatePlaceholder = placeholder.map((p, ind) => {
+    if (ind !== index) return p;
+    return { ...p, pos: updateXYData };
+  });
+  return updatePlaceholder;
+}
 /**
  * Scales and centers a base64‐encoded image into a fixed‐size widget
  * and returns a new base64 PNG.
@@ -1522,12 +1570,7 @@ export function onSaveSign(
  */
 export async function convertBase64ToImg(base64Image, widgetDims) {
   const { Width: maxWidth, Height: maxHeight } = widgetDims;
-
-  // Detect input format from data URL
-  const match = base64Image.match(/^data:(image\/(png|jpeg|jpg|webp));base64,/);
-  const inputMime = match ? match[1] : "image/png"; // fallback to PNG if unknown
-
-  // 1. Load the image off-DOM
+  // Load the image off-DOM
   const img = new Image();
   img.src = base64Image;
   await new Promise((resolve, reject) => {
@@ -1633,7 +1676,6 @@ export function onSaveImage(
   image,
   isAutoSign,
   widgetsType,
-  isApplyAll,
   imgUrl,
   defaultStampImg,
   defaultStampType
@@ -1665,7 +1707,7 @@ export function onSaveImage(
     return obj;
   });
   // condition when user upload(stamp) then apply it all related to widgets
-  if (isApplyAll || isAutoSign) {
+  if (isAutoSign) {
     const updatedArray = updateXYposition.map((page) => ({
       ...page,
       pos: page.pos.map(
@@ -1883,6 +1925,13 @@ export const embedWidgetsToDoc = async (
     } else {
       updateItem = item.pos;
     }
+    const ImgTypeWidget = [
+      "signature",
+      "stamp",
+      "initials",
+      "image",
+      drawWidget
+    ];
     const pageNo = item.pageNumber;
     const widgetsPositionArr = updateItem;
     const pages = pdfDoc.getPages();
@@ -1908,14 +1957,13 @@ export const embedWidgetsToDoc = async (
       images = await Promise.all(
         widgetsPositionArr.map(async (widget) => {
           // `SignUrl` this is wrong nomenclature and maintain for older code in this options we save base64 of signature image from sign pad
-          let signbase64 = widget.SignUrl && widget.SignUrl;
+          let signbase64 = widget?.options?.response;
           const widgetDims = { Width: widget.Width, Height: widget.Height };
-          if (signbase64) {
+          if (signbase64 && ImgTypeWidget.includes(widget.type)) {
             if (!isBase64(signbase64) && prefillImg) {
               const imgData = prefillImg?.find((x) => x?.id === widget?.key);
               signbase64 = imgData?.base64;
             }
-
             // let arr = signbase64.split(",");
             // const mime = arr[0].match(/:(.*?);/)[1];
             const signatureImg = await convertBase64ToImg(
@@ -1947,9 +1995,7 @@ export const embedWidgetsToDoc = async (
       if (hasError) break; // Stop the inner loop if an error occurred
       try {
         let img;
-        if (
-          ["signature", "stamp", "initials", "image"].includes(position.type)
-        ) {
+        if (ImgTypeWidget.includes(position.type)) {
           if (images[id].mimetype === "image/png") {
             img = await pdfDoc.embedPng(images[id].arrayBuffer);
           } else {
@@ -2320,11 +2366,18 @@ export const embedWidgetsToDoc = async (
               }
             });
           }
-          // 5. Pre‐select a value if provided
-          if (position?.options?.response) {
-            radioGroup.select(position.options?.response);
-          } else if (position?.options?.defaultValue) {
-            radioGroup.select(position?.options?.defaultValue);
+          const isOptionExist = position?.options?.values?.some(
+            (x) =>
+              x === position?.options?.response ||
+              position?.options?.defaultValue
+          );
+          if (isOptionExist) {
+            // 5. Pre‐select a value if provided
+            if (position?.options?.response) {
+              radioGroup.select(position.options?.response);
+            } else if (position?.options?.defaultValue) {
+              radioGroup.select(position?.options?.defaultValue);
+            }
           }
           // 6. Set to read‐only (if required)
           radioGroup.enableReadOnly();
@@ -2372,11 +2425,7 @@ export const placeholderWidth = (pos) => {
   const posWidth = pos.Width || defaultWidth;
   //condition to handle old data saved from mobile view to get widthh
   if (pos.isMobile && pos.scale) {
-    if (pos.IsResize) {
-      return posWidth;
-    } else {
-      return posWidth * pos.scale;
-    }
+    return pos.IsResize ? posWidth : posWidth * pos.scale;
   } else {
     return posWidth;
   }
@@ -2390,11 +2439,7 @@ export const placeholderHeight = (pos) => {
 
   //condition to handle old data saved from mobile view to get height
   if (pos.isMobile && pos.scale) {
-    if (pos.IsResize) {
-      return posUpdateHeight;
-    } else {
-      return posUpdateHeight * pos.scale;
-    }
+    return pos.IsResize ? posUpdateHeight : posUpdateHeight * pos.scale;
   } else {
     return posUpdateHeight;
   }
@@ -2402,30 +2447,20 @@ export const placeholderHeight = (pos) => {
 
 //function for getting contracts_contactbook details
 export const contactBook = async (objectId) => {
-  const result = await axios
-    .get(
-      `${localStorage.getItem(
-        "baseUrl"
-      )}classes/contracts_Contactbook?where={"objectId":"${objectId}"}`,
-      {
-        headers: {
-          "Content-Type": "application/json",
-          "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-          "X-Parse-Session-Token": localStorage.getItem("accesstoken")
-        }
-      }
-    )
-    .then((Listdata) => {
-      const json = Listdata.data;
-      const res = json.results;
-      return res;
-    })
-
-    .catch((err) => {
-      console.log("Err in contracts_Contactbook class ", err);
-      return "Error: Something went wrong!";
-    });
-  return result;
+  try {
+    const url = `${localStorage.getItem("baseUrl")}classes/contracts_Contactbook?where={"objectId":"${objectId}"}`;
+    const headers = {
+      "Content-Type": "application/json",
+      "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
+      "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+    };
+    const axiosRes = await axios.get(url, { headers });
+    const result = axiosRes?.data?.results;
+    return result;
+  } catch (error) {
+    console.error("contracts_Contactbook error", err);
+    return "Error: Something went wrong!";
+  }
 };
 
 //function for getting document details from contract_Documents class
@@ -2709,6 +2744,9 @@ export const fetchUrl = async (url, fileName) => {
 
 export const getSignedUrl = async (pdfUrl, docId, templateId) => {
   //use only axios here due to public template sign
+  const token = {
+    "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+  };
   const axiosRes = await axios.post(
     `${localStorage.getItem("baseUrl")}/functions/getsignedurl`,
     {
@@ -2720,7 +2758,7 @@ export const getSignedUrl = async (pdfUrl, docId, templateId) => {
       headers: {
         "content-type": "Application/json",
         "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-        "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+        ...token
       }
     }
   );
@@ -2842,6 +2880,22 @@ export const handleToPrint = async (event, setIsDownloading, pdfDetails) => {
     alert(i18n.t("something-went-wrong-mssg"));
   }
 };
+const downloadCertificate = async (certificate, isZip, asBlob) => {
+  try {
+    const appName = "OpenSign™";
+    const fetchCertificate = await fetch(certificate);
+    const certificateUrl = certificate;
+    if (isZip) {
+      return certificateUrl;
+    } else {
+      // Convert the response into a Blob
+      const blob = asBlob ? await fetchCertificate.blob() : certificateUrl;
+      saveAs(blob, `Certificate_signed_by_${appName}.pdf`);
+    }
+  } catch (err) {
+    console.error("download certificate err", err);
+  }
+};
 
 //handle download signed pdf
 export const handleDownloadCertificate = async (
@@ -2849,82 +2903,51 @@ export const handleDownloadCertificate = async (
   setIsDownloading,
   isZip
 ) => {
-  const appName = "OpenSign™";
-  if (pdfDetails?.length > 0 && pdfDetails[0]?.CertificateUrl) {
-    try {
-      await fetch(pdfDetails[0] && pdfDetails[0]?.CertificateUrl);
-      const certificateUrl = pdfDetails[0] && pdfDetails[0]?.CertificateUrl;
-      if (isZip) {
-        return certificateUrl;
-      } else {
-        saveAs(certificateUrl, `Certificate_signed_by_${appName}.pdf`);
-      }
-    } catch (err) {
-      console.log("err in download in certificate", err);
-    }
+  const baseUrl = `${localStorage.getItem("baseUrl")}functions`;
+  const parseAppId = localStorage.getItem("parseAppId");
+  const sessionToken = localStorage.getItem("accesstoken");
+  const docId = pdfDetails?.[0]?.objectId;
+  const initialCertificateUrl = pdfDetails?.[0]?.CertificateUrl;
+  const headers = {
+    "Content-Type": "application/json",
+    "X-Parse-Application-Id": parseAppId
+  };
+
+  if (initialCertificateUrl) {
+    await downloadCertificate(initialCertificateUrl, isZip);
   } else {
     setIsDownloading("certificate");
     try {
-      const data = { docId: pdfDetails[0]?.objectId };
-      const docDetails = await axios.post(
-        `${localStorage.getItem("baseUrl")}functions/getDocument`,
-        data,
-        {
-          headers: {
-            "Content-Type": "application/json",
-            "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-            sessionToken: localStorage.getItem("accesstoken")
-          }
-        }
-      );
-      if (docDetails.data && docDetails.data.result) {
-        const doc = docDetails.data.result;
-        if (doc?.CertificateUrl) {
-          await fetch(doc?.CertificateUrl);
-          const certificateUrl = doc?.CertificateUrl;
-          if (isZip) {
+      const data = { docId: docId };
+      const docDetails = await axios.post(`${baseUrl}/getDocument`, data, {
+        headers: { ...headers, sessionToken }
+      });
+      const cert = docDetails?.data?.result?.CertificateUrl;
+      if (cert) {
+        await downloadCertificate(cert, isZip);
+        setIsDownloading("");
+      } else {
+        const generateRes = await axios.post(
+          `${baseUrl}/generatecertificate`,
+          data,
+          { headers }
+        );
+        const certificate = generateRes?.data?.result?.CertificateUrl;
+        if (certificate) {
+          try {
+            await downloadCertificate(certificate, isZip, true);
             setIsDownloading("");
-            return certificateUrl;
-          } else {
-            saveAs(certificateUrl, `Certificate_signed_by_${appName}.pdf`);
-            setIsDownloading("");
-          }
-        } else {
-          const generateRes = await axios.post(
-            `${localStorage.getItem("baseUrl")}functions/generatecertificate`,
-            data,
-            {
-              headers: {
-                "Content-Type": "application/json",
-                "X-Parse-Application-Id": localStorage.getItem("parseAppId")
-              }
-            }
-          );
-          if (generateRes?.data?.result?.CertificateUrl) {
-            try {
-              const certificateUrl = generateRes.data.result.CertificateUrl;
-              const fetchCertificate = await fetch(certificateUrl);
-              if (isZip) {
-                setIsDownloading("");
-                return certificateUrl;
-              } else {
-                // Convert the response into a Blob
-                const certificateBlob = await fetchCertificate.blob();
-                setIsDownloading("");
-                saveAs(certificateBlob, `Certificate_signed_by_${appName}.pdf`);
-              }
-            } catch (err) {
-              console.log("err in download in certificate", err);
-              setIsDownloading("certificate_err");
-            }
-          } else {
+          } catch (err) {
+            console.error("download certificate err", err);
             setIsDownloading("certificate_err");
           }
+        } else {
+          setIsDownloading("certificate_err");
         }
       }
     } catch (err) {
       setIsDownloading("certificate_err");
-      console.log("err in download in certificate", err);
+      console.error("download certificate err", err);
       alert(i18n.t("something-went-wrong-mssg"));
     }
   }
@@ -3176,17 +3199,12 @@ export const convertBase64ToFile = async (pdfName, pdfBase64, imgType) => {
     console.log("error in convertbase64tofile", e);
   }
 };
-export const onClickZoomIn = (scale, zoomPercent, setScale, setZoomPercent) => {
+export const onClickZoomIn = (zoomPercent, setScale, setZoomPercent) => {
   const newPercent = zoomPercent + 10;
   setZoomPercent(newPercent);
   setScale(1 + newPercent / 100);
 };
-export const onClickZoomOut = (
-  zoomPercent,
-  scale,
-  setZoomPercent,
-  setScale
-) => {
+export const onClickZoomOut = (zoomPercent, setZoomPercent, setScale) => {
   if (zoomPercent > 0) {
     const newPercent = Math.max(0, zoomPercent - 10);
     setZoomPercent(newPercent);
@@ -3264,11 +3282,7 @@ export const handleRotateWarning = (signerPos, pageNumber) => {
   const placeholderExist = signerPos?.some((placeholderObj) =>
     placeholderObj?.placeHolder?.some((data) => data?.pageNumber === pageNumber)
   );
-  if (placeholderExist) {
-    return true;
-  } else {
-    return false;
-  }
+  return placeholderExist ? true : false;
 };
 
 // `generateTitleFromFilename` to generate Title of document from file name
@@ -3333,8 +3347,8 @@ export async function handleSignatureType(tenantSignTypes, signatureType) {
   return updatedSignatureType;
 }
 
-// `formatDate` is used to format date to dd-mmm-yyy
-export const formatDate = (date) => {
+// `formatDateToDdMmmYyyy` is used to format date to dd-mmm-yyyy
+export const formatDateToDdMmmYyyy = (date) => {
   // Create a Date object
   const newDate = new Date(date);
   // Format the date
@@ -3479,7 +3493,7 @@ export const mailTemplate = (param) => {
   const appName = "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="mailto:complaint@opensiglabs.com" target=_blank>here</a>.</p></div></div></body></html>`;
   const subject = `${param.senderName} has requested you to sign "${param.title}"`;
   const body =
     "<html><head><meta http-equiv='Content-Type' content='text/html;charset=UTF-8' /></head><body><div style='background-color:#f5f5f5;padding:20px'><div style='background:white;padding-bottom:20px'>" +
@@ -3502,7 +3516,7 @@ export const mailTemplate = (param) => {
     appName +
     ". For any queries regarding this email, please contact the sender " +
     param.senderMail +
-    " directly. If you think this email is inappropriate or spam, you may file a complaint with " +
+    " directly. If you think this email is inappropriate or spam, you may file a complaints with " +
     appName +
     opurl;
 
@@ -3549,7 +3563,18 @@ export const updateDateWidgetsRes = (
           ...ph,
           // Sort positions within each page
           pos: [...ph.pos]
-            .sort((a, b) => a.yPosition - b.yPosition)
+            .sort((a, b) => {
+              // Sort widgets by Y position (top to bottom) and X position (left to right)
+              // Treat widgets within 5px Y difference as belonging to the same row
+              const Y_TOLERANCE = 5;
+              const yDiff = a.yPosition - b.yPosition;
+
+              if (Math.abs(yDiff) <= Y_TOLERANCE) {
+                return a.xPosition - b.xPosition; // Same row → sort by X
+              }
+
+              return yDiff; // Different rows → sort by Y
+            })
             .map((widget) => {
               // Update widget values if needed
               if (
@@ -3571,7 +3596,6 @@ export const updateDateWidgetsRes = (
               return widget;
             })
         }));
-
       return { ...item, placeHolder: sortedPlaceHolder };
     }
 
@@ -3751,11 +3775,7 @@ export const handleCheckResponse = (checkUser, setminRequiredCount) => {
       break;
     }
   }
-  return {
-    tourPageNumber,
-    widgetKey,
-    showAlert
-  };
+  return { tourPageNumber, widgetKey, showAlert };
 };
 
 /**

apps/OpenSign/src/hook/useWidgetDrag.js

@@ -1,19 +1,15 @@
 import { useEffect } from "react";
 import { useDrag } from "react-dnd";
 import { getEmptyImage } from "react-dnd-html5-backend";
-import { useGuidelinesContext } from "../context/GuidelinesContext";
+import { useDispatch } from "react-redux";
 
 export const useWidgetDrag = (item) => {
-  const { showGuidelines } = useGuidelinesContext();
   const [, dragRef, preview] = useDrag({
     type: "BOX",
     item,
     collect: (monitor) => ({
       isDragging: monitor.isDragging()
-    }),
-    end: () => {
-      showGuidelines(false);
-    }
+    })
   });
 
   // Hide browser default drag preview

apps/OpenSign/src/i18n.js

@@ -25,7 +25,7 @@ i18n
     interpolation: {
       escapeValue: false // Not needed for react as it escapes by default
     },
-    whitelist: ["en", "es", "fr", "it", "de", "hi"] // List of allowed languages
+    whitelist: ["en", "es", "fr", "it", "de", "hi", "kr"] // List of allowed languages
   });
 
 export default i18n;

apps/OpenSign/src/index.css

@@ -22,7 +22,7 @@ body {
 }
 
 @media screen and (max-width: 766px) {
-  .reactour__close {
+  .reactour__close-button {
     width: 17px !important;
     padding-left: 3px !important;
   }
@@ -119,47 +119,24 @@ body {
   }
 
   /* React-tour modal styling */
-  .reactour__helper {
+  .reactour__popover {
     background-color: #1f2937 !important;
     color: #e5e7eb !important;
     border: 1px solid #374151 !important;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
   }
 
-  .reactour__close {
+  .reactour__close-button {
     color: #e5e7eb !important;
     background-color: #374151 !important;
     border: 1px solid #4b5563 !important;
   }
 
-  .reactour__close:hover {
+  .reactour__close-button:hover {
     background-color: #4b5563 !important;
     color: #ffffff !important;
   }
 
-  /* React-tour navigation buttons */
-  .reactour__controls {
-    background-color: #1f2937 !important;
-    border-top: 1px solid #374151 !important;
-  }
-
-  .reactour__controls button {
-    background-color: #374151 !important;
-    color: #e5e7eb !important;
-    border: 1px solid #4b5563 !important;
-  }
-
-  .reactour__controls button:hover {
-    background-color: #4b5563 !important;
-    color: #ffffff !important;
-  }
-
-  .reactour__controls button:disabled {
-    background-color: #3c3c3c !important;
-    color: #858585 !important;
-    border-color: #565656 !important;
-    cursor: not-allowed !important;
-  }
 
   /* ReactTooltip styling */
   .react-tooltip {
@@ -187,41 +164,19 @@ body {
     color: #ffffff !important;
   }
 
-  .reactour__helper h1,
-  .reactour__helper h2,
-  .reactour__helper h3,
-  .reactour__helper h4,
-  .reactour__helper h5,
-  .reactour__helper h6 {
+  .reactour__popover h1,
+  .reactour__popover h2,
+  .reactour__popover h3,
+  .reactour__popover h4,
+  .reactour__popover h5,
+  .reactour__popover h6 {
     color: #ffffff !important;
   }
 
-  .reactour__helper p {
+  .reactour__popover p {
     color: #e5e7eb !important;
   }
 
-  /* VS Code-style tour buttons */
-  .reactour__controls .op-btn {
-    background-color: #007acc !important;
-    color: #ffffff !important;
-    border: 1px solid #007acc !important;
-  }
-
-  .reactour__controls .op-btn:hover {
-    background-color: #0086d1 !important;
-    border-color: #0086d1 !important;
-  }
-
-  .reactour__controls .op-btn-secondary {
-    background-color: #374151 !important;
-    color: #e5e7eb !important;
-    border: 1px solid #4b5563 !important;
-  }
-
-  .reactour__controls .op-btn-secondary:hover {
-    background-color: #4b5563 !important;
-    color: #ffffff !important;
-  }
 
   /* React-datepicker dark mode styling */
   .react-datepicker {

apps/OpenSign/src/pages/Form.jsx

@@ -32,6 +32,7 @@ import Loader from "../primitives/Loader";
 import { useTranslation } from "react-i18next";
 import { useDispatch } from "react-redux";
 import { sessionStatus } from "../redux/reducers/userReducer";
+import { withSessionValidation } from "../utils";
 
 // `Form` render all type of Form on this basis of their provided in path
 function Form() {
@@ -132,7 +133,7 @@ const Forms = (props) => {
       e.target.value = "";
     }
   };
-  const handleFileInput = async (e) => {
+  const handleFileInput = withSessionValidation(async (e) => {
     setpercentage(0);
     try {
       const files = Array.from(e.target.files);
@@ -353,7 +354,7 @@ const Forms = (props) => {
       setSelectedFiles([]);
       removeFile(e);
     }
-  };
+  });
   // `isValidURL` is used to check valid webhook url
   function isValidURL(value) {
     try {
@@ -363,7 +364,7 @@ const Forms = (props) => {
       return false;
     }
   }
-  const handleSubmit = async (e) => {
+  const handleSubmit = withSessionValidation(async (e) => {
     e.preventDefault();
     e.stopPropagation();
     if (fileupload) {
@@ -512,7 +513,7 @@ const Forms = (props) => {
     } else {
       alert(t("file-alert-3"));
     }
-  };
+  });
 
   const handleFolder = (data) => {
     setFolder(data);
@@ -698,7 +699,7 @@ const Forms = (props) => {
                   value={formData.password}
                   onChange={(e) => handleStrInput(e)}
                   className="w-full op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content text-xs"
-                  placeholder="Enter pdf password"
+                  placeholder={t("enter-pdf-password")}
                   onInvalid={(e) =>
                     e.target.setCustomValidity(t("input-required"))
                   }
@@ -768,16 +769,16 @@ const Forms = (props) => {
                 <div className="flex gap-1 justify-center items-center">
                   <div className="flex justify-between items-center op-input op-input-bordered op-input-sm w-full h-full text-[13px]">
                     <div className="break-all cursor-default">
-                      {t("file-selected")}: {selectedFiles.join(", ")}
+                      {t("files-selected")}: {selectedFiles.join(", ")}
                     </div>
                     <div
                       onClick={() => {
                         setFileUpload("");
                         setSelectedFiles([]);
                       }}
-                      className="cursor-pointer px-[10px] text-[20px] font-bold text-red-500"
+                      className="cursor-pointer ml-[10px] text-[20px] font-bold"
                     >
-                      <i className="fa-light fa-xmark"></i>
+                      <i className="fa-light fa-xmark inline-flex h-7 w-7 items-center justify-center rounded-full hover:bg-red-100 text-red-500" />
                     </div>
                   </div>
                 </div>
@@ -959,6 +960,7 @@ const Forms = (props) => {
                                 e.target.setCustomValidity(t("input-required"))
                               }
                               onInput={(e) => e.target.setCustomValidity("")}
+                              min={1}
                               required
                             />
                           </div>
@@ -1058,6 +1060,7 @@ const Forms = (props) => {
                                 e.target.setCustomValidity(t("input-required"))
                               }
                               onInput={(e) => e.target.setCustomValidity("")}
+                              min={1}
                               required
                             />
                           </div>
@@ -1108,6 +1111,7 @@ const Forms = (props) => {
                               e.target.setCustomValidity(t("input-required"))
                             }
                             onInput={(e) => e.target.setCustomValidity("")}
+                            min={1}
                             required
                           />
                         </div>

apps/OpenSign/src/pages/Managesign.jsx

@@ -12,7 +12,7 @@ import { SaveFileSize } from "../constant/saveFileSize";
 import Alert from "../primitives/Alert";
 import Loader from "../primitives/Loader";
 import { useTranslation } from "react-i18next";
-import { sanitizeFileName } from "../utils";
+import { sanitizeFileName, withSessionValidation } from "../utils";
 
 const COLOR_CLASS = {
   blue: "text-blue-600",
@@ -140,7 +140,7 @@ const ManageSign = () => {
       setIsValue(false);
     }
   };
-  const handleSubmit = async (e) => {
+  const handleSubmit = withSessionValidation(async (e) => {
     e.preventDefault();
     const isUrl = image?.includes("https") || image?.includes("http");
     if (!isvalue) {
@@ -205,7 +205,7 @@ const ManageSign = () => {
         });
       }
     }
-  };
+  });
   function base64StringtoFile(base64String, filename) {
     let arr = base64String.split(","),
       // type of uploaded image

apps/OpenSign/src/pages/Opensigndrive.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef, useCallback } from "react";
-import { lazyWithRetry } from "../utils";
+import { lazyWithRetry, withSessionValidation } from "../utils";
 import "../styles/opensigndrive.css";
 import {
   getThemeIconColor,
@@ -279,7 +279,7 @@ function Opensigndrive() {
     setNewFolderName(value);
   };
   //function for create folder
-  const handleAddFolder = async (e) => {
+  const handleAddFolder = withSessionValidation(async (e) => {
     e.preventDefault();
     if (newFolderName) {
       setIsFolderLoader(true);
@@ -313,7 +313,12 @@ function Opensigndrive() {
           const template = new Parse.Object(foldercls);
           template.set("Name", newFolderName);
           template.set("Type", "Folder");
-
+          const ExtCls = JSON.parse(localStorage.getItem("Extand_Class"));
+          template.set("ExtUserPtr", {
+            __type: "Pointer",
+            className: "contracts_Users",
+            objectId: ExtCls[0].objectId
+          });
           if (parentId) {
             template.set("Folder", folderPtr);
           }
@@ -338,7 +343,7 @@ function Opensigndrive() {
     } else {
       setError(t("fill-field"));
     }
-  };
+  });
 
   //function to use sorting document list according to type and order
   const sortedBy = (appInfo, type, order) => {

apps/OpenSign/src/pages/PdfRequestFiles.jsx

@@ -71,11 +71,13 @@ import PlaceholderCopy from "../components/pdf/PlaceholderCopy";
 import TextFontSetting from "../components/pdf/TextFontSetting";
 import WidgetsValueModal from "../components/pdf/WidgetsValueModal";
 import * as utils from "../utils";
+import { useWindowSize } from "../hook/useWindowSize";
 
 function PdfRequestFiles(
 ) {
   const { t } = useTranslation();
   const dispatch = useDispatch();
+  const windowSize = useWindowSize();
   const prefillImg = useSelector((state) => state.widget.prefillImg);
   const isShowModal = useSelector((state) => state.widget.isShowModal);
   const defaultSignImg = useSelector((state) => state.widget.defaultSignImg);
@@ -208,10 +210,10 @@ function PdfRequestFiles(
     };
 
     // Use setTimeout to wait for the transition to complete
-    const timer = setTimeout(updateSize, 100); // match the transition duration
+    const timer = setTimeout(updateSize, 150); // match the transition duration
     return () => clearTimeout(timer);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [divRef.current, isSidebar]);
+  }, [divRef.current, isSidebar, windowSize?.width]);
   const redirectUrl = pdfDetails?.[0]?.RedirectUrl || "";
   useEffect(() => {
     if (isredirectCanceled) return; // Stop the redirect timer if canceled
@@ -1394,10 +1396,10 @@ function PdfRequestFiles(
   };
 
   const clickOnZoomIn = () => {
-    onClickZoomIn(scale, zoomPercent, setScale, setZoomPercent);
+    onClickZoomIn(zoomPercent, setScale, setZoomPercent);
   };
   const clickOnZoomOut = () => {
-    onClickZoomOut(zoomPercent, scale, setZoomPercent, setScale);
+    onClickZoomOut(zoomPercent, setZoomPercent, setScale);
   };
   const handleDownloadBtn = async () => {
     const url = pdfDetails?.[0]?.SignedUrl || pdfDetails?.[0]?.URL;

apps/OpenSign/src/pages/PlaceHolderSign.jsx

@@ -11,7 +11,6 @@ import SignerListPlace from "../components/pdf/SignerListPlace";
 import Header from "../components/pdf/PdfHeader";
 import ShareButton from "../primitives/ShareButton";
 import {
-  replaceMailVaribles,
   pdfNewWidthFun,
   contractDocument,
   contractUsers,
@@ -39,7 +38,6 @@ import {
   handleSignatureType,
   getBase64FromUrl,
   generatePdfName,
-  mailTemplate,
   getOriginalWH,
   defaultMailBody,
   defaultMailSubject
@@ -60,30 +58,27 @@ import TourContentWithBtn from "../primitives/TourContentWithBtn";
 import HandleError from "../primitives/HandleError";
 import LoaderWithMsg from "../primitives/LoaderWithMsg";
 import LinkUserModal from "../primitives/LinkUserModal";
-import { EmailBody } from "../components/pdf/EmailBody";
 import LottieWithLoader from "../primitives/DotLottieReact";
 import Alert from "../primitives/Alert";
 import WidgetsValueModal from "../components/pdf/WidgetsValueModal";
 import * as utils from "../utils";
 import { resetWidgetState, setPrefillImg } from "../redux/reducers/widgetSlice";
 import EditDocument from "../components/pdf/EditTemplate";
+import CustomizeMail from "../components/pdf/CustomizeMail";
+import { useWindowSize } from "../hook/useWindowSize";
 
 function PlaceHolderSign() {
   const { t } = useTranslation();
   const copyUrlRef = useRef(null);
   const dispatch = useDispatch();
+  const windowSize = useWindowSize();
   const prefillImg = useSelector((state) => state.widget.prefillImg);
   const isShowModal = useSelector((state) => state.widget.isShowModal);
   const editorRef = useRef();
   const navigate = useNavigate();
-  const [defaultBody, setDefaultBody] = useState("");
-  const [defaultSubject, setDefaultSubject] = useState("");
-  const [requestSubject, setRequestSubject] = useState("");
-  const [requestBody, setRequestBody] = useState("");
-  const [tenantMailTemplate, setTenantMailTemplate] = useState({
-    body: "",
-    subject: ""
-  });
+  const [isMailModal, setIsMailModal] = useState(false);
+  const [customizeMail, setCustomizeMail] = useState({ body: "", subject: "" });
+  const [defaultMail, setDefaultMail] = useState({ body: "", subject: "" });
   const [pdfDetails, setPdfDetails] = useState([]);
   const [isMailSend, setIsMailSend] = useState(false);
   const [allPages, setAllPages] = useState(null);
@@ -137,7 +132,7 @@ function PlaceHolderSign() {
   const [isCheckbox, setIsCheckbox] = useState(false);
   const [isNameModal, setIsNameModal] = useState(false);
   const [mailStatus, setMailStatus] = useState("");
-  const [isCurrUser, setIsCurrUser] = useState(false);
+  const [isCurrUser, setIsCurrUser] = useState("");
   const [pdfArrayBuffer, setPdfArrayBuffer] = useState("");
   const isSidebar = useSelector((state) => state.sidebar.isOpen);
   const [showRotateAlert, setShowRotateAlert] = useState({
@@ -148,7 +143,6 @@ function PlaceHolderSign() {
     status: false,
     message: ""
   });
-  const [isCustomize, setIsCustomize] = useState(false);
   const [zoomPercent, setZoomPercent] = useState(0);
   const [scale, setScale] = useState(1);
   const [pdfBase64Url, setPdfBase64Url] = useState("");
@@ -184,12 +178,6 @@ function PlaceHolderSign() {
     );
     if (user) {
       try {
-        const defaultRequestBody = defaultMailBody;
-        const defaultSubject = defaultMailSubject;
-        setDefaultBody(defaultRequestBody);
-        setDefaultSubject(defaultSubject);
-        setRequestBody(defaultRequestBody);
-        setRequestSubject(defaultSubject);
         const tenantDetails = await getTenantDetails(user?.objectId);
         if (tenantDetails && tenantDetails === "user does not exist!") {
           alert(t("user-not-exist"));
@@ -198,14 +186,22 @@ function PlaceHolderSign() {
           const filterSignTypes = signatureType?.filter(
             (x) => x.enabled === true
           );
-          if (tenantDetails?.RequestBody) {
-            setRequestBody(tenantDetails?.RequestBody);
-            setRequestSubject(tenantDetails?.RequestSubject);
-            setTenantMailTemplate({
-              body: tenantDetails?.RequestBody,
-              subject: tenantDetails?.RequestSubject
-            });
-          }
+          const extUser =
+            localStorage.getItem("Extand_Class") &&
+            JSON.parse(localStorage.getItem("Extand_Class"))?.[0];
+          const subject = tenantDetails?.RequestSubject ?? "";
+          const body = tenantDetails?.RequestBody ?? "";
+          //customize mail state is handle to when user want to customize already set tenant email format then use that format
+          const userSubject =
+                subject;
+          const userBody =
+                body;
+
+          setCustomizeMail({
+            subject: userSubject ?? defaultMailSubject,
+            body: userBody ?? defaultMailBody
+          });
+          setDefaultMail({ subject: userSubject, body: userBody });
           return filterSignTypes;
         }
       } catch (e) {
@@ -230,10 +226,10 @@ function PlaceHolderSign() {
       }
     };
     // Use setTimeout to wait for the transition to complete
-    const timer = setTimeout(updateSize, 100); // match the transition duration
+    const timer = setTimeout(updateSize, 150); // match the transition duration
     return () => clearTimeout(timer);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [divRef.current, isSidebar]);
+  }, [divRef.current, isSidebar, windowSize?.width]);
   //function for get document details
   const getDocumentDetails = async () => {
     const tenantSignTypes = await fetchTenantDetails();
@@ -319,9 +315,9 @@ function PlaceHolderSign() {
       updatedPdfDetails[0].SignatureType = updatedSignatureType;
       setPdfDetails(updatedPdfDetails);
       if (documentData?.[0]?.RequestBody && documentData?.[0]?.RequestSubject) {
-        setTenantMailTemplate({
-          body: documentData?.[0]?.RequestBody,
-          subject: documentData?.[0]?.RequestSubject
+        setDefaultMail({
+          subject: documentData?.[0]?.RequestSubject,
+          body: documentData?.[0]?.RequestBody
         });
       }
       if (
@@ -872,7 +868,6 @@ function PlaceHolderSign() {
       });
       const isSignYourSelfFlow = false;
       try {
-        const docId = pdfDetails[0]?.objectId;
         //pdfOriginalWH contained all pdf's pages width,height & pagenumber in array format
         const pdfBase64 = await embedWidgetsToDoc(
           placeholder,
@@ -924,12 +919,16 @@ function PlaceHolderSign() {
       //if empty widget exist and user try to send document then throw tour message
       for (const placeholder of getPlaceholder || []) {
         const requiredWidgets = placeholder.pos.filter(
-          (position) => position.type !== "checkbox"
+          (position) => position?.options?.status === "required"
         );
         for (const widget of requiredWidgets) {
-          const hasResponse = widget?.options?.response;
-          const hasDefault = widget?.options?.defaultValue;
-          if (!hasResponse && !hasDefault && !isPrefillEmpty) {
+          const response =
+            widget?.options?.response || widget?.options?.defaultValue;
+          const isEmptyResponse =
+            !response ||
+            (typeof response === "string" && response.trim() === "") ||
+            (Array.isArray(response) && response.length === 0);
+          if (isEmptyResponse && !isPrefillEmpty) {
             isPrefillEmpty = true;
             unfilledTextWidgetId = widget.key;
             setPageNumber(placeholder.pageNumber);
@@ -1034,7 +1033,7 @@ function PlaceHolderSign() {
     }
   };
   //function to use save placeholder details in contracts_document
-  const saveDocumentDetails = async () => {
+  const saveDocumentDetails = utils.withSessionValidation(async () => {
     setIsUiLoading(true);
     let signerMail = signersdata.slice();
     // For "Send in order", only consider the first signer
@@ -1058,16 +1057,6 @@ function PlaceHolderSign() {
         : 15;
       const currentUser = signersdata.find((x) => x.Email === currentId);
       setCurrentId(currentUser?.objectId);
-      if (
-        pdfDetails?.[0]?.SendinOrder &&
-        pdfDetails?.[0]?.SendinOrder === true
-      ) {
-        const currentUserMail = Parse.User.current()?.getEmail();
-        const isCurrentUser = signerMail?.[0]?.Email === currentUserMail;
-        setIsCurrUser(isCurrentUser);
-      } else {
-        setIsCurrUser(currentUser?.objectId ? true : false);
-      }
       // Compute expiry date with extra days
       let updateExpiryDate = new Date();
       updateExpiryDate.setDate(updateExpiryDate.getDate() + addExtraDays);
@@ -1093,7 +1082,6 @@ function PlaceHolderSign() {
             }
           }
         );
-        setIsMailSend(true);
         setIsLoading({ isLoad: false });
         setIsUiLoading(false);
         setIsSendAlert({ mssg: "confirm", alert: true });
@@ -1102,6 +1090,21 @@ function PlaceHolderSign() {
           updatedPdfDetails[0].Name = docTitle;
           setPdfDetails(updatedPdfDetails);
         }
+        const ownerId = pdfDetails[0].ExtUserPtr?.UserId?.objectId;
+        const firstSigner = signersdata[0];
+        const isOwner = firstSigner?.UserId?.objectId === ownerId;
+        if (pdfDetails[0]?.SendinOrder && isOwner) {
+          setIsSend(true);
+          setIsCurrUser(currentUser?.objectId);
+        } else {
+          const currentSigner = signersdata?.find(
+            (x) => x?.UserId?.objectId === ownerId
+          );
+          if (currentSigner) {
+            setIsCurrUser(currentSigner?.objectId);
+          }
+          setIsMailModal(true);
+        }
       } catch (e) {
         console.log("error", e);
         alert(t("something-went-wrong-mssg"));
@@ -1109,7 +1112,7 @@ function PlaceHolderSign() {
     } else {
       setIsUiLoading(false);
     }
-  };
+  });
 
   const copytoclipboard = (text) => {
     copytoData(text);
@@ -1151,7 +1154,7 @@ function PlaceHolderSign() {
               className="flex flex-row items-center op-link op-link-primary"
             >
               <i className="fa-light fa-copy" />
-              <span className="hidden md:block ml-1">{t("copy-link")}</span>
+              <span className="hidden md:block ml-1 ">{t("copy-link")}</span>
             </button>
             <ShareButton
               title={t("sign-url")}
@@ -1165,201 +1168,10 @@ function PlaceHolderSign() {
       );
     });
   };
-  const sendEmailToSigners = async () => {
-    let htmlReqBody;
-    setIsUiLoading(true);
-    setIsSendAlert({});
-    let sendMail;
-    const expireDate = pdfDetails?.[0].ExpiryDate.iso;
-    const newDate = new Date(expireDate);
-    const localExpireDate = newDate.toLocaleDateString("en-US", {
-      day: "numeric",
-      month: "long",
-      year: "numeric"
-    });
-
-    let senderEmail =
-      pdfDetails?.[0]?.ExtUserPtr?.Email;
-    let senderPhone = pdfDetails?.[0]?.ExtUserPtr?.Phone;
-    let signerMail = signersdata.slice();
-    if (pdfDetails?.[0]?.SendinOrder && pdfDetails?.[0]?.SendinOrder === true) {
-      signerMail.splice(1);
-    }
-
-    for (let i = 0; i < signerMail.length; i++) {
-      try {
-        let url = `${localStorage.getItem("baseUrl")}functions/sendmailv3`;
-        const headers = {
-          "Content-Type": "application/json",
-          "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-          sessionToken: localStorage.getItem("accesstoken")
-        };
-        const objectId = signerMail[i].objectId;
-        const hostUrl = window.location.origin;
-        //encode this url value `${pdfDetails?.[0].objectId}/${signerMail[i].Email}/${objectId}` to base64 using `btoa` function
-        const encodeBase64 = btoa(
-          `${pdfDetails?.[0].objectId}/${signerMail[i].Email}/${objectId}`
-        );
-        let signPdf = `${hostUrl}/login/${encodeBase64}`;
-        const orgName = pdfDetails[0]?.ExtUserPtr.Company
-          ? pdfDetails[0].ExtUserPtr.Company
-          : "";
-        const senderName =
-          pdfDetails?.[0].ExtUserPtr.Name;
-        const documentName = `${pdfDetails?.[0].Name}`;
-        let replaceVar;
-
-        if (
-          requestBody &&
-          requestSubject &&
-          isCustomize
-        ) {
-          const replacedRequestBody = requestBody.replace(/"/g, "'");
-          htmlReqBody =
-            "<html><head><meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /></head><body>" +
-            replacedRequestBody +
-            "</body> </html>";
-
-          const variables = {
-            document_title: documentName,
-            note: pdfDetails?.[0]?.Note,
-            sender_name: senderName,
-            sender_mail: senderEmail,
-            sender_phone: senderPhone || "",
-            receiver_name: signerMail[i]?.Name || "",
-            receiver_email: signerMail[i].Email,
-            receiver_phone: signerMail[i]?.Phone || "",
-            expiry_date: localExpireDate,
-            company_name: orgName,
-            signing_url: signPdf
-          };
-          replaceVar = replaceMailVaribles(
-            requestSubject,
-            htmlReqBody,
-            variables
-          );
-        } else if (
-          tenantMailTemplate?.body &&
-          tenantMailTemplate?.subject
-        ) {
-          const mailBody = tenantMailTemplate?.body;
-          const mailSubject = tenantMailTemplate?.subject;
-          const replacedRequestBody = mailBody.replace(/"/g, "'");
-          const htmlReqBody =
-            "<html><head><meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /></head><body>" +
-            replacedRequestBody +
-            "</body> </html>";
-          const variables = {
-            document_title: documentName,
-            note: pdfDetails?.[0]?.Note,
-            sender_name: senderName,
-            sender_mail: senderEmail,
-            sender_phone: senderPhone || "",
-            receiver_name: signerMail[i]?.Name || "",
-            receiver_email: signerMail[i].Email,
-            receiver_phone: signerMail[i]?.Phone || "",
-            expiry_date: localExpireDate,
-            company_name: orgName,
-            signing_url: signPdf
-          };
-          replaceVar = replaceMailVaribles(mailSubject, htmlReqBody, variables);
-        }
-        const mailparam = {
-          senderName: senderName,
-          note: pdfDetails?.[0]?.Note || "",
-          senderMail: senderEmail,
-          title: documentName,
-          organization: orgName,
-          localExpireDate: localExpireDate,
-          signingUrl: signPdf
-        };
-        let params = {
-          extUserId: owner?.objectId,
-          recipient: signerMail[i].Email,
-          subject: replaceVar?.subject
-            ? replaceVar?.subject
-            : mailTemplate(mailparam).subject,
-          replyto: senderEmail,
-          from:
-            senderEmail,
-          html: replaceVar?.body
-            ? replaceVar?.body
-            : mailTemplate(mailparam).body
-        };
-
-        sendMail = await axios.post(url, params, { headers: headers });
-      } catch (error) {
-        console.log("error", error);
-      }
-    }
-    if (sendMail?.data?.result?.status === "success") {
-      setMailStatus("success");
-      try {
-        let data;
-        if (
-          requestBody &&
-          requestSubject &&
-          isCustomize
-        ) {
-          data = {
-            RequestBody: htmlReqBody,
-            RequestSubject: requestSubject,
-            SendMail: true
-          };
-        } else if (
-          tenantMailTemplate?.body &&
-          tenantMailTemplate?.subject
-        ) {
-          data = {
-            RequestBody: tenantMailTemplate?.body,
-            RequestSubject: tenantMailTemplate?.subject,
-            SendMail: true
-          };
-        } else {
-          data = { SendMail: true };
-        }
-        try {
-          await axios.put(
-            `${localStorage.getItem(
-              "baseUrl"
-            )}classes/contracts_Document/${documentId}`,
-            data,
-            {
-              headers: {
-                "Content-Type": "application/json",
-                "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-                "X-Parse-Session-Token": localStorage.getItem("accesstoken")
-              }
-            }
-          );
-        } catch (err) {
-          console.log("axois err ", err);
-        }
-      } catch (e) {
-        console.log("error", e);
-      }
-      setIsSend(true);
-      setIsMailSend(true);
-      setIsLoading({ isLoad: false });
-      setIsUiLoading(false);
-    } else if (sendMail?.data?.result?.status === "quota-reached") {
-      setMailStatus("quotareached");
-      setIsSend(true);
-      setIsMailSend(true);
-      setIsUiLoading(false);
-    }
-    else {
-      setMailStatus("failed");
-      setIsSend(true);
-      setIsMailSend(true);
-      setIsUiLoading(false);
-    }
-  };
   const handleDontShow = (isChecked) => {
     setIsDontShow(isChecked);
   };
   //here you can add your messages in content and selector is key of particular steps
-
   const tourConfig = [
     {
       selector: '[data-tut="prefillTour"]',
@@ -1460,6 +1272,9 @@ function PlaceHolderSign() {
     isHideLabel,
     layout
   ) => {
+    const isPrefill = signerPos.some(
+      (x) => x?.Role === "prefill" && x.Id === uniqueId
+    );
     const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
     if (filterSignerPos.length > 0) {
       const getPlaceHolder = filterSignerPos[0].placeHolder;
@@ -1525,16 +1340,21 @@ function PlaceHolderSign() {
                     ...position.options,
                     name: dropdownName,
                     values: dropdownOptions,
-                    validation: {
-                      minRequiredCount: minCount,
-                      maxRequiredCount: maxCount
-                    },
+                    ...(!isPrefill
+                      ? {
+                          validation: {
+                            minRequiredCount: minCount,
+                            maxRequiredCount: maxCount
+                          }
+                        }
+                      : {}),
                     defaultValue: defaultValue,
                     layout: layout,
                     isReadOnly: isReadOnly || false,
                     isHideLabel: isHideLabel || false,
                     fontSize: textSize || 12,
-                    fontColor: textColor || "black"
+                    fontColor: textColor || "black",
+                    ...(isPrefill ? { status } : {})
                   }
                 };
               }
@@ -1903,10 +1723,10 @@ function PlaceHolderSign() {
     }
   };
   const clickOnZoomIn = () => {
-    onClickZoomIn(scale, zoomPercent, setScale, setZoomPercent);
+    onClickZoomIn(zoomPercent, setScale, setZoomPercent);
   };
   const clickOnZoomOut = () => {
-    onClickZoomOut(zoomPercent, scale, setZoomPercent, setScale);
+    onClickZoomOut(zoomPercent, setZoomPercent, setScale);
   };
   //`handleRotationFun` function is used to roatate pdf particular page
   const handleRotationFun = async (rotateDegree) => {
@@ -2076,90 +1896,17 @@ function PlaceHolderSign() {
               pdfDetails={pdfDetails}
             />
             <div className=" w-full md:w-[95%] ">
-              {/* this modal is used show alert set placeholder for all signers before send mail */}
-              <ModalUi
-                isOpen={isSendAlert.alert && isSendAlert.mssg === "confirm"}
-                title={isSendAlert.mssg === "confirm" && t("send-mail")}
-                handleClose={() => handleCloseSendmailModal()}
-              >
-                <div className="max-h-96 overflow-y-scroll scroll-hide p-[20px] text-base-content">
-                  {isSendAlert.mssg === "confirm" && (
-                    <>
-                      {!isCustomize && <span>{t("placeholder-alert-3")}</span>}
-                      {
-                          isCustomize && (
-                            <>
-                              <EmailBody
-                                editorRef={editorRef}
-                                requestBody={requestBody}
-                                requestSubject={requestSubject}
-                                handleOnchangeRequest={handleOnchangeRequest}
-                                setRequestSubject={setRequestSubject}
-                              />
-                              <div
-                                className="flex justify-end items-center gap-1 mt-2 op-link op-link-primary"
-                                onClick={() => {
-                                  setRequestBody(defaultBody);
-                                  setRequestSubject(defaultSubject);
-                                }}
-                              >
-                                <span>{t("reset-to-default")}</span>
-                              </div>
-                            </>
-                          )
-                      }
-                      <div className="flex flex-row items-center gap-2 md:gap-6 mt-2">
-                        <div className="flex flex-row gap-2">
-                          <button
-                            onClick={() => sendEmailToSigners()}
-                            className="op-btn op-btn-primary font-[500] text-sm shadow"
-                          >
-                            {t("send")}
-                          </button>
-                          {isCustomize && (
-                            <button
-                              onClick={() => setIsCustomize(false)}
-                              className="op-btn op-btn-ghost font-[500] text-sm"
-                            >
-                              {t("close")}
-                            </button>
-                          )}
-                        </div>
-                        {
-                            !isCustomize && (
-                              <span
-                                className="op-link op-link-accent text-sm"
-                                onClick={() => setIsCustomize(!isCustomize)}
-                              >
-                                {t("cutomize-email")}
-                              </span>
-                            )
-                        }
-                      </div>
-                    </>
-                  )}
-                  {isSendAlert.mssg === "confirm" && (
-                    <>
-                      <div className="flex justify-center items-center mt-3">
-                        <span className="h-[1px] w-[20%] bg-[#ccc]"></span>
-                        <span className="ml-[5px] mr-[5px]">{t("or")}</span>
-                        <span className="h-[1px] w-[20%] bg-[#ccc]"></span>
-                      </div>
-                      <div className="my-3">{handleShareList()}</div>
-                      <p id="copyUrl" ref={copyUrlRef} className="hidden"></p>
-                    </>
-                  )}
-                </div>
-              </ModalUi>
               {/* this modal is used show send mail  message and after send mail success message */}
               <ModalUi
                 isOpen={isSend}
                 title={
-                  mailStatus === "success"
-                    ? t("mails-sent")
-                    : mailStatus === "quotareached"
-                      ? t("quota-mail-head")
-                      : t("mail-not-delivered")
+                  !pdfDetails[0]?.SendinOrder
+                    ? mailStatus === "success"
+                      ? t("mails-sent")
+                      : mailStatus === "quotareached"
+                        ? t("quota-mail-head")
+                        : t("mail-not-delivered")
+                    : t("mail-status-head")
                 }
                 handleClose={() => {
                   setIsSend(false);
@@ -2168,70 +1915,104 @@ function PlaceHolderSign() {
                 }}
               >
                 <div className="h-[100%] p-[20px] text-base-content">
-                  {mailStatus === "success" ? (
-                    <div className="text-center mb-[10px]">
-                      <LottieWithLoader />
-                      {pdfDetails[0].SendinOrder ? (
-                        <p>
-                          {isCurrUser
-                            ? t("placeholder-mail-alert-you")
-                            : t("placeholder-mail-alert", {
-                                name: signersdata[0]?.Name
-                              })}
-                        </p>
+                  <div className="flex flex-col items-center gap-5">
+                    <div>
+                      {mailStatus === "success" ? (
+                        <div className="text-center mb-[10px]">
+                          <LottieWithLoader />
+                          {pdfDetails[0].SendinOrder ? (
+                            <p>
+                              {isCurrUser
+                                ? t("placeholder-mail-alert-you")
+                                : t("placeholder-mail-alert", {
+                                    name: signersdata[0]?.Name
+                                  })}
+                            </p>
+                          ) : (
+                            <p>{t("placeholder-alert-4")}</p>
+                          )}
+                        </div>
+                      ) : mailStatus === "quotareached" ? (
+                        <div className="flex flex-col gap-y-3">
+                          <div className="my-3">{handleShareList()}</div>
+                        </div>
+                      ) : mailStatus === "failed" ? (
+                        <p>{t("mail-failed")} </p>
                       ) : (
-                        <p>{t("placeholder-alert-4")}</p>
+                        <div className="mb-[10px]">
+                          {!pdfDetails[0]?.SendinOrder &&
+                            (mailStatus === "dailyquotareached" ? (
+                              <p>{t("daily-quota-reached")}</p>
+                            ) : (
+                              <p>{t("placeholder-alert-6")}</p>
+                            ))}
+                          {isCurrUser && (
+                            <span className="mt-1">
+                              {t("placeholder-alert-5")}
+                            </span>
+                          )}
+                        </div>
                       )}
-                      {isCurrUser && <p>{t("placeholder-alert-5")}</p>}
+
+                      {mailStatus !== "quotareached" &&
+                        mailStatus !== "failed" && (
+                          <div
+                            className={
+                              mailStatus === "success"
+                                ? "flex justify-center mt-1"
+                                : "flex items-center justify-center mt-7"
+                            }
+                          >
+                            {isCurrUser && (
+                              <button
+                                onClick={() => handleRecipientSign()}
+                                type="button"
+                                className="op-btn op-btn-primary mr-1"
+                              >
+                                {t("sign-now")}
+                              </button>
+                            )}
+                            <button
+                              onClick={() => {
+                                setIsSend(false);
+                                setSignerPos([]);
+                                navigate("/report/1MwEuxLEkF");
+                              }}
+                              type="button"
+                              className="op-btn op-btn-ghost text-base-content"
+                            >
+                              {isCurrUser ? t("no") : t("close")}
+                            </button>
+                          </div>
+                        )}
                     </div>
-                  ) : mailStatus === "quotareached" ? (
-                    <div className="flex flex-col gap-y-3">
-                      <div className="my-3">{handleShareList()}</div>
-                    </div>
-                  ) : (
-                    <div className="mb-[10px]">
-                      {mailStatus === "dailyquotareached" ? (
-                        <p>{t("daily-quota-reached")}</p>
-                      ) : (
-                        <p>{t("placeholder-alert-6")}</p>
+                    {mailStatus !== "success" &&
+                      isCurrUser &&
+                      pdfDetails[0]?.SendinOrder && (
+                        <div className="op-divider text-base-content mx-[0%] my-1 font-medium">
+                          {t("or")}
+                        </div>
                       )}
-                      {isCurrUser && (
-                        <p className="mt-1">{t("placeholder-alert-5")}</p>
-                      )}
-                    </div>
-                  )}
-                  {!mailStatus && (
-                    <div className="w-full h-[1px] bg-[#9f9f9f] my-[15px]"></div>
-                  )}
-                  {mailStatus !== "quotareached" && (
-                    <div
-                      className={
-                        mailStatus === "success"
-                          ? "flex justify-center mt-1"
-                          : ""
-                      }
-                    >
-                      {isCurrUser && (
-                        <button
-                          onClick={() => handleRecipientSign()}
-                          type="button"
-                          className="op-btn op-btn-primary mr-1"
+                    {mailStatus !== "success" &&
+                      pdfDetails[0]?.SendinOrder &&
+                      isCurrUser && (
+                        <div
+                          className="op-btn op-btn-outline w-[50%] md:w-[35%] mt-1"
+                          onClick={() => {
+                            setIsSend(false);
+                            setIsMailModal(true);
+                          }}
                         >
-                          {t("yes")}
-                        </button>
+                          <i
+                            className="fa-regular fa-envelope"
+                            style={{ color: "#002864", fontSize: "19px" }}
+                          ></i>{" "}
+                          <span>{t("send-to-email")}</span>
+                        </div>
                       )}
-                      <button
-                        onClick={() => {
-                          setIsSend(false);
-                          setSignerPos([]);
-                          navigate("/report/1MwEuxLEkF");
-                        }}
-                        type="button"
-                        className="op-btn op-btn-ghost text-base-content"
-                      >
-                        {isCurrUser ? t("no") : t("close")}
-                      </button>
-                    </div>
+                  </div>
+                  {!mailStatus && (
+                    <div className="op-divider text-base-content mx-[0%] mt-3"></div>
                   )}
                 </div>
               </ModalUi>
@@ -2478,6 +2259,19 @@ function PlaceHolderSign() {
               )}
             </div>
           </div>
+          <CustomizeMail
+            setIsMailModal={setIsMailModal}
+            setCustomizeMail={setCustomizeMail}
+            documentId={documentId}
+            signerList={signersdata}
+            setIsSend={setIsSend}
+            setMailStatus={setMailStatus}
+            customizeMail={customizeMail}
+            defaultMail={defaultMail}
+            isMailModal={isMailModal}
+            handleShareList={handleShareList}
+            setCurrUserId={setIsCurrUser}
+          />
         </div>
       )}
       {isShowModal[currWidgetsDetails?.key] && (
@@ -2495,6 +2289,7 @@ function PlaceHolderSign() {
           setUniqueId={setUniqueId}
           signatureTypes={signatureType}
           penColors={pdfDetails?.[0]?.PenColors}
+          role={roleName}
         />
       )}
       <ModalUi

apps/OpenSign/src/pages/Preferences.jsx

@@ -6,7 +6,6 @@ import Tooltip from "../primitives/Tooltip";
 import {
   getTenantDetails,
   handleSignatureType,
-  openInNewTab,
   signatureTypes,
   usertimezone
 } from "../constant/Utils";
@@ -16,15 +15,25 @@ import TimezoneSelector from "../components/preferences/TimezoneSelector";
 import DateFormatSelector from "../components/preferences/DateFormatSelector";
 import FilenameFormatSelector from "../components/preferences/FilenameFormatSelector";
 import axios from "axios";
-import MailTemplateEditor from "../components/preferences/MailTemplateEditor";
+import { withSessionValidation } from "../utils";
+import { WidgetsTab, EmailTab } from "../components/preferences/tabs";
+import {
+  setUserInfo,
+  setTenantInfo,
+  setLoader,
+  setTopLoader,
+  setAlertInfo
+} from "../redux/reducers/userReducer";
+import { useDispatch, useSelector } from "react-redux";
 
 const Preferences = () => {
   const appName =
     "OpenSign™";
   const { t } = useTranslation();
-  const [isalert, setIsAlert] = useState({ type: "success", msg: "" });
-  const [isTopLoader, setIsTopLoader] = useState(false);
-  const [isLoader, setIsLoader] = useState(false);
+  const dispatch = useDispatch();
+  const { isLoader, isTopLoader, alertInfo } = useSelector(
+    (state) => state.user
+  );
   const [signatureType, setSignatureType] = useState([]);
   const [errMsg, setErrMsg] = useState("");
   const [isNotifyOnSignatures, setIsNotifyOnSignatures] = useState();
@@ -42,21 +51,28 @@ const Preferences = () => {
   const [is12HourTime, setIs12HourTime] = useState(false);
   const [isLTVEnabled, setIsLTVEnabled] = useState(false);
   const [fileNameFormat, setFileNameFormat] = useState("DOCNAME");
-  const [tenantInfo, setTenantInfo] = useState({});
 
   useEffect(() => {
     fetchSignType();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const fetchSignType = async () => {
-    setIsTopLoader(true);
+  const showAlert = (type, msg) => {
+    dispatch(setAlertInfo({ type, msg }));
+    setTimeout(() => {
+      dispatch(setAlertInfo({ type: "success", msg: "" }));
+    }, 2000);
+  };
+
+  const fetchSignType = withSessionValidation(async () => {
+    dispatch(setTopLoader(true));
     const EmailTab = [
       { name: "email", title: t("email"), icon: "fa-light fa-envelope" }
     ];
 
     const arr = [
       generaltab,
+      { name: "widgets", title: t("widgets"), icon: "fa-light fa-list" },
       ...EmailTab,
     ];
     setTab(arr);
@@ -67,7 +83,7 @@ const Preferences = () => {
         )
       );
       const tenantDetails = await getTenantDetails(user?.objectId);
-      setTenantInfo(tenantDetails);
+      dispatch(setTenantInfo(tenantDetails));
       const signatureType = tenantDetails?.SignatureType || [];
       const tenantSignTypes = signatureType?.filter((x) => x.enabled === true);
       const extUser = await axios.post(
@@ -81,68 +97,74 @@ const Preferences = () => {
           }
         }
       );
-      const getUser = extUser.data?.result;
-      if (getUser) {
-        const _getUser = JSON.parse(JSON.stringify(getUser));
-        setIsNotifyOnSignatures(
-          _getUser?.NotifyOnSignatures !== undefined
-            ? _getUser?.NotifyOnSignatures
-            : true
-        );
-        setTimezone(_getUser?.Timezone || usertimezone);
-        if (tenantSignTypes?.length > 0) {
-          const signatureType = _getUser?.SignatureType || signatureTypes;
-          const updatedSignatureType = await handleSignatureType(
-            tenantSignTypes,
-            signatureType
-          );
-          setSignatureType(updatedSignatureType);
-        } else {
-          const SignatureType = _getUser?.SignatureType || signatureTypes;
-          setSignatureType(SignatureType);
-        }
-        setSendinOrder(
-          _getUser?.SendinOrder !== undefined ? _getUser?.SendinOrder : true
-        );
-        setIsTourEnabled(
-          _getUser?.IsTourEnabled !== undefined ? _getUser?.IsTourEnabled : true
-        );
-        setDateFormat(
-          _getUser?.DateFormat !== undefined
-            ? _getUser?.DateFormat
-            : "MM/DD/YYYY"
-        );
-        setIs12HourTime(
-          _getUser?.Is12HourTime !== undefined ? _getUser?.Is12HourTime : false
-        );
-        setIsLTVEnabled(
-          _getUser?.IsLTVEnabled !== undefined ? _getUser?.IsLTVEnabled : false
-        );
-        const downloadFilenameFormat =
-          _getUser?.DownloadFilenameFormat || "DOCNAME";
-        setFileNameFormat(downloadFilenameFormat);
+      const getUser = extUser?.data?.result;
+      if (!getUser) {
+        setErrMsg(t("something-went-wrong-mssg"));
+        return;
       }
+      const _getUser = JSON.parse(JSON.stringify(getUser));
+      dispatch(setUserInfo(_getUser));
+      setIsNotifyOnSignatures(
+        _getUser?.NotifyOnSignatures !== undefined
+          ? _getUser?.NotifyOnSignatures
+          : true
+      );
+      setTimezone(_getUser?.Timezone || usertimezone);
+      if (tenantSignTypes?.length > 0) {
+        const signatureType = _getUser?.SignatureType || signatureTypes;
+        const updatedSignatureType = await handleSignatureType(
+          tenantSignTypes,
+          signatureType
+        );
+        setSignatureType(updatedSignatureType);
+      } else {
+        setSignatureType(_getUser?.SignatureType || signatureTypes);
+      }
+      setSendinOrder(
+        _getUser?.SendinOrder !== undefined ? _getUser?.SendinOrder : true
+      );
+      setIsTourEnabled(
+        _getUser?.IsTourEnabled !== undefined ? _getUser?.IsTourEnabled : true
+      );
+      setDateFormat(
+        _getUser?.DateFormat !== undefined ? _getUser?.DateFormat : "MM/DD/YYYY"
+      );
+      setIs12HourTime(
+        _getUser?.Is12HourTime !== undefined ? _getUser?.Is12HourTime : false
+      );
+      setIsLTVEnabled(
+        _getUser?.IsLTVEnabled !== undefined ? _getUser?.IsLTVEnabled : false
+      );
+      const downloadFilenameFormat =
+        _getUser?.DownloadFilenameFormat || "DOCNAME";
+      setFileNameFormat(downloadFilenameFormat);
     } catch (err) {
       console.error("Error while getting user details: ", err);
       setErrMsg(t("something-went-wrong-mssg"));
     } finally {
-      setIsTopLoader(false);
+      dispatch(setTopLoader(false));
     }
-  };
+  });
 
   // `handleCheckboxChange` is trigger when user enable/disable checkbox of respective type
   const handleCheckboxChange = (index) => {
-    // Create a copy of the signatureType array
-    const updatedSignatureType = [...signatureType];
-    // Toggle the enabled value for the clicked item
-    updatedSignatureType[index].enabled = !updatedSignatureType[index].enabled;
-    // Update the state with the modified array
-    setSignatureType(updatedSignatureType);
+    // // Create a copy of the signatureType array
+    // const updatedSignatureType = [...signatureType];
+    // // Toggle the enabled value for the clicked item
+    // updatedSignatureType[index].enabled = !updatedSignatureType[index].enabled;
+    // // Update the state with the modified array
+    // setSignatureType(updatedSignatureType);
+
+    setSignatureType((prev) =>
+      prev.map((item, i) =>
+        i === index ? { ...item, enabled: !item.enabled } : item
+      )
+    );
   };
 
   // `handleSave` is used save updated value signature type
-  const handleSave = async () => {
-    setIsLoader(true);
+  const handleSave = withSessionValidation(async () => {
+    dispatch(setLoader(true));
     const Timezone = timezone || usertimezone;
     if (
       signatureType.length > 0 ||
@@ -156,20 +178,12 @@ const Preferences = () => {
           enabledSignTypes?.length === 1 &&
           enabledSignTypes[0]?.name === "default";
         if (enabledSignTypes.length === 0) {
-          setIsAlert({
-            type: "danger",
-            msg: t("at-least-one-signature-type")
-          });
-          setIsLoader(false);
-          setTimeout(() => setIsAlert({ type: "success", msg: "" }), 2000);
+          showAlert("danger", t("at-least-one-signature-type"));
+          dispatch(setLoader(false));
           return;
         } else if (isDefaultSignTypeOnly) {
-          setIsAlert({
-            type: "danger",
-            msg: t("expect-default-one-signature-type")
-          });
-          setIsLoader(false);
-          setTimeout(() => setIsAlert({ type: "success", msg: "" }), 2000);
+          showAlert("danger", t("expect-default-one-signature-type"));
+          dispatch(setLoader(false));
           return;
         } else {
           params = { ...params, SignatureType: signatureType };
@@ -190,7 +204,7 @@ const Preferences = () => {
         };
         const updateRes = await Parse.Cloud.run("updatepreferences", params);
         if (updateRes) {
-          setIsAlert({ type: "success", msg: t("saved-successfully") });
+          showAlert("success", t("saved-successfully"));
           let extUser =
             localStorage.getItem("Extand_Class") &&
             JSON.parse(localStorage.getItem("Extand_Class"))?.[0];
@@ -207,13 +221,11 @@ const Preferences = () => {
         }
       } catch (err) {
         console.error("Error updating signature type: ", err);
-        setIsAlert({ type: "danger", msg: err.message });
+        showAlert("danger", err.message);
       }
-
-      setTimeout(() => setIsAlert({ type: "success", msg: "" }), 1500);
-      setIsLoader(false);
+      dispatch(setLoader(false));
     }
-  };
+  });
 
   // `handleNotifySignChange` is trigger when user change radio of notify on signatures
   const handleNotifySignChange = (value) => {
@@ -227,7 +239,7 @@ const Preferences = () => {
 
   return (
     <React.Fragment>
-      {isalert.msg && <Alert type={isalert.type}>{isalert.msg}</Alert>}
+      {alertInfo.msg && <Alert type={alertInfo.type}>{alertInfo.msg}</Alert>}
       {isTopLoader ? (
         <div className="flex justify-center items-center h-screen">
           <Loader />
@@ -261,20 +273,25 @@ const Preferences = () => {
                       onClick={() => setactiveTab(ind)}
                       key={ind}
                       role="tab"
-                      className={`${activeTab === ind ? "op-tab-active" : ""} op-tab text-xs md:text-base pb-2 md:pb-0 transition-all `}
+                      className={` op-tab text-xs md:text-base pb-2 md:pb-0 transition-all`}
                       aria-selected={activeTab === ind}
                       aria-controls={`panel-${tabData.title}`}
                     >
                       <i className={tabData.icon}></i>
-                      <span className="ml-1 md:ml-2">{tabData.title}</span>
+                      <span
+                        className={`${activeTab === ind ? "block" : "hidden"} md:block ml-1`}
+                        title={tabData?.title}
+                      >
+                        {tabData.title}
+                      </span>
                     </div>
                   ))}
                 </div>
               </div>
               <div
-                id="panel-general"
+                id={`panel-${activeTab}`}
                 className="px-6 pt-4 pb-6"
-                aria-labelledby="tab-general"
+                aria-labelledby={`tab-${activeTab}`}
                 role="tabpanel"
               >
                 {tabName(activeTab) === "general" && (
@@ -308,7 +325,9 @@ const Preferences = () => {
                               <div className="p-[5px] ml-2">
                                 <ol className="list-disc">
                                   <li>
-                                    <span className="font-bold">Draw: </span>
+                                    <span className="font-bold">
+                                      {t("draw")}:{" "}
+                                    </span>
                                     <span>
                                       {t("allowed-signature-types-help.l1")}
                                     </span>
@@ -320,7 +339,9 @@ const Preferences = () => {
                                     </span>
                                   </li>
                                   <li>
-                                    <span className="font-bold">Upload: </span>
+                                    <span className="font-bold">
+                                      {t("upload")}:{" "}
+                                    </span>
                                     <span>
                                       {t("allowed-signature-types-help.l3")}
                                     </span>
@@ -616,20 +637,8 @@ const Preferences = () => {
                     </div>
                   </div>
                 )}
-                {tabName(activeTab) === "email" && (
-                  <div className="flex flex-col mb-4">
-                      <MailTemplateEditor
-                        info={
-                              tenantInfo
-                        }
-                        tenantId={tenantInfo?.objectId}
-                      />
-                  </div>
-                )}
-                {tabName(activeTab) === "security" && (
-                  <>
-                  </>
-                )}
+                {tabName(activeTab) === "widgets" && <WidgetsTab />}
+                {tabName(activeTab) === "email" && <EmailTab />}
               </div>
             </div>
           )}

apps/OpenSign/src/pages/Report.jsx

@@ -10,6 +10,7 @@ import ColumnSelector from "../components/ColumnSelector";
 import TemplatesReport from "../reports/template/TemplatesReport";
 import DocumentsReport from "../reports/document/DocumentsReport";
 import { templateReportTour } from "../json/ReportTour";
+import { withSessionValidation } from "../utils";
 
 const Report = () => {
   const { id } = useParams();
@@ -31,7 +32,9 @@ const Report = () => {
   const [columnLabels, setColumnLabels] = useState({});
   const [defaultColumns, setDefaultColumns] = useState([]);
   const [isColumnModal, setIsColumnModal] = useState(false);
+  const [searchLoader, setSearchLoader] = useState(false);
   const debounceTimer = useRef(null);
+  const searchAbortRef = useRef(null); // holds AbortController
   // Number of documents to display per page (should always be half of docLimit for proper pagination)
   const docPerPage = 10;
   // Number of documents to fetch per API call
@@ -61,6 +64,10 @@ const Report = () => {
       setIsNextRecord(false);
       // Here it'll abort the fetch
       abortController.abort();
+      if (searchAbortRef.current) {
+        searchAbortRef.current.abort();
+        searchAbortRef.current = null;
+      }
     };
     // eslint-disable-next-line
   }, [id]);
@@ -73,13 +80,23 @@ const Report = () => {
     // eslint-disable-next-line
   }, [isNextRecord]);
 
-  const handleSearchChange = async (e) => {
+  const handleSearchChange = withSessionValidation(async (e) => {
     const term = e.target.value.toLowerCase();
     setSearchTerm(term);
     if (debounceTimer.current) {
       clearTimeout(debounceTimer.current);
     }
+    // 2) abort any in-flight request triggered by older debounce
+    if (searchAbortRef.current) {
+      searchAbortRef.current.abort();
+      searchAbortRef.current = null;
+    }
     debounceTimer.current = setTimeout(async () => {
+      // create controller for THIS request
+      const controller = new AbortController();
+      searchAbortRef.current = controller;
+
+      setSearchLoader(true);
       try {
         const headers = {
           "Content-Type": "application/json",
@@ -90,21 +107,31 @@ const Report = () => {
         const res = await axios.post(
           url,
           { reportId: id, searchTerm: term, skip: 0, limit: docPerPage },
-          { headers }
+          { headers: headers, signal: controller.signal } // ✅ axios abort
         );
+        // if you want to be extra safe (ignore late responses)
+        if (controller.signal.aborted) return;
+
         const data = res.data?.result || [];
         if (!data.error) {
           setList(data);
           setIsMoreDocs(data.length >= docPerPage);
           setIsNextRecord(false);
           setIsSearchResult(true);
+          setSearchLoader(false);
         }
       } catch (err) {
-        console.error("Search error:", err);
+        // ✅ ignore abort errors
+        const isAbort =
+          err?.name === "CanceledError" ||
+          err?.code === "ERR_CANCELED" ||
+          err?.message?.toLowerCase?.().includes("canceled");
+        if (!isAbort) console.error("Search error:", err);
+        setSearchLoader(false);
       }
     }, 300);
     setIsSearchResult(false);
-  };
+  });
 
   const handleSearchPaste = (e) => {
     setTimeout(() => {
@@ -119,113 +146,113 @@ const Report = () => {
       }
     };
   }, []);
-  const getReportData = async (
-    skipUserRecord = 0,
-    limit = 20,
-    term = searchTerm
-  ) => {
-    // setIsLoader(true);
-    const json = reportJson(id);
-    if (json) {
-      setActions(json.actions);
-      const savedCols = JSON.parse(
-        localStorage.getItem("reportColumns") || "{}"
-      );
-      const visible = savedCols[id]?.visible || json.heading;
-      const labels = savedCols[id]?.labels || {};
-      if (!savedCols[id] || id === "contacts") {
-        savedCols[id] = { visible: json.heading, labels: {} };
-        localStorage.setItem("reportColumns", JSON.stringify(savedCols));
-      }
-      setVisibleColumns(visible);
-      setColumnLabels(labels);
-      setHeading(visible);
-      setDefaultColumns(json.heading);
-      setReportName(json.reportName);
-      setReportHelp(json?.helpMsg);
-      const currentUser = Parse.User.current().id;
+  const getReportData = withSessionValidation(
+    async (skipUserRecord = 0, limit = 20, term = searchTerm) => {
+      // setIsLoader(true);
+      const json = reportJson(id);
+      if (json) {
+        setActions(json.actions);
+        const savedCols = JSON.parse(
+          localStorage.getItem("reportColumns") || "{}"
+        );
+        const visible = savedCols[id]?.visible || json.heading;
+        const labels = savedCols[id]?.labels || {};
+        if (!savedCols[id] || id === "contacts") {
+          savedCols[id] = { visible: json.heading, labels: {} };
+          localStorage.setItem("reportColumns", JSON.stringify(savedCols));
+        }
+        setVisibleColumns(visible);
+        setColumnLabels(labels);
+        setHeading(visible);
+        setDefaultColumns(json.heading);
+        setReportName(json.reportName);
+        setReportHelp(json?.helpMsg);
+        const currentUser = Parse.User.current().id;
 
-      const headers = {
-        "Content-Type": "application/json",
-        "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-        sessiontoken: localStorage.getItem("accesstoken")
-      };
-      try {
-        const skipRecord = id === "4Hhwbp482K" ? 0 : skipUserRecord;
-        const limitRecord = id === "4Hhwbp482K" ? 200 : limit;
-        const params = { reportId: id, skip: skipRecord, limit: limitRecord };
-        if (term) {
-          params.searchTerm = term;
-        }
-        const url = `${localStorage.getItem("baseUrl")}functions/getReport`;
-        const res = await axios.post(url, params, {
-          headers: headers,
-          signal: abortController.signal // is used to cancel fetch query
-        });
-        const extraHeads =
-          id === "4Hhwbp482K" ? [...extraCols, "Expiry Date"] : extraCols;
-        setAllColumns(Array.from(new Set([...json.heading, ...extraHeads])));
-        if (id === "6TeaPr321t") {
-          setTourData(templateReportTour);
-        }
-        if (id === "4Hhwbp482K") {
-          const listData = res.data?.result.filter((x) => x.Signers.length > 0);
-          let arr = [];
-          for (const obj of listData) {
-            const isSigner = obj?.Signers?.some(
-              (item) => item.UserId.objectId === currentUser
+        const headers = {
+          "Content-Type": "application/json",
+          "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
+          sessiontoken: localStorage.getItem("accesstoken")
+        };
+        try {
+          const skipRecord = id === "4Hhwbp482K" ? 0 : skipUserRecord;
+          const limitRecord = id === "4Hhwbp482K" ? 200 : limit;
+          const params = { reportId: id, skip: skipRecord, limit: limitRecord };
+          if (term) {
+            params.searchTerm = term;
+          }
+          const url = `${localStorage.getItem("baseUrl")}functions/getReport`;
+          const res = await axios.post(url, params, {
+            headers: headers,
+            signal: abortController.signal // is used to cancel fetch query
+          });
+          const extraHeads =
+            id === "4Hhwbp482K" ? [...extraCols, "Expiry Date"] : extraCols;
+          setAllColumns(Array.from(new Set([...json.heading, ...extraHeads])));
+          if (id === "6TeaPr321t") {
+            setTourData(templateReportTour);
+          }
+          if (id === "4Hhwbp482K") {
+            const listData = res.data?.result.filter(
+              (x) => x.Signers.length > 0
             );
-            if (isSigner) {
-              let isRecord;
-              if (obj?.AuditTrail && obj?.AuditTrail.length > 0) {
-                isRecord = obj?.AuditTrail.some(
-                  (item) =>
-                    item?.UserPtr?.UserId?.objectId === currentUser &&
-                    item.Activity === "Signed"
-                );
-              } else {
-                isRecord = false;
-              }
-              if (isRecord === false) {
-                arr.push(obj);
+            let arr = [];
+            for (const obj of listData) {
+              const isSigner = obj?.Signers?.some(
+                (item) => item.UserId.objectId === currentUser
+              );
+              if (isSigner) {
+                let isRecord;
+                if (obj?.AuditTrail && obj?.AuditTrail.length > 0) {
+                  isRecord = obj?.AuditTrail.some(
+                    (item) =>
+                      item?.UserPtr?.UserId?.objectId === currentUser &&
+                      item.Activity === "Signed"
+                  );
+                } else {
+                  isRecord = false;
+                }
+                if (isRecord === false) {
+                  arr.push(obj);
+                }
               }
             }
-          }
-          if (arr.length === docPerPage) {
-            setIsMoreDocs(true);
-          } else {
-            setIsMoreDocs(false);
-          }
-          setList((prevRecord) =>
-            prevRecord.length > 0 ? [...prevRecord, ...arr] : arr
-          );
-        } else {
-          if (res.data.result.length >= docPerPage) {
-            setIsMoreDocs(true);
-          } else {
-            setIsMoreDocs(false);
-          }
-          if (!res.data.result.error) {
-            setIsNextRecord(false);
+            if (arr.length === docPerPage) {
+              setIsMoreDocs(true);
+            } else {
+              setIsMoreDocs(false);
+            }
             setList((prevRecord) =>
-              prevRecord.length > 0
-                ? [...prevRecord, ...res.data.result]
-                : res.data.result
+              prevRecord.length > 0 ? [...prevRecord, ...arr] : arr
             );
+          } else {
+            if (res.data.result.length >= docPerPage) {
+              setIsMoreDocs(true);
+            } else {
+              setIsMoreDocs(false);
+            }
+            if (!res.data.result.error) {
+              setIsNextRecord(false);
+              setList((prevRecord) =>
+                prevRecord.length > 0
+                  ? [...prevRecord, ...res.data.result]
+                  : res.data.result
+              );
+            }
+          }
+          setIsLoader(false);
+        } catch (err) {
+          const isCancel = axios.isCancel(err);
+          if (!isCancel) {
+            console.error("getreport error", err);
+            setIsLoader(false);
           }
         }
+      } else {
         setIsLoader(false);
-      } catch (err) {
-        const isCancel = axios.isCancel(err);
-        if (!isCancel) {
-          console.log("err ", err);
-          setIsLoader(false);
-        }
       }
-    } else {
-      setIsLoader(false);
     }
-  };
+  );
 
   const commonProps = {
     ReportName: reportName,
@@ -243,6 +270,7 @@ const Report = () => {
     handleSearchPaste,
     isSearchResult,
     columnLabels,
+    searchLoader,
     openColumnModal: () => setIsColumnModal(true)
   };
   return (

apps/OpenSign/src/pages/SignyourselfPdf.jsx

@@ -69,6 +69,7 @@ import {
 import WidgetsValueModal from "../components/pdf/WidgetsValueModal";
 import WidgetNameModal from "../components/pdf/WidgetNameModal";
 import CellsSettingModal from "../components/pdf/CellsSettingModal";
+import { useWindowSize } from "../hook/useWindowSize";
 import {
   applyNumberFormulasToPages,
 } from "../utils";
@@ -77,6 +78,7 @@ function SignYourSelf() {
   const { t } = useTranslation();
   const { docId } = useParams();
   const dispatch = useDispatch();
+  const windowSize = useWindowSize();
   const isShowModal = useSelector((state) => state.widget.isShowModal);
   const appName =
     "OpenSign™";
@@ -189,10 +191,10 @@ function SignYourSelf() {
     };
 
     // Use setTimeout to wait for the transition to complete
-    const timer = setTimeout(updateSize, 100); // match the transition duration
+    const timer = setTimeout(updateSize, 150); // match the transition duration
     return () => clearTimeout(timer);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [divRef.current, isSidebar]);
+  }, [divRef.current, isSidebar, windowSize?.width]);
   //function for get document details for perticular signer with signer'object id
   const getDocumentDetails = async (showComplete) => {
     try {
@@ -381,7 +383,8 @@ function SignYourSelf() {
           dragTypeValue,
           getWidgetValue,
           owner,
-          xyPosition
+          xyPosition,
+          true
         )
       };
       dropData.push(dropObj);
@@ -434,7 +437,9 @@ function SignYourSelf() {
           dragTypeValue,
           getWidgetValue,
           owner,
-          xyPosition
+          xyPosition,
+          pdfDetails?.[0],
+          true
         ),
         scale: containerScale
       };
@@ -1161,10 +1166,10 @@ function SignYourSelf() {
     setCurrWidgetsDetails({});
   };
   const clickOnZoomIn = () => {
-    onClickZoomIn(scale, zoomPercent, setScale, setZoomPercent);
+    onClickZoomIn(zoomPercent, setScale, setZoomPercent);
   };
   const clickOnZoomOut = () => {
-    onClickZoomOut(zoomPercent, scale, setZoomPercent, setScale);
+    onClickZoomOut(zoomPercent, setZoomPercent, setScale);
   };
   //`handleRotationFun` function is used to roatate pdf particular page
   const handleRotationFun = async (rotateDegree) => {

apps/OpenSign/src/pages/TemplatePlaceholder.jsx

@@ -64,17 +64,16 @@ import Alert from "../primitives/Alert";
 import LottieWithLoader from "../primitives/DotLottieReact";
 import * as utils from "../utils";
 import CustomizeMail from "../components/pdf/CustomizeMail";
-import {
-  resetWidgetState,
-  setPrefillImg
-} from "../redux/reducers/widgetSlice.js";
+import { resetWidgetState, setPrefillImg } from "../redux/reducers/widgetSlice";
 import ShareButton from "../primitives/ShareButton";
+import { useWindowSize } from "../hook/useWindowSize";
 
 const TemplatePlaceholder = () => {
   const { t } = useTranslation();
   const { templateId } = useParams();
+  const windowSize = useWindowSize();
   const dispatch = useDispatch();
-  const prefillImg = useSelector((state) => state.widget.prefillImg);
+  const { prefillImg, isBulkLoader } = useSelector((state) => state.widget);
   const divRef = useRef(null);
   const navigate = useNavigate();
   const numPages = 1;
@@ -186,11 +185,11 @@ const TemplatePlaceholder = () => {
     };
 
     // Use setTimeout to wait for the transition to complete
-    const timer = setTimeout(updateSize, 100); // match the transition duration
+    const timer = setTimeout(updateSize, 150); // match the transition duration
 
     return () => clearTimeout(timer);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [divRef.current, isSidebar]);
+  }, [divRef.current, isSidebar, windowSize?.width]);
 
 
   //function to fetch tenant Details
@@ -235,7 +234,7 @@ const TemplatePlaceholder = () => {
     }
   };
   // `fetchTemplate` function in used to get Template from server and setPlaceholder ,setSigner if present
-  const fetchTemplate = async () => {
+  const fetchTemplate = utils.withSessionValidation(async () => {
     try {
       const tenantSignTypes = await fetchTenantDetails();
       const params = { templateId: templateId };
@@ -419,7 +418,7 @@ const TemplatePlaceholder = () => {
         setHandleError(t("something-went-wrong-mssg"));
       }
     }
-  };
+  });
 
   //function for setting position after drop signature button over pdf
   const addPositionOfSignature = (item, monitor) => {
@@ -974,6 +973,22 @@ const TemplatePlaceholder = () => {
         showAlert("danger", "please attach all role to signer");
       } else if (res?.status === "success") {
         setDocumentId(res.id);
+        const ownerId = pdfDetails[0].ExtUserPtr?.UserId?.objectId;
+        const firstSigner = signersdata[0];
+        const isOwner = firstSigner?.UserId?.objectId === ownerId;
+        if (pdfDetails[0]?.SendinOrder && isOwner) {
+          setCurrUserId(firstSigner?.objectId);
+          setIsSend(true);
+          return;
+        } else {
+          const currentSigner = signersdata?.find(
+            (x) => x?.UserId?.objectId === ownerId
+          );
+          if (currentSigner) {
+            setCurrUserId(currentSigner?.objectId);
+          }
+        }
+
         setIsMailModal(true);
       }
     } catch (e) {
@@ -1333,6 +1348,9 @@ const TemplatePlaceholder = () => {
     isHideLabel,
     layout
   ) => {
+    const isPrefill = signerPos.some(
+      (x) => x?.Role === "prefill" && x.Id === uniqueId
+    );
     const filterSignerPos = signerPos.filter((data) => data.Id === uniqueId);
     if (filterSignerPos.length > 0) {
       const getPlaceHolder = filterSignerPos[0].placeHolder;
@@ -1400,16 +1418,21 @@ const TemplatePlaceholder = () => {
                     ...position.options,
                     name: dropdownName,
                     values: dropdownOptions,
-                    validation: {
-                      minRequiredCount: minCount,
-                      maxRequiredCount: maxCount
-                    },
+                    ...(!isPrefill
+                      ? {
+                          validation: {
+                            minRequiredCount: minCount,
+                            maxRequiredCount: maxCount
+                          }
+                        }
+                      : {}),
                     layout: layout,
                     isReadOnly: isReadOnly || false,
                     defaultValue: defaultValue,
                     isHideLabel: isHideLabel || false,
                     fontSize: textSize || 12,
-                    fontColor: textColor || "black"
+                    fontColor: textColor || "black",
+                    ...(isPrefill ? { status } : {})
                   }
                 };
               }
@@ -1592,10 +1615,10 @@ const TemplatePlaceholder = () => {
   };
 
   const clickOnZoomIn = () => {
-    onClickZoomIn(scale, zoomPercent, setScale, setZoomPercent);
+    onClickZoomIn(zoomPercent, setScale, setZoomPercent);
   };
   const clickOnZoomOut = () => {
-    onClickZoomOut(zoomPercent, scale, setZoomPercent, setScale);
+    onClickZoomOut(zoomPercent, setZoomPercent, setScale);
   };
   //`handleRotationFun` function is used to roatate pdf particular page
   const handleRotationFun = async (rotateDegree) => {
@@ -1704,7 +1727,6 @@ const TemplatePlaceholder = () => {
     setIsCreateDocModal(true);
     setIsUiLoading(false);
   };
-
   const handleUseButton = async () => {
     setIsCreateDocModal(false);
     //this function is used to open modal to show signers list
@@ -1713,8 +1735,9 @@ const TemplatePlaceholder = () => {
   };
 
   const handleRecipientSign = (docId, currUserId) => {
+    const docObjId = docId || documentId;
     if (currUserId) {
-      navigate(`/recipientSignPdf/${docId}/${currUserId}`);
+      navigate(`/recipientSignPdf/${docObjId}/${currUserId}`);
     } else {
       navigate(`/recipientSignPdf/${docId}`);
     }
@@ -2163,6 +2186,7 @@ const TemplatePlaceholder = () => {
           setUniqueId={setUniqueId}
           signatureTypes={signatureType}
           penColors={pdfDetails?.[0]?.PenColors}
+          role={roleName}
         />
       )}
       <RotateAlert
@@ -2187,11 +2211,13 @@ const TemplatePlaceholder = () => {
       <ModalUi
         isOpen={isSend}
         title={
-          mailStatus === "success"
-            ? t("mails-sent")
-            : mailStatus === "quotareached"
-              ? t("quota-mail-head")
-              : t("mail-not-delivered")
+          !pdfDetails[0]?.SendinOrder
+            ? mailStatus === "success"
+              ? t("mails-sent")
+              : mailStatus === "quotareached"
+                ? t("quota-mail-head")
+                : t("mail-not-delivered")
+            : t("mail-status-head")
         }
         handleClose={() => {
           setIsSend(false);
@@ -2199,66 +2225,103 @@ const TemplatePlaceholder = () => {
         }}
       >
         <div className="h-[100%] p-[20px] text-base-content">
-          {mailStatus === "success" ? (
-            <div className="text-center mb-[10px]">
-              <LottieWithLoader />
-              {documentDetails.SendinOrder ? (
-                <p>
-                  {currUserId
-                    ? t("placeholder-mail-alert-you")
-                    : t("placeholder-mail-alert", {
-                        name: signersdata[0]?.Name
-                      })}
-                </p>
+          <div className="flex flex-col items-center gap-5">
+            <div>
+              {mailStatus === "success" ? (
+                <div className="text-center mb-[10px]">
+                  <LottieWithLoader />
+                  {documentDetails.SendinOrder ? (
+                    <p>
+                      {currUserId
+                        ? t("placeholder-mail-alert-you")
+                        : t("placeholder-mail-alert", {
+                            name: signersdata[0]?.Name
+                          })}
+                    </p>
+                  ) : (
+                    <p>{t("placeholder-alert-4")}</p>
+                  )}
+                </div>
+              ) : mailStatus === "quotareached" ? (
+                <div className="flex flex-col gap-y-3">
+                  <div className="my-3">{handleShareList()}</div>
+                </div>
+              ) : mailStatus === "failed" ? (
+                <p>{t("mail-failed")} </p>
               ) : (
-                <p>{t("placeholder-alert-4")}</p>
+                <div className="mb-[10px]">
+                  {!pdfDetails[0]?.SendinOrder &&
+                    (mailStatus === "dailyquotareached" ? (
+                      <p>{t("daily-quota-reached")}</p>
+                    ) : (
+                      <p>{t("placeholder-alert-6")}</p>
+                    ))}
+                  {currUserId && (
+                    <span className="mt-1">{t("placeholder-alert-5")}</span>
+                  )}
+                </div>
               )}
-              {currUserId && <p>{t("placeholder-alert-5")}</p>}
-            </div>
-          ) : mailStatus === "quotareached" ? (
-            <div className="flex flex-col gap-y-3">
-              <div className="my-3">{handleShareList()}</div>
-            </div>
-          ) : (
-            <div className="mb-[10px]">
-              {mailStatus === "dailyquotareached" ? (
-                <p>{t("daily-quota-reached")}</p>
-              ) : (
-                <p>{t("placeholder-alert-6")}</p>
-              )}
-              {currUserId && <p className="mt-1">{t("placeholder-alert-5")}</p>}
-            </div>
-          )}
-          {!mailStatus && (
-            <div className="w-full h-[1px] bg-[#9f9f9f] my-[15px]"></div>
-          )}
-          {mailStatus !== "quotareached" && (
-            <div
-              className={
-                mailStatus === "success" ? "flex justify-center mt-1" : ""
-              }
-            >
-              {currUserId && (
-                <button
-                  onClick={() =>
-                    handleRecipientSign(documentDetails?.objectId, currUserId)
+              {mailStatus !== "quotareached" && (
+                <div
+                  className={
+                    mailStatus === "success"
+                      ? "flex justify-center mt-1"
+                      : "flex items-center justify-center mt-7"
                   }
-                  type="button"
-                  className="op-btn op-btn-primary mr-1"
                 >
-                  {t("yes")}
-                </button>
+                  {currUserId && (
+                    <button
+                      onClick={() =>
+                        handleRecipientSign(
+                          documentDetails?.objectId,
+                          currUserId
+                        )
+                      }
+                      type="button"
+                      className="op-btn op-btn-primary mr-1"
+                    >
+                      {t("sign-now")}
+                    </button>
+                  )}
+                  <button
+                    onClick={() => {
+                      navigate("/report/1MwEuxLEkF");
+                    }}
+                    type="button"
+                    className="op-btn op-btn-ghost text-base-content"
+                  >
+                    {currUserId ? t("no") : t("close")}
+                  </button>
+                </div>
               )}
-              <button
-                onClick={() => {
-                  navigate("/report/1MwEuxLEkF");
-                }}
-                type="button"
-                className="op-btn op-btn-ghost text-base-content"
-              >
-                {currUserId ? t("no") : t("close")}
-              </button>
             </div>
+            {mailStatus !== "success" &&
+              currUserId &&
+              pdfDetails[0]?.SendinOrder && (
+                <div className="op-divider text-base-content mx-[0%] my-1 font-medium">
+                  {t("or")}
+                </div>
+              )}
+            {mailStatus !== "success" &&
+              currUserId &&
+              pdfDetails[0]?.SendinOrder && (
+                <div
+                  className="op-btn op-btn-outline w-[50%] md:w-[35%] mt-1"
+                  onClick={() => {
+                    setIsSend(false);
+                    setIsMailModal(true);
+                  }}
+                >
+                  <i
+                    className="fa-regular fa-envelope"
+                    style={{ color: "#002864", fontSize: "19px" }}
+                  ></i>{" "}
+                  <span>{t("send-to-email")}</span>
+                </div>
+              )}
+          </div>
+          {!mailStatus && (
+            <div className="op-divider text-base-content mx-[0%] mt-3"></div>
           )}
         </div>
       </ModalUi>

apps/OpenSign/src/pages/UserList.jsx

@@ -14,6 +14,7 @@ import DeleteUserModal from "../primitives/DeleteUserModal";
 import axios from "axios";
 import PasswordResetModal from "../primitives/PasswordResetModal";
 import { usersActions } from "../json/ReportJson";
+import { withSessionValidation } from "../utils";
 
 const heading = ["Sr.No", "Name", "Email", "Phone", "Role", "Team", "Active"];
 const UserList = () => {
@@ -168,7 +169,7 @@ const UserList = () => {
   };
   const handleClose = () => setIsActiveModal({});
 
-  const handleToggleSubmit = async (user) => {
+  const handleToggleSubmit = withSessionValidation(async (user) => {
     const index = userList.findIndex((obj) => obj.objectId === user.objectId);
     if (index !== -1) {
       setIsActiveModal({});
@@ -193,7 +194,7 @@ const UserList = () => {
         setIsActLoader({});
       }
     }
-  };
+  });
   const handleToggleBtn = (user) => {
     setIsActiveModal({ [user.objectId]: true });
   };
@@ -204,7 +205,7 @@ const UserList = () => {
     setTimeout(() => setIsAlert({ type: "success", msg: "" }), timer);
   };
 
-  const handleDeleteAccount = async (item) => {
+  const handleDeleteAccount = withSessionValidation(async (item) => {
     setDeleting(true);
     if (item?.UserId?.objectId) {
       const url = localStorage.getItem("baseUrl")?.replace(/\/app\/?$/, "/");
@@ -230,16 +231,16 @@ const UserList = () => {
       setDeleteUserRes(t("something-went-wrong-mssg"));
       setDeleting(false);
     }
-  };
+  });
   const handleCloseModal = () => {
     setIsActModal({});
     setDeleteUserRes("");
     setDeleting(false);
   };
 
-  const handleActionBtn = async (act, item) => {
+  const handleActionBtn = withSessionValidation(async (act, item) => {
       setIsActModal({ [`${act.action}_${item.objectId}`]: true });
-  };
+  });
   const handleBtnVisibility = (act, item) => {
     if (act.restrictAdmin) {
       if (item?.UserRole === "contracts_Admin") {
@@ -264,7 +265,7 @@ const UserList = () => {
     }
   };
 
-  async function submitPassword(userId, password) {
+  const submitPassword = withSessionValidation(async (userId, password) => {
     setIsLoader(true);
     setIsActModal({});
     try {
@@ -277,7 +278,7 @@ const UserList = () => {
     } finally {
       setIsLoader(false);
     }
-  }
+  });
   return (
     <div className="relative">
       {isLoader && (

apps/OpenSign/src/pages/UserProfile.jsx

@@ -6,7 +6,7 @@ import { Navigate, useNavigate } from "react-router";
 import Parse from "parse";
 import { SaveFileSize } from "../constant/saveFileSize";
 import dp from "../assets/images/dp.png";
-import { sanitizeFileName } from "../utils";
+import { sanitizeFileName, withSessionValidation } from "../utils";
 import axios from "axios";
 import Tooltip from "../primitives/Tooltip";
 import {
@@ -124,7 +124,7 @@ function UserProfile() {
   };
 
   //  `updateExtUser` is used to update user details in extended class
-  const updateExtUser = async (obj) => {
+  const updateExtUser = withSessionValidation(async (obj) => {
     try {
       const extData = JSON.parse(localStorage.getItem("Extand_Class"));
       const ExtUserId = extData?.[0]?.objectId;
@@ -152,10 +152,10 @@ function UserProfile() {
       const json = JSON.parse(JSON.stringify([res]));
       const extRes = JSON.stringify(json);
       localStorage.setItem("Extand_Class", extRes);
-    } catch (e) {
-      console.log("error in save data in contracts_Users class");
+    } catch (err) {
+      console.log("error in save data in contracts_Users class", err);
     }
-  };
+  });
   // file upload function
   const fileUpload = async (file) => {
     if (file) {

apps/OpenSign/src/primitives/DateWidgetModal.jsx

@@ -0,0 +1,27 @@
+import "../styles/signature.css";
+import { createPortal } from "react-dom";
+
+const DateWidgetModal = ({
+  children,
+  title,
+  isOpen
+}) => {
+  if (!isOpen) return null;
+
+  return createPortal(
+    <div id="dateWidgetModal" className="items-center op-modal op-modal-open">
+      <div className="md:min-w-[500px] op-modal-box p-0 max-h-90 overflow-y-auto hide-scrollbar text-sm">
+        {title && (
+          <h3 className="text-base-content text-left font-bold text-lg pt-[15px] px-[20px]">
+            {title}
+          </h3>
+        )}
+
+        <div>{children}</div>
+      </div>
+    </div>,
+    document.body
+  );
+};
+
+export default DateWidgetModal;

apps/OpenSign/src/primitives/ModalUi.jsx

@@ -1,5 +1,5 @@
-import React from "react";
 import "../styles/signature.css";
+import Loader from "./Loader";
 
 const ModalUi = ({
   children,
@@ -10,11 +10,14 @@ const ModalUi = ({
   showClose = true,
   reduceWidth,
   position,
-  crossColor
+  crossColor,
+  showScrollBar = false,
+  isLoader = false
 }) => {
   const width = reduceWidth;
   const isBottom = position === "bottom" ? "items-end pb-2 !bg-black/10" : "";
   const crossBtnColor = crossColor ?? "text-base-content";
+  const hideScrollBar = !showScrollBar ? "hide-scrollbar" : "";
   return (
     <>
       {isOpen && (
@@ -26,10 +29,13 @@ const ModalUi = ({
             content: { zIndex: 1001, overflow: "visible" } // Ensure modal doesn’t clip content
           }}
         >
+          {isLoader && (
+            <div className="absolute z-[999] h-full w-full flex justify-center items-center bg-black bg-opacity-30">
+              <Loader />
+            </div>
+          )}
           <div
-            className={`${
-              width || "md:min-w-[500px]"
-            } op-modal-box p-0 max-h-90 overflow-y-auto hide-scrollbar text-sm`}
+            className={`${width || "md:min-w-[500px]"} op-modal-box p-0 max-h-90 overflow-y-auto ${hideScrollBar} text-sm`}
           >
             {showHeader && (
               <>

apps/OpenSign/src/primitives/PasswordResetModal.jsx

@@ -144,7 +144,7 @@ export default function PasswordResetModal({
               <input
                 type="text"
                 className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-                placeholder="Enter password or click Autogenerate"
+                placeholder={t("enter-password-or-click-autogenerate")}
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 autoFocus

apps/OpenSign/src/primitives/RenderReportCell.jsx

@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next";
-import { formatDate } from "../constant/Utils";
+import { formatDateToDdMmmYyyy } from "../constant/Utils";
 import SignerCell from "./SignerCell";
 
 function isValidDateString(str) {
@@ -14,12 +14,12 @@ const formatRow = (row) => {
   if (Array.isArray(row)) {
     return row.map((x) => x.Name).join(", ");
   } else if (typeof row === "object" && row !== null) {
-    return row?.iso ? formatDate(row?.iso) : row?.Name || "-";
+    return row?.iso ? formatDateToDdMmmYyyy(row?.iso) : row?.Name || "-";
   } else if (typeof row === "boolean" && row !== null) {
     return row ? row?.toString() : "false";
   } else if (isValidDateString(row) && row !== null) {
     // handle createdAt and updatedAt
-    return formatDate(row) || "-";
+    return formatDateToDdMmmYyyy(row) || "-";
   } else {
     return row || "-";
   }
@@ -53,7 +53,7 @@ export const RenderReportCell = ({
           <div className="font-semibold break-words">{rowData?.Name}</div>
           {rowData?.ExpiryDate?.iso && (
             <div className="text-gray-500">
-              {t("expires")} {formatDate(rowData?.ExpiryDate?.iso)}
+              {t("expires")} {formatDateToDdMmmYyyy(rowData?.ExpiryDate?.iso)}
             </div>
           )}
         </td>
@@ -133,25 +133,29 @@ export const RenderReportCell = ({
     case "Created Date":
       return (
         <td key={col} className="p-2 text-center">
-          {rowData?.createdAt ? formatDate(rowData?.createdAt) : "-"}
+          {rowData?.createdAt ? formatDateToDdMmmYyyy(rowData?.createdAt) : "-"}
         </td>
       );
     case "Updated Date":
       return (
         <td key={col} className="p-2 text-center">
-          {rowData?.updatedAt ? formatDate(rowData?.updatedAt) : "-"}
+          {rowData?.updatedAt ? formatDateToDdMmmYyyy(rowData?.updatedAt) : "-"}
         </td>
       );
     case "Expiry Date":
       return (
         <td key={col} className="p-2 text-center">
-          {rowData?.ExpiryDate ? formatDate(rowData?.ExpiryDate?.iso) : "-"}
+          {rowData?.ExpiryDate
+            ? formatDateToDdMmmYyyy(rowData?.ExpiryDate?.iso)
+            : "-"}
         </td>
       );
     case "Sent Date":
       return (
         <td key={col} className="p-2 text-center">
-          {rowData?.DocSentAt ? formatDate(rowData?.DocSentAt?.iso) : "-"}
+          {rowData?.DocSentAt
+            ? formatDateToDdMmmYyyy(rowData?.DocSentAt?.iso)
+            : "-"}
         </td>
       );
     case "Signers":

apps/OpenSign/src/redux/reducers/userReducer.js

@@ -1,15 +1,47 @@
 import { createSlice } from "@reduxjs/toolkit";
-const initialState = { isValidSession: true };
+const initialState = {
+  userInfo: {},
+  isValidSession: true,
+  isLoader: false,
+  isTopLoader: false,
+  tenantInfo: {},
+  alertInfo: { type: "success", msg: "" }
+};
 const userReducer = createSlice({
   name: "user",
   initialState: initialState,
   reducers: {
+    setUserInfo: (state, action) => {
+      state.userInfo = action.payload;
+    },
     sessionStatus: (state, action) => {
       state.isValidSession = action.payload;
+    },
+    setTenantInfo: (state, action) => {
+      state.tenantInfo = action.payload;
+    },
+    setLoader: (state, action) => {
+      state.isLoader = action.payload;
+    },
+    setTopLoader: (state, action) => {
+      state.isTopLoader = action.payload;
+    },
+    setAlertInfo: (state, action) => {
+      state.alertInfo = {
+        type: action.payload?.type,
+        msg: action.payload?.msg
+      };
     }
   }
 });
 
-export const { sessionStatus } = userReducer.actions;
+export const {
+  setUserInfo,
+  sessionStatus,
+  setTenantInfo,
+  setLoader,
+  setTopLoader,
+  setAlertInfo
+} = userReducer.actions;
 
 export default userReducer.reducer;

apps/OpenSign/src/redux/reducers/widgetSlice.js

@@ -15,7 +15,9 @@ const initialState = {
   scrollTriggerId: "",
   prefillImg: [],
   prefillImgLoad: {},
-  typedSignFont: "Fasthand"
+  typedSignFont: "Fasthand",
+  signatureResponse: [],
+  isBulkLoader: false
 };
 
 const widgetSlice = createSlice({
@@ -67,6 +69,28 @@ const widgetSlice = createSlice({
     setMyStamp: (state, action) => {
       state.myStamp = action.payload;
     },
+    setSignatureRes: (state, action) => {
+      const payload = action.payload;
+      const { type } = payload;
+      const index = state.signatureResponse.findIndex(
+        (item) => item.type === type
+      );
+      if (index !== -1) {
+        // 🔁 Update existing object by type
+        state.signatureResponse[index] = {
+          ...state.signatureResponse[index],
+          ...payload
+        };
+        return;
+      }
+      // ➕ Add only if less than 2 objects
+      if (state.signatureResponse.length < 3) {
+        state.signatureResponse.push(payload);
+      }
+    },
+    setBulkLoader: (state, action) => {
+      state.isBulkLoader = action.payload;
+    },
     resetWidgetState: () => initialState
   }
 });
@@ -83,7 +107,9 @@ export const {
   setPrefillImg,
   setPrefillImgLoad,
   setTypedSignFont,
-  setMyStamp
+  setMyStamp,
+  setSignatureRes,
+  setBulkLoader
 } = widgetSlice.actions;
 
 export default widgetSlice.reducer;

apps/OpenSign/src/reports/contact/Contactbook.jsx

@@ -11,6 +11,7 @@ import { serverUrl_fn } from "../../constant/appinfo";
 import { useElSize } from "../../hook/useElSize";
 import ImportContact from "./ImportContact";
 import AddContact from "../../primitives/AddContact";
+import { withSessionValidation } from "../../utils";
 
 const Contactbook = (props) => {
   const titleRef = useRef(null);
@@ -110,7 +111,7 @@ const Contactbook = (props) => {
     }
   }, [isMoreDocs, pageNumbers, currentPage, setIsNextRecord]);
 
-  const handleActionBtn = async (act, item) => {
+  const handleActionBtn = withSessionValidation(async (act, item) => {
     if (act.action === "delete") {
       setIsDeleteModal({ [item.objectId]: true });
     } else if (act.action === "option") {
@@ -119,7 +120,7 @@ const Contactbook = (props) => {
       setContact(item);
       setIsModal({ [`edit_${item.objectId}`]: true });
     }
-  };
+  });
   // Get current list
   const indexOfLastDoc = currentPage * props.docPerPage;
   const indexOfFirstDoc = indexOfLastDoc - props.docPerPage;
@@ -163,7 +164,7 @@ const Contactbook = (props) => {
     props.setList((prevData) => [data, ...prevData]);
   };
 
-  const handleDelete = async (item) => {
+  const handleDelete = withSessionValidation(async (item) => {
     setIsDeleteModal({});
     setActLoader({ [`${item.objectId}`]: true });
     try {
@@ -191,7 +192,7 @@ const Contactbook = (props) => {
       showAlert("danger", t("something-went-wrong-mssg"));
       setActLoader({});
     }
-  };
+  });
   const handleClose = () => {
     setIsDeleteModal({});
   };
@@ -336,6 +337,7 @@ const Contactbook = (props) => {
             </thead>
             <tbody className="text-[12px]">
               {props.List?.length > 0 &&
+                !props.searchLoader &&
                 currentList.map((item, index) => (
                   <tr className="last:border-none border-y-[1px]" key={index}>
                     {props.heading.includes("Sr.No") && (
@@ -409,18 +411,27 @@ const Contactbook = (props) => {
                 ))}
             </tbody>
           </table>
-          {props.List?.length <= 0 && (
+          {(props.searchLoader || props.List?.length <= 0) && (
             <div className="flex flex-col items-center justify-center w-ful bg-base-100 text-base-content rounded-xl py-4">
-              <div className="w-[60px] h-[60px] overflow-hidden">
-                <img
-                  className="w-full h-full object-contain"
-                  src={pad}
-                  alt={t("no-data-avaliable")}
-                />
-              </div>
-              <div className="text-sm font-semibold">
-                {t("no-data-avaliable")}
-              </div>
+              {props.searchLoader ? (
+                <>
+                  <Loader />
+                  <div className="text-sm ">{t("loading-mssg")}</div>
+                </>
+              ) : (
+                <>
+                  <div className="w-[60px] h-[60px] overflow-hidden">
+                    <img
+                      className="w-full h-full object-contain"
+                      src={pad}
+                      alt={t("no-data-avaliable")}
+                    />
+                  </div>
+                  <div className="text-sm font-semibold">
+                    {t("no-data-avaliable")}
+                  </div>
+                </>
+              )}
             </div>
           )}
         </div>

apps/OpenSign/src/reports/contact/EditContactForm.jsx

@@ -2,12 +2,10 @@ import { useEffect, useState } from "react";
 import Loader from "../../primitives/Loader";
 import { useTranslation } from "react-i18next";
 import Parse from "parse";
-import { useDispatch } from "react-redux";
-import { sessionStatus } from "../../redux/reducers/userReducer";
+import { withSessionValidation } from "../../utils";
 
 const EditContactForm = (props) => {
   const { t } = useTranslation();
-  const dispatch = useDispatch();
   const [isLoader, setIsLoader] = useState(false);
   const [formData, setFormData] = useState({
     Name: "",
@@ -31,54 +29,45 @@ const EditContactForm = (props) => {
       setFormData((prev) => ({ ...prev, [e.target.name]: e.target.value }));
     }
   };
-  const handleSubmit = async (e) => {
+  const handleSubmit = withSessionValidation(async (e) => {
     e.preventDefault();
     e.stopPropagation();
-    try {
-      const sessionToken = Parse.User?.current()?.getSessionToken();
-      if (localStorage.getItem("TenantId") && sessionToken) {
-        if (props.handleEditContact) {
-          try {
-            setIsLoader(true);
-            const params = {
-              contactId: props.contact.objectId,
-              name: formData.Name,
-              email: formData.Email,
-              phone: formData?.Phone,
-              company: formData?.Company,
-              jobTitle: formData?.JobTitle,
-              tenantId: localStorage.getItem("TenantId")
-            };
-            const res = await Parse.Cloud.run("editcontact", params);
-            const updateContact = {
-              ...res,
-              Name: formData.Name,
-              Email: formData.Email,
-              Phone: formData?.Phone,
-              Company: formData?.Company,
-              JobTitle: formData?.JobTitle
-            };
-            props.handleEditContact(updateContact);
-          } catch (err) {
-            console.log("err in edit contact ", err);
-            if (err.code === 137) {
-              alert(t("contact-already-exists"));
-            } else {
-              alert(t("something-went-wrong-mssg"));
-            }
-          } finally {
-            setIsLoader(false);
-            props.handleClose && props.handleClose();
-          }
+
+    if (props.handleEditContact) {
+      try {
+        setIsLoader(true);
+        const params = {
+          contactId: props.contact.objectId,
+          name: formData.Name,
+          email: formData.Email,
+          phone: formData?.Phone,
+          company: formData?.Company,
+          jobTitle: formData?.JobTitle,
+          tenantId: localStorage.getItem("TenantId")
+        };
+        const res = await Parse.Cloud.run("editcontact", params);
+        const updateContact = {
+          ...res,
+          Name: formData.Name,
+          Email: formData.Email,
+          Phone: formData?.Phone,
+          Company: formData?.Company,
+          JobTitle: formData?.JobTitle
+        };
+        props.handleEditContact(updateContact);
+      } catch (err) {
+        console.log("err in edit contact ", err);
+        if (err.code === 137) {
+          alert(t("contact-already-exists"));
+        } else {
+          alert(t("something-went-wrong-mssg"));
         }
-      } else {
-        dispatch(sessionStatus(false));
+      } finally {
+        setIsLoader(false);
+        props.handleClose && props.handleClose();
       }
-    } catch (err) {
-      console.error("invalid session or missing tenantId ", err);
-      dispatch(sessionStatus(false));
     }
-  };
+  });
   return (
     <div className="h-full p-[20px]">
       {isLoader && (

apps/OpenSign/src/reports/contact/ImportContact.jsx

@@ -3,12 +3,10 @@ import { useTranslation } from "react-i18next";
 import * as XLSX from "xlsx";
 import Parse from "parse";
 import { emailRegex } from "../../constant/const";
-import { useDispatch } from "react-redux";
-import { sessionStatus } from "../../redux/reducers/userReducer";
+import { withSessionValidation } from "../../utils";
 
 const ImportContact = ({ setLoader, onImport, showAlert }) => {
   const { t } = useTranslation();
-  const dispatch = useDispatch();
   const [currentImportPage, setCurrentImportPage] = useState(1);
   const [importedData, setImportedData] = useState([]);
   const [invalidRecords, setInvalidRecords] = useState(0);
@@ -181,52 +179,42 @@ const ImportContact = ({ setLoader, onImport, showAlert }) => {
     }
   };
   // `handleImportData` is used to create batch in contact
-  const handleImportData = async (e) => {
+  const handleImportData = withSessionValidation(async (e) => {
     e.preventDefault();
     e.stopPropagation();
     setLoader(true);
     try {
-      const sessionToken = Parse.User?.current()?.getSessionToken();
-      if (localStorage.getItem("TenantId") && sessionToken) {
-        try {
-          const filterdata = importedData.map((x) => ({
-            Name: x.Name,
-            Email: x.Email,
-            Phone: x.Phone,
-            Company: x.Company,
-            JobTitle: x.JobTitle,
-            TenantId: localStorage.getItem("TenantId")
-          }));
-          const contacts = JSON.stringify(filterdata);
-          const res = await Parse.Cloud.run("createbatchcontact", { contacts });
-          if (res) {
-            showAlert(
-              "info",
-              t("contact-imported", {
-                imported: res?.success || 0,
-                failed: res?.failed || 0
-              })
-            );
-            if (res?.success > 0) {
-              setTimeout(() => window.location.reload(), 1500);
-            }
-          }
-        } catch (err) {
-          console.log("err while creating batch contact", err);
-          showAlert("danger", t("something-went-wrong-mssg"));
-        } finally {
-          onImport && onImport();
-          setImportedData([]);
-          setInvalidRecords(0);
+      const filterdata = importedData.map((x) => ({
+        Name: x.Name,
+        Email: x.Email,
+        Phone: x.Phone,
+        Company: x.Company,
+        JobTitle: x.JobTitle,
+        TenantId: localStorage.getItem("TenantId")
+      }));
+      const contacts = JSON.stringify(filterdata);
+      const res = await Parse.Cloud.run("createbatchcontact", { contacts });
+      if (res) {
+        showAlert(
+          "info",
+          t("contact-imported", {
+            imported: res?.success || 0,
+            failed: res?.failed || 0
+          })
+        );
+        if (res?.success > 0) {
+          setTimeout(() => window.location.reload(), 1500);
         }
-      } else {
-        dispatch(sessionStatus(false));
       }
     } catch (err) {
-      console.error("invalid session or missing tenantId ", err);
-      dispatch(sessionStatus(false));
+      console.log("err while creating batch contact", err);
+      showAlert("danger", t("something-went-wrong-mssg"));
+    } finally {
+      onImport && onImport();
+      setImportedData([]);
+      setInvalidRecords(0);
     }
-  };
+  });
 
   return (
     <form onSubmit={handleImportData} className="p-[20px] h-full">

apps/OpenSign/src/reports/document/DocumentsReport.jsx

@@ -28,7 +28,7 @@ import EditorToolbar, {
 } from "../../components/pdf/EditorToolbar";
 import ReactQuill from "react-quill-new";
 import "../../styles/quill.css";
-import BulkSendUi from "../../components/BulkSendUi";
+import BulkSendUi from "../../components/bulksend/BulkSendUi";
 import Loader from "../../primitives/Loader";
 import { serverUrl_fn } from "../../constant/appinfo";
 import { useTranslation } from "react-i18next";
@@ -50,7 +50,7 @@ const DocumentsReport = (props) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const location = useLocation();
-  const prefillImg = useSelector((state) => state.widget.prefillImg);
+  const { prefillImg, isBulkLoader } = useSelector((state) => state.widget);
   const isDashboard =
     location?.pathname === "/dashboard/35KBoSgoAK" ? true : false;
   const [currentPage, setCurrentPage] = useState(1);
@@ -185,7 +185,7 @@ const DocumentsReport = (props) => {
   }, [isMoreDocs, pageNumbers, currentPage, setIsNextRecord]);
 
   //function to fetch tenant Details
-  const fetchTenantDetails = async () => {
+  const fetchTenantDetails = utils.withSessionValidation(async () => {
     const user = JSON.parse(
       localStorage.getItem(
         `Parse/${localStorage.getItem("parseAppId")}/currentUser`
@@ -224,14 +224,14 @@ const DocumentsReport = (props) => {
     } else {
       alert(t("user-not-exist"));
     }
-  };
+  });
 
   // `handleURL` is used to open microapp
   const handleURL = async (item, act) => {
     navigate(`/${act.redirectUrl}?docId=${item?.objectId}`);
   };
 
-  const fetchTemplate = async (templateId) => {
+  const fetchTemplate = utils.withSessionValidation(async (templateId) => {
     try {
       const params = {
         templateId: templateId,
@@ -252,29 +252,30 @@ const DocumentsReport = (props) => {
         return axiosRes;
       }
     } catch (e) {
-      console.log("Error to fetch template in report", e);
+      console.error("fetch template in report error", e);
       showAlert("danger", t("something-went-wrong-mssg"));
       setActLoader({});
-      console.log("Error to fetch template in report", e);
     }
-  };
+  });
   //function is called when there ther no any prefill role widget exist then create direct document and navigate
-  const navigatePageToDoc = async (templateRes, placeholder, signer) => {
-    setIsPrefillModal({});
-    const res = await createDocument(
-      [templateRes || templateDeatils],
-      placeholder || xyPosition,
-      signer || signerList,
-      templateRes?.URL || templateDeatils?.URL,
-    );
-    if (res.status === "success") {
-      navigate(`/placeHolderSign/${res.id}`, {
-        state: { title: "Use Template" }
-      });
-    } else {
-      alert(t("something-went-wrong-mssg"));
+  const navigatePageToDoc = utils.withSessionValidation(
+    async (templateRes, placeholder, signer) => {
+      setIsPrefillModal({});
+      const res = await createDocument(
+        [templateRes || templateDeatils],
+        placeholder || xyPosition,
+        signer || signerList,
+        templateRes?.URL || templateDeatils?.URL,
+      );
+      if (res.status === "success") {
+        navigate(`/placeHolderSign/${res.id}`, {
+          state: { title: "Use Template" }
+        });
+      } else {
+        alert(t("something-went-wrong-mssg"));
+      }
     }
-  };
+  );
   const handleUseTemplate = async (templateId, item) => {
     try {
       const templateDeatils = await fetchTemplate(templateId);
@@ -298,12 +299,12 @@ const DocumentsReport = (props) => {
         setActLoader({});
       }
     } catch (err) {
-      console.log("err", err);
+      console.error("use template error", err);
       showAlert("danger", t("something-went-wrong-mssg"));
       setActLoader({});
     }
   };
-  const handleActionBtn = async (act, item) => {
+  const handleActionBtn = utils.withSessionValidation(async (act, item) => {
     if (act.action === "redirect") {
       handleURL(item, act);
     } else if (act.action === "delete") {
@@ -329,7 +330,7 @@ const DocumentsReport = (props) => {
     } else if (act.action === "extendexpiry") {
       setIsModal({ [`extendexpiry_${item.objectId}`]: true });
     }
-  };
+  });
 
 
   // Get current list
@@ -352,7 +353,7 @@ const DocumentsReport = (props) => {
     }
   };
 
-  const handleDelete = async (item) => {
+  const handleDelete = utils.withSessionValidation(async (item) => {
     setIsDeleteModal({});
     setActLoader({ [`${item.objectId}`]: true });
     try {
@@ -376,11 +377,11 @@ const DocumentsReport = (props) => {
         props.setList(upldatedList);
       }
     } catch (err) {
-      console.log("err", err);
+      console.error("delete document error", err);
       showAlert("danger", t("something-went-wrong-mssg"));
       setActLoader({});
     }
-  };
+  });
   const handleClose = () => {
     setIsRevoke({});
     setIsDeleteModal({});
@@ -429,7 +430,7 @@ const DocumentsReport = (props) => {
     setCopied({ [email]: true });
   };
   //function to handle revoke/decline docment
-  const handleRevoke = async (item) => {
+  const handleRevoke = utils.withSessionValidation(async (item) => {
     const senderUser = localStorage.getItem(
       `Parse/${localStorage.getItem("parseAppId")}/currentUser`
     );
@@ -472,12 +473,12 @@ const DocumentsReport = (props) => {
         setReason("");
       })
       .catch((err) => {
-        console.log("err", err);
+        console.error("decline document error", err);
         setReason("");
         showAlert("danger", t("something-went-wrong-mssg"));
         setActLoader({});
       });
-  };
+  });
 
   // `handleDownload` is used to get valid doc url available in completed report
   const handleDownload = async (item) => {
@@ -512,7 +513,7 @@ const DocumentsReport = (props) => {
         }
         setActLoader({});
       } catch (err) {
-        console.log("err in getsignedurl", err);
+        console.error("getsignedurl error", err);
         alert(t("something-went-wrong-mssg"));
         setActLoader({});
       }
@@ -635,7 +636,7 @@ const DocumentsReport = (props) => {
     setMail((prev) => ({ ...prev, subject: res.subject, body: res.body }));
     setIsNextStep({ [user.Id]: true });
   };
-  const handleResendMail = async (e, doc, user) => {
+  const handleResendMail = utils.withSessionValidation(async (e, doc, user) => {
     e.preventDefault();
     setActLoader({ [user?.Id]: true });
     const url = `${localStorage.getItem("baseUrl")}functions/sendmailv3`;
@@ -665,14 +666,14 @@ const DocumentsReport = (props) => {
         showAlert("danger", t("something-went-wrong-mssg"));
       }
     } catch (err) {
-      console.log("err in sendmail", err);
+      console.error("sendmail error", err);
       showAlert("danger", t("something-went-wrong-mssg"));
     } finally {
       setIsNextStep({});
       setUserDetails({});
       setActLoader({});
     }
-  };
+  });
   const fetchUserStatus = (user, doc) => {
     const email = user.email ? user.email : user.signerPtr.Email;
     const audit = doc?.AuditTrail?.find((x) => x.UserPtr.Email === email);
@@ -707,7 +708,7 @@ const DocumentsReport = (props) => {
     }
   };
 
-  const handleUpdateExpiry = async (e, item) => {
+  const handleUpdateExpiry = utils.withSessionValidation(async (e, item) => {
     e.preventDefault();
     e.stopPropagation();
     if (expiryDate) {
@@ -745,7 +746,7 @@ const DocumentsReport = (props) => {
             }
           }
         } catch (err) {
-          console.log("err", err);
+          console.error("update expiry doc error", err);
           showAlert("danger", t("something-went-wrong-mssg"), 2000);
         } finally {
           setActLoader({});
@@ -758,10 +759,10 @@ const DocumentsReport = (props) => {
     } else {
       showAlert("danger", t("expiry-date-error"), 2000);
     }
-  };
+  });
 
   // `handleRenameDoc` is used to update document name
-  const handleRenameDoc = async (item) => {
+  const handleRenameDoc = utils.withSessionValidation(async (item) => {
     setActLoader({ [item.objectId]: true });
     setIsModal({});
     const className = "contracts_Document";
@@ -781,7 +782,7 @@ const DocumentsReport = (props) => {
       showAlert("danger", t("something-went-wrong-mssg"), 2000);
       setActLoader({});
     }
-  };
+  });
   const handleBtnVisibility = (act, item) => {
     if (!act.restrictBtn) {
       return true;
@@ -797,18 +798,18 @@ const DocumentsReport = (props) => {
     setError("");
     setIsModal({});
   };
-  const handleSaveAsTemplate = async (doc) => {
+  const handleSaveAsTemplate = utils.withSessionValidation(async (doc) => {
     try {
       const params = { docId: doc?.objectId };
       const templateRes = await Parse.Cloud.run("saveastemplate", params);
       setTemplateId(templateRes?.id);
       setIsSuccess({ [doc.objectId]: true });
     } catch (err) {
-      console.log("Err in saveastemplate", err);
+      console.error("saveastemplate error", err);
     } finally {
       setActLoader({});
     }
-  };
+  });
   const handleCloseTemplate = () => {
     setTemplateId("");
     setIsSuccess({});
@@ -819,20 +820,13 @@ const DocumentsReport = (props) => {
 
   // `handleBulkSendTemplate` is used to open modal as well as fetch template
   // and show Ui on the basis template response
-  const handleBulkSendTemplate = async (templateId, docId) => {
-    setIsBulkSend({ [docId]: true });
-    setIsLoader({ [docId]: true });
-    try {
-      const axiosRes = await fetchTemplate(templateId);
-      const templateRes = axiosRes.data && axiosRes.data.result;
-      const isPrefillExist = templateRes?.Placeholders.some(
-        (x) => x.Role === "prefill"
-      );
-      if (isPrefillExist) {
-        setIsBulkSend({});
-        setIsLoader({});
-        showAlert("danger", t("prefill-bulk-error"));
-      } else {
+  const handleBulkSendTemplate = utils.withSessionValidation(
+    async (templateId, docId) => {
+      setIsBulkSend({ [docId]: true });
+      setIsLoader({ [docId]: true });
+      try {
+        const axiosRes = await fetchTemplate(templateId);
+        const templateRes = axiosRes.data && axiosRes.data.result;
         const tenantSignTypes = await fetchTenantDetails();
         const docSignTypes = templateRes?.SignatureType || signatureTypes;
         const updatedSignatureType = await handleSignatureType(
@@ -843,13 +837,13 @@ const DocumentsReport = (props) => {
         setPlaceholders(templateRes?.Placeholders);
         setTemplateDetails(templateRes);
         setIsLoader({});
+      } catch (err) {
+        console.error("fetch template in bulk modal error", err);
+        setIsBulkSend({});
+        showAlert("danger", t("something-went-wrong-mssg"));
       }
-    } catch (err) {
-      console.log("err in fetch template in bulk modal", err);
-      setIsBulkSend({});
-      showAlert("danger", t("something-went-wrong-mssg"));
     }
-  };
+  );
 
   const handleResendClose = () => {
     setIsResendMail({});
@@ -857,7 +851,7 @@ const DocumentsReport = (props) => {
     setUserDetails({});
   };
 
-  const handleRecreateDoc = async (item) => {
+  const handleRecreateDoc = utils.withSessionValidation(async (item) => {
     setActLoader({ [item.objectId]: true });
     try {
       const res = await Parse.Cloud.run("recreatedoc", {
@@ -870,11 +864,11 @@ const DocumentsReport = (props) => {
       handleCloseModal();
       showAlert("danger", err.message);
       // showAlert("danger", t("something-went-wrong-mssg"));
-      console.log("Err while create duplicate template", err);
+      console.error("create duplicate template error", err);
     } finally {
       setActLoader({});
     }
-  };
+  });
 
   const restrictBtn = (item, act) => {
     return item.IsSignyourself && act.action === "recreatedocument"
@@ -962,7 +956,7 @@ const DocumentsReport = (props) => {
       try {
         await fetchTenantDetails();
       } catch (e) {
-        console.log("error in fetchTenantDetails", e);
+        console.error("fetchTenantDetails error", e);
         alert(t("user-not-exist"));
       }
     }
@@ -1151,6 +1145,7 @@ const DocumentsReport = (props) => {
             </thead>
             <tbody className="text-[12px]">
               {props.List?.length > 0 &&
+                !props.searchLoader &&
                 currentList.map((item, index) => (
                   <tr
                     className={`${
@@ -1452,9 +1447,12 @@ const DocumentsReport = (props) => {
                       {isBulkSend[item.objectId] && (
                         <ModalUi
                           isOpen
+                          showScrollBar
                           title={
                                 t("quick-send")
                           }
+                          reduceWidth={"md:min-w-[80%]"}
+                          isLoader={isBulkLoader}
                           handleClose={() => setIsBulkSend({})}
                         >
                           {isLoader[item.objectId] ? (
@@ -1706,22 +1704,31 @@ const DocumentsReport = (props) => {
                 ))}
             </tbody>
           </table>
-          {props.List?.length <= 0 && (
+          {(props.searchLoader || props.List?.length <= 0) && (
             <div
               className={`${
                 isDashboard ? "h-[317px]" : ""
               } flex flex-col items-center justify-center w-ful bg-base-100 text-base-content rounded-xl py-4`}
             >
-              <div className="w-[60px] h-[60px] overflow-hidden">
-                <img
-                  className="w-full h-full object-contain"
-                  src={pad}
-                  alt="img"
-                />
-              </div>
-              <div className="text-sm font-semibold">
-                {t("no-data-avaliable")}
-              </div>
+              {props.searchLoader ? (
+                <>
+                  <Loader />
+                  <div className="text-sm ">{t("loading-mssg")}</div>
+                </>
+              ) : (
+                <>
+                  <div className="w-[60px] h-[60px] overflow-hidden">
+                    <img
+                      className="w-full h-full object-contain"
+                      src={pad}
+                      alt={t("no-data-avaliable")}
+                    />
+                  </div>
+                  <div className="text-sm font-semibold">
+                    {t("no-data-avaliable")}
+                  </div>
+                </>
+              )}
             </div>
           )}
         </div>

apps/OpenSign/src/reports/template/TemplatesReport.jsx

@@ -26,7 +26,7 @@ import EditorToolbar, {
 } from "../../components/pdf/EditorToolbar";
 import ReactQuill from "react-quill-new";
 import "../../styles/quill.css";
-import BulkSendUi from "../../components/BulkSendUi";
+import BulkSendUi from "../../components/bulksend/BulkSendUi";
 import Loader from "../../primitives/Loader";
 import { serverUrl_fn } from "../../constant/appinfo";
 import {
@@ -36,15 +36,17 @@ import { useElSize } from "../../hook/useElSize";
 import LottieWithLoader from "../../primitives/DotLottieReact";
 import PrefillWidgetModal from "../../components/pdf/PrefillWidgetsModal";
 import * as utils from "../../utils";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { RenderReportCell } from "../../primitives/RenderReportCell";
 import CustomizeMail from "../../components/pdf/CustomizeMail";
+import { resetWidgetState } from "../../redux/reducers/widgetSlice";
 
 const TemplatesReport = (props) => {
   const copyUrlRef = useRef(null);
   const titleRef = useRef(null);
+  const dispatch = useDispatch();
   const titleElement = useElSize(titleRef);
-  const prefillImg = useSelector((state) => state.widget.prefillImg);
+  const { prefillImg, isBulkLoader } = useSelector((state) => state.widget);
   const appName =
     "OpenSign™";
   const { t } = useTranslation();
@@ -92,8 +94,9 @@ const TemplatesReport = (props) => {
   const [isMailModal, setIsMailModal] = useState(false);
   const [customizeMail, setCustomizeMail] = useState({ body: "", subject: "" });
   const [defaultMail, setDefaultMail] = useState({ body: "", subject: "" });
-  const [currUserId, setCurrUserId] = useState(false);
+  const [currUserId, setCurrUserId] = useState("");
   const [documentDetails, setDocumentDetails] = useState();
+  const [docId, setDocId] = useState();
   const [error, setError] = useState("");
 
   useEffect(() => {
@@ -160,6 +163,7 @@ const TemplatesReport = (props) => {
   const pageNumbers = getPaginationRange();
   //  below useEffect reset currenpage to 1 if user change route
   useEffect(() => {
+    dispatch(resetWidgetState([]));
     checkTourStatus();
     fetchTeamList();
     return () => setCurrentPage(1);
@@ -194,7 +198,7 @@ const TemplatesReport = (props) => {
         }
       }
     } catch (err) {
-      console.log("Err in fetch top level teamlist", err);
+      console.error("fetch top level teamlist error", err);
     }
   };
   // below useEffect is used to render next record if IsMoreDoc is true
@@ -206,7 +210,7 @@ const TemplatesReport = (props) => {
   }, [isMoreDocs, pageNumbers, currentPage, setIsNextRecord]);
 
   //function to fetch tenant Details
-  const fetchTenantDetails = async () => {
+  const fetchTenantDetails = utils.withSessionValidation(async () => {
     const user = JSON.parse(
       localStorage.getItem(
         `Parse/${localStorage.getItem("parseAppId")}/currentUser`
@@ -230,7 +234,7 @@ const TemplatesReport = (props) => {
     } else {
       alert(t("user-not-exist"));
     }
-  };
+  });
 
   // `handleURL` is used to open microapp
   const handleURL = async (item, act) => {
@@ -276,7 +280,7 @@ const TemplatesReport = (props) => {
     }
   };
 
-  const fetchTemplate = async (templateId) => {
+  const fetchTemplate = utils.withSessionValidation(async (templateId) => {
     try {
       const params = {
         templateId: templateId,
@@ -297,30 +301,32 @@ const TemplatesReport = (props) => {
         return axiosRes;
       }
     } catch (e) {
-      console.log("Error to fetch template in report", e);
+      console.error("fetch template in report error", e);
       showAlert("danger", t("something-went-wrong-mssg"));
       setActLoader({});
     }
-  };
+  });
   //function is called when there ther no any prefill role widget exist then create direct document and navigate
-  const navigatePageToDoc = async (templateRes, placeholder, signer) => {
-    setIsPrefillModal({});
-    const res = await createDocument(
-      [templateRes || templateDetails],
-      placeholder || xyPosition,
-      signer || signerList,
-      templateRes?.URL || templateDetails?.URL,
-    );
-    if (res.status === "success") {
-      navigate(`/placeHolderSign/${res.id}`, {
-        state: { title: "Use Template" }
-      });
-    } else {
-      alert(t("something-went-wrong-mssg"));
+  const navigatePageToDoc = utils.withSessionValidation(
+    async (templateRes, placeholder, signer) => {
+      setIsPrefillModal({});
+      const res = await createDocument(
+        [templateRes || templateDetails],
+        placeholder || xyPosition,
+        signer || signerList,
+        templateRes?.URL || templateDetails?.URL,
+      );
+      if (res.status === "success") {
+        navigate(`/placeHolderSign/${res.id}`, {
+          state: { title: "Use Template" }
+        });
+      } else {
+        alert(t("something-went-wrong-mssg"));
+      }
     }
-  };
+  );
 
-  const handleActionBtn = async (act, item) => {
+  const handleActionBtn = utils.withSessionValidation(async (act, item) => {
     setIsTour(false);
     if (act.action === "redirect") {
       handleURL(item, act);
@@ -362,7 +368,7 @@ const TemplatesReport = (props) => {
     } else if (act.action === "extendexpiry") {
       setIsModal({ [`extendexpiry_${item.objectId}`]: true });
     }
-  };
+  });
   // Get current list
   const indexOfLastDoc = currentPage * props.docPerPage;
   const indexOfFirstDoc = indexOfLastDoc - props.docPerPage;
@@ -383,7 +389,7 @@ const TemplatesReport = (props) => {
     }
   };
 
-  const handleDelete = async (item) => {
+  const handleDelete = utils.withSessionValidation(async (item) => {
     setIsDeleteModal({});
     setActLoader({ [`${item.objectId}`]: true });
     try {
@@ -407,11 +413,11 @@ const TemplatesReport = (props) => {
         props.setList(upldatedList);
       }
     } catch (err) {
-      console.log("err", err);
+      console.error("delete template error", err);
       showAlert("danger", t("something-went-wrong-mssg"));
       setActLoader({});
     }
-  };
+  });
   const handleClose = (
   ) => {
     setIsDeleteModal({});
@@ -534,7 +540,7 @@ const TemplatesReport = (props) => {
 
         setActLoader({});
       } catch (err) {
-        console.log("err in getsignedurl", err);
+        console.error("getsignedurl error", err);
         alert(t("something-went-wrong-mssg"));
         setActLoader({});
       }
@@ -608,7 +614,7 @@ const TemplatesReport = (props) => {
   };
   // `handleNextBtn` is used to open edit mail template screen in resend mail modal
   // as well as replace variable with original one
-  const handleNextBtn = (user, doc) => {
+  const handleNextBtn = utils.withSessionValidation((user, doc) => {
     const userdata = {
       Name: user?.signerPtr?.Name,
       Email: user.email ? user?.email : user.signerPtr?.Email,
@@ -655,8 +661,8 @@ const TemplatesReport = (props) => {
     const res = replaceMailVaribles(subject, body, variables);
     setMail((prev) => ({ ...prev, subject: res.subject, body: res.body }));
     setIsNextStep({ [user.Id]: true });
-  };
-  const handleResendMail = async (e, doc, user) => {
+  });
+  const handleResendMail = utils.withSessionValidation(async (e, doc, user) => {
     e.preventDefault();
     setActLoader({ [user?.Id]: true });
     const url = `${localStorage.getItem("baseUrl")}functions/sendmailv3`;
@@ -686,14 +692,14 @@ const TemplatesReport = (props) => {
         showAlert("danger", t("something-went-wrong-mssg"));
       }
     } catch (err) {
-      console.log("err in sendmail", err);
+      console.error("sendmail error", err);
       showAlert("danger", t("something-went-wrong-mssg"));
     } finally {
       setIsNextStep({});
       setUserDetails({});
       setActLoader({});
     }
-  };
+  });
   const fetchUserStatus = (user, doc) => {
     const email = user.email ? user.email : user.signerPtr.Email;
     const audit = doc?.AuditTrail?.find((x) => x.UserPtr.Email === email);
@@ -731,38 +737,31 @@ const TemplatesReport = (props) => {
   // `handleBulkSend` is used to open modal as well as fetch template
   // and show Ui on the basis template response handleBulkSendTemplate
   const handleBulkSend = async (template) => {
-    const isPrefillExist = template?.Placeholders?.some(
-      (x) => x.Role === "prefill"
-    );
-    if (isPrefillExist) {
-      showAlert("danger", t("prefill-bulk-error"));
-    } else {
-      setIsBulkSend({ [template.objectId]: true });
-      setIsLoader({ [template.objectId]: true });
-      try {
-        const axiosRes = await fetchTemplate(template.objectId);
-        const templateRes = axiosRes.data && axiosRes.data.result;
-        const tenantSignTypes = await fetchTenantDetails();
-        const docSignTypes = templateRes?.SignatureType || signatureTypes;
-        const updatedSignatureType = await handleSignatureType(
-          tenantSignTypes,
-          docSignTypes
-        );
-        setSignatureType(updatedSignatureType);
-        setPlaceholders(templateRes?.Placeholders);
-        setTemplateDetails(templateRes);
-        setIsLoader({});
-      } catch (err) {
-        console.log("err in fetch template in bulk modal", err);
-        setIsBulkSend({});
-        showAlert("danger", t("something-went-wrong-mssg"));
-      }
+    setIsBulkSend({ [template.objectId]: true });
+    setIsLoader({ [template.objectId]: true });
+    try {
+      const axiosRes = await fetchTemplate(template.objectId);
+      const templateRes = axiosRes.data && axiosRes.data.result;
+      const tenantSignTypes = await fetchTenantDetails();
+      const docSignTypes = templateRes?.SignatureType || signatureTypes;
+      const updatedSignatureType = await handleSignatureType(
+        tenantSignTypes,
+        docSignTypes
+      );
+      setSignatureType(updatedSignatureType);
+      setPlaceholders(templateRes?.Placeholders);
+      setTemplateDetails(templateRes);
+      setIsLoader({});
+    } catch (err) {
+      console.error("fetch template in bulk modal err", err);
+      setIsBulkSend({});
+      showAlert("danger", t("something-went-wrong-mssg"));
     }
   };
 
 
   // `handleShareWith` is used to save teams in sharedWith field
-  const handleShareWith = async (e, template) => {
+  const handleShareWith = utils.withSessionValidation(async (e, template) => {
     e.preventDefault();
     e.stopPropagation();
     setIsShareWith({});
@@ -785,10 +784,10 @@ const TemplatesReport = (props) => {
     } finally {
       setActLoader({});
     }
-  };
+  });
 
   // `handleCreateDuplicate` is used to create duplicate from current entry using objectId
-  const handleCreateDuplicate = async (item) => {
+  const handleCreateDuplicate = utils.withSessionValidation(async (item) => {
     setActLoader({ [item.objectId]: true });
     setIsModal({});
     try {
@@ -802,13 +801,13 @@ const TemplatesReport = (props) => {
       }
     } catch (err) {
       showAlert("danger", t("something-went-wrong-mssg"));
-      console.log("Err while create duplicate template", err);
+      console.error("create duplicate template error", err);
     } finally {
       setActLoader({});
     }
-  };
+  });
   // `handleRenameDoc` is used to update document name
-  const handleRenameDoc = async (item) => {
+  const handleRenameDoc = utils.withSessionValidation(async (item) => {
     setActLoader({ [item.objectId]: true });
     setIsModal({});
     const className = "contracts_Template";
@@ -829,7 +828,7 @@ const TemplatesReport = (props) => {
       showAlert("danger", t("something-went-wrong-mssg"), 2000);
       setActLoader({});
     }
-  };
+  });
 
   const handleCloseModal = () => {
     setIsModal({});
@@ -885,7 +884,7 @@ const TemplatesReport = (props) => {
     setXyPosition([]);
   };
   //`handlePrefillWidgetCreateDoc` is used to embed prefill all widgets on document, create document, and send document
-  const handlePrefillWidgetCreateDoc = async () => {
+  const handlePrefillWidgetCreateDoc = utils.withSessionValidation(async () => {
     setIsSubmit(true);
     const scale = 1;
     const res = await utils?.handleCheckPrefillCreateDoc(
@@ -915,12 +914,27 @@ const TemplatesReport = (props) => {
     } else if (res?.status === "success") {
       setDocumentId(res.id);
       setActLoader({});
-      setIsMailModal(true);
       const user = JSON.parse(
         localStorage.getItem(
           `Parse/${localStorage.getItem("parseAppId")}/currentUser`
         )
       );
+      const ownerId = templateDetails.ExtUserPtr?.UserId?.objectId;
+      const firstSigner = signerList[0];
+      const isOwner = firstSigner?.UserId?.objectId === ownerId;
+      setDocId(res.id);
+      if (templateDetails?.SendinOrder && isOwner) {
+        setCurrUserId(firstSigner?.objectId);
+        setIsSend(true);
+      } else {
+        setIsMailModal(true);
+        const currentSigner = signerList?.find(
+          (x) => x?.UserId?.objectId === ownerId
+        );
+        if (currentSigner) {
+          setCurrUserId(currentSigner?.objectId);
+        }
+      }
       if (user) {
         try {
           const tenantDetails = await getTenantDetails(user?.objectId);
@@ -951,7 +965,7 @@ const TemplatesReport = (props) => {
       }
     }
     setIsSubmit(false);
-  };
+  });
   //function show signer list and share link to share signUrl
   const handleShareList = () => {
     const shareLinkList = [];
@@ -1132,6 +1146,7 @@ const TemplatesReport = (props) => {
             </thead>
             <tbody className="text-[12px]">
               {props.List?.length > 0 &&
+                !props.searchLoader &&
                 currentList.map((item, index) => (
                   <tr
                     className={`${
@@ -1334,9 +1349,12 @@ const TemplatesReport = (props) => {
                       {isBulkSend[item.objectId] && (
                         <ModalUi
                           isOpen
+                          showScrollBar
                           title={
                                 t("quick-send")
                           }
+                          reduceWidth={"md:min-w-[80%]"}
+                          isLoader={isBulkLoader}
                           handleClose={() => setIsBulkSend({})}
                         >
                           {isLoader[item.objectId] ? (
@@ -1544,22 +1562,31 @@ const TemplatesReport = (props) => {
                 ))}
             </tbody>
           </table>
-          {props.List?.length <= 0 && (
+          {(props.searchLoader || props.List?.length <= 0) && (
             <div
               className={`${
                 isDashboard ? "h-[317px]" : ""
               } flex flex-col items-center justify-center w-ful bg-base-100 text-base-content rounded-xl py-4`}
             >
-              <div className="w-[60px] h-[60px] overflow-hidden">
-                <img
-                  className="w-full h-full object-contain"
-                  src={pad}
-                  alt="img"
-                />
-              </div>
-              <div className="text-sm font-semibold">
-                {t("no-data-avaliable")}
-              </div>
+              {props.searchLoader ? (
+                <>
+                  <Loader />
+                  <div className="text-sm ">{t("loading-mssg")}</div>
+                </>
+              ) : (
+                <>
+                  <div className="w-[60px] h-[60px] overflow-hidden">
+                    <img
+                      className="w-full h-full object-contain"
+                      src={pad}
+                      alt={t("no-data-avaliable")}
+                    />
+                  </div>
+                  <div className="text-sm font-semibold">
+                    {t("no-data-avaliable")}
+                  </div>
+                </>
+              )}
             </div>
           )}
         </div>
@@ -1610,11 +1637,13 @@ const TemplatesReport = (props) => {
         <ModalUi
           isOpen={isSend}
           title={
-            mailStatus === "success"
-              ? t("mails-sent")
-              : mailStatus === "quotareached"
-                ? t("quota-mail-head")
-                : t("mail-not-delivered")
+            !templateDetails?.SendinOrder
+              ? mailStatus === "success"
+                ? t("mails-sent")
+                : mailStatus === "quotareached"
+                  ? t("quota-mail-head")
+                  : t("mail-not-delivered")
+              : t("mail-status-head")
           }
           handleClose={() => {
             setIsSend(false);
@@ -1622,68 +1651,102 @@ const TemplatesReport = (props) => {
           }}
         >
           <div className="h-[100%] p-[20px] text-base-content">
-            {mailStatus === "success" ? (
-              <div className="text-center mb-[10px]">
-                <LottieWithLoader />
-                {documentDetails.SendinOrder ? (
-                  <p>
-                    {currUserId
-                      ? t("placeholder-mail-alert-you")
-                      : t("placeholder-mail-alert", {
-                          name: signerList[0]?.Name
-                        })}
-                  </p>
+            <div className="flex flex-col items-center gap-5">
+              <div>
+                {mailStatus === "success" ? (
+                  <div className="text-center mb-[10px]">
+                    <LottieWithLoader />
+                    {documentDetails.SendinOrder ? (
+                      <p>
+                        {currUserId
+                          ? t("placeholder-mail-alert-you")
+                          : t("placeholder-mail-alert", {
+                              name: signerList[0]?.Name
+                            })}
+                      </p>
+                    ) : (
+                      <p>{t("placeholder-alert-4")}</p>
+                    )}
+                  </div>
+                ) : mailStatus === "quotareached" ? (
+                  <div className="flex flex-col gap-y-3">
+                    <div className="my-3">{handleShareList()}</div>
+                  </div>
+                ) : mailStatus === "failed" ? (
+                  <p>{t("mail-failed")} </p>
                 ) : (
-                  <p>{t("placeholder-alert-4")}</p>
+                  <div className="mb-[10px]">
+                    {!templateDetails?.SendinOrder &&
+                      (mailStatus === "dailyquotareached" ? (
+                        <p>{t("daily-quota-reached")}</p>
+                      ) : (
+                        <p>{t("placeholder-alert-6")}</p>
+                      ))}
+                    {currUserId && (
+                      <span className="mt-1">{t("placeholder-alert-5")}</span>
+                    )}
+                  </div>
                 )}
-                {currUserId && <p>{t("placeholder-alert-5")}</p>}
-              </div>
-            ) : mailStatus === "quotareached" ? (
-              <div className="flex flex-col gap-y-3">
-                <div className="my-3">{handleShareList()}</div>
-              </div>
-            ) : (
-              <div className="mb-[10px]">
-                {mailStatus === "dailyquotareached" ? (
-                  <p>{t("daily-quota-reached")}</p>
-                ) : (
-                  <p>{t("placeholder-alert-6")}</p>
-                )}
-                {currUserId && (
-                  <p className="mt-1">{t("placeholder-alert-5")}</p>
-                )}
-              </div>
-            )}
-            {!mailStatus && (
-              <div className="w-full h-[1px] bg-[#9f9f9f] my-[15px]"></div>
-            )}
-            {mailStatus !== "quotareached" && (
-              <div
-                className={
-                  mailStatus === "success" ? "flex justify-center mt-1" : ""
-                }
-              >
-                {currUserId && (
-                  <button
-                    onClick={() =>
-                      handleRecipientSign(documentDetails?.objectId, currUserId)
+
+                {mailStatus !== "quotareached" && mailStatus !== "failed" && (
+                  <div
+                    className={
+                      mailStatus === "success"
+                        ? "flex justify-center mt-1"
+                        : "flex items-center justify-center mt-7"
                     }
-                    type="button"
-                    className="op-btn op-btn-primary mr-1"
                   >
-                    {t("yes")}
-                  </button>
+                    {currUserId && (
+                      <button
+                        onClick={() => handleRecipientSign(docId, currUserId)}
+                        type="button"
+                        className="op-btn op-btn-primary mr-1"
+                      >
+                        {t("sign-now")}
+                      </button>
+                    )}
+                    <button
+                      onClick={() => {
+                        navigate("/report/1MwEuxLEkF");
+                      }}
+                      type="button"
+                      className="op-btn op-btn-ghost text-base-content"
+                    >
+                      {currUserId ? t("no") : t("close")}
+                    </button>
+                  </div>
                 )}
-                <button
-                  onClick={() => {
-                    navigate("/report/1MwEuxLEkF");
-                  }}
-                  type="button"
-                  className="op-btn op-btn-ghost text-base-content"
-                >
-                  {currUserId ? t("no") : t("close")}
-                </button>
               </div>
+              {mailStatus !== "success" &&
+                currUserId &&
+                templateDetails?.SendinOrder && (
+                  <div className="op-divider text-base-content mx-[0%] my-1 font-medium">
+                    {t("or")}
+                  </div>
+                )}
+
+              {mailStatus !== "success" &&
+                currUserId &&
+                templateDetails?.SendinOrder && (
+                  <>
+                    <div
+                      className="op-btn op-btn-outline w-[50%] md:w-[35%] mt-1"
+                      onClick={() => {
+                        setIsSend(false);
+                        setIsMailModal(true);
+                      }}
+                    >
+                      <i
+                        className="fa-regular fa-envelope"
+                        style={{ color: "#002864", fontSize: "19px" }}
+                      ></i>{" "}
+                      <span>{t("send-to-email")}</span>
+                    </div>
+                  </>
+                )}
+            </div>
+            {!mailStatus && (
+              <div className="op-divider text-base-content mx-[0%] mt-3"></div>
             )}
           </div>
         </ModalUi>

apps/OpenSign/src/styles/signature.css

@@ -31,7 +31,10 @@
   border: 1px solid #007bff;
   border-radius: 50px;
 }
-
+.prefillCanvas {
+  width: 205px;
+  height: 81px;
+}
 .signatureCanvas {
   width: 440px;
   height: 167px;
@@ -44,15 +47,11 @@
 }
 
 .mysignatureCanvas {
-  /* width: 456px;
-  height: 180px; */
   width: 370px;
   height: 146px;
 }
 
 .mystampCanvas {
-  /* width: 446px;
-  height: 180px; */
   width: 370px;
   height: 146px;
 }
@@ -60,8 +59,6 @@
 .intialSignature {
   border: 2px solid #888;
   background-color: rgb(255, 255, 255);
-  /* width: 180px;
-  height: 180px; */
   width: 150px;
   height: 150px;
 }

apps/OpenSign/src/utils/fileUtils.js

@@ -123,3 +123,56 @@ export function buildDownloadFilename(formatId, ctx) {
   const safeExt = ext.replace(/\.+/g, "").toLowerCase() || "pdf";
   return `${stem}.${safeExt}`;
 }
+
+export function parseCSV(text) {
+  const rows = [];
+  let row = [];
+  let field = "";
+  let inQuotes = false;
+
+  for (let i = 0; i < text.length; i++) {
+    const ch = text[i];
+    const next = text[i + 1];
+
+    if (ch === '"') {
+      // If inside quotes and next is also quote => escaped quote
+      if (inQuotes && next === '"') {
+        field += '"';
+        i++; // skip next quote
+      } else {
+        inQuotes = !inQuotes;
+      }
+      continue;
+    }
+
+    if (ch === "," && !inQuotes) {
+      row.push(field.trim());
+      field = "";
+      continue;
+    }
+
+    if ((ch === "\n" || ch === "\r") && !inQuotes) {
+      // handle CRLF (\r\n)
+      if (ch === "\r" && next === "\n") i++;
+
+      row.push(field.trim());
+      field = "";
+
+      // ignore completely empty lines
+      const hasAny = row.some((c) => c !== "");
+      if (hasAny) rows.push(row);
+
+      row = [];
+      continue;
+    }
+
+    field += ch;
+  }
+
+  // last field
+  row.push(field.trim());
+  const hasAny = row.some((c) => c !== "");
+  if (hasAny) rows.push(row);
+
+  return rows;
+}

apps/OpenSign/src/utils/index.js

@@ -4,3 +4,4 @@ export * from "./sanitizeFileName";
 export * from "./lazyWithRetry";
 export * from "./upgradeProgress";
 export * from "./widgetUtils";
+export * from "./withSessionValidation";

apps/OpenSign/src/utils/prefillUtils.js

@@ -6,7 +6,8 @@ import {
   generatePdfName,
   embedWidgetsToDoc,
   randomId,
-  getBase64FromUrl
+  getBase64FromUrl,
+  drawWidget
 } from "../constant/Utils";
 import { PDFDocument } from "pdf-lib";
 
@@ -44,6 +45,9 @@ export const handleEmbedPrefillToDoc = async (
         scale,
         prefillImg
       );
+      if (pdfBase64?.error) {
+        return { error: pdfBase64.error };
+      }
       const pdfName = generatePdfName(16);
       const pdfUrl = await convertBase64ToFile(pdfName, pdfBase64);
       const tenantId = localStorage.getItem("TenantId");
@@ -98,9 +102,9 @@ export const isValidPrefill = (prefillData) => {
     const emptyResponseObjects = getPlaceholder.flatMap((page) =>
       page.pos.filter(
         (item) =>
-          item?.type !== "checkbox" &&
           !item?.options?.defaultValue &&
-          !item?.options?.response
+          !item?.options?.response &&
+          item?.options?.status === "required"
       )
     );
     if (emptyResponseObjects.length > 0) {
@@ -175,21 +179,29 @@ export const savePrefillImg = async (Placeholders) => {
   const prefillData = Placeholders?.find((x) => x.Role === "prefill");
   if (prefillData) {
     const allImageFields = prefillData?.placeHolder.flatMap((p) =>
-      p.pos.filter((item) => item.type === "image")
+      p.pos.filter((item) => item.type === "image" || item.type === drawWidget)
+    );
+    const hasImageType = allImageFields.some(
+      (p) => p.type === "image" || p.type === drawWidget
     );
-    const hasImageType = allImageFields.some((p) => p.type === "image");
     if (hasImageType) {
       const imgArr = [];
       for (const ph of prefillData?.placeHolder || []) {
         for (const pos of ph?.pos || []) {
-          if (pos?.type === "image" && pos?.SignUrl) {
+          if (
+            (pos?.type === "image" || pos?.type === drawWidget) &&
+            pos?.options?.response
+          ) {
             const addSuffix = true;
-            const base64 = await getBase64FromUrl(pos?.SignUrl, addSuffix);
+            const base64 = await getBase64FromUrl(
+              pos?.options?.response,
+              addSuffix
+            );
             imgArr.push({
               id: pos?.key,
               base64: base64
             });
-          } else if (pos?.type === "image") {
+          } else if (pos?.type === "image" || pos?.type === drawWidget) {
             imgArr.push({
               id: pos?.key,
               base64: ""
@@ -223,3 +235,5 @@ export const handleSignersList = (item) => {
   });
   return updatedSigners;
 };
+
+export const normalizeKey = (value) => value?.trim()?.toLowerCase() || "";

apps/OpenSign/src/utils/widgetUtils.js

@@ -1,7 +1,25 @@
-import { generateTitleFromFilename } from "../constant/Utils";
+import moment from "moment";
+import {
+  generateTitleFromFilename,
+  selectFormat,
+  changeDateToMomentFormat
+} from "../constant/Utils";
 import { base64StringtoFile, uploadFile } from "./fileUtils";
 import { sanitizeFileName } from "./sanitizeFileName";
 import Parse from "parse";
+export const dateFormat = [
+  "L",
+  "MM-DD-YYYY",
+  "MM.DD.YYYY",
+  "DD/MM/YYYY",
+  "DD-MM-YYYY",
+  "DD.MM.YYYY",
+  "YYYY-MM-DD",
+  "MMM DD, YYYY",
+  "LL",
+  "DD MMM, YYYY",
+  "DD MMMM, YYYY"
+];
 // `handlesavesign` is used to save signature, initials, stamp as a default
 export const saveToMySign = async (widget) => {
   const base64 = widget?.base64;
@@ -135,3 +153,226 @@ export const getInitials = (name) => {
 
   return `${first[0].toUpperCase()} ${second[0].toUpperCase()}`;
 };
+
+// Function to check if a string is valid Base64 (supports data URL)
+export const isValidBase64 = (str) => {
+  if (!str || typeof str !== "string") return false;
+
+  // Remove data URL prefix if present
+  const cleanedStr = str.split(",").pop()?.trim();
+  if (!cleanedStr) return false;
+
+  // Length must be divisible by 4
+  if (cleanedStr.length % 4 !== 0) return false;
+
+  // Base64 or Base64URL regex
+  const base64Regex =
+    /^(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?$/;
+
+  if (!base64Regex.test(cleanedStr)) return false;
+
+  try {
+    // atob throws if invalid
+    atob(cleanedStr);
+    return true;
+  } catch {
+    return false;
+  }
+};
+export const addPreferenceOpt = (owner, type, role, isSignyourself) => {
+  const widget = owner?.WidgetPreferences?.find((w) => w.type === type) || {};
+  switch (type) {
+    case "date": {
+      const signingDate = widget?.isSigningDate ? "today" : widget?.date || "";
+      const isReadOnly = widget?.isReadOnly || false;
+      const isPrefill = role && role === "prefill";
+      const format =
+        widget?.format || selectFormat(owner?.DateFormat) || "MM/DD/YYYY";
+      const prefillDate = new Date();
+      const response = isPrefill
+        ? formatDate({ date: prefillDate, format: format })
+        : signingDate || "";
+      const option =
+        isSignyourself || isPrefill ? {} : { isReadOnly: isReadOnly };
+      return {
+        response: response,
+        ...option,
+        format: widget?.format || "MM/dd/yyyy"
+      };
+    }
+    default:
+      return {};
+  }
+};
+
+export function formatDate(dateObj) {
+  const format = dateObj?.format?.toLowerCase();
+  const date = new Date(dateObj.date);
+
+  // zero-padded day and month
+  const dd = String(date.getDate()).padStart(2, "0");
+  const mm = String(date.getMonth() + 1).padStart(2, "0");
+  const yyyy = date.getFullYear();
+
+  // month names
+  const shortNames = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec"
+  ];
+  const longNames = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December"
+  ];
+  const mmm = shortNames[date.getMonth()];
+  const mmmm = longNames[date.getMonth()];
+
+  // a map of token → replacement
+  const tokens = { yyyy: yyyy, mm: mm, dd: dd, mmm: mmm, mmmm: mmmm };
+
+  // Replace longer tokens first
+  return format
+    .replace(/yyyy/, tokens.yyyy)
+    .replace(/mmmm/, tokens.mmmm)
+    .replace(/mmm/, tokens.mmm)
+    .replace(/mm/, tokens.mm)
+    .replace(/dd/, tokens.dd);
+}
+
+// The getDatePickerDate function retrieves the date in the correct format supported by the DatePicker.
+export const getDatePickerDate = (selectedDate, format = "dd-MM-yyyy") => {
+  let date;
+  if (!selectedDate) {
+    return;
+  }
+  if (format && format === "dd-MM-yyyy") {
+    const [day, month, year] = selectedDate?.split("-");
+    date = new Date(`${year}-${month}-${day}`);
+  } else if (format && format === "dd.MM.yyyy") {
+    const [day, month, year] = selectedDate?.split(".");
+    date = new Date(`${year}.${month}.${day}`);
+  } else if (format && format === "dd/MM/yyyy") {
+    const [day, month, year] = selectedDate?.split("/");
+    date = new Date(`${year}/${month}/${day}`);
+  } else {
+    date = new Date(selectedDate);
+  }
+  return date;
+};
+
+// Parses strictly "mm/dd/yyyy" (e.g., "01/30/2026")
+// Returns "YYYY-MM-DD" (e.g., "2026-01-30") or null if invalid.
+export function parseMMDDYYYY(input) {
+  if (typeof input !== "string") return null;
+
+  const match = input.trim().match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
+  if (!match) return null;
+
+  const month = Number(match[1]); // 1..12
+  const day = Number(match[2]); // 1..31
+  const year = Number(match[3]);
+
+  if (month < 1 || month > 12) return null;
+  if (day < 1 || day > 31) return null;
+
+  // Strict calendar validation (rejects 02/30/2026 etc.)
+  const dt = new Date(year, month - 1, day);
+  if (
+    dt.getFullYear() !== year ||
+    dt.getMonth() !== month - 1 ||
+    dt.getDate() !== day
+  ) {
+    return null;
+  }
+
+  const MM = String(month).padStart(2, "0");
+  const DD = String(day).padStart(2, "0");
+  return `${year}-${MM}-${DD}`; // ISO-like (date-only)
+}
+
+// Parses strictly "dd-mm-yyyy" (e.g., "30-01-2026")
+// Returns "YYYY-MM-DD" (e.g., "2026-01-30") or null if invalid.
+export function parseDDMMYYYY(input) {
+  if (typeof input !== "string") return null;
+
+  const match = input.trim().match(/^(\d{1,2})-(\d{1,2})-(\d{4})$/);
+  if (!match) return null;
+
+  const day = Number(match[1]); // 1..31
+  const month = Number(match[2]); // 1..12
+  const year = Number(match[3]);
+
+  if (month < 1 || month > 12) return null;
+  if (day < 1 || day > 31) return null;
+
+  // Strict calendar validation (rejects 31-02-2026 etc.)
+  const dt = new Date(year, month - 1, day);
+  if (
+    dt.getFullYear() !== year ||
+    dt.getMonth() !== month - 1 ||
+    dt.getDate() !== day
+  ) {
+    return null;
+  }
+
+  const MM = String(month).padStart(2, "0");
+  const DD = String(day).padStart(2, "0");
+  return `${year}-${MM}-${DD}`; // ISO-like (date-only)
+}
+
+// Turn "/^[A-Z]+$/i" OR "^[A-Z]+$" into a real RegExp
+export function toRegExp(maybeRegex, defaultFlags = "") {
+  if (maybeRegex instanceof RegExp) return maybeRegex;
+
+  const s = String(maybeRegex ?? "").trim();
+  const m = s.match(/^\/([\s\S]*)\/([gimsuy]*)$/); // /pattern/flags
+
+  if (m) {
+    const [, pattern, flags] = m;
+    return new RegExp(pattern, flags);
+  }
+  return new RegExp(s, defaultFlags);
+}
+
+// For <input pattern="..."> (must NOT include /.../ delimiters)
+export function toHtmlPattern(maybeRegex) {
+  if (!maybeRegex) return;
+
+  const re = toRegExp(maybeRegex);
+  // pattern attribute is implicitly full-match; stripping anchors is optional
+  return re.source.replace(/^\^/, "").replace(/\$$/, "");
+}
+
+export const formatCSVDate = (widget, response, formatInISO = false) => {
+  const format = widget?.options?.validation?.format ?? "dd-MM-yyyy";
+  const input = response === "today" ? new Date() : response;
+  // moment strict parse; fallback to "today" if invalid
+  const m = moment(input, changeDateToMomentFormat(format), true);
+  const date = m.isValid()
+    ? m
+    : moment(new Date(), changeDateToMomentFormat(format), true);
+
+  const finalResponse = formatInISO
+    ? date.format("DD-MM-YYYY")
+    : date.format(format?.toUpperCase());
+  return finalResponse;
+};

apps/OpenSign/src/utils/withSessionValidation.js

@@ -0,0 +1,29 @@
+import { sessionStatus } from "../redux/reducers/userReducer";
+import { store } from "../redux/store";
+import Parse from "parse";
+
+export function withSessionValidation(fn) {
+  return async (...args) => {
+    try {
+      const tenantId = localStorage.getItem("TenantId");
+      const user =
+        typeof Parse !== "undefined" ? Parse.User?.current?.() : null;
+      const sessionToken = user?.getSessionToken?.();
+
+      if (!tenantId || !sessionToken) {
+        store.dispatch(sessionStatus(false));
+        throw new Error("invalid session token");
+      }
+
+      return await fn(...args);
+    } catch (error) {
+      if (error?.message === "invalid session token") {
+        console.error("invalid session or missing tenantId", error);
+        store.dispatch(sessionStatus(false));
+        return;
+      } else {
+        throw error; // important: don't silently swallow errors
+      }
+    }
+  };
+}

apps/OpenSignServer/Utils.js

@@ -183,35 +183,6 @@ export function generateId(length) {
   return result;
 }
 
-// Format date and time for the selected timezone
-export const formatTimeInTimezone = (date, timezone) => {
-  const nyDate = timezone && toZonedTime(date, timezone);
-  const generatedDate = timezone
-    ? format(nyDate, 'EEE, dd MMM yyyy HH:mm:ss zzz', { timeZone: timezone })
-    : new Date(date).toUTCString();
-  return generatedDate;
-};
-
-// `getSecureUrl` is used to return local secure url if local files
-export const getSecureUrl = url => {
-  const fileUrl = new URL(url)?.pathname?.includes('files');
-  if (fileUrl) {
-    try {
-      const file = getSignedLocalUrl(url);
-      if (file) {
-        return { url: file };
-      } else {
-        return { url: '' };
-      }
-    } catch (err) {
-      console.log('err while fileupload ', err);
-      return { url: '' };
-    }
-  } else {
-    return { url: url };
-  }
-};
-
 /**
  * FlattenPdf is used to remove existing widgets if present any and flatten pdf.
  * @param {string | Uint8Array | ArrayBuffer} pdfFile - pdf file.
@@ -249,13 +220,42 @@ export const flattenPdf = async pdfFile => {
   }
 };
 
+// Format date and time for the selected timezone
+export const formatTimeInTimezone = (date, timezone) => {
+  const nyDate = timezone && toZonedTime(date, timezone);
+  const generatedDate = timezone
+    ? format(nyDate, 'EEE, dd MMM yyyy HH:mm:ss zzz', { timeZone: timezone })
+    : new Date(date).toUTCString();
+  return generatedDate;
+};
+
+// `getSecureUrl` is used to return local secure url if local files
+export const getSecureUrl = url => {
+  const fileUrl = new URL(url)?.pathname?.includes('files');
+  if (fileUrl) {
+    try {
+      const file = getSignedLocalUrl(url);
+      if (file) {
+        return { url: file };
+      } else {
+        return { url: '' };
+      }
+    } catch (err) {
+      console.log('err while fileupload ', err);
+      return { url: '' };
+    }
+  } else {
+    return { url: url };
+  }
+};
+
 export const mailTemplate = param => {
   const themeColor = '#47a3ad';
   const subject = `${param.senderName} has requested you to sign "${param.title}"`;
   const AppName = appName;
   const logo = `<img src='https://qikinnovation.ams3.digitaloceanspaces.com/logo.png' height='50' />`;
 
-  const opurl = ` <a href='www.opensignlabs.com' target=_blank>here</a>`;
+  const opurl = ` <a href='mailto:complaint@opensiglabs.com' target=_blank>here</a>`;
 
   const body =
     "<html><head><meta http-equiv='Content-Type' content='text/html;charset=UTF-8' /></head><body><div style='background-color:#f5f5f5;padding:20px'><div style='background:white;padding-bottom:20px'><div style='padding:10px'>" +
@@ -278,7 +278,7 @@ export const mailTemplate = param => {
     AppName +
     '. For any queries regarding this email, please contact the sender ' +
     param.senderMail +
-    ` directly. If you think this email is inappropriate or spam, you may file a complaint with ${AppName}${opurl}.</p></div></div></body></html>`;
+    ` directly. If you think this email is inappropriate or spam, you may file a complaints with ${AppName}${opurl}.</p></div></div></body></html>`;
 
   return { subject, body };
 };
@@ -369,34 +369,27 @@ export const handleValidImage = async Placeholder => {
       for (const item of placeholder.placeHolder || []) {
         const updatedPos = [];
         for (const posItem of item.pos || []) {
-          if (posItem?.type === 'image' && posItem?.SignUrl) {
-            const validUrl = await getPresignedUrl(posItem?.SignUrl);
+          if (
+            (posItem?.type === 'image' || posItem?.type === 'draw') &&
+            posItem?.options?.response
+          ) {
+            const validUrl = await getPresignedUrl(posItem?.options?.response);
             updatedPos.push({
               ...posItem,
-              SignUrl: validUrl,
+              ...(item.SignUrl !== undefined && { SignUrl: validUrl }),
               options: { ...posItem.options, response: validUrl },
             });
           } else {
             updatedPos.push(posItem);
           }
         }
-        updatedRole.push({
-          ...item,
-          pos: updatedPos,
-        });
+        updatedRole.push({ ...item, pos: updatedPos });
       }
 
-      updatedPlaceholders.push({
-        ...placeholder,
-        signerPtr,
-        placeHolder: updatedRole,
-      });
+      updatedPlaceholders.push({ ...placeholder, signerPtr, placeHolder: updatedRole });
     } else {
       // Not prefill role, just push as-is
-      updatedPlaceholders.push({
-        ...placeholder,
-        signerPtr,
-      });
+      updatedPlaceholders.push({ ...placeholder, signerPtr });
     }
   }
   return updatedPlaceholders;

apps/OpenSignServer/cloud/customRoute/customApp.js

@@ -1,7 +1,6 @@
 import express from 'express';
 import cors from 'cors';
 import dotenv from 'dotenv';
-import uploadFile from './uploadFile.js';
 
 import docxtopdf, { upload as docxUpload } from './docxtopdf.js';
 import decryptpdf, { upload as decryptUpload } from './decryptpdf.js';
@@ -16,7 +15,6 @@ app.use(cors());
 app.use(express.json({ limit: '100mb' }));
 app.use(express.urlencoded({ limit: '100mb', extended: true }));
 
-app.post('/file_upload', uploadFile);
 app.post('/docxtopdf', docxUpload.single('file'), docxtopdf);
 app.post('/decryptpdf', decryptUpload.single('file'), decryptpdf);
 app.get('/delete-account/:userId', deleteUserGet);

apps/OpenSignServer/cloud/customRoute/docxtopdf.js

@@ -1,8 +1,31 @@
 import axios from 'axios';
 import multer from 'multer';
 import libre from 'libreoffice-convert';
+import { exec } from 'child_process';
+import { promisify } from 'util';
 import { cloudServerUrl, getSecureUrl, serverAppId } from '../../Utils.js';
 
+const execAsync = promisify(exec);
+
+// -------------------- Process Management --------------------
+/**
+ * Kill stuck LibreOffice processes
+ */
+async function killStuckProcesses() {
+  try {
+    // Kill soffice processes older than 2 minutes
+    if (process.platform === 'linux' || process.platform === 'darwin') {
+      await execAsync("pkill -9 -f 'soffice.*--headless' || true");
+      console.log('[DOCX2PDF] Cleaned up stuck processes');
+    } else if (process.platform === 'win32') {
+      await execAsync('taskkill /F /IM soffice.bin /T || exit 0');
+      console.log('[DOCX2PDF] Cleaned up stuck processes (Windows)');
+    }
+  } catch (err) {
+    console.error('[DOCX2PDF] Error killing processes:', err.message);
+  }
+}
+
 /** @returns {Promise<Buffer>} */
 async function convertLibre(input, ext, opts) {
   return await new Promise((resolve, reject) => {
@@ -14,7 +37,7 @@ async function convertLibre(input, ext, opts) {
   });
 }
 
-// -------------------- Concurrency limiter --------------------
+// -------------------- Concurrency limiter with queue limits --------------------
 // CRITICAL FIX: Reduced to 1 for CPU-intensive LibreOffice conversions
 const MAX_CONCURRENCY = Number(process.env.DOCX2PDF_CONCURRENCY || 1);
 let active = 0;
@@ -22,22 +45,27 @@ const queue = [];
 
 function runWithLimit(task) {
   return new Promise((resolve, reject) => {
-    const run = () => {
+    const run = async () => {
       active++;
-      Promise.resolve()
-        .then(task)
-        .then(resolve, reject)
-        .finally(() => {
-          active--;
-          if (queue.length) queue.shift()();
-        });
+      try {
+        const result = await task();
+        resolve(result);
+      } catch (error) {
+        reject(error);
+      } finally {
+        active--;
+        if (queue.length) {
+          const next = queue.shift();
+          next();
+        }
+      }
     };
     if (active < MAX_CONCURRENCY) run();
     else queue.push(run);
   });
 }
 
-// -------------------- Timeout helper --------------------
+// -------------------- Timeout helper with cleanup --------------------
 /**
  * @template T
  * @param {Promise<T>} promise
@@ -49,7 +77,11 @@ export async function withTimeout(promise, ms, label = 'operation') {
   let timer;
   try {
     const timeout = new Promise((_, reject) => {
-      timer = setTimeout(() => reject(new Error(`${label} timed out after ${ms}ms`)), ms);
+      timer = setTimeout(async () => {
+        // Kill stuck processes on timeout
+        await killStuckProcesses();
+        reject(new Error(`${label} timed out after ${ms}ms`));
+      }, ms);
     });
     return await Promise.race([promise, timeout]);
   } finally {
@@ -116,22 +148,29 @@ export default async function docxtopdf(req, res) {
     // ---- DOCX -> PDF conversion with concurrency control and timeout ----
     const fileName = `${generatePdfName(16)}.pdf`;
 
-    // FIX: Increased timeout to 90s for large files, added nice priority
+    // Adjust timeout based on file size
+    const timeoutMs = uploadedSizeBytes > 10 * 1024 * 1024 ? 120_000 : 90_000;
+
+    // FIX: Increased timeout for large files, added nice priority
     const pdfBuffer = await runWithLimit(async () => {
       // Log for monitoring
-      console.log(`[DOCX2PDF] Starting conversion, active: ${active}, queued: ${queue.length}`);
+      console.log(
+        `[DOCX2PDF] Starting conversion, size: ${(uploadedSizeBytes / 1024 / 1024).toFixed(2)}MB, active: ${active}, queued: ${queue.length}`
+      );
 
       const startTime = Date.now();
       try {
         const result = await withTimeout(
           convertLibre(req.file.buffer, '.pdf', undefined),
-          90_000, // Increased from 60s to 90s
+          timeoutMs,
           'DOCX->PDF'
         );
         console.log(`[DOCX2PDF] Completed in ${Date.now() - startTime}ms`);
         return result;
       } catch (error) {
         console.error(`[DOCX2PDF] Failed after ${Date.now() - startTime}ms:`, error.message);
+        // Clean up on error
+        await killStuckProcesses();
         throw error;
       }
     });

apps/OpenSignServer/cloud/customRoute/uploadFile.js

@@ -1,168 +0,0 @@
-// npm packages
-import multer from 'multer';
-import multerS3 from 'multer-s3';
-import aws from 'aws-sdk';
-import dotenv from 'dotenv';
-import { cloudServerUrl, serverAppId, useLocal } from '../../Utils.js';
-dotenv.config({ quiet: true });
-
-function sanitizeFileName(fileName) {
-  // Remove spaces and invalid characters
-  return fileName.replace(/[^a-zA-Z0-9._-]/g, '');
-}
-
-async function uploadFile(req, res) {
-  try {
-    //--size extended to 100 mb
-    const size = 100 * 1024 * 1024;
-    //console.log(size);
-
-    const accepted_extensions = [
-      'jpg',
-      'png',
-      'gif',
-      'mp4',
-      'mp3',
-      'pdf',
-      'jpeg',
-      'dwg',
-      'dxf',
-      'zip',
-      'rar',
-      'txt',
-      'doc',
-      'docx',
-      'pptx',
-      'ppt',
-      'xlsx',
-      'xlsm',
-      'xlsb',
-      'xltx',
-      'xml',
-      'xls',
-      'xla',
-      'xlx',
-    ];
-
-    const DO_ENDPOINT = process.env.DO_ENDPOINT;
-    const DO_ACCESS_KEY_ID = process.env.DO_ACCESS_KEY_ID;
-    const DO_SECRET_ACCESS_KEY = process.env.DO_SECRET_ACCESS_KEY;
-    const DO_SPACE = process.env.DO_SPACE;
-
-    const parseBaseUrl = cloudServerUrl; //process.env.SERVER_URL;
-    const parseAppId = serverAppId;
-    let fileStorage;
-    if (useLocal === 'true') {
-      fileStorage = multer.diskStorage({
-        destination: function (req, file, cb) {
-          cb(null, 'files/files');
-        },
-        metadata: function (req, file, cb) {
-          cb(null, { fieldName: 'OPENSIGN_METADATA' });
-        },
-        filename: function (req, file, cb) {
-          let filename = file.originalname;
-          let newFileName = filename.split('.')[0];
-          let extension = filename.split('.')[1];
-          newFileName = sanitizeFileName(
-            newFileName + '_' + new Date().toISOString() + '.' + extension
-          );
-          // console.log(newFileName);
-          cb(null, newFileName);
-        },
-      });
-    } else {
-      try {
-        const spacesEndpoint = new aws.Endpoint(DO_ENDPOINT);
-        const s3 = new aws.S3({
-          endpoint: spacesEndpoint,
-          accessKeyId: DO_ACCESS_KEY_ID,
-          secretAccessKey: DO_SECRET_ACCESS_KEY,
-          signatureVersion: 'v4',
-          region: process.env.DO_REGION,
-        });
-        fileStorage = multerS3({
-          acl: 'public-read',
-          s3,
-          bucket: DO_SPACE,
-          metadata: function (req, file, cb) {
-            cb(null, { fieldName: 'OPENSIGN_METADATA' });
-          },
-          key: function (req, file, cb) {
-            //console.log(file);
-            let filename = file.originalname;
-            let newFileName = filename.split('.')[0];
-            let extension = filename.split('.')[1];
-            newFileName = sanitizeFileName(
-              newFileName + '_' + new Date().toISOString() + '.' + extension
-            );
-            // console.log(newFileName);
-            cb(null, newFileName);
-          },
-        });
-      } catch (err) {
-        fileStorage = multer.diskStorage({
-          destination: function (req, file, cb) {
-            cb(null, 'files/files');
-          },
-          metadata: function (req, file, cb) {
-            cb(null, { fieldName: 'OPENSIGN_METADATA' });
-          },
-          filename: function (req, file, cb) {
-            let filename = file.originalname;
-            let newFileName = filename.split('.')[0];
-            let extension = filename.split('.')[1];
-            newFileName = sanitizeFileName(
-              newFileName + '_' + new Date().toISOString() + '.' + extension
-            );
-            // console.log(newFileName);
-            cb(null, newFileName);
-          },
-        });
-      }
-    }
-
-    // const s3 = new aws.S3();
-    const upload = multer({
-      fileFilter: function (req, file, cb) {
-        if (accepted_extensions.some(ext => file.originalname.toLowerCase().endsWith('.' + ext))) {
-          return cb(null, true);
-        }
-        // otherwise, return error
-        return cb('Only ' + accepted_extensions.join(', ') + ' files are allowed!');
-      },
-      storage: fileStorage,
-      limits: { fileSize: size },
-    }).single('file');
-
-    //--call upload function--
-    upload(req, res, function (err, some) {
-      if (err) {
-        console.log(err);
-        const status = 'Error';
-        const message = err;
-        const returnCode = 1029;
-        return res.send({ status, returnCode, message });
-      }
-
-      const status = 'Success';
-      //res.header("Access-Control-Allow-Headers", "Content-Type");
-      //res.setHeader("Access-Control-Allow-Origin", "*");
-      if (useLocal === 'true') {
-        // console.log(req.file);
-        var fileUrl = `${parseBaseUrl}/files/${parseAppId}/${req.file.filename}`;
-      } else {
-        var fileUrl = req.file.location;
-      }
-
-      return res.json({ status, imageUrl: fileUrl });
-    });
-  } catch (err) {
-    console.log('Exeption in query ' + err.stack);
-    const status = 'Error';
-    const returnCode = 1021;
-    const message = 'Some error occurred';
-    return res.send({ status, returnCode, message });
-  }
-}
-export default uploadFile;

apps/OpenSignServer/cloud/main.js

@@ -62,6 +62,7 @@ import manageSign from './parsefunction/manageSign.js';
 import getSignature from './parsefunction/getSignature.js';
 import updateEmailTemplates from './parsefunction/updateEmailTemplates.js';
 import triggerEvent from './parsefunction/triggerEvent.js';
+import setWidgetPreferences from './parsefunction/setWidgetPreferences.js';
 
 // This afterSave function triggers after an object is added or updated in the specified class, allowing for post-processing logic.
 Parse.Cloud.afterSave('contracts_Document', DocumentAftersave);
@@ -134,3 +135,4 @@ Parse.Cloud.define('managesign', manageSign);
 Parse.Cloud.define('getdefaultsignature', getSignature);
 Parse.Cloud.define('updateemailtemplates', updateEmailTemplates);
 Parse.Cloud.define('triggerevent', triggerEvent);
+Parse.Cloud.define('setwidgetpreferences', setWidgetPreferences);

apps/OpenSignServer/cloud/parsefunction/DocumentAftersave.js

@@ -2,59 +2,23 @@ async function DocumentAftersave(request) {
   try {
     if (!request.original) {
       console.log('new entry is insert in contracts_Document');
-      const createdAt = request.object.get('createdAt');
-      const Folder = request.object.get('Type');
+      const obj = request.object;
+      const objId = obj?.id;
+      const createdAt = obj?.get?.('createdAt');
+      const folder = obj?.get?.('Type');
       const ip = request?.headers?.['x-real-ip'] || '';
-      const originIp = request?.object?.get('OriginIp') || '';
-      if (createdAt && Folder === undefined) {
-        // console.log("IN If condition")
-        const TimeToCompleteDays = request.object.get('TimeToCompleteDays') || 15;
-        const ExpiryDate = new Date(createdAt);
-        ExpiryDate.setDate(ExpiryDate.getDate() + TimeToCompleteDays);
-        const documentQuery = new Parse.Query('contracts_Document');
-        documentQuery.include('ExtUserPtr.TenantId');
-        const updateQuery = await documentQuery.get(request.object.id, { useMasterKey: true });
-        updateQuery.set('ExpiryDate', ExpiryDate);
-        if (!originIp) {
-          updateQuery.set('OriginIp', ip);
-        }
-        const AutoReminder = request?.object?.get('AutomaticReminders') || false;
-        if (AutoReminder) {
-          const RemindOnceInEvery = request?.object?.get('RemindOnceInEvery') || 5;
-          const ReminderDate = new Date(createdAt);
-          ReminderDate.setDate(ReminderDate.getDate() + RemindOnceInEvery);
-          updateQuery.set('NextReminderDate', ReminderDate);
-        }
-        await updateQuery.save(null, { useMasterKey: true });
-      } else if (createdAt && Folder === 'AIDoc') {
-        const TimeToCompleteDays = request.object.get('TimeToCompleteDays');
-        const ExpiryDate = new Date(createdAt);
-        ExpiryDate.setDate(ExpiryDate.getDate() + TimeToCompleteDays);
-        const documentQuery = new Parse.Query('contracts_Document');
-        documentQuery.include('ExtUserPtr.TenantId');
-        const updateQuery = await documentQuery.get(request.object.id, { useMasterKey: true });
-        updateQuery.set('ExpiryDate', ExpiryDate);
-        if (!originIp) {
-          updateQuery.set('OriginIp', ip);
-        }
-        const AutoReminder = request?.object?.get('AutomaticReminders') || false;
-        if (AutoReminder) {
-          const RemindOnceInEvery = request?.object?.get('RemindOnceInEvery') || 5;
-          const ReminderDate = new Date(createdAt);
-          ReminderDate.setDate(ReminderDate.getDate() + RemindOnceInEvery);
-          updateQuery.set('NextReminderDate', ReminderDate);
-        }
-        await updateQuery.save(null, { useMasterKey: true });
+      const originIp = obj?.get?.('OriginIp') || '';
+      if (createdAt) {
+        await updateDocumentMeta({ objId, createdAt, folder, ip, originIp });
       }
 
-      const signers = request.object.get('Signers');
+      const signers = obj?.get?.('Signers');
+      const hasSigners = Array.isArray(signers) && signers.length > 0;
       // update acl of New Document If There are signers present in array
-      if (signers && signers.length > 0) {
-        await updateAclDoc(request.object.id);
-      } else {
-        if (request?.object?.id && request.user) {
-          await updateSelfDoc(request.object.id);
-        }
+      if (hasSigners) {
+        await updateAclDoc(objId);
+      } else if (objId && request?.user) {
+        await updateSelfDoc(objId);
       }
     } else {
       if (request?.user) {
@@ -73,17 +37,49 @@ async function DocumentAftersave(request) {
     console.log(err);
   }
 
+  async function updateDocumentMeta({ objId, createdAt, folder, ip, originIp }) {
+    const documentQuery = new Parse.Query('contracts_Document');
+    documentQuery.include('ExtUserPtr.TenantId');
+
+    const doc = await documentQuery.get(objId, { useMasterKey: true });
+    if (folder === undefined || folder === 'AIDoc') {
+      // ExpiryDate
+      const timeToCompleteDays =
+        folder === undefined
+          ? doc.get('TimeToCompleteDays') || 15 // keep your default=15 only for "undefined folder"
+          : doc.get('TimeToCompleteDays'); // keep original behavior for AIDoc (no forced default)
+
+      if (typeof timeToCompleteDays === 'number' && createdAt) {
+        const expiryDate = new Date(createdAt);
+        expiryDate.setDate(expiryDate.getDate() + timeToCompleteDays);
+        doc.set('ExpiryDate', expiryDate);
+      }
+
+      // OriginIp
+      if (!originIp) {
+        doc.set('OriginIp', ip);
+      }
+
+      // Automatic reminders
+      const autoReminder = doc.get('AutomaticReminders') || false;
+      if (autoReminder && createdAt) {
+        const remindOnceInEvery = doc.get('RemindOnceInEvery') || 5;
+        const reminderDate = new Date(createdAt);
+        reminderDate.setDate(reminderDate.getDate() + remindOnceInEvery);
+        doc.set('NextReminderDate', reminderDate);
+      }
+    }
+
+    await doc.save(null, { useMasterKey: true });
+  }
+
   async function updateAclDoc(objId) {
-    // console.log("In side updateAclDoc func")
-    // console.log(objId)
     const Query = new Parse.Query('contracts_Document');
     Query.include('Signers');
     Query.include('ExtUserPtr.TenantId');
     Query.include('CreatedBy');
     const updateACL = await Query.get(objId, { useMasterKey: true });
     const res = JSON.parse(JSON.stringify(updateACL));
-    // console.log("res");
-    // console.log(JSON.stringify(res));
     const UsersPtr = res.Signers.map(item => item.UserId);
 
     if (res.Signers[0].ExtUserPtr) {
@@ -97,8 +93,6 @@ async function DocumentAftersave(request) {
       updateACL.set('Signers', ExtUserSigners);
     }
 
-    // console.log("UsersPtr")
-    // console.log(JSON.stringify(UsersPtr))
     const newACL = new Parse.ACL();
     newACL.setPublicReadAccess(false);
     newACL.setPublicWriteAccess(false);
@@ -116,14 +110,11 @@ async function DocumentAftersave(request) {
   }
 
   async function updateSelfDoc(objId) {
-    // console.log(objId)
     const Query = new Parse.Query('contracts_Document');
     Query.include('CreatedBy');
     Query.include('ExtUserPtr.TenantId');
     const updateACL = await Query.get(objId, { useMasterKey: true });
     const res = JSON.parse(JSON.stringify(updateACL));
-    // console.log("res");
-    // console.log(JSON.stringify(res));
     const newACL = new Parse.ACL();
     newACL.setPublicReadAccess(false);
     newACL.setPublicWriteAccess(false);

apps/OpenSignServer/cloud/parsefunction/DocumentBeforesave.js

@@ -1,4 +1,5 @@
 import { MAX_DESCRIPTION_LENGTH, MAX_NAME_LENGTH, MAX_NOTE_LENGTH } from '../../Utils.js';
+import { setDocumentCount } from '../../utils/CountUtils.js';
 
 async function DocumentBeforesave(request) {
   if (!request.original) {
@@ -33,24 +34,8 @@ async function DocumentBeforesave(request) {
 
     // Check if SignedUrl field has been added (transition from undefined to defined)
     if (oldDocument && !oldDocument?.get('SignedUrl') && document?.get('SignedUrl')) {
-      // Update count in contracts_Users class
-      const query = new Parse.Query('contracts_Users');
-      query.equalTo('objectId', oldDocument.get('ExtUserPtr').id);
-
-      try {
-        const contractUser = await query.first({ useMasterKey: true });
-        if (contractUser) {
-          contractUser.increment('DocumentCount', 1);
-          await contractUser.save(null, { useMasterKey: true });
-        } else {
-          // Create new entry if not found
-          const ContractsUsers = Parse.Object.extend('contracts_Users');
-          const newContractUser = new ContractsUsers();
-          newContractUser.set('DocumentCount', 1);
-          await newContractUser.save(null, { useMasterKey: true });
-        }
-      } catch (error) {
-        console.log('Error updating document count in contracts_Users: ' + error.message);
+      if (oldDocument?.get('ExtUserPtr')?.id) {
+        setDocumentCount(oldDocument?.get('ExtUserPtr')?.id);
       }
       if (document?.get('Signers') && document.get('Signers').length > 0) {
         document.set('DocSentAt', new Date());

apps/OpenSignServer/cloud/parsefunction/ForwardDoc.js

@@ -36,7 +36,7 @@ export default async function forwardDoc(request) {
         let mailRes;
         for (let i = 0; i < recipients.length; i++) {
           const logo = `<img src='https://qikinnovation.ams3.digitaloceanspaces.com/logo.png' height='50' style='padding:20px'/>`;
-          const opurl = ` <a href='www.opensignlabs.com' target=_blank>here</a>`;
+          const opurl = ` <a href='mailto:complaint@opensiglabs.com' target=_blank>here</a>`;
           const themeColor = '#47a3ad';
 
           let params = {
@@ -52,7 +52,7 @@ export default async function forwardDoc(request) {
               `${logo}</div><div style='padding:2px;font-family:system-ui;background-color:${themeColor}'><p style='font-size:20px;font-weight:400;color:white;padding-left:20px'>Document Copy</p></div><div>` +
               `<p style='padding:20px;font-family:system-ui;font-size:14px'>A copy of the document <strong>${docName}</strong> is attached to this email. Kindly download the document from the attachment.</p>` +
               `</div></div><div><p>This is an automated email from ${TenantAppName}. For any queries regarding this email, please contact the sender ${replyTo} directly. ` +
-              `If you think this email is inappropriate or spam, you may file a complaint with ${TenantAppName}${opurl}.</p></div></div></body></html>`,
+              `If you think this email is inappropriate or spam, you may file a complaints with ${TenantAppName}${opurl}.</p></div></div></body></html>`,
           };
           mailRes = await axios.post(`${cloudServerUrl}/functions/sendmailv3`, params, {
             headers: {

apps/OpenSignServer/cloud/parsefunction/TemplateAfterSave.js

@@ -2,27 +2,20 @@ export default async function TemplateAfterSave(request) {
   try {
     if (!request.original) {
       console.log('new entry is insert in contracts_Template');
-      // update acl of New Document If There are signers present in array
-      const signers = request.object.get('Signers');
-      const AutoReminder = request?.object?.get('AutomaticReminders') || false;
+      const obj = request.object;
+      const objId = obj?.id;
       const ip = request?.headers?.['x-real-ip'] || '';
-      const originIp = request?.object?.get('OriginIp') || '';
-      if (AutoReminder) {
-        const RemindOnceInEvery = request?.object?.get('RemindOnceInEvery') || 5;
-        const ReminderDate = new Date(request?.object?.get('createdAt'));
-        ReminderDate.setDate(ReminderDate.getDate() + RemindOnceInEvery);
-        request.object.set('NextReminderDate', ReminderDate);
-      }
-      if (!originIp) {
-        request.object.set('OriginIp', ip);
-      }
-      await request.object.save(null, { useMasterKey: true });
-      if (signers && signers.length > 0) {
-        await updateAclDoc(request.object.id);
-      } else {
-        if (request?.object?.id && request?.user) {
-          await updateSelfDoc(request.object.id);
-        }
+      const originIp = obj?.get?.('OriginIp') || '';
+      const createdAt = obj?.get?.('createdAt');
+
+      // update acl of New template If There are signers present in array
+      const signers = obj?.get('Signers');
+      const hasSigners = Array.isArray(signers) && signers.length > 0;
+      updateTemplateMeta({ objId, createdAt, ip, originIp });
+      if (hasSigners) {
+        await updateAclDoc(objId);
+      } else if (objId && request?.user) {
+        await updateSelfDoc(objId);
       }
     } else {
       if (request?.user) {
@@ -41,17 +34,33 @@ export default async function TemplateAfterSave(request) {
     console.log(err);
   }
 
+  async function updateTemplateMeta({ objId, createdAt, ip, originIp }) {
+    const templateQuery = new Parse.Query('contracts_Template');
+    templateQuery.include('ExtUserPtr.TenantId');
+
+    const obj = await templateQuery.get(objId, { useMasterKey: true });
+
+    // Automatic reminders
+    const AutoReminder = obj?.get('AutomaticReminders') || false;
+    if (AutoReminder) {
+      const RemindOnceInEvery = obj?.get('RemindOnceInEvery') || 5;
+      const ReminderDate = new Date(createdAt);
+      ReminderDate.setDate(ReminderDate.getDate() + RemindOnceInEvery);
+      obj.set('NextReminderDate', ReminderDate);
+    }
+    if (!originIp) {
+      obj.set('OriginIp', ip);
+    }
+
+    await obj.save(null, { useMasterKey: true });
+  }
   async function updateAclDoc(objId) {
-    // console.log("In side updateAclDoc func")
-    // console.log(objId)
     const Query = new Parse.Query('contracts_Template');
     Query.include('Signers');
     Query.include('CreatedBy');
     Query.include('ExtUserPtr.TenantId');
     const updateACL = await Query.get(objId, { useMasterKey: true });
     const res = JSON.parse(JSON.stringify(updateACL));
-    // console.log("res");
-    // console.log(JSON.stringify(res));
     const UsersPtr = res.Signers.map(item => item.UserId);
 
     if (res.Signers[0].ExtUserPtr) {
@@ -65,8 +74,6 @@ export default async function TemplateAfterSave(request) {
       updateACL.set('Signers', ExtUserSigners);
     }
 
-    // console.log("UsersPtr")
-    // console.log(JSON.stringify(UsersPtr))
     const newACL = new Parse.ACL();
     newACL.setPublicReadAccess(false);
     newACL.setPublicWriteAccess(false);
@@ -85,15 +92,11 @@ export default async function TemplateAfterSave(request) {
   }
 
   async function updateSelfDoc(objId) {
-    // console.log("Inside updateSelfDoc func")
-
     const Query = new Parse.Query('contracts_Template');
     Query.include('CreatedBy');
     Query.include('ExtUserPtr.TenantId');
     const updateACL = await Query.get(objId, { useMasterKey: true });
     const res = JSON.parse(JSON.stringify(updateACL));
-    // console.log("res");
-    // console.log(JSON.stringify(res));
     const newACL = new Parse.ACL();
     newACL.setPublicReadAccess(false);
     newACL.setPublicWriteAccess(false);

apps/OpenSignServer/cloud/parsefunction/TemplateBeforesave.js

@@ -1,4 +1,5 @@
 import { MAX_DESCRIPTION_LENGTH, MAX_NAME_LENGTH, MAX_NOTE_LENGTH } from '../../Utils.js';
+import { setTemplateCount } from '../../utils/CountUtils.js';
 
 async function TemplateBeforeSave(request) {
   if (!request.original) {
@@ -31,24 +32,8 @@ async function TemplateBeforeSave(request) {
       // below code is used to update template when user sent template or self signed
       const template = request.object;
 
-      // Update count in contracts_Users class
-      const query = new Parse.Query('contracts_Users');
-      query.equalTo('objectId', template.get('ExtUserPtr').id);
-
-      try {
-        const contractUser = await query.first({ useMasterKey: true });
-        if (contractUser) {
-          contractUser.increment('TemplateCount', 1);
-          await contractUser.save(null, { useMasterKey: true });
-        } else {
-          // Create new entry if not found
-          const ContractsUsers = Parse.Object.extend('contracts_Users');
-          const newContractUser = new ContractsUsers();
-          newContractUser.set('TemplateCount', 1);
-          await newContractUser.save(null, { useMasterKey: true });
-        }
-      } catch (error) {
-        console.log('Error updating template count in contracts_Users: ' + error.message);
+      if (template?.get('ExtUserPtr')?.id) {
+        setTemplateCount(template?.get('ExtUserPtr')?.id);
       }
     }
   } catch (err) {

apps/OpenSignServer/cloud/parsefunction/createBatchDocs.js

@@ -1,13 +1,14 @@
 import axios from 'axios';
 import { cloudServerUrl, mailTemplate, replaceMailVaribles, serverAppId } from '../../Utils.js';
+import { setDocumentCount } from '../../utils/CountUtils.js';
+
 const serverUrl = cloudServerUrl; //process.env.SERVER_URL;
 const appId = serverAppId;
 async function deductcount(docsCount, extUserId) {
   try {
-    const extCls = new Parse.Object('contracts_Users');
-    extCls.id = extUserId;
-    extCls.increment('DocumentCount', docsCount);
-    const resExt = await extCls.save(null, { useMasterKey: true });
+    if (extUserId) {
+      setDocumentCount(extUserId);
+    }
   } catch (err) {
     console.log('Err in deduct in quick send', err);
   }
@@ -24,7 +25,7 @@ async function sendMail(document, publicUrl) {
     month: 'long',
     year: 'numeric',
   });
-  let signerMail = document.Placeholders;
+  let signerMail = document.Placeholders?.filter(x => x?.Role !== 'prefill');
   const senderName = document.ExtUserPtr.Name;
   const senderEmail = document.ExtUserPtr.Email;
 
@@ -108,9 +109,12 @@ async function batchQuery(userId, Documents, Ip, parseConfig, type, publicUrl) {
     try {
       const requests = Documents.map(x => {
         const Signers = x.Signers;
-        const allSigner = x?.Placeholders?.map(
-          item => Signers?.find(e => item?.signerPtr?.objectId === e?.objectId) || item?.signerPtr
-        ).filter(signer => Object.keys(signer).length > 0);
+        const placeholders = x?.Placeholders?.filter(p => p?.Role !== 'prefill');
+        const allSigner = placeholders
+          ?.map(
+            item => Signers?.find(e => item?.signerPtr?.objectId === e?.objectId) || item?.signerPtr
+          )
+          .filter(signer => Object.keys(signer).length > 0);
         const date = new Date();
         const isoDate = date.toISOString();
         let Acl = { [x.CreatedBy.objectId]: { read: true, write: true } };
@@ -139,7 +143,7 @@ async function batchQuery(userId, Documents, Ip, parseConfig, type, publicUrl) {
               className: x.ExtUserPtr.className,
               objectId: x.ExtUserPtr?.objectId,
             },
-            Placeholders: x.Placeholders.map(y =>
+            Placeholders: placeholders.map(y =>
               y?.signerPtr?.objectId
                 ? {
                     ...y,

apps/OpenSignServer/cloud/parsefunction/declinedocument.js

@@ -14,7 +14,7 @@ async function sendDeclineMail(doc, publicUrl, userId, reason) {
     const TenantAppName = appName;
     const logo =
       "<img src='https://qikinnovation.ams3.digitaloceanspaces.com/logo.png' height='50' style='padding:20px'/>";
-    const opurl = ` <a href=www.opensignlabs.com target=_blank>here</a>`;
+    const opurl = ` <a href='mailto:complaint@opensiglabs.com' target=_blank>here</a>`;
     const removePrefill =
       doc?.Placeholders?.length > 0 && doc?.Placeholders?.filter(x => x?.Role !== 'prefill');
     const signUser =
@@ -36,7 +36,7 @@ async function sendDeclineMail(doc, publicUrl, userId, reason) {
       `<p>${pdfName} has been declined by ${signerName} "${signerEmail}" on ${new Date().toLocaleDateString()}.</p>` +
       `<p>Decline Reason: ${reason || 'Not specified'}</p>` +
       `<p><a href=${viewDocUrl} target=_blank>View Document</a></p></div></div><div><p>This is an automated email from ${TenantAppName}. For any queries regarding this email, ` +
-      `please contact the sender ${creatorEmail} directly. If you think this email is inappropriate or spam, you may file a complaint with ${TenantAppName}${opurl}.</p></div></div></body></html>`;
+      `please contact the sender ${creatorEmail} directly. If you think this email is inappropriate or spam, you may file a complaints with ${TenantAppName}${opurl}.</p></div></div></body></html>`;
 
     const params = {
       extUserId: sender.objectId,

apps/OpenSignServer/cloud/parsefunction/generateCertificatebydocId.js

@@ -2,7 +2,6 @@ import { SignPdf } from '@signpdf/signpdf';
 import { P12Signer } from '@signpdf/signer-p12';
 import { pdflibAddPlaceholder } from '@signpdf/placeholder-pdf-lib';
 import { PDFDocument } from 'pdf-lib';
-import Parse from 'parse/node.js';
 import fs from 'node:fs';
 import dotenv from 'dotenv';
 import GenerateCertificate from './pdf/GenerateCertificate.js';

apps/OpenSignServer/cloud/parsefunction/getReport.js

@@ -1,12 +1,16 @@
 import { cloudServerUrl, serverAppId } from '../../Utils.js';
-import reportJson from './reportsJson.js';
+import reportJson, { applySearch } from './reportsJson.js';
 import axios from 'axios';
-
-// Escape regex special characters. Copied from filterDocs.js
-function escapeRegExp(str) {
-  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+function buildClassesUrl({ serverUrl, clsName, paramsObj, keys, orderBy, skip, limit, include }) {
+  const url = new URL(`${serverUrl}/classes/${clsName}`);
+  url.searchParams.set('where', JSON.stringify(paramsObj));
+  url.searchParams.set('keys', keys.join(','));
+  url.searchParams.set('order', orderBy);
+  url.searchParams.set('skip', String(skip));
+  url.searchParams.set('limit', String(limit));
+  if (include) url.searchParams.set('include', include);
+  return url.toString();
 }
-
 export default async function getReport(request) {
   const reportId = request.params.reportId;
   const limit = request.params.limit;
@@ -25,78 +29,76 @@ export default async function getReport(request) {
       },
     });
     const userId = userRes.data && userRes.data.objectId;
-    if (userId) {
-      const json = reportId && reportJson(reportId, userId);
-      const clsName = json?.reportClass ? json.reportClass : 'contracts_Document';
-      if (json) {
-        const { params, keys } = json;
-        const orderBy = '-updatedAt';
-        const strKeys = keys.join();
-        let paramsObj = { ...params };
-        if (reportId == '6TeaPr321t') {
-          const extUserQuery = new Parse.Query('contracts_Users');
-          extUserQuery.equalTo('Email', userRes.data.email);
-          extUserQuery.include('TeamIds');
-          const extUser = await extUserQuery.first({ useMasterKey: true });
-          if (extUser) {
-            const _extUser = JSON.parse(JSON.stringify(extUser));
-            if (_extUser?.TeamIds && _extUser.TeamIds?.length > 0) {
-              let teamArr = [];
-              _extUser?.TeamIds?.forEach(x => (teamArr = [...teamArr, ...x.Ancestors]));
-              paramsObj = {
-                ...paramsObj,
-                $or: [
-                  { SharedWith: { $in: teamArr } },
-                  {
-                    ExtUserPtr: {
-                      __type: 'Pointer',
-                      className: 'contracts_Users',
-                      objectId: extUser.id,
-                    },
-                  },
-                  {
-                    SharedWithUsers: {
-                      __type: 'Pointer',
-                      className: 'contracts_Users',
-                      objectId: extUser.id,
-                    },
-                  },
-                ],
-              };
-            } else {
-              paramsObj = {
-                ...paramsObj,
-                CreatedBy: { __type: 'Pointer', className: '_User', objectId: userId },
-              };
-            }
-          }
+    if (!userId) {
+      return { error: 'Invalid session token' };
+    }
+    const json = reportId && reportJson(reportId, userId);
+    if (json) {
+      let paramsObj = { ...(json.params || {}) };
+      if (reportId == '6TeaPr321t') {
+        const extUserQuery = new Parse.Query('contracts_Users');
+        extUserQuery.equalTo('Email', userRes.data.email);
+        extUserQuery.include('TeamIds');
+        const extUser = await extUserQuery.first({ useMasterKey: true });
+        const userPtr = { __type: 'Pointer', className: '_User', objectId: userId };
+        if (!extUser) {
+          paramsObj = { ...paramsObj, CreatedBy: userPtr };
         }
-        if (searchTerm) {
-          const escaped = escapeRegExp(searchTerm);
+        const _extUser = JSON.parse(JSON.stringify(extUser));
+        const extPtr = { __type: 'Pointer', className: 'contracts_Users', objectId: extUser.id };
+        if (_extUser?.TeamIds && _extUser.TeamIds?.length > 0) {
+          // Collect ancestors efficiently + de-dupe
+          const teamSet = new Set();
+          for (const team of _extUser?.TeamIds) {
+            const ancestors = team.Ancestors || [];
+            for (const a of ancestors) teamSet.add(a);
+          }
+          const teamArr = [...teamSet];
           paramsObj = {
             ...paramsObj,
-            Name: { $regex: `.*${escaped}.*`, $options: 'i' },
+            $or: [
+              { SharedWith: { $in: teamArr } },
+              { ExtUserPtr: extPtr },
+              { SharedWithUsers: extPtr },
+            ],
           };
-        }
-        const strParams = JSON.stringify(paramsObj);
-        const headers = {
-          'Content-Type': 'application/json',
-          'X-Parse-Application-Id': appId,
-          'X-Parse-Master-Key': masterKey,
-        };
-        const url = `${serverUrl}/classes/${clsName}?where=${strParams}&keys=${strKeys}&order=${orderBy}&skip=${skip}&limit=${limit}&include=AuditTrail.UserPtr,Placeholders.signerPtr,ExtUserPtr.TenantId`;
-        const res = await axios.get(url, { headers: headers });
-        if (res.data && res.data.results) {
-          return res.data.results;
         } else {
-          return [];
+          paramsObj = { ...paramsObj, CreatedBy: userPtr };
         }
-      } else {
-        return { error: 'Report is not available!' };
       }
+      paramsObj = applySearch({ reportId, baseWhere: paramsObj, searchTerm });
+      const headers = {
+        'Content-Type': 'application/json',
+        'X-Parse-Application-Id': appId,
+        'X-Parse-Master-Key': masterKey,
+      };
+
+      const clsName = json?.reportClass ? json.reportClass : 'contracts_Document';
+      const orderBy = '-updatedAt';
+      const include = 'AuditTrail.UserPtr,Placeholders.signerPtr,ExtUserPtr.TenantId';
+
+      const url = buildClassesUrl({
+        serverUrl,
+        clsName,
+        paramsObj,
+        keys: json.keys || [],
+        orderBy,
+        skip,
+        limit,
+        include,
+      });
+      const res = await axios.get(url, { headers: headers });
+      if (res.data && res.data.results) {
+        return res.data.results;
+      } else {
+        return [];
+      }
+    } else {
+      return { error: 'Report is not available!' };
     }
   } catch (err) {
-    console.log('err', err.message);
+    const message = err?.response?.data?.error || err?.message || 'Something went wrong';
+    console.log('getreport error:', message);
     if (err.code == 209) {
       return { error: 'Invalid session token' };
     } else {

apps/OpenSignServer/cloud/parsefunction/getSignedUrl.js

@@ -2,6 +2,7 @@ import AWS from 'aws-sdk';
 import { useLocal } from '../../Utils.js';
 import jwt from 'jsonwebtoken';
 import dotenv from 'dotenv';
+import { isAuthenticated } from '../../utils/AuthUtils.js';
 dotenv.config({ quiet: true });
 
 export default function getPresignedUrl(url) {
@@ -42,6 +43,7 @@ export async function getSignedUrl(request) {
     const docId = request.params.docId || '';
     const templateId = request.params.templateId || '';
     const url = request.params.url;
+
     if (docId || templateId) {
       try {
         if (url?.includes('files')) {
@@ -56,8 +58,14 @@ export async function getSignedUrl(request) {
 
           const _resDoc = res?.toJSON();
           // Ensure user is authenticated if OTP is required
-          if (_resDoc?.IsEnableOTP && !request?.user) {
-            throw new Parse.Error(Parse.Error.INVALID_SESSION_TOKEN, 'User is not authenticated.');
+          if (_resDoc?.IsEnableOTP) {
+            const isAuth = await isAuthenticated(request?.user);
+            if (!isAuth) {
+              throw new Parse.Error(
+                Parse.Error.INVALID_SESSION_TOKEN,
+                'User is not authenticated.'
+              );
+            }
           }
 
           const presignedUrl = getPresignedUrl(url);
@@ -70,7 +78,8 @@ export async function getSignedUrl(request) {
         throw err;
       }
     } else {
-      if (!request?.user) {
+      const isAuth = await isAuthenticated(request?.user);
+      if (!isAuth) {
         throw new Parse.Error(Parse.Error.INVALID_SESSION_TOKEN, 'User is not authenticated.');
       } else {
         if (url?.includes('files')) {

apps/OpenSignServer/cloud/parsefunction/pdf/PDF.js

@@ -122,7 +122,7 @@ async function sendNotifyMail(doc, signUser, mailProvider, publicUrl) {
     const TenantAppName = appName;
     const logo =
       "<img src='https://qikinnovation.ams3.digitaloceanspaces.com/logo.png' height='50' style='padding:20px'/>";
-    const opurl = ` <a href=www.opensignlabs.com target=_blank>here</a>`;
+    const opurl = ` <a href='mailto:complaint@opensiglabs.com' target=_blank>here</a>`;
     const auditTrailCount = doc?.AuditTrail?.filter(x => x.Activity === 'Signed')?.length || 0;
     const removePrefill =
       doc?.Placeholders?.length > 0 && doc?.Placeholders?.filter(x => x?.Role !== 'prefill');
@@ -142,7 +142,7 @@ async function sendNotifyMail(doc, signUser, mailProvider, publicUrl) {
         `<div>${logo}</div><div style='padding:2px;font-family:system-ui;background-color:#47a3ad'><p style='font-size:20px;font-weight:400;color:white;padding-left:20px'>Document signed by ${signerName}</p>` +
         `</div><div style='padding:20px;font-family:system-ui;font-size:14px'><p>Dear ${creatorName},</p><p>${pdfName} has been signed by ${signerName} "${signerEmail}" successfully</p>` +
         `<p><a href=${viewDocUrl} target=_blank>View Document</a></p></div></div><div><p>This is an automated email from ${TenantAppName}. For any queries regarding this email, ` +
-        `please contact the sender ${creatorEmail} directly. If you think this email is inappropriate or spam, you may file a complaint with ${TenantAppName}${opurl}.</p></div></div></body></html>`;
+        `please contact the sender ${creatorEmail} directly. If you think this email is inappropriate or spam, you may file a complaints with ${TenantAppName}${opurl}.</p></div></div></body></html>`;
 
       const params = {
         extUserId: sender.objectId,
@@ -169,7 +169,7 @@ async function sendCompletedMail(obj) {
   const TenantAppName = appName;
   const logo =
     "<img src='https://qikinnovation.ams3.digitaloceanspaces.com/logo.png' height='50' style='padding:20px'/>";
-  const opurl = ` <a href=www.opensignlabs.com target=_blank>here</a>`;
+  const opurl = ` <a href='mailto:complaint@opensiglabs.com' target=_blank>here</a>`;
   let signersMail;
   if (doc?.Signers?.length > 0) {
     const isOwnerExistsinSigners = doc?.Signers?.find(x => x.Email === sender.Email);
@@ -186,7 +186,7 @@ async function sendCompletedMail(obj) {
     `<div>${logo}</div><div style='padding:2px;font-family:system-ui;background-color:#47a3ad'><p style='font-size:20px;font-weight:400;color:white;padding-left:20px'>Document signed successfully</p></div><div>` +
     `<p style='padding:20px;font-family:system-ui;font-size:14px'>All parties have successfully signed the document <b>"${pdfName}"</b>. Kindly download the document from the attachment.</p>` +
     `</div></div><div><p>This is an automated email from ${TenantAppName}. For any queries regarding this email, please contact the sender ${sender.Email} directly.` +
-    `If you think this email is inappropriate or spam, you may file a complaint with ${TenantAppName}${opurl}.</p></div></div></body></html>`;
+    `If you think this email is inappropriate or spam, you may file a complaints with ${TenantAppName}${opurl}.</p></div></div></body></html>`;
 
   if (obj?.isCustomMail) {
     const tenant = sender?.TenantId;

apps/OpenSignServer/cloud/parsefunction/reportsJson.js

@@ -98,11 +98,6 @@ export default function reportJson(id, currentUserId) {
           IsCompleted: true,
           IsDeclined: { $ne: true },
           IsArchive: { $ne: true },
-          // CreatedBy: {
-          //   __type: 'Pointer',
-          //   className: '_User',
-          //   objectId: currentUserId,
-          // },
           $or: [
             // Condition 1: If `CreatedBy` exists, no need for `Signers` filter
             { CreatedBy: { __type: 'Pointer', className: '_User', objectId: currentUserId } },
@@ -230,3 +225,36 @@ export default function reportJson(id, currentUserId) {
       return null;
   }
 }
+
+// Escape regex special characters. Copied from filterDocs.js
+function escapeRegExp(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+/**
+ * Applies searchTerm rules; combines existing access $or with search $or using $and.
+ */
+export function applySearch({ reportId, baseWhere, searchTerm }) {
+  if (!searchTerm) return baseWhere;
+
+  const escaped = escapeRegExp(searchTerm);
+  const nameMatch = { Name: { $regex: `.*${escaped}.*`, $options: 'i' } };
+  const emailMatch = { Email: { $regex: `.*${escaped}.*`, $options: 'i' } };
+
+  if (reportId === 'contacts') {
+    return { ...baseWhere, $or: [nameMatch, emailMatch] };
+  }
+
+  const searchOr = [
+    nameMatch,
+    { Signers: { $inQuery: { className: 'contracts_Contactbook', where: emailMatch } } },
+  ];
+
+  // If baseWhere already has an access-control $or, combine using $and
+  if (baseWhere.$or) {
+    const { $or: accessOr, ...rest } = baseWhere;
+    return { ...rest, $and: [{ $or: accessOr }, { $or: searchOr }] };
+  }
+
+  return { ...baseWhere, $or: searchOr };
+}

apps/OpenSignServer/cloud/parsefunction/saveAsTemplate.js

@@ -56,6 +56,7 @@ export default async function saveAsTemplate(request) {
             pos: pageItem.pos.map(p => ({
               ...p,
               type: p.type === 'text' ? 'text input' : p.type,
+              signatureType: '',
               options: {
                 ...p.options,
                 status: 'required',
@@ -92,6 +93,7 @@ export default async function saveAsTemplate(request) {
                 if (widget.options && widget.options.defaultValue !== undefined) {
                   return {
                     ...widget,
+                    signatureType: '',
                     options: {
                       ...widget.options,
                       defaultValue: '',

apps/OpenSignServer/cloud/parsefunction/sendMailv3.js

@@ -58,15 +58,20 @@ async function sendMailProvider(req, plan, monthchange) {
                 });
             } else {
               const httpsAgent = new https.Agent({ rejectUnauthorized: false }); // Disable SSL validation
+              const localUrl = req.params.url;
+              const newlocalUrl = localUrl.replace(
+                'https://localhost:3001/api',
+                'http://localhost:8080'
+              );
               axios
-                .get(req.params.url, { responseType: 'stream', httpsAgent })
+                .get(newlocalUrl, { responseType: 'stream', httpsAgent: httpsAgent })
                 .then(response => {
                   response.data.pipe(Pdf);
                   Pdf.on('finish', () => resolve('success'));
                   Pdf.on('error', () => resolve('error'));
                 })
                 .catch(e => {
-                  console.log('error', e.message);
+                  console.log('error in localurl', e.message);
                   resolve('error');
                 });
             }

apps/OpenSignServer/cloud/parsefunction/setWidgetPreferences.js

@@ -0,0 +1,49 @@
+export default async function setWidgetPreferences(request) {
+  if (!request?.user) {
+    throw new Parse.Error(Parse.Error.INVALID_SESSION_TOKEN, 'User is not authenticated.');
+  }
+  const dateWidgetParams = request?.params?.dateWidget;
+  if (!dateWidgetParams || Object.keys(dateWidgetParams).length === 0) {
+    throw new Parse.Error(Parse.Error.INVALID_QUERY, 'Please provide parameters.');
+  }
+  try {
+    const orgQuery = new Parse.Query('contracts_Users');
+    orgQuery.equalTo('UserId', request.user);
+    const userObj = await orgQuery.first({ useMasterKey: true });
+    if (!userObj) {
+      throw new Parse.Error(Parse.Error.OPERATION_FORBIDDEN, 'Permission denied.');
+    }
+
+    const widgetPreferencesRaw = userObj?.get('WidgetPreferences');
+    const widgetPreferences = Array.isArray(widgetPreferencesRaw) ? widgetPreferencesRaw : [];
+
+    // Normalize booleans (simple + safe)
+    const dateWidget = {
+      type: 'date',
+      isSigningDate: !!dateWidgetParams.isSigningDate,
+      isReadOnly: !!dateWidgetParams.isReadOnly,
+      date: dateWidgetParams?.isSigningDate ? '' : dateWidgetParams?.date || '',
+      format: dateWidgetParams.format || 'MM/dd/yyyy',
+    };
+
+    // Upsert: replace if exists, otherwise append
+    const updatedWidgetPreferences =
+      widgetPreferences?.length > 0
+        ? widgetPreferences.map(w => (w.type === 'date' ? dateWidget : w))
+        : [...widgetPreferences, dateWidget];
+
+    userObj.set('WidgetPreferences', updatedWidgetPreferences);
+    const saved = await userObj.save(null, { useMasterKey: true });
+    if (saved) {
+      const response = typeof saved.toJSON === 'function' ? saved.toJSON() : saved;
+      return {
+        WidgetPreferences: response.WidgetPreferences,
+        updatedAt: response.updatedAt,
+        createdAt: response.createdAt,
+      };
+    }
+  } catch (err) {
+    console.log('set widget preferences error:', err);
+    throw new Parse.Error(err?.code || 400, err?.message || 'Something went wrong.');
+  }
+}

apps/OpenSignServer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "open_sign_server",
-  "version": "2.34.0",
+  "version": "2.35.0",
   "description": "opensign server using the parse-server module",
   "repository": {
     "type": "git",
@@ -18,55 +18,55 @@
     "watch": "nodemon index.js"
   },
   "dependencies": {
-    "@aws-sdk/client-s3": "^3.952.0",
-    "@aws-sdk/s3-request-presigner": "^3.952.0",
+    "@aws-sdk/client-s3": "^3.978.0",
+    "@aws-sdk/s3-request-presigner": "^3.978.0",
     "@parse/fs-files-adapter": "^3.0.0",
-    "@parse/push-adapter": "^8.1.0",
+    "@parse/push-adapter": "^8.2.0",
     "@parse/s3-files-adapter": "^4.2.0",
     "@pdf-lib/fontkit": "^1.1.1",
-    "@signpdf/placeholder-pdf-lib": "^3.2.6",
-    "@signpdf/signer-p12": "^3.2.4",
-    "@signpdf/signpdf": "^3.2.5",
+    "@signpdf/placeholder-pdf-lib": "^3.3.0",
+    "@signpdf/signer-p12": "^3.3.0",
+    "@signpdf/signpdf": "^3.3.0",
     "aws-sdk": "^2.1693.0",
-    "axios": "^1.13.2",
+    "axios": "^1.13.4",
     "coherentpdf": "^2.5.5",
-    "cors": "^2.8.5",
+    "cors": "^2.8.6",
     "date-fns-tz": "^3.2.0",
     "dotenv": "^17.2.3",
     "express": "^5.2.1",
     "form-data": "^4.0.5",
     "generate-api-key": "^1.0.2",
-    "googleapis": "^169.0.0",
-    "libreoffice-convert": "^1.7.0",
-    "mailgun.js": "^12.4.0",
+    "googleapis": "^170.1.0",
+    "libreoffice-convert": "^1.8.1",
+    "mailgun.js": "^12.7.0",
     "moment": "^2.30.1",
     "mongodb": "^7.0.0",
     "multer": "^2.0.2",
     "multer-s3": "^3.0.1",
     "node-forge": "^1.3.3",
-    "nodemailer": "^7.0.11",
+    "nodemailer": "^7.0.13",
     "p-limit": "^7.2.0",
-    "parse": "^8.0.0",
+    "parse": "^8.0.3",
     "parse-dbtool": "^1.2.0",
     "parse-server": "^8.6.2",
-    "parse-server-api-mail-adapter": "^5.0.2",
+    "parse-server-api-mail-adapter": "^5.0.4",
     "pdf-lib": "^1.17.1",
-    "posthog-node": "^5.17.2",
+    "posthog-node": "^5.21.2",
     "qrcode": "^1.5.4",
     "rate-limiter-flexible": "^9.0.1",
     "sharp": "^0.34.5",
     "speakeasy": "^2.0.0",
-    "ws": "^8.18.3"
+    "ws": "^8.19.0"
   },
   "type": "module",
   "devDependencies": {
-    "@babel/eslint-parser": "^7.28.5",
+    "@babel/eslint-parser": "^7.28.6",
     "eslint": "^9.39.2",
-    "jasmine": "^5.12.0",
-    "mongodb-runner": "^6.4.0",
+    "jasmine": "^6.0.0",
+    "mongodb-runner": "^6.5.4",
     "nodemon": "^3.1.11",
     "nyc": "^17.1.0",
-    "prettier": "^3.7.4"
+    "prettier": "^3.8.1"
   },
   "overrides": {
     "ws": "$ws",

apps/OpenSignServer/utils/AuthUtils.js

@@ -0,0 +1,8 @@
+export const isAuthenticated = async sessionUser => {
+  try {
+    return sessionUser ? true : false;
+  } catch (err) {
+    console.log(`authentication error ${err?.message}`);
+    return false;
+  }
+};