@voyant-travel/finance-react 0.119.5

package/dist/checkout-components/collect-payment-dialog.js

@@ -0,0 +1,121 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { buildPaymentLinkUrl } from "@voyant-travel/finance/payment-link";
+import { formatMessage } from "@voyant-travel/i18n";
+import { Button } from "@voyant-travel/ui/components/button";
+import { CurrencyCombobox } from "@voyant-travel/ui/components/currency-combobox";
+import { CurrencyInput } from "@voyant-travel/ui/components/currency-input";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from "@voyant-travel/ui/components/dialog";
+import { Label } from "@voyant-travel/ui/components/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyant-travel/ui/components/select";
+import { CheckCircle2, Copy, ExternalLink, Loader2, X } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
+import { useCheckoutPaymentLinkConfig, useCollectPayment } from "../checkout-hooks/index.js";
+import { useCheckoutUiMessagesOrDefault } from "../checkout-i18n/provider.js";
+import { useBookingPaymentSchedules } from "../hooks/use-booking-payment-schedules.js";
+const FULL_AMOUNT_VALUE = "__full__";
+export function CollectPaymentDialog({ open, onOpenChange, bookingId, defaultCurrency, defaultAmountCents, defaultPayerEmail, defaultPayerName, defaultPayerLanguage, returnUrl, cancelUrl, cardProvider, }) {
+    const messages = useCheckoutUiMessagesOrDefault().collectPaymentDialog;
+    const [amountCents, setAmountCents] = useState(defaultAmountCents ?? 0);
+    const [scheduleId, setScheduleId] = useState(FULL_AMOUNT_VALUE);
+    const [currency, setCurrency] = useState(defaultCurrency);
+    const [result, setResult] = useState(null);
+    const schedulesQuery = useBookingPaymentSchedules(bookingId, { enabled: open });
+    // Only the open schedules are useful pre-fills. Paid / waived /
+    // cancelled / expired wouldn't represent money the customer still
+    // needs to send.
+    const schedules = useMemo(() => (schedulesQuery.data?.data ?? []).filter((s) => s.status === "pending" || s.status === "due"), [schedulesQuery.data?.data]);
+    const collect = useCollectPayment(bookingId, {
+        cardProvider,
+        payerEmail: defaultPayerEmail,
+        payerName: defaultPayerName,
+        payerLanguage: defaultPayerLanguage,
+        returnUrl,
+        cancelUrl,
+    });
+    // Re-seed the amount from the latest props only on the closed→open
+    // transition. Watching state mid-flight would clobber manual edits.
+    const wasOpenRef = useRef(false);
+    useEffect(() => {
+        if (open && !wasOpenRef.current) {
+            setAmountCents(defaultAmountCents ?? 0);
+            setScheduleId(FULL_AMOUNT_VALUE);
+            setCurrency(defaultCurrency);
+        }
+        wasOpenRef.current = open;
+    }, [open, defaultAmountCents, defaultCurrency]);
+    function reset() {
+        setAmountCents(defaultAmountCents ?? 0);
+        setScheduleId(FULL_AMOUNT_VALUE);
+        setCurrency(defaultCurrency);
+        setResult(null);
+        collect.reset();
+    }
+    async function submit() {
+        if (amountCents <= 0) {
+            toast.error(messages.validation.amountAboveZero);
+            return;
+        }
+        try {
+            const data = await collect.mutateAsync({ choice: { type: "hold" }, amountCents });
+            setResult(data);
+            toast.success(messages.validation.linkReady);
+        }
+        catch (err) {
+            toast.error(err.message);
+        }
+    }
+    return (_jsx(Dialog, { open: open, onOpenChange: (next) => {
+            onOpenChange(next);
+            if (!next)
+                reset();
+        }, children: _jsxs(DialogContent, { className: "max-w-lg gap-0 p-0", children: [_jsxs(DialogHeader, { className: "border-b px-6 py-4", children: [_jsx(DialogTitle, { children: messages.title }), _jsx(DialogDescription, { children: messages.description })] }), result ? (_jsx("div", { className: "px-6 py-5", children: _jsx(ResultPanel, { result: result }) })) : (_jsxs("div", { className: "flex flex-col gap-4 px-6 py-5", children: [schedules.length > 0 ? (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: "collect-schedule", children: messages.scheduleLabel }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Select, { value: scheduleId, onValueChange: (v) => {
+                                                const next = v ?? FULL_AMOUNT_VALUE;
+                                                setScheduleId(next);
+                                                if (next !== FULL_AMOUNT_VALUE) {
+                                                    const schedule = schedules.find((s) => s.id === next);
+                                                    if (schedule) {
+                                                        setAmountCents(schedule.amountCents);
+                                                        setCurrency(schedule.currency);
+                                                    }
+                                                }
+                                            }, children: [_jsx(SelectTrigger, { id: "collect-schedule", className: "w-full", children: _jsx(SelectValue, { placeholder: messages.scheduleCustomPlaceholder }) }), _jsx(SelectContent, { children: schedules.map((schedule) => (_jsx(SelectItem, { value: schedule.id, children: formatScheduleOption(schedule, messages.scheduleTypeLabels) }, schedule.id))) })] }), scheduleId !== FULL_AMOUNT_VALUE ? (_jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": messages.scheduleClear, onClick: () => {
+                                                setScheduleId(FULL_AMOUNT_VALUE);
+                                                setAmountCents(defaultAmountCents ?? 0);
+                                                setCurrency(defaultCurrency);
+                                            }, children: _jsx(X, { className: "h-4 w-4" }) })) : null] })] })) : null, scheduleId === FULL_AMOUNT_VALUE ? (_jsxs("div", { className: "grid grid-cols-[1fr_minmax(8rem,12rem)] gap-3", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: "collect-amount", children: messages.amountLabelShort }), _jsx(CurrencyInput, { id: "collect-amount", value: amountCents, onChange: (next) => setAmountCents(next ?? 0), currency: currency })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: "collect-currency", children: messages.currencyLabel }), _jsx(CurrencyCombobox, { value: currency, onChange: (next) => setCurrency(next ?? defaultCurrency) })] })] })) : null] })), _jsx("div", { className: "flex items-center justify-end gap-2 px-6 pb-6", children: result ? (_jsx(Button, { onClick: () => onOpenChange(false), children: messages.done })) : (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), disabled: collect.isPending, children: messages.cancel }), _jsxs(Button, { onClick: submit, disabled: collect.isPending || amountCents <= 0, children: [collect.isPending && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), messages.generateLink] })] })) })] }) }));
+}
+function formatAmount(cents, currency) {
+    if (cents <= 0)
+        return `0 ${currency}`;
+    try {
+        return new Intl.NumberFormat(undefined, { style: "currency", currency }).format(cents / 100);
+    }
+    catch {
+        return `${(cents / 100).toFixed(2)} ${currency}`;
+    }
+}
+function formatScheduleOption(schedule, typeLabels) {
+    const typeLabel = typeLabels[schedule.scheduleType] ?? schedule.scheduleType;
+    const amount = formatAmount(schedule.amountCents, schedule.currency);
+    return `${typeLabel} • ${amount} • ${schedule.dueDate}`;
+}
+function ResultPanel({ result }) {
+    const messages = useCheckoutUiMessagesOrDefault().collectPaymentDialog;
+    const configQuery = useCheckoutPaymentLinkConfig();
+    const sessionId = result.paymentSession?.id ?? null;
+    const landingUrl = sessionId && typeof window !== "undefined"
+        ? buildPaymentLinkUrl(sessionId, {
+            baseUrl: configQuery.data?.publicCheckoutBaseUrl ?? window.location.origin,
+        })
+        : null;
+    if (!landingUrl) {
+        return (_jsx("div", { className: "rounded-xl border border-amber-500/40 bg-amber-500/5 p-5 text-sm", children: formatMessage(messages.result.noLink, {
+                sessionId: sessionId ?? messages.result.noSession,
+            }) }));
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-4 rounded-xl border bg-card p-5", children: [_jsxs("div", { className: "flex items-center gap-2 text-emerald-700", children: [_jsx(CheckCircle2, { className: "h-5 w-5" }), _jsx("span", { className: "font-medium", children: messages.result.ready })] }), _jsx("p", { className: "text-muted-foreground text-sm", children: messages.result.body }), _jsxs("div", { className: "flex items-center gap-2 rounded-md border bg-muted/30 p-3 font-mono text-xs", children: [_jsx("span", { className: "flex-1 break-all", children: landingUrl }), _jsx("button", { type: "button", "aria-label": messages.result.copyLink, className: "text-muted-foreground hover:text-foreground", onClick: () => {
+                            navigator.clipboard?.writeText(landingUrl).catch(() => undefined);
+                        }, children: _jsx(Copy, { className: "h-3.5 w-3.5" }) }), _jsx("a", { href: landingUrl, target: "_blank", rel: "noreferrer", "aria-label": messages.result.openLink, className: "text-muted-foreground hover:text-foreground", children: _jsx(ExternalLink, { className: "h-3.5 w-3.5" }) })] })] }));
+}

