@voyant-travel/flights-react 0.119.2

package/dist/components/flight-billing-step.js

@@ -0,0 +1,117 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@voyant-travel/ui/components/button";
+import { Checkbox } from "@voyant-travel/ui/components/checkbox";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "@voyant-travel/ui/components/command";
+import { CountryCombobox } from "@voyant-travel/ui/components/country-combobox";
+import { Input } from "@voyant-travel/ui/components/input";
+import { Label } from "@voyant-travel/ui/components/label";
+import { PhoneInput } from "@voyant-travel/ui/components/phone-input";
+import { Popover, PopoverContent, PopoverTrigger } from "@voyant-travel/ui/components/popover";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@voyant-travel/ui/components/tabs";
+import { cn } from "@voyant-travel/ui/lib/utils";
+import { Building2, ChevronDown, User, Users } from "lucide-react";
+import { useState } from "react";
+import { flightsUiEn } from "../i18n/en.js";
+import { useFlightsUiMessagesOrDefault } from "../i18n/index.js";
+/**
+ * Two-tab billing step with Privat (personal) + Companie (business / VAT)
+ * shapes. Address fields are structured (line1/city/postal/country) so the
+ * payload maps cleanly to `BillingAddress` on the payment intent. Pickers
+ * for prefill from CRM are supplied as render-prop slots so this component
+ * stays decoupled from the CRM data layer.
+ */
+export function FlightBillingStep({ value, onChange, eligiblePassengers, renderPersonPicker, renderOrgPicker, }) {
+    const messages = useFlightsUiMessagesOrDefault();
+    const apply = (prefill) => onChange({ ...value, ...prefill });
+    const set = (patch) => onChange({ ...value, ...patch });
+    const hasPassengerOptions = (eligiblePassengers?.length ?? 0) > 0;
+    return (_jsxs("div", { className: "flex flex-col gap-5", children: [_jsxs("div", { children: [_jsx("h2", { className: "font-semibold text-base", children: messages.flightBillingStep.title }), _jsx("p", { className: "text-muted-foreground text-sm", children: messages.flightBillingStep.description })] }), _jsxs(Tabs, { value: value.mode, onValueChange: (v) => set({ mode: v ?? "personal" }), children: [_jsxs(TabsList, { children: [_jsxs(TabsTrigger, { value: "personal", children: [_jsx(User, { className: "mr-1.5 h-3.5 w-3.5" }), messages.flightBillingStep.tabs.personal] }), _jsxs(TabsTrigger, { value: "company", children: [_jsx(Building2, { className: "mr-1.5 h-3.5 w-3.5" }), messages.flightBillingStep.tabs.company] })] }), _jsxs(TabsContent, { value: "personal", className: "mt-5 flex flex-col gap-4", children: [(hasPassengerOptions || renderPersonPicker) && (_jsxs("div", { className: "flex flex-wrap justify-end gap-2", children: [hasPassengerOptions && (_jsx(PassengerPickerTrigger, { passengers: eligiblePassengers ?? [], messages: messages, onPick: (p) => apply({
+                                            mode: "personal",
+                                            firstName: p.firstName,
+                                            ...(p.middleName ? { middleName: p.middleName } : {}),
+                                            lastName: p.lastName,
+                                        }) })), renderPersonPicker?.(apply)] })), _jsx(NameRow, { value: value, onChange: set, messages: messages }), _jsx(ContactRow, { value: value, onChange: set, messages: messages }), _jsx(AddressBlock, { value: value, onChange: set, messages: messages }), _jsx(SaveDefaultRow, { value: value, onChange: set, messages: messages })] }), _jsxs(TabsContent, { value: "company", className: "mt-5 flex flex-col gap-4", children: [renderOrgPicker && _jsx("div", { className: "flex justify-end", children: renderOrgPicker(apply) }), _jsx(CompanyRow, { value: value, onChange: set, messages: messages }), _jsx(ContactRow, { value: value, onChange: set, workPhone: true, messages: messages }), _jsx(AddressBlock, { value: value, onChange: set, messages: messages }), _jsx(SaveDefaultRow, { value: value, onChange: set, messages: messages })] })] })] }));
+}
+// ─────────────────────────────────────────────────────────────────────────────
+function NameRow({ value, onChange, messages, }) {
+    return (_jsxs("div", { className: "grid grid-cols-1 gap-3 md:grid-cols-2", children: [_jsx(Field, { label: messages.flightBillingStep.fields.firstName, required: true, children: _jsx(Input, { value: value.firstName, onChange: (e) => onChange({ firstName: e.target.value }) }) }), _jsx(Field, { label: messages.flightBillingStep.fields.lastName, required: true, children: _jsx(Input, { value: value.lastName, onChange: (e) => onChange({ lastName: e.target.value }) }) })] }));
+}
+function CompanyRow({ value, onChange, messages, }) {
+    return (_jsxs("div", { className: "grid grid-cols-1 gap-3 md:grid-cols-2", children: [_jsx(Field, { label: messages.flightBillingStep.fields.companyName, required: true, children: _jsx(Input, { value: value.companyName ?? "", onChange: (e) => onChange({ companyName: e.target.value }) }) }), _jsx(Field, { label: messages.flightBillingStep.fields.vatNumber, required: true, children: _jsx(Input, { value: value.vatNumber ?? "", onChange: (e) => onChange({ vatNumber: e.target.value }), placeholder: messages.flightBillingStep.placeholders.vatNumber }) })] }));
+}
+function ContactRow({ value, onChange, workPhone, messages, }) {
+    return (_jsxs("div", { className: "grid grid-cols-1 gap-3 md:grid-cols-2", children: [_jsx(Field, { label: messages.flightBillingStep.fields.email, required: true, children: _jsx(Input, { type: "email", value: value.email, onChange: (e) => onChange({ email: e.target.value }) }) }), _jsx(Field, { label: workPhone
+                    ? messages.flightBillingStep.fields.workPhone
+                    : messages.flightBillingStep.fields.phone, children: _jsx(PhoneInput, { value: (value.phone ?? ""), onChange: (v) => onChange({ phone: v ? String(v) : undefined }), defaultCountry: "RO", international: true }) })] }));
+}
+function AddressBlock({ value, onChange, messages, }) {
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(Field, { label: messages.flightBillingStep.fields.streetAddress, required: true, children: _jsx(Input, { value: value.line1, onChange: (e) => onChange({ line1: e.target.value }), placeholder: messages.flightBillingStep.placeholders.streetAddress }) }), _jsx(Field, { label: messages.flightBillingStep.fields.addressLine2, children: _jsx(Input, { value: value.line2 ?? "", onChange: (e) => onChange({ line2: e.target.value }), placeholder: messages.flightBillingStep.placeholders.addressLine2 }) }), _jsxs("div", { className: "grid grid-cols-1 gap-3 md:grid-cols-3", children: [_jsx(Field, { label: messages.flightBillingStep.fields.city, required: true, children: _jsx(Input, { value: value.city, onChange: (e) => onChange({ city: e.target.value }) }) }), _jsx(Field, { label: messages.flightBillingStep.fields.postalCode, children: _jsx(Input, { value: value.postalCode ?? "", onChange: (e) => onChange({ postalCode: e.target.value }) }) }), _jsx(Field, { label: messages.flightBillingStep.fields.country, required: true, children: _jsx(CountryCombobox, { value: value.countryCode || null, onChange: (code) => onChange({ countryCode: code ?? "" }) }) })] })] }));
+}
+function SaveDefaultRow({ value, onChange, messages, }) {
+    const id = "billing-save-default";
+    return (_jsxs("div", { className: "flex items-center gap-2 text-muted-foreground text-sm", children: [_jsx(Checkbox, { id: id, checked: !!value.saveAsDefault, onCheckedChange: (v) => onChange({ saveAsDefault: !!v }) }), _jsx("label", { htmlFor: id, className: "cursor-pointer", children: messages.flightBillingStep.saveDefault })] }));
+}
+function Field({ label, required, children, }) {
+    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs(Label, { className: cn("text-[11px] uppercase tracking-wider text-muted-foreground"), children: [label, required && _jsx("span", { className: "ml-0.5 text-destructive", children: "*" })] }), children] }));
+}
+// ── Helpers ──────────────────────────────────────────────────────────────────
+// ─────────────────────────────────────────────────────────────────────────────
+/**
+ * Compact "Pick from passengers" popover. Lists adult passengers entered
+ * upstream — the operator can click one to copy their first/middle/last name
+ * into the billing recipient. Self-contained: doesn't depend on CRM data.
+ */
+function PassengerPickerTrigger({ passengers, messages, onPick, }) {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsxs(PopoverTrigger, { render: _jsx(Button, { type: "button", variant: "outline", size: "sm", className: "gap-2" }), children: [_jsx(Users, { className: "h-3.5 w-3.5" }), messages.flightBillingStep.pickFromPassengers, _jsx(ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" })] }), _jsx(PopoverContent, { className: "w-[320px] p-0", align: "end", children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: messages.flightBillingStep.placeholders.searchPassengers }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: messages.flightBillingStep.noMatchingPassengers }), _jsx(CommandGroup, { children: passengers.map((p) => {
+                                        const fullName = [p.firstName, p.middleName, p.lastName]
+                                            .filter((s) => s?.trim())
+                                            .join(" ");
+                                        return (_jsx(CommandItem, { value: fullName, onSelect: () => {
+                                                onPick(p);
+                                                setOpen(false);
+                                            }, children: _jsx("span", { className: "truncate font-medium text-sm", children: fullName || messages.common.noValue }) }, p.id));
+                                    }) })] })] }) })] }));
+}
+export function emptyBillingValue() {
+    return {
+        mode: "personal",
+        firstName: "",
+        lastName: "",
+        email: "",
+        line1: "",
+        city: "",
+        countryCode: "",
+    };
+}
+/**
+ * Validate the billing value. Returns the first error message, or null
+ * when valid. Drives the journey's Continue gate.
+ */
+export function validateBilling(v) {
+    const messages = flightsUiEn.flightBillingStep.validation;
+    if (!v.email.trim())
+        return messages.emailRequired;
+    if (!/^\S+@\S+\.\S+$/.test(v.email.trim()))
+        return messages.emailInvalid;
+    if (!v.line1.trim())
+        return messages.streetAddressRequired;
+    if (!v.city.trim())
+        return messages.cityRequired;
+    if (!v.countryCode.trim())
+        return messages.countryRequired;
+    if (v.mode === "personal") {
+        if (!v.firstName.trim())
+            return messages.firstNameRequired;
+        if (!v.lastName.trim())
+            return messages.lastNameRequired;
+    }
+    else {
+        if (!v.companyName?.trim())
+            return messages.companyNameRequired;
+        if (!v.vatNumber?.trim())
+            return messages.vatNumberRequired;
+    }
+    return null;
+}

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

