@pi-spi/app 0.0.0-stage → 1.2.0

package/src/shared/models/uemoa_countries.ts

@@ -0,0 +1,42 @@
+export class UEMOACountry {
+  constructor(
+    readonly iso: string,
+    readonly iso3: string,
+    readonly name: string,
+    readonly phoneCode: string,
+    readonly flag: string,
+  ) {}
+
+  /**
+   * 8 UEMOA Countries. Used by alias feature (create alias by phone number)
+   * and transfer feature (transfer directly to an account).
+   */
+  static readonly liste: readonly UEMOACountry[] = [
+    new UEMOACountry('BJ', 'BEN', 'Bénin', '+229', '🇧🇯'),
+    new UEMOACountry('BF', 'BFA', 'Burkina Faso', '+226', '🇧🇫'),
+    new UEMOACountry('CI', 'CIV', "Côte d'Ivoire", '+225', '🇨🇮'),
+    new UEMOACountry('GW', 'GNB', 'Guinea-Bissau', '+245', '🇬🇼'),
+    new UEMOACountry('ML', 'MLI', 'Mali', '+223', '🇲🇱'),
+    new UEMOACountry('NE', 'NER', 'Niger', '+227', '🇳🇪'),
+    new UEMOACountry('SN', 'SEN', 'Sénégal', '+221', '🇸🇳'),
+    new UEMOACountry('TG', 'TGO', 'Togo', '+228', '🇹🇬'),
+  ];
+
+  /** Fetch UEMOA country details from ISO Code (or phone code) */
+  static get(code: string): UEMOACountry | undefined {
+    return UEMOACountry.liste.find((el) => el.iso === code || el.phoneCode === code);
+  }
+
+  /** Check if a country is a UEMOA country */
+  static isExist(iso: string): boolean {
+    return UEMOACountry.liste.some((el) => el.iso.toUpperCase() === iso.toUpperCase());
+  }
+
+  static paysIsoCodes(): string[] {
+    return UEMOACountry.liste.map((p) => p.iso);
+  }
+
+  static paysIndcatifs(): string[] {
+    return UEMOACountry.liste.map((p) => p.phoneCode);
+  }
+}

package/src/shared/utils/compte_mask.ts

@@ -0,0 +1,18 @@
+/**
+ * Masque un numéro de compte. `numero` n'est pas forcément un numéro de
+ * compte bancaire au format long (IBAN...) : selon le participant PI-SPI,
+ * ça peut aussi être celui d'un EME — souvent un numéro de téléphone
+ * UEMOA, 8 à 10 chiffres **sans** indicatif pays, ou jusqu'à ~15
+ * caractères **avec** — ou d'un SFD. On adapte donc la portion visible à
+ * la longueur réelle :
+ * - `<= 4` caractères : rien de sûr à masquer, retourné tel quel.
+ * - `<= 15` caractères : 2 premiers + 2 derniers visibles (ex. "07 **** 89").
+ * - Sinon (compte bancaire) : 4 premiers + 4 derniers (ex. "SN01 **** **** 0431").
+ */
+export function maskCompte(numero: string): string {
+  if (numero.length <= 4) return numero;
+  if (numero.length <= 15) {
+    return `${numero.substring(0, 2)} **** ${numero.substring(numero.length - 2)}`;
+  }
+  return `${numero.substring(0, 4)} **** **** ${numero.substring(numero.length - 4)}`;
+}

package/src/shared/utils/date_format.ts

