@pi-spi/app 0.0.0-stage → 1.2.1

package/src/modules/qrcode/infra/qrcode_output_local.ts

@@ -0,0 +1,196 @@
+import { AliasPI } from '../../../shared/models/alias_pi';
+import {
+  QrCodeDecodeError,
+  QrCodeDecodeException,
+  QrCodeEncodeError,
+  QrCodeEncodeException,
+} from '../domain/models/qrcode_errors';
+import { QrCodePayloadDecodeResult, QrCodeType } from '../domain/models/qrcode_payload_decode';
+import { QrCodeCountry, QrCodeUser, type QrCodePayloadInput } from '../domain/models/qrcode_payload_input';
+import type { QrcodeOutputPort } from '../ports/output/qrcode_output_port';
+
+/** Encodage / décodage des QR codes PI-SPI au format EMV (TLV + CRC16). */
+export class QrcodeOutputLocal implements QrcodeOutputPort {
+  readonly defaultPispiQrPayloadIndicator = '01';
+  readonly defaultPispiQrGui = 'int.bceao.pi';
+  readonly defaultPispiQrMerchantCategoryCode = '0000';
+  readonly defaultPispiQrTransactionCurrency = '952';
+  readonly defaultPispiQrMerchantName = 'X';
+  readonly defaultPispiQrMerchantCity = 'X';
+
+  encode(input: QrCodePayloadInput): string {
+    if (!this.isValidAlias(input.alias)) {
+      throw new QrCodeEncodeException("L'alias doit être un UUID v4 valide", { error: QrCodeEncodeError.invalidAlias });
+    }
+
+    const segments: string[] = [];
+    // Payload / Format Indicator
+    segments.push(formatEmv('00', this.defaultPispiQrPayloadIndicator));
+    // Merchant Account information : GUI + Account proxy
+    segments.push(formatEmv('36', formatEmv('00', this.defaultPispiQrGui) + formatEmv('01', input.alias)));
+    // Merchant Category Code
+    segments.push(formatEmv('52', this.defaultPispiQrMerchantCategoryCode));
+    // Transaction Currency
+    segments.push(formatEmv('53', this.defaultPispiQrTransactionCurrency));
+
+    if (input.amount != null) {
+      if (input.amount <= 0) {
+        throw new QrCodeEncodeException('Le montant doit être superieur à 0', { error: QrCodeEncodeError.invalidAmount });
+      }
+      // Transaction amount
+      segments.push(formatEmv('54', String(Math.trunc(input.amount))));
+    }
+
+    segments.push(formatEmv('58', input.country)); // Country Code
+    segments.push(formatEmv('59', this.defaultPispiQrMerchantName)); // Merchant Name
+    segments.push(formatEmv('60', this.defaultPispiQrMerchantCity)); // Merchant city
+
+    // Additional Data Field Template
+    segments.push(formatEmv('62', formatEmv('11', input.qrUser === QrCodeUser.individualCustomer ? '731' : '000')));
+
+    const payloadWithoutCrc = segments.join('');
+    // Ajouter le tag CRC avec longueur 04 AVANT calcul
+    const crc = this.computeCrc16(`${payloadWithoutCrc}6304`);
+    return `${payloadWithoutCrc}${formatEmv('63', crc)}`;
+  }
+
+  decode(payload: string): QrCodePayloadDecodeResult {
+    const invalidFormat = (message: string) =>
+      new QrCodeDecodeException(message, { error: QrCodeDecodeError.invalidPayloadFormat });
+
+    if (payload.length === 0) throw invalidFormat('La payload doit être une chaîne non vide');
+    if (payload.length < 12) throw invalidFormat('Payload trop courte pour contenir des segments EMV');
+
+    const root: Record<string, string> = {};
+    let index = 0;
+    while (index < payload.length - 4) {
+      if (index + 4 > payload.length - 4) throw invalidFormat('Segment TLV incomplet');
+      const id = payload.substring(index, index + 2);
+      const lengthStr = payload.substring(index + 2, index + 4);
+      if (!/^\d{2}$/.test(lengthStr)) throw invalidFormat('Longueur TLV invalide');
+      const length = parseInt(lengthStr, 10);
+      if (index + 4 + length > payload.length) throw invalidFormat('Valeur TLV dépasse la taille du payload');
+      root[id] = payload.substring(index + 4, index + 4 + length);
+      index += 4 + length;
+    }
+
+    const extractedCrc = payload.substring(payload.length - 4);
+    const computedCrc = this.computeCrc16(payload.substring(0, payload.length - 4));
+    if (extractedCrc !== computedCrc) {
+      throw new QrCodeDecodeException('CRC invalide', { error: QrCodeDecodeError.invalidSRC });
+    }
+
+    const payloadFormatIndicator = root['00'];
+    const merchantCategoryCode = root['52'];
+    const transactionCurrency = root['53'];
+    const transactionAmount = root['54'];
+    const countryCode = root['58'];
+    const merchantName = root['59'];
+    const merchantCity = root['60'];
+    const merchantAccountInformation = root['36'];
+    const merchantAccountInformationRoot = parseNested(merchantAccountInformation);
+    const gui = merchantAccountInformationRoot['00'];
+    const accountProxy = merchantAccountInformationRoot['01'];
+    const additionalData = root['62'];
+    const additionalDataRoot = additionalData != null ? parseNested(additionalData) : null;
+    const referenceLabel = additionalDataRoot?.['05'];
+    const merchantChannel = additionalDataRoot?.['11'];
+
+    if (
+      payloadFormatIndicator == null ||
+      merchantCategoryCode == null ||
+      transactionCurrency == null ||
+      countryCode == null ||
+      merchantName == null ||
+      merchantCity == null ||
+      merchantAccountInformation == null ||
+      gui == null ||
+      accountProxy == null ||
+      additionalData == null ||
+      merchantChannel == null
+    ) {
+      throw invalidFormat('Payload invalide');
+    }
+
+    const fail = (message: string, error: QrCodeDecodeError) => new QrCodeDecodeException(message, { error });
+    if (payloadFormatIndicator !== this.defaultPispiQrPayloadIndicator) {
+      throw fail('Payload invalide Indicator', QrCodeDecodeError.invalidPayloadIndicator);
+    }
+    if (gui !== this.defaultPispiQrGui) throw fail('GUI invalide', QrCodeDecodeError.invalidGUI);
+    if (!this.isValidAlias(accountProxy)) throw fail('Proxy invalide', QrCodeDecodeError.invalidAlias);
+    if (merchantCategoryCode !== this.defaultPispiQrMerchantCategoryCode) {
+      throw fail('Merchant Category Code invalide', QrCodeDecodeError.invalidMerchantCategoryCode);
+    }
+    if (transactionCurrency !== this.defaultPispiQrTransactionCurrency) {
+      throw fail('Transaction Currency invalide', QrCodeDecodeError.invalidTransactionCurrency);
+    }
+    if (transactionAmount != null && !/^\d{1,10}(\.\d{1,2})?$/.test(transactionAmount)) {
+      throw fail('Transaction Amount invalide', QrCodeDecodeError.invalidTransactionAmount);
+    }
+    if (!QrCodeCountry.isValid(countryCode)) throw fail('Country Code invalide', QrCodeDecodeError.invalidCountryCode);
+    if (merchantName !== this.defaultPispiQrMerchantName) {
+      throw fail('Merchant Name invalide', QrCodeDecodeError.invalidMerchantName);
+    }
+    if (merchantCity !== this.defaultPispiQrMerchantCity) {
+      throw fail('Merchant City invalide', QrCodeDecodeError.invalidMerchantCity);
+    }
+    if (!['000', '400', '731'].includes(merchantChannel)) {
+      throw fail('Marchant Channel invalide', QrCodeDecodeError.invalidMarchantChannel);
+    }
+    if (referenceLabel != null && !(referenceLabel.length > 0 && referenceLabel.length < 25)) {
+      throw fail('Reference Label invalide', QrCodeDecodeError.invalidReferenceLabel);
+    }
+
+    return new QrCodePayloadDecodeResult({
+      qrType: merchantChannel === '400' ? QrCodeType.dynamic : QrCodeType.static,
+      alias: accountProxy,
+      merchantChannel,
+      amount: transactionAmount != null ? parseFloat(transactionAmount) : undefined,
+      countryCode: QrCodeCountry.get(countryCode),
+      referenceLabel,
+    });
+  }
+
+  /** CRC-16/CCITT-FALSE (polynôme 0x1021, valeur initiale 0xFFFF), en hexadécimal majuscule sur 4 caractères. */
+  computeCrc16(input: string): string {
+    let crc = 0xffff;
+    const polynomial = 0x1021;
+    for (let i = 0; i < input.length; i++) {
+      crc ^= input.charCodeAt(i) << 8;
+      for (let j = 0; j < 8; j++) {
+        crc = (crc & 0x8000) !== 0 ? (crc << 1) ^ polynomial : crc << 1;
+        crc &= 0xffff;
+      }
+    }
+    return crc.toString(16).toUpperCase().padStart(4, '0');
+  }
+
+  // Écart volontaire : un alias absent (ex. MBNO sans SHID) faisait planter
+  // l'encodage (TypeError) ; il est désormais rejeté comme alias invalide.
+  isValidAlias(alias: string | null | undefined): boolean {
+    return alias != null && alias.length > 0 && AliasPI.patternSHID.test(alias);
+  }
+}
+
+function formatEmv(id: string, value: string): string {
+  return `${id}${String(value.length).padStart(2, '0')}${value}`;
+}
+
+function parseNested(value: string | undefined): Record<string, string> {
+  if (value == null) return {};
+  const invalidFormat = (message: string) =>
+    new QrCodeDecodeException(message, { error: QrCodeDecodeError.invalidPayloadFormat });
+  const result: Record<string, string> = {};
+  let index = 0;
+  while (index < value.length) {
+    if (index + 4 > value.length) throw invalidFormat('Segment TLV imbriqué incomplet');
+    const id = value.substring(index, index + 2);
+    const lengthStr = value.substring(index + 2, index + 4);
+    if (!/^\d{2}$/.test(lengthStr)) throw invalidFormat('Longueur TLV imbriquée invalide');
+    const length = parseInt(lengthStr, 10);
+    if (index + 4 + length > value.length) throw invalidFormat('Valeur TLV imbriquée dépasse la taille');
+    result[id] = value.substring(index + 4, index + 4 + length);
+    index += 4 + length;
+  }
+  return result;
+}

