@pi-spi/app 0.0.0-stage → 1.2.1

package/src/shared/widgets/qr_image/qr_image_widget.tsx

@@ -0,0 +1,220 @@
+import { Image } from 'expo-image';
+import QRCode from 'qrcode';
+import { useMemo, useState, type ReactNode } from 'react';
+import { StyleSheet, Text, useWindowDimensions, View, type LayoutChangeEvent } from 'react-native';
+import Svg, { Circle, Rect } from 'react-native-svg';
+
+import { Images } from '../../../core/assets';
+import { QrDataShape, QrEyeShape, type QrImageOptions } from './types';
+
+/** Écart entre modules (équivalent `gapless: false` du painter Flutter). */
+const GAP_SIZE = 0.25;
+/** Taille d'un motif de repérage, en modules. */
+const FINDER_PATTERN_LIMIT = 7;
+
+/**
+ * Affiche un QR code PI-SPI conforme EMV à partir d'une payload (≈
+ * `QrImageWidget` du SDK Flutter) : niveau de correction L, version
+ * automatique, modules ronds et yeux carrés par défaut, logo PI-SPI au
+ * centre, label et logo d'en-tête optionnels.
+ */
+export function QrImageWidget({
+  payload,
+  qrImageOptions = {},
+  error,
+}: {
+  payload: string;
+  qrImageOptions?: QrImageOptions;
+  error?: ReactNode;
+}) {
+  const { width } = useWindowDimensions();
+  const isTablet = width >= 600;
+  // Taille par défaut du QR si qrSize non fourni
+  const size = qrImageOptions.qrSize ?? (width / 12) * (isTablet ? 6 : 10);
+
+  const qr = (
+    <QrView payload={payload} options={qrImageOptions} fallbackSize={size} error={error} />
+  );
+
+  if (qrImageOptions.label == null) {
+    return <View style={[styles.center, qrImageOptions.qrSize != null ? { width: size } : styles.fill]}>{qr}</View>;
+  }
+  return (
+    <View style={[styles.center, { width: size }]}>
+      {/* Logo */}
+      {(qrImageOptions.displayHeadLogo ?? true) && (
+        <Image source={Images.logoSpiLight} style={styles.headLogo} contentFit="contain" />
+      )}
+      {/* Qrcode */}
+      <View style={{ width: size, height: size }}>{qr}</View>
+      <View style={styles.gap8} />
+      {/* nom */}
+      <Text style={[styles.label, qrImageOptions.label.textStyle]}>{qrImageOptions.label.text}</Text>
+    </View>
+  );
+}
+
+function QrView({
+  payload,
+  options,
+  fallbackSize,
+  error,
+}: {
+  payload: string;
+  options: QrImageOptions;
+  fallbackSize: number;
+  error?: ReactNode;
+}) {
+  // Le QR occupe le carré disponible (comme le CustomPaint Flutter dans son parent).
+  const [measured, setMeasured] = useState<number | null>(null);
+  const onLayout = (e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout;
+    const side = Math.min(width, height || width);
+    if (side > 0 && side !== measured) setMeasured(side);
+  };
+
+  const matrix = useMemo(() => {
+    try {
+      const code = QRCode.create(payload, { errorCorrectionLevel: 'L' });
+      return { count: code.modules.size, isDark: (row: number, col: number) => code.modules.get(row, col) === 1 };
+    } catch {
+      return null;
+    }
+  }, [payload]);
+
+  if (matrix == null) return <>{error ?? null}</>;
+  // Taille du conteneur pas encore connue : on attend la mesure plutôt que
+  // de dessiner une première fois à une taille par défaut (saut visible).
+  if (measured == null && options.qrSize == null) {
+    return <View onLayout={onLayout} style={styles.fill} />;
+  }
+
+  const margin = options.margin ?? 10;
+  const total = measured ?? fallbackSize;
+  const containerSize = Math.max(0, total - margin * 2);
+  const dataColor = options.data?.color ?? '#000000';
+  const eyeColor = options.eye?.color ?? '#000000';
+  const dataShape = options.data?.shape ?? QrDataShape.circle;
+  const eyeShape = options.eye?.shape ?? QrEyeShape.square;
+  const iconSize = options.icon?.size ?? 60;
+
+  // Métriques (identiques à _PaintMetrics du painter Flutter)
+  const count = matrix.count;
+  const gapTotal = (count - 1) * GAP_SIZE;
+  const pixelSize = Math.round(((containerSize - gapTotal) / count) * 2) / 2;
+  const innerContentSize = pixelSize * count + gapTotal;
+  const inset = (containerSize - innerContentSize) / 2;
+
+  const isFinder = (row: number, col: number) =>
+    (row < FINDER_PATTERN_LIMIT && col < FINDER_PATTERN_LIMIT) ||
+    (row < FINDER_PATTERN_LIMIT && col >= count - FINDER_PATTERN_LIMIT) ||
+    (row >= count - FINDER_PATTERN_LIMIT && col < FINDER_PATTERN_LIMIT);
+
+  const modules: ReactNode[] = [];
+  for (let row = 0; row < count; row++) {
+    for (let col = 0; col < count; col++) {
+      if (isFinder(row, col) || !matrix.isDark(row, col)) continue;
+      const left = inset + col * (pixelSize + GAP_SIZE);
+      const top = inset + row * (pixelSize + GAP_SIZE);
+      modules.push(
+        dataShape === QrDataShape.square ? (
+          <Rect key={`${row}-${col}`} x={left} y={top} width={pixelSize} height={pixelSize} fill={dataColor} />
+        ) : (
+          <Circle key={`${row}-${col}`} cx={left + pixelSize / 2} cy={top + pixelSize / 2} r={pixelSize / 2} fill={dataColor} />
+        ),
+      );
+    }
+  }
+
+  // Motifs de repérage (yeux) : contour, intérieur transparent, point central
+  const totalGap = (FINDER_PATTERN_LIMIT - 1) * GAP_SIZE;
+  const radius = FINDER_PATTERN_LIMIT * pixelSize + totalGap - pixelSize;
+  const strokeAdjust = pixelSize / 2;
+  const edgePos = inset + innerContentSize - (radius + strokeAdjust);
+  const dotSize = radius - pixelSize * 2 - 2 * strokeAdjust;
+  const eyes = [
+    { x: inset + strokeAdjust, y: inset + strokeAdjust },
+    { x: inset + strokeAdjust, y: edgePos },
+    { x: edgePos, y: inset + strokeAdjust },
+  ].map(({ x, y }, i) => (
+    <Eye
+      key={i}
+      x={x}
+      y={y}
+      radius={radius}
+      pixelSize={pixelSize}
+      strokeAdjust={strokeAdjust}
+      dotSize={dotSize}
+      color={eyeColor}
+      shape={eyeShape}
+    />
+  ));
+
+  return (
+    <View
+      onLayout={onLayout}
+      style={[styles.fill, { padding: margin, backgroundColor: options.qrBgColor ?? 'transparent' }]}
+    >
+      <Svg width={containerSize} height={containerSize}>
+        {eyes}
+        {modules}
+      </Svg>
+      {/* Icône intégrée au centre */}
+      <View pointerEvents="none" style={[StyleSheet.absoluteFill, styles.center]}>
+        <Image source={options.icon?.image ?? Images.iconsQr} style={{ width: iconSize, height: iconSize }} contentFit="contain" />
+      </View>
+    </View>
+  );
+}
+
+function Eye({
+  x,
+  y,
+  radius,
+  pixelSize,
+  strokeAdjust,
+  dotSize,
+  color,
+  shape,
+}: {
+  x: number;
+  y: number;
+  radius: number;
+  pixelSize: number;
+  strokeAdjust: number;
+  dotSize: number;
+  color: string;
+  shape: QrEyeShape;
+}) {
+  const round = shape === QrEyeShape.circle;
+  return (
+    <>
+      <Rect
+        x={x}
+        y={y}
+        width={radius}
+        height={radius}
+        rx={round ? radius / 2 : 0}
+        fill="none"
+        stroke={color}
+        strokeWidth={pixelSize}
+      />
+      <Rect
+        x={x + pixelSize + strokeAdjust}
+        y={y + pixelSize + strokeAdjust}
+        width={dotSize}
+        height={dotSize}
+        rx={round ? dotSize / 2 : 0}
+        fill={color}
+      />
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  center: { alignItems: 'center', justifyContent: 'center' },
+  fill: { width: '100%', aspectRatio: 1 },
+  headLogo: { height: 40, width: 140, marginVertical: 5 },
+  gap8: { height: 8 },
+  label: { fontSize: 13, fontWeight: '500', textAlign: 'center' },
+});

