@pi-spi/app 2.1.0 → 2.2.0

package/src/modules/alias/presentation/pages/alias_page_claim.tsx

@@ -1,5 +1,5 @@
 import { MaterialIcons } from '@expo/vector-icons';
-import { useEffect } from 'react';
+import { useEffect, type ReactNode } from 'react';
 import { Keyboard, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -11,9 +11,11 @@ import type { AppLocalizations } from '../../../../l10n/app_localizations';
 import { useAppLocalizations } from '../../../../l10n/localizations';
 import { ElevatedButton, FilledTonalButton } from '../../../../shared/material/buttons';
 import { Card } from '../../../../shared/material/card';
-import { showDialog, showModalBottomSheet } from '../../../../shared/material/overlays';
+import { showModalBottomSheet } from '../../../../shared/material/overlays';
+import { Divider } from '../../../../shared/material/divider';
+import { withAlpha } from '../../../../shared/utils/color';
 import { DateFormat } from '../../../../shared/utils/date_format';
-import { CustomAlertDialog } from '../../../../shared/widgets/custom_alert_dialog';
+import { showConfirmActionSheet } from '../../../../shared/widgets/confirm_action_sheet_widget';
 import { ErrorCardWidget } from '../../../../shared/widgets/error_card_widget';
 import { CustomLoadingDialog, LoadingPage } from '../../../../shared/widgets/loading_page';
 import type { Alias } from '../../domain/models/alias';
@@ -32,6 +34,7 @@ import {
   AliasClaimNotFoundState,
   AliasExistState,
 } from '../bloc/alias_state';
+import { PinEntete } from '../../../../shared/widgets/pin_entete';
 import { AliasMBNOCountdownTimer } from './alias_page_create_mbno_timer';
 import { AliasPageError } from './alias_page_error';
 import { AliasPageOtp } from './alias_page_otp';
@@ -114,10 +117,11 @@ export function AliasPageClaim({ id }: { id: string }) {
     const rejecting = aliasState instanceof AliasClaimHandlingSuccessState ? false : aliasState.rejecting;
     const error = aliasState instanceof AliasClaimHandlingErrorState ? aliasState.error : null;
     const goHome = () => AppRouter.pushReplacement(router, AppRouter.home);
+    // Fermeture, en haut à droite : retour à l'accueil
     const back = (
       <View style={styles.backRow}>
         <Pressable accessibilityRole="button" hitSlop={12} onPress={goHome} style={styles.backButton}>
-          <MaterialIcons name="arrow-back" size={24} color={theme.colorScheme.onSurface} />
+          <MaterialIcons name="close" size={24} color={theme.colorScheme.onSurface} />
         </Pressable>
       </View>
     );
@@ -129,8 +133,9 @@ export function AliasPageClaim({ id }: { id: string }) {
           <ScrollView style={styles.padded} keyboardShouldPersistTaps="handled">
             <AliasPageOtp
               pinLength={AliasMbnoOtpCommand.otpSize}
-              title={traductions.verifyPhoneNumberPageTitle}
-              subtitle={traductions.verifyPhoneNumberPageSubTitle(claim.alias)}
+              icone="verified-user"
+              title={traductions.aliasClaimRefusOtpTitle}
+              subtitle={traductions.aliasClaimRefusOtpSubTitle(claim.alias)}
               errorMessage={error === AliasError.invalidOtpCode ? traductions.aliaMBNOInvalidOtpMessage : null}
               countdownTimer={
                 aliasBloc.state instanceof AliasClaimHandlingState ? (
@@ -181,48 +186,46 @@ function ClaimDetails({
         : traductions.statutRejete;
 
   const confirm = () => {
-    void showDialog(router, {
-      builder: () => (
-        <CustomAlertDialog
-          title={traductions.aliasClaimAcceptDialogTitle}
-          description={traductions.aliasClaimAcceptDialogMessage(claim.alias)}
-          confirmBtnText={traductions.btnTextConfirm}
-          confirmBtnAction={() => {
-            AppRouter.pop(router);
-            aliasBloc.add(new AliasClaimRespondEvent(id, alias, claim, true, null));
-          }}
-          cancelBtnText={traductions.btnTextCancel}
-          cancelBtnAction={() => AppRouter.pop(router)}
-        />
-      ),
+    // Confirmation, comme la suppression d'un appareil
+    void showConfirmActionSheet(router, {
+      title: traductions.aliasClaimAcceptDialogTitle,
+      subtitle: traductions.aliasClaimAcceptDialogMessage(claim.alias),
+      confirmTitle: traductions.btnTextConfirm,
+      cancelTitle: traductions.btnTextCancel,
+    }).then((confirme) => {
+      if (confirme) aliasBloc.add(new AliasClaimRespondEvent(id, alias, claim, true, null));
     });
   };
 
   return (
     <View style={styles.flex}>
       {/* Détails de la revendication */}
-      <ScrollView style={styles.padded}>
-        {/* Header: titre et numéro de téléphone */}
-        <Text numberOfLines={1} style={theme.textTheme.titleSmall}>
-          {traductions.aliasClaimDetailsHeadTitle}
-        </Text>
-        <Text numberOfLines={1} style={[styles.subtitle, { color: theme.colorScheme.primary }]}>
-          {traductions.aliasClaimDetailsHeadSubTitle}
-        </Text>
-        <Text style={{ color: theme.colorScheme.onSurface }}>{claim.alias}</Text>
-        <View style={styles.gap20} />
+      <ScrollView style={styles.padded} contentContainerStyle={styles.contenu}>
+        {/* En-tête : pastille, titre et sous-titre centrés */}
+        <PinEntete
+          icone="gpp-maybe"
+          titre={traductions.aliasClaimDetailsHeadTitle}
+          sousTitre={traductions.aliasClaimDetailsHeadSubTitle}
+        />
+        <View style={styles.gap12} />
+        {/* Alias réclamé, en évidence */}
+        <View style={[styles.alias, { backgroundColor: withAlpha(theme.colorScheme.primary, 0.08) }]}>
+          <Text style={[theme.textTheme.displayLarge, styles.aliasTexte]}>{claim.alias}</Text>
+        </View>
+        <View style={styles.gap24} />
 
         {/* Détails : statut et dates */}
         <Card>
           <View style={styles.card}>
+            {/* Statut en badge coloré */}
+            <Detail title={traductions.statutLabel} valeur={<BadgeStatut statut={claim.statut} texte={statut} />} />
+            <Divider height={24} />
             <Detail
               title={traductions.aliasClaimDetailsDateDemande}
               subtitle={new DateFormat('d MMM, HH:mm', locale).format(claim.dateDemande)}
             />
-            <View style={styles.gap10} />
-            <Detail title={traductions.statutLabel} subtitle={statut} />
-            <View style={styles.gap10} />
             {/* Date acceptation ou rejet */}
+            {claim.dateAction != null && <Divider height={24} />}
             {claim.dateAction != null && (
               <Detail
                 title={
@@ -235,7 +238,7 @@ function ClaimDetails({
             )}
           </View>
         </Card>
-        <View style={styles.gap10} />
+        <View style={styles.gap12} />
 
         {/* Avertissement délai de traitement */}
         {initiee && (
@@ -267,32 +270,57 @@ function ClaimDetails({
   );
 }
 
-/** Affiche un détail de la revendication */
-function Detail({ title, subtitle }: { title: string; subtitle: string }) {
+/** Affiche un détail de la revendication : [subtitle] ou [valeur] */
+function Detail({ title, subtitle, valeur }: { title: string; subtitle?: string; valeur?: ReactNode }) {
   const theme = useTheme();
   return (
     <View style={styles.detail}>
-      <Text numberOfLines={1} style={theme.textTheme.bodyLarge}>
+      <Text numberOfLines={1} style={[theme.textTheme.bodyLarge, { color: Themer.neural03Color }]}>
         {title}
       </Text>
-      <Text numberOfLines={1} style={[theme.textTheme.bodyLarge, styles.detailValue, { color: Themer.neural03Color }]}>
-        {subtitle}
-      </Text>
+      <View style={styles.detailValue}>
+        {valeur ?? (
+          <Text numberOfLines={1} style={[theme.textTheme.bodyLarge, styles.detailTexte]}>
+            {subtitle}
+          </Text>
+        )}
+      </View>
+    </View>
+  );
+}
+
+/** Statut en badge coloré : en attente, acceptée ou rejetée */
+function BadgeStatut({ statut, texte }: { statut: AliasRevendicationStatut; texte: string }) {
+  const theme = useTheme();
+  const couleur =
+    statut === AliasRevendicationStatut.initiee
+      ? Themer.amberColor
+      : statut === AliasRevendicationStatut.acceptee
+        ? Themer.successColor
+        : theme.colorScheme.error;
+  return (
+    <View style={[styles.badge, { backgroundColor: withAlpha(couleur, 0.12) }]}>
+      <Text style={[theme.textTheme.displaySmall, styles.badgeTexte, { color: couleur }]}>{texte}</Text>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   flex: { flex: 1 },
-  backRow: { flexDirection: 'row' },
+  backRow: { flexDirection: 'row', justifyContent: 'flex-end' },
   backButton: { padding: 12 },
-  padded: { paddingHorizontal: 12 },
-  subtitle: { paddingBottom: 4 },
-  gap10: { height: 10 },
-  gap20: { height: 20 },
+  padded: { paddingHorizontal: 20 },
+  contenu: { paddingBottom: 16 },
+  alias: { alignSelf: 'center', paddingHorizontal: 16, paddingVertical: 8, borderRadius: 20 },
+  aliasTexte: { fontWeight: '700', letterSpacing: 0.5 },
+  gap12: { height: 12 },
+  gap24: { height: 24 },
   gap16w: { width: 16 },
-  card: { paddingVertical: 10, paddingHorizontal: 15 },
+  card: { paddingVertical: 14, paddingHorizontal: 16 },
   detail: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
-  detailValue: { flex: 1, textAlign: 'right' },
-  actions: { flexDirection: 'row', paddingVertical: 10, paddingHorizontal: 10 },
+  detailValue: { flex: 1, marginLeft: 12, alignItems: 'flex-end' },
+  detailTexte: { fontWeight: '600', textAlign: 'right' },
+  badge: { paddingHorizontal: 10, paddingVertical: 4, borderRadius: 12 },
+  badgeTexte: { fontWeight: '700' },
+  actions: { flexDirection: 'row', paddingTop: 8, paddingBottom: 16, paddingHorizontal: 20 },
 });

package/src/modules/alias/presentation/pages/alias_page_create_mbno_form.tsx

@@ -1,16 +1,20 @@
-import { Keyboard, Pressable, StyleSheet, Text, View } from 'react-native';
+import { MaterialIcons } from '@expo/vector-icons';
+import { Keyboard, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
 
 import { useBloc } from '../../../../core/bloc_react';
 import { Di } from '../../../../core/di';
-import { useTheme } from '../../../../core/theme';
+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 { DropdownButton } from '../../../../shared/material/dropdown';
+import { showModalBottomSheet } from '../../../../shared/material/overlays';
 import { AliasPI } from '../../../../shared/models/alias_pi';
 import { UEMOACountry } from '../../../../shared/models/uemoa_countries';
 import { CustomTextInput } from '../../../../shared/widgets/input_text';
 import { MyPageContainer } from '../../../../shared/widgets/my_page_container';
+import { SelectionLigne, SelectionSheet } from '../../../../shared/widgets/selection';
+import { PinEntete } from '../../../../shared/widgets/pin_entete';
 import {
   AliasCreateCommandPhoneNumber,
   AliasCreateCommandPhoneNumberError,
@@ -21,7 +25,7 @@ import type { AliasMBNOCreationState } from '../bloc/alias_state';
 
 export function AliasPageCreateMBNOForm({ aliasState }: { aliasState: AliasMBNOCreationState }) {
   const localisation = useAppLocalizations();
-  const theme = useTheme();
+  const router = useAppRouter();
   const aliasBloc = useBloc(AliasBloc);
   // Identité fournie par l'application hôte
   const user = Di.config.user;
@@ -38,67 +42,66 @@ export function AliasPageCreateMBNOForm({ aliasState }: { aliasState: AliasMBNOC
   const phoneText = aliasValue.phoneNumber?.phone != null ? AliasPI.formatPhoneNumber(aliasValue.phoneNumber.phone) : '';
   const phoneError = aliasValue.phoneNumber?.error;
 
+  const indicatif = aliasValue.phoneNumber?.indicatif;
+  const pays = UEMOACountry.liste.find((c) => c.phoneCode === indicatif);
+
+  // Envoi du code de vérification
+  const continuer = () => {
+    if (!aliasValue.isValid()) return;
+    Keyboard.dismiss();
+    aliasBloc.add(new AskPhoneNumberVerificationEvent(aliasValue));
+  };
+
+  // Feuille de choix de l'indicatif : drapeau, pays et indicatif
+  const choisirIndicatif = async () => {
+    Keyboard.dismiss();
+    const choisi = await showModalBottomSheet<UEMOACountry>(router, {
+      builder: () => <SelectIndicatif selected={pays} />,
+    });
+    if (choisi == null) return;
+    aliasValue.phoneNumber = new AliasCreateCommandPhoneNumber({
+      indicatif: choisi.phoneCode,
+      phone: aliasValue.phoneNumber?.phone,
+    });
+    aliasBloc.add(new CreateAliasMBNOValidationEvent(aliasValue));
+  };
+
   return (
     <MyPageContainer>
       <Pressable style={styles.column} onPress={Keyboard.dismiss} accessible={false}>
-        <View>
-          {/* Titre de la page */}
-          <Text style={theme.textTheme.titleSmall}>{localisation.addPhoneNumberPageTitle}</Text>
-          <View style={styles.gap8} />
-          {/* Sous titre de la page */}
-          <Text style={theme.textTheme.displaySmall}>{localisation.addPhoneNumberPageSubTitle}</Text>
+        <ScrollView contentContainerStyle={styles.contenu} keyboardShouldPersistTaps="handled">
+          {/* En-tête : pastille, titre et sous-titre centrés */}
+          <PinEntete
+            icone="phone-iphone"
+            titre={localisation.addPhoneNumberPageTitle}
+            sousTitre={localisation.addPhoneNumberPageSubTitle}
+          />
           <View style={styles.gap32} />
 
-          {/* Select indicatif - Champ numéro de téléphone */}
-          <View style={styles.row}>
-            {/* - champ indicatif */}
-            <View style={[styles.indicatif, { backgroundColor: theme.cardTheme.color }]}>
-              <DropdownButton
-                value={aliasValue.phoneNumber?.indicatif}
-                items={UEMOACountry.liste.map((c) => ({ value: c.phoneCode, label: `${c.flag} ${c.phoneCode}` }))}
-                onChanged={(value) => {
-                  aliasValue.phoneNumber = new AliasCreateCommandPhoneNumber({
-                    indicatif: value,
-                    phone: aliasValue.phoneNumber?.phone,
-                  });
-                  aliasBloc.add(new CreateAliasMBNOValidationEvent(aliasValue));
-                }}
-              />
-            </View>
-            <View style={styles.gap8w} />
-            {/* - champ numéro de téléphone */}
-            <View style={styles.expanded}>
-              <CustomTextInput
-                value={phoneText}
-                hintText={localisation.addPhoneNumberFormHint}
-                keyboardType="phone-pad"
-                // Message d'erreur à afficher
-                messageError={phoneError != null ? getPhoneNumberErrorMessage(phoneError, localisation) : null}
-                // Quand le texte change
-                onChange={(value) => {
-                  aliasValue.phoneNumber = new AliasCreateCommandPhoneNumber({
-                    indicatif: aliasValue.phoneNumber?.indicatif,
-                    phone: value.replace(/ /g, ''),
-                  });
-                  aliasBloc.add(new CreateAliasMBNOValidationEvent(aliasValue));
-                }}
-              />
-            </View>
-          </View>
-        </View>
-        {/* Bouton continuer */}
+          {/* Champ numéro de téléphone, avec l'indicatif au début */}
+          <CustomTextInput
+            value={phoneText}
+            hintText={localisation.addPhoneNumberFormHint}
+            keyboardType="phone-pad"
+            textInputAction="done"
+            onEditingComplete={continuer}
+            prefixIcon={<Indicatif pays={pays} onPress={choisirIndicatif} />}
+            // Message d'erreur à afficher
+            messageError={phoneError != null ? getPhoneNumberErrorMessage(phoneError, localisation) : null}
+            // Quand le texte change
+            onChange={(value) => {
+              aliasValue.phoneNumber = new AliasCreateCommandPhoneNumber({
+                indicatif: aliasValue.phoneNumber?.indicatif,
+                phone: value.replace(/ /g, ''),
+              });
+              aliasBloc.add(new CreateAliasMBNOValidationEvent(aliasValue));
+            }}
+          />
+        </ScrollView>
+        {/* Bouton continuer, fixé en bas */}
         <View style={styles.bottom}>
-          <ElevatedButton
-            onPress={
-              aliasValue.isValid()
-                ? () => {
-                    Keyboard.dismiss();
-                    aliasBloc.add(new AskPhoneNumberVerificationEvent(aliasValue));
-                  }
-                : undefined
-            }
-          >
-            {localisation.loginFormBtnConnexion}
+          <ElevatedButton onPress={aliasValue.isValid() ? continuer : undefined}>
+            {localisation.addPhoneNumberFormBtnContinuer}
           </ElevatedButton>
         </View>
       </Pressable>
@@ -106,6 +109,48 @@ export function AliasPageCreateMBNOForm({ aliasState }: { aliasState: AliasMBNOC
   );
 }
 
+/** Indicatif choisi (drapeau et code) au début du champ, séparé du numéro par un trait */
+function Indicatif({ pays, onPress }: { pays?: UEMOACountry; onPress: () => void }) {
+  const theme = useTheme();
+  return (
+    <Pressable accessibilityRole="button" onPress={onPress} style={styles.indicatif}>
+      <Text style={styles.drapeau}>{pays?.flag ?? ''}</Text>
+      <Text style={[theme.textTheme.bodyLarge, styles.code]}>{pays?.phoneCode ?? ''}</Text>
+      <MaterialIcons name="keyboard-arrow-down" size={22} color={theme.colorScheme.primary} />
+      <View style={[styles.trait, { backgroundColor: Themer.neural01Color }]} />
+    </Pressable>
+  );
+}
+
+/** Feuille de choix de l'indicatif ; renvoie le pays choisi */
+function SelectIndicatif({ selected }: { selected?: UEMOACountry }) {
+  const localisation = useAppLocalizations();
+  const router = useAppRouter();
+  return (
+    <SelectionSheet
+      titre={localisation.addPhoneNumberIndicatifSheetTitle}
+      contenu={
+        <ScrollView contentContainerStyle={styles.liste}>
+          {UEMOACountry.liste.map((p) => (
+            <SelectionLigne
+              key={p.iso}
+              pastille={
+                <View style={styles.pastilleDrapeau}>
+                  <Text style={styles.drapeauListe}>{p.flag}</Text>
+                </View>
+              }
+              texte={p.name}
+              detail={p.phoneCode}
+              choisie={p.phoneCode === selected?.phoneCode}
+              onPress={() => AppRouter.pop(router, { value: p })}
+            />
+          ))}
+        </ScrollView>
+      }
+    />
+  );
+}
+
 function getPhoneNumberErrorMessage(
   error: AliasCreateCommandPhoneNumberError,
   traductions: AppLocalizations,
@@ -117,11 +162,14 @@ function getPhoneNumberErrorMessage(
 
 const styles = StyleSheet.create({
   column: { flex: 1, justifyContent: 'space-between' },
-  gap8: { height: 8 },
-  gap8w: { width: 8 },
   gap32: { height: 32 },
-  row: { flexDirection: 'row', alignItems: 'flex-start' },
-  indicatif: { paddingHorizontal: 10, borderRadius: 14, minHeight: 50, justifyContent: 'center' },
-  expanded: { flex: 1 },
-  bottom: { marginBottom: 10 },
+  contenu: { paddingTop: 8, paddingBottom: 16 },
+  indicatif: { flexDirection: 'row', alignItems: 'center', alignSelf: 'stretch', paddingRight: 8 },
+  drapeau: { fontSize: 20 },
+  code: { marginLeft: 6 },
+  trait: { width: 1, height: 24, marginLeft: 4 },
+  liste: { paddingHorizontal: 12, paddingBottom: 16 },
+  pastilleDrapeau: { width: 48, alignItems: 'center' },
+  drapeauListe: { fontSize: 26 },
+  bottom: { paddingTop: 8, paddingBottom: 16 },
 });

package/src/modules/alias/presentation/pages/alias_page_create_mbno_timer.tsx

@@ -1,12 +1,12 @@
 import { MaterialIcons } from '@expo/vector-icons';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { Pressable, StyleSheet, Text } from 'react-native';
 
-import { useTheme } from '../../../../core/theme';
+import { Themer, useTheme } from '../../../../core/theme';
 import { useAppLocalizations } from '../../../../l10n/localizations';
-import { TextButton } from '../../../../shared/material/buttons';
+import { withAlpha } from '../../../../shared/utils/color';
 
-/** Compte à rebours d'une minute avant de pouvoir renvoyer le code OTP. */
+/** « Renvoyer le code » en pastille : désactivé pendant une minute après chaque envoi, avec le temps restant. */
 export function AliasMBNOCountdownTimer({ onResendOtp }: { onResendOtp: () => void }) {
   const localisation = useAppLocalizations();
   const theme = useTheme();
@@ -35,36 +35,45 @@ export function AliasMBNOCountdownTimer({ onResendOtp }: { onResendOtp: () => vo
     };
   }, [startTimer]);
 
-  const done = remaining === 0;
+  const attente = remaining > 0;
   // Temps restant
   const minutes = Math.floor(remaining / 60);
   const seconds = remaining % 60;
   const timing = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
-  const color = theme.textButtonTheme.foregroundColor;
+  const primaire = theme.colorScheme.primary;
+  const couleur = attente ? Themer.neural03Color : primaire;
 
+  // Pastille : fond teinté quand le renvoi est possible
   return (
-    <TextButton
-      onPress={
-        done
-          ? () => {
-              startTimer();
-              // renvoyer code OTP
-              onResendOtp();
-            }
-          : undefined
-      }
+    <Pressable
+      accessibilityRole="button"
+      disabled={attente}
+      onPress={() => {
+        startTimer();
+        // renvoyer code OTP
+        onResendOtp();
+      }}
+      style={({ pressed }) => [
+        styles.pastille,
+        { backgroundColor: attente ? 'transparent' : withAlpha(primaire, pressed ? 0.16 : 0.08) },
+      ]}
     >
-      <View style={styles.row}>
-        <Text style={[theme.textButtonTheme.textStyle, done ? null : styles.disabled]}>
-          {done ? `${localisation.aliaMBNOResendMessageBtn} ` : `${localisation.aliaMBNOResendMessage(timing)} `}
-        </Text>
-        {done && <MaterialIcons name="refresh" size={20} color={color} />}
-      </View>
-    </TextButton>
+      <MaterialIcons name={attente ? 'schedule' : 'refresh'} size={18} color={couleur} />
+      <Text style={[theme.textTheme.displayMedium, styles.texte, { color: couleur }]}>
+        {attente ? localisation.aliaMBNOResendMessage(timing) : localisation.aliaMBNOResendMessageBtn}
+      </Text>
+    </Pressable>
   );
 }
 
 const styles = StyleSheet.create({
-  row: { flexDirection: 'row', alignItems: 'center' },
-  disabled: { opacity: 0.38 },
+  pastille: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 999,
+  },
+  texte: { marginLeft: 8, fontWeight: '600' },
 });

package/src/modules/alias/presentation/pages/alias_page_create_options.tsx

@@ -1,55 +1,48 @@
-import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import { ScrollView, StyleSheet, View } from 'react-native';
 
 import { Images } from '../../../../core/assets';
 import { useBloc } from '../../../../core/bloc_react';
-import { useTheme } from '../../../../core/theme';
 import { useAppLocalizations } from '../../../../l10n/localizations';
-import { MenuActionItem, MenuActionsWidget } from '../../../../shared/widgets/menu_actions_widget';
 import { MyPageContainer } from '../../../../shared/widgets/my_page_container';
+import { SelectionOption } from '../../../../shared/widgets/selection';
+import { PinEntete } from '../../../../shared/widgets/pin_entete';
 import { AliasBloc } from '../bloc/alias_bloc';
 import { CreateAliasMBNOEvent, CreateAliasSHIDEvent } from '../bloc/alias_event';
 
-/** Choix du type d'alias à créer (SHID ou numéro de téléphone) pour [compte]. */
+/**
+ * Choix du type d'alias à créer pour [compte] : adresse de paiement (SHID)
+ * ou numéro de téléphone (MBNO).
+ */
 export function AliasPageCreateOptions({ compte }: { compte: string }) {
   const traductions = useAppLocalizations();
-  const theme = useTheme();
   const aliasBloc = useBloc(AliasBloc);
 
   return (
     <MyPageContainer>
-      <ScrollView>
-        {/* Titre de la page */}
-        <Text style={theme.textTheme.titleSmall}>{traductions.aliasCreatePageTitle}</Text>
-        <View style={styles.gap5} />
-        {/* Sous titre de la page */}
-        <Text style={theme.textTheme.displaySmall}>{traductions.aliasCreatePageSubTitle}</Text>
+      <ScrollView contentContainerStyle={styles.contenu}>
+        {/* En-tête : pastille, titre et sous-titre centrés */}
+        <PinEntete
+          icone="alternate-email"
+          titre={traductions.aliasCreatePageTitle}
+          sousTitre={traductions.aliasCreatePageSubTitle}
+        />
         <View style={styles.gap32} />
 
-        {/* Bouton créer alias SHID */}
-        <MenuActionsWidget
-          items={[
-            new MenuActionItem(
-              Images.aliasIconUser,
-              traductions.aliasCreateSHIDTitle,
-              traductions.aliasCreateSHIDSubTitle,
-              () => aliasBloc.add(new CreateAliasSHIDEvent(compte)),
-              { iconSize: 20 },
-            ),
-          ]}
+        {/* Adresse de paiement (SHID) */}
+        <SelectionOption
+          image={Images.aliasIconUser}
+          titre={traductions.aliasCreateSHIDTitle}
+          sousTitre={traductions.aliasCreateSHIDSubTitle}
+          onPress={() => aliasBloc.add(new CreateAliasSHIDEvent(compte))}
         />
-        <View style={styles.gap20} />
+        <View style={styles.gap12} />
 
-        {/* - type MBNO */}
-        <MenuActionsWidget
-          items={[
-            new MenuActionItem(
-              Images.aliasIconPhone,
-              traductions.aliasCreateMBNOTitle,
-              traductions.aliasCreateMBNOSubTitle,
-              () => aliasBloc.add(new CreateAliasMBNOEvent(compte)),
-              { iconSize: 20 },
-            ),
-          ]}
+        {/* Numéro de téléphone (MBNO) */}
+        <SelectionOption
+          image={Images.aliasIconPhone}
+          titre={traductions.aliasCreateMBNOTitle}
+          sousTitre={traductions.aliasCreateMBNOSubTitle}
+          onPress={() => aliasBloc.add(new CreateAliasMBNOEvent(compte))}
         />
       </ScrollView>
     </MyPageContainer>
@@ -57,7 +50,7 @@ export function AliasPageCreateOptions({ compte }: { compte: string }) {
 }
 
 const styles = StyleSheet.create({
-  gap5: { height: 5 },
-  gap20: { height: 20 },
+  contenu: { paddingTop: 8, paddingBottom: 24 },
+  gap12: { height: 12 },
   gap32: { height: 32 },
 });