package/src/modules/qrcode/ports/input/qrcode_input_port.ts

@@ -0,0 +1,10 @@
+import type { Alias } from '../../../alias/domain/models/alias';
+import type { QrcodeData } from '../../domain/models/qrcode_data';
+
+export interface QrcodeInputPort {
+  /** Permet de décoder un QR Code EMV */
+  decode(data: string): Promise<QrcodeData>;
+
+  /** Permet d'encoder un QR Code EMV à partir de l'alias */
+  encode(alias: Alias): Promise<string>;
+}

package/src/modules/qrcode/ports/output/qrcode_output_port.ts

@@ -0,0 +1,8 @@
+import type { QrCodePayloadDecodeResult } from '../../domain/models/qrcode_payload_decode';
+import type { QrCodePayloadInput } from '../../domain/models/qrcode_payload_input';
+
+export interface QrcodeOutputPort {
+  encode(input: QrCodePayloadInput): string;
+
+  decode(payload: string): QrCodePayloadDecodeResult;
+}

package/src/modules/qrcode/presentation/bloc/qrcode_alias/qrcode_alias_bloc.ts

@@ -0,0 +1,35 @@
+import { Bloc, type Emitter } from '../../../../../core/bloc';
+import { Logger } from '../../../../../core/logger';
+import { QrCodeEncodeError, QrCodeEncodeException } from '../../../domain/models/qrcode_errors';
+import type { QrcodeInputPort } from '../../../ports/input/qrcode_input_port';
+import { QrcodeAliasEncodeEvent, type QrcodeAliasEvent } from './qrcode_alias_event';
+import {
+  QrcodeAliasEncodeErrorState,
+  QrcodeAliasEncodeSuccessState,
+  QrcodeAliasInitialState,
+  type QrcodeAliasState,
+} from './qrcode_alias_state';
+
+export class QrcodeAliasBloc extends Bloc<QrcodeAliasEvent, QrcodeAliasState> {
+  readonly logger = new Logger();
+
+  constructor(readonly qrcodeInputPort: QrcodeInputPort) {
+    super(new QrcodeAliasInitialState());
+    // Quand on encode un alias en qr code
+    this.on(QrcodeAliasEncodeEvent, (event, emit) => this.onQrcodeAliasEncodeEvent(event, emit));
+  }
+
+  private async onQrcodeAliasEncodeEvent(event: QrcodeAliasEncodeEvent, emit: Emitter<QrcodeAliasState>): Promise<void> {
+    try {
+      const qrCode = await this.qrcodeInputPort.encode(event.alias);
+      emit(new QrcodeAliasEncodeSuccessState(qrCode));
+    } catch (e) {
+      this.logger.e('Unexpected QR Code encode error', { error: e });
+      emit(
+        new QrcodeAliasEncodeErrorState(
+          e instanceof QrCodeEncodeException ? (e.error ?? QrCodeEncodeError.unknown) : QrCodeEncodeError.unknown,
+        ),
+      );
+    }
+  }
+}

