@pi-spi/app 0.0.0-stage → 1.2.0

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

@@ -0,0 +1,96 @@
+import * as Clipboard from 'expo-clipboard';
+
+import { useBloc } from '../../../../../core/bloc_react';
+import { useAppLocalizations } from '../../../../../l10n/localizations';
+import { AliasPI } from '../../../../../shared/models/alias_pi';
+import { CustomTextInput } from '../../../../../shared/widgets/input_text';
+import { ContactBloc } from '../../../../contacts/presentation/bloc/contact_bloc';
+import { ContactSearchEvent } from '../../../../contacts/presentation/bloc/contact_event';
+import { TransactionSendCommand } from '../../../domain/models/transaction_send/transaction_send_command';
+import {
+  TransactionSendCommandAlias,
+  TransactionSendCommandAliasError,
+} from '../../../domain/models/transaction_send/transaction_send_command_alias';
+import type { TransactionSendBloc } from '../../bloc/transaction_send/transaction_send_bloc';
+import { TransactionSendFormChangedEvent } from '../../bloc/transaction_send/transaction_send_event';
+import { PasteButton } from './paste_button';
+
+const isPhone = /^\+?[\d\s\-()]{6,15}$/;
+
+/**
+ * Champ alias du formulaire : un numéro est formaté par groupes de
+ * chiffres, la saisie filtre aussi les contacts. [text] est la valeur
+ * affichée, gérée par la page (elle la remplace au choix d'un contact).
+ */
+export function TransactionFormInputAlias({
+  command,
+  transactionFormBloc,
+  readOnly = false,
+  text,
+  onTextChange,
+  focusChange,
+  onChange,
+}: {
+  command: TransactionSendCommand;
+  transactionFormBloc: TransactionSendBloc;
+  readOnly?: boolean;
+  text: string;
+  onTextChange: (text: string) => void;
+  focusChange: (hasFocus: boolean) => void;
+  onChange: (value: string | null) => void;
+}) {
+  const traductions = useAppLocalizations();
+  const contactBloc = useBloc(ContactBloc);
+
+  const setAlias = (value: string) => {
+    command.alias = new TransactionSendCommandAlias({ action: command.action, value: value.replace(/ /g, '') });
+    transactionFormBloc.add(new TransactionSendFormChangedEvent(command));
+  };
+
+  const change = (value: string) => {
+    onTextChange(isPhone.test(value) ? AliasPI.formatPhoneNumber(value) : value);
+    setAlias(value);
+    onChange(value);
+    contactBloc.add(new ContactSearchEvent(value));
+  };
+
+  /** Coller le texte du presse-papiers */
+  const paste = async () => {
+    const value = await Clipboard.getStringAsync();
+    if (!value) return;
+    onTextChange(AliasPI.formatPhoneNumber(value));
+    setAlias(value);
+  };
+
+  /** Message d'erreur sur le champ alias */
+  const errorMessage = (): string | null => {
+    switch (command.alias?.error) {
+      case TransactionSendCommandAliasError.empty:
+        return traductions.aliasFormEmpty;
+      case TransactionSendCommandAliasError.invalid:
+        return command.action === TransactionSendCommand.actionReceiveNow
+          ? traductions.aliasFormMbnoInvalid
+          : traductions.aliasFormInvalid;
+      case TransactionSendCommandAliasError.notFound:
+        return traductions.aliasFormNotFound;
+      case TransactionSendCommandAliasError.mbnoForbidden:
+        return traductions.aliasFormMbnoForbidden;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <CustomTextInput
+      labelText={traductions.aliasFormLabel}
+      hintText={command.action === TransactionSendCommand.actionReceiveNow ? traductions.aliasFormHintSHID : traductions.aliasFormHint}
+      value={text}
+      readOnly={readOnly}
+      autocorrect={false}
+      onFocusChange={focusChange}
+      suffixIcon={readOnly ? null : <PasteButton onPress={() => void paste()} />}
+      messageError={errorMessage()}
+      onChange={change}
+    />
+  );
+}

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

@@ -0,0 +1,56 @@
+import { useAppLocalizations } from '../../../../../l10n/localizations';
+import { InputAmount } from '../../../../../shared/widgets/input_amount';
+import { TransactionSendCommand } from '../../../domain/models/transaction_send/transaction_send_command';
+import {
+  TransactionSendCommandAmount,
+  TransactionSendCommandAmountError,
+} from '../../../domain/models/transaction_send/transaction_send_command_amount';
+import type { TransactionSendBloc } from '../../bloc/transaction_send/transaction_send_bloc';
+import { TransactionSendFormChangedEvent } from '../../bloc/transaction_send/transaction_send_event';
+
+/** Champ montant du formulaire, avec le solde pour un transfert immédiat. */
+export function TransactionFormInputAmount({
+  command,
+  transactionFormBloc,
+  readOnly = false,
+}: {
+  command: TransactionSendCommand;
+  transactionFormBloc: TransactionSendBloc;
+  readOnly?: boolean;
+}) {
+  const traductions = useAppLocalizations();
+
+  const errorMessage = (): string => {
+    switch (command.amount?.error) {
+      case TransactionSendCommandAmountError.empty:
+        return traductions.transactionFormAmountEmpty;
+      // Solde insuffisant
+      case TransactionSendCommandAmountError.invalid:
+        return traductions.transactionFormAmountInvalid;
+      case TransactionSendCommandAmountError.low:
+        return traductions.transactionFormAmountLow;
+      case TransactionSendCommandAmountError.max:
+        return traductions.transactionFormAmountMax;
+      default:
+        return '';
+    }
+  };
+
+  return (
+    <InputAmount
+      solde={command.action === TransactionSendCommand.actionSendNow ? (command.solde ?? 0) : null}
+      hintText={traductions.transactionFormAmountHint}
+      value={command.amount?.value != null ? String(Math.trunc(command.amount.value)) : null}
+      messageError={errorMessage()}
+      readOnly={readOnly}
+      onChange={(value) => {
+        command.amount = new TransactionSendCommandAmount({
+          action: command.action,
+          value: value.length > 0 ? Number(value) : 0,
+          solde: command.solde,
+        });
+        transactionFormBloc.add(new TransactionSendFormChangedEvent(command));
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,84 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { Pressable, View } from 'react-native';
+
+import { useBloc } from '../../../../../core/bloc_react';
+import { useAppRouter } from '../../../../../core/router';
+import { useTheme } from '../../../../../core/theme';
+import { useAppLocalizations } from '../../../../../l10n/localizations';
+import { DateFormat } from '../../../../../shared/utils/date_format';
+import { CustomTextInput } from '../../../../../shared/widgets/input_text';
+import { plageText, showSelectDate, showSelectDateRange } from '../../../../../shared/widgets/select_date_widget';
+import type { Transaction } from '../../../domain/models/transaction';
+import type { TransactionSendCommand } from '../../../domain/models/transaction_send/transaction_send_command';
+import { TransactionSendCommandScheduleError } from '../../../domain/models/transaction_send/transaction_send_command_schedule';
+import { TransactionSendBloc } from '../../bloc/transaction_send/transaction_send_bloc';
+import { TransactionSendScheduleEvent } from '../../bloc/transaction_send/transaction_send_event';
+
+/** Date (une fois) ou plage de dates (fréquence) de la programmation, à partir de demain. */
+export function TransactionSendFormInputDate({
+  command,
+  transaction,
+  dateLimite,
+}: {
+  command: TransactionSendCommand;
+  transaction: Transaction;
+  dateLimite?: Date | null;
+}) {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const router = useAppRouter();
+  const bloc = useBloc(TransactionSendBloc);
+  const formatter = new DateFormat('d MMMM yyyy', traductions.localeName);
+  const schedule = command.schedule!;
+  const withFrequence = schedule.frequence?.value != null;
+
+  let text = '';
+  if (schedule.dateDebut != null) {
+    text = withFrequence ? plageText(traductions, formatter, schedule.dateDebut, schedule.dateFin) : formatter.format(schedule.dateDebut);
+  }
+
+  const tomorrow = new Date();
+  tomorrow.setDate(tomorrow.getDate() + 1);
+
+  const select = async () => {
+    if (withFrequence) {
+      const selected = await showSelectDateRange(router, {
+        title: traductions.transactionFormScheduleDateRangeSelectTitle,
+        dateDebut: schedule.dateDebut,
+        dateFin: schedule.dateFin,
+        firstDate: tomorrow,
+      });
+      schedule.dateDebut = selected[0];
+      schedule.dateFin = selected.length === 2 ? selected[1] : undefined;
+    } else {
+      let lastDate: Date | null = null;
+      if (dateLimite != null) {
+        lastDate = new Date(dateLimite);
+        lastDate.setDate(lastDate.getDate() - 1);
+      }
+      const selected = await showSelectDate(router, {
+        title: traductions.transactionFormScheduleDateSelectTitle,
+        selected: schedule.dateDebut,
+        firstDate: tomorrow,
+        lastDate,
+      });
+      if (selected == null) return;
+      schedule.dateDebut = selected;
+    }
+    bloc.add(new TransactionSendScheduleEvent(command, transaction));
+  };
+
+  return (
+    <Pressable onPress={() => void select()}>
+      <View pointerEvents="none">
+        <CustomTextInput
+          labelText={withFrequence ? traductions.transactionFormScheduleDateRangeLabel : traductions.transactionFormScheduleDateLabel}
+          value={text}
+          readOnly
+          suffixIcon={<MaterialIcons name="date-range" size={24} color={theme.colorScheme.onSurface} />}
+          messageError={schedule.error === TransactionSendCommandScheduleError.debutEmpty ? traductions.aliasFormEmpty : ''}
+        />
+      </View>
+    </Pressable>
+  );
+}

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

@@ -0,0 +1,31 @@
+import { useAppLocalizations } from '../../../../../l10n/localizations';
+import { CustomTextMultipleInput } from '../../../../../shared/widgets/input_text_multiple';
+import type { TransactionSendCommand } from '../../../domain/models/transaction_send/transaction_send_command';
+import {
+  TransactionSendCommandMotif,
+  TransactionSendCommandMotifError,
+} from '../../../domain/models/transaction_send/transaction_send_command_motif';
+import type { TransactionSendBloc } from '../../bloc/transaction_send/transaction_send_bloc';
+import { TransactionSendFormChangedEvent } from '../../bloc/transaction_send/transaction_send_event';
+
+/** Champ note (motif) du formulaire. */
+export function TransactionFormInputMotif({
+  command,
+  transactionFormBloc,
+}: {
+  command: TransactionSendCommand;
+  transactionFormBloc: TransactionSendBloc;
+}) {
+  const traductions = useAppLocalizations();
+  return (
+    <CustomTextMultipleInput
+      labelText={traductions.transactionFormMotifHint}
+      defaultValue={command.motif?.value}
+      messageError={command.motif?.error === TransactionSendCommandMotifError.invalid ? traductions.transactionFormMotifInvalid : ''}
+      onChange={(value) => {
+        command.motif = new TransactionSendCommandMotif({ value });
+        transactionFormBloc.add(new TransactionSendFormChangedEvent(command));
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,86 @@
+import * as Clipboard from 'expo-clipboard';
+
+import { useBloc } from '../../../../../core/bloc_react';
+import { useAppLocalizations } from '../../../../../l10n/localizations';
+import { UEMOACountry } from '../../../../../shared/models/uemoa_countries';
+import { CustomTextInput } from '../../../../../shared/widgets/input_text';
+import { ContactBloc } from '../../../../contacts/presentation/bloc/contact_bloc';
+import { ContactSearchEvent } from '../../../../contacts/presentation/bloc/contact_event';
+import type { TransactionSendCommand } from '../../../domain/models/transaction_send/transaction_send_command';
+import {
+  TransactionSendCommandOthr,
+  TransactionSendCommandOthrError,
+} from '../../../domain/models/transaction_send/transaction_send_command_othr';
+import type { TransactionSendBloc } from '../../bloc/transaction_send/transaction_send_bloc';
+import { TransactionSendFormChangedEvent } from '../../bloc/transaction_send/transaction_send_event';
+import { PasteButton } from './paste_button';
+
+/** Met le compte saisi dans la commande, et en déduit le pays (indicatif ou code pays). */
+export function setOthrCompte(command: TransactionSendCommand, value: string, bloc: TransactionSendBloc) {
+  command.othr = new TransactionSendCommandOthr({ value });
+  if (value.length >= 4) {
+    const pays = UEMOACountry.get(value.substring(0, 4));
+    if (pays != null && command.pspPays !== pays.iso) {
+      command.pspPays = pays.iso;
+      command.pspCode = undefined;
+      command.pspNom = undefined;
+    }
+  }
+  bloc.add(new TransactionSendFormChangedEvent(command));
+}
+
+/** Champ « autre compte » (IBAN, RIB, numéro de téléphone...). */
+export function TransactionFormInputOthr({
+  command,
+  transactionFormBloc,
+  text,
+  onTextChange,
+  focusChange,
+  onChange,
+}: {
+  command: TransactionSendCommand;
+  transactionFormBloc: TransactionSendBloc;
+  text: string;
+  onTextChange: (text: string) => void;
+  focusChange: (hasFocus: boolean) => void;
+  onChange: (value: string | null) => void;
+}) {
+  const traductions = useAppLocalizations();
+  const contactBloc = useBloc(ContactBloc);
+
+  const paste = async () => {
+    const value = await Clipboard.getStringAsync();
+    if (!value) return;
+    onTextChange(value);
+    setOthrCompte(command, value, transactionFormBloc);
+  };
+
+  const errorMessage = (): string | null => {
+    switch (command.othr?.error) {
+      case TransactionSendCommandOthrError.empty:
+        return traductions.transactionFormOthrEmpty;
+      case TransactionSendCommandOthrError.invalidMax:
+        return traductions.transactionFormOthrMax;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <CustomTextInput
+      labelText={traductions.transactionFormOthrLabel}
+      hintText={traductions.transactionsSendFormOthrSubtitle}
+      value={text}
+      autocorrect={false}
+      onFocusChange={focusChange}
+      suffixIcon={<PasteButton onPress={() => void paste()} />}
+      messageError={errorMessage()}
+      onChange={(value) => {
+        onTextChange(value);
+        setOthrCompte(command, value, transactionFormBloc);
+        onChange(value);
+        contactBloc.add(new ContactSearchEvent(value));
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,160 @@
+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 { 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 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. */
+export function TransactionSendFormInputPsp({
+  command,
+  transactionSendBloc,
+  participants,
+}: {
+  command: TransactionSendCommand;
+  transactionSendBloc: TransactionSendBloc;
+  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) {
+      command.pspNom = value.nomMembre;
+      command.pspCode = value.codeMembre;
+      transactionSendBloc.add(new TransactionSendFormChangedEvent(command));
+    }
+  };
+
+  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>
+  );
+}
+
+/** Feuille de choix d'un participant, avec recherche ; les participants indisponibles sont grisés. */
+export function SelectPsp({
+  canSelectDisablePsp = false,
+  participants,
+  pays,
+  selected,
+}: {
+  canSelectDisablePsp?: boolean;
+  participants: Participant[];
+  pays?: string | null;
+  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 psps = participants.filter(
+    (p) =>
+      (pays == null || p.pays.toLowerCase() === pays.toLowerCase()) &&
+      (keyword === '' || p.nomMembre.toLowerCase().includes(keyword.toLowerCase())),
+  );
+
+  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;
+            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>
+            );
+          })}
+        </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 },
+});