@@ -0,0 +1,54 @@
+/**
+ * Équivalent de `DateFormat(pattern, locale).format(date)` (package intl)
+ * pour les motifs utilisés par le SDK : d, dd, M, MM, MMM, MMMM, y, yy,
+ * yyyy, E, EEE, EEEE, H, HH, h, hh, m, mm, s, ss, a, et le texte entre
+ * apostrophes. Les noms de mois et de jours viennent de `Intl`, dans la
+ * langue du SDK.
+ */
+export class DateFormat {
+  constructor(
+    readonly pattern: string,
+    readonly locale: string,
+  ) {}
+
+  format(date: Date): string {
+    const tokens = this.pattern.match(/'[^']*'|d+|M+|y+|E+|H+|h+|m+|s+|a|[^dMyEHhmsa']+/g) ?? [];
+    return tokens.map((token) => this.formatToken(token, date)).join('');
+  }
+
+  private intl(options: Intl.DateTimeFormatOptions, date: Date): string {
+    return new Intl.DateTimeFormat(this.locale, options).format(date);
+  }
+
+  private formatToken(token: string, date: Date): string {
+    const pad = (n: number, size = 2) => String(n).padStart(size, '0');
+    switch (token[0]) {
+      case "'":
+        return token.length === 2 ? "'" : token.slice(1, -1);
+      case 'd':
+        return token.length >= 2 ? pad(date.getDate()) : String(date.getDate());
+      case 'M':
+        if (token.length >= 4) return this.intl({ month: 'long' }, date);
+        if (token.length === 3) return this.intl({ month: 'short' }, date);
+        return token.length === 2 ? pad(date.getMonth() + 1) : String(date.getMonth() + 1);
+      case 'y':
+        return token.length === 2 ? pad(date.getFullYear() % 100) : String(date.getFullYear());
+      case 'E':
+        return this.intl({ weekday: token.length >= 4 ? 'long' : 'short' }, date);
+      case 'H':
+        return token.length >= 2 ? pad(date.getHours()) : String(date.getHours());
+      case 'h': {
+        const h = date.getHours() % 12 || 12;
+        return token.length >= 2 ? pad(h) : String(h);
+      }
+      case 'm':
+        return token.length >= 2 ? pad(date.getMinutes()) : String(date.getMinutes());
+      case 's':
+        return token.length >= 2 ? pad(date.getSeconds()) : String(date.getSeconds());
+      case 'a':
+        return date.getHours() < 12 ? 'AM' : 'PM';
+      default:
+        return token;
+    }
+  }
+}

package/src/shared/utils/scale_down.ts

@@ -0,0 +1,15 @@
+import { Image } from 'react-native';
+
+/**
+ * Taille d'affichage d'un asset dans une boîte [box] × [box] sans
+ * agrandissement, comme `BoxFit.scaleDown` (le défaut d'`Image` en
+ * Flutter) : l'image garde sa taille intrinsèque en points si elle tient
+ * dans la boîte, sinon elle est réduite proportionnellement.
+ */
+export function scaleDownSize(asset: number, box: number): { width: number; height: number } {
+  const source = Image.resolveAssetSource(asset);
+  const width = source?.width ?? box;
+  const height = source?.height ?? box;
+  const ratio = Math.min(1, box / width, box / height);
+  return { width: width * ratio, height: height * ratio };
+}

package/src/shared/utils/use_keyboard_visible.ts

@@ -0,0 +1,16 @@
+import { useEffect, useState } from 'react';
+import { Keyboard } from 'react-native';
+
+/** Le clavier est-il affiché ? (≈ `viewInsets.bottom > 0`) */
+export function useKeyboardVisible(): boolean {
+  const [visible, setVisible] = useState(false);
+  useEffect(() => {
+    const show = Keyboard.addListener('keyboardDidShow', () => setVisible(true));
+    const hide = Keyboard.addListener('keyboardDidHide', () => setVisible(false));
+    return () => {
+      show.remove();
+      hide.remove();
+    };
+  }, []);
+  return visible;
+}

package/src/shared/widgets/alias_widget.tsx

