@pi-spi/app 2.0.0 → 2.1.0

package/src/modules/qrcode/presentation/pages/qrcode_alias_page_share.tsx

@@ -1,11 +1,9 @@
-import { ScrollView, Share, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { ScrollView, Share, 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 { MenuActionItem, MenuActionsWidget } from '../../../../shared/widgets/menu_actions_widget';
+import { SbSelectionOption, SelectionSheet } from '../../../../shared/widgets/selection';
 
 /** Feuille « Partager » : le QR code (image) ou l'alias (texte). */
 export function QrcodeAliasPageShare({
@@ -18,47 +16,41 @@ export function QrcodeAliasPageShare({
   shareQrcode: () => void;
 }) {
   const traductions = useAppLocalizations();
-  const theme = useTheme();
   const router = useAppRouter();
-  const insets = useSafeAreaInsets();
-  const { height } = useWindowDimensions();
 
   return (
-    <View style={[styles.box, { backgroundColor: theme.colorScheme.surface, maxHeight: height * 0.6 }]}>
-      <ScrollView contentContainerStyle={[styles.content, { paddingBottom: 20 + insets.bottom }]}>
-        <Text style={theme.textTheme.headlineMedium}>{traductions.qrcodePagePartageTitle}</Text>
-        <View style={styles.gap20} />
-        <MenuActionsWidget
-          items={[
-            new MenuActionItem(
-              Images.homeFooterQrcode,
-              traductions.qrcodePagePartageQrCodeTitle,
-              traductions.qrcodePagePartageQrCodeSubTitle,
-              () => {
-                AppRouter.pop(router);
-                shareQrcode();
-              },
-              { iconSize: 20 },
-            ),
-            new MenuActionItem(
-              Images.iconsCircleUser,
-              traductions.qrcodePagePartageAliasTitle,
-              traductions.qrcodePagePartageAliasSubTitle,
-              () => {
-                AppRouter.pop(router);
-                void Share.share({ title: traductions.qrcodePagePartageAliasMessage(username), message: alias });
-              },
-              { iconSize: 20 },
-            ),
-          ]}
-        />
-      </ScrollView>
-    </View>
+    <SelectionSheet
+      titre={traductions.qrcodePagePartageTitle}
+      contenu={
+        <ScrollView bounces={false} contentContainerStyle={styles.content}>
+          {/* Partager le QR code */}
+          <SbSelectionOption
+            image={Images.homeFooterQrcode}
+            titre={traductions.qrcodePagePartageQrCodeTitle}
+            sousTitre={traductions.qrcodePagePartageQrCodeSubTitle}
+            onPress={() => {
+              AppRouter.pop(router);
+              shareQrcode();
+            }}
+          />
+          <View style={styles.gap10} />
+          {/* Partager l'alias */}
+          <SbSelectionOption
+            image={Images.iconsCircleUser}
+            titre={traductions.qrcodePagePartageAliasTitle}
+            sousTitre={traductions.qrcodePagePartageAliasSubTitle}
+            onPress={() => {
+              AppRouter.pop(router);
+              void Share.share({ title: traductions.qrcodePagePartageAliasMessage(username), message: alias });
+            }}
+          />
+        </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/subscription/presentation/pages/subscription_details/subscription_details_page.tsx

@@ -116,7 +116,6 @@ export function SubscriptionDetailsPage({
 
   const editNote = async () => {
     const value = await showModalBottomSheet<string>(router, {
-      themed: true,
       builder: () => <SubscriptionDetailsPageNoteSheet note={subscription.motif} />,
     });
     if (value != null && value !== subscription.motif) bloc.add(new SubscriptionDetailsNoteUpdateEvent(value));

package/src/modules/subscription/presentation/pages/subscription_details/subscription_details_page_actions.tsx

@@ -25,7 +25,6 @@ import { SubscriptionAction, SubscriptionDetailsPageActionsConfirm } from './sub
 
 function confirm(router: SdkRouter, action: SubscriptionAction, subscription: Subscription): Promise<boolean | undefined> {
   return showModalBottomSheet<boolean>(router, {
-    themed: true,
     builder: () => <SubscriptionDetailsPageActionsConfirm action={action} isSubcription={subscription.frequence != null} />,
   });
 }

package/src/modules/subscription/presentation/pages/subscription_details/subscription_details_page_note_sheet.tsx

@@ -1,13 +1,11 @@
-import { useEffect, useRef, useState } from 'react';
-import { Animated, Easing, Keyboard, Pressable, ScrollView, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useState } from 'react';
+import { Keyboard, ScrollView, StyleSheet, View } from 'react-native';
 
 import { AppRouter, useAppRouter } from '../../../../../core/router';
-import { useTheme } from '../../../../../core/theme';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
 import { ElevatedButton } from '../../../../../shared/material/buttons';
 import { CustomTextMultipleInput } from '../../../../../shared/widgets/input_text_multiple';
-import { MyPageContainer } from '../../../../../shared/widgets/my_page_container';
+import { SelectionSheet } from '../../../../../shared/widgets/selection';
 import {
   TransactionSendCommandMotif,
   TransactionSendCommandMotifError,
@@ -15,35 +13,15 @@ import {
 
 /**
  * Modifier la note de l'abonnement (feuille du bas, se ferme avec la
- * nouvelle note). Comme le `AnimatedContainer` Flutter, la feuille prend
- * 70 % de l'écran quand le champ a le focus, sa hauteur naturelle sinon.
+ * nouvelle note). La note défile, Enregistrer reste visible au-dessus du
+ * clavier.
  */
 export function SubscriptionDetailsPageNoteSheet({ note }: { note?: string | null }) {
   const traductions = useAppLocalizations();
-  const theme = useTheme();
   const router = useAppRouter();
-  const insets = useSafeAreaInsets();
-  const { height: screenHeight } = useWindowDimensions();
-  const maxHeight = screenHeight * 0.7;
 
   const [command] = useState(() => new TransactionSendCommandMotif({ value: note ?? undefined }));
   const [, setVersion] = useState(0);
-  const [focused, setFocused] = useState(false);
-  const [contentHeight, setContentHeight] = useState<number | null>(null);
-  const height = useRef(new Animated.Value(0)).current;
-  const measured = useRef(false);
-
-  const naturalHeight = contentHeight == null ? 0 : Math.min(contentHeight, maxHeight);
-  useEffect(() => {
-    if (contentHeight == null) return;
-    const target = focused ? maxHeight : naturalHeight;
-    if (!measured.current) {
-      measured.current = true;
-      height.setValue(target);
-      return;
-    }
-    Animated.timing(height, { toValue: target, duration: 300, easing: Easing.inOut(Easing.ease), useNativeDriver: false }).start();
-  }, [focused, contentHeight, naturalHeight, maxHeight, height]);
 
   const canSave = command.value != null && command.value.length > 0 && command.isValid() && command.value !== note;
 
@@ -53,52 +31,35 @@ export function SubscriptionDetailsPageNoteSheet({ note }: { note?: string | nul
   };
 
   return (
-    <Animated.View
-      style={[
-        styles.box,
-        { backgroundColor: theme.colorScheme.surface, maxHeight },
-        contentHeight != null ? { height } : null,
-      ]}
-    >
-      {/* Avant la mesure du contenu, la feuille prend sa hauteur naturelle (pas de flex) */}
-      <Pressable style={contentHeight != null ? styles.flex : null} onPress={Keyboard.dismiss} accessible={false}>
-        <MyPageContainer style={contentHeight != null ? null : styles.noFlex}>
-          <ScrollView
-            keyboardShouldPersistTaps="handled"
-            onContentSizeChange={(_w, h) => setContentHeight(h)}
-            contentContainerStyle={[styles.content, { paddingBottom: 20 + insets.bottom }]}
-          >
-            {/* Titre */}
-            <Text style={theme.textTheme.headlineLarge}>{traductions.transactionFormMotifLabel}</Text>
-            <View style={styles.gap15} />
+    <SelectionSheet
+      titre={traductions.transactionFormMotifLabel}
+      contenu={
+        <>
+          <ScrollView keyboardShouldPersistTaps="handled" style={styles.defile} contentContainerStyle={styles.content}>
             <CustomTextMultipleInput
               defaultValue={note ?? undefined}
               labelText={traductions.transactionFormMotifHint}
               // Message d'erreur à afficher
               messageError={command.error === TransactionSendCommandMotifError.invalid ? traductions.transactionFormMotifInvalid : null}
-              onFocusChange={setFocused}
               onChange={(value) => {
                 command.value = value;
                 command.isValid();
                 setVersion((v) => v + 1);
               }}
             />
-            {/* Bouton */}
-            <View style={styles.btn}>
-              <ElevatedButton onPress={canSave ? () => saveNote(command.value!) : undefined}>{traductions.btnTextSave}</ElevatedButton>
-            </View>
           </ScrollView>
-        </MyPageContainer>
-      </Pressable>
-    </Animated.View>
+          {/* Enregistrer, toujours visible au-dessus du clavier */}
+          <View style={styles.btn}>
+            <ElevatedButton onPress={canSave ? () => saveNote(command.value!) : undefined}>{traductions.btnTextSave}</ElevatedButton>
+          </View>
+        </>
+      }
+    />
   );
 }
 
 const styles = StyleSheet.create({
-  flex: { flex: 1 },
-  noFlex: { flex: 0 },
-  box: { borderTopLeftRadius: 20, borderTopRightRadius: 20, overflow: 'hidden' },
-  content: { paddingTop: 20 },
-  gap15: { height: 15 },
-  btn: { paddingVertical: 16 },
+  defile: { flexShrink: 1 },
+  content: { paddingHorizontal: 20, paddingTop: 8, paddingBottom: 16 },
+  btn: { paddingHorizontal: 20, paddingBottom: 12 },
 });

package/src/modules/subscription/presentation/pages/subscription_list/subscription_list_empty_widget.tsx

@@ -29,7 +29,7 @@ export function SubscriptionListEmptyWidget() {
         <Text style={[theme.textTheme.displaySmall, styles.flex]}>{traductions.subscriptionEmptySubTitle}</Text>
         <ElevatedButton
           style={styles.btn}
-          onPress={() => void showModalBottomSheet(router, { themed: true, builder: () => <SubscriptionMenuWidget /> })}
+          onPress={() => void showModalBottomSheet(router, { builder: () => <SubscriptionMenuWidget /> })}
         >
           {traductions.subscriptionEmptyBtnCreate}
         </ElevatedButton>

package/src/modules/subscription/presentation/pages/subscription_list/subscription_list_widget.tsx

@@ -36,7 +36,7 @@ export function SubscriptionListWidget() {
   if (state instanceof SubscriptionListLoadingState) return <SubscriptionListLoadingWidget />;
 
   const { subscriptions, paiementProgramme } = state;
-  const openMenu = () => void showModalBottomSheet(router, { themed: true, builder: () => <SubscriptionMenuWidget /> });
+  const openMenu = () => void showModalBottomSheet(router, { builder: () => <SubscriptionMenuWidget /> });
 
   const section = (title: string, liste: Subscription[], createFn: () => void) => (
     <View>

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 { SbSelectionOption, 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 */}
+          <SbSelectionOption
+            image={Images.homeFooterTransfer}
+            titre={traductions.subscriptionMenuScheduleTitle}
+            sousTitre={traductions.subscriptionMenuScheduleSubtitle}
+            onPress={() => open(AppRouter.subscriptionSchedule)}
           />
-        </Card>
-      </ScrollView>
-    </View>
+          <View style={styles.gap10} />
+          {/* Souscrire à un abonnement */}
+          <SbSelectionOption
+            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/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/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 },
 });