@heyama/pay-react-native 1.0.0 → 1.0.2

package/dist/checkout-core/hooks/use-checkout-controller.js

@@ -1,12 +1,12 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useFormatter, useTranslations } from 'use-intl';
 import { COPIED_MS, FLOW_TRAITS, OTP_MAX_LENGTH, OTP_PATTERN, } from "../models/checkout.constants.js";
-import { CardFieldsMessageEnum, CheckoutScreenEnum, CheckoutTabEnum, MethodFlowEnum, MethodStateEnum, PayRefusalEnum, } from "../models/checkout.enum.js";
+import { CardFieldsMessageEnum, CheckoutScreenEnum, CheckoutTabEnum, CheckoutToastToneEnum, MethodFlowEnum, MethodStateEnum, PayRefusalEnum, } from "../models/checkout.enum.js";
 import { CountryEnum } from "../models/domain.enum.js";
 import { cardLabel } from "../models/checkout.card.utils.js";
 import { formatMoney } from "../models/checkout.money.utils.js";
 import { maskE164 } from "../models/checkout.phone.utils.js";
-import { countriesOf, deriveCheckout, initialUi, screenOf, waitLeftOf, } from "../models/checkout.view.utils.js";
+import { countriesOf, deriveCheckout, initialUi, logoOf, screenOf, waitLeftOf, } from "../models/checkout.view.utils.js";
 import { useNow, useReturnCountdown, useToast } from "./use-checkout-timers.js";
 import { usePhoneNumber } from "./use-phone-number.js";
 /** Before the payment has loaded, or for a link that matches none. */
@@ -84,7 +84,7 @@ export function useCheckoutController(view, { clues, mutations, platform }) {
         if (!waiting || waitLeft > 0)
             return;
         update({ dismissed: attemptReference });
-        showToast(noAnswer);
+        showToast(noAnswer, CheckoutToastToneEnum.WARNING);
     }, [waiting, waitLeft, attemptReference, noAnswer, showToast, update]);
     const paymentId = view?.id;
     // A payer opened the link, said once per page (the dashboard's preview has no mutations).
@@ -131,7 +131,7 @@ export function useCheckoutController(view, { clues, mutations, platform }) {
                     break;
                 case CardFieldsMessageEnum.REFUSED:
                     update({ cardPaying: false });
-                    showToast(message.reason ? refusals(message.reason) : failedToast);
+                    showToast(message.reason ? refusals(message.reason) : failedToast, CheckoutToastToneEnum.WARNING);
                     break;
             }
         };
@@ -139,7 +139,7 @@ export function useCheckoutController(view, { clues, mutations, platform }) {
     }, [update, showToast, refusals, failedToast, platform]);
     /* ---------------------------------------------------------- helpers */
     const reference = attempt?.reference ?? view?.id ?? '';
-    const comingSoon = (name) => toast.show(t('toast.soon', { method: name }));
+    const comingSoon = (name) => toast.show(t('toast.soon', { method: name }), CheckoutToastToneEnum.INFO);
     /**
      * Starts an attempt with the number, and the payment code of an OTP
      * method; a second tap while one is on its way does nothing.
@@ -155,9 +155,9 @@ export function useCheckoutController(view, { clues, mutations, platform }) {
             : mutations.payWithCode({ ...args, otp }))
             .then((result) => {
             if (!result.ok)
-                toast.show(t(`refusals.${result.reason}`));
+                toast.show(t(`refusals.${result.reason}`), CheckoutToastToneEnum.WARNING);
         })
-            .catch(() => toast.show(t('toast.failed')))
+            .catch(() => toast.show(t('toast.failed'), CheckoutToastToneEnum.WARNING))
             .finally(() => {
             paying.current = false;
             update({ submitting: false });
@@ -188,7 +188,7 @@ export function useCheckoutController(view, { clues, mutations, platform }) {
                 comingSoon(method.name);
             }
             else if (method.state === MethodStateEnum.MAINTENANCE) {
-                toast.show(method.note ?? t('toast.unavailable', { method: method.name }));
+                toast.show(method.note ?? t('toast.unavailable', { method: method.name }), CheckoutToastToneEnum.WARNING, logoOf(method));
             }
             else {
                 update({
@@ -205,7 +205,7 @@ export function useCheckoutController(view, { clues, mutations, platform }) {
         switchToDetected: () => {
             const detected = derived.mismatch;
             update({ method: detected.id });
-            toast.show(t('toast.switched', { method: detected.name }));
+            toast.show(t('toast.switched', { method: detected.name }), CheckoutToastToneEnum.SUCCESS, logoOf(detected));
         },
         pay: () => {
             const { selected } = derived;
@@ -225,11 +225,11 @@ export function useCheckoutController(view, { clues, mutations, platform }) {
             }
             const otp = selected.flow === MethodFlowEnum.OTP;
             if (otp && !OTP_PATTERN.test(ui.code)) {
-                toast.show(t(`refusals.${PayRefusalEnum.CODE}`));
+                toast.show(t(`refusals.${PayRefusalEnum.CODE}`), CheckoutToastToneEnum.WARNING);
                 return;
             }
             if (!mutations) {
-                toast.show(t('toast.preview'));
+                toast.show(t('toast.preview'), CheckoutToastToneEnum.INFO);
                 return;
             }
             submit(selected.id, {
@@ -240,7 +240,7 @@ export function useCheckoutController(view, { clues, mutations, platform }) {
         // Only offered while an OTP method, which always has its code, is picked.
         cannotDial: () => {
             const method = derived.selected;
-            toast.show(t('toast.dial', { code: method.otpCode, method: method.name }));
+            toast.show(t('toast.dial', { code: method.otpCode, method: method.name }), CheckoutToastToneEnum.INFO, logoOf(method));
         },
         // Only on the failure screen, which the preview never shows.
         retry: () => {
@@ -273,15 +273,15 @@ export function useCheckoutController(view, { clues, mutations, platform }) {
         resend: () => {
             void mutations
                 .resend({ paymentId: view.id })
-                .then((result) => toast.show(result.ok
-                ? t('toast.resent', { phone: maskE164(attempt.phone) })
-                : t('toast.resend_wait')))
-                .catch(() => toast.show(t('toast.failed')));
+                .then((result) => result.ok
+                ? toast.show(t('toast.resent', { phone: maskE164(attempt.phone) }), CheckoutToastToneEnum.SUCCESS)
+                : toast.show(t('toast.resend_wait'), CheckoutToastToneEnum.INFO))
+                .catch(() => toast.show(t('toast.failed'), CheckoutToastToneEnum.WARNING));
         },
         cancel: () => {
             void mutations
                 .cancel({ paymentId: view.id })
-                .catch(() => toast.show(t('toast.failed')));
+                .catch(() => toast.show(t('toast.failed'), CheckoutToastToneEnum.WARNING));
         },
         returnNow: goBack,
         stayHere: countdown.stop,
@@ -292,11 +292,11 @@ export function useCheckoutController(view, { clues, mutations, platform }) {
             clearTimeout(copiedTimer.current);
             setCopied(true);
             copiedTimer.current = setTimeout(() => setCopied(false), COPIED_MS);
-            toast.show(t('toast.copied'));
+            toast.show(t('toast.copied'), CheckoutToastToneEnum.SUCCESS);
         },
         downloadReceipt: () => {
             platform.saveReceipt(`receipt-${reference}.txt`, receiptText(view));
-            toast.show(t('toast.downloaded'));
+            toast.show(t('toast.downloaded'), CheckoutToastToneEnum.SUCCESS);
         },
         simulate: (outcome) => {
             void mutations.simulate({ paymentId: view.id, outcome });
@@ -310,7 +310,7 @@ export function useCheckoutController(view, { clues, mutations, platform }) {
         waitLeft,
         returnLeft: countdown.left,
         helpOpen,
-        toastMessage: toast.message,
+        toast: toast.toast,
         copied,
         preview: !mutations,
         cardHeight,

package/dist/checkout-core/hooks/use-checkout-timers.d.ts

@@ -1,3 +1,6 @@
+import type { CheckoutToastToneEnum } from '../models/checkout.enum.js';
+import type { ProviderLogoEnum } from '../models/domain.enum.js';
+import type { CheckoutToast } from '../models/checkout.interface.js';
 /** The time now, moving once a second while `running`: the waiting screen's clock. */
 export declare function useNow(running: boolean): number;
 /**
@@ -8,8 +11,8 @@ export declare function useReturnCountdown(running: boolean, onDone: () => void)
     left: number | null;
     stop: () => void;
 };
-/** One short message at a time at the top of the page. */
+/** One short message at a time at the top of the page, with its tone and the method it is about. */
 export declare function useToast(): {
-    message: string | null;
-    show: (next: string) => void;
+    toast: CheckoutToast | null;
+    show: (message: string, tone: CheckoutToastToneEnum, logo?: ProviderLogoEnum | null) => void;
 };

