@myazahq/kyc-sdk-react-native 2.5.0 → 2.6.0

package/src/screens/address/use-address-flow.ts

@@ -0,0 +1,200 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { useKyc, useKycConfig, useKycStore } from '../../components/runtime';
+import { addressFlowFor } from '../../config/addressCollection';
+import { webViewAvailable } from '../../lib/webview-available';
+import { isBusinessFlow } from '../../config/business';
+import { addressFlowSteps, addressVendorsStubbed, isAddressStep } from '../../lib/address-flow';
+import { addressExitStep, recoverAddressStep } from '../../lib/address-step-recovery';
+import { defaultMapView } from '../../lib/map-tiles';
+import { buildStepOrder, nextStepInOrder } from '../../config/stepOrder';
+import { geoDefaultCountry } from '../../lib/country-adoption';
+import { configScope } from '../../lib/scope';
+import { stepOrderOptions } from '../../store/kycStore';
+import { deviceFixFields } from '../../services/location';
+import { savePresencePin } from '../../presence/store';
+import { usePinActions } from './use-pin-actions';
+import type { KYCStep } from '../../types/config';
+import type { AddressState } from '../../store/state';
+
+// ---------------------------------------------------------------------------
+// The address flow's shared brain: every address step mounts this hook and gets
+// the same derived flags, the same step list, and the same actions — which is
+// what keeps four separate screens telling one story.
+//
+// Navigation rides the SDK's ONE ordered step list rather than a second copy:
+// the flow's steps are already in `buildStepOrder`, so stepping forward, going
+// back, and backing out of the flow entirely all fall out of the same list the
+// progress bar reads. That is why nothing here reimplements goBack — the
+// sheet's own back button already walks it — and why goNext is the store's
+// nextStep. `nextAddressStep`/`prevAddressStep` stay in lib/address-flow as
+// part of the pure mirror the three SDKs share.
+//
+// A MIRROR of the web SDK's steps/address/use-address-flow.ts.
+// ---------------------------------------------------------------------------
+
+export function useAddressFlow() {
+  const config = useKycConfig();
+  const store = useKycStore();
+  const address = useKyc((s) => s.address);
+  const serverSearch = useKyc((s) => s.serverConfig.addressSearch === true);
+  const selectedCountry = useKyc((s) => s.selectedCountry);
+  const businessCountry = useKyc((s) => s.business.country);
+  const [uploading, setUploading] = useState(false);
+  const [confirming, setConfirming] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const cfg = config.addressCollection;
+  const isBusiness = isBusinessFlow(config);
+  const vendorEnvironment = useKyc((s) => s.serverConfig.environment ?? null);
+  const mapsFrameUrl = useKyc((s) => s.serverConfig.mapsFrameUrl ?? null);
+  const flow = addressFlowFor(
+    config,
+    serverSearch,
+    addressVendorsStubbed({ environment: vendorEnvironment }),
+    Boolean(mapsFrameUrl) && webViewAvailable(),
+  );
+  // KYB: the premises pin + directions ARE the capture, so the flow is that
+  // single step and its Continue commits.
+  //
+  // Memoised on the three flags it derives from, so `steps` — and the two
+  // navigation callbacks that close over it — keep a stable identity. A fresh
+  // array on every render would make `goNext` a new function each time, and
+  // the entrance step depends on that identity inside an effect.
+  const { searchAvailable, photoMode, streetViewOffered } = flow;
+  const steps: KYCStep[] = useMemo(
+    () =>
+      isBusiness
+        ? ['address-collection']
+        : addressFlowSteps({ searchAvailable, photoMode, streetViewOffered }),
+    [isBusiness, searchAvailable, photoMode, streetViewOffered],
+  );
+
+  // A resumed attempt restores the step it was saved on, and the flow may have
+  // changed shape since: `searchAvailable` is a SERVER flag that lands after the
+  // restore, and a republish can drop the entrance photo. Left alone the
+  // applicant sits on a screen the order does not contain, where Continue has
+  // nothing to advance to and Back has no predecessor. Gated on the config
+  // having settled: until then the order is not the real one.
+  const configSettled = useKyc((s) => s.serverConfig.status !== 'loading');
+  const currentStep = useKyc((s) => s.currentStep);
+  useEffect(() => {
+    if (!configSettled || !isAddressStep(currentStep)) return;
+    const options = stepOrderOptions(store.getState());
+    const inFlow = buildStepOrder(options).filter(isAddressStep);
+    const exit = addressExitStep(buildStepOrder({ ...options, hasAddressCollection: true }));
+    const recovered = recoverAddressStep(currentStep, inFlow, exit);
+    if (recovered) store.getState().goToStep(recovered);
+  }, [configSettled, currentStep, store]);
+
+  // The address scope declares the visitor's IP country by default, ONCE,
+  // while nothing is declared; a geocode or a picked address then corrects
+  // the guess (lib/country-adoption.ts). A full flow never defaults from it.
+  const geoCountry = useKyc((s) => s.serverConfig.geoCountry ?? null);
+  useEffect(() => {
+    const s = store.getState();
+    const country = geoDefaultCountry({
+      geoCountry,
+      selectedCountry: s.selectedCountry,
+      scope: configScope(s.config),
+      accepted: s.config.proofOfAddress?.countries,
+    });
+    if (country) s.setCountryAuto(country);
+  }, [geoCountry, store]);
+
+  const pin = address ? { lat: address.lat, lng: address.lng } : null;
+  const country = isBusiness ? (businessCountry ?? undefined) : (selectedCountry ?? config.country);
+  const view = defaultMapView(country);
+
+  const pinActions = usePinActions(store, setError);
+
+  /** Leave the address flow forwards: after the review, a KYB commit, a skip. */
+  const exitForward = useCallback(() => {
+    const state = store.getState();
+    const last = steps[steps.length - 1]!;
+    store.getState().goToStep(nextStepInOrder(last, stepOrderOptions(state)));
+  }, [steps, store]);
+
+  /**
+   * The step after the current one within the flow, else the flow's exit:
+   * exactly what the store's own `nextStep` computes, since the flow's steps
+   * are contiguous in the ordered list. Going through the store also keeps
+   * the navigation direction and the camera flag handled in one place.
+   */
+  const goNext = useCallback(() => store.getState().nextStep(), [store]);
+
+  const pickPhoto = useCallback(
+    async (upload: () => Promise<string>, previewUri: string) => {
+      setError(null);
+      setUploading(true);
+      try {
+        const mediaId = await upload();
+        store.getState().setAddressPhoto(mediaId);
+        store.getState().setAddressPhotoPreview(previewUri);
+      } catch (err) {
+        setError(
+          err instanceof Error && err.message
+            ? err.message
+            : 'Upload failed. Please check your connection and try again.',
+        );
+      } finally {
+        setUploading(false);
+      }
+    },
+    [store],
+  );
+
+  const removePhoto = useCallback(() => {
+    store.getState().setAddressPhoto(null);
+    store.getState().setAddressPhotoPreview(null);
+  }, [store]);
+
+  /** Commit: the one-shot attest fix (best-effort), then leave the flow. */
+  const confirm = useCallback(async () => {
+    const current = store.getState().address;
+    if (!current) return;
+    setConfirming(true);
+    let committed: AddressState = current;
+    if (cfg?.attestPresence) {
+      // Best-effort by contract: a denied prompt or a slow read costs the
+      // `attested` tier, never the flow.
+      committed = { ...current, ...(await deviceFixFields()) };
+      store.getState().setAddress(committed);
+    }
+    // Presence verification keeps the confirmed pin ON-DEVICE so later
+    // foreground reports evaluate the fence locally. Keyed by the org's user
+    // reference: without one there is nothing to report against.
+    if (cfg?.presence?.enabled === true && config.userId) {
+      savePresencePin(
+        config.userId,
+        { lat: committed.lat, lng: committed.lng },
+        { alwaysOn: cfg.presence.alwaysOn === true },
+      );
+    }
+    setConfirming(false);
+    exitForward();
+  }, [cfg?.attestPresence, cfg?.presence?.enabled, config.userId, exitForward, store]);
+
+  return {
+    cfg,
+    address,
+    isBusiness,
+    steps,
+    pin,
+    view,
+    country,
+    photoMode: flow.photoMode,
+    streetViewOffered: flow.streetViewOffered,
+    searchAvailable: flow.searchAvailable,
+    uploading,
+    confirming,
+    error,
+    setError,
+    pickPhoto,
+    removePhoto,
+    goNext,
+    exitForward,
+    confirm,
+    ...pinActions,
+  };
+}

