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

package/src/components/DialCodePicker.tsx

@@ -13,8 +13,9 @@ import { useTheme } from './runtime';
 import { MyazaText } from './Typography';
 import { MyazaInput } from './MyazaInput';
 import { Icon } from './Icon';
-import { CountryFlag } from './CountryFlag';
 import { FloatingSheet } from './glass/FloatingSheet';
+import { DialCodeDivider, DialCodeRegionHeader, DialCodeRow } from './DialCodeRow';
+import { buildDialCodeItems, dialCodeItemKey, filterDialCodeOptions, type DialCodeItem } from './dialCodeRows';
 
 // ---------------------------------------------------------------------------
 // THE country sheet — the phone field's dial-code picker, generalised.
@@ -33,6 +34,10 @@ import { FloatingSheet } from './glass/FloatingSheet';
 // 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.
+//
+// `grouped` lists the countries under region headers (Africa first), the way
+// the country-select step does — what the address-scope country control asks
+// for. The list itself is built by dialCodeRows.ts.
 // ---------------------------------------------------------------------------
 
 export interface DialCodeOption {
@@ -46,6 +51,8 @@ export function DialCodePicker({
   visible,
   options,
   selected,
+  pinned,
+  grouped = false,
   onPick,
   onClose,
   searchPlaceholder = 'Search country or code',
@@ -53,6 +60,14 @@ export function DialCodePicker({
   visible: boolean;
   options: DialCodeOption[];
   selected: string;
+  /**
+   * The visitor's IP country. Lifted out of the alphabet to the top and
+   * tagged, so a guess we made on their behalf is visible AS a guess and one
+   * tap away rather than buried among two hundred others.
+   */
+  pinned?: string | null;
+  /** Region headers between the rows (the pinned row stays on top). */
+  grouped?: boolean;
   onPick: (code: string) => void;
   onClose: () => void;
   searchPlaceholder?: string;
@@ -78,19 +93,13 @@ export function DialCodePicker({
   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]);
+  // Where they appear to be, lifted out of the alphabet. It stays subject to
+  // the search, so typing still narrows to what was asked for rather than
+  // keeping a row that does not match.
+  const rows = useMemo(
+    () => buildDialCodeItems(filterDialCodeOptions(options, query), pinned, grouped),
+    [options, query, pinned, grouped],
+  );
 
   const close = (): void => {
     setQuery('');
@@ -106,75 +115,52 @@ export function DialCodePicker({
       bottomOffset={keyboard}
       closeLabel="Close country picker"
     >
-        <View style={{ paddingHorizontal: spacing.md, paddingBottom: spacing.sm }}>
+        {/* Clear air between the header row (handle + close) and the search
+            field — flush against the close button they read as one control. */}
+        <View style={{ paddingHorizontal: spacing.md, paddingTop: spacing.md, paddingBottom: spacing.sm }}>
+          {/* Deliberately NOT autofocused: springing the keyboard the instant
+              the sheet opens hides half the list before the person has even
+              seen it — search is one tap away for whoever wants it. */}
           <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}
+          data={rows.items}
+          keyExtractor={dialCodeItemKey}
           keyboardShouldPersistTaps="handled"
+          // A hairline under the pinned row only: the alphabet below it is one
+          // list, and a rule between every row is noise.
+          ItemSeparatorComponent={({ leadingItem }: { leadingItem: DialCodeItem }) =>
+            rows.geo != null && leadingItem.kind === 'row' && leadingItem.option.code === rows.geo.code ? (
+              <DialCodeDivider />
+            ) : null
+          }
           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);
-              }}
-            />
-          )}
+          renderItem={({ item }) =>
+            item.kind === 'header' ? (
+              <DialCodeRegionHeader region={item.region} />
+            ) : (
+              <DialCodeRow
+                option={item.option}
+                isSelected={item.option.code === selected}
+                badge={rows.geo != null && item.option.code === rows.geo.code ? 'Your location' : undefined}
+                onPress={() => {
+                  setQuery('');
+                  onPick(item.option.code);
+                }}
+              />
+            )
+          }
         />
     </FloatingSheet>
   );
 }
-
-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/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/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>
+  );
+}

package/src/components/Icon.tsx

@@ -1,183 +1,9 @@
 import React from 'react';
 import Ionicons from '@expo/vector-icons/Ionicons';
