framepayments-react-native 3.0.0 → 4.0.0

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

@@ -0,0 +1,275 @@
+import { useCallback } from 'react';
+import { showToast } from '../../primitives/toastCenter';
+import { toToastMessage } from '../../../api-errors';
+import { useOnboardingViewModel } from './useOnboardingViewModel';
+import { OnboardingChrome } from './OnboardingChrome';
+import { VerificationWelcomeScreen } from './personalInformation/VerificationWelcomeScreen';
+import { PhoneAuthScreen } from './personalInformation/PhoneAuthScreen';
+import { VerifyPhoneScreen } from './personalInformation/VerifyPhoneScreen';
+import { CustomerInformationScreen } from './personalInformation/CustomerInformationScreen';
+import { GeolocationScreen } from './personalInformation/GeolocationScreen';
+import { SelectPaymentMethodScreen } from './confirmPaymentMethod/SelectPaymentMethodScreen';
+import { AddPaymentMethodScreen } from './confirmPaymentMethod/AddPaymentMethodScreen';
+import { SecurePMVerificationScreen } from './confirmPaymentMethod/SecurePMVerificationScreen';
+import { SelectPayoutMethodScreen } from './confirmBankAccount/SelectPayoutMethodScreen';
+import { AddPayoutMethodScreen } from './confirmBankAccount/AddPayoutMethodScreen';
+import { UploadDocumentsListScreen } from './uploadDocuments/UploadDocumentsListScreen';
+import { CaptureScreen } from './uploadDocuments/CaptureScreen';
+import { ReviewScreen } from './uploadDocuments/ReviewScreen';
+import { VerificationSubmittedScreen } from './VerificationSubmittedScreen';
+import { areDocsComplete } from './onboardingSelectors';
+// Top-level orchestrator. Owns the substep → screen routing, wraps every
+// screen in OnboardingChrome (close button + progress bar), and threads the
+// view model's actions through to the leaf screens. Mounted by Frame.present-
+// Onboarding via the JS presenter.
+export function OnboardingRoot({ accountId, capabilities, onComplete, onCancel, onFail, }) {
+    const vm = useOnboardingViewModel({ accountId, capabilities, onComplete, onCancel });
+    // ─── Routing helpers ───
+    // Continue handler for SelectPaymentMethod. Mirrors iOS
+    // SelectPaymentMethodView.selectPaymentView's ContinueButton action:
+    //   • If address_verification is requested AND the selected card has no
+    //     billing line1, route into AddPaymentMethod in address-only mode.
+    //   • Otherwise advance.
+    // The iOS `card_verification → start 3DS` branch is commented out in iOS
+    // (see SelectPaymentMethodView.swift:85-91), so RN must not run 3DS here
+    // either — that would diverge from iOS behavior.
+    const onSelectPaymentMethodContinue = useCallback(() => {
+        const selectedId = vm.state.selectedPaymentMethodId;
+        const requiresAddressVerification = capabilities.includes('address_verification');
+        if (selectedId === null) {
+            vm.goTo('confirm_payment_method', 'add');
+            return;
+        }
+        if (requiresAddressVerification) {
+            const pm = vm.state.savedPaymentMethods.find((m) => m.id === selectedId);
+            const billing = pm?.billing;
+            if (!billing || !billing.line_1) {
+                vm.dispatch({ type: 'SET_ADDRESS_VERIFICATION_ONLY', value: true });
+                vm.goTo('confirm_payment_method', 'add');
+                return;
+            }
+        }
+        vm.advance();
+    }, [vm, capabilities]);
+    // Mirrors iOS AddPaymentMethodView's ContinueButton → addNewPaymentMethod()
+    // → self.dismiss(): create the card, append to saved methods, then pop back
+    // to SelectPaymentMethod so the user can review and tap Continue again.
+    // iOS does NOT advance the onboarding step or run 3DS here.
+    const onAddPaymentMethodSubmit = useCallback(async (card) => {
+        const pmId = await vm.submitNewCard(card);
+        vm.goTo('confirm_payment_method', 'select');
+        return pmId;
+    }, [vm]);
+    // Mirrors iOS AddPaymentMethodView in `onlyAddressVerification` mode:
+    // updatePaymentMethod() then self.dismiss(). Returns to select; no 3DS.
+    const onAddPaymentMethodAddressOnly = useCallback(async (paymentMethodId) => {
+        await vm.updateSavedPaymentMethodBilling(paymentMethodId);
+        vm.dispatch({ type: 'SET_ADDRESS_VERIFICATION_ONLY', value: false });
+        vm.goTo('confirm_payment_method', 'select');
+    }, [vm]);
+    const onAddApplePayInOnboarding = useCallback(async () => {
+        const pmId = await vm.addApplePayToOwner();
+        // Mirrors iOS AddPaymentMethodView.walletButton's success callback:
+        // appendNewlyAddedPaymentMethod(pm) + self.dismiss() — return to the
+        // SelectPaymentMethod screen so the user reviews and taps Continue,
+        // matching the manual-card flow above.
+        vm.goTo('confirm_payment_method', 'select');
+        return pmId;
+    }, [vm]);
+    const onSecurePMSuccess = useCallback(() => {
+        vm.dispatch({ type: 'SET_THREE_DS_VERIFICATION_ID', id: null });
+        vm.advance();
+    }, [vm]);
+    const onSecurePMFailure = useCallback((message) => {
+        showToast(message);
+        vm.dispatch({ type: 'SET_THREE_DS_VERIFICATION_ID', id: null });
+        vm.goTo('confirm_payment_method', 'select');
+    }, [vm]);
+    const onSelectPayoutContinue = useCallback(() => {
+        if (vm.state.selectedPayoutMethodId === null) {
+            vm.goTo('confirm_bank_account', 'add');
+            return;
+        }
+        vm.advance();
+    }, [vm]);
+    const onAddPayoutPlaid = useCallback(async () => {
+        const pmId = await vm.openPlaidLink();
+        vm.advance();
+        return pmId;
+    }, [vm]);
+    const onAddPayoutManual = useCallback(async () => {
+        const pmId = await vm.submitManualAch();
+        vm.dispatch({ type: 'SET_ACH_MANUAL_MODE', value: false });
+        vm.advance();
+        return pmId;
+    }, [vm]);
+    const surfaceError = useCallback((err) => {
+        const code = err.code;
+        if (code === 'USER_CANCELED')
+            return;
+        // Use toToastMessage so we surface the server's `error_details.message`
+        // from FrameAPIError.raw instead of the top-level generic message
+        // (framepayments returns a useless "An error occured" / "An error
+        // occurred" envelope; the details below it carry the real reason).
+        showToast(toToastMessage(err));
+    }, []);
+    // Upload documents routing — substeps are list / capture_* / review_*.
+    const onCaptureDone = useCallback((side, uri, type, name) => {
+        vm.dispatch({ type: 'SET_DOC_PHOTO', side, photo: { uri, type, name } });
+        vm.goTo('upload_documents', `review_${side}`);
+    }, [vm]);
+    const onReviewUse = useCallback(() => {
+        // Stay on the list once any one side is confirmed — user picks the next side.
+        vm.goTo('upload_documents', 'list');
+    }, [vm]);
+    const onReviewRetake = useCallback((side) => {
+        vm.dispatch({ type: 'SET_DOC_PHOTO', side, photo: null });
+        vm.goTo('upload_documents', `capture_${side}`);
+    }, [vm]);
+    const onSubmitDocs = useCallback(async () => {
+        try {
+            await vm.ensureCustomerIdentity();
+            await vm.uploadCapturedDocuments();
+            vm.advance();
+        }
+        catch (err) {
+            surfaceError(err);
+        }
+    }, [vm, surfaceError]);
+    // ─── Screen routing ───
+    //
+    // Plain function (not useMemo) — the previous attempt at memoization
+    // depended on `vm` which is a fresh object each render, so the memo
+    // recomputed every time anyway. The routing logic is cheap; just compute
+    // it inline.
+    function renderScreen() {
+        const { currentStep, subStep } = vm.state;
+        if (currentStep === 'verification_welcome') {
+            return (<VerificationWelcomeScreen accountLoaded={vm.state.accountLoaded} onContinue={vm.advance}/>);
+        }
+        if (currentStep === 'personal_information') {
+            switch (subStep) {
+                case 'phone_auth':
+                    return (<PhoneAuthScreen capabilities={capabilities} state={vm.state} onChangePhoneCountry={vm.setPhoneCountry} onChangePhoneNumber={vm.setPhoneNumber} onChangeDob={vm.setDob} onMount={() => void vm.generateTermsOfServiceToken()} onSubmit={() => vm.sendOtp().catch(surfaceError)}/>);
+                case 'verify_phone':
+                    return (<VerifyPhoneScreen state={vm.state} onChangeOtp={vm.setOtpCode} onConfirmFrameOtp={() => vm.confirmFrameOtp().catch(surfaceError)} onProveResult={(result) => {
+                            if (result.status === 'success') {
+                                // Re-fetch account so Prove's server-side identity prefill
+                                // lands in the customer-information screen. Mirrors iOS
+                                // OnboardingContainerViewModel.sendOTPVerification.
+                                void vm
+                                    .refreshAccountAfterPhoneVerify()
+                                    .catch(() => { })
+                                    .finally(() => {
+                                    vm.goTo('personal_information', 'customer_information');
+                                });
+                                return;
+                            }
+                            // Prove failed → re-issue a Frame phone verification so the
+                            // OTP confirm endpoint accepts the new id, then surface the
+                            // failure message. Without re-issuing, confirmFrameOtp would
+                            // try to confirm the Prove-issued id.
+                            if (result.message)
+                                showToast(result.message);
+                            void vm.sendOtp({ forceFrameOtp: true }).catch(surfaceError);
+                        }} onSetUi={vm.setVerifyPhoneUi} onResend={() => void vm.sendOtp().catch(surfaceError)}/>);
+                case 'customer_information':
+                    return (<CustomerInformationScreen capabilities={capabilities} state={vm.state} onChangeFirstName={vm.setCustomerFirstName} onChangeLastName={vm.setCustomerLastName} onChangeEmail={vm.setCustomerEmail} onChangeDob={vm.setDob} onChangeSsn={vm.setSsnLast4} onChangeAddressField={vm.setAddressField} onSubmit={() => vm.submitCustomerInformation().catch(surfaceError)}/>);
+                case 'geolocation':
+                    return <GeolocationScreen accountId={vm.state.accountId} onAdvance={vm.advance}/>;
+                default:
+                    return null;
+            }
+        }
+        if (currentStep === 'confirm_payment_method') {
+            switch (subStep) {
+                case 'select':
+                    return (<SelectPaymentMethodScreen state={vm.state} onLoadMethods={vm.loadSavedPaymentMethods} onSelectMethod={(id) => vm.dispatch({ type: 'SELECT_PAYMENT_METHOD', id })} onContinue={onSelectPaymentMethodContinue}/>);
+                case 'add':
+                    return (<AddPaymentMethodScreen state={vm.state} onChangeAddressField={vm.setAddressField} onSubmitNewCard={onAddPaymentMethodSubmit} onSubmitAddressOnly={onAddPaymentMethodAddressOnly} onAddApplePay={onAddApplePayInOnboarding}/>);
+                case 'secure_3ds':
+                    return (<SecurePMVerificationScreen state={vm.state} onPoll={(signal) => vm.poll3DS({ signal })} onResend={() => vm.resend3DS().catch(surfaceError)} onSuccess={onSecurePMSuccess} onFailure={onSecurePMFailure}/>);
+                default:
+                    return null;
+            }
+        }
+        if (currentStep === 'confirm_bank_account') {
+            switch (subStep) {
+                case 'select':
+                    return (<SelectPayoutMethodScreen state={vm.state} onLoadMethods={vm.loadSavedPayoutMethods} onSelectMethod={(id) => vm.dispatch({ type: 'SELECT_PAYOUT_METHOD', id })} onContinue={onSelectPayoutContinue}/>);
+                case 'add':
+                    return (<AddPayoutMethodScreen state={vm.state} onChangeAchField={vm.setAchField} onChangeAchAccountType={vm.setAchAccountType} onChangeManualMode={vm.setAchManualMode} onChangeAddressField={vm.setAddressField} onOpenPlaidLink={onAddPayoutPlaid} onSubmitManualAch={onAddPayoutManual}/>);
+                default:
+                    return null;
+            }
+        }
+        if (currentStep === 'upload_documents') {
+            const idType = vm.state.docs.idType;
+            const requiresBack = idType !== null && idType !== 'passport';
+            switch (subStep) {
+                case 'list':
+                    return (<UploadDocumentsListScreen state={vm.state} onChangeIdType={(value) => vm.dispatch({ type: 'SET_DOC_ID_TYPE', value })} onCaptureFront={() => vm.goTo('upload_documents', 'capture_front')} onCaptureBack={() => vm.goTo('upload_documents', 'capture_back')} onCaptureSelfie={() => vm.goTo('upload_documents', 'capture_selfie')} onSubmit={onSubmitDocs} isComplete={areDocsComplete(vm.state)}/>);
+                case 'capture_front':
+                case 'capture_back':
+                case 'capture_selfie': {
+                    const side = subStep === 'capture_front'
+                        ? 'front'
+                        : subStep === 'capture_back'
+                            ? 'back'
+                            : 'selfie';
+                    return (<CaptureScreen title={side === 'front'
+                            ? 'Front of ID'
+                            : side === 'back'
+                                ? 'Back of ID'
+                                : 'Selfie'} prompt={side === 'selfie'
+                            ? 'Center your face inside the oval, then tap the shutter.'
+                            : 'Align your ID inside the frame, then tap the shutter.'} viewfinder={side === 'selfie' ? 'oval' : 'rectangle'} cameraPosition={side === 'selfie' ? 'front' : 'back'} onCaptured={(photo) => onCaptureDone(side, photo.uri, photo.type, photo.name)} onCancel={() => vm.goTo('upload_documents', 'list')}/>);
+                }
+                case 'review_front':
+                case 'review_back':
+                case 'review_selfie': {
+                    const side = subStep === 'review_front'
+                        ? 'front'
+                        : subStep === 'review_back'
+                            ? 'back'
+                            : 'selfie';
+                    const photo = vm.state.docs[side];
+                    if (!photo) {
+                        // Should never happen — defensive route back to capture.
+                        vm.goTo('upload_documents', `capture_${side}`);
+                        return null;
+                    }
+                    return (<ReviewScreen title={`Review ${side === 'selfie' ? 'selfie' : `${side} of ID`}`} prompt="Make sure the photo is clear and readable." photo={photo} onUse={() => onReviewUse()} onRetake={() => onReviewRetake(side)} onCancel={() => vm.goTo('upload_documents', 'list')}/>);
+                }
+                default:
+                    // Suppress unused-var on requiresBack — keeps the visual reminder
+                    // that passport doesn't need a back capture.
+                    void requiresBack;
+                    return null;
+            }
+        }
+        if (currentStep === 'verification_submitted') {
+            return (<VerificationSubmittedScreen onDone={() => vm.complete()}/>);
+        }
+        return null;
+    }
+    const screenContent = renderScreen();
+    // Skip the BottomSheet chrome for screens that own their entire visual
+    // surface — welcome, terminal "submitted," and the camera capture/review
+    // pages. The chrome would otherwise paste an empty title bar + close
+    // button over their full-screen layouts.
+    const { currentStep, subStep } = vm.state;
+    const isTerminalScreen = currentStep === 'verification_welcome' || currentStep === 'verification_submitted';
+    const isFullBleedDoc = currentStep === 'upload_documents' &&
+        typeof subStep === 'string' &&
+        (subStep.startsWith('capture_') || subStep.startsWith('review_'));
+    const isFullBleed = isTerminalScreen || isFullBleedDoc;
+    // onFail is reserved for future host-level failure paths (e.g. SDK init
+    // race conditions detected mid-flow). No current code path invokes it.
+    void onFail;
+    if (isFullBleed)
+        return screenContent;
+    return (<OnboardingChrome state={vm.state} onClose={onCancel}>
+      {screenContent}
+    </OnboardingChrome>);
+}

