@pi-spi/app 0.0.0-stage → 1.2.1

package/src/modules/profile/domain/profile_avatar.ts

@@ -0,0 +1,68 @@
+import { Directory, File, Paths } from 'expo-file-system';
+
+import { Di } from '../../../core/di';
+import { Logger } from '../../../core/logger';
+import { ValueNotifier } from '../../../core/value_notifier';
+
+const PREF_KEY = 'PROFILE_AVATAR';
+/** Valeur enregistrée quand le client a supprimé la photo fournie par l'app hôte. */
+const NONE = 'NONE';
+const logger = new Logger();
+
+/**
+ * Photo de profil du client : celle choisie dans le SDK (copiée dans les
+ * documents de l'app), sinon celle fournie par l'hôte (`user.avatar`).
+ *
+ * Le SDK Flutter ouvre le choix d'une photo mais ne l'enregistre pas
+ * (`TODO mettre à jour la photo de profil`) : complété ici.
+ */
+export class ProfileAvatar {
+  private static notifier?: ValueNotifier<string | null>;
+  /** Configuration pour laquelle [notifier] a été créé (une par ouverture du SDK). */
+  private static config?: unknown;
+
+  /** Photo affichée (URI), observable. */
+  static get value(): ValueNotifier<string | null> {
+    if (ProfileAvatar.notifier == null || ProfileAvatar.config !== Di.config) {
+      ProfileAvatar.config = Di.config;
+      const saved = Di.sharedPreferences.getString(PREF_KEY);
+      ProfileAvatar.notifier = new ValueNotifier<string | null>(
+        saved === NONE ? null : (saved ?? Di.config.user.avatar ?? null),
+      );
+    }
+    return ProfileAvatar.notifier;
+  }
+
+  /** Enregistre l'image [uri] comme photo de profil. */
+  static async set(uri: string): Promise<void> {
+    try {
+      const dir = new Directory(Paths.document, 'pispi_profile');
+      if (!dir.exists) dir.create();
+      ProfileAvatar.deleteSavedFile();
+      const file = new File(dir, `avatar_${Date.now()}.jpg`);
+      await new File(uri).copy(file);
+      await Di.sharedPreferences.setString(PREF_KEY, file.uri);
+      ProfileAvatar.value.value = file.uri;
+    } catch (e) {
+      logger.e('Cannot save profile avatar', { error: e });
+    }
+  }
+
+  /** Supprime la photo de profil. */
+  static async remove(): Promise<void> {
+    ProfileAvatar.deleteSavedFile();
+    await Di.sharedPreferences.setString(PREF_KEY, NONE);
+    ProfileAvatar.value.value = null;
+  }
+
+  private static deleteSavedFile(): void {
+    const saved = Di.sharedPreferences.getString(PREF_KEY);
+    if (saved == null || saved === NONE) return;
+    try {
+      const file = new File(saved);
+      if (file.exists) file.delete();
+    } catch {
+      // Fichier déjà supprimé
+    }
+  }
+}

package/src/modules/profile/presentation/bloc/hide_amount/hide_amount_bloc.ts

@@ -0,0 +1,28 @@
+import { Bloc } from '../../../../../core/bloc';
+import { Logger } from '../../../../../core/logger';
+import type { ConfigBloc } from '../../../../config/adapters/ui/bloc/config_bloc';
+import { ConfigChangeEvent } from '../../../../config/adapters/ui/bloc/config_event';
+import { ConfigKey } from '../../../../config/domain/models/config_keys';
+import {
+  ParametreHideAmountInitEvent,
+  ParametreHideAmountStartEvent,
+  ParametreHideAmountStopEvent,
+  type ParametreHideAmountEvent,
+} from './hide_amount_event';
+import { ParametreHideAmountState } from './hide_amount_state';
+
+/**
+ * Cache/affiche le montant du solde. La détection "flip du téléphone"
+ * (accéléromètre) de l'app de référence n'est pas embarquée dans le SDK :
+ * seul le basculement manuel (bouton oeil) est disponible ici.
+ */
+export class ParametreHideAmountBloc extends Bloc<ParametreHideAmountEvent, ParametreHideAmountState> {
+  readonly logger = new Logger();
+
+  constructor(readonly configBloc: ConfigBloc) {
+    super(new ParametreHideAmountState());
+    this.on(ParametreHideAmountInitEvent, () => undefined);
+    this.on(ParametreHideAmountStartEvent, () => this.configBloc.add(new ConfigChangeEvent(ConfigKey.hideEye, '1')));
+    this.on(ParametreHideAmountStopEvent, () => this.configBloc.add(new ConfigChangeEvent(ConfigKey.hideEye, '0')));
+  }
+}

