@pi-spi/app 1.5.0 → 1.6.0

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

@@ -1,4 +1,4 @@
-import { Linking, Platform, StyleSheet, Text, View } from 'react-native';
+import { Linking, Platform, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
 
 import { Images } from '../../../../core/assets';
 import { AppEnv } from '../../../../core/env';
@@ -7,9 +7,10 @@ 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 { TextButton } from '../../../../shared/material/buttons';
-import { AppBar, Scaffold } from '../../../../shared/material/scaffold';
+import { Scaffold } from '../../../../shared/material/scaffold';
+import { withAlpha } from '../../../../shared/utils/color';
 import { MyPageContainer } from '../../../../shared/widgets/my_page_container';
+import { ProfileAppBar } from './profile_app_bar';
 import { ProfilePageMenu, ProfileItem } from './profile_menu';
 import { ProfilePageAvatar } from './profile_page_avatar';
 
@@ -23,7 +24,7 @@ async function launchUrl(url: string): Promise<void> {
   }
 }
 
-function menuItems(traductions: AppLocalizations): ProfileItem[] {
+function menuCompteItems(traductions: AppLocalizations): ProfileItem[] {
   const items = [
     // Compte
     new ProfileItem(Images.iconsCircleUser, traductions.profilePageMenuCompteTitle, AppRouter.profileCompte),
@@ -34,84 +35,107 @@ function menuItems(traductions: AppLocalizations): ProfileItem[] {
   if (Platform.OS !== 'web') {
     items.push(new ProfileItem(Images.iconTransactionSendByAlias, traductions.profilePageMenuAliasContactTitle, AppRouter.profileContacts));
   }
-  // Centre d'aide
-  if (AppEnv.aideLink != null && AppEnv.aideLink.length > 0) {
-    const aideLink = AppEnv.aideLink;
-    items.push(
-      new ProfileItem(
-        Images.iconsHelp,
-        traductions.profilePageMenuHelpTitle,
-        Platform.OS !== 'web' ? AppRouter.profileHelpCenter : () => void launchUrl(aideLink),
-      ),
-    );
-  }
   return items;
 }
 
-/** Profil du client (route `profile`). */
+function menuAssistanceItems(traductions: AppLocalizations): ProfileItem[] {
+  // Centre d'aide (seulement si l'hôte fournit un lien)
+  const aideLink = AppEnv.aideLink;
+  if (aideLink == null || aideLink.length === 0) return [];
+  return [
+    new ProfileItem(
+      Images.iconsHelp,
+      traductions.profilePageMenuHelpTitle,
+      Platform.OS !== 'web' ? AppRouter.profileHelpCenter : () => void launchUrl(aideLink),
+    ),
+  ];
+}
+
+/**
+ * Profil du client (route `profile`) : en-tête de l'utilisateur, menus
+ * « Mon compte » et « Assistance », puis liens légaux et version de l'app.
+ */
 export function ProfilePage() {
   const traductions = useAppLocalizations();
   const theme = useTheme();
   const router = useAppRouter();
-  const hasCgu = AppEnv.cguLink != null && AppEnv.cguLink.length > 0;
-  const hasPoc = AppEnv.pocLink != null && AppEnv.pocLink.length > 0;
-  const linkStyle = { fontSize: 12, fontWeight: '400' as const };
+  const assistance = menuAssistanceItems(traductions);
+  // CGU et politique de confidentialité optionnelles : l'hôte peut ne pas en fournir
+  const cguLink = AppEnv.cguLink;
+  const pocLink = AppEnv.pocLink;
+  const hasCgu = cguLink != null && cguLink.length > 0;
+  const hasPoc = pocLink != null && pocLink.length > 0;
+  const lienStyle = [
+    theme.textTheme.displaySmall,
+    { color: Themer.neural03Color, textDecorationLine: 'underline' as const, textAlign: 'center' as const },
+  ];
+
+  const lien = (texte: string, onPress: () => void) => (
+    <Pressable accessibilityRole="link" onPress={onPress} style={styles.lien}>
+      <Text style={lienStyle}>{texte}</Text>
+    </Pressable>
+  );
 
   return (
-    <Scaffold appBar={<AppBar onBack={() => AppRouter.pop(router)} />}>
+    <Scaffold appBar={<ProfileAppBar titre={traductions.profilePageTitle} />}>
       <MyPageContainer>
-        {/* Client connecté */}
-        <ProfilePageAvatar />
-        <View style={styles.gap20} />
-        {/* Menu */}
-        <ProfilePageMenu items={menuItems(traductions)} />
-        <View style={styles.flex} />
-        {/* CGU et politique de confidentialité (optionnels) */}
-        {(hasCgu || hasPoc) && (
-          <View style={styles.links}>
-            {hasCgu && (
-              <View style={styles.flex}>
-                <TextButton
-                  textStyle={linkStyle}
-                  onPress={() => (Platform.OS !== 'web' ? void AppRouter.push(router, AppRouter.loginCgu) : void launchUrl(AppEnv.cguLink!))}
-                >
-                  {traductions.profilePageCGU}
-                </TextButton>
-              </View>
-            )}
-            {hasCgu && hasPoc && (
-              <Text style={[theme.textTheme.displayLarge, styles.et, { color: Themer.neural03Color }]}>{traductions.coordinationEt}</Text>
-            )}
-            {hasPoc && (
-              <View style={styles.flex}>
-                <TextButton
-                  textStyle={linkStyle}
-                  onPress={() => (Platform.OS !== 'web' ? void AppRouter.push(router, AppRouter.loginPoc) : void launchUrl(AppEnv.pocLink!))}
-                >
-                  {traductions.profilePagePC}
-                </TextButton>
+        <ScrollView contentContainerStyle={styles.contenu} showsVerticalScrollIndicator={false}>
+          {/* Utilisateur connecté */}
+          <ProfilePageAvatar />
+          <View style={styles.gap28} />
+
+          {/* Compte, paramètres, contacts */}
+          <ProfilePageMenu titre={traductions.profilePageSectionCompte} items={menuCompteItems(traductions)} />
+          <View style={styles.gap24} />
+
+          {/* Aide (seulement si l'hôte fournit un lien) */}
+          {assistance.length > 0 && (
+            <>
+              <ProfilePageMenu titre={traductions.profilePageSectionAssistance} items={assistance} />
+              <View style={styles.gap24} />
+            </>
+          )}
+
+          {/* CGU et politique de confidentialité, côte à côte ou l'un sous l'autre */}
+          {(hasCgu || hasPoc) && (
+            <>
+              <View style={styles.liens}>
+                {hasCgu &&
+                  lien(traductions.profilePageCGU, () =>
+                    Platform.OS !== 'web' ? void AppRouter.push(router, AppRouter.loginCgu) : void launchUrl(cguLink),
+                  )}
+                {hasPoc &&
+                  lien(traductions.profilePagePC, () =>
+                    Platform.OS !== 'web' ? void AppRouter.push(router, AppRouter.loginPoc) : void launchUrl(pocLink),
+                  )}
               </View>
-            )}
-          </View>
-        )}
-        {/* Version (lien vers le store) */}
-        <TextButton
-          textStyle={[theme.textTheme.displaySmall, styles.version]}
-          onPress={() => void launchUrl(Platform.OS === 'ios' ? AppEnv.appstoreLink : AppEnv.playstoreLink)}
-        >
-          {`${traductions.profilePageAppVersion} ${AppEnv.version}`}
-        </TextButton>
-        <View style={styles.gap10} />
+              <View style={styles.gap10} />
+            </>
+          )}
+
+          {/* Version : ouvre la fiche de l'app sur le store */}
+          <Pressable
+            accessibilityRole="link"
+            disabled={Platform.OS === 'web'}
+            onPress={() => void launchUrl(Platform.OS === 'ios' ? AppEnv.appstoreLink : AppEnv.playstoreLink)}
+            style={[styles.version, { backgroundColor: withAlpha(Themer.neural03Color, 0.12) }]}
+          >
+            <Text style={[theme.textTheme.labelLarge, { color: Themer.neural03Color }]}>
+              {`${traductions.profilePageAppVersion} ${AppEnv.version}`}
+            </Text>
+          </Pressable>
+        </ScrollView>
       </MyPageContainer>
     </Scaffold>
   );
 }
 
 const styles = StyleSheet.create({
-  flex: { flex: 1 },
-  links: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 20, paddingVertical: 10 },
-  et: { paddingHorizontal: 5 },
-  version: { color: '#2196F3', textDecorationLine: 'underline' },
+  contenu: { paddingTop: 4, paddingBottom: 16 },
+  liens: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'center', alignItems: 'center', columnGap: 12 },
+  lien: { paddingHorizontal: 4, paddingVertical: 6, borderRadius: 6 },
+  version: { alignSelf: 'center', paddingHorizontal: 12, paddingVertical: 6, borderRadius: 20 },
   gap10: { height: 10 },
-  gap20: { height: 20 },
+  gap24: { height: 24 },
+  gap28: { height: 28 },
 });

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

@@ -1,6 +1,7 @@
 import { MaterialIcons } from '@expo/vector-icons';
-import { useState } from 'react';
+import { useId, useState } from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
+import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
 
 import { useBloc } from '../../../../core/bloc_react';
 import { Di } from '../../../../core/di';
@@ -9,16 +10,18 @@ import { Themer, useTheme } from '../../../../core/theme';
 import { useValueListenable } from '../../../../core/value_notifier';
 import { useAppLocalizations } from '../../../../l10n/localizations';
 import { showModalBottomSheet } from '../../../../shared/material/overlays';
-import { AliasWidget } from '../../../../shared/widgets/alias_widget';
+import { AliasPI } from '../../../../shared/models/alias_pi';
+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 { AliasBloc } from '../../../alias/presentation/bloc/alias_bloc';
 import { AliasExistState } from '../../../alias/presentation/bloc/alias_state';
 import { ProfileAvatar } from '../../domain/profile_avatar';
 
-const AVATAR_SIZE = 64;
+const AVATAR_SIZE = 68;
 
-/** En-tête du profil : nom, alias, et photo (modifiable). */
+/** En-tête du profil : photo (modifiable), nom et alias. */
 export function ProfilePageAvatar() {
   const traductions = useAppLocalizations();
   const theme = useTheme();
@@ -27,6 +30,7 @@ export function ProfilePageAvatar() {
   const [aliasCle] = useState(() => (aliasBloc.state instanceof AliasExistState ? aliasBloc.state.alias.getCle() : ''));
   const user = Di.config.user;
   const avatar = useValueListenable(ProfileAvatar.value);
+  const gradientId = `entete${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
 
   const showImagePicker = () =>
     void showModalBottomSheet(router, {
@@ -63,49 +67,86 @@ export function ProfilePageAvatar() {
       ),
     });
 
+  const primaire = theme.colorScheme.primary;
+
   return (
-    <View style={styles.row}>
-      {/* Nom et alias */}
-      <View style={styles.flex}>
-        <Text numberOfLines={1} style={theme.textTheme.titleSmall}>
-          {user.nomComplet()}
-        </Text>
-        <View style={styles.gap8} />
-        <AliasWidget alias={aliasCle} name={user.nomComplet()} canCopy textAlign="left" />
-      </View>
-      <View style={styles.gap8w} />
+    <View style={styles.entete}>
+      {/* Dégradé doux de la couleur du thème */}
+      <Svg style={StyleSheet.absoluteFill} preserveAspectRatio="none">
+        <Defs>
+          <LinearGradient id={gradientId} x1="0" y1="0" x2="1" y2="1">
+            <Stop offset="0" stopColor={primaire} stopOpacity={0.22} />
+            <Stop offset="1" stopColor={primaire} stopOpacity={0.06} />
+          </LinearGradient>
+        </Defs>
+        <Rect width="100%" height="100%" fill={`url(#${gradientId})`} />
+      </Svg>
+
       {/* Avatar */}
       <Pressable accessibilityRole="imagebutton" onPress={showImagePicker}>
-        <View style={styles.shadow}>
-          <AvatarWidget userInitiales={user.initiales()} photo={avatar} size={AVATAR_SIZE} rounded />
+        <View style={[styles.avatar, { backgroundColor: theme.colorScheme.surface }]}>
+          <AvatarWidget userInitiales={user.initiales()} photo={avatar} size={AVATAR_SIZE - 6} rounded />
         </View>
         {/* Badge caméra */}
-        <View style={[styles.camera, { backgroundColor: theme.colorScheme.primary, borderColor: theme.scaffoldBackgroundColor }]}>
-          <MaterialIcons name="photo-camera" size={14} color="white" />
+        <View style={[styles.camera, { backgroundColor: primaire, borderColor: theme.colorScheme.surface }]}>
+          <MaterialIcons name="photo-camera" size={15} color={theme.colorScheme.onPrimary} />
         </View>
       </Pressable>
+
+      {/* Nom */}
+      <Text numberOfLines={2} style={[theme.textTheme.headlineMedium, styles.nom]}>
+        {user.nomComplet()}
+      </Text>
+
+      {/* Alias de l'utilisateur, copié d'un appui */}
+      <Pressable
+        accessibilityRole="button"
+        onPress={() => void ClipboardWidget.setData(aliasCle)}
+        style={[styles.alias, { backgroundColor: withAlpha(theme.colorScheme.surface, 0.7) }]}
+      >
+        <MaterialIcons name="badge" size={15} color={primaire} />
+        <Text numberOfLines={1} style={[theme.textTheme.displayMedium, styles.aliasTexte]}>
+          {AliasPI.formatPhoneNumber(aliasCle)}
+        </Text>
+        <MaterialIcons name="content-copy" size={14} color={primaire} />
+      </Pressable>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
-  row: { flexDirection: 'row', alignItems: 'center' },
-  flex: { flex: 1 },
-  gap8: { height: 8 },
-  gap8w: { width: 8 },
-  shadow: { borderRadius: AVATAR_SIZE / 2, boxShadow: '0 3px 8px rgba(0,0,0,0.15)' },
+  entete: {
+    alignItems: 'center',
+    paddingTop: 24,
+    paddingBottom: 20,
+    paddingHorizontal: 20,
+    borderRadius: 24,
+    overflow: 'hidden',
+  },
+  avatar: { padding: 3, borderRadius: AVATAR_SIZE / 2, boxShadow: '0 3px 12px rgba(0,0,0,0.12)' },
   camera: {
     position: 'absolute',
-    right: -4,
-    bottom: -4,
-    width: 28,
-    height: 28,
-    borderRadius: 14,
+    right: 0,
+    bottom: 0,
+    width: 30,
+    height: 30,
+    borderRadius: 15,
     borderWidth: 2,
     alignItems: 'center',
     justifyContent: 'center',
     boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
   },
+  nom: { marginTop: 14, textAlign: 'center' },
+  alias: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 12,
+    paddingHorizontal: 12,
+    paddingVertical: 5,
+    borderRadius: 20,
+    maxWidth: '100%',
+  },
+  aliasTexte: { flexShrink: 1, marginHorizontal: 6 },
   deleteTile: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, minHeight: 56 },
   deleteText: { flex: 1, marginHorizontal: 16 },
 });

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

