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

package/src/screens/BusinessKeyPeopleStep.tsx

@@ -0,0 +1,207 @@
+import React, { useState } 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 { KeyPersonCard } from './KeyPersonCard';
+import { KeyPersonSheet } from './KeyPersonSheet';
+import { keyPeopleMinEntries } from '../config/businessSteps';
+import {
+  emptyKeyPerson,
+  invalidKeyPersonRows,
+  isKeyPersonRowBlank,
+  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.
+//
+// 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.
+// ---------------------------------------------------------------------------
+
+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.",
+};
+
+type SheetState = { mode: 'add' } | { mode: 'edit'; 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 registryCountry = useKyc((s) => s.business.country);
+  const [sheet, setSheet] = useState<SheetState>(null);
+
+  const minEntries = keyPeopleMinEntries(config.business);
+  const validCount = rows.filter(isKeyPersonRowValid).length;
+  const invalidRows = invalidKeyPersonRows(rows);
+  const uboThreshold = config.business?.keyPeople?.ownershipThreshold ?? 25;
+
+  // 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 pctOf = (row: KeyPersonEntry): number => {
+    const n = Number(row.ownershipPct);
+    return row.ownershipPct.trim() !== '' && Number.isFinite(n) ? n : 0;
+  };
+  const totalPct = rows.reduce((sum, row) => sum + pctOf(row), 0);
+  const overAllocated = totalPct > 100;
+  const fmtPct = (n: number): string => (Number.isInteger(n) ? String(n) : n.toFixed(1));
+
+  const canContinue = validCount >= minEntries && invalidRows.length === 0 && !overAllocated;
+
+  // 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 commit = (next: KeyPersonEntry[]): void => store.getState().setKeyPeople(next);
+  const handleSave = (entry: KeyPersonEntry): void => {
+    if (sheet?.mode === 'edit') {
+      commit(rows.map((row, i) => (i === sheet.index ? entry : row)));
+    } else {
+      commit([...rows, entry]);
+    }
+    setSheet(null);
+  };
+  const handleRemove = (): void => {
+    if (sheet?.mode === 'edit') 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;
+
+  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));
+    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,
+            marginBottom: spacing.md,
+          }}
+        >
+          <MyazaText variant="bodySmall" 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' }}>
+          {`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 }} />
+
+      {/* Total-ownership summary at the DECISION point — the disabled Continue
+          button always explains itself, wherever the offending card is. */}
+      {totalPct > 0 ? (
+        <View
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            backgroundColor: overAllocated ? colors.errorBg : colors.backgroundSecondary,
+            borderRadius: radius.sm,
+            paddingHorizontal: spacing.md,
+            paddingVertical: spacing.sm + 4,
+          }}
+        >
+          <MyazaText variant="bodySmall" color={overAllocated ? colors.error : colors.textMuted}>
+            Total ownership listed
+          </MyazaText>
+          <MyazaText
+            variant="bodySmall"
+            color={overAllocated ? colors.error : colors.textDark}
+            style={{ fontWeight: '700' }}
+          >
+            {`${fmtPct(totalPct)}%`}
+          </MyazaText>
+        </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>
+      ) : null}
+
+      <View style={{ height: spacing.md }} />
+      <MyazaButton label="Continue" onPress={handleContinue} disabled={!canContinue} />
+
+      {sheet && (sheet.mode === 'add' || editEntry) ? (
+        <KeyPersonSheet
+          mode={sheet.mode}
+          initial={editEntry ?? { ...emptyKeyPerson(), country: defaultCountry }}
+          uboThreshold={uboThreshold}
+          otherPctTotal={editEntry ? totalPct - pctOf(editEntry) : totalPct}
+          onSave={handleSave}
+          onRemove={sheet.mode === 'edit' ? handleRemove : undefined}
+          onClose={() => setSheet(null)}
+        />
+      ) : null}
+    </View>
+  );
+}
+
+export type { KeyPersonRole };

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

package/src/screens/ContactChannelChoice.tsx

@@ -0,0 +1,133 @@
+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';
+import { Icon } from '../components/Icon';
+import { WhatsAppIcon } from '../components/WhatsAppIcon';
+import { CHANNEL_LABELS, type PhoneOtpChannel } from '../config/contact';
+
+// ---------------------------------------------------------------------------
+// How the user wants their one-time code delivered.
+//
+// The org decides which channels are ON OFFER; the person receiving the code
+// decides between them, because only they know whether they have WhatsApp
+// installed or whether SMS is landing for them today. With a single offered
+// channel there is no choice to make and this renders nothing.
+//
+// Card shape, icon and selected treatment mirror the web SDK's picker so the
+// step reads the same on every platform.
+// ---------------------------------------------------------------------------
+
+const HINTS: Record<PhoneOtpChannel, string> = {
+  sms: 'Text message',
+  whatsapp: 'Needs WhatsApp',
+};
+
+/** WhatsApp needs its own brand mark; SMS reads fine as a generic glyph. */
+function ChannelGlyph({
+  channel,
+  color,
+}: {
+  channel: PhoneOtpChannel;
+  color: string;
+}): React.ReactElement {
+  return channel === 'whatsapp' ? (
+    <WhatsAppIcon size={16} color={color} />
+  ) : (
+    <Icon name="message-square" size={16} color={color} />
+  );
+}
+
+export function ContactChannelChoice({
+  offered,
+  picked,
+  disabled,
+  onPick,
+}: {
+  offered: PhoneOtpChannel[];
+  picked: PhoneOtpChannel;
+  disabled?: boolean;
+  onPick: (channel: PhoneOtpChannel) => void;
+}): React.ReactElement | null {
+  const { colors } = useTheme();
+  if (offered.length < 2) return null;
+
+  return (
+    <View>
+      <View style={{ height: spacing.md }} />
+      <MyazaText variant="bodySmall" color={colors.textMuted}>
+        How should we send it?
+      </MyazaText>
+      <View style={{ height: spacing.xs }} />
+      <View style={{ flexDirection: 'row', gap: spacing.sm }}>
+        {offered.map((channel) => (
+          <ChannelTile
+            key={channel}
+            channel={channel}
+            selected={picked === channel}
+            disabled={disabled}
+            onPress={() => onPick(channel)}
+          />
+        ))}
+      </View>
+    </View>
+  );
+}
+
+function ChannelTile({
+  channel,
+  selected,
+  disabled,
+  onPress,
+}: {
+  channel: PhoneOtpChannel;
+  selected: boolean;
+  disabled?: boolean;
+  onPress: () => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+
+  return (
+    <Pressable
+      onPress={disabled ? undefined : onPress}
+      accessibilityRole="radio"
+      accessibilityState={{ checked: selected, disabled }}
+      accessibilityLabel={CHANNEL_LABELS[channel]}
+      style={{
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: spacing.sm,
+        paddingHorizontal: spacing.sm,
+        paddingVertical: spacing.sm + 2,
+        borderRadius: radius.md,
+        borderWidth: 1.5,
+        borderColor: selected ? colors.primary : colors.border,
+        backgroundColor: selected ? `${colors.primary}0D` : 'transparent',
+      }}
+    >
+      <View
+        style={{
+          width: 34,
+          height: 34,
+          borderRadius: radius.sm,
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: selected ? `${colors.primary}1A` : colors.backgroundSecondary,
+        }}
+      >
+        <ChannelGlyph channel={channel} color={selected ? colors.primary : colors.textMuted} />
+      </View>
+      <View style={{ flex: 1, minWidth: 0 }}>
+        <MyazaText variant="bodyMedium" style={{ fontWeight: "600" }}>
+          {CHANNEL_LABELS[channel]}
+        </MyazaText>
+        <MyazaText variant="bodySmall" color={colors.textMuted} numberOfLines={1}>
+          {HINTS[channel]}
+        </MyazaText>
+      </View>
+    </Pressable>
+  );
+}