Aller au contenu principal

Guide : Navigation depuis les notifications

✅ Fonctionnalité implémentée​

Lorsque vous cliquez sur une notification de paiement, l'application ouvre automatiquement la page de détails de la commande correspondante.

🔧 Modifications effectuées​

1. Service de notifications (notification_service.dart)​

Ajout d'un callback pour gérer la navigation :

// Callback pour gérer la navigation
Function(String commandeId)? onNotificationTap;

2. Configuration dans main.dart​

GlobalKey pour la navigation :

final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

Configuration du callback :

void _setupNotificationHandlers() {
  NotificationService().onNotificationTap = (commandeId) {
    _navigateToCommandeDetails(commandeId);
  };
}

Navigation vers les détails :

Future<void> _navigateToCommandeDetails(String commandeId) async {
  // Récupère la commande depuis Supabase
  final response = await SupabaseConfig.client
      .from('commandes')
      .select()
      .eq('id', commandeId)
      .single();

  // Convertit en objet Commande
  final commande = CommandeModel.fromJson(response);

  // Navigue vers la page de détails
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => CommandeDetailsPage(commande: commande),
    ),
  );
}

📱 Test de la fonctionnalité​

Scénario de test complet​

  1. Lancez l'application :

    flutter run

  2. Vérifiez le token FCM dans les logs :

    📱 FCM Token: fXxxx...
    ✅ Token FCM sauvegardé pour l'utilisateur xxx

  3. Créez une commande avec paiement :

    • Créez une nouvelle commande
    • Associez un client
    • Ajoutez un prix
    • Passez au statut "Payée"
    • Sélectionnez "Carte bancaire"
    • Créez et partagez le lien

  4. Effectuez le paiement :

    • Ouvrez le lien de paiement
    • Carte de test : 4242 4242 4242 4242
    • Date : n'importe quelle date future
    • CVC : n'importe quel code à 3 chiffres

  5. Recevez la notification :

    💰 Paiement reçu !
    [Prénom Nom] a réglé XX.XX EUR

  6. Cliquez sur la notification :

    • L'application s'ouvre (si fermée/en arrière-plan)
    • Navigation automatique vers la page de détails de la commande
    • Vous voyez tous les détails du paiement

🔍 Vérification dans les logs​

Logs lors du clic sur la notification​

🔔 Notification cliquée
Data: {commande_id: xxx-xxx-xxx, type: payment_received, ...}
Navigation vers la commande: xxx-xxx-xxx
🔍 Récupération de la commande: xxx-xxx-xxx

En cas d'erreur​

❌ Erreur navigation vers commande: [détail de l'erreur]

📋 États de l'application supportés​

La navigation fonctionne dans tous les cas :

État de l'appComportement
Premier planNavigation immédiate vers les détails
Arrière-planL'app revient au premier plan + navigation
FerméeL'app se lance + navigation vers les détails

🎯 Données transmises dans la notification​

Le webhook envoie ces données avec chaque notification :

data: {
  commande_id: 'uuid-de-la-commande',
  type: 'payment_received',
  client_name: 'Prénom Nom',
  amount: '50.00',
  currency: 'EUR',
}

🔧 Dépannage​

Problème : La notification arrive mais ne navigue pas​

Vérifications :

  1. Logs de navigation :

    print('🔍 Récupération de la commande: $commandeId');

    Si vous ne voyez pas ce log, le callback n'est pas appelé.

  2. Vérifier le setup :

    _setupNotificationHandlers(); // Doit être appelé dans initState()

  3. Vérifier le GlobalKey :

    navigatorKey: navigatorKey, // Doit être dans MaterialApp

Problème : Erreur "Commande not found"​

Cause : L'ID de la commande est incorrect ou la commande a été supprimée

Solution :

-- Vérifier que la commande existe
SELECT * FROM commandes WHERE id = 'xxx-xxx-xxx';

Problème : Navigation vers une page blanche​

Cause : CommandeDetailsPage nécessite des données supplémentaires

Solution : Vérifier que tous les champs requis sont présents dans la requête

🎨 Personnalisation​

Changer l'animation de navigation​

Navigator.of(context).push(
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) =>
        CommandeDetailsPage(commande: commande),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return SlideTransition(
        position: Tween<Offset>(
          begin: const Offset(1.0, 0.0),
          end: Offset.zero,
        ).animate(animation),
        child: child,
      );
    },
  ),
);

Ajouter un feedback visuel​

// Afficher un indicateur de chargement
ScaffoldMessenger.of(context).showSnackBar(
  const SnackBar(content: Text('Ouverture de la commande...')),
);

✨ Améliorations possibles​

  • Ajouter un cache des commandes pour une navigation plus rapide
  • Afficher un splash screen pendant le chargement
  • Ajouter une animation de transition personnalisée
  • Gérer le cas où la commande n'existe plus
  • Ajouter des analytics pour tracker les clics sur notifications

📚 Ressources​