lionsdev/unionflow-mobile-apps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(onboarding): UI/UX polish + mapping typeOrg + gestion erreur paiement Wave

Browse Source 
Plan selection :
- Grille 2×2 compacte pour les plages (au lieu de liste verticale)
- Badge ⭐ POPULAIRE sur STANDARD
- Remise annuelle affichée (−X%/an)
- AnimatedSwitcher + auto-scroll vers formules quand plage sélectionnée
- Dark mode adaptatif complet

Récapitulatif :
- Dark mode complet (AppColors pairs)
- Bloc Total gradient gold adaptatif
- NoteBox avec backgrounds accent.withOpacity()
- Utilise OnboardingBottomBar (consistence)

Payment method :
- Dark mode + couleurs de marque Wave/Orange hardcodées (intentionnel)
- Logo container reste blanc (brand)
- Mapping typeOrganisation détaillé → enum backend ASSOCIATION/MUTUELLE/
  COOPERATIVE/FEDERATION (fix HTTP 400 'Valeur invalide pour typeOrganisation')

Wave payment :
- Dark mode adaptatif
- Message dev clair (simulation automatique)
- Gestion OnboardingPaiementEchoue : SnackBar rouge + reset flags + reste sur page
  (plus de faux succès quand confirmerPaiement() return false ou lève exception)

Bloc : nouvel état OnboardingPaiementEchoue, _onRetourDepuisWave vérifie le return
de confirmerPaiement() (plus de catch silencieux qui émettait OnboardingPaiementConfirme)

Shared widgets : OnboardingSectionTitle + OnboardingBottomBar dark mode + hint optionnel
This commit is contained in:
dahoud
2026-04-15 20:14:27 +00:00
parent 36a903c80e
commit 21b519de53
8 changed files with 1081 additions and 859 deletions
Download Patch File Download Diff File Expand all files Collapse all files

337
lib/features/onboarding/presentation/pages/subscription_summary_page.dart
View File