package/dist/checkout-core/hooks/use-checkout-timers.js

@@ -30,15 +30,15 @@ export function useReturnCountdown(running, onDone) {
     }, [running, left, onDone]);
     return { left, stop: () => setLeft(null) };
 }
-/** One short message at a time at the top of the page. */
+/** One short message at a time at the top of the page, with its tone and the method it is about. */
 export function useToast() {
-    const [message, setMessage] = useState(null);
+    const [toast, setToast] = useState(null);
     const timer = useRef(undefined);
     useEffect(() => () => clearTimeout(timer.current), []);
-    const show = useCallback((next) => {
+    const show = useCallback((message, tone, logo = null) => {
         clearTimeout(timer.current);
-        setMessage(next);
-        timer.current = setTimeout(() => setMessage(null), TOAST_MS);
+        setToast({ message, tone, logo });
+        timer.current = setTimeout(() => setToast(null), TOAST_MS);
     }, []);
-    return { message, show };
+    return { toast, show };
 }

package/dist/checkout-core/messages/en.d.ts

@@ -226,6 +226,7 @@ declare const _default: {
         method: string;
         phone: string;
         code: string;
+        busy: string;
     };
     toast: {
         copied: string;

package/dist/checkout-core/messages/en.js

@@ -217,6 +217,7 @@ export default {
         method: 'This method is not available right now. Pick another one.',
         phone: 'This number does not belong to this method’s country.',
         code: 'Enter the payment code you generated.',
+        busy: 'Your earlier attempts are still in progress. Wait for their answer before trying again.',
     },
     toast: {
         copied: 'Reference copied',

package/dist/checkout-core/messages/fr.js

@@ -218,6 +218,7 @@ const messages = {
         method: "Ce moyen n'est pas disponible pour le moment. Choisissez-en un autre.",
         phone: "Ce numéro n'est pas du pays de ce moyen.",
         code: 'Saisissez le code de paiement que vous avez généré.',
+        busy: 'Vos tentatives précédentes sont encore en cours. Attendez leur réponse avant de réessayer.',
     },
     toast: {
         copied: 'Référence copiée',

package/dist/checkout-core/models/checkout.enum.d.ts

@@ -55,7 +55,9 @@ export declare enum PayRefusalEnum {
     METHOD = "method",
     PHONE = "phone",
     /** An OTP method came without a valid code. */
-    CODE = "code"
+    CODE = "code",
+    /** Earlier attempts still pending could use up the payment's tries. */
+    BUSY = "busy"
 }
 /**
  * What a provider's card fields page and the checkout tell each other through
@@ -129,3 +131,9 @@ export declare enum CheckoutThemeEnum {
     LIGHT = "light",
     DARK = "dark"
 }
+/** What a toast says: done, a problem, or just good to know. Sets its icon. */
+export declare enum CheckoutToastToneEnum {
+    SUCCESS = "success",
+    WARNING = "warning",
+    INFO = "info"
+}

package/dist/checkout-core/models/checkout.enum.js

@@ -64,6 +64,8 @@ export var PayRefusalEnum;
     PayRefusalEnum["PHONE"] = "phone";
     /** An OTP method came without a valid code. */
     PayRefusalEnum["CODE"] = "code";
+    /** Earlier attempts still pending could use up the payment's tries. */
+    PayRefusalEnum["BUSY"] = "busy";
 })(PayRefusalEnum || (PayRefusalEnum = {}));
 /**
  * What a provider's card fields page and the checkout tell each other through
@@ -146,3 +148,10 @@ export var CheckoutThemeEnum;
     CheckoutThemeEnum["LIGHT"] = "light";
     CheckoutThemeEnum["DARK"] = "dark";
 })(CheckoutThemeEnum || (CheckoutThemeEnum = {}));
+/** What a toast says: done, a problem, or just good to know. Sets its icon. */
+export var CheckoutToastToneEnum;
+(function (CheckoutToastToneEnum) {
+    CheckoutToastToneEnum["SUCCESS"] = "success";
+    CheckoutToastToneEnum["WARNING"] = "warning";
+    CheckoutToastToneEnum["INFO"] = "info";
+})(CheckoutToastToneEnum || (CheckoutToastToneEnum = {}));

package/dist/checkout-core/models/checkout.interface.d.ts

@@ -1,4 +1,4 @@
-import type { CardFieldsMessageEnum, CheckoutPaymentStatusEnum, CheckoutScreenEnum, CheckoutTabEnum, CheckoutThemeEnum, MethodBrandEnum, MethodFlowEnum, MethodKindEnum, MethodStateEnum, PayRefusalEnum, PhoneErrorEnum, SimulatorOutcomeEnum, SupportChannelEnum } from './checkout.enum.js';
+import type { CardFieldsMessageEnum, CheckoutPaymentStatusEnum, CheckoutToastToneEnum, CheckoutScreenEnum, CheckoutTabEnum, CheckoutThemeEnum, MethodBrandEnum, MethodFlowEnum, MethodKindEnum, MethodStateEnum, PayRefusalEnum, PhoneErrorEnum, SimulatorOutcomeEnum, SupportChannelEnum } from './checkout.enum.js';
 import type { AttemptStatusEnum, CountryEnum, CurrencyEnum, FailureReasonEnum, LangEnum, ProviderLogoEnum } from './domain.enum.js';
 export interface CheckoutApp {
     name: string;
@@ -231,6 +231,13 @@ export interface CheckoutCoreActions {
     simulate: (outcome: SimulatorOutcomeEnum) => void;
 }
 /** The checkout's state and actions, the same on the web page and in the payment sheet. */
+/** One short message over the page. */
+export interface CheckoutToast {
+    message: string;
+    tone: CheckoutToastToneEnum;
+    /** The method it is about, shown in place of the tone's icon. */
+    logo: ProviderLogoEnum | null;
+}
 export interface CheckoutCore {
     /** Null for a link that matches no payment. */
     view: CheckoutView | null;
@@ -242,7 +249,7 @@ export interface CheckoutCore {
     /** Seconds before the success screen sends the payer back, null once stopped. */
     returnLeft: number | null;
     helpOpen: boolean;
-    toastMessage: string | null;
+    toast: CheckoutToast | null;
     copied: boolean;
     /** The Branding tab's preview: nothing can be paid. */
     preview: boolean;

package/dist/components/PaymentSheetModal.js

@@ -60,7 +60,10 @@ export function PaymentSheetModal({ calls, request, onClose, }) {
                         ] }) }), _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 }) }) }) }) }) })] }) }));
