@smileid/usesmileid 12.0.0-beta01

package/src/presentation/components/use_smile_id_capture_content.tsx

@@ -0,0 +1,344 @@
+import { memo, useState, type ReactNode } from "react";
+import {
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type LayoutChangeEvent,
+} from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import type { ScanHeadTurnDirection } from "@smileid/usesmileid_bridge";
+import { CaptureType } from "../../core/models/ml_config";
+import { defaultLightTheme, type UseSmileIDTheme } from "../theme/theme";
+import { useUseSmileIDTheme } from "../theme/theme_context";
+import {
+  isDocumentCaptureActive,
+  UseSmileIDOverlayState,
+  type UseSmileIDOverlayState as OverlayState,
+} from "../state/use_smile_id_overlay_state";
+import { SiOutlineClose } from "./icons";
+import type { SiKey } from "../../l10n/strings_en";
+import { useUseSmileIDLocalizations } from "../../l10n/use_smile_id_localizations_provider";
+import { resolveFeedbackCopy } from "../screen/helpers/capture_screen_helpers";
+import { UseSmileIDAttribution } from "./use_smile_id_attribution";
+import { UseSmileIDBackButton } from "./use_smile_id_back_button";
+import { UseSmileIDButton } from "./use_smile_id_button";
+import { UseSmileIDDocumentOverlay } from "./use_smile_id_document_overlay";
+import { UseSmileIDDocumentCaptureControls } from "./use_smile_id_document_capture_controls";
+import { UseSmileIDFaceOverlay } from "./use_smile_id_face_overlay";
+import { UseSmileIDCaptureInstructionAnimation } from "./use_smile_id_capture_instruction_animation";
+import { UseSmileIDEnhancedSmartSelfieDirectionAnimation } from "./use_smile_id_enhanced_smart_selfie_direction_animation";
+import { UseSmileIDEnhancedSmartSelfieFullAnimation } from "./use_smile_id_enhanced_smart_selfie_full_animation";
+import { FaceOvalDefaults } from "./face_oval_defaults";
+
+/** Immutable snapshot the capture renderer draws from (one per scan-state update). */
+export type UseSmileIDCaptureContentState = {
+  readonly captureType: CaptureType;
+  readonly overlayState: OverlayState;
+  readonly enableEnhancedLiveness: boolean;
+  /** Active ESS head-turn direction, null outside a turn. */
+  readonly animationDirection: ScanHeadTurnDirection | null;
+  /** `true` while the head pose holds {@link animationDirection} — switches the cue grey→green. */
+  readonly poseMatched: boolean;
+  /** Settled (debounced) si_* feedback key; null hides the feedback bubble. */
+  readonly feedbackKey: SiKey | null;
+  /** Show the Start Capture control (pre-flight instruction state only). */
+  readonly showCaptureButton: boolean;
+  readonly knownIdAspectRatio?: number;
+  /** Document manual shutter availability (capture-mode + fallback-timer driven). Ignored for selfie. */
+  readonly showManualShutter?: boolean;
+  /** Document gallery-upload availability (`allowGalleryUpload`). Ignored for selfie. */
+  readonly showGalleryUpload?: boolean;
+};
+
+export type UseSmileIDCaptureContentProps = {
+  readonly state: UseSmileIDCaptureContentState;
+  /** 0..1 — bottom-to-top oval fill; always 0 under Enhanced Smart Selfie. */
+  readonly captureProgress: number;
+  /** Camera preview slot — previews/tests inject an inert placeholder. */
+  readonly cameraPreview: ReactNode;
+  readonly onStartCapture: () => void;
+  readonly startCaptureEnabled: boolean;
+  readonly onBack?: (() => void) | undefined;
+  /** Close/cancel the whole flow (document capture chrome — top-right X). */
+  readonly onClose?: (() => void) | undefined;
+  readonly showAttribution: boolean;
+  readonly startButton?:
+    | ((props: { onClick: () => void; enabled: boolean }) => ReactNode)
+    | undefined;
+  /** Manual shutter tap (document capture). Captures a still + delivers it. */
+  readonly onManualShutter?: (() => void) | undefined;
+  /** Gallery upload tap (document capture). Opens the photo library. */
+  readonly onGalleryUpload?: (() => void) | undefined;
+  /** Disables document controls while a manual/gallery delivery is in flight. */
+  readonly documentControlsEnabled?: boolean | undefined;
+  readonly theme?: UseSmileIDTheme | undefined;
+};
+
+/** Stable no-op for control callbacks that are gated off when absent. */
+const noop = (): void => {};
+
+function UseSmileIDCaptureContentInner(props: UseSmileIDCaptureContentProps) {
+  const themeFromContext = useUseSmileIDTheme();
+  const theme = props.theme ?? themeFromContext;
+  const loc = useUseSmileIDLocalizations();
+  const { state } = props;
+
+  const [canvas, setCanvas] = useState<{ width: number; height: number }>({
+    width: 0,
+    height: 0,
+  });
+  const onCanvasLayout = (e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout;
+    // Bail out on size-stable passes; a fresh object would re-render the overlay tree for nothing.
+    setCanvas((previous) =>
+      previous.width === width && previous.height === height
+        ? previous
+        : { width, height },
+    );
+  };
+
+  const isSelfie = state.captureType === CaptureType.selfie;
+  const feedback = state.feedbackKey
+    ? resolveFeedbackCopy(state.feedbackKey, loc)
+    : null;
+  const startCustom = props.startButton;
+
+  return (
+    <View
+      style={[styles.root, { backgroundColor: theme.colors.offBlack }]}
+      testID="si_capture_screen"
+      onLayout={onCanvasLayout}
+    >
+      {props.cameraPreview}
+
+      {canvas.width > 0 && canvas.height > 0 ? (
+        <>
+          {isSelfie ? (
+            <UseSmileIDFaceOverlay
+              state={state.overlayState}
+              progress={props.captureProgress}
+              containerWidth={canvas.width}
+              containerHeight={canvas.height}
+              enableEnhancedLiveness={state.enableEnhancedLiveness}
+              theme={theme}
+            />
+          ) : (
+            <UseSmileIDDocumentOverlay
+              state={state.overlayState}
+              containerWidth={canvas.width}
+              containerHeight={canvas.height}
+              theme={theme}
+              {...(state.knownIdAspectRatio !== undefined
+                ? { knownIdAspectRatio: state.knownIdAspectRatio }
+                : {})}
+              {...(feedback !== null ? { feedbackText: feedback } : {})}
+            />
+          )}
+          {isSelfie && !state.enableEnhancedLiveness ? (
+            <UseSmileIDCaptureInstructionAnimation
+              feedbackKey={state.feedbackKey}
+              containerWidth={canvas.width}
+              containerHeight={canvas.height}
+            />
+          ) : null}
+          {isSelfie && state.enableEnhancedLiveness ? (
+            state.animationDirection !== null ? (
+              <UseSmileIDEnhancedSmartSelfieDirectionAnimation
+                direction={state.animationDirection}
+                poseMatched={state.poseMatched}
+                containerWidth={canvas.width}
+                containerHeight={canvas.height}
+              />
+            ) : state.overlayState === UseSmileIDOverlayState.IDLE ? (
+              // Demo plays only while the Start Capture button shows (IDLE, incl.
+              // timeout-retry); the INSTRUCTION positioning phase shows no animation.
+              <UseSmileIDEnhancedSmartSelfieFullAnimation
+                containerWidth={canvas.width}
+                containerHeight={canvas.height}
+              />
+            ) : null
+          ) : null}
+          {/* Document control slot: shutter + gallery while positioning;
+              progress spinner once capture commits (they never coexist). */}
+          {!isSelfie ? (
+            <UseSmileIDDocumentCaptureControls
+              capturing={isDocumentCaptureActive(state.overlayState)}
+              showManualShutter={
+                (state.showManualShutter ?? false) &&
+                props.onManualShutter !== undefined &&
+                !isDocumentCaptureActive(state.overlayState)
+              }
+              showGallery={
+                (state.showGalleryUpload ?? false) &&
+                props.onGalleryUpload !== undefined &&
+                !isDocumentCaptureActive(state.overlayState)
+              }
+              isLandscape={canvas.width > canvas.height}
+              enabled={props.documentControlsEnabled ?? true}
+              onManualShutter={props.onManualShutter ?? noop}
+              onGallery={props.onGalleryUpload ?? noop}
+              shutterAccessibilityLabel={loc.siCdDocumentCaptureShutter}
+              galleryAccessibilityLabel={loc.siCdDocumentGallery}
+            />
+          ) : null}
+        </>
+      ) : null}
+
+      {/* Camera stays full-bleed; only the control layers inset from the system bars. */}
+      <SafeAreaView
+        edges={["top"]}
+        style={[
+          styles.topBar,
+          {
+            paddingHorizontal: theme.spacing.medium,
+            paddingTop: theme.spacing.medium,
+          },
+        ]}
+        pointerEvents="box-none"
+      >
+        {props.onBack ? (
+          <UseSmileIDBackButton
+            onClick={props.onBack}
+            forceLightMode
+            theme={theme}
+            testID="si_capture_back_button"
+          />
+        ) : (
+          <View style={styles.chromeSpacer} />
+        )}
+        {/* Close/cancel (document chrome) — top-right, mirrors the back button. */}
+        {props.onClose ? (
+          <Pressable
+            onPress={props.onClose}
+            accessibilityRole="button"
+            accessibilityLabel={loc.siCdClose}
+            testID="si_capture_close_button"
+            style={({ pressed }) => [
+              styles.closeButton,
+              {
+                backgroundColor: defaultLightTheme.colors.offBlack,
+                borderColor: defaultLightTheme.colors.backButtonBorder,
+                opacity: pressed ? 0.7 : 1,
+              },
+            ]}
+          >
+            <SiOutlineClose
+              size={20}
+              color={defaultLightTheme.colors.offWhite}
+            />
+          </Pressable>
+        ) : null}
+      </SafeAreaView>
+
+      {/* Selfie coaching bubble. Document coaching renders inside the overlay
+          (frame-relative pill) so it tracks the frame instead of a fixed offset. */}
+      {feedback !== null && isSelfie ? (
+        <View
+          style={[
+            styles.feedbackBubble,
+            {
+              paddingHorizontal: theme.spacing.medium,
+              paddingVertical: theme.spacing.small,
+            },
+          ]}
+          pointerEvents="none"
+        >
+          <Text
+            style={{
+              ...theme.typography.cardTitle,
+              // Light-palette forced: overlay is locked to light mode (selfie navy-on-white).
+              color: isSelfie
+                ? defaultLightTheme.colors.primary
+                : defaultLightTheme.colors.captureFeedbackText,
+              textAlign: "center",
+            }}
+            testID="si_capture_feedback_text"
+          >
+            {feedback}
+          </Text>
+        </View>
+      ) : null}
+
+      <SafeAreaView
+        edges={["bottom"]}
+        style={[
+          styles.bottom,
+          {
+            paddingHorizontal: theme.spacing.medium,
+            paddingBottom: theme.spacing.large,
+            gap: theme.spacing.small,
+          },
+        ]}
+        pointerEvents="box-none"
+      >
+        {state.showCaptureButton ? (
+          startCustom ? (
+            startCustom({
+              onClick: props.onStartCapture,
+              enabled: props.startCaptureEnabled,
+            })
+          ) : (
+            <UseSmileIDButton
+              label={loc.siCaptureStartButton}
+              onClick={props.onStartCapture}
+              variant="primary"
+              enabled={props.startCaptureEnabled}
+              forceLightMode
+              theme={theme}
+              testID="si_capture_start_button"
+            />
+          )
+        ) : null}
+        {/* Document capture has no attribution per Figma; selfie keeps it. */}
+        {props.showAttribution && isSelfie ? (
+          <UseSmileIDAttribution forceLightMode theme={theme} />
+        ) : null}
+      </SafeAreaView>
+    </View>
+  );
+}
+
+/**
+ * Stateless capture renderer — camera slot, state-driven overlay, coaching /
+ * ESS animations, back button, and Start Capture button. Memoized — callers
+ * must keep non-snapshot props referentially stable.
+ */
+export const UseSmileIDCaptureContent = memo(UseSmileIDCaptureContentInner);
+
+const styles = StyleSheet.create({
+  root: { flex: 1 },
+  topBar: {
+    position: "absolute",
+    top: 0,
+    start: 0,
+    end: 0,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "flex-start",
+  },
+  closeButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    borderWidth: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  // Reserves the back-button slot so the close button stays trailing when
+  // there is no back button.
+  chromeSpacer: { width: 40, height: 40 },
+  feedbackBubble: {
+    position: "absolute",
+    top: `${Math.round(FaceOvalDefaults.feedbackTopRatio * 100)}%`,
+    alignSelf: "center",
+    maxWidth: "85%",
+  },
+  bottom: {
+    position: "absolute",
+    bottom: 0,
+    start: 0,
+    end: 0,
+    alignItems: "center",
+  },
+});

