@heyama/pay-react-native 0.0.0-stage → 1.0.0

package/dist/components/PaymentSheetModal.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFonts } from 'expo-font';
+import { useMemo, useState } from 'react';
+import { Alert, Animated, KeyboardAvoidingView, Modal, Pressable, StyleSheet, View, useColorScheme, } from 'react-native';
+import { IntlProvider, createTranslator } from 'use-intl';
+import { CHECKOUT_COLORS, INVALID_BRAND_DARK, INVALID_BRAND_LIGHT, } from "../checkout-core/models/checkout.constants.js";
+import { CheckoutThemeEnum } from "../checkout-core/models/checkout.enum.js";
+import { useSheetMotion } from "../hooks/use-sheet-motion.js";
+import { useWatchedPayment } from "../hooks/use-watched-payment.js";
+import { SheetThemeContext } from "../hooks/use-sheet-theme.js";
+import { FIGTREE_FILES, MESSAGES, TIME_ZONE, } from "../models/sheet.constants.js";
+import { sheetLanguage, sheetResult, sheetTheme, } from "../models/sheet.utils.js";
+import { SheetContent } from "./SheetContent.js";
+/**
+ * One payment in a bottom sheet over the dimmed app, as tall as what it
+ * shows, in the payment's language and theme, else the device's. Close,
+ * a swipe down, a tap on the app behind, back or escape leave it; leaving
+ * while a prompt waits on the phone asks first, and resolves `pending`.
+ */
+export function PaymentSheetModal({ calls, request, onClose, }) {
+    const watched = useWatchedPayment(calls, request.open ? request.paymentId : null);
+    const { view } = watched;
+    const scheme = useColorScheme();
+    const [deviceLocale] = useState(() => Intl.DateTimeFormat().resolvedOptions().locale);
+    const [fontsLoaded, fontsError] = useFonts(FIGTREE_FILES);
+    const lang = sheetLanguage(view?.language ?? null, deviceLocale);
+    const dark = sheetTheme(view?.theme ?? null, scheme) === CheckoutThemeEnum.DARK;
+    const color = view?.app.color;
+    const theme = useMemo(() => ({
+        colors: CHECKOUT_COLORS[dark ? CheckoutThemeEnum.DARK : CheckoutThemeEnum.LIGHT],
+        brand: color ?? (dark ? INVALID_BRAND_DARK : INVALID_BRAND_LIGHT),
+        dark,
+    }), [dark, color]);
+    const close = () => {
+        const result = sheetResult(view, watched.failed);
+        if (result.status !== 'pending') {
+            onClose(result);
+            return;
+        }
+        // A prompt still waits: approved later, the payment goes through.
+        const t = createTranslator({
+            locale: lang,
+            messages: MESSAGES[lang],
+            namespace: 'checkout.sheet',
+        });
+        Alert.alert(t('close_title'), t('close_body'), [
+            { text: t('keep_waiting'), style: 'cancel' },
+            {
+                text: MESSAGES[lang].checkout.close,
+                style: 'destructive',
+                onPress: () => onClose(result),
+            },
+        ]);
+    };
+    const motion = useSheetMotion(request.open, close);
+    return (_jsx(Modal, { testID: "payment-sheet-modal", visible: motion.shown, transparent: true, animationType: "none", statusBarTranslucent: true, onRequestClose: close, children: _jsxs(View, { style: [styles.screen, !request.open && styles.leaving], children: [_jsx(Pressable, { testID: "payment-sheet-backdrop", accessible: false, onPress: close, style: StyleSheet.absoluteFill, children: _jsx(Animated.View, { style: [
+                            StyleSheet.absoluteFill,
+                            styles.dim,
+                            { opacity: motion.dim },
+                        ] }) }), _jsx(Animated.View, { style: [
+                        styles.stage,
+                        { transform: [{ translateY: motion.translateY }] },
+                    ], children: _jsx(KeyboardAvoidingView, { behavior: "padding", style: [styles.stage, { paddingTop: motion.topGap }], children: _jsx(View, { style: styles.sheet, children: _jsx(IntlProvider, { locale: lang, messages: MESSAGES[lang], timeZone: TIME_ZONE, children: _jsx(SheetThemeContext, { value: theme, children: _jsx(SheetContent, { calls: calls, watched: watched, fontsReady: fontsLoaded || fontsError !== null, deviceLocale: deviceLocale, onClose: close, dragHandlers: motion.dragHandlers }) }) }) }) }) })] }) }));
+}
+const styles = StyleSheet.create({
+    screen: { flex: 1 },
+    leaving: { pointerEvents: 'none' },
+    dim: { backgroundColor: 'black' },
+    // The app's dim shows through around the sheet.
+    stage: { flex: 1, justifyContent: 'flex-end', pointerEvents: 'box-none' },
+    sheet: { flexShrink: 1 },
+});