@@ -0,0 +1,31 @@
+import type { FlightBookRequest, FlightOffer, FlightOrder, PassengerCounts } from "@voyant-travel/flights/contract/types";
+import { type FlightPassengerFormProps } from "./flight-passenger-form.js";
+export interface FlightBookingJourneyProps {
+    /** The offer to book — usually returned by the priceOffer call. */
+    offer: FlightOffer;
+    /** Passenger counts captured at search time. */
+    passengers: PassengerCounts;
+    /** Submit handler — wire to the useFlightBook mutation. */
+    onBook: (request: FlightBookRequest) => Promise<FlightOrder> | FlightOrder;
+    /** Surfaced via book result; parent typically navigates to /orders/:id. */
+    onBooked?: (order: FlightOrder) => void;
+    /** "Back to results" affordance. */
+    onCancel?: () => void;
+    /** Optional formatter so passenger card shows airline/airport names. */
+    carrierName?: (iataCode: string) => string | undefined;
+    airportName?: (iataCode: string) => string | undefined;
+    /**
+     * Optional render slot for a person picker on each passenger card.
+     * Forwarded to `FlightPassengerForm.renderPicker` — operators wire a
+     * CRM-aware picker here so users can pick existing contacts as travelers.
+     */
+    renderPassengerPicker?: FlightPassengerFormProps["renderPicker"];
+}
+/**
+ * Multi-step booking journey: Review → Passengers → Contact + Payment →
+ * Confirm. Owns the in-progress form state; submits via `onBook` on the
+ * final step. Each step gates Continue with its own validator so the user
+ * can't advance with incomplete data.
+ */
+export declare function FlightBookingJourney({ offer, passengers, onBook, onBooked, onCancel, carrierName, airportName, renderPassengerPicker, }: FlightBookingJourneyProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=flight-booking-journey.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flight-booking-journey.d.ts","sourceRoot":"","sources":["../../src/components/flight-booking-journey.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,iBAAiB,EACjB,WAAW,EACX,WAAW,EAEX,eAAe,EAEhB,MAAM,uCAAuC,CAAA;AAY9C,OAAO,EAEL,KAAK,wBAAwB,EAE9B,MAAM,4BAA4B,CAAA;AAYnC,MAAM,WAAW,yBAAyB;IACxC,mEAAmE;IACnE,KAAK,EAAE,WAAW,CAAA;IAClB,gDAAgD;IAChD,UAAU,EAAE,eAAe,CAAA;IAC3B,2DAA2D;IAC3D,MAAM,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,OAAO,CAAC,WAAW,CAAC,GAAG,WAAW,CAAA;IAC1E,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAA;IACvC,oCAAoC;IACpC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,wEAAwE;IACxE,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;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,wBAAwB,CAAC,cAAc,CAAC,CAAA;CACjE;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,UAAU,EACV,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,WAAW,EACX,qBAAqB,GACtB,EAAE,yBAAyB,kDA2H3B"}

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

@@ -0,0 +1,103 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from "@voyant-travel/ui/components/button";
+import { cn } from "@voyant-travel/ui/lib/utils";
+import { Check, ChevronLeft, ChevronRight } from "lucide-react";
+import { useState } from "react";
+import { useFlightsUiI18nOrDefault } from "../i18n/index.js";
+import { FlightContactForm, validateContact, } from "./flight-contact-form.js";
+import { FlightOfferDetail } from "./flight-offer-detail.js";
+import { FlightPassengerForm, validatePassengers, } from "./flight-passenger-form.js";
+import { FlightPaymentSelector } from "./flight-payment-selector.js";
+const STEPS = [
+    { id: "review" },
+    { id: "passengers" },
+    { id: "contact" },
+    { id: "confirm" },
+];
+/**
+ * Multi-step booking journey: Review → Passengers → Contact + Payment →
+ * Confirm. Owns the in-progress form state; submits via `onBook` on the
+ * final step. Each step gates Continue with its own validator so the user
+ * can't advance with incomplete data.
+ */
+export function FlightBookingJourney({ offer, passengers, onBook, onBooked, onCancel, carrierName, airportName, renderPassengerPicker, }) {
+    const i18n = useFlightsUiI18nOrDefault();
+    const messages = i18n.messages.flightBookingJourney;
+    const [stepIdx, setStepIdx] = useState(0);
+    const [paxList, setPaxList] = useState([]);
+    const [contact, setContact] = useState({});
+    const [payment, setPayment] = useState({ type: "hold" });
+    const [submitting, setSubmitting] = useState(false);
+    const [error, setError] = useState(null);
+    const step = STEPS[stepIdx];
+    if (!step)
+        return null;
+    const paxErrors = validatePassengers(paxList);
+    const contactError = validateContact(contact);
+    const canContinue = (() => {
+        switch (step.id) {
+            case "review":
+                return true;
+            case "passengers":
+                return Object.keys(paxErrors).length === 0 && paxList.length > 0;
+            case "contact":
+                return contactError == null;
+            case "confirm":
+                return true;
+        }
+    })();
+    const goNext = () => {
+        setStepIdx((i) => Math.min(STEPS.length - 1, i + 1));
+    };
+    const goBack = () => {
+        setStepIdx((i) => Math.max(0, i - 1));
+    };
+    const submit = async () => {
+        setError(null);
+        setSubmitting(true);
+        try {
+            const order = await onBook({
+                offerId: offer.offerId,
+                offer,
+                passengers: paxList,
+                contact,
+                paymentIntent: payment,
+            });
+            onBooked?.(order);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setSubmitting(false);
+        }
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsx(Stepper, { currentIdx: stepIdx, messages: messages.steps }), error && (_jsx("div", { className: "rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive", children: error })), _jsxs("div", { className: "flex flex-col gap-4", children: [step.id === "review" && (_jsxs("div", { className: "rounded-xl border bg-card p-5 shadow-sm", children: [_jsx("h2", { className: "mb-4 text-base font-semibold", children: messages.reviewTitle }), _jsx(FlightOfferDetail, { offer: offer, carrierName: carrierName, airportName: airportName })] })), step.id === "passengers" && (_jsx(FlightPassengerForm, { counts: passengers, value: paxList, onChange: setPaxList, renderPicker: renderPassengerPicker })), step.id === "contact" && (_jsxs(_Fragment, { children: [_jsx(FlightContactForm, { value: contact, onChange: setContact }), _jsx(FlightPaymentSelector, { value: payment, onChange: setPayment })] })), step.id === "confirm" && (_jsx(ConfirmSummary, { offer: offer, passengers: paxList, contact: contact, payment: payment, i18n: i18n }))] }), _jsxs("div", { className: "flex items-center justify-between border-t pt-4", children: [_jsxs(Button, { type: "button", variant: "ghost", onClick: () => (stepIdx === 0 ? onCancel?.() : goBack()), disabled: submitting, children: [_jsx(ChevronLeft, { className: "mr-1 h-4 w-4" }), stepIdx === 0 ? messages.backToResults : messages.back] }), step.id === "confirm" ? (_jsx(Button, { onClick: submit, disabled: submitting, children: submitting ? messages.booking : messages.confirmBooking })) : (_jsxs(Button, { onClick: goNext, disabled: !canContinue, children: [messages.continue, _jsx(ChevronRight, { className: "ml-1 h-4 w-4" })] }))] })] }));
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// Stepper indicator
+// ─────────────────────────────────────────────────────────────────────────────
+function Stepper({ currentIdx, messages, }) {
+    return (_jsx("ol", { className: "flex items-center gap-2", children: STEPS.map((s, i) => {
+            const isActive = i === currentIdx;
+            const isComplete = i < currentIdx;
+            return (_jsxs("li", { className: "flex flex-1 items-center gap-2", children: [_jsx("div", { className: cn("flex h-7 w-7 shrink-0 items-center justify-center rounded-full border text-xs font-medium tabular-nums", isComplete && "border-primary bg-primary text-primary-foreground", isActive && !isComplete && "border-primary text-primary", !isActive && !isComplete && "border-border text-muted-foreground"), children: isComplete ? _jsx(Check, { className: "h-3.5 w-3.5" }) : i + 1 }), _jsx("span", { className: cn("truncate text-sm", isActive ? "font-medium text-foreground" : "text-muted-foreground"), children: messages[s.id] }), i < STEPS.length - 1 && _jsx("div", { className: "h-px flex-1 bg-border" })] }, s.id));
+        }) }));
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// Final confirmation summary
+// ─────────────────────────────────────────────────────────────────────────────
+function ConfirmSummary({ offer, passengers, contact, payment, i18n, }) {
+    const messages = i18n.messages.flightBookingJourney;
+    return (_jsxs("div", { className: "rounded-xl border bg-card p-5 shadow-sm", children: [_jsx("h2", { className: "mb-4 text-base font-semibold", children: messages.confirmBooking }), _jsx(Row, { label: messages.rows.total, children: _jsx("span", { className: "font-semibold tabular-nums", children: formatMoney(offer.totalPrice.amount, offer.totalPrice.currency, i18n) }) }), _jsx(Row, { label: messages.rows.passengers, children: passengers.length }), _jsx(Row, { label: messages.rows.contact, children: contact.email ?? i18n.messages.common.noValue }), _jsx(Row, { label: messages.rows.payment, children: _jsx("span", { className: "capitalize", children: payment.type.replace("_", " ") }) }), offer.expiresAt && (_jsx(Row, { label: messages.rows.offerExpires, children: _jsx("time", { dateTime: offer.expiresAt, children: i18n.formatDateTime(offer.expiresAt) }) })), _jsx("p", { className: "mt-4 text-xs text-muted-foreground", children: messages.confirmDescription })] }));
+}
+function Row({ label, children }) {
+    return (_jsxs("div", { className: "flex items-baseline justify-between border-b py-2 text-sm last:border-b-0", children: [_jsx("span", { className: "text-muted-foreground", children: label }), _jsx("span", { children: children })] }));
+}
+function formatMoney(amount, currency, i18n) {
+    const n = Number(amount);
+    if (!Number.isFinite(n))
+        return `${amount} ${currency}`;
+    return i18n.formatCurrency(n, currency, { maximumFractionDigits: 0 });
+}

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

@@ -0,0 +1,53 @@
+import type { FlightOffer, Money, PassengerCounts } from "@voyant-travel/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,uCAAuC,CAAA;AAQhG;;;;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,2CA+D1B"}

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

