espace-paie-odentas/GUIDE_TEST_INTERFACE_ODENTAS_SIGN.md

# 🚀 Guide de Test Rapide - Interface Odentas Sign

## ⚡ Démarrage rapide (2 minutes)

### 1. Prérequis

```bash
# 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

```bash
# 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

```bash
./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)

```sql
-- 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

```bash
# 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:**
```bash
# 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`:

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

### Changer le document PDF

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

### Désactiver le mode test

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

```javascript
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

```bash
# 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