@smileid/usesmileid 12.0.2 → 12.1.0

package/src/presentation/components/use_smile_id_loading_content.tsx

@@ -1,54 +0,0 @@
-import { StyleSheet, Text, View } from "react-native";
-import type { UseSmileIDTheme } from "../theme/theme";
-import { useUseSmileIDTheme } from "../theme/theme_context";
-import { useUseSmileIDLocalizations } from "../../l10n/use_smile_id_localizations_provider";
-
-export type UseSmileIDLoadingContentProps = {
-  readonly message?: string;
-  readonly testID?: string;
-  readonly theme?: UseSmileIDTheme;
-};
-
-/**
- * Loading-state body of the processing screen's bottom card —
- * "Submitting…" message (or partner override) only. The active
- * spinner is rendered separately, centered inside the face oval
- * by the screen itself, so the same indicator doesn't appear twice.
- */
-export function UseSmileIDLoadingContent(props: UseSmileIDLoadingContentProps) {
-  const themeFromContext = useUseSmileIDTheme();
-  const theme = props.theme ?? themeFromContext;
-  const loc = useUseSmileIDLocalizations();
-  const message = props.message ?? loc.siProcessingSubmitting;
-  return (
-    <View
-      testID={props.testID}
-      style={[styles.container, { paddingVertical: theme.spacing.small }]}
-    >
-      <Text
-        style={{
-          ...theme.typography.cardHeading,
-          color: theme.colors.primary,
-          textAlign: "center",
-          letterSpacing: -0.425,
-        }}
-      >
-        {message}
-      </Text>
-      <Text
-        style={{
-          ...theme.typography.cardCaption,
-          color: theme.colors.cardText,
-          textAlign: "center",
-          marginTop: theme.spacing.extraSmall,
-        }}
-      >
-        {loc.siProcessingSubmittingSubtitle}
-      </Text>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: { alignItems: "center", justifyContent: "center" },
-});

package/src/presentation/components/use_smile_id_loading_indicator.tsx

@@ -1,81 +0,0 @@
-import { useEffect, useRef } from "react";
-import { Animated, Easing } from "react-native";
-import Svg, { Circle } from "react-native-svg";
-import type { UseSmileIDTheme } from "../theme/theme";
-import { useUseSmileIDTheme } from "../theme/theme_context";
-import { useReducedMotion } from "../utils/use_reduced_motion";
-
-export type UseSmileIDLoadingIndicatorProps = {
-  /** Diameter in dp (default 64). */
-  readonly size?: number;
-  readonly testID?: string;
-  readonly theme?: UseSmileIDTheme;
-};
-
-const DEFAULT_SIZE = 64;
-const STROKE_WIDTH = 4;
-// 270° visible arc — the open quarter is what reads as "spinning".
-const SWEEP_FRACTION = 0.75;
-const SPIN_DURATION_MS = 1000;
-
-/**
- * Submission spinner — a `submittingIndicator`-green arc (round cap,
- * 270° sweep) that rotates once per second. When the OS reports
- * reduced-motion, the arc is held static (no rotation) so the screen
- * still reads as "in progress" without animating.
- */
-export function UseSmileIDLoadingIndicator(
-  props: UseSmileIDLoadingIndicatorProps,
-) {
-  const themeFromContext = useUseSmileIDTheme();
-  const theme = props.theme ?? themeFromContext;
-  const size = props.size ?? DEFAULT_SIZE;
-  const radius = (size - STROKE_WIDTH) / 2;
-  const circumference = 2 * Math.PI * radius;
-  const arcLength = circumference * SWEEP_FRACTION;
-
-  const reduceMotion = useReducedMotion();
-  const rotation = useRef(new Animated.Value(0)).current;
-
-  useEffect(() => {
-    if (reduceMotion) return;
-    const loop = Animated.loop(
-      Animated.timing(rotation, {
-        toValue: 1,
-        duration: SPIN_DURATION_MS,
-        easing: Easing.linear,
-        useNativeDriver: true,
-      }),
-    );
-    loop.start();
-    return () => loop.stop();
-  }, [reduceMotion, rotation]);
-
-  const spin = rotation.interpolate({
-    inputRange: [0, 1],
-    outputRange: ["0deg", "360deg"],
-  });
-
-  return (
-    <Animated.View
-      testID={props.testID}
-      style={[
-        { width: size, height: size },
-        reduceMotion ? null : { transform: [{ rotate: spin }] },
-      ]}
-    >
-      <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
-        <Circle
-          cx={size / 2}
-          cy={size / 2}
-          r={radius}
-          stroke={theme.colors.submittingIndicator}
-          strokeWidth={STROKE_WIDTH}
-          strokeLinecap="round"
-          strokeDasharray={`${arcLength} ${circumference}`}
-          fill="none"
-        />
-      </Svg>
-    </Animated.View>
-  );
-}

