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

package/src/components/DialCodePicker.tsx

@@ -0,0 +1,186 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+  FlatList,
+  Keyboard,
+  Modal,
+  Platform,
+  Pressable,
+  useWindowDimensions,
+  View,
+} from 'react-native';
+
+import { radius, spacing } from '../config/theme';
+import { useTheme } from './runtime';
+import { MyazaText } from './Typography';
+import { MyazaInput } from './MyazaInput';
+import { Icon } from './Icon';
+import { CountryFlag } from './CountryFlag';
+
+// ---------------------------------------------------------------------------
+// THE country sheet — the phone field's dial-code picker, generalised.
+//
+// A dedicated searchable sheet rather than MyazaSelect: that control renders
+// every option in a ScrollView, which is fine for four document kinds and
+// unusable for ~240 countries. A FlatList keeps the list smooth on a low-end
+// Android device. `dialCode` is optional: with it this is the phone picker,
+// without it a plain country picker (the key-people "where their ID was
+// issued" field) — SAME sheet, SAME search, so the two feel identical.
+//
+// Laid out to match Flutter's showDialCodePicker row for row: a MyazaInput with
+// a search prefix on top, then flag / full country name / dial code, with the
+// selected row tinted rather than ticked.
+//
+// The sheet is sized against the space left ABOVE the keyboard, like Flutter's.
+// The search field autofocuses, so measuring against the full screen would put
+// every result underneath the keys the moment the user started typing.
+// ---------------------------------------------------------------------------
+
+export interface DialCodeOption {
+  code: string;
+  name: string;
+  /** Absent ⇒ a plain country picker: no trailing code, name/ISO search only. */
+  dialCode?: string;
+}
+
+export function DialCodePicker({
+  visible,
+  options,
+  selected,
+  onPick,
+  onClose,
+  searchPlaceholder = 'Search country or code',
+}: {
+  visible: boolean;
+  options: DialCodeOption[];
+  selected: string;
+  onPick: (code: string) => void;
+  onClose: () => void;
+  searchPlaceholder?: string;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  const { height: screenHeight } = useWindowDimensions();
+  const [query, setQuery] = useState('');
+  const [keyboard, setKeyboard] = useState(0);
+
+  useEffect(() => {
+    // iOS reports 'will' events early enough to resize before the keys land;
+    // Android only emits 'did'.
+    const show = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hide = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+    const shown = Keyboard.addListener(show, (e) => setKeyboard(e.endCoordinates.height));
+    const hidden = Keyboard.addListener(hide, () => setKeyboard(0));
+    return () => {
+      shown.remove();
+      hidden.remove();
+    };
+  }, []);
+
+  const available = screenHeight - keyboard;
+  const maxHeight = Math.min(Math.max(available * 0.85, 240), screenHeight * 0.6);
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return options;
+    // Match the name, the ISO code, or the dial code with or without its '+',
+    // because people search for "+234", "234" and "Nigeria" in equal measure.
+    const bare = q.replace(/^\+/, '');
+    return options.filter(
+      (o) =>
+        o.name.toLowerCase().includes(q) ||
+        o.code.toLowerCase() === q ||
+        (o.dialCode != null && o.dialCode.replace(/^\+/, '').startsWith(bare)),
+    );
+  }, [options, query]);
+
+  const close = (): void => {
+    setQuery('');
+    onClose();
+  };
+
+  return (
+    <Modal visible={visible} animationType="slide" transparent onRequestClose={close}>
+      <Pressable style={{ flex: 1, backgroundColor: '#00000066' }} onPress={close} />
+      <View
+        style={{
+          maxHeight,
+          marginBottom: keyboard,
+          backgroundColor: colors.background,
+          borderTopLeftRadius: radius.lg,
+          borderTopRightRadius: radius.lg,
+          paddingTop: spacing.md,
+          paddingBottom: spacing.sm,
+        }}
+      >
+        <View style={{ paddingHorizontal: spacing.md, paddingBottom: spacing.sm }}>
+          <MyazaInput
+            value={query}
+            onChangeText={setQuery}
+            placeholder={searchPlaceholder}
+            autoFocus
+            prefix={<Icon name="search" size={18} color={colors.textSecondary} />}
+          />
+        </View>
+
+        <FlatList
+          data={filtered}
+          keyExtractor={(o) => o.code}
+          keyboardShouldPersistTaps="handled"
+          ListEmptyComponent={
+            <MyazaText variant="bodyMedium" style={{ padding: spacing.lg, textAlign: 'center' }}>
+              No countries match your search.
+            </MyazaText>
+          }
+          renderItem={({ item }) => (
+            <CountryRow
+              option={item}
+              isSelected={item.code === selected}
+              onPress={() => {
+                setQuery('');
+                onPick(item.code);
+              }}
+            />
+          )}
+        />
+      </View>
+    </Modal>
+  );
+}
+
+function CountryRow({
+  option,
+  isSelected,
+  onPress,
+}: {
+  option: DialCodeOption;
+  isSelected: boolean;
+  onPress: () => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  return (
+    <Pressable
+      onPress={onPress}
+      accessibilityRole="radio"
+      accessibilityState={{ checked: isSelected }}
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: spacing.md,
+        paddingVertical: spacing.sm,
+        backgroundColor: isSelected ? colors.primary50 : 'transparent',
+      }}
+    >
+      <CountryFlag country={option.code} size={24} />
+      <View style={{ width: spacing.md }} />
+      {/* No line clamp: "Bosnia & Herzegovina" and the like must read in full,
+          which is what Flutter's Expanded(Text) gives. */}
+      <MyazaText variant="bodyMedium" style={{ flex: 1 }}>
+        {option.name}
+      </MyazaText>
+      {option.dialCode != null ? (
+        <MyazaText variant="label" color={colors.textSecondary}>
+          {option.dialCode}
+        </MyazaText>
+      ) : null}
+    </Pressable>
+  );
+}

