framepayments-react-native 3.0.0 → 4.0.0

package/lib/ui/screens/cart/CartScreen.js

@@ -0,0 +1,165 @@
+import { useMemo } from 'react';
+import { Image, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { convertCentsToCurrencyString } from '../../../currency';
+import { useFrameTheme } from '../../theme/ThemeContext';
+import { BottomSheet } from '../../primitives/BottomSheet';
+import { Button } from '../../primitives/Button';
+import { useCartViewModel } from './useCartViewModel';
+const ITEM_ROW_HEIGHT = 65;
+const ITEM_IMAGE_SIZE = 40;
+export function CartScreen({ items, shippingAmountInCents, currency = 'USD', title = 'Frame Payments', subtitle = 'Cart', checkoutButtonTitle = 'Checkout', isCheckingOut = false, onCheckout, onClose, }) {
+    const theme = useFrameTheme();
+    const vm = useCartViewModel(items, shippingAmountInCents);
+    const styles = useMemo(() => createStyles(theme), [theme]);
+    return (<BottomSheet title="" showCloseButton onClose={onClose}>
+      <Text style={[
+            styles.title,
+            {
+                color: theme.colors.textPrimary,
+                fontSize: theme.fonts.title.size,
+                fontWeight: theme.fontWeights.title,
+                lineHeight: theme.fontLineHeights.title,
+            },
+        ]}>
+        {title}
+      </Text>
+      <View style={[styles.titleDivider, { backgroundColor: theme.colors.surfaceStroke }]}/>
+      <ScrollView contentContainerStyle={styles.scrollContent}>
+        <Text style={[
+            styles.subtitle,
+            {
+                color: theme.colors.textPrimary,
+                fontSize: theme.fonts.headline.size,
+                fontWeight: theme.fontWeights.headline,
+                lineHeight: theme.fontLineHeights.headline,
+            },
+        ]}>
+          {subtitle}
+        </Text>
+
+        {items.length === 0 ? (<View style={styles.empty}>
+            <Text style={{
+                color: theme.colors.textSecondary,
+                fontSize: theme.fonts.body.size,
+            }}>
+              Your cart is empty.
+            </Text>
+          </View>) : (items.map((item) => (<View key={item.id} style={[
+                styles.itemRow,
+                {
+                    borderColor: theme.colors.surfaceStroke,
+                    borderRadius: theme.radii.medium,
+                },
+            ]}>
+              {item.imageUrl ? (<Image source={{ uri: item.imageUrl }} style={styles.itemImage} resizeMode="cover"/>) : (<View style={[styles.itemImage, { backgroundColor: theme.colors.surfaceStroke }]}/>)}
+              <Text numberOfLines={2} style={{
+                flex: 1,
+                color: theme.colors.textPrimary,
+                fontSize: theme.fonts.headline.size,
+                fontWeight: theme.fontWeights.headline,
+                lineHeight: theme.fontLineHeights.headline,
+            }}>
+                {item.title}
+              </Text>
+              <Text style={{
+                color: theme.colors.textPrimary,
+                fontSize: theme.fonts.headline.size,
+                fontWeight: theme.fontWeights.headline,
+                lineHeight: theme.fontLineHeights.headline,
+            }}>
+                {convertCentsToCurrencyString(item.amountInCents, currency)}
+              </Text>
+            </View>)))}
+
+        <SummaryRow label="Subtotal" value={convertCentsToCurrencyString(vm.totals.subtotalCents, currency)}/>
+        <SummaryRow label="Shipping" value={convertCentsToCurrencyString(vm.totals.shippingCents, currency)}/>
+        <View style={[styles.totalDivider, { backgroundColor: theme.colors.surfaceStroke }]}/>
+        <SummaryRow label="Total" value={convertCentsToCurrencyString(vm.totals.totalCents, currency)} emphasized/>
+      </ScrollView>
+      <View style={styles.footer}>
+        <Button text={checkoutButtonTitle} variant="primary" enabled={vm.isCheckoutEnabled && !isCheckingOut} isLoading={isCheckingOut} onPress={onCheckout} style={styles.checkoutButton}/>
+      </View>
+    </BottomSheet>);
+}
+function SummaryRow({ label, value, emphasized = false, }) {
+    const theme = useFrameTheme();
+    const color = emphasized ? theme.colors.textPrimary : theme.colors.textSecondary;
+    return (<View style={summaryRowStyles.row}>
+      <Text style={{
+            color,
+            fontSize: theme.fonts.headline.size,
+            fontWeight: theme.fontWeights.headline,
+            lineHeight: theme.fontLineHeights.headline,
+        }}>
+        {label}
+      </Text>
+      <Text style={{
+            color,
+            fontSize: theme.fonts.headline.size,
+            fontWeight: theme.fontWeights.headline,
+            lineHeight: theme.fontLineHeights.headline,
+        }}>
+        {value}
+      </Text>
+    </View>);
+}
+const summaryRowStyles = StyleSheet.create({
+    row: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+    },
+});
+function createStyles(_theme) {
+    return StyleSheet.create({
+        title: {
+            paddingHorizontal: 16,
+            paddingTop: 8,
+            paddingBottom: 16,
+        },
+        titleDivider: {
+            height: StyleSheet.hairlineWidth,
+        },
+        scrollContent: {
+            paddingBottom: 16,
+        },
+        subtitle: {
+            paddingHorizontal: 16,
+            paddingVertical: 16,
+        },
+        itemRow: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            minHeight: ITEM_ROW_HEIGHT,
+            marginHorizontal: 16,
+            marginBottom: 8,
+            paddingHorizontal: 16,
+            paddingVertical: 10,
+            gap: 12,
+            borderWidth: 1,
+        },
+        itemImage: {
+            width: ITEM_IMAGE_SIZE,
+            height: ITEM_IMAGE_SIZE,
+            borderRadius: 6,
+        },
+        totalDivider: {
+            height: StyleSheet.hairlineWidth,
+            marginHorizontal: 16,
+            marginVertical: 4,
+        },
+        footer: {
+            paddingHorizontal: 16,
+            paddingBottom: 16,
+        },
+        checkoutButton: {
+            height: 42,
+        },
+        empty: {
+            paddingVertical: 24,
+            alignItems: 'center',
+        },
+    });
+}

