@smileid/usesmileid 12.0.0-beta01

package/src/presentation/components/use_smile_id_captured_image_oval.tsx

@@ -0,0 +1,151 @@
+import { useId, useState, type ReactNode } from "react";
+import { StyleSheet, View, type LayoutChangeEvent } from "react-native";
+import Svg, {
+  ClipPath,
+  Defs,
+  Ellipse,
+  Image as SvgImage,
+} from "react-native-svg";
+import type { UseSmileIDTheme } from "../theme/theme";
+import { useUseSmileIDTheme } from "../theme/theme_context";
+import { computeScaledOvalGeometry } from "./helpers/scaled_oval_geometry";
+
+export type UseSmileIDCapturedImageOvalProps = {
+  /**
+   * Full screen width. The oval proportions are sized against the
+   * screen (not this region) so they match the live capture screen.
+   */
+  readonly screenWidth: number;
+  /** Full screen height. */
+  readonly screenHeight: number;
+  /** Local file URI (`file:///…`) of the captured selfie. */
+  readonly uri?: string;
+  /** Marks the rendered image element for tests. */
+  readonly imageTestID?: string;
+  /**
+   * Accessible name for the captured image. When set, the image is
+   * exposed to screen readers under this label; otherwise it stays
+   * decorative (the surrounding card text carries the meaning).
+   */
+  readonly imageAccessibilityLabel?: string;
+  /**
+   * Content centered on the oval rect — e.g. the processing-screen
+   * status badge. Positioned once the region has measured.
+   */
+  readonly overlayChild?: ReactNode;
+  readonly testID?: string;
+  readonly theme?: UseSmileIDTheme;
+};
+
+/**
+ * Layout region that holds the captured selfie clipped to the face
+ * oval. The region fills the leftover vertical space above the bottom
+ * card (`flex: 1`) and measures its own height; the oval is then
+ * scaled to fit so the card below it is never overlapped.
+ *
+ * The image is drawn through `react-native-svg` (`<Image>` constrained
+ * to the oval bounds, clipped by an `<Ellipse>`) — RN's `borderRadius`
+ * can't express the ~1:1.26 ellipse on Android. Outside the oval is
+ * the uniform page background; no scrim is painted.
+ */
+export function UseSmileIDCapturedImageOval(
+  props: UseSmileIDCapturedImageOvalProps,
+) {
+  const themeFromContext = useUseSmileIDTheme();
+  const theme = props.theme ?? themeFromContext;
+  const [regionHeight, setRegionHeight] = useState(0);
+  // Unique per instance so the SVG clip-path id never collides when two
+  // ovals are mounted at once (e.g. preview + processing during a
+  // navigation transition, or on React Native Web where SVG ids are
+  // document-global). `useId()` contains ':' which isn't valid in an id,
+  // so strip it.
+  const clipId = `si_oval_clip_${useId().replace(/:/g, "")}`;
+
+  const onLayout = (event: LayoutChangeEvent) => {
+    // Re-measure on rotation / split-screen so the oval scale tracks
+    // the new region height rather than freezing on first layout.
+    setRegionHeight(event.nativeEvent.layout.height);
+  };
+
+  const ready =
+    props.screenWidth > 0 && props.screenHeight > 0 && regionHeight > 0;
+  const geometry = ready
+    ? computeScaledOvalGeometry(
+        props.screenWidth,
+        props.screenHeight,
+        regionHeight,
+        theme.spacing.medium,
+      )
+    : null;
+  const visible = geometry !== null && geometry.scale > 0;
+  const ovalRect = geometry
+    ? {
+        width: geometry.ovalWidth,
+        height: geometry.ovalHeight,
+        left: geometry.ovalLeft,
+        top: geometry.ovalTop,
+      }
+    : { width: 0, height: 0, left: 0, top: 0 };
+
+  return (
+    <View style={styles.region} onLayout={onLayout} testID={props.testID}>
+      {props.uri ? (
+        <View
+          pointerEvents="none"
+          style={[styles.oval, ovalRect]}
+          testID={props.imageTestID}
+          {...(props.imageAccessibilityLabel
+            ? {
+                accessible: true,
+                accessibilityRole: "image" as const,
+                accessibilityLabel: props.imageAccessibilityLabel,
+              }
+            : {})}
+        >
+          {visible && geometry ? (
+            <Svg
+              width="100%"
+              height="100%"
+              viewBox={`0 0 ${geometry.ovalWidth} ${geometry.ovalHeight}`}
+            >
+              <Defs>
+                <ClipPath id={clipId}>
+                  <Ellipse
+                    cx={geometry.ovalWidth / 2}
+                    cy={geometry.ovalHeight / 2}
+                    rx={geometry.ovalWidth / 2}
+                    ry={geometry.ovalHeight / 2}
+                  />
+                </ClipPath>
+              </Defs>
+              <SvgImage
+                href={{ uri: props.uri }}
+                x={0}
+                y={0}
+                width={geometry.ovalWidth}
+                height={geometry.ovalHeight}
+                preserveAspectRatio="xMidYMid slice"
+                clipPath={`url(#${clipId})`}
+              />
+            </Svg>
+          ) : null}
+        </View>
+      ) : null}
+      {props.overlayChild && visible ? (
+        <View pointerEvents="box-none" style={[styles.overlay, ovalRect]}>
+          {props.overlayChild}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  region: { flex: 1 },
+  oval: { position: "absolute" },
+  overlay: {
+    position: "absolute",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

package/src/presentation/components/use_smile_id_card_surface.tsx

@@ -0,0 +1,54 @@
+import { StyleSheet, View, type StyleProp, type ViewStyle } from "react-native";
+import type { ReactNode } from "react";
+import type { UseSmileIDTheme } from "../theme/theme";
+import { useUseSmileIDTheme } from "../theme/theme_context";
+
+export type UseSmileIDCardSurfaceProps = {
+  readonly children: ReactNode;
+  readonly style?: StyleProp<ViewStyle>;
+  readonly testID?: string;
+  readonly theme?: UseSmileIDTheme;
+};
+
+const SIDE_MARGIN = 24;
+// Soft upward shadow — the card lifts off the page toward the oval
+// above it. A negative Y offset is required; Android `elevation` can
+// only cast downward, so the `boxShadow` style prop is used instead.
+// `boxShadow` renders on iOS + Android under the New Architecture
+// (RN 0.81+, enabled here); on the legacy renderer it degrades to no
+// shadow rather than an incorrect downward one.
+const UPWARD_SHADOW = "0px -12px 24px rgba(0,0,0,0.06)";
+
+/**
+ * White rounded card pinned at the bottom of the capture review
+ * surfaces (preview + processing). Carries the soft upward shadow and
+ * 24dp side margins. Intentionally has no `overflow: "hidden"` so the
+ * confirmation tiles and buttons inside keep their own press feedback.
+ */
+export function UseSmileIDCardSurface(props: UseSmileIDCardSurfaceProps) {
+  const themeFromContext = useUseSmileIDTheme();
+  const theme = props.theme ?? themeFromContext;
+  return (
+    <View
+      testID={props.testID}
+      style={[
+        styles.card,
+        {
+          backgroundColor: theme.colors.cardBackground,
+          borderRadius: theme.shapes.cardRadius,
+          padding: theme.spacing.large,
+        },
+        props.style,
+      ]}
+    >
+      {props.children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    marginHorizontal: SIDE_MARGIN,
+    boxShadow: UPWARD_SHADOW,
+  },
+});

package/src/presentation/components/use_smile_id_confirmation_buttons.tsx

@@ -0,0 +1,123 @@
+import type { ReactNode } from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import type { UseSmileIDTheme, UseSmileIDTypography } from "../theme/theme";
+import { useUseSmileIDTheme } from "../theme/theme_context";
+import { SiOutlineCheck, SiRetake } from "./icons";
+
+export type UseSmileIDConfirmationButtonsProps = {
+  readonly onAccept: () => void;
+  readonly onReject: () => void;
+  /** Visible + accessible labels (default "Retake" / "Confirm"). */
+  readonly acceptLabel?: string;
+  readonly rejectLabel?: string;
+  readonly testID?: string;
+  readonly theme?: UseSmileIDTheme;
+};
+
+const TILE = 70;
+const TILE_RADIUS = 24;
+const RETAKE_ICON = 28;
+const CONFIRM_ICON = 36;
+const ICON_LABEL_GAP = 6;
+const TILE_GAP = 40;
+
+/**
+ * Retake / Confirm pair below the preview card: two 70dp rounded tiles
+ * (icon centered) each above a caption. Retake uses the slate reject palette,
+ * Confirm the green accept palette. The tile's accessible name is the visible
+ * label; the caption is decorative.
+ */
+export function UseSmileIDConfirmationButtons(
+  props: UseSmileIDConfirmationButtonsProps,
+) {
+  const themeFromContext = useUseSmileIDTheme();
+  const theme = props.theme ?? themeFromContext;
+  return (
+    <View testID={props.testID} style={styles.row}>
+      <ConfirmationButton
+        onPress={props.onReject}
+        label={props.rejectLabel ?? "Retake"}
+        testID="si_preview_reject_button"
+        background={theme.colors.previewRejectBackground}
+        border={theme.colors.previewRejectBorder}
+        contentColor={theme.colors.previewRejectIcon}
+        caption={theme.typography.buttonCaption}
+        icon={
+          <SiRetake size={RETAKE_ICON} color={theme.colors.previewRejectIcon} />
+        }
+      />
+      <ConfirmationButton
+        onPress={props.onAccept}
+        label={props.acceptLabel ?? "Confirm"}
+        testID="si_preview_accept_button"
+        background={theme.colors.previewAcceptBackground}
+        border={theme.colors.previewAcceptBorder}
+        contentColor={theme.colors.previewAcceptIcon}
+        caption={theme.typography.buttonCaption}
+        icon={
+          <SiOutlineCheck
+            size={CONFIRM_ICON}
+            color={theme.colors.previewAcceptIcon}
+          />
+        }
+      />
+    </View>
+  );
+}
+
+function ConfirmationButton(props: {
+  readonly onPress: () => void;
+  readonly label: string;
+  readonly testID: string;
+  readonly background: string;
+  readonly border: string;
+  readonly contentColor: string;
+  readonly caption: UseSmileIDTypography["buttonCaption"];
+  readonly icon: ReactNode;
+}) {
+  return (
+    <View style={styles.item}>
+      <Pressable
+        onPress={props.onPress}
+        accessibilityRole="button"
+        accessibilityLabel={props.label}
+        testID={props.testID}
+        style={({ pressed }) => [
+          styles.tile,
+          {
+            backgroundColor: props.background,
+            borderColor: props.border,
+            opacity: pressed ? 0.85 : 1,
+          },
+        ]}
+      >
+        {props.icon}
+      </Pressable>
+      {/* Caption is decorative — the tile already carries the accessible name. */}
+      <Text
+        importantForAccessibility="no"
+        accessibilityElementsHidden
+        style={{
+          ...props.caption,
+          color: props.contentColor,
+          marginTop: ICON_LABEL_GAP,
+        }}
+      >
+        {props.label}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: { flexDirection: "row", justifyContent: "center", columnGap: TILE_GAP },
+  item: { alignItems: "center" },
+  tile: {
+    width: TILE,
+    height: TILE,
+    borderRadius: TILE_RADIUS,
+    borderWidth: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

package/src/presentation/components/use_smile_id_consent_row.tsx

@@ -0,0 +1,58 @@
+import { StyleSheet, Text, View } from "react-native";
+import type { ReactNode } from "react";
+import type { UseSmileIDTheme } from "../theme/theme";
+import { useUseSmileIDTheme } from "../theme/theme_context";
+
+export type UseSmileIDConsentRowProps = {
+  readonly label: string;
+  /** Optional leading icon — partner can pass any React node. */
+  readonly icon?: ReactNode;
+  readonly testID?: string;
+  readonly theme?: UseSmileIDTheme;
+};
+
+/**
+ * Single consent line — icon + descriptor text. Listed under
+ * "This may include processing:" on the consent screen.
+ *
+ * Layout uses `marginStart` so the icon-to-text gap mirrors in RTL
+ * locales without conditional logic at the call site.
+ */
+export function UseSmileIDConsentRow(props: UseSmileIDConsentRowProps) {
+  const themeFromContext = useUseSmileIDTheme();
+  const theme = props.theme ?? themeFromContext;
+  return (
+    <View
+      testID={props.testID}
+      style={[styles.row, { paddingVertical: theme.spacing.small }]}
+    >
+      {props.icon ? (
+        <View style={[styles.iconSlot, { marginEnd: theme.spacing.small }]}>
+          {props.icon}
+        </View>
+      ) : null}
+      <Text
+        style={{
+          ...theme.typography.body,
+          color: theme.colors.titleText,
+          flex: 1,
+        }}
+      >
+        {props.label}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  iconSlot: {
+    width: 24,
+    height: 24,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

package/src/presentation/components/use_smile_id_content_card.tsx

@@ -0,0 +1,65 @@
+import {
+  Platform,
+  StyleSheet,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from "react-native";
+import type { ReactNode } from "react";
+import type { UseSmileIDTheme } from "../theme/theme";
+import { useUseSmileIDTheme } from "../theme/theme_context";
+
+export type UseSmileIDContentCardProps = {
+  readonly children: ReactNode;
+  /** When true, the card surface uses the instruction-card tint (warm beige in light mode). */
+  readonly variant?: "card" | "instruction";
+  readonly style?: StyleProp<ViewStyle>;
+  readonly theme?: UseSmileIDTheme;
+};
+
+/**
+ * Generic card container — rounded background + soft shadow. Used by
+ * instruction cards, the bottom card on preview / processing screens,
+ * etc.
+ *
+ * Shadow is platform-conditional (`elevation` on Android,
+ * `shadowOffset/Opacity/Radius` on iOS) — RN doesn't unify these and
+ * blindly setting both makes Android render a double shadow.
+ */
+export function UseSmileIDContentCard(props: UseSmileIDContentCardProps) {
+  const themeFromContext = useUseSmileIDTheme();
+  const theme = props.theme ?? themeFromContext;
+  const variant = props.variant ?? "card";
+  return (
+    <View
+      style={[
+        styles.shadow,
+        {
+          padding: theme.spacing.medium,
+          borderRadius: theme.shapes.cardRadius,
+          backgroundColor:
+            variant === "instruction"
+              ? theme.colors.instructionCardBackground
+              : theme.colors.cardBackground,
+        },
+        props.style,
+      ]}
+    >
+      {props.children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  shadow:
+    Platform.select({
+      ios: {
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.08,
+        shadowRadius: 4,
+      },
+      android: { elevation: 2 },
+      default: {},
+    }) ?? {},
+});

package/src/presentation/components/use_smile_id_document_capture_controls.tsx

@@ -0,0 +1,155 @@
+import { Pressable, StyleSheet, View } from "react-native";
+import { defaultLightTheme } from "../theme/theme";
+import { SiGallery } from "./icons";
+import { UseSmileIDCaptureSpinner } from "./use_smile_id_capture_spinner";
+
+export type UseSmileIDDocumentCaptureControlsProps = {
+  /** Manual shutter — taps capture a still through the document pipeline. */
+  readonly showManualShutter: boolean;
+  /** Gallery upload — taps open the photo library to import a document. */
+  readonly showGallery: boolean;
+  /**
+   * Landscape: controls form a trailing-edge column; portrait: a bottom row.
+   * Driven by the measured canvas aspect (not the lock) so it follows what renders.
+   */
+  readonly isLandscape: boolean;
+  /** Disables presses (e.g. a delivery is already in flight). */
+  readonly enabled: boolean;
+  /** Capture is committing — the slot shows the progress spinner instead of shutter/gallery. */
+  readonly capturing: boolean;
+  readonly onManualShutter: () => void;
+  readonly onGallery: () => void;
+  /** Localized screen-reader label for the shutter (`si_cd_document_capture_shutter`). */
+  readonly shutterAccessibilityLabel: string;
+  /** Localized screen-reader label for the gallery button (`si_cd_document_gallery`). */
+  readonly galleryAccessibilityLabel: string;
+};
+
+const SHUTTER_SIZE = 72;
+const SHUTTER_INNER_SIZE = 56;
+const GALLERY_SIZE = 52;
+const CONTROL_GAP = 20;
+
+/**
+ * Document capture controls — manual shutter + gallery upload, a trailing-edge
+ * column in landscape and a centred bottom row in portrait (matches the capture design).
+ */
+export function UseSmileIDDocumentCaptureControls(
+  props: UseSmileIDDocumentCaptureControlsProps,
+) {
+  // Light-palette forced: overlay is locked to light mode so brand-blue reads over the dim feed.
+  const theme = defaultLightTheme;
+
+  if (!props.capturing && !props.showManualShutter && !props.showGallery) {
+    return null;
+  }
+
+  const shutter = props.showManualShutter ? (
+    <Pressable
+      onPress={props.onManualShutter}
+      disabled={!props.enabled}
+      accessibilityRole="button"
+      accessibilityLabel={props.shutterAccessibilityLabel}
+      accessibilityState={{ disabled: !props.enabled }}
+      testID="si_document_manual_shutter"
+      style={({ pressed }) => [
+        styles.shutterOuter,
+        { opacity: pressed || !props.enabled ? 0.6 : 1 },
+      ]}
+    >
+      <View style={styles.shutterInner} />
+    </Pressable>
+  ) : null;
+
+  const gallery = props.showGallery ? (
+    <Pressable
+      onPress={props.onGallery}
+      disabled={!props.enabled}
+      accessibilityRole="button"
+      accessibilityLabel={props.galleryAccessibilityLabel}
+      accessibilityState={{ disabled: !props.enabled }}
+      testID="si_document_gallery_upload"
+      style={({ pressed }) => [
+        styles.galleryButton,
+        {
+          backgroundColor: theme.colors.primary,
+          opacity: pressed || !props.enabled ? 0.6 : 1,
+        },
+      ]}
+    >
+      <SiGallery size={24} color={theme.colors.primaryForeground} />
+    </Pressable>
+  ) : null;
+
+  return (
+    <View
+      style={props.isLandscape ? styles.landscapeColumn : styles.portraitRow}
+      pointerEvents="box-none"
+      testID="si_document_capture_controls"
+    >
+      {props.capturing ? (
+        <UseSmileIDCaptureSpinner
+          color={theme.colors.ovalActive}
+          testID="si_document_capture_spinner"
+        />
+      ) : props.isLandscape ? (
+        // Landscape: shutter above gallery (trailing column).
+        <>
+          {shutter}
+          {gallery}
+        </>
+      ) : (
+        // Portrait: gallery left of shutter (bottom row).
+        <>
+          {gallery}
+          {shutter}
+        </>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  landscapeColumn: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    end: 24,
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: CONTROL_GAP,
+  },
+  portraitRow: {
+    position: "absolute",
+    start: 0,
+    end: 0,
+    bottom: 96,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: CONTROL_GAP * 1.6,
+  },
+  shutterOuter: {
+    width: SHUTTER_SIZE,
+    height: SHUTTER_SIZE,
+    borderRadius: SHUTTER_SIZE / 2,
+    borderWidth: 3,
+    borderColor: "#FFFFFF",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  shutterInner: {
+    width: SHUTTER_INNER_SIZE,
+    height: SHUTTER_INNER_SIZE,
+    borderRadius: SHUTTER_INNER_SIZE / 2,
+    backgroundColor: "#FFFFFF",
+  },
+  galleryButton: {
+    width: GALLERY_SIZE,
+    height: GALLERY_SIZE,
+    borderRadius: GALLERY_SIZE / 2,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});