@pi-spi/app 0.0.0-stage → 1.2.1

package/src/modules/profile/presentation/pages/profile_page_contacts_actions.tsx

@@ -0,0 +1,233 @@
+import { Image } from 'expo-image';
+import { MaterialIcons } from '@expo/vector-icons';
+import { useEffect, useRef, useState } from 'react';
+import { Animated, Easing, Keyboard, Platform, Pressable, ScrollView, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { Images } from '../../../../core/assets';
+import { useBloc, useBlocListener, useCreateBloc } from '../../../../core/bloc_react';
+import { AppRouter, useAppRouter } from '../../../../core/router';
+import { Themer, useTheme } from '../../../../core/theme';
+import { useAppLocalizations } from '../../../../l10n/localizations';
+import { ElevatedButton, FilledTonalButton } from '../../../../shared/material/buttons';
+import { AliasPI } from '../../../../shared/models/alias_pi';
+import { useKeyboardVisible } from '../../../../shared/utils/use_keyboard_visible';
+import { ClipboardWidget } from '../../../../shared/widgets/clipboard_widget';
+import { InputAliasWidget } from '../../../../shared/widgets/input_alias_widget';
+import { CustomTextInput } from '../../../../shared/widgets/input_text';
+import { CustomLoadingDialog } from '../../../../shared/widgets/loading_page';
+import { ContactPI } from '../../../contacts/domain/contact_pi';
+import { contactIdOf, type PhoneContact } from '../../../contacts/domain/phone_contact';
+import { ContactBloc } from '../../../contacts/presentation/bloc/contact_bloc';
+import { ContactListEvent } from '../../../contacts/presentation/bloc/contact_event';
+import { ContactCreateBloc } from '../../../contacts/presentation/bloc/create/contact_create_bloc';
+import { ContactCreateSubmitEvent, ContactDeleteSubmitEvent } from '../../../contacts/presentation/bloc/create/contact_create_event';
+import {
+  ContactCreateErrorState,
+  ContactCreateLoadingState,
+  ContactCreateSuccessState,
+} from '../../../contacts/presentation/bloc/create/contact_create_state';
+
+function fullName(contact: PhoneContact): string {
+  return `${contact.firstName} ${contact.lastName}`.trim();
+}
+
+/**
+ * Feuille d'un contact du profil : nouveau contact, ajout d'un alias, ou
+ * modification / suppression de l'alias existant. [contactPI] vient d'un
+ * autre écran (« Enregistrer dans les contacts ») et préremplit l'alias.
+ * Retourne `true` à l'écran appelant après un enregistrement.
+ */
+export function ProfilePageContactsActions({
+  contact,
+  alias,
+  contactPI,
+}: {
+  contact?: PhoneContact | null;
+  alias?: string | null;
+  contactPI?: ContactPI | null;
+}) {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const router = useAppRouter();
+  const insets = useSafeAreaInsets();
+  const { height } = useWindowDimensions();
+  const isKeyboardVisible = useKeyboardVisible();
+  const contactListBloc = useBloc(ContactBloc);
+  const contactBloc = useCreateBloc(() => new ContactCreateBloc());
+
+  // État initial (comme initState en Flutter)
+  const [initial] = useState(() => {
+    let name: string | null = contact != null ? fullName(contact) : null;
+    let canEdit = false;
+    const command = new AliasPI();
+    if (contactPI == null) {
+      canEdit = contact == null || alias == null;
+    } else {
+      canEdit = true;
+      name = contact == null ? (contactPI.name.length > 0 ? contactPI.name : null) : fullName(contact);
+      command.value = contactPI.alias ?? undefined;
+    }
+    return { name, canEdit, command };
+  });
+  const [name, setName] = useState<string | null>(initial.name);
+  const [canEdit, setCanEdit] = useState(initial.canEdit);
+  const [command] = useState(initial.command);
+  const [, setVersion] = useState(0);
+  const rebuild = () => setVersion((v) => v + 1);
+
+  useBlocListener(contactBloc, (s) => {
+    if (s instanceof ContactCreateLoadingState) CustomLoadingDialog.show(router);
+    else if (s instanceof ContactCreateSuccessState) {
+      CustomLoadingDialog.hide(router);
+      contactListBloc.add(new ContactListEvent(null));
+      AppRouter.pop(router, { value: true });
+    } else if (s instanceof ContactCreateErrorState) {
+      CustomLoadingDialog.hide(router);
+    }
+  });
+
+  const saveAlias = (newAlias: string) => {
+    Keyboard.dismiss();
+    contactBloc.add(
+      new ContactCreateSubmitEvent(new ContactPI({ name: name!, phoneNumber: '', alias: newAlias }), {
+        contactId: contact != null ? contactIdOf(contact) : null,
+        contactOldAlias: alias,
+      }),
+    );
+  };
+
+  const cancel = () => {
+    if (contactPI == null && contact != null && alias != null) {
+      command.value = undefined;
+      setCanEdit(false);
+    } else {
+      AppRouter.pop(router, { value: false });
+    }
+  };
+
+  const canSave = command.isValid() && command.value !== alias && name != null && name.length > 0;
+  // Comme en Flutter, la feuille a une hauteur fixe (35 % ou 50 % de l'écran)
+  // qui passe à 70 % ou 80 % quand le clavier est affiché, pour que le
+  // formulaire reste au-dessus du clavier. Sur iOS, la feuille est déjà
+  // remontée au-dessus du clavier par l'OverlayHost : elle garde sa hauteur.
+  const keyboardOpen = isKeyboardVisible && Platform.OS !== 'ios';
+  const ratio = !keyboardOpen ? (contact != null ? 0.35 : 0.5) : contact != null ? 0.7 : 0.8;
+  const sheetHeight = useRef(new Animated.Value(height * ratio)).current;
+  useEffect(() => {
+    Animated.timing(sheetHeight, {
+      toValue: height * ratio,
+      duration: 300,
+      easing: Easing.inOut(Easing.ease),
+      useNativeDriver: false,
+    }).start();
+  }, [height, ratio, sheetHeight]);
+
+  return (
+    <Animated.View style={[styles.sheet, { backgroundColor: theme.colorScheme.surface, height: sheetHeight, paddingBottom: insets.bottom }]}>
+      <View style={styles.content}>
+        <View style={styles.gap20} />
+        {/* Titre */}
+        <Text style={theme.textTheme.headlineMedium}>{name ?? traductions.contactCreateTitle}</Text>
+        {alias != null && alias.length > 0 ? (
+          <>
+            <View style={styles.gap10} />
+            <View style={styles.row}>
+              <Text numberOfLines={1} style={[theme.textTheme.bodyLarge, styles.flex, { color: Themer.neural03Color }]}>
+                {AliasPI.formatPhoneNumber(alias)}
+              </Text>
+              <Pressable accessibilityRole="button" hitSlop={8} onPress={() => void ClipboardWidget.setData(alias)}>
+                <MaterialIcons name="content-copy" size={16} color={theme.colorScheme.onSurface} />
+              </Pressable>
+            </View>
+          </>
+        ) : contact == null ? (
+          <>
+            <View style={styles.gap10} />
+            <Text numberOfLines={1} style={[theme.textTheme.bodyLarge, { color: Themer.neural03Color }]}>
+              {traductions.contactCreateSubtitle}
+            </Text>
+          </>
+        ) : null}
+        <View style={styles.gap20} />
+
+        {canEdit ? (
+          <>
+            {/* Formulaire */}
+            <ScrollView style={styles.flex} keyboardShouldPersistTaps="handled">
+              {contact == null && (
+                <>
+                  <CustomTextInput
+                    defaultValue={name ?? ''}
+                    labelText={traductions.contactCreateNameLabel}
+                    messageError={name == null || name.length === 0 ? traductions.contactCreateNameErrorEmpty : null}
+                    onChange={setName}
+                  />
+                  <View style={styles.gap10} />
+                </>
+              )}
+              <InputAliasWidget command={command} onChange={rebuild} />
+            </ScrollView>
+            <View style={styles.gap20} />
+            {/* Annuler / Enregistrer */}
+            <View style={styles.buttons}>
+              <View style={styles.flex}>
+                <FilledTonalButton onPress={cancel}>{traductions.btnTextCancel}</FilledTonalButton>
+              </View>
+              <View style={styles.gap16} />
+              <View style={styles.flex}>
+                <ElevatedButton onPress={canSave ? () => saveAlias(command.value!) : undefined}>{traductions.btnTextSave}</ElevatedButton>
+              </View>
+            </View>
+          </>
+        ) : contact != null && alias != null ? (
+          <>
+            {/* Modifier */}
+            <Action
+              icon={Images.iconEdit}
+              title={traductions.profileContactPageaActionEdit}
+              onPress={() => {
+                command.value = alias;
+                setCanEdit(true);
+              }}
+            />
+            {/* Supprimer */}
+            <Action
+              icon={Images.iconDelete}
+              title={traductions.profileContactPageaActionDelete}
+              onPress={() => contactBloc.add(new ContactDeleteSubmitEvent(contactIdOf(contact), alias))}
+            />
+          </>
+        ) : null}
+      </View>
+    </Animated.View>
+  );
+}
+
+function Action({ icon, title, onPress }: { icon: number; title: string; onPress: () => void }) {
+  const theme = useTheme();
+  return (
+    <Pressable accessibilityRole="button" onPress={onPress} style={styles.action}>
+      <View style={[styles.actionIcon, { backgroundColor: theme.colorScheme.surface }]}>
+        <Image source={icon} style={styles.icon} tintColor={theme.colorScheme.onSurface} />
+      </View>
+      <Text style={[theme.textTheme.headlineSmall, styles.actionText]}>{title}</Text>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  sheet: { borderTopLeftRadius: 20, borderTopRightRadius: 20, overflow: 'hidden' },
+  content: { paddingHorizontal: 20, flex: 1 },
+  flex: { flex: 1 },
+  flexShrink: { flexShrink: 1 },
+  row: { flexDirection: 'row', alignItems: 'center' },
+  buttons: { flexDirection: 'row', paddingVertical: 16 },
+  action: { flexDirection: 'row', alignItems: 'center', minHeight: 64 },
+  actionIcon: { width: 45, height: 45, borderRadius: 14, alignItems: 'center', justifyContent: 'center' },
+  icon: { width: 20, height: 20 },
+  actionText: { marginLeft: 16 },
+  gap10: { height: 10 },
+  gap16: { width: 16 },
+  gap20: { height: 20 },
+});

package/src/modules/profile/presentation/pages/web/profile_web_page.tsx

@@ -0,0 +1,80 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { useRef, useState } from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { WebView } from 'react-native-webview';
+
+import { Logger } from '../../../../../core/logger';
+import { AppRouter, useAppRouter } from '../../../../../core/router';
+import { useTheme } from '../../../../../core/theme';
+import { useAppLocalizations } from '../../../../../l10n/localizations';
+import { LoadingPage } from '../../../../../shared/widgets/loading_page';
+import { WebResourceErrorPage } from '../../../../../shared/widgets/webview_resource_error_widget';
+
+const logger = new Logger();
+
+/**
+ * Page web du profil (centre d'aide, CGU, politique de confidentialité) :
+ * loader pendant le chargement, page d'erreur avec « Réessayer ».
+ * (≈ `ProfileAidePage` / `ProfileCguPage` / `ProfilePocPage`)
+ */
+export function ProfileWebPage({ url }: { url: string }) {
+  const localisation = useAppLocalizations();
+  const theme = useTheme();
+  const router = useAppRouter();
+  const insets = useSafeAreaInsets();
+  const webview = useRef<WebView>(null);
+  const [loading, setLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
+
+  return (
+    <View style={[styles.flex, { paddingBottom: insets.bottom }]}>
+      <View style={styles.backRow}>
+        <Pressable accessibilityRole="button" hitSlop={12} style={styles.back} onPress={() => AppRouter.pop(router)}>
+          <MaterialIcons name="arrow-back" size={24} color={theme.colorScheme.onSurface} />
+        </Pressable>
+      </View>
+      <View style={styles.content}>
+        {hasError ? (
+          <WebResourceErrorPage
+            title={localisation.loginFormWebviewErrorTitle}
+            message={localisation.loginFormWebviewErrorSubtitle}
+            btnText={localisation.reessayer}
+            btnAction={() => {
+              setHasError(false);
+              webview.current?.reload();
+            }}
+          />
+        ) : null}
+        <View style={hasError ? styles.hidden : styles.flex}>
+          <WebView
+            ref={webview}
+            source={{ uri: url }}
+            style={styles.web}
+            javaScriptEnabled
+            onLoadStart={() => setLoading(true)}
+            onLoadEnd={() => setLoading(false)}
+            onError={(e) => {
+              logger.e('onWebResourceError', { error: e.nativeEvent });
+              setHasError(true);
+            }}
+          />
+          {loading && (
+            <View style={StyleSheet.absoluteFill}>
+              <LoadingPage />
+            </View>
+          )}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+  hidden: { height: 0, overflow: 'hidden' },
+  backRow: { flexDirection: 'row' },
+  back: { padding: 12 },
+  content: { flex: 1, paddingTop: 12, paddingLeft: 14, paddingRight: 12 },
+  web: { flex: 1, backgroundColor: 'transparent' },
+});

package/src/modules/qrcode/domain/models/qrcode_data.ts

@@ -0,0 +1,12 @@
+export class QrcodeData {
+  constructor(
+    readonly alias: string,
+    readonly txId: string | undefined,
+    readonly montant: number | undefined,
+    readonly channel: string,
+  ) {}
+
+  toJson(): Record<string, unknown> {
+    return { alias: this.alias, txId: this.txId, montant: this.montant, channel: this.channel };
+  }
+}

package/src/modules/qrcode/domain/models/qrcode_errors.ts

@@ -0,0 +1,79 @@
+/** Types d'erreurs possibles d'encodage */
+export enum QrCodeEncodeError {
+  /** Alias invalide (format incorrect, UUID invalide, etc.). */
+  invalidAlias = 'invalidAlias',
+  /** Montant invalide (format incorrect ou dépassement de longueur). */
+  invalidAmount = 'invalidAmount',
+  invalidCountryCode = 'invalidCountryCode',
+  unknown = 'unknown',
+}
+
+export class QrCodeEncodeException extends Error {
+  constructor(
+    message: string,
+    readonly options: { error?: QrCodeEncodeError } = {},
+  ) {
+    super(message);
+  }
+
+  get error(): QrCodeEncodeError | undefined {
+    return this.options.error;
+  }
+
+  toString(): string {
+    return this.error != null
+      ? `QrcodeEncodeException: ${this.message} (code: ${this.error})`
+      : `QrcodeEncodeException: ${this.message}`;
+  }
+}
+
+/** Types d'erreurs possibles de décodage */
+export enum QrCodeDecodeError {
+  /** Code de routage du service (CRC) invalide. */
+  invalidSRC = 'invalidSRC',
+  /** Structure TLV EMV invalide (longueur incorrecte, segment tronqué...). */
+  invalidPayloadFormat = 'invalidPayloadFormat',
+  /** Indicateur de format invalide (Tag 00, "01" attendu). */
+  invalidPayloadIndicator = 'invalidPayloadIndicator',
+  /** Global Unique Identifier invalide (Tag 36.00). */
+  invalidGUI = 'invalidGUI',
+  /** Alias (proxy de compte) invalide (Tag 36.01). */
+  invalidAlias = 'invalidAlias',
+  /** Merchant Category Code invalide (Tag 52). */
+  invalidMerchantCategoryCode = 'invalidMerchantCategoryCode',
+  /** Devise invalide (Tag 53, 952 = XOF attendu). */
+  invalidTransactionCurrency = 'invalidTransactionCurrency',
+  /** Montant invalide (Tag 54). */
+  invalidTransactionAmount = 'invalidTransactionAmount',
+  /** Code pays invalide (Tag 58). */
+  invalidCountryCode = 'invalidCountryCode',
+  /** Nom du marchand invalide (Tag 59). */
+  invalidMerchantName = 'invalidMerchantName',
+  /** Ville du marchand invalide (Tag 60). */
+  invalidMerchantCity = 'invalidMerchantCity',
+  /** Reference label invalide (Tag 62.05). */
+  invalidReferenceLabel = 'invalidReferenceLabel',
+  /** Merchant channel invalide (Tag 62.11). */
+  invalidMarchantChannel = 'invalidMarchantChannel',
+  invalidImage = 'invalidImage',
+  unknown = 'unknown',
+}
+
+export class QrCodeDecodeException extends Error {
+  constructor(
+    message: string,
+    readonly options: { error?: QrCodeDecodeError } = {},
+  ) {
+    super(message);
+  }
+
+  get error(): QrCodeDecodeError | undefined {
+    return this.options.error;
+  }
+
+  toString(): string {
+    return this.error != null
+      ? `QrcodeDecodeException: ${this.message} (code: ${this.error})`
+      : `QrcodeDecodeException: ${this.message}`;
+  }
+}

package/src/modules/qrcode/domain/models/qrcode_payload_decode.ts

@@ -0,0 +1,43 @@
+import type { QrCodeCountry } from './qrcode_payload_input';
+
+export enum QrCodeType {
+  /** QR réutilisable (montant généralement optionnel). */
+  static = 'static',
+  /** QR à usage unique (montant prédéfini, référence requise). */
+  dynamic = 'dynamic',
+}
+
+export class QrCodePayloadDecodeResult {
+  readonly qrType: QrCodeType;
+  readonly alias: string;
+  readonly countryCode: QrCodeCountry;
+  readonly amount?: number;
+  readonly referenceLabel?: string;
+  readonly merchantChannel: string;
+
+  constructor(params: {
+    qrType: QrCodeType;
+    alias: string;
+    countryCode: QrCodeCountry;
+    merchantChannel: string;
+    amount?: number;
+    referenceLabel?: string;
+  }) {
+    this.qrType = params.qrType;
+    this.alias = params.alias;
+    this.countryCode = params.countryCode;
+    this.merchantChannel = params.merchantChannel;
+    this.amount = params.amount;
+    this.referenceLabel = params.referenceLabel;
+  }
+
+  toJson(): Record<string, unknown> {
+    return {
+      qrType: this.qrType,
+      alias: this.alias,
+      merchantChannel: this.merchantChannel,
+      ...(this.referenceLabel != null ? { referenceLabel: this.referenceLabel } : {}),
+      ...(this.amount != null ? { amount: this.amount } : {}),
+    };
+  }
+}

package/src/modules/qrcode/domain/models/qrcode_payload_input.ts

@@ -0,0 +1,65 @@
+/** Pays UEMOA supportés par les QR PI-SPI (valeur = code ISO 3166-1 alpha-2) */
+export enum QrCodeCountry {
+  /** Bénin */
+  bj = 'BJ',
+  /** Burkina Faso */
+  bf = 'BF',
+  /** Côte d'Ivoire */
+  ci = 'CI',
+  /** Guinée-Bissau */
+  gw = 'GW',
+  /** Mali */
+  ml = 'ML',
+  /** Niger */
+  ne = 'NE',
+  /** Sénégal */
+  sn = 'SN',
+  /** Togo */
+  tg = 'TG',
+}
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+export namespace QrCodeCountry {
+  const values = (): string[] => Object.values(QrCodeCountry).filter((v) => typeof v === 'string') as string[];
+
+  /** Vérifie si le code pays fourni est supporté (ex. `isValid('SN')`). */
+  export function isValid(code: string): boolean {
+    return values().includes(code);
+  }
+
+  export function get(code: string): QrCodeCountry {
+    if (!isValid(code)) throw new Error(`Pays QR inconnu : ${code}`);
+    return code as QrCodeCountry;
+  }
+}
+
+export enum QrCodeUser {
+  /**
+   * Client particulier (personne physique), paiements P2P : QR statique
+   * uniquement, canal marchand spécifique, referenceLabel non requis.
+   */
+  individualCustomer = 'individualCustomer',
+  /**
+   * Commerçant individuel : QR statique, referenceLabel optionnel, canal
+   * marchand spécifique aux commerçants individuels.
+   */
+  individualMerchant = 'individualMerchant',
+}
+
+export class QrCodePayloadInput {
+  /** Catégorie d'utilisateur du QR (règles métier appliquées). */
+  readonly qrUser: QrCodeUser;
+  /** Alias unique du compte bénéficiaire (routage PI-SPI). Ne doit jamais être vide. */
+  readonly alias: string;
+  /** Pays d'émission du QR code (UEMOA). */
+  readonly country: QrCodeCountry;
+  /** Montant de la transaction, strictement positif s'il est fourni. */
+  readonly amount?: number;
+
+  constructor(params: { qrUser: QrCodeUser; alias: string; country: QrCodeCountry; amount?: number }) {
+    this.qrUser = params.qrUser;
+    this.alias = params.alias;
+    this.country = params.country;
+    this.amount = params.amount;
+  }
+}

package/src/modules/qrcode/domain/services/qrcode_service.ts

@@ -0,0 +1,38 @@
+import { Logger } from '../../../../core/logger';
+import type { Alias } from '../../../alias/domain/models/alias';
+import { ClientType } from '../../../alias/domain/models/client_type';
+import { QrcodeOutputLocal } from '../../infra/qrcode_output_local';
+import type { QrcodeInputPort } from '../../ports/input/qrcode_input_port';
+import type { QrcodeOutputPort } from '../../ports/output/qrcode_output_port';
+import { QrcodeData } from '../models/qrcode_data';
+import { QrCodeEncodeError, QrCodeEncodeException } from '../models/qrcode_errors';
+import { QrCodeCountry, QrCodePayloadInput, QrCodeUser } from '../models/qrcode_payload_input';
+
+export class QrcodeService implements QrcodeInputPort {
+  static readonly logger = new Logger();
+
+  readonly outputPort: QrcodeOutputPort = new QrcodeOutputLocal();
+
+  async decode(data: string): Promise<QrcodeData> {
+    QrcodeService.logger.i(`qrcode String data ------> ${data}`);
+    const response = this.outputPort.decode(data);
+    return new QrcodeData(response.alias, response.referenceLabel, response.amount, response.merchantChannel);
+  }
+
+  /** Génération du QR code de l'alias (personne physique ou commerçant individuel) */
+  async encode(alias: Alias): Promise<string> {
+    const country = QrCodeCountry.isValid(alias.pays.toUpperCase()) ? QrCodeCountry.get(alias.pays.toUpperCase()) : null;
+    if (country == null) {
+      throw new QrCodeEncodeException('Country Code invalide', { error: QrCodeEncodeError.invalidCountryCode });
+    }
+    const input = new QrCodePayloadInput({
+      qrUser:
+        alias.clientType == null || alias.clientType === ClientType.personnePhysique
+          ? QrCodeUser.individualCustomer
+          : QrCodeUser.individualMerchant,
+      alias: alias.getShid(),
+      country,
+    });
+    return this.outputPort.encode(input);
+  }
+}