package/dist/checkout-components/payment-link-landing-page.d.ts

@@ -0,0 +1,76 @@
+import type { PublicPaymentSession } from "@voyant-travel/finance/public-validation";
+import { type ReactNode } from "react";
+/**
+ * Universal landing page rendered at `/pay/:sessionId`. The customer lands
+ * here from a payment-link email (or after returning from the processor's
+ * hosted checkout). Vertical-agnostic — same component for a flight order,
+ * a hotel deposit, or a cruise balance.
+ *
+ * The parent owns:
+ *   - fetching `PublicPaymentSession` from `/v1/public/payment-sessions/:id`
+ *     (typically via `usePublicPaymentSession` from `@voyant-travel/finance-react`)
+ *   - re-fetching after the user returns from the processor (the processor
+ *     redirects back to `session.returnUrl`; the page re-mounts and the
+ *     latest status is shown)
+ *   - sourcing the bank-transfer block from template config
+ *
+ * See `docs/architecture/payments-architecture.md` §Core Rule 4.
+ */
+export interface PaymentLinkLandingPageProps {
+    session: PublicPaymentSession;
+    /** Bank-transfer instructions block — template-supplied per deployment. */
+    bankTransferInstructions?: BankTransferInstructions;
+    /** Header slot (logo, brand name, optional support contact). */
+    brandHeader?: ReactNode;
+    /** Footer slot (T&Cs link, support contact, privacy). */
+    brandFooter?: ReactNode;
+    /**
+     * Fired when the customer clicks "Pay by card" — the parent typically
+     * redirects to `session.redirectUrl` (the processor's hosted checkout).
+     */
+    onPayByCard?: () => void;
+    /**
+     * Optional human-readable description shown above the amount. Sourced
+     * from the booking / invoice / vertical context (the session record
+     * itself doesn't carry a description today).
+     */
+    description?: string;
+    /**
+     * Optional structured summary slot rendered above the payment methods.
+     * Templates use this to surface vertical-specific context (itinerary
+     * cards with thumbnails for trips, line items for invoices, etc.).
+     */
+    summary?: ReactNode;
+    /**
+     * Hide the raw `session.notes` paragraph in the header. Templates set this
+     * when the `summary` slot already conveys the same content in a
+     * structured form (so customers don't see the same data twice).
+     */
+    suppressNotes?: boolean;
+    /**
+     * Fired when the customer clicks "Try again" on a failed payment.
+     * Should create a fresh `payment_session` (the original one is dead)
+     * and redirect the customer to its landing page. The parent typically
+     * POSTs to `/v1/public/payment-link/:sessionId/retry` and navigates to
+     * `/pay/{newSessionId}` with the result. When omitted, the failed
+     * panel renders no retry CTA at all (clearer than a button that
+     * re-opens the dead processor URL).
+     */
+    onRetry?: () => Promise<void> | void;
+}
+export interface BankTransferInstructions {
+    beneficiaryName: string;
+    iban: string;
+    bic?: string;
+    bankName?: string;
+    /**
+     * Reference the customer must include in their wire so finance can
+     * reconcile the inbound transfer. Defaults to the session's
+     * `externalReference` / `clientReference` / `id` when not supplied.
+     */
+    reference?: string;
+    /** Free-text notes — surfaced under the IBAN block. */
+    notes?: string;
+}
+export declare function PaymentLinkLandingPage({ session, bankTransferInstructions, brandHeader, brandFooter, onPayByCard, onRetry, description, summary, suppressNotes, }: PaymentLinkLandingPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=payment-link-landing-page.d.ts.map

package/dist/checkout-components/payment-link-landing-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"payment-link-landing-page.d.ts","sourceRoot":"","sources":["../../src/checkout-components/payment-link-landing-page.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAA;AAcpF,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAA;AAahD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,2BAA2B;IAC1C,OAAO,EAAE,oBAAoB,CAAA;IAC7B,2EAA2E;IAC3E,wBAAwB,CAAC,EAAE,wBAAwB,CAAA;IACnD,gEAAgE;IAChE,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,yDAAyD;IACzD,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;CACrC;AAED,MAAM,WAAW,wBAAwB;IACvC,eAAe,EAAE,MAAM,CAAA;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,wBAAgB,sBAAsB,CAAC,EACrC,OAAO,EACP,wBAAwB,EACxB,WAAW,EACX,WAAW,EACX,WAAW,EACX,OAAO,EACP,WAAW,EACX,OAAO,EACP,aAAa,GACd,EAAE,2BAA2B,2CAe7B"}

package/dist/checkout-components/payment-link-landing-page.js

@@ -0,0 +1,173 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { formatMessage } from "@voyant-travel/i18n";
+import { Button } from "@voyant-travel/ui/components/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@voyant-travel/ui/components/tabs";
+import { cn } from "@voyant-travel/ui/lib/utils";
+import { Building2, CheckCircle2, CircleAlert, Copy, CreditCard, ExternalLink, Loader2, } from "lucide-react";
+import { useState } from "react";
+import { useCheckoutUiI18nOrDefault, useCheckoutUiMessagesOrDefault, } from "../checkout-i18n/provider.js";
+export function PaymentLinkLandingPage({ session, bankTransferInstructions, brandHeader, brandFooter, onPayByCard, onRetry, description, summary, suppressNotes, }) {
+    return (_jsxs("div", { className: "mx-auto flex min-h-screen w-full max-w-2xl flex-col gap-6 px-4 py-8", children: [brandHeader, _jsx(Header, { session: session, description: description, suppressNotes: suppressNotes }), summary ? _jsx("div", { children: summary }) : null, _jsx(Body, { session: session, bankTransferInstructions: bankTransferInstructions, onPayByCard: onPayByCard, onRetry: onRetry }), brandFooter] }));
+}
+// ─────────────────────────────────────────────────────────────────────────────
+function Header({ session, description, suppressNotes, }) {
+    const i18n = useCheckoutUiI18nOrDefault();
+    const messages = i18n.messages.paymentLinkLandingPage;
+    return (_jsxs("header", { className: "flex flex-col gap-2 border-b pb-4", children: [_jsx("h1", { className: "font-semibold text-2xl", children: description ?? defaultDescription(session, messages) }), !suppressNotes && session.notes ? (_jsx("p", { className: "whitespace-pre-line text-muted-foreground text-sm", children: session.notes })) : null, _jsxs("div", { className: "flex items-baseline gap-3", children: [_jsx("span", { className: "font-semibold text-3xl tabular-nums", children: i18n.formatCurrency(session.amountCents / 100, session.currency) }), session.expiresAt && session.status !== "paid" && (_jsx("span", { className: "text-muted-foreground text-sm", children: formatMessage(messages.expires, {
+                            date: i18n.formatDateTime(session.expiresAt, {
+                                day: "numeric",
+                                month: "short",
+                                hour: "2-digit",
+                                minute: "2-digit",
+                            }),
+                        }) }))] })] }));
+}
+function Body({ session, bankTransferInstructions, onPayByCard, onRetry, }) {
+    const messages = useCheckoutUiMessagesOrDefault().paymentLinkLandingPage;
+    // Terminal states — short-circuit body to a status panel.
+    if (session.status === "paid")
+        return _jsx(TerminalState, { status: "paid", reason: null });
+    if (session.status === "failed") {
+        return (_jsx(TerminalState, { status: "failed", reason: session.failureMessage ?? null, onRetry: onRetry }));
+    }
+    if (session.status === "expired")
+        return _jsx(TerminalState, { status: "expired", reason: null });
+    if (session.status === "cancelled")
+        return _jsx(TerminalState, { status: "cancelled", reason: null });
+    if (session.status === "processing" || session.status === "authorized") {
+        return _jsx(ProcessingState, {});
+    }
+    const cardAvailable = Boolean(session.redirectUrl) ||
+        Boolean(session.provider) ||
+        session.status === "requires_redirect";
+    const bankAvailable = Boolean(bankTransferInstructions);
+    // No method available — soft fallback (rare; signals a misconfigured
+    // session that has neither a redirect URL nor a bank-transfer block).
+    if (!cardAvailable && !bankAvailable) {
+        return (_jsxs("div", { className: "rounded-xl border border-amber-500/40 bg-amber-500/5 p-5 text-sm", children: [_jsx("p", { className: "font-medium", children: messages.noMethods.title }), _jsx("p", { className: "mt-2 text-muted-foreground", children: messages.noMethods.body })] }));
+    }
+    // Single method — render inline without tabs.
+    if (cardAvailable && !bankAvailable) {
+        return _jsx(CardPanel, { session: session, onPayByCard: onPayByCard });
+    }
+    if (bankAvailable && !cardAvailable && bankTransferInstructions) {
+        return _jsx(BankTransferPanel, { session: session, instructions: bankTransferInstructions });
+    }
+    // Both methods — tab strip.
+    return (_jsxs(Tabs, { defaultValue: "card", className: "w-full", children: [_jsxs(TabsList, { className: "grid w-full grid-cols-2", children: [_jsxs(TabsTrigger, { value: "card", children: [_jsx(CreditCard, { className: "mr-2 h-4 w-4" }), messages.cardTab] }), _jsxs(TabsTrigger, { value: "bank", children: [_jsx(Building2, { className: "mr-2 h-4 w-4" }), messages.bankTab] })] }), _jsx(TabsContent, { value: "card", className: "mt-4", children: _jsx(CardPanel, { session: session, onPayByCard: onPayByCard }) }), _jsx(TabsContent, { value: "bank", className: "mt-4", children: bankTransferInstructions && (_jsx(BankTransferPanel, { session: session, instructions: bankTransferInstructions })) })] }));
+}
+function CardPanel({ session, onPayByCard, }) {
+    const i18n = useCheckoutUiI18nOrDefault();
+    const messages = i18n.messages.paymentLinkLandingPage;
+    const [starting, setStarting] = useState(false);
+    const [error, setError] = useState(null);
+    const handleClick = async () => {
+        if (onPayByCard) {
+            onPayByCard();
+            return;
+        }
+        if (session.redirectUrl) {
+            window.location.href = session.redirectUrl;
+            return;
+        }
+        // Lazy-start the configured processor. The template exposes a public
+        // endpoint that calls e.g. `netopia.startPaymentSession` on demand and
+        // returns the redirect URL.
+        setStarting(true);
+        setError(null);
+        try {
+            const res = await fetch(`/api/v1/public/payment-link/${session.id}/start-card`, {
+                method: "POST",
+                headers: { Accept: "application/json" },
+            });
+            const body = (await res.json());
+            if (!res.ok || !body.data?.redirectUrl) {
+                throw new Error(body.error ?? messages.card.startFailed);
+            }
+            window.location.href = body.data.redirectUrl;
+        }
+        catch (err) {
+            setError(err.message);
+            setStarting(false);
+        }
+    };
+    return (_jsxs("div", { className: "rounded-xl border bg-card p-5 shadow-sm", children: [_jsx("p", { className: "mb-4 text-muted-foreground text-sm", children: messages.card.description }), _jsxs(Button, { className: "w-full", disabled: starting, onClick: handleClick, children: [starting && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), formatMessage(messages.card.payAmount, {
+                        amount: i18n.formatCurrency(session.amountCents / 100, session.currency),
+                    }), !starting && _jsx(ExternalLink, { className: "ml-2 h-4 w-4" })] }), error && (_jsx("p", { className: "mt-3 text-destructive text-xs", children: formatMessage(messages.card.errorAdvice, { message: error }) }))] }));
+}
+function BankTransferPanel({ session, instructions, }) {
+    const i18n = useCheckoutUiI18nOrDefault();
+    const messages = i18n.messages.paymentLinkLandingPage;
+    const reference = instructions.reference ?? session.externalReference ?? session.clientReference ?? session.id;
+    return (_jsxs("div", { className: "rounded-xl border bg-card p-5 shadow-sm", children: [_jsx("p", { className: "mb-4 text-muted-foreground text-sm", children: formatMessage(messages.bank.instructions, {
+                    amount: i18n.formatCurrency(session.amountCents / 100, session.currency),
+                }) }), _jsxs("dl", { className: "grid grid-cols-1 gap-2 text-sm", children: [_jsx(Row, { label: messages.bank.beneficiary, children: instructions.beneficiaryName }), _jsx(Row, { label: messages.bank.iban, copyValue: instructions.iban, children: _jsx("span", { className: "font-mono", children: instructions.iban }) }), instructions.bic && (_jsx(Row, { label: messages.bank.bicSwift, copyValue: instructions.bic, children: _jsx("span", { className: "font-mono", children: instructions.bic }) })), instructions.bankName && _jsx(Row, { label: messages.bank.bank, children: instructions.bankName }), _jsx(Row, { label: messages.bank.reference, copyValue: reference, children: _jsx("span", { className: "font-mono", children: reference }) })] }), instructions.notes && (_jsx("p", { className: "mt-4 text-muted-foreground text-xs", children: instructions.notes }))] }));
+}
+function Row({ label, children, copyValue, }) {
+    return (_jsxs("div", { className: "flex items-baseline justify-between gap-3 border-b py-1.5 last:border-b-0", children: [_jsx("dt", { className: "text-muted-foreground text-xs uppercase tracking-wider", children: label }), _jsxs("dd", { className: "flex items-center gap-2", children: [children, copyValue && _jsx(CopyButton, { value: copyValue })] })] }));
+}
+function CopyButton({ value }) {
+    const messages = useCheckoutUiMessagesOrDefault().paymentLinkLandingPage;
+    const [copied, setCopied] = useState(false);
+    return (_jsx("button", { type: "button", "aria-label": copied ? messages.copy.copied : formatMessage(messages.copy.copyValue, { value }), className: "text-muted-foreground transition-colors hover:text-foreground", onClick: async () => {
+            try {
+                await navigator.clipboard?.writeText(value);
+                setCopied(true);
+                setTimeout(() => setCopied(false), 1500);
+            }
+            catch {
+                // Older browsers without clipboard API — no-op; the value is still
+                // visible and selectable for manual copy.
+            }
+        }, children: copied ? (_jsx(CheckCircle2, { className: "h-3.5 w-3.5 text-emerald-600" })) : (_jsx(Copy, { className: "h-3.5 w-3.5" })) }));
+}
+function TerminalState({ status, reason, onRetry, }) {
+    const messages = useCheckoutUiMessagesOrDefault().paymentLinkLandingPage;
+    const [retrying, setRetrying] = useState(false);
+    const [retryError, setRetryError] = useState(null);
+    const cfg = {
+        paid: {
+            icon: _jsx(CheckCircle2, { className: "h-10 w-10 text-emerald-600" }),
+            title: messages.terminal.paid.title,
+            body: messages.terminal.paid.body,
+            tone: "border-emerald-500/40 bg-emerald-500/5",
+        },
+        failed: {
+            icon: _jsx(CircleAlert, { className: "h-10 w-10 text-destructive" }),
+            title: messages.terminal.failed.title,
+            body: reason ?? messages.terminal.failed.body,
+            tone: "border-destructive/40 bg-destructive/5",
+        },
+        expired: {
+            icon: _jsx(CircleAlert, { className: "h-10 w-10 text-amber-600" }),
+            title: messages.terminal.expired.title,
+            body: messages.terminal.expired.body,
+            tone: "border-amber-500/40 bg-amber-500/5",
+        },
+        cancelled: {
+            icon: _jsx(CircleAlert, { className: "h-10 w-10 text-muted-foreground" }),
+            title: messages.terminal.cancelled.title,
+            body: messages.terminal.cancelled.body,
+            tone: "border-border bg-muted/20",
+        },
+    }[status];
+    return (_jsxs("div", { className: cn("flex flex-col items-center gap-3 rounded-xl border p-8 text-center", cfg.tone), children: [cfg.icon, _jsx("h2", { className: "font-semibold text-lg", children: cfg.title }), _jsx("p", { className: "max-w-md text-muted-foreground text-sm", children: cfg.body }), status === "failed" && onRetry && (_jsxs(_Fragment, { children: [_jsxs(Button, { className: "mt-2", disabled: retrying, onClick: async () => {
+                            setRetrying(true);
+                            setRetryError(null);
+                            try {
+                                await onRetry();
+                            }
+                            catch (err) {
+                                setRetryError(err.message);
+                                setRetrying(false);
+                            }
+                        }, children: [retrying && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), messages.terminal.tryAgain] }), retryError && _jsx("p", { className: "text-destructive text-xs", children: retryError })] }))] }));
+}
+function ProcessingState() {
+    const messages = useCheckoutUiMessagesOrDefault().paymentLinkLandingPage;
+    return (_jsxs("div", { className: "flex flex-col items-center gap-3 rounded-xl border bg-card p-8 text-center", children: [_jsx(Loader2, { className: "h-10 w-10 animate-spin text-muted-foreground" }), _jsx("h2", { className: "font-semibold text-lg", children: messages.processing.title }), _jsx("p", { className: "max-w-md text-muted-foreground text-sm", children: messages.processing.body })] }));
+}
+function defaultDescription(session, messages) {
+    return messages.descriptions[session.targetType] ?? messages.descriptions.default;
+}