package/lib/ui/screens/onboarding/VerificationSubmittedScreen.d.ts

@@ -0,0 +1,5 @@
+export interface VerificationSubmittedScreenProps {
+    onDone: () => void;
+}
+export declare function VerificationSubmittedScreen({ onDone }: VerificationSubmittedScreenProps): import("react").JSX.Element;
+//# sourceMappingURL=VerificationSubmittedScreen.d.ts.map

package/lib/ui/screens/onboarding/VerificationSubmittedScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerificationSubmittedScreen.d.ts","sourceRoot":"","sources":["../../../../src/ui/screens/onboarding/VerificationSubmittedScreen.tsx"],"names":[],"mappings":"AAWA,MAAM,WAAW,gCAAgC;IAC/C,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,wBAAgB,2BAA2B,CAAC,EAAE,MAAM,EAAE,EAAE,gCAAgC,+BAuCvF"}

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

@@ -0,0 +1,63 @@
+import { useMemo } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { useFrameTheme } from '../../theme/ThemeContext';
+import { Button } from '../../primitives/Button';
+import { Icon } from '../../assets';
+import { FORM_SPACING } from './formSpacing';
+export function VerificationSubmittedScreen({ onDone }) {
+    const theme = useFrameTheme();
+    const styles = useMemo(() => createStyles(theme), [theme]);
+    return (<View style={styles.container}>
+      <View style={styles.spacer}/>
+      <Icon name="person-check" size={96}/>
+      <Text style={[
+            styles.title,
+            {
+                color: theme.colors.textPrimary,
+                fontSize: theme.fonts.heading.size,
+                fontWeight: theme.fontWeights.heading,
+                lineHeight: theme.fontLineHeights.heading,
+            },
+        ]}>
+        Verification Submitted
+      </Text>
+      <Text style={[
+            styles.body,
+            {
+                color: theme.colors.textSecondary,
+                fontSize: theme.fonts.bodySmall.size,
+                lineHeight: theme.fontLineHeights.bodySmall,
+            },
+        ]}>
+        Congratulations! You've submitted your identity verification check. You're ready to proceed.
+      </Text>
+      <View style={styles.spacer}/>
+      <View style={styles.footer}>
+        <Button text="Done" onPress={onDone}/>
+      </View>
+    </View>);
+}
+function createStyles(_theme) {
+    return StyleSheet.create({
+        container: {
+            flex: 1,
+            alignItems: 'center',
+            gap: 10,
+        },
+        spacer: {
+            flex: 1,
+        },
+        title: {
+            textAlign: 'center',
+        },
+        body: {
+            textAlign: 'center',
+            paddingHorizontal: FORM_SPACING.contentHorizontal,
+        },
+        footer: {
+            alignSelf: 'stretch',
+            paddingBottom: FORM_SPACING.sectionBottom,
+            paddingHorizontal: FORM_SPACING.sectionBottom,
+        },
+    });
+}