package/src/presentation/components/use_smile_id_capture_instruction_animation.tsx

@@ -0,0 +1,84 @@
+import { View } from "react-native";
+import LottieView from "lottie-react-native";
+import type { SiKey } from "../../l10n/strings_en";
+import { useReducedMotion } from "../utils/use_reduced_motion";
+import { FaceOvalDefaults } from "./face_oval_defaults";
+import {
+  CAPTURE_INSTRUCTION_ANIMATION_SPECS,
+  captureInstructionAnimationSpec,
+} from "./helpers/capture_instruction_animation_spec";
+
+export type UseSmileIDCaptureInstructionAnimationProps = {
+  /** Stable (debounced) si_* feedback key; keys without a cue render nothing. */
+  readonly feedbackKey: SiKey | null;
+  readonly containerWidth: number;
+  readonly containerHeight: number;
+};
+
+/**
+ * In-oval coaching cue (smile / fix lighting / rotate device) for the
+ * standard selfie flow; reduced motion holds the final frame. The
+ * caller gates rendering to selfie capture without Enhanced Smart
+ * Selfie.
+ *
+ * Every cue stays mounted and is shown or hidden via opacity —
+ * mounting a Lottie composition parses a large JSON document and
+ * rebuilds the native render tree, so remounting per guidance flip
+ * hitches visibly over the camera preview.
+ */
+export function UseSmileIDCaptureInstructionAnimation(
+  props: UseSmileIDCaptureInstructionAnimationProps,
+) {
+  const reducedMotion = useReducedMotion();
+  if (props.containerWidth <= 0 || props.containerHeight <= 0) {
+    return null;
+  }
+  const activeSpec = captureInstructionAnimationSpec(props.feedbackKey);
+  const ovalCenterY = props.containerHeight * FaceOvalDefaults.ovalCenterYRatio;
+
+  return (
+    <>
+      {CAPTURE_INSTRUCTION_ANIMATION_SPECS.map((spec) => {
+        const active = spec === activeSpec;
+        const boxHeight = props.containerHeight * spec.heightRatio;
+        const boxWidth =
+          spec.widthRatio === null
+            ? boxHeight
+            : props.containerWidth * spec.widthRatio;
+        const boxTop =
+          spec.topOffsetRatio !== null
+            ? props.containerHeight * spec.topOffsetRatio
+            : ovalCenterY - boxHeight / 2;
+        return (
+          <View
+            key={spec.key}
+            pointerEvents="none"
+            style={{
+              position: "absolute",
+              left: (props.containerWidth - boxWidth) / 2,
+              top: boxTop,
+              width: boxWidth,
+              height: boxHeight,
+              overflow: "hidden",
+              opacity: active ? 1 : 0,
+            }}
+            {...(active ? { testID: "si_capture_instruction_animation" } : {})}
+          >
+            <LottieView
+              source={spec.source}
+              // Inactive cues hold frame 0 with the animator parked so
+              // hidden compositions cost no per-frame work.
+              autoPlay={active && !reducedMotion}
+              loop={active && !reducedMotion}
+              {...(!active || reducedMotion
+                ? { progress: active ? 1 : 0 }
+                : {})}
+              resizeMode={spec.resizeMode}
+              style={{ width: "100%", height: "100%" }}
+            />
+          </View>
+        );
+      })}
+    </>
+  );
+}