+                    ], children: _jsx(View, { style: [styles.stage, { paddingTop: motion.topGap }], children: _jsxs(KeyboardAvoidingView, { behavior: "padding", style: styles.sheet, children: [_jsx(View, { testID: "payment-sheet-floor", style: [
+                                        styles.floor,
+                                        { backgroundColor: theme.colors.surface },
+                                    ] }), _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 },
@@ -69,4 +72,6 @@ const styles = StyleSheet.create({
     // The app's dim shows through around the sheet.
     stage: { flex: 1, justifyContent: 'flex-end', pointerEvents: 'box-none' },
     sheet: { flexShrink: 1 },
+    // Under the sheet's rounded top, down to the screen's bottom.
+    floor: { position: 'absolute', top: 14, right: 0, bottom: 0, left: 0 },
 });

package/dist/components/SheetChosenMethod.d.ts

@@ -0,0 +1,3 @@
+import type { ChosenMethodProps } from '../models/sheet.interface.js';
+/** The method picked, on one row, with Change back to the list: as on the web checkout. */
+export declare function SheetChosenMethod({ logo, name, sub, onChange, }: ChosenMethodProps): import("react").JSX.Element;

package/dist/components/SheetChosenMethod.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { useTranslations } from 'use-intl';
+import { LOGO_SIZE } from "../checkout-core/models/checkout.constants.js";
+import { useSheetTheme } from "../hooks/use-sheet-theme.js";
+import { FigtreeEnum } from "../models/sheet.enum.js";
+import { SheetLogo } from "./SheetLogo.js";
+import { SheetText } from "./SheetText.js";
+/** The method picked, on one row, with Change back to the list: as on the web checkout. */
+export function SheetChosenMethod({ logo, name, sub, onChange, }) {
+    const t = useTranslations('checkout');
+    const { colors, brand } = useSheetTheme();
+    return (_jsxs(View, { testID: "chosen-method", style: [
+            styles.row,
+            { borderColor: colors.line2, backgroundColor: colors.surface },
+        ], children: [_jsxs(View, { children: [_jsx(SheetLogo, { logo: logo, size: LOGO_SIZE.ROW }), _jsx(View, { style: [
+                            styles.badge,
+                            { borderColor: colors.surface, backgroundColor: brand },
+                        ], children: _jsx(View, { style: styles.check }) })] }), _jsxs(View, { style: styles.text, children: [_jsx(SheetText, { weight: FigtreeEnum.SEMI_BOLD, size: 14, numberOfLines: 1, children: name }), _jsx(SheetText, { size: 12, color: colors.muted, numberOfLines: 1, children: sub })] }), _jsx(TouchableOpacity, { onPress: onChange, activeOpacity: 0.7, accessibilityRole: "button", accessibilityLabel: t('change'), hitSlop: 6, style: styles.change, children: _jsx(SheetText, { weight: FigtreeEnum.BOLD, size: 12, color: brand, children: t('change') }) })] }));
+}
+const styles = StyleSheet.create({
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 12,
+        height: 48,
+        marginTop: 12,
+        borderWidth: 1,
+        borderRadius: 12,
+        paddingLeft: 8,
+        paddingRight: 6,
+    },
+    badge: {
+        position: 'absolute',
+        right: -4,
+        bottom: -4,
+        width: 16,
+        height: 16,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth: 2,
+        borderRadius: 8,
+    },
+    check: {
+        width: 3.5,
+        height: 6.5,
+        marginTop: -1,
+        borderColor: 'white',
+        borderRightWidth: 1.6,
+        borderBottomWidth: 1.6,
+        transform: [{ rotate: '45deg' }],
+    },
+    text: { flex: 1, minWidth: 0 },
+    change: {
+        height: 32,
+        justifyContent: 'center',
+        borderRadius: 8,
+        paddingHorizontal: 10,
+    },
+});

package/dist/components/SheetCodeField.js

@@ -47,7 +47,9 @@ export function SheetCodeField({ core }) {
             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: [
+    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, { paragraph: true, 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 })] })] })] }));