-import {
-  BadgeCheck,
-  BookUser,
-  Building2,
-  Calendar,
-  Camera,
-  CameraOff,
-  ChevronDown,
-  ChevronLeft,
-  ChevronRight,
-  Car,
-  Check,
-  CircleAlert,
-  Contact,
-  CreditCard,
-  Fingerprint,
-  FileText,
-  FlaskConical,
-  IdCard,
-  Image as ImageIcon,
-  Landmark,
-  Lightbulb,
-  Globe,
-  Mail,
-  Maximize2,
-  Lock,
-  MessageCircle,
-  MessageSquare,
-  Moon,
-  MoveLeft,
-  Nfc,
-  Pencil,
-  Smartphone,
-  RefreshCw,
-  ScanFace,
-  ScanLine,
-  Search,
-  Zap,
-  ZapOff,
-  ShieldCheck,
-  Sun,
-  Timer,
-  Upload,
-  UserRound,
-  UserRoundPlus,
-  Link2,
-  Copy,
-  Share2,
-  UsersRound,
-  VideoOff,
-  Vote,
-  X,
-  type LucideIcon,
-} from 'lucide-react-native';
 
-// Centralised icon set — the SAME Lucide icons the Flutter SDK uses
-// (`lucide_icons_flutter`) and the web SDK uses (`lucide-react`). Rendered via
-// lucide-react-native (react-native-svg), so the glyphs are pixel-identical
-// across all three platforms.
+import { ICONS, type IconName } from './icon-map';
 
-export type IconName =
-  // chrome
-  | 'close'
-  | 'back'
-  | 'moon'
-  | 'sun'
-  | 'check'
-  | 'lock'
-  | 'alert'
-  | 'flask'
-  | 'refresh'
-  | 'maximize'
-  | 'calendar'
-  | 'image'
-  | 'chevron-left'
-  | 'chevron-right'
-  | 'chevron-down'
-  // consent hero + process steps
-  | 'shield'
-  | 'badge-check'
-  | 'building-2'
-  | 'user'
-  | 'user-plus'
-  | 'users'
-  | 'scan-line'
-  | 'scan-face'
-  | 'nfc'
-  | 'pencil'
-  | 'search'
-  | 'zap'
-  | 'link'
-  | 'copy'
-  | 'share'
-  | 'zap-off'
-  | 'timer'
-  // id-type glyphs
-  | 'fingerprint'
-  | 'credit-card'
-  | 'globe'
-  | 'car'
-  | 'vote'
-  | 'file-text'
-  | 'landmark'
-  | 'id-card'
-  | 'contact'
-  | 'passport'
-  | 'camera'
-  | 'camera-off'
-  | 'video-off'
-  | 'upload'
-  | 'x'
-  | 'lightbulb'
-  // contact verification (OTP channels + step footer)
-  | 'mail'
-  | 'smartphone'
-  | 'message-square'
-  | 'message-circle';
-
-// Maps each name to its Lucide component. Names mirror the Flutter SDK exactly:
-//   shieldCheck · badgeCheck · userRound · scanLine · scanFace · fingerprint ·
-//   creditCard · globe · car · vote · fileText  (+ chrome: X / ArrowLeft /
-//   Moon / Sun / Check / Lock / CircleAlert / RefreshCw / Camera).
-const ICONS: Record<IconName, LucideIcon> = {
-  close: X,
-  back: MoveLeft, // longer-shaft left arrow, matching Flutter's keyboard_backspace
-  moon: Moon,
-  sun: Sun,
-  check: Check,
-  lock: Lock,
-  alert: CircleAlert,
-  // The environment banner's mark, shared with the web SDK (same lucide glyph)
-  // and mirrored by Flutter's Icons.science_outlined.
-  flask: FlaskConical,
-  refresh: RefreshCw,
-  maximize: Maximize2,
-  calendar: Calendar,
-  image: ImageIcon,
-  'chevron-left': ChevronLeft,
-  'chevron-right': ChevronRight,
-  'chevron-down': ChevronDown,
-  shield: ShieldCheck,
-  'badge-check': BadgeCheck,
-  'building-2': Building2,
-  user: UserRound,
-  'user-plus': UserRoundPlus,
-  link: Link2,
-  copy: Copy,
-  share: Share2,
-  users: UsersRound,
-  'scan-line': ScanLine,
-  'scan-face': ScanFace,
-  nfc: Nfc,
-  pencil: Pencil,
-  search: Search,
-  zap: Zap,
-  'zap-off': ZapOff,
-  timer: Timer,
-  fingerprint: Fingerprint,
-  'credit-card': CreditCard,
-  globe: Globe,
-  car: Car,
-  vote: Vote,
-  'file-text': FileText,
-  landmark: Landmark,
-  'id-card': IdCard,
-  contact: Contact,
-  passport: BookUser,
-  camera: Camera,
-  'camera-off': CameraOff,
-  'video-off': VideoOff,
-  upload: Upload,
-  x: X,
-  lightbulb: Lightbulb,
-  mail: Mail,
-  smartphone: Smartphone,
-  'message-square': MessageSquare,
-  'message-circle': MessageCircle,
-};
+export type { IconName } from './icon-map';
 
 export interface IconProps {
   name: IconName;