sepehr/chartbastan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
chartbastan/_bmad-output/implementation-artifacts/8-2-implémenter-les-notifications-pour-prédictions-confirmées.md
sepehr e02db93960 Initial commit
2026-02-01 09:31:38 +01:00

8.2 KiB
Raw Blame History

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

  • Créer le système de vérification des résultats de match (AC: #1)

    • Créer src/services/matchResultService.ts
    • Vérifier les résultats de match en temps réel
    • Comparer les prédictions avec les résultats réels
    • Identifier les prédictions correctes et incorrectes
    • Stocker les résultats dans la base de données

  • Créer le service d'envoi de notifications de prédiction (AC: #1, #2)

    • Créer src/services/predictionNotificationService.ts
    • Créer la fonction sendPredictionResultNotification(userId, prediction)
    • Envoyer uniquement pour les prédictions correctes
    • Ne pas envoyer pour les prédictions incorrectes
    • Gérer les erreurs d'envoi

  • Créer le template de notification de succès (AC: #1)

    • Créer le format: "🏆 Votre prédiction {team} {confidence}% est CONFIRMÉE ! Score final : {score}"
    • Remplacer les variables: {team}, {confidence}, {score}
    • Inclure le lien vers les détails
    • Valider le format sur différentes prédictions

  • Créer le composant d'animation de succès (AC: #1)

    • Créer src/components/notifications/SuccessAnimation.tsx
    • Créer une animation visuelle (confettis, emojis, etc.)
    • Afficher l'animation quand une prédiction est confirmée
    • Utiliser Framer Motion ou CSS animations
    • Gérer la durée de l'animation

  • Intégrer les notifications dans le dashboard (AC: #1)

    • Afficher les notifications dans le dashboard
    • Permettre de marquer comme lues
    • Gérer l'historique des notifications
    • Utiliser shadcn/ui components

  • Créer le système de préférences de notifications (AC: #1, #2)

    • Permettre de désactiver les notifications de prédiction
    • Créer src/components/notifications/PredictionNotificationSettings.tsx
    • Utiliser shadcn/ui components (Switch, Card)
    • Sauvegarder les préférences dans la base de données

  • Tester le système de notifications de prédiction (Tous AC)

    • Tester l'envoi de notification pour prédiction correcte
    • Tester qu'aucune notification pour prédiction incorrecte
    • Tester l'animation de succès
    • Tester le format de la notification
    • 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