@pi-spi/app 0.0.0-stage → 1.2.1

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

@@ -0,0 +1,282 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { CameraView, useCameraPermissions } from 'expo-camera';
+import { Image } from 'expo-image';
+import { useEffect, useRef, useState } from 'react';
+import { Linking, Platform, Pressable, StyleSheet, Text, useWindowDimensions, View, type GestureResponderEvent } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import Svg, { Path } from 'react-native-svg';
+
+import { Images } from '../../../../core/assets';
+import { useBlocListener, useCreateBloc } from '../../../../core/bloc_react';
+import { Di } from '../../../../core/di';
+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 { ElevatedButton } from '../../../../shared/material/buttons';
+import { AliasPI } from '../../../../shared/models/alias_pi';
+import { CustomSnackBar } from '../../../../shared/widgets/custom_snack_bar';
+import { QrCodeDecodeError } from '../../domain/models/qrcode_errors';
+import { QrcodeScanBloc } from '../bloc/qrcode_scan/qrcode_scan_bloc';
+import { QrcodeScanDecodeEvent, QrcodeScanSelectEvent } from '../bloc/qrcode_scan/qrcode_scan_event';
+import { QrcodeScanErrorState, QrcodeScanSuccessState } from '../bloc/qrcode_scan/qrcode_scan_state';
+import { QrcodeSwitchBtn } from './qrcode_switch_btn';
+
+/** Chemin SVG d'un rectangle aux coins arrondis */
+function roundedRect(x: number, y: number, w: number, h: number, r: number): string {
+  return (
+    `M${x + r} ${y}H${x + w - r}A${r} ${r} 0 0 1 ${x + w} ${y + r}V${y + h - r}A${r} ${r} 0 0 1 ${x + w - r} ${y + h}` +
+    `H${x + r}A${r} ${r} 0 0 1 ${x} ${y + h - r}V${y + r}A${r} ${r} 0 0 1 ${x + r} ${y}Z`
+  );
+}
+
+/**
+ * Zoom de la caméra (rapport 1x à 4x, comme `setZoomScale` de
+ * mobile_scanner) vers la valeur `zoom` d'expo-camera (0 à 1), qui ne
+ * donne pas accès au zoom maximal de l'appareil :
+ * - Android (CameraX) : rapport = zoom × zoom max, au moins 1x. Le zoom
+ *   max de la caméra arrière est le plus souvent 10x (ex. 0,6x–10x sur un
+ *   Galaxy S25 Ultra).
+ * - iOS : rapport = zoom max ^ zoom (courbe exponentielle), zoom max
+ *   courant 16x.
+ */
+const ANDROID_MAX_ZOOM = 10;
+const IOS_MAX_ZOOM = 16;
+
+function cameraZoom(ratio: number): number {
+  if (ratio <= 1) return 0;
+  const value = Platform.OS === 'ios' ? Math.log(ratio) / Math.log(IOS_MAX_ZOOM) : ratio / ANDROID_MAX_ZOOM;
+  return Math.min(1, Math.max(0, value));
+}
+
+function errorMessage(error: QrCodeDecodeError, traductions: AppLocalizations): string {
+  if (error === QrCodeDecodeError.invalidImage) return traductions.qrcodeDecodeErrorNotQrImage;
+  if (error === QrCodeDecodeError.invalidAlias) return traductions.qrcodeDecodeErrorInvalideAlias;
+  return traductions.qrcodeDecodeErrorInvalideFormat;
+}
+
+/** Distance entre les deux doigts d'un pincement */
+function pinchDistance(e: GestureResponderEvent): number | null {
+  const touches = e.nativeEvent.touches;
+  if (touches.length < 2) return null;
+  return Math.hypot(touches[0].pageX - touches[1].pageX, touches[0].pageY - touches[1].pageY);
+}
+
+/**
+ * Scan d'un QR code PI-SPI (route `qrcodeScan`) : caméra avec cadre,
+ * zoom (boutons ou pincement), flash, image de la galerie ; un QR valide
+ * ouvre le formulaire de transfert prérempli.
+ */
+export function QrcodeScanPage({ action }: { action: string }) {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const router = useAppRouter();
+  const insets = useSafeAreaInsets();
+  const window = useWindowDimensions();
+  const [permission, requestPermission] = useCameraPermissions();
+  const bloc = useCreateBloc(() => new QrcodeScanBloc(Di.getQrcodeInputPort()));
+  const [scanning, setScanning] = useState(true);
+  const [torch, setTorch] = useState(false);
+  const [zoom, setZoom] = useState(1);
+  const pinch = useRef<{ distance: number; zoom: number } | null>(null);
+  const mounted = useRef(true);
+  useEffect(
+    () => () => {
+      mounted.current = false;
+    },
+    [],
+  );
+
+  useEffect(() => {
+    if (permission != null && !permission.granted && permission.canAskAgain) void requestPermission();
+  }, [permission, requestPermission]);
+
+  const snackBarError = (message: string) => CustomSnackBar.show(message, { durationMs: 5000, bgColor: Themer.systemErrorColor });
+
+  /** Relance la caméra après 3 secondes (si on est toujours sur le scan) */
+  const replayCamera = () =>
+    setTimeout(() => {
+      if (mounted.current && AppRouter.currentRoute(router) === AppRouter.qrcodeScan) setScanning(true);
+    }, 3000);
+
+  useBlocListener(
+    bloc,
+    (s) => {
+      if (s instanceof QrcodeScanSuccessState) {
+        if (action === 'receive_now' && AliasPI.patternMBNO.test(s.data.alias)) {
+          snackBarError(traductions.aliasFormMbnoForbidden);
+          replayCamera();
+          return;
+        }
+        AppRouter.pushReplacement(router, `${AppRouter.qrcodeTransactionSend}?action=${action}`, { params: s.data });
+      } else if (s instanceof QrcodeScanErrorState) {
+        snackBarError(errorMessage(s.error, traductions));
+        replayCamera();
+      }
+    },
+    (_p, current) => current instanceof QrcodeScanSuccessState || current instanceof QrcodeScanErrorState,
+  );
+
+  // Cadre de visée : carré de 80 % de la largeur, un peu au-dessus du centre
+  const frame = window.width * 0.8;
+  const frameTop = window.height / 2 - 50 - frame / 2;
+  const frameLeft = (window.width - frame) / 2;
+  const overlay = 'rgba(0,0,0,0.4)';
+
+  return (
+    <View style={styles.root}>
+      <View
+        style={StyleSheet.absoluteFill}
+        onStartShouldSetResponder={(e) => e.nativeEvent.touches.length >= 2}
+        onMoveShouldSetResponder={(e) => e.nativeEvent.touches.length >= 2}
+        onResponderGrant={(e) => {
+          const distance = pinchDistance(e);
+          if (distance != null) pinch.current = { distance, zoom };
+        }}
+        onResponderMove={(e) => {
+          const distance = pinchDistance(e);
+          if (distance == null) return;
+          if (pinch.current == null) pinch.current = { distance, zoom };
+          setZoom(Math.min(4, Math.max(1, pinch.current.zoom * (distance / pinch.current.distance))));
+        }}
+        onResponderRelease={() => (pinch.current = null)}
+      >
+        {permission?.granted ? (
+          <CameraView
+            style={StyleSheet.absoluteFill}
+            facing="back"
+            enableTorch={torch}
+            zoom={cameraZoom(zoom)}
+            barcodeScannerSettings={{ barcodeTypes: ['qr'] }}
+            onBarcodeScanned={
+              scanning
+                ? (result) => {
+                    setScanning(false);
+                    bloc.add(new QrcodeScanDecodeEvent([result.data]));
+                  }
+                : undefined
+            }
+          />
+        ) : (
+          <View style={[StyleSheet.absoluteFill, styles.noCamera]}>
+            {permission != null && !permission.granted && (
+              <View style={styles.permission}>
+                <Text style={[theme.textTheme.bodyMedium, styles.white]}>{traductions.qrcodeScanPageMessage}</Text>
+                <View style={styles.gap16} />
+                <ElevatedButton onPress={() => void (permission.canAskAgain ? requestPermission() : Linking.openSettings())}>
+                  {traductions.btnTextAutoriser}
+                </ElevatedButton>
+              </View>
+            )}
+          </View>
+        )}
+      </View>
+
+      {/* Voile autour du cadre (découpe arrondie, comme ScanWindowPainter) et cadre blanc */}
+      <View pointerEvents="none" style={StyleSheet.absoluteFill}>
+        <Svg width={window.width} height={window.height}>
+        <Path
+          fill={overlay}
+          fillRule="evenodd"
+          d={`M0 0H${window.width}V${window.height}H0Z ${roundedRect(frameLeft, frameTop, frame, frame, 16)}`}
+        />
+          <Path fill="none" stroke="white" strokeWidth={2} d={roundedRect(frameLeft, frameTop, frame, frame, 16)} />
+        </Svg>
+      </View>
+
+      {/* Indication */}
+      <Text pointerEvents="none" style={[theme.textTheme.displaySmall, styles.indication, { bottom: window.height / 4 + 40 }]}>
+        {traductions.qrcodeScanPageMessage}
+      </Text>
+
+      {/* Zoom */}
+      <View style={[styles.zoomRow, { bottom: 160 }]}>
+        {[1, 1.5].map((value) => {
+          const selected = Math.abs(zoom - value) < 0.1;
+          return (
+            <Pressable
+              key={value}
+              accessibilityRole="button"
+              onPress={() => setZoom(value)}
+              style={[styles.zoomButton, { backgroundColor: selected ? theme.primaryColor : Themer.neural01Color }]}
+            >
+              <Text style={[styles.zoomText, { color: selected ? 'white' : 'black' }]}>{`${value}x`}</Text>
+            </Pressable>
+          );
+        })}
+      </View>
+
+      {/* Fermer */}
+      <Pressable
+        accessibilityRole="button"
+        hitSlop={12}
+        style={[styles.close, { top: Math.max(45, insets.top + 8) }]}
+        onPress={() => {
+          setScanning(false);
+          AppRouter.pushReplacement(router, AppRouter.home);
+        }}
+      >
+        <MaterialIcons name="close" size={24} color="white" />
+      </Pressable>
+
+      {/* Flash, Scanner / Mon code, galerie */}
+      <View style={[styles.bottomBar, { bottom: insets.bottom + 10 }]}>
+        {/* (Le SDK Flutter ne met pas à jour l'icône du flash : corrigé ici.) */}
+        <Pressable
+          accessibilityRole="button"
+          onPress={() => setTorch((t) => !t)}
+          style={[styles.fab, { backgroundColor: torch ? theme.colorScheme.primary : theme.colorScheme.secondary }]}
+        >
+          <Image source={torch ? Images.iconFlashOn : Images.iconFlashOff} style={styles.fabIcon} />
+        </Pressable>
+        <View style={styles.gap16w} />
+        <View style={styles.flex}>
+          <QrcodeSwitchBtn
+            cardBgColor="#151413"
+            items={[
+              { text: traductions.qrcodePageBtnScan, textColor: '#151413', btnColor: Themer.whiteColor },
+              {
+                text: traductions.qrcodePageBtnMonCode,
+                textColor: Themer.whiteColor,
+                btnColor: 'transparent',
+                action: () => {
+                  setScanning(false);
+                  AppRouter.pushReplacement(router, AppRouter.qrcodeShow);
+                },
+              },
+            ]}
+          />
+        </View>
+        <View style={styles.gap16w} />
+        <Pressable
+          accessibilityRole="button"
+          onPress={() => {
+            setScanning(false);
+            bloc.add(new QrcodeScanSelectEvent());
+          }}
+          style={[styles.fab, { backgroundColor: theme.colorScheme.secondary }]}
+        >
+          <Image source={Images.iconsGalerie} style={styles.fabIcon} />
+        </Pressable>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { flex: 1, backgroundColor: 'black' },
+  flex: { flex: 1 },
+  noCamera: { backgroundColor: 'black', alignItems: 'center', justifyContent: 'center' },
+  permission: { paddingHorizontal: 48, alignItems: 'stretch' },
+  white: { color: 'white', textAlign: 'center' },
+  indication: { position: 'absolute', left: 48, right: 48, textAlign: 'center', color: Themer.whiteColor },
+  zoomRow: { position: 'absolute', left: 0, right: 0, flexDirection: 'row', justifyContent: 'center', columnGap: 12 },
+  zoomButton: { paddingHorizontal: 16, paddingVertical: 8, borderRadius: 20 },
+  zoomText: { fontWeight: 'bold' },
+  close: { position: 'absolute', left: 5, padding: 12 },
+  bottomBar: { position: 'absolute', left: 16, right: 16, height: 56, flexDirection: 'row', alignItems: 'center' },
+  fab: { width: 56, height: 56, borderRadius: 16, alignItems: 'center', justifyContent: 'center' },
+  fabIcon: { width: 24, height: 24 },
+  gap16: { height: 16 },
+  gap16w: { width: 16 },
+});

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

