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

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,97 @@
+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", 
+                // iOS's number keypads have no Go key: asking for one adds a bar above them.
+                returnKeyType: Platform.OS === 'android' ? 'go' : undefined, 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,8 @@
+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 one picked on its own row),
+ * 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,101 @@
+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 { SheetChosenMethod } from "./SheetChosenMethod.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 one picked on its own row),
+ * 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),
+        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'))] }), derived.selected ? (_jsx(SheetChosenMethod, { logo: logoOf(derived.selected), name: derived.selected.name, sub: derived.selected.network, onChange: actions.openPicker })) : (_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;

package/dist/components/SheetHeader.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Image, Pressable, StyleSheet, View } from 'react-native';
+import { useTranslations } from 'use-intl';
+import { MEDIA_LINE } from "../checkout-core/models/checkout.constants.js";
+import { useSheetTheme } from "../hooks/use-sheet-theme.js";
+import { FigtreeEnum } from "../models/sheet.enum.js";
+import { SheetBone } from "./SheetBone.js";
+import { SheetText } from "./SheetText.js";
+/**
+ * The grabber, then the app being paid: its logo and name, the Test badge,
+ * and close. Dragged down, the sheet follows.
+ */
+export function SheetHeader({ view, loading, onClose, dragHandlers, }) {
+    const t = useTranslations('checkout');
+    const { colors, brand } = useSheetTheme();
+    const app = view?.app;
+    return (_jsxs(View, { ...dragHandlers, children: [_jsx(View, { style: [styles.grabber, { backgroundColor: colors.line3 }] }), _jsxs(View, { style: styles.row, children: [loading ? (_jsxs(_Fragment, { children: [_jsx(SheetBone, { width: 34, height: 34, radius: 9 }), _jsx(View, { style: styles.name, children: _jsx(SheetBone, { width: 84, height: 14 }) })] })) : (app &&
+                        (app.logoUrl ? (_jsx(Image, { source: { uri: app.logoUrl }, accessibilityIgnoresInvertColors: true, style: styles.logo })) : (_jsx(View, { testID: "app-initial", style: [styles.initial, { backgroundColor: brand }], children: _jsx(SheetText, { weight: FigtreeEnum.EXTRA_BOLD, size: 15, color: "white", style: styles.centred, children: app.name.charAt(0) }) })))), !loading && (_jsx(SheetText, { weight: FigtreeEnum.BOLD, size: 16, numberOfLines: 1, accessibilityRole: "header", style: [styles.name, styles.centred], children: app?.name ?? 'Brissoto Pay' })), !loading && view?.test && (_jsx(View, { style: [styles.badge, { backgroundColor: colors.warnSoft }], children: _jsx(SheetText, { weight: FigtreeEnum.EXTRA_BOLD, size: 10.5, color: colors.warnInk, style: [styles.badgeText, styles.centred], children: t('test_badge') }) })), _jsxs(Pressable, { onPress: onClose, accessibilityRole: "button", accessibilityLabel: t('close'), hitSlop: 8, style: [styles.close, { backgroundColor: colors.fill }], children: [_jsx(View, { style: [styles.bar, styles.barUp, { backgroundColor: colors.ink2 }] }), _jsx(View, { style: [
+                                    styles.bar,
+                                    styles.barDown,
+                                    { backgroundColor: colors.ink2 },
+                                ] })] })] })] }));
+}
+const styles = StyleSheet.create({
+    grabber: {
+        alignSelf: 'center',
+        width: 38,
+        height: 5,
+        borderRadius: 3,
+        marginTop: 7,
+    },
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 10,
+        paddingHorizontal: 18,
+        paddingTop: 10,
+    },
+    logo: {
+        width: 34,
+        height: 34,
+        borderRadius: 9,
+        borderWidth: 1,
+        borderColor: MEDIA_LINE,
+    },
+    initial: {
+        width: 34,
+        height: 34,
+        borderRadius: 9,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    name: { flex: 1 },
+    // Android adds font padding above the ascender: without it, each text sits
+    // on the row's centre line like the logo, the badge and close.
+    centred: { includeFontPadding: false, textAlignVertical: 'center' },
+    badge: { borderRadius: 6, paddingHorizontal: 7, paddingVertical: 3 },
+    badgeText: { letterSpacing: 0.6, textTransform: 'uppercase' },
+    close: {
+        width: 30,
+        height: 30,
+        borderRadius: 15,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    bar: { position: 'absolute', width: 14, height: 2, borderRadius: 1 },
+    barUp: { transform: [{ rotate: '45deg' }] },
+    barDown: { transform: [{ rotate: '-45deg' }] },
+});

package/dist/components/SheetIcon.d.ts

@@ -0,0 +1,3 @@
+import type { SheetIconProps } from '../models/sheet.interface.js';
+/** A sign in a disc, drawn with views: the sheet ships no icon font or SVG. */
+export declare function SheetIcon({ kind, color, background, size, }: SheetIconProps): import("react").JSX.Element;

package/dist/components/SheetIcon.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyleSheet, View } from 'react-native';
+import { SheetIconEnum } from "../models/sheet.enum.js";
+/** A sign in a disc, drawn with views: the sheet ships no icon font or SVG. */
+export function SheetIcon({ kind, color, background, size = 48, }) {
+    const scale = size / 48;
+    const ink = { backgroundColor: color };
+    const line = { borderColor: color };
+    let sign;
+    switch (kind) {
+        case SheetIconEnum.CHECK:
+            sign = _jsx(View, { style: [styles.check, line] });
+            break;
+        case SheetIconEnum.CROSS:
+            sign = (_jsxs(_Fragment, { children: [_jsx(View, { style: [styles.bar, styles.up, ink] }), _jsx(View, { style: [styles.bar, styles.down, ink] })] }));
+            break;
+        case SheetIconEnum.CLOCK:
+            sign = (_jsxs(View, { style: [styles.ring, line], children: [_jsx(View, { style: [styles.hour, ink] }), _jsx(View, { style: [styles.minute, ink] })] }));
+            break;
+        case SheetIconEnum.LOCK:
+            sign = (_jsxs(View, { style: styles.lock, children: [_jsx(View, { style: [styles.shackle, line] }), _jsx(View, { style: [styles.body, ink] })] }));
+            break;
+        default:
+            sign = (_jsx(View, { style: [styles.ring, line], children: _jsx(View, { style: [styles.slash, ink] }) }));
+    }
+    return (_jsx(View, { testID: `icon-${kind}`, style: [
+            styles.disc,
+            {
+                width: size,
+                height: size,
+                borderRadius: size / 2,
+                backgroundColor: background,
+            },
+        ], children: _jsx(View, { style: { transform: [{ scale }] }, children: sign }) }));
+}
+const styles = StyleSheet.create({
+    disc: { alignItems: 'center', justifyContent: 'center' },
+    check: {
+        width: 10,
+        height: 18,
+        marginTop: -4,
+        borderRightWidth: 3,
+        borderBottomWidth: 3,
+        transform: [{ rotate: '45deg' }],
+    },
+    bar: { position: 'absolute', width: 18, height: 2.6, borderRadius: 1.3 },
+    up: { transform: [{ rotate: '45deg' }] },
+    down: { transform: [{ rotate: '-45deg' }] },
+    ring: {
+        width: 20,
+        height: 20,
+        borderRadius: 10,
+        borderWidth: 2,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    slash: { width: 18, height: 2, transform: [{ rotate: '-45deg' }] },
+    hour: { position: 'absolute', width: 2, height: 6, top: 3, left: 7 },
+    minute: { position: 'absolute', width: 5, height: 2, top: 7, left: 7 },
+    lock: { alignItems: 'center' },
+    shackle: {
+        width: 12,
+        height: 10,
+        borderWidth: 2.4,
+        borderBottomWidth: 0,
+        borderTopLeftRadius: 6,
+        borderTopRightRadius: 6,
+    },
+    body: { width: 18, height: 12, borderRadius: 3 },
+});

package/dist/components/SheetLayout.d.ts

@@ -0,0 +1,9 @@
+import type { SheetLayoutProps } from '../models/sheet.interface.js';
+/**
+ * What scrolls, then "Payment secured by Brissoto Pay" over the actions
+ * pinned at the bottom, so Pay sits right on the keyboard. What scrolls is
+ * as tall as it is, until the sheet runs out of room. The keyboard pushes
+ * the actions up, without the room kept for the home bar: what scrolls
+ * follows to its end, where the number is.
+ */
+export declare function SheetLayout({ children, foot, secure, }: SheetLayoutProps): import("react").JSX.Element;

package/dist/components/SheetLayout.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Keyboard, Platform, ScrollView, StyleSheet, View } from 'react-native';
+import { useTranslations } from 'use-intl';
+import { useSheetTheme } from "../hooks/use-sheet-theme.js";
+import { FigtreeEnum } from "../models/sheet.enum.js";
+import { SheetText } from "./SheetText.js";
+/**
+ * What scrolls, then "Payment secured by Brissoto Pay" over the actions
+ * pinned at the bottom, so Pay sits right on the keyboard. What scrolls is
+ * as tall as it is, until the sheet runs out of room. The keyboard pushes
+ * the actions up, without the room kept for the home bar: what scrolls
+ * follows to its end, where the number is.
+ */
+export function SheetLayout({ children, foot, secure = true, }) {
+    const t = useTranslations('checkout');
+    const { colors } = useSheetTheme();
+    const scroller = useRef(null);
+    const [keyboard, setKeyboard] = useState(false);
+    useEffect(() => {
+        // iOS tells before the keyboard moves, Android only once it has.
+        const ios = Platform.OS === 'ios';
+        const listeners = [
+            Keyboard.addListener('keyboardDidShow', () => scroller.current?.scrollToEnd()),
+            Keyboard.addListener(ios ? 'keyboardWillShow' : 'keyboardDidShow', () => setKeyboard(true)),
+            Keyboard.addListener(ios ? 'keyboardWillHide' : 'keyboardDidHide', () => setKeyboard(false)),
+        ];
+        return () => listeners.forEach((listener) => listener.remove());
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx(ScrollView, { ref: scroller, style: styles.body, contentContainerStyle: styles.content, keyboardShouldPersistTaps: "handled", keyboardDismissMode: "interactive", children: children }), (foot || secure) && (_jsxs(View, { testID: "sheet-foot", style: [
+                    styles.foot,
+                    keyboard && styles.footOnKeyboard,
+                    { borderColor: colors.line },
+                ], children: [secure && (_jsxs(SheetText, { size: 11.5, color: colors.muted, style: styles.secure, children: [t('secured_by'), ' ', _jsx(SheetText, { weight: FigtreeEnum.BOLD, size: 11.5, children: "Brissoto Pay" })] })), foot] }))] }));
+}
+const styles = StyleSheet.create({
+    body: { flexGrow: 0, flexShrink: 1, marginTop: 6 },
+    content: { paddingBottom: 16 },
+    foot: {
+        borderTopWidth: 1,
+        paddingHorizontal: 18,
+        paddingTop: 12,
+        paddingBottom: 28,
+        gap: 10,
+    },
+    footOnKeyboard: { paddingBottom: 12 },
+    secure: { textAlign: 'center' },
+});

