@myazahq/kyc-sdk-react-native 2.0.2 → 2.2.0

package/src/screens/ContactCodeStep.tsx

@@ -0,0 +1,130 @@
+import React from 'react';
+import { Pressable, View } from 'react-native';
+
+import { spacing } from '../config/theme';
+import { useTheme } from '../components/runtime';
+import { MyazaText } from '../components/Typography';
+import { ContactCodeEntry } from '../components/ContactCodeEntry';
+import { ExpiryCountdown } from '../components/ExpiryCountdown';
+import { CHANNEL_LABELS, type PhoneOtpChannel } from '../config/contact';
+import type { OtpInputStyle } from '../types/workflow';
+
+// ---------------------------------------------------------------------------
+// The second half of a contact check: the code has been sent, now enter it.
+//
+// Split from ContactVerificationStep (200-line rule). Auto-submits on the last
+// digit — the user has already typed the whole code by then, and making them
+// press a button as well is a step for nothing.
+//
+// Layout mirrors the web SDK: the code field, then a single row carrying the
+// live expiry on the left and Resend on the right, then the switch-channel
+// escape hatch. A code that never arrives is usually a channel problem rather
+// than a typo, so resending down the same channel is rarely the fix.
+// ---------------------------------------------------------------------------
+
+export function ContactCodeStep({
+  codeLength,
+  inputStyle,
+  code,
+  busy,
+  error,
+  attemptsLeft,
+  expiresAt,
+  otherChannel,
+  onChange,
+  onCheck,
+  onResend,
+}: {
+  codeLength: number;
+  inputStyle: OtpInputStyle;
+  code: string;
+  busy: boolean;
+  error: string | null;
+  attemptsLeft?: number;
+  /** ISO expiry from the send response; null falls back to static copy. */
+  expiresAt: string | null;
+  /** The channel NOT in use, when the workflow offers a second one. */
+  otherChannel: PhoneOtpChannel | null;
+  onChange: (code: string) => void;
+  onCheck: (code: string) => void;
+  /** Resends; with a channel, switches to it first. */
+  onResend: (switchTo?: PhoneOtpChannel) => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  // No "enter the code we sent to …" line here: the sheet header carries it
+  // (see contactMeta), matching the web SDK. Two copies drifted apart.
+  return (
+    <View>
+      <ContactCodeEntry
+        code={code}
+        onChange={onChange}
+        codeLength={codeLength}
+        style={inputStyle}
+        disabled={busy}
+        onComplete={onCheck}
+      />
+
+      <View style={{ height: spacing.sm }} />
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}
+      >
+        {expiresAt ? (
+          <ExpiryCountdown expiresAt={expiresAt} />
+        ) : (
+          <MyazaText variant="bodySmall" color={colors.textMuted}>
+            The code expires in 5 minutes.
+          </MyazaText>
+        )}
+        <Pressable
+          onPress={() => onResend()}
+          disabled={busy}
+          accessibilityRole="button"
+          hitSlop={8}
+        >
+          <MyazaText
+            variant="bodySmall"
+            color={busy ? colors.textMuted : colors.primary}
+            style={{ fontWeight: '600' }}
+          >
+            Resend code
+          </MyazaText>
+        </Pressable>
+      </View>
+
+      {otherChannel ? (
+        <>
+          <View style={{ height: spacing.sm }} />
+          <Pressable
+            onPress={() => onResend(otherChannel)}
+            disabled={busy}
+            accessibilityRole="button"
+            hitSlop={8}
+          >
+            <MyazaText
+              variant="bodySmall"
+              color={colors.textMuted}
+              style={{ textAlign: 'center' }}
+            >
+              {`Didn't get it? Send by ${CHANNEL_LABELS[otherChannel]} instead`}
+            </MyazaText>
+          </Pressable>
+        </>
+      ) : null}
+
+      {error ? (
+        <MyazaText variant="bodySmall" color={colors.error} style={{ marginTop: spacing.sm }}>
+          {/* The remaining count is what stops someone burning the whole
+              budget guessing — without it there is no signal the code is
+              about to die. */}
+          {attemptsLeft !== undefined
+            ? `${error} ${attemptsLeft} ${attemptsLeft === 1 ? 'attempt' : 'attempts'} left.`
+            : error}
+        </MyazaText>
+      ) : null}
+    </View>
+  );
+}