package/src/shared/widgets/qr_image/types.ts

@@ -0,0 +1,37 @@
+/** Forme des « yeux » (motifs de repérage) du QR. */
+export enum QrEyeShape {
+  square = 'square',
+  circle = 'circle',
+}
+
+/** Forme des modules de données du QR. */
+export enum QrDataShape {
+  square = 'square',
+  circle = 'circle',
+}
+
+/** Style des yeux du QR. */
+export type QrImageOptionsEye = { shape?: QrEyeShape; color?: string };
+
+/** Style des modules de données du QR. */
+export type QrImageOptionsData = { shape?: QrDataShape; color?: string };
+
+/** Icône intégrée au centre du QR (logo PI-SPI par défaut). */
+export type QrImageOptionsIcon = { image?: number; size?: number };
+
+/** Label affiché sous le QR. */
+export type QrImageOptionsLabel = { text: string; textStyle?: import('react-native').TextStyle };
+
+/** Options de configuration de `QrImageWidget`. */
+export type QrImageOptions = {
+  icon?: QrImageOptionsIcon;
+  /** Taille du QR ; responsive si absente. */
+  qrSize?: number;
+  qrBgColor?: string;
+  /** Marge autour du QR (10 par défaut). */
+  margin?: number;
+  label?: QrImageOptionsLabel;
+  data?: QrImageOptionsData;
+  eye?: QrImageOptionsEye;
+  displayHeadLogo?: boolean;
+};

