framepayments-react-native 3.0.0 → 4.0.0

package/lib/ui/screens/onboarding/uploadDocuments/UploadDocumentsListScreen.js

@@ -0,0 +1,134 @@
+import { useEffect, useMemo } from 'react';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import { useFrameTheme } from '../../../theme/ThemeContext';
+import { Button } from '../../../primitives/Button';
+import { DropDown } from '../../../primitives/DropDown';
+import { FORM_SPACING } from '../formSpacing';
+// Document upload checklist. The user picks an ID type, then taps each row
+// (Front / Back / Selfie) to capture. Back is hidden for passport — single
+// page. Submit fires when all required photos are captured.
+const ID_TYPE_OPTIONS = [
+    { value: 'drivers_license', label: "Driver's license" },
+    { value: 'passport', label: 'Passport' },
+    { value: 'state_id', label: 'State ID' },
+    { value: 'military_id', label: 'Military ID' },
+];
+export function UploadDocumentsListScreen({ state, onChangeIdType, onCaptureFront, onCaptureBack, onCaptureSelfie, onSubmit, isComplete, }) {
+    const theme = useFrameTheme();
+    const styles = useMemo(() => createStyles(theme), [theme]);
+    const idType = state.docs.idType;
+    const requiresBack = idType !== null && idType !== 'passport';
+    // Auto-select drivers_license on first render so the dropdown's UI state
+    // matches the reducer state. Without this, the UI looks like an ID type is
+    // picked but areDocsComplete returns false (because idType is null).
+    useEffect(() => {
+        if (idType === null)
+            onChangeIdType('drivers_license');
+        // Only fires on initial mount when idType is null; if the user picks a
+        // different type later the dependency is stable and this effect no-ops.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    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,
+            },
+        ]}>
+          Upload your ID
+        </Text>
+        <Text style={[
+            styles.body,
+            {
+                color: theme.colors.textSecondary,
+                fontSize: theme.fonts.body.size,
+                lineHeight: theme.fontLineHeights.body,
+            },
+        ]}>
+          We'll need a clear photo of your ID and a selfie to verify your identity.
+        </Text>
+
+        <DropDown prompt="ID type" options={ID_TYPE_OPTIONS} selected={idType ?? 'drivers_license'} onSelect={onChangeIdType} testID="onboarding.docs.idtype"/>
+
+        {idType ? (<View style={styles.rows}>
+            <DocRow title="Front of ID" done={state.docs.front !== null} onPress={onCaptureFront} testID="onboarding.docs.front"/>
+            {requiresBack ? (<DocRow title="Back of ID" done={state.docs.back !== null} onPress={onCaptureBack} testID="onboarding.docs.back"/>) : null}
+            <DocRow title="Selfie" done={state.docs.selfie !== null} onPress={onCaptureSelfie} testID="onboarding.docs.selfie"/>
+          </View>) : null}
+      </ScrollView>
+      <View style={styles.footer}>
+        <Button text="Submit for verification" enabled={isComplete && !state.isPerformingAction} isLoading={state.isPerformingAction} onPress={onSubmit}/>
+      </View>
+    </View>);
+}
+function DocRow({ title, done, onPress, testID }) {
+    const theme = useFrameTheme();
+    const styles = useMemo(() => createStyles(theme), [theme]);
+    return (<View style={[
+            styles.row,
+            {
+                borderColor: done ? theme.colors.textPrimary : theme.colors.surfaceStroke,
+                borderRadius: theme.radii.medium,
+            },
+        ]} testID={testID}>
+      <View style={styles.rowText}>
+        <Text style={{
+            color: theme.colors.textPrimary,
+            fontSize: theme.fonts.body.size,
+            fontWeight: theme.fontWeights.label,
+            lineHeight: theme.fontLineHeights.body,
+        }}>
+          {title}
+        </Text>
+        <Text style={{
+            color: done ? theme.colors.textPrimary : theme.colors.textSecondary,
+            fontSize: theme.fonts.bodySmall.size,
+            marginTop: 2,
+        }}>
+          {done ? '✓ Captured · Tap to retake' : 'Tap to capture'}
+        </Text>
+      </View>
+      <Button text={done ? 'Retake' : 'Capture'} variant="secondary" onPress={onPress} style={{ minWidth: 100 }}/>
+    </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,
+        },
+        body: {
+            marginBottom: FORM_SPACING.subheadBottom,
+        },
+        rows: {
+            marginTop: FORM_SPACING.sectionBottom,
+            gap: FORM_SPACING.fieldGap,
+        },
+        row: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            borderWidth: StyleSheet.hairlineWidth,
+            paddingVertical: FORM_SPACING.fieldGap,
+            paddingHorizontal: FORM_SPACING.fieldGap,
+            gap: FORM_SPACING.fieldGap,
+        },
+        rowText: {
+            flex: 1,
+        },
+        footer: {
+            paddingHorizontal: FORM_SPACING.footerHorizontal,
+            paddingVertical: FORM_SPACING.footerVertical,
+        },
+    });
+}

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

