@pi-spi/app 0.0.0-stage → 1.2.1

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

@@ -0,0 +1,189 @@
+import { Image } from 'expo-image';
+import { Keyboard, ScrollView, StyleSheet, Text, View } from 'react-native';
+
+import { Images } from '../../../../../core/assets';
+import { useBloc, useBlocBuilder, useBlocListener } from '../../../../../core/bloc_react';
+import { AppRouter, useAppRouter, type SdkRouter } from '../../../../../core/router';
+import { Themer, useTheme } from '../../../../../core/theme';
+import { useAppLocalizations } from '../../../../../l10n/localizations';
+import { ElevatedButton } from '../../../../../shared/material/buttons';
+import { showModalBottomSheet } from '../../../../../shared/material/overlays';
+import { AppBar, Scaffold } from '../../../../../shared/material/scaffold';
+import { CircleAvatarWidget } from '../../../../../shared/widgets/circle_avatar_widget';
+import { CustomLoadingDialog } from '../../../../../shared/widgets/loading_page';
+import { MyPageContainer } from '../../../../../shared/widgets/my_page_container';
+import { ContactBloc } from '../../../../contacts/presentation/bloc/contact_bloc';
+import { ContactListEvent } from '../../../../contacts/presentation/bloc/contact_event';
+import type { Participant } from '../../../domain/models/participant/participant';
+import { TransactionError } from '../../../domain/models/transaction_error';
+import { TransactionSendCommand } from '../../../domain/models/transaction_send/transaction_send_command';
+import { TransactionSendMethod } from '../../../domain/models/transaction_send/transaction_send_method';
+import { TransactionSendBloc } from '../../bloc/transaction_send/transaction_send_bloc';
+import { TransactionSendInitiateEvent } from '../../bloc/transaction_send/transaction_send_event';
+import {
+  TransactionSendFormErrorState,
+  TransactionSendFormInputState,
+  TransactionSendFormSuccessState,
+  TransactionSendFormVerificationAskingState,
+  TransactionSendFormVerificationLoadingState,
+  TransactionSendInitialState,
+} from '../../bloc/transaction_send/transaction_send_state';
+import { TransactionSendPageError } from '../transaction_send/transaction_send_page_error';
+import { TransactionSendPageSuccess } from '../transaction_send/transaction_send_page_succes';
+import { TransactionFormPageAlias } from './transaction_form_page_alias';
+import { TransactionFormPageOthr } from './transaction_form_page_othr';
+
+export function showTransactionError(router: SdkRouter, error: string, method?: TransactionSendMethod | null) {
+  return showModalBottomSheet(router, { builder: () => <TransactionSendPageError error={error} method={method} /> });
+}
+
+/** Formulaire d'un transfert ou d'une demande de paiement (route `transactionFormPage`). */
+export function TransactionFormPage() {
+  const traductions = useAppLocalizations();
+  const router = useAppRouter();
+  const transactionSendBloc = useBloc(TransactionSendBloc);
+  const contactBloc = useBloc(ContactBloc);
+  const state = useBlocBuilder(transactionSendBloc, (_p, current) => current instanceof TransactionSendFormInputState);
+
+  useBlocListener(
+    transactionSendBloc,
+    (s) => {
+      if (s instanceof TransactionSendFormVerificationLoadingState) CustomLoadingDialog.show(router);
+      if (s instanceof TransactionSendFormInputState) CustomLoadingDialog.hide(router);
+      // Page de vérification
+      if (s instanceof TransactionSendFormVerificationAskingState) {
+        CustomLoadingDialog.hide(router);
+        // Vérifier si le participant est indisponible
+        let isPspEnable = true;
+        if (s.transaction.clientPSP != null) {
+          const psp = (s.participants ?? []).find((p) => p.codeMembre === s.transaction.clientPSP);
+          if (psp != null) isPspEnable = psp.isEnable();
+        }
+        if (isPspEnable) AppRouter.pushReplacement(router, AppRouter.transactionFormVerification);
+        else void showTransactionError(router, TransactionError.pspPayeIndisponible, s.command.method);
+      }
+      // Envoyé avec erreur
+      if (s instanceof TransactionSendFormErrorState) {
+        CustomLoadingDialog.hide(router);
+        void showTransactionError(router, s.error, s.command.method);
+      }
+      // Envoyé avec succès - RTP initiée
+      if (s instanceof TransactionSendFormSuccessState) {
+        CustomLoadingDialog.hide(router);
+        let isBottomSheetClosed = false;
+        // Rediriger sur la page d'accueil après 3 secondes
+        const homeRedirectTimer = setTimeout(() => {
+          if (!isBottomSheetClosed && AppRouter.currentRoute(router) === AppRouter.transactionFormPage) {
+            AppRouter.pop(router);
+            AppRouter.pushReplacement(router, AppRouter.home);
+          }
+        }, 3000);
+        void showModalBottomSheet(router, {
+          isDismissible: false,
+          builder: () => (
+            <TransactionSendPageSuccess
+              transaction={s.transaction}
+              onClose={() => {
+                isBottomSheetClosed = true;
+                clearTimeout(homeRedirectTimer);
+              }}
+            />
+          ),
+        });
+      }
+    },
+    (previous, current) =>
+      current instanceof TransactionSendFormVerificationAskingState ||
+      current instanceof TransactionSendFormVerificationLoadingState ||
+      (previous instanceof TransactionSendFormVerificationLoadingState && current instanceof TransactionSendFormInputState) ||
+      (previous instanceof TransactionSendFormVerificationAskingState && current instanceof TransactionSendInitialState) ||
+      (current instanceof TransactionSendFormSuccessState && current.transaction.isRTP()) ||
+      current instanceof TransactionSendFormErrorState,
+  );
+
+  if (!(state instanceof TransactionSendFormInputState)) return null;
+  const command = state.command;
+  const valid = isFormValid(state.participants ?? [], command);
+
+  const onBack = () => {
+    contactBloc.add(new ContactListEvent(null));
+    AppRouter.pop(router);
+  };
+
+  return (
+    <Scaffold appBar={<FormAppBar command={command} onBack={onBack} />}>
+      <MyPageContainer>
+        <ScrollView style={styles.flex} keyboardShouldPersistTaps="handled">
+          {[TransactionSendMethod.alias, TransactionSendMethod.qrcode].includes(command.method) ? (
+            <TransactionFormPageAlias />
+          ) : [TransactionSendMethod.iban, TransactionSendMethod.othr].includes(command.method) ? (
+            <TransactionFormPageOthr />
+          ) : null}
+        </ScrollView>
+        <View style={styles.bottom}>
+          <ElevatedButton
+            onPress={
+              valid
+                ? () => {
+                    Keyboard.dismiss();
+                    transactionSendBloc.add(new TransactionSendInitiateEvent(command));
+                  }
+                : undefined
+            }
+          >
+            {command.action === TransactionSendCommand.actionReceiveNow
+              ? traductions.btnTextSend
+              : traductions.transactionFormContinueBtn}
+          </ElevatedButton>
+        </View>
+      </MyPageContainer>
+    </Scaffold>
+  );
+}
+
+/** Barre du haut : le destinataire choisi parmi les contacts (nom, alias, photo) */
+function FormAppBar({ command: cmd, onBack: back }: { command: TransactionSendCommand; onBack: () => void }) {
+  const theme = useTheme();
+  const contact = cmd.contact;
+  // Destinataire choisi parmi les contacts : son nom, son alias et sa photo
+  if (contact == null || cmd.method !== TransactionSendMethod.alias) return <AppBar onBack={back} />;
+  return (
+    <AppBar
+      onBack={back}
+      title={
+        <View style={styles.contactTitle}>
+          <Text numberOfLines={1} style={[theme.textTheme.headlineSmall, styles.center]}>
+            {contact.name}
+          </Text>
+          <Text style={[theme.textTheme.displaySmall, { color: Themer.neural04Color }]}>{contact.alias}</Text>
+        </View>
+      }
+      actions={
+        <View style={styles.avatar}>
+          <CircleAvatarWidget nom={contact.name} photo={contact.photo} rounded radius={50} />
+          <View style={[styles.badge, { backgroundColor: Themer.brownColor, borderColor: theme.colorScheme.surface }]}>
+            <Image source={Images.iconsPiBadge} style={styles.flex} contentFit="contain" />
+          </View>
+        </View>
+      }
+    />
+  );
+}
+
+/** Le formulaire est-il valide ? (vers un autre compte : participant connu et disponible) */
+function isFormValid(participants: Participant[], command: TransactionSendCommand): boolean {
+  if ([TransactionSendMethod.iban, TransactionSendMethod.othr].includes(command.method)) {
+    const psp = participants.find((p) => p.codeMembre === command.pspCode);
+    return command.isValid() && psp != null && psp.isEnable();
+  }
+  return command.isValid();
+}
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+  bottom: { paddingVertical: 16 },
+  contactTitle: { alignItems: 'center' },
+  center: { textAlign: 'center' },
+  avatar: { marginRight: 20, marginTop: 5 },
+  badge: { position: 'absolute', right: 0, bottom: 0, width: 18, height: 18, borderRadius: 9, borderWidth: 2, overflow: 'hidden' },
+});

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

