@smileid/usesmileid 12.0.0-beta01

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

@@ -0,0 +1,66 @@
+import type { ConsentConfigBuilder } from "../dsl/builder/screens_builder";
+import type { ConsentInformation } from "../../../core/models/params";
+import { UseSmileIDCrashReporting } from "@smileid/usesmileid_bridge";
+import { ConsentDeniedException } from "../../../core/exception";
+import { UseSmileIDConsentScreen } from "../../screen/use_smile_id_consent_screen";
+import { UseSmileIDOrchestratedScreenHost } from "./use_smile_id_orchestrated_screen_host";
+
+export type OrchestratedConsentScreenProps = {
+  readonly configuration: ConsentConfigBuilder;
+};
+
+/**
+ * Orchestrated consent screen. On allow: stores the
+ * `ConsentInformation` on the navigation manager, fires the partner-
+ * supplied `onConsentGranted` callback, then advances the cursor.
+ * On deny: exits the flow with a `failed` reason carrying a
+ * "consent denied" error so the orchestrator's `onResult` reports
+ * the failure cleanly.
+ */
+export function OrchestratedConsentScreen({
+  configuration,
+}: OrchestratedConsentScreenProps) {
+  return (
+    <UseSmileIDOrchestratedScreenHost
+      content={({ navigationManager, onNavigateNext }) => (
+        <UseSmileIDConsentScreen
+          partnerName={configuration.partnerName}
+          {...(configuration.partnerIcon !== undefined
+            ? { partnerIcon: configuration.partnerIcon }
+            : {})}
+          {...(configuration.partnerPrivacyPolicyUrl !== undefined
+            ? { partnerPrivacyPolicyUrl: configuration.partnerPrivacyPolicyUrl }
+            : {})}
+          showAttribution={configuration.showAttribution}
+          onAllow={(info: ConsentInformation) => {
+            // Store on the manager first so the consent payload is
+            // available to the next screen (or the eventual
+            // submission). Then fire the partner hook so partner-side
+            // analytics see the consent before navigation.
+            navigationManager.setConsent(info);
+            try {
+              configuration.onConsentGranted?.(info);
+            } catch (err) {
+              // Concrete scenario: partner's `onConsentGranted`
+              // throws (e.g., their analytics SDK is in a bad
+              // state). Don't let that crash the SDK — route through
+              // crash reporting so partner observability picks it up.
+              UseSmileIDCrashReporting.captureException(err);
+            }
+            onNavigateNext();
+          }}
+          onDeny={() => {
+            // Exit the flow with a failed reason; the orchestrator
+            // converts that to `onResult({ status: 'failure', error })`.
+            // Typed `ConsentDeniedException` (with timestamp) so partners
+            // can distinguish a deliberate denial from other failures.
+            navigationManager.exit({
+              kind: "failed",
+              error: new ConsentDeniedException({ timestamp: Date.now() }),
+            });
+          }}
+        />
+      )}
+    />
+  );
+}

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

