@smileid/usesmileid 12.0.1 → 12.0.2

package/src/presentation/flow/screen/__tests__/orchestrated_processing_screen.test.tsx

@@ -0,0 +1,338 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import * as React from "react";
+import { create as createRenderer, act } from "react-test-renderer";
+
+// `vi.mock` is hoisted above the imports, so anything its factory closes over
+// must be created with `vi.hoisted` or it is still in the TDZ when the factory
+// runs.
+const { screenProps } = vi.hoisted(() => ({
+  screenProps: { current: {} as Record<string, unknown> },
+}));
+
+// Stand in for the leaf screen so these tests exercise the orchestration
+// (submission kick-off, state mapping, exit routing) rather than re-testing
+// the processing UI, which has its own component suite.
+vi.mock("../../../screen/use_smile_id_processing_screen", () => ({
+  UseSmileIDProcessingScreen: (props: Record<string, unknown>) => {
+    screenProps.current = props;
+    return null;
+  },
+}));
+
+import { OrchestratedProcessingScreen } from "../orchestrated_processing_screen";
+import { FlowNavigationProvider } from "../../flow_navigation_context";
+import {
+  NetworkServerException,
+  NetworkTransportException,
+  NetworkUnknownException,
+  ProcessingCancelledException,
+} from "../../../../core/exception";
+import { JobType } from "../../../../core/models/job_type";
+import { ProcessingConfigBuilder } from "../../dsl/builder/screens_builder";
+import type { FlowNavigationManager } from "../../flow_navigation_manager";
+import type { JobSubmissionState } from "../../job_submission_state";
+
+type Fn = ReturnType<typeof vi.fn>;
+
+type FakeManager = FlowNavigationManager & {
+  beginSubmissionIfNeeded: Fn;
+  retrySubmission: Fn;
+  navigateToNext: Fn;
+  exit: Fn;
+};
+
+type ManagerOverrides = {
+  readonly jobType?: number;
+  readonly submissionState?: JobSubmissionState;
+  readonly frontDocumentPath?: string;
+  readonly selfiePath?: string;
+  readonly documentFrameAspectRatio?: number;
+};
+
+function makeManager(overrides: ManagerOverrides = {}): FakeManager {
+  return {
+    beginSubmissionIfNeeded: vi.fn(),
+    retrySubmission: vi.fn(),
+    navigateToNext: vi.fn(),
+    navigateBack: vi.fn(),
+    exit: vi.fn(),
+    jobSubmissionState: overrides.submissionState ?? { kind: "notAttempted" },
+    documentFrameAspectRatio: overrides.documentFrameAspectRatio,
+    captured: {
+      ...(overrides.frontDocumentPath !== undefined
+        ? { frontDocumentPath: overrides.frontDocumentPath }
+        : {}),
+      ...(overrides.selfiePath !== undefined
+        ? { selfiePath: overrides.selfiePath }
+        : {}),
+    },
+    configuration: {
+      network:
+        overrides.jobType !== undefined
+          ? { config: { jobType: overrides.jobType } }
+          : undefined,
+    },
+  } as unknown as FakeManager;
+}
+
+function makeConfiguration(
+  overrides: Partial<ProcessingConfigBuilder> = {},
+): ProcessingConfigBuilder {
+  return Object.assign(new ProcessingConfigBuilder(), overrides);
+}
+
+function renderWith(
+  manager: FlowNavigationManager,
+  configuration: ProcessingConfigBuilder = makeConfiguration(),
+) {
+  act(() => {
+    createRenderer(
+      <FlowNavigationProvider manager={manager}>
+        <OrchestratedProcessingScreen configuration={configuration} />
+      </FlowNavigationProvider>,
+    );
+  });
+}
+
+beforeEach(() => {
+  screenProps.current = {};
+});
+
+describe("OrchestratedProcessingScreen — submission lifecycle", () => {
+  it("kicks off submission exactly once on mount", () => {
+    const manager = makeManager();
+    renderWith(manager);
+
+    expect(manager.beginSubmissionIfNeeded).toHaveBeenCalledTimes(1);
+  });
+
+  it("retry re-fires submission rather than navigating", () => {
+    const manager = makeManager({
+      submissionState: { kind: "failure", error: new Error("network down") },
+    });
+    renderWith(manager);
+
+    (screenProps.current.onRetry as () => void)();
+
+    expect(manager.retrySubmission).toHaveBeenCalledTimes(1);
+    expect(manager.navigateToNext).not.toHaveBeenCalled();
+  });
+
+  it("continue advances the flow", () => {
+    const manager = makeManager();
+    renderWith(manager);
+
+    (screenProps.current.onContinue as () => void)();
+
+    expect(manager.navigateToNext).toHaveBeenCalledTimes(1);
+  });
+
+  it("exit ends the flow with a typed ProcessingCancelledException", () => {
+    const manager = makeManager();
+    renderWith(manager);
+
+    (screenProps.current.onExit as () => void)();
+
+    const [[reason]] = manager.exit.mock.calls as [
+      [{ kind: string; error: unknown }],
+    ];
+    expect(reason.kind).toBe("failed");
+    expect(reason.error).toBeInstanceOf(ProcessingCancelledException);
+    expect(manager.navigateToNext).not.toHaveBeenCalled();
+  });
+
+  it("exit after a failed submission delivers that failure, not a cancellation", () => {
+    const submissionError = new Error("401 — invalid API key");
+    const manager = makeManager({
+      submissionState: { kind: "failure", error: submissionError },
+    });
+    renderWith(manager);
+
+    (screenProps.current.onExit as () => void)();
+
+    const [[reason]] = manager.exit.mock.calls as [
+      [{ kind: string; error: unknown }],
+    ];
+    expect(reason.kind).toBe("failed");
+    expect(reason.error).toBe(submissionError);
+  });
+
+  it("exit while the job is still in flight is a cancellation", () => {
+    const manager = makeManager({ submissionState: { kind: "loading" } });
+    renderWith(manager);
+
+    (screenProps.current.onExit as () => void)();
+
+    const [[reason]] = manager.exit.mock.calls as [
+      [{ kind: string; error: unknown }],
+    ];
+    expect(reason.error).toBeInstanceOf(ProcessingCancelledException);
+  });
+});
+
+describe("OrchestratedProcessingScreen — submission state mapping", () => {
+  it("shows loading during the pre-submission window so the card is never empty", () => {
+    renderWith(makeManager({ submissionState: { kind: "notAttempted" } }));
+    expect(screenProps.current.state).toEqual({ kind: "loading" });
+  });
+
+  it("shows loading while the job is in flight", () => {
+    renderWith(makeManager({ submissionState: { kind: "loading" } }));
+    expect(screenProps.current.state).toEqual({ kind: "loading" });
+  });
+
+  it("surfaces the server's message on success", () => {
+    renderWith(
+      makeManager({
+        submissionState: {
+          kind: "success",
+          response: {
+            userId: "user-1",
+            jobId: "job-1",
+            status: "approved",
+            message: "Job approved",
+          },
+        },
+      }),
+    );
+
+    expect(screenProps.current.state).toEqual({
+      kind: "success",
+      message: "Job approved",
+    });
+  });
+
+  it("surfaces the server's own text on a server failure", () => {
+    renderWith(
+      makeManager({
+        submissionState: {
+          kind: "failure",
+          error: new NetworkServerException({
+            statusCode: 401,
+            message: "Invalid token",
+          }),
+        },
+      }),
+    );
+
+    expect(screenProps.current.state).toEqual({
+      kind: "failed",
+      errorMessage: "Invalid token",
+    });
+  });
+
+  it("shows the no-connection copy on a transport failure", () => {
+    renderWith(
+      makeManager({
+        submissionState: {
+          kind: "failure",
+          error: new NetworkTransportException({ cause: new Error("ECONNREFUSED") }),
+        },
+      }),
+    );
+
+    expect(screenProps.current.state).toEqual({
+      kind: "failed",
+      errorMessage: "No internet connection.",
+    });
+  });
+
+  it("shows the generic copy for unknown network failures", () => {
+    renderWith(
+      makeManager({
+        submissionState: {
+          kind: "failure",
+          error: new NetworkUnknownException({
+            cause: new Error("ENOENT /data/user/0/…/selfie.jpg"),
+          }),
+        },
+      }),
+    );
+
+    expect(screenProps.current.state).toEqual({
+      kind: "failed",
+      errorMessage: "Something went wrong. Try again.",
+    });
+  });
+
+  it("surfaces the error message on other failures", () => {
+    renderWith(
+      makeManager({
+        submissionState: { kind: "failure", error: new Error("upload failed") },
+      }),
+    );
+
+    expect(screenProps.current.state).toEqual({
+      kind: "failed",
+      errorMessage: "upload failed",
+    });
+  });
+});
+
+describe("OrchestratedProcessingScreen — artifact rendering", () => {
+  it("renders the captured front document for a document job", () => {
+    renderWith(
+      makeManager({
+        jobType: JobType.documentVerification,
+        frontDocumentPath: "file:///front.jpg",
+        documentFrameAspectRatio: 1.586,
+      }),
+    );
+
+    expect(screenProps.current.documentImageUri).toBe("file:///front.jpg");
+    expect(screenProps.current.documentAspectRatio).toBeCloseTo(1.586, 5);
+    expect(screenProps.current.showFaceOval).toBe(true);
+  });
+
+  it("omits the document aspect ratio when the manager has none", () => {
+    renderWith(
+      makeManager({
+        jobType: JobType.documentVerification,
+        frontDocumentPath: "file:///front.jpg",
+      }),
+    );
+
+    expect(screenProps.current.documentImageUri).toBe("file:///front.jpg");
+    expect("documentAspectRatio" in screenProps.current).toBe(false);
+  });
+
+  it("ignores a captured document on a selfie-only job", () => {
+    renderWith(
+      makeManager({
+        jobType: JobType.smartSelfieEnrollment,
+        frontDocumentPath: "file:///front.jpg",
+        selfiePath: "file:///selfie.jpg",
+      }),
+    );
+
+    expect("documentImageUri" in screenProps.current).toBe(false);
+    expect(screenProps.current.capturedSelfiePath).toBe("file:///selfie.jpg");
+    expect(screenProps.current.showFaceOval).toBe(true);
+  });
+
+  it("hides the face oval for a job that captures neither", () => {
+    renderWith(makeManager({ jobType: JobType.enhancedKyc }));
+
+    expect(screenProps.current.showFaceOval).toBe(false);
+    expect("capturedSelfiePath" in screenProps.current).toBe(false);
+  });
+
+  it("treats a flow with no network config as the unknown job type", () => {
+    renderWith(makeManager());
+
+    expect(screenProps.current.showFaceOval).toBe(false);
+  });
+
+  it("forwards the partner's progress and attribution switches", () => {
+    renderWith(
+      makeManager(),
+      makeConfiguration({
+        showProgressPercentage: false,
+        showAttribution: false,
+      }),
+    );
+
+    expect(screenProps.current.showProgressPercentage).toBe(false);
+    expect(screenProps.current.showAttribution).toBe(false);
+  });
+});

