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

package/src/screens/IdTypeStep.tsx

@@ -2,16 +2,35 @@ import React, { useMemo } from 'react';
 import { Pressable, View } from 'react-native';
 
 import { radius, spacing } from '../config/theme';
-import { ID_TYPES } from '../config/idTypes';
+import { ID_TYPES, resolveIdTypeDefinition } from '../config/idTypes';
 import type { IdType, IdTypeDefinition } from '../types/config';
-import { useKyc, useKycConfig, useTheme } from '../components/runtime';
+import {
+  useEffectiveCountry,
+  useKyc,
+  useKycConfig,
+  useKycStore,
+  useTheme,
+} from '../components/runtime';
 import { MyazaText } from '../components/Typography';
-import { MyazaButton } from '../components/MyazaButton';
 import { MyazaPulseLoader } from '../components/MyazaPulseLoader';
 import { Icon, type IconName } from '../components/Icon';
 
 // ID-type picker — 1:1 with the Flutter SDK's IdTypeScreen: a list of cards
-// (icon tile + label + radio circle), select-on-tap, Continue to advance.
+// (icon tile + label + forward chevron) that ADVANCE ON TAP.
+//
+// No Continue button and no radio, matching Flutter and the web SDK. It is a
+// single-select list with nothing else on the step to confirm, so Continue only
+// restated a decision already made; and country-select already advances on tap,
+// so a second list that behaved differently taught users one rule then broke
+// it. A mis-tap costs one Back. The affordance is therefore a "go to the next
+// step" chevron — a radio would imply a select-then-confirm this flow does not
+// have.
+//
+// The advance reads the TAPPED value through the store, never the
+// `selectedIdType` bound at render: that closure is a step behind inside the
+// handler (and empty on the first selection), which would route a document ID
+// to the number-only step. Going through `store.getState()` is what makes the
+// write visible to `nextStep()`, since zustand commits synchronously.
 
 const ICON_FOR: Record<string, IconName> = {
   bvn: 'landmark', // Bank Verification Number → bank/landmark
@@ -31,25 +50,54 @@ const ICON_FOR: Record<string, IconName> = {
 export function IdTypeStep(): React.ReactElement {
   const { colors } = useTheme();
   const config = useKycConfig();
+  const country = useEffectiveCountry();
+  const store = useKycStore();
   const serverConfig = useKyc((s) => s.serverConfig);
   const selectedIdType = useKyc((s) => s.selectedIdType);
-  const setIdType = useKyc((s) => s.setIdType);
-  const nextStep = useKyc((s) => s.nextStep);
+
+  // Select AND advance in one tap. Both go through the store so `nextStep`
+  // routes off the value just written — a document ID to document-capture, a
+  // number-only ID to id-input.
+  const pick = (key: IdType): void => {
+    store.getState().setIdType(key);
+    store.getState().nextStep();
+  };
 
   const available = useMemo<IdTypeDefinition[]>(() => {
-    const allForCountry = ID_TYPES[config.country] ?? [];
-    const requested = config.idTypes?.length
-      ? allForCountry.filter((t) => (config.idTypes as IdType[]).includes(t.key))
-      : [...allForCountry];
+    // In a multi-region flow the PICKED country's own `idTypes` narrow the
+    // list; otherwise the top-level prop applies. Absent or empty means every
+    // granted type, which is the server's own "unset = all" semantic.
+    const perCountry = (config.countries ?? []).find(
+      (e) => e.country.toUpperCase() === country.toUpperCase(),
+    )?.idTypes;
+    const keys = (perCountry?.length ? perCountry : config.idTypes) as
+      | readonly string[]
+      | undefined;
+    const allowed = (key: string): boolean => !keys?.length || keys.includes(key);
+
+    // Built from the SERVER rows, not the curated table. The curated table only
+    // knows the five gov-DB countries; a Global-Documents flow offers ~240, and
+    // filtering against the table rendered an empty list — "no ID types are
+    // enabled" — for every country outside it. The row carries the label and
+    // capture shape, so an uncurated country renders correctly from it.
     if (serverConfig.status === 'ready') {
-      const granted = new Set(
-        serverConfig.idTypes.filter((t) => t.country === config.country).map((t) => t.idType),
-      );
-      return requested.filter((t) => granted.has(t.key));
+      return serverConfig.idTypes
+        .filter((row) => row.country === country && allowed(row.idType))
+        .map((row) =>
+          resolveIdTypeDefinition(country, row.idType, {
+            label: row.label,
+            requiresDocumentCapture: row.requiresDocumentCapture,
+            scanSides: row.scanSides,
+            supportsNfc: row.supportsNfc,
+          }),
+        );
     }
     if (serverConfig.status === 'loading') return [];
-    return requested;
-  }, [config.country, config.idTypes, serverConfig]);
+    // Config failed to load: fall back to the curated list. The server still
+    // rejects anything actually disabled, so this is permissive, not unsafe.
+    const table = ID_TYPES as Record<string, readonly IdTypeDefinition[] | undefined>;
+    return (table[country.toUpperCase()] ?? []).filter((t) => allowed(t.key));
+  }, [country, config.idTypes, config.countries, serverConfig]);
 
   if (serverConfig.status === 'loading') {
     return (
@@ -84,7 +132,9 @@ export function IdTypeStep(): React.ReactElement {
         return (
           <Pressable
             key={t.key}
-            onPress={() => setIdType(t.key)}
+            onPress={() => pick(t.key)}
+            accessibilityRole="button"
+            accessibilityLabel={t.label}
             style={{
               marginBottom: spacing.sm,
               borderRadius: radius.md,
@@ -118,25 +168,16 @@ export function IdTypeStep(): React.ReactElement {
               {t.label}
             </MyazaText>
             <View style={{ width: spacing.md }} />
-            <View
-              style={{
-                width: 22,
-                height: 22,
-                borderRadius: 11,
-                borderWidth: 1.5,
-                borderColor: selected ? colors.primary : colors.gray300,
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}
-            >
-              {selected ? <View style={{ width: 12, height: 12, borderRadius: 6, backgroundColor: colors.primary }} /> : null}
-            </View>
+            {/* Forward chevron, not a radio: the tap advances, so the icon has
+                to promise the next step rather than a pending confirmation. */}
+            <Icon
+              name="chevron-right"
+              size={20}
+              color={selected ? colors.primary : colors.gray400}
+            />
           </Pressable>
         );
       })}
-
-      <View style={{ height: spacing.lg }} />
-      <MyazaButton label="Continue" onPress={selectedIdType ? nextStep : undefined} disabled={!selectedIdType} />
     </View>
   );
 }

package/src/screens/KeyPeopleInviteLinks.tsx

@@ -0,0 +1,239 @@
+import React, { useState } from 'react';
+import { Pressable, Share, View } from 'react-native';
+import * as Clipboard from 'expo-clipboard';
+
+import { radius, spacing } from '../config/theme';
+import { useKyc, useTheme } from '../components/runtime';
+import { MyazaText } from '../components/Typography';
+import { Icon } from '../components/Icon';
+import { CountryFlag } from '../components/CountryFlag';
+import { regionCountryName } from '../config/regions';
+import { KEY_PERSON_ROLE_LABELS } from '../config/keyPeople';
+import type { KeyPersonInvite } from '../services/api-types';
+import type { ApplicantRole, KeyPersonRole } from '../types/business';
+
+// ---------------------------------------------------------------------------
+// "Awaiting users" — the KYB success screen's people section. Every person the
+// review is waiting on, grouped by role, each with a status pill; pending
+// people carry a shareable verification link, and the APPLICANT (who verified
+// in-flow) appears with a green Submitted pill so the picture is complete.
+// Mirrors the web SDK's KeyPeopleInviteLinks 1:1 — mobile shares via the
+// native sheet (reaches WhatsApp/SMS, still offers Copy inside).
+// ---------------------------------------------------------------------------
+
+type AwaitRole = ApplicantRole;
+
+interface AwaitRow {
+  name: string;
+  role: AwaitRole;
+  pct: string | null;
+  country: string | null;
+  status: 'submitted' | 'pending';
+  inviteUrl?: string;
+  isApplicant?: boolean;
+}
+
+const ROLE_LABELS: Record<AwaitRole, string> = {
+  ...KEY_PERSON_ROLE_LABELS,
+  authorized_representative: 'Authorized representative',
+};
+
+const SECTIONS: Array<{ role: AwaitRole; label: string }> = [
+  { role: 'beneficial_owner', label: 'UBOS' },
+  { role: 'director', label: 'DIRECTORS' },
+  { role: 'signatory', label: 'SIGNATORIES' },
+  { role: 'shareholder', label: 'SHAREHOLDERS' },
+  { role: 'authorized_representative', label: 'REPRESENTATIVES' },
+];
+
+export function KeyPeopleInviteLinks({
+  invites,
+}: {
+  invites: KeyPersonInvite[];
+}): React.ReactElement | null {
+  const { colors } = useTheme();
+  const app = useKyc((s) => s.businessApplication);
+  if (invites.length === 0) return null;
+
+  const rows: AwaitRow[] = [];
+
+  // The applicant themselves — verified in-flow, nothing more to do.
+  if (app.applicantRole) {
+    const self =
+      app.applicantKeyPersonIndex !== null ? app.keyPeople[app.applicantKeyPersonIndex] : null;
+    rows.push({
+      name: (self?.name ?? app.applicantName).trim() || 'You',
+      role: (self?.role ?? app.applicantRole) as AwaitRole,
+      pct: self?.ownershipPct.trim() || null,
+      country: self?.country.trim() ? self.country.trim().toUpperCase() : null,
+      status: 'submitted',
+      isApplicant: true,
+    });
+  }
+
+  // Everyone the server minted a link for — enriched from the entered rows.
+  for (const invite of invites) {
+    const entered = app.keyPeople.find((p) => p.name.trim() === invite.name.trim());
+    rows.push({
+      name: invite.name,
+      role: (entered?.role ?? 'director') as AwaitRole,
+      pct: entered?.ownershipPct.trim() || null,
+      country: entered?.country.trim() ? entered.country.trim().toUpperCase() : null,
+      status: 'pending',
+      inviteUrl: invite.inviteUrl,
+    });
+  }
+
+  return (
+    <View style={{ width: '100%', marginTop: spacing.lg }}>
+      <MyazaText variant="bodySmall" color={colors.textMuted} style={{ textAlign: 'center', marginBottom: spacing.md }}>
+        To complete the review, the people below must verify their identity with a KYC check.
+        Anyone with an email on file has already been sent their link.
+      </MyazaText>
+
+      {SECTIONS.map(({ role, label }) => {
+        const group = rows.filter((r) => r.role === role);
+        if (group.length === 0) return null;
+        return (
+          <View key={role} style={{ marginBottom: spacing.sm }}>
+            <MyazaText
+              variant="bodySmall"
+              color={colors.textMuted}
+              style={{ fontWeight: '600', letterSpacing: 1.2, marginBottom: spacing.xs + 2 }}
+            >
+              {label}
+            </MyazaText>
+            {group.map((row, i) => (
+              <AwaitCard key={`${role}-${i}`} row={row} />
+            ))}
+          </View>
+        );
+      })}
+
+      <MyazaText variant="bodySmall" color={colors.textMuted} style={{ textAlign: 'center' }}>
+        Links are valid for 14 days.
+      </MyazaText>
+    </View>
+  );
+}
+
+function AwaitCard({ row }: { row: AwaitRow }): React.ReactElement {
+  const { colors } = useTheme();
+  const submitted = row.status === 'submitted';
+  const [copied, setCopied] = useState(false);
+
+  const share = (): void => {
+    if (!row.inviteUrl) return;
+    Share.share({ message: row.inviteUrl }).catch(() => undefined);
+  };
+  const copy = (): void => {
+    if (!row.inviteUrl) return;
+    Clipboard.setStringAsync(row.inviteUrl)
+      .then(() => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+      })
+      .catch(() => undefined);
+  };
+
+  return (
+    <View
+      style={{
+        backgroundColor: colors.backgroundSecondary,
+        borderRadius: radius.md,
+        padding: spacing.md,
+        marginBottom: spacing.sm,
+      }}
+    >
+      <View style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
+        <View style={{ flex: 1, minWidth: 0, marginRight: spacing.sm }}>
+          <MyazaText variant="bodyMedium" numberOfLines={1} style={{ fontWeight: '700' }}>
+            {row.name}
+            {row.isApplicant ? (
+              <MyazaText variant="bodySmall" color={colors.textMuted}>
+                {'  (you)'}
+              </MyazaText>
+            ) : null}
+          </MyazaText>
+          <View style={{ flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', marginTop: 2 }}>
+            <MyazaText variant="bodySmall" color={colors.textMuted}>
+              {ROLE_LABELS[row.role]}
+              {row.pct ? ` · ${row.pct}%` : ''}
+              {row.country ? ' · ' : ''}
+            </MyazaText>
+            {row.country ? (
+              <>
+                <CountryFlag country={row.country} size={14} />
+                <MyazaText variant="bodySmall" color={colors.textMuted}>
+                  {` ${regionCountryName(row.country)}`}
+                </MyazaText>
+              </>
+            ) : null}
+          </View>
+        </View>
+        <View
+          style={{
+            borderRadius: radius.full,
+            paddingHorizontal: spacing.sm + 4,
+            paddingVertical: spacing.xs,
+            backgroundColor: submitted ? colors.successBg : colors.primary100,
+          }}
+        >
+          <MyazaText
+            variant="bodySmall"
+            color={submitted ? colors.success : colors.primary}
+            style={{ fontWeight: '700', fontSize: 11, letterSpacing: 0.6 }}
+          >
+            {submitted ? 'SUBMITTED' : 'KYC PENDING'}
+          </MyazaText>
+        </View>
+      </View>
+
+      {row.status === 'pending' && row.inviteUrl ? (
+        // Both actions, since it's mobile: Copy for pasting anywhere, Share
+        // for the native sheet (WhatsApp/SMS directly).
+        <View style={{ flexDirection: 'row', marginTop: spacing.sm + 4 }}>
+          <Pressable
+            onPress={copy}
+            accessibilityRole="button"
+            accessibilityLabel={`Copy ${row.name}'s verification link`}
+            style={{
+              flex: 1,
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundColor: colors.primary100,
+              borderRadius: radius.full,
+              paddingVertical: spacing.sm + 2,
+              marginRight: spacing.sm,
+            }}
+          >
+            <Icon name={copied ? 'check' : 'copy'} size={15} color={colors.primary} />
+            <MyazaText variant="bodySmall" color={colors.primary} style={{ fontWeight: '700', marginLeft: spacing.xs + 2 }}>
+              {copied ? 'Copied' : 'Copy link'}
+            </MyazaText>
+          </Pressable>
+          <Pressable
+            onPress={share}
+            accessibilityRole="button"
+            accessibilityLabel={`Share ${row.name}'s verification link`}
+            style={{
+              flex: 1,
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundColor: colors.primary100,
+              borderRadius: radius.full,
+              paddingVertical: spacing.sm + 2,
+            }}
+          >
+            <Icon name="share" size={15} color={colors.primary} />
+            <MyazaText variant="bodySmall" color={colors.primary} style={{ fontWeight: '700', marginLeft: spacing.xs + 2 }}>
+              Share
+            </MyazaText>
+          </Pressable>
+        </View>
+      ) : null}
+    </View>
+  );
+}