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

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

package/src/screens/KeyPersonSheet.tsx

@@ -1,53 +1,65 @@
 import React, { useEffect, useState } from 'react';
-import {
-  Keyboard,
-  Modal,
-  Platform,
-  Pressable,
-  ScrollView,
-  useWindowDimensions,
-  View,
-} from 'react-native';
+import { Keyboard, Platform, Pressable, ScrollView, useWindowDimensions, 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 { MyazaButton } from '../components/MyazaButton';
-import { Icon } from '../components/Icon';
+import { FloatingSheet } from '../components/glass/FloatingSheet';
 import { KeyPersonForm } from './KeyPersonForm';
 import { isKeyPersonRowValid, type KeyPersonEntry } from '../config/keyPeople';
+import type { KeyPeopleSection as SectionKey } from '../config/keyPeopleSections';
+import type { KeyPersonRole } from '../types/business';
+
+/** What the sheet calls itself, per the section that opened it. */
+const ADD_TITLES: Record<SectionKey, string> = {
+  ubos: 'Add a beneficial owner',
+  shareholders: 'Add a shareholder',
+  representatives: 'Add a representative',
+};
 
 // ---------------------------------------------------------------------------
 // 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).
+// cards; the FORM lives here — the same liquid-glass FloatingSheet every other
+// picker in the SDK rides (handle, glass surface, swipe-down), so the two
+// sheet kinds feel like one system. 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.
+// Save is enabled once the draft is valid (including a REQUIRED email when the
+// workflow demands one for the role). 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,
+  section,
+  corporateKyb = false,
   initial,
   uboThreshold,
   otherPctTotal,
+  emailRequiredFor,
   onSave,
   onRemove,
   onClose,
 }: {
   mode: 'add' | 'edit';
+  /** The section whose add-tile or card opened the sheet. */
+  section: SectionKey;
+  /** The workflow sends corporate shareholders their own KYB application. */
+  corporateKyb?: boolean;
   initial: KeyPersonEntry;
   uboThreshold?: number;
   /** Sum of every OTHER person's ownership % — for the combined warning. */
   otherPctTotal: number;
+  /** Roles whose email is mandatory (they are sent a verification link). */
+  emailRequiredFor?: ReadonlySet<KeyPersonRole>;
   onSave: (entry: KeyPersonEntry) => void;
   /** Edit mode only — removes the person and closes. */
   onRemove?: () => void;
@@ -82,103 +94,75 @@ export function KeyPersonSheet({
   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)}%.`
+      ? `Combined ownership would be ${fmtPct(combinedTotal)}%, over by ${fmtPct(combinedTotal - 100)}%.`
       : null;
 
-  const canSave = isKeyPersonRowValid(draft) && draft.name.trim().length >= 2;
+  const canSave =
+    isKeyPersonRowValid(draft, emailRequiredFor ?? new Set()) && 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"
+    <FloatingSheet
+      visible
+      onClose={onClose}
+      maxHeight={maxHeight}
+      // Ride above a raised keyboard — this sheet is a form.
+      bottomOffset={keyboard}
+      closeLabel="Close person editor"
+    >
+      <MyazaText
+        variant="body"
         style={{
-          flex: 1,
-          backgroundColor: 'rgba(0,0,0,0.45)',
-          justifyContent: 'flex-end',
+          fontWeight: '700',
+          paddingHorizontal: spacing.md,
+          // Tight under the handle, the way the system sheet titles sit.
+          paddingTop: spacing.xs,
+          paddingBottom: spacing.sm,
         }}
       >
-        <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>
+        {mode === 'add' ? ADD_TITLES[section] : draft.isCorporate ? 'Edit company' : 'Edit person'}
+      </MyazaText>
 
-        <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>
+      <ScrollView
+        bounces={false}
+        keyboardShouldPersistTaps="handled"
+        contentContainerStyle={{ paddingHorizontal: spacing.md, paddingBottom: spacing.sm }}
+      >
+        <KeyPersonForm
+          entry={draft}
+          section={section}
+          corporateKyb={corporateKyb}
+          onChange={(patch) => setDraft((d) => ({ ...d, ...patch }))}
+          uboThreshold={uboThreshold}
+          combinedPctError={combinedPctError}
+          emailRequiredFor={emailRequiredFor}
+        />
+      </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>
+      <View style={{ paddingHorizontal: spacing.md, paddingTop: spacing.sm }}>
+        <MyazaButton
+          label={mode === 'add' ? (draft.isCorporate ? 'Add company' : '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="bodyMedium" color={colors.error} style={{ fontWeight: '600' }}>
+              {draft.isCorporate ? 'Remove this company' : 'Remove this person'}
+            </MyazaText>
+          </Pressable>
+        ) : null}
+      </View>
+    </FloatingSheet>
   );
 }

package/src/screens/LivenessAvatar.tsx

@@ -17,9 +17,21 @@ const GIFS: Record<LivenessChallenge, number> = {
   smile: require('../assets/liveness/Smile.gif'),
 };
 
-const SIZE = 96;
+/** The badge on a tall phone; the step hands a smaller size down on a short one
+ *  (lib/livenessLayout), so the gesture stays on screen beside the circle. */
+const DEFAULT_SIZE = 96;
+const DEFAULT_ICON = 40;
 
-export function LivenessAvatar({ challenge }: { challenge: LivenessChallenge }): React.ReactElement {
+export function LivenessAvatar({
+  challenge,
+  size = DEFAULT_SIZE,
+  iconSize = DEFAULT_ICON,
+}: {
+  challenge: LivenessChallenge;
+  size?: number;
+  iconSize?: number;
+}): React.ReactElement {
+  const SIZE = size;
   const { colors } = useTheme();
   const [displayed, setDisplayed] = useState<LivenessChallenge>(challenge);
   const [broken, setBroken] = useState(false);
@@ -55,7 +67,7 @@ export function LivenessAvatar({ challenge }: { challenge: LivenessChallenge }):
       }}
     >
       {broken ? (
-        <Icon name="scan-face" size={40} color={colors.primary} />
+        <Icon name="scan-face" size={iconSize} color={colors.primary} />
       ) : (
         <Image
           source={GIFS[displayed]}