@voyantjs/flights-ui 0.20.0

package/dist/components/flight-booking-ledger.d.ts

@@ -0,0 +1,53 @@
+import type { FlightOffer, Money, PassengerCounts } from "@voyantjs/flights/contract/types";
+/**
+ * Per-leg selection passed through the booking journey. Two single-itinerary
+ * offers when round-trip; one when one-way. The shell synthesizes a combined
+ * offer from these at submit time.
+ */
+export interface FlightItinerarySelection {
+    outbound: FlightOffer;
+    return?: FlightOffer;
+}
+/**
+ * Optional ancillary line items rendered nested under the relevant leg.
+ * Phases 2/3 wire bag/seat picks here; for Phase 1 it's just a placeholder
+ * shape so the ledger doesn't need to change later.
+ */
+export interface LedgerLineItem {
+    label: string;
+    amount?: Money;
+    /** Free-text right-side value (e.g. "Included") when no money applies. */
+    meta?: string;
+}
+export interface FlightBookingLedgerProps {
+    selection: FlightItinerarySelection;
+    passengers: PassengerCounts;
+    carrierName?: (iataCode: string) => string | undefined;
+    airportName?: (iataCode: string) => string | undefined;
+    /** Per-leg ancillary line items (bags / seats / extras). */
+    outboundExtras?: LedgerLineItem[];
+    returnExtras?: LedgerLineItem[];
+    /** Sticky CTA at the bottom — typically "Continue" or "Confirm". */
+    cta?: {
+        label: string;
+        onClick: () => void;
+        disabled?: boolean;
+        loading?: boolean;
+    };
+    /** Per-leg edit handlers — open the search results back up. */
+    onEditOutbound?: () => void;
+    onEditReturn?: () => void;
+    /** Step status hints — checks shown next to each section name. */
+    completedSections?: ReadonlySet<LedgerSection>;
+    className?: string;
+}
+export type LedgerSection = "flights" | "passengers" | "bags" | "seats" | "services" | "documents" | "billing" | "payment";
+/**
+ * Sticky right-rail price ledger. Mirrors the running total + per-leg
+ * breakdown that real airline checkouts use (Wizz/Ryanair/Lufthansa). One
+ * source of truth for the total — the shell passes ancillary picks down via
+ * `outboundExtras`/`returnExtras`, so the ledger doesn't need to know how
+ * they were collected.
+ */
+export declare function FlightBookingLedger({ selection, passengers, carrierName, airportName, outboundExtras, returnExtras, cta, onEditOutbound, onEditReturn, completedSections, className, }: FlightBookingLedgerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=flight-booking-ledger.d.ts.map

package/dist/components/flight-booking-ledger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flight-booking-ledger.d.ts","sourceRoot":"","sources":["../../src/components/flight-booking-ledger.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAA;AAO3F;;;;GAIG;AACH,MAAM,WAAW,wBAAwB;IACvC,QAAQ,EAAE,WAAW,CAAA;IACrB,MAAM,CAAC,EAAE,WAAW,CAAA;CACrB;AAED;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,wBAAwB;IACvC,SAAS,EAAE,wBAAwB,CAAA;IACnC,UAAU,EAAE,eAAe,CAAA;IAC3B,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAA;IACtD,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAA;IACtD,4DAA4D;IAC5D,cAAc,CAAC,EAAE,cAAc,EAAE,CAAA;IACjC,YAAY,CAAC,EAAE,cAAc,EAAE,CAAA;IAC/B,oEAAoE;IACpE,GAAG,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE,CAAA;IACnF,+DAA+D;IAC/D,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAC3B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,kEAAkE;IAClE,iBAAiB,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,CAAA;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,MAAM,aAAa,GACrB,SAAS,GACT,YAAY,GACZ,MAAM,GACN,OAAO,GACP,UAAU,GACV,WAAW,GACX,SAAS,GACT,SAAS,CAAA;AAEb;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,UAAU,EACV,WAAW,EACX,WAAW,EACX,cAAc,EACd,YAAY,EACZ,GAAG,EACH,cAAc,EACd,YAAY,EACZ,iBAAiB,EACjB,SAAS,GACV,EAAE,wBAAwB,2CAuD1B"}

package/dist/components/flight-booking-ledger.js

@@ -0,0 +1,94 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from "@voyantjs/ui/components/button";
+import { cn } from "@voyantjs/ui/lib/utils";
+import { Check, Pencil, Plane, Users } from "lucide-react";
+import { AirlineLogo } from "./airline-logo";
+/**
+ * Sticky right-rail price ledger. Mirrors the running total + per-leg
+ * breakdown that real airline checkouts use (Wizz/Ryanair/Lufthansa). One
+ * source of truth for the total — the shell passes ancillary picks down via
+ * `outboundExtras`/`returnExtras`, so the ledger doesn't need to know how
+ * they were collected.
+ */
+export function FlightBookingLedger({ selection, passengers, carrierName, airportName, outboundExtras, returnExtras, cta, onEditOutbound, onEditReturn, completedSections, className, }) {
+    const total = computeTotal(selection, outboundExtras, returnExtras);
+    const paxTotal = (passengers.adults ?? 0) + (passengers.children ?? 0) + (passengers.infants ?? 0);
+    return (_jsxs("aside", { className: cn("flex w-full max-w-sm flex-col gap-4 rounded-xl border bg-card p-4 shadow-sm", className), children: [_jsx(LegBlock, { label: selection.return ? "Outbound" : "Flight", offer: selection.outbound, carrierName: carrierName, airportName: airportName, extras: outboundExtras, onEdit: onEditOutbound, complete: completedSections?.has("flights") }), selection.return && (_jsx(LegBlock, { label: "Return", offer: selection.return, carrierName: carrierName, airportName: airportName, extras: returnExtras, onEdit: onEditReturn, complete: completedSections?.has("flights") })), _jsx(SectionRow, { icon: _jsx(Users, { className: "h-3.5 w-3.5" }), label: "Passengers", right: `${paxTotal} pax`, complete: completedSections?.has("passengers") }), _jsx(PlaceholderSections, { completed: completedSections }), _jsxs("div", { className: "mt-2 flex items-center justify-between border-t pt-3", children: [_jsx("span", { className: "font-medium text-sm", children: "Total" }), _jsx("span", { className: "font-semibold text-lg tabular-nums", children: formatMoney(total.amount, total.currency) })] }), cta && (_jsx(Button, { className: "w-full", onClick: cta.onClick, disabled: cta.disabled || cta.loading, children: cta.loading ? "Working…" : cta.label }))] }));
+}
+// ─────────────────────────────────────────────────────────────────────────────
+function LegBlock({ label, offer, carrierName, airportName, extras, onEdit, complete, }) {
+    const itin = offer.itineraries[0];
+    if (!itin)
+        return null;
+    const segs = itin.segments;
+    const first = segs[0];
+    const last = segs[segs.length - 1];
+    if (!first || !last)
+        return null;
+    const carriers = Array.from(new Set(segs.map((s) => s.carrierCode)));
+    const stops = segs.length - 1;
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [complete ? (_jsx(Check, { className: "h-3.5 w-3.5 text-emerald-600" })) : (_jsx(Plane, { className: "h-3.5 w-3.5 text-muted-foreground" })), _jsx("span", { className: "font-medium text-[11px] uppercase tracking-wider text-muted-foreground", children: label })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-semibold text-sm tabular-nums", children: formatMoney(offer.totalPrice.amount, offer.totalPrice.currency) }), onEdit && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-6 px-1.5 text-muted-foreground", onClick: onEdit, children: _jsx(Pencil, { className: "h-3 w-3" }) }))] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex shrink-0 items-center -space-x-1", children: carriers.map((code) => (_jsx(AirlineLogo, { iataCode: code, name: carrierName?.(code), size: 18 }, code))) }), _jsxs("div", { className: "flex min-w-0 flex-col leading-tight", children: [_jsxs("span", { className: "truncate font-medium text-sm", children: [airportName?.(first.departure.iataCode) ?? first.departure.iataCode, " \u2192", " ", airportName?.(last.arrival.iataCode) ?? last.arrival.iataCode] }), _jsxs("span", { className: "text-[11px] text-muted-foreground", children: [formatDate(first.departure.at), " \u00B7 ", formatTime(first.departure.at), " \u2013", " ", formatTime(last.arrival.at), " \u00B7", " ", stops === 0 ? "Nonstop" : `${stops} stop${stops > 1 ? "s" : ""}`] })] })] }), extras && extras.length > 0 && (_jsx("ul", { className: "flex flex-col gap-1 border-t pt-2", children: extras.map((x, i) => (_jsxs("li", { className: "flex items-center justify-between text-muted-foreground text-xs", children: [_jsx("span", { children: x.label }), _jsx("span", { className: "tabular-nums", children: x.amount ? formatMoney(x.amount.amount, x.amount.currency) : (x.meta ?? "") })] }, i))) }))] }));
+}
+function SectionRow({ icon, label, right, complete, }) {
+    return (_jsxs("div", { className: "flex items-center justify-between border-t pt-3", children: [_jsxs("span", { className: "flex items-center gap-1.5 font-medium text-[11px] uppercase tracking-wider text-muted-foreground", children: [complete ? (_jsx(Check, { className: "h-3.5 w-3.5 text-emerald-600" })) : (_jsx("span", { className: "text-muted-foreground", children: icon })), label] }), right && _jsx("span", { className: "text-muted-foreground text-xs", children: right })] }));
+}
+function PlaceholderSections({ completed }) {
+    // Phase 1 only renders Passengers above; later phases will replace this with
+    // bags/seats/services/documents/billing rows. The shape stays consistent so
+    // the ledger doesn't need to change later.
+    if (!completed)
+        return null;
+    const items = [];
+    if (completed.has("billing"))
+        items.push({ id: "billing", label: "Billing" });
+    if (completed.has("payment"))
+        items.push({ id: "payment", label: "Payment" });
+    if (items.length === 0)
+        return null;
+    return (_jsx(_Fragment, { children: items.map((it) => (_jsx(SectionRow, { icon: _jsx("span", {}), label: it.label, complete: completed.has(it.id) }, it.id))) }));
+}
+// ── Helpers ──────────────────────────────────────────────────────────────────
+function computeTotal(selection, outboundExtras, returnExtras) {
+    const currency = selection.outbound.totalPrice.currency;
+    let amount = num(selection.outbound.totalPrice.amount);
+    if (selection.return)
+        amount += num(selection.return.totalPrice.amount);
+    for (const x of outboundExtras ?? [])
+        amount += num(x.amount?.amount);
+    for (const x of returnExtras ?? [])
+        amount += num(x.amount?.amount);
+    return { amount: amount.toFixed(2), currency };
+}
+function num(v) {
+    if (!v)
+        return 0;
+    const n = Number(v);
+    return Number.isFinite(n) ? n : 0;
+}
+function formatMoney(amount, currency) {
+    const n = Number(amount);
+    if (!Number.isFinite(n))
+        return `${amount} ${currency}`;
+    return new Intl.NumberFormat(undefined, {
+        style: "currency",
+        currency,
+        maximumFractionDigits: 0,
+    }).format(n);
+}
+function formatTime(iso) {
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime()))
+        return iso;
+    return new Intl.DateTimeFormat(undefined, { hour: "2-digit", minute: "2-digit" }).format(d);
+}
+function formatDate(iso) {
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime()))
+        return iso;
+    return new Intl.DateTimeFormat(undefined, {
+        weekday: "short",
+        day: "numeric",
+        month: "short",
+    }).format(d);
+}