package/dist/components/SheetLogo.d.ts

@@ -0,0 +1,3 @@
+import type { SheetLogoProps } from '../models/sheet.interface.js';
+/** A brand's square tile, the same as on the web checkout. */
+export declare function SheetLogo({ logo, size, muted, }: SheetLogoProps): import("react").JSX.Element;

package/dist/components/SheetLogo.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Image, StyleSheet } from 'react-native';
+import { LOGO_RADIUS_RATIO, LOGO_SIZE, MEDIA_LINE, } from "../checkout-core/models/checkout.constants.js";
+import { PROVIDER_LOGOS } from "../models/sheet.constants.js";
+/** A brand's square tile, the same as on the web checkout. */
+export function SheetLogo({ logo, size = LOGO_SIZE.INLINE, muted = false, }) {
+    return (_jsx(Image, { source: PROVIDER_LOGOS[logo], accessibilityIgnoresInvertColors: true, style: [
+            styles.logo,
+            {
+                width: size,
+                height: size,
+                borderRadius: Math.round(size * LOGO_RADIUS_RATIO),
+            },
+            muted && styles.muted,
+        ] }));
+}
+const styles = StyleSheet.create({
+    logo: { borderWidth: 1, borderColor: MEDIA_LINE },
+    muted: { opacity: 0.45 },
+});

