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

package/README.md

@@ -133,6 +133,47 @@ autolinked via React Native / Expo autolinking — no manual linking required.
 `children` (a string) to relabel it. For a fully custom trigger, use the
 [`useMyazaKYC()` hook](#trigger-component--hook).
 
+### Recommended — mount a workflow
+
+Build the flow once in the Myaza dashboard as a **workflow**, then mount it by
+id. The country, ID types, capture steps, add-ons, branding and copy all come
+from the workflow, so changing the flow is a re-publish in the dashboard rather
+than a new app build and an app-store review. See [Workflows](#workflows).
+
+```tsx
+import { MyazaKYC } from '@myazahq/kyc-sdk-react-native';
+
+export default function VerifyScreen() {
+  return (
+    <MyazaKYC
+      apiKey="pk_live_xxx"          // prefix selects the env: pk_test_ → sandbox
+      workflowId="wf_AbC123dEf456"
+      // Runtime data — a workflow is a shared template and cannot carry any of it.
+      userId="usr_123"
+      userData={{ firstName: 'Jane', lastName: 'Doe' }}
+      metadata={{ orderId: 'ord_456' }}
+      onSubmit={(submission) => console.log('Submitted!', submission.verificationId)}
+      onError={(err) => console.warn('SDK error:', err.code, err.message)}
+      onClose={() => console.log('Modal closed')}
+    >
+      Verify my identity
+    </MyazaKYC>
+  );
+}
+```
+
+**`userData` is worth passing.** It is the name you believe the user has, and it
+is compared against the name read off their document — that comparison is what
+produces `dataMatch` on the verification. It cannot live on the workflow:
+`userId`, `userData` and `metadata` are per-user runtime values, and a workflow
+is a template shared by every visitor, so these stay in code even when
+everything else moves to the dashboard.
+
+### Or configure everything in code
+
+Skip the workflow and pass the flow's shape as props. Useful for a quick start
+or a single fixed flow; anything you'd change later means shipping a new build.
+
 ```tsx
 import { MyazaKYC } from '@myazahq/kyc-sdk-react-native';
 
@@ -235,8 +276,8 @@ An unrecognized or malformed key throws at setup (it never silently defaults).
 
 ## Workflows
 
-Instead of configuring the flow in code, build it in the Myaza dashboard and
-reference it by id:
+The recommended integration (see [Usage](#usage)): build the flow in the Myaza
+dashboard and reference it by id —
 
 ```tsx
 <MyazaKYC apiKey="pk_live_xxx" workflowId="wf_abc123" userId="usr_123" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@myazahq/kyc-sdk-react-native",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Myaza KYC SDK for React Native (Expo) — ID verification, liveness detection, and document capture",
   "author": "Flitstack Technologies Inc.",
   "repository": {

package/src/components/Icon.tsx

@@ -30,6 +30,7 @@ import {
   Moon,
   MoveLeft,
   Nfc,
+  Pencil,
   Smartphone,
   RefreshCw,
   ScanFace,
@@ -84,6 +85,7 @@ export type IconName =
   | 'scan-line'
   | 'scan-face'
   | 'nfc'
+  | 'pencil'
   | 'search'
   | 'zap'
   | 'link'
@@ -145,6 +147,7 @@ const ICONS: Record<IconName, LucideIcon> = {
   'scan-line': ScanLine,
   'scan-face': ScanFace,
   nfc: Nfc,
+  pencil: Pencil,
   search: Search,
   zap: Zap,
   'zap-off': ZapOff,

package/src/config/keyPeople.ts

@@ -106,6 +106,16 @@ export function keyPeoplePayload(
     }));
 }
 
+/** "Richard Ingwe" → "RI" — the avatar monogram used on person cards. */
+export function initialsOf(name: string): string {
+  return name
+    .trim()
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((t) => t[0]?.toUpperCase() ?? '')
+    .join('');
+}
+
 /** Split a typed full name into first/last (best-effort). */
 export function splitFullName(name: string): { firstName?: string; lastName?: string } | undefined {
   const trimmed = name.trim();

package/src/screens/ApplicantRoleStep.tsx

@@ -13,6 +13,7 @@ import { CountryFlag } from '../components/CountryFlag';
 import {
   KEY_PERSON_ROLE_LABELS,
   KEY_PERSON_ROLES,
+  initialsOf,
   isKeyPersonRowValid,
   namesLooselyMatch,
 } from '../config/keyPeople';
@@ -43,16 +44,6 @@ const APPLICANT_ROLE_LABELS: Record<ApplicantRole, string> = {
   authorized_representative: 'Authorized representative',
 };
 
-/** "Richard Ingwe" → "RI" — the avatar monogram. */
-function initialsOf(name: string): string {
-  return name
-    .trim()
-    .split(/\s+/)
-    .slice(0, 2)
-    .map((t) => t[0]?.toUpperCase() ?? '')
-    .join('');
-}
-
 export function ApplicantRoleStep(): React.ReactElement {
   const store = useKycStore();
   const config = useKycConfig();

package/src/screens/BusinessKeyPeopleStep.tsx

@@ -1,15 +1,17 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { View } from 'react-native';
 
 import { radius, spacing } from '../config/theme';
 import { useKyc, useKycConfig, useKycStore, useTheme } from '../components/runtime';
 import { MyazaText } from '../components/Typography';
 import { MyazaButton } from '../components/MyazaButton';
-import { BusinessKeyPersonRow } from './BusinessKeyPersonRow';
+import { KeyPersonCard } from './KeyPersonCard';
+import { KeyPersonSheet } from './KeyPersonSheet';
 import { keyPeopleMinEntries } from '../config/businessSteps';
 import {
   emptyKeyPerson,
   invalidKeyPersonRows,
+  isKeyPersonRowBlank,
   isKeyPersonRowValid,
   MAX_KEY_PEOPLE_ROWS,
   type KeyPersonEntry,
@@ -24,9 +26,10 @@ import type { KeyPersonRole } from '../types/business';
 // `undisclosed`, which is a risk signal in its own right. So this screen is not
 // merely data entry — what the applicant chooses to omit is evidence.
 //
-// Layout, copy and per-row design mirror the web SDK's BusinessKeyPeopleStep
-// (and Flutter's screen) 1:1 — the description lives in the step HEADER, the
-// hints are dashed cards, and each person is a bordered card with selects.
+// The list stays a clean stack of compact summary cards; the FORM lives in the
+// add/edit sheet (KeyPersonSheet). Tapping a card edits it; "Add a person"
+// opens a fresh sheet. Removal is inside the edit sheet, behind a deliberate
+// tap — never one stray touch on the list.
 // ---------------------------------------------------------------------------
 
 export const businessKeyPeopleMeta = {
@@ -35,45 +38,62 @@ export const businessKeyPeopleMeta = {
     "List the company's directors and owners of 25% or more. Each will receive a link to verify their identity.",
 };
 
+type SheetState = { mode: 'add' } | { mode: 'edit'; index: number } | null;
+
 export function BusinessKeyPeopleStep(): React.ReactElement {
   const config = useKycConfig();
   const store = useKycStore();
   const { colors } = useTheme();
   const rows = useKyc((s) => s.businessApplication.keyPeople);
   const registryCountry = useKyc((s) => s.business.country);
+  const [sheet, setSheet] = useState<SheetState>(null);
 
   const minEntries = keyPeopleMinEntries(config.business);
   const validCount = rows.filter(isKeyPersonRowValid).length;
   const invalidRows = invalidKeyPersonRows(rows);
+  const uboThreshold = config.business?.keyPeople?.ownershipThreshold ?? 25;
 
   // Combined ownership above 100% is factually impossible — catch the typo
   // here rather than shipping it into the registry cross-check as a doomed
   // mismatch. Under 100% is fine (not every owner has to be listed).
-  const totalPct = rows.reduce((sum, row) => {
+  const pctOf = (row: KeyPersonEntry): number => {
     const n = Number(row.ownershipPct);
-    return row.ownershipPct.trim() !== '' && Number.isFinite(n) ? sum + n : sum;
-  }, 0);
+    return row.ownershipPct.trim() !== '' && Number.isFinite(n) ? n : 0;
+  };
+  const totalPct = rows.reduce((sum, row) => sum + pctOf(row), 0);
   const overAllocated = totalPct > 100;
+  const fmtPct = (n: number): string => (Number.isInteger(n) ? String(n) : n.toFixed(1));
 
   const canContinue = validCount >= minEntries && invalidRows.length === 0 && !overAllocated;
 
-  const update = (index: number, patch: Partial<KeyPersonEntry>): void => {
-    store.getState().setKeyPeople(rows.map((row, i) => (i === index ? { ...row, ...patch } : row)));
-  };
-  // New rows default to the business's registry country (picked on the
+  // New people default to the business's registry country (picked on the
   // details step) — most directors are local, and a foreign one just switches
   // theirs. Mirrors the web and Flutter SDKs.
   const defaultCountry = registryCountry ?? config.business?.country ?? '';
-  const add = (): void =>
-    store.getState().setKeyPeople([...rows, { ...emptyKeyPerson(), country: defaultCountry }]);
-  const remove = (index: number): void =>
-    store.getState().setKeyPeople(rows.filter((_, i) => i !== index));
+
+  const commit = (next: KeyPersonEntry[]): void => store.getState().setKeyPeople(next);
+  const handleSave = (entry: KeyPersonEntry): void => {
+    if (sheet?.mode === 'edit') {
+      commit(rows.map((row, i) => (i === sheet.index ? entry : row)));
+    } else {
+      commit([...rows, entry]);
+    }
+    setSheet(null);
+  };
+  const handleRemove = (): void => {
+    if (sheet?.mode === 'edit') commit(rows.filter((_, i) => i !== sheet.index));
+    setSheet(null);
+  };
+
+  // Indexed access may be undefined under strict indexing — resolved once here
+  // so the sheet only ever mounts with a real entry.
+  const editEntry = sheet?.mode === 'edit' ? rows[sheet.index] : undefined;
 
   const handleContinue = (): void => {
     if (!canContinue) return;
     // Half-typed rows are dropped rather than submitted: an entry the user
     // abandoned is not a person they disclosed.
-    store.getState().setKeyPeople(rows.filter(isKeyPersonRowValid));
+    commit(rows.filter(isKeyPersonRowValid));
     store.getState().nextStep();
   };
 
@@ -98,6 +118,7 @@ export function BusinessKeyPeopleStep(): React.ReactElement {
             borderRadius: radius.sm,
             backgroundColor: colors.backgroundSecondary,
             padding: spacing.md,
+            marginBottom: spacing.md,
           }}
         >
           <MyazaText variant="bodySmall" color={colors.textSecondary}>
@@ -105,45 +126,80 @@ export function BusinessKeyPeopleStep(): React.ReactElement {
           </MyazaText>
         </View>
       ) : null}
-      {overAllocated ? (
+
+      {rows.map((row, index) =>
+        isKeyPersonRowBlank(row) ? null : (
+          <KeyPersonCard key={index} entry={row} onPress={() => setSheet({ mode: 'edit', index })} />
+        ),
+      )}
+      {/* The cards and the add affordance are different things — give the
+          boundary some air (cards already carry a small bottom margin). */}
+      {rows.some((row) => !isKeyPersonRowBlank(row)) ? (
+        <View style={{ height: spacing.sm }} />
+      ) : null}
+
+      {rows.length < MAX_KEY_PEOPLE_ROWS ? (
+        <MyazaButton
+          label="Add a person"
+          variant="outline"
+          leadingIcon="user-plus"
+          onPress={() => setSheet({ mode: 'add' })}
+        />
+      ) : (
+        <MyazaText variant="bodySmall" color={colors.textMuted} style={{ textAlign: 'center' }}>
+          {`You can list up to ${MAX_KEY_PEOPLE_ROWS} people here.`}
+        </MyazaText>
+      )}
+      {/* Breathing room between the add-person affordance and the summary bar —
+          matches the Flutter screen's SizedBox after its outline button. */}
+      <View style={{ height: spacing.md }} />
+
+      {/* Total-ownership summary at the DECISION point — the disabled Continue
+          button always explains itself, wherever the offending card is. */}
+      {totalPct > 0 ? (
         <View
           style={{
-            borderWidth: 1,
-            borderColor: `${colors.error}4D`,
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            backgroundColor: overAllocated ? colors.errorBg : colors.backgroundSecondary,
             borderRadius: radius.sm,
-            backgroundColor: colors.errorBg,
-            padding: spacing.md,
-            marginTop: hint ? spacing.sm : 0,
+            paddingHorizontal: spacing.md,
+            paddingVertical: spacing.sm + 4,
           }}
         >
-          <MyazaText variant="bodySmall" color={colors.error}>
-            {`The ownership percentages add up to ${totalPct}% — together they can't exceed 100%.`}
+          <MyazaText variant="bodySmall" color={overAllocated ? colors.error : colors.textMuted}>
+            Total ownership listed
+          </MyazaText>
+          <MyazaText
+            variant="bodySmall"
+            color={overAllocated ? colors.error : colors.textDark}
+            style={{ fontWeight: '700' }}
+          >
+            {`${fmtPct(totalPct)}%`}
           </MyazaText>
         </View>
       ) : null}
-
-      {rows.map((row, index) => (
-        <BusinessKeyPersonRow
-          key={index}
-          row={row}
-          index={index}
-          onChange={(patch) => update(index, patch)}
-          onRemove={() => remove(index)}
-          uboThreshold={config.business?.keyPeople?.ownershipThreshold}
-        />
-      ))}
-
-      <View style={{ height: spacing.md }} />
-      {rows.length < MAX_KEY_PEOPLE_ROWS ? (
-        <MyazaButton label="Add a person" variant="outline" leadingIcon="user-plus" onPress={add} />
-      ) : (
-        <MyazaText variant="bodySmall" color={colors.textMuted} style={{ textAlign: 'center' }}>
-          {`You can list up to ${MAX_KEY_PEOPLE_ROWS} people here.`}
+      {overAllocated ? (
+        <MyazaText variant="bodySmall" color={colors.error} style={{ marginTop: spacing.xs }}>
+          {`Together the percentages can't exceed 100% — reduce them by ${fmtPct(totalPct - 100)}%.`}
         </MyazaText>
-      )}
+      ) : null}
 
-      <View style={{ height: spacing.sm }} />
+      <View style={{ height: spacing.md }} />
       <MyazaButton label="Continue" onPress={handleContinue} disabled={!canContinue} />
+
+      {sheet && (sheet.mode === 'add' || editEntry) ? (
+        <KeyPersonSheet
+          mode={sheet.mode}
+          initial={editEntry ?? { ...emptyKeyPerson(), country: defaultCountry }}
+          uboThreshold={uboThreshold}
+          otherPctTotal={editEntry ? totalPct - pctOf(editEntry) : totalPct}
+          onSave={handleSave}
+          onRemove={sheet.mode === 'edit' ? handleRemove : undefined}
+          onClose={() => setSheet(null)}
+        />
+      ) : 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/{BusinessKeyPersonRow.tsx → KeyPersonForm.tsx}

@@ -1,14 +1,13 @@
 import React, { useMemo } from 'react';
-import { Pressable, View } from 'react-native';
+import { View } from 'react-native';
 
-import { radius, spacing } from '../config/theme';
+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 { Icon } from '../components/Icon';
 import { ALL_REGION_CODES, regionCountryName } from '../config/regions';
 import { isValidContactEmail } from '../config/contact';
 import {
@@ -19,20 +18,18 @@ import {
 import type { KeyPersonRole } from '../types/business';
 
 // ---------------------------------------------------------------------------
-// One editable director/owner row — mirrors the web SDK's BusinessKeyPersonRow
-// and the Flutter row 1:1: bordered card, "PERSON N" header with remove, then
-// full name → role (select) → ownership % → country (full ISO select — a key
-// person's ID can be issued anywhere, not just the registry country) → email.
-// Validation is LIVE per field, like the web: a broken value says so as it is
-// typed, while blank optional fields stay quiet.
+// 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 row's role is an ownership one (% is only meaningful then). */
+/** 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 rows. */
+/** 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]
@@ -41,66 +38,44 @@ function allCountryOptions(): DialCodeOption[] {
   return countryOptions;
 }
 
-export function BusinessKeyPersonRow({
-  row,
-  index,
+export function KeyPersonForm({
+  entry,
   onChange,
-  onRemove,
   uboThreshold = 25,
+  combinedPctError = null,
 }: {
-  row: KeyPersonEntry;
-  index: number;
+  entry: KeyPersonEntry;
   onChange: (patch: Partial<KeyPersonEntry>) => void;
-  onRemove: () => 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 = row.name !== '' && row.name.trim().length < 2;
-  const emailInvalid = row.email.trim() !== '' && !isValidContactEmail(row.email.trim());
-  const pct = row.ownershipPct.trim();
+  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 && row.role !== 'beneficial_owner';
+    !pctInvalid && pct !== '' && pctNum >= uboThreshold && entry.role !== 'beneficial_owner';
 
   return (
-    <View
-      style={{
-        borderWidth: 1,
-        borderColor: colors.border,
-        borderRadius: radius.sm,
-        padding: spacing.md,
-        marginTop: spacing.sm + 4,
-      }}
-    >
-      <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: spacing.sm }}>
-        <MyazaText
-          variant="bodySmall"
-          color={colors.textSecondary}
-          style={{ flex: 1, fontWeight: '600', letterSpacing: 0.6 }}
-        >
-          {`PERSON ${index + 1}`}
-        </MyazaText>
-        <Pressable
-          onPress={onRemove}
-          accessibilityRole="button"
-          accessibilityLabel={`Remove person ${index + 1}`}
-          hitSlop={8}
-        >
-          <Icon name="close" size={16} color={colors.textMuted} />
-        </Pressable>
-      </View>
-
+    <View>
       <MyazaInput
         label="Full name"
-        value={row.name}
+        value={entry.name}
         onChangeText={(name) => onChange({ name })}
         placeholder="e.g. Bola Owner"
         // It's a person's name — start every word capitalized.
@@ -113,7 +88,7 @@ export function BusinessKeyPersonRow({
         Role
       </MyazaText>
       <MyazaSelect
-        value={row.role}
+        value={entry.role}
         sheetTitle="Role"
         options={KEY_PERSON_ROLES.map((role) => ({
           value: role,
@@ -125,16 +100,16 @@ export function BusinessKeyPersonRow({
       <View style={{ height: spacing.sm }} />
       <MyazaInput
         label="Ownership % (optional)"
-        value={row.ownershipPct}
+        value={entry.ownershipPct}
         onChangeText={(ownershipPct) => onChange({ ownershipPct })}
-        placeholder={isOwnerRole(row.role) ? 'e.g. 60' : '—'}
+        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.' : null}
+        error={pctInvalid ? 'Enter a value between 0 and 100.' : combinedPctError}
         helper={
           uboHint
             ? `At ${uboThreshold}% or more, this person counts as a beneficial owner.`
@@ -144,13 +119,16 @@ export function BusinessKeyPersonRow({
 
       <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>
+        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={row.country || null}
+        value={entry.country || null}
         options={options}
         onChange={(country) => onChange({ country })}
       />
@@ -158,7 +136,7 @@ export function BusinessKeyPersonRow({
       <View style={{ height: spacing.sm }} />
       <MyazaInput
         label="Email (optional — used to send their verification link)"
-        value={row.email}
+        value={entry.email}
         onChangeText={(email) => onChange({ email })}
         placeholder="name@company.com"
         keyboardType="email-address"

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>
+  );
+}

package/src/services/deviceMetadata.ts

@@ -14,7 +14,7 @@ export type DeviceType = 'mobile' | 'tablet' | 'desktop' | 'unknown';
  * Single source of truth for the SDK version — also used by `services/api.ts`
  * for the `X-SDK-Version` header. Keep in sync with `package.json`.
  */
-export const SDK_VERSION = '2.1.0';
+export const SDK_VERSION = '2.2.0';
 
 export interface ReactNativeDeviceMetadata {
   sdkType: 'react-native';