package/src/components/DocumentCropper.tsx

@@ -279,7 +279,7 @@ export function DocumentCropper({ uri, onCancel, onConfirm }: DocumentCropperPro
             <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', height: 48 }}>
               <ActivityIndicator color="#FFFFFF" />
               <View style={{ width: 10 }} />
-              <MyazaText variant="bodyMedium" color="rgba(255,255,255,0.8)">
+              <MyazaText variant="bodyMedium" color="rgba(255,255,255,0.8)" style={{ flexShrink: 1 }}>
                 Processing…
               </MyazaText>
             </View>

package/src/components/DocumentReview.tsx

@@ -0,0 +1,142 @@
+import React, { useState } from 'react';
+import { View } from 'react-native';
+
+import { useTheme } from './runtime';
+import { Icon } from './Icon';
+import { MyazaText } from './Typography';
+import { DocumentReviewThumb, type ReviewSide } from './DocumentReviewSide';
+import { DocumentReviewZoom } from './DocumentReviewZoom';
+import { radius, spacing } from '../config/theme';
+
+// ─── Document review ──────────────────────────────────────────────────────────
+//
+// What the user sees once their document is captured.
+//
+// The two-sided version used to stack the sides full-width with a retake button
+// under each, which on a phone pushed the back image AND the Continue button
+// below the fold — people reported not realising there was anything left to do.
+// A review screen whose primary action you have to discover by scrolling is a
+// dead end, so the layout is:
+//
+//   • both sides SIDE BY SIDE at every size, so "both captured" reads at a
+//     glance instead of by scrolling;
+//   • retake as a labelled button under each thumbnail, which removes the two
+//     full-width buttons that cost the most vertical space;
+//   • the action bar at the BOTTOM of the viewport, so Continue is visible
+//     however tall the content gets;
+//   • tap a thumbnail to enlarge it — side by side means smaller, and checking
+//     the capture is legible is the entire point of this screen.
+//
+// Mirrors the web SDK's DocumentReview and Flutter's document_review.dart so
+// all three behave the same.
+//
+// Unlike Flutter, the step here sits inside the sheet's own ScrollView (which
+// already carries the bottom safe-area inset), so the footer is pushed down by
+// a flexible spacer rather than pinned with a hand-computed inset.
+
+export function DocumentReview({
+  frontUri,
+  backUri,
+  aspect,
+  isBusy,
+  busyOverlay,
+  footer,
+  onRetakeFront,
+  onRetakeBack,
+}: {
+  frontUri: string;
+  backUri?: string | null;
+  /** Document aspect, so a half-width thumbnail still shows the whole card. */
+  aspect: number;
+  /** Uploading — dims the thumbnails and disables retake. */
+  isBusy: boolean;
+  /** Painted over each thumbnail while busy (the upload loader). */
+  busyOverlay?: React.ReactNode;
+  /** Errors, retry notices and the Continue button — below the images. */
+  footer: React.ReactNode;
+  onRetakeFront?: () => void;
+  onRetakeBack?: () => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  const [zoomed, setZoomed] = useState<ReviewSide | null>(null);
+
+  const sides: ReviewSide[] = [
+    { id: 'front', label: 'Front', uri: frontUri, onRetake: onRetakeFront },
+    ...(backUri ? [{ id: 'back' as const, label: 'Back', uri: backUri, onRetake: onRetakeBack }] : []),
+  ];
+  const twoSided = sides.length > 1;
+
+  return (
+    <View style={{ flex: 1 }}>
+      {/* Says the capture is COMPLETE — the thing users were scrolling to find
+          out. */}
+      <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
+        <View
+          style={{
+            width: 20,
+            height: 20,
+            borderRadius: radius.full,
+            backgroundColor: `${colors.success}26`,
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <Icon name="check" size={13} color={colors.success} />
+        </View>
+        <View style={{ width: spacing.xs }} />
+        <MyazaText variant="bodySmall" style={{ fontWeight: '600' }}>
+          {twoSided ? 'Both sides captured' : 'Photo captured'}
+        </MyazaText>
+      </View>
+
+      <View style={{ height: spacing.md }} />
+
+      {/* Top-aligned: the images are what the user checks first, so they sit
+          where the eye lands rather than floating in the middle of the screen. */}
+      <View style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
+        {sides.map((side, i) => (
+          <React.Fragment key={side.id}>
+            {i > 0 ? <View style={{ width: spacing.sm }} /> : null}
+            <View style={{ flex: 1 }}>
+              <DocumentReviewThumb
+                side={side}
+                aspect={aspect}
+                isBusy={isBusy}
+                // Gated on isBusy HERE, not on the prop's existence. The tile
+                // rendered it whenever it was provided — and the caller always
+                // provides it — so the loader sat over the preview forever and
+                // the screen read as permanently stuck.
+                busyOverlay={isBusy ? busyOverlay : null}
+                onZoom={() => setZoomed(side)}
+              />
+            </View>
+          </React.Fragment>
+        ))}
+      </View>
+
+      <View style={{ height: spacing.xs }} />
+      <MyazaText variant="bodySmall" color={colors.textMuted} style={{ textAlign: 'center' }}>
+        Tap a photo to see it larger.
+      </MyazaText>
+
+      {/* Pushes the action bar to the bottom of the viewport so Continue can
+          never end up below the fold. */}
+      <View style={{ flex: 1, minHeight: spacing.md }} />
+
+      <View testID="kyc.review.footer">{footer}</View>
+
+      {zoomed ? (
+        <DocumentReviewZoom
+          side={zoomed}
+          isBusy={isBusy}
+          onClose={() => setZoomed(null)}
+          onRetake={() => {
+            const retake = zoomed.onRetake;
+            setZoomed(null);
+            retake?.();
+          }}
+        />
+      ) : null}
+    </View>
+  );
+}

package/src/components/DocumentReviewSide.tsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import { Image, Pressable, View } from 'react-native';
+
+import { useTheme } from './runtime';
+import { Icon } from './Icon';
+import { MyazaText } from './Typography';
+import { radius, spacing } from '../config/theme';
+
+// ─── One captured side, and its enlarged view ─────────────────────────────────
+//
+// Split from DocumentReview.tsx so each file stays readable. Mirrors the
+// Flutter SDK's document_review_side.dart.
+//
+// The photo carries only LABELS — which side it is, and that tapping enlarges
+// it. The actions are named buttons underneath. An icon-only control floating
+// on an image reads as decoration on a phone, where there is no hover to
+// reveal what it does.
+
+export interface ReviewSide {
+  /** 'front' | 'back' — also the testID suffix. */
+  id: 'front' | 'back';
+  label: string;
+  uri: string;
+  onRetake?: () => void;
+}
+
+export function DocumentReviewThumb({
+  side,
+  aspect,
+  isBusy,
+  busyOverlay,
+  onZoom,
+}: {
+  side: ReviewSide;
+  aspect: number;
+  isBusy: boolean;
+  busyOverlay?: React.ReactNode;
+  onZoom: () => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  return (
+    <View>
+      <View
+        testID={`kyc.review.${side.id}`}
+        style={{ borderRadius: radius.md, overflow: 'hidden' }}
+      >
+        <Pressable onPress={onZoom} accessibilityRole="imagebutton" accessibilityLabel={`${side.label} photo — tap to enlarge`}>
+          {/* The whole card stays visible at half width — a cropped thumbnail
+              cannot be checked for legibility, which is the only reason this
+              screen exists. */}
+          <Image
+            source={{ uri: side.uri }}
+            style={{ width: '100%', aspectRatio: aspect, backgroundColor: colors.backgroundSecondary }}
+            resizeMode="contain"
+          />
+        </Pressable>
+        {/* Inset past the corner CURVE, not just past the edge: at this radius
+            a 6px offset puts the badge on the round, where it reads as
+            clipped. */}
+        <View style={{ position: 'absolute', left: spacing.md, top: spacing.md }}>
+          <Chip>
+            <MyazaText variant="bodySmall" color="#FFFFFF" style={CHIP_TEXT}>
+              {side.label}
+            </MyazaText>
+          </Chip>
+        </View>
+        {/* Enlarging is a tap on the image, which nothing announces — so the
+            image says so itself. */}
+        <View style={{ position: 'absolute', right: spacing.md, bottom: spacing.md }} pointerEvents="none">
+          <Chip icon>
+            <Icon name="maximize" size={18} color="#FFFFFF" />
+          </Chip>
+        </View>
+        {busyOverlay ? (
+          <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}>{busyOverlay}</View>
+        ) : null}
+      </View>
+
+      {/* Retake as a LABELLED control, not an icon on the photo.
+          The web version hides it under the image and reveals it on hover; a
+          phone has no hover, so that became a small unlabelled circle people
+          did not read as a button. Naming it costs a few pixels and is the
+          difference between a discoverable action and a decoration. */}
+      <Pressable
+        testID={`kyc.review.retake.${side.id}`}
+        onPress={isBusy ? undefined : side.onRetake}
+        disabled={isBusy}
+        accessibilityRole="button"
+        accessibilityLabel={`Retake ${side.label.toLowerCase()}`}
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+          minHeight: 36, // stays a comfortable tap target
+          paddingVertical: 4,
+          marginTop: spacing.xs,
+          opacity: isBusy ? 0.4 : 1,
+        }}>
+        <Icon name="refresh" size={14} color={colors.primary} />
+        <View style={{ width: 6 }} />
+        <MyazaText variant="bodySmall" color={colors.primary} style={{ flexShrink: 1 }}>
+          Retake
+        </MyazaText>
+      </Pressable>
+    </View>
+  );
+}
+
+export const CHIP_TEXT = { fontSize: 11, fontWeight: '600' as const };
+
+/**
+ * A small dark label over the photo. Non-interactive by design — the actions on
+ * this screen are named buttons, not icons floating on an image.
+ */
+export function Chip({
+  children,
+  /** Icon chips are square and need room around the glyph, not text padding. */
+  icon = false,
+}: {
+  children: React.ReactNode;
+  icon?: boolean;
+}): React.ReactElement {
+  return (
+    <View
+      style={{
+        paddingHorizontal: icon ? 8 : 10,
+        paddingVertical: icon ? 8 : 5,
+        borderRadius: radius.full,
+        backgroundColor: 'rgba(0,0,0,0.55)',
+      }}
+    >
+      {children}
+    </View>
+  );
+}

package/src/components/DocumentReviewZoom.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import { Image, Modal, Platform, Pressable, StatusBar, View } from 'react-native';
+import { initialWindowMetrics } from 'react-native-safe-area-context';
+
+import { radius, spacing } from '../config/theme';
+import { Icon } from './Icon';
+import { MyazaText } from './Typography';
+import { MyazaButton } from './MyazaButton';
+import { Chip, CHIP_TEXT, type ReviewSide } from './DocumentReviewSide';
+
+/**
+ * Full-bleed view of one side, with retake to hand — checking a capture and
+ * deciding to redo it are the same moment.
+ *
+ * Deliberately opaque and dark. The first version tinted the theme background
+ * at 97% opacity, which on the dark theme is very nearly the colour it sits on:
+ * tapping a photo appeared to do nothing. An overlay has to announce itself as
+ * a new layer, so this one is near-black regardless of theme, with a close
+ * control big enough to find.
+ */
+/** Clearance for the status bar / notch above the zoom's own controls. */
+function topInset(): number {
+  const sa = initialWindowMetrics?.insets;
+  if (Platform.OS === 'android') return sa?.top || StatusBar.currentHeight || 28;
+  // iOS presents this modal full-screen under the bar; 44 clears the island on
+  // the notched devices and is harmless on the ones without.
+  return sa?.top || 44;
+}
+
+/**
+ * Clearance for the home indicator / nav bar BELOW the zoom's controls.
+ *
+ * The modal runs edge to edge, so without this the Retake button sits flush
+ * against the bottom of the screen — clipped by the indicator and awkward to
+ * hit, since that strip belongs to the system gesture.
+ */
+function bottomInset(): number {
+  const sa = initialWindowMetrics?.insets;
+  if (Platform.OS === 'android') return sa?.bottom ?? 0;
+  return sa?.bottom || 34;
+}
+
+export function DocumentReviewZoom({
+  side,
+  isBusy,
+  onClose,
+  onRetake,
+}: {
+  side: ReviewSide;
+  isBusy: boolean;
+  onClose: () => void;
+  onRetake: () => void;
+}): React.ReactElement {
+  return (
+    <Modal visible transparent animationType="fade" onRequestClose={onClose} statusBarTranslucent>
+      {/* The modal is statusBarTranslucent, so its content starts at y=0 —
+          under the notch / Dynamic Island. Without the inset the close button
+          renders BEHIND the island and the only way out of a full-screen image
+          is invisible. Same static safe-area snapshot the sheet uses. */}
+      <View
+        testID="kyc.review.zoom"
+        style={{
+          flex: 1,
+          backgroundColor: '#0A0A12F2',
+          padding: spacing.sm,
+          paddingTop: spacing.sm + topInset(),
+          paddingBottom: spacing.sm + bottomInset(),
+        }}
+      >
+        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+          <Chip>
+            <MyazaText variant="bodySmall" color="#FFFFFF" style={[CHIP_TEXT, { flexShrink: 1 }]}>
+              {side.label}
+            </MyazaText>
+          </Chip>
+          <View style={{ flex: 1 }} />
+          {/* A filled circle, not a bare glyph on a dark field: the way out of
+              a full-screen view has to be obvious. */}
+          <Pressable
+            testID="kyc.review.zoom.close"
+            onPress={onClose}
+            accessibilityRole="button"
+            accessibilityLabel="Close"
+            style={{
+              width: 40,
+              height: 40,
+              borderRadius: radius.full,
+              backgroundColor: 'rgba(255,255,255,0.14)',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <Icon name="close" size={20} color="#FFFFFF" />
+          </Pressable>
+        </View>
+
+        <View style={{ height: spacing.sm }} />
+        {/* Tapping the image again closes it — the same gesture that opened it,
+            which is what people try first. */}
+        <Pressable onPress={onClose} style={{ flex: 1 }} accessibilityRole="button" accessibilityLabel="Close enlarged photo">
+          <Image
+            source={{ uri: side.uri }}
+            style={{ flex: 1, width: '100%', borderRadius: radius.md }}
+            resizeMode="contain"
+          />
+        </Pressable>
+
+        <View style={{ height: spacing.sm }} />
+        <MyazaButton
+          label={`Retake ${side.label.toLowerCase()}`}
+          leadingIcon="refresh"
+          variant="outline"
+          disabled={isBusy}
+          onPress={onRetake}
+        />
+      </View>
+    </Modal>
+  );
+}

package/src/components/ExpiryCountdown.tsx

@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from 'react';
+
+import { useTheme } from './runtime';
+import { MyazaText } from './Typography';
+
+// ---------------------------------------------------------------------------
+// Live "expires in m:ss" ticker for a one-time code.
+//
+// Ticks once a second and stops at zero, so a stale challenge reads as expired
+// instead of claiming minutes that already elapsed. Mirrors the web and Flutter
+// SDKs — without it the user has no idea whether to keep waiting for a code or
+// ask for a new one.
+// ---------------------------------------------------------------------------
+
+export function ExpiryCountdown({
+  expiresAt,
+  expiredLabel = 'The code has expired. Request a new one.',
+}: {
+  /** ISO timestamp from the send response. */
+  expiresAt: string;
+  expiredLabel?: string;
+}): React.ReactElement | null {
+  const { colors } = useTheme();
+  const target = new Date(expiresAt).getTime();
+  const [remaining, setRemaining] = useState(() => Math.max(0, target - Date.now()));
+
+  useEffect(() => {
+    // Re-seed on a resend: the new challenge carries a later expiry.
+    setRemaining(Math.max(0, target - Date.now()));
+    const id = setInterval(() => {
+      const left = Math.max(0, target - Date.now());
+      setRemaining(left);
+      if (left === 0) clearInterval(id);
+    }, 1000);
+    return () => clearInterval(id);
+  }, [target]);
+
+  // An unparseable timestamp would render "NaN:aN" — show nothing instead.
+  if (!Number.isFinite(target)) return null;
+
+  const totalSeconds = Math.ceil(remaining / 1000);
+  const label =
+    remaining === 0
+      ? expiredLabel
+      : `The code expires in ${Math.floor(totalSeconds / 60)}:${String(totalSeconds % 60).padStart(2, '0')}`;
+
+  return (
+    <MyazaText variant="bodySmall" color={colors.textMuted}>
+      {label}
+    </MyazaText>
+  );
+}