@velion-la/onboarding-sdk-react-native 1.0.0-beta.2

package/src/steps/PhoneContactStep.tsx

@@ -0,0 +1,160 @@
+/**
+ * PHONE_CONTACT — collect E.164 phone without OTP. Mirrors `PhoneContactModule.ts`.
+ * POST /sessions/:id/contact/phone { phone }
+ */
+
+import { useCallback, useState } from 'react';
+import { View } from 'react-native';
+import {
+  SdkErrorCode,
+  type PhoneContactPayload,
+  type SdkError,
+} from '../types';
+import { Banner } from '../ui/primitives/Banner';
+import { Button } from '../ui/primitives/Button';
+import { Input } from '../ui/primitives/Input';
+import { LoadingOverlay } from '../ui/overlays/LoadingOverlay';
+import { RetryDialog } from '../ui/overlays/RetryDialog';
+import { StepShell } from '../ui/StepShell';
+import { StepIcon } from '../ui/icons/StepIcon';
+import { compose, required, useInlineValidation } from '../ui/forms';
+import { getStrings } from '../i18n';
+import type { ApiCaller } from '../transport/api';
+import type { StepDeps, StepModule } from './types';
+import { isE164Phone, toSubmissionError } from './_shared';
+
+export class PhoneContactStep implements StepModule {
+  private resolveStep!: () => void;
+  private rejectStep!: (err: SdkError) => void;
+  private destroyed = false;
+
+  constructor(private readonly deps: StepDeps) {}
+
+  run(): Promise<void> {
+    return new Promise((resolve, reject) => {
+      this.resolveStep = resolve;
+      this.rejectStep = reject;
+      this.deps.ui.setNode(
+        <PhoneContactView
+          api={this.deps.api}
+          sessionId={this.deps.sessionId}
+          locale={this.deps.locale}
+          onComplete={() => {
+            if (this.destroyed) return;
+            this.deps.ui.setNode(null);
+            this.resolveStep();
+          }}
+          onCancel={(err) => {
+            if (this.destroyed) return;
+            this.deps.ui.setNode(null);
+            this.rejectStep(err);
+          }}
+        />,
+      );
+    });
+  }
+
+  destroy(): void {
+    this.destroyed = true;
+    this.deps.ui.setNode(null);
+  }
+}
+
+interface ViewProps {
+  api: ApiCaller;
+  sessionId: string;
+  locale: string;
+  onComplete: () => void;
+  onCancel: (err: SdkError) => void;
+}
+
+function PhoneContactView({
+  api,
+  sessionId,
+  locale,
+  onComplete,
+  onCancel,
+}: ViewProps) {
+  const t = getStrings(locale);
+  const [phone, setPhone] = useState('');
+  const [bannerError, setBannerError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+  const [retry, setRetry] = useState<{ message: string } | null>(null);
+
+  const validation = useInlineValidation<'phone'>(
+    [
+      {
+        name: 'phone',
+        validate: compose(
+          required(t.phone_contact.required),
+          (value) => (isE164Phone(value) ? null : t.phone_contact.invalid),
+        ),
+      },
+    ],
+    (_n, v) => setPhone(v),
+  );
+
+  const handleSubmit = useCallback(async () => {
+    setBannerError(null);
+    if (!validation.validateAll({ phone })) return;
+    const payload: PhoneContactPayload = { phone: phone.trim() };
+    setSubmitting(true);
+    try {
+      await api.post(`/sessions/${sessionId}/contact/phone`, payload);
+      setSubmitting(false);
+      onComplete();
+    } catch (err) {
+      setSubmitting(false);
+      const sdkErr = toSubmissionError(err, t);
+      setBannerError(sdkErr.message);
+      setRetry({ message: sdkErr.message });
+    }
+  }, [api, phone, onComplete, sessionId, t, validation]);
+
+  if (retry) {
+    return (
+      <RetryDialog
+        title={t.common.submissionTitle}
+        message={retry.message || t.common.submissionFallback}
+        retryLabel={t.common.retry}
+        cancelLabel={t.common.cancel}
+        onRetry={() => setRetry(null)}
+        onCancel={() => {
+          setRetry(null);
+          onCancel({ code: SdkErrorCode.API_ERROR, message: retry.message });
+        }}
+      />
+    );
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      <StepShell
+        title={t.phone_contact.title}
+        subtitle={t.phone_contact.hint}
+        iconNode={<StepIcon name="phone-iphone" />}
+      >
+        <Input
+          label={t.phone_contact.label}
+          required
+          autoCapitalize="none"
+          autoCorrect={false}
+          autoComplete="tel"
+          textContentType="telephoneNumber"
+          keyboardType="phone-pad"
+          placeholder="+5491112345678"
+          value={phone}
+          {...validation.bind('phone', phone)}
+        />
+        {bannerError ? <Banner message={bannerError} /> : null}
+        <Button
+          label={t.common.continue}
+          onPress={handleSubmit}
+          loading={submitting}
+          disabled={submitting}
+        />
+      </StepShell>
+      {submitting ? <LoadingOverlay message={t.common.submitting} /> : null}
+    </View>
+  );
+}

package/src/steps/PhoneOtpStep.tsx

@@ -0,0 +1,249 @@
+/**
+ * PHONE_OTP — send + verify 6-digit OTP via SMS.
+ * POST /sessions/:id/phone/send-otp { phone } (E.164)
+ * POST /sessions/:id/phone/verify-otp { otp }
+ *
+ * Mirrors `PhoneOtpModule.ts`. Same single-screen flow as `EmailOtpStep` but
+ * with phone-pad keyboard and E.164 validation.
+ */
+
+import { useCallback, useState } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { SdkErrorCode, type SdkError } from '../types';
+import { Banner } from '../ui/primitives/Banner';
+import { Button } from '../ui/primitives/Button';
+import { Input } from '../ui/primitives/Input';
+import { LoadingOverlay } from '../ui/overlays/LoadingOverlay';
+import { RetryDialog } from '../ui/overlays/RetryDialog';
+import { StepShell } from '../ui/StepShell';
+import { StepIcon } from '../ui/icons/StepIcon';
+import { compose, required, useInlineValidation } from '../ui/forms';
+import { getStrings } from '../i18n';
+import { useTheme } from '../ui/theme';
+import type { ApiCaller } from '../transport/api';
+import type { StepDeps, StepModule } from './types';
+import { isE164Phone, isOtpCode, toSubmissionError } from './_shared';
+
+export class PhoneOtpStep implements StepModule {
+  private resolveStep!: () => void;
+  private rejectStep!: (err: SdkError) => void;
+  private destroyed = false;
+
+  constructor(private readonly deps: StepDeps) {}
+
+  run(): Promise<void> {
+    return new Promise((resolve, reject) => {
+      this.resolveStep = resolve;
+      this.rejectStep = reject;
+      this.deps.ui.setNode(
+        <PhoneOtpView
+          api={this.deps.api}
+          sessionId={this.deps.sessionId}
+          locale={this.deps.locale}
+          onComplete={() => {
+            if (this.destroyed) return;
+            this.deps.ui.setNode(null);
+            this.resolveStep();
+          }}
+          onCancel={(err) => {
+            if (this.destroyed) return;
+            this.deps.ui.setNode(null);
+            this.rejectStep(err);
+          }}
+        />,
+      );
+    });
+  }
+
+  destroy(): void {
+    this.destroyed = true;
+    this.deps.ui.setNode(null);
+  }
+}
+
+interface ViewProps {
+  api: ApiCaller;
+  sessionId: string;
+  locale: string;
+  onComplete: () => void;
+  onCancel: (err: SdkError) => void;
+}
+
+function PhoneOtpView({
+  api,
+  sessionId,
+  locale,
+  onComplete,
+  onCancel,
+}: ViewProps) {
+  const t = getStrings(locale);
+  const theme = useTheme();
+  const [phone, setPhone] = useState('');
+  const [otp, setOtp] = useState('');
+  const [stage, setStage] = useState<'request' | 'verify'>('request');
+  const [bannerError, setBannerError] = useState<string | null>(null);
+  const [busy, setBusy] = useState<null | 'sending' | 'verifying'>(null);
+  const [retry, setRetry] = useState<{ message: string } | null>(null);
+
+  const phoneValidation = useInlineValidation<'phone'>(
+    [
+      {
+        name: 'phone',
+        validate: compose(
+          required(t.phone_otp.phoneRequired),
+          (v) => (isE164Phone(v) ? null : t.phone_contact.invalid),
+        ),
+      },
+    ],
+    (_n, v) => setPhone(v),
+  );
+
+  const otpValidation = useInlineValidation<'otp'>(
+    [
+      {
+        name: 'otp',
+        validate: compose(
+          required(t.phone_otp.otpRequired),
+          (v) => (isOtpCode(v) ? null : t.phone_otp.otpFormat),
+        ),
+      },
+    ],
+    (_n, v) => setOtp(v),
+  );
+
+  const sendOtp = useCallback(async () => {
+    setBannerError(null);
+    if (!phoneValidation.validateAll({ phone })) return;
+    setBusy('sending');
+    try {
+      await api.post(`/sessions/${sessionId}/phone/send-otp`, {
+        phone: phone.trim(),
+      });
+      setBusy(null);
+      setStage('verify');
+    } catch (err) {
+      setBusy(null);
+      const sdkErr = toSubmissionError(err, t);
+      setBannerError(sdkErr.message);
+      setRetry({ message: sdkErr.message });
+    }
+  }, [api, phone, phoneValidation, sessionId, t]);
+
+  const verifyOtp = useCallback(async () => {
+    setBannerError(null);
+    if (!otpValidation.validateAll({ otp })) return;
+    setBusy('verifying');
+    try {
+      await api.post(`/sessions/${sessionId}/phone/verify-otp`, {
+        otp: otp.trim(),
+      });
+      setBusy(null);
+      onComplete();
+    } catch (err) {
+      setBusy(null);
+      const sdkErr = toSubmissionError(err, t);
+      setBannerError(sdkErr.message);
+    }
+  }, [api, onComplete, otp, otpValidation, sessionId, t]);
+
+  if (retry) {
+    return (
+      <RetryDialog
+        title={t.common.submissionTitle}
+        message={retry.message || t.common.submissionFallback}
+        retryLabel={t.common.retry}
+        cancelLabel={t.common.cancel}
+        onRetry={() => setRetry(null)}
+        onCancel={() => {
+          setRetry(null);
+          onCancel({ code: SdkErrorCode.API_ERROR, message: retry.message });
+        }}
+      />
+    );
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      <StepShell
+        title={t.phone_otp.title}
+        subtitle={t.phone_otp.phoneHint}
+        iconNode={<StepIcon name="phone-iphone" />}
+      >
+        <Input
+          label={t.phone_otp.phoneLabel}
+          required
+          autoCapitalize="none"
+          autoCorrect={false}
+          autoComplete="tel"
+          textContentType="telephoneNumber"
+          keyboardType="phone-pad"
+          placeholder="+5491112345678"
+          editable={stage === 'request'}
+          value={phone}
+          {...phoneValidation.bind('phone', phone)}
+        />
+        {stage === 'request' ? (
+          <Button
+            label={t.phone_otp.sendCode}
+            onPress={sendOtp}
+            loading={busy === 'sending'}
+            disabled={busy !== null}
+          />
+        ) : (
+          <>
+            <Input
+              label={t.phone_otp.otpLabel}
+              required
+              autoCapitalize="none"
+              autoCorrect={false}
+              keyboardType="number-pad"
+              textContentType="oneTimeCode"
+              maxLength={6}
+              value={otp}
+              {...otpValidation.bind('otp', otp)}
+            />
+            {bannerError ? <Banner message={bannerError} /> : null}
+            <Button
+              label={t.phone_otp.verify}
+              onPress={verifyOtp}
+              loading={busy === 'verifying'}
+              disabled={busy !== null}
+            />
+            <Pressable
+              accessibilityRole="link"
+              onPress={() => {
+                setOtp('');
+                setStage('request');
+              }}
+              style={styles.resend}
+            >
+              <Text style={[styles.resendText, { color: theme.primaryColor }]}>
+                {t.phone_otp.resend}
+              </Text>
+            </Pressable>
+          </>
+        )}
+        {stage === 'request' && bannerError ? (
+          <Banner message={bannerError} />
+        ) : null}
+      </StepShell>
+      {busy ? (
+        <LoadingOverlay
+          message={busy === 'sending' ? t.phone_otp.sendingCode : t.phone_otp.verifying}
+        />
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  resend: {
+    paddingVertical: 8,
+    alignItems: 'center',
+  },
+  resendText: {
+    fontSize: 14,
+    fontWeight: '500',
+    textDecorationLine: 'underline',
+  },
+});

package/src/steps/SwornDeclarationStep.tsx

@@ -0,0 +1,220 @@
+/**
+ * SWORN_DECLARATION — POST /sessions/:id/sworn-declaration { is_pep, is_ssoo, is_fatca, is_ocde }.
+ *
+ * Mirrors `SwornDeclarationModule.ts`:
+ *   - `ask_pep`, `ask_obligated_subject` default to TRUE if undefined.
+ *   - `ask_fatca`, `ask_ocde` default to FALSE (only shown when explicitly true).
+ *   - "Ninguna de las anteriores" toggle: ticking it clears the others; ticking
+ *     any other auto-unticks "none".
+ */
+
+import { useCallback, useMemo, useState } from 'react';
+import { View } from 'react-native';
+import {
+  SdkErrorCode,
+  type SdkError,
+  type SwornDeclarationPayload,
+  type SwornDeclarationStepConfig,
+} from '../types';
+import { Banner } from '../ui/primitives/Banner';
+import { Button } from '../ui/primitives/Button';
+import { Checkbox } from '../ui/primitives/Checkbox';
+import { LoadingOverlay } from '../ui/overlays/LoadingOverlay';
+import { RetryDialog } from '../ui/overlays/RetryDialog';
+import { StepShell } from '../ui/StepShell';
+import { getStrings } from '../i18n';
+import type { ApiCaller } from '../transport/api';
+import type { StepDeps, StepModule } from './types';
+import { toSubmissionError } from './_shared';
+
+export class SwornDeclarationStep implements StepModule {
+  private resolveStep!: () => void;
+  private rejectStep!: (err: SdkError) => void;
+  private destroyed = false;
+
+  constructor(private readonly deps: StepDeps) {}
+
+  run(): Promise<void> {
+    return new Promise((resolve, reject) => {
+      this.resolveStep = resolve;
+      this.rejectStep = reject;
+      this.deps.ui.setNode(
+        <SwornDeclarationView
+          api={this.deps.api}
+          sessionId={this.deps.sessionId}
+          locale={this.deps.locale}
+          stepConfig={this.deps.stepConfig as SwornDeclarationStepConfig | undefined}
+          onComplete={() => {
+            if (this.destroyed) return;
+            this.deps.ui.setNode(null);
+            this.resolveStep();
+          }}
+          onCancel={(err) => {
+            if (this.destroyed) return;
+            this.deps.ui.setNode(null);
+            this.rejectStep(err);
+          }}
+        />,
+      );
+    });
+  }
+
+  destroy(): void {
+    this.destroyed = true;
+    this.deps.ui.setNode(null);
+  }
+}
+
+type DeclarationKey = 'is_pep' | 'is_ssoo' | 'is_fatca' | 'is_ocde';
+
+interface ViewProps {
+  api: ApiCaller;
+  sessionId: string;
+  locale: string;
+  stepConfig: SwornDeclarationStepConfig | undefined;
+  onComplete: () => void;
+  onCancel: (err: SdkError) => void;
+}
+
+function SwornDeclarationView({
+  api,
+  sessionId,
+  locale,
+  stepConfig,
+  onComplete,
+  onCancel,
+}: ViewProps) {
+  const t = getStrings(locale);
+
+  const visibleKeys = useMemo<DeclarationKey[]>(() => {
+    const out: DeclarationKey[] = [];
+    if (stepConfig?.ask_pep !== false) out.push('is_pep');
+    if (stepConfig?.ask_obligated_subject !== false) out.push('is_ssoo');
+    if (stepConfig?.ask_fatca === true) out.push('is_fatca');
+    if (stepConfig?.ask_ocde === true) out.push('is_ocde');
+    return out;
+  }, [stepConfig]);
+
+  const [values, setValues] = useState<Record<DeclarationKey, boolean>>({
+    is_pep: false,
+    is_ssoo: false,
+    is_fatca: false,
+    is_ocde: false,
+  });
+  const [bannerError, setBannerError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+  const [retry, setRetry] = useState<{ message: string } | null>(null);
+
+  const noneChecked = visibleKeys.every((k) => !values[k]);
+
+  const toggleKey = useCallback((key: DeclarationKey) => {
+    setValues((prev) => ({ ...prev, [key]: !prev[key] }));
+  }, []);
+
+  const toggleNone = useCallback(() => {
+    if (noneChecked) {
+      // Already "none"; tapping does nothing — same UX as web (read-only mirror).
+      return;
+    }
+    // Set "none" → clear all visibles.
+    setValues({ is_pep: false, is_ssoo: false, is_fatca: false, is_ocde: false });
+  }, [noneChecked]);
+
+  const handleSubmit = useCallback(async () => {
+    setBannerError(null);
+    const payload: SwornDeclarationPayload = {
+      is_pep: values.is_pep,
+      is_ssoo: values.is_ssoo,
+      is_fatca: values.is_fatca,
+      is_ocde: values.is_ocde,
+    };
+    setSubmitting(true);
+    try {
+      await api.post(`/sessions/${sessionId}/sworn-declaration`, payload);
+      setSubmitting(false);
+      onComplete();
+    } catch (err) {
+      setSubmitting(false);
+      const sdkErr = toSubmissionError(err, t);
+      setBannerError(sdkErr.message);
+      setRetry({ message: sdkErr.message });
+    }
+  }, [api, onComplete, sessionId, t, values]);
+
+  if (retry) {
+    return (
+      <RetryDialog
+        title={t.common.submissionTitle}
+        message={retry.message || t.common.submissionFallback}
+        retryLabel={t.common.retry}
+        cancelLabel={t.common.cancel}
+        onRetry={() => setRetry(null)}
+        onCancel={() => {
+          setRetry(null);
+          onCancel({ code: SdkErrorCode.API_ERROR, message: retry.message });
+        }}
+      />
+    );
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      <StepShell
+        title={t.sworn_declaration.title}
+        subtitle={t.sworn_declaration.subtitle}
+      >
+        {visibleKeys.includes('is_pep') ? (
+          <Checkbox
+            variant="card"
+            checked={values.is_pep}
+            onChange={() => toggleKey('is_pep')}
+            title={t.sworn_declaration.pep}
+            description={t.sworn_declaration.pepDescription}
+          />
+        ) : null}
+        {visibleKeys.includes('is_ssoo') ? (
+          <Checkbox
+            variant="card"
+            checked={values.is_ssoo}
+            onChange={() => toggleKey('is_ssoo')}
+            title={t.sworn_declaration.ssoo}
+            description={t.sworn_declaration.ssooDescription}
+          />
+        ) : null}
+        {visibleKeys.includes('is_fatca') ? (
+          <Checkbox
+            variant="card"
+            checked={values.is_fatca}
+            onChange={() => toggleKey('is_fatca')}
+            title={t.sworn_declaration.fatca}
+            description={t.sworn_declaration.fatcaDescription}
+          />
+        ) : null}
+        {visibleKeys.includes('is_ocde') ? (
+          <Checkbox
+            variant="card"
+            checked={values.is_ocde}
+            onChange={() => toggleKey('is_ocde')}
+            title={t.sworn_declaration.ocde}
+            description={t.sworn_declaration.ocdeDescription}
+          />
+        ) : null}
+        <Checkbox
+          variant="card"
+          checked={noneChecked}
+          onChange={toggleNone}
+          title={t.sworn_declaration.none}
+          description={t.sworn_declaration.noneDescription}
+        />
+        {bannerError ? <Banner message={bannerError} /> : null}
+        <Button
+          label={t.common.continue}
+          onPress={handleSubmit}
+          loading={submitting}
+          disabled={submitting}
+        />
+      </StepShell>
+      {submitting ? <LoadingOverlay message={t.common.submitting} /> : null}
+    </View>
+  );
+}