@myazahq/kyc-sdk-react-native 2.0.2 → 2.1.0

package/src/screens/BusinessKeyPeopleStep.tsx

@@ -0,0 +1,151 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { radius, spacing } from '../config/theme';
+import { useKyc, useKycConfig, useKycStore, useTheme } from '../components/runtime';
+import { MyazaText } from '../components/Typography';
+import { MyazaButton } from '../components/MyazaButton';
+import { BusinessKeyPersonRow } from './BusinessKeyPersonRow';
+import { keyPeopleMinEntries } from '../config/businessSteps';
+import {
+  emptyKeyPerson,
+  invalidKeyPersonRows,
+  isKeyPersonRowValid,
+  MAX_KEY_PEOPLE_ROWS,
+  type KeyPersonEntry,
+} from '../config/keyPeople';
+import type { KeyPersonRole } from '../types/business';
+
+// ---------------------------------------------------------------------------
+// Applicant-declared directors, owners and signatories.
+//
+// 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.
+//
+// Layout, copy and per-row design mirror the web SDK's BusinessKeyPeopleStep
+// (and Flutter's screen) 1:1 — the description lives in the step HEADER, the
+// hints are dashed cards, and each person is a bordered card with selects.
+// ---------------------------------------------------------------------------
+
+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.",
+};
+
+export function BusinessKeyPeopleStep(): React.ReactElement {
+  const config = useKycConfig();
+  const store = useKycStore();
+  const { colors } = useTheme();
+  const rows = useKyc((s) => s.businessApplication.keyPeople);
+  const registryCountry = useKyc((s) => s.business.country);
+
+  const minEntries = keyPeopleMinEntries(config.business);
+  const validCount = rows.filter(isKeyPersonRowValid).length;
+  const invalidRows = invalidKeyPersonRows(rows);
+
+  // Combined ownership above 100% is factually impossible — catch the typo
+  // here rather than shipping it into the registry cross-check as a doomed
+  // mismatch. Under 100% is fine (not every owner has to be listed).
+  const totalPct = rows.reduce((sum, row) => {
+    const n = Number(row.ownershipPct);
+    return row.ownershipPct.trim() !== '' && Number.isFinite(n) ? sum + n : sum;
+  }, 0);
+  const overAllocated = totalPct > 100;
+
+  const canContinue = validCount >= minEntries && invalidRows.length === 0 && !overAllocated;
+
+  const update = (index: number, patch: Partial<KeyPersonEntry>): void => {
+    store.getState().setKeyPeople(rows.map((row, i) => (i === index ? { ...row, ...patch } : row)));
+  };
+  // New rows 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 add = (): void =>
+    store.getState().setKeyPeople([...rows, { ...emptyKeyPerson(), country: defaultCountry }]);
+  const remove = (index: number): void =>
+    store.getState().setKeyPeople(rows.filter((_, i) => i !== index));
+
+  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.
+    store.getState().setKeyPeople(rows.filter(isKeyPersonRowValid));
+    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."
+      : minEntries > 0 && validCount < minEntries
+        ? `List at least ${minEntries} ${minEntries === 1 ? 'person' : 'people'} to continue${
+            validCount > 0 ? ` (${validCount} of ${minEntries} added)` : ''
+          }.`
+        : null;
+
+  return (
+    <View>
+      {hint ? (
+        <View
+          style={{
+            borderWidth: 1,
+            borderStyle: 'dashed',
+            borderColor: colors.border,
+            borderRadius: radius.sm,
+            backgroundColor: colors.backgroundSecondary,
+            padding: spacing.md,
+          }}
+        >
+          <MyazaText variant="bodySmall" color={colors.textSecondary}>
+            {hint}
+          </MyazaText>
+        </View>
+      ) : null}
+      {overAllocated ? (
+        <View
+          style={{
+            borderWidth: 1,
+            borderColor: `${colors.error}4D`,
+            borderRadius: radius.sm,
+            backgroundColor: colors.errorBg,
+            padding: spacing.md,
+            marginTop: hint ? spacing.sm : 0,
+          }}
+        >
+          <MyazaText variant="bodySmall" color={colors.error}>
+            {`The ownership percentages add up to ${totalPct}% — together they can't exceed 100%.`}
+          </MyazaText>
+        </View>
+      ) : null}
+
+      {rows.map((row, index) => (
+        <BusinessKeyPersonRow
+          key={index}
+          row={row}
+          index={index}
+          onChange={(patch) => update(index, patch)}
+          onRemove={() => remove(index)}
+          uboThreshold={config.business?.keyPeople?.ownershipThreshold}
+        />
+      ))}
+
+      <View style={{ height: spacing.md }} />
+      {rows.length < MAX_KEY_PEOPLE_ROWS ? (
+        <MyazaButton label="Add a person" variant="outline" leadingIcon="user-plus" onPress={add} />
+      ) : (
+        <MyazaText variant="bodySmall" color={colors.textMuted} style={{ textAlign: 'center' }}>
+          {`You can list up to ${MAX_KEY_PEOPLE_ROWS} people here.`}
+        </MyazaText>
+      )}
+
+      <View style={{ height: spacing.sm }} />
+      <MyazaButton label="Continue" onPress={handleContinue} disabled={!canContinue} />
+    </View>
+  );
+}
+
+export type { KeyPersonRole };

