@smileid/usesmileid 12.0.1 → 12.1.0

package/src/presentation/screen/use_smile_id_consent_screen.tsx

@@ -1,393 +0,0 @@
-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 { GlobalPrivacyControl } from "../../core/models/global_privacy_control";
-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;
-  /**
-   * Partner-declared consent posture; seeds the checkbox's initial state
-   * via `getDefaultConsentState`. Defaults to the universal opt-out
-   * baseline (`GlobalPrivacyControl.OptOut`).
-   */
-  readonly globalPrivacyControl?: GlobalPrivacyControl;
-  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;
-
-  const globalPrivacyControl =
-    props.globalPrivacyControl ?? GlobalPrivacyControl.OptOut;
-
-  // Posture-aware default: the opt-out baseline starts ticked everywhere;
-  // the legacy opt-in posture consults the resolved BCP-47 locale and
-  // starts unticked for EU member states (GDPR opt-in).
-  const [consented, setConsented] = useState(() =>
-    getDefaultConsentState(globalPrivacyControl),
-  );
-  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

@@ -1,125 +0,0 @@
-import { 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 { UseSmileIDAttribution } from "../components/use_smile_id_attribution";
-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.medium,
-          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,
-          textAlign: "center",
-        }}
-        testID="si_document_back_instructions_title"
-      >
-        {localizations.siDocumentFlipTitle(props.documentTypeDisplayName)}
-      </Text>
-
-      <View style={{ height: theme.spacing.medium }} />
-
-      <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 }} />
-            <UseSmileIDButton
-              label={localizations.siDocumentSkipBack}
-              onClick={onSkip}
-              variant="secondary"
-              theme={theme}
-              testID="si_document_skip_back_button"
-            />
-          </>
-        ) : null}
-        <View style={{ height: theme.spacing.small }} />
-        <UseSmileIDAttribution theme={theme} />
-      </View>
-    </SafeAreaView>
-  );
-}
-
-const styles = StyleSheet.create({
-  root: { flex: 1 },
-  hero: { flex: 1 },
-  bottom: { alignItems: "center" },
-});

package/src/presentation/screen/use_smile_id_document_preview_screen.tsx

@@ -1,152 +0,0 @@
-import { Pressable, StyleSheet, Text, View } from "react-native";
-import {
-  SafeAreaView,
-  useSafeAreaInsets,
-} from "react-native-safe-area-context";
-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-frame aspect ratio (width / height) — drives the document image aspect. */
-  readonly documentAspectRatio: number;
-  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;
-  const insets = useSafeAreaInsets();
-
-  return (
-    <SafeAreaView
-      edges={["left", "right", "bottom"]}
-      style={[
-        styles.root,
-        { backgroundColor: theme.colors.background },
-      ]}
-      testID="si_document_preview_screen"
-    >
-      {props.onClose ? (
-        <View
-          style={[
-            styles.closeRow,
-            {
-              paddingHorizontal: theme.spacing.medium,
-              paddingTop: insets.top + theme.spacing.small,
-            },
-          ]}
-        >
-          <Pressable
-            onPress={props.onClose}
-            accessibilityRole="button"
-            accessibilityLabel={loc.siCdClose}
-            testID="si_document_preview_close"
-            style={({ pressed }) => [
-              styles.closeButton,
-              { opacity: pressed ? 0.7 : 1 },
-            ]}
-          >
-            <SiOutlineClose size={20} color="#FFFFFF" />
-          </Pressable>
-        </View>
-      ) : null}
-
-      <View
-        style={[styles.imageRegion, { paddingVertical: theme.spacing.medium }]}
-      >
-        <UseSmileIDCapturedDocumentImage
-          aspectRatio={props.documentAspectRatio}
-          {...(props.capturedDocumentPath
-            ? { uri: props.capturedDocumentPath }
-            : {})}
-          imageTestID="si_document_preview_image"
-          imageAccessibilityLabel={loc.siPreviewAccessibilityImage}
-          theme={theme}
-        />
-      </View>
-
-      <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 theme={theme} /> : null}
-    </SafeAreaView>
-  );
-}
-
-const CLOSE_BUTTON_SIZE = 40;
-/** Warm-grey close-button fill for the document preview chrome. */
-const CLOSE_BUTTON_FILL = "#848282";
-
-const styles = StyleSheet.create({
-  root: { flex: 1, overflow: "hidden" },
-  // Fills the space between the close row and the card.
-  imageRegion: { flex: 1 },
-  closeRow: { flexDirection: "row", justifyContent: "flex-end" },
-  closeButton: {
-    width: CLOSE_BUTTON_SIZE,
-    height: CLOSE_BUTTON_SIZE,
-    borderRadius: CLOSE_BUTTON_SIZE / 2,
-    backgroundColor: CLOSE_BUTTON_FILL,
-    borderWidth: 1,
-    borderColor: "rgba(255,255,255,0.1)",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  card: { alignItems: "center" },
-});