espace-paie-odentas/GUIDE_TEST_INTERFACE_ODENTAS_SIGN.md

🚀 Guide de Test Rapide - Interface Odentas Sign

⚡ Démarrage rapide (2 minutes)

1. Prérequis

# Vérifier que Next.js tourne
npm run dev

# Dans un autre terminal, créer une demande de test
node test-odentas-sign.js

2. Ouvrir l'interface

# Script interactif pour tester facilement
./test-interface-signature.sh

# Choisir option 1 ou 2 pour ouvrir dans le navigateur

3. Flow de test complet

🔐 Étape 1 : Vérification OTP

1. Sur la page /signer/[requestId]/[signerId]
2. Cliquer sur "Recevoir le code"
3. ⚠️ Important : L'OTP s'affiche dans les logs du serveur Next.js
4. Chercher dans le terminal :

⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
        MODE TEST - Code OTP
        Email: renaud.breviere@gmail.com
        Code: 123456
        Valide pendant 15 minutes
⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐

5. Copier le code à 6 chiffres
6. Le coller dans l'interface (auto-focus + auto-submit)
7. ✅ Validation automatique → Passage à l'étape signature

✍️ Étape 2 : Signature

1. Dessiner votre signature dans le canvas (souris/trackpad/doigt)
2. Si pas satisfait : cliquer "Recommencer"
3. Cocher la case de consentement
4. Cliquer "Valider ma signature"
5. ✅ Signature enregistrée → Passage à la confirmation

🎉 Étape 3 : Confirmation

1. Animation de confetti 🎊
2. Voir les détails : date, référence, progression
3. Tester avec les 2 signataires :
   • Employeur (paie@odentas.fr)
   • Salarié (renaud.breviere@gmail.com)
4. Quand les 2 ont signé → Message "Document finalisé"

📊 Vérifier les données

Dans le script interactif

./test-interface-signature.sh

# Choisir option 5 : Vérifier le statut

Affiche:

• Qui a signé
• Date de signature
• Progression (X/Y)

En base de données (Supabase)

-- Voir les événements récents
SELECT 
  event_type,
  created_at,
  metadata
FROM sign_events
ORDER BY created_at DESC
LIMIT 20;

-- Voir le statut des signataires
SELECT 
  name,
  role,
  has_signed,
  signed_at
FROM signers
WHERE request_id = '<votre-request-id>';

En S3

# Lister les signatures uploadées
aws s3 ls s3://odentas-sign/signatures/TEST-*/

# Exemple de résultat
# 2025-01-23 15:30:45      12345 95c4ccdc-1a26-4426-a56f-653758159b54.png
# 2025-01-23 15:32:12      13456 d481f070-2ac6-4f82-aff3-862783904d5d.png

🧪 Scénarios de test

✅ Happy Path

1. Employeur reçoit OTP → Valide → Signe → OK
2. Salarié reçoit OTP → Valide → Signe → OK
3. Document finalisé → Tous les 2 voient "Document finalisé"

❌ Cas d'erreur

OTP invalide (3 tentatives max)

1. Entrer "000000" → Erreur + "2 tentatives restantes"
2. Entrer "111111" → Erreur + "1 tentative restante"
3. Entrer "222222" → Erreur + "0 tentative restante" + Blocage

OTP expiré (15 minutes)

1. Recevoir OTP
2. Attendre 15+ minutes
3. Essayer de valider → Erreur "Code expiré"
4. Cliquer "Renvoyer le code"

Signature vide

1. Ne rien dessiner
2. Essayer de cocher le consentement → Bouton désactivé
3. Le bouton reste grisé tant que canvas vide

Session expirée (30 minutes)

1. Valider OTP
2. Attendre 30+ minutes sur page signature
3. Essayer de signer → Erreur 401 "Session expirée"
4. Retour automatique à l'étape OTP

📱 Test Mobile

iOS Safari

1. Ouvrir Safari sur iPhone
2. Aller sur l'URL de signature
3. Tester le canvas tactile (doigt)
4. Vérifier keyboard mobile pour OTP
5. Vérifier animations fluides

Android Chrome

1. Ouvrir Chrome sur Android
2. Même flow que iOS
3. Tester rotation écran
4. Vérifier zoom/pinch disabled sur canvas

🐛 Problèmes fréquents

"Cannot find module" à l'import

Solution:

# Redémarrer le serveur Next.js
npm run dev

OTP n'apparaît pas dans les logs

Vérifier:

1. Ref commence bien par TEST-
2. Le serveur dev tourne (npm run dev)
3. Chercher les étoiles ⭐ dans les logs

Canvas ne dessine pas

Vérifier:

1. Browser moderne (Chrome 90+, Safari 14+)
2. JavaScript activé
3. Console browser pour erreurs

Signature ne s'upload pas

Vérifier:

1. Session token valide (pas expiré)
2. Canvas a bien du contenu
3. Checkbox consentement cochée
4. Network tab pour voir erreur API

🎨 Personnalisation

Changer les emails de test

Éditer test-odentas-sign.js:

const signers = [
  {
    name: "Votre Nom",
    email: "votre@email.com",
    role: "Employeur",
    // ...
  },
  // ...
];

Changer le document PDF

const localPdfPath = './votre-fichier.pdf';

Désactiver le mode test

Dans la création de request, enlever le préfixe TEST-:

ref: `SIGN-${Date.now()}`, // Au lieu de TEST-

⚠️ Attention : En mode production, OTP sera envoyé par email SES !

📈 Monitoring

Métriques à surveiller

• ⏱️ Temps moyen de signature : OTP reçu → Signature validée
• 📧 Taux de succès OTP : Validations / Envois
• ✍️ Taux de complétion : Signatures finalisées / Créées
• 🔄 Retry rate : Nombre de "Recommencer" sur canvas

Logs à analyser

# Grep des événements OTP
grep "otp_verified" logs/app.log

# Grep des signatures complètes
grep "request_completed" logs/app.log

# Erreurs
grep "ERROR" logs/app.log | grep "odentas-sign"

✅ Checklist avant démo

• Serveur Next.js lancé (npm run dev)
• Demande de test créée (node test-odentas-sign.js)
• Script interactif testé (./test-interface-signature.sh)
• Flow complet testé (OTP → Signature → Confirmation)
• Les 2 signataires ont signé
• Progression affiche 2/2
• Confetti s'affiche
• Base de données vérifiée (events + signers)
• S3 vérifié (2 PNG dans signatures/)

🎯 Next Steps

Une fois l'interface validée :

1. Intégrer PDF Viewer → Voir ODENTAS_SIGN_INTERFACE.md
2. Activer vraie signature PAdES → Retirer test mode bypass
3. Créer emails de notification → Templates + triggers
4. Tests de charge → Artillery, k6
5. Migration DocuSeal → Plan progressif

---

Bon test ! 🚀

Si problème : renaud.breviere@gmail.com