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

package/src/components/MapPinPicker.tsx

@@ -0,0 +1,179 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Image, PanResponder, View } from 'react-native';
+
+import { radius } from '../config/theme';
+import { useTheme } from './runtime';
+import { MapPinMarker } from './MapPinMarker';
+import { MapAttribution, MapZoomControls } from './MapChrome';
+import {
+  MAX_ZOOM,
+  MIN_ZOOM,
+  panCenter,
+  visibleTiles,
+  type LatLng,
+} from '../lib/map-tiles';
+
+interface MapPinPickerProps {
+  /** The confirmed pin, when one exists — the map centres on it. */
+  value: LatLng | null;
+  /** Fired when the user settles the map (drag end / zoom / recentre). */
+  onChange: (pin: LatLng) => void;
+  defaultCenter: LatLng;
+  defaultZoom: number;
+  /** Taller on the pin step, where there has to be room to actually find the
+   *  building; short on the review step's read-only summary. */
+  height?: number;
+  /**
+   * A read-only summary map: no gestures, no zoom controls, no onChange. The
+   * review step draws the pin as a picture of the decision, and a map that can
+   * be dragged there invites an edit the step is not offering.
+   */
+  interactive?: boolean;
+  /** Corner rounding — squared off when the map is clipped by a card. */
+  cornerRadius?: number;
+  /** Zoom when the map has a pin. The pin step goes closer than the default so
+   *  "is the pin on YOUR building?" is answerable without pinching first. */
+  pinZoom?: number;
+}
+
+const MAP_HEIGHT = 256;
+
+/**
+ * A dependency-free OSM slippy map with a FIXED CENTRE PIN — the user moves
+ * the map under the pin (the pattern address pickers use on phones), so the
+ * pin is always exactly the centre and there is no marker to fumble. Maths in
+ * lib/map-tiles.ts; this is only the gesture shell. Mirrors the web SDK's
+ * MapPinPicker: tiles for the committed centre, a live translate during the
+ * drag, and a commit (+ onChange) on release.
+ */
+export function MapPinPicker({
+  value,
+  onChange,
+  defaultCenter,
+  defaultZoom,
+  height = MAP_HEIGHT,
+  interactive = true,
+  cornerRadius,
+  pinZoom = 17,
+}: MapPinPickerProps) {
+  const { colors } = useTheme();
+  const [size, setSize] = useState<{ w: number; h: number } | null>(null);
+  const [center, setCenter] = useState<LatLng>(value ?? defaultCenter);
+  const [zoom, setZoom] = useState(value ? pinZoom : defaultZoom);
+  // Live drag offset — applied as a transform so panning stays smooth; the
+  // centre (and tile set) commits on release.
+  const [drag, setDrag] = useState<{ dx: number; dy: number } | null>(null);
+
+  // The responder callbacks close over state, so they read it via a ref — a
+  // PanResponder is created once and would otherwise pan against the centre
+  // and zoom from the first render forever.
+  const live = useRef({ center, zoom, onChange });
+  live.current = { center, zoom, onChange };
+
+  // An external recentre (a search pick, or Use my location) moves the map AND
+  // zooms in: "is the pin on your building?" cannot be answered at country
+  // zoom, and asking someone to pinch first is asking them to do our work.
+  // SELF-caused moves round-trip through the same prop (drag commits via
+  // onChange → store → new `value`), so a genuinely-external move is one that
+  // differs from the centre the map is already showing — without that check,
+  // an applicant who zoomed out to find their area was yanked back to pin
+  // zoom on every drag. Flutter's picker documents the same hazard.
+  useEffect(() => {
+    if (!value) return;
+    const c = live.current.center;
+    if (Math.abs(c.lat - value.lat) < 1e-9 && Math.abs(c.lng - value.lng) < 1e-9) return;
+    setCenter(value);
+    setZoom((z) => Math.max(z, pinZoom));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value?.lat, value?.lng]);
+
+  const pan = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: (_e, g) => Math.abs(g.dx) + Math.abs(g.dy) > 4,
+      onPanResponderMove: (_e, g) => setDrag({ dx: g.dx, dy: g.dy }),
+      onPanResponderRelease: (_e, g) => {
+        setDrag(null);
+        if (g.dx === 0 && g.dy === 0) return;
+        const { center: c, zoom: z, onChange: fire } = live.current;
+        const next = panCenter(c, z, g.dx, g.dy);
+        setCenter(next);
+        fire(next);
+      },
+      onPanResponderTerminate: () => setDrag(null),
+      // Android: a parent ScrollView (StickyActions) asks to take a vertical
+      // drag over once it passes the scroll slop; refuse, and block the native
+      // responder, or the map stops dead a few pixels in while the page moves.
+      onPanResponderTerminationRequest: () => false,
+      onShouldBlockNativeResponder: () => true,
+    }),
+  ).current;
+
+  const zoomBy = (delta: number) => {
+    const next = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, zoom + delta));
+    if (next === zoom) return;
+    setZoom(next);
+    onChange(center);
+  };
+
+  const tiles = size ? visibleTiles(center, zoom, size.w, size.h) : [];
+
+  return (
+    <View
+      accessibilityLabel={
+        interactive ? 'Map. Drag to position the pin on your address.' : 'Map showing your address'
+      }
+      onLayout={(e) =>
+        setSize({ w: e.nativeEvent.layout.width, h: e.nativeEvent.layout.height })
+      }
+      style={{
+        height,
+        borderRadius: cornerRadius ?? radius.md,
+        borderWidth: cornerRadius === 0 ? 0 : 1,
+        borderColor: colors.border,
+        backgroundColor: colors.backgroundSecondary,
+        overflow: 'hidden',
+      }}
+      {...(interactive ? pan.panHandlers : {})}
+    >
+      <View
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          transform: drag ? [{ translateX: drag.dx }, { translateY: drag.dy }] : [],
+        }}
+      >
+        {tiles.map((tile) => (
+          <Image
+            key={tile.key}
+            source={{ uri: tile.url }}
+            style={{ position: 'absolute', left: tile.left, top: tile.top, width: 256, height: 256 }}
+          />
+        ))}
+      </View>
+
+      {/* The fixed centre pin — its stem tip on the exact centre, lifted
+          with the landing dot beneath it while the map pans. */}
+      <View
+        pointerEvents="none"
+        style={{
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          top: 0,
+          bottom: height / 2,
+          alignItems: 'center',
+          justifyContent: 'flex-end',
+        }}
+      >
+        <MapPinMarker lifted={drag != null} color={colors.primary} />
+      </View>
+
+      {interactive ? <MapZoomControls onZoom={zoomBy} /> : null}
+      <MapAttribution />
+    </View>
+  );
+}

