feat(onboarding): UI/UX polish + mapping typeOrg + gestion erreur paiement Wave
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
@@ -1,4 +1,5 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../../../shared/design_system/tokens/app_colors.dart';
|
||||
import '../../../../shared/design_system/tokens/unionflow_colors.dart';
|
||||
|
||||
/// Header commun à toutes les étapes d'onboarding
|
||||
@@ -19,9 +20,7 @@ class OnboardingStepHeader extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
decoration: const BoxDecoration(
|
||||
gradient: UnionFlowColors.primaryGradient,
|
||||
),
|
||||
decoration: const BoxDecoration(gradient: UnionFlowColors.primaryGradient),
|
||||
child: SafeArea(
|
||||
bottom: false,
|
||||
child: Padding(
|
||||
@@ -29,6 +28,7 @@ class OnboardingStepHeader extends StatelessWidget {
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Barre de progression segmentée
|
||||
Row(
|
||||
children: List.generate(total, (i) {
|
||||
final done = i < step;
|
||||
@@ -37,9 +37,7 @@ class OnboardingStepHeader extends StatelessWidget {
|
||||
height: 4,
|
||||
margin: EdgeInsets.only(right: i < total - 1 ? 6 : 0),
|
||||
decoration: BoxDecoration(
|
||||
color: done
|
||||
? Colors.white
|
||||
: Colors.white.withOpacity(0.3),
|
||||
color: done ? Colors.white : Colors.white.withOpacity(0.3),
|
||||
borderRadius: BorderRadius.circular(2),
|
||||
),
|
||||
),
|
||||
@@ -81,88 +79,129 @@ class OnboardingStepHeader extends StatelessWidget {
|
||||
}
|
||||
}
|
||||
|
||||
/// Titre de section avec icône
|
||||
/// Titre de section avec icône — dark/light adaptatif
|
||||
class OnboardingSectionTitle extends StatelessWidget {
|
||||
final IconData icon;
|
||||
final String title;
|
||||
final String? badge; // Ex: "Étape 1 complète ✓"
|
||||
|
||||
const OnboardingSectionTitle({
|
||||
super.key,
|
||||
required this.icon,
|
||||
required this.title,
|
||||
this.badge,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final isDark = Theme.of(context).brightness == Brightness.dark;
|
||||
final textColor = isDark ? AppColors.textPrimaryDark : AppColors.textPrimary;
|
||||
|
||||
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,
|
||||
Expanded(
|
||||
child: Text(
|
||||
title,
|
||||
style: TextStyle(
|
||||
color: textColor,
|
||||
fontWeight: FontWeight.w700,
|
||||
fontSize: 16,
|
||||
),
|
||||
),
|
||||
),
|
||||
if (badge != null)
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
|
||||
decoration: BoxDecoration(
|
||||
color: UnionFlowColors.unionGreen.withOpacity(0.12),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Text(
|
||||
badge!,
|
||||
style: const TextStyle(
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: UnionFlowColors.unionGreen,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Barre de bouton principale en bas de page
|
||||
/// Barre de bouton principale en bas de page — dark/light adaptatif
|
||||
class OnboardingBottomBar extends StatelessWidget {
|
||||
final bool enabled;
|
||||
final String label;
|
||||
final VoidCallback onPressed;
|
||||
final String? hint; // Texte optionnel au-dessus du bouton
|
||||
|
||||
const OnboardingBottomBar({
|
||||
super.key,
|
||||
required this.enabled,
|
||||
required this.label,
|
||||
required this.onPressed,
|
||||
this.hint,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final isDark = Theme.of(context).brightness == Brightness.dark;
|
||||
final bgColor = isDark ? AppColors.surfaceDark : AppColors.surface;
|
||||
final borderColor = isDark ? AppColors.borderDark : AppColors.border;
|
||||
final hintColor = isDark ? AppColors.textSecondaryDark : AppColors.textSecondary;
|
||||
|
||||
return Container(
|
||||
padding: EdgeInsets.fromLTRB(
|
||||
20, 12, 20, MediaQuery.of(context).padding.bottom + 12),
|
||||
decoration: BoxDecoration(
|
||||
color: UnionFlowColors.surface,
|
||||
color: bgColor,
|
||||
border: Border(top: BorderSide(color: borderColor, width: 0.5)),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.08),
|
||||
blurRadius: 12,
|
||||
offset: const Offset(0, -4),
|
||||
),
|
||||
BoxShadow(color: AppColors.shadow, 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),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
if (hint != null) ...[
|
||||
Text(
|
||||
hint!,
|
||||
style: TextStyle(fontSize: 11, color: hintColor),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
elevation: enabled ? 2 : 0,
|
||||
shadowColor: UnionFlowColors.unionGreen.withOpacity(0.4),
|
||||
),
|
||||
child: Text(
|
||||
label,
|
||||
style: const TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w700,
|
||||
letterSpacing: 0.3,
|
||||
const SizedBox(height: 8),
|
||||
],
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
child: ElevatedButton(
|
||||
onPressed: enabled ? onPressed : null,
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: UnionFlowColors.unionGreen,
|
||||
disabledBackgroundColor: isDark ? AppColors.borderDark : AppColors.border,
|
||||
foregroundColor: AppColors.onPrimary,
|
||||
disabledForegroundColor: isDark
|
||||
? AppColors.textSecondaryDark
|
||||
: AppColors.textSecondary,
|
||||
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,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user