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

fix(mobile): URL changement mdp corrigée + v3.0 — multi-org, AppAuth, sécurité prod

Browse Source 
Auth:
- profile_repository.dart: /api/auth/change-password → /api/membres/auth/change-password

Multi-org (Phase 3):
- OrgSelectorPage, OrgSwitcherBloc, OrgSwitcherEntry
- org_context_service.dart: headers X-Active-Organisation-Id + X-Active-Role

Navigation:
- MorePage: navigation conditionnelle par typeOrganisation
- Suppression adaptive_navigation (remplacé par main_navigation_layout)

Auth AppAuth:
- keycloak_webview_auth_service: fixes AppAuth Android
- AuthBloc: gestion REAUTH_REQUIS + premierLoginComplet

Onboarding:
- Nouveaux états: payment_method_page, onboarding_shared_widgets
- SouscriptionStatusModel mis à jour StatutValidationSouscription

Android:
- build.gradle: ProGuard/R8, network_security_config
- Gradle wrapper mis à jour
This commit is contained in:
dahoud
2026-04-07 20:56:03 +00:00
parent 22f9c7e9a1
commit 70cbd1c873
63 changed files with 9316 additions and 6122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
lib/features/onboarding/bloc/onboarding_bloc.dart
View File

@@ -18,9 +18,16 @@ abstract class OnboardingEvent extends Equatable {
class OnboardingStarted extends OnboardingEvent {
final String? existingSouscriptionId;
final String initialState; // NO_SUBSCRIPTION | AWAITING_PAYMENT | PAYMENT_INITIATED | AWAITING_VALIDATION
const OnboardingStarted({required this.initialState, this.existingSouscriptionId});
final String? typeOrganisation;
final String? organisationId;
const OnboardingStarted({
required this.initialState,
this.existingSouscriptionId,
this.typeOrganisation,
this.organisationId,
});
@override
List<Object?> get props => [initialState, existingSouscriptionId];
List<Object?> get props => [initialState, existingSouscriptionId, typeOrganisation, organisationId];
}
/// L'utilisateur a sélectionné une formule et une plage
@@ -51,6 +58,11 @@ class OnboardingDemandeConfirmee extends OnboardingEvent {
const OnboardingDemandeConfirmee();
}
/// Ouvre l'écran de choix du moyen de paiement (depuis le récapitulatif)
class OnboardingChoixPaiementOuvert extends OnboardingEvent {
const OnboardingChoixPaiementOuvert();
}
/// Initie le paiement Wave
class OnboardingPaiementInitie extends OnboardingEvent {
const OnboardingPaiementInitie();
@@ -109,6 +121,14 @@ class OnboardingStepSummary extends OnboardingState {
List<Object?> get props => [souscription];
}
/// Étape 3b : choix du moyen de paiement (Wave, Orange Money, etc.)
class OnboardingStepChoixPaiement extends OnboardingState {
final SouscriptionStatusModel souscription;
const OnboardingStepChoixPaiement(this.souscription);
@override
List<Object?> get props => [souscription];
}
/// Étape 4 : paiement Wave — URL à ouvrir dans le navigateur
class OnboardingStepPaiement extends OnboardingState {
final SouscriptionStatusModel souscription;
@@ -118,6 +138,9 @@ class OnboardingStepPaiement extends OnboardingState {
List<Object?> get props => [souscription, waveLaunchUrl];
}
/// Paiement confirmé — déclenche un re-check du statut du compte
class OnboardingPaiementConfirme extends OnboardingState {}
/// Étape 5 : en attente de validation SuperAdmin
class OnboardingStepAttente extends OnboardingState {
final SouscriptionStatusModel? souscription;
@@ -145,7 +168,7 @@ class OnboardingBloc extends Bloc<OnboardingEvent, OnboardingState> {
String? _codeFormule;
String? _plage;
String? _typePeriode;
String? _typeOrganisation;
String _typeOrganisation = '';
String? _organisationId;
SouscriptionStatusModel? _souscription;
@@ -154,12 +177,19 @@ class OnboardingBloc extends Bloc<OnboardingEvent, OnboardingState> {
on<OnboardingFormuleSelected>(_onFormuleSelected);
on<OnboardingPeriodeSelected>(_onPeriodeSelected);
on<OnboardingDemandeConfirmee>(_onDemandeConfirmee);
on<OnboardingChoixPaiementOuvert>(_onChoixPaiementOuvert);
on<OnboardingPaiementInitie>(_onPaiementInitie);
on<OnboardingRetourDepuisWave>(_onRetourDepuisWave);
}
Future<void> _onStarted(OnboardingStarted event, Emitter<OnboardingState> emit) async {
emit(OnboardingLoading());
if (event.typeOrganisation != null && event.typeOrganisation!.isNotEmpty) {
_typeOrganisation = event.typeOrganisation!;
}
if (event.organisationId != null && event.organisationId!.isNotEmpty) {
_organisationId = event.organisationId;
}
try {
_formules = await _datasource.getFormules();
@@ -189,6 +219,7 @@ class OnboardingBloc extends Bloc<OnboardingEvent, OnboardingState> {
}
case 'AWAITING_VALIDATION':
case 'VALIDATED': // Paiement confirmé mais activation compte non encore effective
final sosc = await _datasource.getMaSouscription();
_souscription = sosc;
emit(OnboardingStepAttente(souscription: sosc));
@@ -218,14 +249,23 @@ class OnboardingBloc extends Bloc<OnboardingEvent, OnboardingState> {
void _onPeriodeSelected(OnboardingPeriodeSelected event, Emitter<OnboardingState> emit) {
_typePeriode = event.typePeriode;
_typeOrganisation = event.typeOrganisation;
// typeOrganisation already set from OnboardingStarted; override only if event provides one
if (event.typeOrganisation.isNotEmpty) {
_typeOrganisation = event.typeOrganisation;
}
_organisationId = event.organisationId;
}
void _onChoixPaiementOuvert(OnboardingChoixPaiementOuvert event, Emitter<OnboardingState> emit) {
if (_souscription != null) {
emit(OnboardingStepChoixPaiement(_souscription!));
}
}
Future<void> _onDemandeConfirmee(
OnboardingDemandeConfirmee event, Emitter<OnboardingState> emit) async {
if (_codeFormule == null || _plage == null || _typePeriode == null ||
_typeOrganisation == null || _organisationId == null) {
_organisationId == null) {
emit(const OnboardingError('Données manquantes. Recommencez depuis le début.'));
return;
}
@@ -235,7 +275,7 @@ class OnboardingBloc extends Bloc<OnboardingEvent, OnboardingState> {
typeFormule: _codeFormule!,
plageMembres: _plage!,
typePeriode: _typePeriode!,
typeOrganisation: _typeOrganisation!,
typeOrganisation: _typeOrganisation.isNotEmpty ? _typeOrganisation : null,
organisationId: _organisationId!,
);
if (sosc != null) {
@@ -281,12 +321,11 @@ class OnboardingBloc extends Bloc<OnboardingEvent, OnboardingState> {
if (souscId != null) {
await _datasource.confirmerPaiement(souscId);
}
final sosc = await _datasource.getMaSouscription();
_souscription = sosc;
emit(OnboardingStepAttente(souscription: sosc));
// Émettre OnboardingPaiementConfirme pour déclencher re-check du compte
// Si le backend auto-active le compte, AuthStatusChecked redirigera vers dashboard
emit(OnboardingPaiementConfirme());
} catch (e) {
// En cas d'erreur, on affiche quand même l'écran d'attente
emit(OnboardingStepAttente(souscription: _souscription));
emit(OnboardingPaiementConfirme());
}
}
}

27
lib/features/onboarding/data/datasources/souscription_datasource.dart
View File

@@ -58,26 +58,32 @@ class SouscriptionDatasource {
required String typeFormule,
required String plageMembres,
required String typePeriode,
required String typeOrganisation,
String? typeOrganisation,
required String organisationId,
}) async {
try {
final opts = await _authOptions();
final body = <String, dynamic>{
'typeFormule': typeFormule,
'plageMembres': plageMembres,
'typePeriode': typePeriode,
'organisationId': organisationId,
};
if (typeOrganisation != null && typeOrganisation.isNotEmpty) {
body['typeOrganisation'] = typeOrganisation;
}
final response = await _dio.post(
'$_base/api/souscriptions/demande',
data: {
'typeFormule': typeFormule,
'plageMembres': plageMembres,
'typePeriode': typePeriode,
'typeOrganisation': typeOrganisation,
'organisationId': organisationId,
},
data: body,
options: opts,
);
if ((response.statusCode == 200 || response.statusCode == 201) && response.data is Map) {
return SouscriptionStatusModel.fromJson(response.data as Map);
}
AppLogger.warning('SouscriptionDatasource.creerDemande: HTTP ${response.statusCode}');
final errMsg = response.data is Map
? (response.data as Map)['message'] ?? response.data.toString()
: response.data?.toString() ?? '(vide)';
AppLogger.warning('SouscriptionDatasource.creerDemande: HTTP ${response.statusCode} — erreur="$errMsg" — sentBody=$body');
} catch (e) {
AppLogger.error('SouscriptionDatasource.creerDemande: $e');
}
@@ -106,7 +112,8 @@ class SouscriptionDatasource {
try {
final opts = await _authOptions();
final response = await _dio.post(
'$_base/api/souscriptions/$souscriptionId/confirmer-paiement',
'$_base/api/souscriptions/confirmer-paiement',
queryParameters: {'id': souscriptionId},
options: opts,
);
return response.statusCode == 200;

10
lib/features/onboarding/data/models/souscription_status_model.dart
View File

@@ -14,6 +14,8 @@ class SouscriptionStatusModel {
final String? waveLaunchUrl;
final String organisationId;
final String? organisationNom;
final DateTime? dateDebut;
final DateTime? dateFin;
const SouscriptionStatusModel({
required this.souscriptionId,
@@ -30,6 +32,8 @@ class SouscriptionStatusModel {
this.waveLaunchUrl,
required this.organisationId,
this.organisationNom,
this.dateDebut,
this.dateFin,
});
factory SouscriptionStatusModel.fromJson(Map<dynamic, dynamic> json) {
@@ -48,6 +52,12 @@ class SouscriptionStatusModel {
waveLaunchUrl: json['waveLaunchUrl'] as String?,
organisationId: json['organisationId'] as String,
organisationNom: json['organisationNom'] as String?,
dateDebut: json['dateDebut'] != null
? DateTime.tryParse(json['dateDebut'] as String)
: null,
dateFin: json['dateFin'] != null
? DateTime.tryParse(json['dateFin'] as String)
: null,
);
}
}

260
lib/features/onboarding/presentation/pages/awaiting_validation_page.dart
View File

@@ -2,9 +2,11 @@ import 'dart:async';
import 'package:flutter/material.dart';
import '../../data/models/souscription_status_model.dart';
import '../../../../features/authentication/presentation/bloc/auth_bloc.dart';
import '../../../../shared/design_system/tokens/unionflow_colors.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
/// Étape 5 — En attente de validation SuperAdmin
/// Page de secours — affichée si l'auto-activation échoue après paiement.
/// Normalement jamais vue : confirmerPaiement() active le compte côté backend.
class AwaitingValidationPage extends StatefulWidget {
final SouscriptionStatusModel? souscription;
@@ -19,6 +21,7 @@ class _AwaitingValidationPageState extends State<AwaitingValidationPage>
late AnimationController _pulseController;
late Animation<double> _pulseAnimation;
Timer? _refreshTimer;
int _checkCount = 0;
@override
void initState() {
@@ -27,13 +30,14 @@ class _AwaitingValidationPageState extends State<AwaitingValidationPage>
vsync: this,
duration: const Duration(seconds: 2),
)..repeat(reverse: true);
_pulseAnimation = Tween(begin: 0.85, end: 1.0).animate(
_pulseAnimation = Tween(begin: 0.88, end: 1.0).animate(
CurvedAnimation(parent: _pulseController, curve: Curves.easeInOut),
);
// Vérification périodique toutes les 30 secondes (re-check le statut)
_refreshTimer = Timer.periodic(const Duration(seconds: 30), (_) {
// Vérification périodique toutes les 15 secondes
_refreshTimer = Timer.periodic(const Duration(seconds: 15), (_) {
if (mounted) {
setState(() => _checkCount++);
context.read<AuthBloc>().add(const AuthStatusChecked());
}
});
@@ -49,71 +53,169 @@ class _AwaitingValidationPageState extends State<AwaitingValidationPage>
@override
Widget build(BuildContext context) {
final sosc = widget.souscription;
return Scaffold(
backgroundColor: UnionFlowColors.background,
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(24),
child: SingleChildScrollView(
padding: const EdgeInsets.all(28),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// Animation d'attente
const SizedBox(height: 32),
// Animation pulsante
ScaleTransition(
scale: _pulseAnimation,
child: Container(
width: 120,
height: 120,
width: 130,
height: 130,
decoration: BoxDecoration(
color: const Color(0xFFFFF3E0),
shape: BoxShape.circle,
border: Border.all(color: const Color(0xFFF57C00), width: 3),
color: UnionFlowColors.goldPale,
border: Border.all(
color: UnionFlowColors.gold.withOpacity(0.5), width: 3),
boxShadow: UnionFlowColors.goldGlowShadow,
),
child: const Icon(
Icons.hourglass_top_rounded,
size: 60,
color: Color(0xFFF57C00),
size: 64,
color: UnionFlowColors.gold,
),
),
),
const SizedBox(height: 32),
const Text(
'Demande soumise !',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
'Paiement reçu !',
style: TextStyle(
fontSize: 26,
fontWeight: FontWeight.w800,
color: UnionFlowColors.textPrimary,
),
textAlign: TextAlign.center,
),
const SizedBox(height: 12),
const SizedBox(height: 10),
const Text(
'Votre souscription est en cours de vérification par notre équipe. '
'Vous recevrez une notification dès que votre compte sera activé.',
style: TextStyle(fontSize: 15, color: Colors.grey, height: 1.5),
'Votre paiement a bien été reçu. Votre compte\nest en cours d\'activation.',
style: TextStyle(
fontSize: 15,
color: UnionFlowColors.textSecondary,
height: 1.5,
),
textAlign: TextAlign.center,
),
if (sosc != null) ...[
const SizedBox(height: 32),
_SummaryCard(souscription: sosc),
],
const SizedBox(height: 32),
const Text(
'Cette vérification prend généralement 24 à 48 heures ouvrables.',
style: TextStyle(fontSize: 13, color: Colors.grey),
textAlign: TextAlign.center,
),
// Souscription recap card
if (sosc != null) _RecapCard(souscription: sosc),
const SizedBox(height: 24),
OutlinedButton.icon(
onPressed: () =>
context.read<AuthBloc>().add(const AuthStatusChecked()),
icon: const Icon(Icons.refresh),
label: const Text('Vérifier l\'état de mon compte'),
// État de vérification
Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: UnionFlowColors.surface,
borderRadius: BorderRadius.circular(14),
boxShadow: UnionFlowColors.softShadow,
),
child: Row(
children: [
SizedBox(
width: 20,
height: 20,
child: CircularProgressIndicator(
strokeWidth: 2.5,
color: UnionFlowColors.unionGreen,
value: _checkCount > 0 ? null : null,
),
),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Vérification automatique en cours',
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 13,
color: UnionFlowColors.textPrimary,
),
),
Text(
'Vérifié $_checkCount fois · prochaine dans 15s',
style: const TextStyle(
fontSize: 11,
color: UnionFlowColors.textSecondary,
),
),
],
),
),
],
),
),
const SizedBox(height: 20),
// Note d'information
Container(
padding: const EdgeInsets.all(14),
decoration: BoxDecoration(
color: UnionFlowColors.infoPale,
borderRadius: BorderRadius.circular(12),
border:
Border.all(color: UnionFlowColors.info.withOpacity(0.2)),
),
child: const Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(Icons.info_outline_rounded,
color: UnionFlowColors.info, size: 18),
SizedBox(width: 10),
Expanded(
child: Text(
'L\'activation est généralement immédiate. Si votre compte n\'est pas activé dans les 5 minutes, contactez notre support.',
style: TextStyle(
fontSize: 12,
color: UnionFlowColors.info,
height: 1.45),
),
),
],
),
),
const SizedBox(height: 28),
SizedBox(
width: double.infinity,
child: ElevatedButton.icon(
onPressed: () =>
context.read<AuthBloc>().add(const AuthStatusChecked()),
icon: const Icon(Icons.refresh_rounded),
label: const Text(
'Vérifier maintenant',
style: TextStyle(fontSize: 15, fontWeight: FontWeight.w700),
),
style: ElevatedButton.styleFrom(
backgroundColor: UnionFlowColors.unionGreen,
foregroundColor: Colors.white,
padding: const EdgeInsets.symmetric(vertical: 14),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(14)),
shadowColor: UnionFlowColors.unionGreen.withOpacity(0.3),
elevation: 2,
),
),
),
const SizedBox(height: 12),
TextButton(
onPressed: () =>
context.read<AuthBloc>().add(const AuthLogoutRequested()),
child: const Text('Se déconnecter'),
child: const Text(
'Se déconnecter',
style: TextStyle(color: UnionFlowColors.textSecondary),
),
),
],
),
@@ -123,26 +225,49 @@ class _AwaitingValidationPageState extends State<AwaitingValidationPage>
}
}
class _SummaryCard extends StatelessWidget {
class _RecapCard extends StatelessWidget {
final SouscriptionStatusModel souscription;
const _SummaryCard({required this.souscription});
const _RecapCard({required this.souscription});
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.grey[50],
borderRadius: BorderRadius.circular(12),
border: Border.all(color: Colors.grey[200]!),
color: UnionFlowColors.surface,
borderRadius: BorderRadius.circular(14),
boxShadow: UnionFlowColors.softShadow,
border: Border.all(color: UnionFlowColors.border),
),
child: Column(
children: [
_Row('Organisation', souscription.organisationNom ?? '—'),
_Row('Formule', souscription.typeFormule),
_Row('Période', souscription.typePeriode),
if (souscription.montantTotal != null)
_Row('Montant payé', '${souscription.montantTotal!.toStringAsFixed(0)} FCFA'),
_Row(
icon: Icons.business_rounded,
label: 'Organisation',
value: souscription.organisationNom ?? '—',
),
const Divider(height: 16, color: UnionFlowColors.border),
_Row(
icon: Icons.workspace_premium_rounded,
label: 'Formule',
value: souscription.typeFormule,
),
const SizedBox(height: 8),
_Row(
icon: Icons.calendar_today_rounded,
label: 'Période',
value: souscription.typePeriode,
),
if (souscription.montantTotal != null) ...[
const SizedBox(height: 8),
_Row(
icon: Icons.payments_rounded,
label: 'Montant payé',
value: '${souscription.montantTotal!.toStringAsFixed(0)} FCFA',
valueColor: UnionFlowColors.unionGreen,
valueBold: true,
),
],
],
),
);
@@ -150,22 +275,41 @@ class _SummaryCard extends StatelessWidget {
}
class _Row extends StatelessWidget {
final IconData icon;
final String label;
final String value;
const _Row(this.label, this.value);
final Color valueColor;
final bool valueBold;
const _Row({
required this.icon,
required this.label,
required this.value,
this.valueColor = UnionFlowColors.textPrimary,
this.valueBold = false,
});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 4),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(label, style: const TextStyle(color: Colors.grey, fontSize: 13)),
Text(value,
style: const TextStyle(fontWeight: FontWeight.w500, fontSize: 13)),
],
),
return Row(
children: [
Icon(icon, size: 16, color: UnionFlowColors.textTertiary),
const SizedBox(width: 8),
Text(
label,
style: const TextStyle(
color: UnionFlowColors.textSecondary, fontSize: 13),
),
const Spacer(),
Text(
value,
style: TextStyle(
color: valueColor,
fontSize: 13,
fontWeight: valueBold ? FontWeight.w700 : FontWeight.w500,
),
),
],
);
}
}

176
lib/features/onboarding/presentation/pages/onboarding_flow_page.dart
View File

@@ -2,9 +2,12 @@ import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../bloc/onboarding_bloc.dart';
import '../../../../core/di/injection.dart';
import '../../../../features/authentication/presentation/bloc/auth_bloc.dart';
import '../../../../shared/design_system/tokens/unionflow_colors.dart';
import 'plan_selection_page.dart';
import 'period_selection_page.dart';
import 'subscription_summary_page.dart';
import 'payment_method_page.dart';
import 'wave_payment_page.dart';
import 'awaiting_validation_page.dart';
@@ -14,11 +17,13 @@ class OnboardingFlowPage extends StatelessWidget {
final String onboardingState;
final String? souscriptionId;
final String organisationId;
final String? typeOrganisation;
const OnboardingFlowPage({
super.key,
required this.onboardingState,
required this.organisationId,
this.typeOrganisation,
this.souscriptionId,
});
@@ -29,6 +34,8 @@ class OnboardingFlowPage extends StatelessWidget {
..add(OnboardingStarted(
initialState: onboardingState,
existingSouscriptionId: souscriptionId,
typeOrganisation: typeOrganisation,
organisationId: organisationId.isNotEmpty ? organisationId : null,
)),
child: const _OnboardingFlowView(),
);
@@ -40,30 +47,76 @@ class _OnboardingFlowView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return BlocBuilder<OnboardingBloc, OnboardingState>(
return BlocConsumer<OnboardingBloc, OnboardingState>(
listener: (context, state) {
// Paiement confirmé → re-check du statut (auto-activation backend)
if (state is OnboardingPaiementConfirme) {
context.read<AuthBloc>().add(const AuthStatusChecked());
}
},
builder: (context, state) {
if (state is OnboardingLoading || state is OnboardingInitial) {
return const Scaffold(
body: Center(child: CircularProgressIndicator()),
if (state is OnboardingLoading || state is OnboardingInitial || state is OnboardingPaiementConfirme) {
return Scaffold(
backgroundColor: UnionFlowColors.background,
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const CircularProgressIndicator(
color: UnionFlowColors.unionGreen,
),
const SizedBox(height: 16),
Text(
state is OnboardingPaiementConfirme
? 'Activation de votre compte…'
: 'Chargement…',
style: const TextStyle(
color: UnionFlowColors.textSecondary,
fontSize: 15,
),
),
],
),
),
);
}
if (state is OnboardingError) {
return Scaffold(
backgroundColor: UnionFlowColors.background,
body: Center(
child: Padding(
padding: const EdgeInsets.all(24),
padding: const EdgeInsets.all(32),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.error_outline, size: 64, color: Colors.red),
const SizedBox(height: 16),
Text(state.message, textAlign: TextAlign.center),
Container(
width: 80,
height: 80,
decoration: BoxDecoration(
color: UnionFlowColors.errorPale,
shape: BoxShape.circle,
),
child: const Icon(Icons.error_outline,
size: 40, color: UnionFlowColors.error),
),
const SizedBox(height: 20),
Text(
state.message,
textAlign: TextAlign.center,
style: const TextStyle(
color: UnionFlowColors.textPrimary, fontSize: 15),
),
const SizedBox(height: 24),
ElevatedButton(
onPressed: () => context.read<OnboardingBloc>().add(
OnboardingStarted(initialState: 'NO_SUBSCRIPTION'),
const OnboardingStarted(
initialState: 'NO_SUBSCRIPTION'),
),
style: ElevatedButton.styleFrom(
backgroundColor: UnionFlowColors.unionGreen,
foregroundColor: Colors.white,
),
child: const Text('Réessayer'),
),
],
@@ -89,6 +142,10 @@ class _OnboardingFlowView extends StatelessWidget {
return SubscriptionSummaryPage(souscription: state.souscription);
}
if (state is OnboardingStepChoixPaiement) {
return PaymentMethodPage(souscription: state.souscription);
}
if (state is OnboardingStepPaiement) {
return WavePaymentPage(
souscription: state.souscription,
@@ -104,7 +161,9 @@ class _OnboardingFlowView extends StatelessWidget {
return _RejectedPage(commentaire: state.commentaire);
}
return const Scaffold(body: Center(child: CircularProgressIndicator()));
return const Scaffold(
body: Center(child: CircularProgressIndicator()),
);
},
);
}
@@ -117,28 +176,93 @@ class _RejectedPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
backgroundColor: UnionFlowColors.background,
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(32),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(Icons.cancel_outlined, size: 72, color: Colors.red),
const SizedBox(height: 24),
const Text(
'Souscription rejetée',
style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: UnionFlowColors.errorPale,
shape: BoxShape.circle,
),
child: const Icon(Icons.cancel_outlined,
size: 52, color: UnionFlowColors.error),
),
if (commentaire != null) ...[
const SizedBox(height: 12),
Text(commentaire!, textAlign: TextAlign.center),
const SizedBox(height: 28),
const Text(
'Demande rejetée',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: UnionFlowColors.textPrimary,
),
),
const SizedBox(height: 12),
const Text(
'Votre demande de souscription a été refusée.',
textAlign: TextAlign.center,
style: TextStyle(color: UnionFlowColors.textSecondary),
),
if (commentaire != null && commentaire!.isNotEmpty) ...[
const SizedBox(height: 20),
Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: UnionFlowColors.errorPale,
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: UnionFlowColors.error.withOpacity(0.3)),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Icon(Icons.comment_outlined,
color: UnionFlowColors.error, size: 18),
const SizedBox(width: 10),
Expanded(
child: Text(
commentaire!,
style: const TextStyle(
color: UnionFlowColors.textPrimary,
fontSize: 14,
height: 1.5),
),
),
],
),
),
],
const SizedBox(height: 32),
ElevatedButton(
onPressed: () => context.read<OnboardingBloc>().add(
OnboardingStarted(initialState: 'NO_SUBSCRIPTION'),
),
child: const Text('Nouvelle souscription'),
const SizedBox(height: 36),
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: () => context.read<OnboardingBloc>().add(
const OnboardingStarted(
initialState: 'NO_SUBSCRIPTION'),
),
style: ElevatedButton.styleFrom(
backgroundColor: UnionFlowColors.unionGreen,
foregroundColor: Colors.white,
padding: const EdgeInsets.symmetric(vertical: 14),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12)),
),
child: const Text('Soumettre une nouvelle demande',
style: TextStyle(fontSize: 15)),
),
),
const SizedBox(height: 12),
TextButton(
onPressed: () =>
context.read<AuthBloc>().add(const AuthLogoutRequested()),
child: const Text('Se déconnecter',
style:
TextStyle(color: UnionFlowColors.textSecondary)),
),
],
),

