@pi-spi/app 0.0.0-stage → 1.2.0

package/src/modules/notification/presentation/pages/notification_page_liste_item.tsx

@@ -0,0 +1,227 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { Image } from 'expo-image';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { Images } from '../../../../core/assets';
+import { useBloc } from '../../../../core/bloc_react';
+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 { DateFormat } from '../../../../shared/utils/date_format';
+import { AmountWidget } from '../../../../shared/widgets/amount_widget';
+import { ClipboardWidget } from '../../../../shared/widgets/clipboard_widget';
+import { CustomCircularProgressBar } from '../../../../shared/widgets/custom_progressbar';
+import type { Notification } from '../../domain/models/notification';
+import { NotificationType } from '../../domain/models/notification_type';
+import { NotificationBloc } from '../bloc/notification_bloc';
+import { NotificationReadEvent } from '../bloc/notification_event';
+
+type Subtitle = { value: string; text: string; canCopy: boolean };
+
+/** Nom du type (≈ `NotificationType.name` en Dart) */
+function typeName(type: NotificationType): string {
+  return Object.entries(NotificationType).find(([, v]) => v === type)?.[0] ?? String(type);
+}
+
+/** Valeur texte d'un détail de la notification (vide si absent) */
+function detail(notification: Notification, key: string): string {
+  const value = notification.details?.[key];
+  return value == null ? '' : String(value);
+}
+
+function iconOf(notification: Notification): { icon: number; subIcon?: number } {
+  switch (notification.type) {
+    case NotificationType.revendicationInitiee:
+    case NotificationType.revendicationRejetee:
+    case NotificationType.revendicationAccepte:
+      return { icon: Images.notificationAliasClaim };
+    case NotificationType.annulationDemandee:
+    case NotificationType.annulationRejetee:
+      return { icon: Images.notificationAnnulation };
+    case NotificationType.rtpInitiee:
+      return { icon: Images.arrowDown };
+    case NotificationType.rtpRecue:
+    case NotificationType.transfertEmisRejete:
+      return { icon: Images.arrowUp };
+    case NotificationType.authConnexion:
+      return { icon: Images.iconAuthPhone, subIcon: Images.iconAuthLogin };
+    default:
+      return { icon: Images.iconsTransfert };
+  }
+}
+
+function titleOf(traductions: AppLocalizations, notification: Notification): string {
+  switch (notification.type) {
+    case NotificationType.revendicationInitiee:
+    case NotificationType.revendicationRejetee:
+    case NotificationType.revendicationAccepte:
+      return traductions.notificationPageClaimTitle;
+    case NotificationType.annulationDemandee:
+      return traductions.notificationPageAnnulationRequestTitle;
+    case NotificationType.rtpInitiee:
+    case NotificationType.rtpRecue:
+      return traductions.transactionsSendTitleRequest2Pay;
+    case NotificationType.abonnementRejete:
+      return traductions.notificationPageAbmntRejeteTitle;
+    case NotificationType.transfertEmisRejete:
+      return traductions.notificationPageTransfertRejeteTitle;
+    case NotificationType.annulationRejetee:
+      return traductions.notificationPageAnnulationRejeteTitle;
+    case NotificationType.authConnexion:
+      return traductions.notificationPageAuthConnexionTitle;
+    default:
+      return typeName(notification.type);
+  }
+}
+
+// Écart volontaire : le SDK Flutter lit les détails avec `details!["…"] as
+// String` et plante sur une notification sans détails ; ici un détail
+// absent donne un texte vide.
+function subtitlesOf(traductions: AppLocalizations, notification: Notification): Subtitle[] {
+  const clientNom = detail(notification, 'clientNom');
+  const endToEndId = notification.details?.endToEndId as string | undefined;
+  const endToEnd: Subtitle[] =
+    endToEndId != null ? [{ value: endToEndId, text: traductions.notificationPageTransfertRejeteSubtitleId(endToEndId), canCopy: true }] : [];
+  switch (notification.type) {
+    case NotificationType.revendicationInitiee: {
+      const alias = detail(notification, 'alias');
+      return [{ value: alias, text: traductions.notificationPageClaimSubtitle(alias), canCopy: false }];
+    }
+    case NotificationType.annulationDemandee:
+      return [{ value: clientNom, text: traductions.notificationPageAnnulationRequestSubtitle(clientNom), canCopy: false }];
+    case NotificationType.rtpInitiee:
+      return [{ value: clientNom, text: traductions.notificationPageRtpInitieeSubtitle(clientNom), canCopy: false }];
+    case NotificationType.rtpRecue:
+      return [{ value: clientNom, text: traductions.notificationPageRtpRecueSubtitle(clientNom), canCopy: false }];
+    case NotificationType.abonnementRejete:
+      return [{ value: clientNom, text: traductions.notificationPageAbmntRejeteSubtitle(clientNom), canCopy: false }, ...endToEnd];
+    case NotificationType.transfertEmisRejete:
+      return [{ value: clientNom, text: traductions.notificationPageTransfertRejeteSubtitlePaye(clientNom), canCopy: false }, ...endToEnd];
+    case NotificationType.annulationRejetee:
+      return [{ value: clientNom, text: traductions.notificationPageAnnulationRejeteSubtitle(clientNom), canCopy: false }];
+    case NotificationType.revendicationRejetee:
+      return [{ value: '', text: traductions.notificationPageRevendicationRejeteSubtitle, canCopy: false }];
+    case NotificationType.revendicationAccepte:
+      return [{ value: '', text: traductions.notificationPageRevendicationAccepteSubtitle, canCopy: false }];
+    case NotificationType.authConnexion:
+      return [
+        {
+          value: '',
+          text: traductions.notificationPageAuthConnexionDate(new DateFormat('d MMM, HH:mm', traductions.localeName).format(notification.dateAction)),
+          canCopy: false,
+        },
+      ];
+    default:
+      return [{ value: '', text: typeName(notification.type), canCopy: false }];
+  }
+}
+
+/** Ligne d'une notification : icône (anneau si non lue), titre, montant et détails */
+export function NotificationPageListeItem({ notification }: { notification: Notification }) {
+  const theme = useTheme();
+  const traductions = useAppLocalizations();
+  const router = useAppRouter();
+  const bloc = useBloc(NotificationBloc);
+
+  const { icon, subIcon } = iconOf(notification);
+  const leading = (
+    <View style={[styles.leading, { backgroundColor: theme.colorScheme.surface }]}>
+      <Image source={icon} style={styles.icon} tintColor={theme.colorScheme.onSurface} contentFit="contain" />
+    </View>
+  );
+  const montant = notification.details?.montant;
+  const subtitleStyle = [theme.textTheme.displaySmall, { color: Themer.neural04Color }];
+
+  /** Action quand on clique sur la notification */
+  const handleNotification = () => {
+    // Marquer comme lu
+    if (notification.dateLecture == null) bloc.add(new NotificationReadEvent({ id: notification.id }));
+    // Afficher la notification
+    const idObject = notification.idObject;
+    if (idObject == null) return;
+    let route: string | null = null;
+    let params: unknown = notification;
+    if (notification.type === NotificationType.revendicationInitiee) {
+      route = AppRouter.aliasClaimDetails.replace(':id', idObject);
+    } else if (notification.type === NotificationType.annulationDemandee) {
+      route = AppRouter.transactionCancel.replace(':id', idObject);
+    } else if (notification.type === NotificationType.rtpInitiee || notification.type === NotificationType.rtpRecue) {
+      route = AppRouter.transactionReceiveDetails.replace(':id', idObject);
+      params =
+        notification.type === NotificationType.rtpRecue
+          ? { type: notification.type, clientAlias: notification.details?.clientAlias, clientCategorie: notification.details?.clientCategorie }
+          : {};
+    } else if (notification.type === NotificationType.transfertEmisRejete || notification.type === NotificationType.abonnementRejete) {
+      route = AppRouter.transactionSendDetails.replace(':id', idObject);
+    }
+    // Écart volontaire : pour les autres types, le SDK Flutter ouvrait
+    // `/notifications/<idObject>`, une route qui n'existe pas (page
+    // « introuvable ») ; la notification est seulement marquée comme lue.
+    if (route != null) void AppRouter.push(router, route, { params });
+  };
+
+  return (
+    <Pressable onPress={handleNotification} style={({ pressed }) => [styles.tile, pressed ? styles.pressed : null]}>
+      {/* Icône de la notification */}
+      <View>
+        {notification.dateLecture == null ? (
+          <CustomCircularProgressBar
+            size={46}
+            progressValue={1}
+            backgroundColor={theme.colorScheme.secondary}
+            progressColor={theme.colorScheme.secondary}
+          >
+            {leading}
+          </CustomCircularProgressBar>
+        ) : (
+          leading
+        )}
+        {subIcon != null && <Image source={subIcon} style={styles.subIcon} contentFit="contain" />}
+      </View>
+      <View style={styles.texts}>
+        {/* Titre et montant */}
+        <View style={styles.titleRow}>
+          <Text numberOfLines={1} style={[theme.textTheme.bodySmall, styles.flex]}>
+            {titleOf(traductions, notification)}
+          </Text>
+          {montant != null && (
+            <View style={styles.amount}>
+              <AmountWidget montant={parseFloat(String(montant))} style={theme.textTheme.headlineSmall} />
+            </View>
+          )}
+        </View>
+        {/* Détails */}
+        {subtitlesOf(traductions, notification).map((subtitle, i) =>
+          subtitle.canCopy ? (
+            <View key={i} style={styles.copyRow}>
+              <Text numberOfLines={1} style={[subtitleStyle, styles.flex]}>
+                {subtitle.text}
+              </Text>
+              <Pressable accessibilityRole="button" hitSlop={8} onPress={() => void ClipboardWidget.setData(subtitle.value)}>
+                <MaterialIcons name="content-copy" size={16} color={theme.colorScheme.onSurface} />
+              </Pressable>
+            </View>
+          ) : (
+            <Text key={i} style={subtitleStyle}>
+              {subtitle.text}
+            </Text>
+          ),
+        )}
+      </View>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+  tile: { flexDirection: 'row', alignItems: 'center', paddingVertical: 8, minHeight: 72 },
+  pressed: { opacity: 0.7 },
+  leading: { width: 45, height: 45, borderRadius: 45 / 2, padding: 12 },
+  icon: { flex: 1 },
+  subIcon: { position: 'absolute', right: 0, bottom: 0, width: 15, height: 15 },
+  texts: { flex: 1, marginLeft: 16 },
+  titleRow: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
+  amount: { paddingLeft: 10 },
+  copyRow: { flexDirection: 'row', alignItems: 'center' },
+});

