@smileid/usesmileid 12.0.2 → 12.1.1

package/src/presentation/components/use_smile_id_capture_content.tsx

@@ -1,368 +0,0 @@
-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 type { DocumentType } from "../../core/models/document_type";
-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 type — selects the in-frame shimmer skeleton. Ignored for selfie. */
-  readonly documentTypeKind?: DocumentType["kind"];
-  /** Active side is the back — swaps the generic shimmer front→back. Ignored for selfie. */
-  readonly isBackSide?: boolean;
-  /** 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;
-  /**
-   * Reports the camera-viewport (canvas) size on layout so the screen can
-   * derive the document crop region from the same geometry the overlay draws.
-   */
-  readonly onViewportLayout?:
-    | ((size: { width: number; height: number }) => void)
-    | 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 },
-    );
-    // Surface the viewport size; the screen dedupes no-change passes.
-    props.onViewportLayout?.({ width, height });
-  };
-
-  const isSelfie = state.captureType === CaptureType.selfie;
-  // Landscape document moves the close ✕ into the control lane; portrait /
-  // selfie keep it in the top bar. False until the canvas is measured.
-  const isLandscapeDocument = !isSelfie && canvas.width > canvas.height;
-  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}
-              isBackSide={state.isBackSide ?? false}
-              {...(state.documentTypeKind !== undefined
-                ? { documentTypeKind: state.documentTypeKind }
-                : {})}
-              {...(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 (plus the
-              close ✕ in landscape). The capture-progress spinner renders in the
-              overlay only while capturing, so it never coexists with these controls. */}
-          {!isSelfie ? (
-            <UseSmileIDDocumentCaptureControls
-              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}
-              closeAccessibilityLabel={loc.siCdClose}
-              onClose={props.onClose}
-            />
-          ) : null}
-        </>
-      ) : null}
-
-      {/* Control layers inset from the system bars (camera stays full-bleed);
-          both horizontal edges so landscape keeps chrome clear of the notch. */}
-      <SafeAreaView
-        edges={["top", "left", "right"]}
-        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 in portrait / selfie; in
-            landscape document capture the ✕ moves into the control lane. */}
-        {props.onClose && !isLandscapeDocument ? (
-          <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,
-              // The capture screen supplies the light-resolved partner theme, so
-              // this stays light-on-light while honouring a partner `primary`.
-              color: theme.colors.primary,
-              textAlign: "center",
-            }}
-            testID="si_capture_feedback_text"
-          >
-            {feedback}
-          </Text>
-        </View>
-      ) : null}
-
-      <SafeAreaView
-        edges={["bottom", "left", "right"]}
-        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

@@ -1,84 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,81 +0,0 @@
-import type { ReactNode } from "react";
-import { Image, StyleSheet, View } from "react-native";
-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;
-  /** Capture-frame aspect ratio (width / height): ≥1 fills width (landscape), <1 fills height (portrait). */
-  readonly aspectRatio: number;
-  /** 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 = props.aspectRatio;
-  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",
-  },
-});