@heyama/pay-react-native 1.0.1 → 1.0.3

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. */
@@ -22,6 +22,7 @@ const NO_PAYMENT_UI = {
     submitting: false,
     dismissed: null,
     redirecting: false,
+    methodMissing: 0,
 };
 /**
  * The whole checkout for one payment, on any platform: the gateway's live
@@ -84,7 +85,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 +132,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 +140,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 +156,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 +189,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({
@@ -196,6 +197,7 @@ export function useCheckoutController(view, { clues, mutations, platform }) {
                     pickerOpen: false,
                     code: '',
                     cardComplete: false,
+                    methodMissing: 0,
                 });
             }
         },
@@ -205,12 +207,14 @@ 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;
-            if (!selected)
+            if (!selected) {
+                update({ methodMissing: ui.methodMissing + 1 });
                 return;
+            }
             // The preview offers no card: it shows Mobile Money only.
             if (selected.flow === MethodFlowEnum.CARD_FIELDS) {
                 // The fields page pays with its provider, then says how it went.
@@ -225,11 +229,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 +244,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 +277,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 +296,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 +314,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

@@ -63,6 +63,7 @@ declare const _default: {
     };
     country: string;
     change: string;
+    method_missing: string;
     secured_by: string;
     help: string;
     terms: string;

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

@@ -54,6 +54,7 @@ export default {
     },
     country: 'Country',
     change: 'Change',
+    method_missing: 'Choose a payment method',
     secured_by: 'Payment secured by',
     help: 'Need help?',
     terms: 'Terms',

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

@@ -55,6 +55,7 @@ const messages = {
     },
     country: 'Pays',
     change: 'Modifier',
+    method_missing: 'Choisissez un moyen de paiement',
     secured_by: 'Paiement sécurisé par',
     help: "Besoin d'aide ?",
     terms: 'Conditions',

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

@@ -123,6 +123,8 @@ export declare enum TerminalKindEnum {
 export declare enum CheckoutButtonVariantEnum {
     PRIMARY = "primary",
     SECONDARY = "secondary",
+    /** The second choice under Pay or Try again: the secondary's look, no border. */
+    PLAIN = "plain",
     /** Gives something up: cancelling the payment. */
     DANGER = "danger"
 }
@@ -131,3 +133,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

@@ -139,6 +139,8 @@ export var CheckoutButtonVariantEnum;
 (function (CheckoutButtonVariantEnum) {
     CheckoutButtonVariantEnum["PRIMARY"] = "primary";
     CheckoutButtonVariantEnum["SECONDARY"] = "secondary";
+    /** The second choice under Pay or Try again: the secondary's look, no border. */
+    CheckoutButtonVariantEnum["PLAIN"] = "plain";
     /** Gives something up: cancelling the payment. */
     CheckoutButtonVariantEnum["DANGER"] = "danger";
 })(CheckoutButtonVariantEnum || (CheckoutButtonVariantEnum = {}));
