framepayments-react-native 3.0.0 → 4.0.0

package/lib/ui/screens/checkout/checkoutReducer.js

@@ -0,0 +1,158 @@
+import { validateEmail, validateFullName, validateNonEmpty, validateZipUS, } from '../../../validation';
+export function initialCheckoutState(addressMode = 'required') {
+    return {
+        accountPaymentOptions: null,
+        selectedAccountPaymentOptionId: null,
+        customerName: '',
+        customerEmail: '',
+        address: {
+            line1: '',
+            line2: '',
+            city: '',
+            state: '',
+            country: 'US',
+            postalCode: '',
+        },
+        addressMode,
+        saveCard: false,
+        isPerformingAction: false,
+        fieldErrors: {},
+        cardComplete: false,
+    };
+}
+export function checkoutReducer(state, action) {
+    switch (action.type) {
+        case 'SET_PAYMENT_OPTIONS':
+            return { ...state, accountPaymentOptions: action.options };
+        case 'SELECT_SAVED_OPTION':
+            return { ...state, selectedAccountPaymentOptionId: action.id };
+        case 'SET_CUSTOMER_NAME':
+            return {
+                ...state,
+                customerName: action.value,
+                fieldErrors: clearError(state.fieldErrors, 'customerName'),
+            };
+        case 'SET_CUSTOMER_EMAIL':
+            return {
+                ...state,
+                customerEmail: action.value,
+                fieldErrors: clearError(state.fieldErrors, 'customerEmail'),
+            };
+        case 'SET_ADDRESS_FIELD': {
+            const nextAddress = { ...state.address, [action.field]: action.value };
+            const errorKey = addressFieldToErrorKey(action.field);
+            return {
+                ...state,
+                address: nextAddress,
+                fieldErrors: errorKey ? clearError(state.fieldErrors, errorKey) : state.fieldErrors,
+            };
+        }
+        case 'SET_ADDRESS_MODE':
+            return { ...state, addressMode: action.mode };
+        case 'SET_SAVE_CARD':
+            return { ...state, saveCard: action.value };
+        case 'SET_CARD_COMPLETE':
+            return { ...state, cardComplete: action.value };
+        case 'SET_PERFORMING_ACTION':
+            return { ...state, isPerformingAction: action.value };
+        case 'SET_FIELD_ERRORS':
+            return { ...state, fieldErrors: action.errors };
+        case 'CLEAR_FIELD_ERROR':
+            return { ...state, fieldErrors: clearError(state.fieldErrors, action.field) };
+    }
+}
+function clearError(errors, key) {
+    if (!(key in errors))
+        return errors;
+    const next = { ...errors };
+    delete next[key];
+    return next;
+}
+function addressFieldToErrorKey(field) {
+    switch (field) {
+        case 'line1':
+            return 'addressLine1';
+        case 'city':
+            return 'addressCity';
+        case 'state':
+            return 'addressState';
+        case 'postalCode':
+            return 'addressPostalCode';
+        default:
+            return null;
+    }
+}
+// Selectors
+export function isUsingSavedCard(state) {
+    return state.selectedAccountPaymentOptionId !== null;
+}
+export function shouldValidateAddress(state) {
+    if (state.addressMode === 'required')
+        return true;
+    if (state.addressMode === 'hidden')
+        return false;
+    // Optional mode: all-or-nothing. Validate iff any address field has input.
+    return (state.address.line1.trim() !== '' ||
+        state.address.line2.trim() !== '' ||
+        state.address.city.trim() !== '' ||
+        state.address.state.trim() !== '' ||
+        state.address.postalCode.trim() !== '');
+}
+export function hasUsablePaymentInput(state) {
+    // Either a saved card is selected, OR all new-card prerequisites are met.
+    if (isUsingSavedCard(state))
+        return true;
+    if (!state.cardComplete)
+        return false;
+    if (validateFullName(state.customerName) !== null)
+        return false;
+    if (validateEmail(state.customerEmail) !== null)
+        return false;
+    if (shouldValidateAddress(state)) {
+        if (validateNonEmpty(state.address.line1, 'Address') !== null)
+            return false;
+        if (validateNonEmpty(state.address.city, 'City') !== null)
+            return false;
+        if (validateNonEmpty(state.address.state, 'State') !== null)
+            return false;
+        if (state.address.country === 'US' && validateZipUS(state.address.postalCode) !== null)
+            return false;
+        if (state.address.country !== 'US' && validateNonEmpty(state.address.postalCode, 'Postal code') !== null)
+            return false;
+    }
+    return true;
+}
+export function validateForSubmit(state) {
+    if (isUsingSavedCard(state)) {
+        return { fieldErrors: {}, isValid: true };
+    }
+    const errors = {};
+    const nameError = validateFullName(state.customerName);
+    if (nameError)
+        errors.customerName = nameError;
+    const emailError = validateEmail(state.customerEmail);
+    if (emailError)
+        errors.customerEmail = emailError;
+    if (shouldValidateAddress(state)) {
+        const line1Error = validateNonEmpty(state.address.line1, 'Address');
+        if (line1Error)
+            errors.addressLine1 = line1Error;
+        const cityError = validateNonEmpty(state.address.city, 'City');
+        if (cityError)
+            errors.addressCity = cityError;
+        const stateError = validateNonEmpty(state.address.state, 'State');
+        if (stateError)
+            errors.addressState = stateError;
+        if (state.address.country === 'US') {
+            const zipError = validateZipUS(state.address.postalCode);
+            if (zipError)
+                errors.addressPostalCode = zipError;
+        }
+        else {
+            const postalError = validateNonEmpty(state.address.postalCode, 'Postal code');
+            if (postalError)
+                errors.addressPostalCode = postalError;
+        }
+    }
+    return { fieldErrors: errors, isValid: Object.keys(errors).length === 0 };
+}

