@heyama/pay-react-native 1.0.2 → 1.0.4

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

@@ -6,7 +6,7 @@ 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, logoOf, screenOf, waitLeftOf, } from "../models/checkout.view.utils.js";
+import { countriesOf, deriveCheckout, initialUi, logoOf, pickedPatch, 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
@@ -62,6 +63,7 @@ export function useCheckoutController(view, { clues, mutations, platform }) {
             cards: [],
             selected: null,
             canPay: false,
+            detected: null,
             mismatch: null,
             suggestion: null,
         };
@@ -86,6 +88,39 @@ export function useCheckoutController(view, { clues, mutations, platform }) {
         update({ dismissed: attemptReference });
         showToast(noAnswer, CheckoutToastToneEnum.WARNING);
     }, [waiting, waitLeft, attemptReference, noAnswer, showToast, update]);
+    // A number that tells its method picks it when none is picked: once per
+    // number, so Change keeps the list open until the number changes. The app's
+    // own number picks without a word. Off the form, or on the Card tab, the
+    // number is not looked at: it counts once the payer is back on Mobile Money.
+    const detectedMethod = derived.detected;
+    const numberE164 = phone.e164;
+    const onMobileForm = screen === CheckoutScreenEnum.FORM &&
+        ui.tab === CheckoutTabEnum.MOBILE_MONEY;
+    const nonePicked = !derived.selected;
+    const lastKey = useRef('');
+    useEffect(() => {
+        if (!onMobileForm)
+            return;
+        const key = detectedMethod ? `${detectedMethod.id}|${numberE164}` : '';
+        if (key === lastKey.current)
+            return;
+        lastKey.current = key;
+        if (!detectedMethod || !nonePicked)
+            return;
+        update(pickedPatch(detectedMethod.id));
+        if (numberE164 !== prefill) {
+            showToast(t('toast.switched', { method: detectedMethod.name }), CheckoutToastToneEnum.SUCCESS, logoOf(detectedMethod));
+        }
+    }, [
+        onMobileForm,
+        detectedMethod,
+        numberE164,
+        nonePicked,
+        prefill,
+        t,
+        showToast,
+        update,
+    ]);
     const paymentId = view?.id;
     // A payer opened the link, said once per page (the dashboard's preview has no mutations).
     const opened = useRef(null);
@@ -191,12 +226,7 @@ export function useCheckoutController(view, { clues, mutations, platform }) {
                 toast.show(method.note ?? t('toast.unavailable', { method: method.name }), CheckoutToastToneEnum.WARNING, logoOf(method));
             }
             else {
-                update({
-                    method: method.id,
-                    pickerOpen: false,
-                    code: '',
-                    cardComplete: false,
-                });
+                update(pickedPatch(method.id));
             }
         },
         comingSoon,
@@ -209,8 +239,10 @@ export function useCheckoutController(view, { clues, mutations, platform }) {
         },
         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.

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"
 }

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 = {}));

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

