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
- Création du lien Stripe automatique
- Ouverture du partage natif (WhatsApp, SMS, etc.)
- Message pré-rempli avec le lien
- Mise à jour du statut de la commande
4. Si autre mode → Confirmation simple
- Mise à jour du statut avec le mode de paiement
- 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
Modal de Paiement Avancée
- ✅ Commande a un prix (
commande.prix != null && commande.prix! > 0) - ✅ Services de paiement disponibles (
shareService != null && onCreatePaymentLink != null)
Modal de Paiement Simple (fallback)
- ❌ 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
- Commande "Acceptée" avec prix 65€
- Clic sur "Passer au statut Payée"
- Modal s'ouvre avec montant affiché
- Sélection "Carte bancaire"
- Clic sur "Créer et partager"
- Lien Stripe créé et partagé
- Statut mis à jour à "Payée"
✅ Scénario 2 : Commande avec prix → Espèces
- Commande "Acceptée" avec prix 65€
- Clic sur "Passer au statut Payée"
- Modal s'ouvre avec montant affiché
- Sélection "Espèces"
- Clic sur "Confirmer"
- Statut mis à jour à "Payée" avec mode "Espèces"
✅ Scénario 3 : Commande sans prix
- Commande "Acceptée" sans prix
- Clic sur "Passer au statut Payée"
- Ancienne modal simple s'ouvre
- Sélection du mode de paiement
- 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é
- ✅
PaymentMethodModalpour 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.