package/src/screens/address/use-label-pin.ts

@@ -0,0 +1,80 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { REVERSE_DEBOUNCE_MS, addressVendorsStubbed, SAMPLE_ADDRESS_LINE } from '../../lib/address-flow';
+import type { KycStore } from '../../store/state';
+
+// ---------------------------------------------------------------------------
+// Reverse geocoding: the pin's human-readable line. Split from
+// use-pin-actions.ts (200-line rule).
+//
+// Debounced, because a drag settles several times, and DROPPED when the pin
+// moved again meanwhile: the comparison is exact coordinate equality, so a
+// late answer can never label somewhere the applicant has already left.
+// Failures are swallowed; the line is a convenience. Display only, and the
+// pin's own country is handed to `onGeocoded` so the declaration can follow
+// the evidence (lib/country-adoption.ts). Mirrors Flutter's
+// address_pin_label.dart.
+// ---------------------------------------------------------------------------
+
+export function useLabelPin(
+  store: KycStore,
+  onGeocoded: (country: string | null | undefined) => void,
+): { labelPin: (lat: number, lng: number, delay?: number) => void; labelling: boolean } {
+  const reverseTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  // The summary line shows nothing while a pin has no address, so it has to
+  // say WHY: an answer is coming, or none is.
+  const [labelling, setLabelling] = useState(false);
+
+  useEffect(
+    () => () => {
+      if (reverseTimer.current) clearTimeout(reverseTimer.current);
+    },
+    [],
+  );
+
+  const labelPin = useCallback(
+    (lat: number, lng: number, delay = REVERSE_DEBOUNCE_MS) => {
+      if (reverseTimer.current) clearTimeout(reverseTimer.current);
+      setLabelling(true);
+      // SANDBOX never reverse-geocodes: the sample line demonstrates the
+      // summary card with no network call (the web SDK's preview/sandbox rule).
+      if (addressVendorsStubbed({ environment: store.getState().serverConfig.environment })) {
+        reverseTimer.current = setTimeout(() => {
+          const cur = store.getState().address;
+          if (!cur || cur.lat !== lat || cur.lng !== lng || cur.label) return;
+          store.getState().setAddress({ ...cur, label: SAMPLE_ADDRESS_LINE });
+          setLabelling(false);
+        }, 0);
+        return;
+      }
+      reverseTimer.current = setTimeout(() => {
+        void store
+          .getState()
+          .api.addressReverse(lat, lng)
+          .then((r) => {
+            const cur = store.getState().address;
+            // Exact coordinate equality: anything else means the pin moved
+            // while the request was out, and this answer describes a spot the
+            // applicant has already left.
+            if (!r.line || !cur || cur.lat !== lat || cur.lng !== lng) return;
+            store.getState().setAddress({
+              ...cur,
+              label: r.line,
+              ...(r.parts ? { parts: r.parts } : {}),
+              // A resolved street retires the typed one (its input hides) —
+              // back to UNDEFINED, never '': the details sheet reads '' as
+              // deliberately cleared, which suppressed the resolved-street
+              // prefill it should be showing.
+              ...(r.parts?.street ? { street: undefined } : {}),
+            });
+            onGeocoded(r.parts?.country);
+          })
+          .catch(() => undefined)
+          .finally(() => setLabelling(false));
+      }, delay);
+    },
+    [onGeocoded, store],
+  );
+
+  return { labelPin, labelling };
+}

