@pi-spi/app 0.0.0-stage → 1.2.1

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

@@ -0,0 +1,155 @@
+import type { ReactNode } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { Images } from '../../../../../core/assets';
+import { BlocProvider, useBloc } from '../../../../../core/bloc_react';
+import { Di } from '../../../../../core/di';
+import { AppRouter, useAppRouter } from '../../../../../core/router';
+import { useAppLocalizations } from '../../../../../l10n/localizations';
+import { Card } from '../../../../../shared/material/card';
+import { showModalBottomSheet } from '../../../../../shared/material/overlays';
+import { AliasPI } from '../../../../../shared/models/alias_pi';
+import { Frequence, FrequenceCommand } from '../../../../../shared/models/frequence_command';
+import { CtaWidget } from '../../../../../shared/widgets/cta_widget';
+import { AliasBloc } from '../../../../alias/presentation/bloc/alias_bloc';
+import { AliasExistState } from '../../../../alias/presentation/bloc/alias_state';
+import type { ContactPI } from '../../../../contacts/domain/contact_pi';
+import { TransactionSens, TransactionStatut, type Transaction } from '../../../domain/models/transaction';
+import { TransactionCanal } from '../../../domain/models/transaction_canal';
+import { TransactionSendCommand } from '../../../domain/models/transaction_send/transaction_send_command';
+import { TransactionSendCommandSchedule } from '../../../domain/models/transaction_send/transaction_send_command_schedule';
+import { TransactionDetailsBloc } from '../../bloc/transaction_details/transaction_details_bloc';
+import { TransactionSendBloc } from '../../bloc/transaction_send/transaction_send_bloc';
+import {
+  TransactionSendDisplayFormEvent,
+  TransactionSendFormChangedEvent,
+  TransactionSendScheduleEvent,
+} from '../../bloc/transaction_send/transaction_send_event';
+import { TransactionDetailsPageActionsCancel } from './transaction_details_page_actions_cancel';
+import { TransactionDetailsPageActionsReturn } from './transaction_details_page_actions_return';
+
+/**
+ * Actions possibles sur une transaction irrévocable : renvoyer, annuler
+ * (émise), redemander ou retourner les fonds (reçue), partager la dépense
+ * et programmer (émise).
+ */
+export function TransactionDetailsPageActions({ transaction }: { transaction: Transaction }) {
+  const traductions = useAppLocalizations();
+  const router = useAppRouter();
+  const transactionSendBloc = useBloc(TransactionSendBloc);
+  const transactionDetailsBloc = useBloc(TransactionDetailsBloc);
+  const aliasBloc = useBloc(AliasBloc);
+
+  if (transaction.statut !== TransactionStatut.irrevocable) return null;
+  if (transaction.isRetour() || transaction.isRetourOk() || transaction.montant === 0) return null;
+
+  const compte = Di.activeCompte;
+  const aliasState = aliasBloc.state;
+  const compteAlias = aliasState instanceof AliasExistState ? aliasState.alias.getShid() : undefined;
+  const isDebit = transaction.sens === TransactionSens.debit;
+  const isCredit = transaction.sens === TransactionSens.credit;
+
+  /** Ouvre une feuille ayant accès au bloc du détail */
+  const showSheet = (content: ReactNode) =>
+    void showModalBottomSheet(router, {
+      themed: true,
+      builder: () => <BlocProvider blocs={[transactionDetailsBloc]}>{content}</BlocProvider>,
+    });
+
+  /** Renvoyer la transaction */
+  const actionSend = () => {
+    const cmd = TransactionSendCommand.fromTransaction(transaction, TransactionSendCommand.actionSendNow, {
+      compte,
+      compteAlias,
+    });
+    transactionSendBloc.add(new TransactionSendDisplayFormEvent(cmd));
+    transactionSendBloc.add(new TransactionSendFormChangedEvent(cmd));
+    void AppRouter.push(router, AppRouter.transactionFormPage);
+  };
+
+  /** Demander la transaction */
+  const actionRtp = () => {
+    const cmd = TransactionSendCommand.fromTransaction(transaction, TransactionSendCommand.actionReceiveNow, {
+      compte,
+      compteAlias,
+    });
+    cmd.canal = TransactionCanal.transfertParRequestToPay.code;
+    transactionSendBloc.add(new TransactionSendDisplayFormEvent(cmd));
+    transactionSendBloc.add(new TransactionSendFormChangedEvent(cmd));
+    void AppRouter.push(router, AppRouter.transactionFormPage);
+  };
+
+  /** Planifier le paiement */
+  const actionSchedule = () => {
+    const cmd = TransactionSendCommand.fromTransaction(transaction, TransactionSendCommand.actionSendSchedule, {
+      compte,
+      compteAlias,
+    });
+    cmd.schedule = new TransactionSendCommandSchedule({
+      dateDebut: transaction.dateOperation ?? undefined,
+      frequence: new FrequenceCommand({ value: Frequence.mensuelle }),
+    });
+    transactionSendBloc.add(new TransactionSendScheduleEvent(cmd, transaction));
+    void AppRouter.push(router, AppRouter.transactionFormSchedule);
+  };
+
+  /** Partage de dépense */
+  const actionSplit = () => {
+    void AppRouter.push(router, AppRouter.transactionSplitPayment, {
+      params: {
+        onContinue: (selectedItems: ContactPI[]) =>
+          void AppRouter.push(router, AppRouter.transactionSplitPaymentRepartition, {
+            params: { tx: transaction, contacts: selectedItems },
+          }),
+      },
+    });
+  };
+
+  const canRtp = transaction.clientAlias != null && AliasPI.patternSHID.test(transaction.clientAlias);
+
+  return (
+    <Card>
+      <View style={styles.wrap}>
+        {/* Envoyer au client */}
+        <CtaWidget image={Images.arrowUp} label={traductions.homeActionSend} action={actionSend} />
+        {/* Transfert émis : demander l'annulation */}
+        {isDebit && (
+          <CtaWidget
+            image={Images.transactionCancel}
+            label={traductions.transactionDetailsAnnuler}
+            action={transaction.canCancel() ? () => showSheet(<TransactionDetailsPageActionsCancel />) : null}
+          />
+        )}
+        {/* Transfert reçu : demander le paiement, retourner les fonds */}
+        {isCredit && (
+          <>
+            <CtaWidget
+              image={Images.arrowDown}
+              label={traductions.transactionDetailsRecevoir}
+              action={canRtp ? actionRtp : null}
+            />
+            <CtaWidget
+              image={Images.transactionCancel}
+              label={traductions.transactionDetailsRetourner}
+              action={!transaction.isRetourOk() ? () => showSheet(<TransactionDetailsPageActionsReturn />) : null}
+            />
+          </>
+        )}
+        {/* Split payments : plusieurs demandes de paiement */}
+        <CtaWidget image={Images.transactionPartager} label={traductions.transactionDetailsPartager} action={isDebit ? actionSplit : null} />
+        {/* Programmer le paiement */}
+        {isDebit && (
+          <CtaWidget
+            image={Images.transactionPlanifier}
+            label={traductions.transactionDetailsPlanifier}
+            action={transaction.subscriptionId == null ? actionSchedule : null}
+          />
+        )}
+      </View>
+    </Card>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: { padding: 20, flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between', rowGap: 10, columnGap: 10 },
+});

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

@@ -0,0 +1,66 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { useState } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { useBloc } from '../../../../../core/bloc_react';
+import { useTheme } from '../../../../../core/theme';
+import { useAppLocalizations } from '../../../../../l10n/localizations';
+import { ElevatedButton } from '../../../../../shared/material/buttons';
+import { TransactionCancelReason } from '../../../domain/models/transaction_cancel_reason';
+import { TransactionDetailsBloc } from '../../bloc/transaction_details/transaction_details_bloc';
+import { TransactionCancelSendEvent } from '../../bloc/transaction_details/transaction_details_event';
+import { TransactionCancelReasonText } from '../transaction_cancel/transaction_cancel_reason_text';
+import { SheetBox } from './sheet_box';
+
+/** Feuille « Demander l'annulation » : choix du motif puis envoi de la demande. */
+export function TransactionDetailsPageActionsCancel() {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const bloc = useBloc(TransactionDetailsBloc);
+  const [reason, setReason] = useState<TransactionCancelReason | null>(null);
+  // Récupérer la transaction
+  const tx = bloc.state.transaction!;
+
+  return (
+    <SheetBox>
+      {/* Title */}
+      <Text style={theme.textTheme.headlineLarge}>{traductions.transactionDetailsCancelTitle}</Text>
+      <View style={styles.gap20} />
+      {/* SubTitle */}
+      <Text style={theme.textTheme.displaySmall}>{traductions.transactionDetailsCancelSubTitle}</Text>
+      <View style={styles.gap10} />
+      {/* Raisons de la demande d'annulation */}
+      {TransactionCancelReason.values().map((motif) => (
+        <View key={motif} style={styles.chipRow}>
+          <Pressable
+            accessibilityRole="button"
+            onPress={() => setReason(motif)}
+            style={[styles.chip, { backgroundColor: theme.secondaryHeaderColor }]}
+          >
+            {reason === motif && (
+              <MaterialIcons name="check" size={18} color={theme.colorScheme.onSurface} style={styles.check} />
+            )}
+            <Text style={theme.textTheme.bodyMedium}>{TransactionCancelReasonText.label(motif, traductions)}</Text>
+          </Pressable>
+        </View>
+      ))}
+      {/* Bouton Demander l'annulation */}
+      <View style={styles.gap10} />
+      <ElevatedButton
+        style={styles.button}
+        onPress={reason != null ? () => bloc.add(new TransactionCancelSendEvent(tx, reason)) : undefined}
+      >
+        {traductions.transactionDetailsCancelBtnSend}
+      </ElevatedButton>
+    </SheetBox>
+  );
+}
+
+const styles = StyleSheet.create({
+  gap10: { height: 10 },
+  gap20: { height: 20 },
+  chipRow: { paddingVertical: 10, alignItems: 'flex-start' },
+  chip: { flexDirection: 'row', alignItems: 'center', borderRadius: 8, paddingHorizontal: 12, minHeight: 32 },
+  check: { marginRight: 8 },
+  button: { height: 56 },
+});

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

@@ -0,0 +1,79 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+import { useBloc, useBlocBuilder } from '../../../../../core/bloc_react';
+import { Di } from '../../../../../core/di';
+import { AppRouter, useAppRouter } from '../../../../../core/router';
+import { useTheme } from '../../../../../core/theme';
+import { useAppLocalizations } from '../../../../../l10n/localizations';
+import { ElevatedButton, FilledTonalButton } from '../../../../../shared/material/buttons';
+import { InputAmount } from '../../../../../shared/widgets/input_amount';
+import { CustomTextInput } from '../../../../../shared/widgets/input_text';
+import { TransactionDetailsBloc } from '../../bloc/transaction_details/transaction_details_bloc';
+import { TransactionReturnSendEvent } from '../../bloc/transaction_details/transaction_details_event';
+import { SheetBox } from './sheet_box';
+
+/** Feuille « Retourner les fonds » d'un transfert reçu, si le solde le permet. */
+export function TransactionDetailsPageActionsReturn() {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const router = useAppRouter();
+  const bloc = useBloc(TransactionDetailsBloc);
+  const state = useBlocBuilder(bloc);
+  const tx = state.transaction!;
+  const solde = state.solde;
+  const isSoldeInsuffisant = solde < tx.montant;
+
+  const confirmReturn = async () => {
+    if (!(await Di.config.identification.requireStepUpIdentification())) return;
+    if (bloc.isClosed) return;
+    bloc.add(new TransactionReturnSendEvent(tx));
+  };
+
+  return (
+    <SheetBox>
+      {/* Titre */}
+      <Text style={[theme.textTheme.titleSmall, styles.center]}>{traductions.transactionDetailsReturnTitle}</Text>
+      <View style={styles.gap20} />
+      {/* EndToEndId */}
+      <CustomTextInput labelText={traductions.transactionDetailsIdentifiant} value={tx.endToEndId} readOnly />
+      <View style={styles.gap20} />
+      {/* Nom du payeur */}
+      <CustomTextInput labelText={traductions.transactionDetailsPayeurLabel} value={tx.clientNom} readOnly />
+      <View style={styles.gap20} />
+      {/* Montant */}
+      <InputAmount
+        key={solde}
+        solde={solde}
+        hintText={traductions.transactionFormAmountHint}
+        value={String(Math.trunc(tx.montant))}
+        readOnly
+        messageError={isSoldeInsuffisant ? traductions.transactionFormAmountInvalid : null}
+      />
+      <View style={styles.gap20} />
+      <View style={styles.buttons}>
+        {/* Non je ne retourne pas */}
+        <View style={styles.flex}>
+          <FilledTonalButton style={styles.button} onPress={() => AppRouter.pop(router)}>
+            {traductions.btnTextNo}
+          </FilledTonalButton>
+        </View>
+        <View style={styles.gap16} />
+        {/* Oui je retourne les fonds */}
+        <View style={styles.flex}>
+          <ElevatedButton style={styles.button} onPress={!isSoldeInsuffisant ? () => void confirmReturn() : undefined}>
+            {traductions.btnTextYes}
+          </ElevatedButton>
+        </View>
+      </View>
+    </SheetBox>
+  );
+}
+
+const styles = StyleSheet.create({
+  center: { textAlign: 'center' },
+  gap16: { width: 16 },
+  gap20: { height: 20 },
+  buttons: { flexDirection: 'row', height: 56 },
+  flex: { flex: 1 },
+  button: { height: 56 },
+});

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

@@ -0,0 +1,48 @@
+import { useBloc } from '../../../../../core/bloc_react';
+import { AppRouter, useAppRouter } from '../../../../../core/router';
+import { useTheme } from '../../../../../core/theme';
+import { useAppLocalizations } from '../../../../../l10n/localizations';
+import { Categorie } from '../../../../categorie/domain/models/categorie';
+import { CategorieBloc } from '../../../../categorie/presentation/bloc/categorie_bloc';
+import { CategorieListEvent } from '../../../../categorie/presentation/bloc/categorie_event';
+import { CategorieIcon } from '../../../../categorie/presentation/pages/categorie_icon';
+import type { Transaction } from '../../../domain/models/transaction';
+import type { TransactionDetailsBloc } from '../../bloc/transaction_details/transaction_details_bloc';
+import { TransactionCategorieUpdateEvent } from '../../bloc/transaction_details/transaction_details_event';
+import { TransactionDetailsPageDetailRow } from './transaction_details_page_detail';
+
+/** Catégorie de la transaction, modifiable via la liste des catégories. */
+export function TransactionDetailsPageCategorie({
+  transaction,
+  transactionDetailsBloc,
+}: {
+  transaction: Transaction;
+  transactionDetailsBloc: TransactionDetailsBloc;
+}) {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const router = useAppRouter();
+  const categorieBloc = useBloc(CategorieBloc);
+
+  const categories = [...Categorie.defaultListe, ...categorieBloc.state.categories];
+  // Déterminer la catégorie (celle par défaut si elle a été supprimée)
+  const categorie =
+    (transaction.categorie != null ? categories.find((c) => c.id === transaction.categorie) : undefined) ??
+    Categorie.defaultCategorie;
+
+  return (
+    <TransactionDetailsPageDetailRow
+      label={traductions.transactionDetailsCategorie}
+      actionIcon={<CategorieIcon icon={categorie.icon} size={24} emojiSize={20} tintColor={theme.primaryColorDark} />}
+      actionText={categorie.label}
+      actionFunction={async () => {
+        categorieBloc.add(new CategorieListEvent());
+        const selectedCategorie = await AppRouter.push<Categorie>(router, AppRouter.categoriesSelect);
+        if (selectedCategorie != null) {
+          // save this new categorie
+          transactionDetailsBloc.add(new TransactionCategorieUpdateEvent(transaction, selectedCategorie));
+        }
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,133 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import type { ReactNode } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { Themer, useTheme } from '../../../../../core/theme';
+import { TextButtonIcon } from '../../../../../shared/material/buttons';
+import { AliasWidget } from '../../../../../shared/widgets/alias_widget';
+import { ClipboardWidget } from '../../../../../shared/widgets/clipboard_widget';
+
+/** Carte d'une ligne du détail : libellé à gauche, valeur (ou action) à droite. */
+export function TransactionDetailsPageDetailRow({
+  label,
+  description,
+  name,
+  actionText,
+  actionIcon,
+  actionFunction,
+  action,
+  canCopy = false,
+  isAlias = false,
+}: {
+  label: string;
+  description?: string | null;
+  name?: string | null;
+  // Action
+  actionText?: string;
+  actionIcon?: ReactNode;
+  actionFunction?: () => void;
+  // Action tout court
+  action?: ReactNode;
+  canCopy?: boolean;
+  isAlias?: boolean;
+}) {
+  const theme = useTheme();
+  const valueStyle = [theme.textTheme.bodyLarge, styles.right, { color: Themer.neural03Color }];
+
+  let value: ReactNode = null;
+  if (description != null) {
+    if (isAlias) {
+      value = <AliasWidget alias={description} name={name} canCopy={canCopy} />;
+    } else if (canCopy) {
+      value = (
+        <View style={styles.row}>
+          <Text numberOfLines={1} style={[valueStyle, styles.flex]}>
+            {description}
+          </Text>
+          <Pressable accessibilityRole="button" hitSlop={8} onPress={() => void ClipboardWidget.setData(description)}>
+            <MaterialIcons name="content-copy" size={16} color={theme.colorScheme.onSurface} />
+          </Pressable>
+        </View>
+      );
+    } else {
+      value = (
+        <Text numberOfLines={1} style={valueStyle}>
+          {description}
+        </Text>
+      );
+    }
+  }
+
+  return (
+    <DetailCard>
+      <View style={[styles.row, styles.spaceBetween]}>
+        {/* label */}
+        <Text numberOfLines={1} style={theme.textTheme.bodyLarge}>
+          {label}
+        </Text>
+        {/* Description */}
+        {value != null && <View style={styles.description}>{value}</View>}
+        {/* Action */}
+        {actionText != null && actionIcon != null && (
+          <TextButtonIcon onPress={actionFunction} icon={actionIcon} label={actionText} />
+        )}
+        {action}
+      </View>
+    </DetailCard>
+  );
+}
+
+/** Carte du détail avec le libellé au-dessus de la valeur (texte long). */
+export function TransactionDetailsPageDetailColumn({
+  label,
+  description,
+  actionText,
+  actionIcon,
+  actionFunction,
+}: {
+  label?: string | null;
+  description?: string | null;
+  actionText?: string;
+  actionIcon?: ReactNode;
+  actionFunction?: () => void;
+}) {
+  const theme = useTheme();
+  return (
+    <DetailCard>
+      {label != null && (
+        <View style={[styles.row, styles.spaceBetween]}>
+          <Text numberOfLines={1} style={[theme.textTheme.bodyLarge, styles.flex]}>
+            {label}
+          </Text>
+          {actionText != null && actionIcon != null && (
+            <TextButtonIcon
+              onPress={actionFunction}
+              icon={actionIcon}
+              label={actionText}
+              textStyle={actionFunction == null ? { color: Themer.neural02Color } : undefined}
+            />
+          )}
+        </View>
+      )}
+      {/* Description */}
+      {description != null && (
+        <Text style={[theme.textTheme.bodyLarge, { color: Themer.neural03Color }]}>{description}</Text>
+      )}
+    </DetailCard>
+  );
+}
+
+/** Carte aux coins de 15, sans marge (le `Card` des lignes du détail). */
+export function DetailCard({ children }: { children: ReactNode }) {
+  const theme = useTheme();
+  return <View style={[styles.card, { backgroundColor: theme.cardTheme.color }]}>{children}</View>;
+}
+
+const styles = StyleSheet.create({
+  card: { borderRadius: 15, overflow: 'hidden', paddingHorizontal: 16, paddingVertical: 11, minHeight: 48, justifyContent: 'center' },
+  row: { flexDirection: 'row', alignItems: 'center' },
+  spaceBetween: { justifyContent: 'space-between' },
+  flex: { flex: 1 },
+  right: { textAlign: 'right' },
+  description: { flex: 1, paddingLeft: 10 },
+});

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

@@ -0,0 +1,50 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+import { useTheme } from '../../../../../core/theme';
+import { useAppLocalizations } from '../../../../../l10n/localizations';
+import { TextButton } from '../../../../../shared/material/buttons';
+import { DateFormat } from '../../../../../shared/utils/date_format';
+import { AmountWidget } from '../../../../../shared/widgets/amount_widget';
+import { CircleAvatarWidget } from '../../../../../shared/widgets/circle_avatar_widget';
+import { TransactionSens, type Transaction } from '../../../domain/models/transaction';
+
+/** En-tête du détail : montant signé, nom du client, date, et avatar. */
+export function TransactionDetailsPageHeader({ transaction }: { transaction: Transaction }) {
+  const theme = useTheme();
+  const locale = useAppLocalizations().localeName;
+  const date = transaction.dateOperation ?? (transaction.isRejet() ? transaction.rejetDate : null);
+
+  return (
+    <View style={styles.row}>
+      <View style={styles.flex}>
+        <AmountWidget
+          montant={transaction.montant}
+          style={theme.textTheme.titleSmall}
+          sign={transaction.sens === TransactionSens.credit ? '+' : '-'}
+        />
+        {/* Nom du client */}
+        <View style={styles.name}>
+          <TextButton onPress={() => undefined} style={styles.nameButton}>
+            <Text numberOfLines={1} style={theme.textButtonTheme.textStyle}>
+              {transaction.clientNom}
+            </Text>
+          </TextButton>
+        </View>
+        {/* Date d'irrévocabilité ou du rejet de la transaction */}
+        {date != null && <Text style={theme.textTheme.displaySmall}>{new DateFormat('d MMM, HH:mm', locale).format(date)}</Text>}
+      </View>
+      {/* Image */}
+      <View style={styles.avatar}>
+        <CircleAvatarWidget nom={transaction.clientNom} photo={transaction.clientPhoto} rounded radius={60} />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: { flexDirection: 'row', alignItems: 'center' },
+  flex: { flex: 1, alignItems: 'flex-start' },
+  name: { paddingBottom: 4 },
+  nameButton: { alignItems: 'flex-start', paddingHorizontal: 12, marginLeft: -12 },
+  avatar: { paddingLeft: 16 },
+});