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

package/src/components/CountryRegionPicker.tsx

@@ -0,0 +1,184 @@
+import React, { useMemo, useState } from 'react';
+import { Pressable, ScrollView, View } from 'react-native';
+
+import { radius, spacing } from '../config/theme';
+import { groupCountriesByRegion, pinGeoRow, regionCountryName } from '../config/regions';
+import { useTheme } from './runtime';
+import { MyazaText } from './Typography';
+import { MyazaInput } from './MyazaInput';
+import { CountryFlag } from './CountryFlag';
+import { Icon } from './Icon';
+import { GeoBadge } from './GeoBadge';
+
+// ---------------------------------------------------------------------------
+// Searchable, region-grouped country picker for the country-select step. Used
+// when a workflow offers many countries (Global Documents): a flat 200-country
+// list is a scroll, not a chooser, so this adds a pinned search box and
+// continent headers over a bounded scroll area. Mirrors the web SDK's
+// CountryRegionPicker and Flutter's country_region_picker.dart.
+//
+// Split from CountrySelectStep (200-line rule); the step keeps the flat list
+// and the threshold that decides between the two.
+// ---------------------------------------------------------------------------
+
+export function CountryRegionPicker({
+  countries,
+  selected,
+  geoCountry,
+  onPick,
+}: {
+  countries: string[];
+  selected: string | null;
+  /**
+   * The visitor's IP country. Lifted out of its continent to the very top and
+   * tagged, so the one country most likely to be theirs is the first thing
+   * they see rather than something to scroll for.
+   */
+  geoCountry?: string | null;
+  onPick: (country: string) => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  const [query, setQuery] = useState('');
+
+  const { pinned, groups } = useMemo(() => {
+    const needle = query.trim().toLowerCase();
+    const visible = needle
+      ? countries.filter(
+          (code) =>
+            code.toLowerCase().includes(needle) ||
+            regionCountryName(code).toLowerCase().includes(needle),
+        )
+      : countries;
+    const split = pinGeoRow(visible, geoCountry, (code) => code);
+    return { pinned: split.pinned, groups: groupCountriesByRegion(split.rest) };
+  }, [countries, query, geoCountry]);
+
+  const empty = groups.length === 0 && pinned === null;
+
+  return (
+    // The search box stays put and the list owns its own scroll, so a
+    // ~240-country flow does not scroll the search field off the top. That
+    // relies on the SHEET rendering this step with `fillsViewport` — inside a
+    // scroll view the nested list below would take an unbounded height, outgrow
+    // the viewport, and drag the search box off the top with it.
+    <View style={{ flex: 1 }}>
+      <MyazaInput
+        value={query}
+        onChangeText={setQuery}
+        placeholder="Search countries…"
+        autoCapitalize="none"
+        prefix={<Icon name="search" size={18} color={colors.textSecondary} />}
+      />
+      <View style={{ height: spacing.md }} />
+
+      {empty ? (
+        <MyazaText variant="bodyMedium" style={{ textAlign: 'center', marginTop: spacing.lg }}>
+          No countries match your search.
+        </MyazaText>
+      ) : (
+        // `nestedScrollEnabled` stays: Android refuses to scroll a nested
+        // same-direction list without it, and this is still nested on the
+        // flat-list path and inside any future scrolling parent.
+        <ScrollView
+          nestedScrollEnabled
+          keyboardShouldPersistTaps="handled"
+          showsVerticalScrollIndicator={false}
+        >
+          {pinned ? (
+            <CountryRow
+              code={pinned}
+              name={regionCountryName(pinned)}
+              selected={pinned === selected}
+              badge="Your location"
+              onPress={() => onPick(pinned)}
+            />
+          ) : null}
+          {groups.map((group) => (
+            <View key={group.region}>
+              {/* Uppercase, tracked-out section label — Flutter's region
+                  header. Lowercase text at the default weight read as another
+                  list row rather than a divider. */}
+              <MyazaText
+                variant="bodySmall"
+                color={colors.textSecondary}
+                style={{
+                  fontWeight: '700',
+                  letterSpacing: 0.6,
+                  paddingHorizontal: spacing.xs,
+                  paddingVertical: spacing.sm,
+                }}
+              >
+                {group.region.toUpperCase()}
+              </MyazaText>
+              {group.countries.map((entry) => (
+                <CountryRow
+                  key={entry.code}
+                  code={entry.code}
+                  name={entry.name}
+                  selected={entry.code === selected}
+                  onPress={() => onPick(entry.code)}
+                />
+              ))}
+            </View>
+          ))}
+        </ScrollView>
+      )}
+    </View>
+  );
+}
+
+/**
+ * One selectable country row, shared by the flat list and the region picker
+ * so the two cannot drift apart. `badge` tags the pinned geo row; it is the
+ * same control in a second position, differing only by the tag.
+ */
+export function CountryRow({
+  code,
+  name,
+  selected,
+  badge,
+  onPress,
+}: {
+  code: string;
+  name: string;
+  selected: boolean;
+  badge?: string;
+  onPress: () => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  return (
+    <Pressable
+      onPress={onPress}
+      accessibilityRole="radio"
+      accessibilityState={{ checked: selected }}
+      accessibilityLabel={badge ? `${name}, ${badge.toLowerCase()}` : name}
+      // Matches the Flutter SDK's CountryOptionTile exactly — the two had
+      // drifted (24px flag / 12px padding here vs 32 / 16 there), which is why
+      // the same screen looked like a different component on each platform. The
+      // spacing and radius scales are identical across the SDKs, so there is
+      // nothing platform-specific to reconcile: `md` means 16 on both.
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: spacing.md,
+        borderRadius: radius.md,
+        borderWidth: selected ? 1.5 : 1,
+        borderColor: selected ? colors.primary : colors.border,
+        backgroundColor: selected ? colors.primary50 : colors.background,
+        marginBottom: spacing.sm,
+      }}
+    >
+      <CountryFlag country={code} size={32} />
+      <View style={{ width: 12 }} />
+      <MyazaText variant="label" style={{ flex: 1, fontWeight: '500' }}>
+        {name}
+      </MyazaText>
+      {badge ? <GeoBadge label={badge} /> : null}
+      <Icon
+        name="chevron-right"
+        size={18}
+        color={selected ? colors.primary : colors.textSecondary}
+      />
+    </Pressable>
+  );
+}

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('');
@@ -121,67 +130,37 @@ export function DialCodePicker({
         </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,
-        // 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>
-      {option.dialCode != null ? (
-        <MyazaText variant="bodyMedium" 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>
+  );
+}