package/src/screens/address/use-pin-actions.ts

@@ -0,0 +1,192 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { fixApplied, pinMove, withoutPickedLabel } from '../../lib/address-pin-move';
+import { isAddressStep } from '../../lib/address-flow';
+import {
+  currentFix as cachedFix,
+  currentFixFailure,
+  locating as fixInFlight,
+  locationFailureMessage,
+  prefetchCurrentFix,
+  type CurrentFix,
+} from '../../lib/address-current-location';
+import { adoptionDecision } from '../../lib/country-adoption';
+import { configScope } from '../../lib/scope';
+import { useLabelPin } from './use-label-pin';
+import { fixSourceFor } from './fix-source';
+import type { KycStore } from '../../store/state';
+
+// ---------------------------------------------------------------------------
+// The pin's mechanics — the shared current-location fix and every way the pin
+// can move. Split from use-address-flow.ts (200-line rule); the reverse
+// geocode that labels the pin lives in use-label-pin.ts, the fix source in
+// fix-source.ts. A MIRROR of the web SDK's steps/address/use-pin-actions.ts.
+//
+// One rule runs through all of it: a HUMAN-CONFIRMED label is never silently
+// discarded, and never silently kept against the applicant's wishes either.
+// They decide, via the pin step's keep/update row.
+// ---------------------------------------------------------------------------
+
+export interface PinActions {
+  currentFix: CurrentFix | null;
+  locating: boolean;
+  startPrefetch: () => void;
+  applyCurrentFix: (onDone?: () => void, opts?: { silent?: boolean }) => Promise<void>;
+  setPin: (next: { lat: number; lng: number }, accuracy?: number | null) => void;
+  keepPickedLabel: () => void;
+  adoptPinAddress: () => void;
+  relabelPin: () => void;
+  locateToPin: () => Promise<void>;
+  /** The declared country follows the evidence: the rule, and why each of
+   *  its guards exists, is lib/country-adoption.ts. */
+  adoptGeocodedCountry: (country: string | null | undefined, opts?: { explicit?: boolean }) => void;
+  /** A reverse geocode is out: the pin has no line YET, rather than none. */
+  labelling: boolean;
+}
+
+export function usePinActions(
+  store: KycStore,
+  setError: (message: string | null) => void,
+): PinActions {
+  const [fix, setFix] = useState<CurrentFix | null>(cachedFix());
+  const [fixPending, setFixPending] = useState(fixInFlight());
+
+  const fixSource = useMemo(() => fixSourceFor(store), [store]);
+
+  const adoptGeocodedCountry = useCallback(
+    (country: string | null | undefined, opts?: { explicit?: boolean }) => {
+      const st = store.getState();
+      const decision = adoptionDecision({
+        country,
+        selectedCountry: st.selectedCountry,
+        countryAutoPicked: st.countryAutoPicked,
+        scope: configScope(st.config),
+        accepted: st.config.proofOfAddress?.countries,
+        explicit: opts?.explicit,
+      });
+      if (!decision) return;
+      if (decision.auto) st.setCountryAuto(decision.country);
+      else st.setCountry(decision.country);
+    },
+    [store],
+  );
+  const { labelPin, labelling } = useLabelPin(store, adoptGeocodedCountry);
+
+  // The fix may have resolved on an earlier step (it is module-level): a
+  // guessed declaration is corrected on this mount too, not only when the
+  // prefetch happens to finish here.
+  useEffect(() => {
+    adoptGeocodedCountry(cachedFix()?.parts?.country);
+  }, [adoptGeocodedCountry]);
+
+  // ── The shared current-location fix ───────────────────────────────────────
+  const startPrefetch = useCallback(() => {
+    setFixPending(true);
+    void prefetchCurrentFix(fixSource).then((f) => {
+      setFix(f);
+      setFixPending(false);
+      adoptGeocodedCountry(f?.parts?.country);
+    });
+  }, [adoptGeocodedCountry, fixSource]);
+
+  /**
+   * Land the pin ON the current fix — the bootstrap override, used while no
+   * address exists yet. It sets NO `pickedAt`, so the resulting label is
+   * treated as derived and re-derives freely on the next move.
+   */
+  const applyCurrentFix = useCallback(
+    async (onDone?: () => void, opts?: { silent?: boolean }) => {
+      setError(null);
+      setFixPending(true);
+      // A TAP may retry a previously failed attempt (permission may have been
+      // granted since); the silent auto path never re-prompts.
+      const f = await prefetchCurrentFix(fixSource, { retry: !opts?.silent });
+      setFix(f);
+      setFixPending(false);
+      adoptGeocodedCountry(f?.parts?.country);
+      // The fix can take up to eight seconds, and "Skip for now" is a decision
+      // the applicant may make inside that window. A late fix writing an
+      // address they declined to give (and an onDone navigating them back onto
+      // a step they just left) undoes that decision, so a continuation whose
+      // step is no longer in the address flow drops everything on the floor.
+      if (!isAddressStep(store.getState().currentStep)) return;
+      const cur = store.getState().address;
+      // The silent apply resolves seconds after it started, and the person may
+      // have picked a searched address meanwhile. A late GPS fix must never
+      // overwrite a choice they made; an explicit tap still overrides.
+      if (opts?.silent && cur) {
+        onDone?.();
+        return;
+      }
+      if (f) {
+        store.getState().setAddress(fixApplied(cur, f));
+      } else if (!opts?.silent) {
+        // Which remedy the person needs depends on WHY the read failed.
+        setError(locationFailureMessage(currentFixFailure()));
+      }
+      onDone?.();
+    },
+    [adoptGeocodedCountry, fixSource, setError, store],
+  );
+
+  const setPin = useCallback(
+    (next: { lat: number; lng: number }, accuracy: number | null = null) => {
+      const move = pinMove(store.getState().address, next, accuracy);
+      if (move.kind === 'ignore') return;
+      store.getState().setAddress(move.address);
+      // A kept label needs no reverse geocode: it already names the property.
+      if (move.kind === 'rebuild') labelPin(next.lat, next.lng);
+    },
+    [labelPin, store],
+  );
+
+  const keepPickedLabel = useCallback(() => {
+    const cur = store.getState().address;
+    if (cur) store.getState().setAddress({ ...cur, labelKept: true });
+  }, [store]);
+
+  /** The applicant adopts the PIN's address: drop the pick, re-derive. */
+  const adoptPinAddress = useCallback(() => {
+    const cur = store.getState().address;
+    if (!cur) return;
+    store.getState().setAddress(withoutPickedLabel(cur));
+    labelPin(cur.lat, cur.lng, 0);
+  }, [labelPin, store]);
+
+  /** Reverse-geocode the current pin's line — for a session restored from a
+   *  snapshot saved before labels existed, which would show raw coordinates. */
+  const relabelPin = useCallback(() => {
+    const cur = store.getState().address;
+    if (cur && !cur.label) labelPin(cur.lat, cur.lng, 0);
+  }, [labelPin, store]);
+
+  /**
+   * The on-map locate control: moves the PIN through `setPin`, so a picked
+   * address is protected by the same keep/update prompt as any other pin move
+   * and a mistaken tap destroys nothing.
+   */
+  const locateToPin = useCallback(async () => {
+    setError(null);
+    setFixPending(true);
+    const f = await prefetchCurrentFix(fixSource, { retry: true });
+    setFix(f);
+    setFixPending(false);
+    adoptGeocodedCountry(f?.parts?.country);
+    if (f) setPin({ lat: f.lat, lng: f.lng }, f.accuracy);
+    else setError(locationFailureMessage(currentFixFailure()));
+  }, [adoptGeocodedCountry, fixSource, setError, setPin]);
+
+  return {
+    labelling,
+    currentFix: fix,
+    locating: fixPending,
+    startPrefetch,
+    applyCurrentFix,
+    setPin,
+    keepPickedLabel,
+    adoptPinAddress,
+    relabelPin,
+    locateToPin,
+    adoptGeocodedCountry,
+  };
+}