package/dist/components/SheetBone.d.ts

@@ -0,0 +1,3 @@
+import type { BoneProps } from '../models/sheet.interface.js';
+/** A rounded block standing in for what is loading, sized like it. */
+export declare function SheetBone({ width, height, radius }: BoneProps): import("react").JSX.Element;

package/dist/components/SheetBone.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet, View } from 'react-native';
+import { useSheetTheme } from "../hooks/use-sheet-theme.js";
+/** A rounded block standing in for what is loading, sized like it. */
+export function SheetBone({ width, height, radius = 6 }) {
+    const { colors } = useSheetTheme();
+    return (_jsx(View, { style: [
+            styles.bone,
+            { width, height, borderRadius: radius, backgroundColor: colors.fill },
+        ] }));
+}
+const styles = StyleSheet.create({ bone: { flex: 0 } });

package/dist/components/SheetButton.d.ts

@@ -0,0 +1,3 @@
+import type { SheetButtonProps } from '../models/sheet.interface.js';
+/** The sheet's buttons: filled in the app colour for the main action, outlined for the rest. */
+export declare function SheetButton({ label, onPress, variant, busy, disabled, inactive, }: SheetButtonProps): import("react").JSX.Element;

package/dist/components/SheetButton.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ActivityIndicator, StyleSheet, TouchableOpacity } from 'react-native';
+import { CheckoutButtonVariantEnum } from "../checkout-core/models/checkout.enum.js";
+import { useSheetTheme } from "../hooks/use-sheet-theme.js";
+import { FigtreeEnum } from "../models/sheet.enum.js";
+import { SheetText } from "./SheetText.js";
+/** The sheet's buttons: filled in the app colour for the main action, outlined for the rest. */
+export function SheetButton({ label, onPress, variant = CheckoutButtonVariantEnum.PRIMARY, busy = false, disabled = false, inactive = false, }) {
+    const { colors, brand } = useSheetTheme();
+    const primary = variant === CheckoutButtonVariantEnum.PRIMARY;
+    const ink = primary ? 'white' : colors.ink;
+    const off = disabled || busy;
+    return (_jsxs(TouchableOpacity, { onPress: onPress, disabled: off, activeOpacity: 0.8, accessibilityRole: "button", accessibilityState: { disabled: off, busy }, style: [
+            styles.button,
+            primary
+                ? { backgroundColor: brand }
+                : { borderWidth: 1, borderColor: colors.line3 },
+            (disabled || inactive) && styles.disabled,
+        ], children: [busy && _jsx(ActivityIndicator, { color: ink }), _jsx(SheetText, { weight: FigtreeEnum.BOLD, size: 16, color: ink, style: styles.label, children: label })] }));
+}
+const styles = StyleSheet.create({
+    button: {
+        minHeight: 50,
+        borderRadius: 14,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 10,
+        paddingHorizontal: 16,
+    },
+    label: { textAlign: 'center', fontVariant: ['tabular-nums'] },
+    disabled: { opacity: 0.5 },
+});

package/dist/components/SheetCardFields.d.ts

@@ -0,0 +1,8 @@
+import type { SheetCardFieldsProps } from '../models/sheet.interface.js';
+/**
+ * A card method: its provider's card fields page, and only it, in a WebView
+ * sized to it. The card is typed there and goes from there to the provider;
+ * the sheet only hears, from that page's origin, how it went. The labels and
+ * bones stand in until the page says how tall it is.
+ */
+export declare function SheetCardFields({ core, bridge }: SheetCardFieldsProps): import("react").JSX.Element;