package/src/presentation/components/use_smile_id_capture_spinner.tsx

@@ -0,0 +1,63 @@
+import { memo, useEffect, useRef } from "react";
+import { Animated, Easing } from "react-native";
+import Svg, { Circle } from "react-native-svg";
+
+/** Indeterminate capture spinner — a rotating arc shown while capture is committing. */
+export type UseSmileIDCaptureSpinnerProps = {
+  /** Arc colour — the capture-ready green (`ovalActive`). */
+  readonly color: string;
+  readonly size?: number;
+  readonly testID?: string;
+};
+
+const DEFAULT_SIZE = 64;
+const STROKE_WIDTH = 5;
+/** Fraction of the circumference the visible arc spans. */
+const ARC_FRACTION = 0.72;
+
+export const UseSmileIDCaptureSpinner = memo(function UseSmileIDCaptureSpinner(
+  props: UseSmileIDCaptureSpinnerProps,
+) {
+  const size = props.size ?? DEFAULT_SIZE;
+  const radius = (size - STROKE_WIDTH) / 2;
+  const circumference = 2 * Math.PI * radius;
+
+  const rotation = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    const loop = Animated.loop(
+      Animated.timing(rotation, {
+        toValue: 1,
+        duration: 900,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      }),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [rotation]);
+
+  const spin = rotation.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0deg", "360deg"],
+  });
+
+  return (
+    <Animated.View
+      style={{ width: size, height: size, transform: [{ rotate: spin }] }}
+      testID={props.testID}
+    >
+      <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+        <Circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          stroke={props.color}
+          strokeWidth={STROKE_WIDTH}
+          strokeLinecap="round"
+          fill="none"
+          strokeDasharray={`${circumference * ARC_FRACTION} ${circumference}`}
+        />
+      </Svg>
+    </Animated.View>
+  );
+});