package/lib/ui/screens/cart/useCartViewModel.d.ts

@@ -0,0 +1,13 @@
+import type { FrameCartItem } from '../../../types';
+export interface CartTotals {
+    subtotalCents: number;
+    shippingCents: number;
+    totalCents: number;
+}
+export interface CartViewModel {
+    items: ReadonlyArray<FrameCartItem>;
+    totals: CartTotals;
+    isCheckoutEnabled: boolean;
+}
+export declare function useCartViewModel(items: ReadonlyArray<FrameCartItem>, shippingAmountInCents: number): CartViewModel;
+//# sourceMappingURL=useCartViewModel.d.ts.map

package/lib/ui/screens/cart/useCartViewModel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCartViewModel.d.ts","sourceRoot":"","sources":["../../../../src/ui/screens/cart/useCartViewModel.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEpD,MAAM,WAAW,UAAU;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IACpC,MAAM,EAAE,UAAU,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;CAC5B;AAED,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,aAAa,CAAC,aAAa,CAAC,EACnC,qBAAqB,EAAE,MAAM,GAC5B,aAAa,CAcf"}

package/lib/ui/screens/cart/useCartViewModel.js

@@ -0,0 +1,16 @@
+import { useMemo } from 'react';
+export function useCartViewModel(items, shippingAmountInCents) {
+    return useMemo(() => {
+        const subtotalCents = items.reduce((sum, item) => sum + item.amountInCents, 0);
+        const totalCents = subtotalCents + shippingAmountInCents;
+        return {
+            items,
+            totals: {
+                subtotalCents,
+                shippingCents: shippingAmountInCents,
+                totalCents,
+            },
+            isCheckoutEnabled: items.length > 0 && totalCents > 0,
+        };
+    }, [items, shippingAmountInCents]);
+}

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

