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

package/src/screens/BusinessSearch.tsx

@@ -0,0 +1,199 @@
+import React, { useEffect, useState } from 'react';
+import { Pressable, View } from 'react-native';
+
+import { MyazaAlert } from '../components/MyazaAlert';
+import { MyazaButton } from '../components/MyazaButton';
+import { MyazaInput } from '../components/MyazaInput';
+import { MyazaSelect } from '../components/MyazaSelect';
+import { MyazaText } from '../components/Typography';
+import { Icon } from '../components/Icon';
+import { BusinessSearchResults } from './BusinessSearchResults';
+import { useKyc, useKycStore, useTheme } from '../components/runtime';
+import { spacing } from '../config/theme';
+import type { BusinessSearchHit } from '../services/api';
+
+// ─── Finding the company by name, because that is what people know ───────────
+//
+// A registration number is on a certificate in a drawer; the name is in the
+// applicant's head. Asking for the number first turns the very first field
+// into a search of their own filing cabinet, which is where KYB applications
+// are abandoned.
+//
+// The search itself is FREE and read-only; only picking a result leads to the
+// paid register check. It fires on an explicit submit, never on keystroke: a
+// debounce spends the register's small, uncontracted rate-limit budget on
+// every prefix nobody asked for. Sizes and rhythm mirror the web SDK's
+// BusinessSearch (12px block gaps, 48px input/button) — keep them in lockstep.
+
+type SearchState =
+  | { phase: 'idle' }
+  | { phase: 'searching' }
+  | { phase: 'results'; hits: BusinessSearchHit[]; truncated: boolean }
+  | { phase: 'unavailable' };
+
+export function BusinessSearch({
+  country,
+  onPicked,
+  onManualEntry,
+}: {
+  country: string;
+  onPicked: (hit: BusinessSearchHit) => void;
+  onManualEntry: () => void;
+}): React.ReactElement {
+  const store = useKycStore();
+  const { colors } = useTheme();
+  const region = useKyc((s) => s.business.subdivisionCode);
+  const [query, setQuery] = useState('');
+  // Narrows what came back; it never replaces the search. Matches the name AND
+  // the number — a box inviting either that answered only one looked broken.
+  const [filter, setFilter] = useState('');
+  const [state, setState] = useState<SearchState>({ phase: 'idle' });
+  // Four countries file companies per state or emirate, and the provider
+  // searches ONE register at a time. Without the region it fails closed —
+  // a company filed a state away would otherwise come back "not registered".
+  const [regions, setRegions] = useState<{ code: string; name: string }[]>([]);
+
+  useEffect(() => {
+    let cancelled = false;
+    setRegions([]);
+    if (!country) return undefined;
+    store
+      .getState()
+      .api.businessRegions(country)
+      .then((r) => {
+        if (!cancelled) setRegions(r.regions ?? []);
+      })
+      // An empty list means "do not ask" — also the safe answer when the
+      // catalogue is unreachable: the search itself says so on its own.
+      .catch(() => undefined);
+    return () => {
+      cancelled = true;
+    };
+  }, [country, store]);
+
+  const run = async (): Promise<void> => {
+    const q = query.trim();
+    if (q.length < 2) return;
+    if (regions.length > 0 && !region) return;
+    setState({ phase: 'searching' });
+    try {
+      const res = await store.getState().api.businessSearch({
+        country,
+        query: q,
+        limit: 50,
+        ...(region ? { subdivisionCode: region } : {}),
+      });
+      const hits = res.results ?? [];
+      setFilter('');
+      setState({ phase: 'results', hits, truncated: hits.length >= 50 });
+    } catch {
+      // Deliberately NOT an empty result list. "No matches" reads as "this
+      // business is not registered", a claim an outage has not earned.
+      setState({ phase: 'unavailable' });
+    }
+  };
+
+  const searching = state.phase === 'searching';
+  const shown =
+    state.phase === 'results'
+      ? state.hits.filter((h) => {
+          const q = filter.trim().toLowerCase();
+          if (!q) return true;
+          return (
+            h.name.toLowerCase().includes(q) || h.registrationNumber.toLowerCase().includes(q)
+          );
+        })
+      : [];
+
+  return (
+    <View>
+      {regions.length > 0 && (
+        <View style={{ marginBottom: 12 }}>
+          <MyazaText variant="label" style={{ marginBottom: spacing.sm }}>
+            State or region of registration
+          </MyazaText>
+          <MyazaSelect
+            value={region || undefined}
+            sheetTitle="State or region"
+            searchable
+            options={regions.map((r) => ({ value: r.code, label: r.name }))}
+            onChange={(code) => store.getState().setBusinessField('subdivisionCode', code)}
+          />
+        </View>
+      )}
+
+      {/* No label: the placeholder says it, and the magnifier says what kind
+          of field this is — the web SDK's exact arrangement. */}
+      <MyazaInput
+        value={query}
+        onChangeText={setQuery}
+        placeholder="Search by company name"
+        autoCorrect={false}
+        prefix={<Icon name="search" size={16} color={colors.textMuted} />}
+      />
+      <View style={{ height: 12 }} />
+      {/* The spinner lives IN the button, as on web — a separate spinner row
+          pushed the results down and said the same thing twice. */}
+      <MyazaButton
+        label={searching ? 'Searching…' : 'Search'}
+        leadingIcon={searching ? undefined : 'search'}
+        loading={searching}
+        onPress={() => void run()}
+        disabled={searching || query.trim().length < 2 || (regions.length > 0 && !region)}
+      />
+
+      {state.phase === 'results' && state.hits.length > 0 && (
+        <BusinessSearchResults
+          country={country}
+          hits={state.hits}
+          shown={shown}
+          truncated={state.truncated}
+          filter={filter}
+          onFilter={setFilter}
+          onPicked={onPicked}
+        />
+      )}
+
+      {state.phase === 'results' && state.hits.length === 0 && (
+        <MyazaText variant="bodyMedium" color={colors.textSecondary} style={{ marginTop: 12 }}>
+          Nothing found under that name. Try a shorter version of it, or enter the details
+          yourself.
+        </MyazaText>
+      )}
+
+      {state.phase === 'unavailable' && (
+        <View style={{ marginTop: 12 }}>
+          <MyazaAlert
+            variant="warning"
+            title="Search is unavailable"
+            message="We could not reach the company register just now. Try again, or enter the details yourself and we will check them when you submit."
+          />
+        </View>
+      )}
+
+      {/* Always offered, not only on failure: some companies are not in the
+          index at all, and a dead end at the first step ends the application. */}
+      <Pressable
+        accessibilityRole="button"
+        onPress={onManualEntry}
+        hitSlop={8}
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 6,
+          alignSelf: 'flex-start',
+          marginTop: 12,
+        }}
+      >
+        <Icon name="pencil" size={14} color={colors.textSecondary} />
+        <MyazaText
+          variant="bodyMedium"
+          color={colors.textSecondary}
+          style={{ fontWeight: '500' }}
+        >
+          Enter the details myself
+        </MyazaText>
+      </Pressable>
+    </View>
+  );
+}

