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

package/src/screens/ContactChannelChoice.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import { Pressable, View } from 'react-native';
+
+import { radius, spacing } from '../config/theme';
+import { useTheme } from '../components/runtime';
+import { MyazaText } from '../components/Typography';
+import { Icon } from '../components/Icon';
+import { WhatsAppIcon } from '../components/WhatsAppIcon';
+import { CHANNEL_LABELS, type PhoneOtpChannel } from '../config/contact';
+
+// ---------------------------------------------------------------------------
+// How the user wants their one-time code delivered.
+//
+// The org decides which channels are ON OFFER; the person receiving the code
+// decides between them, because only they know whether they have WhatsApp
+// installed or whether SMS is landing for them today. With a single offered
+// channel there is no choice to make and this renders nothing.
+//
+// Card shape, icon and selected treatment mirror the web SDK's picker so the
+// step reads the same on every platform.
+// ---------------------------------------------------------------------------
+
+const HINTS: Record<PhoneOtpChannel, string> = {
+  sms: 'Text message',
+  whatsapp: 'Needs WhatsApp',
+};
+
+/** WhatsApp needs its own brand mark; SMS reads fine as a generic glyph. */
+function ChannelGlyph({
+  channel,
+  color,
+}: {
+  channel: PhoneOtpChannel;
+  color: string;
+}): React.ReactElement {
+  return channel === 'whatsapp' ? (
+    <WhatsAppIcon size={16} color={color} />
+  ) : (
+    <Icon name="message-square" size={16} color={color} />
+  );
+}
+
+export function ContactChannelChoice({
+  offered,
+  picked,
+  disabled,
+  onPick,
+}: {
+  offered: PhoneOtpChannel[];
+  picked: PhoneOtpChannel;
+  disabled?: boolean;
+  onPick: (channel: PhoneOtpChannel) => void;
+}): React.ReactElement | null {
+  const { colors } = useTheme();
+  if (offered.length < 2) return null;
+
+  return (
+    <View>
+      <View style={{ height: spacing.md }} />
+      <MyazaText variant="bodySmall" color={colors.textMuted}>
+        How should we send it?
+      </MyazaText>
+      <View style={{ height: spacing.xs }} />
+      <View style={{ flexDirection: 'row', gap: spacing.sm }}>
+        {offered.map((channel) => (
+          <ChannelTile
+            key={channel}
+            channel={channel}
+            selected={picked === channel}
+            disabled={disabled}
+            onPress={() => onPick(channel)}
+          />
+        ))}
+      </View>
+    </View>
+  );
+}
+
+function ChannelTile({
+  channel,
+  selected,
+  disabled,
+  onPress,
+}: {
+  channel: PhoneOtpChannel;
+  selected: boolean;
+  disabled?: boolean;
+  onPress: () => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+
+  return (
+    <Pressable
+      onPress={disabled ? undefined : onPress}
+      accessibilityRole="radio"
+      accessibilityState={{ checked: selected, disabled }}
+      accessibilityLabel={CHANNEL_LABELS[channel]}
+      style={{
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: spacing.sm,
+        paddingHorizontal: spacing.sm,
+        paddingVertical: spacing.sm + 2,
+        borderRadius: radius.md,
+        borderWidth: 1.5,
+        borderColor: selected ? colors.primary : colors.border,
+        backgroundColor: selected ? `${colors.primary}0D` : 'transparent',
+      }}
+    >
+      <View
+        style={{
+          width: 34,
+          height: 34,
+          borderRadius: radius.sm,
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: selected ? `${colors.primary}1A` : colors.backgroundSecondary,
+        }}
+      >
+        <ChannelGlyph channel={channel} color={selected ? colors.primary : colors.textMuted} />
+      </View>
+      <View style={{ flex: 1, minWidth: 0 }}>
+        <MyazaText variant="bodyMedium" style={{ fontWeight: "600" }}>
+          {CHANNEL_LABELS[channel]}
+        </MyazaText>
+        <MyazaText variant="bodySmall" color={colors.textMuted} numberOfLines={1}>
+          {HINTS[channel]}
+        </MyazaText>
+      </View>
+    </Pressable>
+  );
+}

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>
+  );
+}