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

package/dist/components/SheetHeader.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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 { FigtreeEnum } from "../models/sheet.enum.js";
+import { SheetBone } from "./SheetBone.js";
+import { SheetText } from "./SheetText.js";
+/**
+ * The grabber, then the app being paid: its logo and name, the Test badge,
+ * and close. Dragged down, the sheet follows.
+ */
+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: [
+                                    styles.bar,
+                                    styles.barDown,
+                                    { backgroundColor: colors.ink2 },
+                                ] })] })] })] }));
+}
+const styles = StyleSheet.create({
+    grabber: {
+        alignSelf: 'center',
+        width: 38,
+        height: 5,
+        borderRadius: 3,
+        marginTop: 7,
+    },
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 10,
+        paddingHorizontal: 18,
+        paddingTop: 10,
+    },
+    logo: {
+        width: 34,
+        height: 34,
+        borderRadius: 9,
+        borderWidth: 1,
+        borderColor: MEDIA_LINE,
+    },
+    initial: {
+        width: 34,
+        height: 34,
+        borderRadius: 9,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    name: { flex: 1 },
+    // Android adds font padding above the ascender: without it, each text sits
+    // on the row's centre line like the logo, the badge and close.
+    centred: { includeFontPadding: false, textAlignVertical: 'center' },
+    badge: { borderRadius: 6, paddingHorizontal: 7, paddingVertical: 3 },
+    badgeText: { letterSpacing: 0.6, textTransform: 'uppercase' },
+    close: {
+        width: 30,
+        height: 30,
+        borderRadius: 15,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    bar: { position: 'absolute', width: 14, height: 2, borderRadius: 1 },
+    barUp: { transform: [{ rotate: '45deg' }] },
+    barDown: { transform: [{ rotate: '-45deg' }] },
+});

package/dist/components/SheetIcon.d.ts

@@ -0,0 +1,3 @@
+import type { SheetIconProps } from '../models/sheet.interface.js';
+/** A sign in a disc, drawn with views: the sheet ships no icon font or SVG. */
+export declare function SheetIcon({ kind, color, background, size, }: SheetIconProps): import("react").JSX.Element;

package/dist/components/SheetIcon.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyleSheet, View } from 'react-native';
+import { SheetIconEnum } from "../models/sheet.enum.js";
+/** A sign in a disc, drawn with views: the sheet ships no icon font or SVG. */
+export function SheetIcon({ kind, color, background, size = 48, }) {
+    const scale = size / 48;
+    const ink = { backgroundColor: color };
+    const line = { borderColor: color };
+    let sign;
+    switch (kind) {
+        case SheetIconEnum.CHECK:
+            sign = _jsx(View, { style: [styles.check, line] });
+            break;
+        case SheetIconEnum.CROSS:
+            sign = (_jsxs(_Fragment, { children: [_jsx(View, { style: [styles.bar, styles.up, ink] }), _jsx(View, { style: [styles.bar, styles.down, ink] })] }));
+            break;
+        case SheetIconEnum.CLOCK:
+            sign = (_jsxs(View, { style: [styles.ring, line], children: [_jsx(View, { style: [styles.hour, ink] }), _jsx(View, { style: [styles.minute, ink] })] }));
+            break;
+        case SheetIconEnum.LOCK:
+            sign = (_jsxs(View, { style: styles.lock, children: [_jsx(View, { style: [styles.shackle, line] }), _jsx(View, { style: [styles.body, ink] })] }));
+            break;
+        default:
+            sign = (_jsx(View, { style: [styles.ring, line], children: _jsx(View, { style: [styles.slash, ink] }) }));
+    }
+    return (_jsx(View, { testID: `icon-${kind}`, style: [
+            styles.disc,
+            {
+                width: size,
+                height: size,
+                borderRadius: size / 2,
+                backgroundColor: background,
+            },
+        ], children: _jsx(View, { style: { transform: [{ scale }] }, children: sign }) }));
+}
+const styles = StyleSheet.create({
+    disc: { alignItems: 'center', justifyContent: 'center' },
+    check: {
+        width: 10,
+        height: 18,
+        marginTop: -4,
+        borderRightWidth: 3,
+        borderBottomWidth: 3,
+        transform: [{ rotate: '45deg' }],
+    },
+    bar: { position: 'absolute', width: 18, height: 2.6, borderRadius: 1.3 },
+    up: { transform: [{ rotate: '45deg' }] },
+    down: { transform: [{ rotate: '-45deg' }] },
+    ring: {
+        width: 20,
+        height: 20,
+        borderRadius: 10,
+        borderWidth: 2,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    slash: { width: 18, height: 2, transform: [{ rotate: '-45deg' }] },
+    hour: { position: 'absolute', width: 2, height: 6, top: 3, left: 7 },
+    minute: { position: 'absolute', width: 5, height: 2, top: 7, left: 7 },
+    lock: { alignItems: 'center' },
+    shackle: {
+        width: 12,
+        height: 10,
+        borderWidth: 2.4,
+        borderBottomWidth: 0,
+        borderTopLeftRadius: 6,
+        borderTopRightRadius: 6,
+    },
+    body: { width: 18, height: 12, borderRadius: 3 },
+});

package/dist/components/SheetLayout.d.ts

@@ -0,0 +1,8 @@
+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.
+ */
+export declare function SheetLayout({ children, foot, secure, }: SheetLayoutProps): import("react").JSX.Element;

package/dist/components/SheetLayout.js

@@ -0,0 +1,35 @@
+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 { 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.
+ */
+export function SheetLayout({ children, foot, secure = true, }) {
+    const t = useTranslations('checkout');
+    const { colors } = useSheetTheme();
+    const scroller = useRef(null);
+    useEffect(() => {
+        const shown = Keyboard.addListener('keyboardDidShow', () => scroller.current?.scrollToEnd());
+        return () => shown.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" })] }))] }))] }));
+}
+const styles = StyleSheet.create({
+    body: { flexGrow: 0, flexShrink: 1, marginTop: 6 },
+    content: { paddingBottom: 16 },
+    foot: {
+        borderTopWidth: 1,
+        paddingHorizontal: 18,
+        paddingTop: 12,
+        paddingBottom: 28,
+        gap: 10,
+    },
+    secure: { textAlign: 'center' },
+});

package/dist/components/SheetLogo.d.ts

@@ -0,0 +1,3 @@
+import type { SheetLogoProps } from '../models/sheet.interface.js';
+/** A brand's square tile, the same as on the web checkout. */
+export declare function SheetLogo({ logo, size, muted, }: SheetLogoProps): import("react").JSX.Element;

package/dist/components/SheetLogo.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Image, StyleSheet } from 'react-native';
+import { LOGO_RADIUS_RATIO, LOGO_SIZE, MEDIA_LINE, } from "../checkout-core/models/checkout.constants.js";
+import { PROVIDER_LOGOS } from "../models/sheet.constants.js";
+/** A brand's square tile, the same as on the web checkout. */
+export function SheetLogo({ logo, size = LOGO_SIZE.INLINE, muted = false, }) {
+    return (_jsx(Image, { source: PROVIDER_LOGOS[logo], accessibilityIgnoresInvertColors: true, style: [
+            styles.logo,
+            {
+                width: size,
+                height: size,
+                borderRadius: Math.round(size * LOGO_RADIUS_RATIO),
+            },
+            muted && styles.muted,
+        ] }));
+}
+const styles = StyleSheet.create({
+    logo: { borderWidth: 1, borderColor: MEDIA_LINE },
+    muted: { opacity: 0.45 },
+});

package/dist/components/SheetMessage.d.ts

@@ -0,0 +1,3 @@
+import type { SheetMessageProps } from '../models/sheet.interface.js';
+/** A dead end the payer cannot fix here: its sign, what happened and why. */
+export declare function SheetMessage({ title, body, icon, danger, }: SheetMessageProps): import("react").JSX.Element;

package/dist/components/SheetMessage.js

@@ -0,0 +1,15 @@
+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, SheetIconEnum } from "../models/sheet.enum.js";
+import { SheetIcon } from "./SheetIcon.js";
+import { SheetText } from "./SheetText.js";
+/** A dead end the payer cannot fix here: its sign, what happened and why. */
+export function SheetMessage({ title, body, icon = SheetIconEnum.BAN, danger = false, }) {
+    const { colors } = useSheetTheme();
+    return (_jsxs(View, { style: styles.message, children: [_jsx(SheetIcon, { kind: icon, color: danger ? colors.danger : colors.ink2, background: danger ? colors.dangerSoft : colors.fill2 }), _jsx(SheetText, { weight: FigtreeEnum.BOLD, size: 22, accessibilityRole: "header", style: styles.title, children: title }), _jsx(SheetText, { size: 15, color: colors.inkStrong, children: body })] }));
+}
+const styles = StyleSheet.create({
+    message: { paddingHorizontal: 18, paddingTop: 28 },
+    title: { marginTop: 16, marginBottom: 8, letterSpacing: -0.4 },
+});

package/dist/components/SheetMethodCard.d.ts

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

package/dist/components/SheetMethodCard.js

@@ -0,0 +1,39 @@
+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. */
+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: [
+                            styles.radio,
+                            checked
+                                ? { borderColor: brand, borderWidth: 6 }
+                                : { 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,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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", 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 }) }))) })] }));
+}
+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;