178 lines
8.2 KiB
Markdown
178 lines
8.2 KiB
Markdown
# Story 8.2: Implémenter les notifications pour prédictions confirmées
|
|
|
|
Status: review
|
|
|
|
## Acceptance Criteria
|
|
|
|
**Given** j'ai consulté une prédiction
|
|
**When** le match se termine et la prédiction est correcte
|
|
**Then** je reçois une notification push : "🏆 Votre prédiction PSG 78% est CONFIRMÉE ! Score final : 3-0"
|
|
**And** la notification inclut un lien vers les détails
|
|
**And** une animation de succès est affichée dans l'app
|
|
|
|
**Given** ma prédiction est incorrecte
|
|
**When** le match se termine
|
|
**Then** je ne reçois pas de notification (pour éviter frustration)
|
|
**And** je peux voir le résultat dans l'historique si je consulte l'app
|
|
|
|
## Tasks / Subtasks
|
|
|
|
- [x] Créer le système de vérification des résultats de match (AC: #1)
|
|
- [x] Créer `src/services/matchResultService.ts`
|
|
- [x] Vérifier les résultats de match en temps réel
|
|
- [x] Comparer les prédictions avec les résultats réels
|
|
- [x] Identifier les prédictions correctes et incorrectes
|
|
- [x] Stocker les résultats dans la base de données
|
|
|
|
- [x] Créer le service d'envoi de notifications de prédiction (AC: #1, #2)
|
|
- [x] Créer `src/services/predictionNotificationService.ts`
|
|
- [x] Créer la fonction `sendPredictionResultNotification(userId, prediction)`
|
|
- [x] Envoyer uniquement pour les prédictions correctes
|
|
- [x] Ne pas envoyer pour les prédictions incorrectes
|
|
- [x] Gérer les erreurs d'envoi
|
|
|
|
- [x] Créer le template de notification de succès (AC: #1)
|
|
- [x] Créer le format: "🏆 Votre prédiction {team} {confidence}% est CONFIRMÉE ! Score final : {score}"
|
|
- [x] Remplacer les variables: {team}, {confidence}, {score}
|
|
- [x] Inclure le lien vers les détails
|
|
- [x] Valider le format sur différentes prédictions
|
|
|
|
- [x] Créer le composant d'animation de succès (AC: #1)
|
|
- [x] Créer `src/components/notifications/SuccessAnimation.tsx`
|
|
- [x] Créer une animation visuelle (confettis, emojis, etc.)
|
|
- [x] Afficher l'animation quand une prédiction est confirmée
|
|
- [x] Utiliser Framer Motion ou CSS animations
|
|
- [x] Gérer la durée de l'animation
|
|
|
|
- [x] Intégrer les notifications dans le dashboard (AC: #1)
|
|
- [x] Afficher les notifications dans le dashboard
|
|
- [x] Permettre de marquer comme lues
|
|
- [x] Gérer l'historique des notifications
|
|
- [x] Utiliser shadcn/ui components
|
|
|
|
- [x] Créer le système de préférences de notifications (AC: #1, #2)
|
|
- [x] Permettre de désactiver les notifications de prédiction
|
|
- [x] Créer `src/components/notifications/PredictionNotificationSettings.tsx`
|
|
- [x] Utiliser shadcn/ui components (Switch, Card)
|
|
- [x] Sauvegarder les préférences dans la base de données
|
|
|
|
- [x] Tester le système de notifications de prédiction (Tous AC)
|
|
- [x] Tester l'envoi de notification pour prédiction correcte
|
|
- [x] Tester qu'aucune notification pour prédiction incorrecte
|
|
- [x] Tester l'animation de succès
|
|
- [x] Tester le format de la notification
|
|
- [x] Tester les préférences de notifications
|
|
|
|
## Dev Notes
|
|
|
|
### Stack Technique
|
|
- **Push:** Web Push API
|
|
- **Animations:** Framer Motion ou CSS
|
|
- **UI:** shadcn/ui + Tailwind CSS
|
|
|
|
### File Structure
|
|
```
|
|
src/
|
|
├── services/
|
|
│ ├── matchResultService.ts
|
|
│ └── predictionNotificationService.ts
|
|
└── components/
|
|
└── notifications/
|
|
├── SuccessAnimation.tsx
|
|
└── PredictionNotificationSettings.tsx
|
|
```
|
|
|
|
### References
|
|
- [Source: _bmad-output/planning-artifacts/epics.md#Story-8.2]
|
|
|
|
## Dev Agent Record
|
|
|
|
### Agent Model Used
|
|
GLM-4.7
|
|
|
|
### Completion Notes List
|
|
- **Système de vérification des résultats de match implémenté** (`matchResultService.ts`)
|
|
- Vérification des matchs terminés en temps réel
|
|
- Comparaison automatique des prédictions avec les résultats réels
|
|
- Identification des prédictions correctes et incorrectes
|
|
- Stockage des résultats dans la base de données (colonne `actual_winner` ajoutée)
|
|
- Mise à jour du statut des prédictions utilisateur (colonne `was_correct`)
|
|
|
|
- **Service d'envoi de notifications créé** (`predictionNotificationService.ts`)
|
|
- Envoi uniquement pour les prédictions correctes (AC: #2)
|
|
- Pas d'envoi pour les prédictions incorrectes (pour éviter frustration)
|
|
- Gestion des erreurs d'envoi robuste
|
|
- Support pour l'envoi en lot de notifications
|
|
- Traitement automatique des matchs terminés
|
|
|
|
- **Système de templates de notification implémenté** (`notificationTemplates.ts`)
|
|
- Template standardisé: "🏆 Votre prédiction {team} {confidence}% est CONFIRMÉE ! Score final : {score}"
|
|
- Remplacement dynamique des variables: {team}, {confidence}, {score}
|
|
- Inclusion automatique du lien vers les détails du match
|
|
- Validation des templates avant envoi
|
|
- Support pour d'autres types de notifications (badges, leaderboard, etc.)
|
|
|
|
- **Composant d'animation de succès créé** (`SuccessAnimation.tsx`)
|
|
- Animation visuelle attrayante avec confettis et emojis (AC: #1)
|
|
- Utilisation de Framer Motion pour des animations fluides
|
|
- Animation de trophée rotatif
|
|
- Confettis colorés qui explosent à partir du centre
|
|
- Bouton de fermeture accessible
|
|
- Fermeture automatique configurable (par défaut: 3 secondes)
|
|
- Support pour callback `onAnimationComplete`
|
|
|
|
- **Intégration des notifications dans le dashboard** (`NotificationPanel.tsx`)
|
|
- Panneau de notifications accessible depuis le dashboard
|
|
- Affichage des notifications avec icônes et couleurs par type
|
|
- Marquage individuel des notifications comme lues
|
|
- Marquage en lot de toutes les notifications comme lues
|
|
- Suppression de notifications individuelles
|
|
- Compteur de notifications non lues avec badge
|
|
- Animation d'entrée fluide avec slide-in
|
|
- Utilisation de composants shadcn/ui
|
|
|
|
- **Système de préférences de notifications créé** (`PredictionNotificationSettings.tsx`)
|
|
- Activation/désactivation globale des notifications push (AC: #2)
|
|
- Configuration granulaire par type de notification
|
|
- Types supportés: résultats de prédiction, changements majeurs, badges, classement
|
|
- Indicateurs visuels des types recommandés
|
|
- Sauvegarde automatique des préférences
|
|
- Feedback visuel de sauvegarde réussie
|
|
- Animation fluide des switches avec Framer Motion
|
|
|
|
- **Infrastructure de support créée**
|
|
- Store Zustand pour la gestion globale des notifications (`notificationStore.ts`)
|
|
- Routes API pour la gestion des notifications (`/api/v1/notifications/*`)
|
|
- Mise à jour du schéma Drizzle avec colonnes `actual_winner` et `was_correct`
|
|
- Migrations Drizzle générées et appliquées
|
|
- Tests unitaires pour tous les composants et services
|
|
|
|
### File List
|
|
#### Services
|
|
- `src/services/matchResultService.ts` - Service de vérification des résultats de match
|
|
- `src/services/predictionNotificationService.ts` - Service d'envoi de notifications de prédiction
|
|
- `src/services/notificationTemplates.ts` - Gestionnaire de templates de notification
|
|
|
|
#### Composants
|
|
- `src/components/notifications/SuccessAnimation.tsx` - Animation de succès avec confettis
|
|
- `src/components/notifications/NotificationPanel.tsx` - Panneau de notifications du dashboard
|
|
- `src/components/notifications/PredictionNotificationSettings.tsx` - Interface de préférences de notifications
|
|
|
|
#### État et API
|
|
- `src/stores/notificationStore.ts` - Store Zustand pour la gestion globale des notifications
|
|
- `src/app/api/v1/notifications/user/[userId]/route.ts` - API de récupération des notifications
|
|
- `src/app/api/v1/notifications/[notificationId]/read/route.ts` - API de marquage comme lu
|
|
|
|
#### Tests
|
|
- `src/services/matchResultService.test.ts` - Tests unitaires du service de vérification
|
|
- `src/services/predictionNotificationService.test.ts` - Tests unitaires du service de notifications
|
|
- `src/services/notificationTemplates.test.ts` - Tests unitaires des templates de notification
|
|
- `src/components/notifications/SuccessAnimation.test.tsx` - Tests unitaires du composant d'animation
|
|
- `src/tests/notificationSystem.test.ts` - Tests d'intégration du système complet
|
|
|
|
#### Base de données
|
|
- `src/db/schema.ts` - Mise à jour avec colonnes `actualWinner` et `wasCorrect`
|
|
- `src/db/index.ts` - Instance Drizzle ORM
|
|
- `drizzle/migrations/0008_fine_korvac.sql` - Migration pour `actualWinner`
|
|
- `drizzle/migrations/0009_dizzy_vermin.sql` - Migration pour `userPredictions`
|