package/src/modules/qrcode/presentation/bloc/qrcode_alias/qrcode_alias_event.ts

@@ -0,0 +1,9 @@
+import type { Alias } from '../../../../alias/domain/models/alias';
+
+export abstract class QrcodeAliasEvent {}
+
+export class QrcodeAliasEncodeEvent extends QrcodeAliasEvent {
+  constructor(readonly alias: Alias) {
+    super();
+  }
+}

package/src/modules/qrcode/presentation/bloc/qrcode_alias/qrcode_alias_state.ts

@@ -0,0 +1,17 @@
+import type { QrCodeEncodeError } from '../../../domain/models/qrcode_errors';
+
+export abstract class QrcodeAliasState {}
+
+export class QrcodeAliasInitialState extends QrcodeAliasState {}
+
+export class QrcodeAliasEncodeSuccessState extends QrcodeAliasState {
+  constructor(readonly qrCode: string) {
+    super();
+  }
+}
+
+export class QrcodeAliasEncodeErrorState extends QrcodeAliasState {
+  constructor(readonly error: QrCodeEncodeError) {
+    super();
+  }
+}

package/src/modules/qrcode/presentation/bloc/qrcode_scan/qrcode_scan_bloc.ts

@@ -0,0 +1,60 @@
+import { scanFromURLAsync } from 'expo-camera';
+import * as ImagePicker from 'expo-image-picker';
+
+import { Bloc, type Emitter } from '../../../../../core/bloc';
+import { Logger } from '../../../../../core/logger';
+import type { QrcodeData } from '../../../domain/models/qrcode_data';
+import { QrCodeDecodeError, QrCodeDecodeException } from '../../../domain/models/qrcode_errors';
+import type { QrcodeInputPort } from '../../../ports/input/qrcode_input_port';
+import { QrcodeScanDecodeEvent, QrcodeScanSelectEvent, type QrcodeScanEvent } from './qrcode_scan_event';
+import { QrcodeScanErrorState, QrcodeScanInitialState, QrcodeScanSuccessState, type QrcodeScanState } from './qrcode_scan_state';
+
+/** Scan de QR codes PI-SPI : par la caméra ou depuis une image de la galerie. */
+export class QrcodeScanBloc extends Bloc<QrcodeScanEvent, QrcodeScanState> {
+  readonly logger = new Logger();
+
+  constructor(readonly qrcodeInputPort: QrcodeInputPort) {
+    super(new QrcodeScanInitialState());
+    // Quand on scanne un QR code
+    this.on(QrcodeScanDecodeEvent, (e, emit) => this.onDecode(e, emit));
+    // Quand on choisit une image de QR code dans la galerie
+    this.on(QrcodeScanSelectEvent, (_e, emit) => this.onSelect(emit));
+  }
+
+  /** Décode les QR codes : le premier valide l'emporte, sinon la première erreur */
+  private async onDecode(event: QrcodeScanDecodeEvent, emit: Emitter<QrcodeScanState>): Promise<void> {
+    const errors: QrCodeDecodeError[] = [];
+    const qrDatas: QrcodeData[] = [];
+    for (const code of event.codes) {
+      try {
+        qrDatas.push(await this.qrcodeInputPort.decode(code));
+      } catch (e) {
+        this.logger.e('QR Code decode error', { error: e });
+        errors.push(e instanceof QrCodeDecodeException ? (e.error ?? QrCodeDecodeError.unknown) : QrCodeDecodeError.unknown);
+      }
+    }
+    if (qrDatas.length > 0) emit(new QrcodeScanSuccessState(qrDatas[0]));
+    else emit(new QrcodeScanErrorState(errors[0] ?? QrCodeDecodeError.unknown));
+  }
+
+  /** Lit les QR codes d'une image choisie dans la galerie */
+  private async onSelect(emit: Emitter<QrcodeScanState>): Promise<void> {
+    try {
+      const image = await ImagePicker.launchImageLibraryAsync({ mediaTypes: 'images' });
+      if (image.canceled || image.assets[0] == null) {
+        emit(new QrcodeScanErrorState(QrCodeDecodeError.unknown));
+        return;
+      }
+      const results = await scanFromURLAsync(image.assets[0].uri, ['qr']);
+      const codes = results.map((r) => r.data).filter((d) => d != null && d.length > 0);
+      if (codes.length > 0) {
+        if (!this.isClosed) this.add(new QrcodeScanDecodeEvent(codes));
+      } else {
+        emit(new QrcodeScanErrorState(QrCodeDecodeError.invalidImage));
+      }
+    } catch (e) {
+      this.logger.e('Unexpected QR Code decode error', { error: e });
+      emit(new QrcodeScanErrorState(e instanceof QrCodeDecodeException ? (e.error ?? QrCodeDecodeError.unknown) : QrCodeDecodeError.unknown));
+    }
+  }
+}

