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

package/src/components/DialCodeRow.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+
+import { spacing } from '../config/theme';
+import { useTheme } from './runtime';
+import { MyazaText } from './Typography';
+import { CountryFlag } from './CountryFlag';
+import { GeoBadge } from './GeoBadge';
+import type { DialCodeOption } from './DialCodePicker';
+
+// ---------------------------------------------------------------------------
+// One country in the dial-code sheet. Extracted from DialCodePicker (200-line
+// rule) and shared by the pinned geo row and the alphabetical ones, so the two
+// cannot drift apart: they are the same control in two positions, and the
+// pinned one only differs by carrying a tag and a hairline beneath it.
+// ---------------------------------------------------------------------------
+
+export function DialCodeRow({
+  option,
+  isSelected,
+  badge,
+  onPress,
+}: {
+  option: DialCodeOption;
+  isSelected: boolean;
+  /** Tags the pinned geo row ("Your location"). */
+  badge?: string;
+  onPress: () => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  return (
+    <Pressable
+      onPress={onPress}
+      accessibilityRole="radio"
+      accessibilityState={{ checked: isSelected }}
+      accessibilityLabel={badge ? `${option.name}, ${badge.toLowerCase()}` : option.name}
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: spacing.md,
+        // Roomier rows: a country list is a long scan, and cramped rows make
+        // every tap a precision job. Matches the web dropdown's row height.
+        paddingVertical: 12,
+        backgroundColor: isSelected ? colors.primary50 : 'transparent',
+      }}
+    >
+      <CountryFlag country={option.code} size={28} />
+      <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. Full body size (16),
+          the web dropdown's reading size — 14 read small against the flags. */}
+      <MyazaText variant="body" style={{ flex: 1 }}>
+        {option.name}
+      </MyazaText>
+      {badge ? <GeoBadge label={badge} /> : null}
+      {option.dialCode != null ? (
+        <MyazaText variant="bodyMedium" color={colors.textSecondary}>
+          {option.dialCode}
+        </MyazaText>
+      ) : null}
+    </Pressable>
+  );
+}
+
+/**
+ * A region label between grouped rows — the country-select step's header
+ * (uppercase, tracked out), so the two pickers read as one control.
+ */
+export function DialCodeRegionHeader({ region }: { region: string }): React.ReactElement {
+  const { colors } = useTheme();
+  return (
+    <MyazaText
+      variant="bodySmall"
+      color={colors.textSecondary}
+      accessibilityRole="header"
+      style={{
+        fontWeight: '700',
+        letterSpacing: 0.6,
+        paddingHorizontal: spacing.md,
+        paddingTop: spacing.md,
+        paddingBottom: spacing.xs,
+      }}
+    >
+      {region.toUpperCase()}
+    </MyazaText>
+  );
+}
+
+/** The hairline under the pinned row, separating it from the alphabet. */
+export function DialCodeDivider(): React.ReactElement {
+  const { colors } = useTheme();
+  return (
+    <View
+      style={{
+        marginHorizontal: spacing.md,
+        marginVertical: spacing.xs,
+        borderBottomWidth: StyleSheet.hairlineWidth,
+        borderBottomColor: colors.border,
+      }}
+    />
+  );
+}

package/src/components/DocumentCropper.tsx

@@ -2,11 +2,12 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { ActivityIndicator, LayoutChangeEvent, Modal, PanResponder, Platform, Pressable, StatusBar, StyleSheet, View } from 'react-native';
 import Svg, { Line, Rect } from 'react-native-svg';
 
-import { spacing } from '../config/theme';
+import { headerSurface, spacing } from '../config/theme';
 import { cropImage, imageSize } from '../services/mediaCompress';
 import { MyazaText } from './Typography';
 import { MyazaButton } from './MyazaButton';
 import { Icon } from './Icon';
+import { useTheme } from './runtime';
 import { Image } from 'react-native';
 
 // Interactive ID-card cropper — a 1:1 RN port of the Flutter SDK's
@@ -19,7 +20,11 @@ import { Image } from 'react-native';
 const ID_AR = 85.6 / 53.98;
 const HANDLE_RADIUS = 28; // touch radius for the corner handles
 const ARM = 22; // corner-bracket arm length