169
lib/features/onboarding/presentation/pages/onboarding_shared_widgets.dart Normal file
View File

@@ -0,0 +1,169 @@
import 'package:flutter/material.dart';
import '../../../../shared/design_system/tokens/unionflow_colors.dart';
/// Header commun à toutes les étapes d'onboarding
class OnboardingStepHeader extends StatelessWidget {
final int step;
final int total;
final String title;
final String subtitle;
const OnboardingStepHeader({
super.key,
required this.step,
required this.total,
required this.title,
required this.subtitle,
});
@override
Widget build(BuildContext context) {
return Container(
decoration: const BoxDecoration(
gradient: UnionFlowColors.primaryGradient,
),
child: SafeArea(
bottom: false,
child: Padding(
padding: const EdgeInsets.fromLTRB(20, 12, 20, 24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: List.generate(total, (i) {
final done = i < step;
return Expanded(
child: Container(
height: 4,
margin: EdgeInsets.only(right: i < total - 1 ? 6 : 0),
decoration: BoxDecoration(
color: done
? Colors.white
: Colors.white.withOpacity(0.3),
borderRadius: BorderRadius.circular(2),
),
),
);
}),
),
const SizedBox(height: 6),
Text(
'Étape $step sur $total',
style: TextStyle(
color: Colors.white.withOpacity(0.75),
fontSize: 12,
fontWeight: FontWeight.w500,
),
),
const SizedBox(height: 12),
Text(
title,
style: const TextStyle(
color: Colors.white,
fontSize: 22,
fontWeight: FontWeight.w800,
),
),
const SizedBox(height: 4),
Text(
subtitle,
style: TextStyle(
color: Colors.white.withOpacity(0.8),
fontSize: 13,
height: 1.4,
),
),
],
),
),
),
);
}
}
/// Titre de section avec icône
class OnboardingSectionTitle extends StatelessWidget {
final IconData icon;
final String title;
const OnboardingSectionTitle({
super.key,
required this.icon,
required this.title,
});
@override
Widget build(BuildContext context) {
return Row(
children: [
Icon(icon, color: UnionFlowColors.unionGreen, size: 20),
const SizedBox(width: 8),
Text(
title,
style: const TextStyle(
color: UnionFlowColors.textPrimary,
fontWeight: FontWeight.w700,
fontSize: 16,
),
),
],
);
}
}
/// Barre de bouton principale en bas de page
class OnboardingBottomBar extends StatelessWidget {
final bool enabled;
final String label;
final VoidCallback onPressed;
const OnboardingBottomBar({
super.key,
required this.enabled,
required this.label,
required this.onPressed,
});
@override
Widget build(BuildContext context) {
return 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(
onPressed: enabled ? onPressed : null,
style: ElevatedButton.styleFrom(
backgroundColor: UnionFlowColors.unionGreen,
disabledBackgroundColor: UnionFlowColors.border,
foregroundColor: Colors.white,
padding: const EdgeInsets.symmetric(vertical: 15),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(14),
),
elevation: enabled ? 2 : 0,
shadowColor: UnionFlowColors.unionGreen.withOpacity(0.4),
),
child: Text(
label,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w700,
letterSpacing: 0.3,
),
),
),
),
);
}
}

