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

package/src/steps/LegalBasicInfoStep.tsx

@@ -0,0 +1,205 @@
+/**
+ * LEGAL_BASIC_INFO — POST /sessions/:id/basic-info/legal { legal_name, legal_form, identification_type, identification_id }.
+ *
+ * No country combobox here — `identification_type` is a free-text field
+ * (CUIT / NIT / RFC are entered manually).
+ */
+
+import { useCallback, useState } from 'react';
+import { View } from 'react-native';
+import {
+  SdkErrorCode,
+  type LegalBasicInfoPayload,
+  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 { required, useInlineValidation } from '../ui/forms';
+import { getStrings } from '../i18n';
+import type { ApiCaller } from '../transport/api';
+import type { StepDeps, StepModule } from './types';
+import { toSubmissionError } from './_shared';
+
+export class LegalBasicInfoStep 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(
+        <LegalBasicInfoView
+          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 FormState {
+  legal_name: string;
+  legal_form: string;
+  identification_type: string;
+  identification_id: string;
+}
+
+interface ViewProps {
+  api: ApiCaller;
+  sessionId: string;
+  locale: string;
+  onComplete: () => void;
+  onCancel: (err: SdkError) => void;
+}
+
+function LegalBasicInfoView({
+  api,
+  sessionId,
+  locale,
+  onComplete,
+  onCancel,
+}: ViewProps) {
+  const t = getStrings(locale);
+  const [form, setForm] = useState<FormState>({
+    legal_name: '',
+    legal_form: '',
+    identification_type: '',
+    identification_id: '',
+  });
+  const [bannerError, setBannerError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+  const [retry, setRetry] = useState<{ message: string } | null>(null);
+
+  const setField = useCallback(
+    <K extends keyof FormState>(name: K, value: FormState[K]) => {
+      setForm((f) => ({ ...f, [name]: value }));
+    },
+    [],
+  );
+
+  const validation = useInlineValidation<keyof FormState>(
+    [
+      { name: 'legal_name', validate: required(t.legal_basic_info.requiredLegalName) },
+      { name: 'legal_form', validate: required(t.legal_basic_info.requiredLegalForm) },
+      { name: 'identification_type', validate: required(t.legal_basic_info.requiredIdType) },
+      { name: 'identification_id', validate: required(t.legal_basic_info.requiredIdNumber) },
+    ],
+    (name, value) => setField(name, value),
+  );
+
+  const handleSubmit = useCallback(async () => {
+    setBannerError(null);
+    if (!validation.validateAll(form)) return;
+    const payload: LegalBasicInfoPayload = {
+      legal_name: form.legal_name.trim(),
+      legal_form: form.legal_form.trim(),
+      identification_type: form.identification_type.trim(),
+      identification_id: form.identification_id.trim(),
+    };
+    setSubmitting(true);
+    try {
+      await api.post(`/sessions/${sessionId}/basic-info/legal`, payload);
+      setSubmitting(false);
+      onComplete();
+    } catch (err) {
+      setSubmitting(false);
+      const sdkErr = toSubmissionError(err, t);
+      setBannerError(sdkErr.message);
+      setRetry({ message: sdkErr.message });
+    }
+  }, [api, form, 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.legal_basic_info.title}
+        subtitle={t.legal_basic_info.subtitle}
+        iconNode={<StepIcon name="business" />}
+      >
+        <Input
+          label={t.legal_basic_info.legalName}
+          required
+          autoCapitalize="words"
+          autoCorrect={false}
+          value={form.legal_name}
+          {...validation.bind('legal_name', form.legal_name)}
+        />
+        <Input
+          label={t.legal_basic_info.legalForm}
+          required
+          autoCapitalize="characters"
+          autoCorrect={false}
+          placeholder="SA, SRL, LTDA"
+          value={form.legal_form}
+          {...validation.bind('legal_form', form.legal_form)}
+        />
+        <Input
+          label={t.legal_basic_info.idType}
+          required
+          autoCapitalize="characters"
+          autoCorrect={false}
+          placeholder={t.legal_basic_info.idTypePlaceholder}
+          value={form.identification_type}
+          {...validation.bind('identification_type', form.identification_type)}
+        />
+        <Input
+          label={t.legal_basic_info.idNumber}
+          required
+          autoCapitalize="characters"
+          autoCorrect={false}
+          value={form.identification_id}
+          {...validation.bind('identification_id', form.identification_id)}
+        />
+        {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/LegalExtendedInfoStep.tsx

@@ -0,0 +1,171 @@
+/**
+ * LEGAL_EXTENDED_INFO — POST /sessions/:id/extended-info/legal { incorporation_date, incorporation_country }.
+ *
+ * Mirrors `LegalExtendedInfoModule.ts`. Both fields are required.
+ * `incorporation_country` is uppercased to ISO alpha-2 by `CountrySelect`.
+ */
+
+import { useCallback, useState } from 'react';
+import { View } from 'react-native';
+import {
+  SdkErrorCode,
+  type LegalExtendedInfoPayload,
+  type SdkError,
+} from '../types';
+import { Banner } from '../ui/primitives/Banner';
+import { Button } from '../ui/primitives/Button';
+import { CountrySelect } from '../ui/primitives/CountrySelect';
+import { DatePicker } from '../ui/primitives/DatePicker';
+import { LoadingOverlay } from '../ui/overlays/LoadingOverlay';
+import { RetryDialog } from '../ui/overlays/RetryDialog';
+import { StepShell } from '../ui/StepShell';
+import { StepIcon } from '../ui/icons/StepIcon';
+import { getStrings } from '../i18n';
+import type { ApiCaller } from '../transport/api';
+import type { StepDeps, StepModule } from './types';
+import { toSubmissionError } from './_shared';
+
+export class LegalExtendedInfoStep 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(
+        <LegalExtendedInfoView
+          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 LegalExtendedInfoView({
+  api,
+  sessionId,
+  locale,
+  onComplete,
+  onCancel,
+}: ViewProps) {
+  const t = getStrings(locale);
+  const [date, setDate] = useState<string | null>(null);
+  const [country, setCountry] = useState<string | null>(null);
+  const [errors, setErrors] = useState<{ date?: string | undefined; country?: string | undefined }>({});
+  const [bannerError, setBannerError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+  const [retry, setRetry] = useState<{ message: string } | null>(null);
+
+  const handleSubmit = useCallback(async () => {
+    setBannerError(null);
+    const next: { date?: string | undefined; country?: string | undefined } = {};
+    if (!date) next.date = t.legal_extended_info.requiredDate;
+    if (!country) next.country = t.legal_extended_info.requiredCountry;
+    setErrors(next);
+    if (Object.keys(next).length > 0) return;
+
+    const payload: LegalExtendedInfoPayload = {
+      incorporation_date: date as string,
+      incorporation_country: (country as string).toUpperCase(),
+    };
+    setSubmitting(true);
+    try {
+      await api.post(`/sessions/${sessionId}/extended-info/legal`, payload);
+      setSubmitting(false);
+      onComplete();
+    } catch (err) {
+      setSubmitting(false);
+      const sdkErr = toSubmissionError(err, t);
+      setBannerError(sdkErr.message);
+      setRetry({ message: sdkErr.message });
+    }
+  }, [api, country, date, onComplete, 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.legal_extended_info.title}
+        subtitle={t.legal_extended_info.subtitle}
+        iconNode={<StepIcon name="business-center" />}
+      >
+        <DatePicker
+          label={t.legal_extended_info.incorporationDate}
+          required
+          value={date}
+          onChange={(v) => {
+            setDate(v);
+            setErrors((e) => ({ ...e, date: undefined }));
+          }}
+          errorMessage={errors.date ?? null}
+          monthLabels={t.months}
+          maxYear={new Date().getFullYear()}
+          minYear={1700}
+        />
+        <CountrySelect
+          label={t.legal_extended_info.incorporationCountry}
+          required
+          value={country}
+          onChange={(v) => {
+            setCountry(v);
+            setErrors((e) => ({ ...e, country: undefined }));
+          }}
+          locale={locale}
+          errorMessage={errors.country ?? null}
+        />
+        {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>
+  );
+}