package/src/screens/BusinessKeyPersonRow.tsx

@@ -0,0 +1,170 @@
+import React, { useMemo } from 'react';
+import { Pressable, View } from 'react-native';
+
+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 { CountryField } from '../components/CountryField';
+import type { DialCodeOption } from '../components/DialCodePicker';
+import { Icon } from '../components/Icon';
+import { ALL_REGION_CODES, regionCountryName } from '../config/regions';
+import { isValidContactEmail } from '../config/contact';
+import {
+  KEY_PERSON_ROLES,
+  KEY_PERSON_ROLE_LABELS,
+  type KeyPersonEntry,
+} from '../config/keyPeople';
+import type { KeyPersonRole } from '../types/business';
+
+// ---------------------------------------------------------------------------
+// One editable director/owner row — mirrors the web SDK's BusinessKeyPersonRow
+// and the Flutter row 1:1: bordered card, "PERSON N" header with remove, then
+// full name → role (select) → ownership % → country (full ISO select — a key
+// person's ID can be issued anywhere, not just the registry country) → email.
+// Validation is LIVE per field, like the web: a broken value says so as it is
+// typed, while blank optional fields stay quiet.
+// ---------------------------------------------------------------------------
+
+/** Whether the row's role is an ownership one (% is only meaningful then). */
+function isOwnerRole(role: KeyPersonRole): boolean {
+  return role === 'beneficial_owner' || role === 'shareholder';
+}
+
+/** Every ISO-2 we can name, alphabetical — built once, shared by all rows. */
+let countryOptions: DialCodeOption[] | null = null;
+function allCountryOptions(): DialCodeOption[] {
+  countryOptions ??= [...ALL_REGION_CODES]
+    .map((code) => ({ code, name: regionCountryName(code) }))
+    .sort((a, b) => a.name.localeCompare(b.name));
+  return countryOptions;
+}
+
+export function BusinessKeyPersonRow({
+  row,
+  index,
+  onChange,
+  onRemove,
+  uboThreshold = 25,
+}: {
+  row: KeyPersonEntry;
+  index: number;
+  onChange: (patch: Partial<KeyPersonEntry>) => void;
+  onRemove: () => void;
+  /** Ownership % at/above which the server treats a person as a beneficial
+   *  owner (the workflow's `keyPeople.ownershipThreshold`, default 25). */
+  uboThreshold?: number;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  const options = useMemo(allCountryOptions, []);
+
+  const nameInvalid = row.name !== '' && row.name.trim().length < 2;
+  const emailInvalid = row.email.trim() !== '' && !isValidContactEmail(row.email.trim());
+  const pct = row.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 uboHint =
+    !pctInvalid && pct !== '' && pctNum >= uboThreshold && row.role !== 'beneficial_owner';
+
+  return (
+    <View
+      style={{
+        borderWidth: 1,
+        borderColor: colors.border,
+        borderRadius: radius.sm,
+        padding: spacing.md,
+        marginTop: spacing.sm + 4,
+      }}
+    >
+      <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: spacing.sm }}>
+        <MyazaText
+          variant="bodySmall"
+          color={colors.textSecondary}
+          style={{ flex: 1, fontWeight: '600', letterSpacing: 0.6 }}
+        >
+          {`PERSON ${index + 1}`}
+        </MyazaText>
+        <Pressable
+          onPress={onRemove}
+          accessibilityRole="button"
+          accessibilityLabel={`Remove person ${index + 1}`}
+          hitSlop={8}
+        >
+          <Icon name="close" size={16} color={colors.textMuted} />
+        </Pressable>
+      </View>
+
+      <MyazaInput
+        label="Full name"
+        value={row.name}
+        onChangeText={(name) => onChange({ name })}
+        placeholder="e.g. Bola Owner"
+        // It's a person's name — start every word capitalized.
+        autoCapitalize="words"
+        error={nameInvalid ? 'Enter the person’s full name.' : null}
+      />
+
+      <View style={{ height: spacing.sm }} />
+      <MyazaText variant="bodySmall" style={{ fontWeight: '600', marginBottom: spacing.xs }}>
+        Role
+      </MyazaText>
+      <MyazaSelect
+        value={row.role}
+        sheetTitle="Role"
+        options={KEY_PERSON_ROLES.map((role) => ({
+          value: role,
+          label: KEY_PERSON_ROLE_LABELS[role],
+        }))}
+        onChange={(role) => onChange({ role })}
+      />
+
+      <View style={{ height: spacing.sm }} />
+      <MyazaInput
+        label="Ownership % (optional)"
+        value={row.ownershipPct}
+        onChangeText={(ownershipPct) => onChange({ ownershipPct })}
+        placeholder={isOwnerRole(row.role) ? 'e.g. 60' : '—'}
+        keyboardType="decimal-pad"
+        suffix={
+          <MyazaText variant="bodySmall" color={colors.textMuted}>
+            %
+          </MyazaText>
+        }
+        error={pctInvalid ? 'Enter a value between 0 and 100.' : null}
+        helper={
+          uboHint
+            ? `At ${uboThreshold}% or more, this person counts as a beneficial owner.`
+            : undefined
+        }
+      />
+
+      <View style={{ height: spacing.sm }} />
+      <MyazaText variant="bodySmall" style={{ fontWeight: '600', marginBottom: spacing.xs }}>
+        Country <MyazaText variant="bodySmall" color={colors.textSecondary}>(where their ID was issued)</MyazaText>
+      </MyazaText>
+      {/* The SAME sheet as the phone field's dial-code picker (keyboard-aware,
+          autofocused search, results pinned above the keys) — minus the dial
+          codes. Two country pickers that feel different would read as a bug. */}
+      <CountryField
+        value={row.country || null}
+        options={options}
+        onChange={(country) => onChange({ country })}
+      />
+
+      <View style={{ height: spacing.sm }} />
+      <MyazaInput
+        label="Email (optional — used to send their verification link)"
+        value={row.email}
+        onChangeText={(email) => onChange({ email })}
+        placeholder="name@company.com"
+        keyboardType="email-address"
+        autoCapitalize="none"
+        error={emailInvalid ? 'Enter a valid email address.' : null}
+      />
+    </View>
+  );
+}