-const APPBAR_BG = '#1A1A2E';
+// The photo sits on a neutral dark stage in both themes (the web SDK's
+// neutral-900): it is the backdrop a document photo reads well against, and it
+// keeps the white crop strokes legible. Everything around the photo takes the
+// workflow's own colours.
+export const CROPPER_STAGE = '#171717';
 // Keep the title clear of the status bar / notch on the full-screen cropper Modal.
 const TOP_INSET = Platform.OS === 'ios' ? 56 : (StatusBar.currentHeight ?? 24) + 8;
 
@@ -95,6 +100,7 @@ export function DocumentCropper({ uri, onCancel, onConfirm }: DocumentCropperPro
   const [container, setContainer] = useState<{ w: number; h: number } | null>(null);
   const [crop, setCrop] = useState<Rectangle | null>(null);
   const [processing, setProcessing] = useState(false);
+  const { colors, mode } = useTheme();
 
   // Pan state held in refs so the PanResponder callbacks stay stable.
   const handleRef = useRef<Handle>('none');
@@ -219,17 +225,18 @@ export function DocumentCropper({ uri, onCancel, onConfirm }: DocumentCropperPro
 
   return (
     <Modal visible animationType="slide" presentationStyle="fullScreen" onRequestClose={onCancel}>
-      <View style={{ flex: 1, backgroundColor: '#000' }}>
-        {/* App bar */}
-        <View style={styles.appBar}>
-          <Pressable onPress={onCancel} accessibilityRole="button" accessibilityLabel="Cancel" hitSlop={8} style={{ padding: 4, marginRight: 4 }}>
-            <Icon name="close" size={20} color="#FFFFFF" />
+      <StatusBar barStyle={mode === 'dark' ? 'light-content' : 'dark-content'} />
+      <View style={{ flex: 1, backgroundColor: CROPPER_STAGE }}>
+        {/* App bar: the band the flow's steps sit under */}
+        <View style={[styles.appBar, { backgroundColor: headerSurface(colors, mode), borderBottomColor: colors.border }]}>
+          <Pressable onPress={onCancel} accessibilityRole="button" accessibilityLabel="Cancel" hitSlop={8} style={styles.close}>
+            <Icon name="close" size={20} color={colors.textDark} />
           </Pressable>
-          <View>
-            <MyazaText variant="bodyMedium" color="#FFFFFF" style={{ fontWeight: '600' }}>
+          <View style={{ flexShrink: 1 }}>
+            <MyazaText variant="bodyMedium" color={colors.textDark} style={{ fontWeight: '600' }}>
               Crop to ID Card
             </MyazaText>
-            <MyazaText variant="bodySmall" color="rgba(255,255,255,0.6)">
+            <MyazaText variant="bodySmall" color={colors.textMuted}>
               Drag to reposition · handles to resize
             </MyazaText>
           </View>
@@ -274,18 +281,9 @@ export function DocumentCropper({ uri, onCancel, onConfirm }: DocumentCropperPro
         </View>
 
         {/* Action bar */}
-        <View style={styles.actionBar}>
-          {processing ? (
-            <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)" style={{ flexShrink: 1 }}>
-                Processing…
-              </MyazaText>
-            </View>
-          ) : (
-            <MyazaButton label="Crop & Use" leadingIcon="check" onPress={confirm} disabled={!crop} />
-          )}
+        <View style={[styles.actionBar, { backgroundColor: colors.background, borderTopColor: colors.border }]}>
+          {/* The flow's own button: primary from the workflow, its loading state while the crop runs. */}
+          <MyazaButton label="Crop & Use" leadingIcon="check" onPress={confirm} disabled={!crop} loading={processing} />
         </View>
       </View>
     </Modal>
@@ -311,15 +309,23 @@ const styles = StyleSheet.create({
   appBar: {
     flexDirection: 'row',
     alignItems: 'center',
-    backgroundColor: APPBAR_BG,
     paddingTop: TOP_INSET,
     paddingBottom: spacing.sm,
     paddingHorizontal: spacing.sm,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  // 44pt: the tap target the platforms ask for, around a 20pt glyph.
+  close: {
+    width: 44,
+    height: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 4,
   },
   actionBar: {
-    backgroundColor: APPBAR_BG,
     paddingHorizontal: spacing.md,
     paddingTop: spacing.sm,
     paddingBottom: spacing.lg,
+    borderTopWidth: StyleSheet.hairlineWidth,
   },
 });

package/src/components/DocumentReview.tsx

@@ -6,6 +6,7 @@ import { Icon } from './Icon';
 import { MyazaText } from './Typography';
 import { DocumentReviewThumb, type ReviewSide } from './DocumentReviewSide';
 import { DocumentReviewZoom } from './DocumentReviewZoom';
+import { documentReviewCopy, type DocumentCaptureMode } from './documentReviewCopy';
 import { radius, spacing } from '../config/theme';
 
 // ─── Document review ──────────────────────────────────────────────────────────
@@ -33,6 +34,9 @@ import { radius, spacing } from '../config/theme';
 // 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.
+//
+// The words follow `mode` (see documentReviewCopy): an upload-only workflow
+// never showed a camera, so it says "Replace" and "added".
 
 export function DocumentReview({
   frontUri,
@@ -43,6 +47,7 @@ export function DocumentReview({
   footer,
   onRetakeFront,
   onRetakeBack,
+  mode = 'scan',
 }: {
   frontUri: string;
   backUri?: string | null;
@@ -56,6 +61,8 @@ export function DocumentReview({
   footer: React.ReactNode;
   onRetakeFront?: () => void;
   onRetakeBack?: () => void;
+  /** How the photos got in: the camera (default) or chosen from the device. */
+  mode?: DocumentCaptureMode;
 }): React.ReactElement {
   const { colors } = useTheme();
   const [zoomed, setZoomed] = useState<ReviewSide | null>(null);
@@ -65,6 +72,7 @@ export function DocumentReview({
     ...(backUri ? [{ id: 'back' as const, label: 'Back', uri: backUri, onRetake: onRetakeBack }] : []),
   ];
   const twoSided = sides.length > 1;
+  const copy = documentReviewCopy(mode, twoSided);
 
   return (
     <View style={{ flex: 1 }}>
@@ -85,7 +93,7 @@ export function DocumentReview({
         </View>
         <View style={{ width: spacing.xs }} />
         <MyazaText variant="bodySmall" style={{ fontWeight: '600' }}>
-          {twoSided ? 'Both sides captured' : 'Photo captured'}
+          {copy.status}
         </MyazaText>
       </View>
 
@@ -108,6 +116,7 @@ export function DocumentReview({
                 // the screen read as permanently stuck.
                 busyOverlay={isBusy ? busyOverlay : null}
                 onZoom={() => setZoomed(side)}
+                copy={copy}
               />
             </View>
           </React.Fragment>
@@ -129,6 +138,7 @@ export function DocumentReview({
         <DocumentReviewZoom
           side={zoomed}
           isBusy={isBusy}
+          copy={copy}
           onClose={() => setZoomed(null)}
           onRetake={() => {
             const retake = zoomed.onRetake;

package/src/components/DocumentReviewSide.tsx

@@ -6,6 +6,7 @@ import { Icon } from './Icon';
 import { MyazaText } from './Typography';
 import { radius, spacing } from '../config/theme';
 import { CHROME_SCRIM, ChromeGlass } from './glass/ChromeGlass';
+import type { DocumentReviewCopy } from './documentReviewCopy';
 
 /** The chip's flat backing, and still the fallback off iOS 26. */
 const CHIP_SCRIM = CHROME_SCRIM;
@@ -34,12 +35,15 @@ export function DocumentReviewThumb({
   isBusy,
   busyOverlay,
   onZoom,
+  copy,
 }: {
   side: ReviewSide;
   aspect: number;
   isBusy: boolean;
   busyOverlay?: React.ReactNode;
   onZoom: () => void;
+  /** The review's words for the capture mode (documentReviewCopy). */
+  copy: DocumentReviewCopy;
 }): React.ReactElement {
   const { colors } = useTheme();
   return (
@@ -90,7 +94,7 @@ export function DocumentReviewThumb({
         onPress={isBusy ? undefined : side.onRetake}
         disabled={isBusy}
         accessibilityRole="button"
-        accessibilityLabel={`Retake ${side.label.toLowerCase()}`}
+        accessibilityLabel={copy.redoAccessibility(side.label)}
         style={{
           flexDirection: 'row',
           alignItems: 'center',
@@ -103,7 +107,7 @@ export function DocumentReviewThumb({
         <Icon name="refresh" size={14} color={colors.primary} />
         <View style={{ width: 6 }} />
         <MyazaText variant="bodySmall" color={colors.primary} style={{ flexShrink: 1 }}>
-          Retake
+          {copy.redo}
         </MyazaText>
       </Pressable>
     </View>

package/src/components/DocumentReviewZoom.tsx

@@ -7,6 +7,7 @@ import { Icon } from './Icon';
 import { MyazaText } from './Typography';
 import { MyazaButton } from './MyazaButton';
 import { Chip, CHIP_TEXT, type ReviewSide } from './DocumentReviewSide';
+import type { DocumentReviewCopy } from './documentReviewCopy';
 
 /**
  * Full-bleed view of one side, with retake to hand — checking a capture and
@@ -43,11 +44,14 @@ function bottomInset(): number {
 export function DocumentReviewZoom({
   side,
   isBusy,
+  copy,
   onClose,
   onRetake,
 }: {
   side: ReviewSide;
   isBusy: boolean;
+  /** The review's words for the capture mode (documentReviewCopy). */
+  copy: DocumentReviewCopy;
   onClose: () => void;
   onRetake: () => void;
 }): React.ReactElement {
@@ -107,7 +111,7 @@ export function DocumentReviewZoom({
 
         <View style={{ height: spacing.sm }} />
         <MyazaButton
-          label={`Retake ${side.label.toLowerCase()}`}
+          label={copy.redoSide(side.label)}
           leadingIcon="refresh"
           variant="outline"
           disabled={isBusy}

package/src/components/FramedMapPicker.tsx

@@ -0,0 +1,122 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { ActivityIndicator, View } from 'react-native';
+
+import { radius } from '../config/theme';
+import { loadWebView, type WebViewLike } from '../lib/webview-available';
+import { useTheme } from './runtime';
+import { MapPinPicker } from './MapPinPicker';
+import {
+  MAP_FRAME_READY_TIMEOUT_MS,
+  buildMapFrameSrc,
+  centerCommandScript,
+  parseMapFrameMessage,
+  samePin,
+} from '../lib/map-frame';
+import type { LatLng } from '../lib/map-tiles';
+
+// Google Maps on mobile, via OUR hosted /embed/map page in a WebView (the OkHi
+// model — the map runs on the hosted origin, on Myaza's own key; the host app
+// never brings one). Mirrors the web SDK's FramedMapPicker: a page that never
+// says `ready` (no webview module installed, blocked script, refused grant,
+// vendor outage) falls back to the dependency-free OSM picker, so the step can
+// never go blank. `react-native-webview` is an OPTIONAL peer: absent, this
+// component IS the OSM picker.
+
+interface FramedMapPickerProps {
+  /** The server-minted page URL; null ⇒ the OSM picker outright. */
+  frameUrl: string | null;
+  value: LatLng | null;
+  /** Corner rounding. 0 where a parent already shapes the frame — the review
+   *  card rounds its TOP corners only, and the picker's own radius put a curve
+   *  where the map meets the address band. */
+  cornerRadius?: number;
+  onChange: (pin: LatLng) => void;
+  defaultCenter: LatLng;
+  defaultZoom: number;
+  height?: number;
+}
+
+export function FramedMapPicker({ frameUrl, value, onChange, defaultCenter, defaultZoom, height = 300, cornerRadius }: FramedMapPickerProps): React.ReactElement {
+  const WebView = useMemo(loadWebView, []);
+  const { colors, mode } = useTheme();
+  const [ready, setReady] = useState(false);
+  const [failed, setFailed] = useState(!frameUrl || !WebView);
+  const readyRef = useRef(false);
+  const webRef = useRef<WebViewLike>(null);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const lastFromFrame = useRef<LatLng | null>(null);
+
+  // Built once per mount: a src that tracked the pin would reload the page per drag.
+  const src = useMemo(
+    () =>
+      frameUrl
+        ? buildMapFrameSrc(frameUrl, {
+            center: value ?? defaultCenter,
+            zoom: defaultZoom,
+            hasPin: value != null,
+            theme: mode === 'dark' ? 'dark' : 'light',
+            primaryColor: colors.primary,
+          })
+        : null,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [frameUrl],
+  );
+
+  useEffect(() => {
+    if (failed) return undefined;
+    const timeout = setTimeout(() => {
+      if (!readyRef.current) setFailed(true);
+    }, MAP_FRAME_READY_TIMEOUT_MS);
+    return () => clearTimeout(timeout);
+  }, [failed]);
+
+  // An external recentre (Use my location, restored progress) moves the map —
+  // but never echo back a pin the page itself just reported.
+  useEffect(() => {
+    if (!value || !ready || samePin(lastFromFrame.current, value)) return;
+    webRef.current?.injectJavaScript(centerCommandScript(value));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value?.lat, value?.lng, ready]);
+
+  if (failed || !WebView || !src) {
+    return <MapPinPicker value={value} onChange={onChange} defaultCenter={defaultCenter} defaultZoom={defaultZoom} height={height} cornerRadius={cornerRadius} />;
+  }
+
+  return (
+    <View style={{ height, borderRadius: cornerRadius ?? radius.md, overflow: 'hidden', backgroundColor: colors.backgroundSecondary }}>
+      <WebView
+        ref={webRef}
+        source={{ uri: src }}
+        style={{ flex: 1, backgroundColor: 'transparent' }}
+        javaScriptEnabled
+        // Android: this WebView sits inside StickyActions' ScrollView, and a
+        // ScrollView intercepts every vertical drag its children start, so the
+        // map moved a few pixels and stopped while the page scrolled instead.
+        // nestedScrollEnabled makes the WebView ask the parent not to intercept
+        // (requestDisallowInterceptTouchEvent) for the life of the touch. No-op
+        // on iOS. Reported on a Galaxy S24, 2026-09-07.
+        nestedScrollEnabled
+        onError={() => setFailed(true)}
+        onMessage={(event) => {
+          const msg = parseMapFrameMessage(event.nativeEvent.data);
+          if (!msg) return;
+          if (msg.type === 'ready') {
+            readyRef.current = true;
+            setReady(true);
+          } else if (msg.type === 'failed') {
+            setFailed(true);
+          } else {
+            lastFromFrame.current = { lat: msg.lat, lng: msg.lng };
+            onChangeRef.current({ lat: msg.lat, lng: msg.lng });
+          }
+        }}
+      />
+      {!ready ? (
+        <View pointerEvents="none" style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, alignItems: 'center', justifyContent: 'center' }}>
+          <ActivityIndicator size="small" color={colors.primary} />
+        </View>
+      ) : null}
+    </View>
+  );
+}

package/src/components/GeoBadge.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { radius, spacing } from '../config/theme';
+import { useTheme } from './runtime';
+import { MyazaText } from './Typography';
+
+/**
+ * The "Your location" pill beside a pinned geo row: primary tint, primary
+ * text. It marks a GUESS made on the visitor's behalf, never a verdict, and
+ * the row it sits on is one tap away rather than buried in the alphabet.
+ * Shared by the country-select picker and the dial-code sheet so the tag
+ * reads identically wherever the guess is offered.
+ */
+export function GeoBadge({ label }: { label: string }): React.ReactElement {
+  const { colors } = useTheme();
+  return (
+    <View
+      style={{
+        marginRight: spacing.sm,
+        paddingHorizontal: spacing.sm,
+        paddingVertical: 2,
+        borderRadius: radius.full,
+        borderWidth: 1,
+        borderColor: colors.primary,
+        backgroundColor: colors.primary50,
+      }}
+    >
+      <MyazaText variant="bodySmall" color={colors.primary} style={{ fontWeight: '500' }}>
+        {label}
+      </MyazaText>
+    </View>
+  );
+}