@voyantjs/flights-ui 0.20.0

package/dist/components/flight-order-confirmation.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Badge } from "@voyantjs/ui/components/badge";
+import { Button } from "@voyantjs/ui/components/button";
+import { Separator } from "@voyantjs/ui/components/separator";
+import { cn } from "@voyantjs/ui/lib/utils";
+import { CheckCircle2, Clock, Mail, Phone, Ticket, XCircle } from "lucide-react";
+import { FlightOfferDetail } from "./flight-offer-detail";
+const STATUS_VARIANTS = {
+    pending: { label: "Pending", tone: "pending", icon: _jsx(Clock, { className: "h-4 w-4" }) },
+    confirmed: { label: "Confirmed", tone: "ok", icon: _jsx(CheckCircle2, { className: "h-4 w-4" }) },
+    ticketed: { label: "Ticketed", tone: "ok", icon: _jsx(Ticket, { className: "h-4 w-4" }) },
+    cancelled: { label: "Cancelled", tone: "bad", icon: _jsx(XCircle, { className: "h-4 w-4" }) },
+    failed: { label: "Failed", tone: "bad", icon: _jsx(XCircle, { className: "h-4 w-4" }) },
+};
+export function FlightOrderConfirmation({ order, onCancel, cancelLoading, carrierName, airportName, aircraftName, }) {
+    const status = STATUS_VARIANTS[order.status];
+    const isCancellable = onCancel != null && (order.status === "confirmed" || order.status === "ticketed");
+    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("div", { className: "rounded-xl border bg-card p-5 shadow-sm", children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-[11px] font-medium uppercase tracking-wider text-muted-foreground", children: "Booking confirmed" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("h2", { className: "font-mono text-2xl font-semibold tracking-wider", children: order.pnr ?? order.orderId }), _jsxs(Badge, { variant: status.tone === "ok" ? "default" : "secondary", className: cn("gap-1.5", status.tone === "bad" && "bg-destructive/10 text-destructive"), children: [status.icon, status.label] })] }), _jsx("span", { className: "font-mono text-[11px] text-muted-foreground", children: order.orderId })] }), _jsxs("div", { className: "text-right", children: [_jsx("div", { className: "text-2xl font-semibold tabular-nums", children: formatMoney(order.totalPrice.amount, order.totalPrice.currency) }), _jsx("div", { className: "text-xs text-muted-foreground", children: "total" })] })] }), order.paymentDeadline && order.status === "confirmed" && (_jsxs("div", { className: "mt-4 flex items-start gap-2 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-900", children: [_jsx(Clock, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }), _jsxs("div", { children: ["Tickets must be issued before ", _jsx("strong", { children: formatDateTime(order.paymentDeadline) }), " ", "or the seats will be released."] })] }))] }), _jsx(Section, { title: "Passengers", children: _jsx("div", { className: "flex flex-col gap-2", children: order.passengers.map((p) => (_jsxs("div", { className: "flex items-center justify-between rounded-md border bg-card px-3 py-2.5 text-sm", children: [_jsxs("div", { className: "flex flex-col leading-tight", children: [_jsx("span", { className: "font-medium", children: [p.firstName, p.middleName, p.lastName].filter(Boolean).join(" ") }), _jsxs("span", { className: "text-xs text-muted-foreground capitalize", children: [p.type, p.dateOfBirth && ` · DOB ${p.dateOfBirth}`] })] }), order.tickets && (_jsx(TicketChip, { number: order.tickets.find((t) => t.passengerId === p.passengerId)?.ticketNumber }))] }, p.passengerId))) }) }), (order.contact?.email || order.contact?.phone) && (_jsx(Section, { title: "Contact", children: _jsxs("div", { className: "flex flex-wrap gap-4 text-sm", children: [order.contact.email && (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx(Mail, { className: "h-3.5 w-3.5 text-muted-foreground" }), order.contact.email] })), order.contact.phone && (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx(Phone, { className: "h-3.5 w-3.5 text-muted-foreground" }), order.contact.phone] }))] }) })), _jsx(Section, { title: "Itinerary", children: _jsx(FlightOfferDetail, { offer: order.offer, carrierName: carrierName, airportName: airportName, aircraftName: aircraftName }) }), isCancellable && (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsx("div", { className: "flex justify-end", children: _jsx(Button, { variant: "destructive", onClick: () => onCancel(order), disabled: cancelLoading, children: cancelLoading ? "Cancelling…" : "Cancel booking" }) })] }))] }));
+}
+function Section({ title, children }) {
+    return (_jsxs("section", { className: "flex flex-col gap-3", children: [_jsx("h3", { className: "text-[11px] font-medium uppercase tracking-wider text-muted-foreground", children: title }), children] }));
+}
+function TicketChip({ number }) {
+    if (!number) {
+        return _jsx("span", { className: "text-xs text-muted-foreground", children: "\u2014" });
+    }
+    return _jsx("code", { className: "rounded bg-muted px-2 py-1 font-mono text-[11px]", children: number });
+}
+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 formatDateTime(iso) {
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime()))
+        return iso;
+    return new Intl.DateTimeFormat(undefined, {
+        day: "numeric",
+        month: "short",
+        hour: "2-digit",
+        minute: "2-digit",
+    }).format(d);
+}

