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

package/src/screens/ContactEntryPanel.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { spacing } from '../config/theme';
+import { MyazaAlert } from '../components/MyazaAlert';
+import { ContactDestinationField } from './ContactDestinationField';
+import { ContactChannelChoice } from './ContactChannelChoice';
+import type { PhoneOtpChannel } from '../config/contact';
+
+// ---------------------------------------------------------------------------
+// The first half of the contact step: where to send the code, and (when the
+// workflow offers a choice) how. Composed as one widget so the step has a
+// single child per phase. Split from ContactVerificationStep (200-line rule);
+// mirrors Flutter's ContactEntryPanel.
+// ---------------------------------------------------------------------------
+
+export function ContactEntryPanel({
+  isEmail,
+  recovery,
+  email,
+  onEmailChange,
+  onPhoneChange,
+  defaultCountry,
+  geoCountry,
+  error,
+  disabled,
+  offeredChannels,
+  via,
+  onPickChannel,
+}: {
+  isEmail: boolean;
+  /** Entered via submit recovery: the server refused this channel's proof. */
+  recovery: boolean;
+  email: string;
+  onEmailChange: (value: string) => void;
+  onPhoneChange: (value: { e164: string; isValid: boolean }) => void;
+  defaultCountry?: string;
+  geoCountry?: string | null;
+  error: string | null;
+  disabled: boolean;
+  offeredChannels: PhoneOtpChannel[];
+  via: PhoneOtpChannel;
+  onPickChannel: (channel: PhoneOtpChannel) => void;
+}): React.ReactElement {
+  return (
+    <>
+      {recovery && (
+        <>
+          <MyazaAlert
+            variant="warning"
+            title="Please verify again"
+            message={`Your earlier confirmation has expired, so please verify ${isEmail ? 'your email' : 'your number'} once more. Everything else is saved, and we will submit again straight after.`}
+          />
+          <View style={{ height: spacing.md }} />
+        </>
+      )}
+      <ContactDestinationField
+        isEmail={isEmail}
+        email={email}
+        onEmailChange={onEmailChange}
+        onPhoneChange={onPhoneChange}
+        defaultCountry={defaultCountry}
+        geoCountry={geoCountry}
+        error={error}
+        disabled={disabled}
+      />
+      <ContactChannelChoice
+        offered={offeredChannels}
+        picked={via}
+        disabled={disabled}
+        onPick={onPickChannel}
+      />
+    </>
+  );
+}

package/src/screens/ContactVerificationStep.tsx

@@ -1,14 +1,12 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { View } from 'react-native';
 
 import { spacing } from '../config/theme';
 import { useEffectiveCountry, useKyc, useKycConfig, useKycStore } from '../components/runtime';
-import { MyazaButton } from '../components/MyazaButton';
-import { ContactDestinationField } from './ContactDestinationField';
+import { ContactActions } from './ContactActions';
+import { ContactEntryPanel } from './ContactEntryPanel';
 import { ContactVerifiedPanel } from './ContactVerifiedPanel';
 import { ContactCodeStep } from './ContactCodeStep';
