@pi-spi/app 2.1.0 → 2.2.0

package/src/modules/profile/presentation/pages/profile_page_avatar.tsx

@@ -15,7 +15,7 @@ import { withAlpha } from '../../../../shared/utils/color';
 import { AvatarWidget } from '../../../../shared/widgets/avatar_widget';
 import { ClipboardWidget } from '../../../../shared/widgets/clipboard_widget';
 import { ImageSelectWidget } from '../../../../shared/widgets/image_select_widget';
-import { SbSelectionOption } from '../../../../shared/widgets/selection';
+import { SelectionOption } from '../../../../shared/widgets/selection';
 import { AliasBloc } from '../../../alias/presentation/bloc/alias_bloc';
 import { AliasExistState } from '../../../alias/presentation/bloc/alias_state';
 import { ProfileAvatar } from '../../domain/profile_avatar';
@@ -46,7 +46,7 @@ export function ProfilePageAvatar() {
           otherActions={
             avatar != null
               ? [
-                  <SbSelectionOption
+                  <SelectionOption
                     key="delete"
                     icone="delete-forever"
                     titre={traductions.btnTextDelete}

package/src/modules/profile/presentation/pages/profile_page_contacts.tsx

@@ -1,7 +1,6 @@
 import { MaterialIcons } from '@expo/vector-icons';
-import { Image } from 'expo-image';
 import { useState } from 'react';
-import { Keyboard, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import { Keyboard, Pressable, StyleSheet, TextInput, View } from 'react-native';
 
 import { Images } from '../../../../core/assets';
 import { useBloc } from '../../../../core/bloc_react';
@@ -11,6 +10,7 @@ import { useAppLocalizations } from '../../../../l10n/localizations';
 import { Card } from '../../../../shared/material/card';
 import { showModalBottomSheet } from '../../../../shared/material/overlays';
 import { Scaffold } from '../../../../shared/material/scaffold';
+import { SelectionOption } from '../../../../shared/widgets/selection';
 import { MyPageContainer } from '../../../../shared/widgets/my_page_container';
 import type { ContactPI } from '../../../contacts/domain/contact_pi';
 import type { PhoneContact } from '../../../contacts/domain/phone_contact';
@@ -67,18 +67,13 @@ export function ProfilePageContacts({ contactPI }: { contactPI?: ContactPI | nul
           {/* Nouveau contact */}
           {!hasInputSearchFocused && searchKeyword == null && (
             <>
-              <Card>
-                <Pressable accessibilityRole="button" onPress={() => void onSelect(null, null)} style={styles.action}>
-                  <View style={[styles.actionIcon, { backgroundColor: theme.colorScheme.surface }]}>
-                    <Image source={Images.iconTransactionSendByNewContact} style={styles.icon} tintColor={theme.colorScheme.onSurface} />
-                  </View>
-                  <View style={styles.texts}>
-                    <Text style={theme.textTheme.headlineSmall}>{traductions.profileContactPageaActionAdd}</Text>
-                    <Text style={theme.textTheme.displaySmall}>{traductions.profileContactPageaActionAddSubtitle}</Text>
-                  </View>
-                </Pressable>
-              </Card>
-              <View style={styles.gap10} />
+              <SelectionOption
+                image={Images.iconTransactionSendByNewContact}
+                titre={traductions.profileContactPageaActionAdd}
+                sousTitre={traductions.profileContactPageaActionAddSubtitle}
+                onPress={() => void onSelect(null, null)}
+              />
+              <View style={styles.gap16} />
             </>
           )}
           {/* Contacts (la recherche est transmise à la pagination : le SDK
@@ -88,6 +83,8 @@ export function ProfilePageContacts({ contactPI }: { contactPI?: ContactPI | nul
               hideTitle
               expanded
               searchKeyword={searchKeyword}
+              // Le toucher ouvre déjà la feuille du contact
+              showActions={false}
               onSelect={(contact, alias) => void onSelect(contact, alias)}
             />
           </View>
@@ -102,10 +99,6 @@ const styles = StyleSheet.create({
   flex: { flex: 1 },
   search: { height: 36, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 12 },
   input: { flex: 1, marginLeft: 8, paddingVertical: 0 },
-  action: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, paddingVertical: 10 },
-  actionIcon: { width: 45, height: 45, borderRadius: 14, alignItems: 'center', justifyContent: 'center' },
-  icon: { width: 20, height: 20 },
-  texts: { flex: 1, marginLeft: 16 },
-  gap10: { height: 10 },
+  gap16: { height: 16 },
   gap20: { height: 20 },
 });

package/src/modules/profile/presentation/pages/profile_page_contacts_actions.tsx

@@ -1,6 +1,6 @@
 import { MaterialIcons } from '@expo/vector-icons';
 import { useState } from 'react';
-import { Keyboard, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { Keyboard, Platform, Pressable, ScrollView, Share, StyleSheet, Text, View } from 'react-native';
 
 import { Images } from '../../../../core/assets';
 import { useBloc, useBlocListener, useCreateBloc } from '../../../../core/bloc_react';
@@ -179,6 +179,15 @@ export function ProfilePageContactsActions({
                       setCanEdit(true);
                     }}
                   />,
+                  // Partager
+                  <ProfileMenuTile
+                    key="partager"
+                    icone={Platform.OS === 'ios' ? 'ios-share' : 'share'}
+                    titre={traductions.profileContactPageaActionShare}
+                    onPress={() =>
+                      void Share.share({ title: traductions.qrcodePagePartageAliasMessage(name ?? ''), message: alias })
+                    }
+                  />,
                   // Supprimer
                   <ProfileMenuTile
                     key="supprimer"

package/src/modules/qrcode/presentation/pages/qrcode_alias_page_share.tsx

@@ -3,7 +3,7 @@ import { ScrollView, Share, StyleSheet, View } from 'react-native';
 import { Images } from '../../../../core/assets';
 import { AppRouter, useAppRouter } from '../../../../core/router';
 import { useAppLocalizations } from '../../../../l10n/localizations';
-import { SbSelectionOption, SelectionSheet } from '../../../../shared/widgets/selection';
+import { SelectionOption, SelectionSheet } from '../../../../shared/widgets/selection';
 
 /** Feuille « Partager » : le QR code (image) ou l'alias (texte). */
 export function QrcodeAliasPageShare({
@@ -24,7 +24,7 @@ export function QrcodeAliasPageShare({
       contenu={
         <ScrollView bounces={false} contentContainerStyle={styles.content}>
           {/* Partager le QR code */}
-          <SbSelectionOption
+          <SelectionOption
             image={Images.homeFooterQrcode}
             titre={traductions.qrcodePagePartageQrCodeTitle}
             sousTitre={traductions.qrcodePagePartageQrCodeSubTitle}
@@ -35,7 +35,7 @@ export function QrcodeAliasPageShare({
           />
           <View style={styles.gap10} />
           {/* Partager l'alias */}
-          <SbSelectionOption
+          <SelectionOption
             image={Images.iconsCircleUser}
             titre={traductions.qrcodePagePartageAliasTitle}
             sousTitre={traductions.qrcodePagePartageAliasSubTitle}

package/src/modules/search/domain/models/fonctionnalite.ts

@@ -30,6 +30,14 @@ const ACCENTS: Record<string, string> = {
   æ: 'ae',
 };
 
+/** Rubrique d'une fonctionnalité, pour grouper la liste quand rien n'est encore saisi. */
+export enum FonctionnaliteRubrique {
+  paiements = 'paiements',
+  abonnements = 'abonnements',
+  servicesBancaires = 'servicesBancaires',
+  profil = 'profil',
+}
+
 /**
  * Une fonctionnalité de l'application que l'utilisateur peut retrouver
  * depuis la recherche.
@@ -59,18 +67,66 @@ export class Fonctionnalite {
    */
   readonly ouvrir: () => void;
 
+  /** Rubrique sous laquelle elle est listée avant toute saisie. */
+  readonly rubrique: FonctionnaliteRubrique;
+
+  /** Proposée en raccourci en haut de la recherche, avant toute saisie. */
+  readonly raccourci: boolean;
+
   constructor(options: {
     icon: number;
     titre: string;
     sousTitre?: string;
     motsCles?: readonly string[];
     ouvrir: () => void;
+    rubrique?: FonctionnaliteRubrique;
+    raccourci?: boolean;
   }) {
     this.icon = options.icon;
     this.titre = options.titre;
     this.sousTitre = options.sousTitre;
     this.motsCles = options.motsCles ?? [];
     this.ouvrir = options.ouvrir;
+    this.rubrique = options.rubrique ?? FonctionnaliteRubrique.paiements;
+    this.raccourci = options.raccourci ?? false;
+  }
+
+  /**
+   * Parties de [texte] à mettre en évidence pour [recherche] : débuts de
+   * mots qui commencent par un mot saisi, sans tenir compte des accents ni
+   * des majuscules. Renvoie des intervalles [début, fin[ dans [texte],
+   * triés et sans chevauchement.
+   */
+  static correspondances(texte: string, recherche: string): [number, number][] {
+    const saisis = Fonctionnalite.normaliser(recherche)
+      .split(/[^a-z0-9]+/)
+      .filter((mot) => mot.length >= 2);
+    if (saisis.length === 0) return [];
+    // Texte normalisé caractère par caractère, avec la position d'origine
+    let t = '';
+    const origine: number[] = [];
+    for (let i = 0; i < texte.length; i++) {
+      // Espace et ponctuation deviennent un séparateur
+      const lettre = Fonctionnalite.normaliser(texte[i]);
+      const n = lettre.length === 0 ? ' ' : lettre;
+      for (const c of n) {
+        t += c;
+        origine.push(i);
+      }
+    }
+    const intervalles: [number, number][] = [];
+    for (const mot of t.matchAll(/[a-z0-9]+/g)) {
+      const debut = mot.index ?? 0;
+      const fin = debut + mot[0].length;
+      for (const saisi of saisis) {
+        if (t.startsWith(saisi, debut) || saisi.startsWith(mot[0])) {
+          const longueur = Math.min(saisi.length, fin - debut);
+          intervalles.push([origine[debut], origine[debut + longueur - 1] + 1]);
+          break;
+        }
+      }
+    }
+    return intervalles;
   }
 
   /**

package/src/modules/search/presentation/pages/search_btn_widget.tsx

@@ -0,0 +1,91 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { useEffect, useRef } from 'react';
+import { Animated, Easing, Pressable, StyleSheet, View } from 'react-native';
+
+import { useBloc } from '../../../../core/bloc_react';
+import { useTheme } from '../../../../core/theme';
+import { useAppLocalizations } from '../../../../l10n/localizations';
+import { withAlpha } from '../../../../shared/utils/color';
+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';
+
+/** Nombre de premiers affichages de l'accueil où la pastille pulse. */
+const AFFICHAGES_AVEC_PULSATION = 3;
+
+/**
+ * Bouton de recherche des fonctionnalités de la barre de l'accueil : loupe
+ * dans une pastille teintée, libellé d'accessibilité (et infobulle au
+ * toucher long sur le web). Aux trois premiers affichages de l'accueil, la
+ * pastille pulse deux fois pour attirer l'œil ; plus du tout une fois la
+ * recherche utilisée. [onPress] absent : bouton grisé.
+ */
+export function SearchBtnWidget({ onPress }: { onPress?: () => void }) {
+  const traductions = useAppLocalizations();
+  const theme = useTheme();
+  const primaire = theme.colorScheme.primary;
+  const configBloc = useBloc(ConfigBloc);
+  const pulsation = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    if (!(configBloc.state instanceof ConfigLoadedState)) return;
+    const vus = Number.parseInt(configBloc.getParamValue(ConfigKey.searchHintCount) ?? '', 10) || 0;
+    if (vus >= AFFICHAGES_AVEC_PULSATION) return;
+    configBloc.add(new ConfigChangeEvent(ConfigKey.searchHintCount, String(vus + 1)));
+    // Deux pulsations, une fois l'accueil affiché
+    const une = () =>
+      Animated.sequence([
+      Animated.timing(pulsation, { toValue: 1, duration: 900, easing: Easing.out(Easing.ease), useNativeDriver: true }),
+      Animated.timing(pulsation, { toValue: 0, duration: 0, useNativeDriver: true }),
+      ]);
+    const animation = Animated.sequence([Animated.delay(800), une(), une()]);
+    animation.start();
+    return () => animation.stop();
+  }, [configBloc, pulsation]);
+
+  // Léger grossissement au milieu de la pulsation ; onde qui s'élargit et s'efface
+  const scale = pulsation.interpolate({ inputRange: [0, 0.5, 1], outputRange: [1, 1.12, 1] });
+  const ondeScale = pulsation.interpolate({ inputRange: [0, 1], outputRange: [1, 1.4] });
+  const ondeOpacite = pulsation.interpolate({ inputRange: [0, 0.01, 1], outputRange: [0, 0.25, 0] });
+
+  return (
+    <View style={styles.zone}>
+      <Animated.View
+        pointerEvents="none"
+        style={[styles.onde, { backgroundColor: primaire, opacity: ondeOpacite, transform: [{ scale: ondeScale }] }]}
+      />
+      <Animated.View style={{ transform: [{ scale }] }}>
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={traductions.homePageSearchTooltip}
+          accessibilityState={{ disabled: onPress == null }}
+          disabled={onPress == null}
+          hitSlop={6}
+          onPress={() => {
+            // Recherche utilisée : plus de pulsation
+            if (
+              configBloc.state instanceof ConfigLoadedState &&
+              configBloc.getParamValue(ConfigKey.searchHintCount) !== String(AFFICHAGES_AVEC_PULSATION)
+            ) {
+              configBloc.add(new ConfigChangeEvent(ConfigKey.searchHintCount, String(AFFICHAGES_AVEC_PULSATION)));
+            }
+            onPress?.();
+          }}
+          style={({ pressed }) => [
+            styles.pastille,
+            { backgroundColor: withAlpha(primaire, pressed ? 0.22 : 0.12), opacity: onPress == null ? 0.4 : 1 },
+          ]}
+        >
+          <MaterialIcons name="search" size={22} color={primaire} />
+        </Pressable>
+      </Animated.View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  zone: { width: 48, height: 48, alignItems: 'center', justifyContent: 'center' },
+  onde: { position: 'absolute', width: 40, height: 40, borderRadius: 20 },
+  pastille: { width: 40, height: 40, borderRadius: 20, alignItems: 'center', justifyContent: 'center' },
+});

package/src/modules/search/presentation/pages/search_fonctionnalites.ts

@@ -5,7 +5,7 @@ import { Di } from '../../../../core/di';
 import { AppEnv } from '../../../../core/env';
 import { AppRouter, type SdkRouter } from '../../../../core/router';
 import type { AppLocalizations } from '../../../../l10n/app_localizations';
-import { Fonctionnalite } from '../../domain/models/fonctionnalite';
+import { Fonctionnalite, FonctionnaliteRubrique } from '../../domain/models/fonctionnalite';
 
 /**
  * Catalogue des fonctionnalités accessibles depuis la recherche.
@@ -34,6 +34,8 @@ export function fonctionnalitesRecherchables(
     new Fonctionnalite({
       icon: Images.arrowUp,
       titre: traductions.homeActionSend,
+      rubrique: FonctionnaliteRubrique.paiements,
+      raccourci: true,
       sousTitre: traductions.searchSendSubTitle,
       motsCles: ['envoi', 'transfert', 'payer', 'virement', 'send', 'pay', 'transfer', 'enviar', 'pagar'],
       ouvrir: () => aller(AppRouter.transactionSend),
@@ -41,6 +43,8 @@ export function fonctionnalitesRecherchables(
     new Fonctionnalite({
       icon: Images.arrowDown,
       titre: traductions.homeActionRequest,
+      rubrique: FonctionnaliteRubrique.paiements,
+      raccourci: true,
       sousTitre: traductions.searchReceiveSubTitle,
       motsCles: ['demander', 'demande', 'rtp', 'request', 'receive', 'pedir', 'receber'],
       ouvrir: () => aller(AppRouter.transactionReceive),
@@ -48,6 +52,7 @@ export function fonctionnalitesRecherchables(
     new Fonctionnalite({
       icon: Images.homeFooterQrcode,
       titre: traductions.searchQrScanTitle,
+      rubrique: FonctionnaliteRubrique.paiements,
       sousTitre: traductions.searchQrScanSubTitle,
       motsCles: ['qr', 'qrcode', 'scanner', 'scan', 'camera'],
       // Le QR scanné ouvre directement l'envoi, comme depuis l'accueil.
@@ -56,6 +61,8 @@ export function fonctionnalitesRecherchables(
     new Fonctionnalite({
       icon: Images.homeFooterQr,
       titre: traductions.qrcodePagePartageQrCodeTitle,
+      rubrique: FonctionnaliteRubrique.paiements,
+      raccourci: true,
       sousTitre: traductions.searchQrShowSubTitle,
       motsCles: ['qr', 'qrcode', 'partager', 'share', 'partilhar'],
       ouvrir: () => aller(AppRouter.qrcodeShow),
@@ -63,6 +70,7 @@ export function fonctionnalitesRecherchables(
     new Fonctionnalite({
       icon: Images.iconSend,
       titre: traductions.transactionSearchTitle,
+      rubrique: FonctionnaliteRubrique.paiements,
       sousTitre: traductions.searchTransactionsSubTitle,
       motsCles: ['historique', 'paiement', 'operation', 'releve', 'history', 'payment', 'historico', 'pagamento'],
       ouvrir: () => aller(AppRouter.transactionSearch),
@@ -70,6 +78,7 @@ export function fonctionnalitesRecherchables(
     new Fonctionnalite({
       icon: Images.iconsCloche,
       titre: traductions.searchNotificationsTitle,
+      rubrique: FonctionnaliteRubrique.paiements,
       sousTitre: traductions.searchNotificationsSubTitle,
       motsCles: ['notification', 'alerte', 'message', 'nouveau', 'alert', 'news', 'notificacao', 'alerta'],
       ouvrir: () => aller(AppRouter.notifications),
@@ -79,6 +88,8 @@ export function fonctionnalitesRecherchables(
     new Fonctionnalite({
       icon: Images.transactionPlanifier,
       titre: traductions.homeActionMoreSheetProgrammerTitle,
+      rubrique: FonctionnaliteRubrique.abonnements,
+      raccourci: true,
       sousTitre: traductions.homeActionMoreSheetProgrammerSubTitle,
       motsCles: ['programmer', 'planifier', 'recurrent', 'schedule', 'agendar'],
       ouvrir: () => aller(AppRouter.subscriptionSchedule),
@@ -86,6 +97,7 @@ export function fonctionnalitesRecherchables(
     new Fonctionnalite({
       icon: Images.homeMoreFindSubscription,
       titre: traductions.homePageToolbarTabbarAbonnement,
+      rubrique: FonctionnaliteRubrique.abonnements,
       sousTitre: traductions.searchAbonnementsSubTitle,
       motsCles: ['abonnement', 'echeance', 'programme', 'subscription', 'assinatura'],
       ouvrir: () => ouvrirOnglet(1),
@@ -93,6 +105,7 @@ export function fonctionnalitesRecherchables(
     new Fonctionnalite({
       icon: Images.homeMoreFindSubscription,
       titre: traductions.homeActionMoreSheetAbonnementTitle,
+      rubrique: FonctionnaliteRubrique.abonnements,
       sousTitre: traductions.homeActionMoreSheetAbonnementSubTitle,
       motsCles: ['abonnement', 'subscription', 'assinatura'],
       ouvrir: () => aller(AppRouter.subscriptionSubscribe),
@@ -100,6 +113,7 @@ export function fonctionnalitesRecherchables(
     new Fonctionnalite({
       icon: Images.homeMoreSplitPayments,
       titre: traductions.homeActionMoreSheetPartagerTitle,
+      rubrique: FonctionnaliteRubrique.abonnements,
       sousTitre: traductions.homeActionMoreSheetPartagerSubTitle,
       motsCles: ['partager', 'repartir', 'diviser', 'amis', 'split', 'share', 'dividir'],
       ouvrir: () => aller(AppRouter.transactionSplitPaymentTx),
@@ -109,6 +123,7 @@ export function fonctionnalitesRecherchables(
     new Fonctionnalite({
       icon: Images.iconsCircleUser,
       titre: traductions.profilePageMenuCompteTitle,
+      rubrique: FonctionnaliteRubrique.profil,
       sousTitre: traductions.searchCompteSubTitle,
       motsCles: ['profil', 'compte', 'iban', 'rib', 'profile', 'account', 'perfil', 'conta'],
       ouvrir: () => aller(AppRouter.profileCompte),
@@ -116,6 +131,7 @@ export function fonctionnalitesRecherchables(
     new Fonctionnalite({
       icon: Images.iconsSetting,
       titre: traductions.profilePageMenuParametreTitle,
+      rubrique: FonctionnaliteRubrique.profil,
       sousTitre: traductions.searchParametreSubTitle,
       motsCles: ['parametre', 'reglage', 'theme', 'langue', 'notification', 'sombre', 'settings', 'language', 'dark', 'definicoes', 'idioma'],
       ouvrir: () => aller(AppRouter.profileParametre),
@@ -126,6 +142,7 @@ export function fonctionnalitesRecherchables(
           new Fonctionnalite({
             icon: Images.iconsTheme,
             titre: traductions.searchThemeTitle,
+            rubrique: FonctionnaliteRubrique.profil,
             sousTitre: traductions.searchThemeSubTitle,
             motsCles: ['theme', 'apparence', 'sombre', 'clair', 'couleur', 'mode', 'appearance', 'dark', 'light', 'color', 'tema', 'aparencia', 'escuro', 'claro', 'cor'],
             ouvrir: () => aller(AppRouter.profileParametreTheme),
@@ -135,6 +152,7 @@ export function fonctionnalitesRecherchables(
     new Fonctionnalite({
       icon: Images.iconsCloche,
       titre: traductions.searchNotificationsParametreTitle,
+      rubrique: FonctionnaliteRubrique.profil,
       sousTitre: traductions.searchNotificationsParametreSubTitle,
       motsCles: ['notification', 'son', 'vibration', 'sonnerie', 'style', 'sound', 'vibrate', 'som', 'vibracao', 'estilo'],
       ouvrir: () => aller(AppRouter.profileParametreNotifications),
@@ -147,6 +165,7 @@ export function fonctionnalitesRecherchables(
           new Fonctionnalite({
             icon: Images.iconTransactionSendByAlias,
             titre: traductions.profilePageMenuAliasContactTitle,
+            rubrique: FonctionnaliteRubrique.profil,
             sousTitre: traductions.searchContactsSubTitle,
             motsCles: ['contact', 'alias', 'repertoire', 'contacts', 'contactos'],
             ouvrir: () => aller(AppRouter.profileContacts),
@@ -157,6 +176,7 @@ export function fonctionnalitesRecherchables(
                 new Fonctionnalite({
                   icon: Images.iconsHelp,
                   titre: traductions.profilePageMenuHelpTitle,
+                  rubrique: FonctionnaliteRubrique.profil,
                   sousTitre: traductions.searchAideSubTitle,
                   motsCles: ['aide', 'faq', 'assistance', 'support', 'help', 'ajuda'],
                   ouvrir: () => aller(AppRouter.profileHelpCenter),