@@ -10,13 +10,14 @@ import { Themer, useTheme } from '../../../../core/theme';
 import { useAppLocalizations } from '../../../../l10n/localizations';
 import { Card } from '../../../../shared/material/card';
 import { showModalBottomSheet } from '../../../../shared/material/overlays';
-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 type { PhoneContact } from '../../../contacts/domain/phone_contact';
 import { ContactBloc } from '../../../contacts/presentation/bloc/contact_bloc';
 import { ContactSearchEvent } from '../../../contacts/presentation/bloc/contact_event';
 import { ContactAliasListWidget } from '../../../contacts/presentation/pages/contact_list_alias_widget';
+import { ProfileAppBar } from './profile_app_bar';
 import { ProfilePageContactsActions } from './profile_page_contacts_actions';
 
 /**
@@ -42,11 +43,10 @@ export function ProfilePageContacts({ contactPI }: { contactPI?: ContactPI | nul
   };
 
   return (
-    <Scaffold appBar={<AppBar onBack={() => AppRouter.pop(router)} />}>
+    <Scaffold appBar={<ProfileAppBar titre={traductions.profileContactPageTitle} />}>
       <MyPageContainer>
         <Pressable style={styles.flex} onPress={Keyboard.dismiss} accessible={false}>
-          <Text style={theme.textTheme.titleSmall}>{traductions.profileContactPageTitle}</Text>
-          <View style={styles.gap10} />
+          <View style={styles.gap8} />
           {/* Recherche d'un contact */}
           <Card>
             <View style={[styles.search, { backgroundColor: theme.inputDecorationTheme.fillColor }]}>