package/src/screens/ContactDestinationField.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { spacing } from '../config/theme';
+import { useTheme } from '../components/runtime';
+import { MyazaText } from '../components/Typography';
+import { MyazaInput } from '../components/MyazaInput';
+import { PhoneNumberInput } from '../components/PhoneNumberInput';
+
+/**
+ * "Where should we send it": an email field, or the dial-code phone input that
+ * formats nationally and emits E.164. Mirrors the web SDK's component of the
+ * same name and Flutter's ContactDestinationField.
+ */
+export function ContactDestinationField({
+  isEmail,
+  email,
+  onEmailChange,
+  onPhoneChange,
+  defaultCountry,
+  error,
+  disabled,
+}: {
+  isEmail: boolean;
+  email: string;
+  onEmailChange: (value: string) => void;
+  onPhoneChange: (value: { e164: string; isValid: boolean }) => void;
+  defaultCountry?: string;
+  error: string | null;
+  disabled?: boolean;
+}): React.ReactElement {
+  if (isEmail) {
+    return (
+      <MyazaInput
+        label="Email address"
+        value={email}
+        onChangeText={onEmailChange}
+        placeholder="you@example.com"
+        keyboardType="email-address"
+        autoCapitalize="none"
+        error={error}
+        editable={!disabled}
+        autoFocus
+      />
+    );
+  }
+
+  return (
+    <View>
+      <MyazaText variant="label" style={{ marginBottom: spacing.xs }}>
+        Phone number
+      </MyazaText>
+      <PhoneNumberInput
+        defaultCountry={defaultCountry}
+        disabled={disabled}
+        onChange={onPhoneChange}
+      />
+      {error ? <ErrorLine text={error} /> : null}
+    </View>
+  );
+}
+
+function ErrorLine({ text }: { text: string }): React.ReactElement {
+  const { colors } = useTheme();
+  return (
+    <MyazaText variant="bodySmall" color={colors.error} style={{ marginTop: spacing.xs }}>
+      {text}
+    </MyazaText>
+  );
+}

package/src/screens/ContactFooterNote.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { spacing } from '../config/theme';
+import { useTheme } from '../components/runtime';
+import { MyazaText } from '../components/Typography';
+import { Icon } from '../components/Icon';
+
+/**
+ * The reassurance line under the contact step's actions, matching the web SDK.
+ *
+ * Small, but it answers the question the step provokes: an email step is asked
+ * "what will you do with my address", a phone step "will this cost me money".
+ */
+export function ContactFooterNote({ isEmail }: { isEmail: boolean }): React.ReactElement {
+  const { colors } = useTheme();
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: spacing.xs,
+      }}
+    >
+      <Icon name={isEmail ? 'mail' : 'smartphone'} size={12} color={colors.textMuted} />
+      <MyazaText variant="bodySmall" color={colors.textMuted}>
+        {isEmail
+          ? 'We only use this to verify your identity.'
+          : 'Standard message rates may apply.'}
+      </MyazaText>
+    </View>
+  );
+}

package/src/screens/ContactVerificationStep.tsx

