@pi-spi/app 2.0.0 → 2.2.0

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 },
 });

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

@@ -1,12 +1,15 @@
-import { useRef, useState, type ReactNode } from 'react';
-import { Keyboard, StyleSheet, Text, TextInput, useWindowDimensions, View, type TextInputInstance } from 'react-native';
+import type { ComponentProps, ReactNode } from 'react';
+import { StyleSheet, View } from 'react-native';
+import type { MaterialIcons } from '@expo/vector-icons';
 
-import { useTheme } from '../../../../core/theme';
+import { AuthCodeField } from '../../../../shared/widgets/auth_code_field';
+import { PinEntete, PinMessage } from '../../../../shared/widgets/pin_entete';
 
 /**
- * Saisie d'un code OTP en [pinLength] cases d'un chiffre : passage
- * automatique à la case suivante, retour à la précédente sur effacement,
- * collage du code entier dans la première case.
+ * Saisie d'un code reçu par SMS ou e-mail (alias par numéro de téléphone,
+ * refus d'une revendication, code PIN oublié) : en-tête centré, une case
+ * par chiffre avec la suggestion du code par le clavier, bandeau d'erreur
+ * et renvoi du code.
  */
 export function AliasPageOtp({
   pinLength,
@@ -17,6 +20,7 @@ export function AliasPageOtp({
   onOtpComplete,
   autoFocus = true,
   useInBottomSheet = false,
+  icone = 'sms',
 }: {
   pinLength: number;
   title: string;
@@ -26,95 +30,27 @@ export function AliasPageOtp({
   onOtpComplete: (otpCode: number[]) => void;
   autoFocus?: boolean;
   useInBottomSheet?: boolean;
+  /** Icône de la pastille de l'en-tête */
+  icone?: ComponentProps<typeof MaterialIcons>['name'];
 }) {
-  const theme = useTheme();
-  const { width: largeur } = useWindowDimensions();
-  const [values, setValues] = useState<string[]>(() => Array(pinLength).fill(''));
-  const inputs = useRef<(TextInputInstance | null)[]>([]);
-
-  const isTablet = largeur >= 600;
-  const paddingX = 20;
-  const formWidth = largeur - (useInBottomSheet && isTablet ? 40 : 0) - paddingX * 2;
-  const fieldWidth = formWidth / pinLength - 8;
-
-  const verifyOtpCompletion = (next: string[]) => {
-    const pin = next.filter((v) => /^\d$/.test(v)).map(Number);
-    if (pin.length === pinLength) onOtpComplete(pin);
-  };
-
-  const handleOtpInputChange = (raw: string, index: number) => {
-    const text = raw.replace(/\D/g, '');
-    // Cas où l'utilisateur colle tout le code OTP dans le premier champ
-    if (index === 0 && text.length === pinLength) {
-      const next = text.split('');
-      setValues(next);
-      Keyboard.dismiss();
-      verifyOtpCompletion(next);
-      return;
-    }
-    const next = [...values];
-    next[index] = text.slice(-1);
-    setValues(next);
-    if (next[index].length === 1 && index < pinLength - 1) {
-      inputs.current[index + 1]?.focus();
-    } else if (next[index].length === 0 && index > 0) {
-      inputs.current[index - 1]?.focus();
-    }
-    verifyOtpCompletion(next);
-  };
-
-  const onKeyPress = (key: string, index: number) => {
-    // Effacement sur une case déjà vide : retour à la case précédente
-    if (key === 'Backspace' && values[index].length === 0 && index > 0) {
-      const next = [...values];
-      next[index - 1] = '';
-      setValues(next);
-      inputs.current[index - 1]?.focus();
-    }
-  };
-
-  const input = theme.inputDecorationTheme;
   return (
     <View>
-      <Text style={theme.textTheme.titleSmall}>{title}</Text>
-      <View style={styles.gap5} />
-      <Text style={theme.textTheme.displaySmall}>{subtitle}</Text>
-      <View style={styles.gap32} />
-      <View style={styles.row}>
-        {values.map((value, index) => (
-          <TextInput
-            key={index}
-            ref={(ref) => {
-              inputs.current[index] = ref;
-            }}
-            value={value}
-            keyboardType="number-pad"
-            autoFocus={autoFocus && index === 0}
-            maxLength={index === 0 ? pinLength : 1}
-            onChangeText={(text) => handleOtpInputChange(text, index)}
-            onKeyPress={({ nativeEvent }) => onKeyPress(nativeEvent.key, index)}
-            textAlign="center"
-            style={[
-              theme.textTheme.headlineMedium,
-              styles.field,
-              { width: fieldWidth, backgroundColor: input.fillColor, borderRadius: input.borderRadius },
-            ]}
-          />
-        ))}
-      </View>
-      <View style={styles.gap24} />
-      {errorMessage != null && <Text style={[input.errorStyle, styles.error]}>{`⚠ ${errorMessage}`}</Text>}
+      {/* Dans une feuille : pastille plus petite */}
+      <PinEntete icone={icone} titre={title} sousTitre={subtitle} compact={useInBottomSheet} />
+      <View style={{ height: useInBottomSheet ? 20 : 28 }} />
+      <AuthCodeField
+        longueur={pinLength}
+        autoFocus={autoFocus}
+        erreur={errorMessage != null}
+        onChanged={() => undefined}
+        onComplete={(code) => onOtpComplete(code.split('').map(Number))}
+      />
+      <PinMessage message={errorMessage} />
       {countdownTimer != null && <View style={styles.timer}>{countdownTimer}</View>}
     </View>
   );
 }
 
 const styles = StyleSheet.create({
-  gap5: { height: 5 },
-  gap24: { height: 24 },
-  gap32: { height: 32 },
-  row: { flexDirection: 'row', justifyContent: 'space-between' },
-  field: { height: 56, padding: 0 },
-  error: { marginLeft: 8, marginTop: 2, marginBottom: 5 },
-  timer: { flexDirection: 'row', justifyContent: 'flex-start' },
+  timer: { marginTop: 12, alignItems: 'center' },
 });

package/src/modules/categorie/domain/services/categorie_service.ts

@@ -27,7 +27,8 @@ export class CategorieService implements CategorieInputPort {
   }
 
   async list(): Promise<Categorie[]> {
-    return (await this.categorieOutputPort.list()).sort(byLabelDesc);
+    // Tri sur une copie : la liste reçue peut être non modifiable
+    return [...(await this.categorieOutputPort.list())].sort(byLabelDesc);
   }
 
   async update(categorie: Categorie): Promise<Categorie> {