package/src/screens/BusinessSearchResults.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import { Pressable, ScrollView, View } from 'react-native';
+
+import { CountryFlag } from '../components/CountryFlag';
+import { Icon } from '../components/Icon';
+import { MyazaInput } from '../components/MyazaInput';
+import { MyazaText } from '../components/Typography';
+import { useTheme } from '../components/runtime';
+import { radius } from '../config/theme';
+import type { BusinessSearchHit } from '../services/api';
+
+// The result list: count first ("40 results" says whether to narrow before you
+// start reading), a filter that narrows without re-searching, and one row per
+// candidate. Split from BusinessSearch (200-line rule). Every dimension here —
+// 40px filter, 12px row padding, 6px row gaps, 256px list — is the web SDK's,
+// so the two render the same screen.
+
+export function BusinessSearchResults({
+  country,
+  hits,
+  shown,
+  truncated,
+  filter,
+  onFilter,
+  onPicked,
+}: {
+  country: string;
+  hits: BusinessSearchHit[];
+  shown: BusinessSearchHit[];
+  truncated: boolean;
+  filter: string;
+  onFilter: (value: string) => void;
+  onPicked: (hit: BusinessSearchHit) => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  return (
+    <>
+      {/* Count first: "40 results" says whether to narrow before you start
+          reading, which a bare list does not. */}
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          gap: 12,
+          marginTop: 12,
+        }}
+      >
+        <MyazaText variant="bodyMedium" color={colors.textSecondary}>
+          {shown.length === hits.length
+            ? `${hits.length} results`
+            : `${shown.length} of ${hits.length} results`}
+        </MyazaText>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+          <MyazaText variant="bodyMedium" color={colors.textSecondary}>
+            Filter
+          </MyazaText>
+          <View style={{ width: 176 }}>
+            <MyazaInput
+              value={filter}
+              onChangeText={onFilter}
+              placeholder="Name or number"
+              autoCorrect={false}
+              height={40}
+              fontSize={14}
+              prefix={<Icon name="filter" size={14} color={colors.textMuted} />}
+            />
+          </View>
+        </View>
+      </View>
+      <ScrollView style={{ maxHeight: 256, marginTop: 12 }} nestedScrollEnabled>
+        {shown.map((hit) => (
+          <Pressable
+            key={`${hit.registrationNumber}-${hit.name}`}
+            accessibilityRole="button"
+            onPress={() => onPicked(hit)}
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              gap: 12,
+              borderWidth: 1,
+              borderColor: colors.border,
+              borderRadius: radius.sm,
+              padding: 12,
+              marginBottom: 6,
+            }}
+          >
+            <Icon name="building-2" size={16} color={colors.textSecondary} />
+            <View style={{ flex: 1, minWidth: 0 }}>
+              <MyazaText variant="label" color={colors.textDark} numberOfLines={1}>
+                {hit.name}
+              </MyazaText>
+              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, marginTop: 2 }}>
+                <CountryFlag country={country} size={14} />
+                <MyazaText variant="bodySmall" color={colors.textSecondary}>
+                  {hit.registrationNumber}
+                </MyazaText>
+              </View>
+            </View>
+          </Pressable>
+        ))}
+      </ScrollView>
+      {shown.length === 0 && (
+        <MyazaText variant="bodyMedium" color={colors.textSecondary} style={{ marginTop: 12 }}>
+          Nothing here matches "{filter.trim()}". Clear the filter to see all {hits.length}.
+        </MyazaText>
+      )}
+      {truncated && (
+        <MyazaText variant="bodySmall" color={colors.textSecondary} style={{ marginTop: 6 }}>
+          Showing the first {hits.length}. Add more of the name to narrow it down.
+        </MyazaText>
+      )}
+    </>
+  );
+}