428
lib/features/onboarding/presentation/pages/payment_method_page.dart Normal file
View File

@@ -0,0 +1,428 @@
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/unionflow_colors.dart';
/// Écran de sélection du moyen de paiement
class PaymentMethodPage extends StatefulWidget {
final SouscriptionStatusModel souscription;
const PaymentMethodPage({super.key, required this.souscription});
@override
State<PaymentMethodPage> createState() => _PaymentMethodPageState();
}
class _PaymentMethodPageState extends State<PaymentMethodPage> {
String? _selected;
static const _methods = [
_PayMethod(
id: 'WAVE',
name: 'Wave Mobile Money',
description: 'Paiement rapide via votre compte Wave',
logoAsset: 'assets/images/payment_methods/wave/logo.png',
color: Color(0xFF00B9F1),
available: true,
badge: 'Recommandé',
),
_PayMethod(
id: 'ORANGE_MONEY',
name: 'Orange Money',
description: 'Paiement via Orange Money',
logoAsset: 'assets/images/payment_methods/orange_money/logo-black.png',
color: Color(0xFFFF6600),
available: false,
badge: 'Prochainement',
),
];
@override
Widget build(BuildContext context) {
final montant = widget.souscription.montantTotal ?? 0;
return Scaffold(
backgroundColor: UnionFlowColors.background,
body: Column(
children: [
// Header
Container(
decoration: const BoxDecoration(
gradient: UnionFlowColors.primaryGradient,
),
child: SafeArea(
bottom: false,
child: Padding(
padding: const EdgeInsets.fromLTRB(20, 16, 20, 24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
IconButton(
onPressed: () => Navigator.of(context).maybePop(),
icon: const Icon(Icons.arrow_back_rounded,
color: Colors.white),
padding: EdgeInsets.zero,
constraints: const BoxConstraints(),
),
const SizedBox(height: 12),
const Text(
'Moyen de paiement',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontWeight: FontWeight.w800,
),
),
const SizedBox(height: 4),
Text(
'Choisissez comment régler votre souscription',
style: TextStyle(
color: Colors.white.withOpacity(0.8), fontSize: 13),
),
],
),
),
),
),
Expanded(
child: SingleChildScrollView(
padding: const EdgeInsets.fromLTRB(20, 24, 20, 100),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Montant rappel
Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: UnionFlowColors.surface,
borderRadius: BorderRadius.circular(14),
boxShadow: UnionFlowColors.softShadow,
),
child: Row(
children: [
Container(
width: 44,
height: 44,
decoration: BoxDecoration(
gradient: UnionFlowColors.goldGradient,
borderRadius: BorderRadius.circular(10),
),
child: const Icon(Icons.receipt_rounded,
color: Colors.white, size: 22),
),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Montant total',
style: TextStyle(
color: UnionFlowColors.textSecondary,
fontSize: 12),
),
Text(
'${_formatPrix(montant)} FCFA',
style: const TextStyle(
color: UnionFlowColors.textPrimary,
fontSize: 20,
fontWeight: FontWeight.w900,
),
),
],
),
),
if (widget.souscription.organisationNom != null)
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
const Text(
'Organisation',
style: TextStyle(
color: UnionFlowColors.textSecondary,
fontSize: 11),
),
Text(
widget.souscription.organisationNom!,
style: const TextStyle(
color: UnionFlowColors.textPrimary,
fontSize: 12,
fontWeight: FontWeight.w600),
),
],
),
],
),
),
const SizedBox(height: 24),
const Text(
'Sélectionnez un moyen de paiement',
style: TextStyle(
color: UnionFlowColors.textPrimary,
fontWeight: FontWeight.w700,
fontSize: 15,
),
),
const SizedBox(height: 12),
..._methods.map((m) => _MethodCard(
method: m,
selected: _selected == m.id,
onTap: m.available
? () => setState(() => _selected = m.id)
: null,
)),
const SizedBox(height: 20),
Container(
padding: const EdgeInsets.all(14),
decoration: BoxDecoration(
color: UnionFlowColors.unionGreenPale,
borderRadius: BorderRadius.circular(12),
border: Border.all(
color:
UnionFlowColors.unionGreen.withOpacity(0.25)),
),
child: const Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(Icons.lock_rounded,
color: UnionFlowColors.unionGreen, size: 18),
SizedBox(width: 10),
Expanded(
child: Text(
'Vos informations de paiement sont sécurisées et ne sont jamais stockées sur nos serveurs. La transaction est traitée directement par Wave.',
style: TextStyle(
fontSize: 12,
color: UnionFlowColors.unionGreen,
height: 1.4),
),
),
],
),
),
],
),
),
),
],
),
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: _selected == 'WAVE'
? () => context
.read<OnboardingBloc>()
.add(const OnboardingPaiementInitie())
: null,
icon: const Icon(Icons.open_in_new_rounded),
label: Text(
_selected == 'WAVE'
? 'Payer avec Wave'
: 'Sélectionnez un moyen de paiement',
style:
const TextStyle(fontSize: 16, fontWeight: FontWeight.w700),
),
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFF00B9F1),
disabledBackgroundColor: UnionFlowColors.border,
foregroundColor: Colors.white,
disabledForegroundColor: UnionFlowColors.textSecondary,
padding: const EdgeInsets.symmetric(vertical: 15),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(14)),
elevation: _selected == 'WAVE' ? 3 : 0,
shadowColor: const Color(0xFF00B9F1).withOpacity(0.4),
),
),
),
),
);
}
String _formatPrix(double prix) {
if (prix >= 1000000) return '${(prix / 1000000).toStringAsFixed(1)} M';
final s = prix.toStringAsFixed(0);
if (s.length > 3) {
return '${s.substring(0, s.length - 3)} ${s.substring(s.length - 3)}';
}
return s;
}
}
class _PayMethod {
final String id, name, description, logoAsset;
final Color color;
final bool available;
final String badge;
const _PayMethod({
required this.id,
required this.name,
required this.description,
required this.logoAsset,
required this.color,
required this.available,
required this.badge,
});
}
class _MethodCard extends StatelessWidget {
final _PayMethod method;
final bool selected;
final VoidCallback? onTap;
const _MethodCard({
required this.method,
required this.selected,
this.onTap,
});
@override
Widget build(BuildContext context) {
final disabled = onTap == null;
return GestureDetector(
onTap: onTap,
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
margin: const EdgeInsets.only(bottom: 10),
decoration: BoxDecoration(
color: disabled
? UnionFlowColors.surfaceVariant
: selected
? method.color.withOpacity(0.06)
: UnionFlowColors.surface,
border: Border.all(
color: selected ? method.color : UnionFlowColors.border,
width: selected ? 2 : 1,
),
borderRadius: BorderRadius.circular(14),
boxShadow: disabled
? []
: selected
? [
BoxShadow(
color: method.color.withOpacity(0.15),
blurRadius: 16,
offset: const Offset(0, 6),
)
]
: UnionFlowColors.softShadow,
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
child: Row(
children: [
// Logo image
Container(
width: 56,
height: 48,
decoration: BoxDecoration(
color: disabled
? UnionFlowColors.border
: Colors.white,
borderRadius: BorderRadius.circular(10),
border: Border.all(color: UnionFlowColors.border),
),
padding: const EdgeInsets.all(6),
child: Image.asset(
method.logoAsset,
fit: BoxFit.contain,
color: disabled ? UnionFlowColors.textTertiary : null,
colorBlendMode: disabled ? BlendMode.srcIn : null,
errorBuilder: (_, __, ___) => Icon(
Icons.account_balance_wallet_rounded,
color: disabled ? UnionFlowColors.textTertiary : method.color,
size: 24,
),
),
),
const SizedBox(width: 14),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
method.name,
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 14,
color: disabled
? UnionFlowColors.textTertiary
: UnionFlowColors.textPrimary,
),
),
Text(
method.description,
style: TextStyle(
fontSize: 12,
color: disabled
? UnionFlowColors.textTertiary
: UnionFlowColors.textSecondary,
),
),
],
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Container(
padding: const EdgeInsets.symmetric(
horizontal: 8, vertical: 3),
decoration: BoxDecoration(
color: disabled
? UnionFlowColors.border
: method.available
? method.color.withOpacity(0.1)
: UnionFlowColors.surfaceVariant,
borderRadius: BorderRadius.circular(20),
),
child: Text(
method.badge,
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w700,
color: disabled
? UnionFlowColors.textTertiary
: method.available
? method.color
: UnionFlowColors.textSecondary,
),
),
),
if (!disabled) ...[
const SizedBox(height: 6),
Icon(
selected
? Icons.check_circle_rounded
: Icons.radio_button_unchecked,
color: selected ? method.color : UnionFlowColors.border,
size: 20,
),
],
],
),
],
),
),
),
);
}
}