@@ -0,0 +1,79 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { Pressable, StyleSheet, Text, View, type GestureResponderEvent, type TextStyle } from 'react-native';
+
+import { useBloc, useBlocBuilder } from '../../core/bloc_react';
+import { AppRouter, useAppRouter } from '../../core/router';
+import { Themer, useTheme } from '../../core/theme';
+import { useAppLocalizations } from '../../l10n/localizations';
+import { ContactPI } from '../../modules/contacts/domain/contact_pi';
+import { ContactBloc } from '../../modules/contacts/presentation/bloc/contact_bloc';
+import { showPopupMenu } from '../material/popup_menu';
+import { AliasPI } from '../models/alias_pi';
+import { ClipboardWidget } from './clipboard_widget';
+
+/**
+ * Pour afficher l'alias dans l'app : formaté, avec un bouton pour le
+ * copier. Si l'alias n'est pas encore dans les contacts du téléphone, un
+ * appui long propose de l'y enregistrer.
+ */
+export function AliasWidget({
+  alias,
+  name,
+  canCopy = true,
+  textAlign = 'right',
+}: {
+  alias: string;
+  name?: string | null;
+  canCopy?: boolean;
+  textAlign?: TextStyle['textAlign'];
+}) {
+  const theme = useTheme();
+  const router = useAppRouter();
+  const traductions = useAppLocalizations();
+  const contactBloc = useBloc(ContactBloc);
+  useBlocBuilder(contactBloc);
+
+  const style = [theme.textTheme.bodyLarge, { color: Themer.neural03Color, textAlign }];
+  const text = (
+    <Text numberOfLines={1} style={[style, canCopy ? styles.flex : null]}>
+      {AliasPI.formatPhoneNumber(alias)}
+    </Text>
+  );
+  const content = canCopy ? (
+    <View style={styles.row}>
+      {text}
+      <Pressable accessibilityRole="button" hitSlop={8} onPress={() => void ClipboardWidget.setData(alias)}>
+        <MaterialIcons name="content-copy" size={16} color={theme.colorScheme.onSurface} />
+      </Pressable>
+    </View>
+  ) : (
+    text
+  );
+
+  if (contactBloc.isContactExist(alias)) return content;
+
+  const showLightMenu = (event: GestureResponderEvent) => {
+    void showPopupMenu(router, {
+      x: event.nativeEvent.pageX,
+      y: event.nativeEvent.pageY,
+      items: [
+        {
+          icon: 'person-add',
+          iconSize: 16,
+          label: traductions.contactAliasSaveText,
+          onTap: () =>
+            void AppRouter.push(router, AppRouter.profileContacts, {
+              params: new ContactPI({ name: name ?? '', alias }),
+            }),
+        },
+      ],
+    });
+  };
+
+  return <Pressable onLongPress={showLightMenu}>{content}</Pressable>;
+}
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+  row: { flexDirection: 'row', alignItems: 'center' },
+});

package/src/shared/widgets/amount_widget.tsx

