@heyama/pay-react-native 1.0.3 → 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. */
@@ -63,6 +63,7 @@ export function useCheckoutController(view, { clues, mutations, platform }) {
             cards: [],
             selected: null,
             canPay: false,
+            detected: null,
             mismatch: null,
             suggestion: null,
         };
@@ -87,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);
@@ -192,13 +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,
-                    methodMissing: 0,
-                });
+                update(pickedPatch(method.id));
             }
         },
         comingSoon,

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

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

@@ -99,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)
@@ -139,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/SheetForm.js

@@ -23,7 +23,7 @@ function MethodGrid({ cards, missing }) {
     for (let index = 0; index < cards.length; index += 2) {
         rows.push(cards.slice(index, index + 2));
     }
-    return (_jsxs(Animated.View, { testID: "method-grid", accessibilityRole: "radiogroup", style: [styles.grid, { transform: [{ translateX: shake }] }], children: [rows.map((row) => (_jsxs(View, { style: styles.gridRow, children: [row.map(({ id, ...card }) => (_jsx(SheetMethodCard, { ...card, missing: missing > 0 }, id))), row.length === 1 && _jsx(View, { style: styles.gridSpacer })] }, row[0].id))), missing > 0 && (_jsx(SheetText, { accessibilityRole: "alert", weight: FigtreeEnum.MEDIUM, size: 13, color: colors.danger, children: t('method_missing') }))] }));
+    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

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, missing, 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,4 +1,4 @@
-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";
@@ -6,16 +6,17 @@ import { FigtreeEnum } from "../models/sheet.enum.js";
 import { SheetLogo } from "./SheetLogo.js";
 import { SheetText } from "./SheetText.js";
 import { FIELD_RADIUS } from "../models/sheet.constants.js";
-/** One method of the grid: logo and radio dot, then its name and network, or why it is greyed. Picked, it becomes the chosen row. */
-export function SheetMethodCard({ logo, name, sub, muted, missing = false, onSelect, }) {
+/** 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();
     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: styles.top, children: [_jsx(SheetLogo, { logo: logo, size: LOGO_SIZE.ROW, muted: muted }), _jsx(View, { style: [
+        ], 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
@@ -24,7 +25,7 @@ export function SheetMethodCard({ logo, name, sub, muted, missing = false, onSel
                                         ? colors.danger
                                         : colors.line4,
                             },
-                        ] })] }), _jsx(SheetText, { weight: FigtreeEnum.BOLD, size: 15, numberOfLines: 1, color: muted ? colors.muted : colors.ink, children: name }), _jsx(SheetText, { size: 12.5, numberOfLines: 1, color: muted ? colors.warnInk : colors.muted, children: sub })] }));
+                        ] })] }), !alone && texts] }));
 }
 const styles = StyleSheet.create({
     card: {
@@ -43,5 +44,7 @@ const styles = StyleSheet.create({
         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/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/models/sheet.interface.d.ts

@@ -181,6 +181,8 @@ export interface MethodCardProps {
     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 {

package/package.json

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