@smileid/usesmileid 12.0.0-beta01

package/src/presentation/components/use_smile_id_partner_icon.tsx

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

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

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

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

@@ -0,0 +1,76 @@
+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",
+  },
+});

package/src/presentation/flow/__tests__/document_flow_navigation.test.ts

@@ -0,0 +1,285 @@
+import { describe, expect, it, vi } from "vitest";
+import { DocumentSide } from "@smileid/usesmileid_bridge";
+import { FlowNavigationManager } from "../flow_navigation_manager";
+import {
+  CaptureType,
+  ScreensBuilder,
+  type ScreensConfig,
+} from "../dsl/builder/screens_builder";
+import type { FlowConfigurationSnapshot } from "../dsl/use_smile_id_flow_builder";
+import type { JobRequest } from "../../../data/model/job_request";
+import type { UseSmileIDRepository } from "../../../data/repository/use_smile_id_repository";
+import type { JobSubmissionResponse } from "../../../data/model/job_submission_response";
+import { success, type UseSmileIDResult } from "../../../core/models/result";
+import { JobType } from "../../../core/models/job_type";
+import { DocumentType } from "../../../core/models/document_type";
+import { DocumentImageOrigin } from "../../../metadata/document_image_origin";
+
+function buildScreens(block: (s: ScreensBuilder) => void): ScreensConfig {
+  const screensBuilder = new ScreensBuilder();
+  block(screensBuilder);
+  return screensBuilder.build();
+}
+
+function makeManager(
+  screens: ScreensConfig,
+  extra: Partial<FlowConfigurationSnapshot> = {},
+  repository?: UseSmileIDRepository,
+): FlowNavigationManager {
+  return new FlowNavigationManager({
+    configuration: { screens, onResult: () => {}, ...extra },
+    onExit: vi.fn(),
+    ...(repository ? { repository } : {}),
+  });
+}
+
+/** Two-sided document flow with a single per-side `preview {}`, then selfie. */
+function twoSidedDocumentFlow(): ScreensConfig {
+  return buildScreens((screens) => {
+    screens.instructions();
+    screens.capture((capture) => {
+      capture.captureType = CaptureType.document;
+      capture.document((document) => {
+        document.documentType = DocumentType.SouthAfricaGreenBook; // hasBackSide
+        document.captureBothSides = true;
+        document.allowSkipBack = true;
+      });
+    });
+    screens.preview();
+    screens.capture((capture) => {
+      capture.captureType = CaptureType.selfie;
+    });
+    screens.processing();
+  });
+}
+
+const consentInfo = Object.freeze({
+  granted: true,
+  grantedAt: "2026-04-30T00:00:00.000Z",
+  noticeLanguage: "EN",
+  noticePrivacyPolicyUrl: "https://example.test/privacy",
+});
+
+const SAMPLE_USER_DETAILS = Object.freeze({
+  givenNames: "Jane",
+  lastName: "Doe",
+  email: "jane@example.test",
+  phoneNumber: "+2348000000000",
+});
+
+describe("FlowNavigationManager — document per-side preview loop", () => {
+  it("documentCapturesBack reflects the document type + captureBothSides", () => {
+    expect(makeManager(twoSidedDocumentFlow()).documentCapturesBack()).toBe(
+      true,
+    );
+
+    const passportFlow = buildScreens((screens) => {
+      screens.capture((capture) => {
+        capture.captureType = CaptureType.document;
+        capture.document((document) => {
+          document.documentType = DocumentType.Passport; // no back side
+        });
+      });
+    });
+    expect(makeManager(passportFlow).documentCapturesBack()).toBe(false);
+  });
+
+  it("after the FRONT preview, routes back to the document capture for the BACK", () => {
+    const manager = makeManager(twoSidedDocumentFlow());
+    manager.navigateToNext(); // instructions → document capture
+    manager.setCapturedFrontDocument("file:///front.jpg");
+
+    // From the capture step the front simply advances to the preview.
+    expect(manager.getNextScreen()?.kind).toBe("preview");
+    manager.navigateToNext(); // → preview (front)
+
+    expect(manager.currentPreviewIsDocument()).toBe(true);
+    expect(manager.currentDocumentPreviewPath()).toBe("file:///front.jpg");
+
+    // The front preview loops back to the document capture for the back.
+    const next = manager.getNextScreen();
+    expect(next?.kind).toBe("capture");
+    expect(next?.kind === "capture" ? next.config.captureType : undefined).toBe(
+      CaptureType.document,
+    );
+  });
+
+  it("after the BACK preview, advances linearly to the selfie capture", () => {
+    const manager = makeManager(twoSidedDocumentFlow());
+    manager.navigateToNext(); // → document capture
+    manager.setCapturedFrontDocument("file:///front.jpg");
+    manager.navigateToNext(); // → preview (front)
+    manager.navigateToNext(); // → document capture (back)
+    manager.setCapturedBackDocument("file:///back.jpg");
+    expect(manager.getNextScreen()?.kind).toBe("preview");
+    manager.navigateToNext(); // → preview (back)
+
+    expect(manager.currentDocumentPreviewPath()).toBe("file:///back.jpg");
+    const next = manager.getNextScreen();
+    expect(next?.kind).toBe("capture");
+    expect(next?.kind === "capture" ? next.config.captureType : undefined).toBe(
+      CaptureType.selfie,
+    );
+  });
+
+  it("skipping the back side routes past the back capture's preview", () => {
+    const manager = makeManager(twoSidedDocumentFlow());
+    manager.navigateToNext(); // → document capture
+    manager.setCapturedFrontDocument("file:///front.jpg");
+    manager.skipDocumentBack();
+
+    // From the capture step (interstitial shown) Skip jumps past the preview.
+    const next = manager.getNextScreen();
+    expect(next?.kind).toBe("capture");
+    expect(next?.kind === "capture" ? next.config.captureType : undefined).toBe(
+      CaptureType.selfie,
+    );
+  });
+
+  it("retakeCurrentDocumentSide clears the back first, then the front", () => {
+    const manager = makeManager(twoSidedDocumentFlow());
+    manager.setCapturedFrontDocument("file:///front.jpg");
+    manager.setCapturedBackDocument("file:///back.jpg");
+
+    manager.retakeCurrentDocumentSide();
+    expect(manager.captured.backDocumentPath).toBeUndefined();
+    expect(manager.captured.frontDocumentPath).toBe("file:///front.jpg");
+
+    manager.retakeCurrentDocumentSide();
+    expect(manager.captured.frontDocumentPath).toBeUndefined();
+  });
+
+  it("retaking the front un-skips the back so the loop runs again", () => {
+    const manager = makeManager(twoSidedDocumentFlow());
+    manager.navigateToNext(); // → document capture
+    manager.setCapturedFrontDocument("file:///front.jpg");
+    manager.skipDocumentBack();
+    manager.retakeCurrentDocumentSide(); // clears front + un-skips
+
+    manager.setCapturedFrontDocument("file:///front2.jpg");
+    manager.navigateToNext(); // → preview (front)
+    // Back pending again and no longer skipped → loops to the document capture.
+    expect(manager.getNextScreen()?.kind).toBe("capture");
+  });
+
+  it("a selfie preview is not treated as a document preview", () => {
+    const manager = makeManager(
+      buildScreens((screens) => {
+        screens.capture((capture) => {
+          capture.captureType = CaptureType.selfie;
+        });
+        screens.preview();
+      }),
+    );
+    manager.navigateToNext(); // selfie capture → preview
+    expect(manager.currentPreviewIsDocument()).toBe(false);
+  });
+});
+
+describe("FlowNavigationManager — document image origin metadata", () => {
+  const RESPONSE: JobSubmissionResponse = Object.freeze({
+    jobId: "job-1",
+    userId: "user-1",
+    status: "completed",
+    message: "ok",
+  });
+
+  class StubRepository implements UseSmileIDRepository {
+    readonly received: JobRequest[] = [];
+    result: UseSmileIDResult<JobSubmissionResponse> = success(RESPONSE);
+    submit(
+      request: JobRequest,
+    ): Promise<UseSmileIDResult<JobSubmissionResponse>> {
+      this.received.push(request);
+      return Promise.resolve(this.result);
+    }
+  }
+
+  it("stamps DocumentFront/BackImageOrigin onto the submitted metadata", () => {
+    const repository = new StubRepository();
+    const manager = makeManager(
+      buildScreens((screens) => screens.processing()),
+      {
+        documentVerificationParams: { country: "NG" },
+        userDetails: SAMPLE_USER_DETAILS,
+        network: {
+          config: {
+            jobType: JobType.documentVerification,
+            token: "k",
+            partnerConfig: {
+              partnerId: "p",
+              callbackUrl: "",
+              useSandbox: true,
+            },
+          },
+        },
+      },
+      repository,
+    );
+    manager.setCapturedSelfie("file:///selfie.jpg", ["file:///l1.jpg"]);
+    manager.setCapturedFrontDocument("file:///front.jpg");
+    manager.setCapturedBackDocument("file:///back.jpg");
+    manager.recordDocumentImageOrigin(
+      DocumentSide.Front,
+      DocumentImageOrigin.CameraManualCapture,
+    );
+    manager.recordDocumentImageOrigin(
+      DocumentSide.Back,
+      DocumentImageOrigin.Gallery,
+    );
+    manager.setConsent(consentInfo);
+
+    manager.beginSubmissionIfNeeded();
+
+    const request = repository.received[0]!;
+    const entries = request.metadata.toEntries();
+    expect(entries).toContainEqual({
+      name: "DocumentFrontImageOrigin",
+      value: "CameraManualCapture",
+    });
+    expect(entries).toContainEqual({
+      name: "DocumentBackImageOrigin",
+      value: "Gallery",
+    });
+  });
+
+  it("omits the back origin when only the front was captured", () => {
+    const repository = new StubRepository();
+    const manager = makeManager(
+      buildScreens((screens) => screens.processing()),
+      {
+        documentVerificationParams: { country: "NG" },
+        userDetails: SAMPLE_USER_DETAILS,
+        network: {
+          config: {
+            jobType: JobType.documentVerification,
+            token: "k",
+            partnerConfig: {
+              partnerId: "p",
+              callbackUrl: "",
+              useSandbox: true,
+            },
+          },
+        },
+      },
+      repository,
+    );
+    manager.setCapturedSelfie("file:///selfie.jpg", []);
+    manager.setCapturedFrontDocument("file:///front.jpg");
+    manager.recordDocumentImageOrigin(
+      DocumentSide.Front,
+      DocumentImageOrigin.CameraAutoCapture,
+    );
+    manager.setConsent(consentInfo);
+
+    manager.beginSubmissionIfNeeded();
+
+    const entries = repository.received[0]!.metadata.toEntries();
+    expect(
+      entries.some((entry) => entry.name === "DocumentFrontImageOrigin"),
+    ).toBe(true);
+    expect(
+      entries.some((entry) => entry.name === "DocumentBackImageOrigin"),
+    ).toBe(false);
+  });
+});