package/src/shared/widgets/select_date_widget.tsx

@@ -0,0 +1,151 @@
+import { useState, type ReactNode } from 'react';
+import { ScrollView, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { AppRouter, useAppRouter, type SdkRouter } from '../../core/router';
+import { Themer, useTheme } from '../../core/theme';
+import type { AppLocalizations } from '../../l10n/app_localizations';
+import { useAppLocalizations } from '../../l10n/localizations';
+import { ElevatedButton } from '../material/buttons';
+import { showModalBottomSheet } from '../material/overlays';
+import { DateFormat } from '../utils/date_format';
+import { CalendarDatePicker } from './calendar_date_picker';
+
+/** Feuille avec un calendrier : titre, calendrier, plage choisie, « Valider ». */
+function DateSheet({ title, subTitle, children, footer }: { title: string; subTitle?: string; children: ReactNode; footer?: ReactNode }) {
+  const theme = useTheme();
+  const router = useAppRouter();
+  const traductions = useAppLocalizations();
+  const insets = useSafeAreaInsets();
+  const { height } = useWindowDimensions();
+  return (
+    <View style={[styles.sheet, { backgroundColor: theme.colorScheme.surface, maxHeight: height * 0.65, paddingBottom: insets.bottom }]}>
+      <View style={styles.title}>
+        <Text style={theme.textTheme.headlineMedium}>{title}</Text>
+        <View style={styles.gap12} />
+        {subTitle != null && <Text style={theme.textTheme.displayMedium}>{subTitle}</Text>}
+      </View>
+      <ScrollView style={styles.flexShrink}>{children}</ScrollView>
+      {footer}
+      <View style={styles.button}>
+        <ElevatedButton onPress={() => AppRouter.pop(router)}>{traductions.popupSelectDateBtnValider}</ElevatedButton>
+      </View>
+    </View>
+  );
+}
+
+/** Choix d'une date (≈ `SelectDateWidget.show`) ; `null` si rien n'est choisi. */
+export async function showSelectDate(
+  router: SdkRouter,
+  options: { title: string; subTitle?: string; selected?: Date | null; firstDate?: Date | null; lastDate?: Date | null },
+): Promise<Date | null> {
+  let date: Date | null = null;
+  await showModalBottomSheet(router, {
+    themed: true,
+    builder: () => <SelectDate {...options} onSelect={(d) => (date = d)} />,
+  });
+  return date;
+}
+
+function SelectDate({
+  title,
+  subTitle,
+  selected,
+  firstDate,
+  lastDate,
+  onSelect,
+}: {
+  title: string;
+  subTitle?: string;
+  selected?: Date | null;
+  firstDate?: Date | null;
+  lastDate?: Date | null;
+  onSelect: (date: Date) => void;
+}) {
+  const [value, setValue] = useState<Date | null>(null);
+  return (
+    <DateSheet title={title} subTitle={subTitle}>
+      <CalendarDatePicker
+        type="single"
+        value={[value]}
+        firstDate={firstDate}
+        lastDate={lastDate}
+        currentDate={selected ?? firstDate ?? new Date()}
+        onValueChanged={(dates) => {
+          setValue(dates[0]);
+          onSelect(dates[0]);
+        }}
+      />
+    </DateSheet>
+  );
+}
+
+/** Description d'une plage de dates (« Du ... au ... » ou « À partir du ... »). */
+export function plageText(traductions: AppLocalizations, formatter: DateFormat, dateDebut: Date, dateFin?: Date | null): string {
+  if (dateFin != null) {
+    return traductions.transactionFormScheduleDateRange(formatter.format(dateDebut), formatter.format(dateFin));
+  }
+  return traductions.transactionFormScheduleDateSelected(formatter.format(dateDebut));
+}
+
+/** Choix d'une plage de dates (≈ `SelectDateRangeWidget.show`) : [début] ou [début, fin], vide si rien. */
+export async function showSelectDateRange(
+  router: SdkRouter,
+  options: { title: string; dateDebut?: Date | null; dateFin?: Date | null; firstDate?: Date | null },
+): Promise<Date[]> {
+  let dates: Date[] = [];
+  await showModalBottomSheet(router, {
+    themed: true,
+    builder: () => <SelectDateRange {...options} onSelect={(d) => (dates = d)} />,
+  });
+  return dates;
+}
+
+function SelectDateRange({
+  title,
+  dateDebut: initialDebut,
+  dateFin: initialFin,
+  firstDate,
+  onSelect,
+}: {
+  title: string;
+  dateDebut?: Date | null;
+  dateFin?: Date | null;
+  firstDate?: Date | null;
+  onSelect: (dates: Date[]) => void;
+}) {
+  const traductions = useAppLocalizations();
+  const [dateDebut, setDateDebut] = useState<Date | null>(initialDebut ?? null);
+  const [dateFin, setDateFin] = useState<Date | null>(initialFin ?? null);
+  const formatter = new DateFormat('d MMMM yyyy', traductions.localeName);
+  return (
+    <DateSheet
+      title={title}
+      footer={
+        dateDebut != null ? (
+          <Text style={[styles.plage, { color: Themer.successColor }]}>{plageText(traductions, formatter, dateDebut, dateFin)}</Text>
+        ) : null
+      }
+    >
+      <CalendarDatePicker
+        type="range"
+        value={[dateDebut, dateFin]}
+        firstDate={firstDate}
+        onValueChanged={(dates) => {
+          setDateDebut(dates[0]);
+          setDateFin(dates[1] ?? null);
+          onSelect(dates);
+        }}
+      />
+    </DateSheet>
+  );
+}
+
+const styles = StyleSheet.create({
+  sheet: { borderRadius: 20, overflow: 'hidden' },
+  title: { paddingHorizontal: 20, paddingTop: 30, paddingBottom: 15 },
+  flexShrink: { flexShrink: 1 },
+  gap12: { height: 12 },
+  plage: { textAlign: 'center', paddingHorizontal: 20 },
+  button: { paddingHorizontal: 20, paddingVertical: 10 },
+});

package/src/shared/widgets/skeleton_widget.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useRef } from 'react';
+import { Animated, Easing } from 'react-native';
+
+import { Themer } from '../../core/theme';
+
+/** Bloc de chargement animé (rectangle, ou cercle si [radius] est fourni). */
+export function SkeletonWidget({ height = 15, width = 200, radius }: { height?: number; width?: number; radius?: number }) {
+  const progress = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(progress, { toValue: 1, duration: 1000, easing: Easing.linear, useNativeDriver: false }),
+        Animated.timing(progress, { toValue: 0, duration: 1000, easing: Easing.linear, useNativeDriver: false }),
+      ]),
+    );
+    animation.start();
+    return () => animation.stop();
+  }, [progress]);
+
+  const backgroundColor = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [Themer.neural02Color, Themer.neural01Color],
+  });
+
+  // cercle (taille d'un CircleAvatar Material) ou rectangle
+  const shape =
+    radius != null
+      ? { width: radius * 2 || 40, height: radius * 2 || 40, borderRadius: radius || 20 }
+      : { width, height, borderRadius: 10 };
+  return <Animated.View style={[shape, { backgroundColor }]} />;
+}

