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

package/src/screens/KeyPeopleSectionsList.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { useTheme } from '../components/runtime';
+import { spacing } from '../config/theme';
+import {
+  grantRole,
+  quickAddCandidates,
+  sectionMembers,
+  withoutSection,
+  type KeyPeopleSection as SectionKey,
+} from '../config/keyPeopleSections';
+import type { KeyPeopleSectionDef } from '../config/keyPeopleSectionDefs';
+import { KeyPeopleSection } from './KeyPeopleSection';
+import { KeyPeopleUboExemption } from './KeyPeopleUboExemption';
+import type { KeyPersonEntry } from '../config/keyPeople';
+import type { KeyPersonRole } from '../types/business';
+
+// The stacked sections with their shared-list plumbing: quick-add grants an
+// existing person the section's hat, and the card's X takes them out of that
+// section — dropping just the hat when membership rested on it, or the whole
+// person when a declared stake (or a last remaining hat) is what holds them
+// there. Split from BusinessKeyPeopleStep (200-line rule); mirrors the web
+// SDK's KeyPeopleSectionsList 1:1.
+
+export function KeyPeopleSectionsList({
+  sections,
+  rows,
+  threshold,
+  emailRequiredFor,
+  uboUnidentifiable,
+  canAdd,
+  onRows,
+  onSheet,
+  onExemption,
+}: {
+  sections: KeyPeopleSectionDef[];
+  rows: KeyPersonEntry[];
+  threshold: number;
+  emailRequiredFor: ReadonlySet<KeyPersonRole>;
+  uboUnidentifiable: boolean;
+  canAdd: boolean;
+  onRows: (next: KeyPersonEntry[]) => void;
+  onSheet: (sheet: { mode: 'add' | 'edit'; section: SectionKey; index?: number }) => void;
+  onExemption: (next: boolean) => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  const members = sectionMembers(rows, threshold);
+
+  const removeFromSection = (section: SectionKey, index: number): void => {
+    const next = withoutSection(rows[index]!, section, threshold);
+    onRows(
+      next === null
+        ? rows.filter((_, i) => i !== index)
+        : rows.map((row, i) => (i === index ? next : row)),
+    );
+  };
+
+  return (
+    <View>
+      {sections.map(({ key, title, description, addLabel }, i) => (
+        <React.Fragment key={key}>
+          {i > 0 ? (
+            <View
+              style={{
+                borderTopWidth: 1,
+                borderTopColor: colors.border,
+                marginVertical: spacing.lg,
+              }}
+            />
+          ) : null}
+          <KeyPeopleSection
+            section={key}
+            title={title}
+            description={description}
+            rows={rows}
+            members={members[key]}
+            quickAdd={
+              key === 'ubos' && uboUnidentifiable ? [] : quickAddCandidates(rows, key, threshold)
+            }
+            emailRequiredFor={emailRequiredFor}
+            addLabel={addLabel}
+            canAdd={canAdd && !(key === 'ubos' && uboUnidentifiable)}
+            onAdd={() => onSheet({ mode: 'add', section: key })}
+            onEdit={(index) => onSheet({ mode: 'edit', section: key, index })}
+            onRemove={(index) => removeFromSection(key, index)}
+            onQuickAdd={(index) =>
+              onRows(rows.map((row, i2) => (i2 === index ? grantRole(row, key) : row)))
+            }
+          >
+            {key === 'ubos' ? (
+              <KeyPeopleUboExemption
+                checked={uboUnidentifiable}
+                hasUbos={members.ubos.length > 0}
+                onChange={onExemption}
+              />
+            ) : null}
+          </KeyPeopleSection>
+        </React.Fragment>
+      ))}
+    </View>
+  );
+}

package/src/screens/KeyPeopleUboExemption.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Pressable, View } from 'react-native';
+
+import { Icon } from '../components/Icon';
+import { MyazaText } from '../components/Typography';
+import { useTheme } from '../components/runtime';
+import { spacing } from '../config/theme';
+
+// The FATF fallback, attested: some companies genuinely have no natural
+// person who qualifies as a UBO (listed companies, complex trusts, nominee
+// arrangements), and without this box the applicant's only moves were to
+// stall or to invent one. It is an attestation the org can branch on, never a
+// verdict — and it is disabled the moment a UBO is listed, because the two
+// claims contradict. Mirrors the web SDK's KeyPeopleUboExemption.
+
+export function KeyPeopleUboExemption({
+  checked,
+  hasUbos,
+  onChange,
+}: {
+  checked: boolean;
+  hasUbos: boolean;
+  onChange: (checked: boolean) => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  return (
+    <View style={{ marginTop: spacing.sm + 4 }}>
+      <Pressable
+        accessibilityRole="checkbox"
+        accessibilityState={{ checked, disabled: hasUbos }}
+        disabled={hasUbos}
+        onPress={() => onChange(!checked)}
+        style={{
+          flexDirection: 'row',
+          alignItems: 'flex-start',
+          gap: 12,
+          opacity: hasUbos ? 0.5 : 1,
+        }}
+      >
+        <View
+          style={{
+            width: 20,
+            height: 20,
+            marginTop: 1,
+            borderRadius: 6,
+            borderWidth: 1.5,
+            borderColor: checked ? colors.primary : colors.border,
+            backgroundColor: checked ? colors.primary : 'transparent',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          {checked ? <Icon name="check" size={13} color={colors.onPrimary} /> : null}
+        </View>
+        <MyazaText variant="bodyMedium" color={colors.textSecondary} style={{ flex: 1 }}>
+          UBOs cannot be identified due to public share structures, complex trusts or nominee
+          arrangements.
+        </MyazaText>
+      </Pressable>
+      {checked && !hasUbos ? (
+        <MyazaText
+          variant="bodySmall"
+          color={colors.textSecondary}
+          style={{ marginTop: 6, paddingLeft: 32 }}
+        >
+          We will record this with the application; a senior person is still identified through
+          the applicant's own verification.
+        </MyazaText>
+      ) : null}
+    </View>
+  );
+}

package/src/screens/KeyPersonCard.tsx

@@ -7,12 +7,14 @@ import { MyazaText } from '../components/Typography';
 import { Icon } from '../components/Icon';
 import { CountryFlag } from '../components/CountryFlag';
 import {
+  rowNeedsEmail,
   KEY_PERSON_ROLE_LABELS,
   initialsOf,
   isKeyPersonRowValid,
   type KeyPersonEntry,
 } from '../config/keyPeople';
 import { regionCountryName } from '../config/regions';
+import type { KeyPersonRole } from '../types/business';
 
 // ---------------------------------------------------------------------------
 // One saved key person, summarised — monogram avatar with their ID-issuing
@@ -27,20 +29,39 @@ import { regionCountryName } from '../config/regions';
 
 export function KeyPersonCard({
   entry,
+  emailRequiredFor,
   onPress,
+  roleLabel,
+  onRemove,
 }: {
   entry: KeyPersonEntry;
+  emailRequiredFor?: ReadonlySet<KeyPersonRole>;
   onPress: () => void;
+  /** Names the hat the HOSTING section is about (sectioned step). */
+  roleLabel?: string;
+  /** The sectioned step's X: take this person out of that section. */
+  onRemove?: () => 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);
+  // incomplete — the card says so instead of silently blocking Continue. A
+  // missing REQUIRED email gets named specifically: "incomplete" on a row
+  // whose name, role and country are all filled reads as a bug.
+  const required = emailRequiredFor ?? new Set<KeyPersonRole>();
+  const incomplete = !isKeyPersonRowValid(entry, required);
+  const problem =
+    rowNeedsEmail(entry, required) && entry.email.trim() === '' && entry.name.trim().length >= 2
+      ? 'Email required, tap to add'
+      : 'Incomplete, tap to finish';
 
-  const meta = [KEY_PERSON_ROLE_LABELS[entry.role], pct ? `${pct}% ownership` : null]
+  const meta = [
+    roleLabel ?? KEY_PERSON_ROLE_LABELS[entry.role],
+    entry.title.trim() || null,
+    pct ? `${pct}% ownership` : null,
+  ]
     .filter(Boolean)
     .join(' · ');
   // The flag alone doesn't say WHICH country — spell it out, alongside the
@@ -104,7 +125,7 @@ export function KeyPersonCard({
         </MyazaText>
         {incomplete ? (
           <MyazaText variant="bodySmall" color={colors.error} numberOfLines={1} style={{ marginTop: 1 }}>
-            Incomplete — tap to finish
+            {problem}
           </MyazaText>
         ) : detail !== '' ? (
           <MyazaText variant="bodySmall" color={colors.textMuted} numberOfLines={1} style={{ marginTop: 1 }}>
@@ -114,6 +135,17 @@ export function KeyPersonCard({
       </View>
 
       <Icon name="pencil" size={16} color={colors.textMuted} />
+      {onRemove ? (
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={`Remove ${name} from this section`}
+          hitSlop={8}
+          onPress={onRemove}
+          style={{ marginLeft: 4, padding: 4 }}
+        >
+          <Icon name="close" size={16} color={colors.textMuted} />
+        </Pressable>
+      ) : null}
     </Pressable>
   );
 }

package/src/screens/KeyPersonForm.tsx

@@ -1,27 +1,34 @@
-import React, { useMemo } from 'react';
-import { View } from 'react-native';
+import React, { useMemo, useState } from 'react';
+import { Pressable, View } from 'react-native';
 
-import { spacing } from '../config/theme';
+import { radius, 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 { Icon } from '../components/Icon';
+import { OwnershipSlider } from '../components/OwnershipSlider';
 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 { rowNeedsEmail, type KeyPersonEntry } from '../config/keyPeople';
 import {
-  KEY_PERSON_ROLES,
-  KEY_PERSON_ROLE_LABELS,
-  type KeyPersonEntry,
-} from '../config/keyPeople';
+  primaryRole,
+  rolesOf,
+  type KeyPeopleSection as SectionKey,
+} from '../config/keyPeopleSections';
 import type { KeyPersonRole } from '../types/business';
+import { KeyPersonKindToggle } from './KeyPersonKindToggle';
+import { KeyPersonOwners } from './KeyPersonOwners';
+import { KeyPersonRoleChips } from './KeyPersonRoleChips';
 
 // ---------------------------------------------------------------------------
-// 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.
+// The key-person FIELDS, scoped by the SECTION that opened the sheet: the
+// section already said what this person is, so no coarse role dropdown — the
+// UBO form asks name/stake/country/email, the shareholder form adds the
+// individual-or-company toggle, and the representative form picks between the
+// real classifications (chips) with the human nuance ("CFO, Board Member")
+// captured as a free-text title. Mirrors the web SDK's KeyPersonForm 1:1.
 // ---------------------------------------------------------------------------
 
 /** Whether the role is an ownership one (% is only meaningful then). */
@@ -40,12 +47,22 @@ function allCountryOptions(): DialCodeOption[] {
 
 export function KeyPersonForm({
   entry,
+  section,
+  corporateKyb = false,
   onChange,
   uboThreshold = 25,
   combinedPctError = null,
+  emailRequiredFor,
 }: {
   entry: KeyPersonEntry;
+  /** The section whose add-tile or card opened the sheet. */
+  section: SectionKey;
+  /** The workflow sends corporate shareholders their own KYB application -
+   *  the callout must tell that truth instead of the screening-only one. */
+  corporateKyb?: boolean;
   onChange: (patch: Partial<KeyPersonEntry>) => void;
+  /** Roles whose email is mandatory (they are sent a verification link). */
+  emailRequiredFor?: ReadonlySet<KeyPersonRole>;
   /** Ownership % at/above which the server treats a person as a beneficial
    *  owner (the workflow's `keyPeople.ownershipThreshold`, default 25). */
   uboThreshold?: number;
@@ -62,47 +79,97 @@ export function KeyPersonForm({
 
   const nameInvalid = entry.name !== '' && entry.name.trim().length < 2;
   const emailInvalid = entry.email.trim() !== '' && !isValidContactEmail(entry.email.trim());
+  const needsEmail = rowNeedsEmail(entry, emailRequiredFor ?? new Set());
+  // COLLAPSED by default so the company sheet stays five fields; open when
+  // owners already exist (a restored draft, a look-through find). The
+  // capability is one tap away, not one field more. Mirrors the web SDK.
+  const [showOwners, setShowOwners] = useState((entry.owners?.length ?? 0) > 0);
   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 corp = entry.isCorporate;
+  const roles = rolesOf(entry);
   const uboHint =
-    !pctInvalid && pct !== '' && pctNum >= uboThreshold && entry.role !== 'beneficial_owner';
+    !corp && !pctInvalid && pct !== '' && pctNum >= uboThreshold && !roles.includes('beneficial_owner');
+  const belowThresholdNote =
+    section === 'ubos' && !pctInvalid && pct !== '' && pctNum > 0 && pctNum < uboThreshold;
+
+  const setRoles = (next: KeyPersonRole[]): void =>
+    onChange({ roles: next, role: primaryRole(next) });
 
   return (
     <View>
+      {/* Only shareholders can be a company: a beneficial owner is a natural
+          person in every regime that defines one, and a representative form
+          is about the people who act. */}
+      {section === 'shareholders' ? (
+        <>
+          <KeyPersonKindToggle
+            isCorporate={corp}
+            onChange={(isCorporate) =>
+              // Beneficial ownership is a claim about a person, so switching
+              // to a company reads the role set down rather than leaving an
+              // impossible one.
+              onChange({
+                isCorporate,
+                ...(isCorporate
+                  ? {
+                      roles: roles.map((r) => (r === 'beneficial_owner' ? 'shareholder' : r)),
+                      role: primaryRole(
+                        roles.map((r) => (r === 'beneficial_owner' ? 'shareholder' : r)),
+                      ),
+                    }
+                  : { registrationNumber: '', owners: [] }),
+              })
+            }
+          />
+          <View style={{ height: spacing.sm }} />
+        </>
+      ) : null}
       <MyazaInput
-        label="Full name"
+        label={corp ? 'Company name' : 'Full name'}
         value={entry.name}
         onChangeText={(name) => onChange({ name })}
-        placeholder="e.g. Bola Owner"
-        // It's a person's name — start every word capitalized.
+        placeholder={corp ? 'e.g. Acme Holdings Ltd' : 'e.g. Bola Owner'}
+        // It's a name — start every word capitalized.
         autoCapitalize="words"
-        error={nameInvalid ? 'Enter the person’s full name.' : null}
+        error={
+          nameInvalid
+            ? `Enter the ${corp ? 'registered company name' : '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 })}
-      />
+      {section === 'representatives' ? (
+        <>
+          <View style={{ height: spacing.sm }} />
+          <KeyPersonRoleChips roles={roles} onRoles={setRoles} />
+        </>
+      ) : null}
+
+      {!corp ? (
+        <>
+          <View style={{ height: spacing.sm }} />
+          <MyazaInput
+            label="Position or title (optional)"
+            value={entry.title}
+            onChangeText={(title) => onChange({ title })}
+            placeholder="e.g. CFO, Board Member"
+            autoCapitalize="words"
+            autoCorrect={false}
+          />
+        </>
+      ) : null}
 
       <View style={{ height: spacing.sm }} />
       <MyazaInput
         label="Ownership % (optional)"
         value={entry.ownershipPct}
         onChangeText={(ownershipPct) => onChange({ ownershipPct })}
-        placeholder={isOwnerRole(entry.role) ? 'e.g. 60' : '—'}
+        placeholder="0"
         keyboardType="decimal-pad"
         suffix={
           <MyazaText variant="bodySmall" color={colors.textMuted}>
@@ -113,15 +180,37 @@ export function KeyPersonForm({
         helper={
           uboHint
             ? `At ${uboThreshold}% or more, this person counts as a beneficial owner.`
-            : undefined
+            : belowThresholdNote
+              ? `Below ${uboThreshold}% they will be recorded as a shareholder.`
+              : undefined
         }
       />
+      <View style={{ height: spacing.xs }} />
+      {/* The slider rests at 0 for an undeclared stake; only a drag writes a
+          value, so an untouched slider still submits "not declared". */}
+      <OwnershipSlider
+        value={pct !== '' && Number.isFinite(Number(pct)) ? Number(pct) : 0}
+        onChange={(next) => onChange({ ownershipPct: String(next) })}
+      />
+
+      {corp ? (
+        <>
+          <View style={{ height: spacing.sm }} />
+          <MyazaInput
+            label="Registration number (optional)"
+            value={entry.registrationNumber}
+            onChangeText={(registrationNumber) => onChange({ registrationNumber })}
+            placeholder="e.g. RC123456"
+            autoCapitalize="characters"
+          />
+        </>
+      ) : null}
 
       <View style={{ height: spacing.sm }} />
-      <MyazaText variant="bodySmall" style={{ fontWeight: '600', marginBottom: spacing.xs }}>
+      <MyazaText variant="label" style={{ marginBottom: spacing.sm }}>
         Country{' '}
-        <MyazaText variant="bodySmall" color={colors.textSecondary}>
-          (where their ID was issued)
+        <MyazaText variant="bodyMedium" color={colors.textSecondary}>
+          {corp ? '(of incorporation)' : '(where their ID was issued)'}
         </MyazaText>
       </MyazaText>
       {/* The SAME sheet as the phone field's dial-code picker (keyboard-aware,
@@ -133,16 +222,86 @@ export function KeyPersonForm({
         onChange={(country) => onChange({ country })}
       />
 
+      {corp && !showOwners ? (
+        <>
+          <View style={{ height: spacing.sm }} />
+          <Pressable
+            accessibilityRole="button"
+            onPress={() => setShowOwners(true)}
+            hitSlop={8}
+            style={{ flexDirection: 'row', alignItems: 'center', gap: 6, alignSelf: 'flex-start' }}
+          >
+            <Icon name="chevron-right" size={16} color={colors.textSecondary} />
+            <MyazaText
+              variant="bodyMedium"
+              color={colors.textSecondary}
+              style={{ fontWeight: '500' }}
+            >
+              Add the people who own it (optional)
+            </MyazaText>
+          </Pressable>
+        </>
+      ) : null}
+      {corp && showOwners ? (
+        <>
+          <View style={{ height: spacing.sm }} />
+          <KeyPersonOwners
+            owners={entry.owners ?? []}
+            companyName={entry.name}
+            onChange={(owners) => onChange({ owners })}
+          />
+        </>
+      ) : null}
+
       <View style={{ height: spacing.sm }} />
       <MyazaInput
-        label="Email (optional — used to send their verification link)"
+        label={
+          needsEmail
+            ? 'Email *'
+            : corp
+              ? 'Email (optional)'
+              : '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}
+        helper={
+          needsEmail && entry.email.trim() === ''
+            ? 'Required: this is how they receive their own verification link.'
+            : undefined
+        }
       />
+
+      {/* What actually happens to a company on this list, stated as a callout
+          rather than buried in a field helper, because it answers the question
+          every applicant has at this exact point ("is the company going to be
+          asked for a selfie?"). Deliberately OUR facts, not a promise of a
+          nested KYB we do not run. Mirrors the web SDK's callout. */}
+      {corp ? (
+        <View
+          style={{
+            marginTop: spacing.md,
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            gap: 10,
+            borderRadius: radius.sm,
+            backgroundColor: colors.primary50,
+            padding: 12,
+          }}
+        >
+          <View style={{ marginTop: 2 }}>
+            <Icon name="info" size={16} color={colors.primary} />
+          </View>
+          <MyazaText variant="bodyMedium" color={colors.textSecondary} style={{ flex: 1 }}>
+            {corporateKyb
+              ? 'This company will need its own KYB verification: it receives a link to a business application of its own, where the people who own it are identified. We also screen it against sanctions lists.'
+              : 'A company is never asked to verify an identity. We check it against sanctions lists, and the people who own it are reviewed separately, so list its owners above if you know them.'}
+          </MyazaText>
+        </View>
+      ) : null}
     </View>
   );
 }

package/src/screens/KeyPersonKindToggle.tsx

@@ -0,0 +1,68 @@
+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';
+
+// Person or company.
+//
+// The first question on the form, because it changes what the rest of it asks:
+// a company has a registration number rather than an ID country, and no
+// identity of its own to verify. Left unasked, a limited company was collected
+// as a person, escalated to beneficial owner (which by definition means a
+// natural person), and sent a link to take a selfie.
+
+export function KeyPersonKindToggle({
+  isCorporate,
+  onChange,
+}: {
+  isCorporate: boolean;
+  onChange: (isCorporate: boolean) => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  const options: Array<{ value: boolean; label: string }> = [
+    { value: false, label: 'A person' },
+    { value: true, label: 'A company' },
+  ];
+
+  return (
+    <View>
+      <MyazaText variant="bodySmall" style={{ fontWeight: '600', marginBottom: spacing.xs }}>
+        Who is this?
+      </MyazaText>
+      <View style={{ flexDirection: 'row', gap: spacing.sm }}>
+        {options.map(({ value, label }) => {
+          const selected = isCorporate === value;
+          return (
+            <Pressable
+              key={label}
+              accessibilityRole="radio"
+              accessibilityState={{ selected }}
+              accessibilityLabel={label}
+              onPress={() => onChange(value)}
+              style={{
+                flex: 1,
+                height: 44,
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderRadius: radius.lg,
+                borderWidth: 1,
+                borderColor: selected ? colors.primary : colors.border,
+                backgroundColor: selected ? `${colors.primary}1A` : 'transparent',
+              }}
+            >
+              <MyazaText
+                variant="bodySmall"
+                style={{ fontWeight: '600' }}
+                color={selected ? colors.primary : colors.textSecondary}
+              >
+                {label}
+              </MyazaText>
+            </Pressable>
+          );
+        })}
+      </View>
+    </View>
+  );
+}