@myazahq/kyc-sdk-react-native 3.0.0 → 3.1.0

package/src/config/supportingDocuments.ts

@@ -0,0 +1,131 @@
+import type { SupportingDocumentsConfig } from '../types/workflow';
+
+// Which supporting documents this flow asks for, given the ID the person
+// actually verified with.
+//
+// MIRROR of the server's `requestedSupportingDocuments`
+// (kyc-core src/lib/workflows/supporting-documents-config.ts) and of the web
+// SDK's lib/supporting-documents.ts. Three copies of one rule: the mobile SDKs
+// cannot import the web package, so a change here changes all three in the
+// same commit. The server VALIDATES what the client produced, so a client that
+// resolved differently just builds submissions the server refuses.
+//
+// There is no catalogue to mirror: a document is whatever the ORG named it, so
+// the SDK renders the title and guidance the workflow sent rather than
+// captioning a key it recognises.
+
+export interface RequestedSupportingDocument {
+  key: string;
+  label: string;
+  /** Guidance under the slot, when the author wrote some. */
+  description: string | null;
+  required: boolean;
+  /**
+   * The names of the values the server will read off it, for the card to show.
+   *
+   * DISPLAY ONLY, and deliberately not a mirror of the server's own field
+   * resolution: it drops blanks and repeats and stops there. The server decides
+   * what is actually read, and an extra name on a chip costs an applicant
+   * nothing.
+   */
+  reads: string[];
+}
+
+/** The names on one document's fields: what the applicant is told we read. */
+function documentReads(fields: Array<{ label?: string }> | undefined): string[] {
+  const seen = new Set<string>();
+  const out: string[] = [];
+  for (const field of fields ?? []) {
+    const label = field.label?.trim();
+    if (!label || seen.has(label.toLowerCase())) continue;
+    seen.add(label.toLowerCase());
+    out.push(label);
+  }
+  return out;
+}
+
+/** `${country}/${idType}` — the composite a document's `idTypes` is written in. */
+export function idComposite(country: string, idType: string): string {
+  return `${country.trim().toUpperCase()}/${idType.trim()}`;
+}
+
+/**
+ * The documents to ask for. An empty result means the step does not appear:
+ * a document that exists only because the person used a particular ID must not
+ * be put in front of somebody who used another.
+ */
+export function resolveSupportingDocuments(
+  config: SupportingDocumentsConfig | undefined | null,
+  verifiedIds: string[],
+): RequestedSupportingDocument[] {
+  if (!config?.enabled) return [];
+  const wanted = new Set(verifiedIds.map((id) => id.toUpperCase()));
+  const seen = new Set<string>();
+  const out: RequestedSupportingDocument[] = [];
+  for (const entry of config.types ?? []) {
+    const label = entry.label?.trim();
+    // A nameless slot reaches nobody. Publish refuses one, so this only ever
+    // bites a draft mid-edit.
+    if (!label) continue;
+    const scoped = entry.idTypes && entry.idTypes.length > 0;
+    const inScope =
+      !scoped || entry.idTypes!.some((id) => wanted.has(id.trim().toUpperCase()));
+    // `alwaysAsk` keeps the slot on screen for everybody, so the scope decides
+    // only who must fill it: an out-of-scope applicant may hand the document
+    // over and is never blocked for not having one.
+    if (!inScope && entry.alwaysAsk !== true) continue;
+    if (seen.has(entry.key)) continue;
+    seen.add(entry.key);
+    out.push({
+      key: entry.key,
+      label,
+      description: entry.description?.trim() || null,
+      required: entry.required === true && inScope,
+      reads: documentReads(entry.fields),
+    });
+  }
+  return out;
+}
+
+/** The composites this attempt has committed — one per ID, multi-ID included. */
+export function verifiedIdsFor(input: {
+  country?: string | null;
+  idType?: string | null;
+  multiIdSlots?: Array<{ idType: string }>;
+}): string[] {
+  if (!input.country) return [];
+  const slots = input.multiIdSlots ?? [];
+  const ids = slots.length > 0 ? slots.map((s) => s.idType) : input.idType ? [input.idType] : [];
+  return [...new Set(ids.map((id) => idComposite(input.country!, id)))];
+}
+
+/**
+ * Whether the flow may ask for a supporting document AT ALL.
+ *
+ * The CONSENT screen's question, deliberately not the step order's.
+ * `hasSupportingDocumentsStep` resolves against the VERIFIED IDS, and consent
+ * runs before an ID is picked — so every SCOPED document answers "nothing to
+ * ask for" there, and a slip scoped to one ID (the commonest case there is)
+ * would go undisclosed.
+ *
+ * Consent is a DISCLOSURE of what MAY be collected: an applicant seeing a
+ * bullet for paperwork they are never asked for is the cheap error, and being
+ * asked for undisclosed paperwork is the real one.
+ *
+ * Still not a raw field check — a disabled step and a nameless entry each
+ * promise nothing, the same two gates the resolver applies.
+ */
+export function mayAskSupportingDocuments(
+  config: SupportingDocumentsConfig | undefined | null,
+): boolean {
+  if (!config?.enabled) return false;
+  return (config.types ?? []).some((entry) => (entry.label ?? '').trim().length > 0);
+}
+
+/** Whether the step has anything to ask for on this attempt. */
+export function hasSupportingDocumentsStep(
+  config: SupportingDocumentsConfig | undefined | null,
+  verifiedIds: string[],
+): boolean {
+  return resolveSupportingDocuments(config, verifiedIds).length > 0;
+}