@@ -0,0 +1,76 @@
+import { StyleSheet, Text, View, type TextStyle } from 'react-native';
+
+import { useBloc, useBlocBuilder } from '../../core/bloc_react';
+import { useAppLocalizations } from '../../l10n/localizations';
+import { ConfigBloc } from '../../modules/config/adapters/ui/bloc/config_bloc';
+import { ConfigKey } from '../../modules/config/domain/models/config_keys';
+
+/** Formate un montant sans décimales selon la langue (≈ `NumberFormat.currency(symbol: '', decimalDigits: 0)`). */
+export function formatMontant(montant: number | null | undefined, locale: string): string {
+  return new Intl.NumberFormat(locale, { maximumFractionDigits: 0, minimumFractionDigits: 0 }).format(montant ?? 0);
+}
+
+/**
+ * Pour afficher les montants dans l'app, avec le bon formatage selon la
+ * langue de l'utilisateur, et en mode flouté si l'utilisateur a masqué
+ * les montants (paramètre `DISPLAY_AMOUNT`).
+ */
+export function AmountWidget({
+  montant,
+  sign,
+  prefixText,
+  surfixText,
+  style,
+  numberOfLines,
+}: {
+  montant: number | null | undefined;
+  sign?: string;
+  prefixText?: string;
+  surfixText?: string;
+  style?: TextStyle;
+  numberOfLines?: number;
+}) {
+  const locale = useAppLocalizations().localeName;
+  const configBloc = useBloc(ConfigBloc);
+  const configState = useBlocBuilder(configBloc);
+
+  // Paramètre d'affichage du montant
+  const displayAmountParam = configState.configParams.params[ConfigKey.displayAmount];
+  const displayAmount = displayAmountParam == null || displayAmountParam === '1';
+
+  const prefix = prefixText != null || sign != null ? `${prefixText ?? sign} ` : '';
+  const value = displayAmount ? formatMontant(montant, locale) : '0000000';
+  const suffix = surfixText != null ? ` ${surfixText} ` : '';
+
+  const text = `${prefix}${value}${suffix}`;
+  if (displayAmount) {
+    return (
+      <Text numberOfLines={numberOfLines} style={style}>
+        {text}
+      </Text>
+    );
+  }
+  // Montant caché : comme en Flutter (texte transparent sous de fortes
+  // ombres grises floues), une tache grise floue à la taille du texte,
+  // sans aucun chiffre lisible. Android ne dessine pas l'ombre d'un texte
+  // transparent, d'où le flou porté par la vue.
+  return (
+    <View style={styles.hidden}>
+      <Text numberOfLines={numberOfLines} style={[style, styles.transparent]}>
+        {text}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  hidden: {
+    alignSelf: 'flex-start',
+    borderRadius: 999,
+    backgroundColor: 'rgba(158,158,158,0.3)',
+    boxShadow: '0 0 8px 2px rgba(158,158,158,0.3)',
+  },
+  // opacity (et non color: 'transparent', rendu en noir par Android) :
+  // le texte garde sa place mais n'est pas dessiné.
+  transparent: { opacity: 0 },
+});

package/src/shared/widgets/avatar_widget.tsx

@@ -0,0 +1,61 @@
+import { Image } from 'expo-image';
+import { useState } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { useTheme } from '../../core/theme';
+
+const supportedImages = ['jpg', 'jpeg', 'png', 'gif'];
+
+/** URL d'image affichable (http(s) + extension supportée). */
+function isImageUrl(url: string | null | undefined): boolean {
+  return url != null && url.startsWith('http') && supportedImages.some((ext) => url.toLowerCase().endsWith(ext));
+}
+
+/** Image locale du téléphone (ex. photo d'un contact : `file://`, `content://`, `ph://`). */
+function isLocalImage(uri: string | null | undefined): boolean {
+  return uri != null && /^(file|content|ph|assets-library):/.test(uri);
+}
+
+/**
+ * Avatar de l'utilisateur : photo (URL, image locale ou `data:`), sinon ses initiales sur
+ * fond secondaire. Coins arrondis au tiers de la taille (ou cercle si
+ * [rounded]).
+ */
+export function AvatarWidget({
+  photo,
+  userInitiales,
+  size = 40,
+  rounded = false,
+}: {
+  photo?: string | null;
+  userInitiales: string;
+  size?: number;
+  rounded?: boolean;
+}) {
+  const theme = useTheme();
+  const [failed, setFailed] = useState(false);
+  const borderRadius = size / (rounded ? 2 : 3);
+  const showImage = !failed && (isImageUrl(photo) || isLocalImage(photo) || (photo?.startsWith('data:image') ?? false));
+
+  if (showImage) {
+    return (
+      <Image
+        source={{ uri: photo as string }}
+        style={{ width: size, height: size, borderRadius }}
+        contentFit="cover"
+        cachePolicy="memory-disk"
+        // Image invalide ou injoignable : initiales, comme sans photo.
+        onError={() => setFailed(true)}
+      />
+    );
+  }
+  return (
+    <View style={[styles.initiales, { width: size, height: size, borderRadius, backgroundColor: theme.colorScheme.secondary }]}>
+      <Text style={{ color: theme.colorScheme.onSecondary }}>{userInitiales}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  initiales: { alignItems: 'center', justifyContent: 'center' },
+});

package/src/shared/widgets/calendar_date_picker.tsx