package/dist/checkout-components/payment-step.d.ts

@@ -0,0 +1,42 @@
+import { type ReactNode } from "react";
+import type { PaymentStepExtraOption as CheckoutPaymentStepExtraOption, PaymentChoice, PaymentStepCapabilities, SavedPaymentAccount } from "../checkout-types.js";
+/**
+ * UI-side extension of the `PaymentStepExtraOption` from finance-react —
+ * adds an optional `icon` slot since the icon is a presentation concern.
+ */
+export interface PaymentStepExtraOption extends CheckoutPaymentStepExtraOption {
+    icon?: ReactNode;
+}
+export interface PaymentStepProps {
+    value: PaymentChoice | null;
+    onChange: (next: PaymentChoice | null) => void;
+    /**
+     * What the active processor / template actually offers. Each `false`
+     * value hides its section. Honest — no invented capability strings.
+     */
+    capabilities: PaymentStepCapabilities;
+    /** Saved methods on file — surfaced when `capabilities.chargeSavedCard` is true. */
+    savedMethods?: SavedPaymentAccount[];
+    loadingSavedMethods?: boolean;
+    /**
+     * Vertical-specific always-available options. Rendered after the
+     * capability-gated sections, before the universal Hold option.
+     */
+    extraOptions?: ReadonlyArray<PaymentStepExtraOption>;
+    /** Hide the universal "Hold — pay later" option (some verticals don't support it). */
+    hideHoldOption?: boolean;
+}
+/**
+ * Admin-side payment picker. Renders the sections the parent has wired:
+ *
+ *   - Saved cards on file        ← capabilities.chargeSavedCard
+ *   - Charge a new card now      ← capabilities.newCard
+ *   - Vertical-specific extras   ← always rendered (e.g. "Issue on credit")
+ *   - Hold — generate payment link  ← always rendered (unless hideHoldOption)
+ *
+ * The customer's card-vs-bank-transfer decision happens on the public
+ * `/pay/:sessionId` landing page, not here. That keeps the admin UI to
+ * three real choices: charge now, vertical action, or hold + share link.
+ */
+export declare function PaymentStep({ value, onChange, capabilities, savedMethods, loadingSavedMethods, extraOptions, hideHoldOption, }: PaymentStepProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=payment-step.d.ts.map

package/dist/checkout-components/payment-step.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"payment-step.d.ts","sourceRoot":"","sources":["../../src/checkout-components/payment-step.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAA;AAEhD,OAAO,KAAK,EACV,sBAAsB,IAAI,8BAA8B,EACxD,aAAa,EACb,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,sBAAsB,CAAA;AAE7B;;;GAGG;AACH,MAAM,WAAW,sBAAuB,SAAQ,8BAA8B;IAC5E,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,aAAa,GAAG,IAAI,CAAA;IAC3B,QAAQ,EAAE,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI,KAAK,IAAI,CAAA;IAE9C;;;OAGG;IACH,YAAY,EAAE,uBAAuB,CAAA;IAErC,oFAAoF;IACpF,YAAY,CAAC,EAAE,mBAAmB,EAAE,CAAA;IACpC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAE7B;;;OAGG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC,sBAAsB,CAAC,CAAA;IAEpD,sFAAsF;IACtF,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,mBAAmB,EACnB,YAAY,EACZ,cAAc,GACf,EAAE,gBAAgB,2CA2BlB"}

package/dist/checkout-components/payment-step.js

@@ -0,0 +1,113 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { formatMessage } from "@voyant-travel/i18n";
+import { Input } from "@voyant-travel/ui/components/input";
+import { Label } from "@voyant-travel/ui/components/label";
+import { RadioGroup, RadioGroupItem } from "@voyant-travel/ui/components/radio-group";
+import { cn } from "@voyant-travel/ui/lib/utils";
+import { Banknote, CreditCard, Wallet } from "lucide-react";
+import { useState } from "react";
+import { useCheckoutUiMessagesOrDefault } from "../checkout-i18n/provider.js";
+/**
+ * Admin-side payment picker. Renders the sections the parent has wired:
+ *
+ *   - Saved cards on file        ← capabilities.chargeSavedCard
+ *   - Charge a new card now      ← capabilities.newCard
+ *   - Vertical-specific extras   ← always rendered (e.g. "Issue on credit")
+ *   - Hold — generate payment link  ← always rendered (unless hideHoldOption)
+ *
+ * The customer's card-vs-bank-transfer decision happens on the public
+ * `/pay/:sessionId` landing page, not here. That keeps the admin UI to
+ * three real choices: charge now, vertical action, or hold + share link.
+ */
+export function PaymentStep({ value, onChange, capabilities, savedMethods, loadingSavedMethods, extraOptions, hideHoldOption, }) {
+    const messages = useCheckoutUiMessagesOrDefault().paymentStep;
+    return (_jsxs("div", { className: "flex flex-col gap-5", children: [_jsxs("div", { children: [_jsx("h2", { className: "font-semibold text-base", children: messages.title }), _jsx("p", { className: "text-muted-foreground text-sm", children: messages.description })] }), capabilities.chargeSavedCard && (_jsx(SavedMethodsSection, { loading: loadingSavedMethods, methods: savedMethods ?? [], selectedId: value?.type === "saved_method" ? value.method.id : null, onSelect: (method) => onChange({ type: "saved_method", method }) })), _jsx(AltMethodsSection, { value: value, onChange: onChange, showNewCard: !!capabilities.newCard, extraOptions: extraOptions ?? [], hideHoldOption: hideHoldOption })] }));
+}
+// ─────────────────────────────────────────────────────────────────────────────
+function SavedMethodsSection({ loading, methods, selectedId, onSelect, }) {
+    const messages = useCheckoutUiMessagesOrDefault().paymentStep.savedMethods;
+    return (_jsxs("section", { className: "rounded-xl border bg-card p-5 shadow-sm", children: [_jsxs("header", { className: "mb-3 flex items-center justify-between", children: [_jsx("h3", { className: "font-medium text-sm", children: messages.title }), methods.length > 0 && (_jsx("span", { className: "text-muted-foreground text-xs", children: formatMessage(messages.countOnFile, { count: methods.length }) }))] }), loading ? (_jsx("div", { className: "h-16 animate-pulse rounded-md bg-muted/40" })) : methods.length === 0 ? (_jsx("div", { className: "rounded-md border border-dashed p-4 text-center text-muted-foreground text-xs", children: messages.empty })) : (_jsx("ul", { className: "flex flex-col gap-2", children: methods.map((m) => {
+                    const selected = selectedId === m.id;
+                    return (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => onSelect(m), className: cn("flex w-full items-center gap-3 rounded-md border bg-background p-3 text-left transition-colors", selected
+                                ? "border-primary ring-2 ring-primary/20"
+                                : "hover:border-primary/40 hover:bg-accent/30"), children: [_jsx(BrandTile, { brand: m.brand }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col leading-tight", children: [_jsxs("span", { className: "font-medium text-sm", children: [m.label, m.last4 && (_jsxs(_Fragment, { children: [" ···· ", _jsx("span", { className: "font-mono", children: m.last4 })] })), m.isDefault && (_jsx("span", { className: "ml-2 rounded-full bg-primary/10 px-1.5 py-0.5 font-medium text-[9px] text-primary uppercase tracking-wider", children: messages.defaultBadge }))] }), m.expiryMonth && m.expiryYear && (_jsx("span", { className: "text-muted-foreground text-xs", children: formatMessage(messages.expires, {
+                                                month: String(m.expiryMonth).padStart(2, "0"),
+                                                year: m.expiryYear,
+                                            }) }))] }), selected && (_jsx("span", { className: "font-medium text-primary text-xs", children: messages.selected }))] }) }, m.id));
+                }) }))] }));
+}
+function AltMethodsSection({ value, onChange, showNewCard, extraOptions, hideHoldOption, }) {
+    const messages = useCheckoutUiMessagesOrDefault().paymentStep.otherOptions;
+    const [newCardName, setNewCardName] = useState("");
+    const [newCardNumber, setNewCardNumber] = useState("");
+    const [newCardExp, setNewCardExp] = useState("");
+    const activeId = (() => {
+        if (value == null)
+            return null;
+        if (value.type === "saved_method")
+            return null;
+        if (value.type === "new_card")
+            return "new_card";
+        if (value.type === "hold")
+            return "hold";
+        if (value.type === "extra")
+            return `extra:${value.optionId}`;
+        return null;
+    })();
+    const setAlt = (id) => {
+        if (id === "hold") {
+            onChange({ type: "hold" });
+        }
+        else if (id === "new_card") {
+            onChange({
+                type: "new_card",
+                cardToken: tokenizeNewCard(newCardNumber),
+                ...(newCardName ? { cardholderName: newCardName } : {}),
+                ...(newCardExp ? { expiry: newCardExp } : {}),
+            });
+        }
+        else if (id.startsWith("extra:")) {
+            onChange({ type: "extra", optionId: id.slice("extra:".length) });
+        }
+    };
+    return (_jsxs("section", { className: "rounded-xl border bg-card p-5 shadow-sm", children: [_jsx("header", { className: "mb-3 flex items-center justify-between", children: _jsx("h3", { className: "font-medium text-sm", children: messages.title }) }), _jsxs(RadioGroup, { value: activeId ?? "__none", onValueChange: (v) => {
+                    if (!v)
+                        return;
+                    if (v === "new_card" || v === "hold" || v.startsWith("extra:")) {
+                        setAlt(v);
+                    }
+                }, className: "flex flex-col gap-2", children: [showNewCard && (_jsx(AltRow, { id: "new_card", icon: _jsx(CreditCard, { className: "h-4 w-4 text-muted-foreground" }), title: messages.newCard.title, body: messages.newCard.body, active: activeId === "new_card", children: activeId === "new_card" && (_jsxs("div", { className: "mt-3 grid grid-cols-1 gap-3 md:grid-cols-3", children: [_jsx(Field, { label: messages.newCard.cardholderName, children: _jsx(Input, { value: newCardName, onChange: (e) => {
+                                            setNewCardName(e.target.value);
+                                            if (value?.type === "new_card") {
+                                                onChange({ ...value, cardholderName: e.target.value });
+                                            }
+                                        } }) }), _jsx(Field, { label: messages.newCard.cardNumber, children: _jsx(Input, { inputMode: "numeric", placeholder: messages.newCard.cardNumberPlaceholder, value: newCardNumber, onChange: (e) => {
+                                            setNewCardNumber(e.target.value);
+                                            if (value?.type === "new_card") {
+                                                onChange({ ...value, cardToken: tokenizeNewCard(e.target.value) });
+                                            }
+                                        } }) }), _jsx(Field, { label: messages.newCard.expiry, children: _jsx(Input, { value: newCardExp, onChange: (e) => {
+                                            setNewCardExp(e.target.value);
+                                            if (value?.type === "new_card") {
+                                                onChange({ ...value, expiry: e.target.value });
+                                            }
+                                        }, placeholder: messages.newCard.expiryPlaceholder }) })] })) })), extraOptions.map((opt) => (_jsx(AltRow, { id: `extra:${opt.id}`, icon: opt.icon, title: opt.label, body: opt.description, active: activeId === `extra:${opt.id}` }, opt.id))), !hideHoldOption && (_jsx(AltRow, { id: "hold", icon: _jsx(Wallet, { className: "h-4 w-4 text-muted-foreground" }), title: messages.hold.title, body: messages.hold.body, active: activeId === "hold" }))] }), showNewCard && (_jsxs("p", { className: "mt-4 flex items-start gap-1.5 text-[11px] text-muted-foreground", children: [_jsx(Banknote, { className: "mt-0.5 h-3 w-3" }), messages.cardSecurityNote] }))] }));
+}
+function AltRow({ id, icon, title, body, active, children, }) {
+    const inputId = `payment-step-${id}`;
+    return (_jsxs("div", { className: cn("flex items-start gap-3 rounded-md border bg-background p-3 transition-colors", active ? "border-primary bg-primary/5" : "hover:border-primary/40"), children: [_jsx(RadioGroupItem, { id: inputId, value: id, className: "mt-0.5" }), _jsxs("label", { htmlFor: inputId, className: "flex min-w-0 flex-1 cursor-pointer flex-col gap-1", children: [_jsxs("span", { className: "flex items-center gap-2 font-medium text-sm", children: [icon, title] }), _jsx("span", { className: "text-muted-foreground text-xs", children: body }), children] })] }));
+}
+function Field({ label, children }) {
+    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { className: "text-[11px] uppercase tracking-wider text-muted-foreground", children: label }), children] }));
+}
+function BrandTile({ brand }) {
+    const messages = useCheckoutUiMessagesOrDefault().paymentStep.otherOptions;
+    return (_jsx("span", { className: "flex h-9 w-12 shrink-0 items-center justify-center rounded-md border bg-muted/30 font-mono text-[10px] uppercase tracking-wider", children: (brand ?? messages.brandFallback).slice(0, 4) }));
+}
+function tokenizeNewCard(number) {
+    // Demo "tokenization" — in production the processor's hosted form
+    // returns an opaque token; we never see the PAN here.
+    const last4 = number.replace(/\D/g, "").slice(-4) || "0000";
+    return `tok_demo_new_${last4}`;
+}