package/dist/components/SheetContent.js

@@ -93,7 +93,7 @@ export function SheetContent({ calls, watched, fontsReady, deviceLocale, onClose
                         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 })] }));
+    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, { toast: core.toast })] }));
 }
 const styles = StyleSheet.create({
     // As tall as its screen; past the room it has, the screen scrolls.

package/dist/components/SheetFailed.js

@@ -29,10 +29,10 @@ export function SheetFailed({ core }) {
                             ? 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', {
+                        : 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, { paragraph: true, size: 15, color: colors.inkStrong, children: t(`failure.${reason}.body`, values) }), _jsx(SheetText, { paragraph: true, 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') }))] }) }));
+                            }) })] }), reason !== FailureReasonEnum.MISMATCH && (_jsx(SheetText, { paragraph: true, size: 13, color: colors.muted, style: styles.note, children: t('not_charged') }))] }) }));
 }
 const styles = StyleSheet.create({
     failed: { paddingHorizontal: 18, paddingTop: 28 },

package/dist/components/SheetForm.d.ts

@@ -1,7 +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 number, the payment code
+ * 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

@@ -7,6 +7,7 @@ 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";
@@ -21,7 +22,8 @@ function MethodGrid({ cards }) {
 }
 /**
  * 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
+ * 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 }) {
@@ -39,7 +41,6 @@ export function SheetForm({ core, phoneRef, cardFields }) {
         logo: logoOf(method),
         name: method.name,
         sub: subOf(method),
-        checked: derived.selected?.id === method.id,
         muted: method.state !== MethodStateEnum.AVAILABLE,
         onSelect: () => actions.selectMethod(method),
     });
@@ -60,7 +61,7 @@ export function SheetForm({ core, phoneRef, cardFields }) {
                                 ? { 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 }))] }));
+                }) })), _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 },

package/dist/components/SheetIcon.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, 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. */
@@ -12,7 +12,8 @@ export function SheetIcon({ kind, color, background, size = 48, }) {
             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] })] }));
