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

package/src/screens/KeyPeopleAwaitCard.tsx

@@ -0,0 +1,204 @@
+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 { 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 { AwaitRow } from './KeyPeopleAwaitList';
+
+// One person's card on the KYB "awaiting users" list — split from
+// KeyPeopleAwaitList per the 200-line rule.
+
+const ROLE_LABELS: Record<string, string> = {
+  ...KEY_PERSON_ROLE_LABELS,
+  authorized_representative: 'Authorized representative',
+};
+
+function statusView(
+  row: AwaitRow,
+  colors: ReturnType<typeof useTheme>['colors'],
+): { label: string; bg: string; fg: string } {
+  switch (row.status) {
+    case 'verified':
+      return { label: 'VERIFIED', bg: colors.successBg, fg: colors.success };
+    case 'submitted':
+      return { label: 'SUBMITTED', bg: colors.successBg, fg: colors.success };
+    case 'failed':
+      return { label: 'CHECK FAILED', bg: colors.errorBg, fg: colors.error };
+    case 'not_needed':
+      return { label: 'NOT NEEDED', bg: colors.border, fg: colors.textMuted };
+    default:
+      return {
+        label: row.isCorporate ? 'KYB PENDING' : 'KYC PENDING',
+        bg: colors.primary100,
+        fg: colors.primary,
+      };
+  }
+}
+
+export function AwaitCard({ row }: { row: AwaitRow }): React.ReactElement {
+  const { colors } = useTheme();
+  const [copied, setCopied] = useState(false);
+  const status = statusView(row, colors);
+
+  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 }}>
+          <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+            <MyazaText
+              variant="bodyMedium"
+              numberOfLines={1}
+              style={{ fontWeight: '700', flexShrink: 1 }}
+            >
+              {row.name}
+              {row.isApplicant ? (
+                <MyazaText variant="bodySmall" color={colors.textMuted}>
+                  {'  (you)'}
+                </MyazaText>
+              ) : null}
+            </MyazaText>
+            {row.isCorporate ? (
+              // Readability over subtlety: foreground text on a bordered chip.
+              // The muted-on-muted version disappeared on dark org themes.
+              <View
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  borderWidth: 1,
+                  borderColor: colors.border,
+                  backgroundColor: colors.background,
+                  borderRadius: radius.full,
+                  paddingHorizontal: spacing.xs + 4,
+                  paddingVertical: 2,
+                  marginLeft: spacing.xs + 2,
+                }}
+              >
+                <Icon name="building-2" size={12} color={colors.textDark} />
+                <MyazaText
+                  variant="bodySmall"
+                  color={colors.textDark}
+                  style={{ fontSize: 12, fontWeight: '600', marginLeft: 4 }}
+                >
+                  Company
+                </MyazaText>
+              </View>
+            ) : null}
+          </View>
+          <View
+            style={{ flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', marginTop: 2 }}
+          >
+            <MyazaText variant="bodySmall" color={colors.textMuted}>
+              {ROLE_LABELS[row.role] ?? 'Key person'}
+              {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: status.bg,
+          }}
+        >
+          <MyazaText
+            variant="bodySmall"
+            color={status.fg}
+            style={{ fontWeight: '700', fontSize: 11, letterSpacing: 0.6 }}
+          >
+            {status.label}
+          </MyazaText>
+        </View>
+      </View>
+
+      {/* A failed check keeps its link — that is the retry. */}
+      {row.inviteUrl ? (
+        <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: '600', marginLeft: 6 }}
+            >
+              {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: '600', marginLeft: 6 }}
+            >
+              Share
+            </MyazaText>
+          </Pressable>
+        </View>
+      ) : null}
+    </View>
+  );
+}

package/src/screens/KeyPeopleAwaitList.tsx