package/dist/components/flight-passenger-form.d.ts

@@ -0,0 +1,49 @@
+import type { FlightPassenger, PassengerCounts, PassengerType } from "@voyantjs/flights/contract/types";
+import { type ReactNode } from "react";
+/** Subset of FlightPassenger that a picker can pre-fill into a card. */
+export type PassengerPrefill = Partial<Pick<FlightPassenger, "firstName" | "middleName" | "lastName" | "dateOfBirth" | "gender" | "email" | "phone">>;
+export interface FlightPassengerFormProps {
+    /** How many passengers of each type the booking is for. */
+    counts: PassengerCounts;
+    /** Current passenger details (one entry per pax slot). */
+    value: FlightPassenger[];
+    onChange: (next: FlightPassenger[]) => void;
+    /**
+     * Surface a banner above the cards prompting the operator to add travel
+     * documents — typically true when the route looks international. Documents
+     * remain optional (skip-to-check-in is one click), but the prompt nudges
+     * the operator to fill them up-front.
+     */
+    documentsRequired?: boolean;
+    /**
+     * Optional render slot for a person picker. Rendered next to each
+     * passenger card title — typically a "Pick from contacts" button. Calling
+     * `onPicked` with prefill data merges it into the card without
+     * overwriting fields the picker doesn't carry (e.g. CRM has no DOB).
+     */
+    renderPicker?: (slot: {
+        passengerId: string;
+        type: PassengerType;
+    }, onPicked: (prefill: PassengerPrefill) => void) => ReactNode;
+}
+/**
+ * Editable list of passenger forms — one card per pax slot derived from
+ * `counts`. Synthesizes stable `passengerId`s ("pax_adult_1", "pax_child_1",
+ * etc.) so the booking adapter can link tickets to passengers.
+ *
+ * Required fields per pax: type (set), firstName, lastName, dateOfBirth.
+ * Gender + email/phone are optional. A travel-document subsection lives on
+ * each card — collapsed by default ("Add at check-in instead"), expanded
+ * when the operator opts to capture passport / national-id up front. When
+ * filled, the document is written to `value.documents[0]` so it ships
+ * straight through `bookFlight`.
+ */
+export declare function FlightPassengerForm({ counts, value, onChange, documentsRequired, renderPicker, }: FlightPassengerFormProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Validate a list of passengers — returns the list of errors keyed by
+ * passenger id, or an empty object when everything's filled. Used by the
+ * journey to gate the Continue button. Documents are optional, but when
+ * the operator opted to add one its required fields must be filled.
+ */
+export declare function validatePassengers(value: FlightPassenger[]): Record<string, string>;
+//# sourceMappingURL=flight-passenger-form.d.ts.map

package/dist/components/flight-passenger-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flight-passenger-form.d.ts","sourceRoot":"","sources":["../../src/components/flight-passenger-form.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,eAAe,EACf,eAAe,EACf,aAAa,EAEd,MAAM,kCAAkC,CAAA;AAczC,OAAO,EAAE,KAAK,SAAS,EAAsB,MAAM,OAAO,CAAA;AAE1D,wEAAwE;AACxE,MAAM,MAAM,gBAAgB,GAAG,OAAO,CACpC,IAAI,CACF,eAAe,EACf,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,aAAa,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CACvF,CACF,CAAA;AAcD,MAAM,WAAW,wBAAwB;IACvC,2DAA2D;IAC3D,MAAM,EAAE,eAAe,CAAA;IACvB,0DAA0D;IAC1D,KAAK,EAAE,eAAe,EAAE,CAAA;IACxB,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,IAAI,CAAA;IAC3C;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CACb,IAAI,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,aAAa,CAAA;KAAE,EAClD,QAAQ,EAAE,CAAC,OAAO,EAAE,gBAAgB,KAAK,IAAI,KAC1C,SAAS,CAAA;CACf;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,YAAY,GACb,EAAE,wBAAwB,2CAmD1B;AAkPD;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,eAAe,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAgBnF"}

package/dist/components/flight-passenger-form.js

@@ -0,0 +1,155 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkbox } from "@voyantjs/ui/components/checkbox";
+import { CountryCombobox } from "@voyantjs/ui/components/country-combobox";
+import { DatePicker } from "@voyantjs/ui/components/date-picker";
+import { Input } from "@voyantjs/ui/components/input";
+import { Label } from "@voyantjs/ui/components/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyantjs/ui/components/select";
+import { CircleAlert, IdCard } from "lucide-react";
+import { useEffect, useMemo } from "react";
+// Date-of-birth range — anyone born within the last 110 years is plausible;
+// future dates make no sense. Computed once at module load.
+const DOB_END_MONTH = new Date();
+const DOB_START_MONTH = new Date(DOB_END_MONTH.getFullYear() - 110, 0, 1);
+// Travel-document expiry range — passports/national IDs are typically valid
+// 10 years; visas can extend further. Cap at +30 years to keep the year
+// dropdown manageable. Past dates are disabled (an expired doc isn't usable
+// for booking).
+const EXPIRY_START_MONTH = new Date();
+const EXPIRY_END_MONTH = new Date(EXPIRY_START_MONTH.getFullYear() + 30, 11, 31);
+/**
+ * Editable list of passenger forms — one card per pax slot derived from
+ * `counts`. Synthesizes stable `passengerId`s ("pax_adult_1", "pax_child_1",
+ * etc.) so the booking adapter can link tickets to passengers.
+ *
+ * Required fields per pax: type (set), firstName, lastName, dateOfBirth.
+ * Gender + email/phone are optional. A travel-document subsection lives on
+ * each card — collapsed by default ("Add at check-in instead"), expanded
+ * when the operator opts to capture passport / national-id up front. When
+ * filled, the document is written to `value.documents[0]` so it ships
+ * straight through `bookFlight`.
+ */
+export function FlightPassengerForm({ counts, value, onChange, documentsRequired, renderPicker, }) {
+    // Derive the canonical pax slots from `counts`. Passenger ids are stable
+    // by position so re-ordering is safe.
+    const slots = useMemo(() => buildSlots(counts), [counts]);
+    // Materialize missing rows so the UI always has one value per slot.
+    // (Keeps existing values when the user navigates back to this step.)
+    useEffect(() => {
+        if (slots.length === value.length)
+            return;
+        const next = slots.map((slot) => {
+            const existing = value.find((p) => p.passengerId === slot.passengerId);
+            return existing ?? blankPassenger(slot.passengerId, slot.type);
+        });
+        onChange(next);
+        // We intentionally only re-sync when slot identities change (counts edit).
+    }, [slots, value.length, value.find, onChange]);
+    const set = (passengerId, patch) => {
+        onChange(value.map((p) => (p.passengerId === passengerId ? { ...p, ...patch } : p)));
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [documentsRequired && (_jsxs("div", { className: "flex items-start gap-2 rounded-md border border-amber-500/40 bg-amber-500/5 p-3 text-amber-700 text-sm", children: [_jsx(CircleAlert, { className: "mt-0.5 h-4 w-4 shrink-0" }), _jsx("span", { children: "This route looks international \u2014 adding travel documents now speeds up online check-in and avoids airport-counter fees. You can still skip and add them later." })] })), slots.map((slot, i) => {
+                const pax = value.find((p) => p.passengerId === slot.passengerId) ??
+                    blankPassenger(slot.passengerId, slot.type);
+                const idx = sameTypeIndex(slots, slot, i) + 1;
+                return (_jsx(PassengerCard, { label: `${labelFor(slot.type)} ${idx}`, value: pax, onChange: (patch) => set(slot.passengerId, patch), picker: renderPicker?.(slot, (prefill) => set(slot.passengerId, stripUndefined(prefill))) }, slot.passengerId));
+            })] }));
+}
+function stripUndefined(obj) {
+    const out = {};
+    for (const [k, v] of Object.entries(obj)) {
+        if (v !== undefined && v !== null)
+            out[k] = v;
+    }
+    return out;
+}
+function PassengerCard({ label, value, onChange, picker, }) {
+    const doc = value.documents?.[0] ?? null;
+    const setDoc = (next) => {
+        onChange({ documents: next ? [next] : undefined });
+    };
+    const updateDoc = (patch) => {
+        setDoc({ ...(doc ?? emptyDoc()), ...patch });
+    };
+    return (_jsxs("div", { className: "rounded-lg border bg-card p-4 shadow-sm", children: [_jsxs("div", { className: "mb-3 flex items-center justify-between gap-2", children: [_jsx("h3", { className: "font-medium text-sm", children: label }), picker] }), _jsxs("div", { className: "grid grid-cols-1 gap-3 md:grid-cols-3", children: [_jsx(Field, { label: "First name", required: true, children: _jsx(Input, { value: value.firstName, onChange: (e) => onChange({ firstName: e.target.value }), placeholder: "As on passport" }) }), _jsx(Field, { label: "Middle name", children: _jsx(Input, { value: value.middleName ?? "", onChange: (e) => onChange({ middleName: e.target.value }), placeholder: "Optional" }) }), _jsx(Field, { label: "Last name", required: true, children: _jsx(Input, { value: value.lastName, onChange: (e) => onChange({ lastName: e.target.value }), placeholder: "As on passport" }) }), _jsx(Field, { label: "Date of birth", required: true, children: _jsx(DatePicker, { value: value.dateOfBirth || null, onChange: (v) => onChange({ dateOfBirth: v ?? "" }), placeholder: "Select date", className: "w-full", captionLayout: "dropdown", startMonth: DOB_START_MONTH, endMonth: DOB_END_MONTH, disabled: { after: DOB_END_MONTH } }) }), _jsx(Field, { label: "Gender", children: _jsxs(Select, { value: value.gender ?? "", onValueChange: (v) => {
+                                if (v)
+                                    onChange({ gender: v });
+                            }, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, { placeholder: "Select" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "M", children: "Male" }), _jsx(SelectItem, { value: "F", children: "Female" }), _jsx(SelectItem, { value: "X", children: "Unspecified / X" })] })] }) })] }), _jsxs("div", { className: "mt-4 border-t pt-4", children: [_jsxs("div", { className: "mb-3 flex items-center justify-between gap-2", children: [_jsxs("span", { className: "flex items-center gap-1.5 font-medium text-sm", children: [_jsx(IdCard, { className: "h-3.5 w-3.5 text-muted-foreground" }), "Travel document"] }), _jsxs("div", { className: "flex items-center gap-2 text-muted-foreground text-xs", children: [_jsx(Checkbox, { id: `pax-${value.passengerId}-doc-toggle`, checked: doc != null, onCheckedChange: (v) => setDoc(v ? emptyDoc() : null) }), _jsx("label", { htmlFor: `pax-${value.passengerId}-doc-toggle`, className: "cursor-pointer", children: "Add now" })] })] }), !doc && (_jsx("p", { className: "text-muted-foreground text-xs", children: "Skip to add at check-in. Required up-front for most international travel." })), doc && (_jsxs("div", { className: "grid grid-cols-1 gap-3 md:grid-cols-3", children: [_jsx(Field, { label: "Document type", required: true, children: _jsxs(Select, { value: doc.type, onValueChange: (v) => {
+                                        if (!v)
+                                            return;
+                                        updateDoc({ type: v });
+                                    }, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "passport", children: "Passport" }), _jsx(SelectItem, { value: "national_id", children: "National ID" }), _jsx(SelectItem, { value: "visa", children: "Visa" })] })] }) }), _jsx(Field, { label: "Document number", required: true, children: _jsx(Input, { value: doc.number, onChange: (e) => updateDoc({ number: e.target.value }), placeholder: "As printed on document", autoCapitalize: "characters" }) }), _jsx(Field, { label: "Country of issue", required: true, children: _jsx(CountryCombobox, { value: doc.countryOfIssue || null, onChange: (code) => updateDoc({ countryOfIssue: code ?? "" }) }) }), _jsx(Field, { label: "Country of nationality", children: _jsx(CountryCombobox, { value: doc.countryOfNationality ?? null, onChange: (code) => updateDoc({ countryOfNationality: code ?? undefined }) }) }), _jsx(Field, { label: "Expiry date", required: true, children: _jsx(DatePicker, { value: doc.expiryDate ?? null, onChange: (v) => updateDoc({ expiryDate: v ?? undefined }), placeholder: "Select date", className: "w-full", captionLayout: "dropdown", startMonth: EXPIRY_START_MONTH, endMonth: EXPIRY_END_MONTH, disabled: { before: EXPIRY_START_MONTH } }) })] }))] })] }));
+}
+function emptyDoc() {
+    return {
+        type: "passport",
+        number: "",
+        countryOfIssue: "",
+    };
+}
+function Field({ label, required, children, }) {
+    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs(Label, { className: "text-[11px] uppercase tracking-wider text-muted-foreground", children: [label, required && _jsx("span", { className: "ml-0.5 text-destructive", children: "*" })] }), children] }));
+}
+function buildSlots(counts) {
+    const slots = [];
+    for (let i = 1; i <= counts.adults; i++) {
+        slots.push({ passengerId: `pax_adult_${i}`, type: "adult" });
+    }
+    for (let i = 1; i <= (counts.children ?? 0); i++) {
+        slots.push({ passengerId: `pax_child_${i}`, type: "child" });
+    }
+    for (let i = 1; i <= (counts.infants ?? 0); i++) {
+        slots.push({ passengerId: `pax_infant_${i}`, type: "infant" });
+    }
+    return slots;
+}
+function blankPassenger(passengerId, type) {
+    return {
+        passengerId,
+        type,
+        firstName: "",
+        lastName: "",
+        dateOfBirth: "",
+    };
+}
+function labelFor(type) {
+    return type[0]?.toUpperCase() + type.slice(1);
+}
+function sameTypeIndex(slots, slot, idx) {
+    let count = 0;
+    for (let i = 0; i < idx; i++) {
+        if (slots[i]?.type === slot.type)
+            count++;
+    }
+    return count;
+}
+/**
+ * Validate a list of passengers — returns the list of errors keyed by
+ * passenger id, or an empty object when everything's filled. Used by the
+ * journey to gate the Continue button. Documents are optional, but when
+ * the operator opted to add one its required fields must be filled.
+ */
+export function validatePassengers(value) {
+    const errors = {};
+    for (const p of value) {
+        if (!p.firstName.trim())
+            errors[p.passengerId] = "First name required";
+        else if (!p.lastName.trim())
+            errors[p.passengerId] = "Last name required";
+        else if (!p.dateOfBirth)
+            errors[p.passengerId] = "Date of birth required";
+        else {
+            const doc = p.documents?.[0];
+            if (doc) {
+                if (!doc.number.trim())
+                    errors[p.passengerId] = "Document number required";
+                else if (!doc.countryOfIssue.trim())
+                    errors[p.passengerId] = "Document country required";
+                else if (!doc.expiryDate)
+                    errors[p.passengerId] = "Document expiry required";
+            }
+        }
+    }
+    return errors;
+}