@@ -0,0 +1,132 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { useState } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { Themer, useTheme } from '../../core/theme';
+import { useAppLocalizations } from '../../l10n/localizations';
+import { DateFormat } from '../utils/date_format';
+
+function startOfDay(date: Date): Date {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+
+function sameDay(a: Date | null | undefined, b: Date | null | undefined): boolean {
+  return a != null && b != null && startOfDay(a).getTime() === startOfDay(b).getTime();
+}
+
+/**
+ * Calendrier mensuel (≈ `CalendarDatePicker2`) en sélection simple ou en
+ * plage : flèches pour changer de mois, jours hors de
+ * [firstDate]–[lastDate] grisés. En plage, le premier tap fixe le début,
+ * le second la fin (ou un nouveau début s'il est antérieur).
+ */
+export function CalendarDatePicker({
+  type,
+  value,
+  firstDate,
+  lastDate,
+  currentDate,
+  onValueChanged,
+}: {
+  type: 'single' | 'range';
+  value: (Date | null | undefined)[];
+  firstDate?: Date | null;
+  lastDate?: Date | null;
+  currentDate?: Date | null;
+  onValueChanged: (dates: Date[]) => void;
+}) {
+  const theme = useTheme();
+  const locale = useAppLocalizations().localeName;
+  const initial = value[0] ?? currentDate ?? firstDate ?? new Date();
+  const [month, setMonth] = useState(() => new Date(initial.getFullYear(), initial.getMonth(), 1));
+  const today = new Date();
+  const [start, end] = [value[0] ?? null, value[1] ?? null];
+
+  const min = firstDate != null ? startOfDay(firstDate) : null;
+  const max = lastDate != null ? startOfDay(lastDate) : null;
+  const isDisabled = (day: Date) => (min != null && day < min) || (max != null && day > max);
+
+  // Semaine commençant le lundi
+  const offset = (month.getDay() + 6) % 7;
+  const daysInMonth = new Date(month.getFullYear(), month.getMonth() + 1, 0).getDate();
+  const cells: (Date | null)[] = [
+    ...Array.from({ length: offset }, () => null),
+    ...Array.from({ length: daysInMonth }, (_, i) => new Date(month.getFullYear(), month.getMonth(), i + 1)),
+  ];
+  while (cells.length % 7 !== 0) cells.push(null);
+  const weekdays = Array.from({ length: 7 }, (_, i) =>
+    new DateFormat('EEE', locale).format(new Date(2024, 0, 1 + i)).substring(0, 3),
+  );
+
+  const onDayPress = (day: Date) => {
+    if (type === 'single') return onValueChanged([day]);
+    if (start == null || end != null || day < startOfDay(start)) return onValueChanged([day]);
+    onValueChanged([start, day]);
+  };
+
+  const dayStyle = { ...theme.textTheme.titleSmall, fontSize: 17 };
+
+  return (
+    <View style={styles.container}>
+      {/* Mois et navigation */}
+      <View style={styles.header}>
+        <Text style={[theme.textTheme.bodyMedium, styles.month]}>{new DateFormat('MMMM yyyy', locale).format(month)}</Text>
+        <Pressable hitSlop={10} onPress={() => setMonth(new Date(month.getFullYear(), month.getMonth() - 1, 1))}>
+          <MaterialIcons name="arrow-back-ios" size={20} color={theme.primaryColor} />
+        </Pressable>
+        <View style={styles.gap24} />
+        <Pressable hitSlop={10} onPress={() => setMonth(new Date(month.getFullYear(), month.getMonth() + 1, 1))}>
+          <MaterialIcons name="arrow-forward-ios" size={20} color={theme.primaryColor} />
+        </Pressable>
+      </View>
+      {/* Jours de la semaine */}
+      <View style={styles.row}>
+        {weekdays.map((d, i) => (
+          <Text key={i} style={[theme.textTheme.bodyMedium, styles.weekday]}>
+            {d}
+          </Text>
+        ))}
+      </View>
+      {/* Jours du mois */}
+      {Array.from({ length: cells.length / 7 }, (_, w) => (
+        <View key={w} style={styles.row}>
+          {cells.slice(w * 7, w * 7 + 7).map((day, i) => {
+            if (day == null) return <View key={i} style={styles.cell} />;
+            const disabled = isDisabled(day);
+            const selected = sameDay(day, start) || sameDay(day, end);
+            const inRange = start != null && end != null && day > startOfDay(start) && day < startOfDay(end);
+            return (
+              <Pressable key={i} disabled={disabled} onPress={() => onDayPress(day)} style={styles.cell}>
+                {inRange && <View style={[styles.range, { backgroundColor: theme.primaryColor, opacity: 0.2 }]} />}
+                <View style={[styles.day, selected ? { backgroundColor: theme.primaryColor } : null]}>
+                  <Text
+                    style={[
+                      dayStyle,
+                      disabled ? { ...theme.textTheme.bodyLarge, fontSize: 17, color: Themer.gray } : null,
+                      !selected && !disabled && sameDay(day, today) ? { color: theme.primaryColor } : null,
+                      selected ? { color: Themer.whiteColor } : null,
+                    ]}
+                  >
+                    {day.getDate()}
+                  </Text>
+                </View>
+              </Pressable>
+            );
+          })}
+        </View>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { paddingHorizontal: 16 },
+  header: { flexDirection: 'row', alignItems: 'center', paddingVertical: 12, paddingHorizontal: 4 },
+  month: { flex: 1, fontWeight: '600', textTransform: 'capitalize' },
+  gap24: { width: 24 },
+  row: { flexDirection: 'row' },
+  weekday: { flex: 1, textAlign: 'center', fontWeight: '600', paddingVertical: 8 },
+  cell: { flex: 1, height: 44, alignItems: 'center', justifyContent: 'center' },
+  range: { ...StyleSheet.absoluteFill, marginVertical: 4 },
+  day: { width: 40, height: 40, borderRadius: 20, alignItems: 'center', justifyContent: 'center' },
+});

package/src/shared/widgets/chip_widget.tsx

@@ -0,0 +1,43 @@
+import { useEffect, useRef } from 'react';
+import { Animated, Easing, Pressable, StyleSheet } from 'react-native';
+
+import { Themer, useTheme } from '../../core/theme';
+
+/** Petite puce cliquable animée (≈ `OptionChip`) */
+export function OptionChip({ label, selected, onTap }: { label: string; selected: boolean; onTap: () => void }) {
+  const theme = useTheme();
+  const progress = useRef(new Animated.Value(selected ? 1 : 0)).current;
+
+  useEffect(() => {
+    Animated.timing(progress, { toValue: selected ? 1 : 0, duration: 250, easing: Easing.out(Easing.quad), useNativeDriver: false }).start();
+  }, [progress, selected]);
+
+  return (
+    <Pressable accessibilityRole="button" accessibilityState={{ selected }} onPress={onTap}>
+      <Animated.View
+        style={[
+          styles.chip,
+          { backgroundColor: progress.interpolate({ inputRange: [0, 1], outputRange: [theme.cardColor, theme.colorScheme.secondary] }) },
+        ]}
+      >
+        <Animated.Text
+          numberOfLines={1}
+          style={[
+            theme.textTheme.displayMedium,
+            {
+              color: selected ? theme.colorScheme.onSecondary : Themer.neural03Color,
+              fontWeight: selected ? 'bold' : 'normal',
+              fontSize: selected ? 15 : 14,
+            },
+          ]}
+        >
+          {label}
+        </Animated.Text>
+      </Animated.View>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  chip: { flex: 1, paddingHorizontal: 10, borderRadius: 20, justifyContent: 'center' },
+});

package/src/shared/widgets/circle_avatar_widget.tsx

@@ -0,0 +1,29 @@
+import { AvatarWidget } from './avatar_widget';
+
+/** Initiales d'un nom complet : première lettre du premier et du dernier mot (« # » si vide). */
+export function getInitials(fullName: string | null | undefined): string {
+  if (fullName == null || fullName.trim().length === 0) return '#';
+  const names = fullName
+    .trim()
+    .split(/\s+/)
+    .filter((n) => n.length > 0);
+  if (names.length === 0) return '#';
+  let initials = names[0][0].toUpperCase();
+  if (names.length > 1) initials += names[names.length - 1][0].toUpperCase();
+  return initials;
+}
+
+/** Avatar d'une personne à partir de son nom (initiales) ou de sa photo. */
+export function CircleAvatarWidget({
+  nom,
+  photo,
+  radius,
+  rounded,
+}: {
+  nom: string;
+  photo?: string | null;
+  radius?: number;
+  rounded: boolean;
+}) {
+  return <AvatarWidget userInitiales={getInitials(nom)} photo={photo} size={radius ?? 50} rounded={rounded} />;
+}

package/src/shared/widgets/clipboard_widget.tsx

@@ -0,0 +1,17 @@
+import * as Clipboard from 'expo-clipboard';
+import { Platform } from 'react-native';
+
+import { CustomSnackBar } from './custom_snack_bar';
+
+export class ClipboardWidget {
+  /**
+   * Copie [text] dans le presse-papier. Sur iOS (et web) un bandeau le
+   * confirme ; Android affiche déjà sa propre confirmation système.
+   */
+  static async setData(text: string): Promise<void> {
+    await Clipboard.setStringAsync(text);
+    if (Platform.OS !== 'android') {
+      CustomSnackBar.show('La copie dans le presse-papier a été effectuée.');
+    }
+  }
+}

package/src/shared/widgets/confirm_action_sheet_widget.tsx

@@ -0,0 +1,68 @@
+import { ScrollView, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { AppRouter, useAppRouter } from '../../core/router';
+import { useTheme } from '../../core/theme';
+import { useAppLocalizations } from '../../l10n/localizations';
+import { ElevatedButton, FilledTonalButton } from '../material/buttons';
+
+/** Feuille de confirmation : titre, texte, et boutons Annuler / Confirmer (retournent `false` / `true`). */
+export function ConfirmActionSheetWidget({
+  title,
+  subtitle,
+  confirmTitle,
+  confirmAction,
+  cancelTitle,
+  cancelAction,
+}: {
+  title: string;
+  subtitle: string;
+  confirmTitle?: string;
+  confirmAction?: () => void;
+  cancelTitle?: string;
+  cancelAction?: () => void;
+}) {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const router = useAppRouter();
+  const insets = useSafeAreaInsets();
+  const { height } = useWindowDimensions();
+
+  return (
+    <View style={styles.padding}>
+      <View style={[styles.box, { backgroundColor: theme.colorScheme.surface, maxHeight: height * 0.7 - 40, marginBottom: insets.bottom }]}>
+        <ScrollView bounces={false}>
+          <Text style={[theme.textTheme.titleSmall, styles.center]}>{title}</Text>
+          <View style={styles.gap20} />
+          <Text style={[theme.textTheme.displayMedium, styles.center]}>{subtitle}</Text>
+          <View style={styles.gap30} />
+          <View style={styles.buttons}>
+            <View style={styles.flex}>
+              <FilledTonalButton style={styles.button} onPress={cancelAction ?? (() => AppRouter.pop(router, { value: false }))}>
+                {cancelTitle ?? traductions.btnTextCancel}
+              </FilledTonalButton>
+            </View>
+            <View style={styles.gap16} />
+            <View style={styles.flex}>
+              <ElevatedButton style={styles.button} onPress={confirmAction ?? (() => AppRouter.pop(router, { value: true }))}>
+                {confirmTitle ?? traductions.btnTextAccept}
+              </ElevatedButton>
+            </View>
+          </View>
+        </ScrollView>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  padding: { padding: 20 },
+  box: { borderRadius: 20, overflow: 'hidden' },
+  center: { textAlign: 'center' },
+  flex: { flex: 1 },
+  buttons: { flexDirection: 'row', height: 56 },
+  button: { height: 56 },
+  gap16: { width: 16 },
+  gap20: { height: 20 },
+  gap30: { height: 30 },
+});