Aller au contenu principal

Flow de Paiement Intégré dans le Changement de Statut (V2)

Vue d'ensemble

Le système de paiement est maintenant parfaitement intégré dans le flow de changement de statut. Quand l'artisan passe une commande au statut "Payée", il peut choisir le mode de paiement, et si c'est CB, le lien Stripe est automatiquement créé et partagé.

Nouveau Flow Utilisateur

1. L'artisan clique sur "Passer au statut Payée"

Commande "Acceptée" → Bouton "Passer au statut Payée"

2. Modal de sélection du mode de paiement s'ouvre

┌─────────────────────────────────────┐
│ 💳 Mode de paiement │
├─────────────────────────────────────┤
│ Montant: 65,00€ │
│ │
│ Sélectionnez le mode de paiement : │
│ │
│ ○ 💵 Espèces │
│ Paiement en liquide │
│ │
│ ○ 🏦 Virement │
│ Paiement par virement bancaire │
│ │
│ ● 💳 Carte bancaire │
│ Paiement par carte bancaire │
│ ┌─────────────────────────────┐ │
│ │ ℹ️ Paiement par CB │ │
│ │ Un lien de paiement │ │
│ │ sécurisé sera créé et │ │
│ │ partagé avec le client. │ │
│ └─────────────────────────────┘ │
│ │
│ [Annuler] [Créer et partager] │
└─────────────────────────────────────┘

3. Si CB sélectionné → Création et partage automatique

  1. Création du lien Stripe automatique
  2. Ouverture du partage natif (WhatsApp, SMS, etc.)
  3. Message pré-rempli avec le lien
  4. Mise à jour du statut de la commande

4. Si autre mode → Confirmation simple

  1. Mise à jour du statut avec le mode de paiement
  2. Fermeture de la modal

Architecture Technique

Widget PaymentMethodModal

class PaymentMethodModal extends StatefulWidget {
final String commandeId;
final double amount;
final String currency;
final String? clientName;
final String? clientEmail;
final PaymentShareService? shareService;
final Future<PaymentLink> Function()? onCreatePaymentLink;
final Function(PaymentType) onPaymentMethodSelected;
}

Fonctionnalités :

  • ✅ Affichage du montant à payer
  • ✅ Sélection du mode de paiement avec design moderne
  • ✅ Section spéciale pour CB avec informations
  • ✅ Création et partage automatique du lien Stripe
  • ✅ Gestion des erreurs et feedback utilisateur

Intégration dans CommandeStatusWidget

void _showStatusChangeDialog(BuildContext context, CommandeStatus newStatus) {
if (newStatus.requiresPayment) {
_showPaymentMethodModal(context, newStatus); // NOUVEAU
} else {
_showConfirmationDialog(context, newStatus);
}
}

void _showPaymentMethodModal(BuildContext context, CommandeStatus newStatus) {
// Vérifier si la commande a un prix pour le paiement par CB
if (commande.prix == null || commande.prix! <= 0) {
// Si pas de prix, utiliser l'ancienne méthode simple
_showPaymentDialog(context, newStatus);
return;
}

showDialog(
context: context,
builder: (context) => PaymentMethodModal(
commandeId: commande.id,
amount: commande.prix!,
currency: commande.devise ?? 'EUR',
shareService: shareService,
onCreatePaymentLink: onCreatePaymentLink,
onPaymentMethodSelected: (paymentType) {
_updateStatusWithPayment(context, newStatus, paymentType);
},
),
);
}

Conditions d'Affichage

  • Commande a un prix (commande.prix != null && commande.prix! > 0)
  • Services de paiement disponibles (shareService != null && onCreatePaymentLink != null)
  • Commande sans prix ou services non disponibles
  • → Utilise l'ancienne modal simple avec radio buttons

Design de la Modal

Interface Moderne

  • Design cohérent avec le reste de l'application
  • Sélection visuelle avec radio buttons stylisés
  • Section informative pour CB avec icône et description
  • Boutons d'action contextuels

Feedback Utilisateur

  • Indicateur de chargement pendant la création du lien
  • Messages de succès/erreur via SnackBar
  • Bouton désactivé pendant le traitement

Avantages du Nouveau Flow

1. Flow Naturel

  • Le paiement fait partie du changement de statut
  • Pas de bouton séparé à chercher
  • Logique contextuelle

2. Expérience Utilisateur Optimale

  • Une seule action pour passer au statut "Payée"
  • Choix du mode de paiement intégré
  • Partage automatique pour CB

3. Code Plus Propre

  • Suppression des boutons de paiement séparés
  • Logique centralisée dans le changement de statut
  • Moins de duplication

4. Flexibilité

  • Support des commandes avec et sans prix
  • Fallback vers l'ancienne méthode si nécessaire
  • Extensible pour d'autres modes de paiement

Scénarios de Test

✅ Scénario 1 : Commande avec prix → CB

  1. Commande "Acceptée" avec prix 65€
  2. Clic sur "Passer au statut Payée"
  3. Modal s'ouvre avec montant affiché
  4. Sélection "Carte bancaire"
  5. Clic sur "Créer et partager"
  6. Lien Stripe créé et partagé
  7. Statut mis à jour à "Payée"

✅ Scénario 2 : Commande avec prix → Espèces

  1. Commande "Acceptée" avec prix 65€
  2. Clic sur "Passer au statut Payée"
  3. Modal s'ouvre avec montant affiché
  4. Sélection "Espèces"
  5. Clic sur "Confirmer"
  6. Statut mis à jour à "Payée" avec mode "Espèces"

✅ Scénario 3 : Commande sans prix

  1. Commande "Acceptée" sans prix
  2. Clic sur "Passer au statut Payée"
  3. Ancienne modal simple s'ouvre
  4. Sélection du mode de paiement
  5. Confirmation

Migration depuis V1

Supprimé

  • ❌ Bouton de paiement séparé dans les actions
  • ❌ Section de paiement dédiée
  • ❌ Méthodes _shouldShowPaymentButton(), _buildPaymentButton(), etc.

Ajouté

  • PaymentMethodModal pour la sélection du mode
  • ✅ Intégration dans _showStatusChangeDialog()
  • ✅ Création et partage automatique pour CB

Conservé

  • ✅ Tous les services de paiement existants
  • ✅ Gestion des liens de paiement
  • ✅ Webhooks Stripe
  • ✅ Base de données

Conclusion

Le nouveau flow est beaucoup plus intuitif et naturel pour l'utilisateur. L'artisan n'a plus besoin de chercher un bouton de paiement séparé - tout est intégré dans le flow de changement de statut. Le système s'adapte automatiquement selon que la commande a un prix ou non, offrant la meilleure expérience dans tous les cas.