package/src/config/theme.ts

@@ -161,6 +161,22 @@ function toHex({ r, g, b }: Rgb): string {
 }
 
 /** Alpha-blends `fg` over `bg` at opacity `alpha` (0–1). */
+/**
+ * `color` at `alpha`, as an 8-digit hex React Native composites itself.
+ *
+ * Falls back to blending against `fallbackBg` when the colour is not hex (an
+ * `rgb()` or a named colour), which is the old behaviour rather than a crash.
+ */
+function withAlpha(color: string, alpha: number, fallbackBg: string): string {
+  const parsed = parseHex(color);
+  if (!parsed) return alphaBlend(color, fallbackBg, alpha);
+  const byte = Math.round(Math.min(Math.max(alpha, 0), 1) * 255)
+    .toString(16)
+    .padStart(2, '0');
+  const hex = (n: number) => Math.round(n).toString(16).padStart(2, '0');
+  return `#${hex(parsed.r)}${hex(parsed.g)}${hex(parsed.b)}${byte}`;
+}
+
 function alphaBlend(fg: string, bg: string, alpha: number): string {
   const f = parseHex(fg);
   const b = parseHex(bg);
@@ -197,9 +213,19 @@ export function applyAppearance(
 
   if (appearance.primaryColor) {
     next.primary = appearance.primaryColor;
-    next.primary50 = alphaBlend(appearance.primaryColor, background, 0.04);
-    next.primary100 = alphaBlend(appearance.primaryColor, background, 0.1);
-    next.primary200 = alphaBlend(appearance.primaryColor, background, 0.2);
+    // Real alpha, not a pre-blend. These tints are drawn on several different
+    // surfaces - the sheet, a card, a pill - and pre-blending has to guess ONE
+    // of them. It guessed `background`, so on a card (backgroundSecondary) the
+    // 10% tint landed within 3/255 of the card it sat on and the supporting
+    // documents step drew its numbered markers invisibly (user report
+    // 2026-09-25). Carrying the alpha lets each one composite against whatever
+    // it is actually on, which is what the web SDK's `bg-primary/10` does and
+    // why it never had this bug. On `background` the result matches the old
+    // pre-blend to within 1/255 - an alpha byte cannot hold 0.1 exactly - so
+    // nothing that was already correct moves perceptibly.
+    next.primary50 = withAlpha(appearance.primaryColor, 0.04, background);
+    next.primary100 = withAlpha(appearance.primaryColor, 0.1, background);
+    next.primary200 = withAlpha(appearance.primaryColor, 0.2, background);
   }
   if (appearance.accentColor) {
     next.primary100 = appearance.accentColor;

package/src/config/workflowMerge.ts

@@ -45,6 +45,7 @@ export const WORKFLOW_KEYS = [
   'phoneVerification',
   'questionnaire',
   'proofOfAddress',
+  'supportingDocuments',
   'addressCollection',
   'nfc',
   // Set only on a session a reviewer sent back, never on a published flow.
@@ -85,6 +86,18 @@ export function mergeWorkflowConfig<P extends Record<string, unknown>>(
     }
   }
 
+  // A multi-region flow declares its ID offering inside countries[], where a
+  // country pinning nothing already means "every granted ID for that country",
+  // and leaves the top-level list unset. The consumer's prop must not survive
+  // there: IdTypeStep falls back to the top-level list for a country that pins
+  // none of its own, so a hardcoded ['bvn','nin','passport'] silently reduced a
+  // 58-country flow to three NG types. A flow that sets its OWN top-level list
+  // still wins, so single-country flows are untouched.
+  const flowCountries = flowConfig['countries'];
+  if (flowConfig['idTypes'] === undefined && Array.isArray(flowCountries) && flowCountries.length > 0) {
+    delete merged['idTypes'];
+  }
+
   // Business (KYB) workflows carry no top-level country — fall back to the
   // registry country so downstream code that expects one never sees undefined.
   // The business submission reads business.country anyway.

package/src/lib/supportingDocumentsIntro.ts

@@ -0,0 +1,35 @@
+/**
+ * The line under "Supporting documents", from what the flow is actually
+ * asking for.
+ *
+ * It used to be one sentence about keeping documents on file plus a note that
+ * required ones are marked with an asterisk — which tells somebody how to read
+ * the screen rather than what is being asked of them, and the asterisk carries
+ * no information at all when every document is required. The counts are what
+ * a person wants: how many they have to produce before they can go on.
+ *
+ * MIRRORS the web SDK's supportingDocumentsIntro. Keep the wording in step.
+ */
+export function supportingDocumentsIntro(
+  slots: ReadonlyArray<{ required: boolean }>,
+): string {
+  const total = slots.length;
+  const required = slots.filter((slot) => slot.required).length;
+
+  // Nothing is compulsory, so the honest line is that the step can be skipped.
+  if (required === 0) {
+    return total === 1
+      ? 'Upload this document if you have it, so we can keep it on file. You can skip it.'
+      : 'Upload any of these you have, so we can keep them on file. You can skip the rest.';
+  }
+
+  if (required === total) {
+    return total === 1
+      ? 'We need this document to continue. Upload it below.'
+      : `We need all ${total} of these documents to continue. Upload one for each item below.`;
+  }
+
+  // Mixed, and the only case where the asterisk earns its place on the screen.
+  // The noun agrees with the TOTAL, which is always two or more here.
+  return `We need ${required} of these ${total} documents to continue, marked with *. Upload the others if you have them.`;
+}

package/src/screens/BusinessDocumentSlot.tsx

@@ -64,6 +64,7 @@ function UploadedThumb({ previewUri, isPdf }: { previewUri: string | null; isPdf
 
 export function BusinessDocumentSlot({
   label,
+  description = null,
   required,
   fileName,
   uploading,
@@ -71,8 +72,16 @@ export function BusinessDocumentSlot({
   isPdf = false,
   onPick,
   onRemove,
+  compact = false,
 }: {
   label: string;
+  /**
+   * Guidance the organisation wrote: which document, and what it has to show.
+   * Optional because the business-documents step names a fixed catalogue the
+   * applicant already recognises; a supporting document is whatever the org
+   * called it, so this is often the only thing that makes it findable.
+   */
+  description?: string | null;
   required: boolean;
   /** Uploaded file name, when this slot already has a mediaId. */
   fileName: string | null;
@@ -83,6 +92,15 @@ export function BusinessDocumentSlot({
   /** Open the photo/file source sheet (also serves Replace). */
   onPick: () => void;
   onRemove: () => void;
+  /**
+   * The slot is the FOOTER of a card that already names the document.
+   *
+   * So it drops everything the card above it has already said — the label
+   * echo, the required star, the guidance — and its own bottom margin, and
+   * the empty state reads "Upload <document>" rather than repeating the title.
+   * Mirrors the Flutter slot's `compact`.
+   */
+  compact?: boolean;
 }): React.ReactElement {
   const { colors } = useTheme();
 
@@ -97,7 +115,7 @@ export function BusinessDocumentSlot({
           borderRadius: radius.sm,
           backgroundColor: colors.backgroundSecondary,
           padding: spacing.md,
-          marginBottom: spacing.sm + 4,
+          marginBottom: compact ? 0 : spacing.sm + 4,
         }}
       >
         <UploadedThumb previewUri={previewUri} isPdf={isPdf} />
@@ -106,9 +124,11 @@ export function BusinessDocumentSlot({
           <MyazaText variant="label" style={{ fontWeight: '600' }} numberOfLines={1}>
             {fileName}
           </MyazaText>
-          <MyazaText variant="bodySmall" color={colors.textMuted}>
-            {label}
-          </MyazaText>
+          {compact ? null : (
+            <MyazaText variant="bodySmall" color={colors.textMuted}>
+              {label}
+            </MyazaText>
+          )}
         </View>
         <Pressable onPress={onPick} hitSlop={8} accessibilityRole="button">
           <MyazaText variant="bodySmall" color={colors.primary} style={{ fontWeight: '600' }}>
@@ -138,7 +158,7 @@ export function BusinessDocumentSlot({
         alignItems: 'center',
         borderRadius: radius.sm,
         padding: spacing.md,
-        marginBottom: spacing.sm + 4,
+        marginBottom: compact ? 0 : spacing.sm + 4,
         opacity: uploading ? 0.7 : 1,
       }}
     >
@@ -150,14 +170,23 @@ export function BusinessDocumentSlot({
       )}
       <View style={{ width: spacing.sm + 4 }} />
       <View style={{ flex: 1, minWidth: 0 }}>
-        <MyazaText variant="label" style={{ fontWeight: '600' }} numberOfLines={1}>
-          {label}
-          {required ? (
+        <MyazaText variant="label" style={{ fontWeight: '600' }} numberOfLines={2}>
+          {compact ? `Upload ${label.toLowerCase()}` : label}
+          {required && !compact ? (
             <MyazaText variant="label" color={colors.error} style={{ fontWeight: '600' }}>
               {' *'}
             </MyazaText>
           ) : null}
         </MyazaText>
+        {description && !uploading && !compact ? (
+          <MyazaText
+            variant="bodySmall"
+            color={colors.textDark}
+            style={{ marginTop: 2, opacity: 0.75 }}
+          >
+            {description}
+          </MyazaText>
+        ) : null}
         <MyazaText variant="bodySmall" color={colors.textMuted}>
           {uploading ? 'Uploading…' : UPLOAD_HINT}
         </MyazaText>

package/src/screens/SupportingDocumentCard.tsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { radius, spacing } from '../config/theme';
+import { useTheme } from '../components/runtime';
+import { MyazaText } from '../components/Typography';
+import { BusinessDocumentSlot } from './BusinessDocumentSlot';
+import {
+  DocumentMarker,
+  DocumentReads,
+  DocumentStatePill,
+} from './supportingDocumentParts';
+
+// ---------------------------------------------------------------------------
+// One requested supporting document: what it is, what it is being taken FOR,
+// and the upload that satisfies it.
+//
+// The middle part is the point. A supporting document is whatever the
+// organisation named it, so an upload slot with a title on it tells the
+// applicant almost nothing; naming the values that will be read off it says
+// what the document is actually for, and is the honest thing to show somebody
+// before they hand over a bank statement.
+//
+// MIRRORS the web SDK's SupportingDocumentCard and the Flutter one. Keep the
+// three in step.
+// ---------------------------------------------------------------------------
+
+export function SupportingDocumentCard({
+  position,
+  total,
+  label,
+  description,
+  required,
+  reads,
+  fileName,
+  uploading,
+  previewUri = null,
+  isPdf = false,
+  error = null,
+  onPick,
+  onRemove,
+}: {
+  /** 1-based, so the list reads as a checklist rather than a pile. */
+  position: number;
+  total: number;
+  label: string;
+  /** Guidance the organisation wrote: which document, and what it has to show. */
+  description: string | null;
+  required: boolean;
+  /** The named values the server will read off it, in the author's words. */
+  reads: readonly string[];
+  fileName: string | null;
+  uploading: boolean;
+  previewUri?: string | null;
+  isPdf?: boolean;
+  error?: string | null;
+  onPick: () => void;
+  onRemove: () => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  const done = fileName !== null && !uploading;
+
+  return (
+    <View
+      accessibilityLabel={label}
+      style={{
+        marginBottom: spacing.md,
+        borderWidth: 1,
+        borderRadius: radius.md,
+        overflow: 'hidden',
+        // The card is the LIFTED surface and the wells inside it are the page
+        // colour — the web SDK's arrangement (a `bg-secondary` card over a
+        // `bg-background` well), which Flutter also takes.
+        backgroundColor: done ? colors.primary50 : colors.backgroundSecondary,
+        borderColor: done ? colors.primary200 : colors.border,
+      }}
+    >
+      <View style={{ padding: spacing.md }}>
+        <View style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
+          <DocumentMarker done={done} position={position} total={total} />
+          <View style={{ width: spacing.sm + 4 }} />
+          <View style={{ flex: 1, minWidth: 0 }}>
+            <MyazaText variant="label" style={{ fontWeight: '600' }}>
+              {label}
+            </MyazaText>
+            {description ? (
+              <MyazaText
+                variant="bodySmall"
+                color={colors.textDark}
+                style={{ marginTop: 4, opacity: 0.75 }}
+              >
+                {description}
+              </MyazaText>
+            ) : null}
+          </View>
+          <View style={{ width: spacing.sm }} />
+          <DocumentStatePill required={required} />
+        </View>
+
+        {reads.length > 0 ? (
+          <>
+            <View style={{ height: spacing.sm + 4 }} />
+            <DocumentReads reads={reads} />
+          </>
+        ) : null}
+      </View>
+
+      <View style={{ height: 1, backgroundColor: colors.border }} />
+
+      <View style={{ padding: spacing.sm + 4 }}>
+        <BusinessDocumentSlot
+          label={label}
+          required={required}
+          fileName={fileName}
+          uploading={uploading}
+          previewUri={previewUri}
+          isPdf={isPdf}
+          onPick={onPick}
+          onRemove={onRemove}
+          compact
+        />
+        {error ? (
+          <MyazaText
+            variant="bodySmall"
+            color={colors.error}
+            style={{ marginTop: spacing.sm }}
+          >
+            {error}
+          </MyazaText>
+        ) : null}
+      </View>
+    </View>
+  );
+}

package/src/screens/SupportingDocumentsStep.tsx

@@ -0,0 +1,203 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { View } from 'react-native';
+
+import { spacing } from '../config/theme';
+import { useKyc, useKycConfig, useKycStore, useTheme } from '../components/runtime';
+import { MyazaText } from '../components/Typography';
+import { MyazaButton } from '../components/MyazaButton';
+import { MediaSourceSheet } from '../components/MediaSourceSheet';
+import { SupportingDocumentCard } from './SupportingDocumentCard';
+import { withRetry } from '../services/retry';
+import { compressDocumentImage } from '../services/mediaCompress';
+import {
+  resolveSupportingDocuments,
+  verifiedIdsFor,
+  type RequestedSupportingDocument,
+} from '../config/supportingDocuments';
+import { useBusinessDocumentAttach } from './useBusinessDocumentAttach';
+import { supportingDocumentsIntro } from '../lib/supportingDocumentsIntro';
+
+// ---------------------------------------------------------------------------
+// Supporting documents — artefacts the organisation keeps ON FILE.
+//
+// These are NOT the identity evidence this verification is decided on. The
+// person has already been checked against the government record by the time
+// they reach this screen, so a document that cannot be read costs them
+// nothing: the server records it and the verification stands on the lookup.
+//
+// WHICH documents are asked for depends on the ID they picked (a document may
+// exist only because they used a particular ID), so the screen is only in the
+// order when that resolution produced something — see store/derive.ts.
+//
+// Layout mirrors the web SDK's SupportingDocumentCard and the Flutter one 1:1:
+// a card per document naming what it is being taken FOR, over the same source
+// sheet and the same Continue rule as the business-documents screen.
+// ---------------------------------------------------------------------------
+
+/** The header, from the slots the flow actually resolved for this applicant.
+ *  A function because the line carries the COUNTS: how many documents have to
+ *  be produced before they can go on. */
+export const supportingDocumentsMeta = (
+  slots: ReadonlyArray<{ required: boolean }>,
+): { title: string; description: string } => ({
+  title: 'Supporting documents',
+  description: supportingDocumentsIntro(slots),
+});
+
+export function SupportingDocumentsStep(): React.ReactElement {
+  const config = useKycConfig();
+  const store = useKycStore();
+  const { colors } = useTheme();
+  const uploaded = useKyc((s) => s.supportingDocuments);
+  const selectedCountry = useKyc((s) => s.selectedCountry);
+  const selectedIdType = useKyc((s) => s.selectedIdType);
+  const multiIdSlots = useKyc((s) => s.multiIdSlots);
+  const [busySlot, setBusySlot] = useState<string | null>(null);
+  const [pickingSlot, setPickingSlot] = useState<RequestedSupportingDocument | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  // Which card the message belongs to. A failed upload is about ONE document
+  // and reads as noise anywhere else; a picker error belongs to no card and
+  // keeps its place under the list.
+  const [errorSlot, setErrorSlot] = useState<string | null>(null);
+
+  const slots = useMemo(
+    () =>
+      resolveSupportingDocuments(
+        config.supportingDocuments,
+        verifiedIdsFor({
+          country: selectedCountry ?? config.country,
+          idType: selectedIdType,
+          multiIdSlots,
+        }),
+      ),
+    [config.supportingDocuments, config.country, selectedCountry, selectedIdType, multiIdSlots],
+  );
+  const missing = slots.filter((s) => s.required && !uploaded.some((d) => d.type === s.key));
+
+  const attach = useCallback(
+    async (slot: RequestedSupportingDocument, uri: string, mimeType: string | undefined, name: string) => {
+      setBusySlot(slot.key);
+      setError(null);
+      setErrorSlot(null);
+      try {
+        // A PDF is passed through untouched — re-encoding would destroy the
+        // text the server reads off it.
+        const isPdf = (mimeType ?? '').toLowerCase().startsWith('application/pdf');
+        const finalUri = isPdf ? uri : await compressDocumentImage(uri).catch(() => uri);
+        const mediaId = await withRetry(() =>
+          store.getState().api.upload({ uri: finalUri, type: mimeType, name }, 'supporting_document'),
+        );
+        store.getState().setSupportingDocument({
+          type: slot.key,
+          mediaId,
+          fileName: name,
+          // Seeing the file back is how somebody catches the wrong photo from
+          // the camera roll before submitting. A PDF has no preview to show.
+          ...(isPdf ? { isPdf: true } : { previewUri: finalUri }),
+        });
+      } catch {
+        setError(`We could not upload ${slot.label.toLowerCase()}. Please try again.`);
+        setErrorSlot(slot.key);
+      } finally {
+        setBusySlot(null);
+      }
+    },
+    [store],
+  );
+
+  // A picker failure belongs to no card, so it clears the slot the last upload
+  // error was pinned to — otherwise it would surface under an unrelated
+  // document.
+  const reportPickerError = useCallback((message: string | null) => {
+    setErrorSlot(null);
+    setError(message);
+  }, []);
+
+  const { takePhoto, choosePhoto, chooseFile } = useBusinessDocumentAttach(attach, reportPickerError);
+
+  const handleContinue = (): void => {
+    if (missing.length > 0 || busySlot !== null) return;
+    store.getState().nextStep();
+  };
+
+  const optionalOnly = slots.every((slot) => !slot.required);
+
+  return (
+    <View>
+      {slots.map((slot, i) => {
+        const doc = uploaded.find((d) => d.type === slot.key);
+        return (
+          <SupportingDocumentCard
+            key={slot.key}
+            position={i + 1}
+            total={slots.length}
+            label={slot.label}
+            description={slot.description}
+            required={slot.required}
+            reads={slot.reads}
+            fileName={doc?.fileName ?? null}
+            uploading={busySlot === slot.key}
+            previewUri={doc?.previewUri ?? null}
+            isPdf={doc?.isPdf ?? false}
+            error={errorSlot === slot.key ? error : null}
+            onPick={() => setPickingSlot(slot)}
+            onRemove={() => store.getState().removeSupportingDocument(slot.key)}
+          />
+        );
+      })}
+
+      {error && errorSlot === null ? (
+        <MyazaText variant="bodySmall" color={colors.error} style={{ marginBottom: spacing.sm }}>
+          {error}
+        </MyazaText>
+      ) : null}
+
+      <View style={{ height: spacing.xs }} />
+      <MyazaButton
+        label={optionalOnly && uploaded.length === 0 ? 'Skip' : 'Continue'}
+        onPress={handleContinue}
+        disabled={missing.length > 0 || busySlot !== null}
+      />
+
+      {/* THE SAME sheet as Proof of Address and the business documents, so
+          uploading a document feels the same everywhere in the flow. */}
+      <MediaSourceSheet
+        open={pickingSlot !== null}
+        title="Upload your document"
+        onClose={() => setPickingSlot(null)}
+        options={[
+          {
+            icon: 'image',
+            label: 'Photo library',
+            caption: 'Pick a photo you already have',
+            onPress: () => {
+              const slot = pickingSlot;
+              setPickingSlot(null);
+              if (slot) void choosePhoto(slot);
+            },
+          },
+          {
+            icon: 'camera',
+            label: 'Take a photo',
+            caption: 'Photograph the document now',
+            onPress: () => {
+              const slot = pickingSlot;
+              setPickingSlot(null);
+              if (slot) void takePhoto(slot);
+            },
+          },
+          {
+            icon: 'file-text',
+            label: 'Choose a file',
+            caption: 'A PDF or image from your files',
+            onPress: () => {
+              const slot = pickingSlot;
+              setPickingSlot(null);
+              if (slot) void chooseFile(slot);
+            },
+          },
+        ]}
+      />
+    </View>
+  );
+}