@pi-spi/app 2.1.0 → 2.2.0

package/src/shared/widgets/frequence_select_widget.tsx

@@ -1,6 +1,6 @@
 import { MaterialIcons } from '@expo/vector-icons';
-import { useReducer, useState, type ReactNode } from 'react';
-import { Pressable, ScrollView, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
+import { useReducer, type ComponentProps, type ReactNode } from 'react';
+import { LayoutAnimation, Platform, Pressable, ScrollView, StyleSheet, Text, UIManager, View } from 'react-native';
 
 import { AppRouter, useAppRouter } from '../../core/router';
 import { Themer, useTheme } from '../../core/theme';
@@ -9,7 +9,16 @@ import { useAppLocalizations } from '../../l10n/localizations';
 import { ElevatedButton } from '../material/buttons';
 import { Card } from '../material/card';
 import { Frequence, type FrequenceCommand } from '../models/frequence_command';
+import { withAlpha } from '../utils/color';
 import { NumberIncWidget } from './number_inc_widget';
+import { SelectionLigne, SelectionOption, SelectionPastille, SelectionBoutons, SelectionSheet } from './selection';
+
+// Animations de mise en page sur Android (déjà actives sur iOS)
+if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+type IconName = ComponentProps<typeof MaterialIcons>['name'];
 
 export function frequenceText(freq: Frequence, traductions: AppLocalizations): string {
   switch (freq) {
@@ -24,8 +33,59 @@ export function frequenceText(freq: Frequence, traductions: AppLocalizations): s
   }
 }
 
-/** Unité de la périodicité (« jours », « semaine »...), au singulier si [periodicite] vaut 1. */
-export function periodiciteText(traductions: AppLocalizations, freq: Frequence, periodicite?: number | null): string {
+/** Icône de la pastille d'une fréquence (`null` : une seule fois). */
+export function frequenceIcone(freq: Frequence | null | undefined): IconName {
+  switch (freq) {
+    case Frequence.quotidienne:
+      return 'today';
+    case Frequence.hebdomadaire:
+      return 'view-week';
+    case Frequence.mensuelle:
+      return 'calendar-month';
+    case Frequence.annuelle:
+      return 'event-repeat';
+    default:
+      return 'looks-one';
+  }
+}
+
+/** Unité de la fréquence, pour accorder « Tous les » / « Toutes les ». */
+export function periodiciteUnite(freq: Frequence): string {
+  switch (freq) {
+    case Frequence.quotidienne:
+      return 'jour';
+    case Frequence.hebdomadaire:
+      return 'semaine';
+    case Frequence.mensuelle:
+      return 'mois';
+    default:
+      return 'annee';
+  }
+}
+
+/**
+ * Unité de la périodicité (« jours », « semaine »...), au singulier si
+ * [periodicite] vaut 1. Sans personnalisation ([enableCustom] faux) :
+ * « Chaque jour », « Chaque semaine »...
+ */
+export function periodiciteText(
+  traductions: AppLocalizations,
+  freq: Frequence,
+  periodicite?: number | null,
+  enableCustom = true,
+): string {
+  if (!enableCustom) {
+    switch (freq) {
+      case Frequence.quotidienne:
+        return traductions.transactionFormScheduleFrequenceJour;
+      case Frequence.hebdomadaire:
+        return traductions.transactionFormScheduleFrequenceSemaine;
+      case Frequence.mensuelle:
+        return traductions.transactionFormScheduleFrequenceMois;
+      default:
+        return traductions.transactionFormScheduleFrequenceAnnuee;
+    }
+  }
   const one = periodicite === 1;
   switch (freq) {
     case Frequence.quotidienne:
@@ -41,9 +101,33 @@ export function periodiciteText(traductions: AppLocalizations, freq: Frequence,
   }
 }
 
+/** Fréquence calculée : « Tous les 2 jours », « Chaque semaine »... */
+export function frequenceResume(
+  traductions: AppLocalizations,
+  freq: Frequence,
+  periodicite?: number | null,
+  enableCustom = true,
+): string {
+  if (enableCustom && periodicite != null) {
+    return traductions.transactionFormScheduleFrequenceSelected(
+      String(periodicite),
+      periodiciteText(traductions, freq, periodicite),
+      periodiciteUnite(freq),
+    );
+  }
+  return periodiciteText(traductions, freq, periodicite, false);
+}
+
+/** Anime le prochain changement de mise en page (apparitions, disparitions). */
+function animer() {
+  LayoutAnimation.configureNext(LayoutAnimation.create(250, 'easeInEaseOut', 'opacity'));
+}
+
 /**
- * Choix de la fréquence : une seule fois, jour, semaine, mois, année, ou
- * « sur mesure » (tous les N jours/semaines/...).
+ * Feuille de choix de la fréquence : une seule fois, jour, semaine, mois,
+ * année, ou « sur mesure » (tous les N jours/semaines/...). Hors sur
+ * mesure, toucher une fréquence la choisit et ferme la feuille ; en sur
+ * mesure, « Valider » enregistre.
  */
 export function FrequenceSelectWidget({
   title,
@@ -52,6 +136,7 @@ export function FrequenceSelectWidget({
   onChange,
   hideOnce = false,
   hideCustom = false,
+  enableCustom = true,
 }: {
   title: string;
   command: FrequenceCommand;
@@ -59,19 +144,21 @@ export function FrequenceSelectWidget({
   onChange: (value: FrequenceCommand) => void;
   hideOnce?: boolean;
   hideCustom?: boolean;
+  /** Si on autorise la fréquence sur mesure */
+  enableCustom?: boolean;
 }) {
   const traductions = useAppLocalizations();
   const theme = useTheme();
   const router = useAppRouter();
-  const { height } = useWindowDimensions();
   const [, rebuild] = useReducer((x: number) => x + 1, 0);
-  // La périodicité à l'ouverture (affichage de « supprimer le sur-mesure »)
-  const [initialPeriodicite] = useState(selected.periodicite);
 
   const uneSeuleFois = !hideOnce && selected.periodicite == null;
+  const surMesure = enableCustom && selected.periodicite != null;
+
   const choose = (freq: Frequence | undefined) => {
     selected.value = freq;
-    if (selected.periodicite == null) {
+    // Hors sur mesure, toucher une fréquence la valide
+    if (!surMesure) {
       onChange(selected);
       AppRouter.pop(router);
     } else {
@@ -80,129 +167,162 @@ export function FrequenceSelectWidget({
   };
 
   return (
-    <View style={[styles.sheet, { backgroundColor: theme.colorScheme.surface, maxHeight: height * 0.8 }]}>
-      <ScrollView contentContainerStyle={styles.content}>
-        {/* Titre */}
-        <Text style={theme.textTheme.headlineMedium}>{title}</Text>
-        <View style={styles.gap20} />
-
-        {/* Supprimer le sur-mesure */}
-        {initialPeriodicite != null && !hideCustom && (
-          <CustomCard
-            icon={<MaterialIcons name="close" size={18} color={Themer.systemErrorColor} />}
-            onPress={() => {
-              // Une seule fois
-              selected.value = undefined;
-              selected.periodicite = undefined;
-              selected.done = false;
-              onChange(selected);
-              AppRouter.pop(router);
-            }}
-          />
-        )}
-
-        {/* Une fois, jour, semaine, mois, année */}
-        <Card>
-          <View style={styles.cardPadding}>
+    <SelectionSheet
+      titre={title}
+      hauteurMax={0.85}
+      contenu={
+        <>
+          <ScrollView bounces={false} style={styles.flexShrink} contentContainerStyle={styles.content}>
+            {/* Une fois, jour, semaine, mois, année */}
             {uneSeuleFois && (
-              <Option
-                label={traductions.transactionFormScheduleFrequenceUnefois}
-                checked={selected.value == null}
-                onPress={() => {
-                  selected.value = undefined;
-                  onChange(selected);
-                  AppRouter.pop(router);
-                }}
+              <SelectionLigne
+                pastille={<SelectionPastille icone={frequenceIcone(null)} choisie={selected.value == null} />}
+                texte={traductions.transactionFormScheduleFrequenceUnefois}
+                choisie={selected.value == null}
+                onPress={() => choose(undefined)}
               />
             )}
             {frequences.map((freq) => (
-              <Option key={freq} label={frequenceText(freq, traductions)} checked={freq === selected.value} onPress={() => choose(freq)} />
-            ))}
-          </View>
-        </Card>
-        <View style={styles.gap20} />
-
-        {/* Sur mesure */}
-        {selected.periodicite == null && !hideCustom && (
-          <CustomCard
-            icon={<MaterialIcons name="arrow-forward-ios" size={18} color={theme.colorScheme.onSurface} />}
-            onPress={() => {
-              // Quotidienne, tous les 2 jours au minimum
-              selected.value = Frequence.quotidienne;
-              selected.periodicite = 2;
-              onChange(selected);
-              AppRouter.pop(router);
-            }}
-          />
-        )}
-
-        {/* Périodicité */}
-        {selected.periodicite != null && (
-          <>
-            <View style={styles.row}>
-              <Text style={[theme.textTheme.headlineMedium, styles.flex]}>{traductions.transactionFormSchedulePeriodiciteLabel}</Text>
-              <NumberIncWidget
-                number={selected.periodicite}
-                onChange={(value) => {
-                  selected.periodicite = value;
-                  rebuild();
-                }}
+              <SelectionLigne
+                key={freq}
+                pastille={<SelectionPastille icone={frequenceIcone(freq)} choisie={freq === selected.value} />}
+                texte={frequenceText(freq, traductions)}
+                choisie={freq === selected.value}
+                onPress={() => choose(freq)}
               />
-            </View>
+            ))}
+
+            {/* Option Sur mesure : bascule dans la feuille, sans la fermer */}
+            {selected.periodicite == null && !hideCustom && (
+              <View style={styles.marge12}>
+                <SelectionOption
+                  icone="tune"
+                  titre={traductions.transactionFormScheduleFrequenceSurMesure}
+                  onPress={() => {
+                    // Fréquence actuelle (quotidienne par défaut), tous les 2 au minimum ;
+                    // le formulaire est prévenu à la validation
+                    animer();
+                    selected.value ??= Frequence.quotidienne;
+                    selected.periodicite = 2;
+                    selected.done = false;
+                    rebuild();
+                  }}
+                />
+              </View>
+            )}
+
+            {/* Périodicité sur mesure */}
+            {surMesure && (
+              <Card style={[styles.carte, styles.marge16]}>
+                <View style={styles.carteContenu}>
+                  {/* Sur mesure et bouton pour le supprimer */}
+                  <View style={styles.row}>
+                    <MaterialIcons name="tune" size={18} color={theme.colorScheme.primary} />
+                    <Text style={[theme.textTheme.displayLarge, styles.surMesure]}>
+                      {traductions.transactionFormScheduleFrequenceSurMesure}
+                    </Text>
+                    {!hideCustom && (
+                      <Pressable
+                        hitSlop={10}
+                        accessibilityRole="button"
+                        onPress={() => {
+                          // Revient aux fréquences de base, sans fermer la feuille ;
+                          // la fréquence choisie est gardée
+                          animer();
+                          selected.periodicite = undefined;
+                          selected.done = false;
+                          onChange(selected);
+                          rebuild();
+                        }}
+                        style={styles.fermer}
+                      >
+                        <MaterialIcons name="close" size={20} color={Themer.systemErrorColor} />
+                      </Pressable>
+                    )}
+                  </View>
+                  {/* Périodicité : boutons réduire et augmenter */}
+                  <View style={[styles.row, styles.periodicite]}>
+                    <Text style={[theme.textTheme.displayMedium, styles.flex, { color: Themer.neural03Color }]}>
+                      {traductions.transactionFormSchedulePeriodiciteLabel}
+                    </Text>
+                    <NumberIncWidget
+                      number={selected.periodicite!}
+                      onChange={(value) => {
+                        selected.periodicite = value;
+                        rebuild();
+                      }}
+                    />
+                  </View>
+                </View>
+              </Card>
+            )}
+
+            {/* Fréquence calculée */}
             {selected.value != null && (
-              <Text style={[styles.right, { color: Themer.successColor }]}>
-                {traductions.transactionFormScheduleFrequenceSelected(
-                  String(selected.periodicite),
-                  periodiciteText(traductions, selected.value, selected.periodicite),
-                )}
-              </Text>
+              <View style={styles.marge16}>
+                <FrequenceResume texte={frequenceResume(traductions, selected.value, selected.periodicite, enableCustom)} />
+              </View>
             )}
-            <View style={styles.gap20} />
-            <ElevatedButton
-              onPress={() => {
-                selected.done = true;
-                onChange(selected);
-                AppRouter.pop(router);
-              }}
-            >
-              {traductions.popupSelectDateBtnValider}
-            </ElevatedButton>
-          </>
-        )}
-      </ScrollView>
-    </View>
-  );
-}
+          </ScrollView>
 
-/** Option « Sur mesure » */
-function CustomCard({ icon, onPress }: { icon: ReactNode; onPress: () => void }) {
-  const traductions = useAppLocalizations();
-  return (
-    <Card>
-      <View style={styles.cardPadding}>
-        <Option label={traductions.transactionFormScheduleFrequenceSurMesure} trailing={icon} onPress={onPress} />
-      </View>
-    </Card>
+          {/* Bouton valider : seulement en sur mesure */}
+          {surMesure && (
+            <SelectionBoutons
+              boutons={[
+                <ElevatedButton
+                  key="valider"
+                  onPress={() => {
+                    selected.done = true;
+                    onChange(selected);
+                    AppRouter.pop(router);
+                  }}
+                >
+                  {traductions.popupSelectDateBtnValider}
+                </ElevatedButton>,
+              ]}
+            />
+          )}
+        </>
+      }
+    />
   );
 }
 
-function Option({ label, checked, trailing, onPress }: { label: string; checked?: boolean; trailing?: ReactNode; onPress: () => void }) {
+/** Fréquence calculée, mise en évidence */
+function FrequenceResume({ texte }: { texte: ReactNode }) {
   const theme = useTheme();
   return (
-    <Pressable accessibilityRole="button" onPress={onPress} style={styles.option}>
-      <Text style={[theme.textTheme.bodyLarge, styles.flex]}>{label}</Text>
-      {trailing ?? (checked ? <MaterialIcons name="check" size={18} color={theme.colorScheme.onSurface} /> : null)}
-    </Pressable>
+    <View
+      style={[
+        styles.resume,
+        { backgroundColor: withAlpha(Themer.successColor, 0.08), borderColor: withAlpha(Themer.successColor, 0.25) },
+      ]}
+    >
+      <MaterialIcons name="event-repeat" size={20} color={Themer.successColor} />
+      <Text style={[theme.textTheme.displayLarge, styles.resumeTexte, { color: Themer.successColor }]}>{texte}</Text>
+    </View>
   );
 }
 
 const styles = StyleSheet.create({
-  sheet: { borderRadius: 20, overflow: 'hidden' },
-  content: { padding: 20 },
-  cardPadding: { paddingHorizontal: 15 },
-  option: { flexDirection: 'row', alignItems: 'center', minHeight: 48 },
-  row: { flexDirection: 'row', alignItems: 'center' },
+  flexShrink: { flexShrink: 1 },
   flex: { flex: 1 },
-  right: { textAlign: 'right' },
-  gap20: { height: 20 },
+  content: { paddingHorizontal: 20, paddingTop: 4, paddingBottom: 16 },
+  marge12: { marginTop: 12 },
+  marge16: { marginTop: 16 },
+  carte: { margin: 0 },
+  carteContenu: { paddingLeft: 14, paddingRight: 6, paddingTop: 6, paddingBottom: 12 },
+  row: { flexDirection: 'row', alignItems: 'center' },
+  surMesure: { flex: 1, marginLeft: 8, fontWeight: '700' },
+  fermer: { padding: 8 },
+  periodicite: { marginTop: 4, paddingRight: 8 },
+  resume: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+    borderRadius: 14,
+    borderWidth: 1,
+  },
+  resumeTexte: { flex: 1, marginLeft: 10, fontWeight: '600' },
 });

package/src/shared/widgets/image_select_widget.tsx

@@ -4,11 +4,11 @@ import { ScrollView, StyleSheet, Text, View } from 'react-native';
 
 import { Themer, useTheme } from '../../core/theme';
 import { useAppLocalizations } from '../../l10n/localizations';
-import { SbSelectionOption, SelectionSheet } from './selection';
+import { SelectionOption, SelectionSheet } from './selection';
 
 /**
  * Feuille de choix d'une image : prendre une photo, la choisir dans la
- * galerie, puis les [otherActions] (ex. SbSelectionOption « Supprimer »).
+ * galerie, puis les [otherActions] (ex. SelectionOption « Supprimer »).
  * [onSelect] reçoit l'URI locale de l'image (ou `null` si l'utilisateur
  * annule).
  */
@@ -45,14 +45,14 @@ export function ImageSelectWidget({
 
   const actions: ReactNode[] = [
     // Prendre une photo avec l'appareil photo
-    <SbSelectionOption
+    <SelectionOption
       key="camera"
       icone="photo-camera"
       titre={traductions.imageSelectCamera}
       onPress={() => void pickImage('camera')}
     />,
     // Sélectionner une photo depuis la galerie
-    <SbSelectionOption
+    <SelectionOption
       key="galerie"
       icone="photo-library"
       titre={traductions.imageSelectGalerie}

package/src/shared/widgets/input_text.tsx

@@ -10,6 +10,8 @@ export type CustomTextInputProps = {
   preffix?: ReactNode;
   suffix?: ReactNode;
   suffixIcon?: ReactNode;
+  /** Toujours affiché au début du champ (ex. indicatif du pays). */
+  prefixIcon?: ReactNode;
   value?: string;
   defaultValue?: string;
   onChange?: (value: string) => void;
@@ -77,6 +79,7 @@ export const CustomTextInput: ForwardRefExoticComponent<CustomTextInputProps & R
           },
         ]}
       >
+        {props.prefixIcon}
         {props.preffix}
         <View style={styles.field}>
           {hasLabel && <FloatingLabel text={props.labelText!} floating={floating} restingTop={(HEIGHT - 2) / 2 - 12} />}

package/src/shared/widgets/notification_dialog.tsx

@@ -40,6 +40,8 @@ export type NotificationDialogProps = {
   animatedImage?: number;
   btnAction?: () => void;
   btns?: NotificationBtn[];
+  /** `true` : la feuille se ferme aussi par le bouton retour */
+  canPop?: boolean;
 };
 
 /**
@@ -58,6 +60,7 @@ export function NotificationDialog({
   animatedImage,
   btnAction,
   btns,
+  canPop = false,
 }: NotificationDialogProps) {
   const theme = useTheme();
   const router = useAppRouter();
@@ -65,7 +68,7 @@ export function NotificationDialog({
   const close = () => AppRouter.pop(router);
 
   return (
-    <PopScope canPop={false}>
+    <PopScope canPop={canPop}>
       <SelectionSheet
         hauteurMax={0.8}
         contenu={

package/src/shared/widgets/pin_entete.tsx

@@ -0,0 +1,74 @@
+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 { withAlpha } from '../utils/color';
+
+/** En-tête des pages de création et de modification du code PIN : pastille avec [icone], [titre] (facultatif) et [sousTitre] centrés. */
+export function PinEntete({
+  icone,
+  titre,
+  sousTitre,
+  compact = false,
+}: {
+  icone: ComponentProps<typeof MaterialIcons>['name'];
+  titre?: string;
+  sousTitre: string;
+  compact?: boolean;
+}) {
+  const theme = useTheme();
+  const primaire = theme.colorScheme.primary;
+  const taille = compact ? 56 : 72;
+  return (
+    <View style={pageStyles.entete}>
+      <View style={[pageStyles.pastille, { width: taille, height: taille, borderRadius: taille / 2, backgroundColor: withAlpha(primaire, 0.12) }]}>
+        <MaterialIcons name={icone} size={taille * 0.45} color={primaire} />
+      </View>
+      <View style={{ height: compact ? 10 : 14 }} />
+      {titre != null && (
+        <>
+          <Text style={[theme.textTheme.headlineSmall, pageStyles.centre, pageStyles.gras]}>{titre}</Text>
+          <View style={pageStyles.gap6} />
+        </>
+      )}
+      <Text style={[theme.textTheme.displayMedium, pageStyles.centre, { color: Themer.neural03Color }]}>{sousTitre}</Text>
+    </View>
+  );
+}
+
+/** Bandeau d'erreur (ou de succès, avec [succes]) sous les points du code PIN ; rien si [message] est vide. */
+export function PinMessage({ message, succes = false }: { message?: string | null; succes?: boolean }) {
+  const theme = useTheme();
+  if (message == null || message.length === 0) return null;
+  const couleur = succes ? Themer.successColor : theme.colorScheme.error;
+  return (
+    <View
+      accessibilityLiveRegion="polite"
+      style={[pageStyles.message, { backgroundColor: withAlpha(couleur, 0.08), borderColor: withAlpha(couleur, 0.25) }]}
+    >
+      <MaterialIcons name={succes ? 'check-circle-outline' : 'error-outline'} size={20} color={couleur} />
+      <Text style={[theme.textTheme.bodyMedium, pageStyles.messageTexte, { color: couleur }]}>{message}</Text>
+    </View>
+  );
+}
+
+const pageStyles = StyleSheet.create({
+  gap6: { height: 6 },
+  entete: { alignItems: 'center' },
+  pastille: { alignItems: 'center', justifyContent: 'center' },
+  centre: { textAlign: 'center' },
+  gras: { fontWeight: '600' },
+  message: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'stretch',
+    marginTop: 15,
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+    borderRadius: 14,
+    borderWidth: 1,
+  },
+  messageTexte: { marginLeft: 10, fontWeight: '500', flexShrink: 1, textAlign: 'center' },
+});