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

package/src/ui/primitives/CountrySelect.tsx

@@ -0,0 +1,356 @@
+/**
+ * CountrySelect — combobox-style picker for ISO 3166-1 alpha-2 codes.
+ *
+ * Renders a labelled trigger that opens a modal with a search field and a
+ * filtered FlatList. Used by every country-aware step (HUMAN_EXTENDED_INFO,
+ * LEGAL_EXTENDED_INFO, ADDRESS_INFO).
+ *
+ * Selection semantics:
+ *   - The selected option is identified by its 2-letter code; the label shows
+ *     the localized country name (resolved by `iso3166Countries`).
+ *   - Search matches against name OR code, case-insensitive.
+ *   - When `allowedCodes` is provided, the master list is pre-filtered.
+ */
+
+import { useCallback, useMemo, useState } from 'react';
+import {
+  FlatList,
+  Modal,
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { useTheme, withAlpha } from '../theme';
+import {
+  filterIso3166Countries,
+  listIso3166CountriesForUi,
+  type Iso3166CountryOption,
+} from '../../utils/iso3166Countries';
+
+export interface CountrySelectProps {
+  label?: string;
+  /** ISO alpha-2 code. */
+  value: string | null;
+  onChange: (code: string) => void;
+  locale?: string | undefined;
+  /** Optional ISO alpha-2 allowlist (e.g. from `AddressInfoStepConfig.country_allow`). */
+  allowedCodes?: ReadonlyArray<string> | undefined;
+  placeholder?: string | undefined;
+  searchPlaceholder?: string | undefined;
+  errorMessage?: string | null | undefined;
+  required?: boolean | undefined;
+  disabled?: boolean | undefined;
+  containerStyle?: StyleProp<ViewStyle> | undefined;
+}
+
+export function CountrySelect({
+  label,
+  value,
+  onChange,
+  locale = 'es',
+  allowedCodes,
+  placeholder,
+  searchPlaceholder,
+  errorMessage,
+  required,
+  disabled = false,
+  containerStyle,
+}: CountrySelectProps) {
+  const theme = useTheme();
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+
+  const baseCountries = useMemo(() => {
+    const all = listIso3166CountriesForUi(locale);
+    if (!allowedCodes || allowedCodes.length === 0) return all;
+    const allow = new Set(allowedCodes.map((c) => c.toUpperCase()));
+    return all.filter((c) => allow.has(c.code));
+  }, [locale, allowedCodes]);
+
+  const visible = useMemo(
+    () => filterIso3166Countries(baseCountries, query),
+    [baseCountries, query],
+  );
+
+  const selected = useMemo(
+    () => baseCountries.find((c) => c.code === value) ?? null,
+    [baseCountries, value],
+  );
+
+  const hasError = Boolean(errorMessage && errorMessage.length > 0);
+
+  const close = useCallback(() => {
+    setOpen(false);
+    setQuery('');
+  }, []);
+
+  const select = useCallback(
+    (item: Iso3166CountryOption) => {
+      onChange(item.code);
+      close();
+    },
+    [close, onChange],
+  );
+
+  return (
+    <View style={[styles.wrap, containerStyle]}>
+      {label ? (
+        <Text style={[styles.label, { color: theme.textColor }]}>
+          {label}
+          {required ? (
+            <Text style={[styles.required, { color: theme.textSecondaryColor }]}>
+              {' '}*
+            </Text>
+          ) : null}
+        </Text>
+      ) : null}
+      <Pressable
+        accessibilityRole="combobox"
+        accessibilityState={{ disabled, expanded: open }}
+        accessibilityLabel={label}
+        disabled={disabled}
+        onPress={() => setOpen(true)}
+        style={[
+          styles.trigger,
+          {
+            backgroundColor: theme.backgroundColor,
+            borderColor: hasError ? theme.errorColor : theme.borderColor,
+            borderRadius: theme.borderRadiusPx,
+          },
+          disabled && styles.disabled,
+        ]}
+      >
+        <Text
+          numberOfLines={1}
+          style={[
+            styles.triggerText,
+            { color: selected ? theme.textColor : theme.textSecondaryColor },
+          ]}
+        >
+          {selected ? selected.name : placeholder ?? ''}
+        </Text>
+        <Text style={[styles.chevron, { color: theme.textSecondaryColor }]}>
+          ▾
+        </Text>
+      </Pressable>
+      {hasError ? (
+        <Text
+          accessibilityLiveRegion="polite"
+          style={[styles.error, { color: theme.errorColor }]}
+        >
+          {errorMessage}
+        </Text>
+      ) : null}
+
+      <Modal
+        visible={open}
+        transparent
+        animationType="fade"
+        onRequestClose={close}
+      >
+        <Pressable style={styles.backdrop} onPress={close}>
+          <Pressable
+            style={[
+              styles.sheet,
+              {
+                backgroundColor: theme.backgroundColor,
+                borderColor: theme.borderColor,
+                borderRadius: theme.borderRadiusPx,
+              },
+            ]}
+            onPress={() => undefined}
+          >
+            {label ? (
+              <Text style={[styles.sheetTitle, { color: theme.textColor }]}>
+                {label}
+              </Text>
+            ) : null}
+            <TextInput
+              autoFocus
+              autoCapitalize="none"
+              autoCorrect={false}
+              placeholder={searchPlaceholder ?? placeholder ?? ''}
+              placeholderTextColor={theme.textSecondaryColor}
+              value={query}
+              onChangeText={setQuery}
+              style={[
+                styles.search,
+                {
+                  color: theme.textColor,
+                  backgroundColor: theme.backgroundColor,
+                  borderColor: theme.borderColor,
+                  borderRadius: theme.borderRadiusPx,
+                },
+              ]}
+            />
+            <FlatList
+              data={visible}
+              keyExtractor={(item) => item.code}
+              keyboardShouldPersistTaps="handled"
+              style={styles.list}
+              renderItem={({ item }) => {
+                const isSelected = item.code === value;
+                // Suppress the trailing code badge when the resolver
+                // already echoed the code as the name (Hermes fallback for
+                // countries outside the built-in map). Showing "AR  AR"
+                // adds noise without information.
+                const showCodeBadge = item.name.toUpperCase() !== item.code;
+                return (
+                  <Pressable
+                    accessibilityRole="menuitem"
+                    accessibilityState={{ selected: isSelected }}
+                    onPress={() => select(item)}
+                    style={({ pressed }) => [
+                      styles.option,
+                      isSelected && {
+                        backgroundColor: withAlpha(theme.primaryColor, 0.12),
+                      },
+                      pressed && {
+                        backgroundColor: withAlpha(theme.primaryColor, 0.18),
+                      },
+                    ]}
+                  >
+                    <Text
+                      numberOfLines={1}
+                      style={[
+                        styles.optionText,
+                        {
+                          color: isSelected ? theme.primaryColor : theme.textColor,
+                          fontWeight: isSelected ? '600' : '400',
+                        },
+                      ]}
+                    >
+                      {item.name}
+                    </Text>
+                    {showCodeBadge ? (
+                      <View
+                        style={[
+                          styles.optionCodeBadge,
+                          {
+                            backgroundColor: withAlpha(theme.textColor, 0.06),
+                          },
+                        ]}
+                      >
+                        <Text
+                          style={[
+                            styles.optionCode,
+                            { color: theme.textSecondaryColor },
+                          ]}
+                        >
+                          {item.code}
+                        </Text>
+                      </View>
+                    ) : null}
+                  </Pressable>
+                );
+              }}
+            />
+          </Pressable>
+        </Pressable>
+      </Modal>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: {
+    width: '100%',
+    marginBottom: 4,
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '500',
+    marginBottom: 4,
+  },
+  required: {
+    fontWeight: '400',
+  },
+  trigger: {
+    minHeight: 44,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderWidth: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  triggerText: {
+    fontSize: 15,
+    flex: 1,
+  },
+  chevron: {
+    fontSize: 14,
+    marginLeft: 8,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  error: {
+    fontSize: 13,
+    marginTop: 4,
+    lineHeight: 18,
+  },
+  backdrop: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.4)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  sheet: {
+    width: '100%',
+    maxWidth: 420,
+    maxHeight: '80%',
+    borderWidth: 1,
+    paddingHorizontal: 12,
+    paddingTop: 12,
+    paddingBottom: 8,
+  },
+  sheetTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    marginBottom: 8,
+  },
+  search: {
+    minHeight: 44,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontSize: 15,
+    borderWidth: 1,
+    marginBottom: 8,
+  },
+  list: {
+    flexShrink: 1,
+  },
+  option: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    minHeight: 44,
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+    justifyContent: 'space-between',
+    gap: 12,
+    borderRadius: 6,
+  },
+  optionCodeBadge: {
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 4,
+    minWidth: 36,
+    alignItems: 'center',
+  },
+  optionText: {
+    fontSize: 15,
+    flex: 1,
+  },
+  optionCode: {
+    fontSize: 11,
+    fontWeight: '600',
+    letterSpacing: 0.5,
+    fontVariant: ['tabular-nums'],
+  },
+});