-import { ContactChannelChoice } from './ContactChannelChoice';
-import { ContactFooterNote } from './ContactFooterNote';
 import {
   contactCodeLength,
   contactIsRequired,
@@ -17,6 +15,7 @@ import {
   type PhoneOtpChannel,
 } from '../config/contact';
 import { attemptsRemaining, describeCheckError, describeSendError } from '../services/contactErrors';
+import { stepAfterContactVerified } from '../lib/contact-recovery';
 
 // ---------------------------------------------------------------------------
 // Contact-verification OTP step — email or phone, one component, two mounts.
@@ -37,6 +36,7 @@ export function ContactVerificationStep({
   const country = useEffectiveCountry();
   const store = useKycStore();
   const contact = useKyc((s) => s.contact);
+  const serverConfig = useKyc((s) => s.serverConfig);
 
   const isEmail = channel === 'email';
   const stepConfig = isEmail ? config.emailVerification : config.phoneVerification;
@@ -54,10 +54,9 @@ export function ContactVerificationStep({
   const [destination, setDestination] = useState(contact.emailAddress ?? '');
   // The phone field emits E.164 + validity from libphonenumber, so the step no
   // longer guesses either from raw text.
-  const [phone, setPhone] = useState<{ e164: string; isValid: boolean }>({
-    e164: contact.phoneNumber ?? '',
-    isValid: false,
-  });
+  const [phone, setPhone] = useState<{ e164: string; isValid: boolean }>(
+    { e164: contact.phoneNumber ?? '', isValid: false },
+  );
   const [challengeId, setChallengeId] = useState<string | null>(null);
   const [expiresAt, setExpiresAt] = useState<string | null>(null);
   const [code, setCode] = useState('');
@@ -69,7 +68,20 @@ export function ContactVerificationStep({
   const value = isEmail ? destination.trim() : phone.e164;
   const canSend = isEmail ? isValidContactEmail(value) : phone.isValid;
 
-  const advance = useCallback(() => store.getState().nextStep(), [store]);
+  // Entered via submit recovery? (The server refused this channel's proof at
+  // submit — the token had expired or was already claimed.) Captured at mount:
+  // verifying clears the flag, and Continue must still route back to
+  // 'submitted' afterwards (which auto-submits with the fresh proof).
+  const recovery = useRef((contact.expired ?? []).includes(channel)).current;
+  const advance = useCallback(() => {
+    const target = stepAfterContactVerified({
+      recovery,
+      expired: store.getState().contact.expired ?? [],
+      channel,
+    });
+    if (target) store.getState().goToStep(target);
+    else store.getState().nextStep();
+  }, [store, channel, recovery]);
 
   // The sheet header is rendered by the shell and cannot see this step's state,
   // so publish what it needs to caption: the channel in play now, and the
@@ -158,42 +170,31 @@ export function ContactVerificationStep({
           onResend={(switchTo) => void send(switchTo)}
         />
       ) : (
-        <>
-          <ContactDestinationField
-            isEmail={isEmail}
-            email={destination}
-            onEmailChange={setDestination}
-            onPhoneChange={setPhone}
-            defaultCountry={config.phoneVerification?.defaultCountry ?? country ?? undefined}
-            error={error}
-            disabled={busy}
-          />
-          <ContactChannelChoice
-            offered={offeredChannels}
-            picked={via}
-            disabled={busy}
-            onPick={setVia}
-          />
-        </>
+        <ContactEntryPanel
+          isEmail={isEmail}
+          recovery={recovery}
+          email={destination}
+          onEmailChange={setDestination}
+          onPhoneChange={setPhone}
+          defaultCountry={config.phoneVerification?.defaultCountry ?? country ?? serverConfig.geoCountry ?? undefined}
+          geoCountry={serverConfig.geoCountry}
+          error={error}
+          disabled={busy}
+          offeredChannels={offeredChannels}
+          via={via}
+          onPickChannel={setVia}
+        />
       )}
 
-      <View style={{ height: spacing.md }} />
-      <MyazaButton
-        label={challengeId ? 'Verify code' : 'Send code'}
-        loading={busy}
+      <ContactActions
+        hasChallenge={challengeId != null}
+        busy={busy}
         disabled={challengeId ? code.length !== codeLength : !canSend}
-        onPress={() => (challengeId ? void check(code) : void send())}
+        required={required}
+        isEmail={isEmail}
+        onPrimary={() => (challengeId ? void check(code) : void send())}
+        onSkip={advance}
       />
-
-      {!required ? (
-        <>
-          <View style={{ height: spacing.sm }} />
-          <MyazaButton label="Skip for now" variant="ghost" disabled={busy} onPress={advance} />
-        </>
-      ) : null}
-
-      <View style={{ height: spacing.md }} />
-      <ContactFooterNote isEmail={isEmail} />
     </View>
   );
 }

package/src/screens/CountrySelectStep.tsx

@@ -1,13 +1,9 @@
-import React, { useMemo, useState } from 'react';
-import { Pressable, ScrollView, View } from 'react-native';
+import React, { useMemo } from 'react';
+import { View } from 'react-native';
 
-import { radius, spacing } from '../config/theme';
-import { useKyc, useKycConfig, useKycStore, useTheme } from '../components/runtime';
-import { MyazaText } from '../components/Typography';
-import { MyazaInput } from '../components/MyazaInput';
-import { CountryFlag } from '../components/CountryFlag';
-import { Icon } from '../components/Icon';
-import { groupCountriesByRegion, regionCountryName } from '../config/regions';
+import { useKyc, useKycConfig, useKycStore } from '../components/runtime';
+import { CountryRegionPicker, CountryRow } from '../components/CountryRegionPicker';
+import { regionCountryName } from '../config/regions';
 import { countrySelectOptions } from '../store/derive';
 
 // ---------------------------------------------------------------------------
@@ -54,7 +50,14 @@ export function CountrySelectStep(): React.ReactElement {
   };
 
   if (options.length > COUNTRY_SEARCH_THRESHOLD) {
-    return <CountryRegionPicker countries={options} selected={selected} onPick={pick} />;
+    return (
+      <CountryRegionPicker
+        countries={options}
+        selected={selected}
+        geoCountry={serverConfig.geoCountry}
+        onPick={pick}
+      />
+    );
   }
 
   return (
@@ -71,140 +74,3 @@ export function CountrySelectStep(): React.ReactElement {
     </View>
   );
 }
-
-function CountryRegionPicker({
-  countries,
-  selected,
-  onPick,
-}: {
-  countries: string[];
-  selected: string | null;
-  onPick: (country: string) => void;
-}): React.ReactElement {
-  const { colors } = useTheme();
-  const [query, setQuery] = useState('');
-
-  const groups = useMemo(() => {
-    const needle = query.trim().toLowerCase();
-    const filtered = needle
-      ? countries.filter(
-          (code) =>
-            code.toLowerCase().includes(needle) ||
-            regionCountryName(code).toLowerCase().includes(needle),
-        )
-      : countries;
-    return groupCountriesByRegion(filtered);
-  }, [countries, query]);
-
-  const empty = groups.length === 0;
-
-  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}
-        >
-          {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>
-  );
-}
-
-function CountryRow({
-  code,
-  name,
-  selected,
-  onPress,
-}: {
-  code: string;
-  name: string;
-  selected: boolean;
-  onPress: () => void;
-}): React.ReactElement {
-  const { colors } = useTheme();
-  return (
-    <Pressable
-      onPress={onPress}
-      accessibilityRole="radio"
-      accessibilityState={{ checked: selected }}
-      accessibilityLabel={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>
-      <Icon
-        name="chevron-right"
-        size={18}
-        color={selected ? colors.primary : colors.textSecondary}
-      />
-    </Pressable>
-  );
-}

package/src/screens/IdTypeStep.tsx

@@ -3,6 +3,7 @@ import { Pressable, View } from 'react-native';
 
 import { radius, spacing } from '../config/theme';
 import { ID_TYPES, resolveIdTypeDefinition } from '../config/idTypes';
+import { useMultiIdPlan } from '../lib/use-multi-id-plan';
 import type { IdType, IdTypeDefinition } from '../types/config';
 import {
   useEffectiveCountry,
@@ -54,6 +55,10 @@ export function IdTypeStep(): React.ReactElement {
   const store = useKycStore();
   const serverConfig = useKyc((s) => s.serverConfig);
   const selectedIdType = useKyc((s) => s.selectedIdType);
+  // Multi-ID: this picker is for ONE check of several. It may only offer picks
+  // that leave every later check something to offer — the server validates the
+  // same rule, so an unsafe pick would be a submission it rejects.
+  const plan = useMultiIdPlan();
 
   // Select AND advance in one tap. Both go through the store so `nextStep`
   // routes off the value just written — a document ID to document-capture, a
@@ -104,13 +109,15 @@ export function IdTypeStep(): React.ReactElement {
   // what makes the disabled step actually disappear from the live flow rather
   // than still offering passports and licences that then have nowhere to be
   // captured. Mirrors the web SDK's IdTypeStep.
-  const visible = useMemo<IdTypeDefinition[]>(
-    () =>
+  const visible = useMemo<IdTypeDefinition[]>(() => {
+    const base =
       config.enableDocumentCapture === false
         ? available.filter((t) => !t.requiresDocumentCapture)
-        : available,
-    [available, config.enableDocumentCapture],
-  );
+        : available;
+    // Multi-ID: only the picks that are still free AND leave every later check
+    // an option. An ID already used earlier in the run is simply not offered.
+    return plan ? base.filter((t) => plan.safeOptions.includes(t.key)) : base;
+  }, [available, config.enableDocumentCapture, plan]);
 
   if (serverConfig.status === 'loading') {
     return (

package/src/screens/KeepLinksSheet.tsx

@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+import { Linking, View } from 'react-native';
+import * as Clipboard from 'expo-clipboard';
+
+import { spacing } from '../config/theme';
+import { FloatingSheet } from '../components/glass/FloatingSheet';
+import { Icon } from '../components/Icon';
+import { MyazaAlert } from '../components/MyazaAlert';
+import { MyazaButton } from '../components/MyazaButton';
+import { MyazaText } from '../components/Typography';
+import { useTheme } from '../components/runtime';
+
+// Shown when the applicant taps Done while key people still owe a check.
+//
+// The invite links live on THIS success screen, and on mobile the screen dies
+// with the app: once closed, the applicant has no way back to the links unless
+// the org re-sends them. The session's own hosted web page is the way back —
+// the same rehydrated success screen, alive for as long as the invites are —
+// so the one moment to hand it over is the moment they leave.
+
+export function KeepLinksSheet({
+  open,
+  url,
+  onClose,
+  onDone,
+}: {
+  open: boolean;
+  url: string;
+  /** Dismiss the sheet only (they are staying on the success screen). */
+  onClose: () => void;
+  /** Close the sheet AND the flow (they are done here). */
+  onDone: () => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  const [copied, setCopied] = useState(false);
+
+  return (
+    <FloatingSheet visible={open} onClose={onClose}>
+      <View style={{ padding: spacing.md, paddingTop: spacing.xs, alignItems: 'center' }}>
+        <View
+          style={{
+            width: 52,
+            height: 52,
+            borderRadius: 26,
+            backgroundColor: colors.primary50,
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <Icon name="globe" size={26} color={colors.primary} />
+        </View>
+
+        <View style={{ height: spacing.md }} />
+        <MyazaText variant="heading3" style={{ textAlign: 'center' }}>
+          Keep a way back to these links
+        </MyazaText>
+        <View style={{ height: spacing.md }} />
+        <View style={{ width: '100%' }}>
+          <MyazaAlert
+            variant="warning"
+            title="This screen will not be shown again"
+            message="Your key people's links live on a web page made for you. Open it in your browser or copy the address somewhere safe, then check who has finished and share the links from there at any time."
+          />
+        </View>
+
+        <View style={{ height: spacing.lg }} />
+        <View style={{ width: '100%', gap: spacing.sm }}>
+          <MyazaButton
+            label="Open in my browser"
+            leadingIcon="globe"
+            onPress={() => void Linking.openURL(url).catch(() => undefined)}
+          />
+          <MyazaButton
+            label={copied ? 'Link copied' : 'Copy the page link'}
+            variant="outline"
+            leadingIcon={copied ? 'check' : 'copy'}
+            onPress={() => {
+              void Clipboard.setStringAsync(url)
+                .then(() => setCopied(true))
+                .catch(() => undefined);
+            }}
+          />
+          <MyazaButton label="I'm done here" variant="ghost" onPress={onDone} />
+        </View>
+      </View>
+    </FloatingSheet>
+  );
+}