# 🎯 Guide rapide : Intégration du survey personnalisé

## Option 1 : Utiliser le survey PostHog natif (Recommandé)

✅ **Déjà configuré !** L'événement `contract_created` est envoyé automatiquement.

Il vous suffit de :
1. Aller sur https://eu.posthog.com/
2. Créer un survey (voir `POSTHOG_SURVEY_CONTRATS.md`)
3. Le cibler sur l'événement `contract_created`

**Avantages** : Analytics automatiques, A/B testing, maintenance zéro.

---

## Option 2 : Utiliser le composant personnalisé

Si vous voulez un contrôle total sur le design et le timing, utilisez le composant `ContractCreationSurvey`.

### Intégration dans NouveauCDDUForm

Ajoutez ces imports en haut du fichier :

```tsx
import { ContractCreationSurvey } from '@/components/surveys/ContractCreationSurvey';
```

Ajoutez ces states avec les autres states du formulaire :

```tsx
const [showSurvey, setShowSurvey] = useState(false);
const [surveyContractId, setSurveyContractId] = useState<string>();
const [surveyContractType, setSurveyContractType] = useState<'CDDU' | 'RG'>();
```

Dans la fonction `onSubmit`, après la création réussie, ajoutez :

```tsx
// Après: const result = await res.json().catch(() => ({}));
setSurveyContractId(result?.contract?.id || result?.contract?.contract_number);
setSurveyContractType(isRegimeRG ? 'RG' : 'CDDU');

// Afficher le survey après un court délai (laisser le temps à la redirection de commencer)
setTimeout(() => {
  setShowSurvey(true);
}, 1500);
```

Ajoutez le composant dans le JSX, après les overlays existants :

```tsx
{/* Survey de satisfaction - après la fin des overlays existants */}
<ContractCreationSurvey
  isOpen={showSurvey}
  onClose={() => setShowSurvey(false)}
  contractId={surveyContractId}
  contractType={surveyContractType}
/>
```

### Exemple complet de modification

```tsx
// Dans onSubmit(), juste après la création réussie :

const result = await res.json().catch(() => ({}));

// 🎯 PostHog event (déjà en place)
posthog?.capture('contract_created', { ... });

// 🎯 Préparer le survey personnalisé
setSurveyContractId(result?.contract?.id);
setSurveyContractType(isRegimeRG ? 'RG' : 'CDDU');

// Autoriser la navigation
allowNavRef.current = true;
setRedirecting(true);

// Afficher le survey après 1.5s (pendant la redirection)
setTimeout(() => {
  setShowSurvey(true);
}, 1500);

// Redirection après 3s
setTimeout(() => {
  router.push("/contrats");
}, 3000);
```

### Résultat

Le survey apparaîtra en **bas à droite** de l'écran pendant la redirection, permettant à l'utilisateur de donner son avis avant d'être redirigé vers la liste des contrats.

---

## 📊 Analyser les résultats

### Dans PostHog

1. Allez dans **Activity** → **Live events**
2. Filtrez par événement : `contract_creation_survey_submitted`
3. Vous verrez les propriétés :
   - `rating` : Note de 1 à 5
   - `feedback` : Commentaire (si donné)
   - `contract_id` : ID du contrat
   - `contract_type` : CDDU ou RG

### Créer un insight

```
Event: contract_creation_survey_submitted
Aggregation: Average of rating
Breakdown: contract_type
```

Cela vous donnera la note moyenne par type de contrat.

---

## 🎨 Personnalisation

### Changer les couleurs

Dans `ContractCreationSurvey.tsx`, modifiez les classes Tailwind :

```tsx
// Bouton principal
className="... bg-emerald-600 hover:bg-emerald-700"

// Étoiles
className="... fill-yellow-400 text-yellow-400"

// Border du composant
className="... border-slate-200"
```

### Changer la position

```tsx
// En bas à gauche
className="fixed bottom-4 left-4 ..."

// En haut à droite
className="fixed top-4 right-4 ..."

// Centre de l'écran
className="fixed inset-0 flex items-center justify-center ..."
```

### Changer le timing

```tsx
// Afficher immédiatement après création
setTimeout(() => setShowSurvey(true), 0);

// Afficher après 5 secondes
setTimeout(() => setShowSurvey(true), 5000);
```

---

## 🚨 Troubleshooting

### Le survey ne s'affiche pas

1. Vérifiez que `isOpen={true}` dans les props
2. Vérifiez que PostHog est bien initialisé (`window.posthog` dans la console)
3. Vérifiez les z-index (le composant a `z-50`)

### Le survey se ferme trop vite

Augmentez le délai dans `handleSubmit` :

```tsx
setTimeout(() => {
  onClose();
}, 3000); // 3 secondes au lieu de 2
```

### Les événements n'arrivent pas dans PostHog

1. Ouvrez DevTools → Network
2. Filtrez par "batch"
3. Vérifiez que les requêtes vers PostHog ont un statut 200
4. Vérifiez dans la console : `📊 Survey soumis: ...`

---

**Recommandation finale** : Commencez avec le **survey PostHog natif** pour sa simplicité et ses analytics automatiques. Passez au composant personnalisé seulement si vous avez des besoins spécifiques de design ou de UX.