@@ -0,0 +1,33 @@
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { useTheme } from '../../../../core/theme';
+
+export type QrcodeBtnItem = { text: string; textColor: string; btnColor: string; action?: () => void };
+
+/**
+ * Bouton à deux positions « Scanner / Mon code » des pages QR (≈ une `Card`
+ * aux coins de 20, marge 4 et padding 3, contenant deux `ElevatedButton`
+ * aux coins de 20).
+ */
+export function QrcodeSwitchBtn({ items, cardBgColor }: { items: QrcodeBtnItem[]; cardBgColor?: string }) {
+  const theme = useTheme();
+  return (
+    <View style={[styles.card, { backgroundColor: cardBgColor ?? theme.cardTheme.color }]}>
+      {items.map((item) => (
+        <Pressable
+          key={item.text}
+          accessibilityRole="button"
+          onPress={item.action}
+          style={({ pressed }) => [styles.button, { backgroundColor: item.btnColor, opacity: pressed ? 0.85 : 1 }]}
+        >
+          <Text style={[theme.textTheme.displaySmall, { color: item.textColor }]}>{item.text}</Text>
+        </Pressable>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: { flexDirection: 'row', borderRadius: 20, padding: 3, margin: 4, flex: 1 },
+  button: { flex: 1, borderRadius: 20, alignItems: 'center', justifyContent: 'center' },
+});

package/src/modules/subscription/domain/models/souscription_error.ts

@@ -0,0 +1,11 @@
+export enum SouscriptionDetailsAction {
+  editNote = 'editNote',
+  editCatgegorie = 'editCatgegorie',
+  delete = 'delete',
+  enable = 'enable',
+  disable = 'disable',
+}
+
+export enum SouscriptionError {
+  unknow = 'unknow',
+}

package/src/modules/subscription/domain/models/subscription.ts

@@ -0,0 +1,115 @@
+import { Frequence } from '../../../../shared/models/frequence_command';
+import { Transaction } from '../../../transactions/domain/models/transaction';
+
+/** Paiement programmé (une fois) ou abonnement (avec une fréquence). */
+export class Subscription extends Transaction {
+  nextPaymentDate?: Date | null;
+
+  static override fromJson(json: Record<string, any>): Subscription {
+    return Subscription.fromTransaction(Transaction.fromJson(json));
+  }
+
+  /** Souscription à partir d'une transaction (mêmes champs que le SDK Flutter) */
+  static fromTransaction(transaction: Transaction): Subscription {
+    const subs = new Subscription({
+      compte: transaction.compte,
+      compteAlias: transaction.compteAlias,
+      endToEndId: transaction.endToEndId,
+      clientPays: transaction.clientPays,
+      clientNom: transaction.clientNom,
+      montant: transaction.montant,
+      sens: transaction.sens,
+      motif: transaction.motif,
+      canal: transaction.canal,
+      clientPSP: transaction.clientPSP,
+      clientPSPNom: transaction.clientPSPNom,
+      clientPhoto: transaction.clientPhoto,
+      clientCompte: transaction.clientCompte,
+      clientAlias: transaction.clientAlias,
+      statut: transaction.statut,
+      statutRaison: transaction.statutRaison,
+      categorie: transaction.categorie,
+      dateDebut: transaction.dateDebut,
+      dateFin: transaction.dateFin,
+      frequence: transaction.frequence,
+      periodicite: transaction.periodicite,
+    });
+    subs.nextPaymentDate = Subscription.computeNextPaymentDate(subs, new Date());
+    return subs;
+  }
+
+  /** Est-ce que l'on peut modifier la souscription */
+  canEdit(): boolean {
+    return this.frequence == null && Date.now() > this.dateDebut!.getTime();
+  }
+
+  /** Est-ce que l'on peut supprimer la souscription (pas un paiement unique prévu aujourd'hui) */
+  canDelete(): boolean {
+    const now = new Date();
+    const debut = this.dateDebut!;
+    return !(
+      this.frequence == null &&
+      now.getDate() === debut.getDate() &&
+      now.getMonth() === debut.getMonth() &&
+      now.getFullYear() === debut.getFullYear()
+    );
+  }
+
+  /** Est-ce que l'exécution a commencé */
+  hasStarted(): boolean {
+    return Date.now() > this.dateDebut!.getTime();
+  }
+
+  /** Est-ce que c'est terminé */
+  isFinished(): boolean {
+    const now = Date.now();
+    return (
+      (this.frequence == null && now > this.dateDebut!.getTime()) ||
+      (this.frequence != null && this.dateFin != null && now > this.dateFin.getTime())
+    );
+  }
+
+  /** Calcule la prochaine date de paiement après [fromDate] */
+  static computeNextPaymentDate(subs: Subscription, fromDate: Date): Date | null | undefined {
+    if (subs.frequence == null) return subs.dateDebut;
+    const debut = subs.dateDebut!;
+    // Pas encore commencé
+    if (fromDate < debut) return debut;
+    // Terminé
+    if (subs.dateFin != null && fromDate > subs.dateFin) return null;
+    // Périodicité renseignée ou 1 par défaut
+    const period = subs.periodicite ?? 1;
+    const addDays = (date: Date, days: number) => new Date(date.getTime() + days * 24 * 3600 * 1000);
+    switch (subs.frequence) {
+      case Frequence.quotidienne:
+        return addDays(fromDate, period);
+      case Frequence.hebdomadaire:
+        return addDays(fromDate, period * 7);
+      // Chaque X mois
+      case Frequence.mensuelle: {
+        let next = new Date(debut);
+        while (next < fromDate) {
+          const lastDay = new Date(next.getFullYear(), next.getMonth() + period + 1, 0).getDate();
+          next = new Date(next.getFullYear(), next.getMonth() + period, Math.min(next.getDate(), lastDay));
+        }
+        return next;
+      }
+      case Frequence.annuelle: {
+        let next = new Date(debut);
+        while (next < fromDate) {
+          const year = next.getFullYear() + period;
+          if (next.getMonth() === 1 && next.getDate() === 29) {
+            const leap = year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
+            // On tombe volontairement sur le 28 février une année non bissextile
+            next = new Date(year, 1, leap ? 29 : 28);
+          } else {
+            next = new Date(year, next.getMonth(), next.getDate());
+          }
+        }
+        return next;
+      }
+      default:
+        return null;
+    }
+  }
+}

package/src/modules/subscription/domain/models/subscription_command.ts

@@ -0,0 +1,29 @@
+import type { TransactionSendCommandMotif } from '../../../transactions/domain/models/transaction_send/transaction_send_command_motif';
+import type { TransactionSendCommandSchedule } from '../../../transactions/domain/models/transaction_send/transaction_send_command_schedule';
+
+/** Modèle d'édition d'une souscription : note, programmation ou catégorie */
+export class SubscriptionCommand {
+  motif?: TransactionSendCommandMotif;
+  schedule?: TransactionSendCommandSchedule;
+  categorie?: string;
+
+  constructor(params: { schedule?: TransactionSendCommandSchedule; motif?: TransactionSendCommandMotif; categorie?: string } = {}) {
+    this.schedule = params.schedule;
+    this.motif = params.motif;
+    this.categorie = params.categorie;
+  }
+
+  isValid(): boolean {
+    if (this.schedule == null && this.motif == null && this.categorie == null) return false;
+    // Le motif et la programmation doivent être valides s'ils sont renseignés
+    const isMotifValid = this.motif == null || this.motif.isValid();
+    const isScheduleValid = this.schedule == null || this.schedule.isValid();
+    return isMotifValid && isScheduleValid;
+  }
+
+  toJson(): Record<string, unknown> {
+    if (this.motif != null) return { motif: this.motif.value };
+    if (this.categorie != null) return { categorie: this.categorie };
+    return this.schedule!.toJson();
+  }
+}

package/src/modules/subscription/domain/services/subscription_service.ts

@@ -0,0 +1,44 @@
+import type { SubscriptionInputPort } from '../../ports/input/subscription_input_port';
+import type { SubscriptionListParams, SubscriptionOutputPort } from '../../ports/output/subscription_output_port';
+import type { Subscription } from '../models/subscription';
+import type { SubscriptionCommand } from '../models/subscription_command';
+
+export class SubscriptionService implements SubscriptionInputPort {
+  constructor(readonly subscriptionOutputPort: SubscriptionOutputPort) {}
+
+  list(params: SubscriptionListParams): Promise<Subscription[]> {
+    return this.subscriptionOutputPort.list({ compte: params.compte });
+  }
+
+  search(params: SubscriptionListParams): Promise<Subscription[]> {
+    return this.subscriptionOutputPort.search(params);
+  }
+
+  get(reference: string): Promise<Subscription> {
+    return this.subscriptionOutputPort.get(reference);
+  }
+
+  fetch(reference: string): Promise<Subscription | null> {
+    return this.subscriptionOutputPort.fetch(reference);
+  }
+
+  update(id: string, command: SubscriptionCommand): Promise<Subscription> {
+    return this.subscriptionOutputPort.update(id, command);
+  }
+
+  delete(subscription: Subscription): Promise<void> {
+    return this.subscriptionOutputPort.delete(subscription.endToEndId);
+  }
+
+  supprimer(subscription: Subscription): Promise<void> {
+    return this.subscriptionOutputPort.supprimer(subscription.endToEndId);
+  }
+
+  disable(subscription: Subscription): Promise<Subscription> {
+    return this.subscriptionOutputPort.disable(subscription.endToEndId);
+  }
+
+  enable(subscription: Subscription): Promise<Subscription> {
+    return this.subscriptionOutputPort.enable(subscription.endToEndId);
+  }
+}

package/src/modules/subscription/infra/subscription_output_repository.ts

@@ -0,0 +1,144 @@
+import { Api } from '../../../core/api';
+import { Logger } from '../../../core/logger';
+import { AppStorage } from '../../../core/storage';
+import { Subscription } from '../domain/models/subscription';
+import type { SubscriptionCommand } from '../domain/models/subscription_command';
+import type { SubscriptionListParams, SubscriptionOutputPort } from '../ports/output/subscription_output_port';
+
+/** Stockage local des souscriptions */
+export class SubscriptionOutputLocal {
+  static readonly collectionId = 'subscriptions';
+
+  /** Lister les souscriptions du compte à partir des données en local */
+  async list(params: SubscriptionListParams): Promise<Subscription[]> {
+    const liste = await AppStorage.list(SubscriptionOutputLocal.collectionId, (json) => Subscription.fromJson(json));
+    return liste.filter((sub) => sub.compte === params.compte);
+  }
+
+  /** Enregistre une souscription dans la base locale */
+  save(subscription: Subscription): Promise<void> {
+    return AppStorage.save(SubscriptionOutputLocal.collectionId, subscription.endToEndId, subscription.toJson());
+  }
+
+  /** Met à jour une souscription dans la base locale */
+  patch(subscription: Subscription): Promise<void> {
+    return AppStorage.patch(SubscriptionOutputLocal.collectionId, subscription.endToEndId, subscription.toJson());
+  }
+
+  /** Récupérer une souscription */
+  get(reference: string): Promise<Subscription | null> {
+    return AppStorage.get(SubscriptionOutputLocal.collectionId, reference, (json) => Subscription.fromJson(json));
+  }
+
+  /** Ajouter des données à une souscription */
+  add(id: string, datas: Record<string, unknown>): Promise<void> {
+    return AppStorage.patch(SubscriptionOutputLocal.collectionId, id, datas);
+  }
+
+  /** Supprimer en local */
+  delete(id: string): Promise<void> {
+    return AppStorage.delete(SubscriptionOutputLocal.collectionId, id);
+  }
+}
+
+/** Accès au serveur */
+export class SubscriptionOutputRemote {
+  readonly logger = new Logger();
+
+  /** Lister les souscriptions */
+  async list(params: SubscriptionListParams): Promise<Subscription[]> {
+    const response = await Api.get(`/souscriptions/${params.compte}`);
+    return (response.data.data as Record<string, any>[]).map((e) => Subscription.fromJson(e));
+  }
+
+  /** Récupérer une souscription */
+  async get(reference: string): Promise<Subscription> {
+    const response = await Api.get(`/souscriptions/${reference}/details`);
+    return Subscription.fromJson(response.data);
+  }
+
+  /** Modifier une souscription */
+  async update(endToEndId: string, command: SubscriptionCommand): Promise<Subscription> {
+    const response = await Api.put(`/souscriptions/${endToEndId}`, { data: command.toJson() });
+    return Subscription.fromJson(response.data);
+  }
+
+  /** Désactiver une souscription */
+  async disable(endToEndId: string): Promise<Subscription> {
+    const response = await Api.put(`/souscriptions/${endToEndId}/desactivations`);
+    return Subscription.fromJson(response.data);
+  }
+
+  /** Réactiver une souscription */
+  async enable(endToEndId: string): Promise<Subscription> {
+    const response = await Api.put(`/souscriptions/${endToEndId}/reactivations`);
+    return Subscription.fromJson(response.data);
+  }
+
+  /** Supprimer une souscription */
+  async delete(endToEndId: string): Promise<void> {
+    await Api.delete(`/souscriptions/${endToEndId}`);
+  }
+}
+
+/**
+ * Dépôt des souscriptions : le serveur fait foi, la copie locale garde les
+ * informations propres à l'app (ex. la catégorie).
+ */
+export class SubscriptionOutputRepository implements SubscriptionOutputPort {
+  readonly logger = new Logger();
+  readonly repoRemote = new SubscriptionOutputRemote();
+  readonly repoLocal = new SubscriptionOutputLocal();
+
+  async list(params: SubscriptionListParams): Promise<Subscription[]> {
+    const subscriptions = await this.repoRemote.list(params);
+    for (const tx of subscriptions) void this.repoLocal.patch(tx);
+    return subscriptions;
+  }
+
+  search(params: SubscriptionListParams): Promise<Subscription[]> {
+    return this.repoLocal.list(params);
+  }
+
+  async get(reference: string): Promise<Subscription> {
+    const serveur = await this.repoRemote.get(reference);
+    // On actualise la donnée locale, et on la retourne (elle a la catégorie)
+    await this.repoLocal.patch(serveur);
+    return (await this.fetch(reference)) ?? serveur;
+  }
+
+  fetch(reference: string): Promise<Subscription | null> {
+    return this.repoLocal.get(reference);
+  }
+
+  async update(id: string, command: SubscriptionCommand): Promise<Subscription> {
+    if (command.categorie != null) {
+      await this.repoLocal.add(id, command.toJson());
+      return (await this.repoLocal.get(id))!;
+    }
+    const tx = await this.repoRemote.update(id, command);
+    await this.repoLocal.patch(tx);
+    return (await this.fetch(tx.endToEndId)) ?? tx;
+  }
+
+  async disable(id: string): Promise<Subscription> {
+    const transaction = await this.repoRemote.disable(id);
+    await this.repoLocal.save(transaction);
+    return (await this.fetch(transaction.endToEndId)) ?? transaction;
+  }
+
+  async enable(id: string): Promise<Subscription> {
+    const transaction = await this.repoRemote.enable(id);
+    await this.repoLocal.save(transaction);
+    return (await this.fetch(transaction.endToEndId)) ?? transaction;
+  }
+
+  async delete(id: string): Promise<void> {
+    await this.repoRemote.delete(id);
+    await this.repoLocal.delete(id);
+  }
+
+  supprimer(id: string): Promise<void> {
+    return this.repoLocal.delete(id);
+  }
+}