@@ -2,7 +2,9 @@ import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../bloc/onboarding_bloc.dart';
import '../../data/models/souscription_status_model.dart';
import '../../../../shared/design_system/tokens/app_colors.dart';
import '../../../../shared/design_system/tokens/unionflow_colors.dart';
import 'onboarding_shared_widgets.dart';
/// Étape 3 — Récapitulatif détaillé avant paiement
class SubscriptionSummaryPage extends StatelessWidget {
@@ -11,54 +13,46 @@ class SubscriptionSummaryPage extends StatelessWidget {
const SubscriptionSummaryPage({super.key, required this.souscription});
static const _periodeLabels = {
'MENSUEL': 'Mensuel',
'TRIMESTRIEL': 'Trimestriel',
'SEMESTRIEL': 'Semestriel',
'ANNUEL': 'Annuel',
'MENSUEL': 'Mensuel',
'TRIMESTRIEL': 'Trimestriel',
'SEMESTRIEL': 'Semestriel',
'ANNUEL': 'Annuel',
};
static const _periodeRemises = {
'MENSUEL': null,
'TRIMESTRIEL': '–5% de remise',
'SEMESTRIEL': '–10% de remise',
'ANNUEL': '–20% de remise',
};
static const _orgLabels = {
'ASSOCIATION': 'Association / ONG locale',
'MUTUELLE': 'Mutuelle (santé, fonctionnaires…)',
'COOPERATIVE': 'Coopérative / Microfinance',
'FEDERATION': 'Fédération / Grande ONG',
'MENSUEL': null,
'TRIMESTRIEL': '–5 % de remise',
'SEMESTRIEL': '–10 % de remise',
'ANNUEL': '–20 % de remise',
};
static const _plageLabels = {
'PETITE': '1–100 membres',
'MOYENNE': '101–500 membres',
'GRANDE': '501–2 000 membres',
'PETITE': '1 – 100 membres',
'MOYENNE': '101 – 500 membres',
'GRANDE': '501 – 2 000 membres',
'TRES_GRANDE': '2 000+ membres',
};
@override
Widget build(BuildContext context) {
final isDark = Theme.of(context).brightness == Brightness.dark;
final montant = souscription.montantTotal ?? 0;
final remise = _periodeRemises[souscription.typePeriode];
final remise = _periodeRemises[souscription.typePeriode];
return Scaffold(
backgroundColor: UnionFlowColors.background,
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
body: Column(
children: [
// Header hero
// ── Header hero gradient ───────────────────────────
Container(
decoration: const BoxDecoration(
gradient: UnionFlowColors.primaryGradient,
),
decoration: const BoxDecoration(gradient: UnionFlowColors.primaryGradient),
child: SafeArea(
bottom: false,
child: Padding(
padding: const EdgeInsets.fromLTRB(20, 12, 20, 32),
child: Column(
children: [
// Step bar
// Barre de progression — toutes complètes à l'étape 3
Row(
children: List.generate(3, (i) => Expanded(
child: Container(
@@ -84,52 +78,50 @@ class SubscriptionSummaryPage extends StatelessWidget {
),
),
const SizedBox(height: 20),
// Montant principal
// Icône principale
Container(
width: 90,
height: 90,
width: 80,
height: 80,
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.15),
shape: BoxShape.circle,
border: Border.all(
color: Colors.white.withOpacity(0.4), width: 2),
border: Border.all(color: Colors.white.withOpacity(0.4), width: 2),
),
child: const Icon(Icons.receipt_long_rounded,
color: Colors.white, size: 44),
child: const Icon(Icons.receipt_long_rounded, color: Colors.white, size: 40),
),
const SizedBox(height: 14),
// Montant
Text(
_formatPrix(montant),
style: const TextStyle(
color: Colors.white,
fontSize: 40,
fontSize: 42,
fontWeight: FontWeight.w900,
letterSpacing: -1,
),
),
const Text(
'FCFA à régler',
style: TextStyle(
color: Colors.white70,
fontSize: 14,
fontWeight: FontWeight.w500),
style: TextStyle(color: Colors.white70, fontSize: 14, fontWeight: FontWeight.w500),
),
// Badge remise
if (remise != null) ...[
const SizedBox(height: 8),
const SizedBox(height: 10),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 12, vertical: 4),
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 5),
decoration: BoxDecoration(
color: UnionFlowColors.gold.withOpacity(0.3),
borderRadius: BorderRadius.circular(20),
border: Border.all(
color: UnionFlowColors.goldLight.withOpacity(0.5)),
border: Border.all(color: UnionFlowColors.goldLight.withOpacity(0.5)),
),
child: Text(
remise,
'🎉 $remise appliquée',
style: const TextStyle(
color: UnionFlowColors.goldLight,
fontSize: 12,
fontSize: 13,
fontWeight: FontWeight.w700,
),
),
@@ -141,28 +133,26 @@ class SubscriptionSummaryPage extends StatelessWidget {
),
),
// Content
// ── Contenu scrollable ──────────────────────────────
Expanded(
child: SingleChildScrollView(
physics: const AlwaysScrollableScrollPhysics(),
padding: const EdgeInsets.fromLTRB(20, 20, 20, 100),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Organisation
if (souscription.organisationNom != null) ...[
_DetailCard(
title: 'Organisation',
icon: Icons.business_rounded,
iconColor: UnionFlowColors.indigo,
isDark: isDark,
items: [
_DetailItem(
label: 'Nom',
value: souscription.organisationNom!,
bold: true),
_DetailItem(
label: 'Type',
value: _orgLabels[souscription.typeOrganisation] ??
souscription.typeOrganisation),
_DetailItem(label: 'Nom', value: souscription.organisationNom!, bold: true),
if (souscription.typeOrganisation != null)
_DetailItem(label: 'Type', value: souscription.typeOrganisation!),
],
),
const SizedBox(height: 14),
@@ -173,20 +163,18 @@ class SubscriptionSummaryPage extends StatelessWidget {
title: 'Formule souscrite',
icon: Icons.workspace_premium_rounded,
iconColor: UnionFlowColors.gold,
isDark: isDark,
items: [
_DetailItem(label: 'Niveau', value: souscription.typeFormule, bold: true),
_DetailItem(
label: 'Niveau',
value: souscription.typeFormule,
bold: true),
_DetailItem(
label: 'Taille',
value: _plageLabels[souscription.plageMembres] ??
souscription.plageLibelle),
label: 'Capacité',
value: _plageLabels[souscription.plageMembres] ?? souscription.plageLibelle,
),
if (souscription.montantMensuelBase != null)
_DetailItem(
label: 'Prix de base',
value:
'${_formatPrix(souscription.montantMensuelBase!)} FCFA/mois'),
label: 'Prix de base',
value: '${_formatPrix(souscription.montantMensuelBase!)} FCFA/mois',
),
],
),
const SizedBox(height: 14),
@@ -196,71 +184,86 @@ class SubscriptionSummaryPage extends StatelessWidget {
title: 'Facturation',
icon: Icons.calendar_today_rounded,
iconColor: UnionFlowColors.unionGreen,
isDark: isDark,
items: [
_DetailItem(
label: 'Période',
value:
_periodeLabels[souscription.typePeriode] ??
souscription.typePeriode),
label: 'Période',
value: _periodeLabels[souscription.typePeriode] ?? souscription.typePeriode,
),
if (souscription.coefficientApplique != null)
_DetailItem(
label: 'Coefficient',
value:
'×${souscription.coefficientApplique!.toStringAsFixed(4)}'),
if (souscription.dateDebut != null &&
souscription.dateFin != null) ...[
_DetailItem(
label: 'Début',
value: _formatDate(souscription.dateDebut!)),
_DetailItem(
label: 'Fin',
value: _formatDate(souscription.dateFin!)),
],
label: 'Coefficient',
value: '×${souscription.coefficientApplique!.toStringAsFixed(4)}',
),
if (souscription.dateDebut != null)
_DetailItem(label: 'Début', value: _formatDate(souscription.dateDebut!)),
if (souscription.dateFin != null)
_DetailItem(label: 'Fin', value: _formatDate(souscription.dateFin!)),
],
),
const SizedBox(height: 14),
const SizedBox(height: 20),
// Montant total
// Bloc montant total — proéminent
Container(
padding: const EdgeInsets.all(18),
decoration: BoxDecoration(
color: UnionFlowColors.goldPale,
gradient: LinearGradient(
colors: isDark
? [UnionFlowColors.gold.withOpacity(0.18), UnionFlowColors.amber.withOpacity(0.12)]
: [UnionFlowColors.goldPale, const Color(0xFFFFF3C8)],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(16),
border: Border.all(
color: UnionFlowColors.gold.withOpacity(0.4)),
boxShadow: UnionFlowColors.goldGlowShadow,
border: Border.all(color: UnionFlowColors.gold.withOpacity(0.4)),
boxShadow: isDark ? null : UnionFlowColors.goldGlowShadow,
),
child: Row(
children: [
Container(
width: 48,
height: 48,
width: 52,
height: 52,
decoration: BoxDecoration(
gradient: UnionFlowColors.goldGradient,
borderRadius: BorderRadius.circular(12),
borderRadius: BorderRadius.circular(14),
),
child: const Icon(Icons.monetization_on_rounded,
color: Colors.white, size: 26),
color: Colors.white, size: 28),
),
const SizedBox(width: 14),
const SizedBox(width: 16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Total à payer',
Text(
'TOTAL À PAYER',
style: TextStyle(
color: UnionFlowColors.textSecondary,
fontSize: 13),
color: isDark
? AppColors.textSecondaryDark
: AppColors.textSecondary,
fontSize: 11,
fontWeight: FontWeight.w600,
letterSpacing: 0.5,
),
),
Text(
'${_formatPrix(montant)} FCFA',
style: const TextStyle(
color: UnionFlowColors.textPrimary,
fontSize: 22,
style: TextStyle(
color: isDark ? AppColors.textPrimaryDark : AppColors.textPrimary,
fontSize: 24,
fontWeight: FontWeight.w900,
letterSpacing: -0.5,
),
),
if (remise != null)
Text(
remise,
style: const TextStyle(
color: UnionFlowColors.gold,
fontSize: 12,
fontWeight: FontWeight.w600,
),
),
],
),
),
@@ -269,35 +272,32 @@ class SubscriptionSummaryPage extends StatelessWidget {
),
const SizedBox(height: 20),
// Notes importantes
// Notes
_NoteBox(
icon: Icons.security_rounded,
iconColor: UnionFlowColors.unionGreen,
backgroundColor: UnionFlowColors.unionGreenPale,
borderColor: UnionFlowColors.unionGreen.withOpacity(0.25),
accentColor: UnionFlowColors.unionGreen,
isDark: isDark,
title: 'Paiement sécurisé',
message:
'Votre paiement est traité de manière sécurisée via Wave Mobile Money. Une fois le paiement effectué, votre compte sera activé automatiquement.',
message: 'Votre paiement est traité de manière sécurisée via Wave Mobile Money. Une fois confirmé, votre compte sera activé automatiquement.',
),
const SizedBox(height: 10),
_NoteBox(
icon: Icons.bolt_rounded,
iconColor: UnionFlowColors.amber,
backgroundColor: const Color(0xFFFFFBF0),
borderColor: UnionFlowColors.amber.withOpacity(0.3),
accentColor: UnionFlowColors.amber,
isDark: isDark,
title: 'Activation immédiate',
message:
'Dès que le paiement est confirmé par Wave, votre compte d\'administrateur est activé et vous pouvez accéder à toutes les fonctionnalités de votre formule.',
message: 'Dès que Wave confirme le paiement, votre espace administrateur est activé avec toutes les fonctionnalités de votre formule.',
),
const SizedBox(height: 10),
_NoteBox(
icon: Icons.support_agent_rounded,
iconColor: UnionFlowColors.info,
backgroundColor: UnionFlowColors.infoPale,
borderColor: UnionFlowColors.info.withOpacity(0.2),
accentColor: UnionFlowColors.info,
isDark: isDark,
title: 'Besoin d\'aide ?',
message:
'En cas de problème lors du paiement, contactez notre support à support@unionflow.app — nous vous répondrons sous 24h.',
message: 'En cas de problème, contactez support@unionflow.app — réponse sous 24h.',
),
],
),
@@ -305,41 +305,10 @@ class SubscriptionSummaryPage extends StatelessWidget {
),
],
),
bottomNavigationBar: Container(
padding: EdgeInsets.fromLTRB(
20, 12, 20, MediaQuery.of(context).padding.bottom + 12),
decoration: BoxDecoration(
color: UnionFlowColors.surface,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.08),
blurRadius: 12,
offset: const Offset(0, -4),
),
],
),
child: SizedBox(
width: double.infinity,
child: ElevatedButton.icon(
onPressed: () => context
.read<OnboardingBloc>()
.add(const OnboardingChoixPaiementOuvert()),
icon: const Icon(Icons.payment_rounded),
label: const Text(
'Choisir le moyen de paiement',
style: TextStyle(fontSize: 16, fontWeight: FontWeight.w700),
),
style: ElevatedButton.styleFrom(
backgroundColor: UnionFlowColors.unionGreen,
foregroundColor: Colors.white,
padding: const EdgeInsets.symmetric(vertical: 15),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(14)),
shadowColor: UnionFlowColors.unionGreen.withOpacity(0.4),
elevation: 3,
),
),
),
bottomNavigationBar: OnboardingBottomBar(
enabled: true,
label: 'Choisir le moyen de paiement',
onPressed: () => context.read<OnboardingBloc>().add(const OnboardingChoixPaiementOuvert()),
),
);
}
@@ -347,18 +316,13 @@ class SubscriptionSummaryPage extends StatelessWidget {
String _formatPrix(double prix) {
if (prix >= 1000000) return '${(prix / 1000000).toStringAsFixed(1)} M';
final s = prix.toStringAsFixed(0);
if (s.length > 6) {
return '${s.substring(0, s.length - 6)} ${s.substring(s.length - 6, s.length - 3)} ${s.substring(s.length - 3)}';
}
if (s.length > 3) {
return '${s.substring(0, s.length - 3)} ${s.substring(s.length - 3)}';
}
if (s.length > 6) return '${s.substring(0, s.length - 6)} ${s.substring(s.length - 6, s.length - 3)} ${s.substring(s.length - 3)}';
if (s.length > 3) return '${s.substring(0, s.length - 3)} ${s.substring(s.length - 3)}';
return s;
}
String _formatDate(DateTime date) {
return '${date.day.toString().padLeft(2, '0')}/${date.month.toString().padLeft(2, '0')}/${date.year}';
}
String _formatDate(DateTime date) =>
'${date.day.toString().padLeft(2, '0')}/${date.month.toString().padLeft(2, '0')}/${date.year}';
}
// ─── Widgets locaux ──────────────────────────────────────────────────────────
@@ -367,8 +331,7 @@ class _DetailItem {
final String label;
final String value;
final bool bold;
const _DetailItem(
{required this.label, required this.value, this.bold = false});
const _DetailItem({required this.label, required this.value, this.bold = false});
}
class _DetailCard extends StatelessWidget {
@@ -376,25 +339,34 @@ class _DetailCard extends StatelessWidget {
final IconData icon;
final Color iconColor;
final List<_DetailItem> items;
final bool isDark;
const _DetailCard({
required this.title,
required this.icon,
required this.iconColor,
required this.items,
required this.isDark,
});
@override
Widget build(BuildContext context) {
final bgColor = isDark ? AppColors.surfaceDark : AppColors.surface;
final borderColor = isDark ? AppColors.borderDark : AppColors.border;
final textPrimary = isDark ? AppColors.textPrimaryDark : AppColors.textPrimary;
final textSecondary= isDark ? AppColors.textSecondaryDark : AppColors.textSecondary;
return Container(
decoration: BoxDecoration(
color: UnionFlowColors.surface,
color: bgColor,
borderRadius: BorderRadius.circular(16),
boxShadow: UnionFlowColors.softShadow,
border: Border.all(color: borderColor),
boxShadow: isDark ? null : UnionFlowColors.softShadow,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// En-tête section
Padding(
padding: const EdgeInsets.fromLTRB(16, 14, 16, 10),
child: Row(
@@ -403,7 +375,7 @@ class _DetailCard extends StatelessWidget {
width: 34,
height: 34,
decoration: BoxDecoration(
color: iconColor.withOpacity(0.1),
color: iconColor.withOpacity(isDark ? 0.2 : 0.1),
borderRadius: BorderRadius.circular(8),
),
child: Icon(icon, color: iconColor, size: 18),
@@ -411,16 +383,16 @@ class _DetailCard extends StatelessWidget {
const SizedBox(width: 10),
Text(
title,
style: const TextStyle(
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 14,
color: UnionFlowColors.textPrimary,
color: textPrimary,
),
),
],
),
),
const Divider(height: 1, color: UnionFlowColors.border),
Divider(height: 1, color: borderColor),
Padding(
padding: const EdgeInsets.fromLTRB(16, 12, 16, 14),
child: Column(
@@ -430,23 +402,17 @@ class _DetailCard extends StatelessWidget {
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: 120,
child: Text(
item.label,
style: const TextStyle(
color: UnionFlowColors.textSecondary,
fontSize: 13),
),
width: 110,
child: Text(item.label,
style: TextStyle(color: textSecondary, fontSize: 13)),
),
Expanded(
child: Text(
item.value,
style: TextStyle(
color: UnionFlowColors.textPrimary,
color: textPrimary,
fontSize: 13,
fontWeight: item.bold
? FontWeight.w700
: FontWeight.w500,
fontWeight: item.bold ? FontWeight.w700 : FontWeight.w500,
),
),
),
@@ -464,26 +430,30 @@ class _DetailCard extends StatelessWidget {
class _NoteBox extends StatelessWidget {
final IconData icon;
final Color iconColor;
final Color backgroundColor;
final Color borderColor;
final Color accentColor;
final bool isDark;
final String title;
final String message;
const _NoteBox({
required this.icon,
required this.iconColor,
required this.backgroundColor,
required this.borderColor,
required this.accentColor,
required this.isDark,
required this.title,
required this.message,
});
@override
Widget build(BuildContext context) {
final bgColor = accentColor.withOpacity(isDark ? 0.12 : 0.06);
final borderColor = accentColor.withOpacity(isDark ? 0.3 : 0.2);
final textSecondary= isDark ? AppColors.textSecondaryDark : AppColors.textSecondary;
return Container(
padding: const EdgeInsets.all(14),
decoration: BoxDecoration(
color: backgroundColor,
color: bgColor,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: borderColor),
),
@@ -498,19 +468,12 @@ class _NoteBox extends StatelessWidget {
children: [
Text(
title,
style: TextStyle(
color: iconColor,
fontWeight: FontWeight.w700,
fontSize: 13,
),
style: TextStyle(color: iconColor, fontWeight: FontWeight.w700, fontSize: 13),
),
const SizedBox(height: 3),
Text(
message,
style: const TextStyle(
color: UnionFlowColors.textSecondary,
fontSize: 12,
height: 1.5),
style: TextStyle(color: textSecondary, fontSize: 12, height: 1.5),
),
],
),