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

package/src/screens/KeepLinksSheet.tsx

@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+import { Linking, View } from 'react-native';
+import * as Clipboard from 'expo-clipboard';
+
+import { spacing } from '../config/theme';
+import { FloatingSheet } from '../components/glass/FloatingSheet';
+import { Icon } from '../components/Icon';
+import { MyazaAlert } from '../components/MyazaAlert';
+import { MyazaButton } from '../components/MyazaButton';
+import { MyazaText } from '../components/Typography';
+import { useTheme } from '../components/runtime';
+
+// Shown when the applicant taps Done while key people still owe a check.
+//
+// The invite links live on THIS success screen, and on mobile the screen dies
+// with the app: once closed, the applicant has no way back to the links unless
+// the org re-sends them. The session's own hosted web page is the way back —
+// the same rehydrated success screen, alive for as long as the invites are —
+// so the one moment to hand it over is the moment they leave.
+
+export function KeepLinksSheet({
+  open,
+  url,
+  onClose,
+  onDone,
+}: {
+  open: boolean;
+  url: string;
+  /** Dismiss the sheet only (they are staying on the success screen). */
+  onClose: () => void;
+  /** Close the sheet AND the flow (they are done here). */
+  onDone: () => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  const [copied, setCopied] = useState(false);
+
+  return (
+    <FloatingSheet visible={open} onClose={onClose}>
+      <View style={{ padding: spacing.md, paddingTop: spacing.xs, alignItems: 'center' }}>
+        <View
+          style={{
+            width: 52,
+            height: 52,
+            borderRadius: 26,
+            backgroundColor: colors.primary50,
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <Icon name="globe" size={26} color={colors.primary} />
+        </View>
+
+        <View style={{ height: spacing.md }} />
+        <MyazaText variant="heading3" style={{ textAlign: 'center' }}>
+          Keep a way back to these links
+        </MyazaText>
+        <View style={{ height: spacing.md }} />
+        <View style={{ width: '100%' }}>
+          <MyazaAlert
+            variant="warning"
+            title="This screen will not be shown again"
+            message="Your key people's links live on a web page made for you. Open it in your browser or copy the address somewhere safe, then check who has finished and share the links from there at any time."
+          />
+        </View>
+
+        <View style={{ height: spacing.lg }} />
+        <View style={{ width: '100%', gap: spacing.sm }}>
+          <MyazaButton
+            label="Open in my browser"
+            leadingIcon="globe"
+            onPress={() => void Linking.openURL(url).catch(() => undefined)}
+          />
+          <MyazaButton
+            label={copied ? 'Link copied' : 'Copy the page link'}
+            variant="outline"
+            leadingIcon={copied ? 'check' : 'copy'}
+            onPress={() => {
+              void Clipboard.setStringAsync(url)
+                .then(() => setCopied(true))
+                .catch(() => undefined);
+            }}
+          />
+          <MyazaButton label="I'm done here" variant="ghost" onPress={onDone} />
+        </View>
+      </View>
+    </FloatingSheet>
+  );
+}

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