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

package/src/screens/address/DetailsSheetFields.tsx

@@ -0,0 +1,184 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { radius, spacing } from '../../config/theme';
+import { useTheme } from '../../components/runtime';
+import { CountryFlag } from '../../components/CountryFlag';
+import { MyazaText } from '../../components/Typography';
+import { MyazaInput } from '../../components/MyazaInput';
+import type { AddressFieldMode } from '../../lib/address-field-modes';
+
+// The edit-details form primitives (200-line split from DetailsSheet).
+// Mirrors the web SDK's DetailsSheetFields; keep the two in lockstep.
+
+/** undefined = never touched (the map's prefill shows); '' = cleared. The
+ *  distinction is what lets an applicant DELETE a wrong prefill without the
+ *  field refilling itself under their cursor. */
+export interface DetailValues {
+  propertyNumber: string;
+  street?: string;
+  unit?: string;
+  propertyName: string;
+  directions: string;
+  neighbourhood?: string;
+  city?: string;
+  state?: string;
+  postcode?: string;
+}
+
+export type DetailPatch = Partial<DetailValues>;
+
+export function EditField({
+  label,
+  value,
+  placeholder,
+  maxLength,
+  disabled,
+  multiline,
+  required,
+  onChange,
+}: {
+  label: string;
+  value: string;
+  placeholder?: string;
+  maxLength: number;
+  disabled?: boolean;
+  multiline?: boolean;
+  /** Workflow-required (addressCollection.fields): marked, and the pin
+   *  step's Continue holds until it is filled. */
+  required?: boolean;
+  onChange: (value: string) => void;
+}): React.ReactElement {
+  return (
+    <MyazaInput
+      value={value}
+      onChangeText={onChange}
+      label={label}
+      required={required}
+      placeholder={placeholder}
+      maxLength={maxLength}
+      multiline={multiline}
+      editable={!disabled}
+    />
+  );
+}
+
+export function SectionHeading({ children }: { children: React.ReactNode }): React.ReactElement {
+  const { colors } = useTheme();
+  return (
+    <MyazaText
+      variant="bodySmall"
+      color={colors.textSecondary}
+      style={{ fontWeight: '700', textTransform: 'uppercase', letterSpacing: 0.8, fontSize: 11, marginBottom: spacing.sm }}
+    >
+      {children}
+    </MyazaText>
+  );
+}
+
+/** Read-only country row: the flow's country is a fact of the verification,
+ *  not an address field — visually distinct from a disabled input. */
+export function CountryRow({ country }: { country: string | null }): React.ReactElement | null {
+  const { colors } = useTheme();
+  if (!country) return null;
+  let name = country;
+  try {
+    name = new Intl.DisplayNames(['en'], { type: 'region' }).of(country) ?? country;
+  } catch {
+    // The ISO code stands in where DisplayNames is unavailable.
+  }
+  return (
+    <View>
+      {/* The SAME label treatment MyazaInput gives its own fields (web: one
+          `text-sm font-medium` for both), so the tile's box lines up with the
+          input beside it and the two labels read as one row. */}
+      <MyazaText variant="label" style={{ marginBottom: spacing.sm }}>
+        Country
+      </MyazaText>
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: spacing.xs + 2,
+          height: 48,
+          borderWidth: 1,
+          borderColor: colors.border,
+          borderRadius: radius.md,
+          backgroundColor: colors.backgroundSecondary,
+          paddingHorizontal: spacing.sm + 4,
+        }}
+      >
+        <CountryFlag country={country} size={20} />
+        <MyazaText variant="bodyMedium" style={{ fontWeight: '600', flexShrink: 1 }} numberOfLines={1}>
+          {name}
+        </MyazaText>
+      </View>
+      <MyazaText variant="bodySmall" color={colors.textSecondary} style={{ marginTop: 4 }}>
+        From your verification
+      </MyazaText>
+    </View>
+  );
+}
+
+// TOP-aligned, so the two columns' labels and boxes sit on one line. Bottom
+// alignment pushed the country tile up by the height of its own caption, since
+// it is the taller of the pair (web has no such problem: its grid stretches).
+const twoCol = { flexDirection: 'row' as const, gap: spacing.sm, alignItems: 'flex-start' as const };
+const col = { flex: 1, minWidth: 0 };
+
+/** The "Area and region" section. Each field honours its workflow mode:
+ *  'off' hides it, 'required' marks it. Returns null when all four are off. */
+export function AreaFields({
+  modes,
+  values,
+  parts,
+  shown,
+  country,
+  disabled,
+  onChange,
+}: {
+  modes: Record<'neighbourhood' | 'city' | 'state' | 'postcode', AddressFieldMode>;
+  values: DetailValues;
+  parts: { area?: string | null; city?: string | null; state?: string | null; postcode?: string | null } | null;
+  /** Typed wins (a cleared field stays cleared); the map's answer fills the gap. */
+  shown: (typed: string | undefined, part: string | null | undefined) => string;
+  country: string | null;
+  disabled?: boolean;
+  onChange: (patch: DetailPatch) => void;
+}): React.ReactElement | null {
+  const on = (k: keyof typeof modes) => modes[k] !== 'off';
+  const req = (k: keyof typeof modes) => modes[k] === 'required';
+  if (!on('neighbourhood') && !on('city') && !on('state') && !on('postcode')) return null;
+  return (
+    <View style={{ marginTop: spacing.md }}>
+      <SectionHeading>Area and region</SectionHeading>
+      {on('neighbourhood') ? (
+        <EditField label="Neighbourhood" value={shown(values.neighbourhood, parts?.area)} placeholder="e.g. Idim Ita" maxLength={80} disabled={disabled} required={req('neighbourhood')} onChange={(neighbourhood) => onChange({ neighbourhood })} />
+      ) : null}
+      {on('city') || on('state') ? (
+        <View style={[twoCol, { marginTop: spacing.sm }]}>
+          {on('city') ? (
+            <View style={col}>
+              <EditField label="City" value={shown(values.city, parts?.city)} placeholder="e.g. Calabar" maxLength={80} disabled={disabled} required={req('city')} onChange={(city) => onChange({ city })} />
+            </View>
+          ) : null}
+          {on('state') ? (
+            <View style={col}>
+              <EditField label="State" value={shown(values.state, parts?.state)} placeholder="e.g. Cross River" maxLength={80} disabled={disabled} required={req('state')} onChange={(state) => onChange({ state })} />
+            </View>
+          ) : null}
+        </View>
+      ) : null}
+      <View style={[twoCol, { marginTop: spacing.sm }]}>
+        {on('postcode') ? (
+          <View style={col}>
+            <EditField label="Area code" value={shown(values.postcode, parts?.postcode)} placeholder="e.g. 540281" maxLength={12} disabled={disabled} required={req('postcode')} onChange={(postcode) => onChange({ postcode })} />
+          </View>
+        ) : null}
+        <View style={col}>
+          <CountryRow country={country} />
+        </View>
+      </View>
+    </View>
+  );
+}

