@pi-spi/app 0.0.0-stage → 1.2.0

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

@@ -0,0 +1,229 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { Asset } from 'expo-asset';
+import { File, Paths } from 'expo-file-system';
+import { Image } from 'expo-image';
+import * as Print from 'expo-print';
+import * as Sharing from 'expo-sharing';
+import { Platform, Pressable, ScrollView, StyleSheet, Text, useWindowDimensions, View, type TextStyle } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { Images } from '../../../../../core/assets';
+import { AppEnv } from '../../../../../core/env';
+import { Logger } from '../../../../../core/logger';
+import { useAppRouter } from '../../../../../core/router';
+import { Themer, useTheme } from '../../../../../core/theme';
+import type { AppLocalizations } from '../../../../../l10n/app_localizations';
+import { useAppLocalizations } from '../../../../../l10n/localizations';
+import { Card } from '../../../../../shared/material/card';
+import { DateFormat } from '../../../../../shared/utils/date_format';
+import { formatMontant } from '../../../../../shared/widgets/amount_widget';
+import { CustomLoadingDialog } from '../../../../../shared/widgets/loading_page';
+import type { Participant } from '../../../domain/models/participant/participant';
+import { TransactionSens, type Transaction } from '../../../domain/models/transaction';
+
+const logger = new Logger();
+
+/** Montant en francs CFA (≈ `NumberFormat.currency(symbol: 'FCFA ', decimalDigits: 0)`). */
+function currency(montant: number, locale: string): string {
+  const value = formatMontant(montant, locale);
+  return locale.startsWith('en') ? `FCFA ${value}` : `${value} FCFA`;
+}
+
+type RecuItem = { label: string; value: string };
+
+/** Lignes label/valeur du reçu, dans l'ordre (écran et PDF). */
+function recuItems(
+  transaction: Transaction,
+  participants: Participant[],
+  traductions: AppLocalizations,
+  locale: string,
+  datePattern: string,
+): RecuItem[] {
+  const items: RecuItem[] = [{ label: traductions.transactionDetailsRecuInfoReference, value: transaction.endToEndId }];
+  if (transaction.txId != null) {
+    items.push({ label: traductions.transactionDetailsRecuInfoIdentifiant, value: transaction.txId });
+  }
+  items.push(
+    { label: traductions.transactionDetailsRecuInfoMontant, value: currency(Math.abs(transaction.montant), locale) },
+    {
+      label: traductions.transactionDetailsRecuInfoFrais,
+      value:
+        transaction.montantFrais != null
+          ? currency(transaction.montantFrais, locale)
+          : traductions.transactionDetailsRecuInfoFraisDefault,
+    },
+    {
+      label:
+        transaction.sens === TransactionSens.credit
+          ? traductions.transactionDetailsRecuInfoPayeurLabel
+          : traductions.transactionDetailsRecuInfoPayeLabel,
+      value: transaction.clientNom,
+    },
+    {
+      label:
+        transaction.clientAlias != null
+          ? traductions.transactionDetailsRecuInfoClientAlias
+          : traductions.transactionDetailsRecuInfoClientCompte,
+      value: (transaction.clientAlias ?? transaction.clientCompte) ?? '',
+    },
+  );
+  const psp =
+    transaction.clientAlias == null && transaction.clientPSP != null
+      ? participants.find((p) => p.codeMembre === transaction.clientPSP)
+      : undefined;
+  if (psp != null) items.push({ label: traductions.transactionDetailsRecuInfoClientInstitution, value: psp.nomMembre });
+  if (transaction.dateOperation != null) {
+    items.push({
+      label: traductions.transactionDetailsRecuInfoDate,
+      value: new DateFormat(datePattern, locale).format(transaction.dateOperation),
+    });
+  }
+  if (transaction.motif != null) items.push({ label: traductions.transactionFormMotifLabel, value: transaction.motif });
+  return items;
+}
+
+/** Reçu de paiement d'une transaction irrévocable, partageable en PDF. */
+export function TransactionDetailsPageRecu({
+  transaction,
+  participants,
+}: {
+  transaction: Transaction;
+  participants: Participant[];
+}) {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const router = useAppRouter();
+  const insets = useSafeAreaInsets();
+  const { height } = useWindowDimensions();
+  const locale = traductions.localeName;
+
+  const recuSmallTitle: TextStyle = { ...theme.textTheme.headlineSmall, fontWeight: '800', fontSize: 15 };
+  const recuSubTitle: TextStyle = { ...theme.textTheme.bodyMedium, fontWeight: '600', fontSize: 14 };
+
+  const buildAndSharePdf = async () => {
+    CustomLoadingDialog.show(router);
+    try {
+      const html = await buildPdfHtml(transaction, participants, traductions, locale);
+      const { uri } = await Print.printToFileAsync({ html });
+      // Copie nommée « reçu-<endToEndId>.pdf » pour le partage
+      const file = new File(Paths.cache, `reçu-${transaction.endToEndId}.pdf`);
+      if (file.exists) file.delete();
+      await new File(uri).move(file);
+      CustomLoadingDialog.hide(router);
+      await Sharing.shareAsync(file.uri, {
+        mimeType: 'application/pdf',
+        UTI: 'com.adobe.pdf',
+        dialogTitle: traductions.transactionDetailsRecuTitle,
+      });
+    } catch (e) {
+      logger.e('PDF error', { error: e });
+      CustomLoadingDialog.hide(router);
+    }
+  };
+
+  return (
+    <View
+      style={[
+        styles.sheet,
+        { backgroundColor: theme.colorScheme.surface, minHeight: height * 0.2, maxHeight: height * 0.85, paddingBottom: insets.bottom },
+      ]}
+    >
+      <View style={styles.gap10} />
+      {/* Bouton partager */}
+      <View style={styles.shareRow}>
+        <Pressable accessibilityRole="button" hitSlop={8} style={styles.iconButton} onPress={() => void buildAndSharePdf()}>
+          <MaterialIcons name={Platform.OS === 'ios' ? 'ios-share' : 'share'} size={24} color={theme.colorScheme.onSurface} />
+        </Pressable>
+      </View>
+      <View style={styles.gap20} />
+      {/* Reçu affiché */}
+      <ScrollView style={styles.flexShrink}>
+        <Card>
+          <View style={styles.card}>
+            <Image source={Images.logoSpiLight} style={styles.logo} contentFit="contain" />
+            <View style={[styles.banner, { backgroundColor: theme.primaryColor }]}>
+              <Text style={[theme.textTheme.titleSmall, styles.bannerText]}>{traductions.transactionDetailsRecuTitle}</Text>
+            </View>
+            <View style={styles.gap10} />
+            <View style={styles.items}>
+              {recuItems(transaction, participants, traductions, locale, 'd/MM/yy, HH:mm').map((item, i) => (
+                <View key={i} style={i > 0 ? styles.itemGap : null}>
+                  <Text style={recuSubTitle}>{item.label}</Text>
+                  <Text style={recuSmallTitle}>{item.value}</Text>
+                </View>
+              ))}
+            </View>
+            <View style={styles.gap10} />
+          </View>
+        </Card>
+      </ScrollView>
+    </View>
+  );
+}
+
+function escapeHtml(value: string): string {
+  return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+/** Logo du SDK en `data:` pour l'insérer dans le HTML du PDF. */
+async function logoDataUri(): Promise<string | null> {
+  try {
+    const asset = await Asset.fromModule(Images.logoSpiLight).downloadAsync();
+    if (asset.localUri == null) return null;
+    return `data:image/png;base64,${await new File(asset.localUri).base64()}`;
+  } catch {
+    return null;
+  }
+}
+
+/** Même mise en page que le PDF du SDK Flutter : logo, bandeau, tableau, pied de page. */
+async function buildPdfHtml(
+  transaction: Transaction,
+  participants: Participant[],
+  traductions: AppLocalizations,
+  locale: string,
+): Promise<string> {
+  const logo = await logoDataUri();
+  const primaryColor = '#F2A900';
+  const rows = recuItems(transaction, participants, traductions, locale, 'd/MM/yyyy, HH:mm')
+    .map(
+      (item) =>
+        `<tr><td class="label">${escapeHtml(item.label)}</td><td class="value">${escapeHtml(item.value)}</td></tr>`,
+    )
+    .join('');
+  const generated = `Généré le ${new DateFormat("d MMMM yyyy 'à' HH:mm", locale).format(new Date())} © ${escapeHtml(AppEnv.appName)}`;
+  return `<!DOCTYPE html><html><head><meta charset="utf-8" />
+<style>
+  @page { size: A4; margin: 40px 48px; }
+  body { font-family: Helvetica, Arial, sans-serif; margin: 0; display: flex; flex-direction: column; min-height: calc(297mm - 80px); }
+  .logo { display: block; margin: 0 auto 24px; height: 50px; width: 140px; object-fit: contain; }
+  .banner { background: ${primaryColor}; border-radius: 8px; padding: 12px 20px; text-align: center; color: #fff; font-weight: bold; font-size: 18px; margin-bottom: 28px; }
+  table { width: 100%; border-collapse: collapse; }
+  td { padding: 10px 0; border-bottom: 0.5px solid #E0E0E0; vertical-align: top; }
+  .label { width: 40%; font-size: 11px; color: #616161; }
+  .value { width: 60%; font-size: 12px; color: #000; font-weight: bold; }
+  .spacer { flex: 1; }
+  .footer { border-top: 1px solid #BDBDBD; padding-top: 6px; font-size: 9px; color: #757575; }
+</style></head><body>
+  ${logo != null ? `<img class="logo" src="${logo}" />` : ''}
+  <div class="banner">${escapeHtml(traductions.transactionDetailsRecuTitle)}</div>
+  <table>${rows}</table>
+  <div class="spacer"></div>
+  <div class="footer">${generated}</div>
+</body></html>`;
+}
+
+const styles = StyleSheet.create({
+  sheet: { borderRadius: 20, overflow: 'hidden' },
+  flexShrink: { flexShrink: 1 },
+  shareRow: { flexDirection: 'row', justifyContent: 'flex-end' },
+  iconButton: { padding: 8 },
+  card: { padding: 20, alignItems: 'center' },
+  logo: { height: 60, width: 160 },
+  banner: { alignSelf: 'stretch', height: 50, marginVertical: 25, borderRadius: 8, alignItems: 'center', justifyContent: 'center' },
+  bannerText: { color: Themer.whiteColor, fontSize: 20, fontWeight: '900' },
+  items: { alignSelf: 'stretch' },
+  itemGap: { marginTop: 10 },
+  gap10: { height: 10 },
+  gap20: { height: 20 },
+});

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

@@ -0,0 +1,186 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { File, Paths } from 'expo-file-system';
+import { Image } from 'expo-image';
+import * as Sharing from 'expo-sharing';
+import { useEffect, useState } from 'react';
+import { Platform, Pressable, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
+
+import { Logger } from '../../../../../core/logger';
+import { AppRouter, useAppRouter, type SdkRouter } from '../../../../../core/router';
+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 { showModalBottomSheet } from '../../../../../shared/material/overlays';
+import { ImageSelectWidget } from '../../../../../shared/widgets/image_select_widget';
+import type { Transaction } from '../../../domain/models/transaction';
+
+const logger = new Logger();
+
+/** Fichier du ticket de caisse d'une transaction (dans les documents de l'app). */
+function ticketFile(transaction: Transaction): File {
+  return new File(Paths.document, `${transaction.endToEndId}.png`);
+}
+
+/**
+ * Ticket de caisse d'une transaction : bouton « Téléverser » s'il n'y en a
+ * pas, sinon sa miniature, qui ouvre l'aperçu (partager, supprimer).
+ */
+export function TransactionDetailsPageTicket({ transaction }: { transaction: Transaction }) {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const router = useAppRouter();
+  /** Chemin vers le ticket de caisse (avec un suffixe pour rafraîchir l'image) */
+  const [ticketUri, setTicketUri] = useState<string | null>(null);
+
+  // Rechercher le ticket de caisse
+  useEffect(() => {
+    try {
+      const file = ticketFile(transaction);
+      if (file.exists) setTicketUri(file.uri);
+    } catch {
+      logger.d('Can not load ticket de caisse');
+    }
+  }, [transaction]);
+
+  /** Enregistrer le ticket de caisse */
+  const saveTicket = async (uri: string) => {
+    try {
+      const destination = ticketFile(transaction);
+      if (destination.exists) destination.delete();
+      // Copier l'image dans le répertoire de stockage local
+      await new File(uri).copy(destination);
+      if (destination.exists) setTicketUri(`${destination.uri}?v=${Date.now()}`);
+    } catch (e) {
+      logger.e('Cannot save ticket', { error: e });
+    }
+  };
+
+  /** Supprimer le ticket de caisse */
+  const deleteTicket = () => {
+    AppRouter.pop(router, { value: true });
+    try {
+      ticketFile(transaction).delete();
+    } catch (e) {
+      logger.e('Cannot delete ticket', { error: e });
+    }
+    setTicketUri(null);
+  };
+
+  if (ticketUri == null) {
+    return (
+      <TextButtonIcon
+        onPress={() =>
+          void showModalBottomSheet(router, {
+            builder: () => (
+              <ImageSelectWidget
+                title={traductions.transactionDetailsTicketSaveTitle}
+                onSelect={(uri) => {
+                  if (uri != null) {
+                    AppRouter.pop(router);
+                    void saveTicket(uri);
+                  }
+                }}
+              />
+            ),
+          })
+        }
+        icon={<MaterialIcons name="photo-camera" size={24} color={theme.textButtonTheme.foregroundColor} />}
+        label={traductions.transactionDetailsTeleverser}
+      />
+    );
+  }
+
+  return (
+    <Pressable
+      accessibilityRole="imagebutton"
+      onPress={() =>
+        void showModalBottomSheet<boolean>(router, {
+          builder: () => (
+            <TicketVisualiser router={router} uri={ticketUri} transaction={transaction} onDelete={deleteTicket} />
+          ),
+        })
+      }
+    >
+      <Image source={{ uri: ticketUri }} style={styles.thumbnail} contentFit="cover" />
+    </Pressable>
+  );
+}
+
+/** Feuille pour visualiser le ticket de caisse */
+function TicketVisualiser({
+  uri,
+  transaction,
+  onDelete,
+}: {
+  router: SdkRouter;
+  uri: string;
+  transaction: Transaction;
+  onDelete: () => void;
+}) {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  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}>
+            <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>
+  );
+}
+
+/** Partager le ticket de caisse */
+async function shareTicket(transaction: Transaction, traductions: AppLocalizations) {
+  try {
+    const file = ticketFile(transaction);
+    // Copie nommée « reçu-<endToEndId>.png » pour le partage
+    const shared = new File(Paths.cache, `reçu-${transaction.endToEndId}.png`);
+    if (shared.exists) shared.delete();
+    await file.copy(shared);
+    await Sharing.shareAsync(shared.uri, { mimeType: 'image/png', dialogTitle: traductions.transactionDetailsTicket });
+  } catch (e) {
+    logger.e('Error while sharing ticket', { error: e });
+  }
+}
+
+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 },
+});

