@myazahq/kyc-sdk-react-native 2.0.2 → 2.2.0

package/src/screens/DocumentCaptureStep.tsx

@@ -1,7 +1,8 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Image, Pressable, View } from 'react-native';
+import { Image, Platform, Pressable, View } from 'react-native';
 import * as ImagePicker from 'expo-image-picker';
 import { useCameraDevice, useCameraPermission } from 'react-native-vision-camera';
+import { initialWindowMetrics } from 'react-native-safe-area-context';
 
 import { radius, spacing } from '../config/theme';
 import { ID_TYPES, documentGuideAspect, getScanSides } from '../config/idTypes';
@@ -11,14 +12,18 @@ import { compressDocumentImage, compressVideo, cropCardRegion } from '../service
 import { MAX_VIDEO_BYTES } from '../config/captureSettings';
 import { KYCError } from '../types/verification';
 import type { DocumentCapturePhase } from '../store/kycStore';
-import { useKyc, useKycConfig, useTheme } from '../components/runtime';
+import { useEffectiveCountry, useKyc, useKycConfig, useKycStore, useTheme } from '../components/runtime';
 import { MyazaText } from '../components/Typography';
 import { MyazaButton } from '../components/MyazaButton';
 import { useToast } from '../components/toast';
 import { MyazaPulseLoader } from '../components/MyazaPulseLoader';
-import { CameraViewfinder } from '../components/CameraViewfinder';
+import { CameraPhase } from './document/CameraPhase';
 import { CameraPermissionView, CameraUnavailableView, CameraPermissionPrimingView } from '../components/CameraPermissionView';
+import { ReadyPrimer } from '../components/ReadyPrimer';
+import { READY_DOCUMENT } from '../components/readyPrimerContent';
 import { DocumentCropper } from '../components/DocumentCropper';
+import { DocumentReview } from '../components/DocumentReview';
+import { scanMrzFromImage } from '../mrz/textRecognizer';
 import { Icon } from '../components/Icon';
 
 // Document capture — the RN mirror of the Flutter/web DocumentCaptureStep.
@@ -61,6 +66,16 @@ export function documentCaptureMeta(
   }
 }
 
