@heyama/pay-react-native 1.0.0 → 1.0.1

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

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

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

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

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

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

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

@@ -55,7 +55,9 @@ export declare enum PayRefusalEnum {
     METHOD = "method",
     PHONE = "phone",
     /** An OTP method came without a valid code. */
-    CODE = "code"
+    CODE = "code",
+    /** Earlier attempts still pending could use up the payment's tries. */
+    BUSY = "busy"
 }
 /**
  * What a provider's card fields page and the checkout tell each other through

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

@@ -64,6 +64,8 @@ export var PayRefusalEnum;
     PayRefusalEnum["PHONE"] = "phone";
     /** An OTP method came without a valid code. */
     PayRefusalEnum["CODE"] = "code";
+    /** Earlier attempts still pending could use up the payment's tries. */
+    PayRefusalEnum["BUSY"] = "busy";
 })(PayRefusalEnum || (PayRefusalEnum = {}));
 /**
  * What a provider's card fields page and the checkout tell each other through

package/dist/components/PaymentSheetModal.js

@@ -60,7 +60,10 @@ export function PaymentSheetModal({ calls, request, onClose, }) {
                         ] }) }), _jsx(Animated.View, { style: [
                         styles.stage,
                         { transform: [{ translateY: motion.translateY }] },
-                    ], children: _jsx(KeyboardAvoidingView, { behavior: "padding", style: [styles.stage, { paddingTop: motion.topGap }], children: _jsx(View, { style: styles.sheet, children: _jsx(IntlProvider, { locale: lang, messages: MESSAGES[lang], timeZone: TIME_ZONE, children: _jsx(SheetThemeContext, { value: theme, children: _jsx(SheetContent, { calls: calls, watched: watched, fontsReady: fontsLoaded || fontsError !== null, deviceLocale: deviceLocale, onClose: close, dragHandlers: motion.dragHandlers }) }) }) }) }) })] }) }));
+                    ], children: _jsx(View, { style: [styles.stage, { paddingTop: motion.topGap }], children: _jsxs(KeyboardAvoidingView, { behavior: "padding", style: styles.sheet, children: [_jsx(View, { testID: "payment-sheet-floor", style: [
+                                        styles.floor,
+                                        { backgroundColor: theme.colors.surface },
+                                    ] }), _jsx(IntlProvider, { locale: lang, messages: MESSAGES[lang], timeZone: TIME_ZONE, children: _jsx(SheetThemeContext, { value: theme, children: _jsx(SheetContent, { calls: calls, watched: watched, fontsReady: fontsLoaded || fontsError !== null, deviceLocale: deviceLocale, onClose: close, dragHandlers: motion.dragHandlers }) }) })] }) }) })] }) }));
 }
 const styles = StyleSheet.create({
     screen: { flex: 1 },
@@ -69,4 +72,6 @@ const styles = StyleSheet.create({
     // The app's dim shows through around the sheet.
     stage: { flex: 1, justifyContent: 'flex-end', pointerEvents: 'box-none' },
     sheet: { flexShrink: 1 },
+    // Under the sheet's rounded top, down to the screen's bottom.
+    floor: { position: 'absolute', top: 14, right: 0, bottom: 0, left: 0 },
 });

package/dist/components/SheetChosenMethod.d.ts

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

package/dist/components/SheetChosenMethod.js

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

package/dist/components/SheetCodeField.js

@@ -47,7 +47,9 @@ export function SheetCodeField({ core }) {
             actions.cannotDial();
         });
     };
-    return (_jsxs(View, { style: styles.section, children: [_jsx(SheetText, { weight: FigtreeEnum.BOLD, style: styles.label, children: t('otp_label') }), _jsx(SheetInput, { ref: field, accessibilityLabel: t('otp_label'), keyboardType: "number-pad", textContentType: "oneTimeCode", autoComplete: "sms-otp", returnKeyType: "go", maxLength: OTP_MAX_LENGTH, value: ui.code, onChangeText: actions.setCode, onFocus: () => setFocused(true), onBlur: () => setFocused(false), onSubmitEditing: actions.pay, editable: !ui.submitting, style: [styles.input, { borderColor: focused ? brand : colors.line3 }] }), _jsxs(View, { style: [styles.help, { backgroundColor: colors.fill2 }], children: [_jsx(SheetText, { size: 13, color: colors.ink2, style: styles.grow, children: t('otp_help', { method: method.name }) }), _jsxs(TouchableOpacity, { onPress: dial, activeOpacity: 0.7, accessibilityRole: "button", accessibilityLabel: t('sheet.dial', { code }), style: [
+    return (_jsxs(View, { style: styles.section, children: [_jsx(SheetText, { weight: FigtreeEnum.BOLD, style: styles.label, children: t('otp_label') }), _jsx(SheetInput, { ref: field, accessibilityLabel: t('otp_label'), keyboardType: "number-pad", textContentType: "oneTimeCode", autoComplete: "sms-otp", 
+                // iOS's number keypads have no Go key: asking for one adds a bar above them.
+                returnKeyType: Platform.OS === 'android' ? 'go' : undefined, maxLength: OTP_MAX_LENGTH, value: ui.code, onChangeText: actions.setCode, onFocus: () => setFocused(true), onBlur: () => setFocused(false), onSubmitEditing: actions.pay, editable: !ui.submitting, style: [styles.input, { borderColor: focused ? brand : colors.line3 }] }), _jsxs(View, { style: [styles.help, { backgroundColor: colors.fill2 }], children: [_jsx(SheetText, { 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/SheetForm.d.ts

@@ -1,7 +1,8 @@
 import type { SheetFormProps } from '../models/sheet.interface.js';
 /**
  * The form of design A: the country when there are several, the Mobile
- * Money / Card tabs, the methods two by two, the number, the payment code
+ * Money / Card tabs, the methods two by two (the one picked on its own row),
+ * the number, the payment code
  * of an OTP method, and a card's fields.
  */
 export declare function SheetForm({ core, phoneRef, cardFields }: SheetFormProps): import("react").JSX.Element;