package/lib/ui/screens/onboarding/confirmBankAccount/AddPayoutMethodScreen.d.ts

@@ -0,0 +1,12 @@
+import type { AchAccountType, OnboardingAch, OnboardingAddress, OnboardingState } from '../onboardingReducer';
+export interface AddPayoutMethodScreenProps {
+    state: OnboardingState;
+    onChangeAchField: (field: keyof Omit<OnboardingAch, 'accountType'>, value: string) => void;
+    onChangeAchAccountType: (value: AchAccountType) => void;
+    onChangeManualMode: (value: boolean) => void;
+    onChangeAddressField: (field: keyof OnboardingAddress, value: string) => void;
+    onOpenPlaidLink: () => Promise<string>;
+    onSubmitManualAch: () => Promise<string>;
+}
+export declare function AddPayoutMethodScreen({ state, onChangeAchField, onChangeAchAccountType, onChangeManualMode, onChangeAddressField, onOpenPlaidLink, onSubmitManualAch, }: AddPayoutMethodScreenProps): import("react").JSX.Element;
+//# sourceMappingURL=AddPayoutMethodScreen.d.ts.map

package/lib/ui/screens/onboarding/confirmBankAccount/AddPayoutMethodScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddPayoutMethodScreen.d.ts","sourceRoot":"","sources":["../../../../../src/ui/screens/onboarding/confirmBankAccount/AddPayoutMethodScreen.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACV,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,eAAe,EAChB,MAAM,sBAAsB,CAAC;AAe9B,MAAM,WAAW,0BAA0B;IACzC,KAAK,EAAE,eAAe,CAAC;IACvB,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,aAAa,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3F,sBAAsB,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACxD,kBAAkB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAM,iBAAiB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9E,eAAe,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,CAAC;IACvC,iBAAiB,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,CAAC;CAC1C;AAED,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,gBAAgB,EAChB,sBAAsB,EACtB,kBAAkB,EAClB,oBAAoB,EACpB,eAAe,EACf,iBAAiB,GAClB,EAAE,0BAA0B,+BAmJ5B"}