package/src/presentation/components/use_smile_id_captured_document_image.tsx

@@ -0,0 +1,86 @@
+import type { ReactNode } from "react";
+import { Image, StyleSheet, View } from "react-native";
+import {
+  defaultFrameAspectRatio,
+  type DocumentOrientation,
+} from "../../core/models/document_type";
+import type { UseSmileIDTheme } from "../theme/theme";
+import { useUseSmileIDTheme } from "../theme/theme_context";
+
+export type UseSmileIDCapturedDocumentImageProps = {
+  /** Local file URI (`file:///…`) of the captured document side. */
+  readonly uri?: string;
+  /** Drives the frame aspect: landscape fills width, portrait fills height. */
+  readonly orientation: DocumentOrientation;
+  /** Content centered over the document rect — e.g. the processing-screen status badge. */
+  readonly overlayChild?: ReactNode;
+  /** Accessible name for the image; when unset the image stays decorative. */
+  readonly imageAccessibilityLabel?: string;
+  readonly imageTestID?: string;
+  readonly testID?: string;
+  readonly theme?: UseSmileIDTheme;
+};
+
+const CORNER_RADIUS = 8;
+
+/**
+ * Captured document image at its capture aspect, clipped to an 8dp rounded
+ * rectangle — the rectangular counterpart to {@link UseSmileIDCapturedImageOval}.
+ * Shared by the document preview and the processing screen's document variant.
+ */
+export function UseSmileIDCapturedDocumentImage(
+  props: UseSmileIDCapturedDocumentImageProps,
+) {
+  const themeFromContext = useUseSmileIDTheme();
+  const theme = props.theme ?? themeFromContext;
+  const aspectRatio = defaultFrameAspectRatio(props.orientation);
+  // Landscape (aspect ≥ 1) is width-bound; portrait is height-bound.
+  const fill = aspectRatio >= 1 ? styles.fillWidth : styles.fillHeight;
+
+  return (
+    <View
+      style={[styles.region, { paddingHorizontal: theme.spacing.large }]}
+      testID={props.testID}
+    >
+      <View style={[styles.imageBox, fill, { aspectRatio }]}>
+        {props.uri ? (
+          <Image
+            source={{ uri: props.uri }}
+            resizeMode="cover"
+            style={styles.image}
+            testID={props.imageTestID}
+            {...(props.imageAccessibilityLabel
+              ? {
+                  accessible: true,
+                  accessibilityRole: "image" as const,
+                  accessibilityLabel: props.imageAccessibilityLabel,
+                }
+              : {})}
+          />
+        ) : null}
+        {props.overlayChild ? (
+          <View pointerEvents="box-none" style={styles.overlay}>
+            {props.overlayChild}
+          </View>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  region: { flex: 1, alignItems: "center", justifyContent: "center" },
+  imageBox: { borderRadius: CORNER_RADIUS },
+  fillWidth: { width: "100%" },
+  fillHeight: { height: "100%" },
+  image: { width: "100%", height: "100%", borderRadius: CORNER_RADIUS },
+  overlay: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    start: 0,
+    end: 0,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});