@@ -0,0 +1,17 @@
+import type { AddressMode } from './checkoutReducer';
+export interface CheckoutScreenProps {
+    accountId: string;
+    amount: number;
+    currency?: string;
+    addressMode?: AddressMode;
+    title?: string;
+    onSuccess: (transferId: string) => void;
+    onClose: () => void;
+    onFail: (error: unknown) => void;
+    showApplePay?: boolean;
+    showGooglePay?: boolean;
+    onApplePay?: () => void;
+    onGooglePay?: () => void;
+}
+export declare function CheckoutScreen({ accountId, amount, currency, addressMode, title, onSuccess, onClose, onFail, showApplePay, showGooglePay, onApplePay, onGooglePay, }: CheckoutScreenProps): import("react").JSX.Element;
+//# sourceMappingURL=CheckoutScreen.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckoutScreen.d.ts","sourceRoot":"","sources":["../../../../src/ui/screens/checkout/CheckoutScreen.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,MAAM,WAAW,mBAAmB;IAClC,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAIjC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,MAAM,EACN,QAAgB,EAChB,WAAwB,EACxB,KAAkB,EAClB,SAAS,EACT,OAAO,EACP,MAAM,EACN,YAAoB,EACpB,aAAqB,EACrB,UAAU,EACV,WAAW,GACZ,EAAE,mBAAmB,+BA0QrB"}

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