package/lib/ui/screens/onboarding/confirmBankAccount/AddPayoutMethodScreen.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 { DropDown } from '../../../primitives/DropDown';
+import { BillingAddressDetailView } from '../../../primitives/BillingAddressDetailView';
+import { isPlaidAvailable } from '../../../../plaid';
+import { showToast } from '../../../primitives/toastCenter';
+import { FORM_SPACING } from '../formSpacing';
+// Add a payout method. Two paths:
+//   - Plaid Connect (preferred when react-native-plaid-link-sdk is installed)
+//   - Manual ACH form (routing 9-digit + ABA, account 4–17 digits, account
+//     type dropdown, US billing address)
+//
+// "Enter manually" is always available; "Connect with Plaid" only when the
+// SDK is linked.
+const ACCOUNT_TYPE_OPTIONS = [
+    { value: 'checking', label: 'Checking' },
+    { value: 'savings', label: 'Savings' },
+];
+export function AddPayoutMethodScreen({ state, onChangeAchField, onChangeAchAccountType, onChangeManualMode, onChangeAddressField, onOpenPlaidLink, onSubmitManualAch, }) {
+    const theme = useFrameTheme();
+    const styles = useMemo(() => createStyles(theme), [theme]);
+    const plaidAvailable = isPlaidAvailable();
+    const manual = state.achManualMode;
+    async function handlePlaid() {
+        try {
+            await onOpenPlaidLink();
+        }
+        catch (err) {
+            // frameError always attaches a `code`; non-Frame errors won't, and the
+            // optional access flows to the toast fallback.
+            const code = err.code;
+            // USER_CANCELED is silent — the user backed out intentionally. Other
+            // failures surface as toasts so the user knows the attempt didn't take.
+            if (code === 'USER_CANCELED')
+                return;
+            const message = err instanceof Error ? err.message : 'Could not connect with Plaid.';
+            showToast(message);
+        }
+    }
+    async function handleManualSubmit() {
+        try {
+            await onSubmitManualAch();
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : 'Could not save bank account.';
+            showToast(message);
+        }
+    }
+    return (<View style={styles.container}>
+      <ScrollView contentContainerStyle={styles.scrollContent} keyboardShouldPersistTaps="handled">
+        <Text style={[
+            styles.heading,
+            {
+                color: theme.colors.textPrimary,
+                fontSize: theme.fonts.heading.size,
+                fontWeight: theme.fontWeights.heading,
+                lineHeight: theme.fontLineHeights.heading,
+            },
+        ]}>
+          Add Bank Account
+        </Text>
+
+        {plaidAvailable ? (<View style={styles.plaidBlock}>
+            <Button text="Connect Bank Account" enabled={!state.isPerformingAction} isLoading={state.isPerformingAction} onPress={handlePlaid}/>
+            <View style={styles.orRow}>
+              <View style={[styles.orLine, { backgroundColor: theme.colors.surfaceStroke }]}/>
+              <Text style={[styles.orLabel, { color: theme.colors.textSecondary }]}>Or</Text>
+              <View style={[styles.orLine, { backgroundColor: theme.colors.surfaceStroke }]}/>
+            </View>
+          </View>) : null}
+
+        {!manual ? (<Button text="Enter manually" variant="secondary" onPress={() => onChangeManualMode(true)}/>) : (<>
+            <View style={styles.section}>
+              <Text style={[
+                styles.sectionTitle,
+                {
+                    color: theme.colors.textPrimary,
+                    fontSize: theme.fonts.headline.size,
+                    fontWeight: theme.fontWeights.headline,
+                    lineHeight: theme.fontLineHeights.headline,
+                },
+            ]}>
+                Bank Details
+              </Text>
+              <ValidatedTextField prompt="Routing Number" value={state.ach.routingNumber} onChangeText={(v) => onChangeAchField('routingNumber', v)} error={state.fieldErrors['ach.routingNumber']} keyboardType="number-pad" characterLimit={9}/>
+              <ValidatedTextField prompt="Account Number" value={state.ach.accountNumber} onChangeText={(v) => onChangeAchField('accountNumber', v)} error={state.fieldErrors['ach.accountNumber']} keyboardType="number-pad" characterLimit={17} secureTextEntry/>
+              <DropDown prompt="Account Type" options={ACCOUNT_TYPE_OPTIONS} selected={state.ach.accountType} onSelect={onChangeAchAccountType} testID="onboarding.ach.account_type"/>
+            </View>
+
+            <View style={styles.section}>
+              <Text style={[
+                styles.sectionTitle,
+                {
+                    color: theme.colors.textPrimary,
+                    fontSize: theme.fonts.headline.size,
+                    fontWeight: theme.fontWeights.headline,
+                    lineHeight: theme.fontLineHeights.headline,
+                },
+            ]}>
+                Billing Address
+              </Text>
+              <BillingAddressDetailView address={state.address} errors={state.fieldErrors} onChangeField={onChangeAddressField} international={false}/>
+            </View>
+          </>)}
+      </ScrollView>
+      {manual ? (<View style={styles.footer}>
+          <Button text="Add Bank Account" enabled={!state.isPerformingAction} isLoading={state.isPerformingAction} onPress={handleManualSubmit}/>
+        </View>) : null}
+    </View>);
+}
+function createStyles(_theme) {
+    return StyleSheet.create({
+        container: {
+            flex: 1,
+        },
+        scrollContent: {
+            paddingHorizontal: FORM_SPACING.contentHorizontal,
+            paddingBottom: FORM_SPACING.contentBottom,
+        },
+        heading: {
+            marginTop: FORM_SPACING.headingTop,
+            marginBottom: FORM_SPACING.headingBottom,
+        },
+        plaidBlock: {
+            marginBottom: 8,
+        },
+        orRow: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            marginVertical: 16,
+            gap: 8,
+        },
+        orLine: {
+            flex: 1,
+            height: StyleSheet.hairlineWidth,
+        },
+        orLabel: {
+            fontSize: 12,
+            textTransform: 'uppercase',
+        },
+        section: {
+            marginBottom: FORM_SPACING.sectionBottom,
+            gap: FORM_SPACING.fieldGap,
+        },
+        sectionTitle: {
+        // No marginBottom — `section.gap` handles spacing between title and
+        // first field. Every section in every form gets the same rhythm.
+        },
+        footer: {
+            paddingHorizontal: FORM_SPACING.footerHorizontal,
+            paddingVertical: FORM_SPACING.footerVertical,
+        },
+    });
+}