package/src/screens/address/EntranceDropzone.tsx

@@ -0,0 +1,178 @@
+import React from 'react';
+import { ActivityIndicator, Image, Pressable, View } from 'react-native';
+
+import { radius, spacing } from '../../config/theme';
+import { useTheme } from '../../components/runtime';
+import { DashedBorder } from '../../components/DashedBorder';
+import { Icon } from '../../components/Icon';
+import { OverlayPill, pillSurface } from './EntrancePills';
+import { MyazaText } from '../../components/Typography';
+
+const FRAME_HEIGHT = 300;
+
+/**
+ * The entrance photo: the hero of its step, so it is a full-width dropzone
+ * rather than a button in a list.
+ *
+ * Filled, it shows the photo itself with Replace and Remove over it. A RESTORED
+ * session holds the uploaded mediaId but not the bytes, so that case gets an
+ * honest "photo added" placeholder instead of a broken image.
+ */
+export function EntranceDropzone({
+  uploaded,
+  uploading,
+  previewUri,
+  required,
+  onPick,
+  onRemove,
+}: {
+  uploaded: boolean;
+  uploading: boolean;
+  /** Local preview of the picked file; absent on a restored session. */
+  previewUri: string | null;
+  required: boolean;
+  onPick: () => void;
+  onRemove: () => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+
+  if (uploaded && !uploading) {
+    return (
+      <View
+        style={{
+          height: FRAME_HEIGHT,
+          borderRadius: radius.md,
+          overflow: 'hidden',
+          borderWidth: 1,
+          borderColor: colors.border,
+          backgroundColor: colors.backgroundSecondary,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {previewUri ? (
+          <Image
+            source={{ uri: previewUri }}
+            style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}
+            resizeMode="cover"
+          />
+        ) : (
+          <>
+            <Icon name="check" size={30} color={colors.success} />
+            <View style={{ height: spacing.sm }} />
+            <MyazaText variant="bodyMedium" style={{ fontWeight: '600' }}>
+              Entrance photo added
+            </MyazaText>
+          </>
+        )}
+
+        {/* Web's tag: `text-[11px] font-semibold uppercase tracking-wider
+            text-primary` with a 12px check, on a 90% background. */}
+        <View
+          style={{
+            position: 'absolute',
+            top: 12,
+            left: 12,
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 6,
+            paddingHorizontal: spacing.sm + 2,
+            paddingVertical: 4,
+            borderRadius: radius.full,
+            ...pillSurface(colors.background, colors.textDark),
+          }}
+        >
+          <Icon name="circle-check" size={12} color={colors.primary} />
+          <MyazaText
+            variant="bodySmall"
+            color={colors.primary}
+            style={{ fontSize: 11, fontWeight: '600', letterSpacing: 0.6, textTransform: 'uppercase' }}
+          >
+            Entrance photo
+          </MyazaText>
+        </View>
+
+        <View
+          style={{
+            position: 'absolute',
+            right: 12,
+            bottom: 12,
+            flexDirection: 'row',
+            gap: spacing.sm,
+          }}
+        >
+          <OverlayPill icon="refresh-ccw" label="Replace" onPress={onPick} />
+          <OverlayPill icon="x" label="Remove" accessibilityLabel="Remove photo" onPress={onRemove} />
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <Pressable
+      onPress={uploading ? undefined : onPick}
+      disabled={uploading}
+      accessibilityRole="button"
+      accessibilityLabel="Take or upload a photo"
+      style={{
+        height: FRAME_HEIGHT,
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: spacing.lg,
+        borderRadius: radius.md,
+      }}
+    >
+      <DashedBorder color={colors.border} radius={radius.md} strokeWidth={2} />
+      {/* Web's `h-14 w-14 rounded-2xl bg-primary/10 ring-1 ring-primary/20`,
+          the box Flutter draws too. */}
+      <View
+        style={{
+          width: 56,
+          height: 56,
+          borderRadius: radius.md,
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: `${colors.primary}1A`,
+          borderWidth: 1,
+          borderColor: `${colors.primary}33`,
+        }}
+      >
+        {uploading ? (
+          <ActivityIndicator size="small" color={colors.primary} />
+        ) : (
+          <Icon name="camera" size={24} color={colors.primary} />
+        )}
+      </View>
+      <View style={{ height: spacing.md }} />
+      <MyazaText variant="body" style={{ fontWeight: '600' }}>
+        {uploading ? 'Uploading photo…' : 'Take or upload a photo'}
+      </MyazaText>
+      {uploading ? null : (
+        <>
+          <MyazaText
+            variant="bodyMedium"
+            color={colors.textSecondary}
+            style={{ marginTop: spacing.xs, textAlign: 'center' }}
+          >
+            {required
+              ? 'The gate, front door or the building itself.'
+              : 'The gate, front door or the building itself. Optional.'}
+          </MyazaText>
+          <View
+            style={{
+              marginTop: spacing.md,
+              paddingHorizontal: spacing.sm + 2,
+              paddingVertical: 4,
+              borderRadius: radius.full,
+              backgroundColor: colors.backgroundSecondary,
+            }}
+          >
+            <MyazaText variant="bodySmall" color={colors.textSecondary} style={{ fontSize: 11, fontWeight: '500' }}>
+              JPEG · PNG · WebP
+            </MyazaText>
+          </View>
+        </>
+      )}
+    </Pressable>
+  );
+}

package/src/screens/address/EntranceFraming.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { useWindowDimensions, View } from 'react-native';
+
+import { radius, spacing } from '../../config/theme';
+import { useTheme } from '../../components/runtime';
+import { Icon } from '../../components/Icon';
+import { MyazaText } from '../../components/Typography';
+import { MyazaButton } from '../../components/MyazaButton';
+import { StickyActions } from '../../components/StickyActions';
+import { mapSurfaceHeight } from '../../lib/map-tiles';
+
+// The entrance step's SANDBOX stand-in. A SANDBOX mount keeps the step real
+// users get, on a static placeholder (the camera steps' rule): no Google
+// loads from a test key, the server cans the verdict regardless, and "Use
+// this view" simply advances. Mirrors the web SDK's preview branch; the
+// Flutter twin is address_entrance_framing.dart.
+
+export function EntrancePlaceholder({
+  hideSkip,
+  onSkip,
+  onUse,
+}: {
+  hideSkip: boolean;
+  onSkip: () => void;
+  onUse: () => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  const height = mapSurfaceHeight(useWindowDimensions());
+  return (
+    <StickyActions
+      actions={
+        <View style={{ flexDirection: 'row', gap: spacing.sm }}>
+          {!hideSkip ? (
+            <View style={{ flex: 1 }}>
+              <MyazaButton label="Skip" variant="outline" onPress={onSkip} />
+            </View>
+          ) : null}
+          <View style={{ flex: 1 }}>
+            <MyazaButton label="Use this view" onPress={onUse} />
+          </View>
+        </View>
+      }
+    >
+      <View
+        style={{
+          height,
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: spacing.sm,
+          // Web's `rounded-xl border-2 border-dashed bg-muted/40`.
+          borderRadius: radius.sm,
+          borderWidth: 2,
+          borderStyle: 'dashed',
+          borderColor: colors.border,
+          backgroundColor: `${colors.backgroundSecondary}66`,
+          paddingHorizontal: spacing.lg,
+        }}
+      >
+        <Icon name="landmark" size={32} color={`${colors.textSecondary}99`} />
+        <MyazaText variant="bodySmall" color={colors.textSecondary} style={{ textAlign: 'center', maxWidth: 288 }}>
+          Applicants pan real street imagery to frame their entrance here. It loads only for real users.
+        </MyazaText>
+      </View>
+    </StickyActions>
+  );
+}

package/src/screens/address/EntrancePills.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Pressable } from 'react-native';
+
+import { radius, spacing } from '../../config/theme';
+import { useTheme } from '../../components/runtime';
+import { Icon, type IconName } from '../../components/Icon';
+import { MyazaText } from '../../components/Typography';
+
+// The pills that sit over a picked entrance photo (200-line split from
+// EntranceDropzone). Web's `bg-background/90 shadow` surface, drawn the same
+// on Flutter.
+
+/** Web's overlay pill surface: `bg-background/90 shadow`. */
+export function pillSurface(background: string, ink: string) {
+  return {
+    backgroundColor: `${background}E6`,
+    shadowColor: ink,
+    shadowOpacity: 0.12,
+    shadowRadius: 6,
+    shadowOffset: { width: 0, height: 2 },
+    elevation: 2,
+  } as const;
+}
+
+/** Web's `px-3 py-1.5 text-xs font-medium` pill with a 14px icon. */
+export function OverlayPill({
+  icon,
+  label,
+  accessibilityLabel,
+  onPress,
+}: {
+  icon: IconName;
+  label: string;
+  accessibilityLabel?: string;
+  onPress: () => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  return (
+    <Pressable
+      onPress={onPress}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? label}
+      style={({ pressed }) => ({
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        paddingHorizontal: spacing.sm + 4,
+        paddingVertical: 6,
+        borderRadius: radius.full,
+        ...pillSurface(colors.background, colors.textDark),
+        opacity: pressed ? 0.8 : 1,
+      })}
+    >
+      <Icon name={icon} size={14} color={colors.textDark} />
+      <MyazaText variant="bodySmall" style={{ fontWeight: '500' }}>
+        {label}
+      </MyazaText>
+    </Pressable>
+  );
+}

package/src/screens/address/FramedStreetView.tsx

@@ -0,0 +1,155 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { ActivityIndicator, useWindowDimensions, View } from 'react-native';
+
+import { radius, spacing } from '../../config/theme';
+import { useTheme } from '../../components/runtime';
+import { MyazaText } from '../../components/Typography';
+import { MyazaButton } from '../../components/MyazaButton';
+import { StickyActions } from '../../components/StickyActions';
+import { loadWebView } from '../../lib/webview-available';
+import {
+  MAP_FRAME_READY_TIMEOUT_MS,
+  buildStreetViewFrameSrc,
+  parseStreetViewFrameMessage,
+} from '../../lib/map-frame';
+import { captureStreetViewFrame, type StreetViewFrame } from '../../lib/street-view-fov';
+import { mapSurfaceHeight, type LatLng } from '../../lib/map-tiles';
+import { StreetViewChrome, streetViewFrameRect } from './StreetViewChrome';
+
+// Street View on mobile, via OUR hosted /embed/street-view page in a WebView —
+// the same model (and the same app grant) as FramedMapPicker. The page renders
+// the panorama and streams the current view; THIS component owns the framing
+// chrome, the frame-subtended fov maths and the capture decision, so hosted,
+// embedded and native applicants meet the identical instrument. Mirrors the
+// web SDK's FramedStreetView and the Flutter twin; keep the three in lockstep.
+// A page that never says sv-ready (no webview module, blocked script, refused
+// grant, no coverage) hands the step to the photo fallback via onUnavailable.
+
+type Pov = { panoId: string; heading: number; pitch: number; viewFov: number };
+
+export function FramedStreetView({
+  frameUrl,
+  pin,
+  onCaptured,
+  onSkip,
+  hideSkip,
+  onUnavailable,
+}: {
+  frameUrl: string;
+  pin: LatLng;
+  onCaptured: (frame: StreetViewFrame) => void;
+  /** The applicant would rather add their own photo. */
+  onSkip: () => void;
+  /** streetView 'required': the skip affordance is removed while coverage
+   *  exists (no-coverage still falls back — the client-UX gate only). */
+  hideSkip?: boolean;
+  /** No coverage, no grant, or no page — fall back to the photo. */
+  onUnavailable: () => void;
+}): React.ReactElement {
+  const WebView = useMemo(loadWebView, []);
+  const { colors, mode } = useTheme();
+  const height = mapSurfaceHeight(useWindowDimensions());
+  const [ready, setReady] = useState(false);
+  const [viewWidth, setViewWidth] = useState(0);
+  const readyRef = useRef(false);
+  const latestPov = useRef<Pov | null>(null);
+  const gone = useRef(false);
+  const unavailableRef = useRef(onUnavailable);
+  unavailableRef.current = onUnavailable;
+  const unavailable = () => {
+    if (gone.current) return;
+    gone.current = true;
+    unavailableRef.current();
+  };
+
+  // Built once per mount: a src that tracked the theme would reload the page.
+  const src = useMemo(
+    () => buildStreetViewFrameSrc(frameUrl, { pin, theme: mode === 'dark' ? 'dark' : 'light' }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [frameUrl],
+  );
+
+  useEffect(() => {
+    if (!WebView) {
+      unavailable();
+      return undefined;
+    }
+    const timeout = setTimeout(() => {
+      if (!readyRef.current) unavailable();
+    }, MAP_FRAME_READY_TIMEOUT_MS);
+    return () => clearTimeout(timeout);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [WebView]);
+
+  const capture = () => {
+    const pov = latestPov.current;
+    if (!pov) return;
+    // The promise on screen is the FRAME, so the captured fov is the slice the
+    // frame subtends of the reported viewport fov — same maths, same frame
+    // geometry as the hosted framer.
+    const frame = streetViewFrameRect(viewWidth, height);
+    onCaptured(captureStreetViewFrame(pov, frame.width, viewWidth));
+  };
+
+  return (
+    <StickyActions
+      actions={
+        <View style={{ flexDirection: 'row', gap: spacing.sm }}>
+          {!hideSkip ? (
+            <View style={{ flex: 1 }}>
+              <MyazaButton label="Skip" variant="outline" onPress={onSkip} />
+            </View>
+          ) : null}
+          <View style={{ flex: 1 }}>
+            <MyazaButton label="Use this view" disabled={!ready} onPress={capture} />
+          </View>
+        </View>
+      }
+    >
+      <View
+        onLayout={(e) => setViewWidth(e.nativeEvent.layout.width)}
+        style={{ height, borderRadius: radius.md, overflow: 'hidden', backgroundColor: colors.backgroundSecondary }}
+      >
+        {WebView ? (
+          <WebView
+            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={unavailable}
+            onMessage={(event) => {
+              const msg = parseStreetViewFrameMessage(event.nativeEvent.data);
+              if (!msg) return;
+              if (msg.type === 'sv-ready') {
+                readyRef.current = true;
+                setReady(true);
+              } else if (msg.type === 'sv-unavailable') {
+                unavailable();
+              } else {
+                latestPov.current = { panoId: msg.panoId, heading: msg.heading, pitch: msg.pitch, viewFov: msg.viewFov };
+              }
+            }}
+          />
+        ) : null}
+        {!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>
+        ) : (
+          <StreetViewChrome viewportWidth={viewWidth} viewportHeight={height} />
+        )}
+      </View>
+      {ready ? (
+        <MyazaText variant="bodySmall" color={colors.textSecondary} style={{ textAlign: 'center', marginTop: spacing.sm }}>
+          Drag to look around until your gate or front door sits inside the frame.
+        </MyazaText>
+      ) : null}
+    </StickyActions>
+  );
+}