# 📊 Survey PostHog : Satisfaction création de contrats

## 🎯 Objectif

Mesurer la satisfaction des utilisateurs concernant le processus de création de contrats avec une note de 1 à 5.

## ✅ Étape 1 : Événement tracké

L'événement `contract_created` est maintenant envoyé à PostHog après chaque création de contrat réussie, avec les propriétés suivantes :

```typescript
posthog.capture('contract_created', {
  contract_type: 'CDDU' | 'RG',
  regime: 'CDDU_MONO' | 'CDDU_MULTI' | 'Régime Général',
  multi_mois: boolean,
  categorie_professionnelle: 'Artiste' | 'Technicien' | 'Autre',
  contract_id: string,
  has_notes: boolean,
  validation_immediate: boolean,
});
```

## 🔧 Étape 2 : Créer le survey dans PostHog

### 1. Accéder à PostHog
- Rendez-vous sur https://eu.posthog.com/
- Connectez-vous avec vos identifiants

### 2. Créer un nouveau survey
1. Dans le menu de gauche, cliquez sur **"Surveys"**
2. Cliquez sur **"New survey"**
3. Choisissez **"Rating"** comme type de question

### 3. Configuration du survey

#### **Question**
```
Comment évaluez-vous la facilité du processus de création de contrat ?
```

#### **Type de réponse**
- **Type** : Rating (échelle)
- **Scale** : 1 à 5
- **Display** : Stars (⭐) ou Numbers (1 2 3 4 5)

#### **Labels optionnels**
- **1 étoile** : Très difficile
- **5 étoiles** : Très facile

ou simplement :
- **Low** : 1 - Difficile
- **High** : 5 - Facile

#### **Nom du survey**
```
Satisfaction création de contrats
```

#### **Description (optionnelle)**
```
Aidez-nous à améliorer votre expérience
```

### 4. Ciblage du survey

#### **Quand afficher le survey ?**

**Option A : Après chaque création (recommandé pour commencer)**
```
Événement : contract_created
Affichage : Immédiatement après l'événement
```

**Option B : Après X créations (pour ne pas être trop intrusif)**
```
Événement : contract_created
Condition : event_count >= 3
(Afficher seulement après 3 créations de contrats)
```

**Option C : Une seule fois par utilisateur**
```
Événement : contract_created
Condition : survey_not_completed
Fréquence : Une fois par utilisateur
```

#### **Configuration recommandée pour démarrer :**

Dans la section **"Targeting"** du survey PostHog :

1. **Linked flag or targeting** :
   - Event name: `contract_created`
   
2. **Conditions** :
   - Show survey when: `contract_created` event is captured
   - Wait: `1 second` (laisser le temps à la redirection de se faire)
   
3. **Appearance** :
   - Position: Bottom right (en bas à droite)
   - Type: Popover (fenêtre flottante)