package/lib/ui/screens/checkout/useCheckoutViewModel.d.ts

@@ -0,0 +1,19 @@
+import { checkoutReducer, type AddressMode, type CheckoutState } from './checkoutReducer';
+import type { PaymentCardFieldHandle } from '../../primitives/PaymentCardField';
+export interface UseCheckoutViewModelArgs {
+    accountId: string;
+    amount: number;
+    currency?: string;
+    addressMode?: AddressMode;
+    cardFieldRef: React.RefObject<PaymentCardFieldHandle | null>;
+}
+export interface UseCheckoutViewModelResult {
+    state: CheckoutState;
+    dispatch: React.Dispatch<Parameters<typeof checkoutReducer>[1]>;
+    hasUsableInput: boolean;
+    isUsingSaved: boolean;
+    shouldShowAddress: boolean;
+    submit: () => Promise<string>;
+}
+export declare function useCheckoutViewModel({ accountId, amount, currency, addressMode, cardFieldRef, }: UseCheckoutViewModelArgs): UseCheckoutViewModelResult;
+//# sourceMappingURL=useCheckoutViewModel.d.ts.map

package/lib/ui/screens/checkout/useCheckoutViewModel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCheckoutViewModel.d.ts","sourceRoot":"","sources":["../../../../src/ui/screens/checkout/useCheckoutViewModel.ts"],"names":[],"mappings":"AAMA,OAAO,EACL,eAAe,EAMf,KAAK,WAAW,EAChB,KAAK,aAAa,EACnB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAShF,MAAM,WAAW,wBAAwB;IACvC,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,sBAAsB,GAAG,IAAI,CAAC,CAAC;CAC9D;AAED,MAAM,WAAW,0BAA0B;IACzC,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAChE,cAAc,EAAE,OAAO,CAAC;IACxB,YAAY,EAAE,OAAO,CAAC;IACtB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,MAAM,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,CAAC;CAC/B;AAED,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,MAAM,EACN,QAAgB,EAChB,WAAwB,EACxB,YAAY,GACb,EAAE,wBAAwB,GAAG,0BAA0B,CA4HvD"}

package/lib/ui/screens/checkout/useCheckoutViewModel.js