package/src/presentation/components/use_smile_id_oval_border_palette.ts

@@ -1,64 +0,0 @@
-import type { UseSmileIDColors } from "../theme/theme";
-import { UseSmileIDOverlayState } from "../state/use_smile_id_overlay_state";
-
-/** Theme-color token names the oval border can resolve to. */
-export type OvalBorderColorToken = Extract<
-  keyof UseSmileIDColors,
-  "ovalDefault" | "ovalActive" | "ovalWarning"
->;
-
-/**
- * Pure overlay-state → border colour-token table, unit-tested directly;
- * `UseSmileIDFaceOverlay` resolves the token through the active theme.
- */
-export const UseSmileIDOvalBorderPalette = {
-  tokenFor(
-    captureState: UseSmileIDOverlayState,
-    enableEnhancedLiveness: boolean,
-  ): OvalBorderColorToken {
-    switch (captureState) {
-      case UseSmileIDOverlayState.INSTRUCTION:
-      case UseSmileIDOverlayState.IDLE:
-      case UseSmileIDOverlayState.FACE_DETECTED:
-      case UseSmileIDOverlayState.HEAD_TURN:
-        return "ovalDefault";
-
-      case UseSmileIDOverlayState.READY:
-        return "ovalActive";
-
-      // ESS has no green oval treatment.
-      case UseSmileIDOverlayState.CAPTURING:
-      case UseSmileIDOverlayState.PROCESSING:
-        return enableEnhancedLiveness ? "ovalDefault" : "ovalActive";
-
-      // Directional hints keep a neutral rim; the red arc carries colour.
-      case UseSmileIDOverlayState.MOVE_LEFT:
-      case UseSmileIDOverlayState.MOVE_RIGHT:
-      case UseSmileIDOverlayState.MOVE_UP:
-      case UseSmileIDOverlayState.MOVE_DOWN:
-        return "ovalDefault";
-
-      case UseSmileIDOverlayState.TOO_CLOSE:
-      case UseSmileIDOverlayState.TOO_FAR:
-      case UseSmileIDOverlayState.FACE_NOT_CENTERED:
-      case UseSmileIDOverlayState.LOW_LIGHT:
-      case UseSmileIDOverlayState.BRIGHT_LIGHT:
-      case UseSmileIDOverlayState.WRONG_ORIENTATION:
-      case UseSmileIDOverlayState.NOT_SMILING:
-      case UseSmileIDOverlayState.MULTIPLE_FACES:
-        return "ovalWarning";
-
-      // Document states (UseSmileIDDocumentOverlay resolves its border through
-      // this same table): green once the document is correctly framed, red
-      // while it is detected but mispositioned (too far / close / off-centre /
-      // not steady).
-      case UseSmileIDOverlayState.DOCUMENT_READY:
-        return "ovalActive";
-      case UseSmileIDOverlayState.DOCUMENT_NOT_CENTERED:
-      case UseSmileIDOverlayState.DOCUMENT_TOO_FAR:
-      case UseSmileIDOverlayState.DOCUMENT_TOO_CLOSE:
-      case UseSmileIDOverlayState.DOCUMENT_HOLD_STILL:
-        return "ovalWarning";
-    }
-  },
-} as const;

package/src/presentation/components/use_smile_id_partner_icon.tsx

@@ -1,56 +0,0 @@
-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 UseSmileIDPartnerIconProps = {
-  readonly partnerName: string;
-  /** Optional custom icon — partner brand mark. Falls back to initial-letter placeholder. */
-  readonly icon?: ReactNode;
-  readonly testID?: string;
-  readonly theme?: UseSmileIDTheme;
-};
-
-const SIZE = 36;
-
-/**
- * Partner brand mark shown at the top of the consent screen. A
- * supplied `icon` renders as-is — the partner's mark carries its own
- * shape and size (~30 px for the consent header), so no circular crop
- * is applied. When `icon` is null, falls back to a styled
- * initial-letter placeholder derived from `partnerName`.
- */
-export function UseSmileIDPartnerIcon(props: UseSmileIDPartnerIconProps) {
-  const themeFromContext = useUseSmileIDTheme();
-  const theme = props.theme ?? themeFromContext;
-  if (props.icon) {
-    return <View testID={props.testID}>{props.icon}</View>;
-  }
-  const initial = props.partnerName.trim().charAt(0).toUpperCase() || "?";
-  return (
-    <View
-      testID={props.testID}
-      style={[styles.circle, { backgroundColor: theme.colors.cardBackground }]}
-    >
-      <Text
-        style={{
-          ...theme.typography.cardTitle,
-          color: theme.colors.titleText,
-        }}
-      >
-        {initial}
-      </Text>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  circle: {
-    width: SIZE,
-    height: SIZE,
-    borderRadius: SIZE / 2,
-    alignItems: "center",
-    justifyContent: "center",
-    overflow: "hidden",
-  },
-});