package/src/screens/biometric/BiometricAuthFlow.tsx

@@ -0,0 +1,170 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { ActivityIndicator, Pressable, View } from 'react-native';
+
+import { spacing } from '../../config/theme';
+import { useKyc, useKycConfig, useKycStore, useTheme } from '../../components/runtime';
+import { KycSheet } from '../../components/KycSheet';
+import { ToastProvider } from '../../components/toast';
+import { MyazaText } from '../../components/Typography';
+import { MyazaButton } from '../../components/MyazaButton';
+import { Icon } from '../../components/Icon';
+import { LivenessStep } from '../LivenessStep';
+import { mapAuthError, outcomeOf, type BiometricAuthOutcome } from '../../lib/biometric-auth';
+import type { KYCError } from '../../types/verification';
+import type { BiometricAuthResponse } from '../../services/api-types-biometric';
+
+// ---------------------------------------------------------------------------
+// The re-auth flow inside its own runtime: intro → the REAL liveness step →
+// authenticating → result. The liveness step is the ordinary one — camera,
+// challenges, capture ring, selfie upload — mounted alone with the store
+// parked on 'liveness'. Its Continue advances the store to 'submitted' (the
+// scope's step order), which is the hand-over: the uploaded selfie's mediaId
+// is read off the store and sent to /biometric/authenticate. The submitted
+// screen is never rendered, so nothing ever calls /verify.
+// ---------------------------------------------------------------------------
+
+type View_ = 'intro' | 'capture' | 'authenticating' | 'result';
+
+export function BiometricAuthFlow({
+  externalUserId,
+  onAuthenticated,
+  onFailed,
+  onError,
+  onClose,
+}: {
+  externalUserId: string;
+  onAuthenticated?: (result: BiometricAuthResponse) => void;
+  onFailed?: (result: BiometricAuthResponse) => void;
+  onError?: (error: KYCError) => void;
+  onClose: () => void;
+}): React.ReactElement {
+  const config = useKycConfig();
+  const store = useKycStore();
+  const currentStep = useKyc((s) => s.currentStep);
+  const selfieId = useKyc((s) => s.mediaIds.selfie);
+  const immersive = useKyc((s) => s.immersiveCapture);
+  const [view, setView] = useState<View_>('intro');
+  const [outcome, setOutcome] = useState<BiometricAuthOutcome | null>(null);
+  const inFlight = useRef(false);
+
+  const startCapture = () => {
+    store.setState({ currentStep: 'liveness', mediaIds: {}, selfiePreviewUri: null });
+    setOutcome(null);
+    setView('capture');
+  };
+
+  // The hand-over: the step's Continue moved the store past 'liveness' with
+  // the selfie uploaded.
+  useEffect(() => {
+    if (view !== 'capture' || currentStep === 'liveness' || !selfieId || inFlight.current) return;
+    inFlight.current = true;
+    setView('authenticating');
+    const mode = config.livenessMode ?? 'gestures';
+    store
+      .getState()
+      .api.authenticate({ externalUserId, selfie: selfieId, liveness: { mode, passed: true } })
+      .then((result) => {
+        const next = outcomeOf(result);
+        setOutcome(next);
+        if (next.kind === 'success') onAuthenticated?.(result);
+        else onFailed?.(result);
+      })
+      .catch((err: unknown) => {
+        const kyc = mapAuthError(err);
+        setOutcome({ kind: 'error', message: kyc.message });
+        onError?.(kyc);
+      })
+      .finally(() => {
+        inFlight.current = false;
+        setView('result');
+      });
+  }, [view, currentStep, selfieId, config.livenessMode, externalUserId, store, onAuthenticated, onFailed, onError]);
+
+  const title =
+    view === 'capture' ? 'Face check' : view === 'authenticating' ? "Verifying it's you" : "Verify it's you";
+  const dismissBlocked = config.disableClose === true || view === 'authenticating';
+
+  return (
+    <ToastProvider>
+      <KycSheet
+        title={title}
+        description={view === 'capture' ? 'Follow the prompts, then hold still for the photo.' : null}
+        progress={null}
+        stepCount={null}
+        onBack={view === 'capture' ? () => setView('intro') : null}
+        onClose={dismissBlocked ? () => undefined : onClose}
+        immersive={immersive}
+      >
+        {view === 'intro' && <Intro onStart={startCapture} />}
+        {view === 'capture' && <LivenessStep />}
+        {view === 'authenticating' && <Authenticating />}
+        {view === 'result' && outcome && <Result outcome={outcome} onRetry={startCapture} onClose={onClose} />}
+      </KycSheet>
+    </ToastProvider>
+  );
+}
+
+function Intro({ onStart }: { onStart: () => void }): React.ReactElement {
+  const { colors } = useTheme();
+  return (
+    <View style={{ alignItems: 'center', paddingVertical: spacing.lg }}>
+      <View style={{ width: 80, height: 80, borderRadius: 40, backgroundColor: `${colors.primary}1A`, alignItems: 'center', justifyContent: 'center' }}>
+        <Icon name="user" size={36} color={colors.primary} />
+      </View>
+      <View style={{ height: spacing.lg }} />
+      <MyazaText variant="body" style={{ textAlign: 'center' }} color={colors.textSecondary}>
+        We'll take a quick face check to confirm your identity. No documents needed.
+      </MyazaText>
+      <View style={{ height: spacing.xl }} />
+      <MyazaButton label="Start" onPress={onStart} />
+    </View>
+  );
+}
+
+function Authenticating(): React.ReactElement {
+  const { colors } = useTheme();
+  return (
+    <View style={{ alignItems: 'center', paddingVertical: spacing.xl * 2 }}>
+      <ActivityIndicator size="large" color={colors.primary} />
+      <View style={{ height: spacing.lg }} />
+      <MyazaText variant="body" style={{ fontWeight: '600' }}>Verifying it's you…</MyazaText>
+      <MyazaText variant="bodySmall" color={colors.textSecondary}>This only takes a moment.</MyazaText>
+    </View>
+  );
+}
+
+function Result({ outcome, onRetry, onClose }: { outcome: BiometricAuthOutcome; onRetry: () => void; onClose: () => void }): React.ReactElement {
+  const { colors } = useTheme();
+  const ok = outcome.kind === 'success';
+  const tint = ok ? colors.success : colors.error;
+  const heading = ok ? "You're verified" : outcome.kind === 'failed' ? "Couldn't verify you" : 'Something went wrong';
+  const detail = ok
+    ? "We confirmed it's really you."
+    : outcome.kind === 'failed'
+      ? "We couldn't confirm it's you. Make sure your face is clear and well lit, then try again."
+      : outcome.message;
+  return (
+    <View style={{ alignItems: 'center', paddingVertical: spacing.lg }}>
+      <View style={{ width: 80, height: 80, borderRadius: 40, backgroundColor: `${tint}1A`, alignItems: 'center', justifyContent: 'center' }}>
+        {/* The web's result: a check, or the alert circle the flow's own
+            verdict screen uses (never a bare X), under a heading-font title. */}
+        <Icon name={ok ? 'check' : 'alert'} size={36} color={tint} />
+      </View>
+      <View style={{ height: spacing.lg }} />
+      <MyazaText variant="heading2" style={{ textAlign: 'center' }}>{heading}</MyazaText>
+      <View style={{ height: spacing.xs }} />
+      <MyazaText variant="body" color={colors.textSecondary} style={{ textAlign: 'center' }}>{detail}</MyazaText>
+      <View style={{ height: spacing.xl }} />
+      {ok ? (
+        <MyazaButton label="Done" onPress={onClose} />
+      ) : (
+        <>
+          <MyazaButton label="Try again" onPress={onRetry} />
+          <Pressable onPress={onClose} accessibilityRole="button" hitSlop={8} style={{ paddingVertical: spacing.md }}>
+            <MyazaText variant="body" color={colors.textSecondary}>Close</MyazaText>
+          </Pressable>
+        </>
+      )}
+    </View>
+  );
+}