@pi-spi/app 2.0.0 → 2.2.0

package/src/modules/transactions/presentation/pages/transaction_split/transaction_split_page_tx.tsx

@@ -4,10 +4,10 @@ import { Keyboard, StyleSheet, Text, View } from 'react-native';
 import { BlocProvider, useCreateBloc } from '../../../../../core/bloc_react';
 import { Di } from '../../../../../core/di';
 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 { AppBar, Scaffold } from '../../../../../shared/material/scaffold';
+import { Scaffold } from '../../../../../shared/material/scaffold';
 import { MyPageContainer } from '../../../../../shared/widgets/my_page_container';
 import type { ContactPI } from '../../../../contacts/domain/contact_pi';
 import { TransactionSens, type Transaction } from '../../../domain/models/transaction';
@@ -16,6 +16,7 @@ import { TransactionSearchFilter } from '../../../domain/models/transaction_sear
 import { TransactionSearchBloc } from '../../bloc/transaction_search/transaction_search_bloc';
 import { TransactionSearchListEvent } from '../../bloc/transaction_search/transaction_search_event';
 import { TransactionSearchPageListe } from '../transaction_search/transaction_search_page_liste';
+import { ProfileAppBar } from '../../../../profile/presentation/pages/profile_app_bar';
 
 /** Partage de dépense, étape 1 : choisir le paiement émis à partager. */
 export function TransactionSplitPageTx() {
@@ -37,13 +38,12 @@ export function TransactionSplitPageTx() {
   });
 
   return (
-    <Scaffold appBar={<AppBar onBack={() => AppRouter.pop(router)} />}>
+    <Scaffold appBar={<ProfileAppBar titre={traductions.transactionSplitSelectTxPageTitle} />}>
       <BlocProvider blocs={[searchBloc]}>
         <MyPageContainer>
           <View style={styles.flex}>
-            <Text style={theme.textTheme.titleSmall}>{traductions.transactionSplitSelectTxPageTitle}</Text>
             <View style={styles.gap8} />
-            <Text style={theme.textTheme.displaySmall}>{traductions.transactionSplitSelectTxPageSubtitle}</Text>
+            <Text style={[theme.textTheme.displaySmall, { color: Themer.neural03Color }]}>{traductions.transactionSplitSelectTxPageSubtitle}</Text>
             <View style={styles.gap20} />
             {/* Liste des transactions */}
             <TransactionSearchPageListe

package/src/shared/widgets/alias_widget.tsx

@@ -13,8 +13,8 @@ import { ClipboardWidget } from './clipboard_widget';
 
 /**
  * Pour afficher l'alias dans l'app : formaté, avec un bouton pour le
- * copier. Si l'alias n'est pas encore dans les contacts du téléphone, un
- * appui long propose de l'y enregistrer.
+ * copier. Si l'alias n'est pas encore dans les contacts du téléphone, une
+ * icône visible (et l'appui long) propose de l'y enregistrer.
  */
 export function AliasWidget({
   alias,
@@ -33,25 +33,54 @@ export function AliasWidget({
   const contactBloc = useBloc(ContactBloc);
   useBlocBuilder(contactBloc);
 
+  const inconnu = !contactBloc.isContactExist(alias);
+  const enregistrer = () =>
+    void AppRouter.push(router, AppRouter.profileContacts, {
+      params: new ContactPI({ name: name ?? '', alias }),
+    });
+
   const style = [theme.textTheme.bodyLarge, { color: Themer.neural03Color, textAlign }];
   const text = (
-    <Text numberOfLines={1} style={[style, canCopy ? styles.flex : null]}>
+    <Text numberOfLines={1} style={[style, canCopy || inconnu ? styles.flex : null]}>
       {AliasPI.formatPhoneNumber(alias)}
     </Text>
   );
-  const content = canCopy ? (
-    <View style={styles.row}>
-      {text}
-      <Pressable accessibilityRole="button" hitSlop={8} onPress={() => void ClipboardWidget.setData(alias)}>
-        <MaterialIcons name="content-copy" size={16} color={theme.colorScheme.onSurface} />
-      </Pressable>
-    </View>
-  ) : (
-    text
-  );
+  const content =
+    canCopy || inconnu ? (
+      <View style={styles.row}>
+        {text}
+        {/* Enregistrer dans les contacts (alias inconnu) */}
+        {inconnu && (
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel={traductions.contactAliasSaveText}
+            hitSlop={8}
+            onPress={enregistrer}
+            style={styles.icone}
+          >
+            <MaterialIcons name="person-add-alt-1" size={20} color={theme.colorScheme.primary} />
+          </Pressable>
+        )}
+        {/* Copier l'alias */}
+        {canCopy && (
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel={traductions.aliasWidgetCopyTooltip}
+            hitSlop={8}
+            onPress={() => void ClipboardWidget.setData(alias)}
+            style={styles.icone}
+          >
+            <MaterialIcons name="content-copy" size={16} color={theme.colorScheme.onSurface} />
+          </Pressable>
+        )}
+      </View>
+    ) : (
+      text
+    );
 
-  if (contactBloc.isContactExist(alias)) return content;
+  if (!inconnu) return content;
 
+  // Appui long : raccourci vers l'enregistrement, en plus de l'icône visible
   const showLightMenu = (event: GestureResponderEvent) => {
     void showPopupMenu(router, {
       x: event.nativeEvent.pageX,
@@ -61,10 +90,7 @@ export function AliasWidget({
           icon: 'person-add',
           iconSize: 16,
           label: traductions.contactAliasSaveText,
-          onTap: () =>
-            void AppRouter.push(router, AppRouter.profileContacts, {
-              params: new ContactPI({ name: name ?? '', alias }),
-            }),
+          onTap: enregistrer,
         },
       ],
     });
@@ -76,4 +102,5 @@ export function AliasWidget({
 const styles = StyleSheet.create({
   flex: { flex: 1 },
   row: { flexDirection: 'row', alignItems: 'center' },
+  icone: { paddingHorizontal: 6, paddingVertical: 4 },
 });

package/src/shared/widgets/auth_code_field.tsx

@@ -0,0 +1,89 @@
+import { useRef, useState } from 'react';
+import { Pressable, StyleSheet, Text, TextInput, View, type TextInputInstance } from 'react-native';
+
+import { useTheme } from '../../core/theme';
+
+/**
+ * Champ du code de vérification reçu par SMS ou e-mail : une case par
+ * chiffre, au-dessus d'un vrai champ (invisible) qui reçoit la saisie, le
+ * collage et la suggestion automatique du code par le clavier (code à
+ * usage unique).
+ */
+export function AuthCodeField({
+  onChanged,
+  longueur = 6,
+  erreur = false,
+  onComplete,
+  autoFocus = false,
+}: {
+  onChanged: (code: string) => void;
+  /** Nombre de chiffres du code */
+  longueur?: number;
+  erreur?: boolean;
+  /** Appelé quand tous les chiffres sont saisis */
+  onComplete?: (code: string) => void;
+  /** Ouvre le clavier dès l'affichage */
+  autoFocus?: boolean;
+}) {
+  const theme = useTheme();
+  const champ = useRef<TextInputInstance | null>(null);
+  const [code, setCode] = useState('');
+  const [focus, setFocus] = useState(autoFocus);
+  const primaire = theme.colorScheme.primary;
+  // Case en cours de saisie
+  const courante = Math.min(code.length, longueur - 1);
+
+  return (
+    <Pressable onPress={() => champ.current?.focus()} accessibilityRole="none">
+      {/* Vrai champ, invisible : saisie, collage, code suggéré */}
+      <TextInput
+        ref={champ}
+        value={code}
+        autoFocus={autoFocus}
+        keyboardType="number-pad"
+        textContentType="oneTimeCode"
+        autoComplete="sms-otp"
+        maxLength={longueur}
+        caretHidden
+        onFocus={() => setFocus(true)}
+        onBlur={() => setFocus(false)}
+        onChangeText={(texte) => {
+          const valeur = texte.replace(/\D/g, '').slice(0, longueur);
+          setCode(valeur);
+          onChanged(valeur);
+          if (valeur.length === longueur) onComplete?.(valeur);
+        }}
+        style={styles.cache}
+      />
+      {/* Cases, une par chiffre */}
+      <View style={styles.cases} pointerEvents="none">
+        {Array.from({ length: longueur }, (_, i) => (
+          <View
+            key={i}
+            style={[
+              styles.case,
+              i > 0 ? styles.ecart : null,
+              {
+                backgroundColor: theme.inputDecorationTheme.fillColor,
+                borderColor: erreur
+                  ? theme.colorScheme.error
+                  : focus && i === courante
+                    ? primaire
+                    : 'transparent',
+              },
+            ]}
+          >
+            <Text style={theme.textTheme.headlineMedium}>{i < code.length ? code[i] : ''}</Text>
+          </View>
+        ))}
+      </View>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  cache: { position: 'absolute', opacity: 0, width: 1, height: 1 },
+  cases: { flexDirection: 'row' },
+  case: { flex: 1, height: 56, borderRadius: 14, borderWidth: 1.5, alignItems: 'center', justifyContent: 'center' },
+  ecart: { marginLeft: 8 },
+});

package/src/shared/widgets/calendar_date_picker.tsx

@@ -64,7 +64,8 @@ export function CalendarDatePicker({
     onValueChanged([start, day]);
   };
 
-  const dayStyle = { ...theme.textTheme.titleSmall, fontSize: 17 };
+  const primaire = theme.colorScheme.primary;
+  const dayStyle = { ...theme.textTheme.titleSmall, fontSize: 16 };
 
   return (
     <View style={styles.container}>
@@ -72,17 +73,17 @@ export function CalendarDatePicker({
       <View style={styles.header}>
         <Text style={[theme.textTheme.bodyMedium, styles.month]}>{new DateFormat('MMMM yyyy', locale).format(month)}</Text>
         <Pressable hitSlop={10} onPress={() => setMonth(new Date(month.getFullYear(), month.getMonth() - 1, 1))}>
-          <MaterialIcons name="arrow-back-ios" size={20} color={theme.primaryColor} />
+          <MaterialIcons name="chevron-left" size={26} color={primaire} />
         </Pressable>
         <View style={styles.gap24} />
         <Pressable hitSlop={10} onPress={() => setMonth(new Date(month.getFullYear(), month.getMonth() + 1, 1))}>
-          <MaterialIcons name="arrow-forward-ios" size={20} color={theme.primaryColor} />
+          <MaterialIcons name="chevron-right" size={26} color={primaire} />
         </Pressable>
       </View>
       {/* Jours de la semaine */}
       <View style={styles.row}>
         {weekdays.map((d, i) => (
-          <Text key={i} style={[theme.textTheme.bodyMedium, styles.weekday]}>
+          <Text key={i} style={[theme.textTheme.displaySmall, styles.weekday, { color: Themer.neural03Color }]}>
             {d}
           </Text>
         ))}
@@ -97,14 +98,14 @@ export function CalendarDatePicker({
             const inRange = start != null && end != null && day > startOfDay(start) && day < startOfDay(end);
             return (
               <Pressable key={i} disabled={disabled} onPress={() => onDayPress(day)} style={styles.cell}>
-                {inRange && <View style={[styles.range, { backgroundColor: theme.primaryColor, opacity: 0.2 }]} />}
-                <View style={[styles.day, selected ? { backgroundColor: theme.primaryColor } : null]}>
+                {inRange && <View style={[styles.range, { backgroundColor: primaire, opacity: 0.12 }]} />}
+                <View style={[styles.day, selected ? { backgroundColor: primaire } : null]}>
                   <Text
                     style={[
                       dayStyle,
-                      disabled ? { ...theme.textTheme.bodyLarge, fontSize: 17, color: Themer.gray } : null,
-                      !selected && !disabled && sameDay(day, today) ? { color: theme.primaryColor } : null,
-                      selected ? { color: Themer.whiteColor } : null,
+                      disabled ? { ...theme.textTheme.bodyLarge, fontSize: 16, color: Themer.gray } : null,
+                      !selected && !disabled && sameDay(day, today) ? { color: primaire, fontWeight: '700' } : null,
+                      selected ? { color: theme.colorScheme.onPrimary, fontWeight: '700' } : null,
                     ]}
                   >
                     {day.getDate()}
@@ -122,11 +123,11 @@ export function CalendarDatePicker({
 const styles = StyleSheet.create({
   container: { paddingHorizontal: 16 },
   header: { flexDirection: 'row', alignItems: 'center', paddingVertical: 12, paddingHorizontal: 4 },
-  month: { flex: 1, fontWeight: '600', textTransform: 'capitalize' },
+  month: { flex: 1, fontWeight: '700', textTransform: 'capitalize' },
   gap24: { width: 24 },
   row: { flexDirection: 'row' },
   weekday: { flex: 1, textAlign: 'center', fontWeight: '600', paddingVertical: 8 },
   cell: { flex: 1, height: 44, alignItems: 'center', justifyContent: 'center' },
   range: { ...StyleSheet.absoluteFill, marginVertical: 4 },
-  day: { width: 40, height: 40, borderRadius: 20, alignItems: 'center', justifyContent: 'center' },
+  day: { width: 40, height: 40, borderRadius: 12, alignItems: 'center', justifyContent: 'center' },
 });

package/src/shared/widgets/confirm_action_sheet_widget.tsx

@@ -1,12 +1,16 @@
-import { ScrollView, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
 
-import { AppRouter, useAppRouter } from '../../core/router';
+import { AppRouter, useAppRouter, type SdkRouter } from '../../core/router';
 import { useTheme } from '../../core/theme';
 import { useAppLocalizations } from '../../l10n/localizations';
 import { ElevatedButton, FilledTonalButton } from '../material/buttons';
+import { showModalBottomSheet } from '../material/overlays';
+import { SelectionBoutons, SelectionSheet } from './selection';
 
-/** Feuille de confirmation : titre, texte, et boutons Annuler / Confirmer (retournent `false` / `true`). */
+/**
+ * Feuille de confirmation : [title] et [subtitle] centrés, puis Annuler et
+ * Confirmer fixés en bas (retournent `false` / `true` par défaut).
+ */
 export function ConfirmActionSheetWidget({
   title,
   subtitle,
@@ -14,8 +18,11 @@ export function ConfirmActionSheetWidget({
   confirmAction,
   cancelTitle,
   cancelAction,
+  emoji,
 }: {
   title: string;
+  /** Emoji affiché en grand sous le titre (ex. 😢 pour la déconnexion) */
+  emoji?: string;
   subtitle: string;
   confirmTitle?: string;
   confirmAction?: () => void;
@@ -25,44 +32,51 @@ export function ConfirmActionSheetWidget({
   const traductions = useAppLocalizations();
   const theme = useTheme();
   const router = useAppRouter();
-  const insets = useSafeAreaInsets();
-  const { height } = useWindowDimensions();
 
   return (
-    <View style={styles.padding}>
-      <View style={[styles.box, { backgroundColor: theme.colorScheme.surface, maxHeight: height * 0.7 - 40, marginBottom: insets.bottom }]}>
-        <ScrollView bounces={false}>
-          <Text style={[theme.textTheme.titleSmall, styles.center]}>{title}</Text>
-          <View style={styles.gap20} />
-          <Text style={[theme.textTheme.displayMedium, styles.center]}>{subtitle}</Text>
-          <View style={styles.gap30} />
-          <View style={styles.buttons}>
-            <View style={styles.flex}>
-              <FilledTonalButton style={styles.button} onPress={cancelAction ?? (() => AppRouter.pop(router, { value: false }))}>
+    <SelectionSheet
+      contenu={
+        <>
+          <ScrollView bounces={false} style={styles.defile} contentContainerStyle={styles.content}>
+            {/* Titre */}
+            <Text style={[theme.textTheme.titleSmall, styles.center]}>{title}</Text>
+            {/* Emoji */}
+            {emoji != null && <Text style={[styles.center, styles.emoji]}>{emoji}</Text>}
+            <View style={styles.gap12} />
+            {/* Sous-titre */}
+            <Text style={[theme.textTheme.displayMedium, styles.center]}>{subtitle}</Text>
+          </ScrollView>
+          <SelectionBoutons
+            boutons={[
+              <FilledTonalButton key="non" onPress={cancelAction ?? (() => AppRouter.pop(router, { value: false }))}>
                 {cancelTitle ?? traductions.btnTextCancel}
-              </FilledTonalButton>
-            </View>
-            <View style={styles.gap16} />
-            <View style={styles.flex}>
-              <ElevatedButton style={styles.button} onPress={confirmAction ?? (() => AppRouter.pop(router, { value: true }))}>
+              </FilledTonalButton>,
+              <ElevatedButton key="oui" onPress={confirmAction ?? (() => AppRouter.pop(router, { value: true }))}>
                 {confirmTitle ?? traductions.btnTextAccept}
-              </ElevatedButton>
-            </View>
-          </View>
-        </ScrollView>
-      </View>
-    </View>
+              </ElevatedButton>,
+            ]}
+          />
+        </>
+      }
+    />
   );
 }
 
 const styles = StyleSheet.create({
-  padding: { padding: 20 },
-  box: { borderRadius: 20, overflow: 'hidden' },
+  defile: { flexShrink: 1 },
+  content: { paddingHorizontal: 24, paddingTop: 4, paddingBottom: 20 },
   center: { textAlign: 'center' },
-  flex: { flex: 1 },
-  buttons: { flexDirection: 'row', height: 56 },
-  button: { height: 56 },
-  gap16: { width: 16 },
-  gap20: { height: 20 },
-  gap30: { height: 30 },
+  gap12: { height: 12 },
+  emoji: { fontSize: 48, marginTop: 12 },
 });
+
+/** Ouvre la feuille de confirmation ; `true` si l'utilisateur confirme. */
+export async function showConfirmActionSheet(
+  router: SdkRouter,
+  props: { title: string; subtitle: string; confirmTitle?: string; cancelTitle?: string; emoji?: string },
+): Promise<boolean> {
+  const confirme = await showModalBottomSheet<boolean>(router, {
+    builder: () => <ConfirmActionSheetWidget {...props} />,
+  });
+  return confirme === true;
+}

package/src/shared/widgets/emoji_select_widget.tsx

@@ -1,10 +1,12 @@
+import { MaterialIcons } from '@expo/vector-icons';
 import { useEffect, useState } from 'react';
-import { Pressable, ScrollView, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
+import { Pressable, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
 import { EmojiKeyboard, en, fr, pt } from 'rn-emoji-keyboard';
 
 import { Themer, useTheme } from '../../core/theme';
 import { useAppLocalizations } from '../../l10n/localizations';
 import { argbToCss } from '../../modules/categorie/domain/models/categorie_icons';
+import { withAlpha } from '../utils/color';
 
 const colors = [0xffedb37e, 0xffc08507, 0xff007aff, 0xfff9ebc2, 0xff8b887e, 0xffffd573, 0xfffa5a25, 0xff46a93d, 0xffa1a5ac, 0xff43474e];
 const imageRegex = /\.(jpeg|jpg|png|gif)$/i;
@@ -26,8 +28,8 @@ export function EmojiSelectWidget({
   const locale = useAppLocalizations().localeName;
   const { height } = useWindowDimensions();
   const [selectedColor, setSelectedColor] = useState(color ?? 0xfff9ebc2);
-  // Comme en Dart : l'emoji par défaut remplace aussi une icône non-image
-  const [selectedEmoji, setSelectedEmoji] = useState(icon == null || !imageRegex.test(icon) ? '🤩' : icon);
+  // Pas d'icône, ou une image (pas un emoji) : emoji par défaut
+  const [selectedEmoji, setSelectedEmoji] = useState(icon == null || imageRegex.test(icon) ? '🤩' : icon);
 
   useEffect(() => {
     onChanged({ icon: selectedEmoji, color: selectedColor });
@@ -40,18 +42,30 @@ export function EmojiSelectWidget({
       <View style={[styles.preview, { backgroundColor: argbToCss(selectedColor) }]}>
         <Text style={styles.previewText}>{selectedEmoji}</Text>
       </View>
-      {/* Couleur de fond */}
-      <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.colors}>
-        {colors.map((c) =>
-          c === selectedColor ? (
-            <View key={c} style={[styles.selectedColor, { borderColor: theme.colorScheme.primary }]}>
-              <View style={[styles.dot, { backgroundColor: argbToCss(c) }]} />
-            </View>
-          ) : (
-            <Pressable key={c} onPress={() => setSelectedColor(c)} style={[styles.dot, styles.dotSpacing, { backgroundColor: argbToCss(c) }]} />
-          ),
-        )}
-      </ScrollView>
+      {/* Couleur de fond : pastilles, la choisie cochée */}
+      <View style={styles.colors}>
+        {colors.map((c) => {
+          const choisie = c === selectedColor;
+          return (
+            <Pressable
+              key={c}
+              accessibilityRole="radio"
+              accessibilityState={{ selected: choisie }}
+              onPress={() => setSelectedColor(c)}
+              style={[
+                styles.dot,
+                {
+                  backgroundColor: argbToCss(c),
+                  borderColor: choisie ? theme.colorScheme.primary : withAlpha(Themer.neural03Color, 0.2),
+                  borderWidth: choisie ? 3 : 1,
+                },
+              ]}
+            >
+              {choisie && <MaterialIcons name="check" size={18} color={Themer.whiteColor} />}
+            </Pressable>
+          );
+        })}
+      </View>
       {/* Clavier d'emoji */}
       <View style={{ height: height * 0.4, alignSelf: 'stretch' }}>
         <EmojiKeyboard
@@ -85,18 +99,6 @@ const styles = StyleSheet.create({
     marginVertical: 8,
   },
   previewText: { fontSize: 48 },
-  colors: { alignItems: 'center', height: 72, paddingHorizontal: 4 },
-  dot: { width: 24, height: 24, borderRadius: 12 },
-  dotSpacing: { marginRight: 12 },
-  selectedColor: {
-    width: 32,
-    height: 32,
-    borderRadius: 16,
-    borderWidth: 3,
-    padding: 1,
-    marginRight: 12,
-    backgroundColor: Themer.whiteColor,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
+  colors: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'center', gap: 10, paddingVertical: 12 },
+  dot: { width: 34, height: 34, borderRadius: 17, alignItems: 'center', justifyContent: 'center' },
 });

package/src/shared/widgets/frequence_input_widget.tsx

@@ -1,41 +1,39 @@
-import { MaterialIcons } from '@expo/vector-icons';
 import { useEffect } from 'react';
-import { Pressable, View } from 'react-native';
 
 import { useAppRouter } from '../../core/router';
-import { useTheme } from '../../core/theme';
 import { useAppLocalizations } from '../../l10n/localizations';
 import { showModalBottomSheet } from '../material/overlays';
 import { Frequence, type FrequenceCommand } from '../models/frequence_command';
-import { FrequenceSelectWidget, frequenceText, periodiciteText } from './frequence_select_widget';
-import { CustomTextInput } from './input_text';
+import { FrequenceSelectWidget, frequenceIcone, frequenceResume, frequenceText } from './frequence_select_widget';
+import { SelectionPastille, SelectionChamp } from './selection';
 
 const FREQUENCES = [Frequence.quotidienne, Frequence.hebdomadaire, Frequence.mensuelle, Frequence.annuelle];
 
-/** Champ fréquence d'une programmation ; ouvre le choix de la fréquence. */
+/** Champ fréquence d'une programmation : carte qui ouvre le choix de la fréquence. */
 export function FrequenceInputWidget({
   command,
   onChange,
   readOnly = false,
   hideOnce = false,
   hideCustom = false,
+  enableCustom = true,
+  frequences = FREQUENCES,
 }: {
   command: FrequenceCommand;
   onChange: (value: FrequenceCommand) => void;
   readOnly?: boolean;
   hideOnce?: boolean;
   hideCustom?: boolean;
+  /** Si on autorise la fréquence sur mesure */
+  enableCustom?: boolean;
+  frequences?: Frequence[];
 }) {
   const traductions = useAppLocalizations();
-  const theme = useTheme();
   const router = useAppRouter();
 
   let text: string;
   if (command.value != null && command.periodicite != null) {
-    text = traductions.transactionFormScheduleFrequenceSelected(
-      String(command.periodicite),
-      periodiciteText(traductions, command.value),
-    );
+    text = frequenceResume(traductions, command.value, command.periodicite, enableCustom);
   } else if (command.value != null) {
     text = frequenceText(command.value, traductions);
   } else {
@@ -45,36 +43,32 @@ export function FrequenceInputWidget({
 
   const select = () =>
     void showModalBottomSheet(router, {
-      themed: true,
       builder: () => (
         <FrequenceSelectWidget
           title={traductions.transactionFormScheduleFrequenceLabel}
           command={command}
-          frequences={FREQUENCES}
+          frequences={frequences}
           onChange={onChange}
           hideOnce={hideOnce}
           hideCustom={hideCustom}
+          enableCustom={enableCustom}
         />
       ),
     });
 
   // Sur-mesure choisi mais pas encore validé : rouvrir le choix de la périodicité
-  const pendingCustom = command.periodicite != null && !command.done;
+  const pendingCustom = enableCustom && command.periodicite != null && !command.done;
   useEffect(() => {
     if (pendingCustom) select();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pendingCustom, command.periodicite]);
 
   return (
-    <Pressable disabled={readOnly} onPress={select}>
-      <View pointerEvents="none">
-        <CustomTextInput
-          labelText={traductions.transactionFormScheduleFrequenceLabel}
-          value={text}
-          readOnly
-          suffixIcon={!readOnly ? <MaterialIcons name="keyboard-arrow-down" size={24} color={theme.colorScheme.onSurface} /> : null}
-        />
-      </View>
-    </Pressable>
+    <SelectionChamp
+      libelle={traductions.transactionFormScheduleFrequenceLabel}
+      valeur={text}
+      pastille={<SelectionPastille icone={frequenceIcone(command.value)} />}
+      onPress={!readOnly ? select : undefined}
+    />
   );
 }