package/src/presentation/components/use_smile_id_processing_center_indicator.tsx

@@ -1,77 +0,0 @@
-import { StyleSheet, View } from "react-native";
-import type { UseSmileIDTheme } from "../theme/theme";
-import { useUseSmileIDTheme } from "../theme/theme_context";
-import { UseSmileIDLoadingIndicator } from "./use_smile_id_loading_indicator";
-import { UseSmileIDStatusIndicator } from "./use_smile_id_status_indicator";
-import { computeFaceOvalGeometry } from "./face_oval_defaults";
-import type { ProcessingState } from "../state/processing_state";
-
-export type UseSmileIDProcessingCenterIndicatorProps = {
-  readonly state: ProcessingState;
-  /** Container size from the canvas's `onLayout`. */
-  readonly containerWidth: number;
-  readonly containerHeight: number;
-  readonly testID?: string;
-  readonly theme?: UseSmileIDTheme;
-};
-
-/**
- * Status indicator centered inside the face-oval rect on the
- * processing screen. The indicator visually anchors to the same
- * place the captured image lives, so the user's eye is already on
- * the rect when the spinner / check / cross resolves.
- *
- *   - loading → tinted spinner
- *   - success → green ✓
- *   - failed  → red ✕
- *
- * Returns `null` until the canvas has measured (avoids rendering at
- * the {0,0} default geometry, which would briefly flash the
- * indicator in the top-left before the layout settles).
- */
-export function UseSmileIDProcessingCenterIndicator(
-  props: UseSmileIDProcessingCenterIndicatorProps,
-) {
-  const themeFromContext = useUseSmileIDTheme();
-  const theme = props.theme ?? themeFromContext;
-  if (props.containerWidth <= 0 || props.containerHeight <= 0) return null;
-
-  const { ovalWidth, ovalHeight, ovalLeft, ovalTop } = computeFaceOvalGeometry(
-    props.containerWidth,
-    props.containerHeight,
-  );
-
-  return (
-    <View
-      pointerEvents="none"
-      style={[
-        styles.container,
-        {
-          width: ovalWidth,
-          height: ovalHeight,
-          left: ovalLeft,
-          top: ovalTop,
-        },
-      ]}
-      testID={props.testID}
-    >
-      {props.state.kind === "loading" ? (
-        <UseSmileIDLoadingIndicator theme={theme} />
-      ) : null}
-      {props.state.kind === "success" ? (
-        <UseSmileIDStatusIndicator state="success" theme={theme} />
-      ) : null}
-      {props.state.kind === "failed" ? (
-        <UseSmileIDStatusIndicator state="failure" theme={theme} />
-      ) : null}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    position: "absolute",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});

package/src/presentation/components/use_smile_id_rounded_checkbox.tsx