@@ -0,0 +1,141 @@
+import { useCallback, useEffect, useReducer, useRef } from 'react';
+import { PaymentMethodType } from 'framepayments/dist/types/payment_methods';
+import { client } from '../../../client';
+import { configureEvervault, encryptWithEvervault } from '../../../evervault';
+import { __internal as configInternal } from '../../../config';
+import { ErrorCodes, frameError } from '../../../errors';
+import { checkoutReducer, hasUsablePaymentInput, initialCheckoutState, isUsingSavedCard, shouldValidateAddress, validateForSubmit, } from './checkoutReducer';
+export function useCheckoutViewModel({ accountId, amount, currency = 'USD', addressMode = 'required', cardFieldRef, }) {
+    const [state, dispatch] = useReducer(checkoutReducer, initialCheckoutState(addressMode));
+    const accountIdRef = useRef(accountId);
+    accountIdRef.current = accountId;
+    // Latest-state ref so `submit` can read the freshest reducer state without
+    // listing `state` as a useCallback dependency — that would re-create the
+    // callback on every keystroke and bust memoized children that consume it.
+    const stateRef = useRef(state);
+    stateRef.current = state;
+    // Sync re-entry guard. Reducer state changes are async — two rapid Pay taps
+    // both observe isPerformingAction=false before the first dispatch settles.
+    // The ref flips synchronously inside the callback so the second tap bails.
+    const performingRef = useRef(false);
+    // Load saved payment methods for the account.
+    useEffect(() => {
+        let cancelled = false;
+        (async () => {
+            try {
+                const resp = await client.sdk.accounts.getPaymentMethods(accountId);
+                if (cancelled)
+                    return;
+                dispatch({ type: 'SET_PAYMENT_OPTIONS', options: resp.data ?? [] });
+            }
+            catch {
+                // Empty list on failure; user can still enter a new card.
+                if (cancelled)
+                    return;
+                dispatch({ type: 'SET_PAYMENT_OPTIONS', options: [] });
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [accountId]);
+    const submit = useCallback(async () => {
+        if (performingRef.current) {
+            throw frameError(ErrorCodes.PAYMENT_FAILED, 'Submission already in flight.');
+        }
+        // Set the sync guard immediately. Anything that throws below the guard
+        // must clear it in the catch path — otherwise the next tap is wedged.
+        performingRef.current = true;
+        try {
+            const current = stateRef.current;
+            const validation = validateForSubmit(current);
+            if (!validation.isValid) {
+                dispatch({ type: 'SET_FIELD_ERRORS', errors: validation.fieldErrors });
+                throw frameError(ErrorCodes.PAYMENT_FAILED, 'Resolve the highlighted fields and try again.');
+            }
+            const usingSaved = isUsingSavedCard(current);
+            if (!usingSaved) {
+                const cardErrors = cardFieldRef.current?.validate() ?? null;
+                if (cardErrors) {
+                    const firstError = cardErrors.pan ?? cardErrors.expiry ?? cardErrors.cvc ?? 'Enter valid card details';
+                    throw frameError(ErrorCodes.PAYMENT_FAILED, firstError);
+                }
+            }
+            dispatch({ type: 'SET_PERFORMING_ACTION', value: true });
+            let paymentMethodId;
+            if (usingSaved) {
+                paymentMethodId = current.selectedAccountPaymentOptionId;
+            }
+            else {
+                const card = cardFieldRef.current.getValues();
+                await ensureEvervaultConfigured();
+                const [encryptedPan, encryptedCvc] = await Promise.all([
+                    encryptWithEvervault(card.pan),
+                    encryptWithEvervault(card.cvc),
+                ]);
+                const billing = shouldValidateAddress(current)
+                    ? {
+                        line_1: current.address.line1 || undefined,
+                        line_2: current.address.line2 || undefined,
+                        city: current.address.city || undefined,
+                        state: current.address.state || undefined,
+                        country: current.address.country || undefined,
+                        postal_code: current.address.postalCode || undefined,
+                    }
+                    : undefined;
+                const pm = await client.sdk.paymentMethods.createCard({
+                    type: PaymentMethodType.CARD,
+                    account: accountIdRef.current,
+                    card_number: encryptedPan,
+                    exp_month: card.expirationMonth,
+                    exp_year: card.expirationYear,
+                    cvc: encryptedCvc,
+                    billing,
+                });
+                if (!pm || typeof pm.id !== 'string') {
+                    throw frameError(ErrorCodes.PAYMENT_METHOD_FAILED, 'Frame returned no payment method id.');
+                }
+                paymentMethodId = pm.id;
+            }
+            const transfer = await client.sdk.transfers.create({
+                amount,
+                account_id: accountIdRef.current,
+                currency: currency.toLowerCase(),
+                source_payment_method_id: paymentMethodId,
+            });
+            if (!transfer || typeof transfer.id !== 'string') {
+                throw frameError(ErrorCodes.PAYMENT_FAILED, 'Frame returned no transfer id.');
+            }
+            cardFieldRef.current?.reset();
+            return transfer.id;
+        }
+        finally {
+            performingRef.current = false;
+            dispatch({ type: 'SET_PERFORMING_ACTION', value: false });
+        }
+    }, [amount, currency, cardFieldRef]);
+    return {
+        state,
+        dispatch,
+        hasUsableInput: hasUsablePaymentInput(state),
+        isUsingSaved: isUsingSavedCard(state),
+        shouldShowAddress: state.addressMode !== 'hidden',
+        submit,
+    };
+}
+// Resolve Evervault from the JS cache populated by Frame.initialize. If the
+// cache wasn't filled (rare race), fetch it on demand via the SDK. Memoization
+// inside configureEvervault prevents double-init.
+async function ensureEvervaultConfigured() {
+    const cached = configInternal.getEvervaultConfiguration();
+    if (cached) {
+        await configureEvervault(cached.teamId, cached.appId);
+        return;
+    }
+    const config = await client.sdk.configuration.getEvervaultConfiguration();
+    if (!config.team_id || !config.app_id) {
+        throw frameError(ErrorCodes.PAYMENT_FAILED, 'Evervault configuration is unavailable.');
+    }
+    configInternal.setEvervaultConfiguration({ teamId: config.team_id, appId: config.app_id });
+    await configureEvervault(config.team_id, config.app_id);
+}

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

@@ -0,0 +1,14 @@
+import { type ReactNode } from 'react';
+import type { OnboardingState } from './onboardingReducer';
+export interface OnboardingChromeProps {
+    state: OnboardingState;
+    /** Optional title rendered between back button and right spacer. */
+    title?: string;
+    /** Tap-back handler. When null/undefined, the back button is hidden. */
+    onBack?: () => void;
+    /** Close-modal handler (the X on the BottomSheet). */
+    onClose: () => void;
+    children: ReactNode;
+}
+export declare function OnboardingChrome({ state, title, onBack, onClose, children }: OnboardingChromeProps): import("react").JSX.Element;
+//# sourceMappingURL=OnboardingChrome.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OnboardingChrome.d.ts","sourceRoot":"","sources":["../../../../src/ui/screens/onboarding/OnboardingChrome.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKhD,OAAO,KAAK,EAAE,eAAe,EAAkB,MAAM,qBAAqB,CAAC;AAO3E,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,eAAe,CAAC;IACvB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wEAAwE;IACxE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,sDAAsD;IACtD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAWD,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,qBAAqB,+BAwBlG"}

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

@@ -0,0 +1,39 @@
+import { useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { BottomSheet } from '../../primitives/BottomSheet';
+import { ProgressBar } from '../../primitives/ProgressBar';
+import { PageHeader } from '../../primitives/PageHeader';
+// Steps shown in the progress bar. We hide the welcome screen (it's not
+// progress, it's an intro) and the terminal submitted screen.
+const PROGRESS_STEPS = [
+    'personal_information',
+    'confirm_payment_method',
+    'confirm_bank_account',
+    'upload_documents',
+];
+export function OnboardingChrome({ state, title, onBack, onClose, children }) {
+    const { progressTotal, progressCurrent, showProgress } = useMemo(() => {
+        const activeSteps = state.flow.filter((s) => PROGRESS_STEPS.includes(s));
+        const currentIndex = activeSteps.indexOf(state.currentStep);
+        // Hide the progress bar on intro / submitted to keep the visual focus on
+        // the message of those terminal-ish screens.
+        const visible = state.currentStep !== 'verification_welcome' &&
+            state.currentStep !== 'verification_submitted' &&
+            activeSteps.length > 0;
+        return {
+            progressTotal: activeSteps.length,
+            progressCurrent: currentIndex < 0 ? 0 : currentIndex,
+            showProgress: visible,
+        };
+    }, [state.flow, state.currentStep]);
+    return (<BottomSheet title="" onClose={onClose}>
+      {showProgress ? <ProgressBar total={progressTotal} current={progressCurrent}/> : null}
+      {title ? <PageHeader title={title} onBack={onBack}/> : null}
+      <View style={styles.body}>{children}</View>
+    </BottomSheet>);
+}
+const styles = StyleSheet.create({
+    body: {
+        flex: 1,
+    },
+});

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

@@ -0,0 +1,15 @@
+import type { OnboardingCapability, OnboardingResult } from '../../../types';
+export interface OnboardingRootProps {
+    accountId: string | null;
+    capabilities: ReadonlyArray<OnboardingCapability>;
+    /** Called when the user reaches VerificationSubmitted and taps Done. */
+    onComplete: (result: OnboardingResult) => void;
+    /** Called when the user dismisses the onboarding modal early. */
+    onCancel: () => void;
+    /** Reserved for unrecoverable host-level failures. Errors that surface to
+     *  the user (network, validation) are toasted internally — this callback
+     *  fires only when the whole onboarding session is unsalvageable. */
+    onFail: (error: unknown) => void;
+}
+export declare function OnboardingRoot({ accountId, capabilities, onComplete, onCancel, onFail, }: OnboardingRootProps): import("react").JSX.Element | null;
+//# sourceMappingURL=OnboardingRoot.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OnboardingRoot.d.ts","sourceRoot":"","sources":["../../../../src/ui/screens/onboarding/OnboardingRoot.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAqB7E,MAAM,WAAW,mBAAmB;IAClC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,YAAY,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAClD,wEAAwE;IACxE,UAAU,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC/C,iEAAiE;IACjE,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB;;yEAEqE;IACrE,MAAM,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAClC;AAMD,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,MAAM,GACP,EAAE,mBAAmB,sCAuZrB"}