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

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/MultiIdProgress.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { radius, spacing } from '../config/theme';
+import { resolveIdTypeDefinition } from '../config/idTypes';
+import type { MultiIdPlan } from '../lib/multi-id';
+import type { MultiIdSlot } from '../store/state';
+import { useEffectiveCountry, useKyc, useTheme } from './runtime';
+import { MyazaText } from './Typography';
+import { Icon } from './Icon';
+
+// The multi-ID run's position strip: one chip per check, filling in with the
+// picked ID's name as each check commits, the current one highlighted.
+//
+// A PORT of the web SDK's MultiIdProgress. Rendered above the picker, the
+// evidence steps and liveness so a reader always knows which of the run's IDs
+// the screen is about and how many remain — without it a three-ID run is three
+// visits to the same-looking screen with nothing saying which is which.
+
+export function MultiIdProgress({ plan }: { plan: MultiIdPlan }): React.ReactElement {
+  const { colors } = useTheme();
+  const country = useEffectiveCountry();
+  const serverConfig = useKyc((s) => s.serverConfig);
+  const slots: MultiIdSlot[] = useKyc((s) => s.multiIdSlots);
+
+  const labelFor = (idType: string): string => {
+    const row = serverConfig.idTypes.find(
+      (r) => r.country === country && r.idType === idType,
+    );
+    return resolveIdTypeDefinition(country, idType, {
+      label: row?.label,
+      requiresDocumentCapture: row?.requiresDocumentCapture,
+      scanSides: row?.scanSides,
+      supportsNfc: row?.supportsNfc,
+    }).label;
+  };
+
+  return (
+    <View
+      accessibilityLabel={`ID ${Math.min(plan.index + 1, plan.count)} of ${plan.count}`}
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: spacing.sm,
+        marginBottom: spacing.md,
+        paddingHorizontal: spacing.md,
+        paddingVertical: spacing.sm,
+        borderRadius: radius.md,
+        borderWidth: 1,
+        borderColor: colors.border,
+        backgroundColor: colors.backgroundSecondary,
+      }}
+    >
+      {Array.from({ length: plan.count }, (_, i) => {
+        const committed = slots[i];
+        const active = i === plan.index;
+        return (
+          <View
+            key={i}
+            style={{ flexDirection: 'row', alignItems: 'center', gap: spacing.sm, minWidth: 0 }}
+          >
+            {i > 0 && (
+              <View
+                style={{
+                  height: 1,
+                  width: 16,
+                  backgroundColor: committed || active ? colors.primary : colors.border,
+                  opacity: committed || active ? 0.5 : 1,
+                }}
+              />
+            )}
+            <View
+              style={{
+                height: 20,
+                width: 20,
+                borderRadius: 10,
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: committed ? colors.primary : 'transparent',
+                borderWidth: committed ? 0 : active ? 2 : 1,
+                borderColor: active ? colors.primary : colors.border,
+              }}
+            >
+              {committed ? (
+                <Icon name="check" size={12} color={colors.onPrimary} />
+              ) : (
+                <MyazaText
+                  variant="bodySmall"
+                  color={active ? colors.primary : colors.textMuted}
+                >
+                  {String(i + 1)}
+                </MyazaText>
+              )}
+            </View>
+            <MyazaText
+              variant="bodySmall"
+              color={active ? colors.textDark : colors.textMuted}
+              numberOfLines={1}
+            >
+              {committed ? labelFor(committed.idType) : `ID ${i + 1}`}
+            </MyazaText>
+          </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;
@@ -39,6 +42,21 @@ export interface MyazaInputProps {
   /** Rendered inside the field, after the text — a unit like "%". Same
    *  bordered-row treatment as `prefix`. */
   suffix?: React.ReactNode;
+  /** Field height override — the results filter runs at 40 where every other
+   *  input is 48, matching the web SDK's h-10 filter beside h-12 inputs. */
+  height?: number;
+  /** Text size override, for the compact filter (web: text-sm = 14). */
+  fontSize?: number;
+  /**
+   * Off for proper-noun fields (company names, registration numbers): iOS
+   * autocorrect rewrites them right before the person submits, so a search
+   * for the company they typed silently becomes a search for a word the
+   * 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;
 }
@@ -47,6 +65,7 @@ export function MyazaInput({
   value,
   onChangeText,
   label,
+  required = false,
   placeholder,
   error,
   helper,
@@ -54,9 +73,13 @@ export function MyazaInput({
   autoCapitalize = 'none',
   maxLength,
   editable = true,
+  multiline = false,
   autoFocus = false,
   prefix,
   suffix,
+  height,
+  fontSize,
+  autoCorrect = true,
   onFocus,
   onBlur,
 }: MyazaInputProps): React.ReactElement {
@@ -86,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 ? (
@@ -95,7 +123,7 @@ export function MyazaInput({
           style={{
             flexDirection: 'row',
             alignItems: 'center',
-            height: sizing.inputHeight,
+            height: height ?? sizing.inputHeight,
             borderWidth,
             borderColor,
             borderRadius: radius.sm,
@@ -112,12 +140,14 @@ export function MyazaInput({
             placeholderTextColor={colors.textMuted}
             keyboardType={keyboardType}
             autoCapitalize={autoCapitalize}
+            autoCorrect={autoCorrect}
+            spellCheck={autoCorrect}
             maxLength={maxLength}
             editable={editable}
             autoFocus={autoFocus}
             onFocus={handleFocus}
             onBlur={handleBlur}
-            style={{ flex: 1, height: '100%', color: colors.textDark, fontSize: 16, fontFamily }}
+            style={{ flex: 1, height: '100%', color: colors.textDark, fontSize: fontSize ?? 16, fontFamily }}
           />
           {suffix ? <View style={{ width: spacing.sm }} /> : null}
           {suffix}
@@ -130,13 +160,18 @@ export function MyazaInput({
           placeholderTextColor={colors.textMuted}
           keyboardType={keyboardType}
           autoCapitalize={autoCapitalize}
+          autoCorrect={autoCorrect}
+          spellCheck={autoCorrect}
           maxLength={maxLength}
           editable={editable}
           autoFocus={autoFocus}
+          multiline={multiline}
+          numberOfLines={multiline ? 3 : 1}
+          textAlignVertical={multiline ? 'top' : 'center'}
           onFocus={handleFocus}
           onBlur={handleBlur}
           style={{
-            height: sizing.inputHeight,
+            height: height ?? (multiline ? sizing.inputHeight * 2 : sizing.inputHeight),
             borderWidth,
             borderColor,
             borderRadius: radius.sm,
@@ -145,7 +180,7 @@ export function MyazaInput({
             paddingHorizontal: spacing.md + (2 - borderWidth),
             color: colors.textDark,
             backgroundColor: colors.background,
-            fontSize: 16,
+            fontSize: fontSize ?? 16,
             fontFamily,
           }}
         />

package/src/components/MyazaSelect.tsx

@@ -147,7 +147,8 @@ export function MyazaSelect<T extends string | number>({
               style={{
                 fontWeight: '700',
                 paddingHorizontal: spacing.md,
-                paddingTop: spacing.md,
+                // Tight under the handle, the way the system sheet titles sit.
+                paddingTop: spacing.xs,
                 paddingBottom: spacing.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/OwnershipSlider.tsx

@@ -0,0 +1,102 @@
+import React, { useRef, useState } from 'react';
+import { PanResponder, View } from 'react-native';
+
+import { useTheme } from './runtime';
+
+// ─── A 0–100 slider for the ownership field ──────────────────────────────────
+//
+// The fast coarse gesture beside the exact box: dragging writes whole numbers
+// into the same field, and a register stake like 48.42 is still typed (no
+// thumb lands on it). Dependency-free — a track, a fill and a thumb under one
+// PanResponder — because a native slider module is a heavy import for one
+// field. Mirrors the web SDK's range input under the same box.
+
+const THUMB = 22;
+const TRACK = 5;
+
+export function OwnershipSlider({
+  value,
+  onChange,
+}: {
+  /** The current stake 0–100; an undeclared one rests the thumb at 0. */
+  value: number;
+  onChange: (next: number) => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  const [width, setWidth] = useState(0);
+  const widthRef = useRef(0);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+
+  const setFromX = (x: number): void => {
+    const usable = widthRef.current - THUMB;
+    if (usable <= 0) return;
+    const ratio = (x - THUMB / 2) / usable;
+    const next = Math.round(Math.min(1, Math.max(0, ratio)) * 100);
+    onChangeRef.current(next);
+  };
+
+  const pan = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: (e) => setFromX(e.nativeEvent.locationX),
+      onPanResponderMove: (e) => setFromX(e.nativeEvent.locationX),
+    }),
+  ).current;
+
+  const clamped = Math.min(100, Math.max(0, value));
+  const left = width > 0 ? (clamped / 100) * (width - THUMB) : 0;
+
+  return (
+    <View
+      {...pan.panHandlers}
+      onLayout={(e) => {
+        widthRef.current = e.nativeEvent.layout.width;
+        setWidth(e.nativeEvent.layout.width);
+      }}
+      accessibilityRole="adjustable"
+      accessibilityLabel="Ownership percentage"
+      accessibilityValue={{ min: 0, max: 100, now: clamped }}
+      // Tall hit area; the visible track stays thin.
+      style={{ height: 32, justifyContent: 'center' }}
+    >
+      <View
+        style={{
+          height: TRACK,
+          borderRadius: TRACK / 2,
+          backgroundColor: colors.border,
+        }}
+      />
+      <View
+        pointerEvents="none"
+        style={{
+          position: 'absolute',
+          left: 0,
+          width: left + THUMB / 2,
+          height: TRACK,
+          borderRadius: TRACK / 2,
+          backgroundColor: colors.primary,
+        }}
+      />
+      <View
+        pointerEvents="none"
+        style={{
+          position: 'absolute',
+          left,
+          width: THUMB,
+          height: THUMB,
+          borderRadius: THUMB / 2,
+          backgroundColor: colors.primary,
+          borderWidth: 3,
+          borderColor: colors.background,
+          shadowColor: '#000',
+          shadowOpacity: 0.15,
+          shadowRadius: 3,
+          shadowOffset: { width: 0, height: 1 },
+          elevation: 2,
+        }}
+      />
+    </View>
+  );
+}

package/src/components/PhoneNumberInput.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Pressable, View } from 'react-native';
 
 import {
@@ -34,13 +34,32 @@ import { COUNTRY_NAMES } from '../config/countryNames.g';
 // ---------------------------------------------------------------------------
 
 export function PhoneNumberInput({
+  value,
   defaultCountry,
+  geoCountry,
   disabled,
+  autoFocus = false,
   onChange,
 }: {
+  /**
+   * E.164 seed. The field itself stays uncontrolled (the formatter owns the
+   * text), but a value arriving after mount — the register's, prefilled a
+   * moment later — has to reach the field, or we hold a number the applicant
+   * can neither see nor correct and submit it as though they gave it.
+   */
+  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. */
+  autoFocus?: boolean;
   /** Fires on every edit with the E.164 value ('' until parseable) + validity. */
   onChange: (value: { e164: string; isValid: boolean; country: string }) => void;
 }): React.ReactElement {
@@ -64,11 +83,32 @@ export function PhoneNumberInput({
     [],
   );
 
-  const seed = (defaultCountry?.toUpperCase() ?? 'NG') as CountryCode;
+  // A supplied number decides its OWN dial code — it is a fact, where the
+  // country prop is a guess. Falls through to the guess when there is no
+  // number or it cannot be parsed.
+  const supplied = value ? parsePhoneNumberFromString(value) : null;
+  const seed = (supplied?.country ??
+    defaultCountry?.toUpperCase() ??
+    'NG') as CountryCode;
   const [country, setCountry] = useState<CountryCode>(
     options.some((o) => o.code === seed) ? seed : ('NG' as CountryCode),
   );
-  const [national, setNational] = useState('');
+  const [national, setNational] = useState(() =>
+    supplied ? formatNationalNumber(supplied.nationalNumber, seed) : '',
+  );
+  // A number that arrives AFTER mount — the register's, prefilled a moment
+  // later — has to reach the field. Seeding is one-way and keyed on the value,
+  // so the applicant's own edits are never fought.
+  const seededRef = useRef(value ?? '');
+  useEffect(() => {
+    if (!value || value === seededRef.current) return;
+    seededRef.current = value;
+    const parsed = parsePhoneNumberFromString(value);
+    if (!parsed) return;
+    const next = (parsed.country ?? country) as CountryCode;
+    setCountry(next);
+    setNational(formatNationalNumber(parsed.nationalNumber, next));
+  }, [value, country]);
   const [open, setOpen] = useState(false);
 
   const selected = options.find((o) => o.code === country);
@@ -132,7 +172,7 @@ export function PhoneNumberInput({
             placeholder="803 123 4567"
             keyboardType="phone-pad"
             editable={!disabled}
-            autoFocus
+            autoFocus={autoFocus}
           />
         </View>
       </View>
@@ -141,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>