package/dist/components/flight-payment-selector.d.ts

@@ -0,0 +1,13 @@
+import type { PaymentIntent } from "@voyantjs/flights/contract/types";
+export interface FlightPaymentSelectorProps {
+    value: PaymentIntent;
+    onChange: (next: PaymentIntent) => void;
+    /**
+     * Which intents to show. Defaults to all three. Hide options the
+     * configured connector doesn't declare (e.g. drop `hold` when
+     * `flight/holds` capability isn't declared).
+     */
+    available?: Array<PaymentIntent["type"]>;
+}
+export declare function FlightPaymentSelector({ value, onChange, available }: FlightPaymentSelectorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=flight-payment-selector.d.ts.map

package/dist/components/flight-payment-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flight-payment-selector.d.ts","sourceRoot":"","sources":["../../src/components/flight-payment-selector.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAA;AAKrE,MAAM,WAAW,0BAA0B;IACzC,KAAK,EAAE,aAAa,CAAA;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAA;IACvC;;;;OAIG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAA;CACzC;AAqCD,wBAAgB,qBAAqB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,0BAA0B,2CAqD/F"}

package/dist/components/flight-payment-selector.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@voyantjs/ui/lib/utils";
+import { Banknote, Clock, CreditCard } from "lucide-react";
+const INTENTS = [
+    {
+        id: "hold",
+        title: "Hold seats — pay later",
+        description: "Confirms the booking now and locks in the price for the connector's hold window. Tickets issue when payment lands.",
+        icon: _jsx(Clock, { className: "h-5 w-5" }),
+        build: () => ({ type: "hold" }),
+    },
+    {
+        id: "card",
+        title: "Pay by card",
+        description: "Tickets issue immediately. Card details handled outside this form by the connector's tokenization flow.",
+        icon: _jsx(CreditCard, { className: "h-5 w-5" }),
+        build: () => ({ type: "card", token: "demo_card_token" }),
+    },
+    {
+        id: "ticket_on_credit",
+        title: "Ticket on agency credit",
+        description: "Issue against the operator's IATA office credit line. Settles via BSP in the next reporting cycle.",
+        icon: _jsx(Banknote, { className: "h-5 w-5" }),
+        build: () => ({ type: "ticket_on_credit" }),
+    },
+];
+export function FlightPaymentSelector({ value, onChange, available }) {
+    const visibleIntents = available ? INTENTS.filter((i) => available.includes(i.id)) : INTENTS;
+    return (_jsxs("div", { className: "rounded-lg border bg-card p-4 shadow-sm", children: [_jsx("h3", { className: "mb-3 font-medium text-sm", children: "Payment intent" }), _jsx("p", { className: "mb-4 text-xs text-muted-foreground", children: "How the booking should be paid. Hold lets you confirm seats now and ticket later; card / on-credit issue tickets immediately." }), _jsx("div", { role: "radiogroup", className: "flex flex-col gap-2", children: visibleIntents.map((intent) => {
+                    const isSelected = value.type === intent.id;
+                    return (_jsxs("button", { type: "button", role: "radio", "aria-checked": isSelected, onClick: () => onChange(intent.build()), className: cn("flex w-full items-start gap-3 rounded-lg border p-3 text-left transition-colors", isSelected ? "border-primary/40 bg-primary/5" : "border-border hover:bg-accent/30"), children: [_jsx("div", { className: cn("shrink-0 rounded-md border p-2", isSelected
+                                    ? "border-primary/30 bg-primary text-primary-foreground"
+                                    : "border-border bg-muted text-muted-foreground"), children: intent.icon }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx("span", { className: "text-sm font-medium", children: intent.title }), _jsx("span", { className: "text-xs text-muted-foreground", children: intent.description })] }), _jsx("div", { className: cn("mt-1 h-4 w-4 shrink-0 rounded-full border-2", isSelected ? "border-primary bg-primary" : "border-border"), "aria-hidden": true })] }, intent.id));
+                }) })] }));
+}

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

