@smileid/usesmileid 12.0.0-beta01

package/src/presentation/screen/use_smile_id_consent_screen.tsx

@@ -0,0 +1,382 @@
+import { useState, type ReactNode } from "react";
+import {
+  ScrollView,
+  StyleSheet,
+  Text,
+  useColorScheme,
+  View,
+} from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import type { ConsentInformation } from "../../core/models/params";
+import type { UseSmileIDTheme } from "../theme/theme";
+import { useUseSmileIDTheme } from "../theme/theme_context";
+import { UseSmileIDAttribution } from "../components/use_smile_id_attribution";
+import { UseSmileIDButton } from "../components/use_smile_id_button";
+import { UseSmileIDConsentRow } from "../components/use_smile_id_consent_row";
+import { UseSmileIDExpandableIcon } from "../components/use_smile_id_expandable_icon";
+import {
+  SiConsentBiometric,
+  SiConsentContact,
+  SiConsentDevice,
+  SiConsentPersonal,
+  SiPlus,
+  SiSmileConsentIcon,
+} from "../components/icons";
+import { UseSmileIDLearnMoreContent } from "../components/use_smile_id_learn_more_content";
+import { UseSmileIDPartnerIcon } from "../components/use_smile_id_partner_icon";
+import { UseSmileIDRoundedCheckbox } from "../components/use_smile_id_rounded_checkbox";
+import { useUseSmileIDLocalizations } from "../../l10n/use_smile_id_localizations_provider";
+import { getDefaultConsentState, getDeviceLocale } from "../utils/locale_utils";
+import {
+  buildConsentRows,
+  composeConsentSubtitleParts,
+  type ConsentRowKey,
+} from "./helpers/consent_screen_helpers";
+
+const CHECKBOX_HIT_BOX = 28;
+const ICON_ROW_PLUS_SIZE = 24;
+const ICON_ROW_SMILE_SIZE = 30;
+const CONSENT_ROW_ICON_SIZE = 28;
+
+function consentRowIconFor(key: ConsentRowKey, tone: "light" | "dark") {
+  switch (key) {
+    case "contact":
+      return <SiConsentContact tone={tone} size={CONSENT_ROW_ICON_SIZE} />;
+    case "personal":
+      return <SiConsentPersonal tone={tone} size={CONSENT_ROW_ICON_SIZE} />;
+    case "biometric":
+      return <SiConsentBiometric tone={tone} size={CONSENT_ROW_ICON_SIZE} />;
+    case "device":
+      return <SiConsentDevice tone={tone} size={CONSENT_ROW_ICON_SIZE} />;
+  }
+}
+
+export type UseSmileIDConsentScreenProps = {
+  readonly partnerName: string;
+  /** Partner brand mark rendered at the top of the consent screen. */
+  readonly partnerIcon?: ReactNode;
+  readonly partnerPrivacyPolicyUrl?: string;
+  readonly showAttribution?: boolean;
+  readonly onAllow?: (info: ConsentInformation) => void;
+  readonly onDeny?: () => void;
+  readonly theme?: UseSmileIDTheme;
+  /**
+   * Render the bottom-pinned Allow button via a partner-supplied
+   * slot. Receives the bound `onClick` and an `enabled` flag that
+   * tracks the consent checkbox. When omitted, renders the canonical
+   * primary `<UseSmileIDButton>` with the localized "Allow" label.
+   */
+  readonly allowButton?: (props: {
+    onClick: () => void;
+    enabled: boolean;
+  }) => ReactNode;
+  /**
+   * Render the bottom-pinned Deny button via a partner-supplied
+   * slot. Receives the bound `onClick`. When omitted, renders the
+   * canonical secondary `<UseSmileIDButton>` with the localized
+   * "Deny" label.
+   */
+  readonly denyButton?: (props: { onClick: () => void }) => ReactNode;
+};
+
+/**
+ * Consent screen — collects user consent before biometric capture.
+ *
+ *   - Top: partner icon + plus glyph + Smile ID brand mark, centered
+ *   - Title (`cardTitle`, `titleText`) tokenised with the partner name
+ *   - Subtitle (`cardSubTitle`, `cardText`) with bold spans for
+ *     `{allow}`, `{smile_id}`, and `{partner}` tokens
+ *   - "This may include processing:" label
+ *   - Four consent rows (Contact / Personal / Biometric / Device)
+ *   - Rounded checkbox + "I consent…" gate (Allow disabled when
+ *     unchecked); the checkbox initial state is locale-aware via
+ *     `getDefaultConsentState()` — unticked in EU member-state locales
+ *     for GDPR opt-in compliance, ticked elsewhere
+ *   - "Learn more" toggle that animates a privacy + DSAR explainer
+ *   - Allow + Deny buttons (slot-overridable) plus an optional
+ *     attribution line — pinned to the bottom on short content,
+ *     scrolling with it when "Learn more" expands
+ *
+ * Every padding, gap, and inter-section space resolves through
+ * `theme.spacing.*` so partners reskinning via the theme builder see
+ * the layout reflow without code edits.
+ */
+export function UseSmileIDConsentScreen(props: UseSmileIDConsentScreenProps) {
+  const themeFromContext = useUseSmileIDTheme();
+  const theme = props.theme ?? themeFromContext;
+  const loc = useUseSmileIDLocalizations();
+  const showAttribution = props.showAttribution ?? true;
+
+  // Locale-aware default: ticked outside the EU (`true`), unticked
+  // inside (`false`) to honour GDPR opt-in. `getDefaultConsentState()`
+  // reads the resolved BCP-47 locale and checks the country segment
+  // against the EU member-state set.
+  const [consented, setConsented] = useState(() => getDefaultConsentState());
+  const [learnMoreOpen, setLearnMoreOpen] = useState(false);
+
+  const subtitleParts = composeConsentSubtitleParts(props.partnerName, loc);
+  const rows = buildConsentRows(loc);
+  const systemScheme = useColorScheme();
+  const iconTone: "light" | "dark" = systemScheme === "dark" ? "dark" : "light";
+
+  const handleAllow = () => {
+    if (!consented) return;
+    const info: ConsentInformation = {
+      granted: true,
+      // Millisecond-precision ISO-8601 UTC, e.g. "2026-06-04T17:36:36.000Z"
+      grantedAt: new Date().toISOString(),
+      // Uppercase language subtag of the device locale, falling back to "EN"
+      noticeLanguage: (getDeviceLocale().split("-")[0] || "en").toUpperCase(),
+      noticePrivacyPolicyUrl: props.partnerPrivacyPolicyUrl ?? "",
+    };
+    props.onAllow?.(info);
+  };
+
+  const handleDeny = () => {
+    props.onDeny?.();
+  };
+
+  return (
+    <SafeAreaView
+      style={[
+        styles.root,
+        {
+          backgroundColor: theme.colors.background,
+          padding: theme.spacing.medium,
+        },
+      ]}
+      testID="si_consent_screen"
+    >
+      {/* The action buttons live INSIDE the scrollable content: the
+          container grows to at least the viewport (space-between pins
+          them to the bottom when content is short) and scrolls as a
+          whole when "Learn more" expands — the explainer is never
+          squeezed behind a fixed button block. */}
+      <ScrollView
+        style={styles.scroll}
+        contentContainerStyle={styles.scrollContent}
+        showsVerticalScrollIndicator={false}
+      >
+        <View style={{ rowGap: theme.spacing.medium }}>
+          <View style={styles.iconRow}>
+            <UseSmileIDPartnerIcon
+              partnerName={props.partnerName}
+              theme={theme}
+              {...(props.partnerIcon !== undefined
+                ? { icon: props.partnerIcon }
+                : {})}
+            />
+            <View style={{ paddingHorizontal: theme.spacing.extraSmall }}>
+              <SiPlus size={ICON_ROW_PLUS_SIZE} />
+            </View>
+            <UseSmileIDPartnerIcon
+              partnerName={props.partnerName}
+              theme={theme}
+              icon={<SiSmileConsentIcon size={ICON_ROW_SMILE_SIZE} />}
+            />
+          </View>
+
+          <Text
+            accessibilityRole="header"
+            style={{
+              ...theme.typography.sectionHeading,
+              color: theme.colors.titleText,
+              textAlign: "center",
+            }}
+            testID="si_consent_title"
+          >
+            {loc.siConsentTitle(props.partnerName)}
+          </Text>
+
+          <Text
+            style={{
+              ...theme.typography.cardSubTitle,
+              color: theme.colors.cardText,
+              textAlign: "justify",
+            }}
+            testID="si_consent_subtitle"
+          >
+            {subtitleParts.map((part, index) =>
+              part.bold ? (
+                <Text
+                  key={index}
+                  style={{
+                    ...theme.typography.cardSubTitle,
+                    color: theme.colors.cardText,
+                    fontWeight: "700",
+                  }}
+                >
+                  {part.text}
+                </Text>
+              ) : (
+                part.text
+              ),
+            )}
+          </Text>
+
+          <Text
+            style={{
+              ...theme.typography.cardSubTitle,
+              color: theme.colors.cardText,
+              textAlign: "justify",
+            }}
+          >
+            {loc.siConsentProcessing}
+          </Text>
+
+          <View>
+            {rows.map((row) => (
+              <UseSmileIDConsentRow
+                key={row.key}
+                label={row.label}
+                icon={consentRowIconFor(row.key, iconTone)}
+                theme={theme}
+                testID={`si_consent_row_${row.key}`}
+              />
+            ))}
+          </View>
+
+          <View style={styles.gateRow}>
+            <View
+              style={[
+                styles.checkboxHitbox,
+                {
+                  width: CHECKBOX_HIT_BOX,
+                  height: CHECKBOX_HIT_BOX,
+                },
+              ]}
+            >
+              <UseSmileIDRoundedCheckbox
+                checked={consented}
+                onChange={setConsented}
+                theme={theme}
+                testID="si_consent_checkbox"
+              />
+            </View>
+            <View style={{ width: theme.spacing.extraSmall }} />
+            <Text
+              style={{
+                ...theme.typography.cardSubTitle,
+                color: theme.colors.titleText,
+                flex: 1,
+                // RTL: `auto` lets the text engine pick alignment from
+                // the first strong-direction character in the localized
+                // string — English left-aligned, Arabic / Hebrew /
+                // Persian / Urdu right-aligned. Hardcoding `"left"`
+                // would pin the text to the visual left even in RTL
+                // locales, so the consent line would appear on the
+                // wrong edge of the gate row.
+                textAlign: "auto",
+              }}
+            >
+              {loc.siConsentConsent}
+            </Text>
+          </View>
+
+          <View style={styles.learnMoreRow}>
+            <View
+              style={[
+                styles.checkboxHitbox,
+                {
+                  width: CHECKBOX_HIT_BOX,
+                  height: CHECKBOX_HIT_BOX,
+                },
+              ]}
+            >
+              <UseSmileIDExpandableIcon
+                expanded={learnMoreOpen}
+                onChange={setLearnMoreOpen}
+                theme={theme}
+                testID="si_consent_learn_more_toggle"
+              />
+            </View>
+            <View style={{ width: theme.spacing.extraSmall }} />
+            <Text
+              style={{
+                ...theme.typography.cardTitle,
+                color: theme.colors.titleText,
+                flex: 1,
+              }}
+            >
+              {loc.siConsentLearnMore}
+            </Text>
+          </View>
+
+          {learnMoreOpen ? (
+            <UseSmileIDLearnMoreContent
+              partnerName={props.partnerName}
+              {...(props.partnerPrivacyPolicyUrl
+                ? { partnerPrivacyPolicyUrl: props.partnerPrivacyPolicyUrl }
+                : {})}
+              theme={theme}
+              testID="si_consent_learn_more_content"
+            />
+          ) : null}
+        </View>
+
+        <View
+          style={[
+            styles.bottom,
+            {
+              rowGap: theme.spacing.small,
+              paddingTop: theme.spacing.medium,
+            },
+          ]}
+        >
+          {props.allowButton ? (
+            props.allowButton({ onClick: handleAllow, enabled: consented })
+          ) : (
+            <UseSmileIDButton
+              label={loc.siConsentAllow}
+              onClick={handleAllow}
+              variant="primary"
+              enabled={consented}
+              theme={theme}
+              testID="si_consent_allow_button"
+            />
+          )}
+          {props.denyButton ? (
+            props.denyButton({ onClick: handleDeny })
+          ) : (
+            <UseSmileIDButton
+              label={loc.siConsentDeny}
+              onClick={handleDeny}
+              variant="secondary"
+              theme={theme}
+              testID="si_consent_deny_button"
+            />
+          )}
+          {showAttribution ? <UseSmileIDAttribution theme={theme} /> : null}
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { flex: 1 },
+  scroll: { flex: 1 },
+  // Grow to the viewport so space-between pins the buttons to the
+  // bottom on short content; tall content scrolls as one unit.
+  scrollContent: { flexGrow: 1, justifyContent: "space-between" },
+  iconRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  gateRow: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+  },
+  learnMoreRow: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  checkboxHitbox: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  bottom: {
+    alignItems: "stretch",
+  },
+});

