framepayments-react-native 3.0.0 → 4.0.0

package/lib/ui/screens/onboarding/onboardingSelectors.js

@@ -0,0 +1,265 @@
+import { validateAccountNumberUS, validateDateOfBirth, validateEmail, validateNonEmpty, validatePhoneE164, validatePostalCode, validateRoutingNumberUS, validateSSNLast4, validateZipUS, } from '../../../validation';
+// ─────────────────────────────────────────────────────────────────────────────
+// Capability → step routing.
+//
+// Verified 1:1 from iOS OnboardingContainerView.swift (lines 26–42) and
+// Android FrameOnboarding.kt compute functions. Order matters for `flow`:
+// PersonalInformation always precedes payment / payout / docs, which always
+// precede VerificationSubmitted (terminal).
+// ─────────────────────────────────────────────────────────────────────────────
+const PERSONAL_INFO_CAPABILITIES = new Set([
+    'kyc',
+    'kyc_prefill',
+    'phone_verification',
+    'creator_shield',
+    'geo_compliance',
+    'age_verification',
+]);
+const CONFIRM_PAYMENT_METHOD_CAPABILITIES = new Set([
+    'card_verification',
+    'card_send',
+    'card_receive',
+    'address_verification',
+]);
+const CONFIRM_BANK_ACCOUNT_CAPABILITIES = new Set([
+    'bank_account_verification',
+    'bank_account_send',
+    'bank_account_receive',
+]);
+export function computeFlow(capabilities) {
+    const steps = [];
+    steps.push('verification_welcome');
+    if (capabilities.some((c) => PERSONAL_INFO_CAPABILITIES.has(c))) {
+        steps.push('personal_information');
+    }
+    if (capabilities.some((c) => CONFIRM_PAYMENT_METHOD_CAPABILITIES.has(c))) {
+        steps.push('confirm_payment_method');
+    }
+    if (capabilities.some((c) => CONFIRM_BANK_ACCOUNT_CAPABILITIES.has(c))) {
+        steps.push('confirm_bank_account');
+    }
+    // iOS-parity (OnboardingContainerView.swift:32-40 + the commented-out
+    // `.uploadDocuments` case at line 101-104): `kyc` maps to
+    // `.personalInformation`, NOT to a separate document-upload step. The
+    // UploadDocuments screens still exist in this codebase but are not part of
+    // the active flow until iOS activates its equivalent. Do NOT add
+    // 'upload_documents' here without mirroring an iOS activation.
+    steps.push('verification_submitted');
+    return steps;
+}
+// Default sub-step when entering a step from forward navigation.
+export function entrySubStep(step, capabilities) {
+    switch (step) {
+        case 'verification_welcome':
+            return null;
+        case 'personal_information':
+            return firstPersonalInfoSubStep(capabilities);
+        case 'confirm_payment_method':
+            return 'select';
+        case 'confirm_bank_account':
+            return 'select';
+        case 'upload_documents':
+            return 'list';
+        case 'verification_submitted':
+            return null;
+    }
+}
+function firstPersonalInfoSubStep(capabilities) {
+    // Phone-auth always runs first if any phone-touching capability is requested.
+    // Per iOS source: phone_verification, kyc, kyc_prefill, creator_shield, geo_compliance
+    // all gate on phone auth before customer information.
+    if (capabilities.includes('phone_verification') ||
+        capabilities.includes('kyc') ||
+        capabilities.includes('kyc_prefill') ||
+        capabilities.includes('creator_shield') ||
+        capabilities.includes('geo_compliance')) {
+        return 'phone_auth';
+    }
+    // age_verification-only path skips straight to customer information.
+    return 'customer_information';
+}
+// Next step in the linear flow. Returns null at the end.
+export function nextStep(state) {
+    const idx = state.flow.indexOf(state.currentStep);
+    if (idx === -1 || idx === state.flow.length - 1)
+        return null;
+    return state.flow[idx + 1];
+}
+export function previousStep(state) {
+    const idx = state.flow.indexOf(state.currentStep);
+    if (idx <= 0)
+        return null;
+    return state.flow[idx - 1];
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// Validation per sub-step. Each returns a partial field-error map; empty map
+// means valid.
+// ─────────────────────────────────────────────────────────────────────────────
+export function validatePhoneAuth(state) {
+    const errors = {};
+    const phoneE164 = `+${state.phoneCountry.callingCode}${state.phoneNumber.replace(/\D+/g, '')}`;
+    const phoneError = validatePhoneE164(phoneE164, state.phoneCountry.alpha2);
+    if (phoneError)
+        errors.phoneNumber = phoneError;
+    if (requiresDobInPhoneAuth(state.requiredCapabilities)) {
+        const dobError = validateDateOfBirth(state.dobYear, state.dobMonth, state.dobDay, 18, 120);
+        if (dobError)
+            errors.dob = dobError;
+    }
+    // iOS UserIdentificationView shows the TermsOfServiceView text when
+    // geo_compliance is requested, but tapping Continue is implicit acceptance —
+    // validateAllPhoneAuth (OnboardingContainerViewModel.swift:583-600) only
+    // checks phone + DOB. The TOS payload (with `acceptedAt: now`) is attached
+    // to the account create/update call regardless.
+    return errors;
+}
+export function requiresDobInPhoneAuth(capabilities) {
+    return capabilities.includes('kyc_prefill');
+}
+export function requiresTosInPhoneAuth(capabilities) {
+    return capabilities.includes('geo_compliance');
+}
+export function validateOtp(state) {
+    const errors = {};
+    const code = state.otpCode.trim();
+    if (code.length !== 6 || !/^\d{6}$/.test(code)) {
+        errors.otpCode = 'Enter the 6-digit code';
+    }
+    return errors;
+}
+export function validateCustomerInformation(state) {
+    const errors = {};
+    const firstError = validateNonEmpty(state.customerFirstName, 'First name');
+    if (firstError)
+        errors.customerFirstName = firstError;
+    const lastError = validateNonEmpty(state.customerLastName, 'Last name');
+    if (lastError)
+        errors.customerLastName = lastError;
+    const emailError = validateEmail(state.customerEmail);
+    if (emailError)
+        errors.customerEmail = emailError;
+    // DOB always required at this screen when not already collected in phone-auth.
+    if (!requiresDobInPhoneAuth(state.requiredCapabilities)) {
+        const dobError = validateDateOfBirth(state.dobYear, state.dobMonth, state.dobDay, 18, 120);
+        if (dobError)
+            errors.dob = dobError;
+    }
+    if (state.requiredCapabilities.includes('kyc') || state.requiredCapabilities.includes('kyc_prefill')) {
+        const ssnError = validateSSNLast4(state.ssnLast4);
+        if (ssnError)
+            errors.ssnLast4 = ssnError;
+    }
+    Object.assign(errors, validateAddress(state.address, /* required */ true));
+    return errors;
+}
+export function validateAddress(address, required) {
+    // Optional mode (used by Checkout's `optional` addressMode) is intentionally
+    // NOT exposed here — onboarding requires a billing address whenever the
+    // address fields are shown.
+    if (!required)
+        return {};
+    const errors = {};
+    const line1Error = validateNonEmpty(address.line1, 'Address');
+    if (line1Error)
+        errors['address.line1'] = line1Error;
+    const cityError = validateNonEmpty(address.city, 'City');
+    if (cityError)
+        errors['address.city'] = cityError;
+    const stateError = validateNonEmpty(address.state, 'State');
+    if (stateError)
+        errors['address.state'] = stateError;
+    const countryError = validateNonEmpty(address.country, 'Country');
+    if (countryError)
+        errors['address.country'] = countryError;
+    if (address.country === 'US') {
+        const zipError = validateZipUS(address.postalCode);
+        if (zipError)
+            errors['address.postalCode'] = zipError;
+    }
+    else {
+        // Use the country-specific validator when available; otherwise non-empty.
+        const postalError = validatePostalCode(address.postalCode, address.country) ?? validateNonEmpty(address.postalCode, 'Postal code');
+        if (postalError)
+            errors['address.postalCode'] = postalError;
+    }
+    return errors;
+}
+export function validateAch(ach, address) {
+    const errors = {};
+    const routingError = validateRoutingNumberUS(ach.routingNumber);
+    if (routingError)
+        errors['ach.routingNumber'] = routingError;
+    const accountError = validateAccountNumberUS(ach.accountNumber, 4, 17);
+    if (accountError)
+        errors['ach.accountNumber'] = accountError;
+    // ACH billing is always US per the plan.
+    if (address.country !== 'US') {
+        errors['address.country'] = 'Bank account billing address must be US.';
+    }
+    else {
+        Object.assign(errors, validateAddress(address, true));
+    }
+    return errors;
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// Enable selectors.
+// ─────────────────────────────────────────────────────────────────────────────
+export function isCustomerInformationValid(state) {
+    return Object.keys(validateCustomerInformation(state)).length === 0;
+}
+export function isPhoneAuthValid(state) {
+    return Object.keys(validatePhoneAuth(state)).length === 0;
+}
+export function isOtpValid(state) {
+    return Object.keys(validateOtp(state)).length === 0;
+}
+export function isAchValid(state) {
+    return Object.keys(validateAch(state.ach, state.address)).length === 0;
+}
+export function isCardSubmittable(state) {
+    if (state.addressVerificationOnly) {
+        // Only need address fields valid in address-only mode.
+        return Object.keys(validateAddress(state.address, true)).length === 0;
+    }
+    if (!state.cardComplete)
+        return false;
+    return Object.keys(validateAddress(state.address, true)).length === 0;
+}
+// Returns true once all required docs have been captured. Selfie always; front
+// always; back depends on the chosen id type (passport is single-page).
+export function areDocsComplete(state) {
+    if (!state.docs.idType)
+        return false;
+    if (!state.docs.front)
+        return false;
+    if (state.docs.idType !== 'passport' && !state.docs.back)
+        return false;
+    if (!state.docs.selfie)
+        return false;
+    return true;
+}
+// Capability already satisfied by the loaded account/payment-method profile.
+// Used by 8g to skip steps the user has already completed.
+export function isCapabilitySatisfied(capability, state) {
+    switch (capability) {
+        case 'address_verification':
+            // Satisfied if a saved card has a full billing address on it.
+            return state.savedPaymentMethods.some((pm) => pm.card != null && hasFullBilling(pm.billing));
+        case 'phone_verification':
+            // The account profile prefetch sets accountLoaded; a separate check on
+            // `account.phone_verified` would live here once we resolve the account
+            // shape. For now, return false so phone_verification always runs.
+            return false;
+        default:
+            return false;
+    }
+}
+function hasFullBilling(billing) {
+    if (!billing)
+        return false;
+    return (billing.line1.trim() !== '' &&
+        billing.city.trim() !== '' &&
+        billing.state.trim() !== '' &&
+        billing.country.trim() !== '' &&
+        billing.postalCode.trim() !== '');
+}

package/lib/ui/screens/onboarding/personalInformation/CustomerInformationScreen.d.ts

@@ -0,0 +1,19 @@
+import type { OnboardingCapability } from '../../../../types';
+import type { OnboardingAddress, OnboardingState } from '../onboardingReducer';
+export interface CustomerInformationScreenProps {
+    capabilities: ReadonlyArray<OnboardingCapability>;
+    state: OnboardingState;
+    onChangeFirstName: (value: string) => void;
+    onChangeLastName: (value: string) => void;
+    onChangeEmail: (value: string) => void;
+    onChangeDob: (next: {
+        month: string;
+        day: string;
+        year: string;
+    }) => void;
+    onChangeSsn: (value: string) => void;
+    onChangeAddressField: (field: keyof OnboardingAddress, value: string) => void;
+    onSubmit: () => void;
+}
+export declare function CustomerInformationScreen({ capabilities, state, onChangeFirstName, onChangeLastName, onChangeEmail, onChangeDob, onChangeSsn, onChangeAddressField, onSubmit, }: CustomerInformationScreenProps): import("react").JSX.Element;
+//# sourceMappingURL=CustomerInformationScreen.d.ts.map

package/lib/ui/screens/onboarding/personalInformation/CustomerInformationScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomerInformationScreen.d.ts","sourceRoot":"","sources":["../../../../../src/ui/screens/onboarding/personalInformation/CustomerInformationScreen.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAU/E,MAAM,WAAW,8BAA8B;IAC7C,YAAY,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAClD,KAAK,EAAE,eAAe,CAAC;IACvB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC1E,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAM,iBAAiB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9E,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,yBAAyB,CAAC,EACxC,YAAY,EACZ,KAAK,EACL,iBAAiB,EACjB,gBAAgB,EAChB,aAAa,EACb,WAAW,EACX,WAAW,EACX,oBAAoB,EACpB,QAAQ,GACT,EAAE,8BAA8B,+BAgKhC"}

package/lib/ui/screens/onboarding/personalInformation/CustomerInformationScreen.js

@@ -0,0 +1,157 @@
+import { useMemo } from 'react';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import { useFrameTheme } from '../../../theme/ThemeContext';
+import { Button } from '../../../primitives/Button';
+import { ValidatedTextField } from '../../../primitives/ValidatedTextField';
+import { DobInputField } from '../../../primitives/DobInputField';
+import { BillingAddressDetailView } from '../../../primitives/BillingAddressDetailView';
+import { requiresDobInPhoneAuth } from '../onboardingSelectors';
+import { FORM_SPACING } from '../formSpacing';
+export function CustomerInformationScreen({ capabilities, state, onChangeFirstName, onChangeLastName, onChangeEmail, onChangeDob, onChangeSsn, onChangeAddressField, onSubmit, }) {
+    const theme = useFrameTheme();
+    const styles = useMemo(() => createStyles(theme), [theme]);
+    const showDob = !requiresDobInPhoneAuth(capabilities);
+    const showSsn = capabilities.includes('kyc') || capabilities.includes('kyc_prefill');
+    const containerStyle = [
+        styles.container,
+        {
+            borderColor: theme.colors.surfaceStroke,
+            borderRadius: theme.radii.medium,
+            backgroundColor: theme.colors.surface,
+        },
+    ];
+    const dividerStyle = [styles.divider, { backgroundColor: theme.colors.surfaceStroke }];
+    const sectionLabelStyle = {
+        color: theme.colors.textPrimary,
+        fontSize: theme.fonts.label.size,
+        fontWeight: theme.fontWeights.label,
+        lineHeight: theme.fontLineHeights.label,
+    };
+    return (<ScrollView style={styles.scroll} contentContainerStyle={styles.content} keyboardShouldPersistTaps="handled">
+      <Text style={[
+            styles.heading,
+            {
+                color: theme.colors.textPrimary,
+                fontSize: theme.fonts.heading.size,
+                fontWeight: theme.fontWeights.heading,
+                lineHeight: theme.fontLineHeights.heading,
+            },
+        ]}>
+        Personal Information
+      </Text>
+
+      {/* Customer Information container */}
+      <Text style={[styles.sectionLabel, sectionLabelStyle]}>Customer Information</Text>
+      <View style={containerStyle}>
+        <View style={styles.row}>
+          <View style={styles.cell}>
+            <ValidatedTextField prompt="First Name" value={state.customerFirstName} onChangeText={onChangeFirstName} error={state.fieldErrors.customerFirstName} autoCapitalize="words" borderless inlineError/>
+          </View>
+          <View style={dividerStyle}/>
+          <View style={styles.cell}>
+            <ValidatedTextField prompt="Last Name" value={state.customerLastName} onChangeText={onChangeLastName} error={state.fieldErrors.customerLastName} autoCapitalize="words" borderless inlineError/>
+          </View>
+        </View>
+        <View style={[dividerStyle, styles.horizontalDivider]}/>
+        <ValidatedTextField prompt="Email Address" value={state.customerEmail} onChangeText={onChangeEmail} error={state.fieldErrors.customerEmail} keyboardType="email-address" autoCapitalize="none" borderless inlineError/>
+      </View>
+
+      {/* Birthday container */}
+      {showDob ? (<>
+          <Text style={[styles.sectionLabel, sectionLabelStyle]}>Birthday</Text>
+          <View style={containerStyle}>
+            <DobInputField month={state.dobMonth} day={state.dobDay} year={state.dobYear} onChange={onChangeDob} error={state.fieldErrors.dob}/>
+          </View>
+        </>) : null}
+
+      {/* Social Security Number container */}
+      {showSsn ? (<>
+          <Text style={[styles.sectionLabel, sectionLabelStyle]}>Social Security Number</Text>
+          <View style={[containerStyle, styles.ssnContainer]}>
+            <View style={[
+                styles.ssnLeftLabel,
+                {
+                    backgroundColor: theme.colors.surfaceStroke,
+                    borderTopLeftRadius: theme.radii.medium,
+                    borderBottomLeftRadius: theme.radii.medium,
+                },
+            ]}>
+              <Text style={{
+                color: theme.colors.textPrimary,
+                fontSize: theme.fonts.caption.size,
+                fontWeight: theme.fontWeights.label,
+            }}>
+                Last 4 Digits
+              </Text>
+            </View>
+            <View style={styles.ssnField}>
+              <ValidatedTextField prompt="SSN" value={state.ssnLast4} onChangeText={onChangeSsn} error={state.fieldErrors.ssnLast4} keyboardType="number-pad" characterLimit={4} secureTextEntry borderless inlineError/>
+            </View>
+          </View>
+        </>) : null}
+
+      {/* Current Address */}
+      <Text style={[styles.sectionLabel, sectionLabelStyle]}>Current Address</Text>
+      <BillingAddressDetailView address={state.address} errors={state.fieldErrors} onChangeField={onChangeAddressField} international/>
+
+      <View style={styles.footer}>
+        <Button text="Continue" enabled={!state.isPerformingAction} isLoading={state.isPerformingAction} onPress={onSubmit}/>
+      </View>
+    </ScrollView>);
+}
+function createStyles(_theme) {
+    return StyleSheet.create({
+        scroll: {
+            flex: 1,
+        },
+        content: {
+            paddingHorizontal: FORM_SPACING.contentHorizontal,
+            paddingBottom: FORM_SPACING.contentBottom,
+        },
+        heading: {
+            marginTop: FORM_SPACING.headingTop,
+            marginBottom: FORM_SPACING.headingBottom,
+        },
+        sectionLabel: {
+            marginTop: FORM_SPACING.fieldGap,
+            marginBottom: 6,
+        },
+        container: {
+            borderWidth: 1,
+            overflow: 'hidden',
+        },
+        row: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            height: 49,
+        },
+        cell: {
+            flex: 1,
+        },
+        divider: {
+            width: 1,
+            alignSelf: 'stretch',
+        },
+        horizontalDivider: {
+            width: '100%',
+            height: 1,
+        },
+        ssnContainer: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            height: 50,
+        },
+        ssnLeftLabel: {
+            width: 120,
+            height: 50,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        ssnField: {
+            flex: 1,
+        },
+        footer: {
+            marginTop: FORM_SPACING.sectionBottom,
+        },
+    });
+}

package/lib/ui/screens/onboarding/personalInformation/GeolocationScreen.d.ts

@@ -0,0 +1,6 @@
+export interface GeolocationScreenProps {
+    accountId: string | null;
+    onAdvance: () => void;
+}
+export declare function GeolocationScreen({ accountId, onAdvance }: GeolocationScreenProps): import("react").JSX.Element;
+//# sourceMappingURL=GeolocationScreen.d.ts.map

package/lib/ui/screens/onboarding/personalInformation/GeolocationScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GeolocationScreen.d.ts","sourceRoot":"","sources":["../../../../../src/ui/screens/onboarding/personalInformation/GeolocationScreen.tsx"],"names":[],"mappings":"AAaA,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,sBAAsB,+BA0DjF"}

package/lib/ui/screens/onboarding/personalInformation/GeolocationScreen.js

@@ -0,0 +1,84 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
+import { useFrameTheme } from '../../../theme/ThemeContext';
+import { Button } from '../../../primitives/Button';
+import { client } from '../../../../client';
+import { showToast } from '../../../primitives/toastCenter';
+import { FORM_SPACING } from '../formSpacing';
+export function GeolocationScreen({ accountId, onAdvance }) {
+    const theme = useFrameTheme();
+    const styles = useMemo(() => createStyles(theme), [theme]);
+    const [done, setDone] = useState(false);
+    const ranRef = useRef(false);
+    useEffect(() => {
+        if (ranRef.current)
+            return;
+        ranRef.current = true;
+        let cancelled = false;
+        let rafId = null;
+        (async () => {
+            try {
+                if (accountId) {
+                    await client.sdk.geoCompliance.getAccountStatus(accountId);
+                }
+            }
+            catch (err) {
+                if (cancelled)
+                    return;
+                const message = err instanceof Error ? err.message : 'Could not verify your location.';
+                showToast(message);
+            }
+            finally {
+                if (cancelled)
+                    return;
+                setDone(true);
+                // Advance on the next frame so the user sees the "Verifying location"
+                // beat — gives the flow visual continuity. Cancelled on unmount.
+                rafId = requestAnimationFrame(() => {
+                    if (!cancelled)
+                        onAdvance();
+                });
+            }
+        })();
+        return () => {
+            cancelled = true;
+            if (rafId !== null)
+                cancelAnimationFrame(rafId);
+        };
+    }, [accountId, onAdvance]);
+    return (<View style={styles.container}>
+      <ActivityIndicator color={theme.colors.textSecondary} size="large"/>
+      <Text style={[
+            styles.title,
+            {
+                color: theme.colors.textPrimary,
+                fontSize: theme.fonts.body.size,
+                fontWeight: theme.fontWeights.label,
+                lineHeight: theme.fontLineHeights.body,
+            },
+        ]}>
+        {done ? 'Continuing…' : 'Verifying your location…'}
+      </Text>
+      <View style={styles.spacer}/>
+      {/* If the auto-advance hangs (e.g. an unhandled exception), surface a
+            manual Continue so the user is never stuck. */}
+      <Button text="Continue" enabled={done} onPress={onAdvance}/>
+    </View>);
+}
+function createStyles(_theme) {
+    return StyleSheet.create({
+        container: {
+            flex: 1,
+            paddingHorizontal: FORM_SPACING.contentHorizontal,
+            paddingVertical: FORM_SPACING.footerVertical,
+            alignItems: 'center',
+        },
+        title: {
+            marginTop: FORM_SPACING.sectionBottom,
+            textAlign: 'center',
+        },
+        spacer: {
+            flex: 1,
+        },
+    });
+}

package/lib/ui/screens/onboarding/personalInformation/PhoneAuthScreen.d.ts

@@ -0,0 +1,17 @@
+import type { OnboardingCapability } from '../../../../types';
+import type { OnboardingState } from '../onboardingReducer';
+export interface PhoneAuthScreenProps {
+    capabilities: ReadonlyArray<OnboardingCapability>;
+    state: OnboardingState;
+    onChangePhoneCountry: (alpha2: string, callingCode: string) => void;
+    onChangePhoneNumber: (value: string) => void;
+    onChangeDob: (next: {
+        month: string;
+        day: string;
+        year: string;
+    }) => void;
+    onMount: () => void;
+    onSubmit: () => void;
+}
+export declare function PhoneAuthScreen({ capabilities, state, onChangePhoneCountry, onChangePhoneNumber, onChangeDob, onMount, onSubmit, }: PhoneAuthScreenProps): import("react").JSX.Element;
+//# sourceMappingURL=PhoneAuthScreen.d.ts.map

package/lib/ui/screens/onboarding/personalInformation/PhoneAuthScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneAuthScreen.d.ts","sourceRoot":"","sources":["../../../../../src/ui/screens/onboarding/personalInformation/PhoneAuthScreen.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAe5D,MAAM,WAAW,oBAAoB;IACnC,YAAY,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAClD,KAAK,EAAE,eAAe,CAAC;IACvB,oBAAoB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACpE,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,WAAW,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC1E,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,eAAe,CAAC,EAC9B,YAAY,EACZ,KAAK,EACL,oBAAoB,EACpB,mBAAmB,EACnB,WAAW,EACX,OAAO,EACP,QAAQ,GACT,EAAE,oBAAoB,+BAqFtB"}

package/lib/ui/screens/onboarding/personalInformation/PhoneAuthScreen.js

@@ -0,0 +1,93 @@
+import { useEffect, useMemo } from 'react';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import { useFrameTheme } from '../../../theme/ThemeContext';
+import { Button } from '../../../primitives/Button';
+import { PhoneNumberField } from '../../../primitives/PhoneNumberField';
+import { DobInputField } from '../../../primitives/DobInputField';
+import { TermsOfServiceView } from '../../../primitives/TermsOfServiceView';
+import { requiresDobInPhoneAuth, requiresTosInPhoneAuth, } from '../onboardingSelectors';
+import { FORM_SPACING } from '../formSpacing';
+export function PhoneAuthScreen({ capabilities, state, onChangePhoneCountry, onChangePhoneNumber, onChangeDob, onMount, onSubmit, }) {
+    const theme = useFrameTheme();
+    const styles = useMemo(() => createStyles(theme), [theme]);
+    const showDob = requiresDobInPhoneAuth(capabilities);
+    const showTos = requiresTosInPhoneAuth(capabilities);
+    const heading = showDob ? 'Enter Your Phone Number & DOB' : 'Enter Your Phone Number';
+    // iOS UserIdentificationView.authenticationView fires
+    // generateTermsOfServiceToken() once in .onAppear (line 148-153). Mirror it
+    // here — onMount is the VM's generateTermsOfServiceToken passthrough.
+    useEffect(() => {
+        onMount();
+    }, [onMount]);
+    return (<ScrollView style={styles.container} contentContainerStyle={styles.content} keyboardShouldPersistTaps="handled">
+      <Text style={[
+            styles.heading,
+            {
+                color: theme.colors.textPrimary,
+                fontSize: theme.fonts.heading.size,
+                fontWeight: theme.fontWeights.heading,
+                lineHeight: theme.fontLineHeights.heading,
+            },
+        ]}>
+        {heading}
+      </Text>
+      <Text style={[
+            styles.body,
+            {
+                color: theme.colors.textSecondary,
+                fontSize: theme.fonts.body.size,
+                lineHeight: theme.fontLineHeights.body,
+            },
+        ]}>
+        We'll send you a code — it helps us keep your account secure.
+      </Text>
+
+      <View style={styles.field}>
+        <PhoneNumberField phoneNumber={state.phoneNumber} selectedAlpha2={state.phoneCountry.alpha2} onChangeCountry={(c) => onChangePhoneCountry(c.alpha2Code, c.callingCode.replace(/^\+/, ''))} onChangePhoneNumber={onChangePhoneNumber} error={state.fieldErrors.phoneNumber}/>
+      </View>
+
+      {showDob ? (<View style={styles.field}>
+          <Text style={[styles.label, { color: theme.colors.textSecondary }]}>Date of Birth</Text>
+          <DobInputField month={state.dobMonth} day={state.dobDay} year={state.dobYear} onChange={onChangeDob} error={state.fieldErrors.dob}/>
+        </View>) : null}
+
+      {showTos ? (<View style={styles.tosBlock}>
+          <TermsOfServiceView />
+        </View>) : null}
+
+      <View style={styles.footer}>
+        <Button text="Continue" enabled={!state.isPerformingAction} isLoading={state.isPerformingAction} onPress={onSubmit}/>
+      </View>
+    </ScrollView>);
+}
+function createStyles(_theme) {
+    return StyleSheet.create({
+        container: {
+            flex: 1,
+        },
+        content: {
+            paddingHorizontal: FORM_SPACING.contentHorizontal,
+            paddingBottom: FORM_SPACING.contentBottom,
+        },
+        heading: {
+            marginTop: FORM_SPACING.headingTop,
+            marginBottom: FORM_SPACING.headingBottom,
+        },
+        body: {
+            marginBottom: FORM_SPACING.subheadBottom,
+        },
+        field: {
+            marginBottom: FORM_SPACING.fieldGap,
+        },
+        label: {
+            fontSize: 12,
+            marginBottom: 4,
+        },
+        tosBlock: {
+            marginVertical: FORM_SPACING.sectionBottom,
+        },
+        footer: {
+            marginTop: FORM_SPACING.headingTop,
+        },
+    });
+}

package/lib/ui/screens/onboarding/personalInformation/VerificationWelcomeScreen.d.ts

@@ -0,0 +1,6 @@
+export interface VerificationWelcomeScreenProps {
+    accountLoaded: boolean;
+    onContinue: () => void;
+}
+export declare function VerificationWelcomeScreen({ accountLoaded, onContinue, }: VerificationWelcomeScreenProps): import("react").JSX.Element;
+//# sourceMappingURL=VerificationWelcomeScreen.d.ts.map

package/lib/ui/screens/onboarding/personalInformation/VerificationWelcomeScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerificationWelcomeScreen.d.ts","sourceRoot":"","sources":["../../../../../src/ui/screens/onboarding/personalInformation/VerificationWelcomeScreen.tsx"],"names":[],"mappings":"AAYA,MAAM,WAAW,8BAA8B;IAC7C,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,wBAAgB,yBAAyB,CAAC,EACxC,aAAa,EACb,UAAU,GACX,EAAE,8BAA8B,+BAuChC"}