@@ -0,0 +1,102 @@
+import { useCallback } from "react";
+import type { InstructionsConfigBuilder } from "../dsl/builder/screens_builder";
+import { UseSmileIDInstructionsScreen } from "../../screen/use_smile_id_instructions_screen";
+import {
+  UseSmileIDOrchestratedScreenHost,
+  type OrchestratedScreenHostContent,
+} from "./use_smile_id_orchestrated_screen_host";
+import { resolveInstructionsConfig } from "../../screen/helpers/instructions_screen_helpers";
+import { useUseSmileIDLocalizations } from "../../../l10n/use_smile_id_localizations_provider";
+import type { UseSmileIDLocalizations } from "../../../l10n/use_smile_id_localizations";
+import {
+  getCameraPermissionStatus,
+  requestCameraPermission,
+} from "../../../camera/camera_permissions";
+
+export type OrchestratedInstructionsScreenProps = {
+  readonly configuration: InstructionsConfigBuilder;
+};
+
+type HostRenderProps = Parameters<OrchestratedScreenHostContent>[0];
+
+/**
+ * Orchestrated instructions screen. Resolves the partner config into concrete
+ * screen props — `enhancedLivenessEnabled` drives the hero swap and the
+ * `showHeroOvalProgress = !enhancedLivenessEnabled` suppression — and gates
+ * Continue on the camera permission before advancing.
+ */
+export function OrchestratedInstructionsScreen({
+  configuration,
+}: OrchestratedInstructionsScreenProps) {
+  const localizations = useUseSmileIDLocalizations();
+  return (
+    <UseSmileIDOrchestratedScreenHost
+      content={(renderProps) => (
+        <OrchestratedInstructionsContent
+          renderProps={renderProps}
+          configuration={configuration}
+          localizations={localizations}
+        />
+      )}
+    />
+  );
+}
+
+// A real component so its hooks run at the top level, not inside the host's
+// render callback (Rules of Hooks).
+function OrchestratedInstructionsContent({
+  renderProps: { navigationManager, onBack, onNavigateNext },
+  configuration,
+  localizations,
+}: {
+  readonly renderProps: HostRenderProps;
+  readonly configuration: InstructionsConfigBuilder;
+  readonly localizations: UseSmileIDLocalizations;
+}) {
+  const onContinueWithPermission = useCallback(async () => {
+    const current = await getCameraPermissionStatus();
+    if (current === "granted") {
+      onNavigateNext();
+      return;
+    }
+    const next = await requestCameraPermission();
+    if (next === "granted") {
+      onNavigateNext();
+    }
+    // On denial, stay on the Instructions screen rather than advancing
+    // into a camera screen against a denied permission.
+  }, [onNavigateNext]);
+
+  const documentType = navigationManager.documentType;
+  const resolved = resolveInstructionsConfig(
+    configuration,
+    {
+      enhancedLivenessEnabled: navigationManager.enhancedLivenessEnabled,
+      ...(documentType ? { documentType } : {}),
+    },
+    localizations,
+  );
+
+  return (
+    <UseSmileIDInstructionsScreen
+      titlePrefix={resolved.titlePrefix}
+      titleEmphasis={resolved.titleEmphasis}
+      heroSource={resolved.heroSource}
+      guidelinesSectionTitle={resolved.guidelinesSectionTitle}
+      guidelines={resolved.guidelines}
+      showAttribution={resolved.showAttribution}
+      showHeroOval={resolved.showHeroOval}
+      showHeroOvalProgress={resolved.showHeroOvalProgress}
+      {...(configuration.continueButton
+        ? {
+            // Adapt the config slot `{ onClick, enabled }` to the screen's
+            // `{ onClick }` (Continue is always actionable).
+            continueButton: ({ onClick }: { onClick: () => void }) =>
+              configuration.continueButton?.({ onClick, enabled: true }),
+          }
+        : {})}
+      onContinue={onContinueWithPermission}
+      onBack={onBack}
+    />
+  );
+}

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

