@heyama/pay-react-native 1.0.1 → 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/models/checkout.enum.d.ts

@@ -131,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

@@ -148,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/SheetCodeField.js

@@ -49,7 +49,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 })] })] })] }));

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/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/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/SheetPhoneField.js

@@ -24,7 +24,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 },

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 {
@@ -209,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.1",
+  "version": "1.0.2",
   "description": "Brissoto Pay for Expo and React Native apps: the payment sheet.",
   "license": "MIT",
   "sideEffects": false,