mirror of
https://github.com/OpenSignLabs/OpenSign.git
synced 2026-09-03 08:18:50 +02:00
Compare commits
@@ -3,11 +3,11 @@
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta name="description" content="The fastest way to sign PDFs & request signatures from others" />
|
||||
<!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
|
||||
<!-- <link rel="apple-touch-icon" href="/logo192.png" /> -->
|
||||
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
|
||||
@@ -17,5 +17,6 @@
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" style="touch-action:pan-x pan-y;"></div>
|
||||
<script type="module" src="/src/index.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
Generated
+6814
-17168
File diff suppressed because it is too large
Load Diff
+42
-43
@@ -1,74 +1,70 @@
|
||||
{
|
||||
"name": "open_sign",
|
||||
"version": "0.1.0",
|
||||
"version": "2.21.1",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@formkit/auto-animate": "^0.8.2",
|
||||
"@lottiefiles/dotlottie-react": "^0.13.4",
|
||||
"@lottiefiles/dotlottie-react": "^0.13.5",
|
||||
"@pdf-lib/fontkit": "^1.1.1",
|
||||
"@radix-ui/themes": "^3.1.6",
|
||||
"@reduxjs/toolkit": "^2.7.0",
|
||||
"@radix-ui/themes": "^3.2.1",
|
||||
"@reduxjs/toolkit": "^2.8.2",
|
||||
"@imgly/background-removal": "^1.6.0",
|
||||
"axios": "^1.9.0",
|
||||
"css-minimizer-webpack-plugin": "^7.0.2",
|
||||
"date-fns-tz": "^3.2.0",
|
||||
"file-saver": "^2.0.5",
|
||||
"i18next": "^23.16.8",
|
||||
"i18next-browser-languagedetector": "^8.0.5",
|
||||
"i18next-browser-languagedetector": "^8.1.0",
|
||||
"i18next-http-backend": "^3.0.2",
|
||||
"jszip": "^3.10.1",
|
||||
"jwt-decode": "^4.0.0",
|
||||
"moment": "^2.30.1",
|
||||
"nth-check": "^2.1.1",
|
||||
"parse": "^6.1.1",
|
||||
"pdf-lib": "^1.17.1",
|
||||
"print-js": "^1.6.0",
|
||||
"radix-ui": "^1.0.1",
|
||||
"react": "^18.2.0",
|
||||
"react-bootstrap": "^2.10.9",
|
||||
"prismjs": "^1.30.0",
|
||||
"radix-ui": "^1.4.2",
|
||||
"react": "^18.3.1",
|
||||
"react-bootstrap": "^2.10.10",
|
||||
"react-confetti": "^6.4.0",
|
||||
"react-cookie": "^7.2.2",
|
||||
"react-datepicker": "^7.6.0",
|
||||
"react-datepicker": "^8.3.0",
|
||||
"react-dnd": "^16.0.1",
|
||||
"react-dnd-html5-backend": "^16.0.1",
|
||||
"react-dnd-multi-backend": "^9.0.0",
|
||||
"react-dnd-touch-backend": "^16.0.1",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-gtm-module": "^2.0.11",
|
||||
"react-helmet": "^6.1.0",
|
||||
"react-i18next": "^15.5.0",
|
||||
"react-i18next": "^15.5.1",
|
||||
"react-konva": "^18.2.10",
|
||||
"react-pdf": "^9.2.1",
|
||||
"react-quill-new": "^3.4.6",
|
||||
"react-redux": "^9.2.0",
|
||||
"react-rnd": "^10.5.2",
|
||||
"react-router": "^7.5.2",
|
||||
"react-scripts": "^5.0.1",
|
||||
"react-router": "^7.6.0",
|
||||
"react-scrollbars-custom": "^4.1.1",
|
||||
"react-select": "^5.10.1",
|
||||
"react-signature-canvas": "^1.0.7",
|
||||
"react-syntax-highlighter": "^15.6.1",
|
||||
"react-signature-canvas": "^1.1.0-alpha.2",
|
||||
"react-timezone-select": "^3.2.8",
|
||||
"react-tooltip": "^5.28.1",
|
||||
"react-web-share": "^2.0.2",
|
||||
"reactour": "^1.19.4",
|
||||
"redux": "^5.0.1",
|
||||
"redux-thunk": "^3.1.0",
|
||||
"regex-parser": "^2.3.1",
|
||||
"serve": "^14.2.4",
|
||||
"styled-components": "^5.3.0",
|
||||
"web-vitals": "^4.2.4",
|
||||
"ws": "^8.18.1",
|
||||
"styled-components": "^5.3.11",
|
||||
"web-vitals": "^5.0.1",
|
||||
"xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "npm run version && react-scripts build",
|
||||
"start-dev": "react-scripts start",
|
||||
"build": "npm run version && NODE_OPTIONS=\"--max-old-space-size=8192\" vite build",
|
||||
"start-dev": "vite",
|
||||
"dev": "vite",
|
||||
"preview": "vite preview",
|
||||
"start": "serve -s build",
|
||||
"version": "curl -s https://api.github.com/repos/opensignlabs/opensign/releases/latest | grep '\"tag_name\":' | awk -F '\"' '{print $4}' > ./public/version.txt",
|
||||
"version-win": "powershell -Command \"Invoke-RestMethod -Uri 'https://api.github.com/repos/opensignlabs/opensign/releases/latest' | Select-Object -ExpandProperty tag_name | Out-File -FilePath ./public/version.txt\"",
|
||||
"build-win": "npm run version-win && react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject",
|
||||
"build-win": "npm run version-win && vite build",
|
||||
"test": "vitest run",
|
||||
"test:watch": "vitest",
|
||||
"release": "standard-version",
|
||||
"commit": "cz"
|
||||
},
|
||||
@@ -96,10 +92,16 @@
|
||||
}
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.26.10",
|
||||
"@babel/preset-env": "^7.26.9",
|
||||
"@babel/preset-react": "^7.26.3",
|
||||
"@babel/runtime-corejs2": "^7.27.0",
|
||||
"@babel/core": "^7.27.1",
|
||||
"@babel/preset-env": "^7.27.2",
|
||||
"@babel/preset-react": "^7.27.1",
|
||||
"@babel/runtime-corejs2": "^7.27.1",
|
||||
"@testing-library/jest-dom": "^6.6.3",
|
||||
"@testing-library/react": "^16.3.0",
|
||||
"@testing-library/user-event": "^14.6.1",
|
||||
"@types/react": "^18.3.22",
|
||||
"@vitejs/plugin-react": "^4.4.1",
|
||||
"@vitejs/plugin-react-swc": "^3.9.0",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"babel-loader": "^10.0.0",
|
||||
"commitizen": "^4.3.1",
|
||||
@@ -107,22 +109,19 @@
|
||||
"css-loader": "^7.1.2",
|
||||
"daisyui": "^4.12.24",
|
||||
"dotenv": "^16.5.0",
|
||||
"dotenv-webpack": "^8.1.0",
|
||||
"eslint": "^8.57.1",
|
||||
"eslint-plugin-prettier": "^5.2.6",
|
||||
"eslint": "^9.27.0",
|
||||
"eslint-plugin-prettier": "^5.4.0",
|
||||
"eslint-plugin-react": "^7.37.5",
|
||||
"lint-staged": "^15.5.1",
|
||||
"mini-css-extract-plugin": "^2.9.2",
|
||||
"lint-staged": "^16.0.0",
|
||||
"postcss": "^8.5.3",
|
||||
"prettier": "^3.5.3",
|
||||
"pretty-quick": "^4.1.1",
|
||||
"rollup-plugin-node-polyfills": "^0.2.1",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"terser-webpack-plugin": "^5.3.14",
|
||||
"webpack-cli": "^5.1.4"
|
||||
},
|
||||
"overrides": {
|
||||
"nth-check": "$nth-check",
|
||||
"ws": "$ws"
|
||||
"vite": "^6.3.5",
|
||||
"vite-plugin-svgr": "^4.3.0",
|
||||
"vite-tsconfig-paths": "^5.1.4",
|
||||
"vitest": "^3.1.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": "18 || 20 || 22"
|
||||
|
||||
@@ -39,8 +39,10 @@
|
||||
"save": "Speichern",
|
||||
"cancel": "Abbrechen",
|
||||
"upgrade-now": "Jetzt upgraden",
|
||||
"contact-now": "Jetzt kontaktieren",
|
||||
"upgrade-to": "Upgrade zu",
|
||||
"plan": "Plan",
|
||||
"subscription-renew-warning": "Ihr Abonnement läuft in {{remainingDays}} Tagen ab. Bitte verlängern Sie Ihr Abonnement.",
|
||||
"subscribe-card-teamplan": "Entfesseln Sie die volle Kraft der Zusammenarbeit! Erstellen Sie unbegrenzt Organisationen, Teams und Hierarchien. Teilen Sie Vorlagen nahtlos zwischen Teams und weisen Sie benutzerdefinierte Benutzerrollen zu. Optimieren Sie Ihren Workflow noch heute!",
|
||||
"subscribe-card-plan": "Entsperren Sie Premium-Funktionen ab nur {{premiumPrice}}/Monat. Genießen Sie eine verbesserte Leistung und zahlen Sie nur {{addonPrice}} pro zusätzlichem Credit nach den enthaltenen Premium-Credits.",
|
||||
"user-name-limit-char": "Um einen Benutzernamen mit weniger als 8 Zeichen zu haben, abonnieren Sie bitte.",
|
||||
@@ -142,6 +144,7 @@
|
||||
"Quick send": "Schnell senden",
|
||||
"Edit": "Bearbeiten",
|
||||
"Share with team": "Mit Team teilen",
|
||||
"Share with user": "Mit Kollegen teilen",
|
||||
"Share": "Teilen",
|
||||
"View": "Ansehen",
|
||||
"option": "Option",
|
||||
@@ -245,6 +248,7 @@
|
||||
"API": "API",
|
||||
"api-token": "API-Token",
|
||||
"regenerate-token": "Live-Token neu generieren",
|
||||
"remove-background": "Hintergrund entfernen",
|
||||
"generate-token": "Live-Token generieren",
|
||||
"view-docs": "Dokumentation ansehen",
|
||||
"generate-token-alert": "Sind Sie sicher, dass Sie das Token neu generieren möchten? Das alte Token wird ablaufen.",
|
||||
@@ -478,6 +482,7 @@
|
||||
"document-alert": "Dokument-Warnung",
|
||||
"owner-subscription-expired": "Das Abonnement des Besitzers ist abgelaufen.",
|
||||
"subscription-expired": "Abonnement abgelaufen",
|
||||
"owner-doesnt-have-paid-plan": "Der Inhaber hat keinen kostenpflichtigen Plan.",
|
||||
"alert-message": "Warnmeldung",
|
||||
"document-decline": "Dokument ablehnen",
|
||||
"decline-alert-1": "Sind Sie sicher, dass Sie dieses Dokument ablehnen möchten?",
|
||||
@@ -971,5 +976,9 @@
|
||||
"kiosk-sign": "Kiosk-Unterschrift",
|
||||
"dont-have-access-to-template": "Das template wurde gelöscht oder Sie haben keinen Zugriff. Bitte kontaktieren Sie den Absender.",
|
||||
"kiosk-info": "Kiosk Modus ermöglicht es Ihnen, persönliche Unterschriften schnell und effizient zu erfassen. Ideal für Messen, Veranstaltungen oder Laufkundschaft, bei denen alle Unterzeichner physisch anwesend sind. ",
|
||||
"learn-more": "Mehr erfahren"
|
||||
"learn-more": "Mehr erfahren",
|
||||
"finish-mssg": "Sind Sie sicher, dass Sie das Dokument abschließen möchten?",
|
||||
"review": "Überprüfen",
|
||||
"next-field": "Nächstes Feld",
|
||||
"required-mssg": "{{leftRequiredWidget}} von {{totalWidget}} Feldern übrig"
|
||||
}
|
||||
|
||||
@@ -39,8 +39,10 @@
|
||||
"save": "Save",
|
||||
"cancel": "Cancel",
|
||||
"upgrade-now": "Upgrade now",
|
||||
"contact-now": "Contact now",
|
||||
"upgrade-to": "Upgrade to",
|
||||
"plan": "Plan",
|
||||
"subscription-renew-warning": "Your subscription will expire in {{remainingDays}} days. Please renew your subscription.",
|
||||
"subscribe-card-teamplan": "Unlock the full power of collaboration! Create unlimited organizations, teams, and hierarchies. Share templates seamlessly across teams and assign custom user roles. Elevate your workflow today!",
|
||||
"subscribe-card-plan": "Unlock premium features starting at just {{premiumPrice}}/month. Enjoy enhanced performance and only {{addonPrice}} per additional credit after your included premium credits.",
|
||||
"user-name-limit-char": "To have a username less than 8 character please subscribe",
|
||||
@@ -142,6 +144,7 @@
|
||||
"Quick send": "Quick send",
|
||||
"Edit": "Edit",
|
||||
"Share with team": "Share with team",
|
||||
"Share with user": "Share with colleague",
|
||||
"Share": "Share",
|
||||
"View": "View",
|
||||
"option": "Option",
|
||||
@@ -245,6 +248,7 @@
|
||||
"API": "API",
|
||||
"api-token": "API token",
|
||||
"regenerate-token": "Regenerate live token",
|
||||
"remove-background": "Remove Background",
|
||||
"generate-token": "Generate live token",
|
||||
"view-docs": "View docs",
|
||||
"generate-token-alert": "Are you sure you want to regenerate token it will expire old token?",
|
||||
@@ -478,6 +482,7 @@
|
||||
"document-alert": "Document alert",
|
||||
"owner-subscription-expired": "Owner's subscription has expired.",
|
||||
"subscription-expired": "Subscription Expired",
|
||||
"owner-doesnt-have-paid-plan": "Owner doesn't have paid plan.",
|
||||
"alert-message": "Alert message",
|
||||
"document-decline": "Document decline",
|
||||
"decline-alert-1": "Are you sure want to decline this document ?",
|
||||
@@ -971,5 +976,9 @@
|
||||
"kiosk-sign": "Kiosk Sign",
|
||||
"dont-have-access-to-template": "The template has been deleted or you don't have access. Please contact the sender.",
|
||||
"kiosk-info": "Kiosk Mode lets you collect in-person signatures quickly and efficiently. Ideal for trade shows, events, or walk-in scenarios where all signers are physically present. ",
|
||||
"learn-more": "Learn more"
|
||||
"learn-more": "Learn more",
|
||||
"finish-mssg":" Are you sure you want to finish the document ?",
|
||||
"review":"Review",
|
||||
"next-field":"Next Field",
|
||||
"required-mssg":"{{leftRequiredWidget}} of {{totalWidget}} fields left"
|
||||
}
|
||||
@@ -39,8 +39,10 @@
|
||||
"save": "Guardar",
|
||||
"cancel": "Cancelar",
|
||||
"upgrade-now": "Mejorar ahora",
|
||||
"contact-now": "Contactar ahora",
|
||||
"upgrade-to": "Mejorar a",
|
||||
"plan": "Plan",
|
||||
"subscription-renew-warning": "Su suscripción vencerá en {{remainingDays}} días. Por favor, renueve su suscripción.",
|
||||
"subscribe-card-teamplan": "¡Libera todo el poder de la colaboración! Crea organizaciones, equipos y jerarquías ilimitadas. Comparte plantillas sin problemas entre equipos y asigna funciones de usuario personalizadas. ¡Mejora tu flujo de trabajo hoy mismo!",
|
||||
"subscribe-card-plan": "Desbloquea funciones premium desde solo {{premiumPrice}}/mes. Disfruta de un rendimiento mejorado y solo {{addonPrice}} por crédito adicional después de tus créditos premium incluidos.",
|
||||
"user-name-limit-char": "Para tener un nombre de usuario menor a 8 caracteres por favor suscríbete",
|
||||
@@ -142,6 +144,7 @@
|
||||
"Quick send": "Envío rápido",
|
||||
"Edit": "Editar",
|
||||
"Share with team": "Compartir con el equipo",
|
||||
"Share with user": "Compartir con un colega",
|
||||
"Share": "Compartir",
|
||||
"View": "Ver",
|
||||
"option": "Opción",
|
||||
@@ -246,6 +249,7 @@
|
||||
"API": "API",
|
||||
"api-token": "Token API",
|
||||
"regenerate-token": "Regenerar token activo",
|
||||
"remove-background": "Eliminar fondo",
|
||||
"generate-token": "Generar token activo",
|
||||
"view-docs": "Ver documentación",
|
||||
"generate-token-alert": "¿En definitiva quieres regenerar el token? Esto expirará el token antiguo.",
|
||||
@@ -477,6 +481,7 @@
|
||||
"mail-not-delivered": "correo no entregado",
|
||||
"document-alert": "Alerta de documento",
|
||||
"owner-subscription-expired": "La suscripción del propietario ha expirado.",
|
||||
"owner-doesnt-have-paid-plan": "El propietario no tiene un plan de pago.",
|
||||
"subscription-expired": "Suscripción expirada",
|
||||
"alert-message": "Mensaje de alerta",
|
||||
"document-decline": "Rechazar documento",
|
||||
@@ -971,5 +976,9 @@
|
||||
"kiosk-sign": "Firma en quiosco",
|
||||
"dont-have-access-to-template": "El template ha sido eliminado o no tiene acceso. Por favor, contacte al remitente.",
|
||||
"kiosk-info": "El Modo Kiosco le permite recopilar firmas en persona de forma rápida y eficiente. Ideal para ferias, eventos o situaciones con personas que firman en el lugar. ",
|
||||
"learn-more": "Más información"
|
||||
"learn-more": "Más información",
|
||||
"finish-mssg": "¿Está seguro de que desea finalizar el documento?",
|
||||
"review": "Revisar",
|
||||
"next-field": "Siguiente campo",
|
||||
"required-mssg": "{{leftRequiredWidget}} de {{totalWidget}} campos restantes"
|
||||
}
|
||||
|
||||
@@ -39,9 +39,11 @@
|
||||
"save": "Sauvegarder",
|
||||
"cancel": "Annuler",
|
||||
"upgrade-now": "Mettre à jour maintenant",
|
||||
"contact-now": "Contacter maintenant",
|
||||
"upgrade-to": "Mettre à niveau vers",
|
||||
"pro": "PRO",
|
||||
"plan": "Offre",
|
||||
"subscription-renew-warning": "Votre abonnement expirera dans {{remainingDays}} jours. Veuillez renouveler votre abonnement.",
|
||||
"subscribe-card-teamplan": "Libérez toute la puissance de la collaboration ! Créez un nombre illimité d'organisations, d'équipes et de hiérarchies. Partagez des modèles de manière transparente entre les équipes et attribuez des rôles d'utilisateur personnalisés. Améliorez votre flux de travail dès aujourd'hui !",
|
||||
"subscribe-card-plan": "Débloquez des fonctionnalités premium à partir de seulement {{premiumPrice}}/mois. Bénéficiez de performances améliorées et de seulement {{addonPrice}} par crédit supplémentaire après vos crédits premium inclus.",
|
||||
"user-name-limit-char": "Pour avoir un nom d'utilisateur de moins de 8 caractères s'il vous plaît s'abonner",
|
||||
@@ -163,6 +165,7 @@
|
||||
"Quick send": "Envoi rapide",
|
||||
"Edit": "Modifier",
|
||||
"Share with team": "Partager avec l'équipe",
|
||||
"Share with user": "Partager avec un collègue",
|
||||
"Share": "Partager",
|
||||
"View": "Voir",
|
||||
"option": "Option",
|
||||
@@ -245,6 +248,7 @@
|
||||
"API": "API",
|
||||
"api-token": "Jeton API",
|
||||
"regenerate-token": "Régénérer en direct jeton",
|
||||
"remove-background": "Supprimer l'arrière-plan",
|
||||
"generate-token": "Générer en direct jeton",
|
||||
"view-docs": "Afficher les documents",
|
||||
"generate-token-alert": "Êtes-vous sûr de vouloir régénérer le jeton, votre ancien jeton sera supprimer?",
|
||||
@@ -477,6 +481,7 @@
|
||||
"mail-not-delivered": "Courrier non distribué",
|
||||
"document-alert": "Alerte document",
|
||||
"owner-subscription-expired": "L'abonnement du propriétaire a expiré.",
|
||||
"owner-doesnt-have-paid-plan": "Le propriétaire n'a pas de plan payant.",
|
||||
"subscription-expired": "Abonnement expiré",
|
||||
"alert-message": "Message d'alerte",
|
||||
"document-decline": "Document-refusé",
|
||||
@@ -971,5 +976,9 @@
|
||||
"kiosk-sign": "Signature sur kiosque",
|
||||
"dont-have-access-to-template": "Le template a été supprimé ou vous n'y avez pas accès. Veuillez contacter l'expéditeur.",
|
||||
"kiosk-info": "Le Mode Kiosque vous permet de recueillir des signatures en personne rapidement et efficacement. Idéal pour les salons, événements ou situations où tous les signataires sont physiquement présents. ",
|
||||
"learn-more": "En savoir plus"
|
||||
"learn-more": "En savoir plus",
|
||||
"finish-mssg": "Êtes-vous sûr de vouloir terminer le document ?",
|
||||
"review": "Revoir",
|
||||
"next-field": "Champ suivant",
|
||||
"required-mssg":"{{leftRequiredWidget}} champs sur {{totalWidget}} restants"
|
||||
}
|
||||
|
||||
@@ -39,8 +39,10 @@
|
||||
"save": "Salva",
|
||||
"cancel": "Annulla",
|
||||
"upgrade-now": "Aggiorna ora",
|
||||
"contact-now": "Contatta ora",
|
||||
"upgrade-to": "Aggiorna a",
|
||||
"plan": "Piano",
|
||||
"subscription-renew-warning": "Il tuo abbonamento scadrà tra {{remainingDays}} giorni. Ti preghiamo di rinnovarlo.",
|
||||
"subscribe-card-teamplan": "Sblocca tutto il potenziale della collaborazione! Crea organizzazioni, team e gerarchie illimitati. Condividi modelli senza problemi tra i team e assegna ruoli personalizzati agli utenti. Migliora il tuo flusso di lavoro oggi stesso!",
|
||||
"subscribe-card-plan": "Sblocca le funzionalità premium a partire da soli {{premiumPrice}}/mese. Approfitta di prestazioni migliorate e paga solo {{addonPrice}} per ogni credito aggiuntivo dopo quelli inclusi.",
|
||||
"user-name-limit-char": "Per un nome utente con meno di 8 caratteri, abbonati",
|
||||
@@ -142,6 +144,7 @@
|
||||
"Quick send": "Invio rapido",
|
||||
"Edit": "Modifica",
|
||||
"Share with team": "Condividi con il team",
|
||||
"Share with user": "Condividi con un collega",
|
||||
"Share": "Condividi",
|
||||
"View": "Visualizza",
|
||||
"option": "Opzione",
|
||||
@@ -245,6 +248,7 @@
|
||||
"API": "API",
|
||||
"api-token": "Token API",
|
||||
"regenerate-token": "Rigenera token live",
|
||||
"remove-background": "Rimuovi sfondo",
|
||||
"generate-token": "Genera token live",
|
||||
"view-docs": "Visualizza documenti",
|
||||
"generate-token-alert": "Sei sicuro di voler rigenerare il token? Questo invaliderà il vecchio token.",
|
||||
@@ -477,6 +481,7 @@
|
||||
"mail-not-delivered": "Mail non consegnata",
|
||||
"document-alert": "Avviso Documento",
|
||||
"owner-subscription-expired": "L'abbonamento del proprietario è scaduto.",
|
||||
"owner-doesnt-have-paid-plan": "Il proprietario non ha un piano a pagamento.",
|
||||
"subscription-expired": "Abbonamento Scaduto",
|
||||
"alert-message": "Messaggio di avviso",
|
||||
"document-decline": "Documento rifiutato",
|
||||
@@ -971,5 +976,9 @@
|
||||
"kiosk-sign": "Firma su chiosco",
|
||||
"dont-have-access-to-template": "Il template è stato eliminato o non hai accesso. Si prega di contattare il mittente.",
|
||||
"kiosk-info": "La Modalità Kiosk consente di raccogliere firme in presenza in modo rapido ed efficiente. Ideale per fiere, eventi o situazioni con firmatari fisicamente presenti. ",
|
||||
"learn-more": "Scopri di più"
|
||||
"learn-more": "Scopri di più",
|
||||
"finish-mssg": "Sei sicuro di voler completare il documento?",
|
||||
"review": "Rivedere",
|
||||
"next-field": "Campo successivo",
|
||||
"required-mssg":"{{leftRequiredWidget}} di {{totalWidget}} campi rimanenti"
|
||||
}
|
||||
|
||||
Binary file not shown.
@@ -0,0 +1 @@
|
||||
import "@testing-library/jest-dom";
|
||||
@@ -1,7 +1,6 @@
|
||||
import React, { useState, useEffect, lazy } from "react";
|
||||
import { Routes, Route, BrowserRouter } from "react-router";
|
||||
import { pdfjs } from "react-pdf";
|
||||
import Login from "./pages/Login";
|
||||
import Form from "./pages/Form";
|
||||
import Report from "./pages/Report";
|
||||
import Dashboard from "./pages/Dashboard";
|
||||
@@ -30,6 +29,7 @@ const ManageSign = lazy(() => import("./pages/Managesign"));
|
||||
const AddAdmin = lazy(() => import("./pages/AddAdmin"));
|
||||
const UpdateExistUserAdmin = lazy(() => import("./pages/UpdateExistUserAdmin"));
|
||||
const Preferences = lazy(() => import("./pages/Preferences"));
|
||||
const Login = lazy(() => import("./pages/Login"));
|
||||
|
||||
pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.mjs`;
|
||||
const AppLoader = () => {
|
||||
@@ -67,7 +67,7 @@ function App() {
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route element={<ValidateRoute />}>
|
||||
<Route exact path="/" element={<Login />} />
|
||||
<Route exact path="/" element={<LazyPage Page={Login} />} />
|
||||
<Route
|
||||
path="/addadmin"
|
||||
element={<LazyPage Page={AddAdmin} />}
|
||||
@@ -1,275 +0,0 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Parse from "parse";
|
||||
import Title from "./Title";
|
||||
import Loader from "../primitives/Loader";
|
||||
import { copytoData, usertimezone } from "../constant/Utils";
|
||||
import { emailRegex } from "../constant/const";
|
||||
import { useTranslation } from "react-i18next";
|
||||
function generatePassword(length) {
|
||||
const characters =
|
||||
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
|
||||
let result = "";
|
||||
const charactersLength = characters.length;
|
||||
|
||||
for (let i = 0; i < length; i++) {
|
||||
result += characters.charAt(Math.floor(Math.random() * charactersLength));
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
const AddUser = (props) => {
|
||||
const { t } = useTranslation();
|
||||
const [formdata, setFormdata] = useState({
|
||||
name: "",
|
||||
phone: "",
|
||||
email: "",
|
||||
team: "",
|
||||
password: "",
|
||||
role: ""
|
||||
});
|
||||
const [isFormLoader, setIsFormLoader] = useState(false);
|
||||
const [teamList, setTeamList] = useState([]);
|
||||
const role = ["OrgAdmin", "Editor", "User"];
|
||||
useEffect(() => {
|
||||
getTeamList();
|
||||
// eslint-disable-next-line
|
||||
}, []);
|
||||
|
||||
const getTeamList = async () => {
|
||||
setFormdata((prev) => ({ ...prev, password: generatePassword(12) }));
|
||||
const teamRes = await Parse.Cloud.run("getteams", { active: true });
|
||||
if (teamRes.length > 0) {
|
||||
const _teamRes = JSON.parse(JSON.stringify(teamRes));
|
||||
setTeamList(_teamRes);
|
||||
const allUserId =
|
||||
_teamRes.find((x) => x.Name === "All Users")?.objectId || "";
|
||||
setFormdata((prev) => ({ ...prev, team: allUserId }));
|
||||
}
|
||||
};
|
||||
const checkUserExist = async () => {
|
||||
try {
|
||||
const res = await Parse.Cloud.run("getUserDetails", {
|
||||
email: formdata.email
|
||||
});
|
||||
if (res) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
} catch (err) {
|
||||
console.log("err", err);
|
||||
}
|
||||
};
|
||||
// Define a function to handle form submission
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (!emailRegex.test(formdata.email)) {
|
||||
alert("Please enter a valid email address.");
|
||||
} else {
|
||||
const localUser = JSON.parse(localStorage.getItem("Extand_Class"))?.[0];
|
||||
setIsFormLoader(true);
|
||||
const res = await checkUserExist();
|
||||
if (res) {
|
||||
props.showAlert("danger", t("user-already-exist"));
|
||||
setIsFormLoader(false);
|
||||
} else {
|
||||
if (localStorage.getItem("TenantId")) {
|
||||
const timezone = usertimezone;
|
||||
try {
|
||||
const params = {
|
||||
name: formdata.name,
|
||||
email: formdata.email,
|
||||
phone: formdata.phone,
|
||||
password: formdata.password,
|
||||
role: formdata.role,
|
||||
team: formdata.team,
|
||||
timezone: timezone,
|
||||
tenantId: localStorage.getItem("TenantId"),
|
||||
organization: {
|
||||
objectId: localUser?.OrganizationId?.objectId,
|
||||
company: localUser?.Company
|
||||
}
|
||||
};
|
||||
const res = await Parse.Cloud.run("adduser", params);
|
||||
const parseData = JSON.parse(JSON.stringify(res));
|
||||
console.log("parseData ", parseData);
|
||||
if (props.closePopup) {
|
||||
props.closePopup();
|
||||
}
|
||||
if (props.handleUserData) {
|
||||
if (formdata?.team) {
|
||||
const team = teamList.find((x) => x.objectId === formdata.team);
|
||||
parseData.TeamIds = parseData.TeamIds.map((y) =>
|
||||
y.objectId === team.objectId ? team : y
|
||||
);
|
||||
}
|
||||
props.handleUserData(parseData);
|
||||
}
|
||||
setIsFormLoader(false);
|
||||
setFormdata({
|
||||
name: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
team: "",
|
||||
role: ""
|
||||
});
|
||||
props.showAlert("success", t("user-created-successfully"));
|
||||
} catch (err) {
|
||||
console.log("err", err);
|
||||
setIsFormLoader(false);
|
||||
props.showAlert("danger", t("something-went-wrong-mssg"));
|
||||
}
|
||||
} else {
|
||||
props.showAlert("danger", t("something-went-wrong-mssg"));
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Define a function to handle the "add yourself" checkbox
|
||||
const handleReset = () => {
|
||||
setFormdata({ name: "", email: "", phone: "", team: "", role: "" });
|
||||
if (props.closePopup) {
|
||||
props.closePopup();
|
||||
}
|
||||
};
|
||||
const handleChange = (event) => {
|
||||
let { name, value } = event.target;
|
||||
if (name === "email") {
|
||||
value = value?.toLowerCase()?.replace(/\s/g, "");
|
||||
}
|
||||
setFormdata((prev) => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const copytoclipboard = (text) => {
|
||||
copytoData(text);
|
||||
props.showAlert("success", t("copied"));
|
||||
};
|
||||
return (
|
||||
<div className="shadow-md rounded-box my-[1px] p-3 bg-base-100 relative">
|
||||
<Title title={t("add-user")} />
|
||||
{isFormLoader && (
|
||||
<div className="absolute w-full h-full inset-0 flex justify-center items-center bg-base-content/30 z-50">
|
||||
<Loader />
|
||||
</div>
|
||||
)}
|
||||
<div className="w-full mx-auto">
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="mb-3">
|
||||
<label
|
||||
htmlFor="name"
|
||||
className="block text-xs text-gray-700 font-semibold"
|
||||
>
|
||||
{t("name")}
|
||||
<span className="text-[red] text-[13px]"> *</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
value={formdata.name}
|
||||
onChange={(e) => handleChange(e)}
|
||||
onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
|
||||
onInput={(e) => e.target.setCustomValidity("")}
|
||||
required
|
||||
className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label
|
||||
htmlFor="email"
|
||||
className="block text-xs text-gray-700 font-semibold"
|
||||
>
|
||||
{t("email")}
|
||||
<span className="text-[red] text-[13px]"> *</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={formdata.email}
|
||||
onChange={(e) => handleChange(e)}
|
||||
required
|
||||
onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
|
||||
onInput={(e) => e.target.setCustomValidity("")}
|
||||
className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label className="block text-xs text-gray-700 font-semibold">
|
||||
{t("password")}
|
||||
</label>
|
||||
<div className="flex justify-between items-center op-input op-input-bordered op-input-sm text-base-content w-full h-full text-[13px]">
|
||||
<div className="break-all">{formdata?.password}</div>
|
||||
<i
|
||||
onClick={() => copytoclipboard(formdata?.password)}
|
||||
className="fa-light fa-copy rounded-full hover:bg-base-300 p-[8px] cursor-pointer "
|
||||
></i>
|
||||
</div>
|
||||
<div className="text-[12px] ml-2 mb-0 text-[red] select-none">
|
||||
{t("password-generateed")}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label
|
||||
htmlFor="phone"
|
||||
className="block text-xs text-gray-700 font-semibold"
|
||||
>
|
||||
{t("phone")}
|
||||
{/* <span className="text-[red] text-[13px]"> *</span> */}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="phone"
|
||||
placeholder={t("phone-optional")}
|
||||
value={formdata.phone}
|
||||
onChange={(e) => handleChange(e)}
|
||||
className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label
|
||||
htmlFor="phone"
|
||||
className="block text-xs text-gray-700 font-semibold"
|
||||
>
|
||||
{t("Role")}
|
||||
<span className="text-[red] text-[13px]"> *</span>
|
||||
</label>
|
||||
<select
|
||||
value={formdata.role}
|
||||
onChange={(e) => handleChange(e)}
|
||||
name="role"
|
||||
className="op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content w-full text-xs"
|
||||
onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
|
||||
onInput={(e) => e.target.setCustomValidity("")}
|
||||
required
|
||||
>
|
||||
<option defaultValue={""} value={""}>
|
||||
{t("Select")}
|
||||
</option>
|
||||
{role.length > 0 &&
|
||||
role.map((x) => (
|
||||
<option key={x} value={x}>
|
||||
{x}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex items-center mt-3 gap-2 text-white">
|
||||
<button type="submit" className="op-btn op-btn-primary">
|
||||
{t("submit")}
|
||||
</button>
|
||||
<div
|
||||
type="button"
|
||||
onClick={() => handleReset()}
|
||||
className="op-btn op-btn-secondary"
|
||||
>
|
||||
{t("cancel")}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddUser;
|
||||
@@ -0,0 +1,288 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Parse from "parse";
|
||||
import Title from "./Title";
|
||||
import Loader from "../primitives/Loader";
|
||||
import {
|
||||
copytoData,
|
||||
usertimezone
|
||||
} from "../constant/Utils";
|
||||
import {
|
||||
emailRegex,
|
||||
} from "../constant/const";
|
||||
import {
|
||||
useTranslation
|
||||
} from "react-i18next";
|
||||
function generatePassword(length) {
|
||||
const characters =
|
||||
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
|
||||
let result = "";
|
||||
const charactersLength = characters.length;
|
||||
|
||||
for (let i = 0; i < length; i++) {
|
||||
result += characters.charAt(Math.floor(Math.random() * charactersLength));
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
const AddUser = (props) => {
|
||||
const { t } = useTranslation();
|
||||
const [formdata, setFormdata] = useState({
|
||||
name: "",
|
||||
phone: "",
|
||||
email: "",
|
||||
team: "",
|
||||
password: "",
|
||||
role: ""
|
||||
});
|
||||
const [isFormLoader, setIsFormLoader] = useState(false);
|
||||
const [teamList, setTeamList] = useState([]);
|
||||
const role = ["OrgAdmin", "Editor", "User"];
|
||||
useEffect(() => {
|
||||
getTeamList();
|
||||
// eslint-disable-next-line
|
||||
}, []);
|
||||
|
||||
const getTeamList = async () => {
|
||||
setFormdata((prev) => ({ ...prev, password: generatePassword(12) }));
|
||||
const teamRes = await Parse.Cloud.run("getteams", { active: true });
|
||||
if (teamRes.length > 0) {
|
||||
const _teamRes = JSON.parse(JSON.stringify(teamRes));
|
||||
setTeamList(_teamRes);
|
||||
const allUserId =
|
||||
_teamRes.find((x) => x.Name === "All Users")?.objectId || "";
|
||||
setFormdata((prev) => ({ ...prev, team: allUserId }));
|
||||
}
|
||||
};
|
||||
const checkUserExist = async () => {
|
||||
try {
|
||||
const res = await Parse.Cloud.run("getUserDetails", {
|
||||
email: formdata.email
|
||||
});
|
||||
if (res) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
} catch (err) {
|
||||
console.log("err", err);
|
||||
}
|
||||
};
|
||||
// Define a function to handle form submission
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (!emailRegex.test(formdata.email)) {
|
||||
alert("Please enter a valid email address.");
|
||||
} else {
|
||||
const localUser = JSON.parse(localStorage.getItem("Extand_Class"))?.[0];
|
||||
setIsFormLoader(true);
|
||||
const res = await checkUserExist();
|
||||
if (res) {
|
||||
props.showAlert("danger", t("user-already-exist"));
|
||||
setIsFormLoader(false);
|
||||
} else {
|
||||
if (localStorage.getItem("TenantId")) {
|
||||
const timezone = usertimezone;
|
||||
try {
|
||||
const params = {
|
||||
name: formdata.name,
|
||||
email: formdata.email,
|
||||
phone: formdata.phone,
|
||||
password: formdata.password,
|
||||
role: formdata.role,
|
||||
team: formdata.team,
|
||||
timezone: timezone,
|
||||
tenantId: localStorage.getItem("TenantId"),
|
||||
organization: {
|
||||
objectId: localUser?.OrganizationId?.objectId,
|
||||
company: localUser?.Company
|
||||
},
|
||||
};
|
||||
const res = await Parse.Cloud.run("adduser", params);
|
||||
const parseData = JSON.parse(JSON.stringify(res));
|
||||
console.log("parseData ", parseData);
|
||||
if (props.closePopup) {
|
||||
props.closePopup();
|
||||
}
|
||||
if (props.handleUserData) {
|
||||
if (formdata?.team) {
|
||||
const team = teamList.find((x) => x.objectId === formdata.team);
|
||||
parseData.TeamIds = parseData.TeamIds.map((y) =>
|
||||
y.objectId === team.objectId ? team : y
|
||||
);
|
||||
}
|
||||
props.handleUserData(parseData);
|
||||
}
|
||||
setIsFormLoader(false);
|
||||
setFormdata({
|
||||
name: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
team: "",
|
||||
role: ""
|
||||
});
|
||||
props.showAlert("success", t("user-created-successfully"));
|
||||
} catch (err) {
|
||||
console.log("err", err);
|
||||
setIsFormLoader(false);
|
||||
props.showAlert("danger", t("something-went-wrong-mssg"));
|
||||
}
|
||||
} else {
|
||||
props.showAlert("danger", t("something-went-wrong-mssg"));
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Define a function to handle the "add yourself" checkbox
|
||||
const handleReset = () => {
|
||||
setFormdata({ name: "", email: "", phone: "", team: "", role: "" });
|
||||
if (props.closePopup) {
|
||||
props.closePopup();
|
||||
}
|
||||
};
|
||||
const handleChange = (event) => {
|
||||
let { name, value } = event.target;
|
||||
if (name === "email") {
|
||||
value = value?.toLowerCase()?.replace(/\s/g, "");
|
||||
}
|
||||
setFormdata((prev) => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
const copytoclipboard = (text) => {
|
||||
copytoData(text);
|
||||
props.showAlert("success", t("copied"));
|
||||
};
|
||||
return (
|
||||
<div className="shadow-md rounded-box my-[1px] p-3 bg-base-100 relative">
|
||||
<Title title={t("add-user")} />
|
||||
{isFormLoader && (
|
||||
<div className="absolute w-full h-full inset-0 flex justify-center items-center bg-base-content/30 z-50">
|
||||
<Loader />
|
||||
</div>
|
||||
)}
|
||||
<div className="w-full mx-auto">
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="mb-3">
|
||||
<label
|
||||
htmlFor="name"
|
||||
className="block text-xs text-gray-700 font-semibold"
|
||||
>
|
||||
{t("name")}
|
||||
<span className="text-[red] text-[13px]"> *</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
value={formdata.name}
|
||||
onChange={(e) => handleChange(e)}
|
||||
onInvalid={(e) =>
|
||||
e.target.setCustomValidity(t("input-required"))
|
||||
}
|
||||
onInput={(e) => e.target.setCustomValidity("")}
|
||||
required
|
||||
className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label
|
||||
htmlFor="email"
|
||||
className="block text-xs text-gray-700 font-semibold"
|
||||
>
|
||||
{t("email")}
|
||||
<span className="text-[red] text-[13px]"> *</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={formdata.email}
|
||||
onChange={(e) => handleChange(e)}
|
||||
required
|
||||
onInvalid={(e) =>
|
||||
e.target.setCustomValidity(t("input-required"))
|
||||
}
|
||||
onInput={(e) => e.target.setCustomValidity("")}
|
||||
className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label className="block text-xs text-gray-700 font-semibold">
|
||||
{t("password")}
|
||||
</label>
|
||||
<div className="flex justify-between items-center op-input op-input-bordered op-input-sm text-base-content w-full h-full text-[13px]">
|
||||
<div className="break-all">{formdata?.password}</div>
|
||||
<i
|
||||
onClick={() => copytoclipboard(formdata?.password)}
|
||||
className="fa-light fa-copy rounded-full hover:bg-base-300 p-[8px] cursor-pointer "
|
||||
></i>
|
||||
</div>
|
||||
<div className="text-[12px] ml-2 mb-0 text-[red] select-none">
|
||||
{t("password-generateed")}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label
|
||||
htmlFor="phone"
|
||||
className="block text-xs text-gray-700 font-semibold"
|
||||
>
|
||||
{t("phone")}
|
||||
{/* <span className="text-[red] text-[13px]"> *</span> */}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="phone"
|
||||
placeholder={t("phone-optional")}
|
||||
value={formdata.phone}
|
||||
onChange={(e) => handleChange(e)}
|
||||
className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<label
|
||||
htmlFor="phone"
|
||||
className="block text-xs text-gray-700 font-semibold"
|
||||
>
|
||||
{t("Role")}
|
||||
<span className="text-[red] text-[13px]"> *</span>
|
||||
</label>
|
||||
<select
|
||||
value={formdata.role}
|
||||
onChange={(e) => handleChange(e)}
|
||||
name="role"
|
||||
className="op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content w-full text-xs"
|
||||
onInvalid={(e) =>
|
||||
e.target.setCustomValidity(t("input-required"))
|
||||
}
|
||||
onInput={(e) => e.target.setCustomValidity("")}
|
||||
required
|
||||
>
|
||||
<option defaultValue={""} value={""}>
|
||||
{t("Select")}
|
||||
</option>
|
||||
{role.length > 0 &&
|
||||
role.map((x) => (
|
||||
<option key={x} value={x}>
|
||||
{x}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="flex items-center mt-3 gap-2 text-white">
|
||||
<button type="submit" className="op-btn op-btn-primary">
|
||||
{t("submit")}
|
||||
</button>
|
||||
<div
|
||||
type="button"
|
||||
onClick={() => handleReset()}
|
||||
className="op-btn op-btn-secondary"
|
||||
>
|
||||
{t("cancel")}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddUser;
|
||||
+80
-77
@@ -3,7 +3,9 @@ import axios from "axios";
|
||||
import SuggestionInput from "./shared/fields/SuggestionInput";
|
||||
import Loader from "../primitives/Loader";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { emailRegex } from "../constant/const";
|
||||
import {
|
||||
emailRegex,
|
||||
} from "../constant/const";
|
||||
const BulkSendUi = (props) => {
|
||||
const { t } = useTranslation();
|
||||
const [forms, setForms] = useState([]);
|
||||
@@ -20,15 +22,15 @@ const BulkSendUi = (props) => {
|
||||
|
||||
//function to check atleast one signature field exist
|
||||
const signatureExist = async () => {
|
||||
setIsDisableBulkSend(false);
|
||||
const getPlaceholder = props?.Placeholders;
|
||||
const checkIsSignatureExistt = getPlaceholder?.every((placeholderObj) =>
|
||||
placeholderObj?.placeHolder?.some((holder) =>
|
||||
holder?.pos?.some((posItem) => posItem?.type === "signature")
|
||||
)
|
||||
);
|
||||
setIsSignatureExist(checkIsSignatureExistt);
|
||||
setIsLoader(false);
|
||||
setIsDisableBulkSend(false);
|
||||
const getPlaceholder = props?.Placeholders;
|
||||
const checkIsSignatureExistt = getPlaceholder?.every((placeholderObj) =>
|
||||
placeholderObj?.placeHolder?.some((holder) =>
|
||||
holder?.pos?.some((posItem) => posItem?.type === "signature")
|
||||
)
|
||||
);
|
||||
setIsSignatureExist(checkIsSignatureExistt);
|
||||
setIsLoader(false);
|
||||
};
|
||||
useEffect(() => {
|
||||
if (scrollOnNextUpdate && formRef.current) {
|
||||
@@ -72,6 +74,7 @@ const BulkSendUi = (props) => {
|
||||
setForms(newForms);
|
||||
};
|
||||
|
||||
|
||||
const handleRemoveForm = (index) => {
|
||||
const updatedForms = forms.filter((_, i) => i !== index);
|
||||
setForms(updatedForms);
|
||||
@@ -92,83 +95,82 @@ const BulkSendUi = (props) => {
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setIsSubmit(true);
|
||||
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
|
||||
};
|
||||
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);
|
||||
}
|
||||
}
|
||||
// If no matching field is found, keep the placeholder as is
|
||||
return placeholder;
|
||||
});
|
||||
});
|
||||
// Map through the copied Placeholders array to update email values
|
||||
const updatedPlaceholders = Placeholders.map((placeholder) => {
|
||||
// Find the field in the current form that matches the placeholder Id
|
||||
const field = form.fields.find(
|
||||
(element) => parseInt(element.fieldId) === placeholder.Id
|
||||
);
|
||||
// If a matching field is found, update the email value in the placeholder
|
||||
const signer = field?.signer?.objectId ? field.signer : "";
|
||||
if (field) {
|
||||
if (signer) {
|
||||
return {
|
||||
...placeholder,
|
||||
signerObjId: field?.signer?.objectId || "",
|
||||
signerPtr: signer
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
...placeholder,
|
||||
email: field.email,
|
||||
signerObjId: field?.signer?.objectId || "",
|
||||
signerPtr: signer
|
||||
};
|
||||
}
|
||||
}
|
||||
// If no matching field is found, keep the placeholder as is
|
||||
return placeholder;
|
||||
});
|
||||
|
||||
// Push a new document object with updated Placeholders into the Documents array
|
||||
if (existSigner?.length > 0) {
|
||||
Documents.push({
|
||||
...props.item,
|
||||
Placeholders: updatedPlaceholders,
|
||||
Signers: props.item.Signers
|
||||
? [...props.item.Signers, ...existSigner]
|
||||
: [...existSigner]
|
||||
});
|
||||
} else {
|
||||
Documents.push({
|
||||
...props.item,
|
||||
Placeholders: updatedPlaceholders,
|
||||
SignatureType: props.signatureType
|
||||
});
|
||||
}
|
||||
});
|
||||
await batchQuery(Documents);
|
||||
} else {
|
||||
setIsSubmit(false);
|
||||
}
|
||||
// Push a new document object with updated Placeholders into the Documents array
|
||||
if (existSigner?.length > 0) {
|
||||
Documents.push({
|
||||
...props.item,
|
||||
Placeholders: updatedPlaceholders,
|
||||
Signers: props.item.Signers
|
||||
? [...props.item.Signers, ...existSigner]
|
||||
: [...existSigner]
|
||||
});
|
||||
} else {
|
||||
Documents.push({
|
||||
...props.item,
|
||||
Placeholders: updatedPlaceholders,
|
||||
SignatureType: props.signatureType
|
||||
});
|
||||
}
|
||||
});
|
||||
await batchQuery(Documents);
|
||||
} else {
|
||||
setIsSubmit(false);
|
||||
}
|
||||
};
|
||||
|
||||
const batchQuery = async (Documents) => {
|
||||
const token = {
|
||||
"X-Parse-Session-Token": localStorage.getItem("accesstoken")
|
||||
};
|
||||
const 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
|
||||
...token,
|
||||
};
|
||||
const params = { Documents: JSON.stringify(Documents) };
|
||||
try {
|
||||
@@ -275,7 +277,8 @@ const BulkSendUi = (props) => {
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<></>
|
||||
<>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
@@ -32,14 +32,15 @@ const Header = ({ showSidebar, setIsMenu, isConsole }) => {
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
|
||||
async function initializeHead() {
|
||||
const applogo = await getAppLogo();
|
||||
if (applogo?.logo) {
|
||||
setAppLogo(applogo?.logo);
|
||||
} else {
|
||||
const logo = localStorage.getItem("appLogo") || appInfo.applogo;
|
||||
setAppLogo(logo);
|
||||
}
|
||||
const applogo = await getAppLogo();
|
||||
if (applogo?.logo) {
|
||||
setAppLogo(applogo?.logo);
|
||||
} else {
|
||||
const logo = localStorage.getItem("appLogo") || appInfo.applogo;
|
||||
setAppLogo(logo);
|
||||
}
|
||||
}
|
||||
|
||||
const closeDropdown = async () => {
|
||||
@@ -152,15 +153,15 @@ const Header = ({ showSidebar, setIsMenu, isConsole }) => {
|
||||
>
|
||||
{!isConsole && (
|
||||
<>
|
||||
<li
|
||||
onClick={() =>
|
||||
openInNewTab("https://docs.opensignlabs.com")
|
||||
}
|
||||
>
|
||||
<span>
|
||||
<i className="fa-light fa-book"></i> {t("docs")}
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
onClick={() =>
|
||||
openInNewTab("https://docs.opensignlabs.com")
|
||||
}
|
||||
>
|
||||
<span>
|
||||
<i className="fa-light fa-book"></i> {t("docs")}
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
onClick={() => {
|
||||
setIsOpen(false);
|
||||
@@ -1,4 +1,3 @@
|
||||
import React from "react";
|
||||
import { Helmet } from "react-helmet";
|
||||
|
||||
function Title({ title, drive }) {
|
||||
+2
-2
@@ -1,10 +1,10 @@
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import "../../styles/opensigndrive.css";
|
||||
import axios from "axios";
|
||||
import * as ContextMenu from "@radix-ui/react-context-menu";
|
||||
import { ContextMenu } from "radix-ui";
|
||||
import { useNavigate } from "react-router";
|
||||
import Table from "react-bootstrap/Table";
|
||||
import * as HoverCard from "@radix-ui/react-hover-card";
|
||||
import { HoverCard } from "radix-ui";
|
||||
import ModalUi from "../../primitives/ModalUi";
|
||||
import FolderModal from "../shared/fields/FolderModal";
|
||||
import { useTranslation } from "react-i18next";
|
||||
+7
-4
@@ -1,7 +1,10 @@
|
||||
import React, { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useSelector } from "react-redux";
|
||||
function DefaultSignature(props) {
|
||||
const { t } = useTranslation();
|
||||
const defaultSignImg = useSelector((state) => state.widget.defaultSignImg);
|
||||
const myInitial = useSelector((state) => state.widget.myInitial)
|
||||
const tabName = ["my-signature", "my-initials"];
|
||||
const [activeTab, setActiveTab] = useState(0);
|
||||
const confirmToaddDefaultSign = (type) => {
|
||||
@@ -69,15 +72,15 @@ function DefaultSignature(props) {
|
||||
<img
|
||||
alt="signature"
|
||||
className="w-full h-full object-contain"
|
||||
src={props?.defaultSignImg}
|
||||
src={defaultSignImg}
|
||||
/>
|
||||
) : (
|
||||
activeTab === 1 &&
|
||||
(props?.myInitial ? (
|
||||
(myInitial ? (
|
||||
<img
|
||||
alt="signature"
|
||||
className="w-full h-full object-contain"
|
||||
src={props?.myInitial}
|
||||
src={myInitial}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex justify-center items-center h-full">
|
||||
@@ -97,7 +100,7 @@ function DefaultSignature(props) {
|
||||
disabled={
|
||||
activeTab === 0 && !props?.isDefault
|
||||
? true
|
||||
: activeTab === 1 && !props.myInitial
|
||||
: activeTab === 1 && !myInitial
|
||||
? true
|
||||
: false
|
||||
}
|
||||
+5
-17
@@ -12,7 +12,7 @@ function DropdownWidgetOption(props) {
|
||||
]);
|
||||
const [minCount, setMinCount] = useState(0);
|
||||
const [maxCount, setMaxCount] = useState(0);
|
||||
const [dropdownName, setDropdownName] = useState(props.type);
|
||||
const [dropdownName, setDropdownName] = useState();
|
||||
const [isReadOnly, setIsReadOnly] = useState(false);
|
||||
const [isHideLabel, setIsHideLabel] = useState(false);
|
||||
const [status, setStatus] = useState("required");
|
||||
@@ -22,7 +22,7 @@ function DropdownWidgetOption(props) {
|
||||
|
||||
const resetState = () => {
|
||||
setDropdownOptionList(["option-1", "option-2"]);
|
||||
setDropdownName(props.type);
|
||||
setDropdownName( props.currWidgetsDetails?.options?.name || props.type);
|
||||
setIsReadOnly(false);
|
||||
setIsHideLabel(false);
|
||||
setMinCount(0);
|
||||
@@ -30,11 +30,10 @@ function DropdownWidgetOption(props) {
|
||||
setDefaultCheckbox([]);
|
||||
setDefaultValue("");
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
props.currWidgetsDetails?.options?.name &&
|
||||
props.currWidgetsDetails?.options?.values
|
||||
props.currWidgetsDetails?.options?.values?.length > 0
|
||||
) {
|
||||
setDropdownName(props.currWidgetsDetails?.options?.name);
|
||||
setDropdownOptionList(props.currWidgetsDetails?.options?.values);
|
||||
@@ -116,16 +115,7 @@ function DropdownWidgetOption(props) {
|
||||
defaultData,
|
||||
isHideLabel
|
||||
);
|
||||
// props.setShowDropdown(false);
|
||||
setDropdownOptionList(["option-1", "option-2"]);
|
||||
setDropdownName(props.type);
|
||||
// props.setCurrWidgetsDetails({});
|
||||
setIsReadOnly(false);
|
||||
setIsHideLabel(false);
|
||||
setMinCount(0);
|
||||
setMaxCount(0);
|
||||
setDefaultCheckbox([]);
|
||||
setDefaultValue("");
|
||||
resetState()
|
||||
};
|
||||
|
||||
|
||||
@@ -137,7 +127,6 @@ function DropdownWidgetOption(props) {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ModalUi isOpen={props.showDropdown} title={props.title} showClose={false}>
|
||||
<div className="h-full p-[15px] text-base-content">
|
||||
@@ -156,7 +145,6 @@ function DropdownWidgetOption(props) {
|
||||
onInvalid={(e) => e.target.setCustomValidity(t("input-required"))}
|
||||
onInput={(e) => e.target.setCustomValidity("")}
|
||||
required
|
||||
defaultValue={dropdownName}
|
||||
value={dropdownName}
|
||||
onChange={(e) => setDropdownName(e.target.value)}
|
||||
className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
|
||||
@@ -166,7 +154,7 @@ function DropdownWidgetOption(props) {
|
||||
{t("options")}
|
||||
</label>
|
||||
<div className="flex flex-col">
|
||||
{dropdownOptionList.map((option, index) => (
|
||||
{dropdownOptionList?.map((option, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex flex-row mb-[5px] items-center"
|
||||
+21
-6
@@ -1,4 +1,7 @@
|
||||
import React, { useState, useRef } from "react";
|
||||
import React, {
|
||||
useState,
|
||||
useRef,
|
||||
} from "react";
|
||||
import {
|
||||
base64ToArrayBuffer,
|
||||
convertBase64ToFile,
|
||||
@@ -24,9 +27,10 @@ const EditTemplate = ({
|
||||
template,
|
||||
onSuccess,
|
||||
setPdfArrayBuffer,
|
||||
setPdfBase64Url
|
||||
setPdfBase64Url,
|
||||
}) => {
|
||||
const appName = "OpenSign™";
|
||||
const appName =
|
||||
"OpenSign™";
|
||||
const { t } = useTranslation();
|
||||
const inputFileRef = useRef(null);
|
||||
const [formData, setFormData] = useState({
|
||||
@@ -165,7 +169,10 @@ const EditTemplate = ({
|
||||
}
|
||||
let pdfUrl;
|
||||
if (uploadPdf?.base64) {
|
||||
pdfUrl = await convertBase64ToFile(uploadPdf.name, uploadPdf.base64);
|
||||
pdfUrl = await convertBase64ToFile(
|
||||
uploadPdf.name,
|
||||
uploadPdf.base64,
|
||||
);
|
||||
setUploadPdf((prev) => ({ ...prev, url: pdfUrl }));
|
||||
const pdfBuffer = base64ToArrayBuffer(uploadPdf.base64);
|
||||
setPdfArrayBuffer && setPdfArrayBuffer(pdfBuffer);
|
||||
@@ -447,7 +454,11 @@ const EditTemplate = ({
|
||||
</Tooltip>
|
||||
</label>
|
||||
<div className="flex flex-col md:flex-row md:gap-4">
|
||||
<div className={`flex items-center gap-2 ml-2 mb-1`}>
|
||||
<div
|
||||
className={
|
||||
`flex items-center gap-2 ml-2 mb-1`
|
||||
}
|
||||
>
|
||||
<input
|
||||
className="mr-[2px] op-radio op-radio-xs"
|
||||
type="radio"
|
||||
@@ -456,7 +467,11 @@ const EditTemplate = ({
|
||||
/>
|
||||
<div className="text-center">{t("yes")}</div>
|
||||
</div>
|
||||
<div className={`flex items-center gap-2 ml-2 mb-1`}>
|
||||
<div
|
||||
className={
|
||||
`flex items-center gap-2 ml-2 mb-1`
|
||||
}
|
||||
>
|
||||
<input
|
||||
className="mr-[2px] op-radio op-radio-xs"
|
||||
type="radio"
|
||||
+8
-3
@@ -1,6 +1,10 @@
|
||||
import React, { useState } from "react";
|
||||
import { handleToPrint } from "../../constant/Utils";
|
||||
import { emailRegex } from "../../constant/const";
|
||||
import {
|
||||
handleToPrint,
|
||||
} from "../../constant/Utils";
|
||||
import {
|
||||
emailRegex,
|
||||
} from "../../constant/const";
|
||||
import Loader from "../../primitives/Loader";
|
||||
import ModalUi from "../../primitives/ModalUi";
|
||||
import { useTranslation } from "react-i18next";
|
||||
@@ -37,7 +41,8 @@ function EmailComponent({
|
||||
setEmailList([]);
|
||||
}, 1500);
|
||||
setIsLoading(false);
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
setIsLoading(false);
|
||||
setIsEmail(false);
|
||||
setIsAlert({
|
||||
+15
-1
@@ -9,7 +9,7 @@ import {
|
||||
handleToPrint
|
||||
} from "../../constant/Utils";
|
||||
import "../../styles/signature.css";
|
||||
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
|
||||
import { DropdownMenu } from "radix-ui";
|
||||
import ModalUi from "../../primitives/ModalUi";
|
||||
import Loader from "../../primitives/Loader";
|
||||
import { useTranslation } from "react-i18next";
|
||||
@@ -276,6 +276,20 @@ function Header(props) {
|
||||
className="bg-white shadow-md rounded-md px-3 py-2"
|
||||
sideOffset={5}
|
||||
>
|
||||
{props?.setIsEditTemplate && (
|
||||
<DropdownMenu.Item
|
||||
className="DropdownMenuItem"
|
||||
onClick={() => props?.setIsEditTemplate(true)}
|
||||
>
|
||||
<div className="flex flex-row">
|
||||
<i
|
||||
className="fa-light fa-gear mr-[3px]"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
<span className="font-[500]">{t("Edit")}</span>
|
||||
</div>
|
||||
</DropdownMenu.Item>
|
||||
)}
|
||||
<DropdownMenu.Item
|
||||
className="DropdownMenuItem"
|
||||
onClick={() =>
|
||||
+101
-207
@@ -21,6 +21,8 @@ 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";
|
||||
|
||||
const selectFormat = (data) => {
|
||||
switch (data) {
|
||||
@@ -72,27 +74,25 @@ const getDefaultDate = (dateStr, format) => {
|
||||
};
|
||||
|
||||
function Placeholder(props) {
|
||||
//'isTouchDevice' is used to detect whether a device has a touchscreen or is mouse-based
|
||||
const isTouchDevice = navigator.maxTouchPoints > 0;
|
||||
const { t } = useTranslation();
|
||||
const dispatch = useDispatch();
|
||||
const widgetData =
|
||||
props.pos?.options?.defaultValue || props.pos?.options?.response;
|
||||
const [placeholderBorder, setPlaceholderBorder] = useState({ w: 0, h: 0 });
|
||||
const [isDraggingEnabled, setDraggingEnabled] = useState(true);
|
||||
const [isDateModal, setIsDateModal] = useState(false);
|
||||
const [containerScale, setContainerScale] = useState();
|
||||
const holdTimeout = useRef(null);
|
||||
const startTime = useRef(null); // Track when the user starts holdings
|
||||
const [isDisableDragging, setIsDisableDragging] = useState(true);
|
||||
const [selectDate, setSelectDate] = useState({});
|
||||
const [dateFormat, setDateFormat] = useState([]);
|
||||
const [clickonWidget, setClickonWidget] = useState({});
|
||||
const [startDate, setStartDate] = useState(
|
||||
props?.pos?.options?.response
|
||||
? getDefaultDate(
|
||||
props?.pos?.options?.response,
|
||||
props.pos?.options?.validation?.format
|
||||
)
|
||||
: new Date()
|
||||
);
|
||||
const startDate = props?.pos?.options?.response
|
||||
? getDefaultDate(
|
||||
props?.pos?.options?.response,
|
||||
props.pos?.options?.validation?.format
|
||||
)
|
||||
: new Date();
|
||||
|
||||
const [getCheckboxRenderWidth, setGetCheckboxRenderWidth] = useState({
|
||||
width: null,
|
||||
height: null
|
||||
@@ -117,33 +117,28 @@ function Placeholder(props) {
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
const updateWidth = () => {
|
||||
if (props?.pos?.type === "date") {
|
||||
const isDateChange = true;
|
||||
const dateObj = {
|
||||
date: startDate,
|
||||
format: getDefaultFormat(props.pos?.options?.validation?.format)
|
||||
};
|
||||
handleSaveDate(dateObj, isDateChange); //function to save date and format in local array
|
||||
}
|
||||
}, [widgetData]);
|
||||
|
||||
const handleGetDaynamicWH = () => {
|
||||
if (
|
||||
props?.pos?.type === "checkbox" ||
|
||||
props?.pos?.type === radioButtonWidget
|
||||
) {
|
||||
const rndElement = document.getElementById(props.pos.key);
|
||||
if (rndElement) {
|
||||
const { width, height } = rndElement.getBoundingClientRect();
|
||||
setGetCheckboxRenderWidth({ width: width, height: height });
|
||||
}
|
||||
};
|
||||
|
||||
// Delay to ensure rendering is complete
|
||||
const timer = setTimeout(updateWidth, 0);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [props.pos]);
|
||||
useEffect(() => {
|
||||
const onOutsideClick = () => {
|
||||
if (!isDraggingEnabled) {
|
||||
setDraggingEnabled(true);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("click", onOutsideClick);
|
||||
|
||||
return () => {
|
||||
// Cleanup the event listener when the component unmounts
|
||||
document.removeEventListener("click", onOutsideClick);
|
||||
};
|
||||
}, [isDraggingEnabled]);
|
||||
}
|
||||
};
|
||||
//function change format array list with selected date and format
|
||||
const changeDateFormat = () => {
|
||||
const updateDate = [];
|
||||
@@ -175,60 +170,39 @@ function Placeholder(props) {
|
||||
|
||||
//`handleWidgetIdandPopup` is used to set current widget id and open relative popup
|
||||
const handleWidgetIdandPopup = async () => {
|
||||
if (props.setSelectWidgetId) {
|
||||
props.setSelectWidgetId(props.pos.key);
|
||||
}
|
||||
|
||||
const widgetTypeExist = [
|
||||
textInputWidget,
|
||||
"checkbox",
|
||||
"name",
|
||||
"company",
|
||||
"job title",
|
||||
"date",
|
||||
"email",
|
||||
textWidget
|
||||
].includes(props.pos.type);
|
||||
|
||||
if (widgetTypeExist) {
|
||||
setDraggingEnabled(false);
|
||||
}
|
||||
if (props.isOpenSignPad && !props.isDragging) {
|
||||
//'props.isOpenSignPad' variable is used to check flow to open signature pad for finish document
|
||||
if (
|
||||
props.isOpenSignPad &&
|
||||
!props.isDragging &&
|
||||
!props.pos.options?.isReadOnly &&
|
||||
props.pos.type !== textWidget
|
||||
) {
|
||||
if (props?.ispublicTemplate) {
|
||||
props.handleUserDetails();
|
||||
} else {
|
||||
if (props?.isNeedSign) {
|
||||
//funcion is used to heightlight widgets on top if two widgets on overlap
|
||||
const getCurrentSignerPos = props.xyPosition.find(
|
||||
(x) => x.Id === props.uniqueId
|
||||
);
|
||||
const updateZindex = handleHeighlightWidget(
|
||||
getCurrentSignerPos,
|
||||
props.pos.key,
|
||||
props.pageNumber
|
||||
);
|
||||
const updatesignerPos = props.xyPosition.map((x) =>
|
||||
x.Id === props.uniqueId ? { ...x, placeHolder: updateZindex } : x
|
||||
);
|
||||
props.setXyPosition(updatesignerPos);
|
||||
}
|
||||
if (
|
||||
["signature", "stamp", "image", "initials"].includes(props.pos.type)
|
||||
) {
|
||||
props.setIsSignPad(true);
|
||||
props.setSignKey(props.pos.key);
|
||||
props.setIsStamp(props.pos.isStamp);
|
||||
}
|
||||
if (props.pos.type === "initials") {
|
||||
props.setIsInitial(true);
|
||||
}
|
||||
if (props?.isNeedSign) {
|
||||
//funcion is used to highlight widgets on top when click any widget if two widgets on overlap
|
||||
const getCurrentSignerPos = props.xyPosition.find(
|
||||
(x) => x.Id === props.uniqueId
|
||||
);
|
||||
const updateZindex = handleHeighlightWidget(
|
||||
getCurrentSignerPos,
|
||||
props.pos.key,
|
||||
props.pageNumber
|
||||
);
|
||||
const updatesignerPos = props.xyPosition.map((x) =>
|
||||
x.Id === props.uniqueId ? { ...x, placeHolder: updateZindex } : x
|
||||
);
|
||||
props.setXyPosition(updatesignerPos);
|
||||
}
|
||||
dispatch(setIsShowModal({ [props.pos.key]: true }));
|
||||
}
|
||||
} else if (
|
||||
props.isPlaceholder &&
|
||||
!props.isDragging &&
|
||||
props.pos.type !== textWidget
|
||||
) {
|
||||
if (props.pos.key === props.selectWidgetId) {
|
||||
if (props.pos.key === props?.currWidgetsDetails?.key) {
|
||||
props.handleLinkUser(props.data.Id);
|
||||
props.setUniqueId(props.data.Id);
|
||||
const checkIndex = props.xyPosition.findIndex(
|
||||
@@ -236,31 +210,17 @@ function Placeholder(props) {
|
||||
);
|
||||
props.setIsSelectId(checkIndex || 0);
|
||||
}
|
||||
} else if (!props.pos.type) {
|
||||
if (
|
||||
!props.pos.type &&
|
||||
props.isNeedSign &&
|
||||
props.data.signerObjId === props.signerObjId
|
||||
) {
|
||||
props.setIsSignPad(true);
|
||||
props.setSignKey(props.pos.key);
|
||||
props.setIsStamp(props.pos.isStamp);
|
||||
} else if (
|
||||
(props.isNeedSign && props.pos.type === "signature") ||
|
||||
props.pos.type === "stamp"
|
||||
) {
|
||||
props.setIsSignPad(true);
|
||||
props.setSignKey(props.pos.key);
|
||||
props.setIsStamp(props.pos.isStamp);
|
||||
} else if (props.isNeedSign && props.pos.type === "dropdown") {
|
||||
props.setSignKey(props.pos.key);
|
||||
}
|
||||
//handle prefill 'text widget' click then save previos in tem variable after save or close button again assign current selected userId
|
||||
} else if (props.pos.type === textWidget) {
|
||||
dispatch(setIsShowModal({ [props.pos.key]: true }));
|
||||
props.setTempSignerId(props?.uniqueId);
|
||||
props.setUniqueId(props?.data?.Id);
|
||||
}
|
||||
};
|
||||
|
||||
const widgetClickHandler = () => {
|
||||
//The else condition opens the signature pad if it's a request signature flow and the user clicking is identified as a signer.
|
||||
props.setCurrWidgetsDetails && props.setCurrWidgetsDetails(props.pos);
|
||||
//condition to check in request signing flow user click on agree or not
|
||||
if (props?.data?.signerObjId === props?.signerObjId && !props.isDragging) {
|
||||
if (!props.isAgree && !props.isSelfSign) {
|
||||
props.setIsAgreeTour && props.setIsAgreeTour(true);
|
||||
@@ -272,7 +232,10 @@ function Placeholder(props) {
|
||||
handleWidgetIdandPopup();
|
||||
}
|
||||
};
|
||||
|
||||
const handleOnClickPlaceholder = () => {
|
||||
//'props.isDragging' variable is used to checking if user take any widget and try to drag then in that case
|
||||
//onclick event call. so to prevent onclick and do not open unecessary modal open.
|
||||
//condition only for request signing flow and self signing flow then apply one click copy sign url of previous drawn signature
|
||||
if (props.isApplyAll) {
|
||||
props.setRequestSignTour && props.setRequestSignTour(true);
|
||||
@@ -342,13 +305,11 @@ function Placeholder(props) {
|
||||
} else {
|
||||
widgetClickHandler();
|
||||
}
|
||||
// }
|
||||
// }
|
||||
} else {
|
||||
//The else condition is used to handle the case when the user clicks on a widget and open signature pad to draw sign
|
||||
props.setCurrWidgetsDetails && props.setCurrWidgetsDetails(props.pos);
|
||||
props.setWidgetType(props.pos.type);
|
||||
handleWidgetIdandPopup();
|
||||
handleGetDaynamicWH();
|
||||
}
|
||||
};
|
||||
//`handleOnClickSettingIcon` is used set current widget details and open setting of it
|
||||
@@ -391,8 +352,6 @@ function Placeholder(props) {
|
||||
props.setTempSignerId(props.uniqueId);
|
||||
props.setUniqueId(props?.data?.Id);
|
||||
}
|
||||
props.setSignKey(props.pos.key);
|
||||
props.setWidgetType(props.pos.type);
|
||||
props.setCurrWidgetsDetails(props.pos);
|
||||
};
|
||||
//function to set required state value onclick on widget's copy icon
|
||||
@@ -425,7 +384,7 @@ function Placeholder(props) {
|
||||
)
|
||||
) {
|
||||
props.setIsPageCopy(true);
|
||||
props.setSignKey(props.pos.key);
|
||||
props.setCurrWidgetsDetails(props.pos);
|
||||
} else {
|
||||
//function to create new widget next to just widget
|
||||
handleCopyNextToWidget(
|
||||
@@ -439,18 +398,6 @@ function Placeholder(props) {
|
||||
}
|
||||
};
|
||||
|
||||
//function to save date and format after seleted new date in response field and after finish document it should be emebed new selected date instead of current date
|
||||
useEffect(() => {
|
||||
if (props.pos.type === "date") {
|
||||
const isDateChange = true;
|
||||
const dateObj = {
|
||||
date: startDate,
|
||||
format: getDefaultFormat(props.pos?.options?.validation?.format)
|
||||
};
|
||||
handleSaveDate(dateObj, isDateChange); //function to save date and format in local array
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [startDate]);
|
||||
//function to save date and format on local array onchange date and onclick format
|
||||
const handleSaveDate = (data, isDateChange) => {
|
||||
let updateDate = data.date;
|
||||
@@ -476,8 +423,6 @@ function Placeholder(props) {
|
||||
props.data && props.data.Id,
|
||||
false,
|
||||
data?.format,
|
||||
null,
|
||||
null,
|
||||
props.fontSize || props.pos?.options?.fontSize || 12,
|
||||
props.fontColor || props.pos?.options?.fontColor || "black"
|
||||
);
|
||||
@@ -586,7 +531,7 @@ function Placeholder(props) {
|
||||
e.stopPropagation();
|
||||
setClickonWidget(props.pos);
|
||||
if (props.data) {
|
||||
props.setSignKey(props.pos.key);
|
||||
props.setCurrWidgetsDetails(props.pos);
|
||||
props.setUniqueId(props.data.Id);
|
||||
const checkIndex = props.xyPosition.findIndex(
|
||||
(data) => data.Id === props.data.Id
|
||||
@@ -599,7 +544,7 @@ function Placeholder(props) {
|
||||
e.stopPropagation();
|
||||
setIsDateModal(!isDateModal);
|
||||
if (props.data) {
|
||||
props.setSignKey(props.pos.key);
|
||||
props.setCurrWidgetsDetails(props.pos);
|
||||
props.setUniqueId(props.data.Id);
|
||||
const checkIndex = props.xyPosition.findIndex(
|
||||
(data) => data.Id === props.data.Id
|
||||
@@ -636,7 +581,6 @@ function Placeholder(props) {
|
||||
//condition for signyour-self flow
|
||||
else {
|
||||
props.handleDeleteSign(props.pos.key);
|
||||
props.setIsStamp(false);
|
||||
}
|
||||
}}
|
||||
//for mobile and tablet touch event
|
||||
@@ -649,7 +593,6 @@ function Placeholder(props) {
|
||||
//condition for signyour-self flow
|
||||
else {
|
||||
props.handleDeleteSign(props.pos.key);
|
||||
props.setIsStamp(false);
|
||||
}
|
||||
}}
|
||||
style={{ color: "#188ae2", right: "-8px", top: "-18px" }}
|
||||
@@ -744,43 +687,7 @@ function Placeholder(props) {
|
||||
return "all-scroll";
|
||||
}
|
||||
};
|
||||
const handleDragging = () => {
|
||||
//condition for request signing flow
|
||||
if (props.isNeedSign) {
|
||||
//enable dragging functionality only if isAlllowModify true on tab that widget and hold 1sec
|
||||
if (
|
||||
props.isAlllowModify &&
|
||||
props?.assignedWidgetId.includes(props.pos.key) &&
|
||||
props.data?.signerObjId === props.signerObjId
|
||||
) {
|
||||
//if 'isTouchDevice' then handle dragging functionality conditionaly
|
||||
if (isTouchDevice) {
|
||||
return isDisableDragging;
|
||||
} else {
|
||||
//no need to handle dragging functionality it auto enable and working or mouse click devices
|
||||
return false;
|
||||
}
|
||||
} else if (
|
||||
//condition when 'isAlllowModify' is true and user add new widgets then handle dragging functionality like signyourself flow
|
||||
props.isAlllowModify &&
|
||||
!props?.assignedWidgetId.includes(props.pos.key) &&
|
||||
props.data?.signerObjId === props.signerObjId
|
||||
) {
|
||||
return !isDraggingEnabled;
|
||||
} else {
|
||||
//if 'isAlllowModify' is false then disbale dragging functionality
|
||||
return true;
|
||||
}
|
||||
} //dragging enable in placeholder,template and not text widget flow
|
||||
else if (props.isPlaceholder && ![textWidget].includes(props.pos.type)) {
|
||||
return false;
|
||||
} //dragging depend on 'isDraggingEnabled' variable in self sign and signyourself flow
|
||||
else if (isTouchDevice) {
|
||||
return !isDraggingEnabled;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
//function to handle widget background color
|
||||
const handleBackground = () => {
|
||||
if (props.data) {
|
||||
@@ -812,42 +719,38 @@ function Placeholder(props) {
|
||||
}
|
||||
if (!props.isNeedSign || props.isAlllowModify) handleOnClickPlaceholder();
|
||||
};
|
||||
const handleTouchStart = () => {
|
||||
clearTimeout(holdTimeout.current); // Ensure no previous timeouts are running
|
||||
startTime.current = Date.now(); // Store touch start time
|
||||
|
||||
holdTimeout.current = setTimeout(() => {
|
||||
//handlle vibration and tab any widget and hold for 1 sec then show border outside widget and then user can able to drag
|
||||
if (isDisableDragging) {
|
||||
if (
|
||||
props.isNeedSign &&
|
||||
props.isAlllowModify &&
|
||||
props?.assignedWidgetId.includes(props.pos.key)
|
||||
) {
|
||||
try {
|
||||
navigator.vibrate(200); // Vibrate for 200ms
|
||||
} catch (e) {
|
||||
console.log("error in navigator.vibrate", e);
|
||||
}
|
||||
setIsDisableDragging(false);
|
||||
props.setSelectWidgetId(props.pos.key);
|
||||
} else if (!props.isNeedSign) {
|
||||
setIsDisableDragging(false);
|
||||
}
|
||||
}
|
||||
}, 1000); // Hold for 1 second before vibrating
|
||||
};
|
||||
const fontSize = calculateFont(props.pos.options?.fontSize);
|
||||
const fontColor = props.pos.options?.fontColor || "black";
|
||||
|
||||
const handleDragging = () => {
|
||||
//condition for request signing flow
|
||||
if (props.isNeedSign) {
|
||||
//enable dragging functionality only if isAlllowModify true on tab that widget and hold 1sec
|
||||
if (
|
||||
props.isAlllowModify &&
|
||||
!props?.assignedWidgetId.includes(props.pos.key) &&
|
||||
props.data?.signerObjId === props.signerObjId
|
||||
) {
|
||||
return false;
|
||||
} else {
|
||||
//if 'isAlllowModify' is false then disbale dragging functionality
|
||||
return true;
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
{/* Check if a text widget (prefill type) exists. Once the user enters a value and clicks outside or the widget becomes non-selectable, it should appear as plain text (just like embedded text in a document). When the user clicks on the text again, it should become editable. */}
|
||||
{props.pos?.options?.response &&
|
||||
props.pos.key !== props.selectWidgetId &&
|
||||
props.pos.key !== props?.currWidgetsDetails?.key &&
|
||||
props.pos.type === textWidget ? (
|
||||
<span
|
||||
onClick={() => {
|
||||
props.setSelectWidgetId && props.setSelectWidgetId(props.pos.key);
|
||||
props.setCurrWidgetsDetails &&
|
||||
props.setCurrWidgetsDetails(props.pos);
|
||||
}}
|
||||
style={{
|
||||
fontFamily: "Arial, sans-serif",
|
||||
@@ -896,7 +799,7 @@ function Placeholder(props) {
|
||||
: false
|
||||
: props.pos.type !== radioButtonWidget &&
|
||||
props.pos.type !== "checkbox" &&
|
||||
props.pos.key === props.selectWidgetId &&
|
||||
props.pos.key === props?.currWidgetsDetails?.key &&
|
||||
true,
|
||||
bottomLeft: false,
|
||||
topLeft: false
|
||||
@@ -909,7 +812,7 @@ function Placeholder(props) {
|
||||
cursor: getCursor(),
|
||||
zIndex:
|
||||
props.pos.type === "date"
|
||||
? props.pos.key === props.selectWidgetId
|
||||
? props.pos.key === props?.currWidgetsDetails?.key
|
||||
? 99 + 1
|
||||
: 99
|
||||
: props?.pos?.zIndex
|
||||
@@ -920,7 +823,7 @@ function Placeholder(props) {
|
||||
background: handleBackground()
|
||||
}}
|
||||
onDrag={() => {
|
||||
setDraggingEnabled(true);
|
||||
handleGetDaynamicWH();
|
||||
props.handleTabDrag && props.handleTabDrag(props.pos.key);
|
||||
}}
|
||||
size={{
|
||||
@@ -938,7 +841,6 @@ function Placeholder(props) {
|
||||
minHeight={calculateFont(props.pos.options?.fontSize, true)}
|
||||
maxHeight="auto"
|
||||
onResizeStart={() => {
|
||||
setDraggingEnabled(true);
|
||||
props.setIsResize && props.setIsResize(true);
|
||||
}}
|
||||
onResizeStop={(e, direction, ref) => {
|
||||
@@ -958,9 +860,7 @@ function Placeholder(props) {
|
||||
props.isResize
|
||||
);
|
||||
}}
|
||||
disableDragging={handleDragging()}
|
||||
onDragStop={(event, dragElement) => {
|
||||
setIsDisableDragging(true);
|
||||
props.handleStop &&
|
||||
props.handleStop(
|
||||
event,
|
||||
@@ -979,11 +879,9 @@ function Placeholder(props) {
|
||||
h: ref.offsetHeight / (props.scale * containerScale)
|
||||
});
|
||||
}}
|
||||
// onClick={() =>
|
||||
// !props.isResize && !isMobile && handleOnClickPlaceholder()
|
||||
// }
|
||||
disableDragging={handleDragging()}
|
||||
>
|
||||
{props.pos.key === props.selectWidgetId &&
|
||||
{props.pos.key === props?.currWidgetsDetails?.key &&
|
||||
((props.isShowBorder &&
|
||||
![radioButtonWidget, "checkbox"].includes(props.pos.type)) ||
|
||||
(props?.isAlllowModify &&
|
||||
@@ -1010,22 +908,20 @@ function Placeholder(props) {
|
||||
)
|
||||
) : (
|
||||
![radioButtonWidget, "checkbox"].includes(props.pos.type) &&
|
||||
props.pos.key === props.selectWidgetId && <BorderResize />
|
||||
props.pos.key === props?.currWidgetsDetails?.key && <BorderResize />
|
||||
)}
|
||||
|
||||
{/* 1- Show a border if props.pos.key === props.selectWidgetId, indicating the current user's selected widget.
|
||||
{/* 1- Show a border if props.pos.key === props?.currWidgetsDetails?.key, indicating the current user's selected widget.
|
||||
2- If props.isShowBorder is true, display borders for all widgets.
|
||||
3- Use the combination of props?.isAlllowModify and !props?.assignedWidgetId.includes(props.pos.key) to determine when to show borders:
|
||||
1- When isAlllowModify is true, show borders.
|
||||
2- Do not display border for widgets already assigned (props.assignedWidgetId.includes(props.pos.key) is true).
|
||||
*/}
|
||||
{props.pos.key === props.selectWidgetId &&
|
||||
{props.pos.key === props?.currWidgetsDetails?.key &&
|
||||
(props.isShowBorder ||
|
||||
!isDisableDragging ||
|
||||
(props?.isAlllowModify &&
|
||||
!props?.assignedWidgetId.includes(props.pos.key))) && (
|
||||
<PlaceholderBorder
|
||||
setDraggingEnabled={setDraggingEnabled}
|
||||
pos={props.pos}
|
||||
isPlaceholder={props.isPlaceholder}
|
||||
getCheckboxRenderWidth={getCheckboxRenderWidth}
|
||||
@@ -1051,18 +947,18 @@ function Placeholder(props) {
|
||||
: props.posHeight(props.pos, props.isSignYourself),
|
||||
zIndex: "10"
|
||||
}}
|
||||
onTouchEnd={() => handleTouchEnd()}
|
||||
onTouchEnd={() => handleOnClickPlaceholder()}
|
||||
onClick={() => handleOnClickPlaceholder()}
|
||||
onTouchStart={() => handleTouchStart()}
|
||||
>
|
||||
{props.pos.key === props.selectWidgetId && <PlaceholderIcon />}
|
||||
{props.pos.key === props?.currWidgetsDetails?.key && (
|
||||
<PlaceholderIcon />
|
||||
)}
|
||||
<PlaceholderType
|
||||
pos={props.pos}
|
||||
xyPosition={props.xyPosition}
|
||||
index={props.index}
|
||||
setXyPosition={props.setXyPosition}
|
||||
data={props.data}
|
||||
setSignKey={props.setSignKey}
|
||||
isShowDropdown={props?.isShowDropdown}
|
||||
isPlaceholder={props.isPlaceholder}
|
||||
isSignYourself={props.isSignYourself}
|
||||
@@ -1073,8 +969,6 @@ function Placeholder(props) {
|
||||
isNeedSign={props.isNeedSign}
|
||||
setSelectDate={setSelectDate}
|
||||
selectDate={selectDate}
|
||||
setValidateAlert={props.setValidateAlert}
|
||||
setStartDate={setStartDate}
|
||||
startDate={startDate}
|
||||
handleSaveDate={handleSaveDate}
|
||||
xPos={props.xPos}
|
||||
-4
@@ -43,10 +43,6 @@ function PlaceholderBorder(props) {
|
||||
};
|
||||
return (
|
||||
<div
|
||||
onMouseEnter={() => !isMobile && props?.setDraggingEnabled(false)}
|
||||
onTouchEnd={() =>
|
||||
props.pos.type === textWidget && props?.setDraggingEnabled(false)
|
||||
}
|
||||
className="absolute inline-block w-[14px] h-[14px] border-[0.2px] overflow-hidden border-dashed"
|
||||
style={{
|
||||
borderColor: themeColor,
|
||||
@@ -1,903 +0,0 @@
|
||||
import React, { useEffect, useState, forwardRef, useRef } from "react";
|
||||
import {
|
||||
getMonth,
|
||||
getYear,
|
||||
onChangeHeightOfTextArea,
|
||||
onChangeInput,
|
||||
radioButtonWidget,
|
||||
range,
|
||||
textInputWidget,
|
||||
textWidget
|
||||
} from "../../constant/Utils";
|
||||
import DatePicker from "react-datepicker";
|
||||
import "react-datepicker/dist/react-datepicker.css";
|
||||
import "../../styles/signature.css";
|
||||
import RegexParser from "regex-parser";
|
||||
import { emailRegex } from "../../constant/const";
|
||||
import { useTranslation } from "react-i18next";
|
||||
const textWidgetCls =
|
||||
"w-full h-full md:min-w-full md:min-h-full z-[999] text-[12px] rounded-[2px] border-[1px] border-[#007bff] overflow-hidden resize-none outline-none text-base-content item-center whitespace-pre-wrap bg-white";
|
||||
const selectWidgetCls =
|
||||
"w-full h-full absolute left-0 top-0 border-[1px] border-[#007bff] rounded-[2px] focus:outline-none text-base-content";
|
||||
const widgetCls =
|
||||
"select-none-cls overflow-hidden w-full h-full text-black flex flex-col justify-center items-center";
|
||||
function PlaceholderType(props) {
|
||||
const { t } = useTranslation();
|
||||
const type = props?.pos?.type;
|
||||
const widgetTypeTranslation = t(`widgets-name.${props?.pos?.type}`);
|
||||
const [selectOption, setSelectOption] = useState("");
|
||||
const [validatePlaceholder, setValidatePlaceholder] = useState("");
|
||||
const inputRef = useRef(null);
|
||||
const [textValue, setTextValue] = useState();
|
||||
const [selectedCheckbox, setSelectedCheckbox] = useState([]);
|
||||
const [hint, setHint] = useState("");
|
||||
const years = range(1950, getYear(new Date()) + 16, 1);
|
||||
const fontSize = props.calculateFont(props.pos.options?.fontSize);
|
||||
const fontColor = props.pos.options?.fontColor || "black";
|
||||
const months = [
|
||||
"January",
|
||||
"February",
|
||||
"March",
|
||||
"April",
|
||||
"May",
|
||||
"June",
|
||||
"July",
|
||||
"August",
|
||||
"September",
|
||||
"October",
|
||||
"November",
|
||||
"December"
|
||||
];
|
||||
const textWidgetStyle = {
|
||||
fontSize: fontSize,
|
||||
color: fontColor,
|
||||
fontFamily: "Arial, sans-serif",
|
||||
overflow: "hidden",
|
||||
textAlign: "start",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
height: "100%"
|
||||
};
|
||||
const validateExpression = (regexValidation) => {
|
||||
if (textValue && regexValidation) {
|
||||
let regexObject = regexValidation;
|
||||
if (props.pos?.options?.validation?.type === "regex") {
|
||||
regexObject = RegexParser(regexValidation);
|
||||
}
|
||||
// new RegExp(regexValidation);
|
||||
let isValidate = regexObject.test(textValue);
|
||||
if (!isValidate) {
|
||||
props?.setValidateAlert(true);
|
||||
inputRef.current.focus();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleInputBlur = () => {
|
||||
const validateType = props.pos?.options?.validation?.type;
|
||||
let regexValidation;
|
||||
if (validateType && validateType !== "text") {
|
||||
switch (validateType) {
|
||||
case "email":
|
||||
regexValidation = emailRegex;
|
||||
validateExpression(regexValidation);
|
||||
break;
|
||||
case "number":
|
||||
regexValidation = /^[0-9\s]*$/;
|
||||
validateExpression(regexValidation);
|
||||
break;
|
||||
default:
|
||||
regexValidation = props.pos?.options?.validation?.pattern || "";
|
||||
validateExpression(regexValidation);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleTextValid = (e) => {
|
||||
const textInput = e.target.value;
|
||||
setTextValue(textInput);
|
||||
};
|
||||
function checkRegularExpress(validateType) {
|
||||
switch (validateType) {
|
||||
case "email":
|
||||
setValidatePlaceholder("demo@gmail.com");
|
||||
break;
|
||||
case "number":
|
||||
setValidatePlaceholder("12345");
|
||||
break;
|
||||
case "text":
|
||||
setValidatePlaceholder("please enter text");
|
||||
break;
|
||||
default:
|
||||
setValidatePlaceholder("please enter value");
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (type && type === "checkbox" && props.isNeedSign) {
|
||||
const isDefaultValue = props.pos.options?.defaultValue;
|
||||
if (isDefaultValue) {
|
||||
setSelectedCheckbox(isDefaultValue);
|
||||
}
|
||||
} else if (props.pos?.options?.hint) {
|
||||
setValidatePlaceholder(props.pos?.options.hint);
|
||||
} else if (props.pos?.options?.validation?.type) {
|
||||
checkRegularExpress(props.pos?.options?.validation?.type);
|
||||
}
|
||||
setTextValue(
|
||||
props.pos?.options?.response
|
||||
? props.pos?.options?.response
|
||||
: props.pos?.options?.defaultValue
|
||||
? props.pos?.options?.defaultValue
|
||||
: ""
|
||||
);
|
||||
setSelectOption(
|
||||
props.pos?.options?.response
|
||||
? props.pos?.options?.response
|
||||
: props.pos?.options?.defaultValue
|
||||
? props.pos?.options?.defaultValue
|
||||
: ""
|
||||
);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
["name", "email", "job title", "company"].includes(props.pos?.type) &&
|
||||
props.isNeedSign &&
|
||||
props.data?.signerObjId === props?.signerObjId
|
||||
) {
|
||||
const defaultData = props.pos?.options?.defaultValue;
|
||||
if (defaultData) {
|
||||
setTextValue(defaultData);
|
||||
}
|
||||
if (props.pos?.options?.hint) {
|
||||
setHint(props.pos?.options.hint);
|
||||
} else {
|
||||
setHint(props.pos?.type);
|
||||
}
|
||||
} else if ([textInputWidget].includes(props.pos?.type)) {
|
||||
const defaultData = props.pos?.options?.defaultValue;
|
||||
if (defaultData) {
|
||||
setTextValue(defaultData);
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [props.pos?.options?.defaultValue]);
|
||||
const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (
|
||||
<div
|
||||
style={{
|
||||
fontSize: fontSize,
|
||||
color: fontColor,
|
||||
fontFamily: "Arial, sans-serif"
|
||||
}}
|
||||
className={`${selectWidgetCls} overflow-hidden`}
|
||||
onClick={onClick}
|
||||
ref={ref}
|
||||
>
|
||||
{value}
|
||||
<i className="fa-light fa-calendar ml-[5px]"></i>
|
||||
</div>
|
||||
));
|
||||
ExampleCustomInput.displayName = "ExampleCustomInput";
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
["name", "email", "job title", "company"].includes(type) &&
|
||||
props.isNeedSign &&
|
||||
props.data?.signerObjId === props.signerObjId
|
||||
) {
|
||||
const isDefault = true;
|
||||
const senderUser = localStorage.getItem("Extand_Class");
|
||||
const jsonSender = JSON.parse(senderUser);
|
||||
onChangeInput(
|
||||
jsonSender && jsonSender[0],
|
||||
null,
|
||||
props.xyPosition,
|
||||
null,
|
||||
props.setXyPosition,
|
||||
props.data.Id,
|
||||
isDefault
|
||||
);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [type]);
|
||||
//function for show checked checkbox
|
||||
const selectCheckbox = (ind) => {
|
||||
const res = props.pos.options?.response;
|
||||
const defaultCheck = props.pos.options?.defaultValue;
|
||||
if (res && res?.length > 0) {
|
||||
const isSelectIndex = res.indexOf(ind);
|
||||
if (isSelectIndex > -1) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
// }
|
||||
} else if (defaultCheck) {
|
||||
const isSelectIndex = defaultCheck.indexOf(ind);
|
||||
if (isSelectIndex > -1) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleRadioCheck = (data) => {
|
||||
const defaultData = props.pos.options?.defaultValue;
|
||||
if (textValue === data) {
|
||||
return true;
|
||||
} else if (defaultData === data) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
//function for set checked and unchecked value of checkbox
|
||||
const handleCheckboxValue = (isChecked, ind) => {
|
||||
let updateSelectedCheckbox = [],
|
||||
checkedList;
|
||||
let isDefaultValue, isDefaultEmpty;
|
||||
if (type === "checkbox") {
|
||||
updateSelectedCheckbox = selectedCheckbox ? selectedCheckbox : [];
|
||||
|
||||
if (isChecked) {
|
||||
updateSelectedCheckbox.push(ind);
|
||||
setSelectedCheckbox(updateSelectedCheckbox);
|
||||
} else {
|
||||
checkedList = selectedCheckbox.filter((data) => data !== ind);
|
||||
setSelectedCheckbox(checkedList);
|
||||
}
|
||||
if (props.isNeedSign) {
|
||||
isDefaultValue = props.pos.options?.defaultValue;
|
||||
}
|
||||
if (isDefaultValue && isDefaultValue.length > 0) {
|
||||
isDefaultEmpty = true;
|
||||
}
|
||||
onChangeInput(
|
||||
checkedList ? checkedList : updateSelectedCheckbox,
|
||||
props.pos.key,
|
||||
props.xyPosition,
|
||||
props.index,
|
||||
props.setXyPosition,
|
||||
props.data && props.data.Id,
|
||||
false,
|
||||
null,
|
||||
isDefaultEmpty
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
//function to handle select radio widget and set value seletced by user
|
||||
const handleCheckRadio = (isChecked, data) => {
|
||||
let isDefaultValue,
|
||||
isDefaultEmpty,
|
||||
isRadio = true;
|
||||
if (props.isNeedSign) {
|
||||
isDefaultValue = props.pos.options?.defaultValue;
|
||||
}
|
||||
if (isDefaultValue) {
|
||||
isDefaultEmpty = true;
|
||||
}
|
||||
if (isChecked) {
|
||||
setTextValue(data);
|
||||
} else {
|
||||
setTextValue("");
|
||||
}
|
||||
onChangeInput(
|
||||
data,
|
||||
props.pos.key,
|
||||
props.xyPosition,
|
||||
props.index,
|
||||
props.setXyPosition,
|
||||
props.data && props.data.Id,
|
||||
false,
|
||||
null,
|
||||
isDefaultEmpty,
|
||||
isRadio
|
||||
);
|
||||
};
|
||||
//function to set onchange date
|
||||
const handleOnDateChange = (date) => {
|
||||
props.setStartDate(date);
|
||||
};
|
||||
//handle height on enter press in text area
|
||||
const handleEnterPress = (e) => {
|
||||
const height = 18;
|
||||
if (e.key === "Enter") {
|
||||
//function to save height of text area
|
||||
onChangeHeightOfTextArea(
|
||||
height,
|
||||
props.pos.type,
|
||||
props.pos.key,
|
||||
props.xyPosition,
|
||||
props.index,
|
||||
props.setXyPosition,
|
||||
props.data && props.data?.Id
|
||||
);
|
||||
}
|
||||
};
|
||||
switch (type) {
|
||||
case "signature":
|
||||
return props.pos.SignUrl ? (
|
||||
<img
|
||||
alt="signature"
|
||||
draggable="false"
|
||||
src={props.pos.SignUrl}
|
||||
className="w-full h-full select-none-cls "
|
||||
/>
|
||||
) : (
|
||||
<div className={widgetCls}>
|
||||
{props.pos.type && (
|
||||
<div
|
||||
style={{
|
||||
fontSize: props.pos
|
||||
? props.calculateFontsize(props.pos)
|
||||
: "11px"
|
||||
}}
|
||||
className="font-medium"
|
||||
>
|
||||
{props.isNeedSign
|
||||
? props.pos?.options?.hint || widgetTypeTranslation
|
||||
: widgetTypeTranslation}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
case "stamp":
|
||||
return props.pos.SignUrl ? (
|
||||
<img
|
||||
alt="stamp"
|
||||
draggable="false"
|
||||
src={props.pos.SignUrl}
|
||||
className="w-full h-full select-none-cls"
|
||||
/>
|
||||
) : (
|
||||
<div className={widgetCls}>
|
||||
{props.pos.type && (
|
||||
<div
|
||||
style={{
|
||||
fontSize: props.pos
|
||||
? props.calculateFontsize(props.pos)
|
||||
: "11px"
|
||||
}}
|
||||
className="font-medium"
|
||||
>
|
||||
{props.isNeedSign
|
||||
? props.pos?.options?.hint || widgetTypeTranslation
|
||||
: widgetTypeTranslation}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
case "checkbox":
|
||||
return (
|
||||
<div style={{ zIndex: props.isSignYourself && "99" }}>
|
||||
{props.pos.options?.values?.map((data, ind) => {
|
||||
return (
|
||||
<div
|
||||
key={ind}
|
||||
className="select-none-cls flex items-center text-center gap-0.5"
|
||||
>
|
||||
<input
|
||||
id={`checkbox-${props.pos.key + ind}`}
|
||||
style={{ width: fontSize, height: fontSize }}
|
||||
className={`${
|
||||
ind === 0 ? "mt-0" : "mt-[5px]"
|
||||
} flex justify-center op-checkbox rounded-[1px] `}
|
||||
onBlur={handleInputBlur}
|
||||
disabled={
|
||||
props.isNeedSign &&
|
||||
(props.pos.options?.isReadOnly ||
|
||||
props.data?.signerObjId !== props.signerObjId)
|
||||
}
|
||||
type="checkbox"
|
||||
checked={selectCheckbox(ind)}
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
if (!props.isPlaceholder) {
|
||||
const maxRequired =
|
||||
props.pos.options?.validation?.maxRequiredCount;
|
||||
const maxCountInt =
|
||||
maxRequired && parseInt(maxRequired);
|
||||
|
||||
if (maxCountInt > 0) {
|
||||
if (
|
||||
selectedCheckbox &&
|
||||
selectedCheckbox?.length <= maxCountInt - 1
|
||||
) {
|
||||
handleCheckboxValue(e.target.checked, ind);
|
||||
}
|
||||
} else {
|
||||
handleCheckboxValue(e.target.checked, ind);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
handleCheckboxValue(e.target.checked, ind);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{!props.pos.options?.isHideLabel && (
|
||||
<label
|
||||
htmlFor={`checkbox-${props.pos.key + ind}`}
|
||||
style={{ fontSize: fontSize, color: fontColor }}
|
||||
className="text-xs mb-0 text-center"
|
||||
>
|
||||
{data}
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
case textInputWidget:
|
||||
return props.isSignYourself ||
|
||||
(props.isSelfSign && props.data?.signerObjId === props.signerObjId) ||
|
||||
(props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
|
||||
<textarea
|
||||
ref={inputRef}
|
||||
placeholder={validatePlaceholder || t("widgets-name.text")}
|
||||
rows={1}
|
||||
onKeyDown={handleEnterPress}
|
||||
value={textValue}
|
||||
onBlur={handleInputBlur}
|
||||
onChange={(e) => {
|
||||
setTextValue(e.target.value);
|
||||
onChangeInput(
|
||||
e.target.value,
|
||||
props.pos.key,
|
||||
props.xyPosition,
|
||||
props.index,
|
||||
props.setXyPosition,
|
||||
props.data && props.data?.Id,
|
||||
false
|
||||
);
|
||||
}}
|
||||
className={`${
|
||||
props.isNeedSign &&
|
||||
(props.pos.options?.isReadOnly ||
|
||||
props.data?.signerObjId !== props.signerObjId)
|
||||
? " bg-black/68 select-none "
|
||||
: "" + textWidgetCls
|
||||
}`}
|
||||
style={{ fontSize: fontSize, color: fontColor }}
|
||||
disabled={
|
||||
props.isNeedSign &&
|
||||
(props.pos.options?.isReadOnly ||
|
||||
props.data?.signerObjId !== props.signerObjId)
|
||||
}
|
||||
cols="50"
|
||||
/>
|
||||
) : (
|
||||
<div style={textWidgetStyle} className="select-none-cls">
|
||||
<span>{textValue || widgetTypeTranslation}</span>
|
||||
</div>
|
||||
);
|
||||
case "dropdown":
|
||||
return props.data?.signerObjId === props.signerObjId ? (
|
||||
<select
|
||||
style={{ fontSize: fontSize, color: fontColor }}
|
||||
className={`${
|
||||
props.isNeedSign &&
|
||||
(props.pos.options?.isReadOnly ||
|
||||
props.data?.signerObjId !== props.signerObjId)
|
||||
? " disabled:bg-inherit select-none "
|
||||
: "" + `${selectWidgetCls} text-[12px] bg-inherit`
|
||||
}`}
|
||||
id="myDropdown"
|
||||
value={selectOption}
|
||||
onChange={(e) => {
|
||||
setSelectOption(e.target.value);
|
||||
onChangeInput(
|
||||
e.target.value,
|
||||
props.pos.key,
|
||||
props.xyPosition,
|
||||
props.index,
|
||||
props.setXyPosition,
|
||||
props.data && props.data?.Id,
|
||||
false
|
||||
);
|
||||
}}
|
||||
disabled={
|
||||
props.isNeedSign &&
|
||||
(props.pos.options?.isReadOnly ||
|
||||
props.data?.signerObjId !== props.signerObjId)
|
||||
}
|
||||
>
|
||||
{/* Default/Title option */}
|
||||
<option
|
||||
style={{ fontSize: fontSize, color: fontColor }}
|
||||
value=""
|
||||
disabled
|
||||
hidden
|
||||
>
|
||||
{props?.pos?.options?.name}
|
||||
</option>
|
||||
|
||||
{props.pos?.options?.values?.map((data, ind) => {
|
||||
return (
|
||||
<option
|
||||
style={{ fontSize: fontSize, color: fontColor }}
|
||||
key={ind}
|
||||
value={data}
|
||||
>
|
||||
{data}
|
||||
</option>
|
||||
);
|
||||
})}
|
||||
</select>
|
||||
) : (
|
||||
<div
|
||||
style={textWidgetStyle}
|
||||
className="select-none-cls flex justify-between items-center"
|
||||
>
|
||||
{props.pos?.options?.name
|
||||
? props.pos.options.name
|
||||
: widgetTypeTranslation}
|
||||
<i className="fa-light fa-circle-chevron-down mr-1 "></i>
|
||||
</div>
|
||||
);
|
||||
case "initials":
|
||||
return props.pos.SignUrl ? (
|
||||
<img
|
||||
alt="initials"
|
||||
draggable="false"
|
||||
src={props.pos.SignUrl}
|
||||
className="w-full h-full select-none-cls"
|
||||
/>
|
||||
) : (
|
||||
<div className={widgetCls}>
|
||||
{props.pos.type && (
|
||||
<div
|
||||
style={{
|
||||
fontSize: props.pos
|
||||
? props.calculateFontsize(props.pos)
|
||||
: "11px"
|
||||
}}
|
||||
className="font-medium text-center"
|
||||
>
|
||||
{props.isNeedSign
|
||||
? props.pos?.options?.hint || widgetTypeTranslation
|
||||
: widgetTypeTranslation}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
case "name":
|
||||
return props.isSignYourself ||
|
||||
(props.isSelfSign && props.data?.signerObjId === props.signerObjId) ||
|
||||
(props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
|
||||
<textarea
|
||||
ref={inputRef}
|
||||
placeholder={hint || widgetTypeTranslation}
|
||||
rows={1}
|
||||
onKeyDown={handleEnterPress}
|
||||
value={textValue}
|
||||
onChange={(e) => {
|
||||
const isDefault = false;
|
||||
handleTextValid(e);
|
||||
onChangeInput(
|
||||
e.target.value,
|
||||
props.pos.key,
|
||||
props.xyPosition,
|
||||
props.index,
|
||||
props.setXyPosition,
|
||||
props.data && props.data?.Id,
|
||||
isDefault
|
||||
);
|
||||
}}
|
||||
className={textWidgetCls}
|
||||
style={{ fontSize: fontSize, color: fontColor }}
|
||||
cols="50"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-full select-none-cls" style={textWidgetStyle}>
|
||||
<span>{widgetTypeTranslation}</span>
|
||||
</div>
|
||||
);
|
||||
case "company":
|
||||
return props.isSignYourself ||
|
||||
(props.isSelfSign && props.data?.signerObjId === props.signerObjId) ||
|
||||
(props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
|
||||
<textarea
|
||||
ref={inputRef}
|
||||
placeholder={hint || widgetTypeTranslation}
|
||||
rows={1}
|
||||
onKeyDown={handleEnterPress}
|
||||
value={textValue}
|
||||
onChange={(e) => {
|
||||
handleTextValid(e);
|
||||
onChangeInput(
|
||||
e.target.value,
|
||||
props.pos.key,
|
||||
props.xyPosition,
|
||||
props.index,
|
||||
props.setXyPosition,
|
||||
props.data && props.data?.Id,
|
||||
false
|
||||
);
|
||||
}}
|
||||
className={textWidgetCls}
|
||||
style={{ fontSize: fontSize, color: fontColor }}
|
||||
cols="50"
|
||||
/>
|
||||
) : (
|
||||
<div style={textWidgetStyle} className="select-none-cls">
|
||||
<span>{widgetTypeTranslation}</span>
|
||||
</div>
|
||||
);
|
||||
case "job title":
|
||||
return props.isSignYourself ||
|
||||
(props.isSelfSign && props.data?.signerObjId === props.signerObjId) ||
|
||||
(props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
|
||||
<textarea
|
||||
ref={inputRef}
|
||||
placeholder={hint || widgetTypeTranslation}
|
||||
rows={1}
|
||||
onKeyDown={handleEnterPress}
|
||||
value={textValue}
|
||||
onChange={(e) => {
|
||||
handleTextValid(e);
|
||||
onChangeInput(
|
||||
e.target.value,
|
||||
props.pos.key,
|
||||
props.xyPosition,
|
||||
props.index,
|
||||
props.setXyPosition,
|
||||
props.data && props.data?.Id,
|
||||
false
|
||||
);
|
||||
}}
|
||||
className={textWidgetCls}
|
||||
style={{ fontSize: fontSize, color: fontColor }}
|
||||
cols="50"
|
||||
/>
|
||||
) : (
|
||||
<div style={textWidgetStyle} className="select-none-cls">
|
||||
<span>{widgetTypeTranslation}</span>
|
||||
</div>
|
||||
);
|
||||
case "date":
|
||||
return props.isSignYourself ||
|
||||
(props.isSelfSign && props.data?.signerObjId === props.signerObjId) ||
|
||||
(props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
|
||||
<DatePicker
|
||||
renderCustomHeader={({ date, changeYear, changeMonth }) => (
|
||||
<div className="flex justify-start ml-2 ">
|
||||
<select
|
||||
className="bg-transparent outline-none"
|
||||
value={months[getMonth(date)]}
|
||||
onChange={({ target: { value } }) =>
|
||||
changeMonth(months.indexOf(value))
|
||||
}
|
||||
>
|
||||
{months.map((option) => (
|
||||
<option key={option} value={option}>
|
||||
{option}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
className="bg-transparent outline-none"
|
||||
value={getYear(date)}
|
||||
onChange={({ target: { value } }) => changeYear(value)}
|
||||
>
|
||||
{years.map((option) => (
|
||||
<option key={option} value={option}>
|
||||
{option}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
disabled={
|
||||
props.isPlaceholder ||
|
||||
(props.isNeedSign && props.data?.signerObjId !== props.signerObjId)
|
||||
}
|
||||
onBlur={handleInputBlur}
|
||||
closeOnScroll={true}
|
||||
className={`${selectWidgetCls} outline-[#007bff]`}
|
||||
selected={props?.startDate}
|
||||
onChange={(date) => handleOnDateChange(date)}
|
||||
popperPlacement="top-end"
|
||||
customInput={<ExampleCustomInput />}
|
||||
dateFormat={
|
||||
props.selectDate
|
||||
? props.selectDate?.format
|
||||
: props.pos?.options?.validation?.format
|
||||
? props.pos?.options?.validation?.format
|
||||
: "MM/dd/yyyy"
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
style={textWidgetStyle}
|
||||
className="select-none-cls overflow-hidden"
|
||||
>
|
||||
<span>
|
||||
{props.selectDate
|
||||
? props.selectDate?.format
|
||||
: props.pos?.options?.validation?.format
|
||||
? props.pos?.options?.validation?.format
|
||||
: "MM/dd/yyyy"}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
case "image":
|
||||
return props.pos.SignUrl ? (
|
||||
<img
|
||||
alt="image"
|
||||
draggable="false"
|
||||
src={props.pos.SignUrl}
|
||||
className="w-full h-full select-none-cls"
|
||||
/>
|
||||
) : (
|
||||
<div className={widgetCls}>
|
||||
{props.pos.type && (
|
||||
<div
|
||||
style={{
|
||||
fontSize: props.pos
|
||||
? props.calculateFontsize(props.pos)
|
||||
: "11px"
|
||||
}}
|
||||
className="font-medium text-center"
|
||||
>
|
||||
{props.isNeedSign
|
||||
? props.pos?.options?.hint || widgetTypeTranslation
|
||||
: widgetTypeTranslation}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
case "email":
|
||||
return props.isSignYourself ||
|
||||
(props.isSelfSign && props.data?.signerObjId === props.signerObjId) ||
|
||||
(props.isNeedSign && props.data?.signerObjId === props.signerObjId) ? (
|
||||
<textarea
|
||||
ref={inputRef}
|
||||
placeholder={hint || widgetTypeTranslation}
|
||||
rows={1}
|
||||
onKeyDown={(e) => {
|
||||
// Prevent new line on Enter key press
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
}
|
||||
}}
|
||||
value={textValue}
|
||||
onBlur={handleInputBlur}
|
||||
onChange={(e) => {
|
||||
handleTextValid(e);
|
||||
onChangeInput(
|
||||
e.target.value,
|
||||
props.pos.key,
|
||||
props.xyPosition,
|
||||
props.index,
|
||||
props.setXyPosition,
|
||||
props.data && props.data?.Id,
|
||||
false
|
||||
);
|
||||
}}
|
||||
className={textWidgetCls}
|
||||
style={{
|
||||
fontSize: fontSize,
|
||||
color: fontColor,
|
||||
fontFamily: "Arial, sans-serif"
|
||||
}}
|
||||
cols="1"
|
||||
/>
|
||||
) : (
|
||||
<div style={textWidgetStyle} className="select-none-cls">
|
||||
<span>{widgetTypeTranslation}</span>
|
||||
</div>
|
||||
);
|
||||
case radioButtonWidget:
|
||||
return (
|
||||
<div>
|
||||
{props.pos.options?.values.map((data, ind) => {
|
||||
return (
|
||||
<div
|
||||
key={ind}
|
||||
className="select-none-cls flex items-center text-center gap-0.5"
|
||||
>
|
||||
<input
|
||||
id={`radio-${props.pos.key + ind}`}
|
||||
style={{
|
||||
width: fontSize,
|
||||
height: fontSize,
|
||||
marginTop: ind > 0 ? "10px" : "0px"
|
||||
}}
|
||||
className={`flex justify-center op-radio`}
|
||||
type="radio"
|
||||
disabled={
|
||||
props.isNeedSign &&
|
||||
(props.pos.options?.isReadOnly ||
|
||||
props.data?.signerObjId !== props.signerObjId)
|
||||
}
|
||||
checked={handleRadioCheck(data)}
|
||||
onChange={(e) => {
|
||||
if (!props.isPlaceholder) {
|
||||
handleCheckRadio(e.target.checked, data);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{!props.pos.options?.isHideLabel && (
|
||||
<label
|
||||
htmlFor={`radio-${props.pos.key + ind}`}
|
||||
style={{ fontSize: fontSize, color: fontColor }}
|
||||
className="text-xs mb-0"
|
||||
>
|
||||
{data}
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
case textWidget:
|
||||
return (
|
||||
<textarea
|
||||
placeholder={t("widgets-name.text")}
|
||||
rows={1}
|
||||
onKeyDown={handleEnterPress}
|
||||
value={textValue}
|
||||
onBlur={handleInputBlur}
|
||||
onChange={(e) => {
|
||||
setTextValue(e.target.value);
|
||||
onChangeInput(
|
||||
e.target.value,
|
||||
props.pos.key,
|
||||
props.xyPosition,
|
||||
props.index,
|
||||
props.setXyPosition,
|
||||
props.data && props.data?.Id,
|
||||
false
|
||||
);
|
||||
}}
|
||||
className={textWidgetCls}
|
||||
style={{
|
||||
fontFamily: "Arial, sans-serif",
|
||||
fontSize: fontSize,
|
||||
color: fontColor
|
||||
}}
|
||||
cols="50"
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return props.pos.SignUrl ? (
|
||||
<div className="pointer-events-none">
|
||||
<img
|
||||
alt="image"
|
||||
draggable="false"
|
||||
src={props.pos.SignUrl}
|
||||
className="w-full h-full "
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className={widgetCls}>
|
||||
{props.pos.isStamp ? <div>stamp</div> : <div>signature</div>}
|
||||
{props.pos.type && (
|
||||
<div
|
||||
style={{
|
||||
fontSize: props.pos
|
||||
? props.calculateFontsize(props.pos)
|
||||
: "11px"
|
||||
}}
|
||||
className="font-medium"
|
||||
>
|
||||
{props.isNeedSign
|
||||
? props.pos?.options?.hint || widgetTypeTranslation
|
||||
: widgetTypeTranslation}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default PlaceholderType;
|
||||
@@ -0,0 +1,528 @@
|
||||
import React, { useEffect, useState, forwardRef, useRef } from "react";
|
||||
import {
|
||||
getMonth,
|
||||
getYear,
|
||||
radioButtonWidget,
|
||||
textInputWidget,
|
||||
textWidget,
|
||||
months,
|
||||
years,
|
||||
selectCheckbox,
|
||||
checkRegularExpress
|
||||
} from "../../constant/Utils";
|
||||
import DatePicker from "react-datepicker";
|
||||
import "react-datepicker/dist/react-datepicker.css";
|
||||
import "../../styles/signature.css";
|
||||
import { useTranslation } from "react-i18next";
|
||||
const textWidgetCls =
|
||||
"w-full h-full md:min-w-full md:min-h-full z-[999] text-[12px] rounded-[2px] border-[1px] border-[#007bff] overflow-hidden resize-none outline-none text-base-content item-center whitespace-pre-wrap bg-white";
|
||||
const selectWidgetCls =
|
||||
"w-full h-full absolute left-0 top-0 border-[1px] border-[#007bff] rounded-[2px] focus:outline-none text-base-content";
|
||||
const widgetCls =
|
||||
"select-none-cls overflow-hidden w-full h-full text-black flex flex-col justify-center items-center";
|
||||
function PlaceholderType(props) {
|
||||
const { t } = useTranslation();
|
||||
const type = props?.pos?.type;
|
||||
const iswidgetEnable =
|
||||
props.isSignYourself ||
|
||||
((props.isSelfSign || props.isNeedSign) &&
|
||||
props.data?.signerObjId === props.signerObjId);
|
||||
const widgetData =
|
||||
props.pos?.options?.defaultValue || props.pos?.options?.response;
|
||||
const widgetTypeTranslation = t(`widgets-name.${props?.pos?.type}`);
|
||||
const inputRef = useRef(null);
|
||||
const [widgetValue, setwidgetValue] = useState();
|
||||
const [selectedCheckbox, setSelectedCheckbox] = useState([]);
|
||||
const [hint, setHint] = useState("");
|
||||
const fontSize = props.calculateFont(props.pos.options?.fontSize);
|
||||
const fontColor = props.pos.options?.fontColor || "black";
|
||||
const textWidgetStyle = {
|
||||
fontSize: fontSize,
|
||||
color: fontColor,
|
||||
fontFamily: "Arial, sans-serif",
|
||||
overflow: "hidden",
|
||||
textAlign: "start",
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
height: "100%"
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (type !== "date") {
|
||||
if (type && type === "checkbox") {
|
||||
setSelectedCheckbox(
|
||||
props?.pos?.options?.response ||
|
||||
props?.pos?.options?.defaultValue ||
|
||||
[]
|
||||
);
|
||||
} else {
|
||||
if (widgetData) {
|
||||
setwidgetValue(widgetData);
|
||||
}
|
||||
}
|
||||
if (props.pos?.options?.hint) {
|
||||
setHint(props.pos?.options.hint);
|
||||
} else if (props.pos?.options?.validation?.type) {
|
||||
checkRegularExpress(props.pos?.options?.validation?.type, setHint);
|
||||
} else {
|
||||
setHint(props.pos?.type);
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [props.pos]);
|
||||
const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (
|
||||
<div
|
||||
style={{
|
||||
fontSize: fontSize,
|
||||
color: fontColor,
|
||||
fontFamily: "Arial, sans-serif"
|
||||
}}
|
||||
className={`${selectWidgetCls} overflow-hidden`}
|
||||
onClick={onClick}
|
||||
ref={ref}
|
||||
>
|
||||
{value}
|
||||
<i className="fa-light fa-calendar ml-[5px]"></i>
|
||||
</div>
|
||||
));
|
||||
ExampleCustomInput.displayName = "ExampleCustomInput";
|
||||
|
||||
const handleRadioCheck = (data) => {
|
||||
const defaultData = props.pos.options?.defaultValue;
|
||||
if (widgetValue === data) {
|
||||
return true;
|
||||
} else if (defaultData === data) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
//handle height on enter press in text area
|
||||
// const handleEnterPress = (e) => {
|
||||
// const height = 18;
|
||||
// if (e.key === "Enter") {
|
||||
// //function to save height of text area
|
||||
// onChangeHeightOfTextArea(
|
||||
// height,
|
||||
// props.pos.type,
|
||||
// props.pos.key,
|
||||
// props.xyPosition,
|
||||
// props.index,
|
||||
// props.setXyPosition,
|
||||
// props.data && props.data?.Id
|
||||
// );
|
||||
// }
|
||||
// };
|
||||
switch (type) {
|
||||
case "signature":
|
||||
return props.pos.SignUrl ? (
|
||||
<img
|
||||
alt="signature"
|
||||
draggable="false"
|
||||
src={props.pos.SignUrl}
|
||||
className="w-full h-full select-none-cls "
|
||||
/>
|
||||
) : (
|
||||
<div className={widgetCls}>
|
||||
{props.pos.type && (
|
||||
<div
|
||||
style={{
|
||||
fontSize: props.pos
|
||||
? props.calculateFontsize(props.pos)
|
||||
: "11px"
|
||||
}}
|
||||
className="font-medium"
|
||||
>
|
||||
{hint || widgetTypeTranslation}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
case "stamp":
|
||||
return props.pos.SignUrl ? (
|
||||
<img
|
||||
alt="stamp"
|
||||
draggable="false"
|
||||
src={props.pos.SignUrl}
|
||||
className="w-full h-full select-none-cls"
|
||||
/>
|
||||
) : (
|
||||
<div className={widgetCls}>
|
||||
{props.pos.type && (
|
||||
<div
|
||||
style={{
|
||||
fontSize: props.pos
|
||||
? props.calculateFontsize(props.pos)
|
||||
: "11px"
|
||||
}}
|
||||
className="font-medium"
|
||||
>
|
||||
{hint || widgetTypeTranslation}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
case "checkbox":
|
||||
return (
|
||||
<div style={{ zIndex: props.isSignYourself && "99" }}>
|
||||
{props.pos.options?.values?.map((data, ind) => {
|
||||
return (
|
||||
<div
|
||||
key={ind}
|
||||
className="select-none-cls flex items-center text-center gap-0.5 pointer-events-none"
|
||||
>
|
||||
<input
|
||||
id={`checkbox-${props.pos.key + ind}`}
|
||||
style={{ width: fontSize, height: fontSize }}
|
||||
className={`${
|
||||
ind === 0 ? "mt-0" : "mt-[5px]"
|
||||
} flex justify-center op-checkbox rounded-[1px] `}
|
||||
disabled={
|
||||
props.isNeedSign &&
|
||||
(props.pos.options?.isReadOnly ||
|
||||
props.data?.signerObjId !== props.signerObjId)
|
||||
}
|
||||
type="checkbox"
|
||||
readOnly
|
||||
checked={!!selectCheckbox(ind, selectedCheckbox)}
|
||||
/>
|
||||
{!props.pos.options?.isHideLabel && (
|
||||
<label
|
||||
htmlFor={`checkbox-${props.pos.key + ind}`}
|
||||
style={{ fontSize: fontSize, color: fontColor }}
|
||||
className="text-xs mb-0 text-center"
|
||||
>
|
||||
{data}
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
case textInputWidget:
|
||||
return props.isSignYourself || iswidgetEnable ? (
|
||||
<textarea
|
||||
ref={inputRef}
|
||||
placeholder={hint || t("widgets-name.text")}
|
||||
rows={1}
|
||||
value={widgetValue}
|
||||
className={`${
|
||||
props.pos.options?.isReadOnly ||
|
||||
props.data?.signerObjId !== props.signerObjId
|
||||
? "select-none"
|
||||
: textWidgetCls
|
||||
}`}
|
||||
style={{
|
||||
fontSize: fontSize,
|
||||
color: fontColor,
|
||||
background: props.data?.blockColor,
|
||||
pointerEvents: "none"
|
||||
}}
|
||||
readOnly
|
||||
disabled={
|
||||
props.isNeedSign &&
|
||||
(props.pos.options?.isReadOnly ||
|
||||
props.data?.signerObjId !== props.signerObjId)
|
||||
}
|
||||
cols="50"
|
||||
/>
|
||||
) : (
|
||||
<div style={textWidgetStyle} className="select-none-cls">
|
||||
<span>{hint || widgetTypeTranslation}</span>
|
||||
</div>
|
||||
);
|
||||
case "dropdown":
|
||||
return (
|
||||
<div
|
||||
style={textWidgetStyle}
|
||||
className="select-none-cls flex justify-between items-center"
|
||||
>
|
||||
{widgetData || hint || widgetTypeTranslation}
|
||||
<i className="fa-light fa-circle-chevron-down mr-1 "></i>
|
||||
</div>
|
||||
);
|
||||
|
||||
case "initials":
|
||||
return props.pos.SignUrl ? (
|
||||
<img
|
||||
alt="initials"
|
||||
draggable="false"
|
||||
src={props.pos.SignUrl}
|
||||
className="w-full h-full select-none-cls"
|
||||
/>
|
||||
) : (
|
||||
<div className={widgetCls}>
|
||||
{props.pos.type && (
|
||||
<div
|
||||
style={{
|
||||
fontSize: props.pos
|
||||
? props.calculateFontsize(props.pos)
|
||||
: "11px"
|
||||
}}
|
||||
className="font-medium text-center"
|
||||
>
|
||||
{hint || widgetTypeTranslation}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
case "name":
|
||||
return iswidgetEnable ? (
|
||||
<textarea
|
||||
readOnly
|
||||
ref={inputRef}
|
||||
placeholder={hint || widgetTypeTranslation}
|
||||
rows={1}
|
||||
value={widgetValue}
|
||||
className={textWidgetCls}
|
||||
style={{
|
||||
fontSize: fontSize,
|
||||
color: fontColor,
|
||||
pointerEvents: "none"
|
||||
}}
|
||||
cols="50"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-full select-none-cls" style={textWidgetStyle}>
|
||||
<span> {props.pos?.options?.hint || widgetTypeTranslation}</span>
|
||||
</div>
|
||||
);
|
||||
case "company":
|
||||
return iswidgetEnable ? (
|
||||
<textarea
|
||||
readOnly
|
||||
ref={inputRef}
|
||||
placeholder={hint || widgetTypeTranslation}
|
||||
rows={1}
|
||||
value={widgetValue}
|
||||
className={textWidgetCls}
|
||||
style={{
|
||||
fontSize: fontSize,
|
||||
color: fontColor,
|
||||
pointerEvents: "none"
|
||||
}}
|
||||
cols="50"
|
||||
/>
|
||||
) : (
|
||||
<div style={textWidgetStyle} className="select-none-cls">
|
||||
<span>{hint || widgetTypeTranslation}</span>
|
||||
</div>
|
||||
);
|
||||
case "job title":
|
||||
return iswidgetEnable ? (
|
||||
<textarea
|
||||
readOnly
|
||||
ref={inputRef}
|
||||
placeholder={hint || widgetTypeTranslation}
|
||||
rows={1}
|
||||
value={widgetValue}
|
||||
className={textWidgetCls}
|
||||
style={{
|
||||
fontSize: fontSize,
|
||||
color: fontColor,
|
||||
pointerEvents: "none"
|
||||
}}
|
||||
cols="50"
|
||||
/>
|
||||
) : (
|
||||
<div style={textWidgetStyle} className="select-none-cls">
|
||||
<span>{hint || widgetTypeTranslation}</span>
|
||||
</div>
|
||||
);
|
||||
case "date":
|
||||
return iswidgetEnable ? (
|
||||
<DatePicker
|
||||
renderCustomHeader={({ date, changeYear, changeMonth }) => (
|
||||
<div className="flex justify-start ml-2 ">
|
||||
<select
|
||||
className="bg-transparent outline-none"
|
||||
value={months[getMonth(date)]}
|
||||
onChange={({ target: { value } }) =>
|
||||
changeMonth(months.indexOf(value))
|
||||
}
|
||||
>
|
||||
{months.map((option) => (
|
||||
<option key={option} value={option}>
|
||||
{option}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
className="bg-transparent outline-none"
|
||||
value={getYear(date)}
|
||||
onChange={({ target: { value } }) => changeYear(value)}
|
||||
>
|
||||
{years.map((option) => (
|
||||
<option key={option} value={option}>
|
||||
{option}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
disabled={true}
|
||||
closeOnScroll={true}
|
||||
className={`${selectWidgetCls} outline-[#007bff]`}
|
||||
selected={props?.startDate}
|
||||
popperPlacement="top-end"
|
||||
customInput={<ExampleCustomInput />}
|
||||
dateFormat={
|
||||
props.selectDate
|
||||
? props.selectDate?.format
|
||||
: props.pos?.options?.validation?.format
|
||||
? props.pos?.options?.validation?.format
|
||||
: "MM/dd/yyyy"
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
style={textWidgetStyle}
|
||||
className="select-none-cls overflow-hidden"
|
||||
>
|
||||
<span>
|
||||
{props.selectDate
|
||||
? props.selectDate?.format
|
||||
: props.pos?.options?.validation?.format
|
||||
? props.pos?.options?.validation?.format
|
||||
: "MM/dd/yyyy"}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
case "image":
|
||||
return props.pos.SignUrl ? (
|
||||
<img
|
||||
alt="image"
|
||||
draggable="false"
|
||||
src={props.pos.SignUrl}
|
||||
className="w-full h-full select-none-cls"
|
||||
/>
|
||||
) : (
|
||||
<div className={widgetCls}>
|
||||
{props.pos.type && (
|
||||
<div
|
||||
style={{
|
||||
fontSize: props.pos
|
||||
? props.calculateFontsize(props.pos)
|
||||
: "11px"
|
||||
}}
|
||||
className="font-medium text-center"
|
||||
>
|
||||
{hint || widgetTypeTranslation}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
case "email":
|
||||
return iswidgetEnable ? (
|
||||
<textarea
|
||||
readOnly
|
||||
ref={inputRef}
|
||||
placeholder={hint || widgetTypeTranslation}
|
||||
rows={1}
|
||||
value={widgetValue}
|
||||
className={textWidgetCls}
|
||||
style={{
|
||||
fontSize: fontSize,
|
||||
color: fontColor,
|
||||
fontFamily: "Arial, sans-serif",
|
||||
pointerEvents: "none"
|
||||
}}
|
||||
disabled
|
||||
cols="1"
|
||||
/>
|
||||
) : (
|
||||
<div style={textWidgetStyle} className="select-none-cls">
|
||||
<span>{hint || widgetTypeTranslation}</span>
|
||||
</div>
|
||||
);
|
||||
case radioButtonWidget:
|
||||
return (
|
||||
<div>
|
||||
{props.pos.options?.values.map((data, ind) => {
|
||||
return (
|
||||
<div
|
||||
key={ind}
|
||||
className="select-none-cls flex items-center text-center gap-0.5 pointer-events-none"
|
||||
>
|
||||
<input
|
||||
readOnly
|
||||
id={`radio-${props.pos.key + ind}`}
|
||||
style={{
|
||||
width: fontSize,
|
||||
height: fontSize,
|
||||
marginTop: ind > 0 ? "10px" : "0px"
|
||||
}}
|
||||
className={`op-radio rounded-full border- border-black appearance-none bg-white inline-block align-middle relative ${
|
||||
handleRadioCheck(data) ? "checked-radio" : ""
|
||||
}`}
|
||||
type="radio"
|
||||
disabled={
|
||||
props.isNeedSign &&
|
||||
(props.pos.options?.isReadOnly ||
|
||||
props.data?.signerObjId !== props.signerObjId)
|
||||
}
|
||||
checked={handleRadioCheck(data)}
|
||||
/>
|
||||
{!props.pos.options?.isHideLabel && (
|
||||
<label
|
||||
htmlFor={`radio-${props.pos.key + ind}`}
|
||||
style={{ fontSize: fontSize, color: fontColor }}
|
||||
className="text-xs mb-0"
|
||||
>
|
||||
{data}
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
case textWidget:
|
||||
return (
|
||||
<textarea
|
||||
readOnly
|
||||
placeholder={t("widgets-name.text")}
|
||||
rows={1}
|
||||
value={widgetValue}
|
||||
className={textWidgetCls}
|
||||
style={{
|
||||
fontFamily: "Arial, sans-serif",
|
||||
fontSize: fontSize,
|
||||
color: fontColor
|
||||
}}
|
||||
cols="50"
|
||||
/>
|
||||
);
|
||||
default:
|
||||
return props.pos.SignUrl ? (
|
||||
<div className="pointer-events-none">
|
||||
<img
|
||||
alt="image"
|
||||
draggable="false"
|
||||
src={props.pos.SignUrl}
|
||||
className="w-full h-full "
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className={widgetCls}>
|
||||
{props.pos.isStamp ? <div>stamp</div> : <div>signature</div>}
|
||||
{props.pos.type && (
|
||||
<div
|
||||
style={{
|
||||
fontSize: props.pos
|
||||
? props.calculateFontsize(props.pos)
|
||||
: "11px"
|
||||
}}
|
||||
className="font-medium"
|
||||
>
|
||||
{hint || widgetTypeTranslation}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default PlaceholderType;
|
||||
+18
-46
@@ -95,15 +95,12 @@ function RenderPdf(props) {
|
||||
return (
|
||||
<React.Fragment key={key}>
|
||||
{placeData.pageNumber === props.pageNumber &&
|
||||
placeData.pos.map((pos) => {
|
||||
placeData.pos.map((pos, ind) => {
|
||||
return (
|
||||
pos && (
|
||||
<React.Fragment key={pos.key}>
|
||||
<React.Fragment key={ind}>
|
||||
<Placeholder
|
||||
pos={pos}
|
||||
setSignKey={props.setSignKey}
|
||||
setIsSignPad={props.setIsSignPad}
|
||||
setIsStamp={props.setIsStamp}
|
||||
handleSignYourselfImageResize={handleImageResize}
|
||||
index={props.pageNumber}
|
||||
xyPosition={props.signerPos}
|
||||
@@ -121,11 +118,7 @@ function RenderPdf(props) {
|
||||
posHeight={posHeight}
|
||||
isDragging={props.isDragging}
|
||||
pdfDetails={props.pdfDetails}
|
||||
setIsInitial={props.setIsInitial}
|
||||
setValidateAlert={props.setValidateAlert}
|
||||
unSignedWidgetId={props.unSignedWidgetId}
|
||||
setSelectWidgetId={props.setSelectWidgetId}
|
||||
selectWidgetId={props.selectWidgetId}
|
||||
setCurrWidgetsDetails={props.setCurrWidgetsDetails}
|
||||
uniqueId={props.uniqueId}
|
||||
scale={props.scale}
|
||||
@@ -139,7 +132,6 @@ function RenderPdf(props) {
|
||||
isAgree={props.isAgree}
|
||||
handleTabDrag={props.handleTabDrag}
|
||||
handleStop={props.handleStop}
|
||||
setWidgetType={props.setWidgetType}
|
||||
setUniqueId={props.setUniqueId}
|
||||
setIsSelectId={props.setIsSelectId}
|
||||
handleDeleteSign={props.handleDeleteSign}
|
||||
@@ -156,6 +148,8 @@ function RenderPdf(props) {
|
||||
setFontColor={props.setFontColor}
|
||||
setRequestSignTour={props.setRequestSignTour}
|
||||
calculateFontsize={calculateFontsize}
|
||||
currWidgetsDetails={props?.currWidgetsDetails}
|
||||
setTempSignerId={props.setTempSignerId}
|
||||
/>
|
||||
</React.Fragment>
|
||||
)
|
||||
@@ -241,11 +235,9 @@ function RenderPdf(props) {
|
||||
<Placeholder
|
||||
pos={pos}
|
||||
setIsPageCopy={props.setIsPageCopy}
|
||||
setSignKey={props.setSignKey}
|
||||
handleDeleteSign={
|
||||
props.handleDeleteSign
|
||||
}
|
||||
setIsStamp={props.setIsStamp}
|
||||
handleTabDrag={props.handleTabDrag}
|
||||
handleStop={props.handleStop}
|
||||
handleSignYourselfImageResize={
|
||||
@@ -270,18 +262,11 @@ function RenderPdf(props) {
|
||||
posHeight={posHeight}
|
||||
isDragging={props.isDragging}
|
||||
setIsValidate={props.setIsValidate}
|
||||
setWidgetType={props.setWidgetType}
|
||||
setIsRadio={props.setIsRadio}
|
||||
setIsCheckbox={props.setIsCheckbox}
|
||||
setCurrWidgetsDetails={
|
||||
props.setCurrWidgetsDetails
|
||||
}
|
||||
setSelectWidgetId={
|
||||
props.setSelectWidgetId
|
||||
}
|
||||
selectWidgetId={
|
||||
props.selectWidgetId
|
||||
}
|
||||
handleNameModal={
|
||||
props.handleNameModal
|
||||
}
|
||||
@@ -309,6 +294,9 @@ function RenderPdf(props) {
|
||||
calculateFontsize={
|
||||
calculateFontsize
|
||||
}
|
||||
currWidgetsDetails={
|
||||
props?.currWidgetsDetails
|
||||
}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
@@ -331,9 +319,7 @@ function RenderPdf(props) {
|
||||
key={id}
|
||||
pos={pos}
|
||||
setIsPageCopy={props.setIsPageCopy}
|
||||
setSignKey={props.setSignKey}
|
||||
handleDeleteSign={props.handleDeleteSign}
|
||||
setIsStamp={props.setIsStamp}
|
||||
handleTabDrag={props.handleTabDrag}
|
||||
handleStop={props.handleStop}
|
||||
handleSignYourselfImageResize={
|
||||
@@ -343,19 +329,13 @@ function RenderPdf(props) {
|
||||
xyPosition={props.xyPosition}
|
||||
setXyPosition={props.setXyPosition}
|
||||
containerWH={props.containerWH}
|
||||
setIsSignPad={props.setIsSignPad}
|
||||
isShowBorder={true}
|
||||
isSignYourself={true}
|
||||
posWidth={posWidth}
|
||||
posHeight={posHeight}
|
||||
pdfDetails={props.pdfDetails[0]}
|
||||
isDragging={props.isDragging}
|
||||
setIsInitial={props.setIsInitial}
|
||||
setWidgetType={props.setWidgetType}
|
||||
setSelectWidgetId={props.setSelectWidgetId}
|
||||
selectWidgetId={props.selectWidgetId}
|
||||
setIsCheckbox={props.setIsCheckbox}
|
||||
setValidateAlert={props.setValidateAlert}
|
||||
setCurrWidgetsDetails={
|
||||
props.setCurrWidgetsDetails
|
||||
}
|
||||
@@ -374,6 +354,9 @@ function RenderPdf(props) {
|
||||
isFreeResize={false}
|
||||
isOpenSignPad={true}
|
||||
calculateFontsize={calculateFontsize}
|
||||
currWidgetsDetails={
|
||||
props?.currWidgetsDetails
|
||||
}
|
||||
/>
|
||||
)
|
||||
);
|
||||
@@ -388,7 +371,7 @@ function RenderPdf(props) {
|
||||
loading={t("loading-doc")}
|
||||
onLoadSuccess={props.pageDetails}
|
||||
onClick={() =>
|
||||
props.setSelectWidgetId && props.setSelectWidgetId("")
|
||||
props.setCurrWidgetsDetails && props.setCurrWidgetsDetails({})
|
||||
}
|
||||
file={pdfDataBase64}
|
||||
>
|
||||
@@ -454,11 +437,9 @@ function RenderPdf(props) {
|
||||
<Placeholder
|
||||
pos={pos}
|
||||
setIsPageCopy={props.setIsPageCopy}
|
||||
setSignKey={props.setSignKey}
|
||||
handleDeleteSign={
|
||||
props.handleDeleteSign
|
||||
}
|
||||
setIsStamp={props.setIsStamp}
|
||||
handleTabDrag={props.handleTabDrag}
|
||||
handleStop={props.handleStop}
|
||||
handleSignYourselfImageResize={
|
||||
@@ -483,18 +464,11 @@ function RenderPdf(props) {
|
||||
posHeight={posHeight}
|
||||
isDragging={props.isDragging}
|
||||
setIsValidate={props.setIsValidate}
|
||||
setWidgetType={props.setWidgetType}
|
||||
setIsRadio={props.setIsRadio}
|
||||
setIsCheckbox={props.setIsCheckbox}
|
||||
setCurrWidgetsDetails={
|
||||
props.setCurrWidgetsDetails
|
||||
}
|
||||
setSelectWidgetId={
|
||||
props.setSelectWidgetId
|
||||
}
|
||||
selectWidgetId={
|
||||
props.selectWidgetId
|
||||
}
|
||||
handleNameModal={
|
||||
props.handleNameModal
|
||||
}
|
||||
@@ -522,6 +496,9 @@ function RenderPdf(props) {
|
||||
calculateFontsize={
|
||||
calculateFontsize
|
||||
}
|
||||
currWidgetsDetails={
|
||||
props?.currWidgetsDetails
|
||||
}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
@@ -544,9 +521,7 @@ function RenderPdf(props) {
|
||||
<Placeholder
|
||||
pos={pos}
|
||||
setIsPageCopy={props.setIsPageCopy}
|
||||
setSignKey={props.setSignKey}
|
||||
handleDeleteSign={props.handleDeleteSign}
|
||||
setIsStamp={props.setIsStamp}
|
||||
handleTabDrag={props.handleTabDrag}
|
||||
handleStop={(event, dragElement) =>
|
||||
props.handleStop(
|
||||
@@ -561,19 +536,13 @@ function RenderPdf(props) {
|
||||
index={props.index}
|
||||
xyPosition={props.xyPosition}
|
||||
setXyPosition={props.setXyPosition}
|
||||
setIsSignPad={props.setIsSignPad}
|
||||
isShowBorder={true}
|
||||
isSignYourself={true}
|
||||
posWidth={posWidth}
|
||||
posHeight={posHeight}
|
||||
pdfDetails={props.pdfDetails[0]}
|
||||
isDragging={props.isDragging}
|
||||
setIsInitial={props.setIsInitial}
|
||||
setWidgetType={props.setWidgetType}
|
||||
setSelectWidgetId={props.setSelectWidgetId}
|
||||
selectWidgetId={props.selectWidgetId}
|
||||
setIsCheckbox={props.setIsCheckbox}
|
||||
setValidateAlert={props.setValidateAlert}
|
||||
setCurrWidgetsDetails={
|
||||
props.setCurrWidgetsDetails
|
||||
}
|
||||
@@ -593,6 +562,9 @@ function RenderPdf(props) {
|
||||
isFreeResize={false}
|
||||
isOpenSignPad={true}
|
||||
calculateFontsize={calculateFontsize}
|
||||
currWidgetsDetails={
|
||||
props?.currWidgetsDetails
|
||||
}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
@@ -608,7 +580,7 @@ function RenderPdf(props) {
|
||||
loading={t("loading-doc")}
|
||||
onLoadSuccess={props.pageDetails}
|
||||
onClick={() =>
|
||||
props.setSelectWidgetId && props.setSelectWidgetId("")
|
||||
props.setCurrWidgetsDetails && props.setCurrWidgetsDetails({})
|
||||
}
|
||||
file={pdfDataBase64}
|
||||
>
|
||||
@@ -1,882 +0,0 @@
|
||||
import React, { useRef, useState, useEffect } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import SignatureCanvas from "react-signature-canvas";
|
||||
import Parse from "parse";
|
||||
import {
|
||||
generateTitleFromFilename,
|
||||
getBase64FromUrl,
|
||||
getSecureUrl
|
||||
} from "../../constant/Utils";
|
||||
import sanitizeFileName from "../../primitives/sanitizeFileName";
|
||||
import { SaveFileSize } from "../../constant/saveFileSize";
|
||||
import Loader from "../../primitives/Loader";
|
||||
|
||||
function SignPad(props) {
|
||||
const { t } = useTranslation();
|
||||
const [penColor, setPenColor] = useState("blue");
|
||||
const allColor = ["blue", "red", "black"];
|
||||
const canvasRef = useRef(null);
|
||||
const [isDefaultSign, setIsDefaultSign] = useState(false);
|
||||
const [isTab, setIsTab] = useState("");
|
||||
const [isSignImg, setIsSignImg] = useState("");
|
||||
const [textWidth, setTextWidth] = useState(0);
|
||||
const [textHeight, setTextHeight] = useState(0);
|
||||
const [signatureType, setSignatureType] = useState("");
|
||||
const [isSignTypes, setIsSignTypes] = useState(true);
|
||||
const [typedSignature, setTypedSignature] = useState("");
|
||||
const fontOptions = [
|
||||
{ value: "Fasthand" },
|
||||
{ value: "Dancing Script" },
|
||||
{ value: "Cedarville Cursive" },
|
||||
{ value: "Delicious Handrawn" }
|
||||
// Add more font options as needed
|
||||
];
|
||||
const [fontSelect, setFontSelect] = useState(fontOptions[0].value);
|
||||
const [isSavedSign, setIsSavedSign] = useState(false);
|
||||
const [isLoader, setIsLoader] = useState(false);
|
||||
const accesstoken = localStorage.getItem("accesstoken") || "";
|
||||
const senderUser = localStorage.getItem(
|
||||
`Parse/${localStorage.getItem("parseAppId")}/currentUser`
|
||||
);
|
||||
const jsonSender = senderUser && JSON.parse(senderUser);
|
||||
const currentUserName = jsonSender && jsonSender?.name;
|
||||
useEffect(() => {
|
||||
handleTab();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [props.signatureTypes]);
|
||||
function handleTab() {
|
||||
const signtypes = props?.signatureTypes || [];
|
||||
const defaultIndex = signtypes?.findIndex(
|
||||
(x) =>
|
||||
x.name === "default" &&
|
||||
x.enabled === true &&
|
||||
props.defaultSign &&
|
||||
(props?.currWidgetsDetails?.type || props.widgetType) !== "image" &&
|
||||
(props?.currWidgetsDetails?.type || props.widgetType) !== "stamp"
|
||||
);
|
||||
const getIndex =
|
||||
defaultIndex !== -1 // Check if the default index exists
|
||||
? defaultIndex // If found, use it
|
||||
: signtypes?.findIndex((x) => x.enabled === true);
|
||||
|
||||
if (getIndex !== -1) {
|
||||
setIsSignTypes(true);
|
||||
const tab = props?.signatureTypes[getIndex].name;
|
||||
if (tab === "draw") {
|
||||
setIsTab("draw");
|
||||
setSignatureType("draw");
|
||||
} else if (tab === "upload") {
|
||||
props?.setIsImageSelect(true);
|
||||
setIsTab("uploadImage");
|
||||
} else if (tab === "typed") {
|
||||
setIsTab("type");
|
||||
} else if (tab === "default") {
|
||||
if (
|
||||
(props?.isInitial && props?.myInitial) ||
|
||||
(!props?.isInitial && props?.defaultSign)
|
||||
) {
|
||||
setIsDefaultSign(true);
|
||||
setIsTab("mysignature");
|
||||
} else {
|
||||
setIsTab("draw");
|
||||
}
|
||||
} else {
|
||||
setIsTab(true);
|
||||
}
|
||||
} else {
|
||||
setIsSignTypes(false);
|
||||
}
|
||||
}
|
||||
function isTabEnabled(tabName) {
|
||||
const isEnabled = props?.signatureTypes.find(
|
||||
(x) => x.name === tabName
|
||||
)?.enabled;
|
||||
return isEnabled;
|
||||
}
|
||||
|
||||
//function for clear signature image
|
||||
const handleClear = () => {
|
||||
if (isTab === "draw") {
|
||||
if (canvasRef.current) {
|
||||
canvasRef.current.clear();
|
||||
} else if (props?.isStamp) {
|
||||
props?.setImage("");
|
||||
}
|
||||
setIsSignImg("");
|
||||
} else if (isTab === "uploadImage") {
|
||||
props?.setImage("");
|
||||
}
|
||||
};
|
||||
//function for set signature url
|
||||
const handleSignatureChange = (data) => {
|
||||
props?.setSignature(data);
|
||||
setIsSignImg(data);
|
||||
};
|
||||
function base64StringtoFile(base64String, filename) {
|
||||
let arr = base64String.split(","),
|
||||
// type of uploaded image
|
||||
mime = arr[0].match(/:(.*?);/)[1],
|
||||
// decode base64
|
||||
bstr = atob(arr[1]),
|
||||
n = bstr.length,
|
||||
u8arr = new Uint8Array(n);
|
||||
while (n--) {
|
||||
u8arr[n] = bstr.charCodeAt(n);
|
||||
}
|
||||
const ext = mime.split("/").pop();
|
||||
const name = `${filename}.${ext}`;
|
||||
return new File([u8arr], name, { type: mime });
|
||||
}
|
||||
|
||||
const uploadFile = async (file) => {
|
||||
try {
|
||||
const parseFile = new Parse.File(file.name, file);
|
||||
const response = await parseFile.save();
|
||||
if (response?.url()) {
|
||||
const fileRes = await getSecureUrl(response.url());
|
||||
if (fileRes.url) {
|
||||
const tenantId = localStorage.getItem("TenantId");
|
||||
SaveFileSize(file.size, fileRes.url, tenantId);
|
||||
return fileRes?.url;
|
||||
} else {
|
||||
alert(`${t("something-went-wrong-mssg")}`);
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
alert(`${t("something-went-wrong-mssg")}`);
|
||||
return false;
|
||||
}
|
||||
} catch (err) {
|
||||
console.log("sign upload err", err);
|
||||
alert(`${err.message}`);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
// `handlesavesign` is used to save signaute, initials, stamp as a default
|
||||
const handleSaveSign = async () => {
|
||||
if (isSignImg || props?.image?.src) {
|
||||
setIsLoader(true);
|
||||
try {
|
||||
const User = Parse?.User?.current();
|
||||
const sanitizename = generateTitleFromFilename(User?.get("name"));
|
||||
const replaceSpace = sanitizeFileName(sanitizename);
|
||||
let file;
|
||||
if (isSignImg) {
|
||||
file = base64StringtoFile(isSignImg, `${replaceSpace}__sign`);
|
||||
} else {
|
||||
file = base64StringtoFile(props?.image?.src, `${replaceSpace}__sign`);
|
||||
}
|
||||
const imageUrl = await uploadFile(file);
|
||||
const userId = {
|
||||
__type: "Pointer",
|
||||
className: "_User",
|
||||
objectId: User?.id
|
||||
};
|
||||
if (imageUrl) {
|
||||
// below code is used to save or update default signaute, initials, stamp
|
||||
try {
|
||||
const signCls = new Parse.Object("contracts_Signature");
|
||||
if (props?.saveSignCheckbox?.signId) {
|
||||
signCls.id = props.saveSignCheckbox.signId;
|
||||
}
|
||||
if (
|
||||
props.currWidgetsDetails?.type === "initials" ||
|
||||
props?.widgetType === "initials"
|
||||
) {
|
||||
signCls.set("Initials", imageUrl);
|
||||
} else if (
|
||||
props.currWidgetsDetails?.type === "signature" ||
|
||||
props?.widgetType === "signature"
|
||||
) {
|
||||
signCls.set("ImageURL", imageUrl);
|
||||
}
|
||||
signCls.set("UserId", userId);
|
||||
const signRes = await signCls.save();
|
||||
if (signRes) {
|
||||
props.saveSignCheckbox.signId;
|
||||
props.setSaveSignCheckbox((prev) => ({
|
||||
...prev,
|
||||
signId: signRes?.id
|
||||
}));
|
||||
const _signRes = JSON.parse(JSON.stringify(signRes));
|
||||
if (
|
||||
props.currWidgetsDetails?.type === "signature" ||
|
||||
props?.widgetType === "signature"
|
||||
) {
|
||||
const defaultSign = await getBase64FromUrl(
|
||||
_signRes?.ImageURL,
|
||||
true
|
||||
);
|
||||
props.setDefaultSignImg(defaultSign);
|
||||
} else if (
|
||||
props.currWidgetsDetails?.type === "initials" ||
|
||||
props?.widgetType === "initials"
|
||||
) {
|
||||
const defaultInitials = await getBase64FromUrl(
|
||||
_signRes?.Initials,
|
||||
true
|
||||
);
|
||||
props.setMyInitial(defaultInitials);
|
||||
}
|
||||
alert(t("saved-successfully"));
|
||||
}
|
||||
return signRes;
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
alert(`${err.message}`);
|
||||
} finally {
|
||||
setIsLoader(false);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.log("Err while saving signature", err);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveBtn = async () => {
|
||||
if (accesstoken && isSavedSign) {
|
||||
await handleSaveSign();
|
||||
resetToDefault();
|
||||
} else {
|
||||
resetToDefault();
|
||||
}
|
||||
};
|
||||
const resetToDefault = () => {
|
||||
props?.setCurrWidgetsDetails({});
|
||||
if (!props?.image) {
|
||||
if (isTab === "mysignature") {
|
||||
setIsSignImg("");
|
||||
if (props?.isInitial) {
|
||||
props?.onSaveSign(signatureType, "initials");
|
||||
} else {
|
||||
props?.onSaveSign(null, "default");
|
||||
}
|
||||
} else {
|
||||
if (isTab === "type") {
|
||||
setIsSignImg("");
|
||||
props?.onSaveSign(
|
||||
null,
|
||||
false,
|
||||
!props?.isInitial && textWidth > 150 ? 150 : textWidth,
|
||||
!props?.isInitial && textHeight > 35 ? 35 : textHeight,
|
||||
typedSignature
|
||||
);
|
||||
} else {
|
||||
setIsSignImg("");
|
||||
canvasRef.current.clear();
|
||||
props?.onSaveSign(signatureType);
|
||||
}
|
||||
}
|
||||
setPenColor("blue");
|
||||
} else {
|
||||
setIsSignImg("");
|
||||
props?.onSaveImage(signatureType);
|
||||
}
|
||||
props?.setIsSignPad(false);
|
||||
props?.setIsInitial && props?.setIsInitial(false);
|
||||
props?.setIsImageSelect(false);
|
||||
setIsDefaultSign(false);
|
||||
props?.setImage();
|
||||
handleTab();
|
||||
props?.setIsStamp(false);
|
||||
};
|
||||
//save button component
|
||||
const SaveBtn = () => {
|
||||
return (
|
||||
<div>
|
||||
{(isTab === "draw" || isTab === "uploadImage") && (
|
||||
<button
|
||||
type="button"
|
||||
className="op-btn op-btn-ghost mr-1 mt-[2px]"
|
||||
onClick={() => handleClear()}
|
||||
>
|
||||
{t("clear")}
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => handleSaveBtn()}
|
||||
type="button"
|
||||
className={`${
|
||||
isSignImg ||
|
||||
props?.image ||
|
||||
isDefaultSign ||
|
||||
textWidth ||
|
||||
props.isAutoSign
|
||||
? ""
|
||||
: "pointer-events-none"
|
||||
} op-btn op-btn-primary shadow-lg`}
|
||||
disabled={
|
||||
(isTab === "draw" && isSignImg) ||
|
||||
(isTab === "image" && props?.image) ||
|
||||
(isTab === "mysignature" && isDefaultSign) ||
|
||||
(isTab === "type" && typedSignature) ||
|
||||
props.isAutoSign
|
||||
? false
|
||||
: props?.image
|
||||
? false
|
||||
: true
|
||||
}
|
||||
>
|
||||
{t("save")}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
const autoSignAll = () => {
|
||||
return (
|
||||
<label className="cursor-pointer flex items-center mb-[6px] text-center text-[11px] md:text-base">
|
||||
<input
|
||||
className="mr-2 md:mr-3 op-checkbox op-checkbox-xs md:op-checkbox-sm"
|
||||
type="checkbox"
|
||||
value={props.isAutoSign}
|
||||
onChange={(e) => {
|
||||
props.setIsAutoSign(e.target.checked);
|
||||
}}
|
||||
/>
|
||||
{t("auto-sign-mssg")}
|
||||
</label>
|
||||
);
|
||||
};
|
||||
//useEffect for set already draw or save signature url/text url of signature text type and draw type for initial type and signature type widgets
|
||||
useEffect(() => {
|
||||
if (props?.currWidgetsDetails && canvasRef.current && props.isSignPad) {
|
||||
const isWidgetType = props?.currWidgetsDetails?.type;
|
||||
const signatureType = props?.currWidgetsDetails?.signatureType;
|
||||
const url = props?.currWidgetsDetails?.SignUrl;
|
||||
//checking widget type and draw type signature url
|
||||
if (props?.isInitial) {
|
||||
if (isWidgetType === "initials" && signatureType === "draw" && url) {
|
||||
canvasRef.current.fromDataURL(url);
|
||||
}
|
||||
} else if (
|
||||
isWidgetType === "signature" &&
|
||||
signatureType === "draw" &&
|
||||
url
|
||||
) {
|
||||
canvasRef.current.fromDataURL(url);
|
||||
}
|
||||
|
||||
const trimmedName = currentUserName && currentUserName?.trim();
|
||||
const firstCharacter = trimmedName?.charAt(0);
|
||||
const userName = props?.isInitial ? firstCharacter : currentUserName;
|
||||
const signatureValue = props?.currWidgetsDetails?.typeSignature;
|
||||
setTypedSignature(signatureValue || userName || "");
|
||||
setFontSelect("Fasthand");
|
||||
}
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [props.isSignPad]);
|
||||
useEffect(() => {
|
||||
const loadFont = async () => {
|
||||
try {
|
||||
await document.fonts.load(`20px ${fontSelect}`);
|
||||
const selectFontSTyle = fontOptions.find(
|
||||
(font) => font.value === fontSelect
|
||||
);
|
||||
setFontSelect(selectFontSTyle?.value || fontOptions[0].value);
|
||||
} catch (error) {
|
||||
console.error("Error loading font:", error);
|
||||
}
|
||||
};
|
||||
|
||||
loadFont();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [fontSelect]);
|
||||
useEffect(() => {
|
||||
// Load the default signature after the component mounts
|
||||
if (canvasRef.current) {
|
||||
canvasRef.current.fromDataURL(isSignImg);
|
||||
}
|
||||
if (isTab === "type") {
|
||||
const trimmedName = typedSignature
|
||||
? typedSignature?.trim()
|
||||
: currentUserName?.trim();
|
||||
const firstCharacter = trimmedName?.charAt(0);
|
||||
const userName = props?.isInitial ? firstCharacter : typedSignature;
|
||||
const signatureValue = props?.currWidgetsDetails?.typeSignature;
|
||||
setTypedSignature(signatureValue || userName || "");
|
||||
convertToImg(fontSelect, userName);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isTab]);
|
||||
//function for convert input text value in image
|
||||
const convertToImg = async (fontStyle, text, color) => {
|
||||
//get text content to convert in image
|
||||
const textContent = text;
|
||||
const fontfamily = fontStyle
|
||||
? fontStyle
|
||||
: fontSelect
|
||||
? fontSelect
|
||||
: "Fasthand";
|
||||
const fontSizeValue = "40px";
|
||||
//creating span for getting text content width
|
||||
const span = document.createElement("span");
|
||||
span.textContent = textContent;
|
||||
span.style.font = `${fontSizeValue} ${fontfamily}`; // here put your text size and font family
|
||||
span.style.color = color ? color : penColor;
|
||||
span.style.display = "hidden";
|
||||
document.body.appendChild(span); // Replace 'container' with the ID of the container element
|
||||
|
||||
//create canvas to render text in canvas and convert in image
|
||||
const canvasElement = document.createElement("canvas");
|
||||
// Draw the text content on the canvas
|
||||
const ctx = canvasElement.getContext("2d");
|
||||
const pixelRatio = window.devicePixelRatio || 1;
|
||||
const addExtraWidth = props?.isInitial ? 10 : 50;
|
||||
const width = span.offsetWidth + addExtraWidth;
|
||||
const height = span.offsetHeight;
|
||||
setTextWidth(width);
|
||||
setTextHeight(height);
|
||||
const font = span.style["font"];
|
||||
// Set the canvas dimensions to match the span
|
||||
canvasElement.width = width * pixelRatio;
|
||||
canvasElement.height = height * pixelRatio;
|
||||
|
||||
// You can customize text styles if needed
|
||||
ctx.font = font;
|
||||
ctx.fillStyle = color ? color : penColor; // Set the text color
|
||||
ctx.textAlign = "center";
|
||||
ctx.textBaseline = "middle";
|
||||
ctx.scale(pixelRatio, pixelRatio);
|
||||
// Draw the content of the span onto the canvas
|
||||
ctx.fillText(span.textContent, width / 2, height / 2); // Adjust the x,y-coordinate as needed
|
||||
//remove span tag
|
||||
document.body.removeChild(span);
|
||||
// Convert the canvas to image data
|
||||
const dataUrl = canvasElement.toDataURL("image/png");
|
||||
props?.setSignature(dataUrl);
|
||||
};
|
||||
const PenColorComponent = (props) => {
|
||||
return (
|
||||
<div className="flex flex-row items-center m-[5px] gap-2">
|
||||
{allColor.map((data, key) => {
|
||||
return (
|
||||
<i
|
||||
key={key}
|
||||
onClick={() => {
|
||||
props?.convertToImg &&
|
||||
props?.convertToImg(fontSelect, typedSignature, data);
|
||||
setPenColor(allColor[key]);
|
||||
}}
|
||||
className={`border-b-[2px] ${
|
||||
key === 0 && penColor === "blue"
|
||||
? "border-blue-600"
|
||||
: key === 1 && penColor === "red"
|
||||
? "border-red-500"
|
||||
: key === 2 && penColor === "black"
|
||||
? "border-black"
|
||||
: "border-white"
|
||||
} text-[${data}] text-[16px] fa-light fa-pen-nib`}
|
||||
></i>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// `handleCancelBtn` function trigger when user click on cross button
|
||||
const handleCancelBtn = () => {
|
||||
setPenColor("blue");
|
||||
props?.setIsSignPad(false);
|
||||
props?.setIsInitial && props?.setIsInitial(false);
|
||||
props?.setIsImageSelect(false);
|
||||
setIsDefaultSign(false);
|
||||
props?.setImage();
|
||||
handleTab();
|
||||
props?.setIsStamp(false);
|
||||
};
|
||||
|
||||
const savesigncheckbox = (
|
||||
<label className="cursor-pointer flex items-center mb-0 text-center text-[11px] md:text-base">
|
||||
<input
|
||||
className="mr-2 md:mr-3 op-checkbox op-checkbox-xs md:op-checkbox-sm"
|
||||
type="checkbox"
|
||||
checked={isSavedSign}
|
||||
onChange={(e) => setIsSavedSign(e.target.checked)}
|
||||
/>
|
||||
Save {props?.currWidgetsDetails?.type || props?.widgetType}
|
||||
</label>
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
{props?.isSignPad && (
|
||||
<div className="op-modal op-modal-open">
|
||||
<div className="op-modal-box px-[13px] pt-2 pb-0">
|
||||
{isLoader && (
|
||||
<div className="absolute w-full h-full inset-0 flex justify-center items-center bg-base-content/30 z-50">
|
||||
<Loader />
|
||||
</div>
|
||||
)}
|
||||
{isSignTypes ? (
|
||||
<>
|
||||
<div className="flex justify-between text-base-content items-center">
|
||||
<div className="text-[1.2rem]">
|
||||
<div className="flex flex-row justify-between mt-[3px]">
|
||||
<div className="flex flex-row justify-between gap-[5px] md:gap-[8px] text-[11px] md:text-base">
|
||||
{props?.isStamp ? (
|
||||
<span className="text-base-content font-bold text-lg">
|
||||
{props?.widgetType === "image" ||
|
||||
props?.currWidgetsDetails?.type === "image"
|
||||
? t("upload-image")
|
||||
: t("upload-stamp-image")}
|
||||
</span>
|
||||
) : (
|
||||
<>
|
||||
{!props?.isInitial &&
|
||||
props?.defaultSign &&
|
||||
isTabEnabled("default") ? (
|
||||
<div>
|
||||
<span
|
||||
onClick={() => {
|
||||
setIsDefaultSign(true);
|
||||
props?.setIsImageSelect(true);
|
||||
setIsTab("mysignature");
|
||||
setSignatureType("");
|
||||
props?.setImage();
|
||||
}}
|
||||
className={`${
|
||||
isTab === "mysignature"
|
||||
? "op-link-primary"
|
||||
: "no-underline"
|
||||
} op-link underline-offset-8 ml-[2px]`}
|
||||
>
|
||||
{t("my-signature")}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
props?.isInitial &&
|
||||
props?.myInitial &&
|
||||
isTabEnabled("default") && (
|
||||
<div>
|
||||
<span
|
||||
onClick={() => {
|
||||
setIsDefaultSign(true);
|
||||
props?.setIsImageSelect(true);
|
||||
setIsTab("mysignature");
|
||||
setSignatureType("");
|
||||
props?.setImage();
|
||||
}}
|
||||
className={`${
|
||||
isTab === "mysignature"
|
||||
? "op-link-primary"
|
||||
: "no-underline"
|
||||
} op-link underline-offset-8 ml-[2px]`}
|
||||
>
|
||||
{t("my-initials")}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
{isTabEnabled("draw") && (
|
||||
<div>
|
||||
<span
|
||||
onClick={() => {
|
||||
setIsDefaultSign(false);
|
||||
props?.setIsImageSelect(false);
|
||||
setIsTab("draw");
|
||||
props?.setImage();
|
||||
if (isSignImg) {
|
||||
props?.setSignature(isSignImg);
|
||||
}
|
||||
}}
|
||||
className={`${
|
||||
isTab === "draw"
|
||||
? "op-link-primary"
|
||||
: "no-underline"
|
||||
} op-link underline-offset-8 ml-[2px]`}
|
||||
>
|
||||
{t("draw")}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{isTabEnabled("upload") && (
|
||||
<div>
|
||||
<span
|
||||
onClick={() => {
|
||||
setIsDefaultSign(false);
|
||||
props?.setIsImageSelect(true);
|
||||
setIsTab("uploadImage");
|
||||
setSignatureType("");
|
||||
}}
|
||||
className={`${
|
||||
isTab === "uploadImage"
|
||||
? "op-link-primary"
|
||||
: "no-underline"
|
||||
} op-link underline-offset-8 ml-[2px]`}
|
||||
>
|
||||
{t("upload-image")}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{isTabEnabled("typed") && (
|
||||
<div>
|
||||
<span
|
||||
onClick={() => {
|
||||
setIsDefaultSign(false);
|
||||
props?.setIsImageSelect(false);
|
||||
setIsTab("type");
|
||||
setSignatureType("");
|
||||
props?.setImage();
|
||||
}}
|
||||
className={`${
|
||||
isTab === "type"
|
||||
? "op-link-primary"
|
||||
: "no-underline"
|
||||
} op-link underline-offset-8 ml-[2px]`}
|
||||
>
|
||||
{t("type")}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="text-[1.5rem] cursor-pointer"
|
||||
onClick={handleCancelBtn}
|
||||
>
|
||||
×
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-[20px] h-full">
|
||||
{isDefaultSign ? (
|
||||
<>
|
||||
{!props?.isInitial &&
|
||||
props?.defaultSign &&
|
||||
isTabEnabled("default") && (
|
||||
<>
|
||||
<div className="flex justify-center">
|
||||
<div
|
||||
className={`${
|
||||
props?.isInitial
|
||||
? "intialSignatureCanvas"
|
||||
: "signatureCanvas"
|
||||
} bg-white border-[1.3px] border-[#007bff] flex flex-col justify-center items-center mb-[6px] cursor-pointer`}
|
||||
>
|
||||
<img
|
||||
alt="stamp img"
|
||||
className="w-full h-full object-contain bg-white"
|
||||
draggable="false"
|
||||
src={
|
||||
props?.isInitial
|
||||
? props?.myInitial
|
||||
: props?.defaultSign
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{props.setIsAutoSign && autoSignAll()}
|
||||
<div className="flex justify-end">
|
||||
<SaveBtn />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{props?.isInitial &&
|
||||
props?.myInitial &&
|
||||
isTabEnabled("default") && (
|
||||
<>
|
||||
<div className="flex justify-center">
|
||||
<div
|
||||
className={`${
|
||||
props?.isInitial
|
||||
? "intialSignatureCanvas"
|
||||
: "signatureCanvas"
|
||||
} bg-white border-[1.3px] border-[#007bff] flex flex-col justify-center items-center mb-[6px] cursor-pointer`}
|
||||
>
|
||||
<img
|
||||
alt="stamp img"
|
||||
className="w-full h-full object-contain bg-white"
|
||||
draggable="false"
|
||||
src={
|
||||
props?.isInitial
|
||||
? props?.myInitial
|
||||
: props?.defaultSign
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{props.setIsAutoSign && autoSignAll()}
|
||||
<div className="flex justify-end">
|
||||
<SaveBtn />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
) : props?.isImageSelect || props?.isStamp ? (
|
||||
!props?.image ? (
|
||||
<div className="flex justify-center">
|
||||
<div
|
||||
className={`${
|
||||
props?.isInitial
|
||||
? "intialSignatureCanvas"
|
||||
: "signatureCanvas"
|
||||
} bg-white border-[1.3px] border-[#007bff] flex flex-col justify-center items-center mb-[6px] cursor-pointer`}
|
||||
onClick={() => props?.imageRef.current.click()}
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
onChange={props?.onImageChange}
|
||||
className="filetype"
|
||||
accept="image/png,image/jpeg"
|
||||
ref={props?.imageRef}
|
||||
hidden
|
||||
/>
|
||||
<i className="fa-light fa-cloud-upload-alt uploadImgLogo"></i>
|
||||
<div className="text-[10px]">{t("upload")}</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex justify-center">
|
||||
<div
|
||||
className={`${
|
||||
props?.isInitial
|
||||
? "intialSignatureCanvas"
|
||||
: "signatureCanvas"
|
||||
} bg-white border-[1.3px] border-[#007bff] mb-[6px] overflow-hidden`}
|
||||
>
|
||||
<img
|
||||
alt="print img"
|
||||
ref={props?.imageRef}
|
||||
src={props?.image.src}
|
||||
draggable="false"
|
||||
className="object-contain h-full w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{props.setIsAutoSign && autoSignAll()}
|
||||
<div className="flex justify-end">
|
||||
<SaveBtn />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
) : isTab === "type" ? (
|
||||
<div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="mr-[5px] text-[12px]">
|
||||
{props?.isInitial
|
||||
? t("initial-teb")
|
||||
: t("signature-tab")}
|
||||
:
|
||||
</span>
|
||||
<input
|
||||
maxLength={props?.isInitial ? 3 : 30}
|
||||
style={{ fontFamily: fontSelect, color: penColor }}
|
||||
type="text"
|
||||
className="ml-1 op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-[20px]"
|
||||
placeholder={
|
||||
props?.isInitial
|
||||
? t("initial-type")
|
||||
: t("signature-type")
|
||||
}
|
||||
value={typedSignature}
|
||||
onChange={(e) => {
|
||||
setTypedSignature(e.target.value);
|
||||
convertToImg(fontSelect, e.target.value);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="border-[1px] border-[#d6d3d3] mt-[10px] ml-[5px]">
|
||||
{fontOptions.map((font, ind) => {
|
||||
return (
|
||||
<div
|
||||
key={ind}
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
fontFamily: font.value,
|
||||
backgroundColor:
|
||||
fontSelect === font.value &&
|
||||
"rgb(206 225 247)"
|
||||
}}
|
||||
onClick={() => {
|
||||
setFontSelect(font.value);
|
||||
convertToImg(font.value, typedSignature);
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="py-[5px] px-[10px] text-[20px]"
|
||||
style={{ color: penColor }}
|
||||
>
|
||||
{typedSignature
|
||||
? typedSignature
|
||||
: "Your signature"}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col justify-between mt-[10px]">
|
||||
{props.setIsAutoSign && autoSignAll()}
|
||||
<div className="flex flex-row justify-between mt-[10px]">
|
||||
<PenColorComponent convertToImg={convertToImg} />
|
||||
<SaveBtn />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex justify-center">
|
||||
<SignatureCanvas
|
||||
ref={canvasRef}
|
||||
penColor={penColor}
|
||||
canvasProps={{
|
||||
className: `${
|
||||
props?.isInitial
|
||||
? "intialSignatureCanvas"
|
||||
: "signatureCanvas"
|
||||
} border-[1.3px] border-[#007bff]`
|
||||
}}
|
||||
onEnd={() =>
|
||||
handleSignatureChange(
|
||||
canvasRef.current?.toDataURL()
|
||||
)
|
||||
}
|
||||
dotSize={1}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col justify-between mt-[10px]">
|
||||
{props.setIsAutoSign && autoSignAll()}
|
||||
{accesstoken &&
|
||||
props?.saveSignCheckbox?.isVisible &&
|
||||
savesigncheckbox}
|
||||
<div className="flex flex-row justify-between mt-[10px]">
|
||||
<PenColorComponent />
|
||||
<SaveBtn />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div>
|
||||
<div className="relative flex flex-row items-center justify-between">
|
||||
<div className="text-base-content font-bold text-lg">
|
||||
Signature
|
||||
</div>
|
||||
<div
|
||||
className="text-[1.5rem] cursor-pointer"
|
||||
onClick={handleCancelBtn}
|
||||
>
|
||||
×
|
||||
</div>
|
||||
</div>
|
||||
<div className="mx-3 mb-6 mt-3">
|
||||
<p>{t("at-least-one-signature-type")}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default SignPad;
|
||||
+17
-5
@@ -25,17 +25,28 @@ const WidgetNameModal = (props) => {
|
||||
const statusArr = ["Required", "Optional"];
|
||||
const [signatureType, setSignatureType] = useState([]);
|
||||
|
||||
const handleHint = () => {
|
||||
const type = props.defaultdata?.type;
|
||||
|
||||
if (type === "signature") {
|
||||
return "Draw signature";
|
||||
} else if (type === "stamp" || type === "image") {
|
||||
return `Upload ${type}`;
|
||||
} else if (type === "initials") {
|
||||
return "Draw initial";
|
||||
} else if (type === textInputWidget) {
|
||||
return "Enter text";
|
||||
} else {
|
||||
return `Enter ${type}`;
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
if (props.defaultdata) {
|
||||
setFormdata({
|
||||
name: props.defaultdata?.options?.name || "",
|
||||
defaultValue: props.defaultdata?.options?.defaultValue || "",
|
||||
status: props.defaultdata?.options?.status || "required",
|
||||
hint:
|
||||
props.defaultdata?.options?.hint ||
|
||||
(props.defaultdata?.type === textInputWidget
|
||||
? "Enter text"
|
||||
: `Enter ${props.defaultdata?.options?.name}`),
|
||||
hint: props.defaultdata?.options?.hint || handleHint(),
|
||||
textvalidate:
|
||||
props.defaultdata?.options?.validation?.type === "regex"
|
||||
? props.defaultdata?.options?.validation?.pattern
|
||||
@@ -117,6 +128,7 @@ const WidgetNameModal = (props) => {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const handleCheckboxChange = (index) => {
|
||||
// Update the state with the modified array
|
||||
setSignatureType((prev) =>
|
||||
File diff suppressed because it is too large
Load Diff
+2
-1
@@ -6,7 +6,8 @@ import { useTranslation } from "react-i18next";
|
||||
|
||||
const FolderModal = (props) => {
|
||||
const { t } = useTranslation();
|
||||
const appName = "OpenSign™";
|
||||
const appName =
|
||||
"OpenSign™";
|
||||
const drivename = appName === "OpenSign™" ? "OpenSign™" : "";
|
||||
const [clickFolder, setClickFolder] = useState("");
|
||||
const [folderList, setFolderList] = useState([]);
|
||||
+2
-1
@@ -6,7 +6,8 @@ import Tooltip from "../../../primitives/Tooltip";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
|
||||
const appName = "OpenSign™";
|
||||
const appName =
|
||||
"OpenSign™";
|
||||
const drivename = appName === "OpenSign™" ? "OpenSign™" : "";
|
||||
const { t } = useTranslation();
|
||||
const [isOpen, SetIsOpen] = useState(false);
|
||||
+4
-4
@@ -117,7 +117,9 @@ const SignersInput = (props) => {
|
||||
};
|
||||
const loadOptions = async (inputValue) => {
|
||||
try {
|
||||
const contactRes = await findContact(inputValue);
|
||||
const contactRes = await findContact(
|
||||
inputValue,
|
||||
);
|
||||
if (contactRes) {
|
||||
const res = JSON.parse(JSON.stringify(contactRes));
|
||||
//compareArrays is a function where compare between two array (total signersList and dcument signers list)
|
||||
@@ -152,9 +154,7 @@ const SignersInput = (props) => {
|
||||
{props.label ? props.label : t("signers")}
|
||||
{props.required && <span className="text-red-500 text-[13px]">*</span>}
|
||||
<span
|
||||
className={`z-[${
|
||||
props?.helptextZindex ? props.helptextZindex : 30
|
||||
}] absolute ml-1 text-xs`}
|
||||
className={`z-[${props?.helptextZindex ? props.helptextZindex : 30}] absolute ml-1 text-xs`}
|
||||
>
|
||||
<Tooltip
|
||||
id={`${props.label ? props.label : "signers"}-tooltip`}
|
||||
+2
-1
@@ -3,7 +3,8 @@ import { useTranslation } from "react-i18next";
|
||||
import { NavLink } from "react-router";
|
||||
|
||||
const Menu = ({ item, isOpen, closeSidebar }) => {
|
||||
const appName = "OpenSign™";
|
||||
const appName =
|
||||
"OpenSign™";
|
||||
const drivename = appName === "OpenSign™" ? "OpenSign™" : "";
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
+2
-1
@@ -3,7 +3,8 @@ import { useTranslation } from "react-i18next";
|
||||
import { NavLink } from "react-router";
|
||||
|
||||
const Submenu = ({ item, closeSidebar, toggleSubmenu, submenuOpen }) => {
|
||||
const appName = "OpenSign™";
|
||||
const appName =
|
||||
"OpenSign™";
|
||||
const drivename = appName === "OpenSign™" ? "OpenSign™" : "";
|
||||
const { t } = useTranslation();
|
||||
const { title, icon, children } = item;
|
||||
@@ -7,7 +7,9 @@ import { appInfo } from "./appinfo";
|
||||
import { saveAs } from "file-saver";
|
||||
import printModule from "print-js";
|
||||
import fontkit from "@pdf-lib/fontkit";
|
||||
import { themeColor } from "./const";
|
||||
import {
|
||||
themeColor
|
||||
} from "./const";
|
||||
import { format, toZonedTime } from "date-fns-tz";
|
||||
|
||||
export const fontsizeArr = [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28];
|
||||
@@ -20,6 +22,35 @@ export const textInputWidget = "text input";
|
||||
export const textWidget = "text";
|
||||
export const radioButtonWidget = "radio button";
|
||||
|
||||
|
||||
//function for create list of year for date widget
|
||||
export const range = (start, end, step) => {
|
||||
const range = [];
|
||||
for (let i = start; i <= end; i += step) {
|
||||
range.push(i);
|
||||
}
|
||||
return range;
|
||||
};
|
||||
//function for get year
|
||||
export const getYear = (date) => {
|
||||
const newYear = new Date(date).getFullYear();
|
||||
return newYear;
|
||||
};
|
||||
export const years = range(1950, getYear(new Date()) + 16, 1);
|
||||
export const months = [
|
||||
"January",
|
||||
"February",
|
||||
"March",
|
||||
"April",
|
||||
"May",
|
||||
"June",
|
||||
"July",
|
||||
"August",
|
||||
"September",
|
||||
"October",
|
||||
"November",
|
||||
"December"
|
||||
];
|
||||
export const fileasbytes = async (filepath) => {
|
||||
const response = await fetch(filepath); // Adjust the path accordingly
|
||||
const arrayBuffer = await response.arrayBuffer();
|
||||
@@ -135,12 +166,15 @@ export const pdfNewWidthFun = (divRef) => {
|
||||
};
|
||||
|
||||
//`contractUsers` function is used to get contract_User details
|
||||
export const contractUsers = async () => {
|
||||
export const contractUsers = async (
|
||||
) => {
|
||||
try {
|
||||
const url = `${localStorage.getItem("baseUrl")}functions/getUserDetails`;
|
||||
const parseAppId = localStorage.getItem("parseAppId");
|
||||
const accesstoken = localStorage.getItem("accesstoken");
|
||||
const token = { "X-Parse-Session-Token": accesstoken };
|
||||
const accesstoken =
|
||||
localStorage.getItem("accesstoken");
|
||||
const token =
|
||||
{ "X-Parse-Session-Token": accesstoken };
|
||||
const headers = {
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
@@ -298,53 +332,74 @@ export const changeDateToMomentFormat = (format) => {
|
||||
return "L";
|
||||
}
|
||||
};
|
||||
export const addWidgetOptions = (type, signer) => {
|
||||
const defaultOpt = { name: type, status: "required" };
|
||||
export const addWidgetOptions = (type, signer, widgetValue) => {
|
||||
const status = { status: "required" };
|
||||
switch (type) {
|
||||
case "signature":
|
||||
return defaultOpt;
|
||||
return { ...status, name: "Signature" };
|
||||
case "stamp":
|
||||
return defaultOpt;
|
||||
return { ...status, name: "Upload stamp" };
|
||||
case "checkbox":
|
||||
return {
|
||||
...defaultOpt,
|
||||
options: { isReadOnly: false, isHideLabel: false }
|
||||
...status,
|
||||
name: "Checkbox",
|
||||
isReadOnly: false,
|
||||
isHideLabel: false
|
||||
};
|
||||
case textInputWidget:
|
||||
return { ...defaultOpt, isReadOnly: false };
|
||||
return { ...status, name: "Text", isReadOnly: false };
|
||||
case "initials":
|
||||
return defaultOpt;
|
||||
return { ...status, name: "Initials" };
|
||||
case "name":
|
||||
return { ...defaultOpt };
|
||||
return {
|
||||
...status,
|
||||
name: "Name",
|
||||
defaultValue: widgetValue ? widgetValue : ""
|
||||
};
|
||||
case "company":
|
||||
return { ...defaultOpt };
|
||||
return {
|
||||
...status,
|
||||
name: "Company",
|
||||
defaultValue: widgetValue ? widgetValue : ""
|
||||
};
|
||||
case "job title":
|
||||
return { ...defaultOpt };
|
||||
return {
|
||||
...status,
|
||||
name: "Job title",
|
||||
defaultValue: widgetValue ? widgetValue : ""
|
||||
};
|
||||
case "date": {
|
||||
const dateFormat = signer?.DateFormat
|
||||
? selectFormat(signer?.DateFormat)
|
||||
: "MM/dd/yyyy";
|
||||
return {
|
||||
...defaultOpt,
|
||||
...status,
|
||||
name: "Date",
|
||||
response: getDate(signer?.DateFormat),
|
||||
validation: { format: dateFormat, type: "date-format" }
|
||||
};
|
||||
}
|
||||
case "image":
|
||||
return defaultOpt;
|
||||
return { ...status, name: "Upload image" };
|
||||
case "email":
|
||||
return { ...defaultOpt, validation: { type: "email", pattern: "" } };
|
||||
return {
|
||||
...status,
|
||||
name: "Email",
|
||||
validation: { type: "email", pattern: "" },
|
||||
defaultValue: widgetValue ? widgetValue : ""
|
||||
};
|
||||
case "dropdown":
|
||||
return defaultOpt;
|
||||
return { ...status, name: "Dropdown" };
|
||||
case radioButtonWidget:
|
||||
return {
|
||||
...defaultOpt,
|
||||
...status,
|
||||
name: "Radio button",
|
||||
values: [],
|
||||
isReadOnly: false,
|
||||
isHideLabel: false
|
||||
};
|
||||
case textWidget:
|
||||
return defaultOpt;
|
||||
return { ...status, name: "Text" };
|
||||
default:
|
||||
return {};
|
||||
}
|
||||
@@ -353,30 +408,30 @@ export const addWidgetOptions = (type, signer) => {
|
||||
export const addWidgetSelfsignOptions = (type, getWidgetValue, owner) => {
|
||||
switch (type) {
|
||||
case "signature":
|
||||
return { name: "signature" };
|
||||
return { name: "Signature" };
|
||||
case "stamp":
|
||||
return { name: "stamp" };
|
||||
return { name: "Upload stamp" };
|
||||
case "checkbox":
|
||||
return { name: "checkbox" };
|
||||
return { name: "Checkbox" };
|
||||
case textWidget:
|
||||
return { name: "text" };
|
||||
return { name: "Text" };
|
||||
case "initials":
|
||||
return { name: "initials" };
|
||||
return { name: "Initials" };
|
||||
case "name":
|
||||
return {
|
||||
name: "name",
|
||||
name: "Name",
|
||||
defaultValue: getWidgetValue(type),
|
||||
validation: { type: "text", pattern: "" }
|
||||
};
|
||||
case "company":
|
||||
return {
|
||||
name: "company",
|
||||
name: "Company",
|
||||
defaultValue: getWidgetValue(type),
|
||||
validation: { type: "text", pattern: "" }
|
||||
};
|
||||
case "job title":
|
||||
return {
|
||||
name: "job title",
|
||||
name: "Job title",
|
||||
defaultValue: getWidgetValue(type),
|
||||
validation: { type: "text", pattern: "" }
|
||||
};
|
||||
@@ -385,16 +440,16 @@ export const addWidgetSelfsignOptions = (type, getWidgetValue, owner) => {
|
||||
? selectFormat(owner?.DateFormat)
|
||||
: "MM/dd/yyyy";
|
||||
return {
|
||||
name: "date",
|
||||
name: "Date",
|
||||
response: getDate(owner?.DateFormat),
|
||||
validation: { format: dateFormat, type: "date-format" }
|
||||
};
|
||||
}
|
||||
case "image":
|
||||
return { name: "image" };
|
||||
return { name: "Upload image" };
|
||||
case "email":
|
||||
return {
|
||||
name: "email",
|
||||
name: "Email",
|
||||
defaultValue: getWidgetValue(type),
|
||||
validation: { type: "email", pattern: "" }
|
||||
};
|
||||
@@ -556,7 +611,7 @@ export const signPdfFun = async (
|
||||
documentId,
|
||||
signerObjectId,
|
||||
objectId,
|
||||
widgets
|
||||
widgets,
|
||||
) => {
|
||||
let isCustomCompletionMail = false;
|
||||
try {
|
||||
@@ -565,7 +620,10 @@ export const signPdfFun = async (
|
||||
if (tenantDetails && tenantDetails === "user does not exist!") {
|
||||
return { status: "error", message: "User does not exist." };
|
||||
} else {
|
||||
if (tenantDetails?.CompletionBody && tenantDetails?.CompletionSubject) {
|
||||
if (
|
||||
tenantDetails?.CompletionBody &&
|
||||
tenantDetails?.CompletionSubject
|
||||
) {
|
||||
isCustomCompletionMail = true;
|
||||
}
|
||||
}
|
||||
@@ -803,8 +861,6 @@ export const onChangeInput = (
|
||||
userId,
|
||||
initial,
|
||||
dateFormat,
|
||||
isDefaultEmpty,
|
||||
isRadio,
|
||||
fontSize,
|
||||
fontColor
|
||||
) => {
|
||||
@@ -841,21 +897,13 @@ export const onChangeInput = (
|
||||
}
|
||||
}
|
||||
};
|
||||
} else if (isDefaultEmpty) {
|
||||
return {
|
||||
...position,
|
||||
options: {
|
||||
...position.options,
|
||||
response: value,
|
||||
defaultValue: isRadio ? "" : []
|
||||
}
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
...position,
|
||||
options: {
|
||||
...position.options,
|
||||
response: value
|
||||
response: value,
|
||||
defaultValue: ""
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -902,7 +950,8 @@ export const onChangeInput = (
|
||||
...positionData,
|
||||
options: {
|
||||
...positionData.options,
|
||||
response: value
|
||||
response: value,
|
||||
defaultValue: ""
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -1009,21 +1058,21 @@ export const calculateInitialWidthHeight = (widgetData) => {
|
||||
document.body.removeChild(span);
|
||||
return { getWidth: width, getHeight: height };
|
||||
};
|
||||
export const addInitialData = (signerPos, setXyPosition, value, userId) => {
|
||||
function widgetDataValue(type) {
|
||||
switch (type) {
|
||||
case "name":
|
||||
return value?.Name;
|
||||
case "company":
|
||||
return value?.Company;
|
||||
case "job title":
|
||||
return value?.JobTitle;
|
||||
case "email":
|
||||
return value?.Email;
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
export const widgetDataValue = (type, value) => {
|
||||
switch (type) {
|
||||
case "name":
|
||||
return value?.Name;
|
||||
case "company":
|
||||
return value?.Company;
|
||||
case "job title":
|
||||
return value?.JobTitle;
|
||||
case "email":
|
||||
return value?.Email;
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
};
|
||||
export const addInitialData = (signerPos, setXyPosition, value, userId) => {
|
||||
return signerPos.map((item) => {
|
||||
if (item.placeHolder && item.placeHolder.length > 0) {
|
||||
// If there is a nested array, recursively add the field to the last object
|
||||
@@ -1048,7 +1097,7 @@ export const addInitialData = (signerPos, setXyPosition, value, userId) => {
|
||||
// Adjust this line to add the desired field
|
||||
};
|
||||
} else {
|
||||
const widgetData = widgetDataValue(item.type);
|
||||
const widgetData = widgetDataValue(item.type, value);
|
||||
if (["name", "company", "job title", "email"].includes(item.type)) {
|
||||
return {
|
||||
...item,
|
||||
@@ -1066,7 +1115,8 @@ export const addInitialData = (signerPos, setXyPosition, value, userId) => {
|
||||
|
||||
//function for embed document id
|
||||
export const embedDocId = async (pdfDoc, documentId, allPages) => {
|
||||
const appName = "OpenSign™";
|
||||
const appName =
|
||||
"OpenSign™";
|
||||
// `fontBytes` is used to embed custom font in pdf
|
||||
const fontBytes = await fileasbytes(
|
||||
"https://cdn.opensignlabs.com/webfonts/times.ttf"
|
||||
@@ -1075,7 +1125,8 @@ export const embedDocId = async (pdfDoc, documentId, allPages) => {
|
||||
const font = await pdfDoc.embedFont(fontBytes, { subset: true });
|
||||
for (let i = 0; i < allPages; i++) {
|
||||
const fontSize = 10;
|
||||
const textContent = documentId && `${appName} DocumentId: ${documentId} `;
|
||||
const textContent =
|
||||
documentId && `${appName} DocumentId: ${documentId} `;
|
||||
const pages = pdfDoc.getPages();
|
||||
const page = pages[i];
|
||||
try {
|
||||
@@ -1181,7 +1232,6 @@ export function onSaveSign(
|
||||
return updatedArray;
|
||||
} //condition when user edit signature/initial then updated signature apply all existing drawn signatures
|
||||
else if (isApplyAll) {
|
||||
// console.log("signatureImg",signatureImg)
|
||||
const updatedArray = updateXYposition.map((page) => ({
|
||||
...page,
|
||||
pos: page.pos.map(
|
||||
@@ -1900,7 +1950,9 @@ export const placeholderHeight = (pos) => {
|
||||
};
|
||||
|
||||
//function for getting contracts_contactbook details
|
||||
export const contactBook = async (objectId) => {
|
||||
export const contactBook = async (
|
||||
objectId,
|
||||
) => {
|
||||
const result = await axios
|
||||
.get(
|
||||
`${localStorage.getItem(
|
||||
@@ -1910,7 +1962,8 @@ export const contactBook = async (objectId) => {
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"X-Parse-Application-Id": localStorage.getItem("parseAppId"),
|
||||
"X-Parse-Session-Token": localStorage.getItem("accesstoken")
|
||||
"X-Parse-Session-Token":
|
||||
localStorage.getItem("accesstoken")
|
||||
}
|
||||
}
|
||||
)
|
||||
@@ -1928,9 +1981,12 @@ export const contactBook = async (objectId) => {
|
||||
};
|
||||
|
||||
//function for getting document details from contract_Documents class
|
||||
export const contractDocument = async (documentId) => {
|
||||
export const contractDocument = async (
|
||||
documentId,
|
||||
) => {
|
||||
const data = { docId: documentId };
|
||||
const token = { sessionToken: localStorage.getItem("accesstoken") };
|
||||
const token =
|
||||
{ sessionToken: localStorage.getItem("accesstoken") };
|
||||
const documentDeatils = await axios
|
||||
.post(`${localStorage.getItem("baseUrl")}functions/getDocument`, data, {
|
||||
headers: {
|
||||
@@ -2019,26 +2075,12 @@ export const addDefaultSignatureImg = (xyPosition, defaultSignImg, type) => {
|
||||
return xyDefaultPos;
|
||||
};
|
||||
|
||||
//function for create list of year for date widget
|
||||
export const range = (start, end, step) => {
|
||||
const range = [];
|
||||
for (let i = start; i <= end; i += step) {
|
||||
range.push(i);
|
||||
}
|
||||
return range;
|
||||
};
|
||||
//function for get month
|
||||
export const getMonth = (date) => {
|
||||
const newMonth = new Date(date).getMonth();
|
||||
return newMonth;
|
||||
};
|
||||
|
||||
//function for get year
|
||||
export const getYear = (date) => {
|
||||
const newYear = new Date(date).getFullYear();
|
||||
return newYear;
|
||||
};
|
||||
|
||||
//function to create/copy widget next to already dropped widget
|
||||
export const handleCopyNextToWidget = (
|
||||
position,
|
||||
@@ -2114,31 +2156,36 @@ export const getFileName = (fileUrl) => {
|
||||
|
||||
//fetch tenant app logo from `partners_Tenant` class by domain name
|
||||
export const getAppLogo = async () => {
|
||||
const domain = window.location.host;
|
||||
try {
|
||||
const tenant = await Parse.Cloud.run("getlogobydomain", {
|
||||
domain: domain
|
||||
});
|
||||
if (tenant) {
|
||||
localStorage.setItem("appname", "OpenSign™");
|
||||
return { logo: tenant?.logo, user: tenant?.user };
|
||||
const domain = window.location.host;
|
||||
try {
|
||||
const tenant = await Parse.Cloud.run("getlogobydomain", {
|
||||
domain: domain
|
||||
});
|
||||
if (tenant) {
|
||||
localStorage.setItem("appname", "OpenSign™");
|
||||
return { logo: tenant?.logo, user: tenant?.user };
|
||||
}
|
||||
} catch (err) {
|
||||
console.log("err in getlogo ", err);
|
||||
if (err?.message?.includes("valid JSON")) {
|
||||
return { logo: appInfo.applogo, user: "exist", error: "invalid_json" };
|
||||
} else {
|
||||
return { logo: appInfo.applogo, user: "exist" };
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.log("err in getlogo ", err);
|
||||
if (err?.message?.includes("valid JSON")) {
|
||||
return { logo: appInfo.applogo, user: "exist", error: "invalid_json" };
|
||||
} else {
|
||||
return { logo: appInfo.applogo, user: "exist" };
|
||||
}
|
||||
}
|
||||
};
|
||||
export const getTenantDetails = async (objectId, contactId) => {
|
||||
export const getTenantDetails = async (
|
||||
objectId,
|
||||
contactId
|
||||
) => {
|
||||
try {
|
||||
const url = `${localStorage.getItem("baseUrl")}functions/gettenant`;
|
||||
const parseAppId = localStorage.getItem("parseAppId");
|
||||
const accesstoken = localStorage.getItem("accesstoken");
|
||||
const token = { "X-Parse-Session-Token": accesstoken };
|
||||
const data = { userId: objectId, contactId: contactId };
|
||||
const token =
|
||||
{ "X-Parse-Session-Token": accesstoken };
|
||||
const data =
|
||||
{ userId: objectId, contactId: contactId };
|
||||
const res = await axios.post(url, data, {
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
@@ -2219,7 +2266,7 @@ export const handleSendOTP = async (email) => {
|
||||
"X-Parse-Application-Id": localStorage.getItem("parseAppId")
|
||||
};
|
||||
const body = {
|
||||
email: email
|
||||
email: email,
|
||||
};
|
||||
await axios.post(url, body, { headers: headers });
|
||||
} catch (error) {
|
||||
@@ -2227,7 +2274,8 @@ export const handleSendOTP = async (email) => {
|
||||
}
|
||||
};
|
||||
export const fetchUrl = async (url, pdfName) => {
|
||||
const appName = "OpenSign™";
|
||||
const appName =
|
||||
"OpenSign™";
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
if (!response.ok) {
|
||||
@@ -2241,7 +2289,11 @@ export const fetchUrl = async (url, pdfName) => {
|
||||
console.error("Error downloading the file:", error);
|
||||
}
|
||||
};
|
||||
export const getSignedUrl = async (pdfUrl, docId, templateId) => {
|
||||
export const getSignedUrl = async (
|
||||
pdfUrl,
|
||||
docId,
|
||||
templateId
|
||||
) => {
|
||||
//use only axios here due to public template sign
|
||||
const axiosRes = await axios.post(
|
||||
`${localStorage.getItem("baseUrl")}/functions/getsignedurl`,
|
||||
@@ -2302,7 +2354,10 @@ export const handleDownloadPdf = async (
|
||||
setIsDownloading && setIsDownloading("pdf");
|
||||
const docId = pdfDetails?.[0]?.objectId || "";
|
||||
try {
|
||||
const url = await getSignedUrl(pdfUrl, docId);
|
||||
const url = await getSignedUrl(
|
||||
pdfUrl,
|
||||
docId,
|
||||
);
|
||||
await fetchUrl(url, pdfName);
|
||||
setIsDownloading && setIsDownloading("");
|
||||
} catch (err) {
|
||||
@@ -2332,7 +2387,7 @@ export const handleToPrint = async (event, setIsDownloading, pdfDetails) => {
|
||||
`${localStorage.getItem("baseUrl")}/functions/getsignedurl`,
|
||||
{
|
||||
url: pdfUrl,
|
||||
docId: docId
|
||||
docId: docId,
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
@@ -2376,7 +2431,8 @@ export const handleDownloadCertificate = async (
|
||||
setIsDownloading,
|
||||
isZip
|
||||
) => {
|
||||
const appName = "OpenSign™";
|
||||
const appName =
|
||||
"OpenSign™";
|
||||
if (pdfDetails?.length > 0 && pdfDetails[0]?.CertificateUrl) {
|
||||
try {
|
||||
await fetch(pdfDetails[0] && pdfDetails[0]?.CertificateUrl);
|
||||
@@ -2460,13 +2516,14 @@ export const handleDownloadCertificate = async (
|
||||
export function escapeRegExp(string) {
|
||||
return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // Escape special characters
|
||||
}
|
||||
export async function findContact(value) {
|
||||
export async function findContact(
|
||||
value,
|
||||
) {
|
||||
try {
|
||||
const baseURL = localStorage.getItem("baseUrl");
|
||||
const url = `${baseURL}functions/getsigners`;
|
||||
const token = {
|
||||
"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"),
|
||||
@@ -2678,20 +2735,23 @@ export function base64ToArrayBuffer(base64) {
|
||||
return bytes.buffer;
|
||||
}
|
||||
|
||||
export const convertBase64ToFile = async (pdfName, pdfBase64) => {
|
||||
export const convertBase64ToFile = async (
|
||||
pdfName,
|
||||
pdfBase64,
|
||||
) => {
|
||||
const fileName = sanitizeFileName(pdfName) + ".pdf";
|
||||
try {
|
||||
const pdfFile = new Parse.File(fileName, { base64: pdfBase64 });
|
||||
// Save the Parse File if needed
|
||||
const pdfData = await pdfFile.save();
|
||||
const pdfUrl = pdfData.url();
|
||||
const fileRes = await getSecureUrl(pdfUrl);
|
||||
if (fileRes?.url) {
|
||||
return fileRes.url;
|
||||
try {
|
||||
const pdfFile = new Parse.File(fileName, { base64: pdfBase64 });
|
||||
// Save the Parse File if needed
|
||||
const pdfData = await pdfFile.save();
|
||||
const pdfUrl = pdfData.url();
|
||||
const fileRes = await getSecureUrl(pdfUrl);
|
||||
if (fileRes?.url) {
|
||||
return fileRes.url;
|
||||
}
|
||||
} catch (e) {
|
||||
console.log("error in convertbase64tofile", e);
|
||||
}
|
||||
} catch (e) {
|
||||
console.log("error in convertbase64tofile", e);
|
||||
}
|
||||
};
|
||||
export const onClickZoomIn = (scale, zoomPercent, setScale, setZoomPercent) => {
|
||||
setScale(scale + 0.1 * scale);
|
||||
@@ -2981,10 +3041,13 @@ export const flattenPdf = async (pdfFile) => {
|
||||
};
|
||||
|
||||
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 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='https://www.opensignlabs.com' target=_blank>here</a>.</p></div></div></body></html>`;
|
||||
|
||||
const subject = `${param.senderName} has requested you to sign "${param.title}"`;
|
||||
const body =
|
||||
@@ -3027,14 +3090,21 @@ export function formatDateTime(date, dateFormat, timeZone, is12Hour) {
|
||||
: formatTimeInTimezone(date, timeZone);
|
||||
}
|
||||
|
||||
export const updateDateWidgetsRes = (placeHolders, signerId) => {
|
||||
export const updateDateWidgetsRes = (documentData, signerId, journey) => {
|
||||
const extUser =
|
||||
localStorage.getItem("Extand_Class");
|
||||
const contactUser = documentData?.Signers.find(
|
||||
(data) => data.objectId === signerId
|
||||
);
|
||||
const placeHolders = documentData?.Placeholders;
|
||||
const userDetails = extUser ? JSON.parse(extUser)[0] : contactUser;
|
||||
return placeHolders?.map((item) => {
|
||||
if (item?.signerObjId === signerId) {
|
||||
return {
|
||||
...item,
|
||||
placeHolder: item.placeHolder.map((ph) => ({
|
||||
placeHolder: item?.placeHolder?.map((ph) => ({
|
||||
...ph,
|
||||
pos: ph.pos.map((widget) => {
|
||||
pos: ph?.pos?.map((widget) => {
|
||||
// only for date widgets *and* missing response
|
||||
if (widget.type === "date" && !widget.options.response) {
|
||||
return {
|
||||
@@ -3046,6 +3116,18 @@ export const updateDateWidgetsRes = (placeHolders, signerId) => {
|
||||
)
|
||||
}
|
||||
};
|
||||
} else if (
|
||||
["name", "email", "job title", "company"].includes(widget.type) &&
|
||||
!widget.options.defaultValue &&
|
||||
!widget.options.response
|
||||
) {
|
||||
return {
|
||||
...widget,
|
||||
options: {
|
||||
...widget.options,
|
||||
response: widgetDataValue(widget.type, userDetails)
|
||||
}
|
||||
};
|
||||
}
|
||||
return widget;
|
||||
})
|
||||
@@ -3056,3 +3138,26 @@ export const updateDateWidgetsRes = (placeHolders, signerId) => {
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//function for show checked checkbox
|
||||
export const selectCheckbox = (ind, selectedCheckbox) => {
|
||||
if (selectedCheckbox && selectedCheckbox?.length > 0) {
|
||||
const isCheck = selectedCheckbox?.some((data) => data === ind);
|
||||
return isCheck || false;
|
||||
}
|
||||
};
|
||||
export const checkRegularExpress = (validateType, setValidatePlaceholder) => {
|
||||
switch (validateType) {
|
||||
case "email":
|
||||
setValidatePlaceholder("demo@gmail.com");
|
||||
break;
|
||||
case "number":
|
||||
setValidatePlaceholder("12345");
|
||||
break;
|
||||
case "text":
|
||||
setValidatePlaceholder("please enter text");
|
||||
break;
|
||||
default:
|
||||
setValidatePlaceholder("please enter value");
|
||||
}
|
||||
};
|
||||
@@ -11,9 +11,6 @@ export const appInfo = {
|
||||
appId: process.env.REACT_APP_APPID ? process.env.REACT_APP_APPID : "opensign",
|
||||
baseUrl: serverUrl_fn(),
|
||||
defaultRole: "contracts_User",
|
||||
fbAppId: process.env.REACT_APP_FBAPPID
|
||||
? `${process.env.REACT_APP_FBAPPID}`
|
||||
: "",
|
||||
fev_Icon:
|
||||
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAALlJREFUaEPtmN0NwjAMBpNxYDKYiM1Yp90g93CKStH1NbIdfz921Dker2Pc+Js1cDF7MXAxASMGYkAigBI6vh9ZwoXP53uZoAYcvhwdA3mAVbI2aSb+9zFKU4IURB6j/HoPUIEa2G3iGIAhQQDlAUIoE2diabIklISS0NoFPebo77RF6OenEF3QntOm128he0GKrwHyACFoz2MgBqSGkpAEcHs47oHtN5AFakACqMNjQEMoE8SABFCHn4HE2zGHSLeEAAAAAElFTkSuQmCC",
|
||||
googleClietId: process.env.REACT_APP_GOOGLECLIENTID
|
||||
|
||||
@@ -1,4 +0,0 @@
|
||||
export default function linkURL(url) {
|
||||
let newURL = (url && decodeURIComponent(url)) || "";
|
||||
return newURL.substring(newURL.indexOf(".com/") + 5, newURL.indexOf("_"));
|
||||
}
|
||||
@@ -17,6 +17,9 @@ body {
|
||||
scrollbar-width: none;
|
||||
/* Firefox */
|
||||
}
|
||||
.react-datepicker-popper {
|
||||
z-index: 9999 !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 766px) {
|
||||
.reactour__close {
|
||||
|
||||
@@ -4,7 +4,6 @@ import "./index.css";
|
||||
import App from "./App";
|
||||
import { Provider } from "react-redux";
|
||||
import { store } from "./redux/store";
|
||||
import { CookiesProvider } from "react-cookie";
|
||||
import { HTML5Backend } from "react-dnd-html5-backend";
|
||||
import { TouchBackend } from "react-dnd-touch-backend";
|
||||
import {
|
||||
@@ -13,15 +12,14 @@ import {
|
||||
MouseTransition,
|
||||
Preview
|
||||
} from "react-dnd-multi-backend";
|
||||
import DragElement from "./components/pdf/DragElement";
|
||||
import DragElement from "./components/pdf/DragElement.jsx";
|
||||
import Parse from "parse";
|
||||
import "./polyfills";
|
||||
import { serverUrl_fn } from "./constant/appinfo";
|
||||
import "./i18n";
|
||||
|
||||
const appId = process.env.REACT_APP_APPID
|
||||
? process.env.REACT_APP_APPID
|
||||
: "opensign";
|
||||
const appId =
|
||||
import.meta.env.VITE_APPID || process.env.REACT_APP_APPID || "opensign";
|
||||
const serverUrl = serverUrl_fn();
|
||||
Parse.initialize(appId);
|
||||
Parse.serverURL = serverUrl;
|
||||
@@ -55,14 +53,13 @@ const generatePreview = (props) => {
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById("root"));
|
||||
root.render(
|
||||
<CookiesProvider defaultSetOptions={{ path: "/" }}>
|
||||
<Provider store={store}>
|
||||
<DndProvider options={HTML5toTouch}>
|
||||
<Preview>{generatePreview}</Preview>
|
||||
<App />
|
||||
</DndProvider>
|
||||
</Provider>
|
||||
</CookiesProvider>
|
||||
<Provider store={store}>
|
||||
<DndProvider options={HTML5toTouch}>
|
||||
<Preview>{generatePreview}</Preview>
|
||||
<App />
|
||||
</DndProvider>
|
||||
</Provider>
|
||||
);
|
||||
@@ -533,9 +533,9 @@ export default function reportJson(id) {
|
||||
btnId: "1873",
|
||||
btnLabel: "Share with team",
|
||||
hoverLabel: "Share with team",
|
||||
btnIcon: "fa-light fa-share-nodes",
|
||||
btnIcon: "fa-light fa-user-group",
|
||||
redirectUrl: "",
|
||||
action: "sharewith"
|
||||
action: "sharewithteam"
|
||||
});
|
||||
return newItem;
|
||||
}
|
||||
|
||||
@@ -36,7 +36,7 @@ const dashboardJson = [
|
||||
queryType: "",
|
||||
class: "contracts_Document",
|
||||
query:
|
||||
'where={"Type":{"#*ne":"Folder"},"Signers":{"#*exists":true,"#*ne":[]},"Placeholders":{"#*ne":null},"SignedUrl":{"#*ne":null},"IsCompleted":{"#*ne":true},"IsDeclined":{"#*ne":true},"IsArchive":{"#*ne":true},"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"#UserId.objectId#"},"ExpiryDate":{"#*gt":{"__type":"#Date#","iso":"#today#"}}}&count=1',
|
||||
'where={"Type":null,"Signers":{"#*exists":true},"Placeholders":{"#*exists":true},"SignedUrl":{"#*exists":true},"IsCompleted":false,"IsDeclined":false,"IsArchive":null,"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"#UserId.objectId#"},"ExpiryDate":{"#*gt":{"__type":"#Date#","iso":"#today#"}}}&keys=Name,ExpiryDate,SignedUrl,Signers&count=1',
|
||||
key: "count",
|
||||
Redirect_type: "Report",
|
||||
Redirect_id: "1MwEuxLEkF",
|
||||
|
||||
@@ -3,19 +3,19 @@ import Header from "../components/Header";
|
||||
import Footer from "../components/Footer";
|
||||
import Sidebar from "../components/sidebar/Sidebar";
|
||||
import { useWindowSize } from "../hook/useWindowSize";
|
||||
import Tour from "reactour";
|
||||
import Tour from "../primitives/Tour";
|
||||
import axios from "axios";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import Parse from "parse";
|
||||
import ModalUi from "../primitives/ModalUi";
|
||||
import { useNavigate, useLocation, Outlet } from "react-router";
|
||||
import { useCookies } from "react-cookie";
|
||||
import Loader from "../primitives/Loader";
|
||||
import { showHeader } from "../redux/reducers/showHeader";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const HomeLayout = () => {
|
||||
const appName = "OpenSign™";
|
||||
const appName =
|
||||
"OpenSign™";
|
||||
const { t, i18n } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
@@ -29,7 +29,6 @@ const HomeLayout = () => {
|
||||
const [isTour, setIsTour] = useState(false);
|
||||
const [tourStatusArr, setTourStatusArr] = useState([]);
|
||||
const [tourConfigs, setTourConfigs] = useState([]);
|
||||
const [, setCookie] = useCookies(["accesstoken", "main_Domain"]);
|
||||
|
||||
const tenantId = localStorage.getItem("TenantId");
|
||||
|
||||
@@ -53,8 +52,8 @@ const HomeLayout = () => {
|
||||
});
|
||||
if (user) {
|
||||
localStorage.setItem("profileImg", user.get("ProfilePic") || "");
|
||||
setIsUserValid(true);
|
||||
setIsLoader(false);
|
||||
setIsUserValid(true);
|
||||
setIsLoader(false);
|
||||
} else {
|
||||
setIsUserValid(false);
|
||||
}
|
||||
@@ -63,38 +62,11 @@ const HomeLayout = () => {
|
||||
setIsUserValid(false);
|
||||
}
|
||||
})();
|
||||
saveCookies();
|
||||
}
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [tenantId]);
|
||||
//function to use save data in cookies storage
|
||||
const saveCookies = () => {
|
||||
const main_Domain = window.location.origin;
|
||||
const domainName = window.location.hostname;
|
||||
// Find the index of the first dot in the string
|
||||
const indexOfFirstDot = domainName.indexOf(".");
|
||||
// Remove the first dot and get the substring starting from the next character
|
||||
const updateDomain = domainName.substring(indexOfFirstDot); //.opensignlabs.com
|
||||
const serverUrl = localStorage.getItem("baseUrl");
|
||||
const parseAppId = localStorage.getItem("parseAppId");
|
||||
setCookie("accesstoken", localStorage.getItem("accesstoken"), {
|
||||
secure: true,
|
||||
domain: updateDomain
|
||||
});
|
||||
setCookie("main_Domain", main_Domain, {
|
||||
secure: true,
|
||||
domain: updateDomain
|
||||
});
|
||||
setCookie("server_url", serverUrl, {
|
||||
secure: true,
|
||||
domain: updateDomain
|
||||
});
|
||||
setCookie("parse_app_id", parseAppId, {
|
||||
secure: true,
|
||||
domain: updateDomain
|
||||
});
|
||||
};
|
||||
|
||||
const showSidebar = () => {
|
||||
setIsOpen((value) => !value);
|
||||
dispatch(showHeader(!isOpen));
|
||||
@@ -119,12 +91,7 @@ const HomeLayout = () => {
|
||||
// const resArr = arr;
|
||||
const resArr = arr.map((obj, index) => {
|
||||
if (arr.length - 1 === index) {
|
||||
return {
|
||||
...obj
|
||||
// actions: () => {
|
||||
// setIsCloseBtn(true);
|
||||
// },
|
||||
};
|
||||
return { ...obj };
|
||||
} else {
|
||||
return {
|
||||
...obj,
|
||||
@@ -136,27 +103,23 @@ const HomeLayout = () => {
|
||||
});
|
||||
setTourConfigs([
|
||||
{
|
||||
selector: '[data-tut="reactourFirst"]',
|
||||
selector: '[data-tut="nonpresentmask"]',
|
||||
content: t("tour-mssg.home-layout-1"),
|
||||
position: "top"
|
||||
// style: { backgroundColor: "#abd4d2" },
|
||||
position: "center",
|
||||
},
|
||||
{
|
||||
selector: '[data-tut="tourbutton"]',
|
||||
content: t("tour-mssg.home-layout-2"),
|
||||
position: "top"
|
||||
// style: { backgroundColor: "#abd4d2" },
|
||||
},
|
||||
...resArr,
|
||||
{
|
||||
selector: '[data-tut="reactourLast"]',
|
||||
selector: '[data-tut="nonpresentmask"]',
|
||||
content: t("tour-mssg.home-layout-3", { appName }),
|
||||
position: "top"
|
||||
// style: { backgroundColor: "#abd4d2" },
|
||||
position: "center",
|
||||
}
|
||||
]);
|
||||
checkTourStatus();
|
||||
// console.log("resArr ", resArr);
|
||||
}
|
||||
};
|
||||
const closeTour = async () => {
|
||||
@@ -16,7 +16,8 @@ import { useTranslation } from "react-i18next";
|
||||
import { emailRegex } from "../constant/const";
|
||||
|
||||
const AddAdmin = () => {
|
||||
const appName = "OpenSign™";
|
||||
const appName =
|
||||
"OpenSign™";
|
||||
const { t, i18n } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
const dispatch = useDispatch();
|
||||
@@ -175,7 +176,6 @@ const AddAdmin = () => {
|
||||
localStorage.setItem("accesstoken", sessionToken);
|
||||
localStorage.setItem("UserInformation", JSON.stringify(_user));
|
||||
localStorage.setItem("accesstoken", _user.sessionToken);
|
||||
localStorage.setItem("scriptId", true);
|
||||
if (_user.ProfilePic) {
|
||||
localStorage.setItem("profileImg", _user.ProfilePic);
|
||||
} else {
|
||||
+1
-1
@@ -5,7 +5,7 @@ import {
|
||||
getBase64FromUrl,
|
||||
handleDownloadCertificate,
|
||||
handleDownloadPdf,
|
||||
handleToPrint
|
||||
handleToPrint,
|
||||
} from "../constant/Utils";
|
||||
import ModalUi from "../primitives/ModalUi";
|
||||
import Loader from "../primitives/Loader";
|
||||
+5
-3
@@ -7,7 +7,9 @@ import Alert from "../primitives/Alert";
|
||||
import { appInfo } from "../constant/appinfo";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { fetchAppInfo } from "../redux/reducers/infoReducer";
|
||||
import { emailRegex } from "../constant/const";
|
||||
import {
|
||||
emailRegex,
|
||||
} from "../constant/const";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import Loader from "../primitives/Loader";
|
||||
|
||||
@@ -46,7 +48,7 @@ function ForgotPassword() {
|
||||
if (state.email) {
|
||||
const username = state.email;
|
||||
try {
|
||||
await Parse.User.requestPasswordReset(username);
|
||||
await Parse.User.requestPasswordReset(username);
|
||||
setToast({ type: "success", message: t("reset-password-alert-1") });
|
||||
} catch (err) {
|
||||
console.log("err ", err.code);
|
||||
@@ -76,7 +78,7 @@ function ForgotPassword() {
|
||||
} catch (err) {
|
||||
console.log("err while logging out ", err);
|
||||
}
|
||||
setImage(appInfo?.applogo || undefined);
|
||||
setImage(appInfo?.applogo || undefined);
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
@@ -42,7 +42,8 @@ function Form() {
|
||||
}
|
||||
|
||||
const Forms = (props) => {
|
||||
const appName = "OpenSign™";
|
||||
const appName =
|
||||
"OpenSign™";
|
||||
const { t } = useTranslation();
|
||||
const abortController = new AbortController();
|
||||
const inputFileRef = useRef(null);
|
||||
@@ -105,12 +106,12 @@ const Forms = (props) => {
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
const initializeValues = async () => {
|
||||
setFormData((obj) => ({
|
||||
...obj,
|
||||
NotifyOnSignatures: true,
|
||||
SendinOrder: sendinorder,
|
||||
IsTourEnabled: istourenabled
|
||||
}));
|
||||
setFormData((obj) => ({
|
||||
...obj,
|
||||
NotifyOnSignatures: true,
|
||||
SendinOrder: sendinorder,
|
||||
IsTourEnabled: istourenabled
|
||||
}));
|
||||
};
|
||||
|
||||
function getFileAsArrayBuffer(file) {
|
||||
@@ -148,81 +149,17 @@ const Forms = (props) => {
|
||||
const name = generatePdfName(16);
|
||||
const pdfName = `${name?.split(".")[0]}.pdf`;
|
||||
setfileload(true);
|
||||
try {
|
||||
const res = await getFileAsArrayBuffer(files[0]);
|
||||
const flatPdf = await flattenPdf(res);
|
||||
const parseFile = new Parse.File(
|
||||
pdfName,
|
||||
[...flatPdf],
|
||||
"application/pdf"
|
||||
);
|
||||
|
||||
try {
|
||||
const response = await parseFile.save({
|
||||
progress: (progressValue, loaded, total, { type }) => {
|
||||
if (type === "upload" && progressValue !== null) {
|
||||
const percentCompleted = Math.round(
|
||||
(loaded * 100) / total
|
||||
);
|
||||
setpercentage(percentCompleted);
|
||||
}
|
||||
}
|
||||
});
|
||||
// The response object will contain information about the uploaded file
|
||||
// You can access the URL of the uploaded file using response.url()
|
||||
if (response.url()) {
|
||||
const fileRes = await getSecureUrl(response.url());
|
||||
if (fileRes.url) {
|
||||
setFileUpload(fileRes.url);
|
||||
setfileload(false);
|
||||
const tenantId = localStorage.getItem("TenantId");
|
||||
const title = generateTitleFromFilename(files?.[0]?.name);
|
||||
setFormData((obj) => ({ ...obj, Name: title }));
|
||||
SaveFileSize(size, fileRes.url, tenantId);
|
||||
return fileRes.url;
|
||||
} else {
|
||||
removeFile(e);
|
||||
}
|
||||
} else {
|
||||
removeFile(e);
|
||||
}
|
||||
} catch (error) {
|
||||
removeFile(e);
|
||||
console.error("Error uploading file:", error);
|
||||
}
|
||||
} catch (err) {
|
||||
if (err?.message?.includes("is encrypted")) {
|
||||
try {
|
||||
setIsDecrypting(true);
|
||||
const size = files?.[0].size;
|
||||
const name = generatePdfName(16);
|
||||
const url = "https://ai.nxglabs.in/decryptpdf"; //
|
||||
let formData = new FormData();
|
||||
formData.append("file", files[0]);
|
||||
formData.append("password", "");
|
||||
const config = {
|
||||
headers: { "content-type": "multipart/form-data" },
|
||||
responseType: "blob"
|
||||
};
|
||||
const response = await axios.post(url, formData, config);
|
||||
const pdfBlob = new Blob([response.data], {
|
||||
type: "application/pdf"
|
||||
});
|
||||
const pdfFile = new File([pdfBlob], name, {
|
||||
type: "application/pdf"
|
||||
});
|
||||
setIsDecrypting(false);
|
||||
setfileload(true);
|
||||
const res = await getFileAsArrayBuffer(pdfFile);
|
||||
const flatPdf = await flattenPdf(res);
|
||||
// Upload the file to Parse Server
|
||||
const parseFile = new Parse.File(
|
||||
name,
|
||||
[...flatPdf],
|
||||
"application/pdf"
|
||||
);
|
||||
const res = await getFileAsArrayBuffer(files[0]);
|
||||
const flatPdf = await flattenPdf(res);
|
||||
const parseFile = new Parse.File(
|
||||
pdfName,
|
||||
[...flatPdf],
|
||||
"application/pdf"
|
||||
);
|
||||
|
||||
await parseFile.save({
|
||||
try {
|
||||
const response = await parseFile.save({
|
||||
progress: (progressValue, loaded, total, { type }) => {
|
||||
if (type === "upload" && progressValue !== null) {
|
||||
const percentCompleted = Math.round(
|
||||
@@ -232,16 +169,16 @@ const Forms = (props) => {
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Retrieve the URL of the uploaded file
|
||||
if (parseFile.url()) {
|
||||
const fileRes = await getSecureUrl(parseFile.url());
|
||||
// The response object will contain information about the uploaded file
|
||||
// You can access the URL of the uploaded file using response.url()
|
||||
if (response.url()) {
|
||||
const fileRes = await getSecureUrl(response.url());
|
||||
if (fileRes.url) {
|
||||
setFileUpload(fileRes.url);
|
||||
removeFile();
|
||||
setfileload(false);
|
||||
const tenantId = localStorage.getItem("TenantId");
|
||||
const title = generateTitleFromFilename(files?.[0]?.name);
|
||||
setFormData((obj) => ({ ...obj, Name: title }));
|
||||
const tenantId = localStorage.getItem("TenantId");
|
||||
SaveFileSize(size, fileRes.url, tenantId);
|
||||
return fileRes.url;
|
||||
} else {
|
||||
@@ -250,22 +187,88 @@ const Forms = (props) => {
|
||||
} else {
|
||||
removeFile(e);
|
||||
}
|
||||
} catch (err) {
|
||||
removeFile();
|
||||
if (err?.response?.status === 401) {
|
||||
setIsPassword(true);
|
||||
} else {
|
||||
console.log("Error uploading file: ", err?.response);
|
||||
setIsDecrypting(false);
|
||||
e.target.value = "";
|
||||
}
|
||||
} catch (error) {
|
||||
removeFile(e);
|
||||
console.error("Error uploading file:", error);
|
||||
}
|
||||
} catch (err) {
|
||||
if (err?.message?.includes("is encrypted")) {
|
||||
try {
|
||||
setIsDecrypting(true);
|
||||
const size = files?.[0].size;
|
||||
const name = generatePdfName(16);
|
||||
const url = "https://ai.nxglabs.in/decryptpdf"; //
|
||||
let formData = new FormData();
|
||||
formData.append("file", files[0]);
|
||||
formData.append("password", "");
|
||||
const config = {
|
||||
headers: { "content-type": "multipart/form-data" },
|
||||
responseType: "blob"
|
||||
};
|
||||
const response = await axios.post(url, formData, config);
|
||||
const pdfBlob = new Blob([response.data], {
|
||||
type: "application/pdf"
|
||||
});
|
||||
const pdfFile = new File([pdfBlob], name, {
|
||||
type: "application/pdf"
|
||||
});
|
||||
setIsDecrypting(false);
|
||||
setfileload(true);
|
||||
const res = await getFileAsArrayBuffer(pdfFile);
|
||||
const flatPdf = await flattenPdf(res);
|
||||
// Upload the file to Parse Server
|
||||
const parseFile = new Parse.File(
|
||||
name,
|
||||
[...flatPdf],
|
||||
"application/pdf"
|
||||
);
|
||||
|
||||
await parseFile.save({
|
||||
progress: (progressValue, loaded, total, { type }) => {
|
||||
if (type === "upload" && progressValue !== null) {
|
||||
const percentCompleted = Math.round(
|
||||
(loaded * 100) / total
|
||||
);
|
||||
setpercentage(percentCompleted);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Retrieve the URL of the uploaded file
|
||||
if (parseFile.url()) {
|
||||
const fileRes = await getSecureUrl(parseFile.url());
|
||||
if (fileRes.url) {
|
||||
setFileUpload(fileRes.url);
|
||||
removeFile();
|
||||
const title = generateTitleFromFilename(
|
||||
files?.[0]?.name
|
||||
);
|
||||
setFormData((obj) => ({ ...obj, Name: title }));
|
||||
const tenantId = localStorage.getItem("TenantId");
|
||||
SaveFileSize(size, fileRes.url, tenantId);
|
||||
return fileRes.url;
|
||||
} else {
|
||||
removeFile(e);
|
||||
}
|
||||
} else {
|
||||
removeFile(e);
|
||||
}
|
||||
} catch (err) {
|
||||
removeFile();
|
||||
if (err?.response?.status === 401) {
|
||||
setIsPassword(true);
|
||||
} else {
|
||||
console.log("Error uploading file: ", err?.response);
|
||||
setIsDecrypting(false);
|
||||
e.target.value = "";
|
||||
}
|
||||
}
|
||||
} else {
|
||||
console.log("err ", err);
|
||||
setFileUpload("");
|
||||
removeFile(e);
|
||||
}
|
||||
} else {
|
||||
console.log("err ", err);
|
||||
setFileUpload("");
|
||||
removeFile(e);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const isImage = files?.[0]?.type.includes("image/");
|
||||
if (isImage) {
|
||||
@@ -290,50 +293,50 @@ const Forms = (props) => {
|
||||
});
|
||||
const size = files?.[0]?.size;
|
||||
const name = generatePdfName(16);
|
||||
const getFile = await pdfDoc.save({
|
||||
useObjectStreams: false
|
||||
});
|
||||
setfileload(true);
|
||||
const pdfName = `${name?.split(".")[0]}.pdf`;
|
||||
const parseFile = new Parse.File(
|
||||
pdfName,
|
||||
[...getFile],
|
||||
"application/pdf"
|
||||
);
|
||||
|
||||
try {
|
||||
const response = await parseFile.save({
|
||||
progress: (progressValue, loaded, total, { type }) => {
|
||||
if (type === "upload" && progressValue !== null) {
|
||||
const percentCompleted = Math.round(
|
||||
(loaded * 100) / total
|
||||
);
|
||||
setpercentage(percentCompleted);
|
||||
}
|
||||
}
|
||||
const getFile = await pdfDoc.save({
|
||||
useObjectStreams: false
|
||||
});
|
||||
// The response object will contain information about the uploaded file
|
||||
// You can access the URL of the uploaded file using response.url()
|
||||
if (response.url()) {
|
||||
const fileRes = await getSecureUrl(response.url());
|
||||
if (fileRes.url) {
|
||||
setFileUpload(fileRes.url);
|
||||
setfileload(false);
|
||||
const tenantId = localStorage.getItem("TenantId");
|
||||
const title = generateTitleFromFilename(files?.[0]?.name);
|
||||
setFormData((obj) => ({ ...obj, Name: title }));
|
||||
SaveFileSize(size, fileRes.url, tenantId);
|
||||
return fileRes.url;
|
||||
setfileload(true);
|
||||
const pdfName = `${name?.split(".")[0]}.pdf`;
|
||||
const parseFile = new Parse.File(
|
||||
pdfName,
|
||||
[...getFile],
|
||||
"application/pdf"
|
||||
);
|
||||
|
||||
try {
|
||||
const response = await parseFile.save({
|
||||
progress: (progressValue, loaded, total, { type }) => {
|
||||
if (type === "upload" && progressValue !== null) {
|
||||
const percentCompleted = Math.round(
|
||||
(loaded * 100) / total
|
||||
);
|
||||
setpercentage(percentCompleted);
|
||||
}
|
||||
}
|
||||
});
|
||||
// The response object will contain information about the uploaded file
|
||||
// You can access the URL of the uploaded file using response.url()
|
||||
if (response.url()) {
|
||||
const fileRes = await getSecureUrl(response.url());
|
||||
if (fileRes.url) {
|
||||
setFileUpload(fileRes.url);
|
||||
setfileload(false);
|
||||
const tenantId = localStorage.getItem("TenantId");
|
||||
const title = generateTitleFromFilename(files?.[0]?.name);
|
||||
setFormData((obj) => ({ ...obj, Name: title }));
|
||||
SaveFileSize(size, fileRes.url, tenantId);
|
||||
return fileRes.url;
|
||||
} else {
|
||||
removeFile(e);
|
||||
}
|
||||
} else {
|
||||
removeFile(e);
|
||||
}
|
||||
} else {
|
||||
} catch (error) {
|
||||
removeFile(e);
|
||||
console.error("Error uploading file:", error);
|
||||
}
|
||||
} catch (error) {
|
||||
removeFile(e);
|
||||
console.error("Error uploading file:", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -408,11 +411,11 @@ const Forms = (props) => {
|
||||
object.set("RemindOnceInEvery", remindOnceInEvery);
|
||||
object.set("IsTourEnabled", isTourEnabled);
|
||||
object.set("TimeToCompleteDays", TimeToCompleteDays);
|
||||
object.set("AllowModifications", false);
|
||||
object.set("IsEnableOTP", false);
|
||||
if (formData.NotifyOnSignatures !== undefined) {
|
||||
object.set("NotifyOnSignatures", formData.NotifyOnSignatures);
|
||||
}
|
||||
object.set("AllowModifications", false);
|
||||
object.set("IsEnableOTP", false);
|
||||
if (formData.NotifyOnSignatures !== undefined) {
|
||||
object.set("NotifyOnSignatures", formData.NotifyOnSignatures);
|
||||
}
|
||||
if (formData?.RedirectUrl) {
|
||||
object.set("RedirectUrl", formData.RedirectUrl);
|
||||
}
|
||||
@@ -451,9 +454,10 @@ const Forms = (props) => {
|
||||
setSigners([]);
|
||||
setBcc([]);
|
||||
setFolder({ ObjectId: "", Name: "" });
|
||||
const notifySign = extUserData?.NotifyOnSignatures
|
||||
? extUserData?.NotifyOnSignatures
|
||||
: true;
|
||||
const notifySign =
|
||||
extUserData?.NotifyOnSignatures
|
||||
? extUserData?.NotifyOnSignatures
|
||||
: true;
|
||||
setFormData({
|
||||
Name: "",
|
||||
Description: "",
|
||||
@@ -529,9 +533,10 @@ const Forms = (props) => {
|
||||
setSigners([]);
|
||||
setBcc([]);
|
||||
setFolder({ ObjectId: "", Name: "" });
|
||||
const notifySign = extUserData?.NotifyOnSignatures
|
||||
? extUserData?.NotifyOnSignatures
|
||||
: true;
|
||||
const notifySign =
|
||||
extUserData?.NotifyOnSignatures
|
||||
? extUserData?.NotifyOnSignatures
|
||||
: true;
|
||||
let obj = {
|
||||
Name: "",
|
||||
Description: "",
|
||||
@@ -585,28 +590,36 @@ const Forms = (props) => {
|
||||
type: "application/pdf"
|
||||
});
|
||||
setIsDecrypting(false);
|
||||
const res = await getFileAsArrayBuffer(pdfFile);
|
||||
const flatPdf = await flattenPdf(res);
|
||||
const parseFile = new Parse.File(name, [...flatPdf], "application/pdf");
|
||||
await parseFile.save({
|
||||
progress: (progressValue, loaded, total, { type }) => {
|
||||
if (type === "upload" && progressValue !== null) {
|
||||
const percentCompleted = Math.round((loaded * 100) / total);
|
||||
setpercentage(percentCompleted);
|
||||
const res = await getFileAsArrayBuffer(pdfFile);
|
||||
const flatPdf = await flattenPdf(res);
|
||||
const parseFile = new Parse.File(name, [...flatPdf], "application/pdf");
|
||||
await parseFile.save({
|
||||
progress: (progressValue, loaded, total, { type }) => {
|
||||
if (type === "upload" && progressValue !== null) {
|
||||
const percentCompleted = Math.round((loaded * 100) / total);
|
||||
setpercentage(percentCompleted);
|
||||
}
|
||||
}
|
||||
});
|
||||
// Retrieve the URL of the uploaded file
|
||||
if (parseFile.url()) {
|
||||
const fileRes = await getSecureUrl(parseFile.url());
|
||||
if (fileRes.url) {
|
||||
setFileUpload(fileRes.url);
|
||||
removeFile();
|
||||
const title = generateTitleFromFilename(formData?.file?.name);
|
||||
setFormData((obj) => ({ ...obj, password: "", Name: title }));
|
||||
const tenantId = localStorage.getItem("TenantId");
|
||||
SaveFileSize(size, fileRes.url, tenantId);
|
||||
return fileRes.url;
|
||||
} else {
|
||||
removeFile();
|
||||
setFormData((prev) => ({ ...prev, password: "" }));
|
||||
setIsDecrypting(false);
|
||||
if (inputFileRef.current) {
|
||||
inputFileRef.current.value = ""; // Set file input value to empty string
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
// Retrieve the URL of the uploaded file
|
||||
if (parseFile.url()) {
|
||||
const fileRes = await getSecureUrl(parseFile.url());
|
||||
if (fileRes.url) {
|
||||
setFileUpload(fileRes.url);
|
||||
removeFile();
|
||||
const title = generateTitleFromFilename(formData?.file?.name);
|
||||
setFormData((obj) => ({ ...obj, password: "", Name: title }));
|
||||
const tenantId = localStorage.getItem("TenantId");
|
||||
SaveFileSize(size, fileRes.url, tenantId);
|
||||
return fileRes.url;
|
||||
} else {
|
||||
removeFile();
|
||||
setFormData((prev) => ({ ...prev, password: "" }));
|
||||
@@ -615,14 +628,6 @@ const Forms = (props) => {
|
||||
inputFileRef.current.value = ""; // Set file input value to empty string
|
||||
}
|
||||
}
|
||||
} else {
|
||||
removeFile();
|
||||
setFormData((prev) => ({ ...prev, password: "" }));
|
||||
setIsDecrypting(false);
|
||||
if (inputFileRef.current) {
|
||||
inputFileRef.current.value = ""; // Set file input value to empty string
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
removeFile();
|
||||
if (err?.response?.status === 401) {
|
||||
@@ -744,7 +749,9 @@ const Forms = (props) => {
|
||||
)}
|
||||
<div className="text-xs">
|
||||
<label className="block">
|
||||
{`${`${t("report-heading.File")} (${t("file-type")}`}${")"}`}
|
||||
{`${`${t("report-heading.File")} (${t("file-type")}`}${
|
||||
")"
|
||||
}`}
|
||||
<span className="text-red-500 text-[13px]">*</span>
|
||||
</label>
|
||||
{fileupload.length > 0 ? (
|
||||
@@ -768,7 +775,9 @@ const Forms = (props) => {
|
||||
className="op-file-input op-file-input-bordered op-file-input-sm focus:outline-none hover:border-base-content w-full text-xs"
|
||||
onChange={(e) => handleFileInput(e)}
|
||||
ref={inputFileRef}
|
||||
accept={"application/pdf,image/png,image/jpeg"}
|
||||
accept={
|
||||
"application/pdf,image/png,image/jpeg"
|
||||
}
|
||||
onInvalid={(e) =>
|
||||
e.target.setCustomValidity(t("input-required"))
|
||||
}
|
||||
@@ -1058,7 +1067,10 @@ const Forms = (props) => {
|
||||
{isAdvanceOpt && (
|
||||
<div
|
||||
style={{
|
||||
height: props.title === "New Template" ? "100px" : "280px"
|
||||
height:
|
||||
props.title === "New Template"
|
||||
? "100px"
|
||||
: "280px"
|
||||
}}
|
||||
className="w-[1px] bg-gray-300 m-auto hidden md:inline-block"
|
||||
></div>
|
||||
@@ -1167,7 +1179,11 @@ const Forms = (props) => {
|
||||
</Tooltip>
|
||||
</label>
|
||||
<div className="flex flex-col md:flex-row md:gap-4">
|
||||
<div className={`flex items-center gap-2 ml-2 mb-1`}>
|
||||
<div
|
||||
className={
|
||||
`flex items-center gap-2 ml-2 mb-1`
|
||||
}
|
||||
>
|
||||
<input
|
||||
className="mr-[2px] op-radio op-radio-xs"
|
||||
type="radio"
|
||||
@@ -1176,7 +1192,11 @@ const Forms = (props) => {
|
||||
/>
|
||||
<div className="text-center">{t("yes")}</div>
|
||||
</div>
|
||||
<div className={`flex items-center gap-2 ml-2 mb-1`}>
|
||||
<div
|
||||
className={
|
||||
`flex items-center gap-2 ml-2 mb-1`
|
||||
}
|
||||
>
|
||||
<input
|
||||
className="mr-[2px] op-radio op-radio-xs"
|
||||
type="radio"
|
||||
@@ -1,8 +1,13 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useNavigate, useParams } from "react-router";
|
||||
import axios from "axios";
|
||||
import { emailRegex } from "../constant/const";
|
||||
import { contractUsers, saveLanguageInLocal } from "../constant/Utils";
|
||||
import {
|
||||
emailRegex,
|
||||
} from "../constant/const";
|
||||
import {
|
||||
contractUsers,
|
||||
saveLanguageInLocal
|
||||
} from "../constant/Utils";
|
||||
import logo from "../assets/images/logo.png";
|
||||
import { appInfo } from "../constant/appinfo";
|
||||
import Parse from "parse";
|
||||
@@ -33,6 +38,7 @@ function GuestLogin() {
|
||||
const [sendmail, setSendmail] = useState();
|
||||
const [contact, setContact] = useState({ name: "", phone: "", email: "" });
|
||||
|
||||
|
||||
const navigateToDoc = async (docId, contactId) => {
|
||||
try {
|
||||
const docDetails = await Parse.Cloud.run("getDocument", {
|
||||
@@ -62,12 +68,16 @@ function GuestLogin() {
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
|
||||
//function generate serverUrl and parseAppId from url and save it in local storage
|
||||
const handleServerUrl = async () => {
|
||||
setAppLogo(logo);
|
||||
setAppLogo(logo);
|
||||
|
||||
localStorage.clear(); // Clears everything
|
||||
localStorage.setItem("appname", "OpenSign™");
|
||||
localStorage.setItem(
|
||||
"appname",
|
||||
"OpenSign™"
|
||||
);
|
||||
//save isGuestSigner true in local to handle login flow header in mobile view
|
||||
localStorage.setItem("isGuestSigner", true);
|
||||
saveLanguageInLocal(i18n);
|
||||
@@ -119,7 +129,7 @@ function GuestLogin() {
|
||||
try {
|
||||
const params = {
|
||||
email: email?.toLowerCase()?.replace(/\s/g, "")?.toString(),
|
||||
docId: documentId
|
||||
docId: documentId,
|
||||
};
|
||||
const Otp = await Parse.Cloud.run("SendOTPMailV1", params);
|
||||
if (Otp) {
|
||||
@@ -200,6 +210,7 @@ function GuestLogin() {
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const handleUserData = async (e) => {
|
||||
e.preventDefault();
|
||||
if (!emailRegex.test(contact.email?.toLowerCase()?.replace(/\s/g, ""))) {
|
||||
@@ -323,12 +334,12 @@ function GuestLogin() {
|
||||
className="op-btn op-btn-primary flex items-center"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
SendOtp();
|
||||
SendOtp();
|
||||
}}
|
||||
disabled={loading}
|
||||
>
|
||||
<i className="fa-light fa-message-sms mr-2"></i>
|
||||
{loading ? t("loading") : t("get-verification-code")}
|
||||
<i className="fa-light fa-message-sms mr-2"></i>
|
||||
{loading ? t("loading") : t("get-verification-code")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -7,7 +7,9 @@ import { NavLink, useNavigate, useLocation } from "react-router";
|
||||
import login_img from "../assets/images/login_img.svg";
|
||||
import { useWindowSize } from "../hook/useWindowSize";
|
||||
import ModalUi from "../primitives/ModalUi";
|
||||
import { emailRegex } from "../constant/const";
|
||||
import {
|
||||
emailRegex,
|
||||
} from "../constant/const";
|
||||
import Alert from "../primitives/Alert";
|
||||
import { appInfo } from "../constant/appinfo";
|
||||
import { fetchAppInfo } from "../redux/reducers/infoReducer";
|
||||
@@ -22,7 +24,8 @@ import { useTranslation } from "react-i18next";
|
||||
import SelectLanguage from "../components/pdf/SelectLanguage";
|
||||
|
||||
function Login() {
|
||||
const appName = "OpenSign™";
|
||||
const appName =
|
||||
"OpenSign™";
|
||||
const { t, i18n } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
@@ -30,17 +33,12 @@ function Login() {
|
||||
const { width } = useWindowSize();
|
||||
const [state, setState] = useState({
|
||||
email: "",
|
||||
password: "",
|
||||
alertType: "success",
|
||||
alertMsg: "",
|
||||
password: "",
|
||||
passwordVisible: false,
|
||||
mobile: "",
|
||||
phone: "",
|
||||
scanResult: "",
|
||||
baseUrl: localStorage.getItem("baseUrl"),
|
||||
parseAppId: localStorage.getItem("parseAppId"),
|
||||
loading: false,
|
||||
thirdpartyLoader: false
|
||||
thirdpartyLoader: false,
|
||||
});
|
||||
const [userDetails, setUserDetails] = useState({
|
||||
Company: "",
|
||||
@@ -54,6 +52,18 @@ function Login() {
|
||||
// eslint-disable-next-line
|
||||
}, []);
|
||||
|
||||
|
||||
const setLocalVar = (user) => {
|
||||
localStorage.setItem("accesstoken", user.sessionToken);
|
||||
localStorage.setItem("UserInformation", JSON.stringify(user));
|
||||
localStorage.setItem("userEmail", user.email);
|
||||
if (user.ProfilePic) {
|
||||
localStorage.setItem("profileImg", user.ProfilePic);
|
||||
} else {
|
||||
localStorage.setItem("profileImg", "");
|
||||
}
|
||||
};
|
||||
|
||||
const showToast = (type, msg) => {
|
||||
setState({ ...state, loading: false, alertType: type, alertMsg: msg });
|
||||
setTimeout(() => setState({ ...state, alertMsg: "" }), 2000);
|
||||
@@ -62,7 +72,9 @@ function Login() {
|
||||
const app = await getAppLogo();
|
||||
if (app?.error === "invalid_json") {
|
||||
setErrMsg(t("server-down", { appName: appName }));
|
||||
} else if (app?.user === "not_exist") {
|
||||
} else if (
|
||||
app?.user === "not_exist"
|
||||
) {
|
||||
navigate("/addadmin");
|
||||
}
|
||||
if (app?.logo) {
|
||||
@@ -109,21 +121,11 @@ function Login() {
|
||||
// Get extended user data (including 2FA status) using cloud function
|
||||
try {
|
||||
await Parse.User.become(_user.sessionToken);
|
||||
// Store basic user info needed for further steps
|
||||
localStorage.setItem("UserInformation", JSON.stringify(_user));
|
||||
localStorage.setItem("userEmail", email);
|
||||
localStorage.setItem("accesstoken", _user.sessionToken);
|
||||
localStorage.setItem("scriptId", true);
|
||||
if (_user.ProfilePic) {
|
||||
localStorage.setItem("profileImg", _user.ProfilePic);
|
||||
} else {
|
||||
localStorage.setItem("profileImg", "");
|
||||
}
|
||||
setLocalVar(_user);
|
||||
await continueLoginFlow();
|
||||
} catch (error) {
|
||||
console.error("Error checking 2FA status:", error);
|
||||
showToast("danger", t("something-went-wrong-mssg"));
|
||||
setState({ ...state, loading: false });
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error while logging in user", error);
|
||||
@@ -134,6 +136,7 @@ function Login() {
|
||||
const setThirdpartyLoader = (value) => {
|
||||
setState({ ...state, thirdpartyLoader: value });
|
||||
};
|
||||
|
||||
const thirdpartyLoginfn = async (sessionToken) => {
|
||||
const baseUrl = localStorage.getItem("baseUrl");
|
||||
const parseAppId = localStorage.getItem("parseAppId");
|
||||
@@ -148,74 +151,57 @@ function Login() {
|
||||
});
|
||||
if (res.data) {
|
||||
let _user = res.data;
|
||||
localStorage.setItem("UserInformation", JSON.stringify(_user));
|
||||
localStorage.setItem("userEmail", _user.email);
|
||||
localStorage.setItem("accesstoken", _user.sessionToken);
|
||||
localStorage.setItem("scriptId", true);
|
||||
if (_user.ProfilePic) {
|
||||
localStorage.setItem("profileImg", _user.ProfilePic);
|
||||
} else {
|
||||
localStorage.setItem("profileImg", "");
|
||||
}
|
||||
setLocalVar(_user);
|
||||
// Check extended class user role and tenentId
|
||||
try {
|
||||
const userSettings = appInfo.settings;
|
||||
await Parse.Cloud.run("getUserDetails")
|
||||
.then(async (extUser) => {
|
||||
if (extUser) {
|
||||
const IsDisabled = extUser?.get("IsDisabled") || false;
|
||||
if (!IsDisabled) {
|
||||
const userRole = extUser?.get("UserRole");
|
||||
const menu =
|
||||
userRole &&
|
||||
userSettings.find((menu) => menu.role === userRole);
|
||||
if (menu) {
|
||||
const _currentRole = userRole;
|
||||
const redirectUrl =
|
||||
location?.state?.from || `/${menu.pageType}/${menu.pageId}`;
|
||||
const _role = _currentRole.replace("contracts_", "");
|
||||
localStorage.setItem("_user_role", _role);
|
||||
const results = [extUser];
|
||||
const extUser_stringify = JSON.stringify(results);
|
||||
localStorage.setItem("Extand_Class", extUser_stringify);
|
||||
const extInfo = JSON.parse(JSON.stringify(extUser));
|
||||
localStorage.setItem("userEmail", extInfo?.Email);
|
||||
localStorage.setItem("username", extInfo?.Name);
|
||||
if (extInfo?.TenantId) {
|
||||
const tenant = {
|
||||
Id: extInfo?.TenantId?.objectId || "",
|
||||
Name: extInfo?.TenantId?.TenantName || ""
|
||||
};
|
||||
localStorage.setItem("TenantId", tenant?.Id);
|
||||
dispatch(showTenant(tenant?.Name));
|
||||
localStorage.setItem("TenantName", tenant?.Name);
|
||||
}
|
||||
localStorage.setItem("PageLanding", menu.pageId);
|
||||
localStorage.setItem("defaultmenuid", menu.menuId);
|
||||
localStorage.setItem("pageType", menu.pageType);
|
||||
navigate(redirectUrl);
|
||||
} else {
|
||||
showToast("danger", t("role-not-found"));
|
||||
logOutUser();
|
||||
}
|
||||
} else {
|
||||
showToast("danger", t("do-not-access-contact-admin"));
|
||||
logOutUser();
|
||||
const extUser = await Parse.Cloud.run("getUserDetails");
|
||||
if (extUser) {
|
||||
const IsDisabled = extUser?.get("IsDisabled") || false;
|
||||
if (!IsDisabled) {
|
||||
const userRole = extUser?.get("UserRole");
|
||||
const menu =
|
||||
userRole && userSettings.find((menu) => menu.role === userRole);
|
||||
if (menu) {
|
||||
const _currentRole = userRole;
|
||||
const redirectUrl =
|
||||
location?.state?.from || `/${menu.pageType}/${menu.pageId}`;
|
||||
const _role = _currentRole.replace("contracts_", "");
|
||||
const extInfo = JSON.parse(JSON.stringify(extUser));
|
||||
localStorage.setItem("_user_role", _role);
|
||||
localStorage.setItem("Extand_Class", JSON.stringify([extUser]));
|
||||
localStorage.setItem("userEmail", extInfo?.Email);
|
||||
localStorage.setItem("username", extInfo?.Name);
|
||||
if (extInfo?.TenantId) {
|
||||
const tenant = {
|
||||
Id: extInfo?.TenantId?.objectId || "",
|
||||
Name: extInfo?.TenantId?.TenantName || ""
|
||||
};
|
||||
localStorage.setItem("TenantId", tenant?.Id);
|
||||
dispatch(showTenant(tenant?.Name));
|
||||
localStorage.setItem("TenantName", tenant?.Name);
|
||||
}
|
||||
localStorage.setItem("PageLanding", menu.pageId);
|
||||
localStorage.setItem("defaultmenuid", menu.menuId);
|
||||
localStorage.setItem("pageType", menu.pageType);
|
||||
navigate(redirectUrl);
|
||||
} else {
|
||||
showToast("danger", t("user-not-found"));
|
||||
showToast("danger", t("role-not-found"));
|
||||
logOutUser();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("err in fetching extUser", err);
|
||||
showToast("danger", `${err.message}`);
|
||||
const payload = { sessionToken: sessionToken };
|
||||
handleSubmitbtn(payload);
|
||||
});
|
||||
} else {
|
||||
showToast("danger", t("do-not-access-contact-admin"));
|
||||
logOutUser();
|
||||
}
|
||||
} else {
|
||||
showToast("danger", t("user-not-found"));
|
||||
logOutUser();
|
||||
}
|
||||
} catch (error) {
|
||||
showToast("danger", `${error.message}`);
|
||||
console.log(error);
|
||||
console.error("err in fetching extUser", err);
|
||||
showToast("danger", `${err.message}`);
|
||||
const payload = { sessionToken: _user.sessionToken };
|
||||
handleSubmitbtn(payload);
|
||||
} finally {
|
||||
setThirdpartyLoader(false);
|
||||
}
|
||||
@@ -227,14 +213,7 @@ function Login() {
|
||||
try {
|
||||
const user = await Parse.User.become(localStorage.getItem("accesstoken"));
|
||||
const _user = user.toJSON();
|
||||
localStorage.setItem("UserInformation", JSON.stringify(_user));
|
||||
localStorage.setItem("accesstoken", _user.sessionToken);
|
||||
localStorage.setItem("scriptId", true);
|
||||
if (_user.ProfilePic) {
|
||||
localStorage.setItem("profileImg", _user.ProfilePic);
|
||||
} else {
|
||||
localStorage.setItem("profileImg", "");
|
||||
}
|
||||
setLocalVar(_user);
|
||||
const userSettings = appInfo.settings;
|
||||
const extUser = await Parse.Cloud.run("getUserDetails");
|
||||
if (extUser) {
|
||||
@@ -245,14 +224,12 @@ function Login() {
|
||||
const menu =
|
||||
userRole && userSettings.find((menu) => menu.role === userRole);
|
||||
if (menu) {
|
||||
const extInfo = JSON.parse(JSON.stringify(extUser));
|
||||
const _role = _currentRole.replace("contracts_", "");
|
||||
localStorage.setItem("_user_role", _role);
|
||||
const redirectUrl =
|
||||
location?.state?.from || `/${menu.pageType}/${menu.pageId}`;
|
||||
const results = [extUser];
|
||||
const extendedInfo_stringify = JSON.stringify(results);
|
||||
localStorage.setItem("Extand_Class", extendedInfo_stringify);
|
||||
const extInfo = JSON.parse(JSON.stringify(extUser));
|
||||
localStorage.setItem("Extand_Class", JSON.stringify([extUser]));
|
||||
localStorage.setItem("userEmail", extInfo.Email);
|
||||
localStorage.setItem("username", extInfo.Name);
|
||||
if (extInfo?.TenantId) {
|
||||
@@ -267,8 +244,7 @@ function Login() {
|
||||
localStorage.setItem("PageLanding", menu.pageId);
|
||||
localStorage.setItem("defaultmenuid", menu.menuId);
|
||||
localStorage.setItem("pageType", menu.pageType);
|
||||
// Redirect to the appropriate URL after successful login
|
||||
navigate(redirectUrl);
|
||||
navigate(redirectUrl);
|
||||
} else {
|
||||
setState({ ...state, loading: false });
|
||||
logOutUser();
|
||||
@@ -377,18 +353,15 @@ function Login() {
|
||||
const _currentRole = userRole;
|
||||
const redirectUrl =
|
||||
location?.state?.from || `/${menu.pageType}/${menu.pageId}`;
|
||||
let _role = _currentRole.replace("contracts_", "");
|
||||
const _role = _currentRole.replace("contracts_", "");
|
||||
localStorage.setItem("_user_role", _role);
|
||||
const checkLanguage = extUser?.get("Language");
|
||||
if (checkLanguage) {
|
||||
checkLanguage && i18n.changeLanguage(checkLanguage);
|
||||
}
|
||||
|
||||
// Continue with storing user data and redirecting
|
||||
const results = [extUser];
|
||||
const extUser_str = JSON.stringify(results);
|
||||
localStorage.setItem("Extand_Class", extUser_str);
|
||||
const extInfo = JSON.parse(JSON.stringify(extUser));
|
||||
// Continue with storing user data and redirecting
|
||||
localStorage.setItem("Extand_Class", JSON.stringify([extUser]));
|
||||
localStorage.setItem("userEmail", extInfo.Email);
|
||||
localStorage.setItem("username", extInfo.Name);
|
||||
if (extInfo?.TenantId) {
|
||||
@@ -403,9 +376,8 @@ function Login() {
|
||||
localStorage.setItem("PageLanding", menu.pageId);
|
||||
localStorage.setItem("defaultmenuid", menu.menuId);
|
||||
localStorage.setItem("pageType", menu.pageType);
|
||||
|
||||
setState({ ...state, loading: false });
|
||||
navigate(redirectUrl);
|
||||
setState({ ...state, loading: false });
|
||||
navigate(redirectUrl);
|
||||
} else {
|
||||
setState({ ...state, loading: false });
|
||||
setIsModal(true);
|
||||
@@ -415,8 +387,8 @@ function Login() {
|
||||
logOutUser();
|
||||
}
|
||||
} else {
|
||||
showToast("danger", t("user-not-found"));
|
||||
logOutUser();
|
||||
showToast("danger", t("user-not-found"));
|
||||
logOutUser();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error during login flow", error);
|
||||
@@ -483,35 +455,39 @@ function Login() {
|
||||
onInput={(e) => e.target.setCustomValidity("")}
|
||||
/>
|
||||
<hr className="my-1 border-none" />
|
||||
<label className="block text-xs" htmlFor="password">
|
||||
{t("password")}
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
id="password"
|
||||
type={state.passwordVisible ? "text" : "password"}
|
||||
className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
|
||||
name="password"
|
||||
value={state.password}
|
||||
autoComplete="current-password"
|
||||
onChange={handleChange}
|
||||
onInvalid={(e) =>
|
||||
e.target.setCustomValidity(t("input-required"))
|
||||
}
|
||||
onInput={(e) => e.target.setCustomValidity("")}
|
||||
required
|
||||
/>
|
||||
<span
|
||||
className="absolute cursor-pointer top-[50%] right-[10px] -translate-y-[50%] text-base-content"
|
||||
onClick={togglePasswordVisibility}
|
||||
>
|
||||
{state.passwordVisible ? (
|
||||
<i className="fa-light fa-eye-slash text-xs pb-1" /> // Close eye icon
|
||||
) : (
|
||||
<i className="fa-light fa-eye text-xs pb-1 " /> // Open eye icon
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<label className="block text-xs" htmlFor="password">
|
||||
{t("password")}
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
id="password"
|
||||
type={
|
||||
state.passwordVisible ? "text" : "password"
|
||||
}
|
||||
className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
|
||||
name="password"
|
||||
value={state.password}
|
||||
autoComplete="current-password"
|
||||
onChange={handleChange}
|
||||
onInvalid={(e) =>
|
||||
e.target.setCustomValidity(
|
||||
t("input-required")
|
||||
)
|
||||
}
|
||||
onInput={(e) => e.target.setCustomValidity("")}
|
||||
required
|
||||
/>
|
||||
<span
|
||||
className="absolute cursor-pointer top-[50%] right-[10px] -translate-y-[50%] text-base-content"
|
||||
onClick={togglePasswordVisibility}
|
||||
>
|
||||
{state.passwordVisible ? (
|
||||
<i className="fa-light fa-eye-slash text-xs pb-1" /> // Close eye icon
|
||||
) : (
|
||||
<i className="fa-light fa-eye text-xs pb-1 " /> // Open eye icon
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="relative mt-1">
|
||||
<NavLink
|
||||
+13
-14
@@ -1,13 +1,17 @@
|
||||
import React, { useEffect, useState, useRef } from "react";
|
||||
import "../styles/opensigndrive.css";
|
||||
import { iconColor } from "../constant/const";
|
||||
import { getDrive } from "../constant/Utils";
|
||||
import {
|
||||
iconColor,
|
||||
} from "../constant/const";
|
||||
import {
|
||||
getDrive
|
||||
} from "../constant/Utils";
|
||||
import { useNavigate } from "react-router";
|
||||
import Title from "../components/Title";
|
||||
import Parse from "parse";
|
||||
import ModalUi from "../primitives/ModalUi";
|
||||
import TourContentWithBtn from "../primitives/TourContentWithBtn";
|
||||
import Tour from "reactour";
|
||||
import Tour from "../primitives/Tour";
|
||||
import axios from "axios";
|
||||
import Loader from "../primitives/Loader";
|
||||
import { useTranslation } from "react-i18next";
|
||||
@@ -25,7 +29,8 @@ const AppLoader = () => {
|
||||
);
|
||||
};
|
||||
function Opensigndrive() {
|
||||
const appName = "OpenSign™";
|
||||
const appName =
|
||||
"OpenSign™";
|
||||
const drivename = appName === "OpenSign™" ? "OpenSign™" : "";
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
@@ -128,7 +133,7 @@ function Opensigndrive() {
|
||||
}
|
||||
];
|
||||
const getDetails = async () => {
|
||||
getPdfDocumentList();
|
||||
getPdfDocumentList();
|
||||
};
|
||||
//function for get all pdf document list
|
||||
const getPdfDocumentList = async (disbaleLoading) => {
|
||||
@@ -669,9 +674,7 @@ function Opensigndrive() {
|
||||
</button>
|
||||
<div
|
||||
id="folder-menu"
|
||||
className={`${
|
||||
isOptions ? "dropdown show dropDownStyle" : "dropdown"
|
||||
} hidden md:block cursor-pointer hover:bg-gray-200 p-2 rounded-md`}
|
||||
className={`${isOptions ? "dropdown show dropDownStyle" : "dropdown"} hidden md:block cursor-pointer hover:bg-gray-200 p-2 rounded-md`}
|
||||
onClick={() => setIsOptions(!isOptions)}
|
||||
>
|
||||
<div data-tut="reactourSecond">
|
||||
@@ -789,18 +792,14 @@ function Opensigndrive() {
|
||||
onClick={() => setIsList(!isList)}
|
||||
>
|
||||
<i
|
||||
className={`${
|
||||
isList ? "fa-light fa-th-large" : "fa-light fa-list"
|
||||
} text-[20px]`}
|
||||
className={`${isList ? "fa-light fa-th-large" : "fa-light fa-list"} text-[20px]`}
|
||||
style={{ color: `${iconColor}` }}
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
</div>
|
||||
<div
|
||||
id="folder-menu"
|
||||
className={`${
|
||||
isOptions ? "dropdown show dropDownStyle" : "dropdown"
|
||||
} md:hidden`}
|
||||
className={`${isOptions ? "dropdown show dropDownStyle" : "dropdown"} md:hidden`}
|
||||
onClick={() => setIsOptions(!isOptions)}
|
||||
>
|
||||
<div
|
||||
+652
-761
File diff suppressed because it is too large
Load Diff
+129
-78
@@ -3,17 +3,19 @@ import axios from "axios";
|
||||
import Parse from "parse";
|
||||
import "../styles/signature.css";
|
||||
import { PDFDocument } from "pdf-lib";
|
||||
import { maxTitleLength } from "../constant/const";
|
||||
import {
|
||||
maxTitleLength
|
||||
} from "../constant/const";
|
||||
import { DndProvider } from "react-dnd";
|
||||
import { HTML5Backend } from "react-dnd-html5-backend";
|
||||
import { useDrop } from "react-dnd";
|
||||
import RenderAllPdfPage from "../components/pdf/RenderAllPdfPage";
|
||||
import WidgetComponent from "../components/pdf/WidgetComponent";
|
||||
import Tour from "reactour";
|
||||
import Tour from "../primitives/Tour";
|
||||
import { useLocation, useParams } from "react-router";
|
||||
import SignerListPlace from "../components/pdf/SignerListPlace";
|
||||
import Header from "../components/pdf/PdfHeader";
|
||||
import { RWebShare } from "react-web-share";
|
||||
import ShareButton from "../primitives/ShareButton";
|
||||
import {
|
||||
replaceMailVaribles,
|
||||
pdfNewWidthFun,
|
||||
@@ -66,11 +68,14 @@ import LottieWithLoader from "../primitives/DotLottieReact";
|
||||
import Alert from "../primitives/Alert";
|
||||
import AsyncSelect from "react-select/async";
|
||||
import AddContact from "../primitives/AddContact";
|
||||
import WidgetsValueModal from "../components/pdf/WidgetsValueModal.jsx";
|
||||
|
||||
function PlaceHolderSign() {
|
||||
const { t } = useTranslation();
|
||||
const copyUrlRef = useRef(null);
|
||||
const appName = "OpenSign™";
|
||||
const isShowModal = useSelector((state) => state.widget.isShowModal);
|
||||
const appName =
|
||||
"OpenSign™";
|
||||
const editorRef = useRef();
|
||||
const { state } = useLocation();
|
||||
const navigate = useNavigate();
|
||||
@@ -118,7 +123,8 @@ function PlaceHolderSign() {
|
||||
const [selectedEmail, setSelectedEmail] = useState(false);
|
||||
const [isResize, setIsResize] = useState(false);
|
||||
const [zIndex, setZIndex] = useState(1);
|
||||
const [signKey, setSignKey] = useState();
|
||||
// tempSignerId is used to temporarily store the currently selected signer's unique ID, When editing a text widget, it automatically attaches a prefill user, and since prefill users are not shown in the signer list, the selected signer from before editing would be lost. To handle this, we store the currently selected signer's unique ID in tempSignerId before entering the text widget edit mode. Once the text widget settings are completed,
|
||||
// we restore the original selected signer by setting tempSignerId back to uniqueId.This ensures that the correct signer remains selected and visible in the UI even after interacting with a prefill-only widget like the text widget.
|
||||
const [tempSignerId, setTempSignerId] = useState("");
|
||||
const [blockColor, setBlockColor] = useState("");
|
||||
const [isTextSetting, setIsTextSetting] = useState(false);
|
||||
@@ -131,14 +137,11 @@ function PlaceHolderSign() {
|
||||
const [isDontShow, setIsDontShow] = useState(false);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [showDropdown, setShowDropdown] = useState(false);
|
||||
const [widgetType, setWidgetType] = useState("");
|
||||
const [isUiLoading, setIsUiLoading] = useState(false);
|
||||
const [isRadio, setIsRadio] = useState(false);
|
||||
const [currWidgetsDetails, setCurrWidgetsDetails] = useState({});
|
||||
const [selectWidgetId, setSelectWidgetId] = useState("");
|
||||
const [isCheckbox, setIsCheckbox] = useState(false);
|
||||
const [isNameModal, setIsNameModal] = useState(false);
|
||||
const [widgetName, setWidgetName] = useState(false);
|
||||
const [mailStatus, setMailStatus] = useState("");
|
||||
const [isCurrUser, setIsCurrUser] = useState(false);
|
||||
const [pdfArrayBuffer, setPdfArrayBuffer] = useState("");
|
||||
@@ -510,7 +513,8 @@ function PlaceHolderSign() {
|
||||
pageNumber,
|
||||
containerWH
|
||||
);
|
||||
let dropData = [];
|
||||
let dropData = [],
|
||||
dropObj;
|
||||
let placeHolder;
|
||||
const dragTypeValue = item?.text ? item.text : monitor.type;
|
||||
const widgetWidth =
|
||||
@@ -521,7 +525,7 @@ function PlaceHolderSign() {
|
||||
if (item === "onclick") {
|
||||
const divHeight = divRef.current.getBoundingClientRect().height;
|
||||
// `getBoundingClientRect()` is used to get accurate measurement height of the div
|
||||
const dropObj = {
|
||||
dropObj = {
|
||||
//onclick put placeholder center on pdf
|
||||
xPosition: widgetWidth / 4 + containerWH.width / 2,
|
||||
yPosition: widgetHeight + divHeight / 2,
|
||||
@@ -553,7 +557,7 @@ function PlaceHolderSign() {
|
||||
const getYPosition = signBtnPosition[0]
|
||||
? y - signBtnPosition[0].yPos
|
||||
: y;
|
||||
const dropObj = {
|
||||
dropObj = {
|
||||
xPosition: getXPosition / (containerScale * scale),
|
||||
yPosition: getYPosition / (containerScale * scale),
|
||||
isStamp:
|
||||
@@ -569,7 +573,6 @@ function PlaceHolderSign() {
|
||||
dropData.push(dropObj);
|
||||
placeHolder = { pageNumber: pageNumber, pos: dropData };
|
||||
}
|
||||
setSelectWidgetId(key);
|
||||
if (signer) {
|
||||
let filterSignerPos, currentPagePosition;
|
||||
if (dragTypeValue === textWidget) {
|
||||
@@ -661,10 +664,7 @@ function PlaceHolderSign() {
|
||||
} else if (dragTypeValue === radioButtonWidget) {
|
||||
setIsRadio(true);
|
||||
}
|
||||
setWidgetType(dragTypeValue);
|
||||
setSignKey(key);
|
||||
setCurrWidgetsDetails({});
|
||||
setWidgetName(dragTypeValue);
|
||||
setCurrWidgetsDetails(dropObj);
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -869,7 +869,11 @@ function PlaceHolderSign() {
|
||||
scale
|
||||
);
|
||||
const pdfName = generatePdfName(16);
|
||||
const pdfUrl = await convertBase64ToFile(pdfName, pdfBase64, "");
|
||||
const pdfUrl = await convertBase64ToFile(
|
||||
pdfName,
|
||||
pdfBase64,
|
||||
"",
|
||||
);
|
||||
const tenantId = localStorage.getItem("TenantId");
|
||||
const buffer = atob(pdfBase64);
|
||||
SaveFileSize(buffer.length, pdfUrl, tenantId);
|
||||
@@ -881,7 +885,11 @@ function PlaceHolderSign() {
|
||||
} else if (pdfBase64Url) {
|
||||
try {
|
||||
const pdfName = generatePdfName(16);
|
||||
const pdfUrl = await convertBase64ToFile(pdfName, pdfBase64Url, "");
|
||||
const pdfUrl = await convertBase64ToFile(
|
||||
pdfName,
|
||||
pdfBase64Url,
|
||||
"",
|
||||
);
|
||||
return pdfUrl;
|
||||
} catch (err) {
|
||||
console.log("error to convertBase64ToFile in placeholder flow", err);
|
||||
@@ -955,7 +963,7 @@ function PlaceHolderSign() {
|
||||
const IsSignerNotExist = filterPrefill?.filter((x) => !x.signerObjId);
|
||||
if (IsSignerNotExist && IsSignerNotExist?.length > 0) {
|
||||
setSignerExistModal(true);
|
||||
setSelectWidgetId(IsSignerNotExist[0]?.placeHolder?.[0]?.pos?.[0]?.key);
|
||||
setCurrWidgetsDetails(IsSignerNotExist[0]?.placeHolder?.[0]?.pos);
|
||||
} else {
|
||||
saveDocumentDetails();
|
||||
}
|
||||
@@ -987,7 +995,11 @@ function PlaceHolderSign() {
|
||||
let pdfUrl;
|
||||
if (isUploadPdf) {
|
||||
const pdfName = generatePdfName(16);
|
||||
pdfUrl = await convertBase64ToFile(pdfName, pdfBase64Url, "");
|
||||
pdfUrl = await convertBase64ToFile(
|
||||
pdfName,
|
||||
pdfBase64Url,
|
||||
"",
|
||||
);
|
||||
}
|
||||
try {
|
||||
const docCls = new Parse.Object("contracts_Document");
|
||||
@@ -1058,9 +1070,7 @@ function PlaceHolderSign() {
|
||||
ExpiryDate: { iso: updateExpiryDate, __type: "Date" }
|
||||
};
|
||||
await axios.put(
|
||||
`${localStorage.getItem(
|
||||
"baseUrl"
|
||||
)}classes/contracts_Document/${documentId}`,
|
||||
`${localStorage.getItem("baseUrl")}classes/contracts_Document/${documentId}`,
|
||||
data,
|
||||
{
|
||||
headers: {
|
||||
@@ -1131,9 +1141,13 @@ function PlaceHolderSign() {
|
||||
<i className="fa-light fa-copy" />
|
||||
<span className=" hidden md:block ml-1 ">{t("copy-link")}</span>
|
||||
</button>
|
||||
<RWebShare data={{ url: data.url, title: t("sign-url") }}>
|
||||
<ShareButton
|
||||
title={t("sign-url")}
|
||||
text={t("sign-url")}
|
||||
url={data.url}
|
||||
>
|
||||
<i className="fa-light fa-share-from-square op-link op-link-secondary no-underline"></i>
|
||||
</RWebShare>
|
||||
</ShareButton>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -1152,7 +1166,8 @@ function PlaceHolderSign() {
|
||||
year: "numeric"
|
||||
});
|
||||
|
||||
let senderEmail = pdfDetails?.[0]?.ExtUserPtr?.Email;
|
||||
let senderEmail =
|
||||
pdfDetails?.[0]?.ExtUserPtr?.Email;
|
||||
let senderPhone = pdfDetails?.[0]?.ExtUserPtr?.Phone;
|
||||
let signerMail = signersdata.slice();
|
||||
|
||||
@@ -1178,11 +1193,16 @@ function PlaceHolderSign() {
|
||||
const orgName = pdfDetails[0]?.ExtUserPtr.Company
|
||||
? pdfDetails[0].ExtUserPtr.Company
|
||||
: "";
|
||||
const senderName = pdfDetails?.[0].ExtUserPtr.Name;
|
||||
const senderName =
|
||||
pdfDetails?.[0].ExtUserPtr.Name;
|
||||
const documentName = `${pdfDetails?.[0].Name}`;
|
||||
let replaceVar;
|
||||
|
||||
if (requestBody && requestSubject && isCustomize) {
|
||||
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>" +
|
||||
@@ -1207,7 +1227,10 @@ function PlaceHolderSign() {
|
||||
htmlReqBody,
|
||||
variables
|
||||
);
|
||||
} else if (tenantMailTemplate?.body && tenantMailTemplate?.subject) {
|
||||
} else if (
|
||||
tenantMailTemplate?.body &&
|
||||
tenantMailTemplate?.subject
|
||||
) {
|
||||
const mailBody = tenantMailTemplate?.body;
|
||||
const mailSubject = tenantMailTemplate?.subject;
|
||||
const replacedRequestBody = mailBody.replace(/"/g, "'");
|
||||
@@ -1246,7 +1269,8 @@ function PlaceHolderSign() {
|
||||
? replaceVar?.subject
|
||||
: mailTemplate(mailparam).subject,
|
||||
replyto: senderEmail,
|
||||
from: senderEmail,
|
||||
from:
|
||||
senderEmail,
|
||||
html: replaceVar?.body
|
||||
? replaceVar?.body
|
||||
: mailTemplate(mailparam).body
|
||||
@@ -1261,13 +1285,20 @@ function PlaceHolderSign() {
|
||||
setMailStatus("success");
|
||||
try {
|
||||
let data;
|
||||
if (requestBody && requestSubject && isCustomize) {
|
||||
if (
|
||||
requestBody &&
|
||||
requestSubject &&
|
||||
isCustomize
|
||||
) {
|
||||
data = {
|
||||
RequestBody: htmlReqBody,
|
||||
RequestSubject: requestSubject,
|
||||
SendMail: true
|
||||
};
|
||||
} else if (tenantMailTemplate?.body && tenantMailTemplate?.subject) {
|
||||
} else if (
|
||||
tenantMailTemplate?.body &&
|
||||
tenantMailTemplate?.subject
|
||||
) {
|
||||
data = {
|
||||
RequestBody: tenantMailTemplate?.body,
|
||||
RequestSubject: tenantMailTemplate?.subject,
|
||||
@@ -1305,7 +1336,8 @@ function PlaceHolderSign() {
|
||||
setIsSend(true);
|
||||
setIsMailSend(true);
|
||||
setIsUiLoading(false);
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
setMailStatus("failed");
|
||||
setIsSend(true);
|
||||
setIsMailSend(true);
|
||||
@@ -1397,21 +1429,21 @@ function PlaceHolderSign() {
|
||||
const getXYdata = getPageNumer[0].pos;
|
||||
const getPosData = getXYdata;
|
||||
const addSignPos = getPosData.map((position) => {
|
||||
if (position.key === signKey) {
|
||||
if (widgetType === radioButtonWidget) {
|
||||
if (position.key === currWidgetsDetails?.key) {
|
||||
if (currWidgetsDetails?.type === radioButtonWidget) {
|
||||
if (addOption) {
|
||||
return {
|
||||
...position,
|
||||
Height: position.Height
|
||||
? position.Height + 15
|
||||
: defaultWidthHeight(widgetType).height + 15
|
||||
: defaultWidthHeight(currWidgetsDetails?.type).height + 15
|
||||
};
|
||||
} else if (deleteOption) {
|
||||
return {
|
||||
...position,
|
||||
Height: position.Height
|
||||
? position.Height - 15
|
||||
: defaultWidthHeight(widgetType).height - 15
|
||||
: defaultWidthHeight(currWidgetsDetails?.type).height - 15
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
@@ -1432,20 +1464,20 @@ function PlaceHolderSign() {
|
||||
}
|
||||
};
|
||||
}
|
||||
} else if (widgetType === "checkbox") {
|
||||
} else if (currWidgetsDetails?.type === "checkbox") {
|
||||
if (addOption) {
|
||||
return {
|
||||
...position,
|
||||
Height: position.Height
|
||||
? position.Height + 15
|
||||
: defaultWidthHeight(widgetType).height + 15
|
||||
: defaultWidthHeight(currWidgetsDetails?.type).height + 15
|
||||
};
|
||||
} else if (deleteOption) {
|
||||
return {
|
||||
...position,
|
||||
Height: position.Height
|
||||
? position.Height - 15
|
||||
: defaultWidthHeight(widgetType).height - 15
|
||||
: defaultWidthHeight(currWidgetsDetails?.type).height - 15
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
@@ -1536,7 +1568,7 @@ function PlaceHolderSign() {
|
||||
const getXYdata = getPageNumer[0].pos;
|
||||
const getPosData = getXYdata;
|
||||
const addSignPos = getPosData.map((position) => {
|
||||
if (position.key === signKey) {
|
||||
if (position.key === currWidgetsDetails?.key) {
|
||||
if (position.type === textInputWidget) {
|
||||
return {
|
||||
...position,
|
||||
@@ -1546,7 +1578,8 @@ function PlaceHolderSign() {
|
||||
status: defaultdata?.status || "required",
|
||||
hint: defaultdata?.hint || "",
|
||||
defaultValue: defaultdata?.defaultValue || "",
|
||||
validation: {},
|
||||
validation:
|
||||
{},
|
||||
fontSize:
|
||||
fontSize || currWidgetsDetails?.options?.fontSize || 12,
|
||||
fontColor:
|
||||
@@ -2029,26 +2062,30 @@ function PlaceHolderSign() {
|
||||
{!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>
|
||||
</>
|
||||
)}
|
||||
{
|
||||
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
|
||||
@@ -2066,14 +2103,16 @@ function PlaceHolderSign() {
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{!isCustomize && (
|
||||
<span
|
||||
className="op-link op-link-accent text-sm"
|
||||
onClick={() => setIsCustomize(!isCustomize)}
|
||||
>
|
||||
{t("cutomize-email")}
|
||||
</span>
|
||||
)}
|
||||
{
|
||||
!isCustomize && (
|
||||
<span
|
||||
className="op-link op-link-accent text-sm"
|
||||
onClick={() => setIsCustomize(!isCustomize)}
|
||||
>
|
||||
{t("cutomize-email")}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
@@ -2329,9 +2368,9 @@ function PlaceHolderSign() {
|
||||
setXyPosition={setSignerPos}
|
||||
allPages={allPages}
|
||||
pageNumber={pageNumber}
|
||||
signKey={signKey}
|
||||
signKey={currWidgetsDetails?.key}
|
||||
Id={uniqueId}
|
||||
widgetType={widgetType}
|
||||
widgetType={currWidgetsDetails?.type}
|
||||
setUniqueId={setUniqueId}
|
||||
tempSignerId={tempSignerId}
|
||||
setTempSignerId={setTempSignerId}
|
||||
@@ -2436,17 +2475,13 @@ function PlaceHolderSign() {
|
||||
setZIndex={setZIndex}
|
||||
setIsPageCopy={setIsPageCopy}
|
||||
signersdata={signersdata}
|
||||
setSignKey={setSignKey}
|
||||
handleLinkUser={handleLinkUser}
|
||||
setUniqueId={setUniqueId}
|
||||
isDragging={isDragging}
|
||||
setShowDropdown={setShowDropdown}
|
||||
setWidgetType={setWidgetType}
|
||||
setIsRadio={setIsRadio}
|
||||
setIsCheckbox={setIsCheckbox}
|
||||
setCurrWidgetsDetails={setCurrWidgetsDetails}
|
||||
setSelectWidgetId={setSelectWidgetId}
|
||||
selectWidgetId={selectWidgetId}
|
||||
handleNameModal={setIsNameModal}
|
||||
setTempSignerId={setTempSignerId}
|
||||
uniqueId={uniqueId}
|
||||
@@ -2461,6 +2496,7 @@ function PlaceHolderSign() {
|
||||
setFontColor={setFontColor}
|
||||
unSignedWidgetId={unSignedWidgetId}
|
||||
divRef={divRef}
|
||||
currWidgetsDetails={currWidgetsDetails}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
@@ -2498,7 +2534,6 @@ function PlaceHolderSign() {
|
||||
handleDeleteUser={handleDeleteUser}
|
||||
uniqueId={uniqueId}
|
||||
setSignerPos={setSignerPos}
|
||||
setSelectWidgetId={setSelectWidgetId}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
@@ -2544,6 +2579,22 @@ function PlaceHolderSign() {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{isShowModal[currWidgetsDetails?.key] && (
|
||||
<WidgetsValueModal
|
||||
key={currWidgetsDetails?.key}
|
||||
xyPosition={signerPos}
|
||||
pageNumber={pageNumber}
|
||||
setXyPosition={setSignerPos}
|
||||
uniqueId={uniqueId}
|
||||
setPageNumber={setPageNumber}
|
||||
setCurrWidgetsDetails={setCurrWidgetsDetails}
|
||||
currWidgetsDetails={currWidgetsDetails}
|
||||
index={pageNumber}
|
||||
isSave={true}
|
||||
tempSignerId={tempSignerId}
|
||||
setUniqueId={setUniqueId}
|
||||
/>
|
||||
)}
|
||||
<ModalUi
|
||||
isOpen={isAlreadyPlace.status}
|
||||
title={t("document-alert")}
|
||||
@@ -2572,7 +2623,7 @@ function PlaceHolderSign() {
|
||||
)}
|
||||
<WidgetNameModal
|
||||
signatureType={signatureType}
|
||||
widgetName={widgetName}
|
||||
widgetName={currWidgetsDetails?.options?.name}
|
||||
defaultdata={currWidgetsDetails}
|
||||
isOpen={isNameModal}
|
||||
handleClose={handleNameModal}
|
||||
@@ -23,7 +23,8 @@ import EditorToolbar, {
|
||||
import DateFormatSelector from "../components/shared/fields/DateFormatSelector";
|
||||
|
||||
const Preferences = () => {
|
||||
const appName = "OpenSign™";
|
||||
const appName =
|
||||
"OpenSign™";
|
||||
const { t } = useTranslation();
|
||||
const editorRef = useRef();
|
||||
const editorRefCom = useRef();
|
||||
@@ -44,7 +45,11 @@ const Preferences = () => {
|
||||
const [isNotifyOnSignatures, setIsNotifyOnSignatures] = useState();
|
||||
const [timezone, setTimezone] = useState(usertimezone);
|
||||
const [activeTab, setactiveTab] = useState(0);
|
||||
const generaltab = { title: t("general"), icon: "fa-light fa-gears" };
|
||||
const generaltab = {
|
||||
name: "general",
|
||||
title: t("general"),
|
||||
icon: "fa-light fa-gears"
|
||||
};
|
||||
const [tab, setTab] = useState([generaltab]);
|
||||
const [sendinOrder, setSendinOrder] = useState(true);
|
||||
const [isTourEnabled, setIsTourEnabled] = useState(false);
|
||||
@@ -60,9 +65,12 @@ const Preferences = () => {
|
||||
setIsTopLoader(true);
|
||||
const EmailTab =
|
||||
extClass?.[0]?.UserRole === "contracts_Admin"
|
||||
? [{ title: t("email"), icon: "fa-light fa-envelope" }]
|
||||
? [{ name: "email", title: t("email"), icon: "fa-light fa-envelope" }]
|
||||
: [];
|
||||
const arr = [generaltab, ...EmailTab];
|
||||
const arr = [
|
||||
generaltab,
|
||||
...EmailTab,
|
||||
];
|
||||
setTab(arr);
|
||||
try {
|
||||
const user = JSON.parse(
|
||||
@@ -288,6 +296,15 @@ const Preferences = () => {
|
||||
const updateRes = JSON.parse(JSON.stringify(updateTenant));
|
||||
setRequestBody(updateRes?.RequestBody);
|
||||
setRequestSubject(updateRes?.RequestSubject);
|
||||
let extUser =
|
||||
localStorage.getItem("Extand_Class") &&
|
||||
JSON.parse(localStorage.getItem("Extand_Class"))?.[0];
|
||||
if (extUser && extUser?.objectId) {
|
||||
extUser.TenantId.RequestBody = updateRes?.RequestBody;
|
||||
extUser.TenantId.RequestBody = updateRes?.RequestSubject;
|
||||
const _extUser = JSON.parse(JSON.stringify(extUser));
|
||||
localStorage.setItem("Extand_Class", JSON.stringify([_extUser]));
|
||||
}
|
||||
setIsAlert({ type: "success", msg: t("saved-successfully") });
|
||||
setTimeout(() => setIsAlert({ type: "", msg: "" }), 1500);
|
||||
}
|
||||
@@ -326,7 +343,7 @@ const Preferences = () => {
|
||||
|
||||
const handleTourInput = () => setIsTourEnabled(!isTourEnabled);
|
||||
const handleSendinOrderInput = () => setSendinOrder(!sendinOrder);
|
||||
|
||||
const tabName = (ind) => tab.find((t, i) => i === ind)?.name;
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Title title={t("Preferences")} />
|
||||
@@ -364,9 +381,7 @@ 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={`${activeTab === ind ? "op-tab-active" : ""} op-tab text-xs md:text-base pb-2 md:pb-0 transition-all `}
|
||||
aria-selected={activeTab === ind}
|
||||
aria-controls={`panel-${tabData.title}`}
|
||||
>
|
||||
@@ -382,7 +397,7 @@ const Preferences = () => {
|
||||
aria-labelledby="tab-general"
|
||||
role="tabpanel"
|
||||
>
|
||||
{activeTab === 0 ? (
|
||||
{tabName(activeTab) === "general" && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 md:gap-x-8">
|
||||
{/* Left Column - Signature Settings */}
|
||||
<div className="md:col-span-5 flex flex-col">
|
||||
@@ -487,7 +502,11 @@ const Preferences = () => {
|
||||
</ReactTooltip>
|
||||
</label>
|
||||
<div className="flex flex-row gap-6">
|
||||
<div className={"flex items-center gap-2"}>
|
||||
<div
|
||||
className={
|
||||
"flex items-center gap-2"
|
||||
}
|
||||
>
|
||||
<input
|
||||
id="notify-yes"
|
||||
className="op-radio op-radio-xs"
|
||||
@@ -502,7 +521,11 @@ const Preferences = () => {
|
||||
{t("yes")}
|
||||
</label>
|
||||
</div>
|
||||
<div className={"flex items-center gap-2"}>
|
||||
<div
|
||||
className={
|
||||
"flex items-center gap-2"
|
||||
}
|
||||
>
|
||||
<input
|
||||
id="notify-no"
|
||||
className="op-radio op-radio-xs"
|
||||
@@ -706,7 +729,8 @@ const Preferences = () => {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : activeTab === 1 ? (
|
||||
)}
|
||||
{tabName(activeTab) === "email" && (
|
||||
<div className="flex flex-col mb-4">
|
||||
<div className="flex flex-col">
|
||||
<h1 className="text-[14px] mb-[0.7rem] font-medium">
|
||||
@@ -722,9 +746,7 @@ const Preferences = () => {
|
||||
{t("subject")}{" "}
|
||||
<Tooltip
|
||||
id={"request-sub-tooltip"}
|
||||
message={`${t(
|
||||
"variables-use"
|
||||
)}: {{sender_name}} {{document_title}}`}
|
||||
message={`${t("variables-use")}: {{sender_name}} {{document_title}}`}
|
||||
/>
|
||||
</label>
|
||||
<input
|
||||
@@ -733,9 +755,7 @@ const Preferences = () => {
|
||||
onChange={(e) =>
|
||||
setRequestSubject(e.target.value)
|
||||
}
|
||||
placeholder={`{{sender_name}} ${t(
|
||||
"send-to-sign"
|
||||
)} {{document_title}}`}
|
||||
placeholder={`{{sender_name}} ${t("send-to-sign")} {{document_title}}`}
|
||||
className="w-full op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content text-xs"
|
||||
/>
|
||||
</div>
|
||||
@@ -744,9 +764,7 @@ const Preferences = () => {
|
||||
{t("body")}{" "}
|
||||
<Tooltip
|
||||
id={"request-body-tooltip"}
|
||||
message={`${t(
|
||||
"variables-use"
|
||||
)}: {{sender_name}} {{document_title}}`}
|
||||
message={`${t("variables-use")}: {{sender_name}} {{document_title}}`}
|
||||
/>
|
||||
</label>
|
||||
<EditorToolbar containerId="toolbar1" />
|
||||
@@ -792,9 +810,7 @@ const Preferences = () => {
|
||||
{t("subject")}{" "}
|
||||
<Tooltip
|
||||
id={"complete-sub-tooltip"}
|
||||
message={`${t(
|
||||
"variables-use"
|
||||
)}:{{sender_name}} {{document_title}}`}
|
||||
message={`${t("variables-use")}:{{sender_name}} {{document_title}}`}
|
||||
/>
|
||||
</label>
|
||||
<input
|
||||
@@ -803,9 +819,7 @@ const Preferences = () => {
|
||||
onChange={(e) =>
|
||||
setCompletionSubject(e.target.value)
|
||||
}
|
||||
placeholder={`{{sender_name}} ${t(
|
||||
"send-to-sign"
|
||||
)} {{document_title}}`}
|
||||
placeholder={`{{sender_name}} ${t("send-to-sign")} {{document_title}}`}
|
||||
className="w-full op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content text-xs"
|
||||
/>
|
||||
</div>
|
||||
@@ -814,9 +828,7 @@ const Preferences = () => {
|
||||
{t("body")}{" "}
|
||||
<Tooltip
|
||||
id={"complete-body-tooltip"}
|
||||
message={`${t(
|
||||
"variables-use"
|
||||
)}:{{sender_name}} {{document_title}} {{signing_url}}`}
|
||||
message={`${t("variables-use")}:{{sender_name}} {{document_title}} {{signing_url}}`}
|
||||
/>
|
||||
</label>
|
||||
<EditorToolbar containerId="toolbar2" />
|
||||
@@ -851,8 +863,10 @@ const Preferences = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
{tabName(activeTab) === "security" && (
|
||||
<>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
+78
-187
@@ -8,7 +8,6 @@ import RenderAllPdfPage from "../components/pdf/RenderAllPdfPage";
|
||||
import { DndProvider } from "react-dnd";
|
||||
import { HTML5Backend } from "react-dnd-html5-backend";
|
||||
import { useDrop } from "react-dnd";
|
||||
import SignPad from "../components/pdf/SignPad";
|
||||
import EmailComponent from "../components/pdf/EmailComponent";
|
||||
import WidgetComponent from "../components/pdf/WidgetComponent";
|
||||
import {
|
||||
@@ -18,8 +17,6 @@ import {
|
||||
multiSignEmbed,
|
||||
calculateInitialWidthHeight,
|
||||
defaultWidthHeight,
|
||||
onSaveImage,
|
||||
onSaveSign,
|
||||
contractUsers,
|
||||
contactBook,
|
||||
randomId,
|
||||
@@ -40,18 +37,17 @@ import {
|
||||
convertBase64ToFile,
|
||||
generatePdfName,
|
||||
handleRemoveWidgets,
|
||||
compressedFileSize,
|
||||
addWidgetSelfsignOptions
|
||||
} from "../constant/Utils";
|
||||
import { useParams } from "react-router";
|
||||
import Tour from "reactour";
|
||||
import Tour from "../primitives/Tour";
|
||||
import Signedby from "../components/pdf/Signedby";
|
||||
import Header from "../components/pdf/PdfHeader";
|
||||
import RenderPdf from "../components/pdf/RenderPdf";
|
||||
import PlaceholderCopy from "../components/pdf/PlaceholderCopy";
|
||||
import Title from "../components/Title";
|
||||
import DropdownWidgetOption from "../components/pdf/DropdownWidgetOption";
|
||||
import { useSelector } from "react-redux";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import TextFontSetting from "../components/pdf/TextFontSetting";
|
||||
import VerifyEmail from "../components/pdf/VerifyEmail";
|
||||
import PdfZoom from "../components/pdf/PdfZoom";
|
||||
@@ -63,42 +59,44 @@ import ModalUi from "../primitives/ModalUi";
|
||||
import TourContentWithBtn from "../primitives/TourContentWithBtn";
|
||||
import HandleError from "../primitives/HandleError";
|
||||
import LoaderWithMsg from "../primitives/LoaderWithMsg";
|
||||
import {
|
||||
setSaveSignCheckbox,
|
||||
setMyInitial,
|
||||
setDefaultSignImg,
|
||||
setIsShowModal,
|
||||
resetWidgetState
|
||||
} from "../redux/reducers/widgetSlice.js";
|
||||
import WidgetsValueModal from "../components/pdf/WidgetsValueModal";
|
||||
//For signYourself inProgress section signer can add sign and complete doc sign.
|
||||
function SignYourSelf() {
|
||||
const { t } = useTranslation();
|
||||
const { docId } = useParams();
|
||||
const appName = "OpenSign™";
|
||||
const dispatch = useDispatch();
|
||||
const isShowModal = useSelector((state) => state.widget.isShowModal);
|
||||
const saveSignCheckbox = useSelector(
|
||||
(state) => state.widget.saveSignCheckbox
|
||||
);
|
||||
const appName =
|
||||
"OpenSign™";
|
||||
const divRef = useRef(null);
|
||||
const nodeRef = useRef(null);
|
||||
const imageRef = useRef(null);
|
||||
const pdfRef = useRef();
|
||||
const numPages = 1;
|
||||
const [pdfDetails, setPdfDetails] = useState([]);
|
||||
const [isSignPad, setIsSignPad] = useState(false);
|
||||
const [allPages, setAllPages] = useState(null);
|
||||
const [pdfUrl, setPdfUrl] = useState();
|
||||
const [xyPosition, setXyPosition] = useState([]);
|
||||
const [defaultSignImg, setDefaultSignImg] = useState();
|
||||
const [pageNumber, setPageNumber] = useState(1);
|
||||
const [image, setImage] = useState(null);
|
||||
const [isImageSelect, setIsImageSelect] = useState(false);
|
||||
const [signature, setSignature] = useState();
|
||||
const [isStamp, setIsStamp] = useState(false);
|
||||
const [isEmail, setIsEmail] = useState(false);
|
||||
const [signBtnPosition, setSignBtnPosition] = useState([]);
|
||||
const [xySignature, setXYSignature] = useState({});
|
||||
const [dragKey, setDragKey] = useState();
|
||||
const [fontSize, setFontSize] = useState();
|
||||
const [fontColor, setFontColor] = useState();
|
||||
const [signKey, setSignKey] = useState();
|
||||
const [imgWH, setImgWH] = useState({});
|
||||
const [pdfNewWidth, setPdfNewWidth] = useState();
|
||||
const [pdfOriginalWH, setPdfOriginalWH] = useState([]);
|
||||
const [successEmail, setSuccessEmail] = useState(false);
|
||||
const [myInitial, setMyInitial] = useState("");
|
||||
const [isInitial, setIsInitial] = useState(false);
|
||||
const [isUiLoading, setIsUiLoading] = useState(false);
|
||||
const [validateAlert, setValidateAlert] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState({
|
||||
isLoad: true,
|
||||
message: t("loading-mssg")
|
||||
@@ -112,7 +110,6 @@ function SignYourSelf() {
|
||||
const [contractName, setContractName] = useState("");
|
||||
const [containerWH, setContainerWH] = useState({});
|
||||
const [isPageCopy, setIsPageCopy] = useState(false);
|
||||
const [selectWidgetId, setSelectWidgetId] = useState("");
|
||||
const [otpLoader, setOtpLoader] = useState(false);
|
||||
const [showAlreadySignDoc, setShowAlreadySignDoc] = useState({
|
||||
status: false
|
||||
@@ -120,7 +117,6 @@ function SignYourSelf() {
|
||||
const [isTextSetting, setIsTextSetting] = useState(false);
|
||||
const [currWidgetsDetails, setCurrWidgetsDetails] = useState({});
|
||||
const [isCheckbox, setIsCheckbox] = useState(false);
|
||||
const [widgetType, setWidgetType] = useState("");
|
||||
const [pdfLoad, setPdfLoad] = useState(false);
|
||||
const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" });
|
||||
const [isDontShow, setIsDontShow] = useState(false);
|
||||
@@ -141,10 +137,7 @@ function SignYourSelf() {
|
||||
const [isDownloadModal, setIsDownloadModal] = useState(false);
|
||||
const [isResize, setIsResize] = useState(false);
|
||||
const [isUploadPdf, setIsUploadPdf] = useState(false);
|
||||
const [saveSignCheckbox, setSaveSignCheckbox] = useState({
|
||||
isVisible: false,
|
||||
signId: ""
|
||||
});
|
||||
|
||||
const [owner, setOwner] = useState({});
|
||||
const [, drop] = useDrop({
|
||||
accept: "BOX",
|
||||
@@ -172,6 +165,7 @@ function SignYourSelf() {
|
||||
const jsonSender = JSON.parse(senderUser);
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(resetWidgetState([]));
|
||||
if (documentId) {
|
||||
getDocumentDetails(true);
|
||||
}
|
||||
@@ -242,7 +236,6 @@ function SignYourSelf() {
|
||||
});
|
||||
} else {
|
||||
setIsUiLoading(false);
|
||||
setIsSignPad(false);
|
||||
setIsEmail(true);
|
||||
setXyPosition([]);
|
||||
setSignBtnPosition([]);
|
||||
@@ -265,13 +258,15 @@ function SignYourSelf() {
|
||||
//function to get default signatur eof current user from `contracts_Signature` class
|
||||
const defaultSignRes = await getDefaultSignature(jsonSender.objectId);
|
||||
if (defaultSignRes?.status === "success") {
|
||||
setSaveSignCheckbox((prev) => ({
|
||||
...prev,
|
||||
isVisible: true,
|
||||
signId: defaultSignRes?.res?.id
|
||||
}));
|
||||
setDefaultSignImg(defaultSignRes?.res?.defaultSignature);
|
||||
setMyInitial(defaultSignRes?.res?.defaultInitial);
|
||||
dispatch(
|
||||
setSaveSignCheckbox({
|
||||
...saveSignCheckbox,
|
||||
isVisible: true,
|
||||
signId: defaultSignRes?.res?.id
|
||||
})
|
||||
);
|
||||
dispatch(setDefaultSignImg(defaultSignRes?.res?.defaultSignature));
|
||||
dispatch(setMyInitial(defaultSignRes?.res?.defaultInitial));
|
||||
}
|
||||
const contractUsersRes = await contractUsers();
|
||||
if (contractUsersRes === "Error: Something went wrong!") {
|
||||
@@ -280,7 +275,8 @@ function SignYourSelf() {
|
||||
} else if (contractUsersRes[0] && contractUsersRes.length > 0) {
|
||||
setContractName("_Users");
|
||||
setSignerUserId(contractUsersRes[0].objectId);
|
||||
setSaveSignCheckbox((prev) => ({ ...prev, isVisible: true }));
|
||||
dispatch(setSaveSignCheckbox({ ...saveSignCheckbox, isVisible: true }));
|
||||
|
||||
const tourstatuss =
|
||||
contractUsersRes[0].TourStatus && contractUsersRes[0].TourStatus;
|
||||
if (tourstatuss && tourstatuss.length > 0 && !isCompleted) {
|
||||
@@ -292,12 +288,9 @@ function SignYourSelf() {
|
||||
setCheckTourStatus(checkTourRecipients[0].signyourself);
|
||||
}
|
||||
} else {
|
||||
setCheckTourStatus(true);
|
||||
setCheckTourStatus(false);
|
||||
}
|
||||
const loadObj = {
|
||||
isLoad: false
|
||||
};
|
||||
setIsLoading(loadObj);
|
||||
setIsLoading({ isLoad: false });
|
||||
} else if (contractUsersRes.length === 0) {
|
||||
const contractContactBook = await contactBook(jsonSender.objectId);
|
||||
if (contractContactBook && contractContactBook.length > 0) {
|
||||
@@ -435,20 +428,7 @@ function SignYourSelf() {
|
||||
const xyPos = { pageNumber: pageNumber, pos: dropData };
|
||||
setXyPosition((prev) => [...prev, xyPos]);
|
||||
}
|
||||
|
||||
if (
|
||||
dragTypeValue === "signature" ||
|
||||
dragTypeValue === "stamp" ||
|
||||
dragTypeValue === "image" ||
|
||||
dragTypeValue === "initials"
|
||||
) {
|
||||
setIsSignPad(true);
|
||||
}
|
||||
if (dragTypeValue === "stamp" || dragTypeValue === "image") {
|
||||
setIsStamp(true);
|
||||
} else if (dragTypeValue === "initials") {
|
||||
setIsInitial(true);
|
||||
} else if (dragTypeValue === "checkbox") {
|
||||
if (dragTypeValue === "checkbox") {
|
||||
setIsCheckbox(true);
|
||||
} else if (
|
||||
[
|
||||
@@ -463,9 +443,10 @@ function SignYourSelf() {
|
||||
setFontSize(12);
|
||||
setFontColor("black");
|
||||
}
|
||||
setWidgetType(dragTypeValue);
|
||||
setSelectWidgetId(key);
|
||||
setSignKey(key);
|
||||
dispatch(setIsShowModal({ [key]: true }));
|
||||
// if (dragTypeValue !== "checkbox") {
|
||||
setCurrWidgetsDetails(dropObj);
|
||||
// }
|
||||
};
|
||||
|
||||
//`handleResend` function is used to resend otp for email verification
|
||||
@@ -520,7 +501,11 @@ function SignYourSelf() {
|
||||
let pdfUrl;
|
||||
if (isUploadPdf) {
|
||||
const pdfName = generatePdfName(16);
|
||||
pdfUrl = await convertBase64ToFile(pdfName, pdfBase64Url, "");
|
||||
pdfUrl = await convertBase64ToFile(
|
||||
pdfName,
|
||||
pdfBase64Url,
|
||||
"",
|
||||
);
|
||||
}
|
||||
const widgetsType = ["signature", "stamp", "image", "initials"];
|
||||
let updatedXYPosition;
|
||||
@@ -650,7 +635,6 @@ function SignYourSelf() {
|
||||
isSignYourSelfFlow,
|
||||
scale
|
||||
);
|
||||
// console.log("pdf", pdfBytes);
|
||||
//function for call to embed signature in pdf and get digital signature pdf
|
||||
if (!pdfBytes?.error) {
|
||||
await signPdfFun(pdfBytes, documentId);
|
||||
@@ -706,7 +690,10 @@ function SignYourSelf() {
|
||||
if (tenantDetails && tenantDetails === "user does not exist!") {
|
||||
alert(t("user-not-exist"));
|
||||
} else {
|
||||
if (tenantDetails?.CompletionBody && tenantDetails?.CompletionSubject) {
|
||||
if (
|
||||
tenantDetails?.CompletionBody &&
|
||||
tenantDetails?.CompletionSubject
|
||||
) {
|
||||
isCustomCompletionMail = true;
|
||||
}
|
||||
}
|
||||
@@ -742,7 +729,7 @@ function SignYourSelf() {
|
||||
pdfFile: base64Url,
|
||||
docId: documentId,
|
||||
isCustomCompletionMail: isCustomCompletionMail,
|
||||
signature: suffixbase64
|
||||
signature: suffixbase64,
|
||||
};
|
||||
const resSignPdf = await Parse.Cloud.run("signPdf", params);
|
||||
if (resSignPdf) {
|
||||
@@ -818,53 +805,7 @@ function SignYourSelf() {
|
||||
setSignBtnPosition([]);
|
||||
setPageNumber((prevPageNumber) => prevPageNumber + offset);
|
||||
}
|
||||
//function for image upload or update
|
||||
const onImageChange = (event) => {
|
||||
if (event.target.files && event.target.files[0]) {
|
||||
const file = event.target.files[0];
|
||||
compressedFileSize(file, setImgWH, setImage);
|
||||
}
|
||||
};
|
||||
|
||||
//function for upload stamp or image
|
||||
const saveImage = () => {
|
||||
const getImage = onSaveImage(xyPosition, index, signKey, imgWH, image);
|
||||
setXyPosition(getImage);
|
||||
};
|
||||
|
||||
//function for save button to save signature or image url
|
||||
const saveSign = (type, isDefaultSign, width, height, typedSignature) => {
|
||||
const isTypeText = width && height ? true : false;
|
||||
const signatureImg = isDefaultSign
|
||||
? isDefaultSign === "initials"
|
||||
? myInitial
|
||||
: defaultSignImg
|
||||
: signature;
|
||||
let imgWH = { width: width ? width : "", height: height ? height : "" };
|
||||
setIsSignPad(false);
|
||||
setIsImageSelect(false);
|
||||
setImage();
|
||||
if (isDefaultSign) {
|
||||
const img = new Image();
|
||||
img.src = defaultSignImg;
|
||||
if (img.complete) {
|
||||
imgWH = { width: img.width, height: img.height };
|
||||
}
|
||||
}
|
||||
const getUpdatePosition = onSaveSign(
|
||||
type,
|
||||
xyPosition,
|
||||
index,
|
||||
signKey,
|
||||
signatureImg,
|
||||
imgWH,
|
||||
isDefaultSign,
|
||||
isTypeText,
|
||||
typedSignature
|
||||
);
|
||||
|
||||
setXyPosition(getUpdatePosition);
|
||||
};
|
||||
//function for capture position on hover or touch widgets button
|
||||
const handleDivClick = (e) => {
|
||||
const isTouchEvent = e.type.startsWith("touch");
|
||||
@@ -924,7 +865,7 @@ function SignYourSelf() {
|
||||
selector: '[data-tut="addWidgets"]',
|
||||
content: () => (
|
||||
<TourContentWithBtn
|
||||
message={t("tour-mssg.signyour-self-2")}
|
||||
message={t("tour-mssg.signyour-self-1")}
|
||||
isChecked={handleDontShow}
|
||||
/>
|
||||
),
|
||||
@@ -962,14 +903,10 @@ function SignYourSelf() {
|
||||
} else {
|
||||
updatedTourStatus = [{ signyourself: true }];
|
||||
}
|
||||
await axios
|
||||
.put(
|
||||
`${localStorage.getItem(
|
||||
"baseUrl"
|
||||
)}classes/contracts${contractName}/${signerUserId}`,
|
||||
{
|
||||
TourStatus: updatedTourStatus
|
||||
},
|
||||
try {
|
||||
await axios.put(
|
||||
`${localStorage.getItem("baseUrl")}classes/contracts${contractName}/${signerUserId}`,
|
||||
{ TourStatus: updatedTourStatus },
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
@@ -977,14 +914,11 @@ function SignYourSelf() {
|
||||
sessionToken: localStorage.getItem("accesstoken")
|
||||
}
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
// const json = Listdata.data;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("axois err ", err);
|
||||
alert(t("something-went-wrong-mssg"));
|
||||
});
|
||||
);
|
||||
} catch (err) {
|
||||
console.log("axois err ", err);
|
||||
alert(t("something-went-wrong-mssg"));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1007,20 +941,20 @@ function SignYourSelf() {
|
||||
const getXYdata = getPageNumer[0].pos;
|
||||
const getPosData = getXYdata;
|
||||
const addSignPos = getPosData.map((position) => {
|
||||
if (position.key === signKey) {
|
||||
if (position.key === currWidgetsDetails?.key) {
|
||||
if (addOption) {
|
||||
return {
|
||||
...position,
|
||||
Height: position.Height
|
||||
? position.Height + 15
|
||||
: defaultWidthHeight(widgetType).height + 15
|
||||
: defaultWidthHeight(currWidgetsDetails?.type).height + 15
|
||||
};
|
||||
} else if (deleteOption) {
|
||||
return {
|
||||
...position,
|
||||
Height: position.Height
|
||||
? position.Height - 15
|
||||
: defaultWidthHeight(widgetType).height - 15
|
||||
: defaultWidthHeight(currWidgetsDetails?.type).height - 15
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
@@ -1070,7 +1004,7 @@ function SignYourSelf() {
|
||||
const getXYdata = getPageNumer[0].pos;
|
||||
const getPosData = getXYdata;
|
||||
const addSignPos = getPosData.map((position) => {
|
||||
if (position.key === signKey) {
|
||||
if (position.key === currWidgetsDetails?.key) {
|
||||
return {
|
||||
...position,
|
||||
options: {
|
||||
@@ -1187,7 +1121,7 @@ function SignYourSelf() {
|
||||
/>
|
||||
)}
|
||||
{/* this component used for UI interaction and show their functionality */}
|
||||
{pdfLoad && !checkTourStatus && (
|
||||
{pdfLoad && !checkTourStatus && !isCompleted && (
|
||||
<Tour
|
||||
onRequestClose={closeTour}
|
||||
steps={tourConfig}
|
||||
@@ -1284,39 +1218,9 @@ function SignYourSelf() {
|
||||
setXyPosition={setXyPosition}
|
||||
allPages={allPages}
|
||||
pageNumber={pageNumber}
|
||||
signKey={signKey}
|
||||
widgetType={widgetType}
|
||||
signKey={currWidgetsDetails?.key}
|
||||
widgetType={currWidgetsDetails?.type}
|
||||
/>
|
||||
{/* this is modal of signature pad */}
|
||||
{isSignPad && (
|
||||
<SignPad
|
||||
saveSignCheckbox={saveSignCheckbox}
|
||||
setSaveSignCheckbox={setSaveSignCheckbox}
|
||||
signatureTypes={signatureTypes}
|
||||
isSignPad={isSignPad}
|
||||
isStamp={isStamp}
|
||||
setIsImageSelect={setIsImageSelect}
|
||||
setIsSignPad={setIsSignPad}
|
||||
setImage={setImage}
|
||||
isImageSelect={isImageSelect}
|
||||
imageRef={imageRef}
|
||||
onImageChange={onImageChange}
|
||||
setSignature={setSignature}
|
||||
image={image}
|
||||
onSaveImage={saveImage}
|
||||
onSaveSign={saveSign}
|
||||
defaultSign={defaultSignImg}
|
||||
myInitial={myInitial}
|
||||
setDefaultSignImg={setDefaultSignImg}
|
||||
setMyInitial={setMyInitial}
|
||||
isInitial={isInitial}
|
||||
setIsInitial={setIsInitial}
|
||||
setIsStamp={setIsStamp}
|
||||
widgetType={widgetType}
|
||||
currWidgetsDetails={currWidgetsDetails}
|
||||
setCurrWidgetsDetails={setCurrWidgetsDetails}
|
||||
/>
|
||||
)}
|
||||
{/*render email component to send email after finish signature on document */}
|
||||
<EmailComponent
|
||||
isEmail={isEmail}
|
||||
@@ -1364,10 +1268,7 @@ function SignYourSelf() {
|
||||
handleTabDrag={handleTabDrag}
|
||||
handleStop={handleStop}
|
||||
isDragging={isDragging}
|
||||
setIsSignPad={setIsSignPad}
|
||||
setIsStamp={setIsStamp}
|
||||
handleDeleteSign={handleDeleteSign}
|
||||
setSignKey={setSignKey}
|
||||
pdfDetails={pdfDetails}
|
||||
setIsDragging={setIsDragging}
|
||||
xyPosition={xyPosition}
|
||||
@@ -1381,13 +1282,8 @@ function SignYourSelf() {
|
||||
index={index}
|
||||
containerWH={containerWH}
|
||||
setIsPageCopy={setIsPageCopy}
|
||||
setIsInitial={setIsInitial}
|
||||
setWidgetType={setWidgetType}
|
||||
setSelectWidgetId={setSelectWidgetId}
|
||||
selectWidgetId={selectWidgetId}
|
||||
setIsCheckbox={setIsCheckbox}
|
||||
setCurrWidgetsDetails={setCurrWidgetsDetails}
|
||||
setValidateAlert={setValidateAlert}
|
||||
handleTextSettingModal={handleTextSettingModal}
|
||||
setScale={setScale}
|
||||
scale={scale}
|
||||
@@ -1399,6 +1295,7 @@ function SignYourSelf() {
|
||||
isResize={isResize}
|
||||
setIsResize={setIsResize}
|
||||
divRef={divRef}
|
||||
currWidgetsDetails={currWidgetsDetails}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
@@ -1416,7 +1313,6 @@ function SignYourSelf() {
|
||||
isSignYourself={true}
|
||||
addPositionOfSignature={addPositionOfSignature}
|
||||
isMailSend={false}
|
||||
// setSelectWidgetId={setSelectWidgetId}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
@@ -1429,24 +1325,19 @@ function SignYourSelf() {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<ModalUi
|
||||
isOpen={validateAlert}
|
||||
title={t("validation-alert")}
|
||||
handleClose={() => setValidateAlert(false)}
|
||||
>
|
||||
<div className="p-[20px] h-full">
|
||||
<p>{t("validate-alert-mssg")}</p>
|
||||
|
||||
<div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
|
||||
<button
|
||||
onClick={() => setValidateAlert(false)}
|
||||
type="button"
|
||||
className="op-btn op-btn-ghost shadow-md"
|
||||
>
|
||||
{t("close")}
|
||||
</button>
|
||||
</div>
|
||||
</ModalUi>
|
||||
{!isCheckbox && isShowModal[currWidgetsDetails?.key] && (
|
||||
<WidgetsValueModal
|
||||
key={currWidgetsDetails?.key}
|
||||
xyPosition={xyPosition} //placeholder details
|
||||
pageNumber={pageNumber} //current page number
|
||||
setXyPosition={setXyPosition} //placeholder details state
|
||||
setPageNumber={setPageNumber}
|
||||
setCurrWidgetsDetails={setCurrWidgetsDetails}
|
||||
currWidgetsDetails={currWidgetsDetails}
|
||||
index={index}
|
||||
isSave={true}
|
||||
/>
|
||||
)}
|
||||
<RotateAlert
|
||||
showRotateAlert={showRotateAlert.status}
|
||||
setShowRotateAlert={setShowRotateAlert}
|
||||
+38
-48
@@ -7,7 +7,7 @@ import { DndProvider } from "react-dnd";
|
||||
import { HTML5Backend } from "react-dnd-html5-backend";
|
||||
import { useDrop } from "react-dnd";
|
||||
import WidgetComponent from "../components/pdf/WidgetComponent";
|
||||
import Tour from "reactour";
|
||||
import Tour from "../primitives/Tour";
|
||||
import SignerListPlace from "../components/pdf/SignerListPlace";
|
||||
import Header from "../components/pdf/PdfHeader";
|
||||
import WidgetNameModal from "../components/pdf/WidgetNameModal";
|
||||
@@ -100,10 +100,8 @@ const TemplatePlaceholder = () => {
|
||||
const [isSigners, setIsSigners] = useState(false);
|
||||
const [zIndex, setZIndex] = useState(1);
|
||||
const [showDropdown, setShowDropdown] = useState(false);
|
||||
const [widgetType, setWidgetType] = useState("");
|
||||
const [isRadio, setIsRadio] = useState(false);
|
||||
const [blockColor, setBlockColor] = useState("");
|
||||
const [selectWidgetId, setSelectWidgetId] = useState("");
|
||||
const [isNameModal, setIsNameModal] = useState(false);
|
||||
const [isTextSetting, setIsTextSetting] = useState(false);
|
||||
const [pdfLoad, setPdfLoad] = useState(false);
|
||||
@@ -122,13 +120,11 @@ const TemplatePlaceholder = () => {
|
||||
const [isCreateDoc, setIsCreateDoc] = useState(false);
|
||||
const [isEditTemplate, setIsEditTemplate] = useState(false);
|
||||
const [isPageCopy, setIsPageCopy] = useState(false);
|
||||
const [signKey, setSignKey] = useState();
|
||||
const [IsReceipent, setIsReceipent] = useState(true);
|
||||
const [isDontShow, setIsDontShow] = useState(false);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [currWidgetsDetails, setCurrWidgetsDetails] = useState([]);
|
||||
const [isCheckbox, setIsCheckbox] = useState(false);
|
||||
const [widgetName, setWidgetName] = useState(false);
|
||||
const [isAddRole, setIsAddRole] = useState(false);
|
||||
const [fontSize, setFontSize] = useState();
|
||||
const [fontColor, setFontColor] = useState();
|
||||
@@ -137,7 +133,6 @@ const TemplatePlaceholder = () => {
|
||||
const [signatureType, setSignatureType] = useState([]);
|
||||
const [pdfArrayBuffer, setPdfArrayBuffer] = useState("");
|
||||
const [updatedPdfUrl, setUpdatedPdfUrl] = useState("");
|
||||
const [tempSignerId, setTempSignerId] = useState("");
|
||||
const [unSignedWidgetId, setUnSignedWidgetId] = useState("");
|
||||
const [owner, setOwner] = useState({});
|
||||
useEffect(() => {
|
||||
@@ -166,6 +161,7 @@ const TemplatePlaceholder = () => {
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [divRef.current, isHeader]);
|
||||
|
||||
|
||||
//function to fetch tenant Details
|
||||
const fetchTenantDetails = async () => {
|
||||
const user = JSON.parse(
|
||||
@@ -352,9 +348,6 @@ const TemplatePlaceholder = () => {
|
||||
|
||||
//function for setting position after drop signature button over pdf
|
||||
const addPositionOfSignature = (item, monitor) => {
|
||||
if (item && item.text) {
|
||||
setWidgetName(item.text);
|
||||
}
|
||||
getSignerPos(item, monitor);
|
||||
};
|
||||
|
||||
@@ -377,13 +370,14 @@ const TemplatePlaceholder = () => {
|
||||
const widgetHeight =
|
||||
defaultWidthHeight(dragTypeValue).height * containerScale;
|
||||
let dropData = [],
|
||||
dropObj,
|
||||
currentPagePosition,
|
||||
filterSignerPos;
|
||||
let placeHolder;
|
||||
if (item === "onclick") {
|
||||
// `getBoundingClientRect()` is used to get accurate measurement height of the div
|
||||
const divHeight = divRef.current.getBoundingClientRect().height;
|
||||
const dropObj = {
|
||||
dropObj = {
|
||||
//onclick put placeholder center on pdf
|
||||
xPosition: widgetWidth / 4 + containerWH.width / 2,
|
||||
yPosition: widgetHeight + divHeight / 2,
|
||||
@@ -413,7 +407,7 @@ const TemplatePlaceholder = () => {
|
||||
const getYPosition = signBtnPosition[0]
|
||||
? y - signBtnPosition[0].yPos
|
||||
: y;
|
||||
const dropObj = {
|
||||
dropObj = {
|
||||
xPosition: getXPosition / (containerScale * scale),
|
||||
yPosition: getYPosition / (containerScale * scale),
|
||||
isStamp:
|
||||
@@ -520,10 +514,7 @@ const TemplatePlaceholder = () => {
|
||||
setFontSize(12);
|
||||
setFontColor("black");
|
||||
}
|
||||
setCurrWidgetsDetails({});
|
||||
setWidgetType(dragTypeValue);
|
||||
setSignKey(key);
|
||||
setSelectWidgetId(key);
|
||||
setCurrWidgetsDetails(dropObj);
|
||||
} else {
|
||||
setIsReceipent(false);
|
||||
}
|
||||
@@ -777,7 +768,11 @@ const TemplatePlaceholder = () => {
|
||||
let pdfUrl;
|
||||
if (isUploadPdf) {
|
||||
const pdfName = generatePdfName(16);
|
||||
pdfUrl = await convertBase64ToFile(pdfName, pdfBase64Url, "");
|
||||
pdfUrl = await convertBase64ToFile(
|
||||
pdfName,
|
||||
pdfBase64Url,
|
||||
"",
|
||||
);
|
||||
}
|
||||
if (signersdata?.length > 0) {
|
||||
signersdata.forEach((x) => {
|
||||
@@ -844,7 +839,11 @@ const TemplatePlaceholder = () => {
|
||||
scale
|
||||
);
|
||||
const pdfName = generatePdfName(16);
|
||||
const pdfUrl = await convertBase64ToFile(pdfName, pdfBase64, "");
|
||||
const pdfUrl = await convertBase64ToFile(
|
||||
pdfName,
|
||||
pdfBase64,
|
||||
"",
|
||||
);
|
||||
const tenantId = localStorage.getItem("TenantId");
|
||||
const buffer = atob(pdfBase64);
|
||||
SaveFileSize(buffer.length, pdfUrl, tenantId);
|
||||
@@ -856,7 +855,11 @@ const TemplatePlaceholder = () => {
|
||||
} else if (pdfBase64Url) {
|
||||
try {
|
||||
const pdfName = generatePdfName(16);
|
||||
const pdfUrl = await convertBase64ToFile(pdfName, pdfBase64Url, "");
|
||||
const pdfUrl = await convertBase64ToFile(
|
||||
pdfName,
|
||||
pdfBase64Url,
|
||||
"",
|
||||
);
|
||||
return pdfUrl;
|
||||
} catch (err) {
|
||||
console.log("error to convertBase64ToFile in placeholder flow", err);
|
||||
@@ -975,14 +978,14 @@ const TemplatePlaceholder = () => {
|
||||
style: { fontSize: "13px" }
|
||||
},
|
||||
{
|
||||
selector: '[data-tut="reactourFirst"]',
|
||||
selector: '[data-tut="nonpresentmask"]',
|
||||
content: () => (
|
||||
<TourContentWithBtn
|
||||
message={t("tour-mssg.template-placeholder-2")}
|
||||
isChecked={handleDontShow}
|
||||
/>
|
||||
),
|
||||
position: "top",
|
||||
position: "center",
|
||||
style: { fontSize: "13px" },
|
||||
action: () => handleCloseRoleModal()
|
||||
},
|
||||
@@ -1280,7 +1283,6 @@ const TemplatePlaceholder = () => {
|
||||
const handleCloseRoleModal = () => {
|
||||
setIsModalRole(false);
|
||||
};
|
||||
|
||||
const handleSaveWidgetsOptions = (
|
||||
dropdownName,
|
||||
dropdownOptions,
|
||||
@@ -1306,21 +1308,21 @@ const TemplatePlaceholder = () => {
|
||||
|
||||
const getPosData = getXYdata;
|
||||
const addSignPos = getPosData.map((position) => {
|
||||
if (position.key === signKey) {
|
||||
if (widgetType === radioButtonWidget) {
|
||||
if (position.key === currWidgetsDetails?.key) {
|
||||
if (currWidgetsDetails?.type === radioButtonWidget) {
|
||||
if (addOption) {
|
||||
return {
|
||||
...position,
|
||||
Height: position.Height
|
||||
? position.Height + 15
|
||||
: defaultWidthHeight(widgetType).height + 15
|
||||
: defaultWidthHeight(currWidgetsDetails?.type).height + 15
|
||||
};
|
||||
} else if (deleteOption) {
|
||||
return {
|
||||
...position,
|
||||
Height: position.Height
|
||||
? position.Height - 15
|
||||
: defaultWidthHeight(widgetType).height - 15
|
||||
: defaultWidthHeight(currWidgetsDetails?.type).height - 15
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
@@ -1342,20 +1344,20 @@ const TemplatePlaceholder = () => {
|
||||
}
|
||||
};
|
||||
}
|
||||
} else if (widgetType === "checkbox") {
|
||||
} else if (currWidgetsDetails?.type === "checkbox") {
|
||||
if (addOption) {
|
||||
return {
|
||||
...position,
|
||||
Height: position.Height
|
||||
? position.Height + 15
|
||||
: defaultWidthHeight(widgetType).height + 15
|
||||
: defaultWidthHeight(currWidgetsDetails?.type).height + 15
|
||||
};
|
||||
} else if (deleteOption) {
|
||||
return {
|
||||
...position,
|
||||
Height: position.Height
|
||||
? position.Height - 15
|
||||
: defaultWidthHeight(widgetType).height - 15
|
||||
: defaultWidthHeight(currWidgetsDetails?.type).height - 15
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
@@ -1447,7 +1449,7 @@ const TemplatePlaceholder = () => {
|
||||
const getXYdata = getPageNumer[0].pos;
|
||||
const getPosData = getXYdata;
|
||||
const addSignPos = getPosData.map((position) => {
|
||||
if (position.key === signKey) {
|
||||
if (position.key === currWidgetsDetails?.key) {
|
||||
if (position.type === textInputWidget) {
|
||||
return {
|
||||
...position,
|
||||
@@ -1457,7 +1459,9 @@ const TemplatePlaceholder = () => {
|
||||
status: defaultdata?.status || "required",
|
||||
hint: defaultdata?.hint || "",
|
||||
defaultValue: defaultdata?.defaultValue || "",
|
||||
validation: {},
|
||||
isReadOnly: defaultdata?.isReadOnly || false,
|
||||
validation:
|
||||
{},
|
||||
fontSize:
|
||||
fontSize || currWidgetsDetails?.options?.fontSize || 12,
|
||||
fontColor:
|
||||
@@ -1524,13 +1528,6 @@ const TemplatePlaceholder = () => {
|
||||
setShowDropdown(false);
|
||||
setIsRadio(false);
|
||||
setIsCheckbox(false);
|
||||
//condition for text widget type after set all values for text widget
|
||||
//change setUniqueId which is set in tempsignerId
|
||||
//because textwidget do not have signer user so for selected signers we have to do
|
||||
if (currWidgetsDetails.type === textWidget) {
|
||||
setUniqueId(tempSignerId);
|
||||
setTempSignerId("");
|
||||
}
|
||||
};
|
||||
|
||||
const clickOnZoomIn = () => {
|
||||
@@ -1777,12 +1774,10 @@ const TemplatePlaceholder = () => {
|
||||
setXyPosition={setSignerPos}
|
||||
allPages={allPages}
|
||||
pageNumber={pageNumber}
|
||||
signKey={signKey}
|
||||
signKey={currWidgetsDetails?.key}
|
||||
Id={uniqueId}
|
||||
widgetType={widgetType}
|
||||
widgetType={currWidgetsDetails?.type}
|
||||
setUniqueId={setUniqueId}
|
||||
tempSignerId={tempSignerId}
|
||||
setTempSignerId={setTempSignerId}
|
||||
/>
|
||||
{/* pdf header which contain funish back button */}
|
||||
<Header
|
||||
@@ -1839,14 +1834,10 @@ const TemplatePlaceholder = () => {
|
||||
setUniqueId={setUniqueId}
|
||||
signersdata={signersdata}
|
||||
setIsPageCopy={setIsPageCopy}
|
||||
setSignKey={setSignKey}
|
||||
isDragging={isDragging}
|
||||
setShowDropdown={setShowDropdown}
|
||||
setCurrWidgetsDetails={setCurrWidgetsDetails}
|
||||
setWidgetType={setWidgetType}
|
||||
setIsRadio={setIsRadio}
|
||||
setSelectWidgetId={setSelectWidgetId}
|
||||
selectWidgetId={selectWidgetId}
|
||||
setIsCheckbox={setIsCheckbox}
|
||||
handleNameModal={setIsNameModal}
|
||||
pdfOriginalWH={pdfOriginalWH}
|
||||
@@ -1860,9 +1851,9 @@ const TemplatePlaceholder = () => {
|
||||
setFontColor={setFontColor}
|
||||
isResize={isResize}
|
||||
divRef={divRef}
|
||||
setTempSignerId={setTempSignerId}
|
||||
uniqueId={uniqueId}
|
||||
unSignedWidgetId={unSignedWidgetId}
|
||||
currWidgetsDetails={currWidgetsDetails}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
@@ -1899,7 +1890,6 @@ const TemplatePlaceholder = () => {
|
||||
setBlockColor={setBlockColor}
|
||||
setSignerPos={setSignerPos}
|
||||
uniqueId={uniqueId}
|
||||
setSelectWidgetId={setSelectWidgetId}
|
||||
isTemplateFlow={true}
|
||||
/>
|
||||
</div>
|
||||
@@ -1977,7 +1967,7 @@ const TemplatePlaceholder = () => {
|
||||
)}
|
||||
<WidgetNameModal
|
||||
signatureType={signatureType}
|
||||
widgetName={widgetName}
|
||||
widgetName={currWidgetsDetails?.options?.name}
|
||||
defaultdata={currWidgetsDetails}
|
||||
isOpen={isNameModal}
|
||||
handleClose={handleNameModal}
|
||||
+2
-1
@@ -7,7 +7,8 @@ import Title from "../components/Title";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { emailRegex } from "../constant/const";
|
||||
const UpdateExistUserAdmin = () => {
|
||||
const appName = "OpenSign™";
|
||||
const appName =
|
||||
"OpenSign™";
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
const [formdata, setFormdata] = useState({ email: "", masterkey: "" });
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user