package/src/modules/profile/presentation/bloc/hide_amount/hide_amount_event.ts

@@ -0,0 +1,10 @@
+export class ParametreHideAmountEvent {}
+
+/** Init listener */
+export class ParametreHideAmountInitEvent extends ParametreHideAmountEvent {}
+
+/** Start listen */
+export class ParametreHideAmountStartEvent extends ParametreHideAmountEvent {}
+
+/** Stop listen */
+export class ParametreHideAmountStopEvent extends ParametreHideAmountEvent {}

package/src/modules/profile/presentation/bloc/hide_amount/hide_amount_state.ts

@@ -0,0 +1,2 @@
+/** Flip device down to hide/show amount */
+export class ParametreHideAmountState {}

package/src/modules/profile/presentation/pages/compte/profile_compte_page.tsx

@@ -0,0 +1,27 @@
+import { ScrollView, StyleSheet } from 'react-native';
+
+import { AppRouter, useAppRouter } from '../../../../../core/router';
+import { AppBar, Scaffold } from '../../../../../shared/material/scaffold';
+import { MyPageContainer } from '../../../../../shared/widgets/my_page_container';
+import { AliasDeleteBtnWidget } from '../../../../alias/presentation/pages/alias_delete_btn_widget';
+import { CompteDetailsWidget } from '../../../../compte/presentation/pages/compte_details_widget';
+
+/** Compte du client et suppression de l'alias (route `profileCompte`). */
+export function ProfileComptePage() {
+  const router = useAppRouter();
+  return (
+    <Scaffold appBar={<AppBar onBack={() => AppRouter.pop(router)} />}>
+      <MyPageContainer>
+        <ScrollView style={styles.flex}>
+          <CompteDetailsWidget />
+        </ScrollView>
+      </MyPageContainer>
+      {/* Bouton supprimer l'alias */}
+      <AliasDeleteBtnWidget />
+    </Scaffold>
+  );
+}
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+});

package/src/modules/profile/presentation/pages/parametre/profile_parametre_page.tsx