@@ -148,3 +150,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;
@@ -186,6 +186,11 @@ export interface CheckoutUi {
     /** An attempt the payer walked away from: the form shows again. */
     dismissed: string | null;
     redirecting: boolean;
+    /**
+     * Pay pressed with no method picked, counted: the list turns red and
+     * shakes once per press. Back to 0 once a method is picked.
+     */
+    methodMissing: number;
 }
 /** Everything the screens show that follows from the payment and the page, worked out once. */
 export interface CheckoutDerived {
@@ -231,6 +236,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 +254,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/checkout-core/models/checkout.view.utils.js

@@ -52,6 +52,7 @@ export function initialUi(view, clues) {
         submitting: false,
         dismissed: null,
         redirecting: false,
+        methodMissing: 0,
     };
     if (preferred?.kind !== MethodKindEnum.MOBILE_MONEY)
         return base;

package/dist/components/SheetButton.d.ts

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

package/dist/components/SheetButton.js

@@ -4,7 +4,8 @@ import { CheckoutButtonVariantEnum } from "../checkout-core/models/checkout.enum
 import { useSheetTheme } from "../hooks/use-sheet-theme.js";
 import { FigtreeEnum } from "../models/sheet.enum.js";
 import { SheetText } from "./SheetText.js";
-/** The sheet's buttons: filled in the app colour for the main action, outlined for the rest. */
+import { FIELD_HEIGHT, FIELD_RADIUS } from "../models/sheet.constants.js";
+/** The sheet's buttons: filled in the app colour for the main action, outlined for the rest, plain (no border) for a quiet second choice. */
 export function SheetButton({ label, onPress, variant = CheckoutButtonVariantEnum.PRIMARY, busy = false, disabled = false, inactive = false, }) {
     const { colors, brand } = useSheetTheme();
     const primary = variant === CheckoutButtonVariantEnum.PRIMARY;
@@ -14,14 +15,17 @@ export function SheetButton({ label, onPress, variant = CheckoutButtonVariantEnu
             styles.button,
             primary
                 ? { backgroundColor: brand }
-                : { borderWidth: 1, borderColor: colors.line3 },
+                : variant !== CheckoutButtonVariantEnum.PLAIN && {
+                    borderWidth: 1,
+                    borderColor: colors.line3,
+                },
             (disabled || inactive) && styles.disabled,
         ], children: [busy && _jsx(ActivityIndicator, { color: ink }), _jsx(SheetText, { weight: FigtreeEnum.BOLD, size: 16, color: ink, style: styles.label, children: label })] }));
 }
 const styles = StyleSheet.create({
     button: {
-        minHeight: 50,
-        borderRadius: 14,
+        minHeight: FIELD_HEIGHT,
+        borderRadius: FIELD_RADIUS,
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'center',

package/dist/components/SheetChosenMethod.js

@@ -6,6 +6,7 @@ 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";
+import { FIELD_HEIGHT, FIELD_RADIUS } from "../models/sheet.constants.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');
@@ -23,10 +24,10 @@ const styles = StyleSheet.create({
         flexDirection: 'row',
         alignItems: 'center',
         gap: 12,
-        height: 48,
+        height: FIELD_HEIGHT,
         marginTop: 12,
         borderWidth: 1,
-        borderRadius: 12,
+        borderRadius: FIELD_RADIUS,
         paddingLeft: 8,
         paddingRight: 6,
     },

package/dist/components/SheetCodeField.js

@@ -7,6 +7,7 @@ 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";
+import { FIELD_HEIGHT, FIELD_RADIUS } from "../models/sheet.constants.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);
@@ -49,7 +50,7 @@ export function SheetCodeField({ core }) {
     };
     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: [
+                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 })] })] })] }));
@@ -58,9 +59,9 @@ const styles = StyleSheet.create({
     section: { marginTop: 10 },
     label: { marginBottom: 8 },
     input: {
-        height: 50,
+        height: FIELD_HEIGHT,
         borderWidth: 1,
-        borderRadius: 13,
+        borderRadius: FIELD_RADIUS,
         paddingHorizontal: 14,
         fontSize: 18,
         letterSpacing: 5,

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

@@ -27,12 +27,12 @@ export function SheetFailed({ core }) {
                         ? 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('retry'), busy: ui.submitting, onPress: actions.retry }), _jsx(SheetButton, { variant: CheckoutButtonVariantEnum.PLAIN, 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.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Pressable, StyleSheet, View } from 'react-native';
+import { Animated, 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 { useShake } from "../hooks/use-shake.js";
 import { useSheetTheme } from "../hooks/use-sheet-theme.js";
 import { FigtreeEnum } from "../models/sheet.enum.js";
 import { flagOf } from "../models/sheet.utils.js";
@@ -12,13 +13,17 @@ 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 }) {
+import { FIELD_HEIGHT, FIELD_RADIUS, TABS_INSET, } from "../models/sheet.constants.js";
+/** Two cards a row, the last one alone when they are odd; red with a hint, and shaken, after Pay with none picked. */
+function MethodGrid({ cards, missing }) {
+    const t = useTranslations('checkout');
+    const { colors } = useSheetTheme();
+    const shake = useShake(missing);
     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))) }));
