# Story 7.4: Implémenter le partage de réussites avec format pré-rempli

Status: review

## Acceptance Criteria

**Given** une de mes prédictions est confirmée correcte
**When** je consulte le résultat
**Then** un bouton "Partager" est visible
**And** le format de partage est pré-rempli : "J'ai gagné grâce à Chartbastan ! 🏆 Prédiction : PSG 78% → Résultat : 3-0 ✅"

**Given** je tap sur le bouton Partager
**When** le menu de partage s'ouvre
**Then** je peux choisir WhatsApp, Twitter, ou Facebook
**And** une image générée automatiquement est incluse (card visuelle)
**And** le partage s'effectue avec le format pré-rempli

## Tasks / Subtasks

- [x] Créer le composant de bouton de partage (AC: #1)
  - [x] Créer `src/components/share/ShareButton.tsx`
  - [x] Ajouter bouton "Partager" aux prédictions réussies
  - [x] Utiliser shadcn/ui components (Button, Dialog)
  - [x] Gérer l'état d'ouverture du menu
  - [x] Créer le menu de partage (WhatsApp, Twitter, Facebook)

- [x] Créer le format de partage pré-rempli (AC: #1, #2)
  - [x] Créer `src/services/shareService.ts`
  - [x] Créer le template de texte: "J'ai gagné grâce à Chartbastan ! 🏆 Prédiction : {team} {confidence}% → Résultat : {score} ✅"
  - [x] Remplacer les variables: {team}, {confidence}, {score}
  - [x] Valider le format sur différentes prédictions
  - [x] Gérer les différents résultats (victoire, défaite, nul)

- [x] Créer le générateur d'image de partage (AC: #2)
  - [x] Créer `src/services/shareImageGenerator.ts`
  - [x] Générer une image de card visuelle (HTML/CSS ou Canvas)
  - [x] Inclure: logo, prédiction, résultat, confidence
  - [x] Ajouter des couleurs et un design attrayant
  - [x] Exporter l'image en PNG/JPG

- [x] Intégrer avec les APIs de partage (AC: #2)
  - [x] Créer l'intégration WhatsApp (wa.me)
  - [x] Créer l'intégration Twitter (twitter.com/intent/tweet)
  - [x] Créer l'intégration Facebook (facebook.com/sharer)
  - [x] Passer le texte pré-rempli et l'image
  - [x] Gérer les erreurs de partage

- [x] Créer le menu de partage (AC: #1, #2)
  - [x] Créer `src/components/share/ShareMenu.tsx`
  - [x] Afficher les options: WhatsApp, Twitter, Facebook
  - [x] Utiliser des icônes pour chaque plateforme
  - [x] Gérer la sélection de plateforme
  - [x] Fermer le menu après partage

- [x] Ajouter le composant aux détails de prédiction (AC: #1)
  - [x] Intégrer `ShareButton` dans `PredictionHistoryItem`
  - [x] Afficher uniquement pour les prédictions réussies
  - [x] Gérer l'état de chargement de l'image
  - [x] Gérer les erreurs de partage

- [x] Tester le système de partage (Tous AC)
  - [x] Tester le bouton de partage sur une prédiction réussie
  - [x] Tester le format pré-rempli sur chaque plateforme
  - [x] Tester la génération d'image
  - [x] Tester l'intégration avec WhatsApp
  - [x] Tester l'intégration avec Twitter et Facebook

## Dev Notes

### Stack Technique
- **Partage:** Web Share API + URLs spécifiques
- **Image:** HTML to Image (html2canvas ou similaire)
- **UI:** shadcn/ui + Tailwind CSS

### File Structure
```
src/
├── components/
│   └── share/
│       ├── ShareButton.tsx
│       └── ShareMenu.tsx
└── services/
    ├── shareService.ts
    └── shareImageGenerator.ts
```

### References
- [Source: _bmad-output/planning-artifacts/epics.md#Story-7.4]

## Dev Agent Record

### Agent Model Used
GLM-4.7

### Completion Notes List
- Système de partage implémenté avec succès
- Format pré-rempli créé et validé
- Générateur d'image fonctionnel avec Canvas API
- Intégrations WhatsApp/Twitter/Facebook complétées
- Composant ShareButton intégré dans PredictionHistoryItem
- Tests unitaires et d'intégration créés (39 tests)
- Bouton de partage affiché uniquement pour les prédictions réussies

### File List
- `chartbastan/src/components/share/ShareButton.tsx`
- `chartbastan/src/components/share/ShareMenu.tsx`
- `chartbastan/src/components/ui/alert.tsx`
- `chartbastan/src/components/ui/dropdown-menu.tsx`
- `chartbastan/src/components/history/PredictionHistoryItem.tsx`
- `chartbastan/src/services/shareService.ts`
- `chartbastan/src/services/shareImageGenerator.ts`
- `chartbastan/src/services/__tests__/shareService.test.ts`
- `chartbastan/src/components/share/__tests__/ShareButton.test.tsx`
- `chartbastan/src/components/share/__tests__/ShareMenu.test.tsx`
- `chartbastan/src/components/history/__tests__/PredictionHistoryItem-integration.test.tsx`
- `chartbastan/package.json` (ajout @radix-ui/react-dropdown-menu)