@@ -0,0 +1,32 @@
+import { type PaymentStepCapabilities, type SavedPaymentAccount } from "@voyantjs/checkout-ui";
+import type { PaymentIntent } from "@voyantjs/flights/contract/types";
+export type { PaymentStepCapabilities, SavedPaymentAccount };
+/** Back-compat alias — older callers used this name; same shape. */
+export type SavedPaymentMethod = SavedPaymentAccount;
+export interface FlightPaymentStepProps {
+    /** Flight-contract intent — kept for back-compat with the booking shell. */
+    value: PaymentIntent;
+    onChange: (next: PaymentIntent) => void;
+    /** Saved methods for the picked person — empty array when none on file. */
+    savedMethods: SavedPaymentAccount[];
+    loadingSavedMethods?: boolean;
+    /** Currently selected saved method id (mirror of state held in the parent). */
+    selectedSavedId: string | null;
+    onSelectSaved: (id: string | null) => void;
+    /**
+     * What the active processor / template actually offers for immediate
+     * charge flows (`chargeSavedCard`, `newCard`). Hold and the
+     * "Issue on agency credit" extra are always rendered.
+     *
+     * See `docs/architecture/payments-architecture.md` §Core Rule 7.
+     */
+    capabilities?: PaymentStepCapabilities;
+}
+/**
+ * Flight-vertical wrapper around `<PaymentStep>` from `@voyantjs/checkout-ui`.
+ * Maps the universal `PaymentChoice` event into the flight contract's
+ * `PaymentIntent` shape, and contributes the "Issue ticket on agency
+ * credit" extra option (flight-specific).
+ */
+export declare function FlightPaymentStep({ value, onChange, savedMethods, loadingSavedMethods, selectedSavedId, onSelectSaved, capabilities, }: FlightPaymentStepProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=flight-payment-step.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flight-payment-step.d.ts","sourceRoot":"","sources":["../../src/components/flight-payment-step.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,uBAAuB,EAE5B,KAAK,mBAAmB,EACzB,MAAM,uBAAuB,CAAA;AAC9B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAA;AAMrE,YAAY,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,CAAA;AAC5D,oEAAoE;AACpE,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAA;AAEpD,MAAM,WAAW,sBAAsB;IACrC,4EAA4E;IAC5E,KAAK,EAAE,aAAa,CAAA;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAA;IACvC,2EAA2E;IAC3E,YAAY,EAAE,mBAAmB,EAAE,CAAA;IACnC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,+EAA+E;IAC/E,eAAe,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC1C;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,uBAAuB,CAAA;CACvC;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,mBAAmB,EACnB,eAAe,EACf,aAAa,EACb,YAAY,GACb,EAAE,sBAAsB,2CAoDxB"}

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

@@ -0,0 +1,82 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PaymentStep, } from "@voyantjs/checkout-ui";
+import { Landmark } from "lucide-react";
+import { useMemo } from "react";
+/**
+ * Flight-vertical wrapper around `<PaymentStep>` from `@voyantjs/checkout-ui`.
+ * Maps the universal `PaymentChoice` event into the flight contract's
+ * `PaymentIntent` shape, and contributes the "Issue ticket on agency
+ * credit" extra option (flight-specific).
+ */
+export function FlightPaymentStep({ value, onChange, savedMethods, loadingSavedMethods, selectedSavedId, onSelectSaved, capabilities, }) {
+    const choice = useMemo(() => intentToChoice(value, savedMethods, selectedSavedId), [value, savedMethods, selectedSavedId]);
+    return (_jsx(PaymentStep, { value: choice, onChange: (next) => {
+            if (!next) {
+                onChange({ type: "hold" });
+                onSelectSaved(null);
+                return;
+            }
+            if (next.type === "saved_method") {
+                onSelectSaved(next.method.id);
+                // The CRM `processor_token` for the method isn't on the
+                // PublicPaymentAccount projection. The vertical wrapper here
+                // emits a placeholder token derived from the account id; the
+                // parent is expected to call `useInitiateCheckoutCollection`
+                // with `paymentInstrumentId: next.method.id` rather than
+                // relying on the flight `PaymentIntent.token` field.
+                onChange({
+                    type: "card",
+                    token: `acct:${next.method.id}`,
+                });
+                return;
+            }
+            onSelectSaved(null);
+            if (next.type === "new_card") {
+                onChange({
+                    type: "card",
+                    token: next.cardToken,
+                    ...(next.cardholderName ? { cardholderName: next.cardholderName } : {}),
+                });
+                return;
+            }
+            if (next.type === "extra" && next.optionId === EXTRA_AGENCY_CREDIT.id) {
+                onChange({ type: "ticket_on_credit" });
+                return;
+            }
+            // `hold` at the contract level — the parent's order-creation flow
+            // produces a payment session + landing URL the operator shares.
+            onChange({ type: "hold" });
+        }, capabilities: capabilities ?? {}, savedMethods: savedMethods, loadingSavedMethods: loadingSavedMethods, extraOptions: FLIGHT_EXTRA_OPTIONS }));
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// Flight-specific extras
+// ─────────────────────────────────────────────────────────────────────────────
+const EXTRA_AGENCY_CREDIT = {
+    id: "ticket_on_credit",
+    label: "Issue ticket on agency credit",
+    description: "Bill against the agency's IATA / consolidator credit line.",
+    icon: _jsx(Landmark, { className: "h-4 w-4 text-muted-foreground" }),
+};
+const FLIGHT_EXTRA_OPTIONS = [EXTRA_AGENCY_CREDIT];
+// ─────────────────────────────────────────────────────────────────────────────
+// PaymentIntent ⇄ PaymentChoice translation
+// ─────────────────────────────────────────────────────────────────────────────
+function intentToChoice(intent, savedMethods, selectedSavedId) {
+    if (intent.type === "ticket_on_credit") {
+        return { type: "extra", optionId: EXTRA_AGENCY_CREDIT.id };
+    }
+    if (intent.type === "card") {
+        if (selectedSavedId) {
+            const method = savedMethods.find((m) => m.id === selectedSavedId);
+            if (method)
+                return { type: "saved_method", method };
+        }
+        return {
+            type: "new_card",
+            cardToken: intent.token,
+            ...(intent.cardholderName ? { cardholderName: intent.cardholderName } : {}),
+        };
+    }
+    return { type: "hold" };
+}

package/dist/components/flight-search-form.d.ts

@@ -0,0 +1,14 @@
+import type { FlightSearchRequest } from "@voyantjs/flights/contract/types";
+export type TripType = "one_way" | "round_trip";
+export interface FlightSearchFormProps {
+    /** Called when the user submits a complete search. */
+    onSearch: (request: FlightSearchRequest) => void;
+    /** Disable the submit button (e.g. while a search is in flight). */
+    loading?: boolean;
+    /** Optional initial values. */
+    initial?: Partial<FlightSearchRequest> & {
+        tripType?: TripType;
+    };
+}
+export declare function FlightSearchForm({ onSearch, loading, initial }: FlightSearchFormProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=flight-search-form.d.ts.map

package/dist/components/flight-search-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flight-search-form.d.ts","sourceRoot":"","sources":["../../src/components/flight-search-form.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAEV,mBAAmB,EAGpB,MAAM,kCAAkC,CAAA;AAUzC,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,YAAY,CAAA;AAE/C,MAAM,WAAW,qBAAqB;IACpC,sDAAsD;IACtD,QAAQ,EAAE,CAAC,OAAO,EAAE,mBAAmB,KAAK,IAAI,CAAA;IAChD,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,GAAG;QAAE,QAAQ,CAAC,EAAE,QAAQ,CAAA;KAAE,CAAA;CACjE;AAED,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,qBAAqB,2CAmIrF"}

package/dist/components/flight-search-form.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@voyantjs/ui/components/button";
+import { DatePicker } from "@voyantjs/ui/components/date-picker";
+import { ToggleGroup, ToggleGroupItem } from "@voyantjs/ui/components/toggle-group";
+import { ArrowLeftRight, Search } from "lucide-react";
+import { useState } from "react";
+import { AirportCombobox } from "./airport-combobox";
+import { PaxCabinPopover } from "./pax-cabin-popover";
+export function FlightSearchForm({ onSearch, loading, initial }) {
+    const initialSlices = initial?.slices ?? [];
+    const [tripType, setTripType] = useState(initial?.tripType ?? (initialSlices.length === 2 ? "round_trip" : "one_way"));
+    const [origin, setOrigin] = useState(initialSlices[0]?.origin ?? null);
+    const [destination, setDestination] = useState(initialSlices[0]?.destination ?? null);
+    const [departureDate, setDepartureDate] = useState(initialSlices[0]?.departureDate ?? null);
+    const [returnDate, setReturnDate] = useState(initialSlices[1]?.departureDate ?? null);
+    const initialPax = initial?.passengers ?? {
+        adults: 1,
+        children: 0,
+        infants: 0,
+    };
+    const [passengers, setPassengers] = useState(initialPax);
+    const [cabin, setCabin] = useState(initial?.cabin ?? "economy");
+    const swap = () => {
+        const o = origin;
+        setOrigin(destination);
+        setDestination(o);
+    };
+    const ready = origin != null &&
+        destination != null &&
+        departureDate != null &&
+        (tripType === "one_way" || returnDate != null) &&
+        passengers.adults > 0;
+    const submit = (e) => {
+        e.preventDefault();
+        if (!ready || origin == null || destination == null || departureDate == null)
+            return;
+        const slices = [{ origin, destination, departureDate }];
+        if (tripType === "round_trip" && returnDate) {
+            slices.push({
+                origin: destination,
+                destination: origin,
+                departureDate: returnDate,
+            });
+        }
+        onSearch({ slices, passengers, cabin });
+    };
+    return (_jsx("form", { onSubmit: submit, className: "rounded-xl border bg-card px-5 py-5 shadow-sm", children: _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsxs(ToggleGroup, { size: "lg", value: [tripType], onValueChange: (v) => {
+                        const next = v[0];
+                        if (next)
+                            setTripType(next);
+                    }, children: [_jsx(ToggleGroupItem, { size: "lg", value: "round_trip", children: "Round-trip" }), _jsx(ToggleGroupItem, { size: "lg", value: "one_way", children: "One-way" })] }), _jsxs("div", { className: "flex flex-1 items-center gap-1", children: [_jsx(AirportCombobox, { value: origin, onChange: setOrigin, placeholder: "From", className: "flex-1" }), _jsx(Button, { type: "button", variant: "outline", size: "icon", onClick: swap, "aria-label": "Swap origin and destination", className: "size-10 shrink-0", children: _jsx(ArrowLeftRight, { className: "h-4 w-4" }) }), _jsx(AirportCombobox, { value: destination, onChange: setDestination, placeholder: "To", className: "flex-1" })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(DatePicker, { value: departureDate, onChange: setDepartureDate, placeholder: "Depart", className: "h-10 flex-1 min-w-32" }), _jsx(DatePicker, { value: returnDate, onChange: setReturnDate, placeholder: "Return", disabled: tripType === "one_way", className: "h-10 flex-1 min-w-32" })] }), _jsx(PaxCabinPopover, { passengers: passengers, cabin: cabin, onChange: (next) => {
+                        setPassengers(next.passengers);
+                        setCabin(next.cabin);
+                    } }), _jsxs(Button, { type: "submit", size: "lg", disabled: !ready || loading, className: "shrink-0 px-6", children: [_jsx(Search, { className: "mr-2 h-4 w-4" }), loading ? "Searching…" : "Search"] })] }) }));
+}