@@ -0,0 +1,102 @@
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+
+import { Images } from '../../../../../core/assets';
+import { useBloc, useBlocBuilder } from '../../../../../core/bloc_react';
+import { Di } from '../../../../../core/di';
+import { AppRouter, useAppRouter } from '../../../../../core/router';
+import { SoundManager } from '../../../../../core/sounds';
+import { Themes, useTheme } from '../../../../../core/theme';
+import type { AppLocalizations } from '../../../../../l10n/app_localizations';
+import { useAppLocalizations } from '../../../../../l10n/localizations';
+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 { ConfigLoadedState } from '../../../../config/adapters/ui/bloc/config_state';
+import { ConfigKey } from '../../../../config/domain/models/config_keys';
+import type { ConfigParams } from '../../../../config/domain/models/config_params';
+import { ProfilePageMenu, ProfileItem } from '../profile_menu';
+import { ProfileParametrePageQRcode } from './profile_parametre_page_qrcode';
+
+function menuItems(traductions: AppLocalizations, configParams: ConfigParams): ProfileItem[] {
+  const params = configParams.params;
+  // QR code
+  const showQRcode = params[ConfigKey.showQRcode] !== '0';
+  // Thème
+  const theme = Themes.fromCode(params[ConfigKey.preferedTheme]);
+  // Notifications dans l'application
+  const notifParam = params[ConfigKey.notificationStatus];
+  const notifEnabled = notifParam == null || notifParam === 'enabled';
+  const notifStatus = notifEnabled ? traductions.statutActive : traductions.statutDesactive;
+  // Son
+  const sonParam = params[ConfigKey.notificationAlertSound];
+  // (Le SDK Flutter plante si le son enregistré n'existe plus : son par défaut ici.)
+  let sonStatus = traductions.appSettingPageMenuNotificationSonDefault;
+  if (sonParam != null && sonParam !== 'NONE') {
+    try {
+      sonStatus = SoundManager.nameFromPath(sonParam);
+    } catch {
+      // Son inconnu
+    }
+  }
+
+  const items: ProfileItem[] = [];
+  // Thème : masqué si l'hôte n'autorise pas le client à en changer
+  if (Di.config.appConfig.canChangeTheme) {
+    items.push(
+      new ProfileItem(Images.iconsTheme, traductions.appSettingPageMenuThemeTitle, AppRouter.profileParametreTheme, {
+        subtitle: Themes.label(theme, traductions),
+      }),
+    );
+  }
+  items.push(
+    // Notifications dans l'application
+    new ProfileItem(Images.iconsCloche, traductions.appSettingPageMenuNotificationTitle, AppRouter.profileParametreNotifications, {
+      subtitle: notifEnabled ? `${notifStatus} - ${sonStatus}` : notifStatus,
+    }),
+    // Mon QR code par défaut
+    new ProfileItem(Images.homeFooterQrcode, traductions.appSettingPageMenuQrCodeTitle, null, {
+      subtitle: showQRcode ? traductions.statutActive : traductions.statutDesactive,
+      sheet: () => <ProfileParametrePageQRcode />,
+    }),
+  );
+  return items;
+}
+
+/** Paramètres de l'application (route `profileParametre`). */
+export function ProfileParametrePage() {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const router = useAppRouter();
+  const configBloc = useBloc(ConfigBloc);
+  const state = useBlocBuilder(
+    configBloc,
+    (_p, current) =>
+      current instanceof ConfigLoadedState &&
+      current.updatedKey != null &&
+      [ConfigKey.showQRcode, ConfigKey.preferedTheme, ConfigKey.notificationStatus, ConfigKey.notificationAlertSound].includes(
+        current.updatedKey,
+      ),
+  );
+
+  return (
+    <Scaffold appBar={<AppBar onBack={() => AppRouter.pop(router)} />}>
+      {!(state instanceof ConfigLoadedState) ? (
+        <LoadingPage />
+      ) : (
+        <MyPageContainer>
+          <ScrollView>
+            <Text style={[theme.textTheme.titleSmall, styles.title]}>{traductions.appSettingPageTitle}</Text>
+            <View style={styles.gap24} />
+            <ProfilePageMenu items={menuItems(traductions, state.configParams)} />
+          </ScrollView>
+        </MyPageContainer>
+      )}
+    </Scaffold>
+  );
+}
+
+const styles = StyleSheet.create({
+  title: { fontSize: 26 },
+  gap24: { height: 24 },
+});

package/src/modules/profile/presentation/pages/parametre/profile_parametre_page_notifications.tsx