package/dist/checkout-hooks/index.d.ts

@@ -0,0 +1,5 @@
+export { type CheckoutPaymentLinkConfig, useCheckoutPaymentLinkConfig, } from "./use-checkout-payment-link-config.js";
+export { type CollectPaymentInput, type UseCollectPaymentOptions, useCollectPayment, } from "./use-collect-payment.js";
+export { useInitiateCheckoutCollection } from "./use-initiate-checkout-collection.js";
+export { usePreviewCheckoutCollection } from "./use-preview-checkout-collection.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/checkout-hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/checkout-hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,yBAAyB,EAC9B,4BAA4B,GAC7B,MAAM,uCAAuC,CAAA;AAC9C,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,wBAAwB,EAC7B,iBAAiB,GAClB,MAAM,0BAA0B,CAAA;AACjC,OAAO,EAAE,6BAA6B,EAAE,MAAM,uCAAuC,CAAA;AACrF,OAAO,EAAE,4BAA4B,EAAE,MAAM,sCAAsC,CAAA"}

package/dist/checkout-hooks/index.js

@@ -0,0 +1,4 @@
+export { useCheckoutPaymentLinkConfig, } from "./use-checkout-payment-link-config.js";
+export { useCollectPayment, } from "./use-collect-payment.js";
+export { useInitiateCheckoutCollection } from "./use-initiate-checkout-collection.js";
+export { usePreviewCheckoutCollection } from "./use-preview-checkout-collection.js";