@@ -0,0 +1,104 @@
+"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 { cn } from "@voyant-travel/ui/lib/utils";
+import { Check, Pencil, Plane, Users } from "lucide-react";
+import { useFlightsUiI18nOrDefault } from "../i18n/index.js";
+import { AirlineLogo } from "./airline-logo.js";
+/**
+ * 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 i18n = useFlightsUiI18nOrDefault();
+    const messages = i18n.messages;
+    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
+                    ? messages.flightBookingLedger.outbound
+                    : messages.flightBookingLedger.flight, offer: selection.outbound, carrierName: carrierName, airportName: airportName, extras: outboundExtras, onEdit: onEditOutbound, complete: completedSections?.has("flights"), i18n: i18n }), selection.return && (_jsx(LegBlock, { label: messages.flightBookingLedger.return, offer: selection.return, carrierName: carrierName, airportName: airportName, extras: returnExtras, onEdit: onEditReturn, complete: completedSections?.has("flights"), i18n: i18n })), _jsx(SectionRow, { icon: _jsx(Users, { className: "h-3.5 w-3.5" }), label: messages.flightBookingLedger.passengers, right: `${paxTotal} ${messages.common.pax}`, complete: completedSections?.has("passengers") }), _jsx(PlaceholderSections, { completed: completedSections, messages: messages }), _jsxs("div", { className: "mt-2 flex items-center justify-between border-t pt-3", children: [_jsx("span", { className: "font-medium text-sm", children: messages.common.total }), _jsx("span", { className: "font-semibold text-lg tabular-nums", children: formatMoney(total.amount, total.currency, i18n) })] }), cta && (_jsx(Button, { className: "w-full", onClick: cta.onClick, disabled: cta.disabled || cta.loading, children: cta.loading ? messages.flightBookingLedger.working : cta.label }))] }));
+}
+// ─────────────────────────────────────────────────────────────────────────────
+function LegBlock({ label, offer, carrierName, airportName, extras, onEdit, complete, i18n, }) {
+    const messages = i18n.messages;
+    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, i18n) }), 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 ", formatStops(stops, messages)] })] })] }), 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, i18n) : (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, messages, }) {
+    // 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: messages.flightBookingLedger.billing });
+    if (completed.has("payment"))
+        items.push({ id: "payment", label: messages.flightBookingLedger.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, i18n) {
+    const n = Number(amount);
+    if (!Number.isFinite(n))
+        return `${amount} ${currency}`;
+    return i18n.formatCurrency(n, currency, { maximumFractionDigits: 0 });
+}
+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 formatStops(stops, messages) {
+    if (stops === 0)
+        return messages.common.stops.nonstop;
+    return formatMessage(stops === 1 ? messages.common.stops.oneStop : messages.common.stops.manyStops, {
+        count: stops,
+    });
+}
+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-page.d.ts

@@ -0,0 +1,25 @@
+import type { FlightBookRequest, FlightOrder, PassengerCounts } from "@voyant-travel/flights/contract/types";
+import type { BillingValue } from "./flight-billing-step.js";
+import { type FlightBookingShellProps } from "./flight-booking-shell.js";
+import type { PaymentStepCapabilities } from "./flight-payment-step.js";
+export interface FlightBookingPageProps {
+    outboundOfferId: string;
+    returnOfferId?: string;
+    passengers: PassengerCounts;
+    onBackToSearch: () => void;
+    onBook: (request: FlightBookRequest) => Promise<FlightOrder> | FlightOrder;
+    onBooked?: (order: FlightOrder) => void;
+    onEditOutbound?: () => void;
+    onEditReturn?: () => void;
+    onSaveBillingDefaults?: (value: BillingValue) => void;
+    paymentCapabilities?: PaymentStepCapabilities;
+    renderPassengerPicker?: FlightBookingShellProps["renderPassengerPicker"];
+    renderBillingPersonPicker?: (apply: (prefill: Partial<BillingValue>) => void, helpers: {
+        onPersonSelected: (personId: string | null) => void;
+    }) => React.ReactNode;
+    renderBillingOrgPicker?: (apply: (prefill: Partial<BillingValue>) => void) => React.ReactNode;
+    onAddPassengerContact?: () => void;
+    className?: string;
+}
+export declare function FlightBookingPage({ outboundOfferId, returnOfferId, passengers, onBackToSearch, onBook, onBooked, onEditOutbound, onEditReturn, onSaveBillingDefaults, paymentCapabilities, renderPassengerPicker, renderBillingPersonPicker, renderBillingOrgPicker, onAddPassengerContact, className, }: FlightBookingPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=flight-booking-page.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flight-booking-page.d.ts","sourceRoot":"","sources":["../../src/components/flight-booking-page.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,iBAAiB,EAEjB,WAAW,EACX,eAAe,EAChB,MAAM,uCAAuC,CAAA;AAiB9C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE5D,OAAO,EAKL,KAAK,uBAAuB,EAC7B,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAA;AAIvE,MAAM,WAAW,sBAAsB;IACrC,eAAe,EAAE,MAAM,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,UAAU,EAAE,eAAe,CAAA;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAA;IAC1B,MAAM,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,OAAO,CAAC,WAAW,CAAC,GAAG,WAAW,CAAA;IAC1E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAA;IACvC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAC3B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAA;IACrD,mBAAmB,CAAC,EAAE,uBAAuB,CAAA;IAC7C,qBAAqB,CAAC,EAAE,uBAAuB,CAAC,uBAAuB,CAAC,CAAA;IACxE,yBAAyB,CAAC,EAAE,CAC1B,KAAK,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,EAC/C,OAAO,EAAE;QAAE,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;KAAE,KAC7D,KAAK,CAAC,SAAS,CAAA;IACpB,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,KAAK,KAAK,CAAC,SAAS,CAAA;IAC7F,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAA;IAClC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,eAAe,EACf,aAAa,EACb,UAAU,EACV,cAAc,EACd,MAAM,EACN,QAAQ,EACR,cAAc,EACd,YAAY,EACZ,qBAAqB,EACrB,mBAAmB,EACnB,qBAAqB,EACrB,yBAAyB,EACzB,sBAAsB,EACtB,qBAAqB,EACrB,SAAS,GACV,EAAE,sBAAsB,2CA2MxB"}