+    return (_jsxs(Animated.View, { testID: "method-grid", accessibilityRole: "radiogroup", style: [styles.grid, { transform: [{ translateX: shake }] }], children: [rows.map((row) => (_jsxs(View, { style: styles.gridRow, children: [row.map(({ id, ...card }) => (_jsx(SheetMethodCard, { ...card, missing: missing > 0 }, id))), row.length === 1 && _jsx(View, { style: styles.gridSpacer })] }, row[0].id))), missing > 0 && (_jsx(SheetText, { accessibilityRole: "alert", weight: FigtreeEnum.MEDIUM, size: 13, color: colors.danger, children: t('method_missing') }))] }));
 }
 /**
  * The form of design A: the country when there are several, the Mobile
@@ -61,7 +66,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'))] }), 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 }))] }));
+                }) })), _jsxs(View, { testID: "sheet-tabs", 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, missing: ui.methodMissing })), !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 },
@@ -80,13 +85,17 @@ const styles = StyleSheet.create({
         paddingHorizontal: 12,
         paddingVertical: 6,
     },
-    tabs: { flexDirection: 'row', borderRadius: 12, padding: 3 },
+    tabs: {
+        flexDirection: 'row',
+        height: FIELD_HEIGHT,
+        borderRadius: FIELD_RADIUS,
+        padding: TABS_INSET,
+    },
     tab: {
         flex: 1,
         alignItems: 'center',
         justifyContent: 'center',
-        minHeight: 36,
-        borderRadius: 9,
+        borderRadius: FIELD_RADIUS - TABS_INSET,
     },
     tabOn: {
         shadowColor: 'black',

package/dist/components/SheetHeader.js

@@ -3,6 +3,7 @@ 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 { SHEET_BADGE_RADIUS, SHEET_BADGE_SIZE, } from "../models/sheet.constants.js";
 import { FigtreeEnum } from "../models/sheet.enum.js";
 import { SheetBone } from "./SheetBone.js";
 import { SheetText } from "./SheetText.js";
@@ -14,8 +15,8 @@ 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: [
+    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: SHEET_BADGE_SIZE, height: SHEET_BADGE_SIZE, radius: SHEET_BADGE_RADIUS }), _jsx(View, { style: styles.name, children: _jsx(SheetBone, { width: 84, height: 14 }) })] })) : (app &&
+                        (app.logoUrl ? (_jsx(Image, { testID: "app-logo", 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: 18, 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 },
@@ -37,16 +38,16 @@ const styles = StyleSheet.create({
         paddingTop: 10,
     },
     logo: {
-        width: 34,
-        height: 34,
-        borderRadius: 9,
+        width: SHEET_BADGE_SIZE,
+        height: SHEET_BADGE_SIZE,
+        borderRadius: SHEET_BADGE_RADIUS,
         borderWidth: 1,
         borderColor: MEDIA_LINE,
     },
     initial: {
-        width: 34,
-        height: 34,
-        borderRadius: 9,
+        width: SHEET_BADGE_SIZE,
+        height: SHEET_BADGE_SIZE,
+        borderRadius: SHEET_BADGE_RADIUS,
         alignItems: 'center',
         justifyContent: 'center',
     },

package/dist/components/SheetIcon.js

@@ -1,8 +1,9 @@
-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 { SHEET_BADGE_SIZE } from "../models/sheet.constants.js";
 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, }) {
+export function SheetIcon({ kind, color, background, size = SHEET_BADGE_SIZE, }) {
     const scale = size / 48;
     const ink = { backgroundColor: color };
     const line = { borderColor: color };
@@ -12,7 +13,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 +45,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.js

@@ -3,6 +3,7 @@ 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 { SHEET_FOOT_GAP, SHEET_FOOT_TOP } from "../models/sheet.constants.js";
 import { FigtreeEnum } from "../models/sheet.enum.js";
 import { SheetText } from "./SheetText.js";
 /**
@@ -39,10 +40,11 @@ const styles = StyleSheet.create({
     foot: {
         borderTopWidth: 1,
         paddingHorizontal: 18,
-        paddingTop: 12,
+        paddingTop: SHEET_FOOT_TOP,
         paddingBottom: 28,
-        gap: 10,
+        gap: SHEET_FOOT_GAP,
     },
     footOnKeyboard: { paddingBottom: 12 },
-    secure: { textAlign: 'center' },
+    // Android's extra font padding would push it off the middle.
+    secure: { textAlign: 'center', includeFontPadding: false },
 });

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. Picked, it becomes the chosen row. */
-export declare function SheetMethodCard({ logo, name, sub, muted, onSelect, }: MethodCardProps): import("react").JSX.Element;
+export declare function SheetMethodCard({ logo, name, sub, muted, missing, onSelect, }: MethodCardProps): import("react").JSX.Element;

