@pi-spi/app 2.0.0 → 2.2.0

package/src/modules/subscription/presentation/pages/subscription_menu_widget.tsx

@@ -1,60 +1,46 @@
-import { ScrollView, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { ScrollView, StyleSheet, View } from 'react-native';
 
 import { Images } from '../../../../core/assets';
 import { AppRouter, useAppRouter } from '../../../../core/router';
-import { useTheme } from '../../../../core/theme';
 import { useAppLocalizations } from '../../../../l10n/localizations';
-import { Card } from '../../../../shared/material/card';
-import { MenuActionItem, MenuActionsWidget } from '../../../../shared/widgets/menu_actions_widget';
+import { SelectionOption, SelectionSheet } from '../../../../shared/widgets/selection';
 
 /** Menu de création : programmer un paiement ou souscrire à un abonnement (feuille du bas) */
 export function SubscriptionMenuWidget() {
   const traductions = useAppLocalizations();
-  const theme = useTheme();
   const router = useAppRouter();
-  const { height } = useWindowDimensions();
-  const insets = useSafeAreaInsets();
   // Fermer le menu avant d'ouvrir la page : sinon il reste affiché par-dessus
   const open = (location: string) => {
     AppRouter.pop(router);
     void AppRouter.push(router, location);
   };
   return (
-    <View style={[styles.box, { maxHeight: height * 0.4, backgroundColor: theme.colorScheme.surface }]}>
-      <ScrollView contentContainerStyle={[styles.content, { paddingBottom: 20 + insets.bottom }]}>
-        {/* Titre */}
-        <Text style={theme.textTheme.headlineMedium}>{traductions.subscriptionEmptyBtnCreate}</Text>
-        <View style={styles.gap20} />
-        <Card>
-          <MenuActionsWidget
-            items={[
-              // Programmer
-              new MenuActionItem(
-                Images.homeFooterTransfer,
-                traductions.subscriptionMenuScheduleTitle,
-                traductions.subscriptionMenuScheduleSubtitle,
-                () => open(AppRouter.subscriptionSchedule),
-                { iconSize: 20 },
-              ),
-              // Souscrire à un abonnement
-              new MenuActionItem(
-                Images.iconRepeat,
-                traductions.subscriptionMenuSubscribeTitle,
-                traductions.subscriptionMenuSubscribeSubtitle,
-                () => open(AppRouter.subscriptionSubscribe),
-                { iconSize: 20 },
-              ),
-            ]}
+    <SelectionSheet
+      titre={traductions.subscriptionEmptyBtnCreate}
+      contenu={
+        <ScrollView bounces={false} contentContainerStyle={styles.content}>
+          {/* Programmer */}
+          <SelectionOption
+            image={Images.homeFooterTransfer}
+            titre={traductions.subscriptionMenuScheduleTitle}
+            sousTitre={traductions.subscriptionMenuScheduleSubtitle}
+            onPress={() => open(AppRouter.subscriptionSchedule)}
           />
-        </Card>
-      </ScrollView>
-    </View>
+          <View style={styles.gap10} />
+          {/* Souscrire à un abonnement */}
+          <SelectionOption
+            image={Images.iconRepeat}
+            titre={traductions.subscriptionMenuSubscribeTitle}
+            sousTitre={traductions.subscriptionMenuSubscribeSubtitle}
+            onPress={() => open(AppRouter.subscriptionSubscribe)}
+          />
+        </ScrollView>
+      }
+    />
   );
 }
 
 const styles = StyleSheet.create({
-  box: { borderRadius: 20, overflow: 'hidden' },
-  content: { padding: 20 },
-  gap20: { height: 20 },
+  content: { paddingHorizontal: 20, paddingTop: 8, paddingBottom: 16 },
+  gap10: { height: 10 },
 });

package/src/modules/transactions/domain/models/transaction_send/transaction_send_command_othr.ts

@@ -26,8 +26,7 @@ export class TransactionSendCommandOthr {
 
   isValid(): boolean {
     const compte = this.compte();
-    // `else if` ici : en Dart, l'erreur « vide » était aussitôt écrasée
-    // (et un compte absent faisait planter le test de longueur).
+    // Un compte vide ou absent est refusé (« vide »), avant le test de longueur
     if (compte == null || compte.length === 0) {
       this.error = TransactionSendCommandOthrError.empty;
     } else if (compte.length > 34) {

package/src/modules/transactions/infra/transaction_output_remote.ts

@@ -78,7 +78,12 @@ export class TransactionOutputRemote {
 
   /** En-têtes communs des requêtes SSE */
   private sseHeaders(): Record<string, string> {
-    return { Accept: 'text/event-stream', 'Cache-Control': 'no-cache', Authorization: `Bearer ${Api.accessToken}` };
+    return {
+      Accept: 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      Authorization: `Bearer ${Api.accessToken}`,
+      ...Api.apiKeyHeaders(),
+    };
   }
 
   /** Confirmer une transaction : la réponse finale (irrévocable/rejetée) arrive par SSE. */

package/src/modules/transactions/presentation/bloc/transaction_send/transaction_send_bloc.ts

@@ -125,6 +125,20 @@ export class TransactionSendBloc extends Bloc<TransactionSendEvent, TransactionS
         }
         this.state.participants = await this.participantInputPort.search();
       }
+      // Formulaire affiché : le solde vient d'arriver (récupéré après
+      // l'ouverture), on revalide le montant déjà rempli (formulaire
+      // prérempli depuis une transaction) pour afficher « solde
+      // insuffisant » et désactiver « Continuer ». Seul le montant est
+      // revalidé : un formulaire vierge ne doit pas afficher d'erreurs.
+      const current = this.state;
+      if (solde != null && current instanceof TransactionSendFormInputState && current.command.amount?.value != null) {
+        const form = current.command;
+        form.solde = current.solde ?? undefined;
+        form.amount!.solde = current.solde ?? undefined;
+        form.amount!.isValid();
+        emit(new TransactionSendFormInputState(form, this.data()));
+        return;
+      }
       this.emitUpdated(emit);
     } catch {
       // On garde l'état courant
@@ -169,6 +183,9 @@ export class TransactionSendBloc extends Bloc<TransactionSendEvent, TransactionS
   private onFormChanged(event: TransactionSendFormChangedEvent, emit: Emitter<TransactionSendState>) {
     const form = event.command;
     form.solde = this.state.solde ?? undefined;
+    // Le contrôle du solde se fait sur le montant : un montant prérempli
+    // (envoi depuis une transaction) n'a pas encore de solde
+    if (form.amount != null) form.amount.solde = form.solde;
     if (form.othr != null) {
       form.method = form.othr.isValidIban() ? TransactionSendMethod.iban : TransactionSendMethod.othr;
     }

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

@@ -52,7 +52,6 @@ export function TransactionDetailsPageActions({ transaction }: { transaction: Tr
   /** Ouvre une feuille ayant accès au bloc du détail */
   const showSheet = (content: ReactNode) =>
     void showModalBottomSheet(router, {
-      themed: true,
       builder: () => <BlocProvider blocs={[transactionDetailsBloc]}>{content}</BlocProvider>,
     });
 

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

@@ -1,16 +1,15 @@
-import { MaterialIcons } from '@expo/vector-icons';
 import { useState } from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { ScrollView, StyleSheet, Text } from 'react-native';
 
 import { useBloc } from '../../../../../core/bloc_react';
-import { useTheme } from '../../../../../core/theme';
+import { Themer, useTheme } from '../../../../../core/theme';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
 import { ElevatedButton } from '../../../../../shared/material/buttons';
+import { SelectionBoutons, SelectionChoix, SelectionSheet } from '../../../../../shared/widgets/selection';
 import { TransactionCancelReason } from '../../../domain/models/transaction_cancel_reason';
 import { TransactionDetailsBloc } from '../../bloc/transaction_details/transaction_details_bloc';
 import { TransactionCancelSendEvent } from '../../bloc/transaction_details/transaction_details_event';
 import { TransactionCancelReasonText } from '../transaction_cancel/transaction_cancel_reason_text';
-import { SheetBox } from './sheet_box';
 
 /** Feuille « Demander l'annulation » : choix du motif puis envoi de la demande. */
 export function TransactionDetailsPageActionsCancel() {
@@ -22,45 +21,44 @@ export function TransactionDetailsPageActionsCancel() {
   const tx = bloc.state.transaction!;
 
   return (
-    <SheetBox>
-      {/* Title */}
-      <Text style={theme.textTheme.headlineLarge}>{traductions.transactionDetailsCancelTitle}</Text>
-      <View style={styles.gap20} />
-      {/* SubTitle */}
-      <Text style={theme.textTheme.displaySmall}>{traductions.transactionDetailsCancelSubTitle}</Text>
-      <View style={styles.gap10} />
-      {/* Raisons de la demande d'annulation */}
-      {TransactionCancelReason.values().map((motif) => (
-        <View key={motif} style={styles.chipRow}>
-          <Pressable
-            accessibilityRole="button"
-            onPress={() => setReason(motif)}
-            style={[styles.chip, { backgroundColor: theme.secondaryHeaderColor }]}
-          >
-            {reason === motif && (
-              <MaterialIcons name="check" size={18} color={theme.colorScheme.onSurface} style={styles.check} />
-            )}
-            <Text style={theme.textTheme.bodyMedium}>{TransactionCancelReasonText.label(motif, traductions)}</Text>
-          </Pressable>
-        </View>
-      ))}
-      {/* Bouton Demander l'annulation */}
-      <View style={styles.gap10} />
-      <ElevatedButton
-        style={styles.button}
-        onPress={reason != null ? () => bloc.add(new TransactionCancelSendEvent(tx, reason)) : undefined}
-      >
-        {traductions.transactionDetailsCancelBtnSend}
-      </ElevatedButton>
-    </SheetBox>
+    <SelectionSheet
+      titre={traductions.transactionDetailsCancelTitle}
+      entete={
+        <Text style={[theme.textTheme.displaySmall, { color: Themer.neural03Color }]}>
+          {traductions.transactionDetailsCancelSubTitle}
+        </Text>
+      }
+      contenu={
+        <>
+          {/* Raisons de la demande d'annulation */}
+          <ScrollView bounces={false} style={styles.defile} contentContainerStyle={styles.content}>
+            {TransactionCancelReason.values().map((motif) => (
+              <SelectionChoix
+                key={motif}
+                texte={TransactionCancelReasonText.label(motif, traductions)}
+                choisi={reason === motif}
+                onPress={() => setReason(motif)}
+              />
+            ))}
+          </ScrollView>
+          {/* Bouton Demander l'annulation */}
+          <SelectionBoutons
+            boutons={[
+              <ElevatedButton
+                key="envoyer"
+                onPress={reason != null ? () => bloc.add(new TransactionCancelSendEvent(tx, reason)) : undefined}
+              >
+                {traductions.transactionDetailsCancelBtnSend}
+              </ElevatedButton>,
+            ]}
+          />
+        </>
+      }
+    />
   );
 }
 
 const styles = StyleSheet.create({
-  gap10: { height: 10 },
-  gap20: { height: 20 },
-  chipRow: { paddingVertical: 10, alignItems: 'flex-start' },
-  chip: { flexDirection: 'row', alignItems: 'center', borderRadius: 8, paddingHorizontal: 12, minHeight: 32 },
-  check: { marginRight: 8 },
-  button: { height: 56 },
+  defile: { flexShrink: 1 },
+  content: { paddingHorizontal: 20, paddingTop: 4, paddingBottom: 16 },
 });

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

@@ -1,21 +1,19 @@
-import { StyleSheet, Text, View } from 'react-native';
+import { ScrollView, StyleSheet, View } from 'react-native';
 
 import { useBloc, useBlocBuilder } from '../../../../../core/bloc_react';
 import { Di } from '../../../../../core/di';
 import { AppRouter, useAppRouter } from '../../../../../core/router';
-import { useTheme } from '../../../../../core/theme';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
 import { ElevatedButton, FilledTonalButton } from '../../../../../shared/material/buttons';
 import { InputAmount } from '../../../../../shared/widgets/input_amount';
 import { CustomTextInput } from '../../../../../shared/widgets/input_text';
+import { SelectionBoutons, SelectionSheet } from '../../../../../shared/widgets/selection';
 import { TransactionDetailsBloc } from '../../bloc/transaction_details/transaction_details_bloc';
 import { TransactionReturnSendEvent } from '../../bloc/transaction_details/transaction_details_event';
-import { SheetBox } from './sheet_box';
 
 /** Feuille « Retourner les fonds » d'un transfert reçu, si le solde le permet. */
 export function TransactionDetailsPageActionsReturn() {
   const traductions = useAppLocalizations();
-  const theme = useTheme();
   const router = useAppRouter();
   const bloc = useBloc(TransactionDetailsBloc);
   const state = useBlocBuilder(bloc);
@@ -30,50 +28,47 @@ export function TransactionDetailsPageActionsReturn() {
   };
 
   return (
-    <SheetBox>
-      {/* Titre */}
-      <Text style={[theme.textTheme.titleSmall, styles.center]}>{traductions.transactionDetailsReturnTitle}</Text>
-      <View style={styles.gap20} />
-      {/* EndToEndId */}
-      <CustomTextInput labelText={traductions.transactionDetailsIdentifiant} value={tx.endToEndId} readOnly />
-      <View style={styles.gap20} />
-      {/* Nom du payeur */}
-      <CustomTextInput labelText={traductions.transactionDetailsPayeurLabel} value={tx.clientNom} readOnly />
-      <View style={styles.gap20} />
-      {/* Montant */}
-      <InputAmount
-        key={solde}
-        solde={solde}
-        hintText={traductions.transactionFormAmountHint}
-        value={String(Math.trunc(tx.montant))}
-        readOnly
-        messageError={isSoldeInsuffisant ? traductions.transactionFormAmountInvalid : null}
-      />
-      <View style={styles.gap20} />
-      <View style={styles.buttons}>
-        {/* Non je ne retourne pas */}
-        <View style={styles.flex}>
-          <FilledTonalButton style={styles.button} onPress={() => AppRouter.pop(router)}>
-            {traductions.btnTextNo}
-          </FilledTonalButton>
-        </View>
-        <View style={styles.gap16} />
-        {/* Oui je retourne les fonds */}
-        <View style={styles.flex}>
-          <ElevatedButton style={styles.button} onPress={!isSoldeInsuffisant ? () => void confirmReturn() : undefined}>
-            {traductions.btnTextYes}
-          </ElevatedButton>
-        </View>
-      </View>
-    </SheetBox>
+    <SelectionSheet
+      titre={traductions.transactionDetailsReturnTitle}
+      contenu={
+        <>
+          <ScrollView keyboardShouldPersistTaps="handled" bounces={false} style={styles.defile} contentContainerStyle={styles.content}>
+            {/* EndToEndId */}
+            <CustomTextInput labelText={traductions.transactionDetailsIdentifiant} value={tx.endToEndId} readOnly />
+            <View style={styles.gap12} />
+            {/* Nom du payeur */}
+            <CustomTextInput labelText={traductions.transactionDetailsPayeurLabel} value={tx.clientNom} readOnly />
+            <View style={styles.gap12} />
+            {/* Montant */}
+            <InputAmount
+              key={solde}
+              solde={solde}
+              hintText={traductions.transactionFormAmountHint}
+              value={String(Math.trunc(tx.montant))}
+              readOnly
+              messageError={isSoldeInsuffisant ? traductions.transactionFormAmountInvalid : null}
+            />
+          </ScrollView>
+          <SelectionBoutons
+            boutons={[
+              // Non je ne retourne pas
+              <FilledTonalButton key="non" onPress={() => AppRouter.pop(router)}>
+                {traductions.btnTextNo}
+              </FilledTonalButton>,
+              // Oui je retourne les fonds
+              <ElevatedButton key="oui" onPress={!isSoldeInsuffisant ? () => void confirmReturn() : undefined}>
+                {traductions.btnTextYes}
+              </ElevatedButton>,
+            ]}
+          />
+        </>
+      }
+    />
   );
 }
 
 const styles = StyleSheet.create({
-  center: { textAlign: 'center' },
-  gap16: { width: 16 },
-  gap20: { height: 20 },
-  buttons: { flexDirection: 'row', height: 56 },
-  flex: { flex: 1 },
-  button: { height: 56 },
+  defile: { flexShrink: 1 },
+  content: { paddingHorizontal: 20, paddingTop: 8, paddingBottom: 16 },
+  gap12: { height: 12 },
 });

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_date.tsx

@@ -1,20 +1,22 @@
-import { MaterialIcons } from '@expo/vector-icons';
-import { Pressable, View } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 
 import { useBloc } from '../../../../../core/bloc_react';
 import { useAppRouter } from '../../../../../core/router';
-import { useTheme } from '../../../../../core/theme';
+import { Themer, useTheme } from '../../../../../core/theme';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
 import { DateFormat } from '../../../../../shared/utils/date_format';
-import { CustomTextInput } from '../../../../../shared/widgets/input_text';
 import { plageText, showSelectDate, showSelectDateRange } from '../../../../../shared/widgets/select_date_widget';
+import { SelectionPastille, SelectionChamp } from '../../../../../shared/widgets/selection';
 import type { Transaction } from '../../../domain/models/transaction';
 import type { TransactionSendCommand } from '../../../domain/models/transaction_send/transaction_send_command';
 import { TransactionSendCommandScheduleError } from '../../../domain/models/transaction_send/transaction_send_command_schedule';
 import { TransactionSendBloc } from '../../bloc/transaction_send/transaction_send_bloc';
 import { TransactionSendScheduleEvent } from '../../bloc/transaction_send/transaction_send_event';
 
-/** Date (une fois) ou plage de dates (fréquence) de la programmation, à partir de demain. */
+/**
+ * Date (une fois) ou plage de dates (fréquence) de la programmation, à
+ * partir de demain : carte qui ouvre le calendrier.
+ */
 export function TransactionSendFormInputDate({
   command,
   transaction,
@@ -32,7 +34,7 @@ export function TransactionSendFormInputDate({
   const schedule = command.schedule!;
   const withFrequence = schedule.frequence?.value != null;
 
-  let text = '';
+  let text: string | null = null;
   if (schedule.dateDebut != null) {
     text = withFrequence ? plageText(traductions, formatter, schedule.dateDebut, schedule.dateFin) : formatter.format(schedule.dateDebut);
   }
@@ -68,17 +70,24 @@ export function TransactionSendFormInputDate({
     bloc.add(new TransactionSendScheduleEvent(command, transaction));
   };
 
+  const erreur = schedule.error === TransactionSendCommandScheduleError.debutEmpty ? traductions.aliasFormEmpty : '';
+
   return (
-    <Pressable onPress={() => void select()}>
-      <View pointerEvents="none">
-        <CustomTextInput
-          labelText={withFrequence ? traductions.transactionFormScheduleDateRangeLabel : traductions.transactionFormScheduleDateLabel}
-          value={text}
-          readOnly
-          suffixIcon={<MaterialIcons name="date-range" size={24} color={theme.colorScheme.onSurface} />}
-          messageError={schedule.error === TransactionSendCommandScheduleError.debutEmpty ? traductions.aliasFormEmpty : ''}
-        />
-      </View>
-    </Pressable>
+    <View>
+      <SelectionChamp
+        libelle={withFrequence ? traductions.transactionFormScheduleDateRangeLabel : traductions.transactionFormScheduleDateLabel}
+        valeur={text}
+        pastille={<SelectionPastille icone={withFrequence ? 'date-range' : 'event'} />}
+        onPress={() => void select()}
+      />
+      {/* Message d'erreur */}
+      {erreur.length > 0 && (
+        <Text style={[theme.textTheme.displaySmall, styles.erreur, { color: Themer.systemErrorColor }]}>{erreur}</Text>
+      )}
+    </View>
   );
 }
+
+const styles = StyleSheet.create({
+  erreur: { paddingHorizontal: 16, paddingTop: 4 },
+});