@smileid/usesmileid 12.0.0-beta01 → 12.0.1

package/src/presentation/components/use_smile_id_guideline_thumbnail.tsx

@@ -1,4 +1,5 @@
-import { StyleSheet, Text, View } from "react-native";
+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";
@@ -17,6 +18,15 @@ 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;
@@ -33,12 +43,96 @@ export function UseSmileIDGuidelineThumbnail({
   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}>
@@ -86,7 +180,7 @@ export function UseSmileIDGuidelineThumbnail({
           marginTop: theme.spacing.extraSmall,
         }}
       >
-        {guideline.label(localizations)}
+        {caption}
       </Text>
     </View>
   );
@@ -131,4 +225,39 @@ const styles = StyleSheet.create({
     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

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from "react";
 import {
   Animated,
   Easing,
+  Platform,
   StyleSheet,
   View,
   type LayoutChangeEvent,
@@ -27,6 +28,9 @@ const DEFAULT_LOOP_MS = 2000;
 // 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. */
@@ -39,6 +43,8 @@ export type UseSmileIDInstructionsHeroProps = {
    * 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;
 };
 
@@ -67,6 +73,7 @@ export function UseSmileIDInstructionsHero({
   source,
   showOval = false,
   showOvalProgress = true,
+  showCardBackground = false,
   theme: themeProp,
 }: UseSmileIDInstructionsHeroProps) {
   const themeFromContext = useUseSmileIDTheme();
@@ -134,6 +141,13 @@ export function UseSmileIDInstructionsHero({
   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) =>
@@ -147,6 +161,13 @@ export function UseSmileIDInstructionsHero({
   // 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,
@@ -164,77 +185,107 @@ export function UseSmileIDInstructionsHero({
       testID="si_instructions_hero"
     >
       {hasSize ? (
-        <>
-          {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"
+        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,
-                    width: ovalWidth,
-                    height: ovalHeight,
                   }}
                 >
-                  <Animated.View
+                  <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: 0,
-                      right: 0,
-                      bottom: 0,
-                      overflow: "hidden",
-                      height: ovalProgress.interpolate({
-                        inputRange: [0, 1],
-                        outputRange: [0, ovalHeight],
-                      }),
+                      left: (size.width - ovalWidth) / 2,
+                      top: (size.height - ovalHeight) / 2,
+                      width: ovalWidth,
+                      height: ovalHeight,
                     }}
                   >
-                    <Svg
-                      width={ovalWidth}
-                      height={ovalHeight}
-                      style={{ position: "absolute", left: 0, bottom: 0 }}
+                    <Animated.View
+                      style={{
+                        position: "absolute",
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        overflow: "hidden",
+                        height: ovalProgress.interpolate({
+                          inputRange: [0, 1],
+                          outputRange: [0, ovalHeight],
+                        }),
+                      }}
                     >
-                      <Ellipse
-                        {...ellipseProps}
-                        stroke={theme.colors.ovalActive}
-                      />
-                    </Svg>
-                  </Animated.View>
-                </View>
-              ) : null}
-            </>
-          ) : null}
-
-          <AnimatedLottieView
-            source={source}
-            autoPlay={!lottieDrivenByProgress}
-            loop={!lottieDrivenByProgress}
-            {...(lottieDrivenByProgress ? { progress: heroProgress } : {})}
-            style={{
-              position: "absolute",
-              width: animationSize,
-              height: animationSize,
-              left: (size.width - animationSize) / 2,
-              top: (size.height - animationSize) / 2 + verticalOffset,
-            }}
-          />
-        </>
+                      <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>
   );

package/src/presentation/components/use_smile_id_oval_border_palette.ts

@@ -48,13 +48,17 @@ export const UseSmileIDOvalBorderPalette = {
       case UseSmileIDOverlayState.MULTIPLE_FACES:
         return "ovalWarning";
 
-      // Document states render via UseSmileIDDocumentOverlay, not here.
+      // Document states (UseSmileIDDocumentOverlay resolves its border through
+      // this same table): green once the document is correctly framed, red
+      // while it is detected but mispositioned (too far / close / off-centre /
+      // not steady).
+      case UseSmileIDOverlayState.DOCUMENT_READY:
+        return "ovalActive";
       case UseSmileIDOverlayState.DOCUMENT_NOT_CENTERED:
       case UseSmileIDOverlayState.DOCUMENT_TOO_FAR:
       case UseSmileIDOverlayState.DOCUMENT_TOO_CLOSE:
       case UseSmileIDOverlayState.DOCUMENT_HOLD_STILL:
-      case UseSmileIDOverlayState.DOCUMENT_READY:
-        return "ovalDefault";
+        return "ovalWarning";
     }
   },
 } as const;

package/src/presentation/flow/__tests__/document_flow_navigation.test.ts

@@ -3,6 +3,7 @@ import { DocumentSide } from "@smileid/usesmileid_bridge";
 import { FlowNavigationManager } from "../flow_navigation_manager";
 import {
   CaptureType,
+  type DocumentCaptureConfigBuilder,
   ScreensBuilder,
   type ScreensConfig,
 } from "../dsl/builder/screens_builder";
@@ -40,7 +41,7 @@ function twoSidedDocumentFlow(): ScreensConfig {
     screens.capture((capture) => {
       capture.captureType = CaptureType.document;
       capture.document((document) => {
-        document.documentType = DocumentType.SouthAfricaGreenBook; // hasBackSide
+        document.documentType = DocumentType.GenericDocument(); // hasBackSide
         document.captureBothSides = true;
         document.allowSkipBack = true;
       });
@@ -73,15 +74,15 @@ describe("FlowNavigationManager — document per-side preview loop", () => {
       true,
     );
 
-    const passportFlow = buildScreens((screens) => {
+    const greenBookFlow = buildScreens((screens) => {
       screens.capture((capture) => {
         capture.captureType = CaptureType.document;
         capture.document((document) => {
-          document.documentType = DocumentType.Passport; // no back side
+          document.documentType = DocumentType.SouthAfricaGreenBook; // no back side
         });
       });
     });
-    expect(makeManager(passportFlow).documentCapturesBack()).toBe(false);
+    expect(makeManager(greenBookFlow).documentCapturesBack()).toBe(false);
   });
 
   it("after the FRONT preview, routes back to the document capture for the BACK", () => {
@@ -136,6 +137,44 @@ describe("FlowNavigationManager — document per-side preview loop", () => {
     );
   });
 
+  it("with no document preview, still routes to the BACK capture after the front", () => {
+    // Regression: captureBothSides must capture the back even with no document
+    // preview { }, not jump straight to the selfie.
+    const noPreviewFlow = buildScreens((screens) => {
+      screens.instructions();
+      screens.capture((capture) => {
+        capture.captureType = CaptureType.document;
+        capture.document((document) => {
+          document.documentType = DocumentType.GenericDocument(); // hasBackSide
+          document.captureBothSides = true;
+          document.allowSkipBack = false;
+        });
+      });
+      screens.capture((capture) => {
+        capture.captureType = CaptureType.selfie;
+      });
+      screens.processing();
+    });
+    const manager = makeManager(noPreviewFlow);
+    manager.navigateToNext(); // instructions → document capture (front)
+    manager.setCapturedFrontDocument("file:///front.jpg");
+
+    // No preview follows → re-enter the document capture for the back side.
+    const next = manager.getNextScreen();
+    expect(next?.kind).toBe("capture");
+    expect(next?.kind === "capture" ? next.config.captureType : undefined).toBe(
+      CaptureType.document,
+    );
+
+    // After the back is captured, advance to the selfie.
+    manager.navigateToNext(); // → document capture (back)
+    manager.setCapturedBackDocument("file:///back.jpg");
+    const afterBack = manager.getNextScreen();
+    expect(
+      afterBack?.kind === "capture" ? afterBack.config.captureType : undefined,
+    ).toBe(CaptureType.selfie);
+  });
+
   it("retakeCurrentDocumentSide clears the back first, then the front", () => {
     const manager = makeManager(twoSidedDocumentFlow());
     manager.setCapturedFrontDocument("file:///front.jpg");
@@ -282,4 +321,164 @@ describe("FlowNavigationManager — document image origin metadata", () => {
       entries.some((entry) => entry.name === "DocumentBackImageOrigin"),
     ).toBe(false);
   });
+
+  it("stamps capture telemetry and image properties onto the submitted metadata", () => {
+    const repository = new StubRepository();
+    const manager = makeManager(
+      buildScreens((screens) => screens.processing()),
+      {
+        documentVerificationParams: { country: "NG" },
+        userDetails: SAMPLE_USER_DETAILS,
+        network: {
+          config: {
+            jobType: JobType.documentVerification,
+            token: "k",
+            partnerConfig: {
+              partnerId: "p",
+              callbackUrl: "",
+              useSandbox: true,
+            },
+          },
+        },
+      },
+      repository,
+    );
+    manager.setCapturedSelfie("file:///selfie.jpg", ["file:///l1.jpg"]);
+    manager.setCapturedFrontDocument("file:///front.jpg");
+    manager.recordSelfieCaptureTelemetry({
+      durationMs: 4200,
+      retries: 0,
+      cameraName: "com.apple.avfoundation:front",
+      devicePositions: ["1000,0.1,0.2,0.98", "1066,0.1,0.3,0.97"],
+      deviceMovementDetected: 0.35,
+    });
+    manager.recordDocumentCaptureTelemetry(DocumentSide.Front, {
+      durationMs: 5000,
+      retries: 1,
+      devicePositions: [],
+      deviceMovementDetected: null,
+    });
+    manager.setConsent(consentInfo);
+
+    manager.beginSubmissionIfNeeded();
+
+    const entries = repository.received[0]!.metadata.toEntries();
+    // Selfie: duration + retries (0 kept) + image color depth / pixel config.
+    expect(entries).toContainEqual({
+      name: "selfie_capture_duration_ms",
+      value: "4200",
+    });
+    expect(entries).toContainEqual({
+      name: "selfie_capture_retries",
+      value: "0",
+    });
+    expect(entries).toContainEqual({
+      name: "selfie_image_color_depth",
+      value: "24",
+    });
+    expect(entries).toContainEqual({
+      name: "selfie_image_pixel_config",
+      value: "RGB_888",
+    });
+    // Document front: telemetry + image color depth / pixel config. (Original/final compressed
+    // sizes are stamped in the repository around the compression pass, not by the flow manager.)
+    expect(entries).toContainEqual({
+      name: "document_front_capture_duration_ms",
+      value: "5000",
+    });
+    expect(entries).toContainEqual({
+      name: "document_front_capture_retries",
+      value: "1",
+    });
+    // Back side never captured → no back entries.
+    expect(
+      entries.some((entry) => entry.name === "document_back_capture_retries"),
+    ).toBe(false);
+    // Camera id from the telemetry.
+    expect(entries).toContainEqual({
+      name: "camera_name",
+      value: "com.apple.avfoundation:front",
+    });
+    // Accelerometer telemetry from the selfie capture.
+    expect(entries).toContainEqual({
+      name: "device_positions",
+      value: JSON.stringify(["1000,0.1,0.2,0.98", "1066,0.1,0.3,0.97"]),
+    });
+    expect(entries).toContainEqual({
+      name: "device_movement_detected",
+      value: "0.35",
+    });
+  });
+});
+
+describe("FlowNavigationManager — documentFrameAspectRatio", () => {
+  function documentFlow(
+    configure: (document: DocumentCaptureConfigBuilder) => void,
+  ): ScreensConfig {
+    return buildScreens((screens) => {
+      screens.capture((capture) => {
+        capture.captureType = CaptureType.document;
+        capture.document(configure);
+      });
+    });
+  }
+
+  it("uses the document type's own knownAspectRatio for presets", () => {
+    expect(
+      makeManager(
+        documentFlow((document) => {
+          document.documentType = DocumentType.Passport;
+        }),
+      ).documentFrameAspectRatio,
+    ).toBeCloseTo(356 / 272);
+
+    expect(
+      makeManager(
+        documentFlow((document) => {
+          document.documentType = DocumentType.SouthAfricaGreenBook;
+        }),
+      ).documentFrameAspectRatio,
+    ).toBeCloseTo(320 / 428);
+  });
+
+  it("falls back to the partner ratio, then the orientation default", () => {
+    // Generic landscape with no fixed ratio → landscape default.
+    expect(
+      makeManager(
+        documentFlow((document) => {
+          document.documentType = DocumentType.GenericDocument();
+        }),
+      ).documentFrameAspectRatio,
+    ).toBeCloseTo(1.586);
+
+    // A partner override wins when the type has no fixed ratio.
+    expect(
+      makeManager(
+        documentFlow((document) => {
+          document.documentType = DocumentType.GenericDocument();
+          document.knownIdAspectRatio = 1.4;
+        }),
+      ).documentFrameAspectRatio,
+    ).toBeCloseTo(1.4);
+
+    // Generic portrait with no fixed ratio → portrait default.
+    expect(
+      makeManager(
+        documentFlow((document) => {
+          document.documentType = DocumentType.GenericDocument({
+            orientation: "Portrait",
+          });
+        }),
+      ).documentFrameAspectRatio,
+    ).toBeCloseTo(0.65);
+  });
+
+  it("is undefined when the flow has no document capture step", () => {
+    const selfieFlow = buildScreens((screens) => {
+      screens.capture((capture) => {
+        capture.captureType = CaptureType.selfie;
+      });
+    });
+    expect(makeManager(selfieFlow).documentFrameAspectRatio).toBeUndefined();
+  });
 });