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

package/src/screens/KeyPeopleSection.tsx

@@ -0,0 +1,162 @@
+import React from 'react';
+import { Pressable, View } from 'react-native';
+
+import { DashedBorder } from '../components/DashedBorder';
+import { Icon } from '../components/Icon';
+import { MyazaText } from '../components/Typography';
+import { useTheme } from '../components/runtime';
+import { radius, spacing } from '../config/theme';
+import { KEY_PERSON_ROLE_LABELS, type KeyPersonEntry } from '../config/keyPeople';
+import { SECTION_ROLE, type KeyPeopleSection as SectionKey } from '../config/keyPeopleSections';
+import { KeyPersonCard } from './KeyPersonCard';
+import type { KeyPersonRole } from '../types/business';
+
+// One section of the key-people step — heading, plain-language definition,
+// member cards, quick-add chips for people already entered elsewhere, and the
+// dashed add-tile. Sections are VIEWS over one shared list
+// (keyPeopleSections.ts). Mirrors the web SDK's KeyPeopleSection 1:1.
+
+export function KeyPeopleSection({
+  section,
+  title,
+  description,
+  rows,
+  members,
+  quickAdd,
+  emailRequiredFor,
+  addLabel,
+  canAdd,
+  onAdd,
+  onEdit,
+  onRemove,
+  onQuickAdd,
+  children,
+}: {
+  section: SectionKey;
+  title: string;
+  description: string;
+  rows: KeyPersonEntry[];
+  members: number[];
+  quickAdd: number[];
+  emailRequiredFor: ReadonlySet<KeyPersonRole>;
+  addLabel: string;
+  canAdd: boolean;
+  onAdd: () => void;
+  onEdit: (index: number) => void;
+  onRemove: (index: number) => void;
+  onQuickAdd: (index: number) => void;
+  children?: React.ReactNode;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  return (
+    <View>
+      <MyazaText variant="heading3">{title}</MyazaText>
+      <MyazaText variant="bodyMedium" color={colors.textSecondary} style={{ marginTop: 2 }}>
+        {description}
+      </MyazaText>
+
+      {members.length > 0 ? (
+        <View style={{ marginTop: spacing.sm + 4 }}>
+          {members.map((index) => (
+            <KeyPersonCard
+              key={index}
+              entry={rows[index]!}
+              emailRequiredFor={emailRequiredFor}
+              // The card names the hat THIS section is about, so the same
+              // person reads "Beneficial owner" here and "Director" there.
+              roleLabel={KEY_PERSON_ROLE_LABELS[SECTION_ROLE[section]]}
+              onPress={() => onEdit(index)}
+              onRemove={() => onRemove(index)}
+            />
+          ))}
+        </View>
+      ) : null}
+
+      {quickAdd.length > 0 && canAdd ? (
+        <View style={{ marginTop: spacing.sm + 4 }}>
+          <MyazaText
+            variant="bodySmall"
+            color={colors.textSecondary}
+            style={{ textTransform: 'uppercase', letterSpacing: 0.6, fontWeight: '600' }}
+          >
+            Quick add from people you already entered
+          </MyazaText>
+          <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginTop: spacing.sm }}>
+            {quickAdd.map((index) => {
+              const row = rows[index]!;
+              return (
+                <Pressable
+                  key={index}
+                  accessibilityRole="button"
+                  onPress={() => onQuickAdd(index)}
+                  style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 8,
+                    borderWidth: 1,
+                    borderColor: colors.border,
+                    borderRadius: 999,
+                    paddingVertical: 6,
+                    paddingLeft: 12,
+                    paddingRight: 8,
+                  }}
+                >
+                  <Icon
+                    name={row.isCorporate ? 'building-2' : 'user'}
+                    size={16}
+                    color={colors.textSecondary}
+                  />
+                  <MyazaText
+                    variant="bodyMedium"
+                    color={colors.textDark}
+                    numberOfLines={1}
+                    style={{ fontWeight: '500', maxWidth: 160 }}
+                  >
+                    {row.name.trim()}
+                  </MyazaText>
+                  <View
+                    style={{
+                      width: 20,
+                      height: 20,
+                      borderRadius: 10,
+                      backgroundColor: colors.primary100,
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                    }}
+                  >
+                    <Icon name="plus" size={12} color={colors.primary} />
+                  </View>
+                </Pressable>
+              );
+            })}
+          </View>
+        </View>
+      ) : null}
+
+      {canAdd ? (
+        <Pressable
+          accessibilityRole="button"
+          onPress={onAdd}
+          style={{
+            marginTop: spacing.sm + 4,
+            borderRadius: radius.sm,
+            paddingVertical: 14,
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexDirection: 'row',
+            gap: 6,
+          }}
+        >
+          {/* The same tight dashed language as the document slots. */}
+          <DashedBorder color={colors.border} radius={radius.sm} />
+          <Icon name="plus" size={16} color={colors.primary} />
+          <MyazaText variant="bodyMedium" color={colors.primary} style={{ fontWeight: '600' }}>
+            {addLabel}
+          </MyazaText>
+        </Pressable>
+      ) : null}
+
+      {children}
+    </View>
+  );
+}

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