package/src/modules/qrcode/presentation/bloc/qrcode_scan/qrcode_scan_event.ts

@@ -0,0 +1,11 @@
+export abstract class QrcodeScanEvent {}
+
+/** Décoder des QR codes scannés selon la norme EMV */
+export class QrcodeScanDecodeEvent extends QrcodeScanEvent {
+  constructor(readonly codes: string[]) {
+    super();
+  }
+}
+
+/** Choisir une image de QR code dans la galerie du téléphone */
+export class QrcodeScanSelectEvent extends QrcodeScanEvent {}

package/src/modules/qrcode/presentation/bloc/qrcode_scan/qrcode_scan_state.ts

@@ -0,0 +1,18 @@
+import type { QrcodeData } from '../../../domain/models/qrcode_data';
+import type { QrCodeDecodeError } from '../../../domain/models/qrcode_errors';
+
+export abstract class QrcodeScanState {}
+
+export class QrcodeScanInitialState extends QrcodeScanState {}
+
+export class QrcodeScanSuccessState extends QrcodeScanState {
+  constructor(readonly data: QrcodeData) {
+    super();
+  }
+}
+
+export class QrcodeScanErrorState extends QrcodeScanState {
+  constructor(readonly error: QrCodeDecodeError) {
+    super();
+  }
+}