502
lib/features/onboarding/presentation/pages/period_selection_page.dart
View File

@@ -3,8 +3,11 @@ import 'package:flutter_bloc/flutter_bloc.dart';
import '../../bloc/onboarding_bloc.dart';
import '../../data/models/formule_model.dart';
import '../../../../features/authentication/presentation/bloc/auth_bloc.dart';
import '../../../../shared/design_system/tokens/unionflow_colors.dart';
import 'onboarding_shared_widgets.dart';
/// Étape 2 — Choix de la période de facturation et du type d'organisation
/// Étape 2 — Choix de la période de facturation
/// Le type d'organisation est récupéré automatiquement depuis le backend.
class PeriodSelectionPage extends StatefulWidget {
final String codeFormule;
final String plage;
@@ -23,35 +26,23 @@ class PeriodSelectionPage extends StatefulWidget {
class _PeriodSelectionPageState extends State<PeriodSelectionPage> {
String _selectedPeriode = 'MENSUEL';
String _selectedTypeOrg = 'ASSOCIATION';
static const _periodes = [
('MENSUEL', 'Mensuel', 'Aucune remise', 1.00),
('TRIMESTRIEL', 'Trimestriel', '5% de remise', 0.95),
('SEMESTRIEL', 'Semestriel', '10% de remise', 0.90),
('ANNUEL', 'Annuel', '20% de remise', 0.80),
];
static const _typesOrg = [
('ASSOCIATION', 'Association / ONG locale', '×1.0'),
('MUTUELLE', 'Mutuelle (santé, fonctionnaires…)', '×1.2'),
('COOPERATIVE', 'Coopérative / Microfinance', '×1.3'),
('FEDERATION', 'Fédération / Grande ONG', '×1.0 ou ×1.5 Premium'),
_Periode('MENSUEL', 'Mensuel', '1 mois', null, 1, 1.00),
_Periode('TRIMESTRIEL', 'Trimestriel', '3 mois', '–5%', 3, 0.95),
_Periode('SEMESTRIEL', 'Semestriel', '6 mois', '–10%', 6, 0.90),
_Periode('ANNUEL', 'Annuel', '12 mois', '–20%', 12, 0.80),
];
FormuleModel? get _formule => widget.formules
.where((f) => f.code == widget.codeFormule && f.plage == widget.plage)
.firstOrNull;
double get _prixEstime {
double _estimerPrix(String periodeCode) {
final f = _formule;
if (f == null) return 0;
final coefPeriode =
_periodes.firstWhere((p) => p.$1 == _selectedPeriode).$4;
final coefOrg =
_selectedTypeOrg == 'COOPERATIVE' ? 1.3 : _selectedTypeOrg == 'MUTUELLE' ? 1.2 : 1.0;
final nbMois = {'MENSUEL': 1, 'TRIMESTRIEL': 3, 'SEMESTRIEL': 6, 'ANNUEL': 12}[_selectedPeriode]!;
return f.prixMensuel * coefOrg * coefPeriode * nbMois;
final p = _periodes.firstWhere((x) => x.code == periodeCode);
return f.prixMensuel * p.coef * p.nbMois;
}
String get _organisationId {
@@ -69,156 +60,363 @@ class _PeriodSelectionPageState extends State<PeriodSelectionPage> {
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final prixSelected = _estimerPrix(_selectedPeriode);
return Scaffold(
appBar: AppBar(
title: const Text('Période & type d\'organisation'),
leading: BackButton(
onPressed: () => context.read<OnboardingBloc>().add(
OnboardingStarted(initialState: 'NO_SUBSCRIPTION'),
),
),
),
body: SingleChildScrollView(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_StepIndicator(current: 2, total: 3),
const SizedBox(height: 24),
// Période
Text('Période de facturation', style: theme.textTheme.titleMedium),
const SizedBox(height: 8),
..._periodes.map((p) {
final (code, label, remise, _) = p;
final selected = _selectedPeriode == code;
return RadioListTile<String>(
value: code,
groupValue: _selectedPeriode,
onChanged: (v) => setState(() => _selectedPeriode = v!),
title: Text(label,
style: TextStyle(
fontWeight:
selected ? FontWeight.bold : FontWeight.normal)),
subtitle: Text(remise,
style: TextStyle(
color: code != 'MENSUEL' ? Colors.green[700] : null)),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
side: BorderSide(
color: selected
? theme.primaryColor
: Colors.grey[300]!,
),
),
tileColor:
selected ? theme.primaryColor.withOpacity(0.05) : null,
contentPadding:
const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
);
}),
const SizedBox(height: 24),
Text('Type de votre organisation', style: theme.textTheme.titleMedium),
const SizedBox(height: 4),
Text(
'Détermine le coefficient tarifaire applicable.',
style:
theme.textTheme.bodySmall?.copyWith(color: Colors.grey[600]),
),
const SizedBox(height: 8),
..._typesOrg.map((t) {
final (code, label, coef) = t;
final selected = _selectedTypeOrg == code;
return RadioListTile<String>(
value: code,
groupValue: _selectedTypeOrg,
onChanged: (v) => setState(() => _selectedTypeOrg = v!),
title: Text(label),
subtitle: Text('Coefficient : $coef',
style: const TextStyle(fontSize: 12)),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
side: BorderSide(
color: selected ? theme.primaryColor : Colors.grey[300]!,
),
),
tileColor:
selected ? theme.primaryColor.withOpacity(0.05) : null,
contentPadding:
const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
);
}),
const SizedBox(height: 24),
// Estimation du prix
Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: theme.primaryColor.withOpacity(0.08),
borderRadius: BorderRadius.circular(12),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
backgroundColor: UnionFlowColors.background,
body: Column(
children: [
OnboardingStepHeader(
step: 2,
total: 3,
title: 'Période de facturation',
subtitle: 'Choisissez votre rythme de paiement.\nPlus la période est longue, plus vous économisez.',
),
Expanded(
child: SingleChildScrollView(
padding: const EdgeInsets.fromLTRB(20, 20, 20, 100),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text('Estimation', style: TextStyle(fontWeight: FontWeight.bold)),
Text(
'${_prixEstime.toStringAsFixed(0)} FCFA',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: theme.primaryColor,
// Rappel formule sélectionnée
_FormulaRecap(
codeFormule: widget.codeFormule,
plage: widget.plage,
prixMensuel: _formule?.prixMensuel ?? 0,
),
const SizedBox(height: 24),
OnboardingSectionTitle(
icon: Icons.calendar_month_outlined,
title: 'Choisissez votre période',
),
const SizedBox(height: 12),
..._periodes.map((p) => _PeriodeCard(
periode: p,
selected: _selectedPeriode == p.code,
prixTotal: _estimerPrix(p.code),
onTap: () => setState(() => _selectedPeriode = p.code),
)),
const SizedBox(height: 24),
// Total estimé
Container(
padding: const EdgeInsets.all(18),
decoration: BoxDecoration(
gradient: UnionFlowColors.primaryGradient,
borderRadius: BorderRadius.circular(16),
boxShadow: UnionFlowColors.greenGlowShadow,
),
child: Row(
children: [
const Icon(Icons.calculate_outlined,
color: Colors.white70, size: 22),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Estimation indicative',
style: TextStyle(
color: Colors.white.withOpacity(0.8),
fontSize: 12,
),
),
const SizedBox(height: 2),
const Text(
'Le montant exact est calculé par le système.',
style: TextStyle(
color: Colors.white70, fontSize: 11),
),
],
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
_formatPrix(prixSelected),
style: const TextStyle(
color: Colors.white,
fontSize: 22,
fontWeight: FontWeight.w900,
),
),
const Text(
'FCFA',
style:
TextStyle(color: Colors.white70, fontSize: 12),
),
],
),
],
),
),
const SizedBox(height: 16),
// Note info
Container(
padding: const EdgeInsets.all(14),
decoration: BoxDecoration(
color: UnionFlowColors.infoPale,
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: UnionFlowColors.info.withOpacity(0.2)),
),
child: const Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(Icons.info_outline,
color: UnionFlowColors.info, size: 18),
SizedBox(width: 10),
Expanded(
child: Text(
'Le type de votre organisation et le coefficient tarifaire exact sont déterminés lors de la création de votre compte. Le récapitulatif final vous montrera le montant précis.',
style: TextStyle(
fontSize: 12,
color: UnionFlowColors.info,
height: 1.4),
),
),
],
),
),
],
),
),
const SizedBox(height: 32),
],
),
),
],
),
bottomNavigationBar: Padding(
padding: const EdgeInsets.all(16),
child: ElevatedButton(
onPressed: () {
context.read<OnboardingBloc>()
..add(OnboardingPeriodeSelected(
typePeriode: _selectedPeriode,
typeOrganisation: _selectedTypeOrg,
organisationId: _organisationId,
))
..add(const OnboardingDemandeConfirmee());
},
style: ElevatedButton.styleFrom(minimumSize: const Size.fromHeight(48)),
child: const Text('Voir le récapitulatif'),
),
bottomNavigationBar: OnboardingBottomBar(
enabled: true,
label: 'Voir le récapitulatif',
onPressed: () {
context.read<OnboardingBloc>()
..add(OnboardingPeriodeSelected(
typePeriode: _selectedPeriode,
typeOrganisation: '',
organisationId: _organisationId,
))
..add(const OnboardingDemandeConfirmee());
},
),
);
}
String _formatPrix(double prix) {
if (prix >= 1000000) return '${(prix / 1000000).toStringAsFixed(1)} M';
if (prix >= 1000) {
final parts = prix.toStringAsFixed(0);
if (parts.length > 3) {
return '${parts.substring(0, parts.length - 3)} ${parts.substring(parts.length - 3)}';
}
}
return prix.toStringAsFixed(0);
}
}
class _StepIndicator extends StatelessWidget {
final int current;
final int total;
const _StepIndicator({required this.current, required this.total});
class _Periode {
final String code, label, duree;
final String? badge;
final int nbMois;
final double coef;
const _Periode(this.code, this.label, this.duree, this.badge, this.nbMois, this.coef);
}
class _FormulaRecap extends StatelessWidget {
final String codeFormule;
final String plage;
final double prixMensuel;
const _FormulaRecap({
required this.codeFormule,
required this.plage,
required this.prixMensuel,
});
static const _plageLabels = {
'PETITE': '1–100 membres',
'MOYENNE': '101–500 membres',
'GRANDE': '501–2 000 membres',
'TRES_GRANDE': '2 000+ membres',
};
@override
Widget build(BuildContext context) {
return Row(
children: List.generate(total, (i) {
final active = i + 1 <= current;
return Expanded(
child: Container(
height: 4,
margin: EdgeInsets.only(right: i < total - 1 ? 4 : 0),
decoration: BoxDecoration(
color: active ? Theme.of(context).primaryColor : Colors.grey[300],
borderRadius: BorderRadius.circular(2),
return Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
decoration: BoxDecoration(
color: UnionFlowColors.unionGreenPale,
borderRadius: BorderRadius.circular(12),
border: Border.all(
color: UnionFlowColors.unionGreen.withOpacity(0.25)),
),
child: Row(
children: [
const Icon(Icons.check_circle_rounded,
color: UnionFlowColors.unionGreen, size: 20),
const SizedBox(width: 10),
Expanded(
child: RichText(
text: TextSpan(
style: const TextStyle(
color: UnionFlowColors.textPrimary, fontSize: 13),
children: [
TextSpan(
text: 'Formule $codeFormule',
style: const TextStyle(fontWeight: FontWeight.w700),
),
const TextSpan(text: ' · '),
TextSpan(
text: _plageLabels[plage] ?? plage,
style: const TextStyle(
color: UnionFlowColors.textSecondary),
),
],
),
),
),
);
}),
Text(
'${_formatPrix(prixMensuel)} FCFA/mois',
style: const TextStyle(
color: UnionFlowColors.unionGreen,
fontWeight: FontWeight.w700,
fontSize: 13,
),
),
],
),
);
}
String _formatPrix(double prix) {
if (prix >= 1000) {
final k = (prix / 1000).toStringAsFixed(0);
return '$k 000';
}
return prix.toStringAsFixed(0);
}
}
class _PeriodeCard extends StatelessWidget {
final _Periode periode;
final bool selected;
final double prixTotal;
final VoidCallback onTap;
const _PeriodeCard({
required this.periode,
required this.selected,
required this.prixTotal,
required this.onTap,
});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onTap,
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
margin: const EdgeInsets.only(bottom: 10),
decoration: BoxDecoration(
color: selected ? UnionFlowColors.unionGreenPale : UnionFlowColors.surface,
border: Border.all(
color: selected ? UnionFlowColors.unionGreen : UnionFlowColors.border,
width: selected ? 2 : 1,
),
borderRadius: BorderRadius.circular(14),
boxShadow: selected ? UnionFlowColors.greenGlowShadow : UnionFlowColors.softShadow,
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
child: Row(
children: [
Icon(
selected ? Icons.check_circle_rounded : Icons.radio_button_unchecked,
color: selected ? UnionFlowColors.unionGreen : UnionFlowColors.border,
size: 22,
),
const SizedBox(width: 14),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
periode.label,
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 15,
color: selected
? UnionFlowColors.unionGreen
: UnionFlowColors.textPrimary,
),
),
if (periode.badge != null) ...[
const SizedBox(width: 8),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 8, vertical: 2),
decoration: BoxDecoration(
color: UnionFlowColors.successPale,
borderRadius: BorderRadius.circular(20),
),
child: Text(
periode.badge!,
style: const TextStyle(
fontSize: 11,
fontWeight: FontWeight.w700,
color: UnionFlowColors.success,
),
),
),
],
],
),
Text(
periode.duree,
style: const TextStyle(
fontSize: 12,
color: UnionFlowColors.textSecondary),
),
],
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
'~ ${_formatPrix(prixTotal)}',
style: TextStyle(
fontWeight: FontWeight.w800,
fontSize: 15,
color: selected
? UnionFlowColors.unionGreen
: UnionFlowColors.textPrimary,
),
),
const Text(
'FCFA',
style: TextStyle(
fontSize: 11,
color: UnionFlowColors.textSecondary),
),
],
),
],
),
),
),
);
}
String _formatPrix(double prix) {
if (prix >= 1000000) return '${(prix / 1000000).toStringAsFixed(1)} M';
if (prix >= 1000) {
final s = prix.toStringAsFixed(0);
if (s.length > 3) {
return '${s.substring(0, s.length - 3)} ${s.substring(s.length - 3)}';
}
}
return prix.toStringAsFixed(0);
}
}

