@heyama/pay-react-native 0.0.0-stage → 1.0.1

package/dist/components/SheetMethodCard.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, 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, }) {
+    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,
+                            { 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({
+    card: {
+        flex: 1,
+        minWidth: 0,
+        borderWidth: 1,
+        borderRadius: 14,
+        padding: 12,
+        gap: 2,
+    },
+    top: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        justifyContent: 'space-between',
+        marginBottom: 10,
+    },
+    radio: { width: 20, height: 20, borderRadius: 10, borderWidth: 1.5 },
+});

package/dist/components/SheetPhoneField.d.ts

@@ -0,0 +1,3 @@
+import type { SheetPhoneFieldProps } from '../models/sheet.interface.js';
+/** The Mobile Money number on the phone keyboard: the country's dial code, the number grouped as typed, its check. */
+export declare function SheetPhoneField({ core, phoneRef }: SheetPhoneFieldProps): import("react").JSX.Element;

package/dist/components/SheetPhoneField.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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";
+import { flagOf } from "../models/sheet.utils.js";
+import { SheetLogo } from "./SheetLogo.js";
+import { SheetInput, SheetText } from "./SheetText.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');
+    const { colors, brand } = useSheetTheme();
+    const { ui, derived, phone, actions } = core;
+    const { error } = phone.status;
+    const { mismatch, selected } = derived;
+    return (_jsxs(View, { style: styles.section, children: [_jsx(SheetText, { weight: FigtreeEnum.BOLD, style: styles.label, children: t('phone_label') }), _jsxs(View, { testID: "phone-field", style: [
+                    styles.field,
+                    {
+                        borderColor: error
+                            ? colors.danger
+                            : phone.focused
+                                ? 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", 
+                        // 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 },
+    label: { marginBottom: 8 },
+    field: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        height: 50,
+        borderWidth: 1,
+        borderRadius: 13,
+        overflow: 'hidden',
+    },
+    dial: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        height: '100%',
+        paddingHorizontal: 12,
+        borderRightWidth: 1,
+    },
+    input: { flex: 1, height: '100%', paddingHorizontal: 12 },
+    message: { minHeight: 22, marginTop: 8 },
+    mismatch: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+    grow: { flex: 1 },
+    switch: {
+        borderWidth: 1,
+        borderRadius: 8,
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+    },
+});

package/dist/components/SheetRow.d.ts

@@ -0,0 +1,3 @@
+import type { SheetRowProps } from '../models/sheet.interface.js';
+/** A label on the left, its value on the right, a hairline under them. */
+export declare function SheetRow({ label, children, urgent }: SheetRowProps): import("react").JSX.Element;

package/dist/components/SheetRow.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyleSheet, View } from 'react-native';
+import { useSheetTheme } from "../hooks/use-sheet-theme.js";
+import { FigtreeEnum } from "../models/sheet.enum.js";
+import { SheetText } from "./SheetText.js";
+/** A label on the left, its value on the right, a hairline under them. */
+export function SheetRow({ label, children, urgent = false }) {
+    const { colors } = useSheetTheme();
+    return (_jsxs(View, { style: [styles.row, { borderColor: colors.line }], children: [_jsx(SheetText, { color: colors.muted, children: label }), _jsx(View, { style: styles.value, children: typeof children === 'string' ? (_jsx(SheetText, { weight: FigtreeEnum.SEMI_BOLD, color: urgent ? colors.danger : colors.ink, style: styles.figures, children: children })) : (children) })] }));
+}
+const styles = StyleSheet.create({
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 12,
+        minHeight: 44,
+        paddingVertical: 11,
+        borderBottomWidth: 1,
+    },
+    value: {
+        flexShrink: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+    },
+    figures: { fontVariant: ['tabular-nums'], textAlign: 'right' },
+});

package/dist/components/SheetSimulator.d.ts

@@ -0,0 +1,6 @@
+import type { SheetScreenProps } from '../models/sheet.interface.js';
+/**
+ * On a test payment the Simulator took, the tester plays the payer's phone,
+ * or makes the provider misbehave. Never on a live payment.
+ */
+export declare function SheetSimulator({ core }: SheetScreenProps): import("react").JSX.Element;

package/dist/components/SheetSimulator.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { useTranslations } from 'use-intl';
+import { FLOW_TRAITS, SIMULATOR_NO_ANSWER_SUFFIX, } from "../checkout-core/models/checkout.constants.js";
+import { SimulatorOutcomeEnum } from "../checkout-core/models/checkout.enum.js";
+import { useSheetTheme } from "../hooks/use-sheet-theme.js";
+import { FigtreeEnum } from "../models/sheet.enum.js";
+import { SheetText } from "./SheetText.js";
+/**
+ * On a test payment the Simulator took, the tester plays the payer's phone,
+ * or makes the provider misbehave. Never on a live payment.
+ */
+export function SheetSimulator({ core }) {
+    const t = useTranslations('checkout');
+    const { colors } = useSheetTheme();
+    const traits = FLOW_TRAITS[core.view.attempt.flow];
+    const outcomes = Object.values(SimulatorOutcomeEnum).filter((outcome) => !traits.hiddenOutcomes.includes(outcome));
+    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 &&
+                        ` ${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 },
+                    ], children: _jsx(SheetText, { weight: FigtreeEnum.SEMI_BOLD, size: 13, children: t(`simulator.${outcome}`) }) }, outcome))) })] }));
+}
+const styles = StyleSheet.create({
+    panel: { borderWidth: 1, borderRadius: 12, padding: 14, marginTop: 18 },
+    title: { letterSpacing: 0.7, textTransform: 'uppercase' },
+    body: { marginTop: 4, marginBottom: 12 },
+    outcomes: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },
+    outcome: {
+        minHeight: 36,
+        justifyContent: 'center',
+        borderWidth: 1,
+        borderRadius: 8,
+        paddingHorizontal: 12,
+    },
+});

package/dist/components/SheetSkeleton.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The summary while the payment loads, bone for bone: its label and the
+ * amount.
+ */
+export declare function SheetSkeleton(): import("react").JSX.Element;

package/dist/components/SheetSkeleton.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyleSheet, View } from 'react-native';
+import { useTranslations } from 'use-intl';
+import { useSheetTheme } from "../hooks/use-sheet-theme.js";
+import { SheetBone } from "./SheetBone.js";
+/**
+ * The summary while the payment loads, bone for bone: its label and the
+ * amount.
+ */
+export function SheetSkeleton() {
+    const t = useTranslations('checkout');
+    const { colors } = useSheetTheme();
+    return (_jsxs(View, { accessibilityRole: "progressbar", accessibilityLabel: t('loading'), style: [styles.summary, { borderColor: colors.line }], children: [_jsx(SheetBone, { width: 96, height: 13 }), _jsx(View, { style: styles.amount, children: _jsx(SheetBone, { width: 168, height: 34 }) })] }));
+}
+const styles = StyleSheet.create({
+    summary: {
+        paddingHorizontal: 18,
+        paddingVertical: 16,
+        borderBottomWidth: 1,
+        gap: 8,
+    },
+    amount: { paddingVertical: 2 },
+});

package/dist/components/SheetSuccess.d.ts

@@ -0,0 +1,3 @@
+import type { SheetClosingProps } from '../models/sheet.interface.js';
+/** Paid: the check, the amount and the receipt; Done closes, as the countdown on it does by itself. */
+export declare function SheetSuccess({ core, onClose }: SheetClosingProps): import("react").JSX.Element;

package/dist/components/SheetSuccess.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyleSheet, View } from 'react-native';
+import { useFormatter, useTranslations } from 'use-intl';
+import { CURRENCY_LABEL } from "../checkout-core/models/checkout.constants.js";
+import { cardLabel } from "../checkout-core/models/checkout.card.utils.js";
+import { formatAmount } from "../checkout-core/models/checkout.money.utils.js";
+import { maskE164 } from "../checkout-core/models/checkout.phone.utils.js";
+import { logoOf } from "../checkout-core/models/checkout.view.utils.js";
+import { useSheetTheme } from "../hooks/use-sheet-theme.js";
+import { FigtreeEnum, SheetIconEnum } from "../models/sheet.enum.js";
+import { SheetButton } from "./SheetButton.js";
+import { SheetIcon } from "./SheetIcon.js";
+import { SheetLayout } from "./SheetLayout.js";
+import { SheetLogo } from "./SheetLogo.js";
+import { SheetRow } from "./SheetRow.js";
+import { SheetText } from "./SheetText.js";
+/** Paid: the check, the amount and the receipt; Done closes, as the countdown on it does by itself. */
+export function SheetSuccess({ core, onClose }) {
+    const t = useTranslations('checkout');
+    const format = useFormatter();
+    const { colors } = useSheetTheme();
+    const { view, returnLeft } = core;
+    // Only a status check pays a payment: there is always an attempt.
+    const attempt = view.attempt;
+    return (_jsx(SheetLayout, { foot: _jsx(SheetButton
+        // 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, {
+                                day: 'numeric',
+                                month: 'short',
+                                year: 'numeric',
+                                hour: '2-digit',
+                                minute: '2-digit',
+                            }) }), _jsx(SheetRow, { label: t('reference'), children: attempt.reference })] })] }) }));
+}
+const styles = StyleSheet.create({
+    success: { paddingHorizontal: 18, paddingTop: 30 },
+    icon: { alignItems: 'center' },
+    center: { textAlign: 'center' },
+    title: { marginTop: 18, letterSpacing: -0.4 },
+    amountRow: {
+        flexDirection: 'row',
+        alignItems: 'baseline',
+        justifyContent: 'center',
+        gap: 6,
+        marginTop: 6,
+    },
+    amount: { letterSpacing: -0.85, fontVariant: ['tabular-nums'] },
+    rows: { borderTopWidth: 1, marginTop: 22 },
+});

package/dist/components/SheetSummary.d.ts

@@ -0,0 +1,3 @@
+import type { SheetSummaryProps } from '../models/sheet.interface.js';
+/** The amount to pay. The order and its lines stay on the web checkout. */
+export declare function SheetSummary({ view }: SheetSummaryProps): import("react").JSX.Element;

package/dist/components/SheetSummary.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyleSheet, View } from 'react-native';
+import { useTranslations } from 'use-intl';
+import { CURRENCY_LABEL } from "../checkout-core/models/checkout.constants.js";
+import { formatAmount } from "../checkout-core/models/checkout.money.utils.js";
+import { useSheetTheme } from "../hooks/use-sheet-theme.js";
+import { FigtreeEnum } from "../models/sheet.enum.js";
+import { SheetText } from "./SheetText.js";
+/** The amount to pay. The order and its lines stay on the web checkout. */
+export function SheetSummary({ view }) {
+    const t = useTranslations('checkout');
+    const { colors } = useSheetTheme();
+    const { amount, currency } = view;
+    return (_jsxs(View, { style: [styles.summary, { borderColor: colors.line }], children: [_jsx(SheetText, { size: 13, color: colors.muted, children: t('total_label') }), _jsxs(View, { style: styles.amountRow, children: [_jsx(SheetText, { weight: FigtreeEnum.EXTRA_BOLD, size: 34, style: styles.amount, children: formatAmount(amount, currency) }), _jsx(SheetText, { weight: FigtreeEnum.SEMI_BOLD, size: 16, color: colors.ink2, children: CURRENCY_LABEL[currency] })] })] }));
+}
+const styles = StyleSheet.create({
+    summary: {
+        paddingHorizontal: 18,
+        paddingVertical: 16,
+        borderBottomWidth: 1,
+    },
+    amountRow: {
+        flexDirection: 'row',
+        alignItems: 'baseline',
+        gap: 6,
+        marginTop: 2,
+    },
+    amount: {
+        letterSpacing: -0.85,
+        fontVariant: ['tabular-nums'],
+    },
+});

package/dist/components/SheetTerminal.d.ts

@@ -0,0 +1,3 @@
+import type { SheetTerminalProps } from '../models/sheet.interface.js';
+/** A payment that cannot be paid any more, said plainly, and the way back to the app. */
+export declare function SheetTerminal({ core, kind, onClose }: SheetTerminalProps): import("react").JSX.Element;

package/dist/components/SheetTerminal.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslations } from 'use-intl';
+import { TerminalKindEnum } from "../checkout-core/models/checkout.enum.js";
+import { SheetIconEnum } from "../models/sheet.enum.js";
+import { SheetButton } from "./SheetButton.js";
+import { SheetLayout } from "./SheetLayout.js";
+import { SheetMessage } from "./SheetMessage.js";
+const COPY_KEY = {
+    [TerminalKindEnum.EXPIRED]: 'expired',
+    [TerminalKindEnum.CANCELLED]: 'cancelled',
+    [TerminalKindEnum.LOCKED]: 'locked_screen',
+    [TerminalKindEnum.NO_METHOD]: 'no_method',
+};
+/** A payment that cannot be paid any more, said plainly, and the way back to the app. */
+export function SheetTerminal({ core, kind, onClose }) {
+    const t = useTranslations('checkout');
+    const app = core.view.app.name;
+    const key = COPY_KEY[kind];
+    const locked = kind === TerminalKindEnum.LOCKED;
+    return (_jsx(SheetLayout, { foot: _jsx(SheetButton, { label: t('return_to', { app }), onPress: onClose }), children: _jsx(SheetMessage, { title: t(`${key}.title`), body: t(`${key}.body`, { app }), icon: locked ? SheetIconEnum.LOCK : SheetIconEnum.CLOCK, danger: locked }) }));
+}

package/dist/components/SheetText.d.ts

@@ -0,0 +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 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

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text, TextInput } from 'react-native';
+import { useSheetTheme } from "../hooks/use-sheet-theme.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 }) {
+    const { colors } = useSheetTheme();
+    return (_jsx(Text, { ...props, style: [
+            { fontFamily: weight, fontSize: size, color: color ?? colors.ink },
+            style,
+        ] }));
+}
+/** Every field of the sheet: Figtree at 16, so iOS never zooms, in the sheet's ink. */
+export function SheetInput({ style, ...props }) {
+    const { colors } = useSheetTheme();
+    return (_jsx(TextInput, { placeholderTextColor: colors.faint, selectionColor: colors.ink, ...props, style: [
+            {
+                fontFamily: FigtreeEnum.MEDIUM,
+                fontSize: 16,
+                color: colors.ink,
+                fontVariant: ['tabular-nums'],
+            },
+            style,
+        ] }));
+}

package/dist/components/SheetToast.d.ts

@@ -0,0 +1,3 @@
+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;

package/dist/components/SheetToast.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet, View } from 'react-native';
+import { useSheetTheme } from "../hooks/use-sheet-theme.js";
+import { FigtreeEnum } from "../models/sheet.enum.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)
+        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 styles = StyleSheet.create({
+    toast: {
+        position: 'absolute',
+        top: 56,
+        left: 18,
+        right: 18,
+        borderRadius: 12,
+        paddingHorizontal: 14,
+        paddingVertical: 11,
+    },
+    text: { textAlign: 'center' },
+});

package/dist/components/SheetWaiting.d.ts

@@ -0,0 +1,7 @@
+import type { SheetScreenProps } from '../models/sheet.interface.js';
+/**
+ * Waiting for the payer to approve on their phone: what to do, the method
+ * and the clock, Resend once 30 seconds have passed, and another method.
+ * It moves on by itself.
+ */
+export declare function SheetWaiting({ core }: SheetScreenProps): import("react").JSX.Element;

package/dist/components/SheetWaiting.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import { useTranslations } from 'use-intl';
+import { FLOW_TRAITS, URGENT_SECONDS, WAIT_SECONDS, } from "../checkout-core/models/checkout.constants.js";
+import { CheckoutButtonVariantEnum } from "../checkout-core/models/checkout.enum.js";
+import { formatClock, formatMoney, } from "../checkout-core/models/checkout.money.utils.js";
+import { maskE164 } from "../checkout-core/models/checkout.phone.utils.js";
+import { useSheetTheme } from "../hooks/use-sheet-theme.js";
+import { FigtreeEnum } from "../models/sheet.enum.js";
+import { resendLeftOf } from "../models/sheet.utils.js";
+import { SheetButton } from "./SheetButton.js";
+import { SheetLayout } from "./SheetLayout.js";
+import { SheetRow } from "./SheetRow.js";
+import { SheetSimulator } from "./SheetSimulator.js";
+import { SheetText } from "./SheetText.js";
+const NO_BREAK_SPACE = '\u00a0';
+/**
+ * Waiting for the payer to approve on their phone: what to do, the method
+ * and the clock, Resend once 30 seconds have passed, and another method.
+ * It moves on by itself.
+ */
+export function SheetWaiting({ core }) {
+    const t = useTranslations('checkout');
+    const { colors, brand } = useSheetTheme();
+    const { view, waitLeft, actions } = core;
+    const attempt = view.attempt;
+    // A payment code or a card needs nothing more from the payer: no prompt to resend.
+    const { prompt } = FLOW_TRAITS[attempt.flow];
+    /** The second of the wait the prompt was last sent at. */
+    const [sentAt, setSentAt] = useState(0);
+    const resendLeft = resendLeftOf(waitLeft, sentAt);
+    // The number never breaks across lines.
+    const phone = attempt.phone
+        ? maskE164(attempt.phone).replace(/ /g, NO_BREAK_SPACE)
+        : '';
+    return (_jsx(SheetLayout, { foot: _jsxs(_Fragment, { children: [prompt && (_jsx(SheetButton, { variant: CheckoutButtonVariantEnum.SECONDARY, label: resendLeft > 0
+                        ? t('sheet.resend_in', { clock: formatClock(resendLeft) })
+                        : 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
+                        ? prompt
+                            ? t('sheet.approve_body', {
+                                method: attempt.methodName,
+                                phone,
+                            })
+                            : `${t('checking_with', { method: attempt.methodName })} ${phone}`
+                        : t('checking_card', { method: attempt.methodName }) }), _jsxs(View, { style: [styles.rows, { borderColor: colors.line }], children: [_jsx(SheetRow, { label: attempt.methodName, children: formatMoney(view.amount, view.currency) }), _jsx(SheetRow, { label: t('sheet.expires_in'), urgent: waitLeft <= URGENT_SECONDS, children: formatClock(waitLeft) })] }), attempt.simulated && _jsx(SheetSimulator, { core: core })] }) }));
+}
+const styles = StyleSheet.create({
+    waiting: { paddingHorizontal: 18, paddingTop: 30 },
+    pulse: {
+        alignSelf: 'center',
+        width: 128,
+        height: 128,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    halo: { position: 'absolute' },
+    outer: { width: 128, height: 128, borderRadius: 64, opacity: 0.06 },
+    inner: { width: 96, height: 96, borderRadius: 48, opacity: 0.12 },
+    phone: {
+        width: 24,
+        height: 38,
+        borderWidth: 2.5,
+        borderRadius: 6,
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        paddingBottom: 4,
+    },
+    speaker: { width: 6, height: 2.5, borderRadius: 1.25 },
+    title: { marginTop: 22, marginBottom: 8, letterSpacing: -0.4 },
+    center: { textAlign: 'center' },
+    rows: { borderTopWidth: 1, marginTop: 22 },
+    link: { minHeight: 40, justifyContent: 'center' },
+});

package/dist/hooks/use-native-platform.d.ts

@@ -0,0 +1,10 @@
+import type { RefObject } from 'react';
+import type { TextInputInstance } from 'react-native';
+import type { NativePlatform } from '../models/sheet.interface.js';
+/**
+ * What only the phone does for the checkout core. Leaving for the app is
+ * closing the sheet: `presentPayment` resolves, nothing opens the return URL.
+ * The card fields page talks through its WebView (`cardFields`). One stable
+ * object for the sheet's life.
+ */
+export declare function useNativePlatform(onLeave: () => void, phoneField: RefObject<TextInputInstance | null>): NativePlatform;

package/dist/hooks/use-native-platform.js

@@ -0,0 +1,47 @@
+import { useEffect, useRef, useState } from 'react';
+import { AppState, Share } from 'react-native';
+import { cardFieldsSubmit } from "../models/sheet.utils.js";
+/**
+ * What only the phone does for the checkout core. Leaving for the app is
+ * closing the sheet: `presentPayment` resolves, nothing opens the return URL.
+ * The card fields page talks through its WebView (`cardFields`). One stable
+ * object for the sheet's life.
+ */
+export function useNativePlatform(onLeave, phoneField) {
+    const leave = useRef(onLeave);
+    useEffect(() => {
+        leave.current = onLeave;
+    }, [onLeave]);
+    const cardPage = useRef(null);
+    const [cardListeners] = useState(() => new Set());
+    const [platform] = useState(() => ({
+        onReturn: (listener) => {
+            const subscription = AppState.addEventListener('change', (state) => {
+                if (state === 'active')
+                    listener();
+            });
+            return () => subscription.remove();
+        },
+        // No clipboard in React Native itself: the share sheet offers Copy.
+        copyText: (text) => {
+            void Share.share({ message: text }).catch(() => undefined);
+        },
+        openUrl: () => leave.current(),
+        onCardMessage: (listener) => {
+            cardListeners.add(listener);
+            return () => void cardListeners.delete(listener);
+        },
+        // Pay is pressed on the form, where a picked card always shows its page.
+        submitCard: () => cardPage.current.injectJavaScript(cardFieldsSubmit()),
+        saveReceipt: (fileName, text) => {
+            void Share.share({ title: fileName, message: text }).catch(() => undefined);
+        },
+        // A wrong number on Pay: the keyboard comes up on it.
+        onPhoneRejected: () => phoneField.current?.focus(),
+    }));
+    const [cardFields] = useState(() => ({
+        page: cardPage,
+        receive: (message) => cardListeners.forEach((listener) => listener(message)),
+    }));
+    return { platform, cardFields };
+}

package/dist/hooks/use-payment-sheet.d.ts

@@ -0,0 +1,4 @@
+import type { PaymentSheet } from '../models/sheet.interface.js';
+export declare const PaymentSheetContext: import("react").Context<PaymentSheet | null>;
+/** `presentPayment`, from the `BrissotoPayProvider` around the app. */
+export declare function usePaymentSheet(): PaymentSheet;

package/dist/hooks/use-payment-sheet.js

@@ -0,0 +1,10 @@
+import { createContext, use } from 'react';
+export const PaymentSheetContext = createContext(null);
+/** `presentPayment`, from the `BrissotoPayProvider` around the app. */
+export function usePaymentSheet() {
+    const sheet = use(PaymentSheetContext);
+    if (!sheet) {
+        throw new Error('usePaymentSheet needs a BrissotoPayProvider around the app.');
+    }
+    return sheet;
+}

package/dist/hooks/use-sheet-motion.d.ts

@@ -0,0 +1,7 @@
+import type { SheetMotion } from '../models/sheet.interface.js';
+/**
+ * The bottom sheet's moves, in plain React Native: it slides up from below
+ * the screen, follows a finger dragging its top down, springs back or
+ * `onSwipe`s when let go, and slides away once `open` turns false.
+ */
+export declare function useSheetMotion(open: boolean, onSwipe: () => void): SheetMotion;

package/dist/hooks/use-sheet-motion.js

@@ -0,0 +1,62 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Easing, PanResponder, useWindowDimensions, } from 'react-native';
+import { SHEET_DIM_OPACITY, SHEET_SLIDE_MS, SHEET_TOP_GAP, } from "../models/sheet.constants.js";
+import { sheetSwipeCloses } from "../models/sheet.utils.js";
+/**
+ * The bottom sheet's moves, in plain React Native: it slides up from below
+ * the screen, follows a finger dragging its top down, springs back or
+ * `onSwipe`s when let go, and slides away once `open` turns false.
+ */
+export function useSheetMotion(open, onSwipe) {
+    const { height } = useWindowDimensions();
+    const [slide] = useState(() => new Animated.Value(height));
+    const [drag] = useState(() => new Animated.Value(0));
+    const [shown, setShown] = useState(open);
+    const swiped = useRef(onSwipe);
+    useEffect(() => {
+        swiped.current = onSwipe;
+    }, [onSwipe]);
+    useEffect(() => {
+        Animated.timing(slide, {
+            toValue: open ? 0 : height,
+            duration: SHEET_SLIDE_MS,
+            easing: Easing.out(Easing.cubic),
+            useNativeDriver: true,
+        }).start(() => {
+            if (!open)
+                setShown(false);
+        });
+    }, [open, height, slide]);
+    const [dragHandlers] = useState(() => {
+        const settle = () => Animated.spring(drag, {
+            toValue: 0,
+            bounciness: 0,
+            useNativeDriver: true,
+        }).start();
+        return PanResponder.create({
+            // The top holds only close, which takes its own taps.
+            onStartShouldSetPanResponder: () => true,
+            onPanResponderMove: (_event, { dy }) => drag.setValue(Math.max(0, dy)),
+            onPanResponderRelease: (_event, { dy, vy }) => {
+                // Closing asks first while a prompt waits: the sheet comes back up.
+                if (sheetSwipeCloses(dy, vy))
+                    swiped.current();
+                settle();
+            },
+            onPanResponderTerminate: settle,
+        }).panHandlers;
+    });
+    const [translateY] = useState(() => Animated.add(slide, drag));
+    const dim = useMemo(() => translateY.interpolate({
+        inputRange: [0, height],
+        outputRange: [SHEET_DIM_OPACITY, 0],
+        extrapolate: 'clamp',
+    }), [translateY, height]);
+    return {
+        shown,
+        translateY,
+        dim,
+        dragHandlers,
+        topGap: height * SHEET_TOP_GAP,
+    };
+}