@smileid/usesmileid 12.0.2 → 12.1.0

package/src/presentation/components/use_smile_id_document_overlay.tsx

@@ -1,335 +0,0 @@
-import { memo } from "react";
-import { StyleSheet, Text, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import Svg, { Path } from "react-native-svg";
-import type { UseSmileIDTheme } from "../theme/theme";
-import { useUseSmileIDTheme } from "../theme/theme_context";
-import {
-  isDocumentCaptureActive,
-  type UseSmileIDOverlayState as OverlayState,
-} from "../state/use_smile_id_overlay_state";
-import type { DocumentType } from "../../core/models/document_type";
-import { UseSmileIDOvalBorderPalette } from "./use_smile_id_oval_border_palette";
-import { UseSmileIDDocumentShimmer } from "./use_smile_id_document_shimmer";
-import { UseSmileIDCaptureSpinner } from "./use_smile_id_capture_spinner";
-
-export type UseSmileIDDocumentOverlayProps = {
-  readonly state: OverlayState;
-  readonly containerWidth: number;
-  readonly containerHeight: number;
-  /** Optional aspect ratio hint — e.g. CR-80 ID card = 1.586. */
-  readonly knownIdAspectRatio?: number;
-  /** Document type — selects the in-frame shimmer skeleton. */
-  readonly documentTypeKind?: DocumentType["kind"];
-  /** Generic-document back side — swaps the front skeleton for the back. */
-  readonly isBackSide?: boolean;
-  /**
-   * Coaching copy shown in the dark pill below the frame. Rendered here so it
-   * tracks the frame geometry instead of a fixed screen offset.
-   */
-  readonly feedbackText?: string;
-  readonly testID?: string;
-  readonly theme?: UseSmileIDTheme;
-};
-
-/** Gap between the frame's bottom edge and the coaching pill (Figma: 16dp). */
-const CHIP_TOP_GAP = 16;
-
-/**
- * Frame spans ≤71% of container width, height capped at 61% (re-deriving width
- * from aspect when the cap bites — keeps a wide ID-1 card from overflowing in
- * landscape). One ratio pair drives both orientations.
- */
-const FRAME_MAX_WIDTH_RATIO = 0.71;
-const FRAME_MAX_HEIGHT_RATIO = 0.61;
-/** Frame corner radius (matches the bordered frame's `borderRadius`). */
-const FRAME_CORNER_RADIUS = 16;
-/** Guide-rect border thickness; drawn straddling the frame edge (centred stroke, matching the other SDKs). */
-const FRAME_BORDER_WIDTH = 4;
-/** Capture-progress spinner shown beside the frame (landscape) or bottom-centre (portrait). */
-const SPINNER_SIZE = 48;
-/** Portrait spinner gap above the safe-area bottom (spacing.large) — matches the shutter row. */
-const PORTRAIT_SPINNER_BOTTOM_GAP = 24;
-
-/** Default document aspect (CR-80 ID-1 card) when no known ratio is supplied. */
-export const DEFAULT_DOCUMENT_ASPECT = 1.586;
-
-/**
- * Centred document guide rectangle (container px) for a document [aspect] and
- * viewport. Single source of truth shared by the overlay (draws the frame) and
- * the capture screen (derives the native crop region), so the saved capture
- * matches the frame the user saw.
- */
-export function documentGuideRect(
-  aspect: number,
-  containerWidth: number,
-  containerHeight: number,
-): {
-  readonly left: number;
-  readonly top: number;
-  readonly width: number;
-  readonly height: number;
-} {
-  let width = containerWidth * FRAME_MAX_WIDTH_RATIO;
-  let height = width / aspect;
-  const maxHeight = containerHeight * FRAME_MAX_HEIGHT_RATIO;
-  if (height > maxHeight) {
-    height = maxHeight;
-    width = height * aspect;
-  }
-  return {
-    left: (containerWidth - width) / 2,
-    top: (containerHeight - height) / 2,
-    width,
-    height,
-  };
-}
-/**
- * Faint black tint over the whole live feed (~0.15 inside the frame). Component
- * constant, not a theme colour — the surround dim is the overridable layer.
- */
-const DOCUMENT_CAMERA_TINT = "#00000026"; // black @15%
-/** Fallback surround dim when the theme omits `documentOverlayScrim`. */
-const DEFAULT_DOCUMENT_OVERLAY_SCRIM = "#00000066"; // black @40%
-
-/**
- * Document capture frame — two-layer dim + a border that flips to `ovalActive`
- * on `DOCUMENT_READY`. The cutout is one even-odd path, NOT a `<Mask>` (masks
- * rasterize the full-screen layer per invalidation, freezing the preview).
- */
-export function UseSmileIDDocumentOverlay(
-  props: UseSmileIDDocumentOverlayProps,
-) {
-  const themeFromContext = useUseSmileIDTheme();
-  const theme = props.theme ?? themeFromContext;
-  const insets = useSafeAreaInsets();
-  const aspect = props.knownIdAspectRatio ?? DEFAULT_DOCUMENT_ASPECT;
-  const isPortrait = aspect < 1;
-  const {
-    left,
-    top,
-    width: frameWidth,
-    height: frameHeight,
-  } = documentGuideRect(aspect, props.containerWidth, props.containerHeight);
-  // Three-state border, shared with the selfie oval (UseSmileIDOvalBorderPalette):
-  // green once the document is correctly framed (ready / capturing / processing),
-  // red while detected but mispositioned (too far / close / off-centre / not
-  // steady), neutral while idle.
-  const captureActive = isDocumentCaptureActive(props.state);
-  const borderColor =
-    theme.colors[UseSmileIDOvalBorderPalette.tokenFor(props.state, false)];
-  const surroundColor =
-    theme.colors.documentOverlayScrim ?? DEFAULT_DOCUMENT_OVERLAY_SCRIM;
-
-  if (props.containerWidth <= 0 || props.containerHeight <= 0) {
-    return null;
-  }
-
-  return (
-    <View
-      testID={props.testID}
-      style={StyleSheet.absoluteFill}
-      pointerEvents="none"
-    >
-      {/* Layer 1: faint tint over the whole feed (~0.15 inside-frame dim). */}
-      <View
-        style={[
-          StyleSheet.absoluteFill,
-          { backgroundColor: DOCUMENT_CAMERA_TINT },
-        ]}
-      />
-      {/* Layer 2: darker surround outside the cutout. Memoised so the per-state
-          border flip below never re-rasterizes the scrim. */}
-      <DocumentScrimSurround
-        containerWidth={props.containerWidth}
-        containerHeight={props.containerHeight}
-        frameLeft={left}
-        frameTop={top}
-        frameWidth={frameWidth}
-        frameHeight={frameHeight}
-        cornerRadius={FRAME_CORNER_RADIUS}
-        color={surroundColor}
-      />
-      {/* In-frame document shimmer — per-type skeleton hint while positioning. */}
-      {!captureActive ? (
-        <View
-          style={{
-            // Inset 10% per axis so the shimmer guide never touches the frame edge.
-            position: "absolute",
-            left: left + frameWidth * 0.1,
-            top: top + frameHeight * 0.1,
-            width: frameWidth * 0.8,
-            height: frameHeight * 0.8,
-          }}
-          pointerEvents="none"
-        >
-          <UseSmileIDDocumentShimmer
-            width={frameWidth * 0.8}
-            height={frameHeight * 0.8}
-            isBackSide={props.isBackSide ?? false}
-            {...(props.documentTypeKind !== undefined
-              ? { documentTypeKind: props.documentTypeKind }
-              : {})}
-          />
-        </View>
-      ) : null}
-      <View
-        style={{
-          position: "absolute",
-          left: left - FRAME_BORDER_WIDTH / 2,
-          top: top - FRAME_BORDER_WIDTH / 2,
-          width: frameWidth + FRAME_BORDER_WIDTH,
-          height: frameHeight + FRAME_BORDER_WIDTH,
-          borderWidth: FRAME_BORDER_WIDTH,
-          borderRadius: FRAME_CORNER_RADIUS + FRAME_BORDER_WIDTH / 2,
-          borderColor,
-        }}
-      />
-      {/* Capture-progress spinner: beside the frame in landscape; bottom-centre in portrait
-          (e.g. Green Book), where the near-full-width frame leaves no side margin. */}
-      {captureActive ? (
-        isPortrait ? (
-          <View
-            style={{
-              position: "absolute",
-              left: 0,
-              right: 0,
-              bottom: insets.bottom + PORTRAIT_SPINNER_BOTTOM_GAP,
-              alignItems: "center",
-            }}
-            pointerEvents="none"
-          >
-            <UseSmileIDCaptureSpinner
-              size={SPINNER_SIZE}
-              color={theme.colors.ovalActive}
-              testID="si_document_capture_spinner"
-            />
-          </View>
-        ) : (
-          <View
-            style={{
-              position: "absolute",
-              left:
-                left +
-                frameWidth +
-                (props.containerWidth - (left + frameWidth) - SPINNER_SIZE) / 2,
-              top: top + (frameHeight - SPINNER_SIZE) / 2,
-            }}
-            pointerEvents="none"
-          >
-            <UseSmileIDCaptureSpinner
-              size={SPINNER_SIZE}
-              color={theme.colors.ovalActive}
-              testID="si_document_capture_spinner"
-            />
-          </View>
-        )
-      ) : null}
-      {/* Coaching pill, anchored just below the frame (Figma off-black pill). */}
-      {props.feedbackText ? (
-        <View
-          style={{
-            position: "absolute",
-            top: top + frameHeight + CHIP_TOP_GAP,
-            start: 0,
-            end: 0,
-            alignItems: "center",
-          }}
-          pointerEvents="none"
-        >
-          <View
-            style={{
-              maxWidth: "85%",
-              borderRadius: 8,
-              backgroundColor: theme.colors.offBlack,
-              paddingHorizontal: theme.spacing.medium,
-              paddingVertical: theme.spacing.small,
-            }}
-          >
-            <Text
-              style={{
-                ...theme.typography.cardTitle,
-                color: "#FFFFFF",
-                textAlign: "center",
-              }}
-              testID="si_document_feedback_text"
-            >
-              {props.feedbackText}
-            </Text>
-          </View>
-        </View>
-      ) : null}
-    </View>
-  );
-}
-
-/**
- * Darker dim outside the rounded-rect cutout, as one even-odd path (outer rect +
- * inner rounded-rect windings). Memoised so parent per-frame state never touches it.
- */
-const DocumentScrimSurround = memo(function DocumentScrimSurround(props: {
-  readonly containerWidth: number;
-  readonly containerHeight: number;
-  readonly frameLeft: number;
-  readonly frameTop: number;
-  readonly frameWidth: number;
-  readonly frameHeight: number;
-  readonly cornerRadius: number;
-  readonly color: string;
-}) {
-  const {
-    containerWidth,
-    containerHeight,
-    frameLeft,
-    frameTop,
-    frameWidth,
-    frameHeight,
-    cornerRadius,
-    color,
-  } = props;
-  // Clamp the radius so a small frame can't produce a self-overlapping path.
-  const radius = Math.min(cornerRadius, frameWidth / 2, frameHeight / 2);
-  const outerPath = `M0 0H${containerWidth}V${containerHeight}H0Z`;
-  const cutoutPath = roundedRectPath(
-    frameLeft,
-    frameTop,
-    frameWidth,
-    frameHeight,
-    radius,
-  );
-  return (
-    <Svg
-      width="100%"
-      height="100%"
-      viewBox={`0 0 ${containerWidth} ${containerHeight}`}
-      preserveAspectRatio="none"
-      style={StyleSheet.absoluteFill}
-    >
-      <Path d={`${outerPath} ${cutoutPath}`} fill={color} fillRule="evenodd" />
-    </Svg>
-  );
-});
-
-/** Closed rounded-rectangle subpath (clockwise) for the frame cutout. */
-function roundedRectPath(
-  x: number,
-  y: number,
-  width: number,
-  height: number,
-  r: number,
-): string {
-  const right = x + width;
-  const bottom = y + height;
-  return (
-    `M${x + r} ${y}` +
-    `H${right - r}` +
-    `A${r} ${r} 0 0 1 ${right} ${y + r}` +
-    `V${bottom - r}` +
-    `A${r} ${r} 0 0 1 ${right - r} ${bottom}` +
-    `H${x + r}` +
-    `A${r} ${r} 0 0 1 ${x} ${bottom - r}` +
-    `V${y + r}` +
-    `A${r} ${r} 0 0 1 ${x + r} ${y}` +
-    `Z`
-  );
-}

package/src/presentation/components/use_smile_id_document_shimmer.tsx

@@ -1,51 +0,0 @@
-import { memo } from "react";
-import { SvgXml } from "react-native-svg";
-import type { DocumentType } from "../../core/models/document_type";
-import {
-  SI_DOCUMENT_BACK_SHIMMER,
-  SI_DOCUMENT_FRONT_SHIMMER,
-  SI_DOCUMENT_GREEN_BOOK_SHIMMER,
-  SI_DOCUMENT_PASSPORT_SHIMMER,
-} from "../assets/svg/document_shimmer_strings";
-
-/** Translucent in-frame document shimmer — the per-type "align here" skeleton, scaled to fit the capture frame. */
-export type UseSmileIDDocumentShimmerProps = {
-  readonly width: number;
-  readonly height: number;
-  /** Selects the skeleton; the green book and passport ignore `isBackSide`. */
-  readonly documentTypeKind?: DocumentType["kind"];
-  /** Generic documents only: show the back-side skeleton instead of the front. */
-  readonly isBackSide?: boolean;
-  readonly testID?: string;
-};
-
-/** Shimmer skeleton for a document type + side. Only generic documents have front/back; passport and green book ignore the side. */
-export function documentShimmerXml(
-  documentTypeKind: DocumentType["kind"] | undefined,
-  isBackSide: boolean,
-): string {
-  switch (documentTypeKind) {
-    case "passport":
-      return SI_DOCUMENT_PASSPORT_SHIMMER;
-    case "southAfricaGreenBook":
-      return SI_DOCUMENT_GREEN_BOOK_SHIMMER;
-    default:
-      return isBackSide ? SI_DOCUMENT_BACK_SHIMMER : SI_DOCUMENT_FRONT_SHIMMER;
-  }
-}
-
-export const UseSmileIDDocumentShimmer = memo(
-  function UseSmileIDDocumentShimmer(props: UseSmileIDDocumentShimmerProps) {
-    const { width, height, documentTypeKind, isBackSide = false } = props;
-    if (width <= 0 || height <= 0) return null;
-    // Default preserveAspectRatio (meet) fits the skeleton in the frame, undistorted.
-    return (
-      <SvgXml
-        xml={documentShimmerXml(documentTypeKind, isBackSide)}
-        width={width}
-        height={height}
-        {...(props.testID !== undefined ? { testID: props.testID } : {})}
-      />
-    );
-  },
-);

package/src/presentation/components/use_smile_id_enhanced_smart_selfie_clip.tsx

@@ -1,155 +0,0 @@
-import { useEffect, useRef } from "react";
-import { View, type StyleProp, type ViewStyle } from "react-native";
-import LottieView from "lottie-react-native";
-import type { AnimationObject } from "lottie-react-native";
-import { useReducedMotion } from "../utils/use_reduced_motion";
-import { FaceOvalDefaults } from "./face_oval_defaults";
-import {
-  ENHANCED_SMART_SELFIE_ANIMATION_SPEED,
-  ENHANCED_SMART_SELFIE_TOTAL_FRAMES,
-} from "./helpers/enhanced_smart_selfie_animation_frames";
-
-// eslint-disable-next-line @typescript-eslint/no-require-imports
-export const ESS_ALL_DIRECTIONS_ANIMATION =
-  require("../assets/si_ess_animation_all_directions.json") as AnimationObject;
-
-/**
- * Box width as a multiple of the oval width; the baked arrow tips touch the
- * oval boundary at ≈1.19× — keep this factor below that.
- */
-export const ENHANCED_SMART_SELFIE_ARROW_FIT = 1.15;
-/** Nudge so the composition's face lands on the oval centre. */
-export const VERTICAL_ALIGNMENT_OFFSET = -15;
-
-export type UseSmileIDEnhancedSmartSelfieClipProps = {
-  readonly startFrame: number;
-  readonly endFrame: number;
-  /** Play forward-then-back instead of restarting from the first frame. */
-  readonly pingPong: boolean;
-  readonly containerWidth: number;
-  readonly containerHeight: number;
-  readonly testID: string;
-};
-
-/**
- * Shared renderer for the Enhanced Smart Selfie cues — plays a frame
- * sub-range of the all-directions composition in a loop, centred on
- * the face oval. Reduced motion holds the clip's final frame.
- *
- * @internal Used by the full / direction ESS animation components.
- */
-export function UseSmileIDEnhancedSmartSelfieClip(
-  props: UseSmileIDEnhancedSmartSelfieClipProps,
-) {
-  const reducedMotion = useReducedMotion();
-  const { startFrame, endFrame, pingPong, containerWidth, containerHeight } =
-    props;
-
-  if (containerWidth <= 0 || containerHeight <= 0) {
-    return null;
-  }
-
-  const size =
-    containerWidth *
-    FaceOvalDefaults.ovalWidthRatio *
-    ENHANCED_SMART_SELFIE_ARROW_FIT;
-  const ovalCenterY = containerHeight * FaceOvalDefaults.ovalCenterYRatio;
-
-  const containerStyle = {
-    position: "absolute" as const,
-    left: (containerWidth - size) / 2,
-    top: ovalCenterY - size / 2 + VERTICAL_ALIGNMENT_OFFSET,
-    width: size,
-    height: size,
-  };
-
-  if (reducedMotion) {
-    return (
-      <View pointerEvents="none" style={containerStyle} testID={props.testID}>
-        <LottieView
-          source={ESS_ALL_DIRECTIONS_ANIMATION}
-          progress={endFrame / ENHANCED_SMART_SELFIE_TOTAL_FRAMES}
-          autoPlay={false}
-          loop={false}
-          style={{ width: "100%", height: "100%" }}
-        />
-      </View>
-    );
-  }
-
-  if (!pingPong) {
-    // Only the full primer passes pingPong={false}, always with the full range.
-    return (
-      <View pointerEvents="none" style={containerStyle} testID={props.testID}>
-        <LottieView
-          source={ESS_ALL_DIRECTIONS_ANIMATION}
-          autoPlay
-          loop
-          speed={ENHANCED_SMART_SELFIE_ANIMATION_SPEED}
-          style={{ width: "100%", height: "100%" }}
-        />
-      </View>
-    );
-  }
-
-  return (
-    <PingPongClip
-      startFrame={startFrame}
-      endFrame={endFrame}
-      containerStyle={containerStyle}
-      testID={props.testID}
-    />
-  );
-}
-
-type PingPongClipProps = {
-  readonly startFrame: number;
-  readonly endFrame: number;
-  readonly containerStyle: StyleProp<ViewStyle>;
-  readonly testID: string;
-};
-
-/**
- * Ping-pongs a Lottie sub-range via the imperative play() API —
- * onAnimationFinish only fires with loop={false}, so each completion
- * replays with the range reversed.
- */
-function PingPongClip(props: PingPongClipProps) {
-  const { startFrame, endFrame } = props;
-  const lottieRef = useRef<LottieView>(null);
-  // true = next play is forward (start→end).
-  const forwardRef = useRef(true);
-
-  useEffect(() => {
-    forwardRef.current = true;
-    lottieRef.current?.play(startFrame, endFrame);
-  }, [startFrame, endFrame]);
-
-  const handleAnimationFinish = (isCancelled: boolean) => {
-    if (isCancelled) return;
-    forwardRef.current = !forwardRef.current;
-    if (forwardRef.current) {
-      lottieRef.current?.play(startFrame, endFrame);
-    } else {
-      lottieRef.current?.play(endFrame, startFrame);
-    }
-  };
-
-  return (
-    <View
-      pointerEvents="none"
-      style={props.containerStyle}
-      testID={props.testID}
-    >
-      <LottieView
-        ref={lottieRef}
-        source={ESS_ALL_DIRECTIONS_ANIMATION}
-        loop={false}
-        autoPlay={false}
-        speed={ENHANCED_SMART_SELFIE_ANIMATION_SPEED}
-        onAnimationFinish={handleAnimationFinish}
-        style={{ width: "100%", height: "100%" }}
-      />
-    </View>
-  );
-}

package/src/presentation/components/use_smile_id_enhanced_smart_selfie_direction_animation.tsx

@@ -1,46 +0,0 @@
-import type { ScanHeadTurnDirection } from "@smileid/usesmileid_bridge";
-import { enhancedSmartSelfieFrameRange } from "./helpers/enhanced_smart_selfie_animation_frames";
-import { UseSmileIDEnhancedSmartSelfieClip } from "./use_smile_id_enhanced_smart_selfie_clip";
-
-export type UseSmileIDEnhancedSmartSelfieDirectionAnimationProps = {
-  /** Active head-turn direction from the scan state; null renders nothing. */
-  readonly direction: ScanHeadTurnDirection | null;
-  /**
-   * `true` while the head pose holds {@link direction}. Switches the cue
-   * from the grey "pending" keyframe span to the green "matched" span.
-   */
-  readonly poseMatched: boolean;
-  readonly containerWidth: number;
-  readonly containerHeight: number;
-};
-
-/**
- * Enhanced Smart Selfie head-turn cue — plays the active direction's
- * frame sub-range of the all-directions composition, ping-ponging until
- * the turn completes. Grey while prompting; the range flips to the green
- * "matched" span once {@link poseMatched} holds. Both the direction and
- * the pose-match flip switch the frame range IN PLACE on the same Lottie
- * view (no unmount/remount), so the cue never reinitialises mid-turn.
- * Reduced motion holds the clip's final (turned-head) frame. Never
- * mirrored in RTL so the analyzer sees identical expected head-turn
- * directions in every locale.
- */
-export function UseSmileIDEnhancedSmartSelfieDirectionAnimation(
-  props: UseSmileIDEnhancedSmartSelfieDirectionAnimationProps,
-) {
-  if (props.direction === null) return null;
-  const { startFrame, endFrame } = enhancedSmartSelfieFrameRange(
-    props.direction,
-    props.poseMatched,
-  );
-  return (
-    <UseSmileIDEnhancedSmartSelfieClip
-      startFrame={startFrame}
-      endFrame={endFrame}
-      pingPong
-      containerWidth={props.containerWidth}
-      containerHeight={props.containerHeight}
-      testID="si_ess_direction_animation"
-    />
-  );
-}

package/src/presentation/components/use_smile_id_enhanced_smart_selfie_full_animation.tsx

@@ -1,29 +0,0 @@
-import { ENHANCED_SMART_SELFIE_TOTAL_FRAMES } from "./helpers/enhanced_smart_selfie_animation_frames";
-import { UseSmileIDEnhancedSmartSelfieClip } from "./use_smile_id_enhanced_smart_selfie_clip";
-
-export type UseSmileIDEnhancedSmartSelfieFullAnimationProps = {
-  readonly containerWidth: number;
-  readonly containerHeight: number;
-};
-
-/**
- * Enhanced Smart Selfie pre-turn primer — the whole all-directions
- * composition loops, centred on the face oval. The caller gates
- * rendering to the idle / instruction states; reduced motion holds the
- * final frame. Never mirrored in RTL so the analyzer sees identical
- * expected head-turn directions in every locale.
- */
-export function UseSmileIDEnhancedSmartSelfieFullAnimation(
-  props: UseSmileIDEnhancedSmartSelfieFullAnimationProps,
-) {
-  return (
-    <UseSmileIDEnhancedSmartSelfieClip
-      startFrame={0}
-      endFrame={ENHANCED_SMART_SELFIE_TOTAL_FRAMES}
-      pingPong={false}
-      containerWidth={props.containerWidth}
-      containerHeight={props.containerHeight}
-      testID="si_ess_full_animation"
-    />
-  );
-}