+            // Crossed in a box of their own length: centred in the disc.
+            sign = (_jsxs(View, { style: styles.cross, 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] })] }));
@@ -43,6 +44,12 @@ const styles = StyleSheet.create({
         borderBottomWidth: 3,
         transform: [{ rotate: '45deg' }],
     },
+    cross: {
+        width: 18,
+        height: 18,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
     bar: { position: 'absolute', width: 18, height: 2.6, borderRadius: 1.3 },
     up: { transform: [{ rotate: '45deg' }] },
     down: { transform: [{ rotate: '-45deg' }] },

package/dist/components/SheetLayout.d.ts

@@ -1,8 +1,9 @@
 import type { SheetLayoutProps } from '../models/sheet.interface.js';
 /**
- * What scrolls, then the actions pinned at the bottom with "Payment secured
- * by Brissoto Pay". What scrolls is as tall as it is, until the sheet runs
- * out of room. The keyboard pushes the actions up: what scrolls follows to
- * its end, where the number is.
+ * 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

@@ -1,25 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
-import { Keyboard, ScrollView, StyleSheet, View } from 'react-native';
+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 the actions pinned at the bottom with "Payment secured
- * by Brissoto Pay". What scrolls is as tall as it is, until the sheet runs
- * out of room. The keyboard pushes the actions up: what scrolls follows to
- * its end, where the number is.
+ * 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(() => {
-        const shown = Keyboard.addListener('keyboardDidShow', () => scroller.current?.scrollToEnd());
-        return () => shown.remove();
+        // 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, { style: [styles.foot, { borderColor: colors.line }], children: [foot, 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" })] }))] }))] }));
+    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 },
@@ -31,5 +43,6 @@ const styles = StyleSheet.create({
         paddingBottom: 28,
         gap: 10,
     },
+    footOnKeyboard: { paddingBottom: 12 },
     secure: { textAlign: 'center' },
 });

package/dist/components/SheetMessage.js

@@ -7,7 +7,7 @@ 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 })] }));
+    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, { paragraph: true, size: 15, color: colors.inkStrong, children: body })] }));
 }
 const styles = StyleSheet.create({
     message: { paddingHorizontal: 18, paddingTop: 28 },

package/dist/components/SheetMethodCard.d.ts

@@ -1,3 +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. */
-export declare function SheetMethodCard({ logo, name, sub, checked, muted, onSelect, }: MethodCardProps): import("react").JSX.Element;
+/** 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;

package/dist/components/SheetMethodCard.js

@@ -5,19 +5,12 @@ import { useSheetTheme } from "../hooks/use-sheet-theme.js";
 import { FigtreeEnum } from "../models/sheet.enum.js";
 import { SheetLogo } from "./SheetLogo.js";
 import { SheetText } from "./SheetText.js";
-/** One method of the grid: logo and radio dot, then its name and network, or why it is greyed. */
-export function SheetMethodCard({ logo, name, sub, checked, muted, onSelect, }) {
-    const { colors, brand } = useSheetTheme();
-    return (_jsxs(TouchableOpacity, { onPress: onSelect, disabled: muted, activeOpacity: 0.7, accessibilityRole: "radio", accessibilityLabel: `${name}, ${sub}`, accessibilityState: { checked, disabled: muted }, style: [
-            styles.card,
-            checked
-                ? { borderColor: brand, borderWidth: 2, padding: 11 }
-                : { borderColor: colors.line2 },
-        ], children: [_jsxs(View, { style: styles.top, children: [_jsx(SheetLogo, { logo: logo, size: LOGO_SIZE.ROW, muted: muted }), _jsx(View, { style: [
+/** 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 function SheetMethodCard({ logo, name, sub, muted, onSelect, }) {
+    const { colors } = useSheetTheme();
+    return (_jsxs(TouchableOpacity, { onPress: onSelect, disabled: muted, activeOpacity: 0.7, accessibilityRole: "radio", accessibilityLabel: `${name}, ${sub}`, accessibilityState: { checked: false, disabled: muted }, style: [styles.card, { borderColor: colors.line2 }], children: [_jsxs(View, { style: styles.top, children: [_jsx(SheetLogo, { logo: logo, size: LOGO_SIZE.ROW, muted: muted }), _jsx(View, { style: [
                             styles.radio,
-                            checked
-                                ? { borderColor: brand, borderWidth: 6 }
-                                : { borderColor: muted ? colors.line2 : colors.line4 },
+                            { borderColor: muted ? colors.line2 : colors.line4 },
                         ] })] }), _jsx(SheetText, { weight: FigtreeEnum.BOLD, size: 15, numberOfLines: 1, color: muted ? colors.muted : colors.ink, children: name }), _jsx(SheetText, { size: 12.5, numberOfLines: 1, color: muted ? colors.warnInk : colors.muted, children: sub })] }));
 }
 const styles = StyleSheet.create({

package/dist/components/SheetPhoneField.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Pressable, StyleSheet, View } from 'react-native';
+import { Platform, Pressable, 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";
@@ -22,7 +22,9 @@ export function SheetPhoneField({ core, phoneRef }) {
                                 ? brand
                                 : colors.line3,
                     },
-                ], children: [_jsxs(View, { style: [styles.dial, { borderColor: colors.line2 }], children: [_jsx(SheetText, { size: 16, children: flagOf(ui.country) }), _jsx(SheetText, { weight: FigtreeEnum.SEMI_BOLD, size: 16, children: `+${phone.dial}` })] }), _jsx(SheetInput, { ref: phoneRef, accessibilityLabel: t('phone_label'), keyboardType: "phone-pad", textContentType: "telephoneNumber", autoComplete: "tel", returnKeyType: "go", placeholder: phone.placeholder, value: phone.value, onChangeText: (text) => void phone.type(text, text.length), onFocus: phone.onFocus, onBlur: phone.onBlur, onSubmitEditing: actions.pay, editable: !ui.submitting, style: styles.input })] }), _jsx(View, { accessibilityLiveRegion: "polite", style: styles.message, children: error ? (_jsx(SheetText, { weight: FigtreeEnum.MEDIUM, size: 13, color: colors.danger, children: t(`phone_errors.${error}`) })) : mismatch ? (_jsxs(View, { style: styles.mismatch, children: [_jsx(SheetLogo, { logo: mismatch.logos[0] }), _jsx(SheetText, { size: 13, color: colors.ink2, style: styles.grow, children: t('mismatch', { method: mismatch.name }) }), _jsx(Pressable, { onPress: actions.switchToDetected, accessibilityRole: "button", hitSlop: 6, style: [styles.switch, { borderColor: colors.line3 }], children: _jsx(SheetText, { weight: FigtreeEnum.SEMI_BOLD, size: 13, children: t('switch_to') }) })] })) : (selected && (_jsx(SheetText, { size: 13, color: colors.muted, children: t('helper', { method: selected.name }) }))) })] }));
+                ], children: [_jsxs(View, { style: [styles.dial, { borderColor: colors.line2 }], children: [_jsx(SheetText, { size: 16, children: flagOf(ui.country) }), _jsx(SheetText, { weight: FigtreeEnum.SEMI_BOLD, size: 16, children: `+${phone.dial}` })] }), _jsx(SheetInput, { ref: phoneRef, accessibilityLabel: t('phone_label'), keyboardType: "phone-pad", textContentType: "telephoneNumber", autoComplete: "tel", 
+                        // iOS's number keypads have no Go key: asking for one adds a bar above them.
+                        returnKeyType: Platform.OS === 'android' ? 'go' : undefined, placeholder: phone.placeholder, value: phone.value, onChangeText: (text) => void phone.type(text, text.length), onFocus: phone.onFocus, onBlur: phone.onBlur, onSubmitEditing: actions.pay, editable: !ui.submitting, style: styles.input })] }), _jsx(View, { accessibilityLiveRegion: "polite", style: styles.message, children: error ? (_jsx(SheetText, { paragraph: true, weight: FigtreeEnum.MEDIUM, size: 13, color: colors.danger, children: t(`phone_errors.${error}`) })) : mismatch ? (_jsxs(View, { style: styles.mismatch, children: [_jsx(SheetLogo, { logo: mismatch.logos[0] }), _jsx(SheetText, { paragraph: true, size: 13, color: colors.ink2, style: styles.grow, children: t('mismatch', { method: mismatch.name }) }), _jsx(Pressable, { onPress: actions.switchToDetected, accessibilityRole: "button", hitSlop: 6, style: [styles.switch, { borderColor: colors.line3 }], children: _jsx(SheetText, { weight: FigtreeEnum.SEMI_BOLD, size: 13, children: t('switch_to') }) })] })) : (selected && (_jsx(SheetText, { paragraph: true, size: 13, color: colors.muted, children: t('helper', { method: selected.name }) }))) })] }));
 }
 const styles = StyleSheet.create({
     section: { marginTop: 18 },

package/dist/components/SheetSimulator.js

@@ -18,7 +18,7 @@ export function SheetSimulator({ core }) {
     return (_jsxs(View, { accessibilityLabel: t('simulator.title'), style: [
             styles.panel,
             { backgroundColor: colors.warnSoft, borderColor: colors.warnLine },
-        ], children: [_jsx(SheetText, { weight: FigtreeEnum.EXTRA_BOLD, size: 12, color: colors.warnInk2, style: styles.title, children: t('simulator.title') }), _jsxs(SheetText, { size: 13, color: colors.warnInk2, style: styles.body, children: [t('simulator.body'), traits.prompt &&
+        ], children: [_jsx(SheetText, { weight: FigtreeEnum.EXTRA_BOLD, size: 12, color: colors.warnInk2, style: styles.title, children: t('simulator.title') }), _jsxs(SheetText, { paragraph: true, size: 13, color: colors.warnInk2, style: styles.body, children: [t('simulator.body'), traits.prompt &&
                         ` ${t('simulator.no_answer', { suffix: SIMULATOR_NO_ANSWER_SUFFIX })}`] }), _jsx(View, { style: styles.outcomes, children: outcomes.map((outcome) => (_jsx(TouchableOpacity, { onPress: () => core.actions.simulate(outcome), activeOpacity: 0.7, accessibilityRole: "button", style: [
                         styles.outcome,
                         { backgroundColor: colors.surface, borderColor: colors.warnLine },

package/dist/components/SheetSuccess.js

@@ -26,7 +26,7 @@ export function SheetSuccess({ core, onClose }) {
         // Nothing stops the countdown in the sheet: it always runs here.
         , { 
             // Nothing stops the countdown in the sheet: it always runs here.
-            label: t('sheet.done_in', { seconds: returnLeft }), onPress: onClose }), children: _jsxs(View, { style: styles.success, children: [_jsx(View, { style: styles.icon, children: _jsx(SheetIcon, { kind: SheetIconEnum.CHECK, color: colors.surface, background: colors.successInk, size: 64 }) }), _jsx(SheetText, { weight: FigtreeEnum.EXTRA_BOLD, size: 22, accessibilityRole: "header", style: [styles.center, styles.title], children: t('success_title') }), _jsxs(View, { style: styles.amountRow, children: [_jsx(SheetText, { weight: FigtreeEnum.EXTRA_BOLD, size: 34, style: styles.amount, children: formatAmount(view.amount, view.currency) }), _jsx(SheetText, { weight: FigtreeEnum.SEMI_BOLD, size: 16, color: colors.ink2, children: CURRENCY_LABEL[view.currency] })] }), _jsx(SheetText, { color: colors.muted, style: styles.center, children: t('paid_to', { app: view.app.name }) }), _jsxs(View, { style: [styles.rows, { borderColor: colors.line }], children: [_jsxs(SheetRow, { label: t('method'), children: [_jsx(SheetLogo, { logo: logoOf(attempt) }), _jsx(SheetText, { weight: FigtreeEnum.SEMI_BOLD, children: attempt.methodName })] }), attempt.phone && (_jsx(SheetRow, { label: t('number'), children: maskE164(attempt.phone) })), attempt.card && (_jsx(SheetRow, { label: t('card'), children: cardLabel(attempt.card) })), _jsx(SheetRow, { label: t('date'), children: format.dateTime(view.paidAt, {
+            label: t('sheet.done_in', { seconds: returnLeft }), onPress: onClose }), children: _jsxs(View, { style: styles.success, children: [_jsx(View, { style: styles.icon, children: _jsx(SheetIcon, { kind: SheetIconEnum.CHECK, color: colors.surface, background: colors.successInk, size: 64 }) }), _jsx(SheetText, { weight: FigtreeEnum.EXTRA_BOLD, size: 22, accessibilityRole: "header", style: [styles.center, styles.title], children: t('success_title') }), _jsxs(View, { style: styles.amountRow, children: [_jsx(SheetText, { weight: FigtreeEnum.EXTRA_BOLD, size: 34, style: styles.amount, children: formatAmount(view.amount, view.currency) }), _jsx(SheetText, { weight: FigtreeEnum.SEMI_BOLD, size: 16, color: colors.ink2, children: CURRENCY_LABEL[view.currency] })] }), _jsx(SheetText, { paragraph: true, color: colors.muted, style: styles.center, children: t('paid_to', { app: view.app.name }) }), _jsxs(View, { style: [styles.rows, { borderColor: colors.line }], children: [_jsxs(SheetRow, { label: t('method'), children: [_jsx(SheetLogo, { logo: logoOf(attempt) }), _jsx(SheetText, { weight: FigtreeEnum.SEMI_BOLD, children: attempt.methodName })] }), attempt.phone && (_jsx(SheetRow, { label: t('number'), children: maskE164(attempt.phone) })), attempt.card && (_jsx(SheetRow, { label: t('card'), children: cardLabel(attempt.card) })), _jsx(SheetRow, { label: t('date'), children: format.dateTime(view.paidAt, {
                                 day: 'numeric',
                                 month: 'short',
                                 year: 'numeric',

package/dist/components/SheetText.d.ts

@@ -1,5 +1,5 @@
 import type { SheetInputProps, SheetTextProps } from '../models/sheet.interface.js';
-/** Every text of the sheet: Figtree, in the sheet's ink unless told otherwise. */
-export declare function SheetText({ weight, size, color, style, ...props }: SheetTextProps): import("react").JSX.Element;
+/** Every text of the sheet: Figtree, in the sheet's ink unless told otherwise; a paragraph's lines spaced as on the web. */
+export declare function SheetText({ weight, size, color, paragraph, style, ...props }: SheetTextProps): import("react").JSX.Element;
 /** Every field of the sheet: Figtree at 16, so iOS never zooms, in the sheet's ink. */
 export declare function SheetInput({ style, ...props }: SheetInputProps): import("react").JSX.Element;

package/dist/components/SheetText.js

@@ -1,12 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Text, TextInput } from 'react-native';
 import { useSheetTheme } from "../hooks/use-sheet-theme.js";
+import { PARAGRAPH_LINE_HEIGHT } from "../models/sheet.constants.js";
 import { FigtreeEnum } from "../models/sheet.enum.js";
-/** Every text of the sheet: Figtree, in the sheet's ink unless told otherwise. */
-export function SheetText({ weight = FigtreeEnum.REGULAR, size = 14, color, style, ...props }) {
+/** Every text of the sheet: Figtree, in the sheet's ink unless told otherwise; a paragraph's lines spaced as on the web. */
+export function SheetText({ weight = FigtreeEnum.REGULAR, size = 14, color, paragraph = false, style, ...props }) {
     const { colors } = useSheetTheme();
     return (_jsx(Text, { ...props, style: [
             { fontFamily: weight, fontSize: size, color: color ?? colors.ink },
+            paragraph && { lineHeight: Math.round(size * PARAGRAPH_LINE_HEIGHT) },
             style,
         ] }));
 }

package/dist/components/SheetToast.d.ts

@@ -1,3 +1,7 @@
 import type { SheetToastProps } from '../models/sheet.interface.js';
-/** One short message at a time, over the top of the sheet. */
-export declare function SheetToast({ message }: SheetToastProps): import("react").JSX.Element | null;
+/**
+ * One short message at a time, in a small card at the top of the sheet:
+ * the method's logo, else the tone's disc (a check when done, "!" for a
+ * problem, "i" to know). As on the web checkout.
+ */
+export declare function SheetToast({ toast }: SheetToastProps): import("react").JSX.Element | null;

package/dist/components/SheetToast.js

@@ -1,24 +1,71 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { StyleSheet, View } from 'react-native';
+import { CheckoutToastToneEnum } from "../checkout-core/models/checkout.enum.js";
 import { useSheetTheme } from "../hooks/use-sheet-theme.js";
 import { FigtreeEnum } from "../models/sheet.enum.js";
+import { SheetLogo } from "./SheetLogo.js";
 import { SheetText } from "./SheetText.js";
-/** One short message at a time, over the top of the sheet. */
-export function SheetToast({ message }) {
-    const { colors } = useSheetTheme();
-    if (!message)
+/**
+ * One short message at a time, in a small card at the top of the sheet:
+ * the method's logo, else the tone's disc (a check when done, "!" for a
+ * problem, "i" to know). As on the web checkout.
+ */
+export function SheetToast({ toast }) {
+    const { colors, dark } = useSheetTheme();
+    if (!toast)
         return null;
-    return (_jsx(View, { pointerEvents: "none", accessibilityLiveRegion: "polite", accessibilityRole: "alert", style: [styles.toast, { backgroundColor: colors.ink }], children: _jsx(SheetText, { weight: FigtreeEnum.SEMI_BOLD, size: 13.5, color: colors.surface, style: styles.text, children: message }) }));
+    const disc = {
+        [CheckoutToastToneEnum.SUCCESS]: colors.successInk,
+        [CheckoutToastToneEnum.WARNING]: colors.warnInk,
+        [CheckoutToastToneEnum.INFO]: colors.muted,
+    }[toast.tone];
+    return (_jsx(View, { pointerEvents: "none", style: styles.place, children: _jsxs(View, { testID: "sheet-toast", accessibilityLiveRegion: "polite", accessibilityRole: "alert", style: [
+                styles.toast,
+                {
+                    backgroundColor: dark ? colors.fill3 : colors.surface,
+                    borderColor: colors.line3,
+                },
+            ], children: [toast.logo ? (_jsx(SheetLogo, { logo: toast.logo })) : (_jsx(View, { testID: `toast-${toast.tone}`, style: [styles.disc, { backgroundColor: disc }], children: toast.tone === CheckoutToastToneEnum.SUCCESS ? (_jsx(View, { style: styles.check })) : (_jsx(SheetText, { weight: FigtreeEnum.BOLD, size: 12, color: "white", style: styles.glyph, children: toast.tone === CheckoutToastToneEnum.WARNING ? '!' : 'i' })) })), _jsx(SheetText, { weight: FigtreeEnum.SEMI_BOLD, size: 13.5, style: styles.text, children: toast.message })] }) }));
 }
 const styles = StyleSheet.create({
-    toast: {
+    place: {
         position: 'absolute',
-        top: 56,
+        top: 12,
         left: 18,
         right: 18,
+        alignItems: 'center',
+    },
+    toast: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 10,
+        borderWidth: 1,
         borderRadius: 12,
-        paddingHorizontal: 14,
-        paddingVertical: 11,
+        paddingVertical: 10,
+        paddingLeft: 12,
+        paddingRight: 16,
+        shadowColor: 'black',
+        shadowOpacity: 0.18,
+        shadowRadius: 16,
+        shadowOffset: { width: 0, height: 8 },
+        elevation: 6,
+    },
+    disc: {
+        width: 20,
+        height: 20,
+        borderRadius: 10,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    check: {
+        width: 5,
+        height: 9,
+        marginTop: -2,
+        borderColor: 'white',
+        borderRightWidth: 2,
+        borderBottomWidth: 2,
+        transform: [{ rotate: '45deg' }],
     },
-    text: { textAlign: 'center' },
+    glyph: { lineHeight: 14, textAlign: 'center' },
+    text: { flexShrink: 1 },
 });

package/dist/components/SheetWaiting.js

@@ -39,7 +39,7 @@ export function SheetWaiting({ core }) {
                         : t('resend'), disabled: resendLeft > 0, onPress: () => {
                         setSentAt(WAIT_SECONDS - waitLeft);
                         actions.resend();
-                    } })), _jsx(Pressable, { onPress: actions.useAnother, accessibilityRole: "button", style: styles.link, children: _jsx(SheetText, { weight: FigtreeEnum.SEMI_BOLD, style: styles.center, children: t('use_another') }) })] }), children: _jsxs(View, { style: styles.waiting, children: [_jsxs(View, { style: styles.pulse, children: [_jsx(View, { style: [styles.halo, styles.outer, { backgroundColor: brand }] }), _jsx(View, { style: [styles.halo, styles.inner, { backgroundColor: brand }] }), _jsx(View, { testID: "icon-phone", style: [styles.phone, { borderColor: brand }], children: _jsx(View, { style: [styles.speaker, { backgroundColor: brand }] }) })] }), _jsx(SheetText, { weight: FigtreeEnum.EXTRA_BOLD, size: 21, accessibilityRole: "header", style: [styles.center, styles.title], children: prompt ? t('sheet.approve_title') : t('checking_title') }), _jsx(SheetText, { size: 14, color: colors.muted, style: styles.center, children: attempt.phone
+                    } })), _jsx(Pressable, { onPress: actions.useAnother, accessibilityRole: "button", style: styles.link, children: _jsx(SheetText, { weight: FigtreeEnum.SEMI_BOLD, style: styles.center, children: t('use_another') }) })] }), children: _jsxs(View, { style: styles.waiting, children: [_jsxs(View, { style: styles.pulse, children: [_jsx(View, { style: [styles.halo, styles.outer, { backgroundColor: brand }] }), _jsx(View, { style: [styles.halo, styles.inner, { backgroundColor: brand }] }), _jsx(View, { testID: "icon-phone", style: [styles.phone, { borderColor: brand }], children: _jsx(View, { style: [styles.speaker, { backgroundColor: brand }] }) })] }), _jsx(SheetText, { weight: FigtreeEnum.EXTRA_BOLD, size: 21, accessibilityRole: "header", style: [styles.center, styles.title], children: prompt ? t('sheet.approve_title') : t('checking_title') }), _jsx(SheetText, { paragraph: true, size: 14, color: colors.muted, style: styles.center, children: attempt.phone
                         ? prompt
                             ? t('sheet.approve_body', {
                                 method: attempt.methodName,

package/dist/models/sheet.constants.d.ts

@@ -37,3 +37,5 @@ export declare const SHEET_SWIPE_DISTANCE = 120;
 export declare const SHEET_FLICK_SPEED = 0.8;
 /** How the sheet's height eases from one screen to the next. */
 export declare const SHEET_RESIZE: LayoutAnimationConfig;
+/** A paragraph's line height, as a share of its size: the web checkout's 1.5, a touch tighter for Figtree on phones. */
+export declare const PARAGRAPH_LINE_HEIGHT = 1.45;

package/dist/models/sheet.constants.js

@@ -76,3 +76,5 @@ export const SHEET_RESIZE = {
     duration: 220,
     update: { type: LayoutAnimation.Types.easeInEaseOut },
 };
+/** A paragraph's line height, as a share of its size: the web checkout's 1.5, a touch tighter for Figtree on phones. */
+export const PARAGRAPH_LINE_HEIGHT = 1.45;

package/dist/models/sheet.interface.d.ts

@@ -3,7 +3,7 @@ import type { Animated, DimensionValue, GestureResponderHandlers, StyleProp, Tex
 import type { WebView } from 'react-native-webview';
 import type { CheckoutButtonVariantEnum, TerminalKindEnum } from '../checkout-core/models/checkout.enum.js';
 import type { LangEnum, ProviderLogoEnum } from '../checkout-core/models/domain.enum.js';
-import type { CardFieldsMessage, CheckoutColors, CheckoutCore, CheckoutMutations, CheckoutPlatform, CheckoutView } from '../checkout-core/models/checkout.interface.js';
+import type { CardFieldsMessage, CheckoutColors, CheckoutCore, CheckoutToast, CheckoutMutations, CheckoutPlatform, CheckoutView } from '../checkout-core/models/checkout.interface.js';
 import type { FigtreeEnum, SheetIconEnum } from './sheet.enum.js';
 /**
  * How the sheet ended. `closed`: the payer closed it with the payment still
@@ -88,6 +88,8 @@ export interface SheetTextProps extends TextProps {
     weight?: FigtreeEnum;
     size?: number;
     color?: string;
+    /** Text that may wrap: lines spaced as on the web checkout. */
+    paragraph?: boolean;
     style?: StyleProp<TextStyle>;
 }
 export interface SheetHeaderProps {
@@ -175,11 +177,18 @@ export interface MethodCardProps {
     logo: ProviderLogoEnum;
     name: string;
     sub: string;
-    checked: boolean;
     /** Greyed and not pressable: in maintenance, or not offered yet. */
     muted: boolean;
     onSelect?: () => void;
 }
+export interface ChosenMethodProps {
+    logo: ProviderLogoEnum;
+    name: string;
+    /** Its network. */
+    sub: string;
+    /** Back to the list. */
+    onChange: () => void;
+}
 export interface MethodGridCard extends MethodCardProps {
     id: string;
 }
@@ -202,7 +211,7 @@ export interface SheetRowProps {
     urgent?: boolean;
 }
 export interface SheetToastProps {
-    message: string | null;
+    toast: CheckoutToast | null;
 }
 export interface BoneProps {
     /** Points, or a share of the row (`100%`). */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyama/pay-react-native",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Brissoto Pay for Expo and React Native apps: the payment sheet.",
   "license": "MIT",
   "sideEffects": false,