package/src/modules/notification/presentation/pages/notification_page_liste_loading.tsx

@@ -0,0 +1,28 @@
+import { ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native';
+
+import { SkeletonWidget } from '../../../../shared/widgets/skeleton_widget';
+
+/** Squelette de chargement de la liste des notifications (3 lignes). */
+export function NotificationPageListeLoading() {
+  const { width } = useWindowDimensions();
+  return (
+    <ScrollView>
+      {[0, 1, 2].map((i) => (
+        <View key={i} style={styles.tile}>
+          <SkeletonWidget radius={20} />
+          <View style={styles.texts}>
+            <SkeletonWidget height={15} width={width} />
+            <View style={styles.gap} />
+            <SkeletonWidget width={100} />
+          </View>
+        </View>
+      ))}
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  tile: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, paddingVertical: 8, minHeight: 72 },
+  texts: { marginLeft: 16, flex: 1, overflow: 'hidden' },
+  gap: { height: 4 },
+});

package/src/modules/permission/domain/exceptions/permission_exception.ts

@@ -0,0 +1,11 @@
+import type { PermissionType } from '../models/permission_type';
+
+export class UnknowPermissionException extends Error {
+  constructor(
+    readonly permission: PermissionType,
+    readonly exception?: unknown,
+  ) {
+    super(`${permission} <- ${exception}`);
+    this.name = 'UnknowPermissionException';
+  }
+}

