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

package/src/screens/KeyPeopleInviteLinks.tsx

@@ -0,0 +1,239 @@
+import React, { useState } from 'react';
+import { Pressable, Share, View } from 'react-native';
+import * as Clipboard from 'expo-clipboard';
+
+import { radius, spacing } from '../config/theme';
+import { useKyc, useTheme } from '../components/runtime';
+import { MyazaText } from '../components/Typography';
+import { Icon } from '../components/Icon';
+import { CountryFlag } from '../components/CountryFlag';
+import { regionCountryName } from '../config/regions';
+import { KEY_PERSON_ROLE_LABELS } from '../config/keyPeople';
+import type { KeyPersonInvite } from '../services/api-types';
+import type { ApplicantRole, KeyPersonRole } from '../types/business';
+
+// ---------------------------------------------------------------------------
+// "Awaiting users" — the KYB success screen's people section. Every person the
+// review is waiting on, grouped by role, each with a status pill; pending
+// people carry a shareable verification link, and the APPLICANT (who verified
+// in-flow) appears with a green Submitted pill so the picture is complete.
+// Mirrors the web SDK's KeyPeopleInviteLinks 1:1 — mobile shares via the
+// native sheet (reaches WhatsApp/SMS, still offers Copy inside).
+// ---------------------------------------------------------------------------
+
+type AwaitRole = ApplicantRole;
+
+interface AwaitRow {
+  name: string;
+  role: AwaitRole;
+  pct: string | null;
+  country: string | null;
+  status: 'submitted' | 'pending';
+  inviteUrl?: string;
+  isApplicant?: boolean;
+}
+
+const ROLE_LABELS: Record<AwaitRole, string> = {
+  ...KEY_PERSON_ROLE_LABELS,
+  authorized_representative: 'Authorized representative',
+};
+
+const SECTIONS: Array<{ role: AwaitRole; label: string }> = [
+  { role: 'beneficial_owner', label: 'UBOS' },
+  { role: 'director', label: 'DIRECTORS' },
+  { role: 'signatory', label: 'SIGNATORIES' },
+  { role: 'shareholder', label: 'SHAREHOLDERS' },
+  { role: 'authorized_representative', label: 'REPRESENTATIVES' },
+];
+
+export function KeyPeopleInviteLinks({
+  invites,
+}: {
+  invites: KeyPersonInvite[];
+}): React.ReactElement | null {
+  const { colors } = useTheme();
+  const app = useKyc((s) => s.businessApplication);
+  if (invites.length === 0) return null;
+
+  const rows: AwaitRow[] = [];
+
+  // The applicant themselves — verified in-flow, nothing more to do.
+  if (app.applicantRole) {
+    const self =
+      app.applicantKeyPersonIndex !== null ? app.keyPeople[app.applicantKeyPersonIndex] : null;
+    rows.push({
+      name: (self?.name ?? app.applicantName).trim() || 'You',
+      role: (self?.role ?? app.applicantRole) as AwaitRole,
+      pct: self?.ownershipPct.trim() || null,
+      country: self?.country.trim() ? self.country.trim().toUpperCase() : null,
+      status: 'submitted',
+      isApplicant: true,
+    });
+  }
+
+  // Everyone the server minted a link for — enriched from the entered rows.
+  for (const invite of invites) {
+    const entered = app.keyPeople.find((p) => p.name.trim() === invite.name.trim());
+    rows.push({
+      name: invite.name,
+      role: (entered?.role ?? 'director') as AwaitRole,
+      pct: entered?.ownershipPct.trim() || null,
+      country: entered?.country.trim() ? entered.country.trim().toUpperCase() : null,
+      status: 'pending',
+      inviteUrl: invite.inviteUrl,
+    });
+  }
+
+  return (
+    <View style={{ width: '100%', marginTop: spacing.lg }}>
+      <MyazaText variant="bodySmall" color={colors.textMuted} style={{ textAlign: 'center', marginBottom: spacing.md }}>
+        To complete the review, the people below must verify their identity with a KYC check.
+        Anyone with an email on file has already been sent their link.
+      </MyazaText>
+
+      {SECTIONS.map(({ role, label }) => {
+        const group = rows.filter((r) => r.role === role);
+        if (group.length === 0) return null;
+        return (
+          <View key={role} style={{ marginBottom: spacing.sm }}>
+            <MyazaText
+              variant="bodySmall"
+              color={colors.textMuted}
+              style={{ fontWeight: '600', letterSpacing: 1.2, marginBottom: spacing.xs + 2 }}
+            >
+              {label}
+            </MyazaText>
+            {group.map((row, i) => (
+              <AwaitCard key={`${role}-${i}`} row={row} />
+            ))}
+          </View>
+        );
+      })}
+
+      <MyazaText variant="bodySmall" color={colors.textMuted} style={{ textAlign: 'center' }}>
+        Links are valid for 14 days.
+      </MyazaText>
+    </View>
+  );
+}
+
+function AwaitCard({ row }: { row: AwaitRow }): React.ReactElement {
+  const { colors } = useTheme();
+  const submitted = row.status === 'submitted';
+  const [copied, setCopied] = useState(false);
+
+  const share = (): void => {
+    if (!row.inviteUrl) return;
+    Share.share({ message: row.inviteUrl }).catch(() => undefined);
+  };
+  const copy = (): void => {
+    if (!row.inviteUrl) return;
+    Clipboard.setStringAsync(row.inviteUrl)
+      .then(() => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+      })
+      .catch(() => undefined);
+  };
+
+  return (
+    <View
+      style={{
+        backgroundColor: colors.backgroundSecondary,
+        borderRadius: radius.md,
+        padding: spacing.md,
+        marginBottom: spacing.sm,
+      }}
+    >
+      <View style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
+        <View style={{ flex: 1, minWidth: 0, marginRight: spacing.sm }}>
+          <MyazaText variant="bodyMedium" numberOfLines={1} style={{ fontWeight: '700' }}>
+            {row.name}
+            {row.isApplicant ? (
+              <MyazaText variant="bodySmall" color={colors.textMuted}>
+                {'  (you)'}
+              </MyazaText>
+            ) : null}
+          </MyazaText>
+          <View style={{ flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', marginTop: 2 }}>
+            <MyazaText variant="bodySmall" color={colors.textMuted}>
+              {ROLE_LABELS[row.role]}
+              {row.pct ? ` · ${row.pct}%` : ''}
+              {row.country ? ' · ' : ''}
+            </MyazaText>
+            {row.country ? (
+              <>
+                <CountryFlag country={row.country} size={14} />
+                <MyazaText variant="bodySmall" color={colors.textMuted}>
+                  {` ${regionCountryName(row.country)}`}
+                </MyazaText>
+              </>
+            ) : null}
+          </View>
+        </View>
+        <View
+          style={{
+            borderRadius: radius.full,
+            paddingHorizontal: spacing.sm + 4,
+            paddingVertical: spacing.xs,
+            backgroundColor: submitted ? colors.successBg : colors.primary100,
+          }}
+        >
+          <MyazaText
+            variant="bodySmall"
+            color={submitted ? colors.success : colors.primary}
+            style={{ fontWeight: '700', fontSize: 11, letterSpacing: 0.6 }}
+          >
+            {submitted ? 'SUBMITTED' : 'KYC PENDING'}
+          </MyazaText>
+        </View>
+      </View>
+
+      {row.status === 'pending' && row.inviteUrl ? (
+        // Both actions, since it's mobile: Copy for pasting anywhere, Share
+        // for the native sheet (WhatsApp/SMS directly).
+        <View style={{ flexDirection: 'row', marginTop: spacing.sm + 4 }}>
+          <Pressable
+            onPress={copy}
+            accessibilityRole="button"
+            accessibilityLabel={`Copy ${row.name}'s verification link`}
+            style={{
+              flex: 1,
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundColor: colors.primary100,
+              borderRadius: radius.full,
+              paddingVertical: spacing.sm + 2,
+              marginRight: spacing.sm,
+            }}
+          >
+            <Icon name={copied ? 'check' : 'copy'} size={15} color={colors.primary} />
+            <MyazaText variant="bodySmall" color={colors.primary} style={{ fontWeight: '700', marginLeft: spacing.xs + 2 }}>
+              {copied ? 'Copied' : 'Copy link'}
+            </MyazaText>
+          </Pressable>
+          <Pressable
+            onPress={share}
+            accessibilityRole="button"
+            accessibilityLabel={`Share ${row.name}'s verification link`}
+            style={{
+              flex: 1,
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundColor: colors.primary100,
+              borderRadius: radius.full,
+              paddingVertical: spacing.sm + 2,
+            }}
+          >
+            <Icon name="share" size={15} color={colors.primary} />
+            <MyazaText variant="bodySmall" color={colors.primary} style={{ fontWeight: '700', marginLeft: spacing.xs + 2 }}>
+              Share
+            </MyazaText>
+          </Pressable>
+        </View>
+      ) : null}
+    </View>
+  );
+}

package/src/screens/KeyPersonCard.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import { Pressable, View } from 'react-native';
+
+import { radius, spacing } from '../config/theme';
+import { useTheme } from '../components/runtime';
+import { MyazaText } from '../components/Typography';
+import { Icon } from '../components/Icon';
+import { CountryFlag } from '../components/CountryFlag';
+import {
+  KEY_PERSON_ROLE_LABELS,
+  initialsOf,
+  isKeyPersonRowValid,
+  type KeyPersonEntry,
+} from '../config/keyPeople';
+import { regionCountryName } from '../config/regions';
+
+// ---------------------------------------------------------------------------
+// One saved key person, summarised — monogram avatar with their ID-issuing
+// country flag badged on its corner, name, role · ownership meta, and the
+// email their invite will go to. The whole card opens the edit sheet (the
+// chevron is the affordance); removal lives INSIDE that sheet, so a stray tap
+// can never delete a person.
+//
+// Same visual language as the applicant step's "this is me" cards, so the two
+// screens read as one system.
+// ---------------------------------------------------------------------------
+
+export function KeyPersonCard({
+  entry,
+  onPress,
+}: {
+  entry: KeyPersonEntry;
+  onPress: () => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  const name = entry.name.trim() || 'Unnamed person';
+  const country = entry.country.trim() ? entry.country.trim().toUpperCase() : null;
+  const pct = entry.ownershipPct.trim();
+  // A row persisted by the old inline UI (or interrupted mid-edit) may be
+  // incomplete — the card says so instead of silently blocking Continue.
+  const incomplete = !isKeyPersonRowValid(entry);
+
+  const meta = [KEY_PERSON_ROLE_LABELS[entry.role], pct ? `${pct}% ownership` : null]
+    .filter(Boolean)
+    .join(' · ');
+  // The flag alone doesn't say WHICH country — spell it out, alongside the
+  // email their invite goes to.
+  const detail = [country ? regionCountryName(country) : null, entry.email.trim() || null]
+    .filter(Boolean)
+    .join(' · ');
+
+  return (
+    <Pressable
+      onPress={onPress}
+      accessibilityRole="button"
+      accessibilityLabel={`Edit ${name}`}
+      style={({ pressed }) => ({
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderWidth: 1,
+        borderColor: incomplete ? colors.error : colors.border,
+        borderRadius: radius.sm,
+        backgroundColor: pressed ? colors.backgroundSecondary : colors.background,
+        padding: spacing.md - 2,
+        marginBottom: spacing.sm,
+      })}
+    >
+      <View
+        style={{
+          width: 40,
+          height: 40,
+          borderRadius: 20,
+          backgroundColor: colors.primary100,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <MyazaText variant="bodySmall" color={colors.primary} style={{ fontWeight: '700' }}>
+          {initialsOf(name)}
+        </MyazaText>
+        {country ? (
+          <View
+            style={{
+              position: 'absolute',
+              bottom: -2,
+              right: -4,
+              borderRadius: 10,
+              borderWidth: 2,
+              borderColor: colors.background,
+              overflow: 'hidden',
+            }}
+          >
+            <CountryFlag country={country} size={16} />
+          </View>
+        ) : null}
+      </View>
+
+      <View style={{ flex: 1, minWidth: 0, marginLeft: spacing.sm + 4 }}>
+        <MyazaText variant="bodyMedium" numberOfLines={1} style={{ fontWeight: '600' }}>
+          {name}
+        </MyazaText>
+        <MyazaText variant="bodySmall" color={colors.textMuted} numberOfLines={1} style={{ marginTop: 1 }}>
+          {meta}
+        </MyazaText>
+        {incomplete ? (
+          <MyazaText variant="bodySmall" color={colors.error} numberOfLines={1} style={{ marginTop: 1 }}>
+            Incomplete — tap to finish
+          </MyazaText>
+        ) : detail !== '' ? (
+          <MyazaText variant="bodySmall" color={colors.textMuted} numberOfLines={1} style={{ marginTop: 1 }}>
+            {detail}
+          </MyazaText>
+        ) : null}
+      </View>
+
+      <Icon name="pencil" size={16} color={colors.textMuted} />
+    </Pressable>
+  );
+}

package/src/screens/KeyPersonForm.tsx

@@ -0,0 +1,148 @@
+import React, { useMemo } from 'react';
+import { View } from 'react-native';
+
+import { spacing } from '../config/theme';
+import { useTheme } from '../components/runtime';
+import { MyazaText } from '../components/Typography';
+import { MyazaInput } from '../components/MyazaInput';
+import { MyazaSelect } from '../components/MyazaSelect';
+import { CountryField } from '../components/CountryField';
+import type { DialCodeOption } from '../components/DialCodePicker';
+import { ALL_REGION_CODES, regionCountryName } from '../config/regions';
+import { isValidContactEmail } from '../config/contact';
+import {
+  KEY_PERSON_ROLES,
+  KEY_PERSON_ROLE_LABELS,
+  type KeyPersonEntry,
+} from '../config/keyPeople';
+import type { KeyPersonRole } from '../types/business';
+
+// ---------------------------------------------------------------------------
+// The key-person FIELDS — full name → role → ownership % → country → email —
+// with the same live per-field validation the old inline row had. No card
+// chrome, no header: this is the body of the add/edit sheet (KeyPersonSheet),
+// which owns the draft state and the save/remove actions.
+// ---------------------------------------------------------------------------
+
+/** Whether the role is an ownership one (% is only meaningful then). */
+function isOwnerRole(role: KeyPersonRole): boolean {
+  return role === 'beneficial_owner' || role === 'shareholder';
+}
+
+/** Every ISO-2 we can name, alphabetical — built once, shared by all mounts. */
+let countryOptions: DialCodeOption[] | null = null;
+function allCountryOptions(): DialCodeOption[] {
+  countryOptions ??= [...ALL_REGION_CODES]
+    .map((code) => ({ code, name: regionCountryName(code) }))
+    .sort((a, b) => a.name.localeCompare(b.name));
+  return countryOptions;
+}
+
+export function KeyPersonForm({
+  entry,
+  onChange,
+  uboThreshold = 25,
+  combinedPctError = null,
+}: {
+  entry: KeyPersonEntry;
+  onChange: (patch: Partial<KeyPersonEntry>) => void;
+  /** Ownership % at/above which the server treats a person as a beneficial
+   *  owner (the workflow's `keyPeople.ownershipThreshold`, default 25). */
+  uboThreshold?: number;
+  /**
+   * Set when this draft's % would push the COMBINED ownership across all
+   * people past 100% — shown on the % field as a warning. It never blocks
+   * saving (the fix may live on a different person); the list's summary and
+   * the disabled Continue enforce the total.
+   */
+  combinedPctError?: string | null;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  const options = useMemo(allCountryOptions, []);
+
+  const nameInvalid = entry.name !== '' && entry.name.trim().length < 2;
+  const emailInvalid = entry.email.trim() !== '' && !isValidContactEmail(entry.email.trim());
+  const pct = entry.ownershipPct.trim();
+  const pctNum = Number(pct);
+  const pctInvalid = pct !== '' && (!Number.isFinite(pctNum) || pctNum < 0 || pctNum > 100);
+  // Surface the regulatory consequence as feedback: at/above the threshold the
+  // server escalates this person to a beneficial owner regardless of the role
+  // picked. Quiet when they already chose UBO — nothing new to say.
+  const uboHint =
+    !pctInvalid && pct !== '' && pctNum >= uboThreshold && entry.role !== 'beneficial_owner';
+
+  return (
+    <View>
+      <MyazaInput
+        label="Full name"
+        value={entry.name}
+        onChangeText={(name) => onChange({ name })}
+        placeholder="e.g. Bola Owner"
+        // It's a person's name — start every word capitalized.
+        autoCapitalize="words"
+        error={nameInvalid ? 'Enter the person’s full name.' : null}
+      />
+
+      <View style={{ height: spacing.sm }} />
+      <MyazaText variant="bodySmall" style={{ fontWeight: '600', marginBottom: spacing.xs }}>
+        Role
+      </MyazaText>
+      <MyazaSelect
+        value={entry.role}
+        sheetTitle="Role"
+        options={KEY_PERSON_ROLES.map((role) => ({
+          value: role,
+          label: KEY_PERSON_ROLE_LABELS[role],
+        }))}
+        onChange={(role) => onChange({ role })}
+      />
+
+      <View style={{ height: spacing.sm }} />
+      <MyazaInput
+        label="Ownership % (optional)"
+        value={entry.ownershipPct}
+        onChangeText={(ownershipPct) => onChange({ ownershipPct })}
+        placeholder={isOwnerRole(entry.role) ? 'e.g. 60' : '—'}
+        keyboardType="decimal-pad"
+        suffix={
+          <MyazaText variant="bodySmall" color={colors.textMuted}>
+            %
+          </MyazaText>
+        }
+        error={pctInvalid ? 'Enter a value between 0 and 100.' : combinedPctError}
+        helper={
+          uboHint
+            ? `At ${uboThreshold}% or more, this person counts as a beneficial owner.`
+            : undefined
+        }
+      />
+
+      <View style={{ height: spacing.sm }} />
+      <MyazaText variant="bodySmall" style={{ fontWeight: '600', marginBottom: spacing.xs }}>
+        Country{' '}
+        <MyazaText variant="bodySmall" color={colors.textSecondary}>
+          (where their ID was issued)
+        </MyazaText>
+      </MyazaText>
+      {/* The SAME sheet as the phone field's dial-code picker (keyboard-aware,
+          autofocused search, results pinned above the keys) — minus the dial
+          codes. Two country pickers that feel different would read as a bug. */}
+      <CountryField
+        value={entry.country || null}
+        options={options}
+        onChange={(country) => onChange({ country })}
+      />
+
+      <View style={{ height: spacing.sm }} />
+      <MyazaInput
+        label="Email (optional — used to send their verification link)"
+        value={entry.email}
+        onChangeText={(email) => onChange({ email })}
+        placeholder="name@company.com"
+        keyboardType="email-address"
+        autoCapitalize="none"
+        error={emailInvalid ? 'Enter a valid email address.' : null}
+      />
+    </View>
+  );
+}

package/src/screens/KeyPersonSheet.tsx

@@ -0,0 +1,184 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Keyboard,
+  Modal,
+  Platform,
+  Pressable,
+  ScrollView,
+  useWindowDimensions,
+  View,
+} from 'react-native';
+
+import { radius, spacing } from '../config/theme';
+import { useTheme } from '../components/runtime';
+import { MyazaText } from '../components/Typography';
+import { MyazaButton } from '../components/MyazaButton';
+import { Icon } from '../components/Icon';
+import { KeyPersonForm } from './KeyPersonForm';
+import { isKeyPersonRowValid, type KeyPersonEntry } from '../config/keyPeople';
+
+// ---------------------------------------------------------------------------
+// The add/edit key-person sheet. The list step stays a clean stack of summary
+// cards; the FORM lives here — slide-up sheet, grab handle, the five fields,
+// and a pinned primary action. Editing adds a visually separated destructive
+// "Remove this person" beneath the save (never beside it — HIG destructive
+// separation).
+//
+// Keyboard handling mirrors DialCodePicker: the sheet is lifted above the keys
+// and sized against the space that remains, so the focused field is never
+// underneath the keyboard.
+//
+// Save is enabled once the draft is valid. A combined-ownership overshoot
+// WARNS here but never blocks saving — the fix may live on a different
+// person's %, and trapping the user inside this sheet would force them to
+// discard their work to go adjust it.
+// ---------------------------------------------------------------------------
+
+export function KeyPersonSheet({
+  mode,
+  initial,
+  uboThreshold,
+  otherPctTotal,
+  onSave,
+  onRemove,
+  onClose,
+}: {
+  mode: 'add' | 'edit';
+  initial: KeyPersonEntry;
+  uboThreshold?: number;
+  /** Sum of every OTHER person's ownership % — for the combined warning. */
+  otherPctTotal: number;
+  onSave: (entry: KeyPersonEntry) => void;
+  /** Edit mode only — removes the person and closes. */
+  onRemove?: () => void;
+  onClose: () => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  const { height: screenHeight } = useWindowDimensions();
+  const [draft, setDraft] = useState<KeyPersonEntry>(initial);
+  const [keyboard, setKeyboard] = useState(0);
+
+  useEffect(() => {
+    // iOS reports 'will' events early enough to resize before the keys land;
+    // Android only emits 'did'.
+    const show = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hide = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+    const shown = Keyboard.addListener(show, (e) => setKeyboard(e.endCoordinates.height));
+    const hidden = Keyboard.addListener(hide, () => setKeyboard(0));
+    return () => {
+      shown.remove();
+      hidden.remove();
+    };
+  }, []);
+
+  const available = screenHeight - keyboard;
+  const maxHeight = Math.min(available * 0.92, screenHeight * 0.85);
+
+  const draftPct = Number(draft.ownershipPct);
+  const combinedTotal =
+    draft.ownershipPct.trim() !== '' && Number.isFinite(draftPct)
+      ? otherPctTotal + draftPct
+      : otherPctTotal;
+  const fmtPct = (n: number): string => (Number.isInteger(n) ? String(n) : n.toFixed(1));
+  const combinedPctError =
+    combinedTotal > 100
+      ? `Combined ownership would be ${fmtPct(combinedTotal)}% — over by ${fmtPct(combinedTotal - 100)}%.`
+      : null;
+
+  const canSave = isKeyPersonRowValid(draft) && draft.name.trim().length >= 2;
+
+  return (
+    <Modal visible transparent animationType="slide" onRequestClose={onClose}>
+      {/* Same wrapper as MyazaSelect's option sheet: a flex-end backdrop with
+          the sheet inside it, so the top corners round identically. Tapping
+          the backdrop dismisses; a tap inside the sheet does not. */}
+      <Pressable
+        onPress={onClose}
+        accessibilityLabel="Close"
+        style={{
+          flex: 1,
+          backgroundColor: 'rgba(0,0,0,0.45)',
+          justifyContent: 'flex-end',
+        }}
+      >
+        <Pressable
+          onPress={() => {}}
+          style={{
+            maxHeight,
+            marginBottom: keyboard,
+            backgroundColor: colors.background,
+            borderTopLeftRadius: radius.lg,
+            borderTopRightRadius: radius.lg,
+            overflow: 'hidden',
+          }}
+        >
+        <View
+          style={{
+            alignSelf: 'center',
+            width: 36,
+            height: 4,
+            borderRadius: radius.full,
+            backgroundColor: colors.border,
+            marginTop: spacing.sm,
+          }}
+        />
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingHorizontal: spacing.md,
+            paddingTop: spacing.sm + 4,
+            paddingBottom: spacing.sm,
+          }}
+        >
+          <MyazaText variant="body" style={{ flex: 1, fontWeight: '700' }}>
+            {mode === 'add' ? 'Add a person' : 'Edit person'}
+          </MyazaText>
+          <Pressable onPress={onClose} hitSlop={12} accessibilityRole="button" accessibilityLabel="Close">
+            <Icon name="x" size={20} color={colors.textSecondary} />
+          </Pressable>
+        </View>
+
+        <ScrollView
+          bounces={false}
+          keyboardShouldPersistTaps="handled"
+          contentContainerStyle={{ paddingHorizontal: spacing.md, paddingBottom: spacing.sm }}
+        >
+          <KeyPersonForm
+            entry={draft}
+            onChange={(patch) => setDraft((d) => ({ ...d, ...patch }))}
+            uboThreshold={uboThreshold}
+            combinedPctError={combinedPctError}
+          />
+        </ScrollView>
+
+        <View style={{ paddingHorizontal: spacing.md, paddingTop: spacing.sm, paddingBottom: spacing.lg }}>
+          <MyazaButton
+            label={mode === 'add' ? 'Add person' : 'Save changes'}
+            onPress={canSave ? () => onSave(draft) : undefined}
+            disabled={!canSave}
+          />
+          {mode === 'edit' && onRemove ? (
+            <Pressable
+              onPress={onRemove}
+              accessibilityRole="button"
+              accessibilityLabel="Remove this person"
+              style={({ pressed }) => ({
+                height: 44,
+                alignItems: 'center',
+                justifyContent: 'center',
+                marginTop: spacing.xs,
+                opacity: pressed ? 0.7 : 1,
+              })}
+            >
+              <MyazaText variant="bodySmall" color={colors.error} style={{ fontWeight: '600' }}>
+                Remove this person
+              </MyazaText>
+            </Pressable>
+          ) : null}
+          </View>
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+}