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

package/src/screens/ProofOfAddressStep.tsx

@@ -1,17 +1,21 @@
-import React, { useCallback, useState } from 'react';
-import { ActivityIndicator, Image, Pressable, View } from 'react-native';
+import React, { useCallback, useEffect, useState } from 'react';
+import { View } from 'react-native';
 
-import { radius, spacing } from '../config/theme';
-import { useKyc, useKycConfig, useKycStore, useTheme } from '../components/runtime';
+import { spacing } from '../config/theme';
+import { useEffectiveCountry, useKyc, useKycConfig, useKycStore, useTheme } from '../components/runtime';
 import { MyazaText } from '../components/Typography';
 import { MyazaButton } from '../components/MyazaButton';
-import { Icon } from '../components/Icon';
 import { MediaSourceSheet } from '../components/MediaSourceSheet';
-import { MyazaSelect } from '../components/MyazaSelect';
+import { PoaDocumentTypeList } from './PoaDocumentTypeList';
+import { configScope } from '../lib/scope';
 import { withRetry } from '../services/retry';
 import { compressDocumentImage } from '../services/mediaCompress';
+import { uploadFailureMessage } from '../services/uploadErrors';
 import { poaDocumentTypes, poaMaxAgeDays, poaTypeLabel } from '../config/proofOfAddress';
 import { usePoaAttach, type PoaPick } from './usePoaAttach';
+import { AddressCountryControl, poaOfferedCountries } from './AddressCountryControl';
+import { poaCountryDeclared } from '../lib/poa-country-gate';
+import { PoaDropzone, PoaUploadedRow } from './ProofOfAddressParts';
 import type { PoaDocumentType } from '../types/workflow';
 
 // ---------------------------------------------------------------------------
@@ -27,10 +31,17 @@ import type { PoaDocumentType } from '../types/workflow';
 // beyond making sure a file was actually attached.
 // ---------------------------------------------------------------------------
 
-export function proofOfAddressMeta(maxAgeDays: number): { title: string; description: string } {
+export function proofOfAddressMeta(
+  maxAgeDays: number,
+  /** Whether the workflow's name rule wants the applicant's name on THIS
+   *  document. False for e.g. a Nigerian utility bill that names the meter,
+   *  not the tenant — asking for "your name" there sends people hunting for a
+   *  document they do not have. */
+  nameNeeded = true,
+): { title: string; description: string } {
   return {
     title: 'Proof of address',
-    description: `Upload a document that shows your name and home address, issued within the last ${maxAgeDays} days.`,
+    description: `Upload a document that shows your ${nameNeeded ? 'name and home address' : 'home address'}, issued within the last ${maxAgeDays} days.`,
   };
 }
 
@@ -42,8 +53,23 @@ export function ProofOfAddressStep(): React.ReactElement {
   const fileName = useKyc((s) => s.poaFileName);
   const storedType = useKyc((s) => s.poaDocumentType);
 
-  const types = poaDocumentTypes(config.proofOfAddress);
+  // The kinds on offer follow the country — on the address scope the picker
+  // below changes it, and an org may accept different documents per market.
+  const country = useEffectiveCountry();
+  const types = poaDocumentTypes(config.proofOfAddress, country);
+  // The flag on the attachment area: on the address scope only a country the
+  // applicant picked (the scope has no seeded country to show), else the
+  // flow's effective country.
+  const selectedCountry = useKyc((s) => s.selectedCountry);
+  const flagCountry = configScope(config) === 'address' ? (selectedCountry ?? null) : (country ?? null);
   const [selectedType, setSelectedType] = useState<PoaDocumentType>(storedType ?? types[0]!);
+  const typesKey = types.join(',');
+  useEffect(() => {
+    // A country change can withdraw the picked kind; fall back to the first
+    // offered rather than submitting a label that country does not accept.
+    if (!types.includes(selectedType)) setSelectedType(types[0]!);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [typesKey]);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
   // The picked file, kept for the thumbnail — the only way a user catches
@@ -66,9 +92,9 @@ export function ProofOfAddressStep(): React.ReactElement {
           store.getState().api.upload({ uri: finalUri, type: mimeType, name }, 'proof_of_address'),
         );
         store.getState().setProofOfAddress(id, selectedType, name);
-      } catch {
+      } catch (e) {
         setPreview(null);
-        setError('We could not upload that document. Please try again.');
+        setError(uploadFailureMessage(e));
       } finally {
         setBusy(false);
       }
@@ -88,6 +114,14 @@ export function ProofOfAddressStep(): React.ReactElement {
   }, [store]);
 
   const uploaded = Boolean(mediaId) && !busy;
+  // The address scope's country is the applicant's declaration and drives the
+  // document's market; Continue holds until it is made (the control above
+  // asks for it). Never bites elsewhere. See lib/poa-country-gate.ts.
+  const countryDeclared = poaCountryDeclared({
+    scope: configScope(config),
+    selectedCountry,
+    offered: poaOfferedCountries(config.proofOfAddress?.countries),
+  });
 
   return (
     <View>
@@ -116,109 +150,37 @@ export function ProofOfAddressStep(): React.ReactElement {
           },
         ]}
       />