@@ -99,6 +99,7 @@ export function ProfilePageContacts({ contactPI }: { contactPI?: ContactPI | nul
 }
 
 const styles = StyleSheet.create({
+  gap8: { height: 8 },
   flex: { flex: 1 },
   search: { height: 36, flexDirection: 'row', alignItems: 'center', paddingHorizontal: 12 },
   input: { flex: 1, marginLeft: 8, paddingVertical: 0 },

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

@@ -1,6 +1,8 @@
 import { Platform } from 'react-native';
 
 import { Images } from '../../../../core/assets';
+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';
@@ -65,6 +67,13 @@ export function fonctionnalitesRecherchables(
       motsCles: ['historique', 'paiement', 'operation', 'releve', 'history', 'payment', 'historico', 'pagamento'],
       ouvrir: () => aller(AppRouter.transactionSearch),
     }),
+    new Fonctionnalite({
+      icon: Images.iconsCloche,
+      titre: traductions.searchNotificationsTitle,
+      sousTitre: traductions.searchNotificationsSubTitle,
+      motsCles: ['notification', 'alerte', 'message', 'nouveau', 'alert', 'news', 'notificacao', 'alerta'],
+      ouvrir: () => aller(AppRouter.notifications),
+    }),
 
     // Abonnements
     new Fonctionnalite({
@@ -111,6 +120,25 @@ export function fonctionnalitesRecherchables(
       motsCles: ['parametre', 'reglage', 'theme', 'langue', 'notification', 'sombre', 'settings', 'language', 'dark', 'definicoes', 'idioma'],
       ouvrir: () => aller(AppRouter.profileParametre),
     }),
+    // Masqué si l'hôte n'autorise pas le client à changer de thème
+    ...(Di.config.appConfig.canChangeTheme
+      ? [
+          new Fonctionnalite({
+            icon: Images.iconsTheme,
+            titre: traductions.searchThemeTitle,
+            sousTitre: traductions.searchThemeSubTitle,
+            motsCles: ['theme', 'apparence', 'sombre', 'clair', 'couleur', 'mode', 'appearance', 'dark', 'light', 'color', 'tema', 'aparencia', 'escuro', 'claro', 'cor'],
+            ouvrir: () => aller(AppRouter.profileParametreTheme),
+          }),
+        ]
+      : []),
+    new Fonctionnalite({
+      icon: Images.iconsCloche,
+      titre: traductions.searchNotificationsParametreTitle,
+      sousTitre: traductions.searchNotificationsParametreSubTitle,
+      motsCles: ['notification', 'son', 'vibration', 'sonnerie', 'style', 'sound', 'vibrate', 'som', 'vibracao', 'estilo'],
+      ouvrir: () => aller(AppRouter.profileParametreNotifications),
+    }),
     // Sur le web, le profil n'a pas ces pages : pas de contacts,
     // et l'aide est un lien externe.
     ...(web
@@ -123,13 +151,18 @@ export function fonctionnalitesRecherchables(
             motsCles: ['contact', 'alias', 'repertoire', 'contacts', 'contactos'],
             ouvrir: () => aller(AppRouter.profileContacts),
           }),
-          new Fonctionnalite({
-            icon: Images.iconsHelp,
-            titre: traductions.profilePageMenuHelpTitle,
-            sousTitre: traductions.searchAideSubTitle,
-            motsCles: ['aide', 'faq', 'assistance', 'support', 'help', 'ajuda'],
-            ouvrir: () => aller(AppRouter.profileHelpCenter),
-          }),
+          // Seulement si l'hôte fournit un lien d'aide, comme dans le profil
+          ...((AppEnv.aideLink?.length ?? 0) > 0
+            ? [
+                new Fonctionnalite({
+                  icon: Images.iconsHelp,
+                  titre: traductions.profilePageMenuHelpTitle,
+                  sousTitre: traductions.searchAideSubTitle,
+                  motsCles: ['aide', 'faq', 'assistance', 'support', 'help', 'ajuda'],
+                  ouvrir: () => aller(AppRouter.profileHelpCenter),
+                }),
+              ]
+            : []),
         ]),
   ];
 }

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