package/src/modules/permission/domain/models/permission_type.ts

@@ -0,0 +1,6 @@
+/** Permissions demandées dans l'app */
+export enum PermissionType {
+  notification = 'notification',
+  contact = 'contact',
+  localisationGPS = 'localisationGPS',
+}

package/src/modules/permission/domain/services/permission_service.ts

@@ -0,0 +1,19 @@
+import type { PermissionInputPort } from '../../ports/input/permission_input_port';
+import type { PermissionOutputPort } from '../../ports/output/permission_output_port';
+import type { PermissionType } from '../models/permission_type';
+
+export class PermissionService implements PermissionInputPort {
+  constructor(readonly permissionOutputPort: PermissionOutputPort) {}
+
+  grantPermission(permission: PermissionType): Promise<boolean> {
+    return this.permissionOutputPort.grantPermission(permission);
+  }
+
+  isPermissionGranted(permission: PermissionType): Promise<boolean> {
+    return this.permissionOutputPort.isPermissionGranted(permission);
+  }
+
+  isPermissionServiceEnabled(permission: PermissionType): Promise<boolean> {
+    return this.permissionOutputPort.isPermissionServiceEnabled(permission);
+  }
+}

package/src/modules/permission/infra/permissions_output_local.ts

@@ -0,0 +1,92 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+import * as Contacts from 'expo-contacts';
+import * as Location from 'expo-location';
+import { Linking, Platform } from 'react-native';
+
+import { Logger } from '../../../core/logger';
+import { UnknowPermissionException } from '../domain/exceptions/permission_exception';
+import { PermissionType } from '../domain/models/permission_type';
+import type { PermissionOutputPort } from '../ports/output/permission_output_port';
+
+/** Réponse commune des modules Expo (`getPermissionsAsync` / `requestPermissionsAsync`). */
+type PermissionResponse = { granted: boolean; canAskAgain: boolean; status: string };
+
+type PermissionApi = {
+  get(): Promise<PermissionResponse>;
+  request(): Promise<PermissionResponse>;
+};
+
+/**
+ * Le SDK ne possède pas de fournisseur de push : `expo-notifications` n'est
+ * pas une dépendance du SDK. Si l'hôte l'a installé, la permission
+ * notification passe par lui ; sinon elle est considérée comme non accordée.
+ * (Metro traite un `require` dans un `try` comme une dépendance optionnelle.)
+ */
+function notificationsApi(): PermissionApi | null {
+  try {
+    const Notifications = require('expo-notifications');
+    return { get: () => Notifications.getPermissionsAsync(), request: () => Notifications.requestPermissionsAsync() };
+  } catch {
+    return null;
+  }
+}
+
+export class PermissionOutputLocal implements PermissionOutputPort {
+  static readonly logger = new Logger();
+
+  private api(permission: PermissionType): PermissionApi | null {
+    switch (permission) {
+      case PermissionType.contact:
+        return { get: () => Contacts.getPermissionsAsync(), request: () => Contacts.requestPermissionsAsync() };
+      case PermissionType.notification:
+        return notificationsApi();
+      case PermissionType.localisationGPS:
+        return {
+          get: () => Location.getForegroundPermissionsAsync(),
+          request: () => Location.requestForegroundPermissionsAsync(),
+        };
+    }
+  }
+
+  /**
+   * Comme `!(await permission.isDenied)` avec permission_handler : seul un
+   * refus pour lequel la demande peut encore être affichée compte comme
+   * « non accordé » (un refus définitif, lui, n'est pas `isDenied`).
+   */
+  async isPermissionGranted(permission: PermissionType): Promise<boolean> {
+    const api = this.api(permission);
+    if (!api) return false;
+    const response = await api.get();
+    return response.granted || !response.canAskAgain;
+  }
+
+  async grantPermission(permission: PermissionType): Promise<boolean> {
+    if (Platform.OS === 'web' && permission === PermissionType.contact) {
+      return false;
+    }
+    const api = this.api(permission);
+    if (!api) {
+      PermissionOutputLocal.logger.w(`Permission ${permission} indisponible (module natif absent).`);
+      return false;
+    }
+
+    // If permanently denied, redirect to app settings
+    const current = await api.get();
+    if (!current.granted && !current.canAskAgain) {
+      await Linking.openSettings();
+    }
+
+    // Request permission
+    const grantStatus = await api.request();
+    return grantStatus.granted;
+  }
+
+  async isPermissionServiceEnabled(permission: PermissionType): Promise<boolean> {
+    switch (permission) {
+      case PermissionType.localisationGPS:
+        return Location.hasServicesEnabledAsync();
+      default:
+        throw new UnknowPermissionException(permission);
+    }
+  }
+}