@@ -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 {
@@ -197,6 +202,8 @@ export interface CheckoutDerived {
     /** The picked method, while it can still be used. */
     selected: CheckoutMethod | null;
     canPay: boolean;
+    /** The available method of the country the typed number belongs to. */
+    detected: CheckoutMethod | null;
     /** The number belongs to another method of the country than the one picked. */
     mismatch: CheckoutMethod | null;
     /** After a failure: another method of the same country the payer can use now. */

package/dist/checkout-core/models/checkout.view.utils.d.ts

@@ -22,6 +22,8 @@ export declare function initialUi(view: CheckoutView, clues: CountryClues): Chec
 export declare function screenOf(view: CheckoutView | null | undefined, ui: CheckoutUi): CheckoutScreenEnum;
 /** The brand of a Mobile Money method, which a number's first digits can reveal. */
 export declare function brandOf(method: CheckoutMethod): string;
+/** What the page keeps when a method is picked: the list closes, the rest starts over. */
+export declare function pickedPatch(id: string): Partial<CheckoutUi>;
 /** The tile of a method or an attempt: the generic card for cards, whatever networks they take. */
 export declare function logoOf(of: Pick<CheckoutMethod, 'flow' | 'logos'>): ProviderLogoEnum;
 /** Works out what the screens show from the payment, the page and the number typed. */

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;
@@ -98,6 +99,16 @@ export function screenOf(view, ui) {
 export function brandOf(method) {
     return method.logos[0];
 }
+/** What the page keeps when a method is picked: the list closes, the rest starts over. */
+export function pickedPatch(id) {
+    return {
+        method: id,
+        pickerOpen: false,
+        code: '',
+        cardComplete: false,
+        methodMissing: 0,
+    };
+}
 /** Everything the picked method needs is in: the card, or the number and its payment code. */
 function readyToPay(method, ui, phone) {
     if (method.flow === MethodFlowEnum.CARD_FIELDS)
@@ -138,6 +149,7 @@ export function deriveCheckout(view, ui, phone) {
             readyToPay(selected, ui, phone) &&
             !ui.submitting &&
             !ui.cardPaying,
+        detected,
         // Only a Mobile Money method has a number to belong to another one.
         mismatch: selected && !onCard && detected && detected.id !== selected.id
             ? detected

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);
@@ -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/SheetFailed.js

@@ -27,7 +27,7 @@ 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, { 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,

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, alone: cards.length === 1 }, id))), row.length === 1 && cards.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, 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 };

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/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;
+/** One method of the grid: logo and radio dot, then its name and network, or why it is greyed. Alone, one full-width row. Picked, it becomes the chosen row. */
+export declare function SheetMethodCard({ logo, name, sub, muted, missing, alone, onSelect, }: MethodCardProps): import("react").JSX.Element;

package/dist/components/SheetMethodCard.js

@@ -1,32 +1,50 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import { LOGO_SIZE } from "../checkout-core/models/checkout.constants.js";
 import { useSheetTheme } from "../hooks/use-sheet-theme.js";
 import { FigtreeEnum } from "../models/sheet.enum.js";
 import { SheetLogo } from "./SheetLogo.js";
 import { SheetText } from "./SheetText.js";
-/** 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, }) {
+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. Alone, one full-width row. Picked, it becomes the chosen row. */
+export function SheetMethodCard({ logo, name, sub, muted, missing, alone, 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;
+    const texts = (_jsxs(_Fragment, { children: [_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 })] }));
+    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: alone ? styles.row : styles.top, children: [_jsx(SheetLogo, { logo: logo, size: LOGO_SIZE.ROW, muted: muted }), alone && _jsx(View, { style: styles.text, children: texts }), _jsx(View, { style: [
                             styles.radio,
-                            { borderColor: muted ? colors.line2 : colors.line4 },
-                        ] })] }), _jsx(SheetText, { weight: FigtreeEnum.BOLD, size: 15, numberOfLines: 1, color: muted ? colors.muted : colors.ink, children: name }), _jsx(SheetText, { size: 12.5, numberOfLines: 1, color: muted ? colors.warnInk : colors.muted, children: sub })] }));
+                            {
+                                borderColor: muted
+                                    ? colors.line2
+                                    : red
+                                        ? colors.danger
+                                        : colors.line4,
+                            },
+                        ] })] }), !alone && texts] }));
 }
 const styles = StyleSheet.create({
     card: {
         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',
         justifyContent: 'space-between',
         marginBottom: 10,
     },
+    row: { flexDirection: 'row', alignItems: 'center', gap: 12 },
+    text: { flex: 1, minWidth: 0 },
     radio: { width: 20, height: 20, borderRadius: 10, borderWidth: 1.5 },
 });

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');
@@ -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/SheetToast.js

@@ -30,7 +30,7 @@ export function SheetToast({ toast }) {
 const styles = StyleSheet.create({
     place: {
         position: 'absolute',
-        top: 12,
+        top: 24,
         left: 18,
         right: 18,
         alignItems: 'center',

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

@@ -39,3 +39,24 @@ export declare const SHEET_FLICK_SPEED = 0.8;
 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

@@ -78,3 +78,24 @@ export const SHEET_RESIZE = {
 };
 /** 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

@@ -179,6 +179,10 @@ 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;
+    /** The only method of the tab: a full-width row. */
+    alone?: boolean;
     onSelect?: () => void;
 }
 export interface ChosenMethodProps {
@@ -194,6 +198,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;

package/package.json

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