@pi-spi/app 2.0.0 → 2.1.0

package/src/modules/transactions/presentation/pages/transaction_details/transaction_details_page_ticket.tsx

@@ -10,10 +10,10 @@ import { AppRouter, useAppRouter, type SdkRouter } from '../../../../../core/rou
 import { Themer, useTheme } from '../../../../../core/theme';
 import type { AppLocalizations } from '../../../../../l10n/app_localizations';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
-import { TextButtonIcon } from '../../../../../shared/material/buttons';
-import { Card } from '../../../../../shared/material/card';
+import { ElevatedButton, TextButtonIcon } from '../../../../../shared/material/buttons';
 import { showModalBottomSheet } from '../../../../../shared/material/overlays';
 import { ImageSelectWidget } from '../../../../../shared/widgets/image_select_widget';
+import { SelectionBoutons, SelectionSheet } from '../../../../../shared/widgets/selection';
 import type { Transaction } from '../../../domain/models/transaction';
 
 const logger = new Logger();
@@ -108,7 +108,7 @@ export function TransactionDetailsPageTicket({ transaction }: { transaction: Tra
   );
 }
 
-/** Feuille pour visualiser le ticket de caisse */
+/** Feuille pour visualiser le ticket de caisse : l'image en grand, puis Supprimer et Partager. */
 function TicketVisualiser({
   uri,
   transaction,
@@ -124,37 +124,48 @@ function TicketVisualiser({
   const { height } = useWindowDimensions();
 
   return (
-    <View style={[styles.sheet, { backgroundColor: theme.colorScheme.surface, minHeight: height * 0.2, height: height * 0.8 }]}>
-      {/* Bouton partager */}
-      <View style={styles.actions}>
-        <Pressable accessibilityRole="button" hitSlop={8} style={styles.iconButton} onPress={() => void shareTicket(transaction, traductions)}>
-          <MaterialIcons name={Platform.OS === 'ios' ? 'ios-share' : 'share'} size={24} color={theme.colorScheme.onSurface} />
-        </Pressable>
-      </View>
-      <View style={styles.gap20} />
-      {/* Image du ticket de caisse */}
-      <Card style={styles.flex}>
-        <View style={styles.card}>
-          <View style={styles.gap20} />
-          {/* Titre */}
-          <Text style={[theme.textTheme.headlineLarge, styles.center]}>{traductions.transactionDetailsTicketCaisse}</Text>
-          <View style={styles.gap8} />
-          {/* Sous-titre */}
-          <Text style={[theme.textTheme.displaySmall, styles.center]}>{traductions.transactionDetailsTicketCaisseSubtitle}</Text>
-          <View style={styles.image}>
+    <SelectionSheet
+      hauteurMax={0.85}
+      titre={traductions.transactionDetailsTicketCaisse}
+      entete={
+        <Text style={[theme.textTheme.displaySmall, { color: Themer.neural03Color }]}>
+          {traductions.transactionDetailsTicketCaisseSubtitle}
+        </Text>
+      }
+      contenu={
+        <>
+          {/* Image du ticket de caisse */}
+          <View style={[styles.image, { height: height * 0.5 }]}>
             <Image source={{ uri }} style={styles.flex} contentFit="contain" />
           </View>
-        </View>
-      </Card>
-      {/* Bouton supprimer */}
-      <View style={styles.gap20} />
-      <TextButtonIcon
-        onPress={onDelete}
-        icon={<MaterialIcons name="delete-forever" size={24} color={Themer.systemErrorColor} />}
-        label={traductions.btnTextDelete}
-        textStyle={[theme.textTheme.bodySmall, { color: Themer.systemErrorColor }]}
-      />
-    </View>
+          <SelectionBoutons
+            boutons={[
+              // Supprimer
+              <TextButtonIcon
+                key="supprimer"
+                onPress={onDelete}
+                icon={<MaterialIcons name="delete-outline" size={22} color={Themer.systemErrorColor} />}
+                label={traductions.btnTextDelete}
+                textStyle={{ color: Themer.systemErrorColor }}
+              />,
+              // Partager
+              <ElevatedButton key="partager" onPress={() => void shareTicket(transaction, traductions)}>
+                <View style={styles.row}>
+                  <MaterialIcons
+                    name={Platform.OS === 'ios' ? 'ios-share' : 'share'}
+                    size={18}
+                    color={theme.elevatedButtonTheme.foregroundColor}
+                  />
+                  <Text style={[theme.elevatedButtonTheme.textStyle, styles.libelle, { color: theme.elevatedButtonTheme.foregroundColor }]}>
+                    {traductions.transactionDetailsTicketPartager}
+                  </Text>
+                </View>
+              </ElevatedButton>,
+            ]}
+          />
+        </>
+      }
+    />
   );
 }
 
@@ -175,12 +186,7 @@ async function shareTicket(transaction: Transaction, traductions: AppLocalizatio
 const styles = StyleSheet.create({
   flex: { flex: 1 },
   thumbnail: { width: 30, height: 30, borderRadius: 8 },
-  sheet: { borderTopLeftRadius: 20, borderTopRightRadius: 20, padding: 10 },
-  actions: { flexDirection: 'row', justifyContent: 'space-between' },
-  iconButton: { padding: 8 },
-  card: { flex: 1, padding: 20 },
-  image: { flex: 1, margin: 20, borderRadius: 10, overflow: 'hidden' },
-  center: { textAlign: 'center' },
-  gap8: { height: 8 },
-  gap20: { height: 20 },
+  image: { marginHorizontal: 20, marginTop: 8, marginBottom: 16, borderRadius: 14, overflow: 'hidden' },
+  row: { flexDirection: 'row', alignItems: 'center' },
+  libelle: { marginLeft: 8 },
 });

package/src/modules/transactions/presentation/pages/transaction_form/transaction_form_input_pays.tsx

@@ -0,0 +1,92 @@
+import { useState } from 'react';
+
+import { AppRouter, useAppRouter } from '../../../../../core/router';
+import { useAppLocalizations } from '../../../../../l10n/localizations';
+import { showModalBottomSheet } from '../../../../../shared/material/overlays';
+import { UEMOACountry } from '../../../../../shared/models/uemoa_countries';
+import {
+  SbSelectionLigne,
+  SbSelectionListe,
+  SbSelectionPastille,
+  SbSelectionRecherche,
+  selectionContient,
+  SelectionChamp,
+  SelectionSheet,
+} from '../../../../../shared/widgets/selection';
+import type { TransactionSendCommand } from '../../../domain/models/transaction_send/transaction_send_command';
+import type { TransactionSendBloc } from '../../bloc/transaction_send/transaction_send_bloc';
+import { TransactionSendFormChangedEvent } from '../../bloc/transaction_send/transaction_send_event';
+
+/**
+ * Pays de l'institution financière : champ qui ouvre une feuille de
+ * sélection, avec recherche par nom ou par code. Changer de pays efface
+ * l'institution choisie.
+ */
+export function TransactionSendFormInputPays({
+  command,
+  transactionSendBloc,
+}: {
+  command: TransactionSendCommand;
+  transactionSendBloc: TransactionSendBloc;
+}) {
+  const traductions = useAppLocalizations();
+  const router = useAppRouter();
+  const selected = command.pspPays != null ? UEMOACountry.get(command.pspPays) : undefined;
+
+  const select = async () => {
+    const value = await showModalBottomSheet<UEMOACountry>(router, {
+      builder: () => <SelectPays selected={selected} />,
+    });
+    if (value != null && value.iso !== command.pspPays) {
+      command.pspPays = value.iso;
+      command.pspCode = undefined;
+      command.pspNom = undefined;
+      transactionSendBloc.add(new TransactionSendFormChangedEvent(command));
+    }
+  };
+
+  return (
+    <SelectionChamp
+      libelle={traductions.transactionFormOthrPaysLabel}
+      valeur={selected?.name}
+      pastille={selected != null ? <SbSelectionPastille code={selected.iso3} /> : undefined}
+      onPress={() => void select()}
+    />
+  );
+}
+
+/** Feuille de sélection d'un pays de l'UEMOA ; renvoie le pays choisi. */
+export function SelectPays({ selected }: { selected?: UEMOACountry }) {
+  const traductions = useAppLocalizations();
+  const router = useAppRouter();
+  const [recherche, setRecherche] = useState('');
+
+  const pays =
+    recherche.trim() === ''
+      ? UEMOACountry.liste
+      : UEMOACountry.liste.filter(
+          (p) =>
+            selectionContient(p.name, recherche) || selectionContient(p.iso, recherche) || selectionContient(p.iso3, recherche),
+        );
+
+  return (
+    <SelectionSheet
+      titre={traductions.transactionFormOthrPaysLabel}
+      entete={<SbSelectionRecherche hintText={traductions.transactionFormOthrPaysRecherche} onChanged={setRecherche} />}
+      contenu={
+        <SbSelectionListe
+          vide={traductions.transactionFormOthrPaysAucun}
+          lignes={pays.map((p) => (
+            <SbSelectionLigne
+              key={p.iso}
+              pastille={<SbSelectionPastille code={p.iso3} choisie={p.iso === selected?.iso} />}
+              texte={p.name}
+              choisie={p.iso === selected?.iso}
+              onPress={() => AppRouter.pop(router, { value: p })}
+            />
+          ))}
+        />
+      }
+    />
+  );
+}

package/src/modules/transactions/presentation/pages/transaction_form/transaction_form_input_psp.tsx

@@ -1,20 +1,24 @@
-import { MaterialIcons } from '@expo/vector-icons';
-import { useEffect, useRef, useState } from 'react';
-import { Animated, Easing, Keyboard, Pressable, ScrollView, StyleSheet, Text, TextInput, useWindowDimensions, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useState } from 'react';
+import { View, StyleSheet } from 'react-native';
 
 import { AppRouter, useAppRouter } from '../../../../../core/router';
-import { Themer, useTheme } from '../../../../../core/theme';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
-import { Card } from '../../../../../shared/material/card';
 import { showModalBottomSheet } from '../../../../../shared/material/overlays';
-import { CustomTextInput } from '../../../../../shared/widgets/input_text';
+import {
+  SbSelectionLigne,
+  SbSelectionListe,
+  SbSelectionPastille,
+  SbSelectionRecherche,
+  selectionContient,
+  SelectionChamp,
+  SelectionSheet,
+} from '../../../../../shared/widgets/selection';
 import type { Participant } from '../../../domain/models/participant/participant';
 import type { TransactionSendCommand } from '../../../domain/models/transaction_send/transaction_send_command';
 import type { TransactionSendBloc } from '../../bloc/transaction_send/transaction_send_bloc';
 import { TransactionSendFormChangedEvent } from '../../bloc/transaction_send/transaction_send_event';
 
-/** Champ « Institution » : ouvre la liste des participants du pays choisi. */
+/** Institution financière du bénéficiaire : champ qui ouvre la liste des participants du pays choisi, avec recherche. */
 export function TransactionSendFormInputPsp({
   command,
   transactionSendBloc,
@@ -25,14 +29,11 @@ export function TransactionSendFormInputPsp({
   participants: Participant[];
 }) {
   const traductions = useAppLocalizations();
-  const theme = useTheme();
   const router = useAppRouter();
   const psp = participants.find((p) => p.codeMembre === command.pspCode) ?? null;
 
   const select = async () => {
-    Keyboard.dismiss();
     const value = await showModalBottomSheet<Participant>(router, {
-      themed: true,
       builder: () => <SelectPsp participants={participants} pays={command.pspPays} selected={psp} />,
     });
     if (value != null) {
@@ -43,21 +44,20 @@ export function TransactionSendFormInputPsp({
   };
 
   return (
-    <Pressable onPress={() => void select()}>
-      <View pointerEvents="none">
-        <CustomTextInput
-          labelText={traductions.transactionFormOthrNomLabel}
-          hintText={traductions.transactionFormOthrNomLabel}
-          value={psp?.nomMembre ?? ''}
-          readOnly
-          suffixIcon={<MaterialIcons name="keyboard-arrow-down" size={24} color={theme.colorScheme.onSurface} />}
-        />
-      </View>
-    </Pressable>
+    <SelectionChamp
+      libelle={traductions.transactionFormOthrNomLabel}
+      valeur={psp?.nomMembre}
+      pastille={psp != null ? <SbSelectionPastille icone="account-balance" /> : undefined}
+      onPress={() => void select()}
+    />
   );
 }
 
-/** Feuille de choix d'un participant, avec recherche ; les participants indisponibles sont grisés. */
+/**
+ * Feuille de choix d'un participant, avec recherche ; renvoie le
+ * participant choisi. Les participants indisponibles sont grisés et ne
+ * peuvent pas être choisis, sauf avec [canSelectDisablePsp].
+ */
 export function SelectPsp({
   canSelectDisablePsp = false,
   participants,
@@ -70,91 +70,45 @@ export function SelectPsp({
   selected?: Participant | null;
 }) {
   const traductions = useAppLocalizations();
-  const theme = useTheme();
   const router = useAppRouter();
-  const insets = useSafeAreaInsets();
-  const { height } = useWindowDimensions();
-  const [keyword, setKeyword] = useState('');
-  const [searchFocused, setSearchFocused] = useState(false);
-  // Comme l'AnimatedContainer Flutter : 50 % de l'écran, 80 % pendant la recherche
-  const sheetHeight = useRef(new Animated.Value(height * 0.5)).current;
-  useEffect(() => {
-    Animated.timing(sheetHeight, {
-      toValue: height * (searchFocused ? 0.8 : 0.5),
-      duration: 300,
-      easing: Easing.inOut(Easing.ease),
-      useNativeDriver: false,
-    }).start();
-  }, [height, searchFocused, sheetHeight]);
+  const [recherche, setRecherche] = useState('');
 
   const psps = participants.filter(
     (p) =>
       (pays == null || p.pays.toLowerCase() === pays.toLowerCase()) &&
-      (keyword === '' || p.nomMembre.toLowerCase().includes(keyword.toLowerCase())),
+      (recherche.trim() === '' || selectionContient(p.nomMembre, recherche)),
   );
 
   return (
-    <Animated.View style={[styles.sheet, { backgroundColor: theme.colorScheme.surface, height: sheetHeight, paddingBottom: insets.bottom }]}>
-      <Text style={theme.textTheme.headlineLarge}>{traductions.transactionFormOthrNomLabel}</Text>
-      <View style={styles.gap10} />
-      {/* Recherche */}
-      <Card>
-        <View style={[styles.search, { backgroundColor: theme.inputDecorationTheme.fillColor }]}>
-          <MaterialIcons name="search" size={24} color={Themer.neural03Color} />
-          <TextInput
-            style={[theme.textTheme.displayLarge, styles.searchInput]}
-            placeholder={traductions.btnTextRechercher}
-            placeholderTextColor={Themer.neural03Color}
-            onFocus={() => setSearchFocused(true)}
-            onBlur={() => setSearchFocused(false)}
-            onChangeText={setKeyword}
-          />
-        </View>
-      </Card>
-      <View style={styles.gap20} />
-      {/* Liste des participants */}
-      <Card style={styles.flex}>
-        <ScrollView keyboardShouldPersistTaps="handled">
-          {psps.map((psp) => {
-            const disabled = !canSelectDisablePsp && psp.isDisable();
-            const isCurrent = psp.codeMembre === selected?.codeMembre;
+    <SelectionSheet
+      titre={traductions.transactionFormOthrNomLabel}
+      entete={<SbSelectionRecherche hintText={traductions.transactionFormOthrPspRecherche} onChanged={setRecherche} />}
+      contenu={
+        <SbSelectionListe
+          vide={traductions.transactionFormOthrPspAucune}
+          lignes={psps.map((psp) => {
+            const choisie = psp.codeMembre === selected?.codeMembre;
+            const indisponible = !canSelectDisablePsp && psp.isDisable();
             return (
-              <View key={psp.codeMembre} style={styles.itemPadding}>
-                <Pressable
-                  disabled={disabled}
-                  onPress={() => AppRouter.pop(router, { value: psp })}
-                  style={[styles.item, isCurrent ? { backgroundColor: Themer.neural01Color } : null]}
-                >
-                  <View style={styles.flex}>
-                    <Text
-                      numberOfLines={1}
-                      style={[theme.textTheme.headlineSmall, styles.pspName, disabled ? { color: Themer.neural02Color } : null]}
-                    >
-                      {psp.nomMembre}
-                    </Text>
-                    {disabled && (
-                      <Text style={[theme.textTheme.displaySmall, { color: Themer.neural02Color }]}>{traductions.indisponible}</Text>
-                    )}
-                  </View>
-                  {isCurrent && <MaterialIcons name="check" size={24} color={Themer.neural03Color} />}
-                </Pressable>
+              <View key={psp.codeMembre} style={indisponible ? styles.indisponible : null}>
+                <SbSelectionLigne
+                  pastille={<SbSelectionPastille icone="account-balance" choisie={choisie} />}
+                  texte={psp.nomMembre}
+                  detail={indisponible ? traductions.indisponible : undefined}
+                  choisie={choisie}
+                  onPress={() => {
+                    if (!indisponible) AppRouter.pop(router, { value: psp });
+                  }}
+                />
               </View>
             );
           })}
-        </ScrollView>
-      </Card>
-    </Animated.View>
+        />
+      }
+    />
   );
 }
 
 const styles = StyleSheet.create({
-  flex: { flex: 1 },
-  sheet: { borderRadius: 20, paddingTop: 20, paddingHorizontal: 20 },
-  search: { height: 36, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 12 },
-  searchInput: { flex: 1, marginLeft: 8, paddingVertical: 0 },
-  itemPadding: { paddingHorizontal: 8 },
-  item: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 10, minHeight: 56, borderRadius: 20 },
-  pspName: { fontWeight: '700', fontSize: 15 },
-  gap10: { height: 10 },
-  gap20: { height: 20 },
+  indisponible: { opacity: 0.5 },
 });

package/src/modules/transactions/presentation/pages/transaction_form/transaction_form_page_othr.tsx

@@ -6,7 +6,6 @@ import { useBloc, useBlocBuilder } from '../../../../../core/bloc_react';
 import { useTheme } from '../../../../../core/theme';
 import type { AppLocalizations } from '../../../../../l10n/app_localizations';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
-import { DropdownButton } from '../../../../../shared/material/dropdown';
 import { CompteValidator } from '../../../../../shared/models/compte_validator';
 import { UEMOACountry } from '../../../../../shared/models/uemoa_countries';
 import { useKeyboardVisible } from '../../../../../shared/utils/use_keyboard_visible';
@@ -17,11 +16,11 @@ import type { Participant } from '../../../domain/models/participant/participant
 import type { TransactionSendCommand } from '../../../domain/models/transaction_send/transaction_send_command';
 import { TransactionSendMethod } from '../../../domain/models/transaction_send/transaction_send_method';
 import { TransactionSendBloc } from '../../bloc/transaction_send/transaction_send_bloc';
-import { TransactionSendFormChangedEvent } from '../../bloc/transaction_send/transaction_send_event';
 import { TransactionSendFormInputState } from '../../bloc/transaction_send/transaction_send_state';
 import { TransactionFormInputAmount } from './transaction_form_input_amount';
 import { TransactionFormInputMotif } from './transaction_form_input_motif';
 import { setOthrCompte, TransactionFormInputOthr } from './transaction_form_input_othr';
+import { TransactionSendFormInputPays } from './transaction_form_input_pays';
 import { TransactionSendFormInputPsp } from './transaction_form_input_psp';
 
 /**
@@ -101,20 +100,8 @@ export function TransactionFormPageOthr() {
             <View>
               <View style={styles.gap16} />
               {/* Pays */}
-              <View style={[styles.pays, { backgroundColor: theme.cardTheme.color }]}>
-                <Text style={theme.inputDecorationTheme.floatingLabelStyle}>{traductions.transactionFormOthrPaysLabel}</Text>
-                <DropdownButton
-                  value={cmd.pspPays}
-                  items={UEMOACountry.liste.map((c) => ({ value: c.iso, label: `${c.flag} ${c.name}` }))}
-                  onChanged={(value) => {
-                    cmd.pspPays = value;
-                    cmd.pspCode = undefined;
-                    cmd.pspNom = undefined;
-                    transactionSendBloc.add(new TransactionSendFormChangedEvent(cmd));
-                  }}
-                />
-              </View>
-              <View style={styles.gap16} />
+              <TransactionSendFormInputPays command={cmd} transactionSendBloc={transactionSendBloc} />
+              <View style={styles.gap12} />
               {/* Participant */}
               <TransactionSendFormInputPsp
                 command={cmd}
@@ -185,10 +172,10 @@ function pspError(traductions: AppLocalizations, participants: Participant[], cm
 
 const styles = StyleSheet.create({
   title: { fontSize: 25 },
-  pays: { borderRadius: 14, paddingHorizontal: 16, paddingTop: 8 },
   gap5: { height: 5 },
   gap6: { height: 6 },
   gap10: { height: 10 },
+  gap12: { height: 12 },
   gap16: { height: 16 },
   gap32: { height: 32 },
 });

package/src/modules/transactions/presentation/pages/transaction_form/transaction_form_page_verification.tsx

@@ -101,7 +101,6 @@ export function TransactionVerificationPage() {
         thumbColor={theme.switchTheme.thumbColor}
         onValueChange={async () => {
           const confirmed = await showModalBottomSheet<boolean>(router, {
-            themed: true,
             builder: () => (
               <ConfirmActionSheetWidget
                 title={traductions.contactAliasSaveText}

package/src/modules/transactions/presentation/pages/transaction_recents/transaction_recents_nombre_widget.tsx

@@ -1,13 +1,16 @@
+import { MaterialIcons } from '@expo/vector-icons';
 import { useState } from 'react';
-import { ScrollView, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
 
 import { useBloc } from '../../../../../core/bloc_react';
 import { AppRouter, useAppRouter } from '../../../../../core/router';
-import { useTheme } from '../../../../../core/theme';
+import { Themer, useTheme } from '../../../../../core/theme';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
 import { ElevatedButton } from '../../../../../shared/material/buttons';
 import { Card } from '../../../../../shared/material/card';
+import { withAlpha } from '../../../../../shared/utils/color';
 import { NumberIncWidget } from '../../../../../shared/widgets/number_inc_widget';
+import { SelectionSheet } from '../../../../../shared/widgets/selection';
 import { ConfigBloc } from '../../../../config/adapters/ui/bloc/config_bloc';
 import { ConfigChangeEvent } from '../../../../config/adapters/ui/bloc/config_event';
 import { ConfigKey } from '../../../../config/domain/models/config_keys';
@@ -18,7 +21,7 @@ export function TransactionRecentsNombreWidget() {
   const theme = useTheme();
   const router = useAppRouter();
   const configBloc = useBloc(ConfigBloc);
-  const { height } = useWindowDimensions();
+  const primaire = theme.colorScheme.primary;
   const [nbItems] = useState(() => {
     const param = configBloc.getParamValue(ConfigKey.transactionsRecentNbItems);
     return param != null ? parseInt(param, 10) : 3;
@@ -26,47 +29,51 @@ export function TransactionRecentsNombreWidget() {
   const [updatedNbItems, setUpdatedNbItems] = useState(nbItems);
 
   return (
-    <View style={[styles.box, { maxHeight: height * 0.5, backgroundColor: theme.colorScheme.surface }]}>
-      <ScrollView contentContainerStyle={styles.content}>
-        {/* Titre */}
-        <Text style={theme.textTheme.headlineMedium}>{traductions.homeTransactionsRecentsNombreTitle}</Text>
-        <View style={styles.gap10} />
-        {/* Sous titre */}
-        <Text style={theme.textTheme.displayLarge}>{traductions.homeTransactionsRecentsNombreSubTitle}</Text>
-        <View style={styles.gap32} />
-        {/* Boutons réduire et augmenter */}
-        <Card>
-          <View style={styles.row}>
-            <Text style={[theme.textTheme.headlineSmall, styles.flex]}>{traductions.homeTransactions}</Text>
-            <NumberIncWidget min={3} max={10} number={updatedNbItems} onChange={setUpdatedNbItems} />
-          </View>
-        </Card>
-        <View style={styles.gap24} />
-        {/* Enregistrer */}
-        <ElevatedButton
-          onPress={
-            updatedNbItems !== nbItems
-              ? () => {
-                  configBloc.add(new ConfigChangeEvent(ConfigKey.transactionsRecentNbItems, String(updatedNbItems)));
-                  AppRouter.pop(router);
-                }
-              : undefined
-          }
-        >
-          {traductions.homeTransactionsRecentsNombreBtnSave}
-        </ElevatedButton>
-        <View style={styles.gap10} />
-      </ScrollView>
-    </View>
+    <SelectionSheet
+      titre={traductions.homeTransactionsRecentsNombreTitle}
+      entete={
+        <Text style={[theme.textTheme.displaySmall, { color: Themer.neural03Color }]}>
+          {traductions.homeTransactionsRecentsNombreSubTitle}
+        </Text>
+      }
+      contenu={
+        <ScrollView bounces={false} contentContainerStyle={styles.content}>
+          {/* Boutons réduire et augmenter */}
+          <Card style={styles.carte}>
+            <View style={styles.row}>
+              {/* Pastille */}
+              <View style={[styles.pastille, { backgroundColor: withAlpha(primaire, 0.12) }]}>
+                <MaterialIcons name="receipt-long" size={20} color={primaire} />
+              </View>
+              <Text style={[theme.textTheme.displayLarge, styles.libelle]}>{traductions.homeTransactions}</Text>
+              <NumberIncWidget min={3} max={10} number={updatedNbItems} onChange={setUpdatedNbItems} />
+            </View>
+          </Card>
+          <View style={styles.gap20} />
+          {/* Enregistrer */}
+          <ElevatedButton
+            onPress={
+              updatedNbItems !== nbItems
+                ? () => {
+                    configBloc.add(new ConfigChangeEvent(ConfigKey.transactionsRecentNbItems, String(updatedNbItems)));
+                    AppRouter.pop(router);
+                  }
+                : undefined
+            }
+          >
+            {traductions.homeTransactionsRecentsNombreBtnSave}
+          </ElevatedButton>
+        </ScrollView>
+      }
+    />
   );
 }
 
 const styles = StyleSheet.create({
-  box: { borderRadius: 20, overflow: 'hidden' },
-  content: { padding: 20 },
-  row: { flexDirection: 'row', alignItems: 'center', padding: 15 },
-  flex: { flex: 1 },
-  gap10: { height: 10 },
-  gap24: { height: 24 },
-  gap32: { height: 32 },
+  content: { paddingHorizontal: 20, paddingTop: 12, paddingBottom: 16 },
+  carte: { margin: 0 },
+  row: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 14, paddingVertical: 12 },
+  pastille: { width: 40, height: 40, borderRadius: 12, alignItems: 'center', justifyContent: 'center' },
+  libelle: { flex: 1, marginHorizontal: 14, fontWeight: '500' },
+  gap20: { height: 20 },
 });

package/src/modules/transactions/presentation/pages/transaction_recents/transaction_recents_widget.tsx

@@ -59,7 +59,7 @@ export function TransactionRecentsWidget() {
         <Pressable
           accessibilityRole="button"
           hitSlop={10}
-          onPress={() => void showModalBottomSheet(router, { themed: true, builder: () => <TransactionRecentsNombreWidget /> })}
+          onPress={() => void showModalBottomSheet(router, { builder: () => <TransactionRecentsNombreWidget /> })}
         >
           <MaterialIcons name="more-horiz" size={24} color={theme.colorScheme.onSurface} />
         </Pressable>

package/src/modules/transactions/presentation/pages/transaction_rtp/transaction_rtp_page_actions.tsx

@@ -74,7 +74,6 @@ export function TransactionRtpPageActions({
 
   const onRejectTap = () =>
     void showModalBottomSheet(router, {
-      themed: true,
       builder: () => (
         <BlocProvider blocs={[bloc]}>
           <TransactionRtpPageActionsReject />