package/dist/components/flight-booking-shell.d.ts

@@ -0,0 +1,92 @@
+import type { AncillaryCatalog, FlightBookRequest, FlightOrder, PassengerCounts } from "@voyantjs/flights/contract/types";
+import { type BillingValue } from "./flight-billing-step";
+import { type FlightItinerarySelection } from "./flight-booking-ledger";
+import { type FlightPassengerFormProps } from "./flight-passenger-form";
+import { type PaymentStepCapabilities, type SavedPaymentMethod } from "./flight-payment-step";
+import { type FlightSeatMapSlot } from "./flight-seats-step";
+/**
+ * Per-leg ancillary catalogs supplied by the parent (typically via
+ * `useFlightAncillaries(outbound)` + `useFlightAncillaries(return)`).
+ * The shell owns the user's picks and merges them into the book request.
+ */
+export interface FlightBookingAncillaries {
+    outboundCatalog: AncillaryCatalog | null;
+    returnCatalog?: AncillaryCatalog | null;
+    loading?: boolean;
+}
+/**
+ * Seat-map fetcher contract supplied by the parent. The shell calls
+ * `getSeatMap` lazily per segment id when the user opens "pick now" mode;
+ * the parent typically backs this with `useFlightSeatMap`.
+ */
+export interface FlightBookingSeatMaps {
+    /** Returns the slot for the given segment — typically wraps useFlightSeatMap. */
+    getSeatMap: (input: {
+        offerId: string;
+        segmentId: string;
+    }) => FlightSeatMapSlot;
+}
+/** Saved-payment-methods slot supplied by the parent (CRM-adjacent in production). */
+export interface FlightBookingSavedPaymentMethods {
+    methods: SavedPaymentMethod[];
+    loading?: boolean;
+}
+export interface FlightBookingShellProps {
+    /** Per-leg pick — outbound always present, return only on round-trips. */
+    selection: FlightItinerarySelection;
+    passengers: PassengerCounts;
+    onBook: (request: FlightBookRequest) => Promise<FlightOrder> | FlightOrder;
+    onBooked?: (order: FlightOrder) => void;
+    /** "Back to results" affordance. */
+    onCancel?: () => void;
+    /** Per-leg edit affordances on the ledger — typically navigate back to the search page. */
+    onEditOutbound?: () => void;
+    onEditReturn?: () => void;
+    carrierName?: (iataCode: string) => string | undefined;
+    airportName?: (iataCode: string) => string | undefined;
+    /** Per-leg ancillary catalogs. When omitted the bags + services steps render skeletons. */
+    ancillaries?: FlightBookingAncillaries;
+    /** Per-segment seat-map fetcher. When omitted the seats step still works (skip / auto). */
+    seatMaps?: FlightBookingSeatMaps;
+    /** Saved payment methods on file for the picked contact. */
+    savedPaymentMethods?: FlightBookingSavedPaymentMethods;
+    /**
+     * What the active processor + template offer for immediate-charge flows
+     * (`chargeSavedCard`, `newCard`). Hold (which generates the shareable
+     * payment link) and the agency-credit extra are always available.
+     *
+     * See `docs/architecture/payments-architecture.md` §Core Rule 7.
+     */
+    paymentCapabilities?: PaymentStepCapabilities;
+    /** True when the route requires travel documents (international etc.). */
+    documentsRequired?: boolean;
+    /**
+     * Optional render slot for a person picker on each passenger card.
+     * Forwarded to `FlightPassengerForm.renderPicker`.
+     */
+    renderPassengerPicker?: FlightPassengerFormProps["renderPicker"];
+    /**
+     * Render slot for a CRM person picker in the billing step. Receives an
+     * `apply` callback the parent invokes with the prefill payload.
+     */
+    renderBillingPersonPicker?: (apply: (prefill: Partial<BillingValue>) => void) => React.ReactNode;
+    /**
+     * Render slot for a CRM organization picker in the billing step (Companie tab).
+     */
+    renderBillingOrgPicker?: (apply: (prefill: Partial<BillingValue>) => void) => React.ReactNode;
+    /**
+     * Called when the user toggles "Save as default" + clicks Continue from
+     * billing. Parent may persist back to identity addresses / org.
+     */
+    onSaveBillingDefaults?: (value: BillingValue) => void;
+}
+/**
+ * Multi-step booking shell with a sticky right-rail price ledger and a top
+ * stepper. Steps: review → passengers → bags → services → contact+payment
+ * → confirm. The shell owns the per-leg `FlightItinerarySelection` plus
+ * ancillary picks (baggage / assistance / extras), and synthesizes a
+ * combined `FlightOffer` (with both itineraries merged) when `onBook` is
+ * called — so the booking adapter sees a single offer with all legs intact.
+ */
+export declare function FlightBookingShell({ selection, passengers, onBook, onBooked, onCancel, onEditOutbound, onEditReturn, carrierName, airportName, ancillaries, seatMaps, savedPaymentMethods, paymentCapabilities, documentsRequired, renderPassengerPicker, renderBillingPersonPicker, renderBillingOrgPicker, onSaveBillingDefaults, }: FlightBookingShellProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=flight-booking-shell.d.ts.map

package/dist/components/flight-booking-shell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flight-booking-shell.d.ts","sourceRoot":"","sources":["../../src/components/flight-booking-shell.tsx"],"names":[],"mappings":"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"}