package/src/modules/qrcode/presentation/pages/qrcode_alias_page.tsx

@@ -0,0 +1,166 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { File, Paths } from 'expo-file-system';
+import * as Sharing from 'expo-sharing';
+import { useRef, useState } from 'react';
+import { ActivityIndicator, Platform, Pressable, ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native';
+import { captureRef } from 'react-native-view-shot';
+
+import { useBloc, useBlocListener, useCreateBloc } from '../../../../core/bloc_react';
+import { Di } from '../../../../core/di';
+import { AppEnv } from '../../../../core/env';
+import { Logger } from '../../../../core/logger';
+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 { Card } from '../../../../shared/material/card';
+import { showModalBottomSheet } from '../../../../shared/material/overlays';
+import { AppBar, Scaffold } from '../../../../shared/material/scaffold';
+import { CustomSnackBar } from '../../../../shared/widgets/custom_snack_bar';
+import { MyPageContainer } from '../../../../shared/widgets/my_page_container';
+import { QrImageWidget } from '../../../../shared/widgets/qr_image/qr_image_widget';
+import { AliasBloc } from '../../../alias/presentation/bloc/alias_bloc';
+import { AliasExistState } from '../../../alias/presentation/bloc/alias_state';
+import { QrcodeAliasBloc } from '../bloc/qrcode_alias/qrcode_alias_bloc';
+import { QrcodeAliasEncodeEvent } from '../bloc/qrcode_alias/qrcode_alias_event';
+import { QrcodeAliasEncodeErrorState, QrcodeAliasEncodeSuccessState } from '../bloc/qrcode_alias/qrcode_alias_state';
+import { QrcodeAliasPageAvatar } from './qrcode_alias_page_avatar';
+import { QrcodeAliasPageShare } from './qrcode_alias_page_share';
+import { QrcodeSwitchBtn } from './qrcode_switch_btn';
+
+const logger = new Logger();
+
+/** QR code de l'alias du client, à montrer ou à partager (route `qrcodeShow`). */
+export function QrCodeAliasPage() {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const router = useAppRouter();
+  const { width } = useWindowDimensions();
+  const aliasBloc = useBloc(AliasBloc);
+  const user = Di.config.user;
+  const [alias] = useState(() => (aliasBloc.state instanceof AliasExistState ? aliasBloc.state.alias : null));
+  const aliasCle = alias?.getCle() ?? '';
+  const [qrCode, setQrCode] = useState<string | null>(null);
+  const [showQrcodeName, setShowQrcodeName] = useState(false);
+  const qrRef = useRef<View>(null);
+  const bloc = useCreateBloc(() => {
+    const created = new QrcodeAliasBloc(Di.getQrcodeInputPort());
+    if (alias != null) created.add(new QrcodeAliasEncodeEvent(alias));
+    return created;
+  });
+
+  useBlocListener(bloc, (s) => {
+    if (s instanceof QrcodeAliasEncodeSuccessState) setQrCode(s.qrCode);
+    else if (s instanceof QrcodeAliasEncodeErrorState) {
+      CustomSnackBar.show(traductions.qrcodeEncodeErrorMsg, { durationMs: 5000, bgColor: Themer.systemErrorColor });
+      AppRouter.pushReplacement(router, AppRouter.home);
+    }
+  });
+
+  const dark = theme.brightness === 'dark';
+  const shareQRCode = async () => {
+    // Le nom est ajouté sous le QR le temps de la capture
+    setShowQrcodeName(true);
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    try {
+      const uri = await captureRef(qrRef, { format: 'png', quality: 1 });
+      await sharePng(uri, user.nomComplet(), traductions);
+    } catch (e) {
+      logger.e('Partage du QR code', { error: e });
+    } finally {
+      setShowQrcodeName(false);
+    }
+  };
+
+  return (
+    <Scaffold
+      appBar={
+        <AppBar
+          leading={
+            <Pressable accessibilityRole="button" hitSlop={12} style={styles.icon} onPress={() => AppRouter.pushReplacement(router, AppRouter.home)}>
+              <MaterialIcons name="close" size={24} color={theme.appBarTheme.foregroundColor} />
+            </Pressable>
+          }
+          actions={
+            <Pressable
+              accessibilityRole="button"
+              hitSlop={12}
+              style={styles.icon}
+              onPress={() =>
+                void showModalBottomSheet(router, {
+                  themed: true,
+                  builder: () => <QrcodeAliasPageShare username={user.nomComplet()} alias={aliasCle} shareQrcode={() => void shareQRCode()} />,
+                })
+              }
+            >
+              <MaterialIcons name={Platform.OS === 'ios' ? 'ios-share' : 'share'} size={24} color={theme.appBarTheme.foregroundColor} />
+            </Pressable>
+          }
+        />
+      }
+    >
+      <MyPageContainer>
+        <ScrollView contentContainerStyle={styles.content}>
+          <QrcodeAliasPageAvatar />
+          <View style={styles.gap40} />
+          <View style={styles.qrPadding}>
+            {qrCode != null ? (
+              <View ref={qrRef} collapsable={false}>
+                <Card>
+                  <QrImageWidget
+                    payload={qrCode}
+                    qrImageOptions={{
+                      margin: 12,
+                      data: dark ? { color: Themer.whiteColor } : undefined,
+                      eye: dark ? { color: Themer.whiteColor } : undefined,
+                      label: showQrcodeName
+                        ? {
+                            text: Di.config.appConfig.appName.length > 0 ? `${Di.config.appConfig.appName} - ${user.nomComplet()}` : user.nomComplet(),
+                            textStyle: theme.textTheme.displayMedium,
+                          }
+                        : undefined,
+                    }}
+                  />
+                </Card>
+              </View>
+            ) : (
+              <ActivityIndicator color={theme.colorScheme.primary} />
+            )}
+          </View>
+        </ScrollView>
+      </MyPageContainer>
+      {/* Scanner / Mon code */}
+      <View style={[styles.switch, { marginHorizontal: width / 5.2 }]}>
+        <QrcodeSwitchBtn
+          cardBgColor="rgba(21,20,19,0.6)"
+          items={[
+            {
+              text: traductions.qrcodePageBtnScan,
+              textColor: Themer.whiteColor,
+              btnColor: 'transparent',
+              action: () => AppRouter.pushReplacement(router, AppRouter.qrcodeScan),
+            },
+            { text: traductions.qrcodePageBtnMonCode, textColor: '#151413', btnColor: Themer.whiteColor },
+          ]}
+        />
+      </View>
+    </Scaffold>
+  );
+}
+
+/** Partage l'image PNG du QR code, nommée « qrcode-<app>-de-<nom>.png » */
+async function sharePng(uri: string, username: string, traductions: AppLocalizations): Promise<void> {
+  const name = `qrcode-${AppEnv.appName.length > 0 ? AppEnv.appName : 'PI'}-de-${username}.png`.replace(/[\\/:*?"<>|]/g, '_');
+  const file = new File(Paths.cache, name);
+  if (file.exists) file.delete();
+  await new File(uri).copy(file);
+  await Sharing.shareAsync(file.uri, { mimeType: 'image/png', dialogTitle: traductions.qrcodePagePartageQrcodeMessage(username) });
+}
+
+const styles = StyleSheet.create({
+  icon: { padding: 12 },
+  content: { alignItems: 'stretch' },
+  qrPadding: { paddingHorizontal: 20, alignItems: 'center' },
+  gap40: { height: 40 },
+  switch: { height: 64, marginVertical: 20 },
+});

package/src/modules/qrcode/presentation/pages/qrcode_alias_page_avatar.tsx

@@ -0,0 +1,50 @@
+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 { Di } from '../../../../core/di';
+import { useTheme } from '../../../../core/theme';
+import { useValueListenable } from '../../../../core/value_notifier';
+import { AliasPI } from '../../../../shared/models/alias_pi';
+import { AvatarWidget } from '../../../../shared/widgets/avatar_widget';
+import { ClipboardWidget } from '../../../../shared/widgets/clipboard_widget';
+import { AliasBloc } from '../../../alias/presentation/bloc/alias_bloc';
+import { AliasExistState } from '../../../alias/presentation/bloc/alias_state';
+import { ProfileAvatar } from '../../../profile/domain/profile_avatar';
+
+/** En-tête de la page QR : nom, alias (à copier) et photo du client. */
+export function QrcodeAliasPageAvatar() {
+  const theme = useTheme();
+  const aliasBloc = useBloc(AliasBloc);
+  const [aliasCle] = useState(() => (aliasBloc.state instanceof AliasExistState ? aliasBloc.state.alias.getCle() : ''));
+  const user = Di.config.user;
+  const avatar = useValueListenable(ProfileAvatar.value);
+
+  return (
+    <View style={styles.row}>
+      <View style={styles.flex}>
+        <Text numberOfLines={1} style={theme.textTheme.titleSmall}>
+          {user.nomComplet()}
+        </Text>
+        <View style={styles.row}>
+          <Text numberOfLines={1} style={[theme.textTheme.displayLarge, styles.flex, { color: theme.primaryColor }]}>
+            {AliasPI.formatPhoneNumber(aliasCle)}
+          </Text>
+          <Pressable accessibilityRole="button" hitSlop={8} style={styles.copy} onPress={() => void ClipboardWidget.setData(aliasCle)}>
+            <MaterialIcons name="content-copy" size={18} color={theme.primaryColor} />
+          </Pressable>
+        </View>
+      </View>
+      <View style={styles.gap8} />
+      <AvatarWidget userInitiales={user.initiales()} photo={avatar} size={64} rounded />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: { flexDirection: 'row', alignItems: 'center' },
+  flex: { flex: 1 },
+  copy: { padding: 11 },
+  gap8: { width: 8 },
+});

package/src/modules/qrcode/presentation/pages/qrcode_alias_page_share.tsx

@@ -0,0 +1,64 @@
+import { ScrollView, Share, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { Images } from '../../../../core/assets';
+import { AppRouter, useAppRouter } from '../../../../core/router';
+import { useTheme } from '../../../../core/theme';
+import { useAppLocalizations } from '../../../../l10n/localizations';
+import { MenuActionItem, MenuActionsWiget } from '../../../../shared/widgets/menu_actions_widget';
+
+/** Feuille « Partager » : le QR code (image) ou l'alias (texte). */
+export function QrcodeAliasPageShare({
+  username,
+  alias,
+  shareQrcode,
+}: {
+  username: string;
+  alias: string;
+  shareQrcode: () => void;
+}) {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const router = useAppRouter();
+  const insets = useSafeAreaInsets();
+  const { height } = useWindowDimensions();
+
+  return (
+    <View style={[styles.box, { backgroundColor: theme.colorScheme.surface, maxHeight: height * 0.6 }]}>
+      <ScrollView contentContainerStyle={[styles.content, { paddingBottom: 20 + insets.bottom }]}>
+        <Text style={theme.textTheme.headlineMedium}>{traductions.qrcodePagePartageTitle}</Text>
+        <View style={styles.gap20} />
+        <MenuActionsWiget
+          items={[
+            new MenuActionItem(
+              Images.homeFooterQrcode,
+              traductions.qrcodePagePartageQrCodeTitle,
+              traductions.qrcodePagePartageQrCodeSubTitle,
+              () => {
+                AppRouter.pop(router);
+                shareQrcode();
+              },
+              { iconSize: 20 },
+            ),
+            new MenuActionItem(
+              Images.iconsCircleUser,
+              traductions.qrcodePagePartageAliasTitle,
+              traductions.qrcodePagePartageAliasSubTitle,
+              () => {
+                AppRouter.pop(router);
+                void Share.share({ title: traductions.qrcodePagePartageAliasMessage(username), message: alias });
+              },
+              { iconSize: 20 },
+            ),
+          ]}
+        />
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  box: { borderRadius: 20, overflow: 'hidden' },
+  content: { padding: 20 },
+  gap20: { height: 20 },
+});