468
lib/features/onboarding/presentation/pages/plan_selection_page.dart
View File

@@ -2,8 +2,10 @@ import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../bloc/onboarding_bloc.dart';
import '../../data/models/formule_model.dart';
import '../../../../shared/design_system/tokens/unionflow_colors.dart';
import 'onboarding_shared_widgets.dart';
/// Étape 1 — Choix de la formule (BASIC / STANDARD / PREMIUM) et de la plage de membres
/// Étape 1 — Choix de la taille de l'organisation et du niveau de formule
class PlanSelectionPage extends StatefulWidget {
final List<FormuleModel> formules;
const PlanSelectionPage({super.key, required this.formules});
@@ -17,121 +19,214 @@ class _PlanSelectionPageState extends State<PlanSelectionPage> {
String? _selectedFormule;
static const _plages = [
('PETITE', 'Petite', '1–100 membres'),
('MOYENNE', 'Moyenne', '101–500 membres'),
('GRANDE', 'Grande', '501–2 000 membres'),
('TRES_GRANDE', 'Très grande', '2 000+ membres'),
_Plage('PETITE', 'Petite', '1 – 100 membres', Icons.group_outlined, 'Associations naissantes et petites structures'),
_Plage('MOYENNE', 'Moyenne', '101 – 500 membres', Icons.groups_outlined, 'Associations établies en croissance'),
_Plage('GRANDE', 'Grande', '501 – 2 000 membres', Icons.corporate_fare_outlined, 'Grandes organisations régionales'),
_Plage('TRES_GRANDE', 'Très grande', '2 000+ membres', Icons.account_balance_outlined, 'Fédérations et réseaux nationaux'),
];
static const _formules = [
('BASIC', 'Basic', Icons.star_outline, Color(0xFF1976D2)),
('STANDARD', 'Standard', Icons.star_half, Color(0xFF388E3C)),
('PREMIUM', 'Premium', Icons.star, Color(0xFFF57C00)),
];
static const _formuleColors = {
'BASIC': UnionFlowColors.unionGreen,
'STANDARD': UnionFlowColors.gold,
'PREMIUM': UnionFlowColors.indigo,
};
static const _formuleIcons = {
'BASIC': Icons.star_border_rounded,
'STANDARD': Icons.star_half_rounded,
'PREMIUM': Icons.star_rounded,
};
static const _formuleFeatures = {
'BASIC': ['Gestion des membres', 'Cotisations de base', 'Rapports mensuels', 'Support email'],
'STANDARD': ['Tout Basic +', 'Événements & solidarité', 'Communication interne', 'Tableaux de bord avancés', 'Support prioritaire'],
'PREMIUM': ['Tout Standard +', 'Multi-organisations', 'Analytics temps réel', 'API ouverte', 'Support dédié 24/7'],
};
List<FormuleModel> get _filteredFormules => widget.formules
.where((f) => _selectedPlage == null || f.plage == _selectedPlage)
.toList()
..sort((a, b) => a.ordreAffichage.compareTo(b.ordreAffichage));
FormuleModel? get _selectedFormuleModel => _filteredFormules
.where((f) => f.code == _selectedFormule && f.plage == _selectedPlage)
.firstOrNull;
bool get _canProceed => _selectedPlage != null && _selectedFormule != null;
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Scaffold(
appBar: AppBar(
title: const Text('Choisir votre formule'),
automaticallyImplyLeading: false,
),
body: SingleChildScrollView(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Indicateur d'étapes
_StepIndicator(current: 1, total: 3),
const SizedBox(height: 24),
Text('Taille de votre organisation',
style: theme.textTheme.titleMedium),
const SizedBox(height: 8),
// Sélecteur de plage
Wrap(
spacing: 8,
runSpacing: 8,
children: _plages.map((p) {
final (code, label, sublabel) = p;
final selected = _selectedPlage == code;
return ChoiceChip(
label: Column(
children: [
Text(label,
style: TextStyle(
fontWeight: FontWeight.bold,
color: selected ? Colors.white : null)),
Text(sublabel,
style: TextStyle(
fontSize: 11,
color: selected
? Colors.white70
: Colors.grey[600])),
],
backgroundColor: UnionFlowColors.background,
body: Column(
children: [
OnboardingStepHeader(
step: 1,
total: 3,
title: 'Choisissez votre formule',
subtitle: 'Sélectionnez la taille de votre organisation\npuis le niveau d\'abonnement adapté.',
),
Expanded(
child: SingleChildScrollView(
padding: const EdgeInsets.fromLTRB(20, 8, 20, 100),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Step 1a: Taille de l'organisation
OnboardingSectionTitle(
icon: Icons.people_alt_outlined,
title: 'Taille de votre organisation',
),
selected: selected,
onSelected: (_) => setState(() {
_selectedPlage = code;
_selectedFormule = null;
}),
padding:
const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
);
}).toList(),
),
const SizedBox(height: 12),
...(_plages.map((p) => _PlageCard(
plage: p,
selected: _selectedPlage == p.code,
onTap: () => setState(() {
_selectedPlage = p.code;
_selectedFormule = null;
}),
))),
if (_selectedPlage != null) ...[
const SizedBox(height: 24),
Text('Niveau de formule', style: theme.textTheme.titleMedium),
const SizedBox(height: 8),
// Cartes de formules
..._formules.map((f) {
final (code, label, icon, color) = f;
final formule = _filteredFormules
.where((fm) => fm.code == code)
.firstOrNull;
if (formule == null) return const SizedBox.shrink();
final selected = _selectedFormule == code;
return _FormuleCard(
formule: formule,
label: label,
icon: icon,
color: color,
selected: selected,
onTap: () => setState(() => _selectedFormule = code),
);
}),
],
const SizedBox(height: 32),
],
if (_selectedPlage != null) ...[
const SizedBox(height: 28),
OnboardingSectionTitle(
icon: Icons.workspace_premium_outlined,
title: 'Niveau d\'abonnement',
),
const SizedBox(height: 12),
..._filteredFormules.map((f) => _FormuleCard(
formule: f,
color: _formuleColors[f.code] ?? UnionFlowColors.unionGreen,
icon: _formuleIcons[f.code] ?? Icons.star_border_rounded,
features: _formuleFeatures[f.code] ?? [],
selected: _selectedFormule == f.code,
onTap: () => setState(() => _selectedFormule = f.code),
)),
],
],
),
),
),
],
),
bottomNavigationBar: OnboardingBottomBar(
enabled: _canProceed,
label: 'Choisir la période',
onPressed: () => context.read<OnboardingBloc>().add(
OnboardingFormuleSelected(
codeFormule: _selectedFormule!,
plage: _selectedPlage!,
),
),
),
bottomNavigationBar: Padding(
padding: const EdgeInsets.all(16),
child: ElevatedButton(
onPressed: _selectedPlage != null && _selectedFormule != null
? () => context.read<OnboardingBloc>().add(
OnboardingFormuleSelected(
codeFormule: _selectedFormule!,
plage: _selectedPlage!,
),
)
: null,
style: ElevatedButton.styleFrom(
minimumSize: const Size.fromHeight(48),
);
}
}
// ─── Widgets locaux ──────────────────────────────────────────────────────────
class _Plage {
final String code, label, sublabel, description;
final IconData icon;
const _Plage(this.code, this.label, this.sublabel, this.icon, this.description);
}
class _PlageCard extends StatelessWidget {
final _Plage plage;
final bool selected;
final VoidCallback onTap;
const _PlageCard({required this.plage, required this.selected, required this.onTap});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onTap,
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
margin: const EdgeInsets.only(bottom: 10),
decoration: BoxDecoration(
color: selected ? UnionFlowColors.unionGreenPale : UnionFlowColors.surface,
border: Border.all(
color: selected ? UnionFlowColors.unionGreen : UnionFlowColors.border,
width: selected ? 2 : 1,
),
borderRadius: BorderRadius.circular(14),
boxShadow: selected ? UnionFlowColors.greenGlowShadow : UnionFlowColors.softShadow,
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
child: Row(
children: [
Container(
width: 44,
height: 44,
decoration: BoxDecoration(
color: selected
? UnionFlowColors.unionGreen
: UnionFlowColors.unionGreenPale,
borderRadius: BorderRadius.circular(10),
),
child: Icon(plage.icon,
color: selected ? Colors.white : UnionFlowColors.unionGreen,
size: 22),
),
const SizedBox(width: 14),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
plage.label,
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 15,
color: selected
? UnionFlowColors.unionGreen
: UnionFlowColors.textPrimary,
),
),
const SizedBox(width: 8),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 8, vertical: 2),
decoration: BoxDecoration(
color: selected
? UnionFlowColors.unionGreen.withOpacity(0.15)
: UnionFlowColors.surfaceVariant,
borderRadius: BorderRadius.circular(20),
),
child: Text(
plage.sublabel,
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.w500,
color: selected
? UnionFlowColors.unionGreen
: UnionFlowColors.textSecondary,
),
),
),
],
),
const SizedBox(height: 2),
Text(
plage.description,
style: const TextStyle(
fontSize: 12,
color: UnionFlowColors.textSecondary),
),
],
),
),
Icon(
selected
? Icons.check_circle_rounded
: Icons.radio_button_unchecked,
color: selected
? UnionFlowColors.unionGreen
: UnionFlowColors.border,
size: 22,
),
],
),
child: const Text('Continuer'),
),
),
);
@@ -140,17 +235,17 @@ class _PlanSelectionPageState extends State<PlanSelectionPage> {
class _FormuleCard extends StatelessWidget {
final FormuleModel formule;
final String label;
final IconData icon;
final Color color;
final IconData icon;
final List<String> features;
final bool selected;
final VoidCallback onTap;
const _FormuleCard({
required this.formule,
required this.label,
required this.icon,
required this.color,
required this.icon,
required this.features,
required this.selected,
required this.onTap,
});
@@ -161,92 +256,125 @@ class _FormuleCard extends StatelessWidget {
onTap: onTap,
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
margin: const EdgeInsets.only(bottom: 8),
margin: const EdgeInsets.only(bottom: 12),
decoration: BoxDecoration(
color: selected ? color.withOpacity(0.1) : Colors.white,
color: UnionFlowColors.surface,
border: Border.all(
color: selected ? color : Colors.grey[300]!,
width: selected ? 2 : 1,
color: selected ? color : UnionFlowColors.border,
width: selected ? 2.5 : 1,
),
borderRadius: BorderRadius.circular(12),
borderRadius: BorderRadius.circular(16),
boxShadow: selected
? [
BoxShadow(
color: color.withOpacity(0.2),
blurRadius: 20,
offset: const Offset(0, 8),
)
]
: UnionFlowColors.softShadow,
),
child: Padding(
padding: const EdgeInsets.all(16),
child: Row(
children: [
Icon(icon, color: color, size: 28),
const SizedBox(width: 16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(label,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
color: selected ? color : null)),
if (formule.description != null)
Text(formule.description!,
style: const TextStyle(fontSize: 12, color: Colors.grey)),
],
),
child: Column(
children: [
// Header
Container(
padding: const EdgeInsets.fromLTRB(16, 14, 16, 14),
decoration: BoxDecoration(
color: selected ? color : color.withOpacity(0.06),
borderRadius: const BorderRadius.vertical(top: Radius.circular(14)),
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
child: Row(
children: [
Text(
'${_formatPrix(formule.prixMensuel)} FCFA',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15,
color: color),
Icon(icon,
color: selected ? Colors.white : color, size: 24),
const SizedBox(width: 10),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
formule.libelle,
style: TextStyle(
color: selected ? Colors.white : color,
fontWeight: FontWeight.w800,
fontSize: 16,
),
),
if (formule.description != null)
Text(
formule.description!,
style: TextStyle(
color: selected
? Colors.white70
: UnionFlowColors.textSecondary,
fontSize: 12,
),
),
],
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
_formatPrix(formule.prixMensuel),
style: TextStyle(
color: selected ? Colors.white : color,
fontWeight: FontWeight.w900,
fontSize: 20,
),
),
Text(
'FCFA / mois',
style: TextStyle(
color: selected
? Colors.white70
: UnionFlowColors.textSecondary,
fontSize: 11,
),
),
],
),
const Text('/mois', style: TextStyle(fontSize: 11, color: Colors.grey)),
],
),
const SizedBox(width: 8),
Icon(
selected ? Icons.check_circle : Icons.radio_button_unchecked,
color: selected ? color : Colors.grey,
),
// Features
Padding(
padding: const EdgeInsets.fromLTRB(16, 12, 16, 14),
child: Column(
children: features
.map((f) => Padding(
padding: const EdgeInsets.only(bottom: 6),
child: Row(
children: [
Icon(Icons.check_circle_outline_rounded,
size: 16, color: color),
const SizedBox(width: 8),
Text(f,
style: const TextStyle(
fontSize: 13,
color: UnionFlowColors.textPrimary)),
],
),
))
.toList(),
),
],
),
),
],
),
),
);
}
String _formatPrix(double prix) {
if (prix >= 1000000) {
return '${(prix / 1000000).toStringAsFixed(1)} M';
}
if (prix >= 1000) {
return '${(prix / 1000).toStringAsFixed(0)} 000';
final k = (prix / 1000).toStringAsFixed(0);
return '$k 000';
}
return prix.toStringAsFixed(0);
}
}
class _StepIndicator extends StatelessWidget {
final int current;
final int total;
const _StepIndicator({required this.current, required this.total});
@override
Widget build(BuildContext context) {
return Row(
children: List.generate(total, (i) {
final active = i + 1 <= current;
return Expanded(
child: Container(
height: 4,
margin: EdgeInsets.only(right: i < total - 1 ? 4 : 0),
decoration: BoxDecoration(
color: active
? Theme.of(context).primaryColor
: Colors.grey[300],
borderRadius: BorderRadius.circular(2),
),
),
);
}),
);
}
}

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