@@ -0,0 +1,90 @@
+import type { OnboardingCapability, OnboardingResult } from '../../../types';
+import { type AchAccountType, type OnboardingAction, type OnboardingAddress, type OnboardingState, type OnboardingStep, type OnboardingSubStep, type VerifyPhoneUi } from './onboardingReducer';
+import { isCapabilitySatisfied } from './onboardingSelectors';
+export interface OnboardingViewModelArgs {
+    accountId: string | null;
+    capabilities: ReadonlyArray<OnboardingCapability>;
+    onComplete: (result: OnboardingResult) => void;
+    onCancel: () => void;
+}
+export interface OnboardingViewModelResult {
+    state: OnboardingState;
+    dispatch: React.Dispatch<OnboardingAction>;
+    advance: () => void;
+    back: () => void;
+    goTo: (step: OnboardingStep, subStep: OnboardingSubStep | null) => void;
+    cancel: () => void;
+    complete: () => void;
+    setPhoneCountry: (alpha2: string, callingCode: string) => void;
+    setPhoneNumber: (value: string) => void;
+    setDob: (next: {
+        month: string;
+        day: string;
+        year: string;
+    }) => void;
+    setOtpCode: (value: string) => void;
+    /** Fetch a TOS token from TermsOfServiceAPI.createToken and store it on the
+     *  reducer. Mirrors iOS OnboardingContainerViewModel.generateTermsOfServiceToken
+     *  (called from UserIdentificationView.authenticationView.onAppear when
+     *  termsOfServiceToken == nil). Idempotent — no-op if a token is already
+     *  cached. Non-fatal on failure: account create/update still proceeds with
+     *  a null token, mirroring iOS's silent print-and-continue. */
+    generateTermsOfServiceToken: () => Promise<void>;
+    setCustomerFirstName: (value: string) => void;
+    setCustomerLastName: (value: string) => void;
+    setCustomerEmail: (value: string) => void;
+    setSsnLast4: (value: string) => void;
+    setAddressField: (field: keyof OnboardingAddress, value: string) => void;
+    setVerifyPhoneUi: (ui: VerifyPhoneUi | null) => void;
+    setAchField: (field: 'routingNumber' | 'accountNumber', value: string) => void;
+    setAchAccountType: (value: AchAccountType) => void;
+    setAchManualMode: (value: boolean) => void;
+    /** Create a phone verification and route the user to the verify-phone
+     *  screen. When `forceFrameOtp=true` the Prove branch is bypassed even if
+     *  the backend returns a prove_auth_token (used after Prove falls back). */
+    sendOtp: (opts?: {
+        forceFrameOtp?: boolean;
+    }) => Promise<void>;
+    confirmFrameOtp: () => Promise<void>;
+    /** Re-fetch the account + re-run prefill after phone verification (Prove or
+     *  Twilio). Mirrors iOS OnboardingContainerViewModel.checkExistingAccount()
+     *  called from sendOTPVerification / confirmTwilioOTP. */
+    refreshAccountAfterPhoneVerify: () => Promise<void>;
+    submitCustomerInformation: () => Promise<void>;
+    loadSavedPaymentMethods: () => Promise<void>;
+    submitNewCard: (card: {
+        pan: string;
+        expirationMonth: string;
+        expirationYear: string;
+        cvc: string;
+    }) => Promise<string>;
+    /** Add an Apple Pay token to the account (no charge). iOS only. */
+    addApplePayToOwner: () => Promise<string>;
+    /** Patch billing onto a saved payment method (addressVerificationOnly path). */
+    updateSavedPaymentMethodBilling: (paymentMethodId: string) => Promise<void>;
+    start3DS: (paymentMethodId: string) => Promise<void>;
+    /** Poll threeDS.get until the verification terminates. Resolves on
+     *  succeeded, throws on failed, timeout, or signal abort. */
+    poll3DS: (opts?: {
+        timeoutMs?: number;
+        intervalMs?: number;
+        signal?: AbortSignal;
+    }) => Promise<void>;
+    resend3DS: () => Promise<void>;
+    loadSavedPayoutMethods: () => Promise<void>;
+    submitManualAch: () => Promise<string>;
+    connectPlaidAccount: (params: {
+        publicToken: string;
+        accountId: string;
+        institutionName?: string;
+        subtype?: string;
+    }) => Promise<string>;
+    /** End-to-end Plaid Link: fetches token, opens Link, calls
+     *  paymentMethods.connectPlaidBankAccount. Resolves with the new pm id. */
+    openPlaidLink: () => Promise<string>;
+    ensureCustomerIdentity: () => Promise<string>;
+    uploadCapturedDocuments: () => Promise<void>;
+}
+export declare function useOnboardingViewModel({ accountId: initialAccountId, capabilities, onComplete, onCancel, }: OnboardingViewModelArgs): OnboardingViewModelResult;
+export { isCapabilitySatisfied };
+//# sourceMappingURL=useOnboardingViewModel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useOnboardingViewModel.d.ts","sourceRoot":"","sources":["../../../../src/ui/screens/onboarding/useOnboardingViewModel.ts"],"names":[],"mappings":"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"}