package/lib/ui/screens/onboarding/confirmBankAccount/SelectPayoutMethodScreen.d.ts

@@ -0,0 +1,9 @@
+import type { OnboardingState } from '../onboardingReducer';
+export interface SelectPayoutMethodScreenProps {
+    state: OnboardingState;
+    onLoadMethods: () => Promise<void>;
+    onSelectMethod: (id: string | null) => void;
+    onContinue: () => void;
+}
+export declare function SelectPayoutMethodScreen({ state, onLoadMethods, onSelectMethod, onContinue, }: SelectPayoutMethodScreenProps): import("react").JSX.Element;
+//# sourceMappingURL=SelectPayoutMethodScreen.d.ts.map

package/lib/ui/screens/onboarding/confirmBankAccount/SelectPayoutMethodScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectPayoutMethodScreen.d.ts","sourceRoot":"","sources":["../../../../../src/ui/screens/onboarding/confirmBankAccount/SelectPayoutMethodScreen.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAM5D,MAAM,WAAW,6BAA6B;IAC5C,KAAK,EAAE,eAAe,CAAC;IACvB,aAAa,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACnC,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC5C,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,wBAAgB,wBAAwB,CAAC,EACvC,KAAK,EACL,aAAa,EACb,cAAc,EACd,UAAU,GACX,EAAE,6BAA6B,+BAqG/B"}