package/src/screens/CompanyInfoFields.tsx

@@ -5,79 +5,114 @@ import { spacing } from '../config/theme';
 import { useTheme } from '../components/runtime';
 import { MyazaText } from '../components/Typography';
 import { MyazaInput } from '../components/MyazaInput';
+import { MyazaDateField } from '../components/MyazaDateField';
+import { PhoneNumberInput } from '../components/PhoneNumberInput';
+import { isValidContactEmail } from '../config/contact';
+import { isValidWebsite } from '../config/website';
 import type { CompanyInfoField, CompanyInfoMode } from '../types/business';
+import type { BusinessState } from '../store/state';
 
 // ---------------------------------------------------------------------------
 // The company profile a KYB workflow asks for.
 //
 // Split from BusinessDetailsStep (200-line rule). Each field's mode comes from
 // the workflow and must match the server's resolution exactly — a field marked
-// optional here but required there produces a 422 the user cannot act on.
-// Section header, captions and placeholders mirror the web SDK's
-// BusinessCompanyInfoFields 1:1.
+// optional here but required there produces a 422 the user cannot act on. The
+// last five are registry facts the applicant STATES: asked as their own answer
+// rather than filled from the register, because where the two differ that is
+// the finding. Field list, labels, placeholders and controls mirror the web
+// SDK's BusinessCompanyInfoFields 1:1.
 // ---------------------------------------------------------------------------
 