package/src/presentation/screen/use_smile_id_document_back_instructions.tsx

@@ -0,0 +1,134 @@
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import type { UseSmileIDTheme } from "../theme/theme";
+import { useUseSmileIDTheme } from "../theme/theme_context";
+import { UseSmileIDBackButton } from "../components/use_smile_id_back_button";
+import { UseSmileIDButton } from "../components/use_smile_id_button";
+import { UseSmileIDInstructionsHero } from "../components/use_smile_id_instructions_hero";
+import {
+  DOCUMENT_HERO_BACK_ANIMATION,
+  type HeroAnimationSource,
+} from "../flow/model/instructions_defaults";
+import { useUseSmileIDLocalizations } from "../../l10n/use_smile_id_localizations_provider";
+
+export type UseSmileIDDocumentBackInstructionsProps = {
+  /** Document display name interpolated into the "Flip your <ID Type>" title. */
+  readonly documentTypeDisplayName: string;
+  /** Advance into the back-side capture. */
+  readonly onCaptureBack: () => void;
+  /** Skip the back side, finalizing with no back image. Only used when `allowSkip`. */
+  readonly onSkip?: () => void;
+  /** Whether to surface the Skip action. Defaults to `false`. */
+  readonly allowSkip?: boolean;
+  /** Hero animation; defaults to the bundled back-of-ID (flip) Lottie. */
+  readonly heroSource?: HeroAnimationSource;
+  readonly onBack?: () => void;
+  readonly theme?: UseSmileIDTheme;
+};
+
+/**
+ * In-flow interstitial shown between the front and back document captures.
+ * Prompts the user to flip the document, then either capture the back or —
+ * when the partner allows it — skip it. Rendered in-place inside the
+ * orchestrated capture screen; it is not a standalone flow step.
+ */
+export function UseSmileIDDocumentBackInstructions(
+  props: UseSmileIDDocumentBackInstructionsProps,
+) {
+  const themeFromContext = useUseSmileIDTheme();
+  const theme = props.theme ?? themeFromContext;
+  const localizations = useUseSmileIDLocalizations();
+  const allowSkip = props.allowSkip ?? false;
+  const onSkip = props.onSkip ?? (() => {});
+  const heroSource = props.heroSource ?? DOCUMENT_HERO_BACK_ANIMATION;
+
+  return (
+    <SafeAreaView
+      style={[
+        styles.root,
+        {
+          backgroundColor: theme.colors.background,
+          paddingHorizontal: theme.spacing.large,
+          paddingVertical: theme.spacing.medium,
+        },
+      ]}
+      testID="si_document_back_instructions"
+    >
+      {props.onBack ? (
+        <UseSmileIDBackButton
+          onClick={props.onBack}
+          theme={theme}
+          testID="si_back_button"
+        />
+      ) : null}
+
+      <View style={{ height: theme.spacing.medium }} />
+
+      <Text
+        accessibilityRole="header"
+        style={{
+          ...theme.typography.pageHeading,
+          fontWeight: "800",
+          color: theme.colors.titleText,
+        }}
+        testID="si_document_back_instructions_title"
+      >
+        {localizations.siDocumentFlipTitle(props.documentTypeDisplayName)}
+      </Text>
+
+      <View style={styles.hero} testID="si_document_back_instructions_hero">
+        <UseSmileIDInstructionsHero
+          source={heroSource}
+          showOval={false}
+          showOvalProgress={false}
+          theme={theme}
+        />
+      </View>
+
+      <View
+        style={[styles.bottom, { paddingHorizontal: theme.spacing.extraSmall }]}
+      >
+        <UseSmileIDButton
+          label={localizations.siDocumentCaptureBack}
+          onClick={props.onCaptureBack}
+          variant="primary"
+          theme={theme}
+          testID="si_document_capture_back_button"
+        />
+        {allowSkip ? (
+          <>
+            <View style={{ height: theme.spacing.small }} />
+            <Pressable
+              onPress={onSkip}
+              accessibilityRole="button"
+              testID="si_document_skip_back_button"
+              style={styles.skip}
+            >
+              <Text
+                style={{
+                  ...theme.typography.button,
+                  color: theme.colors.primary,
+                  textAlign: "center",
+                }}
+              >
+                {localizations.siDocumentSkipBack}
+              </Text>
+            </Pressable>
+          </>
+        ) : null}
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { flex: 1 },
+  hero: { flex: 1 },
+  bottom: { alignItems: "center" },
+  skip: {
+    height: 48,
+    alignItems: "center",
+    justifyContent: "center",
+    alignSelf: "stretch",
+  },
+});