@@ -0,0 +1,72 @@
+import type { PreviewConfigBuilder } from "../dsl/builder/screens_builder";
+import { UseSmileIDPreviewScreen } from "../../screen/use_smile_id_preview_screen";
+import { UseSmileIDDocumentPreviewScreen } from "../../screen/use_smile_id_document_preview_screen";
+import { UseSmileIDOrchestratedScreenHost } from "./use_smile_id_orchestrated_screen_host";
+
+export type OrchestratedPreviewScreenProps = {
+  readonly configuration: PreviewConfigBuilder;
+};
+
+/**
+ * Orchestrated preview screen — renders the document preview (the side just
+ * captured, once per side via the manager's per-side loop) or the selfie
+ * preview. Accept advances; Reject rewinds and discards that side, but only
+ * when the partner opted in via `allowRetake`.
+ */
+export function OrchestratedPreviewScreen({
+  configuration,
+}: OrchestratedPreviewScreenProps) {
+  return (
+    <UseSmileIDOrchestratedScreenHost
+      content={({ navigationManager, onBack, onNavigateNext }) => {
+        if (navigationManager.currentPreviewIsDocument()) {
+          const documentPath = navigationManager.currentDocumentPreviewPath();
+          return (
+            <UseSmileIDDocumentPreviewScreen
+              documentOrientation={
+                navigationManager.documentType?.orientation ?? "Landscape"
+              }
+              showAttribution={configuration.showAttribution}
+              {...(documentPath !== undefined
+                ? { capturedDocumentPath: documentPath }
+                : {})}
+              onAccept={onNavigateNext}
+              onReject={() => {
+                if (configuration.allowRetake) {
+                  navigationManager.retakeCurrentDocumentSide();
+                  onBack();
+                }
+              }}
+              onClose={() => navigationManager.exit()}
+            />
+          );
+        }
+        return (
+          <UseSmileIDPreviewScreen
+            allowRetake={configuration.allowRetake}
+            showAttribution={configuration.showAttribution}
+            {...(navigationManager.captured.selfiePath !== undefined
+              ? { capturedSelfiePath: navigationManager.captured.selfiePath }
+              : {})}
+            {...(configuration.continueButton
+              ? {
+                  continueButton: ({ onClick }: { onClick: () => void }) =>
+                    configuration.continueButton?.({ onClick, enabled: true }),
+                }
+              : {})}
+            {...(configuration.cancelButton
+              ? {
+                  cancelButton: ({ onClick }: { onClick: () => void }) =>
+                    configuration.cancelButton?.({ onClick, enabled: true }),
+                }
+              : {})}
+            onAccept={onNavigateNext}
+            onReject={() => {
+              if (configuration.allowRetake) onBack();
+            }}
+          />
+        );
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,111 @@
+import { useEffect } from "react";
+import type { ProcessingConfigBuilder } from "../dsl/builder/screens_builder";
+import type { FlowNavigationManager } from "../flow_navigation_manager";
+import type { JobSubmissionState } from "../job_submission_state";
+import {
+  UseSmileIDProcessingScreen,
+  type ProcessingState,
+} from "../../screen/use_smile_id_processing_screen";
+import { UseSmileIDOrchestratedScreenHost } from "./use_smile_id_orchestrated_screen_host";
+import { ProcessingCancelledException } from "../../../core/exception";
+import {
+  JobType,
+  requiresDocument,
+  requiresSelfie,
+} from "../../../core/models/job_type";
+
+export type OrchestratedProcessingScreenProps = {
+  readonly configuration: ProcessingConfigBuilder;
+};
+
+/**
+ * Orchestrated processing screen. Mounts the visual processing screen,
+ * kicks off submission via the navigation manager, and routes
+ * `Continue` / `Retry` / `Exit` taps back into the flow.
+ */
+export function OrchestratedProcessingScreen({
+  configuration,
+}: OrchestratedProcessingScreenProps) {
+  return (
+    <UseSmileIDOrchestratedScreenHost
+      content={({ navigationManager, onNavigateNext }) => (
+        <ProcessingScreenBody
+          processingConfig={configuration}
+          navigationManager={navigationManager}
+          onContinue={onNavigateNext}
+        />
+      )}
+    />
+  );
+}
+
+type ProcessingScreenBodyProps = {
+  readonly processingConfig: ProcessingConfigBuilder;
+  readonly navigationManager: FlowNavigationManager;
+  readonly onContinue: () => void;
+};
+
+/**
+ * Inner component — split out so the mount `useEffect` lives in a hook
+ * caller; the host's `content` render prop can't host hooks directly.
+ */
+function ProcessingScreenBody(props: ProcessingScreenBodyProps) {
+  const { navigationManager } = props;
+  // Mount-only: kicks off submission once per manager identity. The dep
+  // is the manager (stable per parent useMemo), not a fresh closure, so
+  // it doesn't refire on every host re-render; also guarded internally.
+  useEffect(() => {
+    navigationManager.beginSubmissionIfNeeded();
+  }, [navigationManager]);
+
+  const jobType =
+    navigationManager.configuration.network?.config?.jobType ?? JobType.unknown;
+
+  // Document jobs render the captured front document (not the selfie oval);
+  // the front path supersedes showFaceOval.
+  const documentImageUri = requiresDocument(jobType)
+    ? navigationManager.captured.frontDocumentPath
+    : undefined;
+  const documentOrientation = navigationManager.documentType?.orientation;
+
+  return (
+    <UseSmileIDProcessingScreen
+      state={mapToProcessingState(navigationManager.jobSubmissionState)}
+      showFaceOval={requiresSelfie(jobType) || requiresDocument(jobType)}
+      showProgressPercentage={props.processingConfig.showProgressPercentage}
+      showAttribution={props.processingConfig.showAttribution}
+      {...(documentImageUri !== undefined ? { documentImageUri } : {})}
+      {...(documentImageUri !== undefined && documentOrientation !== undefined
+        ? { documentOrientation }
+        : {})}
+      {...(navigationManager.captured.selfiePath !== undefined
+        ? { capturedSelfiePath: navigationManager.captured.selfiePath }
+        : {})}
+      onContinue={props.onContinue}
+      onRetry={() => navigationManager.retrySubmission()}
+      onExit={() =>
+        navigationManager.exit({
+          kind: "failed",
+          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 {
+  switch (state.kind) {
+    case "notAttempted":
+    case "loading":
+      return { kind: "loading" };
+    case "success":
+      return { kind: "success", message: state.response.message };
+    case "failure":
+      return { kind: "failed", errorMessage: state.error.message };
+  }
+}

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

@@ -0,0 +1,39 @@
+import type { ReactNode } from "react";
+import { useFlowNavigation } from "../flow_navigation_context";
+import type { FlowNavigationManager } from "../flow_navigation_manager";
+
+export type OrchestratedScreenHostContent = (args: {
+  readonly navigationManager: FlowNavigationManager;
+  readonly onBack: () => void;
+  readonly onNavigateNext: () => void;
+}) => ReactNode;
+
+export type UseSmileIDOrchestratedScreenHostProps = {
+  readonly content: OrchestratedScreenHostContent;
+};
+
+/**
+ * Shared host for every `OrchestratedXxxScreen`. Reads the
+ * `FlowNavigationManager` from context and provides pre-wired
+ * `onBack` / `onNavigateNext` callbacks.
+ *
+ * Concrete scenario this catches: a partner mounts an
+ * `OrchestratedXxxScreen` outside `<UseSmileIDBuilder>`. The
+ * `useFlowNavigation()` call throws a loud "called outside
+ * `<UseSmileIDBuilder>`" error rather than silently no-op-ing on
+ * `navigateToNext()` / `navigateBack()`.
+ */
+export function UseSmileIDOrchestratedScreenHost({
+  content,
+}: UseSmileIDOrchestratedScreenHostProps) {
+  const navigationManager = useFlowNavigation();
+  return (
+    <>
+      {content({
+        navigationManager,
+        onBack: () => navigationManager.navigateBack(),
+        onNavigateNext: () => navigationManager.navigateToNext(),
+      })}
+    </>
+  );
+}

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

@@ -0,0 +1,147 @@
+import { ScrollView, StyleSheet, Text, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { IssueSeverity } from "../../../core/exception/issue_severity";
+import type { UseSmileIDValidationException } from "../../../core/exception/use_smile_id_validation_exception";
+import type { ValidationStateInvalid } from "../validation/validation_state";
+
+/**
+ * Debug-mode screen that lists every validation issue produced by
+ * the builder when `enableDebugMode` is set on the config block.
+ * Production partners receive the same information via
+ * `onResult.failure` instead of seeing this screen.
+ */
+export type ValidationErrorScreenProps = {
+  readonly validationState: ValidationStateInvalid;
+};
+
+export function ValidationErrorScreen({
+  validationState,
+}: ValidationErrorScreenProps) {
+  const { issues } = validationState;
+  return (
+    <SafeAreaView style={styles.root} edges={["top", "bottom"]}>
+      <ScrollView contentContainerStyle={styles.content}>
+        <Text style={styles.icon}>⚠️</Text>
+        <Text style={styles.heading}>UseSmileID Configuration Error</Text>
+        <Text style={styles.subheading}>
+          Found {issues.length} issue(s) in your flow configuration
+        </Text>
+
+        {issues.map((issue, index) => (
+          <IssueCard
+            key={`${index}-${issue.errorCode ?? "unknown"}`}
+            issue={issue}
+            index={index + 1}
+            total={issues.length}
+          />
+        ))}
+
+        <Text style={styles.footer}>
+          This error screen only appears in development. Fix the issues above to
+          continue.
+        </Text>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+type IssueCardProps = {
+  readonly issue: UseSmileIDValidationException;
+  readonly index: number;
+  readonly total: number;
+};
+
+function IssueCard({ issue, index, total }: IssueCardProps) {
+  const severityColor =
+    issue.severity === IssueSeverity.error ? "#B91C1C" : "#B45309";
+  return (
+    <View style={styles.card}>
+      <Text style={[styles.severity, { color: severityColor }]}>
+        Issue {index} of {total} — {issue.severity}
+      </Text>
+      <Text style={styles.message}>{issue.message}</Text>
+
+      {issue.suggestedFix.trim().length > 0 ? (
+        <View style={styles.fixBox}>
+          <Text style={styles.fixLabel}>💡 Suggested Fix:</Text>
+          <Text style={styles.fixText}>{issue.suggestedFix}</Text>
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    backgroundColor: "#FEE2E2",
+  },
+  content: {
+    padding: 16,
+    alignItems: "center",
+  },
+  icon: {
+    fontSize: 56,
+    marginTop: 32,
+  },
+  heading: {
+    fontSize: 22,
+    fontWeight: "bold",
+    color: "#B91C1C",
+    marginTop: 16,
+    textAlign: "center",
+  },
+  subheading: {
+    fontSize: 16,
+    color: "#7F1D1D",
+    marginTop: 8,
+    textAlign: "center",
+  },
+  card: {
+    width: "100%",
+    backgroundColor: "#FFFFFF",
+    borderRadius: 12,
+    padding: 16,
+    marginTop: 16,
+    elevation: 2,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.1,
+    shadowRadius: 2,
+  },
+  severity: {
+    fontSize: 12,
+    fontWeight: "bold",
+    textTransform: "uppercase",
+  },
+  message: {
+    fontSize: 16,
+    color: "#1F2937",
+    marginTop: 8,
+    fontWeight: "500",
+  },
+  fixBox: {
+    backgroundColor: "#DBEAFE",
+    borderRadius: 8,
+    padding: 12,
+    marginTop: 12,
+  },
+  fixLabel: {
+    fontSize: 13,
+    fontWeight: "bold",
+    color: "#1E40AF",
+  },
+  fixText: {
+    fontSize: 14,
+    color: "#1E3A8A",
+    fontFamily: "Courier",
+    marginTop: 4,
+  },
+  footer: {
+    fontSize: 12,
+    color: "#7F1D1D",
+    marginTop: 24,
+    opacity: 0.7,
+    textAlign: "center",
+  },
+});