@@ -2,8 +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/unionflow_colors.dart';
/// Étape 3 — Récapitulatif avant paiement
/// Étape 3 — Récapitulatif détaillé avant paiement
class SubscriptionSummaryPage extends StatelessWidget {
final SouscriptionStatusModel souscription;
@@ -11,160 +12,507 @@ class SubscriptionSummaryPage extends StatelessWidget {
static const _periodeLabels = {
'MENSUEL': 'Mensuel',
'TRIMESTRIEL': 'Trimestriel (–5%)',
'SEMESTRIEL': 'Semestriel (–10%)',
'ANNUEL': 'Annuel (–20%)',
'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',
'MUTUELLE': 'Mutuelle (santé, fonctionnaires…)',
'COOPERATIVE': 'Coopérative / Microfinance',
'FEDERATION': 'Fédération / Grande ONG',
};
static const _plageLabels = {
'PETITE': '1–100 membres',
'MOYENNE': '101–500 membres',
'GRANDE': '501–2 000 membres',
'TRES_GRANDE': '2 000+ membres',
};
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final montant = souscription.montantTotal ?? 0;
final remise = _periodeRemises[souscription.typePeriode];
return Scaffold(
appBar: AppBar(
title: const Text('Récapitulatif de la souscription'),
automaticallyImplyLeading: false,
),
body: SingleChildScrollView(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// En-tête
Container(
width: double.infinity,
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [theme.primaryColor, theme.primaryColor.withOpacity(0.7)],
backgroundColor: UnionFlowColors.background,
body: Column(
children: [
// Header hero
Container(
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
Row(
children: List.generate(3, (i) => Expanded(
child: Container(
height: 4,
margin: EdgeInsets.only(right: i < 2 ? 6 : 0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(2),
),
),
)),
),
const SizedBox(height: 6),
Align(
alignment: Alignment.centerLeft,
child: Text(
'Étape 3 sur 3',
style: TextStyle(
color: Colors.white.withOpacity(0.75),
fontSize: 12,
fontWeight: FontWeight.w500,
),
),
),
const SizedBox(height: 20),
// Montant principal
Container(
width: 90,
height: 90,
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.15),
shape: BoxShape.circle,
border: Border.all(
color: Colors.white.withOpacity(0.4), width: 2),
),
child: const Icon(Icons.receipt_long_rounded,
color: Colors.white, size: 44),
),
const SizedBox(height: 14),
Text(
_formatPrix(montant),
style: const TextStyle(
color: Colors.white,
fontSize: 40,
fontWeight: FontWeight.w900,
letterSpacing: -1,
),
),
const Text(
'FCFA à régler',
style: TextStyle(
color: Colors.white70,
fontSize: 14,
fontWeight: FontWeight.w500),
),
if (remise != null) ...[
const SizedBox(height: 8),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 12, vertical: 4),
decoration: BoxDecoration(
color: UnionFlowColors.gold.withOpacity(0.3),
borderRadius: BorderRadius.circular(20),
border: Border.all(
color: UnionFlowColors.goldLight.withOpacity(0.5)),
),
child: Text(
remise,
style: const TextStyle(
color: UnionFlowColors.goldLight,
fontSize: 12,
fontWeight: FontWeight.w700,
),
),
),
],
],
),
borderRadius: BorderRadius.circular(16),
),
),
),
// Content
Expanded(
child: SingleChildScrollView(
padding: const EdgeInsets.fromLTRB(20, 20, 20, 100),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Icon(Icons.receipt_long, color: Colors.white, size: 40),
const SizedBox(height: 8),
Text(
'${montant.toStringAsFixed(0)} FCFA',
style: const TextStyle(
color: Colors.white,
fontSize: 32,
fontWeight: FontWeight.bold,
// Organisation
if (souscription.organisationNom != null) ...[
_DetailCard(
title: 'Organisation',
icon: Icons.business_rounded,
iconColor: UnionFlowColors.indigo,
items: [
_DetailItem(
label: 'Nom',
value: souscription.organisationNom!,
bold: true),
_DetailItem(
label: 'Type',
value: _orgLabels[souscription.typeOrganisation] ??
souscription.typeOrganisation),
],
),
const SizedBox(height: 14),
],
// Formule
_DetailCard(
title: 'Formule souscrite',
icon: Icons.workspace_premium_rounded,
iconColor: UnionFlowColors.gold,
items: [
_DetailItem(
label: 'Niveau',
value: souscription.typeFormule,
bold: true),
_DetailItem(
label: 'Taille',
value: _plageLabels[souscription.plageMembres] ??
souscription.plageLibelle),
if (souscription.montantMensuelBase != null)
_DetailItem(
label: 'Prix de base',
value:
'${_formatPrix(souscription.montantMensuelBase!)} FCFA/mois'),
],
),
const SizedBox(height: 14),
// Facturation
_DetailCard(
title: 'Facturation',
icon: Icons.calendar_today_rounded,
iconColor: UnionFlowColors.unionGreen,
items: [
_DetailItem(
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!)),
],
],
),
const SizedBox(height: 14),
// Montant total
Container(
padding: const EdgeInsets.all(18),
decoration: BoxDecoration(
color: UnionFlowColors.goldPale,
borderRadius: BorderRadius.circular(16),
border: Border.all(
color: UnionFlowColors.gold.withOpacity(0.4)),
boxShadow: UnionFlowColors.goldGlowShadow,
),
child: Row(
children: [
Container(
width: 48,
height: 48,
decoration: BoxDecoration(
gradient: UnionFlowColors.goldGradient,
borderRadius: BorderRadius.circular(12),
),
child: const Icon(Icons.monetization_on_rounded,
color: Colors.white, size: 26),
),
const SizedBox(width: 14),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Total à payer',
style: TextStyle(
color: UnionFlowColors.textSecondary,
fontSize: 13),
),
Text(
'${_formatPrix(montant)} FCFA',
style: const TextStyle(
color: UnionFlowColors.textPrimary,
fontSize: 22,
fontWeight: FontWeight.w900,
),
),
],
),
),
],
),
),
Text(
'à régler par Wave Mobile Money',
style: TextStyle(color: Colors.white.withOpacity(0.85)),
const SizedBox(height: 20),
// Notes importantes
_NoteBox(
icon: Icons.security_rounded,
iconColor: UnionFlowColors.unionGreen,
backgroundColor: UnionFlowColors.unionGreenPale,
borderColor: UnionFlowColors.unionGreen.withOpacity(0.25),
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.',
),
const SizedBox(height: 10),
_NoteBox(
icon: Icons.bolt_rounded,
iconColor: UnionFlowColors.amber,
backgroundColor: const Color(0xFFFFFBF0),
borderColor: UnionFlowColors.amber.withOpacity(0.3),
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.',
),
const SizedBox(height: 10),
_NoteBox(
icon: Icons.support_agent_rounded,
iconColor: UnionFlowColors.info,
backgroundColor: UnionFlowColors.infoPale,
borderColor: UnionFlowColors.info.withOpacity(0.2),
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.',
),
],
),
),
const SizedBox(height: 24),
Text('Détails de votre souscription', style: theme.textTheme.titleMedium),
const SizedBox(height: 12),
_InfoRow(label: 'Organisation', value: souscription.organisationNom ?? '—'),
_InfoRow(label: 'Formule', value: souscription.typeFormule),
_InfoRow(label: 'Plage de membres', value: souscription.plageLibelle),
_InfoRow(
label: 'Période',
value: _periodeLabels[souscription.typePeriode] ?? souscription.typePeriode,
),
],
),
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),
),
_InfoRow(
label: 'Type d\'organisation',
value: _orgLabels[souscription.typeOrganisation] ?? souscription.typeOrganisation,
),
if (souscription.coefficientApplique != null)
_InfoRow(
label: 'Coefficient appliqué',
value: '×${souscription.coefficientApplique!.toStringAsFixed(2)}',
),
const Divider(height: 32),
_InfoRow(
label: 'Total à payer',
value: '${montant.toStringAsFixed(0)} FCFA',
bold: true,
),
const SizedBox(height: 24),
Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: Colors.blue[50],
borderRadius: BorderRadius.circular(8),
),
child: const Row(
children: [
Icon(Icons.info_outline, color: Colors.blue, size: 20),
SizedBox(width: 8),
Expanded(
child: Text(
'Vous allez être redirigé vers Wave pour effectuer le paiement. '
'Votre accès sera activé après validation par un administrateur.',
style: TextStyle(fontSize: 13, color: Colors.blue),
),
),
],
),
),
const SizedBox(height: 32),
],
),
),
bottomNavigationBar: Padding(
padding: const EdgeInsets.all(16),
child: ElevatedButton.icon(
onPressed: () =>
context.read<OnboardingBloc>().add(const OnboardingPaiementInitie()),
icon: const Icon(Icons.payment),
label: const Text('Payer avec Wave'),
style: ElevatedButton.styleFrom(
minimumSize: const Size.fromHeight(52),
backgroundColor: const Color(0xFF00B9F1), // Couleur Wave
foregroundColor: Colors.white,
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,
),
),
),
),
);
}
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)}';
}
return s;
}
String _formatDate(DateTime date) {
return '${date.day.toString().padLeft(2, '0')}/${date.month.toString().padLeft(2, '0')}/${date.year}';
}
}
class _InfoRow extends StatelessWidget {
// ─── Widgets locaux ──────────────────────────────────────────────────────────
class _DetailItem {
final String label;
final String value;
final bool bold;
const _DetailItem(
{required this.label, required this.value, this.bold = false});
}
const _InfoRow({required this.label, required this.value, this.bold = false});
class _DetailCard extends StatelessWidget {
final String title;
final IconData icon;
final Color iconColor;
final List<_DetailItem> items;
const _DetailCard({
required this.title,
required this.icon,
required this.iconColor,
required this.items,
});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 6),
child: Row(
return Container(
decoration: BoxDecoration(
color: UnionFlowColors.surface,
borderRadius: BorderRadius.circular(16),
boxShadow: UnionFlowColors.softShadow,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: 160,
child: Text(label,
style: const TextStyle(color: Colors.grey, fontSize: 14)),
Padding(
padding: const EdgeInsets.fromLTRB(16, 14, 16, 10),
child: Row(
children: [
Container(
width: 34,
height: 34,
decoration: BoxDecoration(
color: iconColor.withOpacity(0.1),
borderRadius: BorderRadius.circular(8),
),
child: Icon(icon, color: iconColor, size: 18),
),
const SizedBox(width: 10),
Text(
title,
style: const TextStyle(
fontWeight: FontWeight.w700,
fontSize: 14,
color: UnionFlowColors.textPrimary,
),
),
],
),
),
Expanded(
child: Text(
value,
style: TextStyle(
fontWeight: bold ? FontWeight.bold : FontWeight.normal,
fontSize: bold ? 16 : 14,
),
const Divider(height: 1, color: UnionFlowColors.border),
Padding(
padding: const EdgeInsets.fromLTRB(16, 12, 16, 14),
child: Column(
children: items.map((item) => Padding(
padding: const EdgeInsets.only(bottom: 8),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: 120,
child: Text(
item.label,
style: const TextStyle(
color: UnionFlowColors.textSecondary,
fontSize: 13),
),
),
Expanded(
child: Text(
item.value,
style: TextStyle(
color: UnionFlowColors.textPrimary,
fontSize: 13,
fontWeight: item.bold
? FontWeight.w700
: FontWeight.w500,
),
),
),
],
),
)).toList(),
),
),
],
),
);
}
}
class _NoteBox extends StatelessWidget {
final IconData icon;
final Color iconColor;
final Color backgroundColor;
final Color borderColor;
final String title;
final String message;
const _NoteBox({
required this.icon,
required this.iconColor,
required this.backgroundColor,
required this.borderColor,
required this.title,
required this.message,
});
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(14),
decoration: BoxDecoration(
color: backgroundColor,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: borderColor),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(icon, color: iconColor, size: 20),
const SizedBox(width: 10),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
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),
),
],
),
),
],