package/src/presentation/screen/use_smile_id_document_preview_screen.tsx

@@ -0,0 +1,142 @@
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import type { DocumentOrientation } from "../../core/models/document_type";
+import type { UseSmileIDTheme } from "../theme/theme";
+import { useUseSmileIDTheme } from "../theme/theme_context";
+import { UseSmileIDAttribution } from "../components/use_smile_id_attribution";
+import { UseSmileIDCapturedDocumentImage } from "../components/use_smile_id_captured_document_image";
+import { UseSmileIDCardSurface } from "../components/use_smile_id_card_surface";
+import { UseSmileIDConfirmationButtons } from "../components/use_smile_id_confirmation_buttons";
+import { SiOutlineClose } from "../components/icons";
+import { useUseSmileIDLocalizations } from "../../l10n/use_smile_id_localizations_provider";
+
+export type UseSmileIDDocumentPreviewScreenProps = {
+  /** Local file URI of the captured side being reviewed (front, then back). */
+  readonly capturedDocumentPath?: string;
+  /** Capture orientation — drives the document image aspect. */
+  readonly documentOrientation: DocumentOrientation;
+  readonly showAttribution?: boolean;
+  /** Confirm — commit the captured side and advance. */
+  readonly onAccept?: () => void;
+  /** Retake — re-capture the side being reviewed. */
+  readonly onReject?: () => void;
+  /** Close the flow (✕, top-end). Hidden when omitted. */
+  readonly onClose?: () => void;
+  readonly theme?: UseSmileIDTheme;
+};
+
+/**
+ * Document preview — confirms a captured document side before submission.
+ * Renders the document at its capture aspect (no oval) with a Retake /
+ * Confirm card and optional close ✕. Visited once per side (front, then
+ * back) via the navigation manager's per-side preview loop.
+ */
+export function UseSmileIDDocumentPreviewScreen(
+  props: UseSmileIDDocumentPreviewScreenProps,
+) {
+  const themeFromContext = useUseSmileIDTheme();
+  const theme = props.theme ?? themeFromContext;
+  const loc = useUseSmileIDLocalizations();
+  const showAttribution = props.showAttribution ?? true;
+
+  return (
+    <SafeAreaView
+      style={[
+        styles.root,
+        { backgroundColor: theme.colors.captureReviewBackground },
+      ]}
+      testID="si_document_preview_screen"
+    >
+      {props.onClose ? (
+        <View
+          style={[
+            styles.closeRow,
+            {
+              paddingHorizontal: theme.spacing.medium,
+              paddingTop: theme.spacing.small,
+            },
+          ]}
+        >
+          <Pressable
+            onPress={props.onClose}
+            accessibilityRole="button"
+            accessibilityLabel={loc.siCdClose}
+            testID="si_document_preview_close"
+            style={({ pressed }) => [
+              styles.closeButton,
+              {
+                backgroundColor: theme.colors.cardText,
+                opacity: pressed ? 0.7 : 1,
+              },
+            ]}
+          >
+            <SiOutlineClose size={20} color={theme.colors.cardBackground} />
+          </Pressable>
+        </View>
+      ) : null}
+
+      <UseSmileIDCapturedDocumentImage
+        orientation={props.documentOrientation}
+        {...(props.capturedDocumentPath
+          ? { uri: props.capturedDocumentPath }
+          : {})}
+        imageTestID="si_document_preview_image"
+        imageAccessibilityLabel={loc.siPreviewAccessibilityImage}
+        theme={theme}
+      />
+
+      <UseSmileIDCardSurface theme={theme} style={styles.card}>
+        <Text
+          accessibilityRole="header"
+          style={{
+            ...theme.typography.cardHeading,
+            color: theme.colors.primary,
+            textAlign: "center",
+            letterSpacing: -0.425,
+          }}
+        >
+          {loc.siDocumentPreviewTitle}
+        </Text>
+        <Text
+          style={{
+            ...theme.typography.cardCaption,
+            color: theme.colors.cardText,
+            textAlign: "center",
+            marginTop: theme.spacing.extraSmall / 2,
+          }}
+        >
+          {loc.siDocumentPreviewSubtitle}
+        </Text>
+        <View style={{ marginTop: theme.spacing.medium }}>
+          <UseSmileIDConfirmationButtons
+            onAccept={() => props.onAccept?.()}
+            onReject={() => props.onReject?.()}
+            acceptLabel={loc.siPreviewConfirm}
+            rejectLabel={loc.siPreviewRetake}
+            theme={theme}
+            testID="si_document_preview_confirmation_buttons"
+          />
+        </View>
+      </UseSmileIDCardSurface>
+
+      {showAttribution ? (
+        <UseSmileIDAttribution forceLightMode theme={theme} />
+      ) : null}
+    </SafeAreaView>
+  );
+}
+
+const CLOSE_BUTTON_SIZE = 40;
+
+const styles = StyleSheet.create({
+  root: { flex: 1, overflow: "hidden" },
+  closeRow: { flexDirection: "row", justifyContent: "flex-end" },
+  closeButton: {
+    width: CLOSE_BUTTON_SIZE,
+    height: CLOSE_BUTTON_SIZE,
+    borderRadius: CLOSE_BUTTON_SIZE / 2,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  card: { alignItems: "center" },
+});