@@ -0,0 +1,199 @@
+import React, { useCallback, useEffect, 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 { ContactVerifiedPanel } from './ContactVerifiedPanel';
+import { ContactCodeStep } from './ContactCodeStep';
+import { ContactChannelChoice } from './ContactChannelChoice';
+import { ContactFooterNote } from './ContactFooterNote';
+import {
+  contactCodeLength,
+  contactIsRequired,
+  isValidContactEmail,
+  offeredPhoneChannels,
+  type PhoneOtpChannel,
+} from '../config/contact';
+import { attemptsRemaining, describeCheckError, describeSendError } from '../services/contactErrors';
+
+// ---------------------------------------------------------------------------
+// Contact-verification OTP step — email or phone, one component, two mounts.
+//
+//   enter destination → send → code entry → verified → continue
+//
+// The proof token is single-use and rides the /verify submission. The server
+// enforces whether it was required; the `required: false` skip here is UX, and
+// a skipped optional check simply submits without the proof.
+// ---------------------------------------------------------------------------
+
+export function ContactVerificationStep({
+  channel,
+}: {
+  channel: 'email' | 'phone';
+}): React.ReactElement {
+  const config = useKycConfig();
+  const country = useEffectiveCountry();
+  const store = useKycStore();
+  const contact = useKyc((s) => s.contact);
+
+  const isEmail = channel === 'email';
+  const stepConfig = isEmail ? config.emailVerification : config.phoneVerification;
+  const required = contactIsRequired(stepConfig);
+  const codeLength = contactCodeLength(stepConfig);
+  const inputStyle = stepConfig?.inputStyle ?? 'segmented';
+  // The org decides which channels are on offer; the user picks between them.
+  const offeredChannels: PhoneOtpChannel[] = isEmail
+    ? []
+    : offeredPhoneChannels(config.phoneVerification?.channels);
+  const [via, setVia] = useState<PhoneOtpChannel>(offeredChannels[0] ?? 'sms');
+
+  const alreadyVerified = isEmail ? contact.emailToken != null : contact.phoneToken != null;
+
+  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 [challengeId, setChallengeId] = useState<string | null>(null);
+  const [expiresAt, setExpiresAt] = useState<string | null>(null);
+  const [code, setCode] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [attemptsLeft, setAttemptsLeft] = useState<number | undefined>(undefined);
+  const otherChannel = offeredChannels.find((c) => c !== via) ?? null;
+
+  const value = isEmail ? destination.trim() : phone.e164;
+  const canSend = isEmail ? isValidContactEmail(value) : phone.isValid;
+
+  const advance = useCallback(() => store.getState().nextStep(), [store]);
+
+  // 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
+  // destination once a code is actually out. Re-published when the user picks a
+  // different delivery channel so the header's "by WhatsApp" follows the choice.
+  useEffect(() => {
+    store.getState().setContactChallenge({
+      channel,
+      ...(isEmail ? {} : { via }),
+      ...(challengeId ? { destination: value } : {}),
+    });
+  }, [store, channel, isEmail, via, challengeId, value]);
+
+  /** `switchTo` re-sends over the other channel when the first one didn't land. */
+  const send = async (switchTo?: PhoneOtpChannel): Promise<void> => {
+    const sendVia = switchTo ?? via;
+    if (switchTo) setVia(switchTo);
+    setBusy(true);
+    setError(null);
+    setAttemptsLeft(undefined);
+    try {
+      const res = await store.getState().api.contactSend({
+        channel,
+        destination: value,
+        codeLength,
+        ...(stepConfig?.maxAttempts != null ? { maxAttempts: stepConfig.maxAttempts } : {}),
+        ...(!isEmail && country ? { country } : {}),
+        ...(isEmail ? {} : { via: sendVia }),
+      });
+      // Remember what was typed BEFORE the code lands: a user who backs out
+      // here and returns should not have to retype it.
+      store.getState().setContactDestination(channel, value);
+      setChallengeId(res.challengeId);
+      setExpiresAt(res.expiresAt ?? null);
+      setCode('');
+    } catch (err) {
+      setError(describeSendError(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const check = async (submitted: string): Promise<void> => {
+    if (!challengeId || submitted.length !== codeLength) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const res = await store.getState().api.contactCheck({ challengeId, code: submitted });
+      store.getState().setContactVerified(channel, value, res.token);
+      advance();
+    } catch (err) {
+      setError(describeCheckError(err));
+      setAttemptsLeft(attemptsRemaining(err));
+      setCode('');
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  // Returning to a step already passed — nothing left to do here.
+  if (alreadyVerified) {
+    return (
+      <ContactVerifiedPanel
+        isEmail={isEmail}
+        destination={isEmail ? contact.emailAddress : contact.phoneNumber}
+        onContinue={advance}
+      />
+    );
+  }
+
+  // One frame for both halves, like web: the panel swaps, the actions stay put.
+  return (
+    <View>
+      {challengeId ? (
+        <ContactCodeStep
+          codeLength={codeLength}
+          inputStyle={inputStyle}
+          code={code}
+          busy={busy}
+          error={error}
+          attemptsLeft={attemptsLeft}
+          expiresAt={expiresAt}
+          otherChannel={otherChannel}
+          onChange={setCode}
+          onCheck={(full) => void check(full)}
+          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}
+          />
+        </>
+      )}
+
+      <View style={{ height: spacing.md }} />
+      <MyazaButton
+        label={challengeId ? 'Verify code' : 'Send code'}
+        loading={busy}
+        disabled={challengeId ? code.length !== codeLength : !canSend}
+        onPress={() => (challengeId ? void check(code) : void send())}
+      />
+
+      {!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/ContactVerifiedPanel.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { spacing } from '../config/theme';
+import { MyazaButton } from '../components/MyazaButton';
+import { VerifiedNotice } from '../components/VerifiedNotice';
+
+/**
+ * Shown when the user returns to a contact step they already passed: the
+ * confirmation card plus Continue. Mirrors the web SDK's verified branch and
+ * Flutter's ContactVerifiedView.
+ */
+export function ContactVerifiedPanel({
+  isEmail,
+  destination,
+  onContinue,
+}: {
+  isEmail: boolean;
+  /** The verified address/number, when known — shown verbatim, like web. */
+  destination?: string;
+  onContinue: () => void;
+}): React.ReactElement {
+  return (
+    <View>
+      <VerifiedNotice
+        label={
+          destination
+            ? `${destination} is verified.`
+            : `Your ${isEmail ? 'email' : 'phone number'} is verified.`
+        }
+      />
+      <View style={{ height: spacing.md }} />
+      <MyazaButton label="Continue" onPress={onContinue} />
+    </View>
+  );
+}

package/src/screens/CountrySelectStep.tsx

@@ -0,0 +1,210 @@
+import React, { useMemo, useState } from 'react';
+import { Pressable, ScrollView, 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 { countrySelectOptions } from '../store/derive';
+
+// ---------------------------------------------------------------------------
+// Country selection for multi-region flows (`countries` has more than one).
+//
+// The pick sets the session's EFFECTIVE country, which every later step reads —
+// the ID types on offer, the validators, the endpoints and chip capability all
+// follow from it.
+//
+// Above a handful of countries a flat list stops being a chooser and becomes a
+// scroll, so past SEARCH_THRESHOLD this switches to a searchable, region-grouped
+// picker. Global Documents can offer ~200 countries.
+// ---------------------------------------------------------------------------
+
+/** Above this many offered countries the flat list becomes a searchable,
+ * region-grouped picker. Exported because the sheet has to know too: the
+ * picker pins its search box and therefore needs a non-scrolling body. */
+export const COUNTRY_SEARCH_THRESHOLD = 5;
+
+export const countrySelectMeta = {
+  title: 'Where was your ID issued?',
+  description: 'Choose the country that issued your identity document.',
+};
+
+export function CountrySelectStep(): React.ReactElement {
+  const config = useKycConfig();
+  const store = useKycStore();
+  // Only an actual PICK counts as selected. `useEffectiveCountry` falls back to
+  // the workflow's primary country, which on this screen would render a
+  // highlighted row for a choice the user has not made yet.
+  const selected = useKyc((s) => s.selectedCountry);
+
+  // Multi-region flows carry `countries`; the KYB applicant leg does not, so
+  // it offers the org's GRANTED countries instead — see countrySelectOptions.
+  const serverConfig = useKyc((s) => s.serverConfig);
+  const options = useMemo(
+    () => countrySelectOptions({ config, serverConfig }),
+    [config, serverConfig],
+  );
+
+  const pick = (country: string): void => {
+    store.getState().setCountry(country);
+    store.getState().nextStep();
+  };
+
+  if (options.length > COUNTRY_SEARCH_THRESHOLD) {
+    return <CountryRegionPicker countries={options} selected={selected} onPick={pick} />;
+  }
+
+  return (
+    <View>
+      {options.map((country) => (
+        <CountryRow
+          key={country}
+          code={country}
+          name={regionCountryName(country)}
+          selected={country === selected}
+          onPress={() => pick(country)}
+        />
+      ))}
+    </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>
+  );
+}