@@ -289,7 +289,7 @@ export function SearchPage({
                 </Text>
               </View>
             ) : (
-              <ScrollView keyboardDismissMode="on-drag" keyboardShouldPersistTaps="handled" contentContainerStyle={styles.liste}>
+              <ScrollView keyboardShouldPersistTaps="handled" contentContainerStyle={styles.liste}>
                 <MenuActionsWidget items={resultats.map(ligne)} />
               </ScrollView>
             )}

package/src/modules/transactions/presentation/pages/transaction_rtp/transaction_rtp_page.tsx

@@ -17,6 +17,7 @@ import { DateFormat } from '../../../../../shared/utils/date_format';
 import { AliasWidget } from '../../../../../shared/widgets/alias_widget';
 import { formatMontant } from '../../../../../shared/widgets/amount_widget';
 import { ClipboardWidget } from '../../../../../shared/widgets/clipboard_widget';
+import { ErrorCardWidget } from '../../../../../shared/widgets/error_card_widget';
 import { ErrorPage, ErrorType } from '../../../../../shared/widgets/error_page';
 import { CustomLoadingDialog, LoadingPage } from '../../../../../shared/widgets/loading_page';
 import { NotificationDialog, NotificationType } from '../../../../../shared/widgets/notification_dialog';
@@ -260,9 +261,7 @@ export function TransactionRtpPage({
           {toPay && !canDoAction() && (
             <>
               <View style={styles.gap16} />
-              <Text style={[theme.textTheme.bodySmall, styles.warning, { color: Themer.systemErrorColor }]}>
-                {traductions.transactionRtpWarningMessage}
-              </Text>
+              <ErrorCardWidget icon="shield" message={traductions.transactionRtpWarningMessage} />
             </>
           )}
         </ScrollView>
@@ -487,7 +486,6 @@ const styles = StyleSheet.create({
   row: { flexDirection: 'row', alignItems: 'center' },
   value: { flex: 1, paddingLeft: 10 },
   right: { textAlign: 'right' },
-  warning: { marginLeft: 8, marginRight: 20, marginTop: 2, marginBottom: 5 },
   gap3: { height: 3 },
   gap10: { height: 10 },
   gap16: { height: 16 },

package/src/modules/transactions/presentation/pages/transaction_rtp/transaction_rtp_page_actions.tsx

@@ -1,5 +1,6 @@
 import { MaterialIcons } from '@expo/vector-icons';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
+import type { ComponentProps } from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
 
 import { BlocProvider, useBloc } from '../../../../../core/bloc_react';
 import { Di } from '../../../../../core/di';
@@ -9,6 +10,7 @@ import { useAppLocalizations } from '../../../../../l10n/localizations';
 import { ElevatedButton, FilledTonalButton } from '../../../../../shared/material/buttons';
 import { showModalBottomSheet } from '../../../../../shared/material/overlays';
 import { FrequenceCommand } from '../../../../../shared/models/frequence_command';
+import { ErrorCardWidget } from '../../../../../shared/widgets/error_card_widget';
 import type { Subscription } from '../../../../subscription/domain/models/subscription';
 import { TransactionStatut, type Transaction } from '../../../domain/models/transaction';
 import { TransactionSendCommand } from '../../../domain/models/transaction_send/transaction_send_command';
@@ -80,18 +82,23 @@ export function TransactionRtpPageActions({
       ),
     });
 
-  const warning = (message: string) => (
-    <Text style={[theme.inputDecorationTheme.errorStyle, styles.warning]}>{`⚠ ${message}`}</Text>
+  const warning = (message: string, icon: ComponentProps<typeof ErrorCardWidget>['icon']) => (
+    <ErrorCardWidget message={message} icon={icon} />
   );
 
   if (isExpired(tx)) {
-    return <View style={styles.padding}>{warning(traductions.transactionRtpExpiredWarningMessage)}</View>;
+    return <View style={styles.padding}>{warning(traductions.transactionRtpExpiredWarningMessage, 'timer-off')}</View>;
   }
 
   const scheduleActive = canDoAction && sub == null;
   return (
     <View style={styles.padding}>
-      {isSoldeInsuffisant && warning(traductions.transactionFormAmountInvalid)}
+      {isSoldeInsuffisant && (
+        <>
+          {warning(traductions.transactionFormAmountInvalid, 'account-balance-wallet')}
+          <View style={styles.gap12} />
+        </>
+      )}
       <View style={styles.row}>
         {tx.canSchedule() && sub == null && (
           <>
@@ -128,7 +135,7 @@ export function TransactionRtpPageActions({
 
 const styles = StyleSheet.create({
   padding: { paddingVertical: 10, paddingHorizontal: 10 },
-  warning: { marginLeft: 8, marginTop: 2, marginBottom: 5 },
+  gap12: { height: 12 },
   row: { flexDirection: 'row', alignItems: 'center' },
   flex: { flex: 1 },
   button: { height: 56 },

package/src/shared/utils/color.ts

@@ -0,0 +1,14 @@
+/**
+ * Équivalent de `Color.withValues(alpha:)` : la couleur [color] avec
+ * l'opacité [alpha] (0 à 1). Accepte `#RGB`, `#RRGGBB` et `#RRGGBBAA` ;
+ * toute autre forme est rendue telle quelle.
+ */
+export function withAlpha(color: string, alpha: number): string {
+  let hex = /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.exec(color)?.[1];
+  if (hex == null) return color;
+  if (hex.length === 3) hex = hex.replace(/./g, (c) => c + c);
+  const a = Math.round(Math.min(1, Math.max(0, alpha)) * 255)
+    .toString(16)
+    .padStart(2, '0');
+  return `#${hex.slice(0, 6)}${a}`;
+}

package/src/shared/widgets/error_card_widget.tsx

@@ -0,0 +1,58 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import type { ComponentProps } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { Themer, useTheme } from '../../core/theme';
+import { Card } from '../material/card';
+
+/** Couleur d'erreur du thème avec une opacité (0 à 1). */
+function erreur(alpha: number): string {
+  const hex = Math.round(alpha * 255).toString(16).padStart(2, '0');
+  return `${Themer.systemErrorColor}${hex}`;
+}
+
+/**
+ * Carte d'avertissement : fond teinté, bordure et icône dans la couleur
+ * d'erreur du thème, suivies du `message`.
+ */
+export function ErrorCardWidget({
+  message,
+  icon = 'warning-amber',
+}: {
+  message: string;
+  icon?: ComponentProps<typeof MaterialIcons>['name'];
+}) {
+  const theme = useTheme();
+  const texte = theme.textTheme.bodySmall;
+  return (
+    <Card style={styles.card}>
+      <View style={styles.row}>
+        <View style={styles.icon}>
+          <MaterialIcons name={icon} size={18} color={Themer.systemErrorColor} />
+        </View>
+        <Text
+          style={[
+            texte,
+            styles.message,
+            texte?.fontSize != null && { lineHeight: texte.fontSize * 1.4 },
+          ]}
+        >
+          {message}
+        </Text>
+      </View>
+    </Card>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    margin: 0,
+    backgroundColor: erreur(0.08),
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: erreur(0.35),
+  },
+  row: { flexDirection: 'row', alignItems: 'flex-start', padding: 14 },
+  icon: { padding: 6, borderRadius: 999, backgroundColor: erreur(0.15), marginRight: 12 },
+  message: { flex: 1, textAlign: 'left', color: Themer.systemErrorColor },
+});