package/dist/components/SheetCardFields.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { WebView } from 'react-native-webview';
+import { useLocale, useTranslations } from 'use-intl';
+import { CARD_FIELDS_HEIGHT } from "../checkout-core/models/checkout.constants.js";
+import { useSheetTheme } from "../hooks/use-sheet-theme.js";
+import { FigtreeEnum } from "../models/sheet.enum.js";
+import { cardFieldsBridge, cardFieldsMessageOf, cardFieldsUrl, isCardFieldsPage, originOf, } from "../models/sheet.utils.js";
+import { SheetBone } from "./SheetBone.js";
+import { SheetText } from "./SheetText.js";
+/** Every load goes through `mayLoad`: none is handed to the phone's browser. */
+const ANY_ORIGIN = ['*'];
+/**
+ * A card method: its provider's card fields page, and only it, in a WebView
+ * sized to it. The card is typed there and goes from there to the provider;
+ * the sheet only hears, from that page's origin, how it went. The labels and
+ * bones stand in until the page says how tall it is.
+ */
+export function SheetCardFields({ core, bridge }) {
+    const t = useTranslations('checkout.card_fields');
+    const lang = useLocale();
+    const { colors, dark } = useSheetTheme();
+    const { view, derived, cardHeight } = core;
+    // Shown only while a card method is picked, and they all come with their page.
+    const method = derived.selected;
+    const uri = cardFieldsUrl({
+        siteUrl: view.siteUrl,
+        path: method.cardFieldsPath,
+        paymentId: view.id,
+        method: method.id,
+        color: view.app.color,
+        dark,
+        lang,
+    });
+    const source = useMemo(() => ({ uri }), [uri]);
+    const loaded = cardHeight !== null;
+    // The page itself, in either language; the provider's own frames inside it.
+    const mayLoad = (request) => request.isTopFrame === false || isCardFieldsPage(request.url, uri);
+    // Only what comes from the card fields page's origin reaches the core.
+    const hear = ({ nativeEvent }) => {
+        if (originOf(nativeEvent.url) !== originOf(uri))
+            return;
+        const message = cardFieldsMessageOf(nativeEvent.data);
+        if (message)
+            bridge.receive(message);
+    };
+    const label = (text) => (_jsx(SheetText, { weight: FigtreeEnum.BOLD, size: 13, style: styles.label, children: text }));
+    return (_jsxs(View, { style: styles.section, children: [!loaded && (_jsxs(View, { style: styles.bones, children: [_jsxs(View, { children: [label(t('number')), _jsx(SheetBone, { width: "100%", height: 48, radius: 13 })] }), _jsxs(View, { style: styles.row, children: [_jsxs(View, { style: styles.grow, children: [label(t('expiry')), _jsx(SheetBone, { width: "100%", height: 48, radius: 13 })] }), _jsxs(View, { style: styles.grow, children: [label(t('cvc')), _jsx(SheetBone, { width: "100%", height: 48, radius: 13 })] })] })] })), _jsx(WebView, { ref: bridge.page, source: source, accessibilityLabel: t('title'), originWhitelist: ANY_ORIGIN, onShouldStartLoadWithRequest: mayLoad, injectedJavaScriptBeforeContentLoaded: cardFieldsBridge(), onMessage: hear, setSupportMultipleWindows: false, scrollEnabled: false, style: [
+                    styles.page,
+                    {
+                        height: cardHeight ?? CARD_FIELDS_HEIGHT,
+                        backgroundColor: colors.surface,
+                    },
+                    !loaded && styles.hidden,
+                ] })] }));
+}
+const styles = StyleSheet.create({
+    section: { marginTop: 14 },
+    bones: { gap: 14, height: CARD_FIELDS_HEIGHT },
+    label: { marginBottom: 8 },
+    row: { flexDirection: 'row', gap: 12 },
+    grow: { flex: 1 },
+    page: { width: '100%' },
+    hidden: { position: 'absolute', top: 0, left: 0, right: 0, opacity: 0 },
+});

package/dist/components/SheetCodeField.d.ts

@@ -0,0 +1,8 @@
+import type { SheetScreenProps } from '../models/sheet.interface.js';
+/**
+ * OTP methods: Dial opens the network's code in the phone dialler for a
+ * one-time payment code (on Android; on iOS it says to dial it by hand);
+ * back in the app the code field comes up, filled from the SMS when the
+ * phone offers it. Sent once with Pay, never kept.
+ */
+export declare function SheetCodeField({ core }: SheetScreenProps): import("react").JSX.Element;

