Aller au contenu principal

Flow de Paiement Intégré dans le Statut de Commande

Vue d'ensemble​

Le bouton de paiement est maintenant intégré directement dans le widget CommandeStatusWidget, créant un flow unifié pour la gestion des statuts et des paiements.

Architecture Intégrée​

Widget CommandeStatusWidget​

Le widget principal gère maintenant :

  1. Affichage du statut de la commande
  2. Informations de paiement existantes
  3. Actions administrateur (changement de statut)
  4. Bouton de paiement (intégré dans les actions)

Flow Utilisateur​

Page Détails Commande
├── Carte Commande (titre, description, prix)
├── Widget Statut (INTÉGRÉ)
│   ├── Statut actuel + icône
│   ├── Informations paiement (si applicable)
│   ├── Dates (création, modification, paiement)
│   └── Actions Administrateur
│       ├── Bouton Paiement (si applicable) ⭐ NOUVEAU
│       └── Boutons Changement Statut
├── Carte Client (si associé)
└── Carte Date

Conditions d'Affichage du Bouton Paiement​

Le bouton de paiement s'affiche uniquement si :

  1. ✅ Mode administrateur activé (isAdminMode = true)
  2. ✅ Commande a un prix (commande.prix != null && commande.prix! > 0)
  3. ✅ Paiement non confirmé (!commande.paymentConfirmed)
  4. ✅ Services de paiement disponibles (shareService != null && onCreatePaymentLink != null)

Types de Boutons Paiement​

1. Bouton "Demander le paiement" (nouveau lien)​

PaymentRequestButton(
  commandeId: commande.id,
  amount: commande.prix!,
  currency: commande.devise ?? 'EUR',
  shareService: shareService,
  onCreatePaymentLink: onCreatePaymentLink,
  onPaymentLinkCreated: onPaymentLinkCreated,
)

Actions :

  • Crée un nouveau lien de paiement Stripe
  • Ouvre le partage natif
  • Met à jour l'interface

2. Bouton "Partager le lien" (lien existant)​

Container(
  // Design avec informations du lien
  child: ElevatedButton.icon(
    icon: Icons.share,
    label: 'Partager le lien',
    onPressed: () => shareService.sharePaymentLink(existingPaymentLink),
  ),
)

Informations affichées :

  • Date de création du lien
  • Date d'expiration (si applicable)
  • Bouton de partage

Intégration dans CommandeDetailsPage​

Paramètres Passés au Widget​

CommandeStatusWidget(
  commande: _currentCommande,
  isAdminMode: true,
  onStatusUpdate: _updateCommandeStatus,
  onStatusUpdateWithPayment: _updateCommandeStatusWithPayment,
  onPaymentConfirm: _confirmPayment,
  onStatusChanged: () => setState(() {}),
  
  // NOUVEAUX paramètres pour le paiement
  existingPaymentLink: _existingPaymentLink,
  shareService: _shareService,
  onCreatePaymentLink: _createPaymentLink,
  onPaymentLinkCreated: _onPaymentLinkCreated,
)

Méthodes de Support​

// Vérification du lien existant
Future<void> _checkExistingPaymentLink() async {
  final paymentLink = await _paymentRepository.getPaymentLinkByCommandeId(_currentCommande.id);
  setState(() => _existingPaymentLink = paymentLink);
}

// Création d'un nouveau lien
Future<PaymentLink> _createPaymentLink() async {
  return await _paymentRepository.createPaymentLink(
    commandeId: _currentCommande.id,
    amount: _currentCommande.prix!,
    currency: _currentCommande.devise ?? 'EUR',
    clientName: _client != null ? '${_client!.prenom} ${_client!.nom}' : null,
    clientEmail: _client?.email,
    expiresAt: DateTime.now().add(const Duration(days: 7)),
  );
}

// Callback après création
void _onPaymentLinkCreated() {
  setState(() {});
  _checkExistingPaymentLink();
}

Avantages de l'Intégration​

1. Flow Unifié​

  • Toutes les actions de la commande au même endroit
  • Interface plus cohérente
  • Moins de confusion pour l'utilisateur

2. Logique Contextuelle​

  • Le bouton de paiement apparaît seulement quand c'est pertinent
  • Intégré dans le flow de statut existant
  • Cohérent avec les autres actions administrateur

3. Code Plus Propre​

  • Suppression de la section de paiement séparée
  • Réutilisation du widget de statut existant
  • Moins de duplication de code

4. Expérience Utilisateur Améliorée​

  • Interface plus compacte
  • Actions groupées logiquement
  • Flow naturel de gestion des commandes

Migration depuis l'Ancien Système​

Avant (Section Séparée)​

// Section de paiement séparée
if (_currentCommande.prix != null && 
    _currentCommande.prix! > 0 && 
    !_currentCommande.paymentConfirmed) ...[
  _buildPaymentSection(),
  const SizedBox(height: 16),
],

Après (Intégré)​

// Bouton intégré dans le widget de statut
CommandeStatusWidget(
  // ... paramètres existants
  existingPaymentLink: _existingPaymentLink,
  shareService: _shareService,
  onCreatePaymentLink: _createPaymentLink,
  onPaymentLinkCreated: _onPaymentLinkCreated,
)

Tests et Validation​

Scénarios de Test​

  1. Commande sans prix → Pas de bouton de paiement
  2. Commande déjà payée → Pas de bouton de paiement
  3. Commande avec prix, non payée → Bouton "Demander le paiement"
  4. Lien de paiement existant → Bouton "Partager le lien"
  5. Mode non-admin → Pas de bouton de paiement

Points de Validation​

  • ✅ Bouton apparaît aux bons moments
  • ✅ Création de lien fonctionne
  • ✅ Partage natif fonctionne
  • ✅ Interface se met à jour après création
  • ✅ Gestion des erreurs appropriée

Conclusion​

L'intégration du bouton de paiement dans le widget de statut crée une expérience utilisateur plus fluide et un code plus maintenable. L'artisan peut maintenant gérer tous les aspects de sa commande (statut, paiement, actions) depuis un seul endroit cohérent.