@@ -0,0 +1,279 @@
+import { useMemo, useRef } from 'react';
+import { ScrollView, StyleSheet, Switch, Text, View } from 'react-native';
+import { useFrameTheme } from '../../theme/ThemeContext';
+import { BottomSheet } from '../../primitives/BottomSheet';
+import { Button } from '../../primitives/Button';
+import { ValidatedTextField } from '../../primitives/ValidatedTextField';
+import { PaymentMethodRow } from '../../primitives/PaymentMethodRow';
+import { PaymentCardField } from '../../primitives/PaymentCardField';
+import { ApplePayButton } from '../../primitives/ApplePayButton';
+import { GooglePayButton } from '../../primitives/GooglePayButton';
+import { CountryPicker } from '../../primitives/CountryPicker';
+import { Icon } from '../../assets';
+import { convertCentsToCurrencyString } from '../../../currency';
+import { useCheckoutViewModel } from './useCheckoutViewModel';
+export function CheckoutScreen({ accountId, amount, currency = 'USD', addressMode = 'required', title = 'Checkout', onSuccess, onClose, onFail, showApplePay = false, showGooglePay = false, onApplePay, onGooglePay, }) {
+    const theme = useFrameTheme();
+    const cardFieldRef = useRef(null);
+    const vm = useCheckoutViewModel({ accountId, amount, currency, addressMode, cardFieldRef });
+    const styles = useMemo(() => createStyles(theme), [theme]);
+    const showWalletRow = (showApplePay && onApplePay) || (showGooglePay && onGooglePay);
+    async function handlePay() {
+        try {
+            const transferId = await vm.submit();
+            onSuccess(transferId);
+        }
+        catch (err) {
+            onFail(err);
+        }
+    }
+    return (<BottomSheet title={title} onClose={onClose}>
+      <ScrollView contentContainerStyle={styles.scrollContent} keyboardShouldPersistTaps="handled">
+        {showWalletRow ? (<View style={styles.walletSection}>
+            {showApplePay && onApplePay ? <ApplePayButton onPress={onApplePay}/> : null}
+            {showGooglePay && onGooglePay ? <GooglePayButton onPress={onGooglePay}/> : null}
+            <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}
+
+        {/* Saved payment methods */}
+        {vm.state.accountPaymentOptions !== null && vm.state.accountPaymentOptions.length > 0 ? (<View style={styles.section}>
+            <Text style={[
+                styles.sectionTitle,
+                {
+                    color: theme.colors.textSecondary,
+                    fontSize: theme.fonts.headline.size,
+                    fontWeight: theme.fontWeights.headline,
+                    lineHeight: theme.fontLineHeights.headline,
+                },
+            ]}>
+              Saved Payment Methods
+            </Text>
+            <View style={styles.rowList}>
+              {vm.state.accountPaymentOptions.map((pm) => (<PaymentMethodRow key={pm.id} title={savedMethodTitle(pm)} subtitle={savedMethodSubtitle(pm) ?? undefined} selected={vm.state.selectedAccountPaymentOptionId === pm.id} onPress={() => vm.dispatch({ type: 'SELECT_SAVED_OPTION', id: pm.id })} icon={<Icon name={brandIconName(pm.card?.brand)} width={40} height={28}/>}/>))}
+              <PaymentMethodRow title="Enter New Payment Method" selected={vm.state.selectedAccountPaymentOptionId === null} onPress={() => vm.dispatch({ type: 'SELECT_SAVED_OPTION', id: null })} icon={<Icon name="empty-card" width={40} height={28} color={theme.colors.textPrimary}/>}/>
+            </View>
+          </View>) : null}
+
+        {!vm.isUsingSaved ? (<>
+            <View style={styles.section}>
+              <Text style={[
+                styles.sectionTitle,
+                {
+                    color: theme.colors.textSecondary,
+                    fontSize: theme.fonts.headline.size,
+                    fontWeight: theme.fontWeights.headline,
+                    lineHeight: theme.fontLineHeights.headline,
+                },
+            ]}>
+                Customer Information
+              </Text>
+              <View style={[
+                styles.fieldContainer,
+                {
+                    borderColor: theme.colors.surfaceStroke,
+                    borderRadius: theme.radii.medium,
+                    backgroundColor: theme.colors.surface,
+                },
+            ]}>
+                <ValidatedTextField prompt="Customer Name" value={vm.state.customerName} onChangeText={(v) => vm.dispatch({ type: 'SET_CUSTOMER_NAME', value: v })} error={vm.state.fieldErrors.customerName} autoCapitalize="words" borderless/>
+                <View style={[styles.hDivider, { backgroundColor: theme.colors.surfaceStroke }]}/>
+                <ValidatedTextField prompt="Customer Email" value={vm.state.customerEmail} onChangeText={(v) => vm.dispatch({ type: 'SET_CUSTOMER_EMAIL', value: v })} error={vm.state.fieldErrors.customerEmail} keyboardType="email-address" autoCapitalize="none" borderless/>
+              </View>
+            </View>
+
+            <View style={styles.section}>
+              <Text style={[
+                styles.sectionTitle,
+                {
+                    color: theme.colors.textSecondary,
+                    fontSize: theme.fonts.headline.size,
+                    fontWeight: theme.fontWeights.headline,
+                    lineHeight: theme.fontLineHeights.headline,
+                },
+            ]}>
+                Card Information
+              </Text>
+              <PaymentCardField ref={cardFieldRef} onChange={({ complete }) => vm.dispatch({ type: 'SET_CARD_COMPLETE', value: complete })}/>
+            </View>
+
+            {vm.shouldShowAddress ? (<View style={styles.section}>
+                <Text style={[
+                    styles.sectionTitle,
+                    {
+                        color: theme.colors.textSecondary,
+                        fontSize: theme.fonts.headline.size,
+                        fontWeight: theme.fontWeights.headline,
+                        lineHeight: theme.fontLineHeights.headline,
+                    },
+                ]}>
+                  Billing Address
+                </Text>
+                <View style={[
+                    styles.fieldContainer,
+                    {
+                        borderColor: theme.colors.surfaceStroke,
+                        borderRadius: theme.radii.medium,
+                        backgroundColor: theme.colors.surface,
+                    },
+                ]}>
+                  <ValidatedTextField prompt="Address Line 1" value={vm.state.address.line1} onChangeText={(v) => vm.dispatch({ type: 'SET_ADDRESS_FIELD', field: 'line1', value: v })} error={vm.state.fieldErrors.addressLine1} autoCapitalize="words" borderless/>
+                  <View style={[styles.hDivider, { backgroundColor: theme.colors.surfaceStroke }]}/>
+                  <ValidatedTextField prompt="Address Line 2" value={vm.state.address.line2} onChangeText={(v) => vm.dispatch({ type: 'SET_ADDRESS_FIELD', field: 'line2', value: v })} autoCapitalize="words" borderless/>
+                  <View style={[styles.hDivider, { backgroundColor: theme.colors.surfaceStroke }]}/>
+                  <View style={styles.addressRow}>
+                    <View style={styles.addressCell}>
+                      <ValidatedTextField prompt="City" value={vm.state.address.city} onChangeText={(v) => vm.dispatch({ type: 'SET_ADDRESS_FIELD', field: 'city', value: v })} error={vm.state.fieldErrors.addressCity} autoCapitalize="words" borderless/>
+                    </View>
+                    <View style={[styles.vDivider, { backgroundColor: theme.colors.surfaceStroke }]}/>
+                    <View style={styles.addressCell}>
+                      <ValidatedTextField prompt="State" value={vm.state.address.state} onChangeText={(v) => vm.dispatch({ type: 'SET_ADDRESS_FIELD', field: 'state', value: v })} error={vm.state.fieldErrors.addressState} autoCapitalize="characters" characterLimit={2} borderless/>
+                    </View>
+                  </View>
+                  <View style={[styles.hDivider, { backgroundColor: theme.colors.surfaceStroke }]}/>
+                  <View style={styles.countryRow}>
+                    <CountryPicker selectedAlpha2={vm.state.address.country} onSelect={(c) => vm.dispatch({
+                    type: 'SET_ADDRESS_FIELD',
+                    field: 'country',
+                    value: c.alpha2Code,
+                })}/>
+                  </View>
+                  <View style={[styles.hDivider, { backgroundColor: theme.colors.surfaceStroke }]}/>
+                  <ValidatedTextField prompt={vm.state.address.country === 'US' ? 'Zip Code' : 'Postal Code'} value={vm.state.address.postalCode} onChangeText={(v) => vm.dispatch({ type: 'SET_ADDRESS_FIELD', field: 'postalCode', value: v })} error={vm.state.fieldErrors.addressPostalCode} keyboardType={vm.state.address.country === 'US' ? 'number-pad' : 'default'} characterLimit={vm.state.address.country === 'US' ? 5 : undefined} borderless/>
+                </View>
+              </View>) : null}
+
+            <View style={styles.saveCardRow}>
+              <Text style={{
+                color: theme.colors.textSecondary,
+                fontSize: theme.fonts.headline.size,
+                fontWeight: theme.fontWeights.headline,
+                lineHeight: theme.fontLineHeights.headline,
+                flex: 1,
+            }}>
+                Save this card for future payments
+              </Text>
+              <Switch value={vm.state.saveCard} onValueChange={(v) => vm.dispatch({ type: 'SET_SAVE_CARD', value: v })}/>
+            </View>
+          </>) : null}
+
+        <Button text={`Pay ${convertCentsToCurrencyString(amount, currency)}`} variant="primary" enabled={vm.hasUsableInput && !vm.state.isPerformingAction} isLoading={vm.state.isPerformingAction} onPress={handlePay} style={styles.payButton}/>
+      </ScrollView>
+    </BottomSheet>);
+}
+function savedMethodTitle(pm) {
+    if (pm.card && pm.card.last_four) {
+        const brand = pm.card.brand ? prettyBrand(pm.card.brand) : 'Card';
+        return `${brand} •••• ${pm.card.last_four}`;
+    }
+    return 'Saved card';
+}
+function savedMethodSubtitle(pm) {
+    if (pm.card?.exp_month && pm.card?.exp_year) {
+        return `Exp ${pm.card.exp_month}/${pm.card.exp_year}`;
+    }
+    return null;
+}
+function brandIconName(brand) {
+    switch ((brand ?? '').toLowerCase()) {
+        case 'visa':
+            return 'visa';
+        case 'mastercard':
+            return 'mastercard';
+        case 'amex':
+            return 'amex';
+        case 'discover':
+            return 'discover';
+        default:
+            return 'credit-card';
+    }
+}
+function prettyBrand(brand) {
+    switch (brand.toLowerCase()) {
+        case 'amex':
+            return 'Amex';
+        case 'visa':
+            return 'Visa';
+        case 'mastercard':
+            return 'Mastercard';
+        case 'discover':
+            return 'Discover';
+        case 'diners':
+            return 'Diners';
+        case 'jcb':
+            return 'JCB';
+        case 'unionpay':
+            return 'UnionPay';
+        default:
+            return brand;
+    }
+}
+function createStyles(_theme) {
+    return StyleSheet.create({
+        scrollContent: {
+            paddingHorizontal: 16,
+            paddingBottom: 24,
+        },
+        walletSection: {
+            paddingTop: 4,
+            paddingBottom: 16,
+        },
+        orRow: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            marginVertical: 16,
+            gap: 8,
+        },
+        orLine: {
+            flex: 1,
+            height: StyleSheet.hairlineWidth,
+        },
+        orLabel: {
+            fontSize: 12,
+            textTransform: 'uppercase',
+        },
+        section: {
+            marginBottom: 16,
+            gap: 12,
+        },
+        sectionTitle: {},
+        fieldContainer: {
+            borderWidth: 1,
+            overflow: 'hidden',
+        },
+        hDivider: {
+            height: StyleSheet.hairlineWidth,
+            width: '100%',
+        },
+        vDivider: {
+            width: StyleSheet.hairlineWidth,
+            alignSelf: 'stretch',
+        },
+        rowList: {
+            gap: 8,
+        },
+        addressRow: {
+            flexDirection: 'row',
+            alignItems: 'center',
+        },
+        addressCell: {
+            flex: 1,
+        },
+        countryRow: {
+            paddingHorizontal: 12,
+            paddingVertical: 8,
+        },
+        saveCardRow: {
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            paddingVertical: 16,
+        },
+        payButton: {
+            marginTop: 8,
+        },
+    });
+}

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