package/dist/components/SheetMethodCard.js

@@ -5,12 +5,25 @@ 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";
+import { FIELD_RADIUS } from "../models/sheet.constants.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 function SheetMethodCard({ logo, name, sub, muted, onSelect, }) {
+export function SheetMethodCard({ logo, name, sub, muted, missing = false, 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: [
+    const red = missing && !muted;
+    return (_jsxs(TouchableOpacity, { onPress: onSelect, disabled: muted, activeOpacity: 0.7, accessibilityRole: "radio", accessibilityLabel: `${name}, ${sub}`, accessibilityState: { checked: false, disabled: muted }, style: [
+            styles.card,
+            red
+                ? [styles.cardMissing, { borderColor: colors.danger }]
+                : { 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,
-                            { borderColor: muted ? colors.line2 : colors.line4 },
+                            {
+                                borderColor: muted
+                                    ? colors.line2
+                                    : red
+                                        ? colors.danger
+                                        : 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({
@@ -18,10 +31,12 @@ const styles = StyleSheet.create({
         flex: 1,
         minWidth: 0,
         borderWidth: 1,
-        borderRadius: 14,
+        borderRadius: FIELD_RADIUS,
         padding: 12,
         gap: 2,
     },
+    // 1.5 like the web's ring; the padding gives back the half point.
+    cardMissing: { borderWidth: 1.5, padding: 11.5 },
     top: {
         flexDirection: 'row',
         alignItems: 'flex-start',

package/dist/components/SheetPhoneField.js

@@ -6,6 +6,7 @@ import { FigtreeEnum } from "../models/sheet.enum.js";
 import { flagOf } from "../models/sheet.utils.js";
 import { SheetLogo } from "./SheetLogo.js";
 import { SheetInput, SheetText } from "./SheetText.js";
+import { FIELD_HEIGHT, FIELD_RADIUS } from "../models/sheet.constants.js";
 /** The Mobile Money number on the phone keyboard: the country's dial code, the number grouped as typed, its check. */
 export function SheetPhoneField({ core, phoneRef }) {
     const t = useTranslations('checkout');
@@ -24,7 +25,7 @@ export function SheetPhoneField({ core, phoneRef }) {
                     },
                 ], 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, { 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 }) }))) })] }));
+                        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 },
@@ -32,9 +33,9 @@ const styles = StyleSheet.create({
     field: {
         flexDirection: 'row',
         alignItems: 'center',
-        height: 50,
+        height: FIELD_HEIGHT,
         borderWidth: 1,
-        borderRadius: 13,
+        borderRadius: FIELD_RADIUS,
         overflow: 'hidden',
     },
     dial: {

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/hooks/use-shake.d.ts

@@ -0,0 +1,3 @@
+import { Animated } from 'react-native';
+/** A side-to-side shake each time `count` grows past 0: the offset to put in a `translateX`. */
+export declare function useShake(count: number): Animated.Value;

package/dist/hooks/use-shake.js

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+import { Animated, Easing } from 'react-native';
+import { SHAKE_MS, SHAKE_OFFSETS } from "../models/sheet.constants.js";
+/** A side-to-side shake each time `count` grows past 0: the offset to put in a `translateX`. */
+export function useShake(count) {
+    const [offset] = useState(() => new Animated.Value(0));
+    useEffect(() => {
+        if (count === 0)
+            return;
+        Animated.sequence(SHAKE_OFFSETS.map((toValue) => Animated.timing(offset, {
+            toValue,
+            duration: SHAKE_MS / SHAKE_OFFSETS.length,
+            easing: Easing.out(Easing.quad),
+            useNativeDriver: true,
+        }))).start();
+    }, [count, offset]);
+    return offset;
+}

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

@@ -37,3 +37,26 @@ 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;
+/** A field the payer still has to fill, shaken once when Pay is pressed: its offsets, then back. */
+export declare const SHAKE_MS = 300;
+export declare const SHAKE_OFFSETS: number[];
+/** The form's one row height and one corner, Pay's: the tabs, the method picked, the fields and the buttons line up. */
+export declare const FIELD_HEIGHT = 50;
+export declare const FIELD_RADIUS = 14;
+/** The tabs' inset around the tab on: its corner follows the bar's. */
+export declare const TABS_INSET = 3;
+/**
+ * Over and under the secured line, between the foot's separator and Pay.
+ * Figtree leaves 2pt more room over its letters than under them at this
+ * size, so the space over is 2 less: the letters sit in the middle.
+ */
+export declare const SHEET_FOOT_TOP = 11;
+export declare const SHEET_FOOT_GAP = 13;
+/**
+ * The app's logo in the header and a screen's disc under it (failed, closed)
+ * share one size: one under the other, their centres line up.
+ */
+export declare const SHEET_BADGE_SIZE = 44;
+export declare const SHEET_BADGE_RADIUS = 12;

package/dist/models/sheet.constants.js

@@ -76,3 +76,26 @@ 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;
+/** A field the payer still has to fill, shaken once when Pay is pressed: its offsets, then back. */
+export const SHAKE_MS = 300;
+export const SHAKE_OFFSETS = [-6, 6, -3, 0];
+/** The form's one row height and one corner, Pay's: the tabs, the method picked, the fields and the buttons line up. */
+export const FIELD_HEIGHT = 50;
+export const FIELD_RADIUS = 14;
+/** The tabs' inset around the tab on: its corner follows the bar's. */
+export const TABS_INSET = 3;
+/**
+ * Over and under the secured line, between the foot's separator and Pay.
+ * Figtree leaves 2pt more room over its letters than under them at this
+ * size, so the space over is 2 less: the letters sit in the middle.
+ */
+export const SHEET_FOOT_TOP = 11;
+export const SHEET_FOOT_GAP = 13;
+/**
+ * The app's logo in the header and a screen's disc under it (failed, closed)
+ * share one size: one under the other, their centres line up.
+ */
+export const SHEET_BADGE_SIZE = 44;
+export const SHEET_BADGE_RADIUS = 12;

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 {
@@ -177,6 +179,8 @@ export interface MethodCardProps {
     sub: string;
     /** Greyed and not pressable: in maintenance, or not offered yet. */
     muted: boolean;
+    /** Pay was pressed with no method picked: the card is ringed in red. */
+    missing?: boolean;
     onSelect?: () => void;
 }
 export interface ChosenMethodProps {
@@ -192,6 +196,8 @@ export interface MethodGridCard extends MethodCardProps {
 }
 export interface MethodGridProps {
     cards: Array<MethodGridCard>;
+    /** Pay presses with no method picked: red, and a shake per press. */
+    missing: number;
 }
 export interface SheetIconProps {
     kind: SheetIconEnum;
@@ -209,7 +215,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.1",
+  "version": "1.0.3",
   "description": "Brissoto Pay for Expo and React Native apps: the payment sheet.",
   "license": "MIT",
   "sideEffects": false,