package/dist/components/SheetForm.js

@@ -7,6 +7,7 @@ import { useSheetTheme } from "../hooks/use-sheet-theme.js";
 import { FigtreeEnum } from "../models/sheet.enum.js";
 import { flagOf } from "../models/sheet.utils.js";
 import { SheetCardFields } from "./SheetCardFields.js";
+import { SheetChosenMethod } from "./SheetChosenMethod.js";
 import { SheetCodeField } from "./SheetCodeField.js";
 import { SheetMethodCard } from "./SheetMethodCard.js";
 import { SheetPhoneField } from "./SheetPhoneField.js";
@@ -21,7 +22,8 @@ function MethodGrid({ cards }) {
 }
 /**
  * The form of design A: the country when there are several, the Mobile
- * Money / Card tabs, the methods two by two, the number, the payment code
+ * Money / Card tabs, the methods two by two (the one picked on its own row),
+ * the number, the payment code
  * of an OTP method, and a card's fields.
  */
 export function SheetForm({ core, phoneRef, cardFields }) {
@@ -39,7 +41,6 @@ export function SheetForm({ core, phoneRef, cardFields }) {
         logo: logoOf(method),
         name: method.name,
         sub: subOf(method),
-        checked: derived.selected?.id === method.id,
         muted: method.state !== MethodStateEnum.AVAILABLE,
         onSelect: () => actions.selectMethod(method),
     });
@@ -60,7 +61,7 @@ export function SheetForm({ core, phoneRef, cardFields }) {
                                 ? { backgroundColor: colors.ink, borderColor: colors.ink }
                                 : { borderColor: colors.line3 },
                         ], children: [_jsx(SheetText, { size: 14, children: flagOf(country) }), _jsx(SheetText, { weight: FigtreeEnum.SEMI_BOLD, size: 13, color: on ? colors.surface : colors.ink, children: t(`countries.${country}`) })] }, country));
-                }) })), _jsxs(View, { accessibilityRole: "tablist", style: [styles.tabs, { backgroundColor: colors.fill }], children: [tab(CheckoutTabEnum.MOBILE_MONEY, t('tab_wallet')), tab(CheckoutTabEnum.CARD, t('card'))] }), _jsx(MethodGrid, { cards: cards }), !onCard && _jsx(SheetPhoneField, { core: core, phoneRef: phoneRef }), !onCard && derived.selected?.flow === MethodFlowEnum.OTP && (_jsx(SheetCodeField, { core: core })), onCard && derived.selected?.flow === MethodFlowEnum.CARD_FIELDS && (_jsx(SheetCardFields, { core: core, bridge: cardFields }))] }));
+                }) })), _jsxs(View, { accessibilityRole: "tablist", style: [styles.tabs, { backgroundColor: colors.fill }], children: [tab(CheckoutTabEnum.MOBILE_MONEY, t('tab_wallet')), tab(CheckoutTabEnum.CARD, t('card'))] }), derived.selected ? (_jsx(SheetChosenMethod, { logo: logoOf(derived.selected), name: derived.selected.name, sub: derived.selected.network, onChange: actions.openPicker })) : (_jsx(MethodGrid, { cards: cards })), !onCard && _jsx(SheetPhoneField, { core: core, phoneRef: phoneRef }), !onCard && derived.selected?.flow === MethodFlowEnum.OTP && (_jsx(SheetCodeField, { core: core })), onCard && derived.selected?.flow === MethodFlowEnum.CARD_FIELDS && (_jsx(SheetCardFields, { core: core, bridge: cardFields }))] }));
 }
 const styles = StyleSheet.create({
     form: { paddingHorizontal: 18, paddingTop: 14, paddingBottom: 8 },

package/dist/components/SheetLayout.d.ts

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

package/dist/components/SheetLayout.js

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

package/dist/components/SheetMethodCard.d.ts

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

package/dist/components/SheetMethodCard.js

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

package/dist/components/SheetPhoneField.js

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

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

@@ -175,11 +175,18 @@ export interface MethodCardProps {
     logo: ProviderLogoEnum;
     name: string;
     sub: string;
-    checked: boolean;
     /** Greyed and not pressable: in maintenance, or not offered yet. */
     muted: boolean;
     onSelect?: () => void;
 }
+export interface ChosenMethodProps {
+    logo: ProviderLogoEnum;
+    name: string;
+    /** Its network. */
+    sub: string;
+    /** Back to the list. */
+    onChange: () => void;
+}
 export interface MethodGridCard extends MethodCardProps {
     id: string;
 }

package/package.json

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