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

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

package/src/screens/KeyPersonOwners.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { Pressable, View } from 'react-native';
+
+import { spacing, radius } from '../config/theme';
+import { useTheme } from '../components/runtime';
+import { MyazaText } from '../components/Typography';
+import { MyazaInput } from '../components/MyazaInput';
+import { emptyKeyPersonOwner, type KeyPersonOwnerEntry } from '../config/keyPeople';
+
+const MAX_OWNERS = 10;
+
+// Who owns this company.
+//
+// A beneficial owner is a natural person, so a corporate shareholder is a
+// branch of the ownership chain that stops at a legal entity. Where the company
+// is registered somewhere we can look up, the server follows it. Where it is
+// not — a foreign parent, an offshore vehicle — this is the only route to the
+// people above it, and asking is better than recording nothing.
+//
+// Deliberately short: a name and a share. Everything else about them is
+// unknowable to the person filling in this form, and a longer list is one
+// people abandon.
+
+export function KeyPersonOwners({
+  owners,
+  onChange,
+  companyName,
+}: {
+  owners: KeyPersonOwnerEntry[];
+  onChange: (owners: KeyPersonOwnerEntry[]) => void;
+  companyName: string;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  const patch = (index: number, next: Partial<KeyPersonOwnerEntry>) =>
+    onChange(owners.map((o, i) => (i === index ? { ...o, ...next } : o)));
+
+  return (
+    <View
+      style={{
+        borderWidth: 1,
+        borderColor: colors.border,
+        borderRadius: radius.lg,
+        padding: spacing.md,
+      }}
+    >
+      <MyazaText variant="bodySmall" style={{ fontWeight: '600' }}>
+        Who owns {companyName.trim() || 'this company'}? (optional)
+      </MyazaText>
+      <MyazaText variant="bodySmall" color={colors.textSecondary} style={{ marginTop: 2 }}>
+        A company cannot verify an identity, so tell us the people behind it if you know them.
+      </MyazaText>
+
+      {owners.map((owner, index) => (
+        <View key={index} style={{ marginTop: spacing.sm }}>
+          <MyazaInput
+            label={`Owner ${index + 1}`}
+            value={owner.name}
+            onChangeText={(name) => patch(index, { name })}
+            placeholder="Full name"
+            autoCapitalize="words"
+          />
+          <View style={{ height: spacing.xs }} />
+          <MyazaInput
+            label="Their share (optional)"
+            value={owner.ownershipPct}
+            onChangeText={(ownershipPct) => patch(index, { ownershipPct })}
+            placeholder="e.g. 75"
+            keyboardType="decimal-pad"
+            suffix={
+              <MyazaText variant="bodySmall" color={colors.textMuted}>
+                %
+              </MyazaText>
+            }
+          />
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel={`Remove owner ${index + 1}`}
+            onPress={() => onChange(owners.filter((_, i) => i !== index))}
+            style={{ paddingVertical: spacing.xs, alignSelf: 'flex-start' }}
+          >
+            <MyazaText variant="bodySmall" color={colors.error}>
+              Remove
+            </MyazaText>
+          </Pressable>
+        </View>
+      ))}
+
+      {owners.length < MAX_OWNERS ? (
+        <Pressable
+          accessibilityRole="button"
+          onPress={() => onChange([...owners, emptyKeyPersonOwner()])}
+          style={{
+            marginTop: spacing.sm,
+            height: 40,
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: radius.md,
+            borderWidth: 1,
+            borderColor: colors.border,
+          }}
+        >
+          <MyazaText variant="bodySmall" style={{ fontWeight: '600' }} color={colors.primary}>
+            {owners.length === 0 ? 'Add an owner' : 'Add another'}
+          </MyazaText>
+        </Pressable>
+      ) : null}
+    </View>
+  );
+}

package/src/screens/KeyPersonRoleChips.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Pressable, View } from 'react-native';
+
+import { MyazaText } from '../components/Typography';
+import { useTheme } from '../components/runtime';
+import { spacing } from '../config/theme';
+import type { KeyPersonRole } from '../types/business';
+
+// The representative form's role chips — real classifications, not job titles
+// (those go in the free-text position field). Multi-select over the entry's
+// role SET, with the last representative hat pinned on: unticking it would
+// silently drop the person from the section they are being edited in.
+// Mirrors the web SDK's KeyPersonRoleChips.
+
+const REP_ROLES: Array<{ role: KeyPersonRole; label: string }> = [
+  { role: 'director', label: 'Director' },
+  { role: 'signatory', label: 'Signatory' },
+];
+
+export function KeyPersonRoleChips({
+  roles,
+  onRoles,
+}: {
+  roles: KeyPersonRole[];
+  onRoles: (next: KeyPersonRole[]) => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  const repCount = roles.filter((r) => r === 'director' || r === 'signatory').length;
+  return (
+    <View>
+      <MyazaText variant="label" style={{ marginBottom: spacing.sm }}>
+        Role
+      </MyazaText>
+      <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
+        {REP_ROLES.map(({ role, label }) => {
+          const active = roles.includes(role);
+          return (
+            <Pressable
+              key={role}
+              accessibilityRole="button"
+              accessibilityState={{ selected: active }}
+              onPress={() => {
+                if (active && repCount <= 1) return;
+                onRoles(active ? roles.filter((r) => r !== role) : [...roles, role]);
+              }}
+              style={{
+                borderRadius: 999,
+                borderWidth: 1,
+                borderColor: active ? colors.primary : colors.border,
+                backgroundColor: active ? colors.primary : 'transparent',
+                paddingHorizontal: 14,
+                paddingVertical: 7,
+              }}
+            >
+              <MyazaText
+                variant="bodyMedium"
+                color={active ? colors.onPrimary : colors.textSecondary}
+                style={{ fontWeight: '500' }}
+              >
+                {label}
+              </MyazaText>
+            </Pressable>
+          );
+        })}
+      </View>
+    </View>
+  );
+}