@smileid/usesmileid 12.0.2 → 12.1.0

package/src/presentation/components/use_smile_id_guideline_thumbnail.tsx

@@ -1,263 +0,0 @@
-import { useState } from "react";
-import { StyleSheet, Text, View, type LayoutChangeEvent } from "react-native";
-import type { UseSmileIDTheme } from "../theme/theme";
-import { useUseSmileIDTheme } from "../theme/theme_context";
-import { useUseSmileIDLocalizations } from "../../l10n/use_smile_id_localizations_provider";
-import type { InstructionGuideline } from "../flow/model/instruction_guideline";
-import { SiFilledCheckCircle, SiFilledCloseCircle } from "./icons";
-
-const CARD_WIDTH = 41;
-const CARD_HEIGHT = 73;
-const CARD_RADIUS = 4;
-const IMAGE_WIDTH = 31;
-const IMAGE_HEIGHT = 43;
-const PILL_WIDTH = 20;
-const PILL_HEIGHT = 4;
-const BADGE_SIZE = 16;
-const BADGE_ICON_SIZE = 14;
-// The badge overhangs the top-end corner of the card.
-const BADGE_OVERHANG = -10;
-
-// Document card SVGs carry a transparent bleed around the visible card (3px
-// L/R, 2px top, 4px bottom); the tile offsets the SVG by it so the card fills
-// the framed box exactly.
-const DOC_CARD_RADIUS = 4;
-const DOC_BLEED_X = 3;
-const DOC_BLEED_TOP = 2;
-const DOC_BLEED_BOTTOM = 4;
-const DOC_BADGE_OVERHANG = -8;
-
-export type UseSmileIDGuidelineThumbnailProps = {
-  readonly guideline: InstructionGuideline;
-  readonly theme?: UseSmileIDTheme;
-};
-
-/**
- * A capture-guideline tile: a bordered card with the illustration and a status
- * pill, a check/close badge overhanging the top-end corner, and a caption.
- */
-export function UseSmileIDGuidelineThumbnail({
-  guideline,
-  theme: themeProp,
-}: UseSmileIDGuidelineThumbnailProps) {
-  const themeFromContext = useUseSmileIDTheme();
-  const theme = themeProp ?? themeFromContext;
-  const localizations = useUseSmileIDLocalizations();
-  // Measured card width — the card scales to its column, so the SVG size and
-  // bleed offset scale with it.
-  const [measuredCardWidth, setMeasuredCardWidth] = useState(0);
-  const allowed = guideline.status === "allowed";
-  const Illustration = guideline.image;
-  const Badge = allowed ? SiFilledCheckCircle : SiFilledCloseCircle;
-  const badgeLabel = allowed
-    ? localizations.siCdGuidelineAllowed
-    : localizations.siCdGuidelineBlocked;
-  const caption = guideline.label(localizations);
-
-  // Document tile: one of four equal columns (so all four fit one row); the
-  // self-contained card SVG fills the column, framed by a border + shadow with
-  // an overhanging badge (no pill).
-  if (guideline.card) {
-    const { width: figmaCardWidth, height: figmaCardHeight } = guideline.card;
-    const scale =
-      measuredCardWidth > 0 ? measuredCardWidth / figmaCardWidth : 0;
-    return (
-      <View style={styles.documentTile}>
-        {/* No `overflow: hidden` so the badge can overhang the card corner. */}
-        <View style={[styles.documentCardWrap, { maxWidth: figmaCardWidth }]}>
-          <View
-            style={[
-              styles.documentCard,
-              {
-                aspectRatio: figmaCardWidth / figmaCardHeight,
-                backgroundColor: theme.colors.cardBackground,
-              },
-            ]}
-            onLayout={(event: LayoutChangeEvent) => {
-              const width = event.nativeEvent.layout.width;
-              setMeasuredCardWidth((previous) =>
-                Math.abs(previous - width) < 0.5 ? previous : width,
-              );
-            }}
-          >
-            {scale > 0 ? (
-              <View
-                style={{
-                  position: "absolute",
-                  left: -DOC_BLEED_X * scale,
-                  top: -DOC_BLEED_TOP * scale,
-                }}
-              >
-                <Illustration
-                  width={(figmaCardWidth + DOC_BLEED_X * 2) * scale}
-                  height={
-                    (figmaCardHeight + DOC_BLEED_TOP + DOC_BLEED_BOTTOM) * scale
-                  }
-                />
-              </View>
-            ) : null}
-            {/* Border drawn over the art so the SVG can't paint over it. */}
-            <View
-              pointerEvents="none"
-              style={[
-                styles.documentCardBorder,
-                { borderColor: theme.colors.stroke },
-              ]}
-            />
-          </View>
-          <View
-            style={[
-              styles.badge,
-              styles.documentBadge,
-              { backgroundColor: theme.colors.cardBackground },
-            ]}
-            accessibilityRole="image"
-            accessibilityLabel={badgeLabel}
-          >
-            <Badge size={BADGE_ICON_SIZE} />
-          </View>
-        </View>
-        <Text
-          numberOfLines={1}
-          style={{
-            ...theme.typography.cardCaption,
-            fontSize: 10,
-            lineHeight: 12,
-            color: theme.colors.cardText,
-            textAlign: "center",
-            marginTop: theme.spacing.extraSmall,
-          }}
-        >
-          {caption}
-        </Text>
-      </View>
-    );
-  }
-
-  return (
-    <View style={styles.container}>
-      {/* No `overflow: hidden` so the badge can overhang the card corner. */}
-      <View>
-        <View
-          style={[
-            styles.card,
-            {
-              backgroundColor: theme.colors.cardBackground,
-              borderColor: theme.colors.stroke,
-            },
-          ]}
-        >
-          <Illustration width={IMAGE_WIDTH} height={IMAGE_HEIGHT} />
-          <View
-            style={[
-              styles.pill,
-              {
-                backgroundColor: allowed
-                  ? theme.colors.primary
-                  : theme.colors.secondary,
-              },
-            ]}
-          />
-        </View>
-        <View
-          style={[
-            styles.badge,
-            { backgroundColor: theme.colors.cardBackground },
-          ]}
-          accessibilityRole="image"
-          accessibilityLabel={badgeLabel}
-        >
-          <Badge size={BADGE_ICON_SIZE} />
-        </View>
-      </View>
-      <Text
-        style={{
-          ...theme.typography.cardCaption,
-          fontSize: 10,
-          lineHeight: 10,
-          color: theme.colors.primary,
-          textAlign: "center",
-          marginTop: theme.spacing.extraSmall,
-        }}
-      >
-        {caption}
-      </Text>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: { alignItems: "center" },
-  card: {
-    width: CARD_WIDTH,
-    height: CARD_HEIGHT,
-    borderRadius: CARD_RADIUS,
-    borderWidth: 1,
-    paddingHorizontal: 4,
-    paddingVertical: 6,
-    alignItems: "center",
-    justifyContent: "center",
-    rowGap: 4,
-    // Soft shadow (black @ ~10%).
-    shadowColor: "#000000",
-    shadowOpacity: 0.1,
-    shadowRadius: 2,
-    shadowOffset: { width: 0, height: 1 },
-    elevation: 1,
-  },
-  pill: {
-    width: PILL_WIDTH,
-    height: PILL_HEIGHT,
-    borderRadius: PILL_HEIGHT / 2,
-  },
-  badge: {
-    position: "absolute",
-    top: BADGE_OVERHANG,
-    end: BADGE_OVERHANG,
-    width: BADGE_SIZE,
-    height: BADGE_SIZE,
-    borderRadius: BADGE_SIZE / 2,
-    alignItems: "center",
-    justifyContent: "center",
-    shadowColor: "#000000",
-    shadowOpacity: 0.1,
-    shadowRadius: 2,
-    shadowOffset: { width: 0, height: 1 },
-    elevation: 1,
-  },
-  // One of four equal columns so the document guidelines always fit one row.
-  documentTile: {
-    width: "25%",
-    alignItems: "center",
-    paddingHorizontal: 3,
-  },
-  // Capped at the artwork's natural width (inline maxWidth) so it never grows
-  // past its design size on wide screens.
-  documentCardWrap: {
-    width: "100%",
-    alignSelf: "center",
-  },
-  documentCard: {
-    width: "100%",
-    borderRadius: DOC_CARD_RADIUS,
-    // No `overflow: hidden` — would clip the SVG's bleed and the shadow.
-    shadowColor: "#000000",
-    shadowOpacity: 0.1,
-    shadowRadius: 3,
-    shadowOffset: { width: 0, height: 1 },
-    elevation: 1,
-  },
-  documentCardBorder: {
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    start: 0,
-    end: 0,
-    borderRadius: DOC_CARD_RADIUS,
-    borderWidth: 1,
-  },
-  documentBadge: {
-    top: DOC_BADGE_OVERHANG,
-    end: DOC_BADGE_OVERHANG,
-  },
-});