package/src/modules/transactions/presentation/pages/transaction_error_text.ts

@@ -0,0 +1,56 @@
+import type { AppLocalizations } from '../../../../l10n/app_localizations';
+import { TransactionError } from '../../domain/models/transaction_error';
+
+/**
+ * Message d'une erreur de transaction ([error] = nom de l'erreur). Pour un
+ * bénéficiaire introuvable, le message dépend de la recherche (par alias
+ * ou par compte).
+ */
+export function getTransactionErrorDescription(
+  localisation: AppLocalizations,
+  error: string,
+  isByAlias: boolean,
+): string {
+  switch (error) {
+    // Alias introuvable après recherche d'alias
+    case TransactionError.beneficiaryNotFound:
+      return isByAlias ? localisation.transactionErrorAliasNotFound : localisation.transactionErrorCompteNotFound;
+    case TransactionError.pspPayeurIndisponible:
+      return localisation.transactionErrorEmetteurIndisponible;
+    case TransactionError.pspPayeIndisponible:
+      return localisation.transactionErrorDestinataireIndisponible;
+    case TransactionError.invalidBeneficiary:
+      return localisation.transactionErrorInvalidBeneficiaire;
+    case TransactionError.reservationError:
+      return localisation.transactionErrorSoldeInsuffisant;
+    case TransactionError.timeoutInterne:
+      return localisation.transactionErrorTimeoutInterne;
+    case TransactionError.errorInterne:
+      return localisation.transactionErrorErrorInterne;
+    case TransactionError.toujoursInitier:
+      return localisation.transactionErrorToujoursInitier;
+    case TransactionError.interdit:
+      return localisation.transactionErrorInterdit;
+    case TransactionError.connection:
+      return localisation.internetErrorMessage;
+    case TransactionError.location:
+      return localisation.locationErrorMessage;
+    case TransactionError.clientPayeCompteInvalid:
+      return localisation.transactionErrorClientBeneficaireCompteInvalid;
+    case TransactionError.clientPayeurCompteCloture:
+      return localisation.transactionErrorClientExpediteurCompteCloture;
+    case TransactionError.clientPayeCompteCloture:
+      return localisation.transactionErrorClientBeneficaireCompteCloture;
+    case TransactionError.clientPayeCompteBloque:
+      return localisation.transactionErrorClientBeneficaireCompteBloque;
+    case TransactionError.clientPayeCompteLimite:
+      return localisation.transactionErrorClientBeneficaireCompteLimite;
+    case TransactionError.clientPayeCompteInterdit:
+      return localisation.transactionErrorClientBeneficaireCompteInterdit;
+    case TransactionError.clientPayeCompteTransactionInterdit:
+      return localisation.transactionErrorClientBeneficaireCompteTxInterdit;
+    // Toute autre erreur
+    default:
+      return localisation.transactionErrorUnknow;
+  }
+}

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