-export const COMPANY_FIELD_LABELS: Record<CompanyInfoField, string> = {
-  address: 'Registered address',
-  email: 'Business email',
-  phone: 'Business phone',
-  website: 'Website',
-};
-
-const COMPANY_FIELD_PLACEHOLDERS: Record<CompanyInfoField, string> = {
-  address: 'e.g. 12 Marina Road, Lagos',
-  email: 'hello@company.com',
-  phone: '+234 800 000 0000',
-  website: 'company.com',
-};
+const FIELD_DEFS: Array<{
+  key: CompanyInfoField;
+  label: string;
+  placeholder: string;
+  kind?: 'phone' | 'date' | 'email' | 'website';
+}> = [
+  { key: 'address', label: 'Registered address', placeholder: 'e.g. 12 Marina Road, Lagos' },
+  { key: 'email', label: 'Business email', placeholder: 'hello@company.com', kind: 'email' },
+  { key: 'phone', label: 'Business phone', placeholder: '+234 800 000 0000', kind: 'phone' },
+  { key: 'website', label: 'Website', placeholder: 'company.com', kind: 'website' },
+  { key: 'dateOfIncorporation', label: 'Date of incorporation', placeholder: 'YYYY-MM-DD', kind: 'date' },
+  { key: 'taxId', label: 'Tax ID', placeholder: 'e.g. 01234567-0001' },
+  { key: 'vatNumber', label: 'VAT number', placeholder: 'e.g. NG123456789' },
+  { key: 'companyType', label: 'Company type', placeholder: 'e.g. Private Limited Company' },
+  { key: 'natureOfBusiness', label: 'Nature of business', placeholder: 'What the company does' },
+];
 
 export function CompanyInfoFields({
-  fields,
-  modes,
   values,
-  missing,
-  showErrors,
+  modes,
+  country,
   onChange,
 }: {
-  fields: CompanyInfoField[];
+  values: BusinessState;
   modes: Record<CompanyInfoField, CompanyInfoMode>;
-  values: Record<CompanyInfoField, string>;
-  missing: CompanyInfoField[];
-  showErrors: boolean;
+  /** Seeds the phone dial code: the company's country of registration. */
+  country?: string;
   onChange: (field: CompanyInfoField, value: string) => void;
 }): React.ReactElement | null {
   const { colors } = useTheme();
-  if (fields.length === 0) return null;
+  const visible = FIELD_DEFS.filter((f) => modes[f.key] !== 'off');
+  if (visible.length === 0) return null;
 
   return (
-    <>
-      <View style={{ height: spacing.md }} />
-      <MyazaText variant="bodyMedium" style={{ fontWeight: '600' }}>
-        Company information
-      </MyazaText>
+    <View>
+      <MyazaText variant="label">Company information</MyazaText>
       <MyazaText variant="bodySmall" color={colors.textSecondary} style={{ marginTop: 2 }}>
         We verify these details against the official registry record.
       </MyazaText>
-      {fields.map((field) => (
-        <View key={field}>
-          <View style={{ height: spacing.sm }} />
-          <MyazaInput
-            label={`${COMPANY_FIELD_LABELS[field]}${modes[field] === 'required' ? ' *' : ' (optional)'}`}
-            value={values[field]}
-            onChangeText={(text) => onChange(field, text)}
-            placeholder={COMPANY_FIELD_PLACEHOLDERS[field]}
-            keyboardType={
-              field === 'email' ? 'email-address' : field === 'phone' ? 'phone-pad' : 'default'
-            }
-            autoCapitalize="none"
-            error={
-              showErrors && missing.includes(field)
-                ? `${COMPANY_FIELD_LABELS[field]} is required.`
-                : null
-            }
-          />
-        </View>
-      ))}
-    </>
+      {visible.map((f) => {
+        const required = modes[f.key] === 'required';
+        const value = values[f.key];
+        const error =
+          f.kind === 'email' && value !== '' && !isValidContactEmail(value)
+            ? 'Enter a valid email address.'
+            : f.kind === 'website' && value !== '' && !isValidWebsite(value)
+              ? 'Enter a valid website, for example company.com'
+              : null;
+        return (
+          <View key={f.key} style={{ marginTop: spacing.md }}>
+            {f.kind === 'phone' || f.kind === 'date' ? (
+              <MyazaText variant="label" style={{ marginBottom: spacing.sm }}>
+                {f.label}
+                {required ? ' *' : ' (optional)'}
+              </MyazaText>
+            ) : null}
+            {f.kind === 'phone' ? (
+              // The same control the phone-verification step uses: dial-code
+              // picker, as-you-type national formatting, E.164 out. A business
+              // number is a phone number, and a bare text box gets back a dozen
+              // different shapes of the same digits. `value` carries the
+              // register's number when the lookup returned one.
+              <PhoneNumberInput
+                value={value}
+                defaultCountry={country}
+                onChange={({ e164 }) => onChange('phone', e164)}
+              />
+            ) : f.kind === 'date' ? (
+              // A date gets the picker, not a text box — same control the
+              // questionnaire uses; emits strict YYYY-MM-DD.
+              <MyazaDateField
+                value={value || undefined}
+                placeholder={f.placeholder}
+                onChange={(iso) => onChange(f.key, iso)}
+              />
+            ) : (
+              <MyazaInput
+                label={`${f.label}${required ? ' *' : ' (optional)'}`}
+                value={value}
+                onChangeText={(text) => onChange(f.key, text)}
+                placeholder={f.placeholder}
+                keyboardType={f.kind === 'email' ? 'email-address' : 'default'}
+                autoCapitalize={f.kind === 'email' || f.kind === 'website' ? 'none' : 'words'}
+                error={error}
+              />
+            )}
+          </View>
+        );
+      })}
+    </View>
   );
 }