package/dist/components/SheetCodeField.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { AppState, Linking, Platform, StyleSheet, TouchableOpacity, View, } from 'react-native';
+import { useTranslations } from 'use-intl';
+import { OTP_MAX_LENGTH } from "../checkout-core/models/checkout.constants.js";
+import { telHref } from "../checkout-core/models/checkout.phone.utils.js";
+import { useSheetTheme } from "../hooks/use-sheet-theme.js";
+import { FigtreeEnum } from "../models/sheet.enum.js";
+import { SheetInput, SheetText } from "./SheetText.js";
+/**
+ * OTP methods: Dial opens the network's code in the phone dialler for a
+ * one-time payment code (on Android; on iOS it says to dial it by hand);
+ * back in the app the code field comes up, filled from the SMS when the
+ * phone offers it. Sent once with Pay, never kept.
+ */
+export function SheetCodeField({ core }) {
+    const t = useTranslations('checkout');
+    const { colors, brand } = useSheetTheme();
+    const { ui, derived, actions } = core;
+    // Shown only while an OTP method, which always has its code, is picked.
+    const method = derived.selected;
+    const code = method.otpCode;
+    const field = useRef(null);
+    const [focused, setFocused] = useState(false);
+    /** Waiting for the payer to come back from the dialler. */
+    const away = useRef(null);
+    const stopWaiting = () => {
+        away.current?.remove();
+        away.current = null;
+    };
+    useEffect(() => stopWaiting, []);
+    const dial = () => {
+        // The iPhone's Phone app refuses a tel: link with * or #: say to dial it by hand.
+        if (Platform.OS === 'ios') {
+            actions.cannotDial();
+            return;
+        }
+        stopWaiting();
+        away.current = AppState.addEventListener('change', (state) => {
+            if (state !== 'active')
+                return;
+            stopWaiting();
+            field.current?.focus();
+        });
+        Linking.openURL(telHref(code)).catch(() => {
+            stopWaiting();
+            actions.cannotDial();
+        });
+    };
+    return (_jsxs(View, { style: styles.section, children: [_jsx(SheetText, { weight: FigtreeEnum.BOLD, style: styles.label, children: t('otp_label') }), _jsx(SheetInput, { ref: field, accessibilityLabel: t('otp_label'), keyboardType: "number-pad", textContentType: "oneTimeCode", autoComplete: "sms-otp", returnKeyType: "go", maxLength: OTP_MAX_LENGTH, value: ui.code, onChangeText: actions.setCode, onFocus: () => setFocused(true), onBlur: () => setFocused(false), onSubmitEditing: actions.pay, editable: !ui.submitting, style: [styles.input, { borderColor: focused ? brand : colors.line3 }] }), _jsxs(View, { style: [styles.help, { backgroundColor: colors.fill2 }], children: [_jsx(SheetText, { size: 13, color: colors.ink2, style: styles.grow, children: t('otp_help', { method: method.name }) }), _jsxs(TouchableOpacity, { onPress: dial, activeOpacity: 0.7, accessibilityRole: "button", accessibilityLabel: t('sheet.dial', { code }), style: [
+                            styles.dial,
+                            { borderColor: colors.line3, backgroundColor: colors.surface },
+                        ], children: [_jsx(View, { style: [styles.phone, { borderColor: colors.ink }], children: _jsx(View, { style: [styles.speaker, { backgroundColor: colors.ink }] }) }), _jsx(SheetText, { weight: FigtreeEnum.BOLD, size: 14, children: code })] })] })] }));
+}
+const styles = StyleSheet.create({
+    section: { marginTop: 10 },
+    label: { marginBottom: 8 },
+    input: {
+        height: 50,
+        borderWidth: 1,
+        borderRadius: 13,
+        paddingHorizontal: 14,
+        fontSize: 18,
+        letterSpacing: 5,
+    },
+    help: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 12,
+        borderRadius: 12,
+        paddingHorizontal: 14,
+        paddingVertical: 12,
+        marginTop: 12,
+    },
+    grow: { flex: 1 },
+    dial: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        borderWidth: 1,
+        borderRadius: 9,
+        paddingHorizontal: 12,
+        minHeight: 40,
+    },
+    phone: {
+        width: 10,
+        height: 16,
+        borderWidth: 1.6,
+        borderRadius: 3,
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        paddingBottom: 1.5,
+    },
+    speaker: { width: 3, height: 1.4, borderRadius: 0.7 },
+});