@@ -0,0 +1,168 @@
+import { useState } from 'react';
+import { Keyboard, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
+
+import { useBloc, useBlocBuilder } from '../../../../../core/bloc_react';
+import { AppRouter, useAppRouter } from '../../../../../core/router';
+import { Themer, useTheme } from '../../../../../core/theme';
+import type { AppLocalizations } from '../../../../../l10n/app_localizations';
+import { useAppLocalizations } from '../../../../../l10n/localizations';
+import { AliasPI } from '../../../../../shared/models/alias_pi';
+import { CompteValidator } from '../../../../../shared/models/compte_validator';
+import { useKeyboardVisible } from '../../../../../shared/utils/use_keyboard_visible';
+import { CustomSnackBar } from '../../../../../shared/widgets/custom_snack_bar';
+import { normalizedNumber, type PhoneContact } from '../../../../contacts/domain/phone_contact';
+import { ContactPhoneListWidget } from '../../../../contacts/presentation/pages/contact_list_phone_widget';
+import type { ContactCreatePageParams, ContactUpdateResult } from '../../../../contacts/presentation/pages/create/contact_create_page';
+import { TransactionSendCommand } from '../../../domain/models/transaction_send/transaction_send_command';
+import { TransactionSendCommandAlias } from '../../../domain/models/transaction_send/transaction_send_command_alias';
+import { TransactionSendMethod } from '../../../domain/models/transaction_send/transaction_send_method';
+import { TransactionSendBloc } from '../../bloc/transaction_send/transaction_send_bloc';
+import { TransactionSendFormChangedEvent } from '../../bloc/transaction_send/transaction_send_event';
+import { TransactionSendFormInputState } from '../../bloc/transaction_send/transaction_send_state';
+import { TransactionFormInputAlias } from './transaction_form_input_alias';
+import { TransactionFormInputAmount } from './transaction_form_input_amount';
+import { TransactionFormInputMotif } from './transaction_form_input_motif';
+
+/**
+ * Formulaire par alias (ou QR code) : alias, montant, note. Pendant la
+ * saisie d'un alias encore invalide, les contacts du téléphone remplacent
+ * le montant et la note pour aider à choisir.
+ */
+export function TransactionFormPageAlias() {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const router = useAppRouter();
+  const { height } = useWindowDimensions();
+  const isKeyboardVisible = useKeyboardVisible();
+  const transactionSendBloc = useBloc(TransactionSendBloc);
+  const state = useBlocBuilder(transactionSendBloc, (_p, current) => current instanceof TransactionSendFormInputState);
+  const [hasInputCompteFocused, setHasInputCompteFocused] = useState(false);
+  const [searchKeyword, setSearchKeyword] = useState<string | null>(null);
+  const [aliasText, setAliasText] = useState(() => {
+    const value = state instanceof TransactionSendFormInputState ? state.command.alias?.value : undefined;
+    return value != null ? AliasPI.formatPhoneNumber(value) : '';
+  });
+
+  if (!(state instanceof TransactionSendFormInputState)) return null;
+  const cmd = state.command;
+  const showAmount =
+    !hasInputCompteFocused || (cmd.alias?.isValid() ?? false) || cmd.action === TransactionSendCommand.actionReceiveNow;
+
+  const setAlias = (alias: string, contact: PhoneContact) => {
+    if (cmd.action === TransactionSendCommand.actionReceiveNow && AliasPI.patternMBNO.test(alias)) {
+      CustomSnackBar.show(traductions.aliasFormMbnoForbidden, { durationMs: 5000, bgColor: Themer.systemErrorColor });
+      void addNew(contact);
+      return;
+    }
+    Keyboard.dismiss();
+    setAliasText(alias);
+    cmd.alias = new TransactionSendCommandAlias({ action: cmd.action, value: alias });
+    transactionSendBloc.add(new TransactionSendFormChangedEvent(cmd));
+  };
+
+  const addNew = async (contact: PhoneContact) => {
+    const params: ContactCreatePageParams = {
+      contact,
+      mbnoForbidden: cmd.action === TransactionSendCommand.actionReceiveNow,
+    };
+    const data = await AppRouter.push<ContactUpdateResult>(router, AppRouter.contactCreate, { params });
+    if (data?.alias != null && data.alias.length > 0) setTimeout(() => setAlias(data.alias, contact), 500);
+  };
+
+  return (
+    <View>
+      {/* Titre de la page */}
+      {cmd.contact == null && (
+        <>
+          <Text style={theme.textTheme.titleSmall}>{pageTitle(traductions, cmd)}</Text>
+          <View style={styles.gap5} />
+        </>
+      )}
+      {cmd.contact == null && cmd.method !== TransactionSendMethod.qrcode ? (
+        <>
+          {/* Sous-titre de la page */}
+          <Text style={theme.textTheme.displaySmall}>{traductions.transactionsSendFormAliasSubtitle}</Text>
+          <View style={showAmount ? styles.gap32 : styles.gap10} />
+          {/* Alias */}
+          <TransactionFormInputAlias
+            command={cmd}
+            transactionFormBloc={transactionSendBloc}
+            readOnly={false}
+            text={aliasText}
+            onTextChange={setAliasText}
+            focusChange={setHasInputCompteFocused}
+            onChange={(value) => setSearchKeyword(value != null && value.length > 0 ? value : null)}
+          />
+        </>
+      ) : (
+        <View style={styles.gap25} />
+      )}
+
+      {showAmount ? (
+        <>
+          <View style={styles.gap16} />
+          {/* Montant */}
+          <TransactionFormInputAmount command={cmd} transactionFormBloc={transactionSendBloc} />
+          <View style={styles.gap15} />
+          {/* Note */}
+          <TransactionFormInputMotif command={cmd} transactionFormBloc={transactionSendBloc} />
+          <View style={styles.gap14} />
+        </>
+      ) : (
+        <View>
+          <View style={styles.gap6} />
+          {/* Liste des contacts */}
+          <Text style={theme.textTheme.bodyMedium}>{traductions.transactionsSendTitleContacts}</Text>
+          <View style={styles.gap6} />
+          <View style={{ height: Math.max(150, height - (isKeyboardVisible ? 700 : 200)) }}>
+            <ContactPhoneListWidget
+              smallItem
+              enableAlias
+              expanded
+              searchKeyword={searchKeyword}
+              onSelect={(contact, alias) => {
+                const phone = contact.phones[0];
+                const contactMbno = phone != null ? normalizedNumber(phone) : '';
+                if (alias != null && alias.length > 0) setAlias(alias, contact);
+                else if (CompteValidator.isUemoaPhone(contactMbno)) setAlias(contactMbno, contact);
+                else {
+                  Keyboard.dismiss();
+                  void addNew(contact);
+                }
+              }}
+            />
+          </View>
+        </View>
+      )}
+    </View>
+  );
+}
+
+function pageTitle(traductions: AppLocalizations, cmd: TransactionSendCommand): string {
+  if (cmd.contact != null) return '';
+  if (cmd.action === TransactionSendCommand.actionSendNow || cmd.action === TransactionSendCommand.actionSendSchedule) {
+    if (cmd.method === TransactionSendMethod.qrcode) {
+      return cmd.canal === '731'
+        ? traductions.transactionsSendFormQrCodeTitleTransfer
+        : traductions.transactionsSendFormQrCodeTitlePayment;
+    }
+    return traductions.transactionsSendFormAliasTitle;
+  }
+  if (cmd.action === TransactionSendCommand.actionReceiveNow) {
+    return cmd.method === TransactionSendMethod.qrcode
+      ? traductions.transactionsSendFormQrCodeTitlePaymentRtp
+      : traductions.transactionsSendTitleRequest2Pay;
+  }
+  return '';
+}
+
+const styles = StyleSheet.create({
+  gap5: { height: 5 },
+  gap6: { height: 6 },
+  gap10: { height: 10 },
+  gap14: { height: 14 },
+  gap15: { height: 15 },
+  gap16: { height: 16 },
+  gap25: { height: 25 },
+  gap32: { height: 32 },
+});

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

@@ -0,0 +1,194 @@
+import { useState } from 'react';
+import { Keyboard, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
+
+import { AppEnv } from '../../../../../core/env';
+import { useBloc, useBlocBuilder } from '../../../../../core/bloc_react';
+import { useTheme } from '../../../../../core/theme';
+import type { AppLocalizations } from '../../../../../l10n/app_localizations';
+import { useAppLocalizations } from '../../../../../l10n/localizations';
+import { DropdownButton } from '../../../../../shared/material/dropdown';
+import { CompteValidator } from '../../../../../shared/models/compte_validator';
+import { UEMOACountry } from '../../../../../shared/models/uemoa_countries';
+import { useKeyboardVisible } from '../../../../../shared/utils/use_keyboard_visible';
+import { CustomTextInput } from '../../../../../shared/widgets/input_text';
+import { isAliasPhone, normalizedNumber } from '../../../../contacts/domain/phone_contact';
+import { ContactPhoneListWidget } from '../../../../contacts/presentation/pages/contact_list_phone_widget';
+import type { Participant } from '../../../domain/models/participant/participant';
+import type { TransactionSendCommand } from '../../../domain/models/transaction_send/transaction_send_command';
+import { TransactionSendMethod } from '../../../domain/models/transaction_send/transaction_send_method';
+import { TransactionSendBloc } from '../../bloc/transaction_send/transaction_send_bloc';
+import { TransactionSendFormChangedEvent } from '../../bloc/transaction_send/transaction_send_event';
+import { TransactionSendFormInputState } from '../../bloc/transaction_send/transaction_send_state';
+import { TransactionFormInputAmount } from './transaction_form_input_amount';
+import { TransactionFormInputMotif } from './transaction_form_input_motif';
+import { setOthrCompte, TransactionFormInputOthr } from './transaction_form_input_othr';
+import { TransactionSendFormInputPsp } from './transaction_form_input_psp';
+
+/**
+ * Formulaire vers un autre compte (IBAN, RIB, numéro...) : compte, pays et
+ * institution (déduits d'un IBAN/RIB, sinon à choisir), montant, note.
+ */
+export function TransactionFormPageOthr() {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const { height } = useWindowDimensions();
+  const isKeyboardVisible = useKeyboardVisible();
+  const transactionSendBloc = useBloc(TransactionSendBloc);
+  const state = useBlocBuilder(transactionSendBloc, (_p, current) => current instanceof TransactionSendFormInputState);
+  const [hasInputCompteFocused, setHasInputCompteFocused] = useState(false);
+  const [searchKeyword, setSearchKeyword] = useState<string | null>(null);
+  const [othrText, setOthrText] = useState(() =>
+    state instanceof TransactionSendFormInputState ? (state.command.othr?.value ?? '') : '',
+  );
+
+  if (!(state instanceof TransactionSendFormInputState)) return null;
+  const cmd = state.command;
+  const participants = state.participants ?? [];
+  const isIbanOrRib = cmd.method === TransactionSendMethod.iban || CompteValidator.isUemoaRib(cmd.othr?.compte());
+  const showDetails = !hasInputCompteFocused || isIbanOrRib;
+
+  return (
+    <View>
+      {/* Titre de la page */}
+      <Text style={[theme.textTheme.titleSmall, styles.title]}>{traductions.transactionsSendFormOthrTitle}</Text>
+      <View style={styles.gap5} />
+      {/* Sous-titre de la page */}
+      <Text style={theme.textTheme.displaySmall}>{traductions.transactionsSendFormOthrSubtitle}</Text>
+      <View style={showDetails ? styles.gap32 : styles.gap10} />
+
+      {/* Compte */}
+      <TransactionFormInputOthr
+        command={cmd}
+        transactionFormBloc={transactionSendBloc}
+        text={othrText}
+        onTextChange={setOthrText}
+        focusChange={setHasInputCompteFocused}
+        onChange={(value) => setSearchKeyword(value != null && value.length > 0 ? value : null)}
+      />
+
+      {/* Liste des contacts */}
+      {hasInputCompteFocused && !isIbanOrRib && (
+        <View>
+          <View style={styles.gap6} />
+          <Text style={theme.textTheme.bodyMedium}>{traductions.transactionsSendTitleContacts}</Text>
+          <View style={styles.gap6} />
+          <View style={{ height: Math.max(150, height - (isKeyboardVisible ? 700 : 200)) }}>
+            <ContactPhoneListWidget
+              smallItem
+              expanded
+              searchKeyword={searchKeyword}
+              onSelect={(contact, alias) => {
+                const phone = contact.phones[0];
+                if (alias != null || phone == null || isAliasPhone(phone)) return;
+                const number = normalizedNumber(phone);
+                if (number.length === 0) return;
+                Keyboard.dismiss();
+                setOthrText(number);
+                // Sélectionne aussi le pays d'après l'indicatif
+                setOthrCompte(cmd, number, transactionSendBloc);
+              }}
+            />
+          </View>
+        </View>
+      )}
+
+      {showDetails && (
+        <>
+          {/* Pays et participant */}
+          {isIbanOrRib ? (
+            <FormIban traductions={traductions} cmd={cmd} participants={participants} />
+          ) : (
+            <View>
+              <View style={styles.gap16} />
+              {/* Pays */}
+              <View style={[styles.pays, { backgroundColor: theme.cardTheme.color }]}>
+                <Text style={theme.inputDecorationTheme.floatingLabelStyle}>{traductions.transactionFormOthrPaysLabel}</Text>
+                <DropdownButton
+                  value={cmd.pspPays}
+                  items={UEMOACountry.liste.map((c) => ({ value: c.iso, label: `${c.flag} ${c.name}` }))}
+                  onChanged={(value) => {
+                    cmd.pspPays = value;
+                    cmd.pspCode = undefined;
+                    cmd.pspNom = undefined;
+                    transactionSendBloc.add(new TransactionSendFormChangedEvent(cmd));
+                  }}
+                />
+              </View>
+              <View style={styles.gap16} />
+              {/* Participant */}
+              <TransactionSendFormInputPsp
+                command={cmd}
+                transactionSendBloc={transactionSendBloc}
+                participants={ordredPspList(participants)}
+              />
+              <View style={styles.gap16} />
+            </View>
+          )}
+          {/* Montant */}
+          <TransactionFormInputAmount command={cmd} transactionFormBloc={transactionSendBloc} />
+          <View style={styles.gap16} />
+          {/* Note */}
+          <TransactionFormInputMotif command={cmd} transactionFormBloc={transactionSendBloc} />
+        </>
+      )}
+      <View style={styles.gap32} />
+    </View>
+  );
+}
+
+/** Pays et institution déduits de l'IBAN/RIB */
+function FormIban({
+  traductions,
+  cmd,
+  participants,
+}: {
+  traductions: AppLocalizations;
+  cmd: TransactionSendCommand;
+  participants: Participant[];
+}) {
+  const pays = cmd.pspPays != null ? UEMOACountry.get(cmd.pspPays) : undefined;
+  return (
+    <View>
+      <View style={styles.gap16} />
+      <CustomTextInput
+        labelText={traductions.transactionFormIbanPaysLabel}
+        value={pays != null ? `${pays.flag} ${pays.name}` : ''}
+        readOnly
+      />
+      <View style={styles.gap16} />
+      <CustomTextInput
+        labelText={traductions.transactionFormIbanNomLabel}
+        value={cmd.pspNom ?? ''}
+        messageError={pspError(traductions, participants, cmd)}
+        readOnly
+      />
+      <View style={styles.gap16} />
+    </View>
+  );
+}
+
+/** Le participant de l'app hôte en tête de liste */
+function ordredPspList(liste: Participant[]): Participant[] {
+  if (AppEnv.codeMembre.length === 0) return liste;
+  const psp = liste.find((p) => p.codeMembre === AppEnv.codeMembre);
+  if (psp == null) return liste;
+  return [psp, ...liste.filter((p) => p.codeMembre !== AppEnv.codeMembre)];
+}
+
+function pspError(traductions: AppLocalizations, participants: Participant[], cmd: TransactionSendCommand): string | null {
+  const psp = participants.find((p) => p.codeMembre === cmd.pspCode);
+  if (cmd.othr?.value != null && cmd.othr.isValid() && (psp == null || psp.isDisable())) {
+    return psp == null ? traductions.transactionFormPspInexistant : traductions.transactionFormPspIndisponible;
+  }
+  return null;
+}
+
+const styles = StyleSheet.create({
+  title: { fontSize: 25 },
+  pays: { borderRadius: 14, paddingHorizontal: 16, paddingTop: 8 },
+  gap5: { height: 5 },
+  gap6: { height: 6 },
+  gap10: { height: 10 },
+  gap16: { height: 16 },
+  gap32: { height: 32 },
+});

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

@@ -0,0 +1,56 @@
+import { useEffect } from 'react';
+
+import { useBloc, useBlocListener } from '../../../../../core/bloc_react';
+import { AppRouter, useAppRouter } from '../../../../../core/router';
+import { useTheme } from '../../../../../core/theme';
+import { showModalBottomSheet } from '../../../../../shared/material/overlays';
+import { LoadingPage } from '../../../../../shared/widgets/loading_page';
+import { TransactionSendCommand } from '../../../domain/models/transaction_send/transaction_send_command';
+import { TransactionSendBloc } from '../../bloc/transaction_send/transaction_send_bloc';
+import { TransactionSendDisplayFormEvent, TransactionSendInitiateEvent } from '../../bloc/transaction_send/transaction_send_event';
+import {
+  TransactionSendFormErrorState,
+  TransactionSendFormVerificationAskingState,
+  TransactionSendFormVerificationLoadingState,
+} from '../../bloc/transaction_send/transaction_send_state';
+import { TransactionSendPageError } from '../transaction_send/transaction_send_page_error';
+import { TransactionFormPage } from './transaction_form_page';
+
+/**
+ * Après le scan d'un QR code : si le montant est déjà fixé (transfert),
+ * on initie directement et on passe à la vérification ; sinon on affiche
+ * le formulaire prérempli.
+ */
+export function TransactionFormPageQrcode({ command }: { command: TransactionSendCommand }) {
+  const theme = useTheme();
+  const router = useAppRouter();
+  const bloc = useBloc(TransactionSendBloc);
+  const direct = command.amount?.value != null && command.action !== TransactionSendCommand.actionReceiveNow;
+
+  useEffect(() => {
+    bloc.add(new TransactionSendDisplayFormEvent(command));
+    if (direct) bloc.add(new TransactionSendInitiateEvent(command));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useBlocListener(
+    bloc,
+    (s) => {
+      if (!direct) return;
+      if (s instanceof TransactionSendFormVerificationAskingState) {
+        AppRouter.pushReplacement(router, AppRouter.transactionFormVerification);
+      } else if (s instanceof TransactionSendFormErrorState) {
+        void showModalBottomSheet(router, {
+          builder: () => <TransactionSendPageError error={s.error} method={s.command.method} />,
+        }).then(() => AppRouter.pop(router));
+      }
+    },
+    (_p, current) =>
+      current instanceof TransactionSendFormVerificationAskingState ||
+      current instanceof TransactionSendFormVerificationLoadingState ||
+      current instanceof TransactionSendFormErrorState,
+  );
+
+  if (direct) return <LoadingPage bgColor={theme.colorScheme.surface} />;
+  return <TransactionFormPage />;
+}