package/src/modules/permission/ports/input/permission_input_port.ts

@@ -0,0 +1,12 @@
+import type { PermissionType } from '../../domain/models/permission_type';
+
+export interface PermissionInputPort {
+  /** Pour vérifier si l'utilisateur a accordé la permission */
+  isPermissionGranted(permission: PermissionType): Promise<boolean>;
+
+  /** Pour notifier l'accord d'une permission */
+  grantPermission(permission: PermissionType): Promise<boolean>;
+
+  /** Pour vérifier si un service est activé avant de demander l'accès */
+  isPermissionServiceEnabled(permission: PermissionType): Promise<boolean>;
+}

package/src/modules/permission/ports/output/permission_output_port.ts

@@ -0,0 +1,12 @@
+import type { PermissionType } from '../../domain/models/permission_type';
+
+export interface PermissionOutputPort {
+  /** Pour vérifier si l'utilisateur a accordé la permission */
+  isPermissionGranted(permission: PermissionType): Promise<boolean>;
+
+  /** Pour notifier l'accord d'une permission */
+  grantPermission(permission: PermissionType): Promise<boolean>;
+
+  /** Pour vérifier si un service qu'on veut utiliser est activé */
+  isPermissionServiceEnabled(permission: PermissionType): Promise<boolean>;
+}