@@ -0,0 +1,126 @@
+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 { AwaitCard } from './KeyPeopleAwaitCard';
+import { StaggerIn } from '../components/StaggerIn';
+import type { AwaitingPersonPayload } from '../services/api-types';
+
+// ---------------------------------------------------------------------------
+// "Awaiting users" — the KYB success screen's people section, rendered from
+// the SERVER's reconciled list (mirrors the web SDK's KeyPeopleAwaitList).
+// Registry discovery can add people the applicant never listed, so the rows
+// here come from the session summary once it settles — never from what was
+// typed. Statuses stay live: the people named go and verify after this screen
+// is first shown.
+// ---------------------------------------------------------------------------
+
+export interface AwaitRow {
+  name: string;
+  role: string;
+  pct: string | null;
+  country: string | null;
+  status: AwaitingPersonPayload['status'];
+  inviteUrl?: string;
+  isApplicant?: boolean;
+  /** A company on the list completes a KYB application, not a KYC. It gets a
+   *  Company tag and its pending pill reads "KYB PENDING". */
+  isCorporate?: boolean;
+}
+
+/** Ownership as the list renders it: a whole number where that is honest. */
+function formatPct(pct: number | null): string | null {
+  if (pct === null || !Number.isFinite(pct)) return null;
+  return Number.isInteger(pct) ? String(pct) : pct.toFixed(2).replace(/\.?0+$/, '');
+}
+
+/** Server payload → display rows. */
+export function rowsFromServer(people: AwaitingPersonPayload[]): AwaitRow[] {
+  return people.map((p) => ({
+    name: p.name,
+    role: p.role,
+    pct: formatPct(p.ownershipPct),
+    country: p.country,
+    status: p.status,
+    ...(p.inviteUrl ? { inviteUrl: p.inviteUrl } : {}),
+    isApplicant: p.isApplicant,
+    isCorporate: p.isCorporate ?? false,
+  }));
+}
+
+const SECTIONS: Array<{ role: string; label: string }> = [
+  { role: 'beneficial_owner', label: 'UBOS' },
+  { role: 'director', label: 'DIRECTORS' },
+  { role: 'signatory', label: 'SIGNATORIES' },
+  { role: 'shareholder', label: 'SHAREHOLDERS' },
+  { role: 'authorized_representative', label: 'REPRESENTATIVES' },
+];
+const KNOWN_ROLES = new Set(SECTIONS.map((s) => s.role));
+
+export function KeyPeopleAwaitList({ rows }: { rows: AwaitRow[] }): React.ReactElement | null {
+  const { colors } = useTheme();
+  if (rows.length === 0) return null;
+
+  // Anything whose role we have no section for still has to appear — quietly
+  // dropping people from a "who still owes a check" list is the worst failure
+  // it could have.
+  const groups = SECTIONS.map(({ role, label }) => ({
+    label,
+    rows: rows.filter((r) => r.role === role),
+  })).filter((g) => g.rows.length > 0);
+  const others = rows.filter((r) => !KNOWN_ROLES.has(r.role));
+  if (others.length > 0) groups.push({ label: 'OTHER PEOPLE', rows: others });
+
+  const outstanding = rows.filter((r) => r.status === 'pending' || r.status === 'failed').length;
+
+  // Entrance stagger, mirroring the web SDK: cards rise in reading order,
+  // ~45ms apart, capped so a long roster is not a slow reveal. Together with
+  // the skeleton this list replaces (drawn at the same geometry), the
+  // hand-off reads as the ghost roster resolving into the real one.
+  let entranceIndex = 0;
+
+  return (
+    <View style={{ width: '100%', marginTop: spacing.lg }}>
+      <MyazaText
+        variant="bodySmall"
+        color={colors.textMuted}
+        style={{ textAlign: 'center', marginBottom: spacing.md }}
+      >
+        {outstanding === 0
+          ? 'Everyone on this application has completed their identity check.'
+          : '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>
+
+      {groups.map((group) => (
+        <View key={group.label} style={{ marginBottom: spacing.sm }}>
+          <MyazaText
+            variant="bodySmall"
+            color={colors.textMuted}
+            style={{ fontWeight: '600', letterSpacing: 1.2, marginBottom: spacing.xs + 2 }}
+          >
+            {group.label}
+          </MyazaText>
+          {group.rows.map((row, i) => (
+            <StaggerIn key={`${group.label}-${i}`} delayMs={Math.min(entranceIndex++, 8) * 45}>
+              <AwaitCard row={row} />
+            </StaggerIn>
+          ))}
+        </View>
+      ))}
+
+      {outstanding > 0 ? (
+        <MyazaText
+          variant="bodySmall"
+          color={colors.textMuted}
+          // Clear air below: this caption is the list's last element and the
+          // Done button renders immediately after it in the parent.
+          style={{ textAlign: 'center', marginTop: spacing.xs, marginBottom: spacing.lg }}
+        >
+          Links are valid for 14 days.
+        </MyazaText>
+      ) : null}
+    </View>
+  );
+}

package/src/screens/KeyPeoplePending.tsx

@@ -0,0 +1,154 @@
+import React, { useEffect, useRef } from 'react';
+import { ActivityIndicator, Animated, View } from 'react-native';
+
+import { radius, spacing } from '../config/theme';
+import { useTheme } from '../components/runtime';
+import { MyazaText } from '../components/Typography';
+import { useReduceMotion } from '../components/StaggerIn';
+
+/**
+ * Held while the register is reconciled against what the applicant typed.
+ *
+ * A SKELETON of the roster it becomes, not a spinner line (mirrors the web
+ * SDK's KeyPeoplePending): ghost cards drawn at the real cards' geometry
+ * reserve the space so the answer lands in place, and the shape itself says
+ * "a list of people is coming" where a spinner only says "busy". A blank here
+ * reads as "nobody needs to verify", the opposite of true. The status line is
+ * a polite live region; every shimmer respects the OS reduce-motion setting.
+ * Seconds, normally; the hook behind it gives up rather than spinning forever.
+ */
+
+/** One shimmering placeholder bar. Static at 70% opacity under reduced motion. */
+function GhostBar({
+  pulse,
+  width,
+  height,
+  color,
+  round,
+  style,
+}: {
+  pulse: Animated.Value | null;
+  width: number | `${number}%`;
+  height: number;
+  color: string;
+  round?: boolean;
+  style?: object;
+}): React.ReactElement {
+  return (
+    <Animated.View
+      style={{
+        width,
+        height,
+        backgroundColor: color,
+        borderRadius: round ? radius.full : 4,
+        opacity: pulse ?? 0.7,
+        ...style,
+      }}
+    />
+  );
+}
+
+function GhostCard({
+  pulse,
+  withLink,
+}: {
+  pulse: Animated.Value | null;
+  withLink?: boolean;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  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, marginRight: spacing.sm }}>
+          <GhostBar pulse={pulse} width="42%" height={14} color={colors.border} />
+          <GhostBar
+            pulse={pulse}
+            width="64%"
+            height={10}
+            color={colors.border}
+            style={{ marginTop: spacing.xs + 2 }}
+          />
+        </View>
+        <GhostBar pulse={pulse} width={76} height={22} color={colors.border} round />
+      </View>
+      {withLink ? (
+        <GhostBar
+          pulse={pulse}
+          width="100%"
+          height={38}
+          color={colors.primary100}
+          round
+          style={{ marginTop: spacing.sm + 4 }}
+        />
+      ) : null}
+    </View>
+  );
+}
+
+export function KeyPeoplePending(): React.ReactElement {
+  const { colors } = useTheme();
+  const reduceMotion = useReduceMotion();
+  const pulseValue = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    if (reduceMotion) return undefined;
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(pulseValue, { toValue: 0.45, duration: 600, useNativeDriver: true }),
+        Animated.timing(pulseValue, { toValue: 1, duration: 600, useNativeDriver: true }),
+      ]),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [pulseValue, reduceMotion]);
+
+  const pulse = reduceMotion ? null : pulseValue;
+
+  return (
+    <View style={{ width: '100%', marginTop: spacing.lg }}>
+      <View
+        accessible
+        accessibilityLiveRegion="polite"
+        accessibilityLabel="Working out who else needs to verify. We are checking the official register for the company's directors and owners."
+        style={{ alignItems: 'center', marginBottom: spacing.md }}
+      >
+        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+          <ActivityIndicator size="small" color={colors.primary} />
+          <MyazaText variant="bodyMedium" style={{ fontWeight: '600', marginLeft: spacing.sm }}>
+            Working out who else needs to verify
+          </MyazaText>
+        </View>
+        {/* Naming the authority is the reassurance: the pause is the official
+            register being consulted, not the app hanging. */}
+        <MyazaText
+          variant="bodySmall"
+          color={colors.textMuted}
+          style={{ textAlign: 'center', marginTop: spacing.xs }}
+        >
+          We are checking the official register for the company's directors and owners.
+        </MyazaText>
+      </View>
+
+      {/* The ghost roster: geometry, not information — hidden from assistive
+          tech, the live region above already carries the message. */}
+      <View importantForAccessibility="no-hide-descendants" accessibilityElementsHidden>
+        <GhostBar
+          pulse={pulse}
+          width={64}
+          height={10}
+          color={colors.border}
+          style={{ marginBottom: spacing.xs + 2 }}
+        />
+        <GhostCard pulse={pulse} withLink />
+        <GhostCard pulse={pulse} />
+      </View>
+    </View>
+  );
+}

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