@pi-spi/app 2.0.0 → 2.2.0

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

@@ -0,0 +1,92 @@
+import { useState } from 'react';
+
+import { AppRouter, useAppRouter } from '../../../../../core/router';
+import { useAppLocalizations } from '../../../../../l10n/localizations';
+import { showModalBottomSheet } from '../../../../../shared/material/overlays';
+import { UEMOACountry } from '../../../../../shared/models/uemoa_countries';
+import {
+  SelectionLigne,
+  SelectionListe,
+  SelectionPastille,
+  SelectionRecherche,
+  selectionContient,
+  SelectionChamp,
+  SelectionSheet,
+} from '../../../../../shared/widgets/selection';
+import type { TransactionSendCommand } from '../../../domain/models/transaction_send/transaction_send_command';
+import type { TransactionSendBloc } from '../../bloc/transaction_send/transaction_send_bloc';
+import { TransactionSendFormChangedEvent } from '../../bloc/transaction_send/transaction_send_event';
+
+/**
+ * Pays de l'institution financière : champ qui ouvre une feuille de
+ * sélection, avec recherche par nom ou par code. Changer de pays efface
+ * l'institution choisie.
+ */
+export function TransactionSendFormInputPays({
+  command,
+  transactionSendBloc,
+}: {
+  command: TransactionSendCommand;
+  transactionSendBloc: TransactionSendBloc;
+}) {
+  const traductions = useAppLocalizations();
+  const router = useAppRouter();
+  const selected = command.pspPays != null ? UEMOACountry.get(command.pspPays) : undefined;
+
+  const select = async () => {
+    const value = await showModalBottomSheet<UEMOACountry>(router, {
+      builder: () => <SelectPays selected={selected} />,
+    });
+    if (value != null && value.iso !== command.pspPays) {
+      command.pspPays = value.iso;
+      command.pspCode = undefined;
+      command.pspNom = undefined;
+      transactionSendBloc.add(new TransactionSendFormChangedEvent(command));
+    }
+  };
+
+  return (
+    <SelectionChamp
+      libelle={traductions.transactionFormOthrPaysLabel}
+      valeur={selected?.name}
+      pastille={selected != null ? <SelectionPastille code={selected.iso3} /> : undefined}
+      onPress={() => void select()}
+    />
+  );
+}
+
+/** Feuille de sélection d'un pays de l'UEMOA ; renvoie le pays choisi. */
+export function SelectPays({ selected }: { selected?: UEMOACountry }) {
+  const traductions = useAppLocalizations();
+  const router = useAppRouter();
+  const [recherche, setRecherche] = useState('');
+
+  const pays =
+    recherche.trim() === ''
+      ? UEMOACountry.liste
+      : UEMOACountry.liste.filter(
+          (p) =>
+            selectionContient(p.name, recherche) || selectionContient(p.iso, recherche) || selectionContient(p.iso3, recherche),
+        );
+
+  return (
+    <SelectionSheet
+      titre={traductions.transactionFormOthrPaysLabel}
+      entete={<SelectionRecherche hintText={traductions.transactionFormOthrPaysRecherche} onChanged={setRecherche} />}
+      contenu={
+        <SelectionListe
+          vide={traductions.transactionFormOthrPaysAucun}
+          lignes={pays.map((p) => (
+            <SelectionLigne
+              key={p.iso}
+              pastille={<SelectionPastille code={p.iso3} choisie={p.iso === selected?.iso} />}
+              texte={p.name}
+              choisie={p.iso === selected?.iso}
+              onPress={() => AppRouter.pop(router, { value: p })}
+            />
+          ))}
+        />
+      }
+    />
+  );
+}

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

@@ -1,20 +1,24 @@
-import { MaterialIcons } from '@expo/vector-icons';
-import { useEffect, useRef, useState } from 'react';
-import { Animated, Easing, Keyboard, Pressable, ScrollView, StyleSheet, Text, TextInput, useWindowDimensions, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useState } from 'react';
+import { View, StyleSheet } from 'react-native';
 
 import { AppRouter, useAppRouter } from '../../../../../core/router';