+      <AddressCountryControl />
       {types.length > 1 ? (
         <>
           <MyazaText variant="bodySmall" style={{ fontWeight: '600', marginBottom: spacing.xs }}>
             Document type
           </MyazaText>
-          <MyazaSelect<PoaDocumentType>
+          <PoaDocumentTypeList
             value={selectedType}
-            sheetTitle="Document type"
             // Locked once a file is attached: switching the kind afterwards
             // would mislabel the document already uploaded.
-            enabled={!uploaded && !busy}
+            disabled={uploaded || busy}
             options={types.map((type) => ({
               value: type,
               label: poaTypeLabel(type, config.proofOfAddress),
             }))}
             onChange={setSelectedType}
           />
-          <View style={{ height: spacing.lg }} />
+          <View style={{ height: spacing.sm }} />
         </>
       ) : null}
 
       {uploaded ? (
-        <View
-          style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            padding: spacing.md,
-            borderRadius: radius.md,
-            borderWidth: 1,
-            borderColor: colors.border,
-            backgroundColor: colors.backgroundSecondary,
-          }}
-        >
-          {preview && !preview.isPdf ? (
-            <Image
-              source={{ uri: preview.uri }}
-              style={{ width: 48, height: 48, borderRadius: radius.sm }}
-              resizeMode="cover"
-            />
-          ) : (
-            <View
-              style={{
-                width: 48,
-                height: 48,
-                borderRadius: radius.sm,
-                borderWidth: 1,
-                borderColor: colors.border,
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}
-            >
-              <Icon name="file-text" size={22} color={colors.primary} />
-            </View>
-          )}
-          <View style={{ width: spacing.md, flexShrink: 0 }} />
-          <View style={{ flex: 1, minWidth: 0 }}>
-            <MyazaText variant="bodySmall" style={{ fontWeight: '600' }} numberOfLines={1}>
-              {fileName ?? 'Document uploaded'}
-            </MyazaText>
-            <MyazaText variant="bodySmall" color={colors.textSecondary} numberOfLines={1}>
-              {typeLabel}
-            </MyazaText>
-          </View>
-          <Pressable
-            onPress={remove}
-            accessibilityRole="button"
-            accessibilityLabel="Remove document"
-            hitSlop={8}
-          >
-            <Icon name="x" size={18} color={colors.textSecondary} />
-          </Pressable>
-        </View>
+        <PoaUploadedRow
+          preview={preview}
+          fileName={fileName}
+          typeLabel={typeLabel}
+          country={flagCountry}
+          onRemove={remove}
+        />
       ) : (
-        <Pressable
-          onPress={() => {
-            if (!busy) void pick();
-          }}
-          accessibilityRole="button"
-          accessibilityLabel={`Upload your ${typeLabel.toLowerCase()}`}
-          style={{
-            alignItems: 'center',
-            justifyContent: 'center',
-            paddingVertical: spacing.xl,
-            paddingHorizontal: spacing.lg,
-            borderRadius: radius.md,
-            borderWidth: 1.5,
-            borderStyle: 'dashed',
-            borderColor: colors.border,
-          }}
-        >
-          {busy ? (
-            <ActivityIndicator size="small" color={colors.primary} />
-          ) : (
-            <Icon name="upload" size={30} color={colors.textSecondary} />
-          )}
-          <View style={{ height: spacing.sm }} />
-          <MyazaText variant="bodySmall" style={{ fontWeight: '600' }}>
-            {busy ? 'Uploading…' : `Upload your ${typeLabel.toLowerCase()}`}
-          </MyazaText>
-          <MyazaText variant="bodySmall" color={colors.textSecondary}>
-            Photo or PDF, up to 20MB
-          </MyazaText>
-        </Pressable>
+        <PoaDropzone busy={busy} typeLabel={typeLabel} country={flagCountry} onPress={() => void pick()} />
       )}
 
       {error ? (
@@ -230,7 +192,7 @@ export function ProofOfAddressStep(): React.ReactElement {
       <View style={{ height: spacing.lg }} />
       <MyazaButton
         label="Continue"
-        disabled={!mediaId || busy}
+        disabled={!mediaId || busy || !countryDeclared}
         onPress={() => store.getState().nextStep()}
       />
     </View>

package/src/screens/SubmittedBadge.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { radius } from '../config/theme';
+
+/** The terminal screens' 88px circular badge: a tinted disc with a 2px ring,
+ *  holding the outcome icon. Shared by the submitted and result screens. */
+export function Badge({ bg, border, children }: { bg: string; border: string; children: React.ReactNode }): React.ReactElement {
+  return (
+    <View
+      style={{
+        width: 88,
+        height: 88,
+        borderRadius: radius.full,
+        backgroundColor: bg,
+        borderWidth: 2,
+        borderColor: border,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      {children}
+    </View>
+  );
+}

package/src/screens/SubmittedError.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { spacing } from '../config/theme';
+import type { KYCError } from '../types/verification';
+import { useTheme } from '../components/runtime';
+import { MyazaText } from '../components/Typography';
+import { MyazaButton } from '../components/MyazaButton';
+import { MyazaAlert } from '../components/MyazaAlert';
+import { Icon } from '../components/Icon';
+import { Badge } from './SubmittedBadge';
+
+// The submitted step's error screen (split from SubmittedStep, 200-line
+// rule). `onRetry` is null when the failure is not recoverable in-flow (an
+// exhausted balance, a refused key); the step decides, this only renders.
+
+const ERROR_TITLES: Record<string, string> = {
+  insufficient_credits: 'Credits Exhausted',
+  invalid_api_key: 'Authentication Failed',
+  feature_disabled: 'Verification Unavailable',
+  upload_failed: 'Upload Failed',
+  network_error: 'Connection Failed',
+};
+
+export function SubmittedError({
+  error,
+  onRetry,
+  onClose,
+}: {
+  error: KYCError;
+  onRetry: (() => void) | null;
+  onClose: () => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  const title = ERROR_TITLES[error.code] ?? 'Submission Failed';
+  return (
+    <View style={{ flex: 1, justifyContent: 'space-between' }}>
+      <View style={{ alignItems: 'center' }}>
+        <View style={{ height: spacing.xl }} />
+        <Badge bg={colors.errorBg} border={`${colors.error}4D`}>
+          <Icon name="alert" size={44} color={colors.error} />
+        </Badge>
+        <View style={{ height: spacing.lg }} />
+        <MyazaText variant="heading1" style={{ textAlign: 'center' }}>
+          {title}
+        </MyazaText>
+        <View style={{ height: spacing.md }} />
+        <View style={{ width: '100%', paddingHorizontal: spacing.md }}>
+          <MyazaAlert variant="error" title="What happened" message={error.message} />
+        </View>
+      </View>
+      <View style={{ flexDirection: 'row', gap: spacing.md }}>
+        {onRetry ? (
+          <View style={{ flex: 1 }}>
+            <MyazaButton label="Try Again" variant="outline" leadingIcon="refresh" onPress={onRetry} />
+          </View>
+        ) : null}
+        <View style={{ flex: 1 }}>
+          <MyazaButton label="Close" onPress={onClose} />
+        </View>
+      </View>
+    </View>
+  );
+}

package/src/screens/SubmittedResult.tsx

@@ -0,0 +1,117 @@
+import React, { useEffect, useState } from 'react';
+import { View } from 'react-native';
+
+import { spacing } from '../config/theme';
+import { useKycConfig, useKycStore, useTheme } from '../components/runtime';
+import { MyazaText } from '../components/Typography';
+import { MyazaButton } from '../components/MyazaButton';
+import { Icon } from '../components/Icon';
+import { awaitVerificationOutcome, type VerificationOutcome } from '../lib/result-wait';
+import { describeOutcome, describeWaiting } from '../lib/result-copy';
+import { biometricCopyFor } from '../lib/biometric-copy';
+import { configScope } from '../lib/scope';
+import { Badge } from './SubmittedBadge';
+import { SubmittedWaiting } from './SubmittedWaiting';
+import { StaggerIn } from '../components/StaggerIn';
+
+// ─── The result screen (a flow that waits for its verdict) ──────────────────
+//
+// A biometric re-authentication delivered in the flow ('both', the default, or 'app')
+// is answered NOW or it is useless. This screen is mounted from the submitted
+// step's FIRST render and shows one loading screen through the selfie upload,
+// the submission (`verificationId` is null until it lands) and the status
+// poll, then the verdict, firing `onResult` once. The wait has a budget: past
+// it the screen says so and the webhook remains the record, exactly as on
+// every other flow. `showDone` is the `doneButton` option: off when the host
+// app dismisses the flow itself from `onResult`.
+
+export function SubmittedResult({
+  verificationId,
+  retry,
+  showDone,
+  onClose,
+}: {
+  verificationId: string | null;
+  retry: { attempt: number; total: number } | null;
+  showDone: boolean;
+  onClose: () => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  const config = useKycConfig();
+  const store = useKycStore();
+  const [outcome, setOutcome] = useState<VerificationOutcome | null>(null);
+
+  useEffect(() => {
+    if (!verificationId) return undefined;
+    let alive = true;
+    const api = store.getState().api;
+    void awaitVerificationOutcome({
+      fetchStatus: () => api.status(verificationId).catch(() => null),
+    }).then((settled) => {
+      if (!alive) return;
+      setOutcome(settled);
+      if (settled.kind === 'settled') {
+        config.onResult?.({
+          verificationId,
+          status: settled.status,
+          reason: settled.reason,
+          reasonCode: settled.reasonCode,
+        });
+      }
+    });
+    return () => {
+      alive = false;
+    };
+    // The wait is tied to the verification, not to the callback identity.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [verificationId]);
+
+  // The org's own words for these screens, tokens filled (null = the defaults).
+  const words = biometricCopyFor(config);
+  if (!outcome) {
+    const copy = describeWaiting({ scope: configScope(config), waitsForResult: true, retry, override: words.waiting });
+    return <SubmittedWaiting title={copy.title} description={copy.description} retrying={retry != null} />;
+  }
+
+  const copy = describeOutcome(outcome, words);
+  const palette =
+    copy.tone === 'success'
+      ? { bg: colors.successBg, fg: colors.success, icon: 'check' as const }
+      : copy.tone === 'error'
+        ? { bg: colors.errorBg, fg: colors.error, icon: 'alert' as const }
+        : { bg: `${colors.primary}14`, fg: colors.primary, icon: 'info' as const };
+
+  return (
+    <View style={{ flex: 1, justifyContent: 'space-between' }}>
+      <View style={{ alignItems: 'center' }}>
+        <View style={{ height: spacing.xl }} />
+        {/* The verdict lands in the order Flutter's does: badge, title,
+            description, then Done (delays 0 / 200 / 320 / 600 ms). */}
+        <StaggerIn>
+          <Badge bg={palette.bg} border={`${palette.fg}4D`}>
+            <Icon name={palette.icon} size={44} color={palette.fg} />
+          </Badge>
+        </StaggerIn>
+        <View style={{ height: spacing.lg }} />
+        <StaggerIn delayMs={200}>
+          <MyazaText variant="heading1" style={{ textAlign: 'center' }}>
+            {copy.title}
+          </MyazaText>
+        </StaggerIn>
+        <View style={{ height: spacing.sm }} />
+        <StaggerIn delayMs={320}>
+          <MyazaText variant="bodyMedium" style={{ textAlign: 'center', paddingHorizontal: spacing.lg }}>
+            {copy.description}
+          </MyazaText>
+        </StaggerIn>
+      </View>
+      {showDone ? (
+        <StaggerIn delayMs={600}>
+          <MyazaButton label="Done" onPress={onClose} />
+        </StaggerIn>
+      ) : (
+        <View />
+      )}
+    </View>
+  );
+}