+/** Bound on how long Continue waits for the supplementary document video. */
+const DOC_VIDEO_WAIT_MS = 8000;
+
+/** Home-indicator / nav-bar clearance for the full-screen camera's controls. */
+function cameraBottomInset(): number {
+  const sa = initialWindowMetrics?.insets;
+  if (Platform.OS === 'android') return (sa?.bottom ?? 0) + 12;
+  return sa?.bottom || 34;
+}
+
 export function DocumentCaptureStep(): React.ReactElement {
   const { colors } = useTheme();
   const toast = useToast();
@@ -68,7 +83,12 @@ export function DocumentCaptureStep(): React.ReactElement {
   const selectedIdType = useKyc((s) => s.selectedIdType);
   const api = useKyc((s) => s.api);
   const setMediaId = useKyc((s) => s.setMediaId);
+  const setMrzScan = useKyc((s) => s.setMrzScan);
+  const mrzScan = useKyc((s) => s.mrzScan);
+  const country = useEffectiveCountry();
   const setDocumentCapturePhase = useKyc((s) => s.setDocumentCapturePhase);
+  const setImmersiveCapture = useKyc((s) => s.setImmersiveCapture);
+  const store = useKycStore();
   const nextStep = useKyc((s) => s.nextStep);
 
   const allowUpload = config.allowDocumentUpload !== false;
@@ -96,6 +116,7 @@ export function DocumentCaptureStep(): React.ReactElement {
     setDocumentCapturePhase(phase);
   }, [phase, setDocumentCapturePhase]);
 
+
   // ── Camera permission ──────────────────────────────────────────────────────
   // `perm` is derived from the ASYNC requestPermission result, not synchronously
   // from `hasPermission` — otherwise the brief window while the OS prompt is open
@@ -127,7 +148,23 @@ export function DocumentCaptureStep(): React.ReactElement {
   // No camera hardware at all → "Camera not available" (regardless of what the
   // permission API says — on a camera-less sim it may even report denied).
   const cameraUnavailable = cameraGrace && !device;
+  // Gate the camera path on the user acknowledging the primer. Shown once for
+  // the step, not per side — repeating it before the back of a card would be
+  // noise, not a warning.
+  const [ready, setReady] = useState(false);
   const showPrimer = perm === 'priming' && !!device;
+  // Tell the shell when the full-bleed camera is on screen. Scoped tightly:
+  // only the live preview earns the whole display — the ready primer, the
+  // permission screens, the previews and the review all keep their chrome.
+  //
+  // No unmount cleanup: KycFlow already scopes the flag to this step, and a
+  // cleanup here would fire during any remount and fight the effect that had
+  // just raised it.
+  const cameraLive =
+    (phase === 'front' || phase === 'back') && ready && perm === 'granted' && !!device;
+  useEffect(() => {
+    setImmersiveCapture(cameraLive);
+  }, [cameraLive, setImmersiveCapture]);
 
   // Reflect an externally-granted permission.
   useEffect(() => {
@@ -176,6 +213,22 @@ export function DocumentCaptureStep(): React.ReactElement {
       setUploadError(null);
       try {
         const compressed = await compressDocumentImage(rawUri);
+        // Read the MRZ off the FRONT while we have it. It is the key that
+        // unlocks the chip, and taking it from the photo the user just captured
+        // is what spares them scanning the same passport a second time.
+        // Best-effort in every sense: most documents have no MRZ, and one that
+        // does not read simply leaves the chip step to ask.
+        if (phase !== 'back') {
+          void scanMrzFromImage(compressed)
+            .then((scan) => {
+              if (scan) setMrzScan(scan);
+            })
+            // Explicit, even though the scanner already swallows its own
+            // errors: this sits inside the capture path, and the claim above
+            // that it is best-effort has to hold for anything that can reject
+            // — including a future change to the store setter.
+            .catch(() => undefined);
+        }
         if (phase === 'back') {
           setBackUri(compressed);
           setPhase('review');
@@ -187,7 +240,7 @@ export function DocumentCaptureStep(): React.ReactElement {
         setBusy(false);
       }
     },
-    [phase, isTwoSided],
+    [phase, isTwoSided, setMrzScan],
   );
 
   // Gallery upload: pick the raw photo (no native editor), then open the SDK's
@@ -196,13 +249,16 @@ export function DocumentCaptureStep(): React.ReactElement {
   // (mirrors Flutter's cropCardRegion), then store. Gallery photos skip this —
   // they're already cropped by the interactive cropper.
   const captureFromCamera = useCallback(
-    async (rawUri: string, videoPath: string | null) => {
+    async (rawUri: string, videoPath: string | null, viewAr: number) => {
       setBusy(true);
       try {
         // Stash the side's video (best-effort) before cropping/storing the still.
         if (phase === 'back') backVideoRef.current = videoPath;
         else frontVideoRef.current = videoPath;
-        const carded = await cropCardRegion(rawUri, guideAspect).catch(() => rawUri);
+        // viewAr is the MEASURED preview box — full-screen capture shows a far
+        // taller slice than the framed 3:4 box the old constant assumed, which
+        // is why reviews came back wider than what the user framed.
+        const carded = await cropCardRegion(rawUri, guideAspect, viewAr).catch(() => rawUri);
         await storeCapture(carded);
       } finally {
         setBusy(false);
@@ -223,6 +279,18 @@ export function DocumentCaptureStep(): React.ReactElement {
   }, []);
 
   // Best-effort document video upload — never blocks or fails the flow.
+  /**
+   * How long the flow will WAIT for a document video before moving on.
+   *
+   * The clip is supplementary evidence, but transcoding a 4K recording and
+   * pushing it over a phone hotspot is slow — and it used to be awaited with no
+   * bound, so the step sat on a spinner indefinitely after the photo had
+   * already uploaded fine. The user could not reach the chip step at all.
+   *
+   * The upload is NOT cancelled at the deadline: it keeps running in the
+   * background and still records its media id if it lands, usually well before
+   * submission. Only the WAIT is bounded.
+   */
   const uploadDocVideo = useCallback(
     async (
       videoPath: string | null,
@@ -230,15 +298,21 @@ export function DocumentCaptureStep(): React.ReactElement {
       mediaKey: 'documentFrontVideo' | 'documentBackVideo',
     ) => {
       if (!videoPath) return;
-      try {
-        // Transcode the raw 4K recording down to a small evidence clip first.
-        const small = await compressVideo(videoPath);
-        const id = await withRetry(() => api.upload({ uri: small, type: 'video/mp4' }, type, MAX_VIDEO_BYTES));
-        setMediaId(mediaKey, id);
-      } catch {
-        /* supplementary — verification proceeds without the document video
-           (dropped if it failed to upload or exceeded the 5MB ceiling) */
-      }
+      const work = (async () => {
+        try {
+          // Transcode the raw 4K recording down to a small evidence clip first.
+          const small = await compressVideo(videoPath);
+          const id = await withRetry(() => api.upload({ uri: small, type: 'video/mp4' }, type, MAX_VIDEO_BYTES));
+          setMediaId(mediaKey, id);
+        } catch {
+          /* supplementary — verification proceeds without the document video
+             (dropped if it failed to upload or exceeded the 5MB ceiling) */
+        }
+      })();
+      await Promise.race([
+        work,
+        new Promise<void>((resolve) => setTimeout(resolve, DOC_VIDEO_WAIT_MS)),
+      ]);
     },
     [api, setMediaId],
   );
@@ -312,6 +386,17 @@ export function DocumentCaptureStep(): React.ReactElement {
         </>
       );
     }
+    if (!ready) {
+      // "Here's what happens next", BEFORE the OS prompt — and shown even when
+      // permission is already granted, since it is about what the step asks of
+      // the user rather than about access.
+      return (
+        <>
+          {cropper}
+          <ReadyPrimer content={READY_DOCUMENT} onReady={() => setReady(true)} />
+        </>
+      );
+    }
     if (showPrimer) {
       // Primer before the OS prompt — camera not started yet.
       return (
@@ -334,57 +419,36 @@ export function DocumentCaptureStep(): React.ReactElement {
       );
     }
     const isBack = phase === 'back';
+
     return (
-      <View>
+      <>
         {cropper}
-        {/* Required pill: ID label + side badge + step label (two-sided) */}
-        <RequiredPill
-          documentLabel={documentLabel}
-          sideBadge={isTwoSided ? (isBack ? 'Back Side' : 'Front Side') : undefined}
-          stepLabel={isTwoSided ? (isBack ? 'Step 2 of 2' : 'Step 1 of 2') : undefined}
-        />
-        {isBack ? (
-          <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: spacing.sm, marginBottom: spacing.xs }}>
-            <Icon name="credit-card" size={14} color={colors.primary} />
-            <View style={{ width: 4 }} />
-            <MyazaText variant="bodySmall" color={colors.primary} style={{ fontWeight: '500' }}>
-              Flip the card over and scan the other side
-            </MyazaText>
-          </View>
-        ) : null}
-        <View style={{ height: spacing.md }} />
-        <CameraViewfinder
+        <CameraPhase
+          isBack={isBack}
+          cameraLive={cameraLive}
           active={perm === 'granted'}
-          side={isBack ? 'back' : 'front'}
           documentLabel={documentLabel}
           guideAspect={guideAspect}
-          onCapture={(uri, videoPath) => void captureFromCamera(uri, videoPath)}
+          isTwoSided={isTwoSided}
           busy={busy}
+          allowUpload={allowUpload}
+          country={country}
+          idType={selectedIdType ?? undefined}
+          mrzAlreadyCaptured={!!mrzScan}
+          onMrz={setMrzScan}
+          onCapture={(uri, videoPath, viewAr) => void captureFromCamera(uri, videoPath, viewAr)}
+          onUpload={pickFromGallery}
+          onBack={() => store.getState().previousStep()}
+          // The camera is a TRUE full-screen modal now, so it runs under the
+          // home indicator and has to clear the real inset — the smaller value
+          // that suited the inset sheet leaves the shutter under the gesture bar.
+          bottomInset={cameraBottomInset()}
         />
-        {!busy ? (
-          <>
-            <View style={{ height: spacing.md }} />
-            <MyazaText variant="bodySmall" style={{ textAlign: 'center' }}>
-              Tap the button to capture manually
-            </MyazaText>
-            {allowUpload ? (
-              <Pressable onPress={pickFromGallery} style={{ marginTop: spacing.sm }}>
-                <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
-                  <MyazaText variant="bodySmall">Having trouble? </MyazaText>
-                  <Icon name="upload" size={14} color={colors.primary} />
-                  <View style={{ width: 4 }} />
-                  <MyazaText variant="bodySmall" color={colors.primary} style={{ fontWeight: '700' }}>
-                    Upload a photo instead
-                  </MyazaText>
-                </View>
-              </Pressable>
-            ) : null}
-          </>
-        ) : null}
-      </View>
+      </>
     );
   }
 
+
   // ── Front preview (two-sided) ──────────────────────────────────────────────
   if (phase === 'front-preview') {
     return (
@@ -404,84 +468,44 @@ export function DocumentCaptureStep(): React.ReactElement {
 
   // ── Review ─────────────────────────────────────────────────────────────────
   return (
-    <View>
-      <DocImage uri={frontUri!} label={isTwoSided ? 'Front' : undefined} uploading={uploading} />
-      <MyazaButton label="Retake" variant="ghost" leadingIcon="refresh" onPress={() => retake('front')} disabled={uploading} />
-      {isTwoSided && backUri ? (
+    <DocumentReview
+      frontUri={frontUri!}
+      backUri={isTwoSided ? backUri : null}
+      aspect={guideAspect}
+      isBusy={uploading}
+      busyOverlay={
+        // Standard upload loader — a dark scrim + the pulse-ring loader, drawn
+        // INSIDE the preview frame, mirroring the web/Flutter SDKs (and the
+        // liveness selfie review).
+        <View
+          style={{
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: 'rgba(0,0,0,0.45)',
+          }}
+        >
+          <MyazaPulseLoader size={48} />
+        </View>
+      }
+      onRetakeFront={() => retake('front')}
+      onRetakeBack={() => retake('back')}
+      footer={
         <>
-          <View style={{ height: spacing.md }} />
-          <DocImage uri={backUri} label="Back" uploading={uploading} />
-          <MyazaButton label="Retake Back" variant="ghost" leadingIcon="refresh" onPress={() => retake('back')} disabled={uploading} />
-        </>
-      ) : null}
-
-      {retryInfo && uploading ? (
-        <MyazaText variant="bodySmall" color={colors.warning} style={{ textAlign: 'center', marginTop: spacing.sm }}>
-          {`Upload failed — retrying (${retryInfo.attempt}/${retryInfo.total})…`}
-        </MyazaText>
-      ) : null}
-
-      <View style={{ height: spacing.md }} />
-      {uploadError ? (
-        // The error message is shown as a top toast; keep a retry action here.
-        <MyazaButton label="Try Again" onPress={handleContinue} loading={uploading} />
-      ) : (
-        <MyazaButton label="Continue" onPress={handleContinue} loading={uploading} />
-      )}
-    </View>
-  );
-}
-
-// "Required: {label}" pill with optional side badge + step label — mirrors the
-// Flutter SDK's _RequiredPill on the capture screen.
-function RequiredPill({
-  documentLabel,
-  sideBadge,
-  stepLabel,
-}: {
-  documentLabel: string;
-  sideBadge?: string;
-  stepLabel?: string;
-}): React.ReactElement {
-  const { colors } = useTheme();
-  return (
-    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-      <View
-        style={{
-          flex: 1,
-          flexDirection: 'row',
-          alignItems: 'center',
-          flexWrap: 'wrap',
-          borderWidth: 1,
-          borderColor: `${colors.primary}33`,
-          backgroundColor: `${colors.primary}0D`,
-          borderRadius: radius.md,
-          paddingHorizontal: spacing.sm + 4,
-          paddingVertical: spacing.sm,
-        }}
-      >
-        <Icon name="credit-card" size={16} color={colors.primary} />
-        <View style={{ width: 8 }} />
-        <MyazaText variant="bodySmall" color={colors.primary} style={{ fontWeight: '600' }}>
-          Required:{' '}
-        </MyazaText>
-        <MyazaText variant="bodySmall" color={colors.primary} style={{ flexShrink: 1 }}>
-          {documentLabel}
-        </MyazaText>
-        {sideBadge ? (
-          <View style={{ backgroundColor: `${colors.primary}26`, borderRadius: radius.full, paddingHorizontal: 8, paddingVertical: 2, marginLeft: 8 }}>
-            <MyazaText variant="bodySmall" color={colors.primary} style={{ fontWeight: '600', fontSize: 11 }}>
-              {sideBadge}
+          {retryInfo && uploading ? (
+            <MyazaText variant="bodySmall" color={colors.warning} style={{ textAlign: 'center', marginBottom: spacing.sm }}>
+              {`Upload failed — retrying (${retryInfo.attempt}/${retryInfo.total})…`}
             </MyazaText>
-          </View>
-        ) : null}
-      </View>
-      {stepLabel ? (
-        <MyazaText variant="bodySmall" color={colors.textMuted} style={{ marginLeft: spacing.sm }}>
-          {stepLabel}
-        </MyazaText>
-      ) : null}
-    </View>
+          ) : null}
+          {uploadError ? (
+            // The error message is shown as a top toast; keep a retry action here.
+            <MyazaButton label="Try Again" onPress={handleContinue} loading={uploading} />
+          ) : (
+            <MyazaButton label="Continue" onPress={handleContinue} loading={uploading} />
+          )}
+        </>
+      }
+    />
   );
 }
 

package/src/screens/IdInputStep.tsx

@@ -5,7 +5,7 @@ import { spacing } from '../config/theme';
 import { ID_TYPES } from '../config/idTypes';
 import { validateIdNumber } from '../services/validators';
 import type { IdType } from '../types/config';
-import { useKyc, useKycConfig } from '../components/runtime';
+import { useEffectiveCountry, useKyc, useKycConfig } from '../components/runtime';
 import { MyazaText } from '../components/Typography';
 import { MyazaInput } from '../components/MyazaInput';
 import { MyazaButton } from '../components/MyazaButton';
@@ -24,11 +24,16 @@ function hintFor(def: { label: string; inputLabel?: string; digits?: number } |
 
 export function IdInputStep(): React.ReactElement {
   const config = useKycConfig();
+  const country = useEffectiveCountry();
   const selectedIdType = useKyc((s) => s.selectedIdType);
+  const storedIdNumber = useKyc((s) => s.idNumber);
   const setIdNumber = useKyc((s) => s.setIdNumber);
   const nextStep = useKyc((s) => s.nextStep);
 
-  const [value, setValue] = useState('');
+  // Seeded from the store so a back-and-forward through the flow never loses
+  // what was already typed — everything persists until submission, or until
+  // the user themselves changes it (mirrors web + Flutter).
+  const [value, setValue] = useState(storedIdNumber ?? '');
   const [error, setError] = useState<string | null>(null);
 
   const def = useMemo(() => Object.values(ID_TYPES).flat().find((t) => t.key === selectedIdType) ?? null, [selectedIdType]);
@@ -36,15 +41,18 @@ export function IdInputStep(): React.ReactElement {
 
   const valid = useMemo(() => {
     if (!selectedIdType || !value.trim()) return false;
-    return validateIdNumber(config.country, selectedIdType as IdType, value).valid;
-  }, [config.country, selectedIdType, value]);
+    return validateIdNumber(country, selectedIdType as IdType, value).valid;
+  }, [country, selectedIdType, value]);
 
   const handleChange = (text: string) => {
     // Match Flutter: BVN/NIN are digits-only.
     const next = isDigits ? text.replace(/[^0-9]/g, '') : text;
     setValue(next);
+    // Write-through to the store as they type — a back-swipe mid-entry must
+    // not cost them the digits they already entered.
+    setIdNumber(next);
     if (selectedIdType && next.trim()) {
-      const result = validateIdNumber(config.country, selectedIdType as IdType, next);
+      const result = validateIdNumber(country, selectedIdType as IdType, next);
       setError(result.valid ? null : result.message ?? null);
     } else {
       setError(null);

package/src/screens/IdTypeStep.tsx

@@ -2,16 +2,35 @@ import React, { useMemo } from 'react';
 import { Pressable, View } from 'react-native';
 
 import { radius, spacing } from '../config/theme';
-import { ID_TYPES } from '../config/idTypes';
+import { ID_TYPES, resolveIdTypeDefinition } from '../config/idTypes';
 import type { IdType, IdTypeDefinition } from '../types/config';
-import { useKyc, useKycConfig, useTheme } from '../components/runtime';
+import {
+  useEffectiveCountry,
+  useKyc,
+  useKycConfig,
+  useKycStore,
+  useTheme,
+} from '../components/runtime';
 import { MyazaText } from '../components/Typography';
-import { MyazaButton } from '../components/MyazaButton';
 import { MyazaPulseLoader } from '../components/MyazaPulseLoader';
 import { Icon, type IconName } from '../components/Icon';
 
 // ID-type picker — 1:1 with the Flutter SDK's IdTypeScreen: a list of cards
-// (icon tile + label + radio circle), select-on-tap, Continue to advance.
+// (icon tile + label + forward chevron) that ADVANCE ON TAP.
+//
+// No Continue button and no radio, matching Flutter and the web SDK. It is a
+// single-select list with nothing else on the step to confirm, so Continue only
+// restated a decision already made; and country-select already advances on tap,
+// so a second list that behaved differently taught users one rule then broke
+// it. A mis-tap costs one Back. The affordance is therefore a "go to the next
+// step" chevron — a radio would imply a select-then-confirm this flow does not
+// have.
+//
+// The advance reads the TAPPED value through the store, never the
+// `selectedIdType` bound at render: that closure is a step behind inside the
+// handler (and empty on the first selection), which would route a document ID
+// to the number-only step. Going through `store.getState()` is what makes the
+// write visible to `nextStep()`, since zustand commits synchronously.
 
 const ICON_FOR: Record<string, IconName> = {
   bvn: 'landmark', // Bank Verification Number → bank/landmark
@@ -31,25 +50,54 @@ const ICON_FOR: Record<string, IconName> = {
 export function IdTypeStep(): React.ReactElement {
   const { colors } = useTheme();
   const config = useKycConfig();
+  const country = useEffectiveCountry();
+  const store = useKycStore();
   const serverConfig = useKyc((s) => s.serverConfig);
   const selectedIdType = useKyc((s) => s.selectedIdType);
-  const setIdType = useKyc((s) => s.setIdType);
-  const nextStep = useKyc((s) => s.nextStep);
+
+  // Select AND advance in one tap. Both go through the store so `nextStep`
+  // routes off the value just written — a document ID to document-capture, a
+  // number-only ID to id-input.
+  const pick = (key: IdType): void => {
+    store.getState().setIdType(key);
+    store.getState().nextStep();
+  };
 
   const available = useMemo<IdTypeDefinition[]>(() => {
-    const allForCountry = ID_TYPES[config.country] ?? [];
-    const requested = config.idTypes?.length
-      ? allForCountry.filter((t) => (config.idTypes as IdType[]).includes(t.key))
-      : [...allForCountry];
+    // In a multi-region flow the PICKED country's own `idTypes` narrow the
+    // list; otherwise the top-level prop applies. Absent or empty means every
+    // granted type, which is the server's own "unset = all" semantic.
+    const perCountry = (config.countries ?? []).find(
+      (e) => e.country.toUpperCase() === country.toUpperCase(),
+    )?.idTypes;
+    const keys = (perCountry?.length ? perCountry : config.idTypes) as
+      | readonly string[]
+      | undefined;
+    const allowed = (key: string): boolean => !keys?.length || keys.includes(key);
+
+    // Built from the SERVER rows, not the curated table. The curated table only
+    // knows the five gov-DB countries; a Global-Documents flow offers ~240, and
+    // filtering against the table rendered an empty list — "no ID types are
+    // enabled" — for every country outside it. The row carries the label and
+    // capture shape, so an uncurated country renders correctly from it.
     if (serverConfig.status === 'ready') {
-      const granted = new Set(
-        serverConfig.idTypes.filter((t) => t.country === config.country).map((t) => t.idType),
-      );
-      return requested.filter((t) => granted.has(t.key));
+      return serverConfig.idTypes
+        .filter((row) => row.country === country && allowed(row.idType))
+        .map((row) =>
+          resolveIdTypeDefinition(country, row.idType, {
+            label: row.label,
+            requiresDocumentCapture: row.requiresDocumentCapture,
+            scanSides: row.scanSides,
+            supportsNfc: row.supportsNfc,
+          }),
+        );
     }
     if (serverConfig.status === 'loading') return [];
-    return requested;
-  }, [config.country, config.idTypes, serverConfig]);
+    // Config failed to load: fall back to the curated list. The server still
+    // rejects anything actually disabled, so this is permissive, not unsafe.
+    const table = ID_TYPES as Record<string, readonly IdTypeDefinition[] | undefined>;
+    return (table[country.toUpperCase()] ?? []).filter((t) => allowed(t.key));
+  }, [country, config.idTypes, config.countries, serverConfig]);
 
   if (serverConfig.status === 'loading') {
     return (
@@ -84,7 +132,9 @@ export function IdTypeStep(): React.ReactElement {
         return (
           <Pressable
             key={t.key}
-            onPress={() => setIdType(t.key)}
+            onPress={() => pick(t.key)}
+            accessibilityRole="button"
+            accessibilityLabel={t.label}
             style={{
               marginBottom: spacing.sm,
               borderRadius: radius.md,
@@ -118,25 +168,16 @@ export function IdTypeStep(): React.ReactElement {
               {t.label}
             </MyazaText>
             <View style={{ width: spacing.md }} />
-            <View
-              style={{
-                width: 22,
-                height: 22,
-                borderRadius: 11,
-                borderWidth: 1.5,
-                borderColor: selected ? colors.primary : colors.gray300,
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}
-            >
-              {selected ? <View style={{ width: 12, height: 12, borderRadius: 6, backgroundColor: colors.primary }} /> : null}
-            </View>
+            {/* Forward chevron, not a radio: the tap advances, so the icon has
+                to promise the next step rather than a pending confirmation. */}
+            <Icon
+              name="chevron-right"
+              size={20}
+              color={selected ? colors.primary : colors.gray400}
+            />
           </Pressable>
         );
       })}
-
-      <View style={{ height: spacing.lg }} />
-      <MyazaButton label="Continue" onPress={selectedIdType ? nextStep : undefined} disabled={!selectedIdType} />
     </View>
   );
 }