package/lib/ui/screens/onboarding/confirmBankAccount/SelectPayoutMethodScreen.js

@@ -0,0 +1,125 @@
+import { useEffect, useMemo } from 'react';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import { useFrameTheme } from '../../../theme/ThemeContext';
+import { Button } from '../../../primitives/Button';
+import { PaymentMethodRow } from '../../../primitives/PaymentMethodRow';
+import { Icon } from '../../../assets';
+import { FORM_SPACING } from '../formSpacing';
+export function SelectPayoutMethodScreen({ state, onLoadMethods, onSelectMethod, onContinue, }) {
+    const theme = useFrameTheme();
+    const styles = useMemo(() => createStyles(theme), [theme]);
+    useEffect(() => {
+        void onLoadMethods();
+    }, [onLoadMethods]);
+    const isAddNewSelected = state.selectedPayoutMethodId === null;
+    return (<View style={styles.container}>
+      <ScrollView contentContainerStyle={styles.scrollContent} keyboardShouldPersistTaps="handled">
+        <Text style={[
+            styles.heading,
+            {
+                color: theme.colors.textPrimary,
+                fontSize: theme.fonts.heading.size,
+                fontWeight: theme.fontWeights.heading,
+                lineHeight: theme.fontLineHeights.heading,
+            },
+        ]}>
+          Select A Payout Method
+        </Text>
+        <Text style={[
+            styles.body,
+            {
+                color: theme.colors.textSecondary,
+                fontSize: theme.fonts.body.size,
+                lineHeight: theme.fontLineHeights.body,
+            },
+        ]}>
+          Choose a saved payout method or add a new one to continue
+        </Text>
+
+        {state.savedPayoutMethods.length > 0 ? (<>
+            <Text style={[
+                styles.sectionHeader,
+                {
+                    color: theme.colors.textPrimary,
+                    fontSize: theme.fonts.bodySmall.size,
+                    fontWeight: theme.fontWeights.label,
+                },
+            ]}>
+              Saved Payout Methods
+            </Text>
+            <View style={styles.list}>
+              {state.savedPayoutMethods.map((pm) => (<PaymentMethodRow key={pm.id} title={achTitle(pm)} subtitle={achSubtitle(pm) ?? undefined} selected={state.selectedPayoutMethodId === pm.id} onPress={() => onSelectMethod(pm.id)} icon={<Icon name="bank-icon" width={40} height={28} color={theme.colors.textPrimary}/>} testID={`onboarding.payout.${pm.id}`}/>))}
+            </View>
+          </>) : null}
+
+        <Text style={[
+            styles.sectionHeader,
+            {
+                color: theme.colors.textPrimary,
+                fontSize: theme.fonts.bodySmall.size,
+                fontWeight: theme.fontWeights.label,
+            },
+        ]}>
+          Add Payout Method
+        </Text>
+        <View style={styles.list}>
+          <PaymentMethodRow title="Bank Account (ACH)" selected={isAddNewSelected} onPress={() => onSelectMethod(null)} icon={<Icon name="empty-card" width={40} height={28} color={theme.colors.textPrimary}/>} testID="onboarding.payout.add_new"/>
+        </View>
+      </ScrollView>
+      <View style={styles.footer}>
+        <Button text="Continue" enabled={!state.isPerformingAction} isLoading={state.isPerformingAction} onPress={onContinue}/>
+      </View>
+    </View>);
+}
+function achTitle(pm) {
+    const last4 = pm.ach?.last_four;
+    if (last4)
+        return `•••• ${last4}`;
+    return 'Bank account';
+}
+function achSubtitle(pm) {
+    // Mirrors iOS SelectPayoutMethodView: "{Type} Account" (e.g. "Checking Account").
+    const type = pm.ach?.account_type;
+    if (type)
+        return `${prettyAccountType(type)} Account`;
+    return null;
+}
+function prettyAccountType(raw) {
+    switch (raw.toLowerCase()) {
+        case 'checking':
+            return 'Checking';
+        case 'savings':
+            return 'Savings';
+        default:
+            return raw;
+    }
+}
+function createStyles(_theme) {
+    return StyleSheet.create({
+        container: {
+            flex: 1,
+        },
+        scrollContent: {
+            paddingHorizontal: FORM_SPACING.contentHorizontal,
+            paddingBottom: FORM_SPACING.contentBottom,
+        },
+        heading: {
+            marginTop: FORM_SPACING.headingTop,
+        },
+        body: {
+            marginTop: FORM_SPACING.headingTop,
+            marginBottom: FORM_SPACING.subheadBottom,
+        },
+        sectionHeader: {
+            marginTop: FORM_SPACING.sectionBottom,
+            marginBottom: 8,
+        },
+        list: {
+            gap: 8,
+        },
+        footer: {
+            paddingHorizontal: FORM_SPACING.footerHorizontal,
+            paddingVertical: FORM_SPACING.footerVertical,
+        },
+    });
+}