package/dist/components/SheetContent.d.ts

@@ -0,0 +1,3 @@
+import type { SheetContentProps } from '../models/sheet.interface.js';
+/** The sheet's screens, driven by the shared checkout controller. */
+export declare function SheetContent({ calls, watched, fontsReady, deviceLocale, onClose, dragHandlers, }: SheetContentProps): import("react").JSX.Element;

package/dist/components/SheetContent.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useTranslations } from 'use-intl';
+import { useCheckoutController } from "../checkout-core/hooks/use-checkout-controller.js";
+import { CURRENCY_LABEL } from "../checkout-core/models/checkout.constants.js";
+import { CheckoutScreenEnum, TerminalKindEnum, } from "../checkout-core/models/checkout.enum.js";
+import { formatAmount } from "../checkout-core/models/checkout.money.utils.js";
+import { useNativePlatform } from "../hooks/use-native-platform.js";
+import { useSheetResize } from "../hooks/use-sheet-resize.js";
+import { useSheetTheme } from "../hooks/use-sheet-theme.js";
+import { SheetButton } from "./SheetButton.js";
+import { SheetFailed } from "./SheetFailed.js";
+import { SheetForm } from "./SheetForm.js";
+import { SheetHeader } from "./SheetHeader.js";
+import { SheetLayout } from "./SheetLayout.js";
+import { SheetMessage } from "./SheetMessage.js";
+import { SheetSkeleton } from "./SheetSkeleton.js";
+import { SheetSuccess } from "./SheetSuccess.js";
+import { SheetSummary } from "./SheetSummary.js";
+import { SheetTerminal } from "./SheetTerminal.js";
+import { SheetToast } from "./SheetToast.js";
+import { SheetWaiting } from "./SheetWaiting.js";
+const TERMINAL_KIND = {
+    [CheckoutScreenEnum.EXPIRED]: TerminalKindEnum.EXPIRED,
+    [CheckoutScreenEnum.CANCELLED]: TerminalKindEnum.CANCELLED,
+    [CheckoutScreenEnum.LOCKED]: TerminalKindEnum.LOCKED,
+    [CheckoutScreenEnum.NO_METHOD]: TerminalKindEnum.NO_METHOD,
+};
+/** The sheet's screens, driven by the shared checkout controller. */
+export function SheetContent({ calls, watched, fontsReady, deviceLocale, onClose, dragHandlers, }) {
+    const t = useTranslations('checkout');
+    const { colors } = useSheetTheme();
+    const [clues] = useState(() => ({
+        ipCountry: null,
+        languages: [deviceLocale],
+    }));
+    const phoneRef = useRef(null);
+    const { platform, cardFields } = useNativePlatform(onClose, phoneRef);
+    const { view } = watched;
+    const core = useCheckoutController(view, {
+        clues,
+        mutations: calls.mutations,
+        platform,
+    });
+    const { ui, derived, actions } = core;
+    const { screen } = derived;
+    // A payment that could not load is not loading any more.
+    const failed = watched.failed && view === undefined;
+    const loading = !fontsReady || (screen === CheckoutScreenEnum.LOADING && !failed);
+    const terminal = TERMINAL_KIND[screen];
+    useSheetResize([
+        loading,
+        failed,
+        screen,
+        ui.tab,
+        ui.country,
+        derived.selected?.id,
+        core.cardHeight,
+        Boolean(core.phone.status.error || derived.mismatch),
+    ].join('|'));
+    let body;
+    if (loading) {
+        body = (_jsx(SheetLayout, { secure: false, children: _jsx(SheetSkeleton, {}) }));
+    }
+    else if (failed) {
+        body = (_jsx(SheetLayout, { secure: false, children: _jsx(SheetMessage, { title: t('error.title'), body: t('error.body') }) }));
+    }
+    else if (screen === CheckoutScreenEnum.INVALID) {
+        body = (_jsx(SheetLayout, { secure: false, children: _jsx(SheetMessage, { title: t('invalid.title'), body: t('invalid.body') }) }));
+    }
+    else if (terminal) {
+        body = _jsx(SheetTerminal, { core: core, kind: terminal, onClose: onClose });
+    }
+    else if (screen === CheckoutScreenEnum.WAITING) {
+        body = _jsx(SheetWaiting, { core: core });
+    }
+    else if (screen === CheckoutScreenEnum.FAILED) {
+        body = _jsx(SheetFailed, { core: core });
+    }
+    else if (screen === CheckoutScreenEnum.SUCCESS ||
+        // Done counted down: the sheet slides away on its receipt.
+        screen === CheckoutScreenEnum.REDIRECT) {
+        body = _jsx(SheetSuccess, { core: core, onClose: onClose });
+    }
+    else {
+        const { canPay } = derived;
+        const busy = ui.submitting || ui.cardPaying;
+        body = (_jsxs(SheetLayout, { foot: _jsx(SheetButton, { label: busy
+                    ? t('sending')
+                    : t('pay_plain', {
+                        amount: formatAmount(view.amount, view.currency),
+                        currency: CURRENCY_LABEL[view.currency],
+                    }), busy: busy, inactive: !canPay, onPress: actions.pay }), children: [_jsx(SheetSummary, { view: view }), _jsx(SheetForm, { core: core, phoneRef: phoneRef, cardFields: cardFields })] }));
+    }
+    return (_jsxs(View, { testID: "payment-sheet", accessibilityViewIsModal: true, onAccessibilityEscape: onClose, style: [styles.sheet, { backgroundColor: colors.surface }], children: [_jsx(SheetHeader, { view: view, loading: loading, onClose: onClose, dragHandlers: dragHandlers }), body, _jsx(SheetToast, { message: core.toastMessage })] }));
+}
+const styles = StyleSheet.create({
+    // As tall as its screen; past the room it has, the screen scrolls.
+    sheet: {
+        flexShrink: 1,
+        borderTopLeftRadius: 14,
+        borderTopRightRadius: 14,
+        overflow: 'hidden',
+    },
+});