package/src/modules/permission/presentation/bloc/permission_bloc.ts

@@ -0,0 +1,33 @@
+import { Bloc, type Emitter } from '../../../../core/bloc';
+import { ConfigKey } from '../../../config/domain/models/config_keys';
+import type { ConfigInputPort } from '../../../config/ports/input/config_input_port';
+import type { PermissionInputPort } from '../../ports/input/permission_input_port';
+import { AcceptPermissionEvent, FinishPermissionEvent, type PermissionEvent } from './permission_event';
+import { PermissionFinalState, PermissionInitialState, type PermissionState } from './permission_state';
+
+/**
+ * Gère la demande d'autorisation d'accès aux contacts, affichée une seule
+ * fois au premier lancement (juste après l'introduction). Contrairement à
+ * l'app de référence, ce bloc ne gère pas la permission notification :
+ * le SDK ne possède pas de fournisseur de push, cette permission reste à
+ * la charge de l'hôte s'il en a besoin.
+ */
+export class PermissionBloc extends Bloc<PermissionEvent, PermissionState> {
+  constructor(
+    readonly permissionInputPort: PermissionInputPort,
+    readonly configInputPort: ConfigInputPort,
+  ) {
+    super(new PermissionInitialState());
+    this.on(AcceptPermissionEvent, (event, emit) => this.onAcceptPermissionEvent(event, emit));
+    this.on(FinishPermissionEvent, (_event, emit) => emit(new PermissionFinalState()));
+  }
+
+  private async onAcceptPermissionEvent(event: AcceptPermissionEvent, emit: Emitter<PermissionState>): Promise<void> {
+    let granted = false;
+    if (event.acceptation) {
+      granted = await this.permissionInputPort.grantPermission(event.permission);
+    }
+    await this.configInputPort.modifier(ConfigKey.permissionContact, granted ? '1' : '0');
+    emit(new PermissionFinalState());
+  }
+}