4. **Frequency** :
   - Show once per user: **No** (pour avoir plusieurs réponses)
   - Days between survey appearances: **7** (ne pas harceler l'utilisateur)

### 5. Design et style

```
Title: 📊 Votre avis compte !
Question: Comment évaluez-vous la facilité du processus de création de contrat ?
Button text: Envoyer
Dismiss button: Peut-être plus tard
```

**Couleurs** :
- Primary color: `#10b981` (vert Emerald de votre app)
- Background: `#ffffff`

### 6. Question de suivi (optionnelle)

Vous pouvez ajouter une **question de suivi** si la note est basse (≤ 3) :

```
Si note ≤ 3 : "Que pourrions-nous améliorer ?"
Type : Open text (texte libre)
Placeholder : "Partagez vos suggestions..."
```

Configuration dans PostHog :
- Cliquez sur **"Add follow-up question"**
- Condition: `rating <= 3`
- Type: Open text

## 📈 Étape 3 : Analyser les résultats

### Dashboard dans PostHog

1. Aller dans **Surveys** → **Votre survey**
2. Consulter :
   - **Response rate** : Taux de réponse
   - **Average rating** : Note moyenne
   - **Distribution** : Répartition des notes (1 à 5)
   - **Responses over time** : Évolution dans le temps

### Créer des insights personnalisés

1. Aller dans **Insights** → **New insight**
2. Créer un graphique :
   ```
   Event: survey_responded
   Filter: survey_name = "Satisfaction création de contrats"
   Breakdown: rating
   ```

3. Analyser par type de contrat :
   ```
   Event: survey_responded
   Filter: survey_name = "Satisfaction création de contrats"
   Breakdown: contract_type (CDDU vs RG)
   ```

### Alertes automatiques

Configurez une alerte si la note moyenne descend sous un seuil :

1. Aller dans **Alerts** → **New alert**
2. Condition : `average_rating < 3`
3. Notification : Email ou Slack

## 🎨 Option avancée : Survey personnalisé dans le code

Si vous préférez un contrôle total sur le design et le timing, vous pouvez créer un survey personnalisé :

```tsx
// components/ContractCreationSurvey.tsx
'use client';

import { useState } from 'react';
import { usePostHog } from 'posthog-js/react';
import { Star, X } from 'lucide-react';

export function ContractCreationSurvey({ 
  isOpen, 
  onClose,
  contractId 
}: { 
  isOpen: boolean; 
  onClose: () => void;
  contractId?: string;
}) {
  const posthog = usePostHog();
  const [rating, setRating] = useState<number | null>(null);
  const [hoverRating, setHoverRating] = useState<number | null>(null);
  const [submitted, setSubmitted] = useState(false);

  if (!isOpen || submitted) return null;

  const handleSubmit = () => {
    if (rating) {
      posthog?.capture('contract_creation_survey_submitted', {
        rating,
        contract_id: contractId,
      });
      setSubmitted(true);
      setTimeout(onClose, 2000);
    }
  };

  return (
    <div className="fixed bottom-4 right-4 z-50 w-96 bg-white rounded-xl shadow-2xl border border-slate-200 p-6">
      <button
        onClick={onClose}
        className="absolute top-3 right-3 text-slate-400 hover:text-slate-600"
      >
        <X className="w-5 h-5" />
      </button>

      <h3 className="text-lg font-semibold mb-2">📊 Votre avis compte !</h3>
      <p className="text-sm text-slate-600 mb-4">
        Comment évaluez-vous la facilité du processus de création de contrat ?
      </p>

      <div className="flex justify-center gap-2 mb-6">
        {[1, 2, 3, 4, 5].map((star) => (
          <button
            key={star}
            onClick={() => setRating(star)}
            onMouseEnter={() => setHoverRating(star)}
            onMouseLeave={() => setHoverRating(null)}
            className="transition-transform hover:scale-110"
          >
            <Star
              className={`w-8 h-8 ${
                (hoverRating || rating || 0) >= star
                  ? 'fill-yellow-400 text-yellow-400'
                  : 'text-slate-300'
              }`}
            />
          </button>
        ))}
      </div>

      <div className="flex justify-between text-xs text-slate-500 mb-4">
        <span>Très difficile</span>
        <span>Très facile</span>
      </div>

      <button
        onClick={handleSubmit}
        disabled={!rating}
        className="w-full py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 disabled:opacity-50 disabled:cursor-not-allowed transition"
      >
        Envoyer
      </button>
    </div>
  );
}
```

Puis l'intégrer dans `NouveauCDDUForm.tsx` :

```tsx
const [showSurvey, setShowSurvey] = useState(false);
const [createdContractId, setCreatedContractId] = useState<string>();

// Après création réussie :
setCreatedContractId(result?.contract?.id);
setShowSurvey(true);

// Dans le JSX :
<ContractCreationSurvey
  isOpen={showSurvey}
  onClose={() => setShowSurvey(false)}
  contractId={createdContractId}
/>
```

## 📊 Comparaison des deux approches

| Critère | Survey PostHog natif | Survey personnalisé |
|---------|---------------------|---------------------|
| **Facilité de mise en place** | ⭐⭐⭐⭐⭐ Très facile | ⭐⭐⭐ Moyen |
| **Contrôle du design** | ⭐⭐⭐ Limité | ⭐⭐⭐⭐⭐ Total |
| **Analytics automatiques** | ⭐⭐⭐⭐⭐ Intégré | ⭐⭐⭐ À configurer |
| **A/B testing** | ⭐⭐⭐⭐⭐ Natif | ⭐⭐ Manuel |
| **Multilingue** | ⭐⭐⭐⭐ Facile | ⭐⭐⭐⭐⭐ Total |
| **Maintenance** | ⭐⭐⭐⭐⭐ Aucune | ⭐⭐⭐ Régulière |

**Recommandation** : Commencez avec le **Survey PostHog natif**, c'est plus rapide et vous aurez les analytics automatiquement. Si vous avez besoin de plus de contrôle, passez au survey personnalisé plus tard.

## ✅ Checklist de déploiement

- [ ] Code modifié dans `NouveauCDDUForm.tsx` (déjà fait ✅)
- [ ] Variables PostHog configurées dans `.env.local`
- [ ] Créer le survey dans le dashboard PostHog
- [ ] Configurer le ciblage sur l'événement `contract_created`
- [ ] Tester en créant un contrat
- [ ] Vérifier dans PostHog que l'événement arrive
- [ ] Vérifier que le survey s'affiche
- [ ] Configurer les alertes si nécessaire

## 🧪 Test

1. Créez un contrat de test
2. Vérifiez dans la console : `📊 PostHog: Événement contract_created envoyé`
3. Le survey devrait apparaître quelques secondes après la création
4. Donnez une note
5. Vérifiez dans PostHog → Surveys que la réponse est enregistrée

## 📚 Ressources

- [Documentation PostHog Surveys](https://posthog.com/docs/surveys)
- [Survey templates](https://posthog.com/templates/surveys)
- [Best practices](https://posthog.com/docs/surveys/best-practices)

---

**Dernière mise à jour** : 15 octobre 2025