@pi-spi/app 2.1.0 → 2.2.0

package/src/modules/transactions/presentation/pages/transaction_form/transaction_form_page_othr.tsx

@@ -3,7 +3,7 @@ import { Keyboard, StyleSheet, Text, useWindowDimensions, View } from 'react-nat
 
 import { AppEnv } from '../../../../../core/env';
 import { useBloc, useBlocBuilder } from '../../../../../core/bloc_react';
-import { useTheme } from '../../../../../core/theme';
+import { Themer, useTheme } from '../../../../../core/theme';
 import type { AppLocalizations } from '../../../../../l10n/app_localizations';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
 import { CompteValidator } from '../../../../../shared/models/compte_validator';
@@ -48,11 +48,10 @@ export function TransactionFormPageOthr() {
 
   return (
     <View>
-      {/* Titre de la page */}
-      <Text style={[theme.textTheme.titleSmall, styles.title]}>{traductions.transactionsSendFormOthrTitle}</Text>
-      <View style={styles.gap5} />
+      {/* Titre dans la barre du haut (TransactionFormPage) */}
+      <View style={styles.gap8} />
       {/* Sous-titre de la page */}
-      <Text style={theme.textTheme.displaySmall}>{traductions.transactionsSendFormOthrSubtitle}</Text>
+      <Text style={[theme.textTheme.displaySmall, { color: Themer.neural03Color }]}>{traductions.transactionsSendFormOthrSubtitle}</Text>
       <View style={showDetails ? styles.gap32 : styles.gap10} />
 
       {/* Compte */}
@@ -171,6 +170,7 @@ function pspError(traductions: AppLocalizations, participants: Participant[], cm
 }
 
 const styles = StyleSheet.create({
+  gap8: { height: 8 },
   title: { fontSize: 25 },
   gap5: { height: 5 },
   gap6: { height: 6 },

package/src/modules/transactions/presentation/pages/transaction_form/transaction_form_page_schedule.tsx

@@ -3,11 +3,11 @@ import { ScrollView, StyleSheet, Text, View } from 'react-native';
 import { useBloc, useBlocBuilder, useBlocListener } from '../../../../../core/bloc_react';
 import { Di } from '../../../../../core/di';
 import { AppRouter, useAppRouter } from '../../../../../core/router';
-import { useTheme } from '../../../../../core/theme';
+import { Themer, useTheme } from '../../../../../core/theme';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
 import { ElevatedButton } from '../../../../../shared/material/buttons';
 import { showModalBottomSheet } from '../../../../../shared/material/overlays';
-import { AppBar, Scaffold } from '../../../../../shared/material/scaffold';
+import { Scaffold } from '../../../../../shared/material/scaffold';
 import { FrequenceInputWidget } from '../../../../../shared/widgets/frequence_input_widget';
 import { CustomLoadingDialog, LoadingPage } from '../../../../../shared/widgets/loading_page';
 import { MyPageContainer } from '../../../../../shared/widgets/my_page_container';
@@ -24,6 +24,7 @@ import {
 import { TransactionSendPageError } from '../transaction_send/transaction_send_page_error';
 import { TransactionSendPageSuccess } from '../transaction_send/transaction_send_page_succes';
 import { TransactionSendFormInputDate } from './transaction_form_input_date';
+import { ProfileAppBar } from '../../../../profile/presentation/pages/profile_app_bar';
 
 /** Programmation d'un transfert : fréquence et dates (route `transactionFormSchedule`). */
 export function TransactionFormPageSchedule({
@@ -99,14 +100,11 @@ export function TransactionFormPageSchedule({
   };
 
   return (
-    <Scaffold appBar={<AppBar onBack={() => AppRouter.pop(router)} />}>
+    <Scaffold appBar={<ProfileAppBar titre={traductions.transactionFormScheduleTitle} />}>
       <MyPageContainer>
         <ScrollView style={styles.flex}>
-          {/* Titre de la page */}
-          <Text style={theme.textTheme.titleSmall}>{traductions.transactionFormScheduleTitle}</Text>
-          <View style={styles.gap5} />
           {/* Sous-titre de la page */}
-          <Text style={theme.textTheme.displaySmall}>{traductions.transactionFormScheduleSubtitle}</Text>
+          <Text style={[theme.textTheme.displaySmall, { color: Themer.neural03Color }]}>{traductions.transactionFormScheduleSubtitle}</Text>
           <View style={styles.gap32} />
           {/* Fréquence */}
           <FrequenceInputWidget

package/src/modules/transactions/presentation/pages/transaction_form/transaction_form_page_verification.tsx

@@ -1,18 +1,20 @@
-import { ScrollView, StyleSheet, Switch, Text, View } from 'react-native';
+import { MaterialIcons } from '@expo/vector-icons';
+import type { ComponentProps, ReactNode } from 'react';
+import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
 
 import { useBloc, useBlocBuilder, useBlocListener } from '../../../../../core/bloc_react';
 import { AppRouter, useAppRouter } from '../../../../../core/router';
-import { useTheme } from '../../../../../core/theme';
+import { Themer, useTheme } from '../../../../../core/theme';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
 import { showModalBottomSheet } from '../../../../../shared/material/overlays';
-import { AppBar, Scaffold } from '../../../../../shared/material/scaffold';
+import { Scaffold } from '../../../../../shared/material/scaffold';
 import { UEMOACountry } from '../../../../../shared/models/uemoa_countries';
 import { formatMontant } from '../../../../../shared/widgets/amount_widget';
 import { ConfirmActionSheetWidget } from '../../../../../shared/widgets/confirm_action_sheet_widget';
-import { CustomTextInput } from '../../../../../shared/widgets/input_text';
-import { CustomTextMultipleInput } from '../../../../../shared/widgets/input_text_multiple';
 import { CustomLoadingDialog, LoadingPage } from '../../../../../shared/widgets/loading_page';
 import { MyPageContainer } from '../../../../../shared/widgets/my_page_container';
+import { SelectionChamp, SelectionPastille } from '../../../../../shared/widgets/selection';
+import { ProfileAppBar } from '../../../../profile/presentation/pages/profile_app_bar';
 import { ContactPI } from '../../../../contacts/domain/contact_pi';
 import { ContactBloc } from '../../../../contacts/presentation/bloc/contact_bloc';
 import { TransactionSendCommand } from '../../../domain/models/transaction_send/transaction_send_command';
@@ -93,13 +95,14 @@ export function TransactionVerificationPage() {
 
   /** Proposer d'enregistrer l'alias dans les contacts (s'il n'y est pas) */
   const aliasValue = command.alias?.alias();
-  const addAliasSwitch =
+  const enregistrerAlias =
     aliasValue != null && !contactBloc.isContactExist(aliasValue) ? (
-      <Switch
-        value={false}
-        trackColor={{ false: theme.switchTheme.inactiveTrackColor, true: theme.switchTheme.activeTrackColor }}
-        thumbColor={theme.switchTheme.thumbColor}
-        onValueChange={async () => {
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={traductions.contactAliasSaveText}
+        hitSlop={8}
+        style={styles.action}
+        onPress={async () => {
           const confirmed = await showModalBottomSheet<boolean>(router, {
             builder: () => (
               <ConfirmActionSheetWidget
@@ -116,105 +119,94 @@ export function TransactionVerificationPage() {
             });
           }
         }}
-      />
+      >
+        <MaterialIcons name="person-add-alt-1" size={20} color={theme.colorScheme.primary} />
+      </Pressable>
     ) : null;
 
+  const compte = command.method === TransactionSendMethod.iban || command.method === TransactionSendMethod.othr;
+  const pays = UEMOACountry.get(transaction.clientPays);
+  const motif = command.motif?.value ?? '';
+  const soldeValide = command.isSoldeValid(transaction.montantFrais);
+
+  // Informations, dans l'ordre du formulaire, chacune dans un champ comme
+  // le pays et l'institution
+  const champs: ReactNode[] = [
+    command.alias != null && (
+      <Champ key="alias" libelle={traductions.aliasFormLabel} valeur={aliasValue ?? ''} icone="alternate-email" suffixe={enregistrerAlias} />
+    ),
+    command.alias != null && psp != null && (
+      <Champ key="psp" libelle={traductions.transactionFormOthrNomLabel} valeur={psp.nomMembre} icone="account-balance" />
+    ),
+    compte && (
+      <Champ
+        key="compte"
+        libelle={command.method === TransactionSendMethod.iban ? traductions.transactionFormIbanHint : traductions.transactionFormOthrLabel}
+        valeur={command.othr?.compte() ?? ''}
+        icone="credit-card"
+      />
+    ),
+    compte && (
+      <Champ
+        key="banque"
+        libelle={command.method === TransactionSendMethod.iban ? traductions.transactionFormIbanNomLabel : traductions.transactionFormOthrNomLabel}
+        valeur={command.pspNom ?? ''}
+        icone="account-balance"
+      />
+    ),
+    // Pays de l'institution, avec son code comme dans le formulaire
+    pays != null && (
+      <SelectionChamp
+        key="pays"
+        libelle={traductions.transactionFormOthrPaysLabel}
+        valeur={pays.name}
+        pastille={<SelectionPastille code={pays.iso3} />}
+      />
+    ),
+    <Champ key="nom" libelle={traductions.transactionFormVerificationClientName} valeur={transaction.clientNom} icone="person" />,
+    transaction.facture != null && (
+      <Champ key="facture" libelle={traductions.transactionDetailsFacture} valeur={transaction.facture} icone="receipt-long" />
+    ),
+    transaction.txId != null && (
+      <Champ key="ref" libelle={traductions.transactionDetailsReference} valeur={transaction.txId} icone="tag" />
+    ),
+    // Montant, et l'erreur si le solde ne suffit pas
+    <View key="montant">
+      <Champ
+        libelle={traductions.transactionFormAmountHint}
+        valeur={`${formatMontant(command.amount?.value ?? 0, locale)} FCFA`}
+        icone="payments"
+      />
+      {!soldeValide && (
+        <Text style={[theme.inputDecorationTheme.errorStyle, styles.erreur]}>{`⚠ ${traductions.transactionFormAmountInvalid}`}</Text>
+      )}
+    </View>,
+    <Champ
+      key="frais"
+      libelle={traductions.transactionDetailsRecuInfoFrais}
+      valeur={montantFrais !== 0 ? `${formatMontant(montantFrais, locale)} FCFA` : traductions.transactionDetailsRecuInfoFraisDefault}
+      icone="receipt"
+    />,
+    motif.length > 0 && <Champ key="motif" libelle={traductions.transactionFormMotifLabel} valeur={motif} icone="notes" />,
+  ].filter(Boolean);
+
   return (
-    <Scaffold appBar={<AppBar onBack={() => AppRouter.pop(router)} />}>
+    <Scaffold appBar={<ProfileAppBar titre={traductions.transactionFormVerificationTitle} />}>
       <MyPageContainer>
         <ScrollView style={styles.flex}>
-          {/* Titre de la page */}
-          <Text style={theme.textTheme.titleSmall}>{traductions.transactionFormVerificationTitle}</Text>
-          <View style={styles.gap5} />
+          <View style={styles.gap8} />
           {/* Sous-titre de la page */}
-          <Text style={theme.textTheme.displaySmall}>
+          <Text style={[theme.textTheme.displaySmall, { color: Themer.neural03Color }]}>
             {command.action === TransactionSendCommand.actionSendSchedule
               ? traductions.transactionFormVerificationAbnmSubtitle
               : traductions.transactionFormVerificationSubtitle}
           </Text>
-          <View style={styles.gap32} />
-
-          {/* Alias */}
-          {command.alias != null && (
-            <>
-              <CustomTextInput labelText={traductions.aliasFormLabel} value={aliasValue ?? ''} readOnly suffixIcon={addAliasSwitch} />
-              {/* Institution */}
-              {psp != null && (
-                <>
-                  <View style={styles.gap16} />
-                  <CustomTextInput labelText={traductions.transactionFormOthrNomLabel} value={psp.nomMembre} readOnly />
-                </>
-              )}
-            </>
-          )}
-
-          {/* IBAN ou autre compte */}
-          {(command.method === TransactionSendMethod.iban || command.method === TransactionSendMethod.othr) && (
-            <>
-              <CustomTextInput
-                labelText={
-                  command.method === TransactionSendMethod.iban
-                    ? traductions.transactionFormIbanHint
-                    : traductions.transactionFormOthrLabel
-                }
-                value={command.othr?.compte() ?? ''}
-                readOnly
-              />
-              <View style={styles.gap16} />
-              <CustomTextInput
-                labelText={
-                  command.method === TransactionSendMethod.iban
-                    ? traductions.transactionFormIbanNomLabel
-                    : traductions.transactionFormOthrNomLabel
-                }
-                value={command.pspNom ?? ''}
-                readOnly
-              />
-            </>
-          )}
-
-          <View style={styles.gap16} />
-          {/* Pays de l'institution */}
-          <CustomTextInput
-            labelText={traductions.transactionFormOthrPaysLabel}
-            value={UEMOACountry.get(transaction.clientPays)?.name ?? ''}
-            readOnly
-          />
-          <View style={styles.gap16} />
-          {/* Nom du client */}
-          <CustomTextInput labelText={traductions.transactionFormVerificationClientName} value={transaction.clientNom} readOnly />
-          <View style={styles.gap16} />
-          {/* Facture */}
-          {transaction.facture != null && (
-            <>
-              <CustomTextInput labelText={traductions.transactionDetailsFacture} value={transaction.facture} readOnly />
-              <View style={styles.gap16} />
-            </>
-          )}
-          {/* Référence */}
-          {transaction.txId != null && (
-            <>
-              <CustomTextInput labelText={traductions.transactionDetailsReference} value={transaction.txId} readOnly />
-              <View style={styles.gap16} />
-            </>
-          )}
-          {/* Montant */}
-          <CustomTextInput
-            labelText={traductions.transactionFormAmountHint}
-            value={formatMontant(command.amount?.value ?? 0, locale)}
-            readOnly
-            messageError={!command.isSoldeValid(transaction.montantFrais) ? traductions.transactionFormAmountInvalid : null}
-          />
-          <View style={styles.gap16} />
-          {/* Frais */}
-          <CustomTextInput
-            labelText={traductions.transactionDetailsRecuInfoFrais}
-            value={montantFrais !== 0 ? formatMontant(montantFrais, locale) : traductions.transactionDetailsRecuInfoFraisDefault}
-            readOnly
-          />
-          <View style={styles.gap16} />
-          {/* Motif */}
-          <CustomTextMultipleInput labelText={traductions.transactionFormMotifLabel} defaultValue={command.motif?.value ?? ''} readOnly />
+          <View style={styles.gap24} />
+          {champs.map((champ, i) => (
+            <View key={i} style={i > 0 ? styles.gap12 : null}>
+              {champ}
+            </View>
+          ))}
           <View style={styles.gap64} />
         </ScrollView>
         {/* Bouton de confirmation, rejet ou programmation */}
@@ -226,11 +218,28 @@ export function TransactionVerificationPage() {
   );
 }
 
+/** Information en lecture seule : pastille avec [icone], libellé et valeur */
+function Champ({
+  libelle,
+  valeur,
+  icone,
+  suffixe,
+}: {
+  libelle: string;
+  valeur: string;
+  icone: ComponentProps<typeof MaterialIcons>['name'];
+  suffixe?: ReactNode;
+}) {
+  return <SelectionChamp libelle={libelle} valeur={valeur} pastille={<SelectionPastille icone={icone} />} suffixe={suffixe} />;
+}
+
 const styles = StyleSheet.create({
   flex: { flex: 1 },
   bottom: { paddingVertical: 16 },
-  gap5: { height: 5 },
-  gap16: { height: 16 },
-  gap32: { height: 32 },
+  gap8: { height: 8 },
+  gap12: { marginTop: 12 },
+  gap24: { height: 24 },
   gap64: { height: 64 },
+  action: { padding: 4, marginLeft: 8 },
+  erreur: { marginLeft: 8, marginTop: 4 },
 });

package/src/modules/transactions/presentation/pages/transaction_search/transaction_search_page.tsx

@@ -1,11 +1,9 @@
-import { Keyboard, Pressable, StyleSheet, Text, View } from 'react-native';
+import { Keyboard, Pressable, StyleSheet, View } from 'react-native';
 
 import { BlocProvider, useCreateBloc } 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 { AppBar, Scaffold } from '../../../../../shared/material/scaffold';
+import { Scaffold } from '../../../../../shared/material/scaffold';
 import { MyPageContainer } from '../../../../../shared/widgets/my_page_container';
 import { TransactionSens } from '../../../domain/models/transaction';
 import { TransactionSearchCommand } from '../../../domain/models/transaction_search/transaction_search_command';
@@ -14,12 +12,11 @@ import { TransactionSearchBloc } from '../../bloc/transaction_search/transaction
 import { TransactionSearchListEvent } from '../../bloc/transaction_search/transaction_search_event';
 import { TransactionSearchPageInput } from './transaction_search_page_input';
 import { TransactionSearchPageListe } from './transaction_search_page_liste';
+import { ProfileAppBar } from '../../../../profile/presentation/pages/profile_app_bar';
 
 /** Recherche dans toutes les transactions du compte actif (route `transactionSearch`). */
 export function TransactionSearchPage() {
   const traductions = useAppLocalizations();
-  const theme = useTheme();
-  const router = useAppRouter();
   const bloc = useCreateBloc(() => {
     const created = new TransactionSearchBloc(Di.getTransactionInputPort());
     created.add(
@@ -34,12 +31,11 @@ export function TransactionSearchPage() {
   });
 
   return (
-    <Scaffold appBar={<AppBar onBack={() => AppRouter.pop(router)} />}>
+    <Scaffold appBar={<ProfileAppBar titre={traductions.transactionSearchTitle} />}>
       <BlocProvider blocs={[bloc]}>
         <MyPageContainer>
           <Pressable style={styles.flex} onPress={Keyboard.dismiss} accessible={false}>
-            <Text style={theme.textTheme.titleSmall}>{traductions.transactionSearchTitle}</Text>
-            <View style={styles.gap16} />
+            <View style={styles.gap8} />
             {/* Barre de filtre : champ et bouton */}
             <TransactionSearchPageInput />
             <View style={styles.gap32} />
@@ -54,6 +50,6 @@ export function TransactionSearchPage() {
 
 const styles = StyleSheet.create({
   flex: { flex: 1 },
-  gap16: { height: 16 },
+  gap8: { height: 8 },
   gap32: { height: 32 },
 });

package/src/modules/transactions/presentation/pages/transaction_split/transaction_split_page_repartition.tsx

@@ -4,18 +4,18 @@ import { useState } from 'react';
 import { ScrollView, StyleSheet, Text, TextInput, View } from 'react-native';
 
 import { Images } from '../../../../../core/assets';
-import { AppRouter, useAppRouter } from '../../../../../core/router';
 import { Themer, useTheme } from '../../../../../core/theme';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
 import { TextButton } from '../../../../../shared/material/buttons';
 import { Card } from '../../../../../shared/material/card';
-import { AppBar, Scaffold } from '../../../../../shared/material/scaffold';
+import { Scaffold } from '../../../../../shared/material/scaffold';
 import { CircleAvatarWidget } from '../../../../../shared/widgets/circle_avatar_widget';
 import { MyPageContainer } from '../../../../../shared/widgets/my_page_container';
 import { ContactPI } from '../../../../contacts/domain/contact_pi';
 import type { Transaction } from '../../../domain/models/transaction';
 import { TransactionListItemWidget } from '../transaction_list_item_widget';
 import { SPLIT_SELF, TransactionSplitPageConfirm } from './transaction_split_page_confirm';
+import { ProfileAppBar } from '../../../../profile/presentation/pages/profile_app_bar';
 
 /**
  * Partage de dépense, dernière étape : répartition du montant entre le
@@ -24,7 +24,6 @@ import { SPLIT_SELF, TransactionSplitPageConfirm } from './transaction_split_pag
 export function TransactionSplitPageRepartition({ transaction, contacts }: { transaction: Transaction; contacts: ContactPI[] }) {
   const traductions = useAppLocalizations();
   const theme = useTheme();
-  const router = useAppRouter();
   // Le client en tête de liste
   const [selectedItems] = useState(() => [new ContactPI({ name: SPLIT_SELF, phoneNumber: '', alias: SPLIT_SELF }), ...contacts]);
   // Répartition par défaut : parts égales, le reste pour le client
@@ -39,10 +38,8 @@ export function TransactionSplitPageRepartition({ transaction, contacts }: { tra
   });
 
   return (
-    <Scaffold appBar={<AppBar onBack={() => AppRouter.pop(router)} />}>
+    <Scaffold appBar={<ProfileAppBar titre={traductions.transactionSplitRepartitionTitle} />}>
       <MyPageContainer>
-        <Text style={theme.textTheme.titleSmall}>{traductions.transactionSplitRepartitionTitle}</Text>
-        <View style={styles.gap10} />
         <ScrollView style={styles.flex} keyboardShouldPersistTaps="handled">
           {/* Détails du paiement partagé */}
           <Text style={theme.textTheme.headlineSmall}>{traductions.transactionSplitRepartitionSubtitle1}</Text>

package/src/modules/transactions/presentation/pages/transaction_split/transaction_split_page_tx.tsx

@@ -4,10 +4,10 @@ import { Keyboard, StyleSheet, Text, View } from 'react-native';
 import { BlocProvider, useCreateBloc } from '../../../../../core/bloc_react';
 import { Di } from '../../../../../core/di';
 import { AppRouter, useAppRouter } from '../../../../../core/router';
-import { useTheme } from '../../../../../core/theme';
+import { Themer, useTheme } from '../../../../../core/theme';
 import { useAppLocalizations } from '../../../../../l10n/localizations';
 import { ElevatedButton } from '../../../../../shared/material/buttons';
-import { AppBar, Scaffold } from '../../../../../shared/material/scaffold';
+import { Scaffold } from '../../../../../shared/material/scaffold';
 import { MyPageContainer } from '../../../../../shared/widgets/my_page_container';
 import type { ContactPI } from '../../../../contacts/domain/contact_pi';
 import { TransactionSens, type Transaction } from '../../../domain/models/transaction';
@@ -16,6 +16,7 @@ import { TransactionSearchFilter } from '../../../domain/models/transaction_sear
 import { TransactionSearchBloc } from '../../bloc/transaction_search/transaction_search_bloc';
 import { TransactionSearchListEvent } from '../../bloc/transaction_search/transaction_search_event';
 import { TransactionSearchPageListe } from '../transaction_search/transaction_search_page_liste';
+import { ProfileAppBar } from '../../../../profile/presentation/pages/profile_app_bar';
 
 /** Partage de dépense, étape 1 : choisir le paiement émis à partager. */
 export function TransactionSplitPageTx() {
@@ -37,13 +38,12 @@ export function TransactionSplitPageTx() {
   });
 
   return (
-    <Scaffold appBar={<AppBar onBack={() => AppRouter.pop(router)} />}>
+    <Scaffold appBar={<ProfileAppBar titre={traductions.transactionSplitSelectTxPageTitle} />}>
       <BlocProvider blocs={[searchBloc]}>
         <MyPageContainer>
           <View style={styles.flex}>
-            <Text style={theme.textTheme.titleSmall}>{traductions.transactionSplitSelectTxPageTitle}</Text>
             <View style={styles.gap8} />
-            <Text style={theme.textTheme.displaySmall}>{traductions.transactionSplitSelectTxPageSubtitle}</Text>
+            <Text style={[theme.textTheme.displaySmall, { color: Themer.neural03Color }]}>{traductions.transactionSplitSelectTxPageSubtitle}</Text>
             <View style={styles.gap20} />
             {/* Liste des transactions */}
             <TransactionSearchPageListe

package/src/shared/widgets/alias_widget.tsx

@@ -13,8 +13,8 @@ import { ClipboardWidget } from './clipboard_widget';
 
 /**
  * Pour afficher l'alias dans l'app : formaté, avec un bouton pour le
- * copier. Si l'alias n'est pas encore dans les contacts du téléphone, un
- * appui long propose de l'y enregistrer.
+ * copier. Si l'alias n'est pas encore dans les contacts du téléphone, une
+ * icône visible (et l'appui long) propose de l'y enregistrer.
  */
 export function AliasWidget({
   alias,
@@ -33,25 +33,54 @@ export function AliasWidget({
   const contactBloc = useBloc(ContactBloc);
   useBlocBuilder(contactBloc);
 
+  const inconnu = !contactBloc.isContactExist(alias);
+  const enregistrer = () =>
+    void AppRouter.push(router, AppRouter.profileContacts, {
+      params: new ContactPI({ name: name ?? '', alias }),
+    });
+
   const style = [theme.textTheme.bodyLarge, { color: Themer.neural03Color, textAlign }];
   const text = (
-    <Text numberOfLines={1} style={[style, canCopy ? styles.flex : null]}>
+    <Text numberOfLines={1} style={[style, canCopy || inconnu ? styles.flex : null]}>
       {AliasPI.formatPhoneNumber(alias)}
     </Text>
   );
-  const content = canCopy ? (
-    <View style={styles.row}>
-      {text}
-      <Pressable accessibilityRole="button" hitSlop={8} onPress={() => void ClipboardWidget.setData(alias)}>
-        <MaterialIcons name="content-copy" size={16} color={theme.colorScheme.onSurface} />
-      </Pressable>
-    </View>
-  ) : (
-    text
-  );
+  const content =
+    canCopy || inconnu ? (
+      <View style={styles.row}>
+        {text}
+        {/* Enregistrer dans les contacts (alias inconnu) */}
+        {inconnu && (
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel={traductions.contactAliasSaveText}
+            hitSlop={8}
+            onPress={enregistrer}
+            style={styles.icone}
+          >
+            <MaterialIcons name="person-add-alt-1" size={20} color={theme.colorScheme.primary} />
+          </Pressable>
+        )}
+        {/* Copier l'alias */}
+        {canCopy && (
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel={traductions.aliasWidgetCopyTooltip}
+            hitSlop={8}
+            onPress={() => void ClipboardWidget.setData(alias)}
+            style={styles.icone}
+          >
+            <MaterialIcons name="content-copy" size={16} color={theme.colorScheme.onSurface} />
+          </Pressable>
+        )}
+      </View>
+    ) : (
+      text
+    );
 
-  if (contactBloc.isContactExist(alias)) return content;
+  if (!inconnu) return content;
 
+  // Appui long : raccourci vers l'enregistrement, en plus de l'icône visible
   const showLightMenu = (event: GestureResponderEvent) => {
     void showPopupMenu(router, {
       x: event.nativeEvent.pageX,
@@ -61,10 +90,7 @@ export function AliasWidget({
           icon: 'person-add',
           iconSize: 16,
           label: traductions.contactAliasSaveText,
-          onTap: () =>
-            void AppRouter.push(router, AppRouter.profileContacts, {
-              params: new ContactPI({ name: name ?? '', alias }),
-            }),
+          onTap: enregistrer,
         },
       ],
     });
@@ -76,4 +102,5 @@ export function AliasWidget({
 const styles = StyleSheet.create({
   flex: { flex: 1 },
   row: { flexDirection: 'row', alignItems: 'center' },
+  icone: { paddingHorizontal: 6, paddingVertical: 4 },
 });

package/src/shared/widgets/auth_code_field.tsx

@@ -0,0 +1,89 @@
+import { useRef, useState } from 'react';
+import { Pressable, StyleSheet, Text, TextInput, View, type TextInputInstance } from 'react-native';
+
+import { useTheme } from '../../core/theme';
+
+/**
+ * Champ du code de vérification reçu par SMS ou e-mail : une case par
+ * chiffre, au-dessus d'un vrai champ (invisible) qui reçoit la saisie, le
+ * collage et la suggestion automatique du code par le clavier (code à
+ * usage unique).
+ */
+export function AuthCodeField({
+  onChanged,
+  longueur = 6,
+  erreur = false,
+  onComplete,
+  autoFocus = false,
+}: {
+  onChanged: (code: string) => void;
+  /** Nombre de chiffres du code */
+  longueur?: number;
+  erreur?: boolean;
+  /** Appelé quand tous les chiffres sont saisis */
+  onComplete?: (code: string) => void;
+  /** Ouvre le clavier dès l'affichage */
+  autoFocus?: boolean;
+}) {
+  const theme = useTheme();
+  const champ = useRef<TextInputInstance | null>(null);
+  const [code, setCode] = useState('');
+  const [focus, setFocus] = useState(autoFocus);
+  const primaire = theme.colorScheme.primary;
+  // Case en cours de saisie
+  const courante = Math.min(code.length, longueur - 1);
+
+  return (
+    <Pressable onPress={() => champ.current?.focus()} accessibilityRole="none">
+      {/* Vrai champ, invisible : saisie, collage, code suggéré */}
+      <TextInput
+        ref={champ}
+        value={code}
+        autoFocus={autoFocus}
+        keyboardType="number-pad"
+        textContentType="oneTimeCode"
+        autoComplete="sms-otp"
+        maxLength={longueur}
+        caretHidden
+        onFocus={() => setFocus(true)}
+        onBlur={() => setFocus(false)}
+        onChangeText={(texte) => {
+          const valeur = texte.replace(/\D/g, '').slice(0, longueur);
+          setCode(valeur);
+          onChanged(valeur);
+          if (valeur.length === longueur) onComplete?.(valeur);
+        }}
+        style={styles.cache}
+      />
+      {/* Cases, une par chiffre */}
+      <View style={styles.cases} pointerEvents="none">
+        {Array.from({ length: longueur }, (_, i) => (
+          <View
+            key={i}
+            style={[
+              styles.case,
+              i > 0 ? styles.ecart : null,
+              {
+                backgroundColor: theme.inputDecorationTheme.fillColor,
+                borderColor: erreur
+                  ? theme.colorScheme.error
+                  : focus && i === courante
+                    ? primaire
+                    : 'transparent',
+              },
+            ]}
+          >
+            <Text style={theme.textTheme.headlineMedium}>{i < code.length ? code[i] : ''}</Text>
+          </View>
+        ))}
+      </View>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  cache: { position: 'absolute', opacity: 0, width: 1, height: 1 },
+  cases: { flexDirection: 'row' },
+  case: { flex: 1, height: 56, borderRadius: 14, borderWidth: 1.5, alignItems: 'center', justifyContent: 'center' },
+  ecart: { marginLeft: 8 },
+});