package/src/modules/permission/presentation/bloc/permission_event.ts

@@ -0,0 +1,16 @@
+import type { PermissionType } from '../../domain/models/permission_type';
+
+export abstract class PermissionEvent {}
+
+/** Quand l'utilisateur accepte maintenant ou pas la permission */
+export class AcceptPermissionEvent extends PermissionEvent {
+  constructor(
+    readonly permission: PermissionType,
+    readonly acceptation: boolean,
+  ) {
+    super();
+  }
+}
+
+/** Quand on a fini sur la vue permissions (ex. fermeture manuelle) */
+export class FinishPermissionEvent extends PermissionEvent {}

package/src/modules/permission/presentation/bloc/permission_state.ts

@@ -0,0 +1,7 @@
+export abstract class PermissionState {}
+
+/** Etat initial : la page contacts n'a pas encore répondu. */
+export class PermissionInitialState extends PermissionState {}
+
+/** Etat final : la demande est terminée (acceptée ou refusée), on peut revenir à l'accueil. */
+export class PermissionFinalState extends PermissionState {}

package/src/modules/permission/presentation/pages/permissions_contact.tsx

@@ -0,0 +1,73 @@
+import { Image } from 'expo-image';
+import { StyleSheet, Text, useWindowDimensions, View } from 'react-native';
+
+import { Images } from '../../../../core/assets';
+import { useBloc } from '../../../../core/bloc_react';
+import { Themer, useTheme } from '../../../../core/theme';
+import { useAppLocalizations } from '../../../../l10n/localizations';
+import { ElevatedButton } from '../../../../shared/material/buttons';
+import { Card } from '../../../../shared/material/card';
+import { PermissionType } from '../../domain/models/permission_type';
+import { PermissionBloc } from '../bloc/permission_bloc';
+import { AcceptPermissionEvent } from '../bloc/permission_event';
+
+export function PermissionsContact() {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const permissionBloc = useBloc(PermissionBloc);
+  const { width, height } = useWindowDimensions();
+
+  const permission = PermissionType.contact;
+
+  // Largeur contenu: 20 padding global de la page
+  const largeurImage = width - 20 * 2;
+  const hauteurImage = height - 400;
+  const tailleImage = Math.max(0, Math.min(largeurImage, hauteurImage));
+
+  return (
+    <View style={styles.column}>
+      {/* Titre et sous titre */}
+      <View>
+        {/* Titre de la page */}
+        <Text style={theme.textTheme.titleSmall}>{traductions.permissionContactTitle}</Text>
+
+        {/* Séparateur */}
+        <View style={styles.gap8} />
+
+        {/* Sous titre de la page */}
+        <Text style={theme.textTheme.displaySmall}>{traductions.permissionContactSubTitle1}</Text>
+        <Text style={theme.textTheme.displaySmall}>{traductions.permissionContactSubTitle2}</Text>
+      </View>
+
+      {/* Images illustration */}
+      <Card style={styles.center}>
+        <Image source={Images.permissionContact} style={{ width: tailleImage, height: tailleImage }} contentFit="contain" />
+      </Card>
+
+      {/* Actions buttons */}
+      <View>
+        <ElevatedButton
+          onPress={() => permissionBloc.add(new AcceptPermissionEvent(permission, true))}
+          style={{ minHeight: Themer.btnNormalHeight }}
+        >
+          <Text style={theme.textTheme.headlineSmall}>{traductions.permissionContactEnableBtn}</Text>
+        </ElevatedButton>
+        <View style={styles.gap16} />
+        <ElevatedButton
+          onPress={() => permissionBloc.add(new AcceptPermissionEvent(permission, false))}
+          style={{ minHeight: Themer.btnNormalHeight, backgroundColor: theme.secondaryHeaderColor }}
+        >
+          <Text style={theme.textTheme.headlineSmall}>{traductions.permissionContactNotNowBtn}</Text>
+        </ElevatedButton>
+        <View style={styles.gap16} />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  column: { flex: 1, justifyContent: 'space-between' },
+  center: { alignItems: 'center', justifyContent: 'center' },
+  gap8: { height: 8 },
+  gap16: { height: 16 },
+});