package/src/ui/primitives/DatePicker.tsx

@@ -0,0 +1,266 @@
+/**
+ * Date input — three side-by-side `<Select>`s for day / month / year.
+ *
+ * Why three selects instead of `@react-native-community/datetimepicker`:
+ *   - Zero additional native deps; the picker module needs Pods linking and
+ *     extra Expo prebuild config. Adding it before we _need_ it (we don't yet
+ *     for HUMAN_EXTENDED_INFO and LEGAL_EXTENDED_INFO) just bloats the bundle.
+ *   - Three selects feel deliberate and avoid the platform-specific calendar
+ *     inconsistency of the native pickers across iOS and Android.
+ *
+ * State model:
+ *   The component keeps a private `draft` of the partial selection so an
+ *   intermediate state like "day=15, month=, year=" stays visible while the
+ *   user fills in the rest. The `value` prop only reflects the *complete*
+ *   ISO string — when any of the three pieces is missing we surface `null`
+ *   to the parent. An external `value` change (form reset, prefill, etc.)
+ *   re-syncs the draft.
+ *
+ * Output: ISO 8601 date (`YYYY-MM-DD`) when all three parts are filled,
+ * otherwise `null`. The host form passes that value as the field's
+ * `birth_date` / `incorporation_date` payload.
+ */
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { StyleSheet, Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import { useTheme } from '../theme';
+import { Select, type SelectOption } from './Select';
+
+export interface DatePickerProps {
+  label?: string;
+  required?: boolean;
+  /** ISO 8601 date string (`YYYY-MM-DD`) or `null` when unset. */
+  value: string | null;
+  onChange: (next: string | null) => void;
+  errorMessage?: string | null;
+  /**
+   * Earliest selectable year. Defaults to 1900 — wide enough for KYC birth
+   * dates while still bounded.
+   */
+  minYear?: number;
+  /** Latest selectable year. Defaults to the current year. */
+  maxYear?: number;
+  containerStyle?: StyleProp<ViewStyle>;
+  monthLabels?: ReadonlyArray<string>;
+}
+
+interface ParsedDate {
+  year: string;
+  month: string;
+  day: string;
+}
+
+const EMPTY_DATE: ParsedDate = { year: '', month: '', day: '' };
+
+const FALLBACK_MONTHS_ES: ReadonlyArray<string> = [
+  'Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic',
+];
+
+function parseISO(value: string | null): ParsedDate {
+  if (!value) return { ...EMPTY_DATE };
+  const m = value.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+  if (!m) return { ...EMPTY_DATE };
+  return { year: m[1] ?? '', month: m[2] ?? '', day: m[3] ?? '' };
+}
+
+function buildIso(year: string, month: string, day: string): string | null {
+  if (!year || !month || !day) return null;
+  const y = Number(year);
+  const mo = Number(month);
+  const d = Number(day);
+  if (!Number.isFinite(y) || !Number.isFinite(mo) || !Number.isFinite(d)) return null;
+  // Validate the day fits the month (e.g. 31 of Feb → invalid → null).
+  const test = new Date(Date.UTC(y, mo - 1, d));
+  if (
+    test.getUTCFullYear() !== y ||
+    test.getUTCMonth() !== mo - 1 ||
+    test.getUTCDate() !== d
+  ) {
+    return null;
+  }
+  return `${year}-${month}-${day}`;
+}
+
+function pad2(n: number): string {
+  return n < 10 ? `0${n}` : String(n);
+}
+
+export function DatePicker({
+  label,
+  required,
+  value,
+  onChange,
+  errorMessage,
+  minYear = 1900,
+  maxYear = new Date().getFullYear(),
+  containerStyle,
+  monthLabels = FALLBACK_MONTHS_ES,
+}: DatePickerProps) {
+  const theme = useTheme();
+
+  // Persistent draft of the user's partial selection. Survives the
+  // intermediate `onChange(null)` calls that happen until all three fields
+  // are filled.
+  const [draft, setDraft] = useState<ParsedDate>(() => parseISO(value));
+
+  // Re-sync the draft when the parent pushes a different `value` than the
+  // one our draft currently produces. Skips the resync if the external
+  // value matches what the draft would emit (the common case after every
+  // intermediate `onChange`), which prevents a feedback loop.
+  const lastEmittedRef = useRef<string | null>(buildIso(draft.year, draft.month, draft.day));
+  useEffect(() => {
+    if (value === lastEmittedRef.current) return;
+    setDraft(parseISO(value));
+    lastEmittedRef.current = value;
+  }, [value]);
+
+  const yearOptions = useMemo<SelectOption[]>(() => {
+    const out: SelectOption[] = [];
+    for (let y = maxYear; y >= minYear; y -= 1) {
+      out.push({ value: String(y), label: String(y) });
+    }
+    return out;
+  }, [maxYear, minYear]);
+
+  const monthOptions = useMemo<SelectOption[]>(() => {
+    return Array.from({ length: 12 }, (_, i) => ({
+      value: pad2(i + 1),
+      label: monthLabels[i] ?? pad2(i + 1),
+    }));
+  }, [monthLabels]);
+
+  const dayOptions = useMemo<SelectOption[]>(() => {
+    const max = daysInMonth(draft.year, draft.month);
+    return Array.from({ length: max }, (_, i) => ({
+      value: pad2(i + 1),
+      label: pad2(i + 1),
+    }));
+  }, [draft.month, draft.year]);
+
+  const update = useCallback(
+    (next: ParsedDate) => {
+      setDraft(next);
+      const iso = buildIso(next.year, next.month, next.day);
+      lastEmittedRef.current = iso;
+      onChange(iso);
+    },
+    [onChange],
+  );
+
+  const onDay = useCallback(
+    (day: string) => update({ ...draft, day }),
+    [draft, update],
+  );
+
+  const onMonth = useCallback(
+    (month: string) => {
+      // If the chosen month is shorter than the current day, pull the day in.
+      update({ ...draft, month, day: clampDay(draft.day, month, draft.year) });
+    },
+    [draft, update],
+  );
+
+  const onYear = useCallback(
+    (year: string) => {
+      // Year change can also shorten the month (Feb 29 only on leap years).
+      update({ ...draft, year, day: clampDay(draft.day, draft.month, year) });
+    },
+    [draft, update],
+  );
+
+  const hasError = Boolean(errorMessage && errorMessage.length > 0);
+
+  return (
+    <View style={[styles.wrap, containerStyle]}>
+      {label ? (
+        <Text style={[styles.label, { color: theme.textColor }]}>
+          {label}
+          {required ? (
+            <Text style={[styles.required, { color: theme.textSecondaryColor }]}>
+              {' '}*
+            </Text>
+          ) : null}
+        </Text>
+      ) : null}
+      <View style={styles.row}>
+        <View style={styles.cell}>
+          <Select
+            options={dayOptions}
+            value={draft.day || null}
+            onChange={onDay}
+            placeholder="DD"
+            errorMessage={hasError ? '' : null}
+          />
+        </View>
+        <View style={styles.cell}>
+          <Select
+            options={monthOptions}
+            value={draft.month || null}
+            onChange={onMonth}
+            placeholder="MM"
+            errorMessage={hasError ? '' : null}
+          />
+        </View>
+        <View style={styles.cellWide}>
+          <Select
+            options={yearOptions}
+            value={draft.year || null}
+            onChange={onYear}
+            placeholder="YYYY"
+            errorMessage={hasError ? '' : null}
+          />
+        </View>
+      </View>
+      {hasError ? (
+        <Text style={[styles.error, { color: theme.errorColor }]}>
+          {errorMessage}
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+
+function clampDay(day: string, month: string, year: string): string {
+  if (!day) return day;
+  const max = daysInMonth(year, month);
+  const dn = Number(day);
+  if (!Number.isFinite(dn)) return '';
+  return dn > max ? pad2(max) : pad2(dn);
+}
+
+function daysInMonth(year: string, month: string): number {
+  const y = Number(year) || 2000;
+  const m = Number(month) || 1;
+  // 0-indexed month; passing day 0 of next month yields last day of m.
+  return new Date(y, m, 0).getDate() || 31;
+}
+
+const styles = StyleSheet.create({
+  wrap: {
+    width: '100%',
+    marginBottom: 4,
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: '500',
+    marginBottom: 4,
+  },
+  required: {
+    fontWeight: '400',
+  },
+  row: {
+    flexDirection: 'row',
+    gap: 8,
+  },
+  cell: {
+    flex: 1,
+  },
+  cellWide: {
+    flex: 1.4,
+  },
+  error: {
+    fontSize: 13,
+    marginTop: 4,
+    lineHeight: 18,
+  },
+});