package/dist/components/flight-seat-map.d.ts

@@ -0,0 +1,32 @@
+import type { Seat, SeatMap } from "@voyantjs/flights/contract/types";
+/**
+ * Marker rendered on top of a seat to indicate which passenger picked it.
+ * Letter is typically the pax index (1, 2, 3) or initial.
+ */
+export interface SeatPickMarker {
+    seatNumber: string;
+    /** Single character / short label shown on the seat tile. */
+    label: string;
+    /** Tailwind colour utility group, e.g. "bg-primary text-primary-foreground". */
+    swatch?: string;
+}
+export interface FlightSeatMapProps {
+    seatMap: SeatMap;
+    /** Active pick markers — typically one per passenger that picked a seat. */
+    picks: SeatPickMarker[];
+    /** Click handler — invoked with the seat that was clicked (or null on blocked). */
+    onSeatClick?: (seat: Seat) => void;
+    /** Marker shown on the row currently being assigned (e.g. "Adult 1"). */
+    highlightedPaxLabel?: string;
+    className?: string;
+}
+/**
+ * Visual seat map. Renders each row of the aircraft using the supplied
+ * `columnLayout` (with `null` slots becoming aisles), each seat as a
+ * clickable tile colour-coded by status + category. Pick markers overlay
+ * the seat to indicate which passenger has that seat.
+ *
+ * Pure presentational — state lives in the parent step.
+ */
+export declare function FlightSeatMap({ seatMap, picks, onSeatClick, highlightedPaxLabel, className, }: FlightSeatMapProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=flight-seat-map.d.ts.map

package/dist/components/flight-seat-map.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flight-seat-map.d.ts","sourceRoot":"","sources":["../../src/components/flight-seat-map.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAA;AAUrE;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,MAAM,CAAA;IAClB,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAA;IACb,gFAAgF;IAChF,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,OAAO,CAAA;IAChB,4EAA4E;IAC5E,KAAK,EAAE,cAAc,EAAE,CAAA;IACvB,mFAAmF;IACnF,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IAClC,yEAAyE;IACzE,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,KAAK,EACL,WAAW,EACX,mBAAmB,EACnB,SAAS,GACV,EAAE,kBAAkB,2CA0BpB"}