package/src/shared/widgets/webview_resource_error_widget.tsx

@@ -0,0 +1,55 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { Image } from 'expo-image';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { Images } from '../../core/assets';
+import { useTheme } from '../../core/theme';
+import { ElevatedButton } from '../material/buttons';
+
+/** Page d'erreur d'une page web (pas de réseau...) avec un bouton « Réessayer ». */
+export function WebResourceErrorPage({
+  title,
+  message,
+  btnText,
+  btnAction,
+}: {
+  title: string;
+  message: string;
+  btnText: string;
+  btnAction: () => void;
+}) {
+  const theme = useTheme();
+  const color = theme.elevatedButtonTheme.textStyle.color as string | undefined;
+  return (
+    <View style={[styles.container, { backgroundColor: theme.colorScheme.surface }]}>
+      <Image source={theme.brightness === 'dark' ? Images.logoSpiDark : Images.logoSpiLight} style={styles.logo} contentFit="fill" />
+      <View style={styles.gap24} />
+      <MaterialIcons name="cloud-off" size={90} color={theme.colorScheme.primary} style={styles.icon} />
+      <View style={styles.gap24} />
+      <Text style={[theme.textTheme.headlineMedium, styles.center]}>{title}</Text>
+      <View style={styles.gap12} />
+      <Text style={[theme.textTheme.bodyMedium, styles.center]}>{message}</Text>
+      <View style={styles.gap30} />
+      <ElevatedButton onPress={btnAction} style={styles.button}>
+        <View style={styles.row}>
+          <MaterialIcons name="refresh" size={20} color={color} />
+          <View style={styles.gap8} />
+          <Text style={theme.elevatedButtonTheme.textStyle}>{btnText}</Text>
+        </View>
+      </ElevatedButton>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, alignItems: 'center', justifyContent: 'center', paddingHorizontal: 24 },
+  logo: { width: 200, height: 70 },
+  icon: { opacity: 0.6 },
+  center: { textAlign: 'center' },
+  row: { flexDirection: 'row', alignItems: 'center' },
+  button: { paddingHorizontal: 32, paddingVertical: 14, borderRadius: 12, alignSelf: 'center' },
+  gap8: { width: 8 },
+  gap12: { height: 12 },
+  gap24: { height: 24 },
+  gap30: { height: 30 },
+});