package/src/screens/CompanyInfoFields.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { spacing } from '../config/theme';
+import { useTheme } from '../components/runtime';
+import { MyazaText } from '../components/Typography';
+import { MyazaInput } from '../components/MyazaInput';
+import type { CompanyInfoField, CompanyInfoMode } from '../types/business';
+
+// ---------------------------------------------------------------------------
+// The company profile a KYB workflow asks for.
+//
+// Split from BusinessDetailsStep (200-line rule). Each field's mode comes from
+// the workflow and must match the server's resolution exactly — a field marked
+// optional here but required there produces a 422 the user cannot act on.
+// Section header, captions and placeholders mirror the web SDK's
+// BusinessCompanyInfoFields 1:1.
+// ---------------------------------------------------------------------------
+
+export const COMPANY_FIELD_LABELS: Record<CompanyInfoField, string> = {
+  address: 'Registered address',
+  email: 'Business email',
+  phone: 'Business phone',
+  website: 'Website',
+};
+
+const COMPANY_FIELD_PLACEHOLDERS: Record<CompanyInfoField, string> = {
+  address: 'e.g. 12 Marina Road, Lagos',
+  email: 'hello@company.com',
+  phone: '+234 800 000 0000',
+  website: 'company.com',
+};
+
+export function CompanyInfoFields({
+  fields,
+  modes,
+  values,
+  missing,
+  showErrors,
+  onChange,
+}: {
+  fields: CompanyInfoField[];
+  modes: Record<CompanyInfoField, CompanyInfoMode>;
+  values: Record<CompanyInfoField, string>;
+  missing: CompanyInfoField[];
+  showErrors: boolean;
+  onChange: (field: CompanyInfoField, value: string) => void;
+}): React.ReactElement | null {
+  const { colors } = useTheme();
+  if (fields.length === 0) return null;
+
+  return (
+    <>
+      <View style={{ height: spacing.md }} />
+      <MyazaText variant="bodyMedium" style={{ fontWeight: '600' }}>
+        Company information
+      </MyazaText>
+      <MyazaText variant="bodySmall" color={colors.textSecondary} style={{ marginTop: 2 }}>
+        We verify these details against the official registry record.
+      </MyazaText>
+      {fields.map((field) => (
+        <View key={field}>
+          <View style={{ height: spacing.sm }} />
+          <MyazaInput
+            label={`${COMPANY_FIELD_LABELS[field]}${modes[field] === 'required' ? ' *' : ' (optional)'}`}
+            value={values[field]}
+            onChangeText={(text) => onChange(field, text)}
+            placeholder={COMPANY_FIELD_PLACEHOLDERS[field]}
+            keyboardType={
+              field === 'email' ? 'email-address' : field === 'phone' ? 'phone-pad' : 'default'
+            }
+            autoCapitalize="none"
+            error={
+              showErrors && missing.includes(field)
+                ? `${COMPANY_FIELD_LABELS[field]} is required.`
+                : null
+            }
+          />
+        </View>
+      ))}
+    </>
+  );
+}