package/dist/components/SheetFailed.d.ts

@@ -0,0 +1,3 @@
+import type { SheetScreenProps } from '../models/sheet.interface.js';
+/** The last attempt failed: why, in plain words, Try again and another method. */
+export declare function SheetFailed({ core }: SheetScreenProps): import("react").JSX.Element;

package/dist/components/SheetFailed.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { StyleSheet, View } from 'react-native';
+import { useTranslations } from 'use-intl';
+import { CheckoutButtonVariantEnum, MethodFlowEnum, } from "../checkout-core/models/checkout.enum.js";
+import { FailureReasonEnum } from "../checkout-core/models/domain.enum.js";
+import { formatMoney } from "../checkout-core/models/checkout.money.utils.js";
+import { logoOf } from "../checkout-core/models/checkout.view.utils.js";
+import { useSheetTheme } from "../hooks/use-sheet-theme.js";
+import { FigtreeEnum, SheetIconEnum } from "../models/sheet.enum.js";
+import { SheetButton } from "./SheetButton.js";
+import { SheetIcon } from "./SheetIcon.js";
+import { SheetLayout } from "./SheetLayout.js";
+import { SheetLogo } from "./SheetLogo.js";
+import { SheetRow } from "./SheetRow.js";
+import { SheetText } from "./SheetText.js";
+/** The last attempt failed: why, in plain words, Try again and another method. */
+export function SheetFailed({ core }) {
+    const t = useTranslations('checkout');
+    const { colors } = useSheetTheme();
+    const { view, ui, derived, actions } = core;
+    const attempt = view.attempt;
+    // A failure only ever comes with its reason.
+    const reason = attempt.failureReason;
+    const values = { method: attempt.methodName };
+    const { suggestion } = derived;
+    return (_jsx(SheetLayout, { foot: _jsxs(_Fragment, { children: [_jsx(SheetButton, { label: ui.submitting
+                        ? t('sending')
+                        : attempt.flow === MethodFlowEnum.OTP
+                            ? t('retry_code')
+                            : t('retry'), busy: ui.submitting, onPress: actions.retry }), _jsx(SheetButton, { variant: CheckoutButtonVariantEnum.SECONDARY, label: suggestion
+                        ? t('try_with', { method: suggestion.name })
+                        : t('use_another'), onPress: actions.useAnother })] }), children: _jsxs(View, { style: styles.failed, children: [_jsx(SheetIcon, { kind: SheetIconEnum.CROSS, color: colors.danger, background: colors.dangerSoft }), _jsx(SheetText, { weight: FigtreeEnum.BOLD, size: 22, accessibilityRole: "header", style: styles.title, children: t(`failure.${reason}.title`, values) }), _jsx(SheetText, { size: 15, color: colors.inkStrong, children: t(`failure.${reason}.body`, values) }), _jsx(SheetText, { color: colors.ink2, style: styles.next, children: t(`failure.${reason}.next`, values) }), _jsxs(View, { style: [styles.rows, { borderColor: colors.line }], children: [_jsx(SheetRow, { label: t('amount'), children: formatMoney(view.amount, view.currency) }), _jsxs(SheetRow, { label: t('method'), children: [_jsx(SheetLogo, { logo: logoOf(attempt) }), _jsx(SheetText, { weight: FigtreeEnum.SEMI_BOLD, children: attempt.methodName })] }), _jsx(SheetRow, { label: t('tries_left'), children: t('tries_value', {
+                                left: view.attemptsLeft,
+                                max: view.maxAttempts,
+                            }) })] }), reason !== FailureReasonEnum.MISMATCH && (_jsx(SheetText, { size: 13, color: colors.muted, style: styles.note, children: t('not_charged') }))] }) }));
+}
+const styles = StyleSheet.create({
+    failed: { paddingHorizontal: 18, paddingTop: 28 },
+    title: { marginTop: 16, marginBottom: 8, letterSpacing: -0.4 },
+    next: { marginTop: 8 },
+    rows: { borderTopWidth: 1, marginTop: 20 },
+    note: { marginTop: 16, textAlign: 'center' },
+});