package/src/presentation/components/use_smile_id_instructions_hero.tsx

@@ -1,296 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import {
-  Animated,
-  Easing,
-  Platform,
-  StyleSheet,
-  View,
-  type LayoutChangeEvent,
-} from "react-native";
-import Svg, { Ellipse } from "react-native-svg";
-import type { UseSmileIDTheme } from "../theme/theme";
-import { useUseSmileIDTheme } from "../theme/theme_context";
-import type { HeroAnimationSource } from "../flow/model/instructions_defaults";
-import { useReducedMotion } from "../utils/use_reduced_motion";
-import { AnimatedLottieView } from "./helpers/animated_lottie_view";
-import { FaceOvalDefaults } from "./face_oval_defaults";
-
-// Oval bounded by 74% of the slot width / 84% of its height; the Lottie
-// frame is slightly wider and nudged down so the face sits centered.
-const OVAL_ASPECT_RATIO = 241 / 324; // width / height
-const OVAL_WIDTH_FRACTION = 0.74;
-const OVAL_HEIGHT_FRACTION = 0.84;
-const ANIMATION_TO_OVAL_WIDTH_RATIO = 279 / 241;
-const ANIMATION_VERTICAL_OFFSET_RATIO = 0.06;
-const STROKE_WIDTH = FaceOvalDefaults.strokeWidth; // matches the capture overlay's oval stroke
-const DEFAULT_LOOP_MS = 2000;
-// The oval progress ring fills on its own fixed-duration loop, independent of
-// the hero animation's playback speed, so a long hero composition can't slow
-// the fill down to a crawl.
-export const OVAL_PROGRESS_DURATION_MS = 5500;
-// Document hero card: 4:3 frame, corner radius = 40/384 of its width.
-const HERO_CARD_WIDTH_TO_HEIGHT = 384 / 288;
-const HERO_CARD_CORNER_RATIO = 40 / 384;
-
-export type UseSmileIDInstructionsHeroProps = {
-  /** Lottie animation rendered inside the (optional) face-oval ring. */
-  readonly source: HeroAnimationSource;
-  /** Draw the face-oval ring around the animation. */
-  readonly showOval?: boolean;
-  /**
-   * Animate a green fill rising bottom-to-top in sync with the animation loop.
-   * When `false`, only the static gray track is drawn and no per-frame work is
-   * scheduled (Enhanced Smart Selfie has no single rising-progress gesture).
-   */
-  readonly showOvalProgress?: boolean;
-  /** Present the animation inside a cream rounded card instead of a face oval (document instructions). */
-  readonly showCardBackground?: boolean;
-  readonly theme?: UseSmileIDTheme;
-};
-
-/** Loop duration from the Lottie composition (`(op - ip) / fr`), else default. */
-export function loopDurationMs(source: HeroAnimationSource): number {
-  if (source && typeof source === "object" && "fr" in source) {
-    const composition = source as { op?: number; ip?: number; fr?: number };
-    if (composition.fr && composition.op !== undefined) {
-      const milliseconds =
-        ((composition.op - (composition.ip ?? 0)) / composition.fr) * 1000;
-      if (Number.isFinite(milliseconds) && milliseconds > 0) {
-        return milliseconds;
-      }
-    }
-  }
-  return DEFAULT_LOOP_MS;
-}
-
-/**
- * Hero animation with an optional face-oval ring. The hero plays at its own
- * natural composition pace while the ring's green fill rises on a separate,
- * fixed-duration loop, so the two are decoupled. Honors reduced motion (holds
- * the final frame, ring filled).
- */
-export function UseSmileIDInstructionsHero({
-  source,
-  showOval = false,
-  showOvalProgress = true,
-  showCardBackground = false,
-  theme: themeProp,
-}: UseSmileIDInstructionsHeroProps) {
-  const themeFromContext = useUseSmileIDTheme();
-  const theme = themeProp ?? themeFromContext;
-  const [size, setSize] = useState({ width: 0, height: 0 });
-  const reducedMotion = useReducedMotion();
-  // Drives the Lottie hero frame at its natural composition pace.
-  const heroProgress = useRef(new Animated.Value(0)).current;
-  // Drives the rising green ring fill on its own fixed-duration loop.
-  const ovalProgress = useRef(new Animated.Value(0)).current;
-
-  // Loop only when the ring animates; otherwise pin the value (1 under reduced
-  // motion = full ring / final frame, else 0).
-  const animate = showOvalProgress && !reducedMotion;
-
-  // Hero animation: plays over its own composition duration, untouched by the
-  // ring fill speed.
-  useEffect(() => {
-    if (animate) {
-      heroProgress.setValue(0);
-      const loop = Animated.loop(
-        Animated.timing(heroProgress, {
-          toValue: 1,
-          duration: loopDurationMs(source),
-          easing: Easing.linear,
-          useNativeDriver: false,
-        }),
-      );
-      loop.start();
-      return () => loop.stop();
-    }
-    heroProgress.setValue(reducedMotion ? 1 : 0);
-    return undefined;
-  }, [animate, reducedMotion, source, heroProgress]);
-
-  // Ring fill: dedicated linear loop completing in OVAL_PROGRESS_DURATION_MS,
-  // independent of the hero animation. Reduced motion holds it fully filled.
-  useEffect(() => {
-    if (animate) {
-      ovalProgress.setValue(0);
-      const loop = Animated.loop(
-        Animated.timing(ovalProgress, {
-          toValue: 1,
-          duration: OVAL_PROGRESS_DURATION_MS,
-          easing: Easing.linear,
-          useNativeDriver: false,
-        }),
-      );
-      loop.start();
-      return () => loop.stop();
-    }
-    ovalProgress.setValue(reducedMotion ? 1 : 0);
-    return undefined;
-    // `source` is intentionally omitted: the ring's duration is the fixed
-    // OVAL_PROGRESS_DURATION_MS constant, so it must not re-key on the hero
-    // composition (that coupling is exactly what this effect avoids).
-  }, [animate, reducedMotion, ovalProgress]);
-
-  const ovalWidth = Math.min(
-    size.width * OVAL_WIDTH_FRACTION,
-    size.height * OVAL_HEIGHT_FRACTION * OVAL_ASPECT_RATIO,
-  );
-  const ovalHeight = ovalWidth / OVAL_ASPECT_RATIO;
-  const animationSize = ovalWidth * ANIMATION_TO_OVAL_WIDTH_RATIO;
-  const verticalOffset = animationSize * ANIMATION_VERTICAL_OFFSET_RATIO;
-  const hasSize = ovalWidth > 0 && ovalHeight > 0;
-
-  const cardWidth = Math.min(
-    size.width,
-    size.height * HERO_CARD_WIDTH_TO_HEIGHT,
-  );
-  const cardHeight = cardWidth / HERO_CARD_WIDTH_TO_HEIGHT;
-  const cardRadius = cardWidth * HERO_CARD_CORNER_RATIO;
-
-  const onLayout = (event: LayoutChangeEvent) => {
-    const { width, height } = event.nativeEvent.layout;
-    setSize((previous) =>
-      previous.width === width && previous.height === height
-        ? previous
-        : { width, height },
-    );
-  };
-
-  // Drive the Lottie from the hero progress value when the ring is shown or
-  // motion is reduced; otherwise let it play on its own clock (autoPlay+loop).
-  const lottieDrivenByProgress = showOvalProgress || reducedMotion;
-
-  // lottie-ios's Core Animation engine mis-renders the document heroes' track mattes,
-  // so oval-less heroes use the main-thread engine on iOS; Android keeps its default.
-  const renderModeProps =
-    Platform.OS === "ios" && !showOval
-      ? ({ renderMode: "SOFTWARE" } as const)
-      : {};
-
-  // Inset the ring by half the stroke so it isn't clipped at the SVG edge.
-  const ellipseProps = {
-    cx: ovalWidth / 2,
-    cy: ovalHeight / 2,
-    rx: (ovalWidth - STROKE_WIDTH) / 2,
-    ry: (ovalHeight - STROKE_WIDTH) / 2,
-    strokeWidth: STROKE_WIDTH,
-    fill: "none" as const,
-  };
-
-  return (
-    <View
-      style={styles.container}
-      onLayout={onLayout}
-      testID="si_instructions_hero"
-    >
-      {hasSize ? (
-        showCardBackground ? (
-          <View
-            style={{
-              position: "absolute",
-              left: (size.width - cardWidth) / 2,
-              top: (size.height - cardHeight) / 2,
-              width: cardWidth,
-              height: cardHeight,
-              borderRadius: cardRadius,
-              overflow: "hidden",
-              backgroundColor: theme.colors.instructionCardBackground,
-            }}
-            testID="si_instructions_hero_card"
-          >
-            <AnimatedLottieView
-              source={source}
-              autoPlay={!lottieDrivenByProgress}
-              loop={!lottieDrivenByProgress}
-              {...(lottieDrivenByProgress ? { progress: heroProgress } : {})}
-              {...renderModeProps}
-              resizeMode="contain"
-              style={{ width: cardWidth, height: cardHeight }}
-            />
-          </View>
-        ) : (
-          <>
-            {showOval ? (
-              <>
-                <Svg
-                  width={ovalWidth}
-                  height={ovalHeight}
-                  style={{
-                    position: "absolute",
-                    left: (size.width - ovalWidth) / 2,
-                    top: (size.height - ovalHeight) / 2,
-                  }}
-                >
-                  <Ellipse
-                    {...ellipseProps}
-                    stroke={theme.colors.ovalDefault}
-                  />
-                </Svg>
-                {/* Green fill revealed by a bottom-anchored view window —
-                  Android never re-resolves animated SVG clipPath contents,
-                  so the clip must happen at the View layer. */}
-                {showOvalProgress ? (
-                  <View
-                    pointerEvents="none"
-                    style={{
-                      position: "absolute",
-                      left: (size.width - ovalWidth) / 2,
-                      top: (size.height - ovalHeight) / 2,
-                      width: ovalWidth,
-                      height: ovalHeight,
-                    }}
-                  >
-                    <Animated.View
-                      style={{
-                        position: "absolute",
-                        left: 0,
-                        right: 0,
-                        bottom: 0,
-                        overflow: "hidden",
-                        height: ovalProgress.interpolate({
-                          inputRange: [0, 1],
-                          outputRange: [0, ovalHeight],
-                        }),
-                      }}
-                    >
-                      <Svg
-                        width={ovalWidth}
-                        height={ovalHeight}
-                        style={{ position: "absolute", left: 0, bottom: 0 }}
-                      >
-                        <Ellipse
-                          {...ellipseProps}
-                          stroke={theme.colors.ovalActive}
-                        />
-                      </Svg>
-                    </Animated.View>
-                  </View>
-                ) : null}
-              </>
-            ) : null}
-
-            <AnimatedLottieView
-              source={source}
-              autoPlay={!lottieDrivenByProgress}
-              loop={!lottieDrivenByProgress}
-              {...(lottieDrivenByProgress ? { progress: heroProgress } : {})}
-              {...renderModeProps}
-              style={{
-                position: "absolute",
-                width: animationSize,
-                height: animationSize,
-                left: (size.width - animationSize) / 2,
-                top: (size.height - animationSize) / 2 + verticalOffset,
-              }}
-            />
-          </>
-        )
-      ) : null}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: { flex: 1, alignSelf: "stretch" },
-});