@@ -0,0 +1,159 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { Image } from 'expo-image';
+import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { Images } from '../../../../../core/assets';
+import { useBloc, useBlocBuilder } from '../../../../../core/bloc_react';
+import { NotificationExternalEvent } from '../../../../../core/notifications';
+import { AppRouter, useAppRouter } from '../../../../../core/router';
+import { Themer, useTheme } from '../../../../../core/theme';
+import { useAppLocalizations } from '../../../../../l10n/localizations';
+import { Card } from '../../../../../shared/material/card';
+import { MenuActionItem, MenuActionsWiget } from '../../../../../shared/widgets/menu_actions_widget';
+import { ConfigBloc } from '../../../../config/adapters/ui/bloc/config_bloc';
+import { ConfigChangeEvent } from '../../../../config/adapters/ui/bloc/config_event';
+import { ConfigLoadedState } from '../../../../config/adapters/ui/bloc/config_state';
+import { ConfigKey } from '../../../../config/domain/models/config_keys';
+import { SettingToggle } from './settings_widgets';
+
+const NOTIFICATION_KEYS = [
+  ConfigKey.notificationStatus,
+  ConfigKey.notificationStyle,
+  ConfigKey.notificationAlertVibration,
+  ConfigKey.notificationAlertSound,
+  ConfigKey.notificationAlertTransfer,
+];
+
+/** Réglages des notifications : activation, style, son et vibration (route `profileParametreNotifications`). */
+export function ProfileParametrePageNotifications() {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const router = useAppRouter();
+  const insets = useSafeAreaInsets();
+  const configBloc = useBloc(ConfigBloc);
+  const state = useBlocBuilder(
+    configBloc,
+    (_p, current) => current instanceof ConfigLoadedState && current.updatedKey != null && NOTIFICATION_KEYS.includes(current.updatedKey),
+  );
+  const params = state.configParams.params;
+  const statusValue = params[ConfigKey.notificationStatus];
+  const enabled = statusValue == null || statusValue === 'enabled';
+  const currentStyle = params[ConfigKey.notificationStyle];
+  const currentSound = params[ConfigKey.notificationAlertSound];
+  const sonEnabled = currentSound == null || currentSound !== 'NONE';
+  const vibrationEnabled = params[ConfigKey.notificationAlertVibration] === 'enabled';
+
+  const styles_ = [
+    { style: null, icon: Images.imageNotifStyleNone, title: traductions.appSettingPageMenuNotificationStyleNone },
+    {
+      style: NotificationExternalEvent.notificationStyleSnackBar,
+      icon: Images.imageNotifStyleSnackbar,
+      title: traductions.appSettingPageMenuNotificationStyleSnackBar,
+    },
+    {
+      style: NotificationExternalEvent.notificationStyleDialog,
+      icon: Images.imageNotifStyleDialog,
+      title: traductions.appSettingPageMenuNotificationStyleDialog,
+    },
+  ];
+
+  return (
+    <View style={[styles.flex, { paddingBottom: insets.bottom }]}>
+      <View style={styles.backRow}>
+        <Pressable accessibilityRole="button" hitSlop={12} style={styles.back} onPress={() => AppRouter.pop(router)}>
+          <MaterialIcons name="arrow-back" size={24} color={theme.colorScheme.onSurface} />
+        </Pressable>
+      </View>
+      <ScrollView style={styles.flex} contentContainerStyle={styles.content}>
+        <Text style={theme.textTheme.headlineMedium}>{traductions.appSettingPageMenuNotificationTitle}</Text>
+        <View style={styles.gap20} />
+        {/* Activer les notifications */}
+        <SettingToggle
+          icon={Images.iconsCloche}
+          title={traductions.notificationPageTitle}
+          value={enabled}
+          onChange={() => configBloc.add(new ConfigChangeEvent(ConfigKey.notificationStatus, enabled ? 'disabled' : 'enabled'))}
+        />
+        {/* Style de notification */}
+        <View style={styles.gap10} />
+        <Text style={theme.textTheme.headlineMedium}>{traductions.appSettingPageMenuNotificationStyleTitle}</Text>
+        <View style={styles.gap10} />
+        <Card>
+          <View style={styles.wrap}>
+            {styles_.map((item) => {
+              const active = (!enabled && item.style == null) || currentStyle === item.style;
+              return (
+                <Pressable
+                  key={item.title}
+                  accessibilityRole="button"
+                  disabled={!(enabled && item.style != null && currentStyle !== item.style)}
+                  onPress={() => configBloc.add(new ConfigChangeEvent(ConfigKey.notificationStyle, item.style!))}
+                  style={styles.styleItem}
+                >
+                  <Image
+                    source={item.icon}
+                    style={[styles.stylePreview, { backgroundColor: theme.colorScheme.surface }]}
+                    contentFit="cover"
+                    tintColor={active ? 'black' : undefined}
+                  />
+                  <View style={styles.gap10} />
+                  <View style={[styles.badge, { backgroundColor: active ? theme.colorScheme.onSurface : theme.colorScheme.secondary }]}>
+                    <Text style={[theme.textTheme.displayMedium, { color: active ? theme.colorScheme.surface : theme.colorScheme.onSecondary }]}>
+                      {item.title}
+                    </Text>
+                  </View>
+                </Pressable>
+              );
+            })}
+          </View>
+        </Card>
+        <View style={styles.gap10} />
+        <Text style={[theme.textTheme.displayLarge, { color: Themer.neural04Color }]}>
+          {traductions.appSettingPageMenuNotificationStyleDialogDesc}
+        </Text>
+        {/* Son */}
+        <View style={styles.gap20} />
+        <Text style={theme.textTheme.headlineMedium}>{traductions.appSettingPageMenuNotificationSonTitle}</Text>
+        <View style={styles.gap10} />
+        <MenuActionsWiget
+          items={[
+            new MenuActionItem(
+              Images.iconsCloche,
+              traductions.notificationPageTitle,
+              sonEnabled ? traductions.statutActive : traductions.statutDesactive,
+              () => void AppRouter.push(router, AppRouter.profileParametreNotificationsSon),
+              { iconSize: 20 },
+            ),
+          ]}
+        />
+        {/* Vibration */}
+        <View style={styles.gap20} />
+        <Text style={theme.textTheme.headlineMedium}>{traductions.appSettingPageMenuNotificationVibrTitle}</Text>
+        <View style={styles.gap10} />
+        <SettingToggle
+          icon={Images.iconsCloche}
+          title={traductions.appSettingPageMenuNotificationVibrTitle}
+          subtitle={traductions.appSettingPageMenuNotificationVibrSubtitle}
+          value={vibrationEnabled}
+          onChange={() =>
+            configBloc.add(new ConfigChangeEvent(ConfigKey.notificationAlertVibration, vibrationEnabled ? 'disabled' : 'enabled'))
+          }
+        />
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+  backRow: { flexDirection: 'row' },
+  back: { padding: 12 },
+  content: { paddingTop: 12, paddingHorizontal: 12, paddingBottom: 20 },
+  wrap: { padding: 20, flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between', rowGap: 10, columnGap: 10 },
+  styleItem: { alignItems: 'center' },
+  stylePreview: { width: 60, height: 120, borderRadius: 8 },
+  badge: { borderRadius: 10, paddingHorizontal: 10, paddingVertical: 5 },
+  gap10: { height: 10 },
+  gap20: { height: 20 },
+});

package/src/modules/profile/presentation/pages/parametre/profile_parametre_page_notifications_son.tsx

@@ -0,0 +1,120 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { useState } from 'react';
+import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { Images } from '../../../../../core/assets';
+import { useBloc } from '../../../../../core/bloc_react';
+import { AppRouter, useAppRouter } from '../../../../../core/router';
+import { SoundManager } from '../../../../../core/sounds';
+import { useTheme } from '../../../../../core/theme';
+import { useAppLocalizations } from '../../../../../l10n/localizations';
+import { TextButton } from '../../../../../shared/material/buttons';
+import { Card } from '../../../../../shared/material/card';
+import { ConfigBloc } from '../../../../config/adapters/ui/bloc/config_bloc';
+import { ConfigChangeEvent } from '../../../../config/adapters/ui/bloc/config_event';
+import { ConfigKey } from '../../../../config/domain/models/config_keys';
+import { SettingToggle } from './settings_widgets';
+
+const NONE = 'NONE';
+
+/**
+ * Choix du son des notifications (route `profileParametreNotificationsSon`).
+ *
+ * Écarts avec le SDK Flutter (bugs corrigés) : l'interrupteur, qui affiche
+ * l'état du son, coupait ou rétablissait les notifications elles-mêmes ;
+ * il coupe ou rétablit désormais le son. Et « Aucun » était coché quand
+ * aucun son n'est enregistré, alors que c'est le son par défaut qui joue.
+ */
+export function ProfileParametrePageNotificationsSon() {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const router = useAppRouter();
+  const insets = useSafeAreaInsets();
+  const configBloc = useBloc(ConfigBloc);
+  const [selectedSound, setSelectedSound] = useState<string | null>(
+    () => configBloc.state.configParams.params[ConfigKey.notificationAlertSound] ?? null,
+  );
+  const enabled = selectedSound == null || selectedSound !== NONE;
+
+  const save = () => {
+    if (selectedSound != null) {
+      configBloc.add(new ConfigChangeEvent(ConfigKey.notificationAlertSound, selectedSound));
+      AppRouter.pop(router);
+    }
+  };
+
+  return (
+    <View style={[styles.flex, { paddingBottom: insets.bottom }]}>
+      <View style={styles.bar}>
+        <Pressable accessibilityRole="button" hitSlop={12} style={styles.back} onPress={() => AppRouter.pop(router)}>
+          <MaterialIcons name="arrow-back" size={24} color={theme.colorScheme.onSurface} />
+        </Pressable>
+        <View style={styles.save}>
+          <TextButton onPress={save}>{traductions.btnTextSave}</TextButton>
+        </View>
+      </View>
+      <ScrollView style={styles.flex} contentContainerStyle={styles.content}>
+        <Text style={theme.textTheme.headlineMedium}>{traductions.appSettingPageMenuNotificationSonPageTitle}</Text>
+        <View style={styles.gap20} />
+        {/* Son activé ou non */}
+        <SettingToggle
+          icon={Images.iconsCloche}
+          title={traductions.notificationPageTitle}
+          value={enabled}
+          onChange={(value) => setSelectedSound(value ? (SoundManager.liste[0]?.path ?? null) : NONE)}
+        />
+        {/* Sons disponibles */}
+        <View style={styles.gap20} />
+        <Text style={theme.textTheme.headlineMedium}>{traductions.appSettingPageMenuNotificationSonTitle}</Text>
+        <View style={styles.gap10} />
+        <Card>
+          {/* Aucun */}
+          <SoundRow
+            label={traductions.appSettingPageMenuNotificationStyleNone}
+            checked={selectedSound === NONE}
+            onPress={() => setSelectedSound(NONE)}
+          />
+          {SoundManager.liste.map((sound) => (
+            <SoundRow
+              key={sound.path}
+              label={sound.name}
+              checked={selectedSound === sound.path}
+              onPress={() => {
+                void SoundManager.playSound(sound.path);
+                setSelectedSound(sound.path);
+              }}
+            />
+          ))}
+        </Card>
+        <View style={styles.gap20} />
+      </ScrollView>
+    </View>
+  );
+}
+
+function SoundRow({ label, checked, onPress }: { label: string; checked: boolean; onPress: () => void }) {
+  const theme = useTheme();
+  return (
+    <Pressable
+      accessibilityRole="radio"
+      accessibilityState={{ checked }}
+      onPress={onPress}
+      style={({ pressed }) => [styles.row, pressed ? { backgroundColor: theme.colorScheme.secondary } : null]}
+    >
+      <Text style={[theme.textTheme.bodyLarge, styles.flex]}>{label}</Text>
+      {checked && <MaterialIcons name="check" size={18} color={theme.colorScheme.onSurface} />}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+  bar: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
+  back: { padding: 12 },
+  save: { paddingRight: 12 },
+  content: { paddingTop: 12, paddingHorizontal: 12 },
+  row: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, minHeight: 52 },
+  gap10: { height: 10 },
+  gap20: { height: 20 },
+});