-import { Themer, useTheme } from '../../../../../core/theme';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
-import { Card } from '../../../../../shared/material/card';
 import { showModalBottomSheet } from '../../../../../shared/material/overlays';
-import { CustomTextInput } from '../../../../../shared/widgets/input_text';
+import {
+  SelectionLigne,
+  SelectionListe,
+  SelectionPastille,
+  SelectionRecherche,
+  selectionContient,
+  SelectionChamp,
+  SelectionSheet,
+} from '../../../../../shared/widgets/selection';
 import type { Participant } from '../../../domain/models/participant/participant';
 import type { TransactionSendCommand } from '../../../domain/models/transaction_send/transaction_send_command';
 import type { TransactionSendBloc } from '../../bloc/transaction_send/transaction_send_bloc';
 import { TransactionSendFormChangedEvent } from '../../bloc/transaction_send/transaction_send_event';
 
-/** Champ « Institution » : ouvre la liste des participants du pays choisi. */
+/** Institution financière du bénéficiaire : champ qui ouvre la liste des participants du pays choisi, avec recherche. */
 export function TransactionSendFormInputPsp({
   command,
   transactionSendBloc,
@@ -25,14 +29,11 @@ export function TransactionSendFormInputPsp({
   participants: Participant[];
 }) {
   const traductions = useAppLocalizations();
-  const theme = useTheme();
   const router = useAppRouter();
   const psp = participants.find((p) => p.codeMembre === command.pspCode) ?? null;
 
   const select = async () => {
-    Keyboard.dismiss();
     const value = await showModalBottomSheet<Participant>(router, {
-      themed: true,
       builder: () => <SelectPsp participants={participants} pays={command.pspPays} selected={psp} />,
     });
     if (value != null) {
@@ -43,21 +44,20 @@ export function TransactionSendFormInputPsp({
   };
 
   return (
-    <Pressable onPress={() => void select()}>
-      <View pointerEvents="none">
-        <CustomTextInput
-          labelText={traductions.transactionFormOthrNomLabel}
-          hintText={traductions.transactionFormOthrNomLabel}
-          value={psp?.nomMembre ?? ''}
-          readOnly
-          suffixIcon={<MaterialIcons name="keyboard-arrow-down" size={24} color={theme.colorScheme.onSurface} />}
-        />
-      </View>
-    </Pressable>
+    <SelectionChamp
+      libelle={traductions.transactionFormOthrNomLabel}
+      valeur={psp?.nomMembre}
+      pastille={psp != null ? <SelectionPastille icone="account-balance" /> : undefined}
+      onPress={() => void select()}
+    />
   );
 }
 
-/** Feuille de choix d'un participant, avec recherche ; les participants indisponibles sont grisés. */
+/**
+ * Feuille de choix d'un participant, avec recherche ; renvoie le
+ * participant choisi. Les participants indisponibles sont grisés et ne
+ * peuvent pas être choisis, sauf avec [canSelectDisablePsp].
+ */
 export function SelectPsp({
   canSelectDisablePsp = false,
   participants,
@@ -70,91 +70,45 @@ export function SelectPsp({
   selected?: Participant | null;
 }) {
   const traductions = useAppLocalizations();
-  const theme = useTheme();
   const router = useAppRouter();
-  const insets = useSafeAreaInsets();
-  const { height } = useWindowDimensions();
-  const [keyword, setKeyword] = useState('');
-  const [searchFocused, setSearchFocused] = useState(false);
-  // Comme l'AnimatedContainer Flutter : 50 % de l'écran, 80 % pendant la recherche
-  const sheetHeight = useRef(new Animated.Value(height * 0.5)).current;
-  useEffect(() => {
-    Animated.timing(sheetHeight, {
-      toValue: height * (searchFocused ? 0.8 : 0.5),
-      duration: 300,
-      easing: Easing.inOut(Easing.ease),
-      useNativeDriver: false,
-    }).start();
-  }, [height, searchFocused, sheetHeight]);
+  const [recherche, setRecherche] = useState('');
 
   const psps = participants.filter(
     (p) =>
       (pays == null || p.pays.toLowerCase() === pays.toLowerCase()) &&
-      (keyword === '' || p.nomMembre.toLowerCase().includes(keyword.toLowerCase())),
+      (recherche.trim() === '' || selectionContient(p.nomMembre, recherche)),
   );
 
   return (
-    <Animated.View style={[styles.sheet, { backgroundColor: theme.colorScheme.surface, height: sheetHeight, paddingBottom: insets.bottom }]}>
-      <Text style={theme.textTheme.headlineLarge}>{traductions.transactionFormOthrNomLabel}</Text>
-      <View style={styles.gap10} />
-      {/* Recherche */}
-      <Card>
-        <View style={[styles.search, { backgroundColor: theme.inputDecorationTheme.fillColor }]}>
-          <MaterialIcons name="search" size={24} color={Themer.neural03Color} />
-          <TextInput
-            style={[theme.textTheme.displayLarge, styles.searchInput]}
-            placeholder={traductions.btnTextRechercher}
-            placeholderTextColor={Themer.neural03Color}
-            onFocus={() => setSearchFocused(true)}
-            onBlur={() => setSearchFocused(false)}
-            onChangeText={setKeyword}
-          />
-        </View>
-      </Card>
-      <View style={styles.gap20} />
-      {/* Liste des participants */}
-      <Card style={styles.flex}>
-        <ScrollView keyboardShouldPersistTaps="handled">
-          {psps.map((psp) => {
-            const disabled = !canSelectDisablePsp && psp.isDisable();
-            const isCurrent = psp.codeMembre === selected?.codeMembre;
+    <SelectionSheet
+      titre={traductions.transactionFormOthrNomLabel}
+      entete={<SelectionRecherche hintText={traductions.transactionFormOthrPspRecherche} onChanged={setRecherche} />}
+      contenu={
+        <SelectionListe
+          vide={traductions.transactionFormOthrPspAucune}
+          lignes={psps.map((psp) => {
+            const choisie = psp.codeMembre === selected?.codeMembre;
+            const indisponible = !canSelectDisablePsp && psp.isDisable();
             return (
-              <View key={psp.codeMembre} style={styles.itemPadding}>
-                <Pressable
-                  disabled={disabled}
-                  onPress={() => AppRouter.pop(router, { value: psp })}
-                  style={[styles.item, isCurrent ? { backgroundColor: Themer.neural01Color } : null]}
-                >
-                  <View style={styles.flex}>
-                    <Text
-                      numberOfLines={1}
-                      style={[theme.textTheme.headlineSmall, styles.pspName, disabled ? { color: Themer.neural02Color } : null]}
-                    >
-                      {psp.nomMembre}
-                    </Text>
-                    {disabled && (
-                      <Text style={[theme.textTheme.displaySmall, { color: Themer.neural02Color }]}>{traductions.indisponible}</Text>
-                    )}
-                  </View>
-                  {isCurrent && <MaterialIcons name="check" size={24} color={Themer.neural03Color} />}
-                </Pressable>
+              <View key={psp.codeMembre} style={indisponible ? styles.indisponible : null}>
+                <SelectionLigne
+                  pastille={<SelectionPastille icone="account-balance" choisie={choisie} />}
+                  texte={psp.nomMembre}
+                  detail={indisponible ? traductions.indisponible : undefined}
+                  choisie={choisie}
+                  onPress={() => {
+                    if (!indisponible) AppRouter.pop(router, { value: psp });
+                  }}
+                />
               </View>
             );
           })}
-        </ScrollView>
-      </Card>
-    </Animated.View>
+        />
+      }
+    />
   );
 }
 
 const styles = StyleSheet.create({
-  flex: { flex: 1 },
-  sheet: { borderRadius: 20, paddingTop: 20, paddingHorizontal: 20 },
-  search: { height: 36, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 12 },
-  searchInput: { flex: 1, marginLeft: 8, paddingVertical: 0 },
-  itemPadding: { paddingHorizontal: 8 },
-  item: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 10, minHeight: 56, borderRadius: 20 },
-  pspName: { fontWeight: '700', fontSize: 15 },
-  gap10: { height: 10 },
-  gap20: { height: 20 },
+  indisponible: { opacity: 0.5 },
 });

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

@@ -30,7 +30,7 @@ import {
 } 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 { pageTitle, TransactionFormPageAlias } from './transaction_form_page_alias';
 import { TransactionFormPageOthr } from './transaction_form_page_othr';
 
 export function showTransactionError(router: SdkRouter, error: string, method?: TransactionSendMethod | null) {
@@ -144,9 +144,27 @@ export function TransactionFormPage() {
 /** 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 traductions = useAppLocalizations();
   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} />;
+  if (contact == null || cmd.method !== TransactionSendMethod.alias) {
+    // Titre de la page dans la barre du haut
+    const titre = [TransactionSendMethod.iban, TransactionSendMethod.othr].includes(cmd.method)
+      ? traductions.transactionsSendFormOthrTitle
+      : pageTitle(traductions, cmd);
+    return (
+      <AppBar
+        onBack={back}
+        title={
+          titre.length === 0 ? undefined : (
+            <Text numberOfLines={1} style={[theme.textTheme.headlineMedium, { color: theme.appBarTheme.foregroundColor }]}>
+              {titre}
+            </Text>
+          )
+        }
+      />
+    );
+  }
   return (
     <AppBar
       onBack={back}

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

@@ -72,16 +72,12 @@ export function TransactionFormPageAlias() {
   return (
     <View>
       {/* Titre de la page */}
-      {cmd.contact == null && (
-        <>
-          <Text style={theme.textTheme.titleSmall}>{pageTitle(traductions, cmd)}</Text>
-          <View style={styles.gap5} />
-        </>
-      )}
+      {/* Titre dans la barre du haut (voir pageTitle, utilisé par TransactionFormPage) */}
+      {cmd.contact == null && <View style={styles.gap8} />}
       {cmd.contact == null && cmd.method !== TransactionSendMethod.qrcode ? (
         <>
           {/* Sous-titre de la page */}
-          <Text style={theme.textTheme.displaySmall}>{traductions.transactionsSendFormAliasSubtitle}</Text>
+          <Text style={[theme.textTheme.displaySmall, { color: Themer.neural03Color }]}>{traductions.transactionsSendFormAliasSubtitle}</Text>
           <View style={showAmount ? styles.gap32 : styles.gap10} />
           {/* Alias */}
           <TransactionFormInputAlias
@@ -138,7 +134,8 @@ export function TransactionFormPageAlias() {
   );
 }
 
-function pageTitle(traductions: AppLocalizations, cmd: TransactionSendCommand): string {
+/** Titre de la page, affiché dans la barre du haut par TransactionFormPage (vide pour un envoi à un contact) */
+export 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) {
@@ -157,6 +154,7 @@ function pageTitle(traductions: AppLocalizations, cmd: TransactionSendCommand):
 }
 
 const styles = StyleSheet.create({
+  gap8: { height: 8 },
   gap5: { height: 5 },
   gap6: { height: 6 },
   gap10: { height: 10 },

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

@@ -3,10 +3,9 @@ import { Keyboard, StyleSheet, Text, useWindowDimensions, View } from 'react-nat
 
 import { AppEnv } from '../../../../../core/env';
 import { useBloc, useBlocBuilder } from '../../../../../core/bloc_react';
-import { useTheme } from '../../../../../core/theme';
+import { Themer, 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';
@@ -17,11 +16,11 @@ 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 { TransactionSendFormInputPays } from './transaction_form_input_pays';
 import { TransactionSendFormInputPsp } from './transaction_form_input_psp';
 
 /**
@@ -49,11 +48,10 @@ export function TransactionFormPageOthr() {
 
   return (
     <View>
-      {/* Titre de la page */}
-      <Text style={[theme.textTheme.titleSmall, styles.title]}>{traductions.transactionsSendFormOthrTitle}</Text>
-      <View style={styles.gap5} />
+      {/* Titre dans la barre du haut (TransactionFormPage) */}
+      <View style={styles.gap8} />
       {/* Sous-titre de la page */}
-      <Text style={theme.textTheme.displaySmall}>{traductions.transactionsSendFormOthrSubtitle}</Text>
+      <Text style={[theme.textTheme.displaySmall, { color: Themer.neural03Color }]}>{traductions.transactionsSendFormOthrSubtitle}</Text>
       <View style={showDetails ? styles.gap32 : styles.gap10} />
 
       {/* Compte */}
@@ -101,20 +99,8 @@ export function TransactionFormPageOthr() {
             <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} />
+              <TransactionSendFormInputPays command={cmd} transactionSendBloc={transactionSendBloc} />
+              <View style={styles.gap12} />
               {/* Participant */}
               <TransactionSendFormInputPsp
                 command={cmd}
@@ -184,11 +170,12 @@ function pspError(traductions: AppLocalizations, participants: Participant[], cm
 }
 
 const styles = StyleSheet.create({
+  gap8: { height: 8 },
   title: { fontSize: 25 },
-  pays: { borderRadius: 14, paddingHorizontal: 16, paddingTop: 8 },
   gap5: { height: 5 },
   gap6: { height: 6 },
   gap10: { height: 10 },
+  gap12: { height: 12 },
   gap16: { height: 16 },
   gap32: { height: 32 },
 });

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

@@ -3,11 +3,11 @@ import { ScrollView, StyleSheet, Text, View } from 'react-native';
 import { useBloc, useBlocBuilder, useBlocListener } from '../../../../../core/bloc_react';
 import { Di } from '../../../../../core/di';
 import { AppRouter, useAppRouter } from '../../../../../core/router';
-import { useTheme } from '../../../../../core/theme';
+import { Themer, useTheme } from '../../../../../core/theme';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
 import { ElevatedButton } from '../../../../../shared/material/buttons';
 import { showModalBottomSheet } from '../../../../../shared/material/overlays';
-import { AppBar, Scaffold } from '../../../../../shared/material/scaffold';
+import { Scaffold } from '../../../../../shared/material/scaffold';
 import { FrequenceInputWidget } from '../../../../../shared/widgets/frequence_input_widget';
 import { CustomLoadingDialog, LoadingPage } from '../../../../../shared/widgets/loading_page';
 import { MyPageContainer } from '../../../../../shared/widgets/my_page_container';
@@ -24,6 +24,7 @@ import {
 import { TransactionSendPageError } from '../transaction_send/transaction_send_page_error';
 import { TransactionSendPageSuccess } from '../transaction_send/transaction_send_page_succes';
 import { TransactionSendFormInputDate } from './transaction_form_input_date';
+import { ProfileAppBar } from '../../../../profile/presentation/pages/profile_app_bar';
 
 /** Programmation d'un transfert : fréquence et dates (route `transactionFormSchedule`). */
 export function TransactionFormPageSchedule({
@@ -99,14 +100,11 @@ export function TransactionFormPageSchedule({
   };
 
   return (
-    <Scaffold appBar={<AppBar onBack={() => AppRouter.pop(router)} />}>
+    <Scaffold appBar={<ProfileAppBar titre={traductions.transactionFormScheduleTitle} />}>
       <MyPageContainer>
         <ScrollView style={styles.flex}>
-          {/* Titre de la page */}
-          <Text style={theme.textTheme.titleSmall}>{traductions.transactionFormScheduleTitle}</Text>
-          <View style={styles.gap5} />
           {/* Sous-titre de la page */}
-          <Text style={theme.textTheme.displaySmall}>{traductions.transactionFormScheduleSubtitle}</Text>
+          <Text style={[theme.textTheme.displaySmall, { color: Themer.neural03Color }]}>{traductions.transactionFormScheduleSubtitle}</Text>
           <View style={styles.gap32} />
           {/* Fréquence */}
           <FrequenceInputWidget