package/src/presentation/flow/screen/orchestrated_processing_screen.tsx

@@ -7,7 +7,15 @@ import {
   type ProcessingState,
 } from "../../screen/use_smile_id_processing_screen";
 import { UseSmileIDOrchestratedScreenHost } from "./use_smile_id_orchestrated_screen_host";
-import { ProcessingCancelledException } from "../../../core/exception";
+import {
+  NetworkResponseParseException,
+  NetworkTimeoutException,
+  NetworkTransportException,
+  NetworkUnknownException,
+  ProcessingCancelledException,
+} from "../../../core/exception";
+import { useUseSmileIDLocalizations } from "../../../l10n/use_smile_id_localizations_provider";
+import type { UseSmileIDLocalizations } from "../../../l10n/use_smile_id_localizations";
 import {
   JobType,
   requiresDocument,
@@ -68,9 +76,11 @@ function ProcessingScreenBody(props: ProcessingScreenBodyProps) {
     : undefined;
   const documentAspectRatio = navigationManager.documentFrameAspectRatio;
 
+  const loc = useUseSmileIDLocalizations();
+
   return (
     <UseSmileIDProcessingScreen
-      state={mapToProcessingState(navigationManager.jobSubmissionState)}
+      state={mapToProcessingState(navigationManager.jobSubmissionState, loc)}
       showFaceOval={requiresSelfie(jobType) || requiresDocument(jobType)}
       showProgressPercentage={props.processingConfig.showProgressPercentage}
       showAttribution={props.processingConfig.showAttribution}
@@ -86,19 +96,29 @@ function ProcessingScreenBody(props: ProcessingScreenBodyProps) {
       onExit={() =>
         navigationManager.exit({
           kind: "failed",
-          error: new ProcessingCancelledException(),
+          error: exitError(navigationManager.jobSubmissionState),
         })
       }
     />
   );
 }
 
+/** The error the flow exits with when the user leaves the processing screen; an already-failed submission is delivered as its own failure. */
+function exitError(state: JobSubmissionState): Error {
+  return state.kind === "failure"
+    ? state.error
+    : new ProcessingCancelledException();
+}
+
 /**
  * Translate `JobSubmissionState` to the screen's `ProcessingState`.
  * `notAttempted` maps to `loading` so the brief pre-submission window
  * doesn't render an empty card.
  */
-function mapToProcessingState(state: JobSubmissionState): ProcessingState {
+function mapToProcessingState(
+  state: JobSubmissionState,
+  loc: UseSmileIDLocalizations,
+): ProcessingState {
   switch (state.kind) {
     case "notAttempted":
     case "loading":
@@ -106,6 +126,23 @@ function mapToProcessingState(state: JobSubmissionState): ProcessingState {
     case "success":
       return { kind: "success", message: state.response.message };
     case "failure":
-      return { kind: "failed", errorMessage: state.error.message };
+      return { kind: "failed", errorMessage: userFacingMessage(state.error, loc) };
+  }
+}
+
+/** Transport/timeout and parse/unknown network failures carry technical text — every other failure keeps its message. */
+function userFacingMessage(error: Error, loc: UseSmileIDLocalizations): string {
+  if (
+    error instanceof NetworkTransportException ||
+    error instanceof NetworkTimeoutException
+  ) {
+    return loc.siProcessingErrorNoConnection;
+  }
+  if (
+    error instanceof NetworkResponseParseException ||
+    error instanceof NetworkUnknownException
+  ) {
+    return loc.siProcessingErrorGeneric;
   }
+  return error.message;
 }

package/src/presentation/flow/use_smile_id_flow.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useMemo, useReducer, useRef } from "react";
-import { Text, useColorScheme, View } from "react-native";
+import { useEffect, useMemo, useReducer, useRef, useState } from "react";
+import { AppState, Text, useColorScheme, View } from "react-native";
 import type { FlowConfiguration } from "./config/flow_configuration";
 import type { FlowBuildResult } from "./dsl/flow_build_result";
 import {
@@ -102,6 +102,9 @@ export type FlowSuccessRendererProps = {
   readonly configuration: FlowConfiguration;
 };
 
+/** Ceiling on the first-frame font wait — past it the flow renders regardless. */
+const FONT_REGISTRATION_TIMEOUT_MS = 1000;
+
 /**
  * Walks the partner through the configured screen list, dispatches
  * frames to the chosen analyzer, submits the resulting artifacts, and
@@ -141,10 +144,17 @@ export function FlowSuccessRenderer({
       ? defaultDarkTheme
       : defaultLightTheme;
 
-  // Registers the bundled DM Sans faces (no-op after the first flow).
-  // Rendering does not wait on this — text re-renders into DM Sans the
-  // moment registration completes.
-  useUseSmileIDFonts();
+  // The first frame waits on font registration: a label laid out in the system font and re-measured in DM Sans can settle clipped.
+  const fontsLoaded = useUseSmileIDFonts();
+  const [fontWaitElapsed, setFontWaitElapsed] = useState(false);
+  useEffect(() => {
+    if (fontsLoaded) return;
+    const timer = setTimeout(
+      () => setFontWaitElapsed(true),
+      FONT_REGISTRATION_TIMEOUT_MS,
+    );
+    return () => clearTimeout(timer);
+  }, [fontsLoaded]);
   const enableCrashReporting =
     configuration.config?.enableCrashReporting !== false;
   // Sandbox sessions are test traffic and must not pollute the production
@@ -185,6 +195,9 @@ export function FlowSuccessRenderer({
   const onResultRef = useRef(configuration.onResult);
   onResultRef.current = configuration.onResult;
 
+  // Latched by `handleExit` so an unmounted-before-finishing flow can deliver exactly once.
+  const finishedRef = useRef(false);
+
   // Force-update reducer drives re-renders when the manager's cursor
   // or captured artifacts change. Cheaper than mirroring state into
   // React state — the manager is the single source of truth.
@@ -220,6 +233,7 @@ export function FlowSuccessRenderer({
 
   const manager = useMemo(() => {
     const handleExit = (reason: FlowExitReason) => {
+      finishedRef.current = true;
       const onResult = onResultRef.current;
       try {
         if (reason.kind === "completed") {
@@ -271,6 +285,17 @@ export function FlowSuccessRenderer({
     };
   }, [manager]);
 
+  // A flow unmounted before finishing delivers a cancelled result exactly once.
+  useEffect(
+    () => () => {
+      if (!finishedRef.current) {
+        finishedRef.current = true;
+        onResultRef.current(cancelled());
+      }
+    },
+    [],
+  );
+
   // Resolve localizations:
   //   1. Explicit `configuration.localizations` (partner-set on the
   //      builder) — wins over everything.
@@ -279,13 +304,23 @@ export function FlowSuccessRenderer({
   //      registered locales with `UseSmileIDLocalizations.register(...)`.
   //   3. English defaults — no provider mounted, screens read from
   //      the context's default English-only instance.
+  // A device locale change requires leaving the app, so re-reading on foreground is what makes a mid-flow switch observable.
+  const [localeEpoch, bumpLocaleEpoch] = useReducer((x: number) => x + 1, 0);
+  useEffect(() => {
+    const subscription = AppState.addEventListener("change", (nextState) => {
+      if (nextState === "active") bumpLocaleEpoch();
+    });
+    return () => subscription.remove();
+  }, []);
+
+  const activeLocaleKey = UseSmileIDLocalizations.activeLocaleKey;
   const resolved = useMemo(() => {
     if (configuration.localizations) return configuration.localizations;
     if (UseSmileIDLocalizations.hasRegisteredLocales()) {
       return UseSmileIDLocalizations.forActiveLocale();
     }
     return null;
-  }, [configuration.localizations]);
+  }, [configuration.localizations, activeLocaleKey, localeEpoch]);
 
   const step = manager.currentScreen;
 
@@ -331,7 +366,16 @@ export function FlowSuccessRenderer({
   // resolve — the context default (English) covers the no-provider
   // path without an extra wrapper.
   const themed = (
-    <UseSmileIDThemeProvider value={theme}>{inner}</UseSmileIDThemeProvider>
+    <UseSmileIDThemeProvider value={theme}>
+      {fontsLoaded || fontWaitElapsed ? (
+        inner
+      ) : (
+        <View
+          style={{ flex: 1, backgroundColor: theme.colors.background }}
+          testID="si_flow_font_gate"
+        />
+      )}
+    </UseSmileIDThemeProvider>
   );
 
   if (resolved) {