@@ -0,0 +1,20 @@
+import { Image } from 'expo-image';
+import { Pressable, StyleSheet } from 'react-native';
+
+import { Images } from '../../../../../core/assets';
+import { useTheme } from '../../../../../core/theme';
+
+/** Bouton « coller » des champs alias et compte. */
+export function PasteButton({ onPress }: { onPress: () => void }) {
+  const theme = useTheme();
+  return (
+    <Pressable accessibilityRole="button" hitSlop={8} style={styles.button} onPress={onPress}>
+      <Image source={Images.iconTransactionPasteAlias} style={styles.icon} tintColor={theme.colorScheme.onSurface} />
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: { padding: 8, marginRight: -8 },
+  icon: { width: 18, height: 18 },
+});

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

@@ -0,0 +1,99 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { Pressable, StyleSheet, View } from 'react-native';
+
+import { useBloc } 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 { FrequenceCommand } from '../../../../../shared/models/frequence_command';
+import type { Transaction } from '../../../domain/models/transaction';
+import { TransactionSendCommand } from '../../../domain/models/transaction_send/transaction_send_command';
+import { TransactionSendCommandSchedule } from '../../../domain/models/transaction_send/transaction_send_command_schedule';
+import { TransactionSendBloc } from '../../bloc/transaction_send/transaction_send_bloc';
+import {
+  TransactionSendConfirmEvent,
+  TransactionSendListRecentsEvent,
+  TransactionSendRejectEvent,
+  TransactionSendScheduleEvent,
+} from '../../bloc/transaction_send/transaction_send_event';
+
+/**
+ * Boutons de la vérification : programmer, annuler, confirmer. La
+ * vérification PIN/biométrique est entièrement déléguée à l'app hôte
+ * (`requireStepUpIdentification`) : le SDK ne voit jamais le PIN.
+ */
+export function TransactionFormBtnConfirm({ command, transaction }: { command: TransactionSendCommand; transaction: Transaction }) {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const router = useAppRouter();
+  const bloc = useBloc(TransactionSendBloc);
+  const isSchedule = command.action === TransactionSendCommand.actionSendSchedule;
+
+  const confirm = async () => {
+    if (!(await Di.config.identification.requireStepUpIdentification())) return;
+    if (bloc.isClosed) return;
+    bloc.add(new TransactionSendConfirmEvent(command, transaction, Di.config.identification.confirmationMethodLabel));
+  };
+
+  const scheduleTransaction = () => {
+    command.schedule = new TransactionSendCommandSchedule({ frequence: new FrequenceCommand() });
+    bloc.add(new TransactionSendScheduleEvent(command, transaction));
+    AppRouter.pushReplacement(router, AppRouter.transactionFormSchedule);
+  };
+
+  return (
+    <View style={styles.row}>
+      {/* Programmer */}
+      {!isSchedule && (
+        <Pressable
+          accessibilityRole="button"
+          onPress={scheduleTransaction}
+          style={[styles.fab, { backgroundColor: theme.colorScheme.primary }]}
+        >
+          <MaterialIcons name="calendar-month" size={24} color={theme.colorScheme.onPrimary} />
+        </Pressable>
+      )}
+      <View style={styles.gap16} />
+      {/* Annuler */}
+      <View style={styles.flex}>
+        <FilledTonalButton
+          style={styles.button}
+          onPress={() => {
+            bloc.add(new TransactionSendRejectEvent(command));
+            bloc.add(new TransactionSendListRecentsEvent(command.compte));
+            AppRouter.pop(router);
+          }}
+        >
+          {traductions.transactionFormVerificationBtnReject}
+        </FilledTonalButton>
+      </View>
+      <View style={styles.gap16} />
+      <View style={styles.flex}>
+        {isSchedule ? (
+          // Programmer
+          <ElevatedButton style={styles.button} onPress={scheduleTransaction}>
+            {traductions.transactionFormScheduleTitle}
+          </ElevatedButton>
+        ) : (
+          // Confirmer
+          <ElevatedButton
+            style={styles.button}
+            onPress={command.isSoldeValid(transaction.montantFrais) ? () => void confirm() : undefined}
+          >
+            {traductions.transactionFormVerificationBtnConfirm}
+          </ElevatedButton>
+        )}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: { flexDirection: 'row', alignItems: 'center', height: 56 },
+  flex: { flex: 1 },
+  button: { height: 56 },
+  fab: { width: 56, height: 56, borderRadius: 16, alignItems: 'center', justifyContent: 'center' },
+  gap16: { width: 16 },
+});