@@ -1,67 +0,0 @@
-import { Pressable, StyleSheet, View } from "react-native";
-import type { UseSmileIDTheme } from "../theme/theme";
-import { useUseSmileIDTheme } from "../theme/theme_context";
-import { SiCheckboxCheck } from "./icons";
-
-export type UseSmileIDRoundedCheckboxProps = {
-  readonly checked: boolean;
-  readonly onChange: (checked: boolean) => void;
-  readonly testID?: string;
-  readonly theme?: UseSmileIDTheme;
-};
-
-const SIZE = 20;
-const CHECK_SIZE = SIZE * 0.6;
-const RADIUS = 4;
-const BORDER_WIDTH = 2;
-
-/**
- * Rounded square checkbox primitive — used in the consent screen's
- * "I consent…" row.
- *
- * Filled with `offBlack` and a white check mark when checked;
- * transparent with the `offBlack` border when unchecked. Matches
- * the canonical SDK styling — 20pt outer, 4pt rounded corners,
- * 2pt border, 60% inner check.
- */
-export function UseSmileIDRoundedCheckbox(
-  props: UseSmileIDRoundedCheckboxProps,
-) {
-  const themeFromContext = useUseSmileIDTheme();
-  const theme = props.theme ?? themeFromContext;
-  return (
-    <Pressable
-      onPress={() => props.onChange(!props.checked)}
-      accessibilityRole="checkbox"
-      accessibilityState={{ checked: props.checked }}
-      testID={props.testID}
-      hitSlop={8}
-      style={[
-        styles.box,
-        {
-          borderColor: theme.colors.offBlack,
-          backgroundColor: props.checked
-            ? theme.colors.offBlack
-            : "transparent",
-        },
-      ]}
-    >
-      {props.checked ? (
-        <View>
-          <SiCheckboxCheck size={CHECK_SIZE} color={theme.colors.offWhite} />
-        </View>
-      ) : null}
-    </Pressable>
-  );
-}
-
-const styles = StyleSheet.create({
-  box: {
-    width: SIZE,
-    height: SIZE,
-    borderRadius: RADIUS,
-    borderWidth: BORDER_WIDTH,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});

package/src/presentation/components/use_smile_id_status_indicator.tsx

@@ -1,44 +0,0 @@
-import { StyleSheet, View } from "react-native";
-import type { UseSmileIDTheme } from "../theme/theme";
-import { useUseSmileIDTheme } from "../theme/theme_context";
-import { UseSmileIDLoadingIndicator } from "./use_smile_id_loading_indicator";
-import { SiFilledCheckCircle, SiFilledCloseCircle } from "./icons";
-import type { StatusIndicatorState } from "./status_indicator_state";
-
-export type UseSmileIDStatusIndicatorProps = {
-  readonly state: StatusIndicatorState;
-  readonly testID?: string;
-  readonly theme?: UseSmileIDTheme;
-};
-
-const SIZE = 64;
-
-/**
- * Tri-state badge centered inside the processing screen's face oval:
- *
- *   - loading → green arc spinner
- *   - success → filled green check circle
- *   - failure → filled red close circle
- */
-export function UseSmileIDStatusIndicator(
-  props: UseSmileIDStatusIndicatorProps,
-) {
-  const themeFromContext = useUseSmileIDTheme();
-  const theme = props.theme ?? themeFromContext;
-
-  return (
-    <View style={styles.wrap} testID={props.testID}>
-      {props.state === "loading" ? (
-        <UseSmileIDLoadingIndicator theme={theme} size={SIZE} />
-      ) : props.state === "success" ? (
-        <SiFilledCheckCircle size={SIZE} />
-      ) : (
-        <SiFilledCloseCircle size={SIZE} />
-      )}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  wrap: { alignItems: "center", justifyContent: "center" },
-});

package/src/presentation/components/use_smile_id_success_content.tsx

@@ -1,76 +0,0 @@
-import { StyleSheet, Text, View } from "react-native";
-import type { UseSmileIDTheme } from "../theme/theme";
-import { useUseSmileIDTheme } from "../theme/theme_context";
-import { UseSmileIDButton } from "./use_smile_id_button";
-import { useUseSmileIDLocalizations } from "../../l10n/use_smile_id_localizations_provider";
-
-export type UseSmileIDSuccessContentProps = {
-  readonly title?: string;
-  readonly message?: string;
-  readonly continueLabel?: string;
-  readonly onContinue?: () => void;
-  readonly testID?: string;
-  readonly theme?: UseSmileIDTheme;
-};
-
-/**
- * Success-state body of the processing screen's bottom card —
- * title, message, and the Continue button. The success ✓ indicator
- * is rendered separately, centered inside the face oval by the
- * screen itself, so it doesn't appear twice in the same view.
- */
-export function UseSmileIDSuccessContent(props: UseSmileIDSuccessContentProps) {
-  const themeFromContext = useUseSmileIDTheme();
-  const theme = props.theme ?? themeFromContext;
-  const loc = useUseSmileIDLocalizations();
-  const title = props.title ?? loc.siProcessingSuccessTitle;
-  const message = props.message ?? loc.siProcessingSuccessMessage;
-  const continueLabel = props.continueLabel ?? loc.siProcessingContinue;
-  return (
-    <View
-      testID={props.testID}
-      style={[styles.container, { paddingVertical: theme.spacing.small }]}
-    >
-      <Text
-        style={{
-          ...theme.typography.cardTitle,
-          color: theme.colors.primary,
-          textAlign: "center",
-        }}
-      >
-        {title}
-      </Text>
-      <Text
-        style={{
-          ...theme.typography.subHeading,
-          color: theme.colors.cardText,
-          marginTop: theme.spacing.small,
-          textAlign: "center",
-        }}
-      >
-        {message}
-      </Text>
-      {props.onContinue ? (
-        <View style={{ marginTop: theme.spacing.large, alignSelf: "stretch" }}>
-          <UseSmileIDButton
-            label={continueLabel}
-            onClick={props.onContinue}
-            variant="primary"
-            theme={theme}
-            testID="si_processing_continue_button"
-          />
-        </View>
-      ) : null}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  // Without `alignSelf: "stretch"` the centering card hugs the text
-  // and the Continue button collapses to its label width.
-  container: {
-    alignItems: "center",
-    justifyContent: "center",
-    alignSelf: "stretch",
-  },
-});