package/dist/components/SheetMessage.d.ts

@@ -0,0 +1,3 @@
+import type { SheetMessageProps } from '../models/sheet.interface.js';
+/** A dead end the payer cannot fix here: its sign, what happened and why. */
+export declare function SheetMessage({ title, body, icon, danger, }: SheetMessageProps): import("react").JSX.Element;

package/dist/components/SheetMessage.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyleSheet, View } from 'react-native';
+import { useSheetTheme } from "../hooks/use-sheet-theme.js";
+import { FigtreeEnum, SheetIconEnum } from "../models/sheet.enum.js";
+import { SheetIcon } from "./SheetIcon.js";
+import { SheetText } from "./SheetText.js";
+/** A dead end the payer cannot fix here: its sign, what happened and why. */
+export function SheetMessage({ title, body, icon = SheetIconEnum.BAN, danger = false, }) {
+    const { colors } = useSheetTheme();
+    return (_jsxs(View, { style: styles.message, children: [_jsx(SheetIcon, { kind: icon, color: danger ? colors.danger : colors.ink2, background: danger ? colors.dangerSoft : colors.fill2 }), _jsx(SheetText, { weight: FigtreeEnum.BOLD, size: 22, accessibilityRole: "header", style: styles.title, children: title }), _jsx(SheetText, { size: 15, color: colors.inkStrong, children: body })] }));
+}
+const styles = StyleSheet.create({
+    message: { paddingHorizontal: 18, paddingTop: 28 },
+    title: { marginTop: 16, marginBottom: 8, letterSpacing: -0.4 },
+});

package/dist/components/SheetMethodCard.d.ts

@@ -0,0 +1,3 @@
+import type { MethodCardProps } from '../models/sheet.interface.js';
+/** One method of the grid: logo and radio dot, then its name and network, or why it is greyed. Picked, it becomes the chosen row. */
+export declare function SheetMethodCard({ logo, name, sub, muted, onSelect, }: MethodCardProps): import("react").JSX.Element;