@pi-spi/app 0.0.0-stage → 1.2.1

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

@@ -0,0 +1,165 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { useEffect, useRef } from 'react';
+import { Pressable, StyleSheet, Text, Vibration, View } from 'react-native';
+
+import { useBloc, useBlocBuilder, useBlocListener, useCreateBloc } from '../../../../core/bloc_react';
+import { Di } from '../../../../core/di';
+import { NotificationExternalEvent } from '../../../../core/notifications';
+import { AppRouter, useAppRouter } from '../../../../core/router';
+import { SoundManager } from '../../../../core/sounds';
+import { Themer, useTheme } from '../../../../core/theme';
+import { ConfigBloc } from '../../../config/adapters/ui/bloc/config_bloc';
+import { ConfigKey } from '../../../config/domain/models/config_keys';
+import { ContactBloc } from '../../../contacts/presentation/bloc/contact_bloc';
+import { NotificationSearchCommand } from '../../domain/models/notification_search_command';
+import { NotificationSearchFilter } from '../../domain/models/notification_search_filter';
+import { NotificationType } from '../../domain/models/notification_type';
+import { NotificationBloc } from '../bloc/notification_bloc';
+import { NotificationCountEvent, NotificationListEvent, NotificationReadEvent } from '../bloc/notification_event';
+import { NotificationInAppState, NotificationToDisplayState, type NotificationState } from '../bloc/notification_state';
+import { InAppNotificationOverlay } from './notification_in_app_overlay';
+
+/**
+ * Cloche de l'accueil avec le nombre de notifications non lues. Elle
+ * écoute aussi les notifications reçues pendant que le SDK est ouvert :
+ * bannière ou boîte (selon les paramètres), son, vibration, ou page de la
+ * demande de paiement d'un marchand.
+ *
+ * [enabled] `false` : bouton grisé et inactif, badge masqué (compte sans alias).
+ */
+export function NotificationBtnOpenWidget({ enabled = true }: { enabled?: boolean }) {
+  const theme = useTheme();
+  const router = useAppRouter();
+  const configBloc = useBloc(ConfigBloc);
+  const contactBloc = useBloc(ContactBloc);
+  const compte = useRef(Di.activeCompte);
+  const notificationBloc = useCreateBloc(() => {
+    const created = new NotificationBloc(Di.getNotificationInputPort(), contactBloc);
+    // Compter le nombre de notification non lues
+    created.add(new NotificationCountEvent(compte.current));
+    return created;
+  });
+  const state = useBlocBuilder(notificationBloc);
+
+  // Le compte actif a changé (carrousel de l'accueil) : recompte les
+  // notifications non lues pour lui, seulement une fois son alias
+  // confirmé (enabled).
+  const activeCompte = Di.activeCompte;
+  useEffect(() => {
+    if (enabled && compte.current !== activeCompte) {
+      compte.current = activeCompte;
+      notificationBloc.add(new NotificationCountEvent(activeCompte));
+    }
+  }, [enabled, activeCompte, notificationBloc]);
+
+  const openNotifications = () => void AppRouter.push(router, AppRouter.notifications, { params: notificationBloc });
+
+  /** Action quand on touche la notification affichée */
+  const handleEvent = (event: NotificationExternalEvent) => {
+    // Marquer comme lu
+    if (event.notificationId != null) notificationBloc.add(new NotificationReadEvent({ id: event.notificationId }));
+    if (!NotificationType.canRedirect(event.type, event.idObject)) return;
+
+    const idObject = event.idObject!;
+    let route: string | null = null;
+    let params: unknown;
+    if (event.type === NotificationType.revendicationInitiee) {
+      route = AppRouter.aliasClaimDetails.replace(':id', idObject);
+    } else if (event.type === NotificationType.annulationDemandee) {
+      route = AppRouter.transactionCancel.replace(':id', idObject);
+    } else if (
+      event.type === NotificationType.rtpRecue ||
+      event.type === NotificationType.rtpInitiee ||
+      event.type === NotificationType.rtpRejete
+    ) {
+      route = AppRouter.transactionReceiveDetails.replace(':id', idObject);
+      params =
+        event.type === NotificationType.rtpRecue
+          ? { type: NotificationType.get(event.type), clientAlias: event.clientAlias, clientCategorie: event.clientCategorie }
+          : {};
+    } else if (event.type === NotificationType.transfertEmisRejete || event.type === NotificationType.abonnementRejete) {
+      route = AppRouter.transactionSendDetails.replace(':id', idObject);
+    }
+    if (route != null) void AppRouter.push(router, route, { params });
+    else openNotifications();
+  };
+
+  /** Demande de paiement d'un marchand : ouvrir directement la demande */
+  const handleNotificationToDisplay = (event: NotificationExternalEvent) => {
+    if (event.type === NotificationType.rtpRecue) {
+      void AppRouter.push(router, AppRouter.transactionReceiveDetails.replace(':id', event.idObject!), {
+        params: { type: NotificationType.get(event.type), clientAlias: event.clientAlias, clientCategorie: event.clientCategorie },
+      });
+    }
+  };
+
+  const handleInAppNotification = (event: NotificationExternalEvent) => {
+    const params = configBloc.state.configParams.params;
+    const status = params[ConfigKey.notificationStatus];
+    if (status != null && status !== 'enabled') return;
+    // Son
+    const soundSelected = params[ConfigKey.notificationAlertSound];
+    if (soundSelected != null && soundSelected !== 'NONE') void SoundManager.playSound(soundSelected);
+    // Vibration
+    if (params[ConfigKey.notificationAlertVibration] === 'enabled') Vibration.vibrate(100);
+    // Style d'affichage
+    if (event.title == null || event.body == null) return;
+    const style = params[ConfigKey.notificationStyle];
+    InAppNotificationOverlay.show(style == null || style === NotificationExternalEvent.notificationStyleSnackBar ? 'banner' : 'dialog', {
+      title: event.title,
+      body: event.body,
+      onTap: () => handleEvent(event),
+    });
+  };
+
+  useBlocListener(
+    notificationBloc,
+    (current: NotificationState) => {
+      if (!(current instanceof NotificationToDisplayState || current instanceof NotificationInAppState)) return;
+      const event = current.event;
+      // actualiser la liste des notifications et le nombre de notifications non lues
+      if (event.type != null && NotificationType.inApp.includes(event.type)) {
+        notificationBloc.add(new NotificationCountEvent(compte.current));
+        notificationBloc.add(new NotificationListEvent(new NotificationSearchCommand({ compte: compte.current, filters: new NotificationSearchFilter() })));
+      }
+      if (current instanceof NotificationToDisplayState) handleNotificationToDisplay(event);
+      else handleInAppNotification(event);
+    },
+    (_previous, current) => current instanceof NotificationToDisplayState || current instanceof NotificationInAppState,
+  );
+
+  return (
+    <View>
+      <Pressable
+        accessibilityRole="button"
+        disabled={!enabled}
+        onPress={openNotifications}
+        style={[styles.button, { opacity: enabled ? 1 : 0.38 }]}
+      >
+        <MaterialIcons name="notifications-none" size={24} color={theme.appBarTheme.foregroundColor} />
+      </Pressable>
+      {enabled && state.count !== 0 && (
+        <View pointerEvents="none" style={[styles.badge, { backgroundColor: theme.colorScheme.error, borderColor: theme.colorScheme.surface }]}>
+          {/* labelSmall Material (non défini dans les thèmes du SDK) : 11, interlettrage 0.5 */}
+          <Text style={[theme.textTheme.labelMedium, styles.badgeText]}>{state.count}</Text>
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: { padding: 12 },
+  badge: {
+    position: 'absolute',
+    right: 8,
+    top: 5,
+    width: 18,
+    height: 18,
+    borderRadius: 9,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  badgeText: { color: Themer.whiteColor, fontWeight: '800', fontSize: 11, letterSpacing: 0.5, lineHeight: 14 },
+});

package/src/modules/notification/presentation/pages/notification_groups.ts

@@ -0,0 +1,26 @@
+import type { Notification } from '../../domain/models/notification';
+
+/** Notifications d'un même jour */
+export type NotificationGroup = { jour: string; notifications: Notification[] };
+
+function pad(n: number): string {
+  return String(n).padStart(2, '0');
+}
+
+/**
+ * Regroupe les notifications par jour.
+ * Écart volontaire : le SDK Flutter groupait par jour UTC
+ * (`toIso8601String()` d'une date UTC) ; ici par jour local, comme les
+ * transactions.
+ */
+export function groupNotifications(notifications: Notification[]): NotificationGroup[] {
+  const grouped = new Map<string, Notification[]>();
+  for (const notification of notifications) {
+    const date = notification.dateAction;
+    const jour = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+    const list = grouped.get(jour);
+    if (list) list.push(notification);
+    else grouped.set(jour, [notification]);
+  }
+  return [...grouped.entries()].map(([jour, list]) => ({ jour, notifications: list }));
+}

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

@@ -0,0 +1,135 @@
+import { Image } from 'expo-image';
+import { useEffect, useRef } from 'react';
+import { Animated, Easing, Pressable, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
+
+import { Images } from '../../../../core/assets';
+import { useTheme } from '../../../../core/theme';
+import { useValueListenable, ValueNotifier } from '../../../../core/value_notifier';
+import { Card } from '../../../../shared/material/card';
+import { TextButton } from '../../../../shared/material/buttons';
+
+type InAppEntry = { id: number; kind: 'banner' | 'dialog'; title: string; body: string; onTap: () => void };
+
+const entries = new ValueNotifier<InAppEntry[]>([]);
+let sequence = 0;
+
+/** Durée d'affichage avant fermeture automatique */
+const AUTO_CLOSE_MS = 4000;
+
+/**
+ * Notifications reçues dans l'application (≈ les `OverlayEntry` de
+ * `NotificationBtnOpenWidget`) : bannière en haut de l'écran ou petite
+ * boîte centrée, sans voile ni blocage de l'écran, fermées après 4 s.
+ */
+export class InAppNotificationOverlay {
+  static show(kind: InAppEntry['kind'], params: { title: string; body: string; onTap: () => void }): void {
+    sequence += 1;
+    entries.value = [...entries.value, { id: sequence, kind, ...params }];
+  }
+
+  static remove(id: number): void {
+    entries.value = entries.value.filter((e) => e.id !== id);
+  }
+}
+
+/** Affiche les notifications reçues, par-dessus les écrans du SDK (placé dans `PiSpiSdkEntry`). */
+export function InAppNotificationHost() {
+  const list = useValueListenable(entries);
+  return (
+    <View pointerEvents="box-none" style={StyleSheet.absoluteFill}>
+      {list.map((entry) => (entry.kind === 'banner' ? <Banner key={entry.id} entry={entry} /> : <DialogBox key={entry.id} entry={entry} />))}
+    </View>
+  );
+}
+
+/** Ferme l'entrée (animation inverse) au bout de 4 s, ou au toucher avant d'appeler [onTap]. */
+function useEntryAnimation(entry: InAppEntry, easing: (value: number) => number) {
+  const progress = useRef(new Animated.Value(0)).current;
+  const visible = useRef(true);
+
+  const close = (then?: () => void) => {
+    if (!visible.current) return;
+    visible.current = false;
+    Animated.timing(progress, { toValue: 0, duration: 300, easing, useNativeDriver: true }).start(() => {
+      InAppNotificationOverlay.remove(entry.id);
+      then?.();
+    });
+  };
+
+  useEffect(() => {
+    Animated.timing(progress, { toValue: 1, duration: 300, easing, useNativeDriver: true }).start();
+    const timer = setTimeout(() => close(), AUTO_CLOSE_MS);
+    return () => clearTimeout(timer);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return { progress, close };
+}
+
+function Banner({ entry }: { entry: InAppEntry }) {
+  const theme = useTheme();
+  const { progress, close } = useEntryAnimation(entry, Easing.out(Easing.quad));
+  const height = useRef(new Animated.Value(200)).current;
+  return (
+    <Animated.View
+      onLayout={(e) => height.setValue(e.nativeEvent.layout.height)}
+      style={[
+        styles.banner,
+        // Glisse depuis le haut, de sa propre hauteur (Offset(0, -1) → 0)
+        { transform: [{ translateY: Animated.multiply(Animated.subtract(progress, 1), height) }] },
+      ]}
+    >
+      <Card style={[styles.bannerCard, styles.elevation6]}>
+        <Pressable onPress={() => close(entry.onTap)} style={styles.tile}>
+          <Image source={Images.ic} style={styles.icon30} contentFit="cover" />
+          <View style={styles.texts}>
+            <Text style={[theme.textTheme.bodyLarge, styles.bold]}>{entry.title}</Text>
+            <Text numberOfLines={2} style={theme.textTheme.displaySmall}>
+              {entry.body}
+            </Text>
+          </View>
+        </Pressable>
+      </Card>
+    </Animated.View>
+  );
+}
+
+function DialogBox({ entry }: { entry: InAppEntry }) {
+  const theme = useTheme();
+  const { width } = useWindowDimensions();
+  const { progress, close } = useEntryAnimation(entry, Easing.out(Easing.back(1.7)));
+  return (
+    <View pointerEvents="box-none" style={styles.center}>
+      <Animated.View style={{ transform: [{ scale: progress }] }}>
+        <Card style={styles.elevation12}>
+          <View style={[styles.dialog, { width: width * 0.7 }]}>
+            <Image source={Images.ic} style={styles.icon40} contentFit="cover" />
+            <View style={styles.gap8} />
+            <Text style={[theme.textTheme.bodyLarge, styles.bold]}>{entry.title}</Text>
+            <View style={styles.gap4} />
+            <Text style={[theme.textTheme.bodyMedium, styles.centerText]}>{entry.body}</Text>
+            <View style={styles.gap8} />
+            <TextButton onPress={() => close(entry.onTap)}>Ok</TextButton>
+          </View>
+        </Card>
+      </Animated.View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  banner: { position: 'absolute', top: 40, left: 10, right: 10 },
+  bannerCard: { borderRadius: 12 },
+  elevation6: { elevation: 6, shadowColor: '#000', shadowOpacity: 0.2, shadowRadius: 6, shadowOffset: { width: 0, height: 3 }, overflow: 'visible' },
+  elevation12: { elevation: 12, shadowColor: '#000', shadowOpacity: 0.25, shadowRadius: 12, shadowOffset: { width: 0, height: 6 }, overflow: 'visible' },
+  tile: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, paddingVertical: 8, minHeight: 72 },
+  icon30: { width: 30, height: 30, borderRadius: 15 },
+  icon40: { width: 40, height: 40, borderRadius: 20 },
+  texts: { flex: 1, marginLeft: 16 },
+  bold: { fontWeight: 'bold' },
+  center: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' },
+  dialog: { padding: 16, alignItems: 'center' },
+  centerText: { textAlign: 'center' },
+  gap4: { height: 4 },
+  gap8: { height: 8 },
+});

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

@@ -0,0 +1,70 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { useEffect } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { useBloc } from '../../../../core/bloc_react';
+import { Di } from '../../../../core/di';
+import { AppRouter, useAppRouter } from '../../../../core/router';
+import { useTheme } from '../../../../core/theme';
+import { useAppLocalizations } from '../../../../l10n/localizations';
+import { NotificationSearchCommand } from '../../domain/models/notification_search_command';
+import { NotificationSearchFilter, NotificationSearchFilterOption } from '../../domain/models/notification_search_filter';
+import { NotificationBloc } from '../bloc/notification_bloc';
+import { NotificationListEvent } from '../bloc/notification_event';
+import { NotificationSearchPageFilter } from './notification_page_filter';
+import { NotificationPageListe } from './notification_page_liste';
+
+/** Page des notifications (route `notifications`, bloc fourni par la cloche de l'accueil) */
+export function NotificationPage() {
+  const theme = useTheme();
+  const traductions = useAppLocalizations();
+  const router = useAppRouter();
+  const insets = useSafeAreaInsets();
+  const bloc = useBloc(NotificationBloc);
+
+  useEffect(() => {
+    bloc.add(
+      new NotificationListEvent(
+        new NotificationSearchCommand({
+          compte: Di.activeCompte,
+          filters: new NotificationSearchFilter({ option: NotificationSearchFilterOption.nonLue }),
+        }),
+      ),
+    );
+  }, [bloc]);
+
+  return (
+    <View style={[styles.flex, { paddingBottom: insets.bottom }]}>
+      {/* Barre de la page */}
+      <View style={styles.backRow}>
+        <Pressable
+          accessibilityRole="button"
+          hitSlop={12}
+          onPress={() => AppRouter.pushReplacement(router, AppRouter.home)}
+          style={styles.backButton}
+        >
+          <MaterialIcons name="arrow-back" size={24} color={theme.colorScheme.onSurface} />
+        </Pressable>
+      </View>
+      <View style={[styles.flex, styles.padded]}>
+        {/* Titre */}
+        <Text style={theme.textTheme.titleSmall}>{traductions.notificationPageTitle}</Text>
+        <View style={styles.gap16} />
+        {/* Barre de filtre */}
+        <NotificationSearchPageFilter />
+        <View style={styles.gap16} />
+        {/* Liste */}
+        <NotificationPageListe />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+  backRow: { flexDirection: 'row' },
+  backButton: { padding: 12 },
+  padded: { paddingHorizontal: 12 },
+  gap16: { height: 16 },
+});

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

@@ -0,0 +1,67 @@
+import { ScrollView, StyleSheet, View } from 'react-native';
+
+import { useBloc, useBlocBuilder } from '../../../../core/bloc_react';
+import type { AppLocalizations } from '../../../../l10n/app_localizations';
+import { useAppLocalizations } from '../../../../l10n/localizations';
+import { OptionChip } from '../../../../shared/widgets/chip_widget';
+import { NotificationSearchFilterOption } from '../../domain/models/notification_search_filter';
+import { NotificationBloc } from '../bloc/notification_bloc';
+import { NotificationListEvent } from '../bloc/notification_event';
+
+function title(traductions: AppLocalizations, option: NotificationSearchFilterOption): string {
+  switch (option) {
+    case NotificationSearchFilterOption.nonLue:
+      return traductions.notificationPageUnreadTitle;
+    case NotificationSearchFilterOption.rtp:
+      return traductions.transactionsSendTitleRequest2Pay;
+    case NotificationSearchFilterOption.annulation:
+      return traductions.notificationPageAnnulationRequestTitle;
+    case NotificationSearchFilterOption.transfert:
+      return traductions.notificationPageTransfertTitle;
+    case NotificationSearchFilterOption.abonnement:
+      return traductions.notificationPageAbmntTitle;
+    case NotificationSearchFilterOption.revendication:
+      return traductions.notificationPageClaimTitle;
+    case NotificationSearchFilterOption.auth:
+      return traductions.notificationPageAuthTitle;
+    default:
+      return traductions.notificationPageAllTitle;
+  }
+}
+
+/** Puces de filtre par type de notification */
+export function NotificationSearchPageFilter() {
+  const traductions = useAppLocalizations();
+  const bloc = useBloc(NotificationBloc);
+  const state = useBlocBuilder(bloc);
+  const command = state.command;
+  const filters = command.filters;
+
+  const isSelected = (option: NotificationSearchFilterOption) =>
+    filters.option == null ? option === NotificationSearchFilterOption.tout : filters.option === option;
+
+  return (
+    <View style={styles.bar}>
+      <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.content}>
+        {NotificationSearchFilterOption.list().map((option) => (
+          <OptionChip
+            key={option}
+            label={title(traductions, option)}
+            selected={isSelected(option)}
+            onTap={() => {
+              filters.option = option;
+              command.filters = filters;
+              bloc.add(new NotificationListEvent(command));
+            }}
+          />
+        ))}
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  // Largeur de l'écran (comme le SDK Flutter) : déborde du padding de droite de la page
+  bar: { height: 36, marginRight: -12 },
+  content: { gap: 8 },
+});

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

@@ -0,0 +1,82 @@
+import { useState } from 'react';
+import { FlatList, RefreshControl, StyleSheet, Text, View } from 'react-native';
+
+import { useBloc, useBlocBuilder } from '../../../../core/bloc_react';
+import { Themer, useTheme } from '../../../../core/theme';
+import { useAppLocalizations } from '../../../../l10n/localizations';
+import { Card } from '../../../../shared/material/card';
+import { DateFormat } from '../../../../shared/utils/date_format';
+import { NotificationBloc } from '../bloc/notification_bloc';
+import { NotificationListEvent, NotificationSearchPaginateEvent } from '../bloc/notification_event';
+import { NotificationLoadingState } from '../bloc/notification_state';
+import { groupNotifications } from './notification_groups';
+import { NotificationPageListeEmpty } from './notification_page_liste_empty';
+import { NotificationPageListeItem } from './notification_page_liste_item';
+import { NotificationPageListeLoading } from './notification_page_liste_loading';
+
+/** Liste des notifications groupées par jour ; tirer pour rafraîchir, défiler pour paginer. */
+export function NotificationPageListe() {
+  const theme = useTheme();
+  const traductions = useAppLocalizations();
+  const bloc = useBloc(NotificationBloc);
+  const state = useBlocBuilder(bloc);
+  const [refreshing, setRefreshing] = useState(false);
+
+  const command = state.command;
+  const notifications = state.notifications.data;
+  command.index = state.notifications.meta.next as number | string | null | undefined;
+
+  if (notifications.length === 0) {
+    return (
+      <View style={styles.list}>{state instanceof NotificationLoadingState ? <NotificationPageListeLoading /> : <NotificationPageListeEmpty />}</View>
+    );
+  }
+
+  const headerStyle = { ...theme.textTheme.displayLarge, color: Themer.neural03Color };
+  return (
+    <FlatList
+      style={styles.list}
+      data={groupNotifications(notifications)}
+      keyExtractor={(group) => group.jour}
+      refreshControl={
+        <RefreshControl
+          refreshing={refreshing}
+          colors={['white']}
+          progressBackgroundColor={theme.colorScheme.primary}
+          onRefresh={() => {
+            setRefreshing(true);
+            bloc.add(new NotificationListEvent(command));
+            setTimeout(() => setRefreshing(false), 500);
+          }}
+        />
+      }
+      onEndReached={() => {
+        if (command.canLoadMore()) bloc.add(new NotificationSearchPaginateEvent(command.index));
+      }}
+      onEndReachedThreshold={0.2}
+      renderItem={({ item }) => (
+        <View>
+          {/* Jour */}
+          <Text style={headerStyle}>{new DateFormat('d MMMM', traductions.localeName).format(new Date(`${item.jour}T00:00:00`))}</Text>
+          <View style={styles.gap8} />
+          {/* Notifications du jour */}
+          <Card>
+            <View style={styles.padding}>
+              {item.notifications.map((notification) => (
+                <NotificationPageListeItem key={notification.id} notification={notification} />
+              ))}
+            </View>
+          </Card>
+          <View style={styles.gap16} />
+        </View>
+      )}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  list: { flex: 1, marginLeft: 10 },
+  padding: { paddingHorizontal: 16 },
+  gap8: { height: 8 },
+  gap16: { height: 16 },
+});

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

@@ -0,0 +1,35 @@
+import { Image } from 'expo-image';
+import { StyleSheet, Text, useWindowDimensions, View } from 'react-native';
+
+import { Images } from '../../../../core/assets';
+import { useTheme } from '../../../../core/theme';
+import { useAppLocalizations } from '../../../../l10n/localizations';
+
+/** Aucune notification */
+export function NotificationPageListeEmpty() {
+  const theme = useTheme();
+  const traductions = useAppLocalizations();
+  const { width } = useWindowDimensions();
+  return (
+    <View style={styles.center}>
+      {/* Image illustration */}
+      <Image source={Images.notificationCloche} style={styles.image} contentFit="contain" />
+      <View style={styles.gap30} />
+      {/* Titre */}
+      <Text style={theme.textTheme.headlineMedium}>{traductions.notificationPageListeEmptyTitle}</Text>
+      <View style={styles.gap16} />
+      {/* Sous titre */}
+      <Text style={[theme.textTheme.displaySmall, styles.subtitle, { width: (width / 12) * 8 }]}>
+        {traductions.notificationPageListeEmptySubTitle}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  center: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  image: { width: 140, height: 140 },
+  gap30: { height: 30 },
+  gap16: { height: 16 },
+  subtitle: { textAlign: 'center' },
+});