package/src/modules/permission/presentation/pages/permissions_page.tsx

@@ -0,0 +1,63 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { Pressable } from 'react-native';
+
+import { useBloc, useBlocBuilder, useBlocListener, useCreateBloc, BlocProvider } from '../../../../core/bloc_react';
+import { Di } from '../../../../core/di';
+import { AppRouter, useAppRouter } from '../../../../core/router';
+import { useTheme } from '../../../../core/theme';
+import { AppBar, Scaffold } from '../../../../shared/material/scaffold';
+import { LoadingPage } from '../../../../shared/widgets/loading_page';
+import { MyPageContainer } from '../../../../shared/widgets/my_page_container';
+import { ConfigBloc } from '../../../config/adapters/ui/bloc/config_bloc';
+import { ConfigLoadedEvent } from '../../../config/adapters/ui/bloc/config_event';
+import { PermissionBloc } from '../bloc/permission_bloc';
+import { FinishPermissionEvent } from '../bloc/permission_event';
+import { PermissionFinalState, PermissionInitialState } from '../bloc/permission_state';
+import { PermissionsContact } from './permissions_contact';
+
+/**
+ * Page d'explication affichée une seule fois au premier lancement, juste
+ * après l'introduction : demande l'autorisation d'accès aux contacts.
+ * Contrairement à l'app de référence, elle ne demande pas la permission
+ * notification (le SDK ne possède pas de fournisseur de push).
+ */
+export function PermissionsPage() {
+  const router = useAppRouter();
+  const theme = useTheme();
+  const configBloc = useBloc(ConfigBloc);
+  const permissionBloc = useCreateBloc(() => new PermissionBloc(Di.getPermissionInputPort(), Di.getConfigInputPort()));
+  const permissionState = useBlocBuilder(permissionBloc);
+
+  useBlocListener(
+    permissionBloc,
+    () => {
+      // Recharger la liste des configurations
+      configBloc.add(new ConfigLoadedEvent());
+      // Sélection de compte si le client en a plusieurs, sinon
+      // directement l'accueil.
+      AppRouter.pushReplacement(router, AppRouter.postOnboardingRoute());
+    },
+    (_previous, current) => current instanceof PermissionFinalState,
+  );
+
+  return (
+    <Scaffold
+      appBar={
+        // Pour avoir le bouton de fermeture
+        <AppBar
+          leading={
+            <Pressable accessibilityRole="button" hitSlop={12} onPress={() => permissionBloc.add(new FinishPermissionEvent())}>
+              <MaterialIcons name="close" size={24} color={theme.appBarTheme.foregroundColor} />
+            </Pressable>
+          }
+        />
+      }
+    >
+      <BlocProvider blocs={[permissionBloc]}>
+        <MyPageContainer>
+          {permissionState instanceof PermissionInitialState ? <PermissionsContact /> : <LoadingPage />}
+        </MyPageContainer>
+      </BlocProvider>
+    </Scaffold>
+  );
+}