package/src/presentation/components/use_smile_id_learn_more_content.tsx

@@ -1,115 +0,0 @@
-import { Linking, StyleSheet, Text, View } from "react-native";
-import type { UseSmileIDTheme } from "../theme/theme";
-import { useUseSmileIDTheme } from "../theme/theme_context";
-import { useUseSmileIDLocalizations } from "../../l10n/use_smile_id_localizations_provider";
-import { UseSmileIDCrashReporting } from "@smileid/usesmileid_bridge";
-
-export type UseSmileIDLearnMoreContentProps = {
-  readonly partnerName: string;
-  readonly partnerPrivacyPolicyUrl?: string;
-  readonly testID?: string;
-  readonly theme?: UseSmileIDTheme;
-};
-
-const SMILE_ID_PRIVACY_URL = "https://usesmileid.com/privacy-policy/";
-
-/**
- * Privacy-policy / consent details, rendered in an expandable section
- * on the consent screen. Composes the canonical
- * `si_consent_learn_more_description` template with `{smile_id}`,
- * `{partner}`, `{retention}` placeholders.
- *
- * Tap targets:
- *   • Smile ID link → `https://usesmileid.com/privacy-policy/`
- *   • Partner link  → `partnerPrivacyPolicyUrl` (silent no-op when omitted)
- *   • DSAR link     → opens Smile ID DSAR page
- *
- * Substitution is done locally because
- * `siConsentLearnMoreDescription` is a non-parameterised getter —
- * keeps the localizations class one-token-per-method.
- */
-export function UseSmileIDLearnMoreContent(
-  props: UseSmileIDLearnMoreContentProps,
-) {
-  const themeFromContext = useUseSmileIDTheme();
-  const theme = props.theme ?? themeFromContext;
-  const loc = useUseSmileIDLocalizations();
-
-  const description = loc.siConsentLearnMoreDescription
-    .split("{smile_id}")
-    .join(loc.siConsentLearnMoreDescriptionSmileId)
-    .split("{partner}")
-    .join(props.partnerName)
-    .split("{retention}")
-    .join(loc.siConsentLearnMoreDescriptionRetention);
-
-  const openSmileId = () => {
-    Linking.openURL(SMILE_ID_PRIVACY_URL).catch((err: unknown) => {
-      // Concrete scenario: device has no browser registered, or URL
-      // handler rejects. Route through crash reporting so partners
-      // see the failure in observability instead of "tap does
-      // nothing" in QA.
-      UseSmileIDCrashReporting.captureException(err);
-    });
-  };
-  const openPartner = () => {
-    const url = props.partnerPrivacyPolicyUrl;
-    if (!url) return;
-    Linking.openURL(url).catch((err: unknown) => {
-      // Concrete scenario: partner ships a malformed
-      // `partnerPrivacyPolicyUrl` — tap silently fails. Surface to
-      // crash reporting so partner QA catches it pre-release.
-      UseSmileIDCrashReporting.captureException(err);
-    });
-  };
-
-  const linkStyle = {
-    ...theme.typography.body,
-    color: theme.colors.primary,
-    textDecorationLine: "underline" as const,
-  };
-
-  return (
-    <View
-      testID={props.testID}
-      style={[
-        styles.container,
-        { paddingVertical: theme.spacing.medium, gap: theme.spacing.small },
-      ]}
-    >
-      <Text
-        style={{
-          ...theme.typography.body,
-          color: theme.colors.cardText,
-          lineHeight: 18,
-        }}
-      >
-        {description}
-      </Text>
-
-      <Text style={{ ...theme.typography.body, color: theme.colors.cardText }}>
-        {loc.siConsentLearnMoreDsarPrefix}
-        <Text onPress={openSmileId} style={linkStyle}>
-          {loc.siConsentLearnMoreDsarLink}
-        </Text>
-        .
-      </Text>
-
-      <Text style={{ ...theme.typography.body, color: theme.colors.cardText }}>
-        {loc.siConsentLearnMorePrivacyPrefix}
-        <Text onPress={openSmileId} style={linkStyle}>
-          {loc.siConsentLearnMorePrivacySmileLink}
-        </Text>
-        {loc.siConsentLearnMorePrivacyAnd}
-        <Text onPress={openPartner} style={linkStyle}>
-          {loc.siConsentLearnMorePrivacyPartnerLink(props.partnerName)}
-        </Text>
-        {loc.siConsentLearnMorePrivacySuffix}
-      </Text>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {},
-});