espace-paie-odentas/DOCUSEAL_FIXES.md

Résumé des Corrections - Signatures DocuSeal

Date: 14 octobre 2025

Problème identifié

❌ Erreur : Unable to find form with slug 'mj9RzzWW2LbvnT?data-allow-typed-signature=false'

Cause : Les paramètres data-* étaient ajoutés à l'URL du slug DocuSeal, ce qui causait une erreur 404.

Solution implémentée

Les attributs data-* de DocuSeal doivent être passés comme attributs HTML sur le composant <docuseal-form>, pas dans l'URL data-src.

✅ Modifications effectuées

1. Composant <docuseal-form>

Fichiers modifiés :

• /app/(app)/contrats/[id]/page.tsx
• /app/(app)/signatures-electroniques/page.tsx

Avant (❌ incorrect) :

<docuseal-form
  data-src="https://docuseal.eu/s/mj9RzzWW2LbvnT?data-allow-typed-signature=false">
</docuseal-form>

Après (✅ correct) :

<docuseal-form
  data-src="https://docuseal.eu/s/mj9RzzWW2LbvnT"
  data-language="fr"
  data-with-title="false"
  data-background-color="#fff"
  data-allow-typed-signature="false">
</docuseal-form>

2. Génération des URLs propres

Fichiers modifiés :

• /app/(app)/contrats/[id]/page.tsx (lignes ~703-710, ~736-744)
• /app/(app)/signatures-electroniques/page.tsx (lignes ~203-218, ~243-251)
• /app/api/docuseal-signature/route.ts (lignes ~225-233)

Changement : Les URLs DocuSeal sont maintenant générées sans paramètres de requête.

// ✅ Correct
embed = `https://docuseal.eu/s/${docusealId}`;

// ❌ Ancien (incorrect)
embed = `https://docuseal.eu/s/${docusealId}?data-allow-typed-signature=false`;

État actuel de la fonctionnalité

✅ Désactivation de la saisie manuelle

Statut : Implémenté et fonctionnel

L'attribut data-allow-typed-signature="false" est ajouté sur le composant <docuseal-form> dans :

• Page de détail d'un contrat (/contrats/[id])
• Page des signatures électroniques (/signatures-electroniques)

⏳ Pré-remplissage de la signature (EN COURS)

Statut : Implémentation partielle

Ce qui fonctionne :

• ✅ Colonne signature_b64 créée dans organization_details
• ✅ L'API récupère la signature depuis la base de données
• ✅ Le paramètre orgId est passé depuis les composants

Ce qui reste à faire :

• Ajouter data-signature dynamiquement sur <docuseal-form>
• Récupérer la signature côté client ou la passer via le serveur
• Tester avec une vraie signature base64

Comment tester

Test 1 : Désactivation de la saisie manuelle

1. Créer une nouvelle signature électronique depuis :

   • /staff/contrats/[id] (bouton "Lancer signature électronique")
   • Ou /staff/contrats (sélection multiple + signature groupée)

2. Ouvrir le lien de signature (en tant qu'employeur)

3. Vérifier :

   • ❌ L'option "Saisir" ne doit PAS être disponible
   • ✅ Les options "Dessiner" et "Charger" doivent être disponibles

Test 2 : Pré-remplissage de la signature (à venir)

1. Ajouter une signature dans la base :

UPDATE organization_details 
SET signature_b64 = 'data:image/png;base64,iVBORw0KG...'
WHERE org_id = 'VOTRE_ORG_ID';

2. Créer une signature électronique pour un contrat de cette organisation

3. Vérifier :

   • La signature devrait être pré-remplie pour l'employeur
   • L'employeur peut la valider ou la remplacer

Prochaines étapes

Pour le pré-remplissage de la signature

Option A : Via l'API DocuSeal (recommandé)

• Utiliser le paramètre values lors de la création de la soumission
• Nécessite de connaître le nom exact du champ de signature dans le template

Option B : Côté client

• Récupérer la signature depuis Supabase côté client
• L'injecter dans l'attribut data-signature du composant
• Plus complexe mais plus flexible

Option C : URL encode dans signature_link

• Stocker la signature encodée dans le lien de signature
• L'extraire et l'ajouter dynamiquement au composant
• Limite de taille d'URL potentielle

Documentation de référence

• DocuSeal Embed Documentation : https://docs.docuseal.co/embed
• Attributs data-* :
  • data-allow-typed-signature: boolean (default: true)
  • data-signature: string (base64, URL, ou texte)
  • data-language: string (ex: "fr")
  • data-with-title: boolean
  • data-background-color: string

Notes importantes

⚠️ Les attributs data-* de DocuSeal sont des attributs HTML, pas des paramètres d'URL.

⚠️ L'URL data-src doit pointer vers le slug DocuSeal pur sans query parameters.

⚠️ Pour le pré-remplissage, le format base64 doit être complet : data:image/png;base64,...