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

package/src/screens/BusinessKeyPeopleStep.tsx

@@ -1,57 +1,87 @@
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState, useMemo } from 'react';
 import { View } from 'react-native';
 
-import { radius, spacing } from '../config/theme';
+import { spacing } from '../config/theme';
 import { useKyc, useKycConfig, useKycStore, useTheme } from '../components/runtime';
 import { MyazaText } from '../components/Typography';
 import { MyazaButton } from '../components/MyazaButton';
-import { KeyPersonCard } from './KeyPersonCard';
+import { DashedBorder } from '../components/DashedBorder';
+import { KeyPeopleSectionsList } from './KeyPeopleSectionsList';
 import { KeyPersonSheet } from './KeyPersonSheet';
 import { keyPeopleMinEntries } from '../config/businessSteps';
 import {
+  keyPeopleRequireEmail,
   emptyKeyPerson,
   invalidKeyPersonRows,
-  isKeyPersonRowBlank,
   isKeyPersonRowValid,
   MAX_KEY_PEOPLE_ROWS,
   type KeyPersonEntry,
 } from '../config/keyPeople';
-import type { KeyPersonRole } from '../types/business';
+import { SECTION_ROLE, type KeyPeopleSection as SectionKey } from '../config/keyPeopleSections';
+import { defaultUboThreshold, keyPeopleSectionList } from '../config/keyPeopleSectionDefs';
+import { prefillKeyPeople, shouldPrefill } from '../config/keyPeoplePrefill';
+import { radius } from '../config/theme';
 
 // ---------------------------------------------------------------------------
-// Applicant-declared directors, owners and signatories.
+// The key-people step, sectioned: Beneficial owners / Shareholders /
+// Directors & representatives, each with a plain-language definition, its own
+// add-tile, and quick-add chips that grant a person already entered another
+// hat. The sections are VIEWS over one shared list (keyPeopleSections.ts):
+// one human can hold several roles, exactly as the register files them, and
+// a stake at the threshold moves them up on screen exactly as the server
+// will escalate them at submit.
 //
-// The registry lookup discovers people too, and the server reconciles the two:
-// someone the registry names who the applicant did NOT list is flagged
-// `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.
-//
-// 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.
+// The registry lookup discovers people too, and the server reconciles the
+// two: someone the registry names who the applicant did NOT list is flagged
+// `undisclosed` — what the applicant chooses to omit is evidence.
 // ---------------------------------------------------------------------------
 
 export const businessKeyPeopleMeta = {
-  title: 'Directors & owners',
-  description:
-    "List the company's directors and owners of 25% or more. Each will receive a link to verify their identity.",
+  title: 'Key people',
+  description: "Add the company's directors, shareholders and beneficial owners.",
 };
 