package/src/screens/ConsentStep.tsx

@@ -1,52 +1,31 @@
-import React, { useState } from 'react';
-import { Pressable, View } from 'react-native';
+import React from 'react';
+import { Linking, Pressable, View } from 'react-native';
+import Svg, { Circle, Defs, LinearGradient, Stop } from 'react-native-svg';
 
 import { radius, spacing } from '../config/theme';
+import { PRIVACY_URL, TERMS_URL } from '../config/brand';
 import { useKyc, useKycConfig, useTheme } from '../components/runtime';
 import { MyazaText } from '../components/Typography';
 import { MyazaButton } from '../components/MyazaButton';
-import { Icon, type IconName } from '../components/Icon';
-import { fillTokens } from '../utils/tokens';
+import { Icon } from '../components/Icon';
+import { buildConsentModel } from './consent/model';
 
-// Consent / welcome screen — 1:1 with the Flutter SDK's ConsentScreen:
-// shield hero, token-filled greeting, a "DURING THIS PROCESS WE WILL" card,
-// a consent checkbox (must agree), Continue (gated on agreement), lock footer.
-// The header title is intentionally empty for this step; the screen owns its hero.
-
-const DEFAULT_DESCRIPTION =
-  'We need to verify your identity to comply with regulatory requirements. This process is quick and secure.';
-
-interface ProcessStep {
-  icon: IconName;
-  label: string;
-}
+// Consent / welcome screen — 1:1 with the web SDK's ConsentStep and the
+// Flutter SDK's ConsentScreen: shield hero, token-filled greeting, a "DURING
+// THIS PROCESS WE WILL" card, the derived legal notice, Continue, lock footer.
+// Everything the screen SAYS — title, description, step list, the biometric
+// sentence — is derived in consent/model.ts from what the flow actually does,
+// so a KYB flow gets the business copy and never claims an ID/selfie step it
+// doesn't run. The header title is intentionally empty for this step; the
+// screen owns its hero.
 
 export function ConsentStep(): React.ReactElement {
   const { colors } = useTheme();
   const config = useKycConfig();
   const nextStep = useKyc((s) => s.nextStep);
-  const [agreed, setAgreed] = useState(false);
-
-  const firstName = config.userData?.firstName ?? '';
-  const title = config.consent?.title
-    ? fillTokens(config.consent.title, config.userData)
-    : firstName
-      ? `Welcome, ${firstName}`
-      : 'Identity Verification';
-  const description = config.consent?.description
-    ? fillTokens(config.consent.description, config.userData)
-    : DEFAULT_DESCRIPTION;
 
-  const steps: ProcessStep[] = [
-    { icon: 'badge-check', label: 'Verify your government-issued ID' },
-    { icon: 'user', label: 'Collect basic personal information' },
-    ...(config.enableDocumentCapture
-      ? [{ icon: 'scan-line' as IconName, label: 'Capture a photo of your ID document' }]
-      : []),
-    ...(config.enableSelfie
-      ? [{ icon: 'scan-face' as IconName, label: 'Take a selfie for facial verification' }]
-      : []),
-  ];
+  const { isBusiness, title, description, steps, capturesFace, recordsVideo } =
+    buildConsentModel(config);
 
   return (
     <View>
@@ -62,7 +41,6 @@ export function ConsentStep(): React.ReactElement {
               width: 56,
               height: 56,
               borderRadius: 28,
-              backgroundColor: colors.primary,
               alignItems: 'center',
               justifyContent: 'center',
               shadowColor: colors.primary,
@@ -72,6 +50,22 @@ export function ConsentStep(): React.ReactElement {
               elevation: 6,
             }}
           >
+            {/* Top-left → bottom-right gradient badge, matching Flutter. A flat
+                fill was the last visual difference on this screen. The second
+                stop is the SAME primary at 70% opacity rather than a
+                pre-blended colour: composited over the sheet it produces
+                Flutter's `alphaBlend(primary@0.7, background)` exactly, and it
+                keeps working when the consumer overrides primaryColor or the
+                theme flips, which a hardcoded blend would not. */}
+            <Svg width={56} height={56} style={{ position: 'absolute' }}>
+              <Defs>
+                <LinearGradient id="myazaShieldHero" x1="0" y1="0" x2="1" y2="1">
+                  <Stop offset="0" stopColor={colors.primary} stopOpacity={1} />
+                  <Stop offset="1" stopColor={colors.primary} stopOpacity={0.7} />
+                </LinearGradient>
+              </Defs>
+              <Circle cx={28} cy={28} r={28} fill="url(#myazaShieldHero)" />
+            </Svg>
             <Icon name="shield" size={28} color={colors.onPrimary} />
           </View>
         </View>
@@ -118,46 +112,52 @@ export function ConsentStep(): React.ReactElement {
       <View style={{ height: spacing.lg }} />
 
       {/* Consent checkbox */}
-      <Pressable
-        onPress={() => setAgreed((v) => !v)}
-        style={{
-          flexDirection: 'row',
-          alignItems: 'flex-start',
-          padding: spacing.md,
-          borderRadius: radius.sm,
-          backgroundColor: agreed ? `${colors.primary}0F` : colors.backgroundSecondary,
-        }}
-      >
-        <View
-          style={{
-            width: 22,
-            height: 22,
-            borderRadius: radius.xs - 2,
-            backgroundColor: agreed ? colors.primary : 'transparent',
-            borderWidth: 1.5,
-            borderColor: agreed ? colors.primary : colors.gray400,
-            alignItems: 'center',
-            justifyContent: 'center',
-            marginTop: 1,
-          }}
+      {/* Consent is given by ACTING now, so the notice sits immediately above
+          the button it describes — adjacency is what makes it informed.
+          The biometric sentence is DERIVED: claiming facial recognition on a
+          flow with no selfie step would be false, and recording video without
+          saying so is the failure that actually matters. */}
+      <MyazaText variant="bodySmall" style={{ lineHeight: 18 }}>
+        By tapping Continue, you agree to the{' '}
+        <MyazaText
+          variant="bodySmall"
+          color={colors.textDark}
+          style={{ fontWeight: '600', textDecorationLine: 'underline' }}
+          onPress={() => void Linking.openURL(TERMS_URL).catch(() => undefined)}
         >
-          {agreed ? <Icon name="check" size={14} color={colors.onPrimary} /> : null}
-        </View>
-        <View style={{ width: spacing.sm + 2 }} />
-        <MyazaText variant="bodyMedium" color={colors.textDark} style={{ flex: 1, fontWeight: '600' }}>
-          I consent to the collection and processing of my personal data for identity verification purposes.
+          End User Terms
+        </MyazaText>{' '}
+        and{' '}
+        <MyazaText
+          variant="bodySmall"
+          color={colors.textDark}
+          style={{ fontWeight: '600', textDecorationLine: 'underline' }}
+          onPress={() => void Linking.openURL(PRIVACY_URL).catch(() => undefined)}
+        >
+          Privacy Policy
         </MyazaText>
-      </Pressable>
+        , and consent to your {isBusiness ? 'business and personal data' : 'personal data'} being
+        processed to verify your identity.
+        {capturesFace
+          ? ' This includes facial recognition and recording this session.'
+          : recordsVideo
+            ? ' This includes recording this session.'
+            : ''}
+      </MyazaText>
 
       <View style={{ height: spacing.lg }} />
-      <MyazaButton label="Continue" onPress={agreed ? nextStep : undefined} disabled={!agreed} />
+      <MyazaButton label="Continue" onPress={nextStep} />
       <View style={{ height: spacing.sm }} />
 
       {/* Footer */}
       <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
         <Icon name="lock" size={13} color={colors.textMuted} />
         <View style={{ width: 6 }} />
-        <MyazaText variant="bodySmall">Your data is encrypted and securely processed</MyazaText>
+        {/* flexShrink so a wide brand font wraps this instead of clipping it —
+            a Text in a row without it overflows rather than wrapping. */}
+        <MyazaText variant="bodySmall" style={{ flexShrink: 1 }}>
+          Your data is encrypted and securely processed
+        </MyazaText>
       </View>
     </View>
   );