package/dist/checkout-hooks/use-checkout-payment-link-config.d.ts

@@ -0,0 +1,20 @@
+export interface CheckoutPaymentLinkConfig {
+    publicCheckoutBaseUrl?: string | null;
+    bankTransfer: {
+        provider?: string | null;
+        beneficiary: string;
+        iban: string;
+        bankName?: string | null;
+        currency?: string | null;
+        notes?: string | null;
+    } | null;
+}
+/**
+ * Fetch the template-side bank-transfer block for the public payment-link
+ * landing page. Templates expose this at
+ * `/v1/public/payment-link-config` (added to `publicPaths`); when the
+ * endpoint is unavailable or unconfigured, callers fall back to hiding
+ * the bank-transfer tab.
+ */
+export declare function useCheckoutPaymentLinkConfig(): import("@tanstack/react-query").UseQueryResult<CheckoutPaymentLinkConfig, Error>;
+//# sourceMappingURL=use-checkout-payment-link-config.d.ts.map

package/dist/checkout-hooks/use-checkout-payment-link-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-checkout-payment-link-config.d.ts","sourceRoot":"","sources":["../../src/checkout-hooks/use-checkout-payment-link-config.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,yBAAyB;IACxC,qBAAqB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrC,YAAY,EAAE;QACZ,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;QACxB,WAAW,EAAE,MAAM,CAAA;QACnB,IAAI,EAAE,MAAM,CAAA;QACZ,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;QACxB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;QACxB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;KACtB,GAAG,IAAI,CAAA;CACT;AAMD;;;;;;GAMG;AACH,wBAAgB,4BAA4B,qFAe3C"}

package/dist/checkout-hooks/use-checkout-payment-link-config.js

@@ -0,0 +1,26 @@
+"use client";
+import { useQuery } from "@tanstack/react-query";
+import { useVoyantFinanceContext } from "../provider.js";
+/**
+ * Fetch the template-side bank-transfer block for the public payment-link
+ * landing page. Templates expose this at
+ * `/v1/public/payment-link-config` (added to `publicPaths`); when the
+ * endpoint is unavailable or unconfigured, callers fall back to hiding
+ * the bank-transfer tab.
+ */
+export function useCheckoutPaymentLinkConfig() {
+    const { baseUrl, fetcher } = useVoyantFinanceContext();
+    return useQuery({
+        queryKey: ["checkout-payment-link-config"],
+        queryFn: async () => {
+            const response = await fetcher(`${baseUrl}/v1/public/payment-link-config`, {
+                headers: { Accept: "application/json" },
+            });
+            if (!response.ok)
+                throw new Error(`config fetch failed: ${response.status}`);
+            const body = (await response.json());
+            return body.data;
+        },
+        staleTime: 5 * 60 * 1000,
+    });
+}