package/src/components/MilestoneTrack.tsx

@@ -0,0 +1,155 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { radius, spacing } from '../config/theme';
+import { useTheme } from './runtime';
+import { Icon, type IconName } from './Icon';
+import { MyazaText } from './Typography';
+
+// ---------------------------------------------------------------------------
+// The presence story's three-node track, shared by the intro gate (the promise)
+// and the success card (the same promise, now running) so the two read as two
+// frames of ONE story rather than two unrelated notices.
+//
+// Nodes ahead of the active one are TINTED, not greyed out: they are the plan,
+// not disabled controls. Flat fills only.
+// ---------------------------------------------------------------------------
+
+export interface Milestone {
+  icon: IconName;
+  /** The when: "Your part", "Today", "Then". */
+  stage: string;
+  title: string;
+  caption: string;
+  state: 'active' | 'ahead';
+}
+
+export function MilestoneTrack({
+  milestones,
+  numbered = false,
+  nodeSize = 40,
+}: {
+  milestones: readonly Milestone[];
+  /** Wear the step number on each node — the sequence is the point on the
+   *  intro screen, where nothing has happened yet. */
+  numbered?: boolean;
+  /** Node diameter, and therefore where the connecting rail has to sit: 40 on
+   *  the primer (web h-10), 32 on the success card (web h-8). */
+  nodeSize?: number;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  const NODE = nodeSize;
+  // The active node's halo: web's `shadow-[0_0_0_5px] shadow-primary/15`
+  // (4px on the smaller success-card node), drawn as a ring behind it.
+  const halo = NODE >= 40 ? 5 : 4;
+  return (
+    <View style={{ paddingHorizontal: spacing.md, paddingVertical: spacing.md }}>
+      {milestones.map((m, i) => {
+        const active = m.state === 'active';
+        const last = i === milestones.length - 1;
+        return (
+          <View
+            key={m.title}
+            style={{ flexDirection: 'row', gap: spacing.md, paddingBottom: last ? 0 : spacing.md }}
+          >
+            {!last ? (
+              <View
+                pointerEvents="none"
+                style={{
+                  position: 'absolute',
+                  left: NODE / 2 - 0.5,
+                  top: NODE + 4,
+                  bottom: 0,
+                  width: 1,
+                  backgroundColor: `${colors.primary}33`,
+                }}
+              />
+            ) : null}
+
+            <View style={{ width: NODE }}>
+              {active ? (
+                <View
+                  pointerEvents="none"
+                  style={{
+                    position: 'absolute',
+                    left: -halo,
+                    top: -halo,
+                    width: NODE + halo * 2,
+                    height: NODE + halo * 2,
+                    borderRadius: radius.full,
+                    backgroundColor: `${colors.primary}26`,
+                  }}
+                />
+              ) : null}
+              <View
+                style={{
+                  width: NODE,
+                  height: NODE,
+                  borderRadius: radius.full,
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  backgroundColor: active ? colors.primary : `${colors.primary}1A`,
+                  ...(active ? {} : { borderWidth: 1, borderColor: `${colors.primary}33` }),
+                }}
+              >
+                <Icon name={m.icon} size={NODE * 0.45} color={active ? colors.onPrimary : colors.primary} />
+              </View>
+              {numbered ? (
+                <View
+                  style={{
+                    position: 'absolute',
+                    right: -4,
+                    top: -4,
+                    width: 18,
+                    height: 18,
+                    borderRadius: radius.full,
+                    borderWidth: 1,
+                    borderColor: active ? colors.primary : colors.border,
+                    backgroundColor: colors.background,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}
+                >
+                  <MyazaText
+                    variant="bodySmall"
+                    color={active ? colors.primary : colors.textSecondary}
+                    style={{ fontSize: 9, fontWeight: '700', lineHeight: 11 }}
+                  >
+                    {i + 1}
+                  </MyazaText>
+                </View>
+              ) : null}
+            </View>
+
+            <View style={{ flex: 1, paddingTop: 2 }}>
+              {/* Uppercased by STYLE, not by the string: a screen reader
+                  should hear the words, not shouted initials. */}
+              <MyazaText
+                variant="bodySmall"
+                color={active ? colors.primary : colors.textSecondary}
+                style={{
+                  fontSize: 10,
+                  fontWeight: '600',
+                  letterSpacing: 0.8,
+                  textTransform: 'uppercase',
+                }}
+              >
+                {m.stage}
+              </MyazaText>
+              <MyazaText variant="bodyMedium" style={{ fontWeight: '600', marginTop: 1 }}>
+                {m.title}
+              </MyazaText>
+              <MyazaText
+                variant="bodySmall"
+                color={colors.textSecondary}
+                style={{ marginTop: 2 }}
+              >
+                {m.caption}
+              </MyazaText>
+            </View>
+          </View>
+        );
+      })}
+    </View>
+  );
+}

package/src/components/MyazaInput.tsx

@@ -21,6 +21,9 @@ export interface MyazaInputProps {
   value: string;
   onChangeText: (text: string) => void;
   label?: string;
+  /** Marks the label with an asterisk in the error colour: a field the flow
+   *  will not continue without. */
+  required?: boolean;
   placeholder?: string;
   error?: string | null;
   helper?: string;
@@ -51,6 +54,9 @@ export interface MyazaInputProps {
    * keyboard preferred. Defaults on, like the platform.
    */
   autoCorrect?: boolean;
+  /** Multi-line entry (directions, notes): three visible lines, text anchored
+   *  to the top on Android (which centres multiline text by default). */
+  multiline?: boolean;
   onFocus?: FocusHandler;
   onBlur?: BlurHandler;
 }
@@ -59,6 +65,7 @@ export function MyazaInput({
   value,
   onChangeText,
   label,
+  required = false,
   placeholder,
   error,
   helper,
@@ -66,6 +73,7 @@ export function MyazaInput({
   autoCapitalize = 'none',
   maxLength,
   editable = true,
+  multiline = false,
   autoFocus = false,
   prefix,
   suffix,
@@ -101,6 +109,11 @@ export function MyazaInput({
       {label ? (
         <MyazaText variant="label" style={{ marginBottom: spacing.sm }}>
           {label}
+          {required ? (
+            <MyazaText variant="label" color={colors.error}>
+              {' *'}
+            </MyazaText>
+          ) : null}
         </MyazaText>
       ) : null}
       {prefix || suffix ? (
@@ -152,10 +165,13 @@ export function MyazaInput({
           maxLength={maxLength}
           editable={editable}
           autoFocus={autoFocus}
+          multiline={multiline}
+          numberOfLines={multiline ? 3 : 1}
+          textAlignVertical={multiline ? 'top' : 'center'}
           onFocus={handleFocus}
           onBlur={handleBlur}
           style={{
-            height: height ?? sizing.inputHeight,
+            height: height ?? (multiline ? sizing.inputHeight * 2 : sizing.inputHeight),
             borderWidth,
             borderColor,
             borderRadius: radius.sm,

package/src/components/OptionRow.tsx

@@ -22,27 +22,40 @@ export function OptionRow({
   label,
   selected,
   multi,
+  role,
+  icon,
   leading,
   trailing,
+  disabled,
   onPress,
 }: {
   label: string;
   selected: boolean;
   /** Renders a square check instead of a radio dot. */
   multi?: boolean;
+  /**
+   * What the row IS to a screen reader. Defaults from `multi`; a single-pick
+   * list wearing the square check (the PoA document kind) passes 'radio'.
+   */
+  role?: 'checkbox' | 'radio';
+  /** A glyph between the mark and the label — the mark stays. */
+  icon?: React.ReactNode;
   /** Something before the label — a flag, an icon. Replaces the radio mark. */
   leading?: React.ReactNode;
   trailing?: React.ReactNode;
+  /** Greyed and inert — a choice that is locked, not one that is gone. */
+  disabled?: boolean;
   onPress: () => void;
 }): React.ReactElement {
   const { colors } = useTheme();
   return (
     <Pressable
-      onPress={onPress}
-      accessibilityRole={multi ? 'checkbox' : 'radio'}
-      accessibilityState={{ checked: selected }}
+      onPress={disabled ? undefined : onPress}
+      accessibilityRole={role ?? (multi ? 'checkbox' : 'radio')}
+      accessibilityState={{ checked: selected, disabled: disabled === true }}
       accessibilityLabel={label}
       style={{
+        opacity: disabled ? 0.5 : 1,
         flexDirection: 'row',
         alignItems: 'center',
         // The checkbox variant matches the web SDK's multi-select card exactly
@@ -59,6 +72,12 @@ export function OptionRow({
     >
       {leading ?? <SelectionMark selected={selected} multi={multi} />}
       <View style={{ width: multi ? 10 : spacing.sm }} />
+      {icon ? (
+        <>
+          {icon}
+          <View style={{ width: 10 }} />
+        </>
+      ) : null}
       <MyazaText variant="body" style={{ flex: 1 }}>
         {label}
       </MyazaText>

package/src/components/PhoneNumberInput.tsx

@@ -36,6 +36,7 @@ import { COUNTRY_NAMES } from '../config/countryNames.g';
 export function PhoneNumberInput({
   value,
   defaultCountry,
+  geoCountry,
   disabled,
   autoFocus = false,
   onChange,
@@ -49,6 +50,12 @@ export function PhoneNumberInput({
   value?: string;
   /** Seeds the picker (ISO-2). Falls back to NG. */
   defaultCountry?: string;
+  /**
+   * The visitor's IP country. Pinned to the top of the picker and tagged, so
+   * a guess we made on their behalf is visible AS a guess and one tap away
+   * rather than buried at its alphabetical position. Mirrors the web SDK.
+   */
+  geoCountry?: string | null;
   disabled?: boolean;
   /** Focus + keyboard on mount. Opt-in: right for a single-field OTP screen,
    *  wrong for a row in a company-profile form. */
@@ -174,6 +181,7 @@ export function PhoneNumberInput({
         visible={open}
         options={options}
         selected={country}
+        pinned={geoCountry}
         onPick={pickCountry}
         onClose={() => setOpen(false)}
       />

package/src/components/PoweredBy.tsx

@@ -36,12 +36,12 @@ export function PoweredBy({ bottomInset = 0 }: { bottomInset?: number }): React.
   return (
     <View
       style={{
-        paddingTop: spacing.md,
+        paddingTop: 10,
         // Symmetric with the top. It was `lg`, which read as a heavy band on the
         // one screen where vertical space is contested — the searchable country
         // list, where the footer costs a visible row. The home-indicator inset
         // rides on top, so notched devices still clear it comfortably.
-        paddingBottom: spacing.md + bottomInset,
+        paddingBottom: 12 + bottomInset,
         alignItems: 'center',
       }}
     >
@@ -70,9 +70,9 @@ export function PoweredBy({ bottomInset = 0 }: { bottomInset?: number }): React.
           hitSlop={8}
           style={{ flexDirection: 'row', alignItems: 'center', gap: spacing.sm }}
         >
-          <MyazaWordmark height={28} wordmark={markColor} />
+          <MyazaWordmark height={24} wordmark={markColor} />
 
-          <View style={{ width: 1, height: 24, backgroundColor: markColor, opacity: 0.35 }} />
+          <View style={{ width: 1, height: 20, backgroundColor: markColor, opacity: 0.35 }} />
 
           {/* ~half the wordmark's height — the ratio the dashboard lockup uses. */}
           {/* Pinned to the brand face rather than inheriting: this word is part
@@ -83,7 +83,7 @@ export function PoweredBy({ bottomInset = 0 }: { bottomInset?: number }): React.
             brandMark
             variant="body"
             color={markColor}
-            style={{ flexShrink: 1, fontSize: 14, fontWeight: '600', letterSpacing: 2 }}
+            style={{ flexShrink: 1, fontSize: 12, fontWeight: '600', letterSpacing: 1.68 }}
           >
             TRUST
           </MyazaText>

package/src/components/PresenceBlocks.tsx

@@ -0,0 +1,153 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, View } from 'react-native';
+
+import { MyazaText } from './Typography';
+import { MilestoneTrack, type Milestone } from './MilestoneTrack';
+import { useReduceMotion } from './StaggerIn';
+import { radius, spacing } from '../config/theme';
+import { useTheme } from './theme-provider';
+
+// ---------------------------------------------------------------------------
+// The success screen's presence card, drawn as a LIVE PROCESS rather than a
+// notice: the check began the moment they submitted, so the card should feel
+// like something is already quietly working, because it is.
+//
+// Its milestones are the same three the intro gate promises, one frame later —
+// keep the two, and the web and Flutter SDKs, in lockstep.
+//
+// The standalone "presence consent notice" that used to live here is gone: the
+// disclosures belong on the intro gate, and a second copy on the address step
+// was one more place for the consent wording to drift.
+// ---------------------------------------------------------------------------
+
+const MILESTONES: readonly Milestone[] = [
+  {
+    icon: 'map-pin-check',
+    stage: 'Today',
+    title: 'Check started',
+    caption: 'Your pin is saved. Keep location on.',
+    state: 'active',
+  },
+  {
+    icon: 'radar',
+    stage: 'Next few days',
+    title: 'Quiet check-ins',
+    caption: 'Your phone confirms it is at your address now and then.',
+    state: 'ahead',
+  },
+  {
+    icon: 'bell-ring',
+    stage: 'Then',
+    title: 'Confirmed',
+    caption: 'You get a notification. That is it.',
+    state: 'ahead',
+  },
+];
+
+export function PresenceExpectations(): React.ReactElement {
+  const { colors } = useTheme();
+  return (
+    <View
+      style={{
+        alignSelf: 'stretch',
+        marginTop: spacing.lg,
+        borderWidth: 1,
+        borderColor: `${colors.primary}26`,
+        borderRadius: radius.md,
+        overflow: 'hidden',
+      }}
+    >
+      <View
+        style={{
+          backgroundColor: `${colors.primary}0F`,
+          paddingHorizontal: spacing.md,
+          paddingTop: spacing.md,
+          paddingBottom: spacing.sm + 4,
+        }}
+      >
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            alignSelf: 'flex-start',
+            gap: spacing.sm,
+            paddingHorizontal: spacing.sm + 2,
+            paddingVertical: 4,
+            borderRadius: radius.full,
+            backgroundColor: `${colors.primary}1A`,
+          }}
+        >
+          <LiveDot />
+          <MyazaText
+            variant="bodySmall"
+            color={colors.primary}
+            style={{
+              fontSize: 11,
+              fontWeight: '600',
+              letterSpacing: 0.6,
+              textTransform: 'uppercase',
+            }}
+          >
+            Address check active
+          </MyazaText>
+        </View>
+        <MyazaText variant="bodyMedium" style={{ fontWeight: '600', marginTop: spacing.sm }}>
+          Your address confirms itself from here
+        </MyazaText>
+        <MyazaText variant="bodySmall" color={colors.textSecondary} style={{ marginTop: 2 }}>
+          Nothing else for you to do. Carry on as normal.
+        </MyazaText>
+      </View>
+
+      {/* Web's h-8 nodes here, against the primer's h-10. */}
+      <MilestoneTrack milestones={MILESTONES} nodeSize={32} />
+    </View>
+  );
+}
+
+/** The badge's pulse — the one thing on the card that says "running now". */
+function LiveDot(): React.ReactElement {
+  const { colors } = useTheme();
+  const reduceMotion = useReduceMotion();
+  const pulse = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    if (reduceMotion) return undefined;
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(pulse, { toValue: 1, duration: 900, useNativeDriver: true }),
+        Animated.timing(pulse, { toValue: 0, duration: 0, useNativeDriver: true }),
+      ]),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [pulse, reduceMotion]);
+
+  return (
+    <View style={{ width: 8, height: 8, alignItems: 'center', justifyContent: 'center' }}>
+      {reduceMotion ? null : (
+        <Animated.View
+          style={{
+            position: 'absolute',
+            width: 8,
+            height: 8,
+            borderRadius: radius.full,
+            backgroundColor: colors.primary,
+            opacity: pulse.interpolate({ inputRange: [0, 1], outputRange: [0.6, 0] }),
+            transform: [
+              { scale: pulse.interpolate({ inputRange: [0, 1], outputRange: [1, 2.2] }) },
+            ],
+          }}
+        />
+      )}
+      <View
+        style={{
+          width: 8,
+          height: 8,
+          borderRadius: radius.full,
+          backgroundColor: colors.primary,
+        }}
+      />
+    </View>
+  );
+}