package/src/screens/ConsentStep.tsx

@@ -9,6 +9,7 @@ import { MyazaText } from '../components/Typography';
 import { MyazaButton } from '../components/MyazaButton';
 import { Icon } from '../components/Icon';
 import { buildConsentModel } from './consent/model';
+import { resubmitNote } from '../lib/resubmit';
 
 // Consent / welcome screen — 1:1 with the web SDK's ConsentStep and the
 // Flutter SDK's ConsentScreen: shield hero, token-filled greeting, a "DURING
@@ -27,10 +28,40 @@ export function ConsentStep(): React.ReactElement {
   const { isBusiness, title, description, steps, capturesFace, recordsVideo } =
     buildConsentModel(config);
 
+  // A reviewer sent this applicant back. Say so, and say why — the note is the
+  // only thing on screen that explains a flow which has silently lost most of
+  // its steps. Above the hero so it is read before the instructions.
+  const redoNote = resubmitNote(config.resubmit);
+
   return (
     <View>
       <View style={{ height: spacing.sm }} />
 
+      {redoNote ? (
+        <View
+          style={{
+            flexDirection: 'row',
+            gap: spacing.sm,
+            borderRadius: radius.lg,
+            borderWidth: 1,
+            borderColor: `${colors.warning}66`,
+            backgroundColor: colors.warningBg,
+            padding: spacing.md,
+            marginBottom: spacing.lg,
+          }}
+        >
+          <Icon name="refresh" size={16} color={colors.warning} />
+          <View style={{ flex: 1, gap: 2 }}>
+            <MyazaText variant="bodyMedium" color={colors.warning}>
+              A few things to redo
+            </MyazaText>
+            <MyazaText variant="bodySmall" color={colors.textSecondary}>
+              {redoNote}
+            </MyazaText>
+          </View>
+        </View>
+      ) : null}
+
       {/* Shield hero — concentric tinted rings + primary badge */}
       <View style={{ alignItems: 'center' }}>
         <View style={{ width: 80, height: 80, alignItems: 'center', justifyContent: 'center' }}>

package/src/screens/ContactDestinationField.tsx

@@ -53,6 +53,7 @@ export function ContactDestinationField({
       <PhoneNumberInput
         defaultCountry={defaultCountry}
         disabled={disabled}
+        autoFocus
         onChange={onPhoneChange}
       />
       {error ? <ErrorLine text={error} /> : null}

package/src/screens/ContactVerificationStep.tsx

@@ -1,9 +1,10 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { View } from 'react-native';
 
 import { spacing } from '../config/theme';
 import { useEffectiveCountry, useKyc, useKycConfig, useKycStore } from '../components/runtime';
 import { MyazaButton } from '../components/MyazaButton';
+import { MyazaAlert } from '../components/MyazaAlert';
 import { ContactDestinationField } from './ContactDestinationField';
 import { ContactVerifiedPanel } from './ContactVerifiedPanel';
 import { ContactCodeStep } from './ContactCodeStep';
@@ -17,6 +18,7 @@ import {
   type PhoneOtpChannel,
 } from '../config/contact';
 import { attemptsRemaining, describeCheckError, describeSendError } from '../services/contactErrors';
+import { stepAfterContactVerified } from '../lib/contact-recovery';
 
 // ---------------------------------------------------------------------------
 // Contact-verification OTP step — email or phone, one component, two mounts.
@@ -37,6 +39,7 @@ export function ContactVerificationStep({
   const country = useEffectiveCountry();
   const store = useKycStore();
   const contact = useKyc((s) => s.contact);
+  const serverConfig = useKyc((s) => s.serverConfig);
 
   const isEmail = channel === 'email';
   const stepConfig = isEmail ? config.emailVerification : config.phoneVerification;
@@ -69,7 +72,20 @@ export function ContactVerificationStep({
   const value = isEmail ? destination.trim() : phone.e164;
   const canSend = isEmail ? isValidContactEmail(value) : phone.isValid;
 
-  const advance = useCallback(() => store.getState().nextStep(), [store]);
+  // Entered via submit recovery? (The server refused this channel's proof at
+  // submit — the token had expired or was already claimed.) Captured at mount:
+  // verifying clears the flag, and Continue must still route back to
+  // 'submitted' afterwards (which auto-submits with the fresh proof).
+  const recovery = useRef((contact.expired ?? []).includes(channel)).current;
+  const advance = useCallback(() => {
+    const target = stepAfterContactVerified({
+      recovery,
+      expired: store.getState().contact.expired ?? [],
+      channel,
+    });
+    if (target) store.getState().goToStep(target);
+    else store.getState().nextStep();
+  }, [store, channel, recovery]);
 
   // The sheet header is rendered by the shell and cannot see this step's state,
   // so publish what it needs to caption: the channel in play now, and the
@@ -159,12 +175,27 @@ export function ContactVerificationStep({
         />
       ) : (
         <>
+          {recovery && (
+            <>
+              <MyazaAlert
+                variant="warning"
+                title="Please verify again"
+                message={`Your earlier confirmation has expired, so please verify ${isEmail ? 'your email' : 'your number'} once more. Everything else is saved, and we will submit again straight after.`}
+              />
+              <View style={{ height: spacing.md }} />
+            </>
+          )}
           <ContactDestinationField
             isEmail={isEmail}
             email={destination}
             onEmailChange={setDestination}
             onPhoneChange={setPhone}
-            defaultCountry={config.phoneVerification?.defaultCountry ?? country ?? undefined}
+            defaultCountry={
+              config.phoneVerification?.defaultCountry ??
+              country ??
+              serverConfig.geoCountry ??
+              undefined
+            }
             error={error}
             disabled={busy}
           />

package/src/screens/IdTypeStep.tsx

@@ -3,6 +3,7 @@ import { Pressable, View } from 'react-native';
 
 import { radius, spacing } from '../config/theme';
 import { ID_TYPES, resolveIdTypeDefinition } from '../config/idTypes';
+import { useMultiIdPlan } from '../lib/use-multi-id-plan';
 import type { IdType, IdTypeDefinition } from '../types/config';
 import {
   useEffectiveCountry,
@@ -54,6 +55,10 @@ export function IdTypeStep(): React.ReactElement {
   const store = useKycStore();
   const serverConfig = useKyc((s) => s.serverConfig);
   const selectedIdType = useKyc((s) => s.selectedIdType);
+  // Multi-ID: this picker is for ONE check of several. It may only offer picks
+  // that leave every later check something to offer — the server validates the
+  // same rule, so an unsafe pick would be a submission it rejects.
+  const plan = useMultiIdPlan();
 
   // 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
@@ -104,13 +109,15 @@ export function IdTypeStep(): React.ReactElement {
   // what makes the disabled step actually disappear from the live flow rather
   // than still offering passports and licences that then have nowhere to be
   // captured. Mirrors the web SDK's IdTypeStep.
-  const visible = useMemo<IdTypeDefinition[]>(
-    () =>
+  const visible = useMemo<IdTypeDefinition[]>(() => {
+    const base =
       config.enableDocumentCapture === false
         ? available.filter((t) => !t.requiresDocumentCapture)
-        : available,
-    [available, config.enableDocumentCapture],
-  );
+        : available;
+    // Multi-ID: only the picks that are still free AND leave every later check
+    // an option. An ID already used earlier in the run is simply not offered.
+    return plan ? base.filter((t) => plan.safeOptions.includes(t.key)) : base;
+  }, [available, config.enableDocumentCapture, plan]);
 
   if (serverConfig.status === 'loading') {
     return (