package/dist/components/SheetForm.d.ts

@@ -0,0 +1,7 @@
+import type { SheetFormProps } from '../models/sheet.interface.js';
+/**
+ * The form of design A: the country when there are several, the Mobile
+ * Money / Card tabs, the methods two by two, the number, the payment code
+ * of an OTP method, and a card's fields.
+ */
+export declare function SheetForm({ core, phoneRef, cardFields }: SheetFormProps): import("react").JSX.Element;

package/dist/components/SheetForm.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pressable, StyleSheet, View } from 'react-native';
+import { useTranslations } from 'use-intl';
+import { CheckoutTabEnum, MethodFlowEnum, MethodStateEnum, } from "../checkout-core/models/checkout.enum.js";
+import { logoOf } from "../checkout-core/models/checkout.view.utils.js";
+import { useSheetTheme } from "../hooks/use-sheet-theme.js";
+import { FigtreeEnum } from "../models/sheet.enum.js";
+import { flagOf } from "../models/sheet.utils.js";
+import { SheetCardFields } from "./SheetCardFields.js";
+import { SheetCodeField } from "./SheetCodeField.js";
+import { SheetMethodCard } from "./SheetMethodCard.js";
+import { SheetPhoneField } from "./SheetPhoneField.js";
+import { SheetText } from "./SheetText.js";
+/** Two cards a row, the last one alone when they are odd. */
+function MethodGrid({ cards }) {
+    const rows = [];
+    for (let index = 0; index < cards.length; index += 2) {
+        rows.push(cards.slice(index, index + 2));
+    }
+    return (_jsx(View, { accessibilityRole: "radiogroup", style: styles.grid, children: rows.map((row) => (_jsxs(View, { style: styles.gridRow, children: [row.map(({ id, ...card }) => (_jsx(SheetMethodCard, { ...card }, id))), row.length === 1 && _jsx(View, { style: styles.gridSpacer })] }, row[0].id))) }));
+}
+/**
+ * The form of design A: the country when there are several, the Mobile
+ * Money / Card tabs, the methods two by two, the number, the payment code
+ * of an OTP method, and a card's fields.
+ */
+export function SheetForm({ core, phoneRef, cardFields }) {
+    const t = useTranslations('checkout');
+    const { colors } = useSheetTheme();
+    const { ui, derived, actions } = core;
+    const onCard = ui.tab === CheckoutTabEnum.CARD;
+    const subOf = (method) => method.state === MethodStateEnum.SOON
+        ? t('soon')
+        : method.state === MethodStateEnum.MAINTENANCE
+            ? (method.note ?? t('unavailable'))
+            : method.network;
+    const cardOf = (method) => ({
+        id: method.id,
+        logo: logoOf(method),
+        name: method.name,
+        sub: subOf(method),
+        checked: derived.selected?.id === method.id,
+        muted: method.state !== MethodStateEnum.AVAILABLE,
+        onSelect: () => actions.selectMethod(method),
+    });
+    // Wallets still to come stay off the sheet: only what can be paid with today.
+    const cards = onCard ? derived.cards.map(cardOf) : derived.wallets.map(cardOf);
+    const tab = (value, label) => {
+        const on = ui.tab === value;
+        return (_jsx(Pressable, { onPress: () => actions.setTab(value), accessibilityRole: "tab", accessibilityState: { selected: on }, style: [
+                styles.tab,
+                on && [styles.tabOn, { backgroundColor: colors.tabOn }],
+            ], children: _jsx(SheetText, { weight: FigtreeEnum.SEMI_BOLD, size: 13.5, color: on ? colors.ink : colors.muted, children: label }) }));
+    };
+    return (_jsxs(View, { style: styles.form, children: [!onCard && derived.countries.length > 1 && (_jsx(View, { accessibilityRole: "radiogroup", accessibilityLabel: t('country'), style: styles.countries, children: derived.countries.map((country) => {
+                    const on = country === ui.country;
+                    return (_jsxs(Pressable, { onPress: () => actions.setCountry(country), accessibilityRole: "radio", accessibilityState: { checked: on }, style: [
+                            styles.country,
+                            on
+                                ? { backgroundColor: colors.ink, borderColor: colors.ink }
+                                : { borderColor: colors.line3 },
+                        ], children: [_jsx(SheetText, { size: 14, children: flagOf(country) }), _jsx(SheetText, { weight: FigtreeEnum.SEMI_BOLD, size: 13, color: on ? colors.surface : colors.ink, children: t(`countries.${country}`) })] }, country));
+                }) })), _jsxs(View, { accessibilityRole: "tablist", style: [styles.tabs, { backgroundColor: colors.fill }], children: [tab(CheckoutTabEnum.MOBILE_MONEY, t('tab_wallet')), tab(CheckoutTabEnum.CARD, t('card'))] }), _jsx(MethodGrid, { cards: cards }), !onCard && _jsx(SheetPhoneField, { core: core, phoneRef: phoneRef }), !onCard && derived.selected?.flow === MethodFlowEnum.OTP && (_jsx(SheetCodeField, { core: core })), onCard && derived.selected?.flow === MethodFlowEnum.CARD_FIELDS && (_jsx(SheetCardFields, { core: core, bridge: cardFields }))] }));
+}
+const styles = StyleSheet.create({
+    form: { paddingHorizontal: 18, paddingTop: 14, paddingBottom: 8 },
+    countries: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 8,
+        marginBottom: 12,
+    },
+    country: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        borderWidth: 1,
+        borderRadius: 16,
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+    },
+    tabs: { flexDirection: 'row', borderRadius: 12, padding: 3 },
+    tab: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: 36,
+        borderRadius: 9,
+    },
+    tabOn: {
+        shadowColor: 'black',
+        shadowOpacity: 0.12,
+        shadowRadius: 2,
+        shadowOffset: { width: 0, height: 1 },
+        elevation: 1,
+    },
+    grid: { gap: 8, marginTop: 12 },
+    gridRow: { flexDirection: 'row', gap: 8 },
+    gridSpacer: { flex: 1 },
+});

package/dist/components/SheetHeader.d.ts

@@ -0,0 +1,6 @@
+import type { SheetHeaderProps } from '../models/sheet.interface.js';
+/**
+ * The grabber, then the app being paid: its logo and name, the Test badge,
+ * and close. Dragged down, the sheet follows.
+ */
+export declare function SheetHeader({ view, loading, onClose, dragHandlers, }: SheetHeaderProps): import("react").JSX.Element;