package/src/modules/profile/presentation/pages/parametre/profile_parametre_page_qrcode.tsx

@@ -0,0 +1,52 @@
+import { ScrollView, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { Images } from '../../../../../core/assets';
+import { useBloc, useBlocBuilder } from '../../../../../core/bloc_react';
+import { useTheme } from '../../../../../core/theme';
+import { useAppLocalizations } from '../../../../../l10n/localizations';
+import { ConfigBloc } from '../../../../config/adapters/ui/bloc/config_bloc';
+import { ConfigChangeEvent } from '../../../../config/adapters/ui/bloc/config_event';
+import { ConfigLoadedState } from '../../../../config/adapters/ui/bloc/config_state';
+import { ConfigKey } from '../../../../config/domain/models/config_keys';
+import { SettingToggle } from './settings_widgets';
+
+/** Feuille « Mon QR code » : afficher ou non le QR code de l'alias sur l'accueil. */
+export function ProfileParametrePageQRcode() {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const { height } = useWindowDimensions();
+  const configBloc = useBloc(ConfigBloc);
+  const state = useBlocBuilder(
+    configBloc,
+    (_p, current) => current instanceof ConfigLoadedState && current.updatedKey === ConfigKey.showQRcode,
+  );
+  const showQRcode = state.configParams.params[ConfigKey.showQRcode] !== '0';
+
+  return (
+    <View style={[styles.box, { backgroundColor: theme.colorScheme.surface, maxHeight: height * 0.5 }]}>
+      <ScrollView contentContainerStyle={[styles.content, { paddingBottom: 20 + insets.bottom }]}>
+        <Text style={theme.textTheme.headlineLarge}>{traductions.appSettingPageMenuQrCodeTitle}</Text>
+        <View style={styles.gap8} />
+        <Text style={theme.textTheme.displaySmall}>
+          {showQRcode ? traductions.appSettingPageMenuQrCodeDeselectTitle : traductions.appSettingPageMenuQrCodeSelectTitle}
+        </Text>
+        <View style={styles.gap15} />
+        <SettingToggle
+          icon={Images.homeFooterQrcode}
+          title={traductions.appSettingPageMenuQrCodeTitle}
+          value={showQRcode}
+          onChange={() => configBloc.add(new ConfigChangeEvent(ConfigKey.showQRcode, showQRcode ? '0' : '1'))}
+        />
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  box: { borderRadius: 20, overflow: 'hidden' },
+  content: { padding: 20 },
+  gap8: { height: 8 },
+  gap15: { height: 15 },
+});