-type SheetState = { mode: 'add' } | { mode: 'edit'; index: number } | null;
+type SheetState = { mode: 'add' | 'edit'; section: SectionKey; 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 uboUnidentifiable = useKyc((s) => s.businessApplication.uboUnidentifiable);
   const registryCountry = useKyc((s) => s.business.country);
+  const officers = useKyc((s) => s.businessCheck.officers);
   const [sheet, setSheet] = useState<SheetState>(null);
 
+  // Start from the register's own officer list (fetched by the paid check at
+  // selection), so this is a confirmation rather than a memory test. Once
+  // only, and never over anything typed: an applicant who has already entered
+  // a name has told us something the register did not.
+  const prefilled = useRef(false);
+  useEffect(() => {
+    if (prefilled.current || officers.length === 0 || !shouldPrefill(rows)) return;
+    prefilled.current = true;
+    store.getState().setKeyPeople(prefillKeyPeople(officers, registryCountry ?? ''));
+    // rows is deliberately out of the dep list: this must run on the arrival
+    // of officers, not on every edit the applicant then makes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [officers, registryCountry]);
+
   const minEntries = keyPeopleMinEntries(config.business);
-  const validCount = rows.filter(isKeyPersonRowValid).length;
-  const invalidRows = invalidKeyPersonRows(rows);
-  const uboThreshold = config.business?.keyPeople?.ownershipThreshold ?? 25;
+  // Roles whose email is mandatory (the ones actually sent a verification
+  // link) — threaded into every validity read so the card, the sheet and the
+  // Continue gate agree on what "complete" means.
+  const emailRequiredFor = useMemo(
+    () => keyPeopleRequireEmail(config.business),
+    [config.business],
+  );
+  const validCount = rows.filter((r) => isKeyPersonRowValid(r, emailRequiredFor)).length;
+  const invalidRows = invalidKeyPersonRows(rows, emailRequiredFor);
+  // The same line the server draws: the workflow's own threshold, else the
+  // register's default (NG files significant control from a lower bar).
+  const threshold =
+    config.business?.keyPeople?.ownershipThreshold ??
+    defaultUboThreshold(registryCountry || config.business?.country);
 
   // Combined ownership above 100% is factually impossible — catch the typo
   // here rather than shipping it into the registry cross-check as a doomed
@@ -65,15 +95,17 @@ export function BusinessKeyPeopleStep(): React.ReactElement {
   const fmtPct = (n: number): string => (Number.isInteger(n) ? String(n) : n.toFixed(1));
 
   const canContinue = validCount >= minEntries && invalidRows.length === 0 && !overAllocated;
+  const canAdd = rows.length < MAX_KEY_PEOPLE_ROWS;
 
   // 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 sections = keyPeopleSectionList(config.business, threshold);
 
   const commit = (next: KeyPersonEntry[]): void => store.getState().setKeyPeople(next);
   const handleSave = (entry: KeyPersonEntry): void => {
-    if (sheet?.mode === 'edit') {
+    if (sheet?.mode === 'edit' && sheet.index != null) {
       commit(rows.map((row, i) => (i === sheet.index ? entry : row)));
     } else {
       commit([...rows, entry]);
@@ -81,26 +113,28 @@ export function BusinessKeyPeopleStep(): React.ReactElement {
     setSheet(null);
   };
   const handleRemove = (): void => {
-    if (sheet?.mode === 'edit') commit(rows.filter((_, i) => i !== sheet.index));
+    if (sheet?.mode === 'edit' && sheet.index != null) {
+      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;
+  // 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' && sheet.index != null ? 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.
-    commit(rows.filter(isKeyPersonRowValid));
+    commit(rows.filter((r) => isKeyPersonRowValid(r, emailRequiredFor)));
     store.getState().nextStep();
   };
 
   // The dashed hint boxes and their copy mirror the web SDK's step 1:1.
   const hint =
     rows.length === 0 && minEntries === 0
-      ? "You can skip this if you're unsure — we'll identify directors and owners from the official registry. Adding them here speeds up the review."
+      ? "You can skip this if you're unsure. We'll identify directors and owners from the official registry. Adding them here speeds up the review."
       : minEntries > 0 && validCount < minEntries
         ? `List at least ${minEntries} ${minEntries === 1 ? 'person' : 'people'} to continue${
             validCount > 0 ? ` (${validCount} of ${minEntries} added)` : ''
@@ -112,67 +146,62 @@ export function BusinessKeyPeopleStep(): React.ReactElement {
       {hint ? (
         <View
           style={{
-            borderWidth: 1,
-            borderStyle: 'dashed',
-            borderColor: colors.border,
             borderRadius: radius.sm,
             backgroundColor: colors.backgroundSecondary,
             padding: spacing.md,
-            marginBottom: spacing.md,
+            marginBottom: spacing.lg,
           }}
         >
-          <MyazaText variant="bodySmall" color={colors.textSecondary}>
+          <DashedBorder color={colors.border} radius={radius.sm} strokeWidth={1} />
+          <MyazaText variant="bodyMedium" color={colors.textSecondary}>
             {hint}
           </MyazaText>
         </View>
       ) : null}
 
-      {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' }}>
+      <KeyPeopleSectionsList
+        sections={sections}
+        rows={rows}
+        threshold={threshold}
+        emailRequiredFor={emailRequiredFor}
+        uboUnidentifiable={uboUnidentifiable}
+        canAdd={canAdd}
+        onRows={commit}
+        onSheet={setSheet}
+        onExemption={(next) => store.getState().setUboUnidentifiable(next)}
+      />
+
+      {!canAdd ? (
+        <MyazaText
+          variant="bodyMedium"
+          color={colors.textMuted}
+          style={{ textAlign: 'center', marginTop: spacing.lg }}
+        >
           {`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 }} />
+      ) : null}
 
-      {/* Total-ownership summary at the DECISION point — the disabled Continue
-          button always explains itself, wherever the offending card is. */}
+      {/* Total-ownership summary at the DECISION point — the disabled
+          Continue button always explains itself, wherever the offending
+          card is. */}
       {totalPct > 0 ? (
         <View
           style={{
+            marginTop: spacing.lg,
             flexDirection: 'row',
-            justifyContent: 'space-between',
             alignItems: 'center',
-            backgroundColor: overAllocated ? colors.errorBg : colors.backgroundSecondary,
+            justifyContent: 'space-between',
             borderRadius: radius.sm,
+            backgroundColor: overAllocated ? colors.errorBg : colors.backgroundSecondary,
             paddingHorizontal: spacing.md,
             paddingVertical: spacing.sm + 4,
           }}
         >
-          <MyazaText variant="bodySmall" color={overAllocated ? colors.error : colors.textMuted}>
+          <MyazaText variant="bodyMedium" color={overAllocated ? colors.error : colors.textMuted}>
             Total ownership listed
           </MyazaText>
           <MyazaText
-            variant="bodySmall"
+            variant="bodyMedium"
             color={overAllocated ? colors.error : colors.textDark}
             style={{ fontWeight: '700' }}
           >
@@ -181,19 +210,24 @@ export function BusinessKeyPeopleStep(): React.ReactElement {
         </View>
       ) : null}
       {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 variant="bodyMedium" color={colors.error} style={{ marginTop: spacing.xs }}>
+          {`Together the percentages can't exceed 100%, so reduce them by ${fmtPct(totalPct - 100)}%.`}
         </MyazaText>
       ) : null}
 
-      <View style={{ height: spacing.md }} />
+      <View style={{ height: spacing.lg }} />
       <MyazaButton label="Continue" onPress={handleContinue} disabled={!canContinue} />
 
       {sheet && (sheet.mode === 'add' || editEntry) ? (
         <KeyPersonSheet
+          emailRequiredFor={emailRequiredFor}
           mode={sheet.mode}
-          initial={editEntry ?? { ...emptyKeyPerson(), country: defaultCountry }}
-          uboThreshold={uboThreshold}
+          section={sheet.section}
+          corporateKyb={config.business?.keyPeople?.corporateKyb?.enabled === true}
+          initial={
+            editEntry ?? { ...emptyKeyPerson(SECTION_ROLE[sheet.section]), country: defaultCountry }
+          }
+          uboThreshold={threshold}
           otherPctTotal={editEntry ? totalPct - pctOf(editEntry) : totalPct}
           onSave={handleSave}
           onRemove={sheet.mode === 'edit' ? handleRemove : undefined}
@@ -203,5 +237,3 @@ export function BusinessKeyPeopleStep(): React.ReactElement {
     </View>
   );
 }
-
-export type { KeyPersonRole };

package/src/screens/BusinessPickedCard.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { Pressable, View } from 'react-native';
+
+import { CountryFlag } from '../components/CountryFlag';
+import { Icon } from '../components/Icon';
+import { MyazaText } from '../components/Typography';
+import { useTheme } from '../components/runtime';
+import { radius, spacing } from '../config/theme';
+
+// The company the applicant picked, standing where the search box was.
+//
+// Choosing a row IS the choice: the card replaces the list, and Change swaps
+// back. A separate confirm button meant two primary buttons on screen at once,
+// and the card already shows what was picked — the confirmation is the screen
+// after, not a button before it. Dimensions mirror the web SDK's picked card
+// (40px badge, 12px padding and gaps).
+
+export function BusinessPickedCard({
+  country,
+  name,
+  registrationNumber,
+  onChange,
+}: {
+  country: string;
+  name: string;
+  registrationNumber: string;
+  onChange: () => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  return (
+    <View>
+      <MyazaText variant="label" style={{ marginBottom: spacing.sm }}>
+        Business
+      </MyazaText>
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 12,
+          borderWidth: 1,
+          borderColor: colors.primary,
+          backgroundColor: colors.primary50,
+          borderRadius: radius.sm,
+          padding: 12,
+        }}
+      >
+        {/* The badge: the company as a thing that has been chosen, in the same
+            filled-circle language the picked rows of every other list use. */}
+        <View
+          style={{
+            width: 40,
+            height: 40,
+            borderRadius: 20,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: colors.primary,
+          }}
+        >
+          <Icon name="building-2" size={20} color={colors.onPrimary} />
+        </View>
+        <View style={{ flex: 1, minWidth: 0 }}>
+          <MyazaText variant="label" color={colors.textDark} numberOfLines={1}>
+            {name.trim() || 'We will confirm the name with the register'}
+          </MyazaText>
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, marginTop: 2 }}>
+            <CountryFlag country={country} size={14} />
+            <MyazaText variant="bodySmall" color={colors.textSecondary}>
+              {registrationNumber}
+            </MyazaText>
+          </View>
+        </View>
+        <Pressable
+          accessibilityRole="button"
+          onPress={onChange}
+          hitSlop={8}
+          style={{ flexDirection: 'row', alignItems: 'center', gap: 6, paddingHorizontal: 4 }}
+        >
+          <Icon name="pencil" size={14} color={colors.textDark} />
+          <MyazaText variant="bodyMedium" style={{ fontWeight: '500' }} color={colors.textDark}>
+            Change
+          </MyazaText>
+        </Pressable>
+      </View>
+    </View>
+  );
+}

package/src/screens/BusinessPickedSection.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { MyazaText } from '../components/Typography';
+import { useTheme } from '../components/runtime';
+import { spacing } from '../config/theme';
+import { BusinessPickedCard } from './BusinessPickedCard';
+import { BusinessSandboxToggle } from './BusinessSandboxToggle';
+
+// The picked-company section: the card, what Continue is about to do, and the
+// dev-only test-result pin. Split from BusinessDetailsStep (200-line rule).
+
+export function BusinessPickedSection({
+  country,
+  name,
+  registrationNumber,
+  isSandbox,
+  onChange,
+}: {
+  country: string;
+  name: string;
+  registrationNumber: string;
+  isSandbox: boolean;
+  onChange: () => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  return (
+    <>
+      <BusinessPickedCard
+        country={country}
+        name={name}
+        registrationNumber={registrationNumber}
+        onChange={onChange}
+      />
+      <View style={{ height: spacing.lg }} />
+      {/* Says what the button is about to do: Continue runs a real lookup
+          against the register, which takes a moment and is charged to the
+          organisation. "Continue" alone made a paid outbound call look like
+          moving to the next page. */}
+      <MyazaText variant="bodySmall" color={colors.textSecondary}>
+        Continue checks this business against the official register and brings back its details.
+      </MyazaText>
+      {isSandbox ? (
+        <>
+          <View style={{ height: spacing.lg }} />
+          <BusinessSandboxToggle />
+        </>
+      ) : null}
+    </>
+  );
+}

package/src/screens/BusinessRegistryPickers.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { CountryField } from '../components/CountryField';
+import { MyazaSelect } from '../components/MyazaSelect';
+import { MyazaText } from '../components/Typography';
+import { businessCountryName, getBusinessProductDef } from '../config/business';
+import { spacing } from '../config/theme';
+
+// The registry pickers: which country's register, and which product to run
+// against it. Rendered only when there is a choice to make. Split from
+// BusinessDetailsStep (200-line rule).
+
+export function BusinessRegistryPickers({
+  country,
+  countries,
+  product,
+  products,
+  onCountry,
+  onProduct,
+}: {
+  country: string;
+  countries: string[];
+  product: string;
+  products: string[];
+  onCountry: (code: string) => void;
+  onProduct: (key: string) => void;
+}): React.ReactElement {
+  return (
+    <>
+      {countries.length > 1 ? (
+        <>
+          <MyazaText variant="label" style={{ marginBottom: spacing.sm }}>
+            Country of registration
+          </MyazaText>
+          {/* The SAME sheet as the phone field's dial-code picker — restricted
+              to the workflow's registry countries. */}
+          <CountryField
+            value={country}
+            options={countries.map((code) => ({ code, name: businessCountryName(code) }))}
+            onChange={onCountry}
+          />
+          <View style={{ height: spacing.lg }} />
+        </>
+      ) : null}
+
+      {products.length > 1 ? (
+        <>
+          <MyazaText variant="label" style={{ marginBottom: spacing.sm }}>
+            Verification type
+          </MyazaText>
+          <MyazaSelect
+            value={product}
+            sheetTitle="Verification type"
+            options={products.map((key) => ({
+              value: key,
+              label: getBusinessProductDef(key).label,
+            }))}
+            onChange={onProduct}
+          />
+          <View style={{ height: spacing.lg }} />
+        </>
+      ) : null}
+
+    </>
+  );
+}

package/src/screens/BusinessSandboxToggle.tsx

@@ -0,0 +1,114 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Animated, Easing, Pressable, View } from 'react-native';
+
+import { MyazaText } from '../components/Typography';
+import { useKyc, useKycStore, useTheme } from '../components/runtime';
+import { DashedBorder } from '../components/DashedBorder';
+import { spacing } from '../config/theme';
+
+// Dev/sandbox only: pick the canned outcome the register check will serve.
+//
+// Chosen BEFORE the lookup runs — repeating the control afterwards would offer
+// to change an answer that has already come back. Production never shows it
+// and never honours a pin if one arrives. Dimensions and motion mirror the web
+// SDK's Test-result control: 40px options in a 2px track, and an indicator
+// that SLIDES between the two — a block that vanishes here and reappears there
+// reads as two separate things blinking; moving it says the selection
+// travelled, which is what actually happened.
+
+const OUTCOMES = [
+  { key: 'verified', label: 'Verified' },
+  { key: 'not_found', label: 'Not found' },
+] as const;
+
+export function BusinessSandboxToggle(): React.ReactElement {
+  const store = useKycStore();
+  const { colors } = useTheme();
+  const outcome = useKyc((s) => s.business.sandboxOutcome) || 'verified';
+  const [trackWidth, setTrackWidth] = useState(0);
+  // Equal columns are what let the indicator translate by exactly its own
+  // width. onLayout reports the BORDER box, so both the 1px borders and the
+  // 2px padding come off before halving — sizing off the raw width made the
+  // slid indicator touch the track's right edge while the left kept its gap.
+  const indicatorWidth = Math.max(0, (trackWidth - 2 * 1 - 2 * 2) / 2);
+  const slide = useRef(new Animated.Value(outcome === 'verified' ? 0 : 1)).current;
+
+  useEffect(() => {
+    Animated.timing(slide, {
+      toValue: outcome === 'verified' ? 0 : 1,
+      duration: 200,
+      easing: Easing.out(Easing.quad),
+      useNativeDriver: true,
+    }).start();
+  }, [outcome, slide]);
+
+  return (
+    <View
+      style={{
+        borderRadius: 12,
+        padding: 12,
+      }}
+    >
+      <DashedBorder color={colors.border} radius={12} strokeWidth={1} />
+      <MyazaText variant="label">Test result</MyazaText>
+      <View style={{ height: spacing.sm }} />
+      <View
+        onLayout={(e) => setTrackWidth(e.nativeEvent.layout.width)}
+        style={{
+          flexDirection: 'row',
+          borderWidth: 1,
+          borderColor: colors.border,
+          borderRadius: 8,
+          padding: 2,
+        }}
+      >
+        {trackWidth > 0 ? (
+          <Animated.View
+            pointerEvents="none"
+            style={{
+              position: 'absolute',
+              top: 2,
+              bottom: 2,
+              left: 2,
+              width: indicatorWidth,
+              borderRadius: 6,
+              backgroundColor: colors.textDark,
+              transform: [
+                {
+                  translateX: slide.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [0, indicatorWidth],
+                  }),
+                },
+              ],
+            }}
+          />
+        ) : null}
+        {OUTCOMES.map(({ key, label }) => {
+          const active = outcome === key;
+          return (
+            <Pressable
+              key={key}
+              accessibilityRole="button"
+              accessibilityState={{ selected: active }}
+              onPress={() => store.getState().setBusinessField('sandboxOutcome', key)}
+              style={{ flex: 1, alignItems: 'center', justifyContent: 'center', height: 40 }}
+            >
+              {/* Above the indicator, or the label slides out from under it. */}
+              <MyazaText
+                variant="bodyMedium"
+                color={active ? colors.background : colors.textSecondary}
+              >
+                {label}
+              </MyazaText>
+            </Pressable>
+          );
+        })}
+      </View>
+      <View style={{ height: spacing.sm }} />
+      <MyazaText variant="bodySmall" color={colors.textSecondary}>
+        Returned instead of calling the register.
+      </MyazaText>
+    </View>
+  );
+}