@@ -0,0 +1,77 @@
+import type { PaymentMethod as FramePaymentMethod } from 'framepayments/dist/types/payment_methods';
+export type AddressMode = 'required' | 'optional' | 'hidden';
+export interface AddressForm {
+    line1: string;
+    line2: string;
+    city: string;
+    state: string;
+    country: string;
+    postalCode: string;
+}
+export interface CheckoutFieldErrors {
+    customerName?: string;
+    customerEmail?: string;
+    addressLine1?: string;
+    addressCity?: string;
+    addressState?: string;
+    addressPostalCode?: string;
+}
+export interface CheckoutState {
+    accountPaymentOptions: ReadonlyArray<FramePaymentMethod> | null;
+    selectedAccountPaymentOptionId: string | null;
+    customerName: string;
+    customerEmail: string;
+    address: AddressForm;
+    addressMode: AddressMode;
+    saveCard: boolean;
+    isPerformingAction: boolean;
+    fieldErrors: CheckoutFieldErrors;
+    cardComplete: boolean;
+}
+export type CheckoutAction = {
+    type: 'SET_PAYMENT_OPTIONS';
+    options: ReadonlyArray<FramePaymentMethod>;
+} | {
+    type: 'SELECT_SAVED_OPTION';
+    id: string | null;
+} | {
+    type: 'SET_CUSTOMER_NAME';
+    value: string;
+} | {
+    type: 'SET_CUSTOMER_EMAIL';
+    value: string;
+} | {
+    type: 'SET_ADDRESS_FIELD';
+    field: keyof AddressForm;
+    value: string;
+} | {
+    type: 'SET_ADDRESS_MODE';
+    mode: AddressMode;
+} | {
+    type: 'SET_SAVE_CARD';
+    value: boolean;
+} | {
+    type: 'SET_CARD_COMPLETE';
+    value: boolean;
+} | {
+    type: 'SET_PERFORMING_ACTION';
+    value: boolean;
+} | {
+    type: 'SET_FIELD_ERRORS';
+    errors: CheckoutFieldErrors;
+} | {
+    type: 'CLEAR_FIELD_ERROR';
+    field: keyof CheckoutFieldErrors;
+};
+export declare function initialCheckoutState(addressMode?: AddressMode): CheckoutState;
+export declare function checkoutReducer(state: CheckoutState, action: CheckoutAction): CheckoutState;
+export declare function isUsingSavedCard(state: CheckoutState): boolean;
+export declare function shouldValidateAddress(state: CheckoutState): boolean;
+export declare function hasUsablePaymentInput(state: CheckoutState): boolean;
+export interface ValidationResult {
+    fieldErrors: CheckoutFieldErrors;
+    /** True iff no field errors AND (saved card OR new-card fields valid). */
+    isValid: boolean;
+}
+export declare function validateForSubmit(state: CheckoutState): ValidationResult;
+//# sourceMappingURL=checkoutReducer.d.ts.map

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

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