422
lib/features/onboarding/presentation/pages/wave_payment_page.dart
View File

@@ -3,6 +3,8 @@ import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:url_launcher/url_launcher.dart';
import '../../bloc/onboarding_bloc.dart';
import '../../data/models/souscription_status_model.dart';
import '../../../../shared/design_system/tokens/unionflow_colors.dart';
import '../../../../core/config/environment.dart';
/// Étape 4 — Lancement du paiement Wave + attente du retour
class WavePaymentPage extends StatefulWidget {
@@ -23,6 +25,13 @@ class _WavePaymentPageState extends State<WavePaymentPage>
with WidgetsBindingObserver {
bool _paymentLaunched = false;
bool _appResumed = false;
bool _simulating = false;
/// En dev/mock, la session Wave ne peut pas s'ouvrir — on simule directement.
bool get _isMock =>
widget.waveLaunchUrl.contains('mock') ||
widget.waveLaunchUrl.contains('localhost') ||
!AppConfig.isProd;
@override
void initState() {
@@ -38,14 +47,24 @@ class _WavePaymentPageState extends State<WavePaymentPage>
@override
void didChangeAppLifecycleState(AppLifecycleState state) {
// Quand l'utilisateur revient dans l'app après Wave
if (state == AppLifecycleState.resumed && _paymentLaunched && !_appResumed) {
_appResumed = true;
context.read<OnboardingBloc>().add(const OnboardingRetourDepuisWave());
}
}
Future<void> _lancerWave() async {
Future<void> _lancerOuSimuler() async {
if (_isMock) {
// Mode dev/mock : simuler le paiement directement
setState(() => _simulating = true);
await Future.delayed(const Duration(milliseconds: 800));
if (mounted) {
context.read<OnboardingBloc>().add(const OnboardingRetourDepuisWave());
}
return;
}
// Mode prod : ouvrir Wave
final uri = Uri.parse(widget.waveLaunchUrl);
if (await canLaunchUrl(uri)) {
setState(() => _paymentLaunched = true);
@@ -54,8 +73,10 @@ class _WavePaymentPageState extends State<WavePaymentPage>
if (mounted) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Impossible d\'ouvrir Wave. Vérifiez que l\'application est installée.'),
backgroundColor: Colors.red,
content: Text(
'Impossible d\'ouvrir Wave. Vérifiez que l\'application est installée.'),
backgroundColor: UnionFlowColors.error,
behavior: SnackBarBehavior.floating,
),
);
}
@@ -65,81 +86,344 @@ class _WavePaymentPageState extends State<WavePaymentPage>
@override
Widget build(BuildContext context) {
final montant = widget.souscription.montantTotal ?? 0;
const waveBlue = Color(0xFF00B9F1);
return Scaffold(
appBar: AppBar(
title: const Text('Paiement Wave'),
automaticallyImplyLeading: false,
),
body: Padding(
padding: const EdgeInsets.all(24),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// Logo Wave stylisé
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: const Color(0xFF00B9F1),
borderRadius: BorderRadius.circular(24),
backgroundColor: UnionFlowColors.background,
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(24),
child: Column(
children: [
Row(
children: [
if (!_paymentLaunched && !_simulating)
IconButton(
onPressed: () => Navigator.of(context).maybePop(),
icon: const Icon(Icons.arrow_back_rounded),
color: UnionFlowColors.textSecondary,
),
const Spacer(),
if (_isMock)
Container(
padding: const EdgeInsets.symmetric(
horizontal: 10, vertical: 4),
decoration: BoxDecoration(
color: UnionFlowColors.warningPale,
borderRadius: BorderRadius.circular(20),
border: Border.all(
color: UnionFlowColors.warning.withOpacity(0.4)),
),
child: const Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.science_rounded,
size: 13, color: UnionFlowColors.warning),
SizedBox(width: 4),
Text(
'Mode dev',
style: TextStyle(
color: UnionFlowColors.warning,
fontSize: 11,
fontWeight: FontWeight.w700,
),
),
],
),
)
else
Container(
padding: const EdgeInsets.symmetric(
horizontal: 12, vertical: 4),
decoration: BoxDecoration(
color: waveBlue.withOpacity(0.1),
borderRadius: BorderRadius.circular(20),
),
child: const Text(
'Wave Mobile Money',
style: TextStyle(
color: waveBlue,
fontSize: 12,
fontWeight: FontWeight.w700,
),
),
),
],
),
child: const Icon(Icons.waves, color: Colors.white, size: 52),
),
const SizedBox(height: 32),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
if (_simulating) ...[
// Animation de simulation
Container(
width: 110,
height: 110,
decoration: BoxDecoration(
gradient: const LinearGradient(
colors: [Color(0xFF00B9F1), Color(0xFF0096C7)],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(28),
boxShadow: [
BoxShadow(
color: waveBlue.withOpacity(0.35),
blurRadius: 24,
offset: const Offset(0, 10),
),
],
),
child: const Center(
child: SizedBox(
width: 48,
height: 48,
child: CircularProgressIndicator(
color: Colors.white,
strokeWidth: 3,
),
),
),
),
const SizedBox(height: 28),
const Text(
'Simulation du paiement…',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w700,
color: UnionFlowColors.textPrimary,
),
),
const SizedBox(height: 8),
const Text(
'Confirmation en cours',
style: TextStyle(
color: UnionFlowColors.textSecondary, fontSize: 14),
),
] else ...[
// Logo Wave
Container(
width: 110,
height: 110,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(28),
border: Border.all(color: UnionFlowColors.border),
boxShadow: [
BoxShadow(
color: waveBlue.withOpacity(0.2),
blurRadius: 24,
offset: const Offset(0, 10),
),
],
),
padding: const EdgeInsets.all(16),
child: Image.asset(
'assets/images/payment_methods/wave/logo.png',
fit: BoxFit.contain,
errorBuilder: (_, __, ___) => const Icon(
Icons.waves_rounded,
color: waveBlue,
size: 52,
),
),
),
const SizedBox(height: 28),
const Text(
'Paiement par Wave',
style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
),
const SizedBox(height: 8),
Text(
'Montant : ${montant.toStringAsFixed(0)} FCFA',
style: const TextStyle(fontSize: 18, color: Colors.grey),
),
const SizedBox(height: 32),
Text(
_paymentLaunched
? 'Paiement en cours…'
: _isMock
? 'Simuler le paiement'
: 'Prêt à payer',
style: const TextStyle(
fontSize: 24,
fontWeight: FontWeight.w800,
color: UnionFlowColors.textPrimary,
),
),
const SizedBox(height: 8),
if (!_paymentLaunched) ...[
const Text(
'Cliquez sur le bouton ci-dessous pour ouvrir Wave et effectuer votre paiement.',
textAlign: TextAlign.center,
style: TextStyle(color: Colors.grey),
),
const SizedBox(height: 24),
ElevatedButton.icon(
onPressed: _lancerWave,
icon: const Icon(Icons.open_in_new),
label: const Text('Ouvrir Wave'),
style: ElevatedButton.styleFrom(
minimumSize: const Size(200, 52),
backgroundColor: const Color(0xFF00B9F1),
foregroundColor: Colors.white,
// Montant
RichText(
text: TextSpan(
children: [
TextSpan(
text: '${_formatPrix(montant)} ',
style: const TextStyle(
fontSize: 32,
fontWeight: FontWeight.w900,
color: waveBlue,
letterSpacing: -0.5,
),
),
const TextSpan(
text: 'FCFA',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w700,
color: UnionFlowColors.textSecondary,
),
),
],
),
),
if (widget.souscription.organisationNom != null) ...[
const SizedBox(height: 4),
Text(
widget.souscription.organisationNom!,
style: const TextStyle(
color: UnionFlowColors.textSecondary,
fontSize: 13),
),
],
const SizedBox(height: 32),
if (!_paymentLaunched) ...[
if (_isMock)
Container(
margin: const EdgeInsets.only(bottom: 20),
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: UnionFlowColors.warningPale,
borderRadius: BorderRadius.circular(10),
border: Border.all(
color:
UnionFlowColors.warning.withOpacity(0.3)),
),
child: const Row(
children: [
Icon(Icons.science_outlined,
color: UnionFlowColors.warning, size: 16),
SizedBox(width: 8),
Expanded(
child: Text(
'Environnement de développement — le paiement sera simulé automatiquement.',
style: TextStyle(
fontSize: 12,
color: UnionFlowColors.warning,
height: 1.4),
),
),
],
),
),
SizedBox(
width: double.infinity,
child: ElevatedButton.icon(
onPressed: _lancerOuSimuler,
icon: Icon(_isMock
? Icons.play_circle_rounded
: Icons.open_in_new_rounded),
label: Text(
_isMock
? 'Simuler le paiement Wave'
: 'Ouvrir Wave',
style: const TextStyle(
fontSize: 16, fontWeight: FontWeight.w700),
),
style: ElevatedButton.styleFrom(
backgroundColor: waveBlue,
foregroundColor: Colors.white,
padding:
const EdgeInsets.symmetric(vertical: 15),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(14)),
shadowColor: waveBlue.withOpacity(0.4),
elevation: 3,
),
),
),
] else ...[
// Paiement lancé en prod
Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: UnionFlowColors.surface,
borderRadius: BorderRadius.circular(16),
boxShadow: UnionFlowColors.softShadow,
),
child: Column(
children: [
const SizedBox(
width: 40,
height: 40,
child: CircularProgressIndicator(
color: waveBlue,
strokeWidth: 3,
),
),
const SizedBox(height: 16),
const Text(
'Paiement en cours dans Wave',
style: TextStyle(
fontWeight: FontWeight.w700,
color: UnionFlowColors.textPrimary,
),
),
const SizedBox(height: 6),
const Text(
'Revenez dans l\'app une fois\nvotre paiement confirmé.',
textAlign: TextAlign.center,
style: TextStyle(
color: UnionFlowColors.textSecondary,
fontSize: 13,
height: 1.4),
),
],
),
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: ElevatedButton.icon(
onPressed: () => context
.read<OnboardingBloc>()
.add(const OnboardingRetourDepuisWave()),
icon: const Icon(
Icons.check_circle_outline_rounded),
label: const Text(
'J\'ai effectué le paiement',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w700),
),
style: ElevatedButton.styleFrom(
backgroundColor: UnionFlowColors.unionGreen,
foregroundColor: Colors.white,
padding:
const EdgeInsets.symmetric(vertical: 14),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(14)),
),
),
),
const SizedBox(height: 10),
TextButton.icon(
onPressed: _lancerOuSimuler,
icon: const Icon(Icons.refresh_rounded, size: 18),
label: const Text('Rouvrir Wave'),
style: TextButton.styleFrom(
foregroundColor: waveBlue),
),
],
],
],
),
),
] else ...[
const Icon(Icons.hourglass_top, size: 40, color: Colors.orange),
const SizedBox(height: 16),
const Text(
'Paiement en cours dans Wave…\nRevenez ici une fois le paiement effectué.',
textAlign: TextAlign.center,
style: TextStyle(color: Colors.grey),
),
const SizedBox(height: 24),
OutlinedButton(
onPressed: () => context.read<OnboardingBloc>().add(
const OnboardingRetourDepuisWave(),
),
child: const Text('J\'ai effectué le paiement'),
),
const SizedBox(height: 12),
TextButton(
onPressed: _lancerWave,
child: const Text('Rouvrir Wave'),
),
],
],
),
),
),
);
}
String _formatPrix(double prix) {
if (prix >= 1000000) return '${(prix / 1000000).toStringAsFixed(1)} M';
final s = prix.toStringAsFixed(0);
if (s.length > 3) {
return '${s.substring(0, s.length - 3)} ${s.substring(s.length - 3)}';
}
return s;
}
}