@voyant-travel/flights-react 0.119.2

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

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@voyant-travel/ui/lib/utils";
+import { Banknote, Clock, CreditCard } from "lucide-react";
+import { useFlightsUiMessagesOrDefault } from "../i18n/index.js";
+const INTENTS = [
+    {
+        id: "hold",
+        icon: _jsx(Clock, { className: "h-5 w-5" }),
+        build: () => ({ type: "hold" }),
+    },
+    {
+        id: "card",
+        icon: _jsx(CreditCard, { className: "h-5 w-5" }),
+        build: () => ({ type: "card", token: "demo_card_token" }),
+    },
+    {
+        id: "ticket_on_credit",
+        icon: _jsx(Banknote, { className: "h-5 w-5" }),
+        build: () => ({ type: "ticket_on_credit" }),
+    },
+];
+export function FlightPaymentSelector({ value, onChange, available }) {
+    const messages = useFlightsUiMessagesOrDefault().flightPaymentSelector;
+    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: messages.title }), _jsx("p", { className: "mb-4 text-xs text-muted-foreground", children: messages.description }), _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: messages.intents[intent.id].title }), _jsx("span", { className: "text-xs text-muted-foreground", children: messages.intents[intent.id].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 "@voyant-travel/finance-react/checkout-ui";
+import type { PaymentIntent } from "@voyant-travel/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 `@voyant-travel/finance-react/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,0CAA0C,CAAA;AACjD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAA;AAO1E,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,2CAkExB"}

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

@@ -0,0 +1,81 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PaymentStep, } from "@voyant-travel/finance-react/checkout-ui";
+import { Landmark } from "lucide-react";
+import { useMemo } from "react";
+import { useFlightsUiMessagesOrDefault } from "../i18n/index.js";
+/**
+ * Flight-vertical wrapper around `<PaymentStep>` from `@voyant-travel/finance-react/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 messages = useFlightsUiMessagesOrDefault().flightPaymentStep;
+    const extraAgencyCredit = useMemo(() => ({
+        id: "ticket_on_credit",
+        label: messages.agencyCreditLabel,
+        description: messages.agencyCreditDescription,
+        icon: _jsx(Landmark, { className: "h-4 w-4 text-muted-foreground" }),
+    }), [messages]);
+    const extraOptions = useMemo(() => [extraAgencyCredit], [extraAgencyCredit]);
+    const choice = useMemo(() => intentToChoice(value, savedMethods, selectedSavedId, extraAgencyCredit.id), [value, savedMethods, selectedSavedId, extraAgencyCredit.id]);
+    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 === extraAgencyCredit.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: extraOptions }));
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// PaymentIntent ⇄ PaymentChoice translation
+// ─────────────────────────────────────────────────────────────────────────────
+function intentToChoice(intent, savedMethods, selectedSavedId, agencyCreditOptionId) {
+    if (intent.type === "ticket_on_credit") {
+        return { type: "extra", optionId: agencyCreditOptionId };
+    }
+    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 "@voyant-travel/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,uCAAuC,CAAA;AAU9C,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,2CAoIrF"}

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

@@ -0,0 +1,58 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@voyant-travel/ui/components/button";
+import { DatePicker } from "@voyant-travel/ui/components/date-picker";
+import { ToggleGroup, ToggleGroupItem } from "@voyant-travel/ui/components/toggle-group";
+import { ArrowLeftRight, Search } from "lucide-react";
+import { useState } from "react";
+import { useFlightsUiMessagesOrDefault } from "../i18n/index.js";
+import { AirportCombobox } from "./airport-combobox.js";
+import { PaxCabinPopover } from "./pax-cabin-popover.js";
+export function FlightSearchForm({ onSearch, loading, initial }) {
+    const messages = useFlightsUiMessagesOrDefault().flightSearchForm;
+    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: messages.roundTrip }), _jsx(ToggleGroupItem, { size: "lg", value: "one_way", children: messages.oneWay })] }), _jsxs("div", { className: "flex flex-1 items-center gap-1", children: [_jsx(AirportCombobox, { value: origin, onChange: setOrigin, placeholder: messages.fromPlaceholder, className: "flex-1" }), _jsx(Button, { type: "button", variant: "outline", size: "icon", onClick: swap, "aria-label": messages.swapAriaLabel, className: "size-10 shrink-0", children: _jsx(ArrowLeftRight, { className: "h-4 w-4" }) }), _jsx(AirportCombobox, { value: destination, onChange: setDestination, placeholder: messages.toPlaceholder, className: "flex-1" })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(DatePicker, { value: departureDate, onChange: setDepartureDate, placeholder: messages.departPlaceholder, className: "h-10 flex-1 min-w-32" }), _jsx(DatePicker, { value: returnDate, onChange: setReturnDate, placeholder: messages.returnPlaceholder, 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 ? messages.searching : messages.search] })] }) }));
+}

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

@@ -0,0 +1,32 @@
+import type { Seat, SeatMap } from "@voyant-travel/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,uCAAuC,CAAA;AAY1E;;;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,2CA6BpB"}

package/dist/components/flight-seat-map.js

@@ -0,0 +1,101 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatMessage } from "@voyant-travel/i18n";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@voyant-travel/ui/components/tooltip";
+import { cn } from "@voyant-travel/ui/lib/utils";
+import { Plane } from "lucide-react";
+import { useFlightsUiMessagesOrDefault } from "../i18n/index.js";
+/**
+ * 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 function FlightSeatMap({ seatMap, picks, onSeatClick, highlightedPaxLabel, className, }) {
+    const messages = useFlightsUiMessagesOrDefault();
+    const aircraftName = seatMap.providerData?.aircraftName ?? seatMap.aircraft;
+    return (_jsx(TooltipProvider, { delay: 200, children: _jsxs("div", { className: cn("flex flex-col items-center gap-3", className), children: [_jsxs("div", { className: "flex items-center gap-2 text-muted-foreground text-xs", children: [_jsx(Plane, { className: "h-3.5 w-3.5" }), aircraftName ?? messages.flightSeatMap.cabin, highlightedPaxLabel && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-foreground/60", children: "\u00B7" }), _jsx("span", { className: "text-foreground", children: formatMessage(messages.flightSeatMap.pickingSeatFor, {
+                                        passenger: highlightedPaxLabel,
+                                    }) })] }))] }), _jsx("div", { className: "rounded-2xl border bg-card p-4", children: _jsx(Cabin, { seatMap: seatMap, picks: picks, onSeatClick: onSeatClick, messages: messages }) }), _jsx(Legend, { messages: messages })] }) }));
+}
+// ─────────────────────────────────────────────────────────────────────────────
+function Cabin({ seatMap, picks, onSeatClick, messages, }) {
+    const layout = seatMap.columnLayout;
+    const pickIndex = new Map(picks.map((p) => [p.seatNumber, p]));
+    return (_jsxs("div", { className: "flex flex-col items-center gap-1", children: [_jsx(ColumnHeader, { layout: layout }), seatMap.rows.map((row) => (_jsx(SeatRowView, { rowNumber: row.row, layout: layout, seats: row.seats, pickIndex: pickIndex, onSeatClick: onSeatClick, messages: messages }, row.row)))] }));
+}
+function ColumnHeader({ layout }) {
+    return (_jsxs("div", { className: "mb-1 flex items-center gap-1", children: [_jsx("span", { className: "w-6 shrink-0 text-center font-mono text-[10px] text-muted-foreground" }), layout.map((col, i) => col == null ? (_jsx("div", { className: "w-3 shrink-0" }, `gap-${i}`)) : (_jsx("span", { className: "w-7 shrink-0 text-center font-mono text-[10px] text-muted-foreground", children: col }, `col-${i}`)))] }));
+}
+function SeatRowView({ rowNumber, layout, seats, pickIndex, onSeatClick, messages, }) {
+    const seatByCol = new Map(seats.map((s) => [s.column, s]));
+    return (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { className: "w-6 shrink-0 text-center font-mono text-[10px] text-muted-foreground tabular-nums", children: rowNumber }), layout.map((col, i) => {
+                if (col == null) {
+                    return (_jsx("div", { className: "w-3 shrink-0" }, `aisle-${rowNumber}-${i}`));
+                }
+                const seat = seatByCol.get(col);
+                if (!seat) {
+                    return (_jsx("div", { className: "h-7 w-7 shrink-0 rounded-md border border-dashed border-muted/30" }, `gap-${rowNumber}-${i}`));
+                }
+                return (_jsx(SeatTile, { seat: seat, pick: pickIndex.get(seat.seatNumber) ?? null, onClick: onSeatClick, messages: messages }, seat.seatNumber));
+            })] }));
+}
+function SeatTile({ seat, pick, onClick, messages, }) {
+    const isClickable = !!onClick && (seat.status === "available" || seat.status === "selected" || pick != null);
+    const tile = (_jsxs("button", { type: "button", disabled: !isClickable, onClick: onClick ? () => onClick(seat) : undefined, className: cn("relative flex h-7 w-7 shrink-0 items-center justify-center rounded-md border font-mono text-[10px] transition-colors", seat.status === "available" && categoryClasses(seat.category), seat.status === "blocked" && "cursor-not-allowed border-transparent bg-muted/60", seat.status === "unavailable" && "cursor-not-allowed border-transparent bg-muted/30", pick && (pick.swatch ?? "bg-primary text-primary-foreground border-primary"), isClickable && !pick && "hover:border-primary hover:bg-primary/5"), children: [pick ? _jsx("span", { className: "font-semibold", children: pick.label }) : null, seat.category === "exit_row" && !pick && (_jsx("span", { className: "absolute top-0 right-0 text-[7px] font-bold leading-none text-amber-600", children: "E" }))] }));
+    if (!isClickable && seat.status !== "available")
+        return tile;
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: tile }), _jsx(TooltipContent, { className: "max-w-[220px]", children: _jsx(SeatTooltip, { seat: seat, pickedBy: pick?.label, messages: messages }) })] }));
+}
+function SeatTooltip({ seat, pickedBy, messages, }) {
+    return (_jsxs("div", { className: "flex flex-col gap-1 text-xs", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "font-mono font-semibold", children: seat.seatNumber }), _jsxs("span", { className: "text-muted-foreground", children: [humanCategory(seat.category, messages), seat.window && ` · ${messages.flightSeatMap.window}`, seat.aisle && ` · ${messages.flightSeatMap.aisle}`] })] }), seat.price ? (_jsxs("span", { className: "font-medium", children: ["+", formatMoney(seat.price.amount, seat.price.currency)] })) : (_jsx("span", { className: "text-muted-foreground", children: messages.flightSeatMap.noCharge })), seat.notes && _jsx("span", { className: "text-muted-foreground", children: seat.notes }), pickedBy && (_jsx("span", { className: "text-primary", children: formatMessage(messages.flightSeatMap.pickedBy, { passenger: pickedBy }) }))] }));
+}
+function Legend({ messages }) {
+    return (_jsxs("div", { className: "flex flex-wrap items-center justify-center gap-3 text-[11px] text-muted-foreground", children: [_jsx(LegendChip, { className: "border-emerald-500/60 bg-card", label: messages.flightSeatMap.legend.available }), _jsx(LegendChip, { className: "border-cyan-500/60 bg-cyan-500/5", label: messages.flightSeatMap.legend.preferred }), _jsx(LegendChip, { className: "border-amber-500/60 bg-amber-500/5", label: messages.flightSeatMap.legend.exitRow }), _jsx(LegendChip, { className: "bg-primary text-primary-foreground", label: messages.flightSeatMap.legend.picked }), _jsx(LegendChip, { className: "bg-muted/60", label: messages.flightSeatMap.legend.taken })] }));
+}
+function LegendChip({ className, label }) {
+    return (_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: cn("h-3.5 w-3.5 rounded-sm border", className) }), label] }));
+}
+// ── Helpers ──────────────────────────────────────────────────────────────────
+function categoryClasses(category) {
+    switch (category) {
+        case "exit_row":
+            return "border-amber-500/60 bg-amber-500/5 text-amber-700";
+        case "preferred":
+        case "extra_legroom":
+            return "border-cyan-500/60 bg-cyan-500/5 text-cyan-700";
+        case "premium":
+        case "bulkhead":
+            return "border-violet-500/60 bg-violet-500/5 text-violet-700";
+        default:
+            return "border-emerald-500/60 bg-card text-emerald-700";
+    }
+}
+function humanCategory(c, messages) {
+    switch (c) {
+        case "exit_row":
+            return messages.flightSeatMap.categories.exit_row;
+        case "extra_legroom":
+            return messages.flightSeatMap.categories.extra_legroom;
+        case "preferred":
+            return messages.flightSeatMap.categories.preferred;
+        case "premium":
+            return messages.flightSeatMap.categories.premium;
+        case "bulkhead":
+            return messages.flightSeatMap.categories.bulkhead;
+        default:
+            return messages.flightSeatMap.categories.standard;
+    }
+}
+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);
+}

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

@@ -0,0 +1,40 @@
+import type { AncillarySelection, FlightOffer, FlightPassenger, PassengerCounts, SeatMap } from "@voyant-travel/flights/contract/types";
+type SeatPicks = NonNullable<AncillarySelection["seats"]>;
+type SeatMode = "skip" | "auto" | "now";
+/**
+ * Per-segment seat map fetcher contract. The step calls this with the
+ * segment id once the user enters "pick now" mode for a given segment;
+ * the parent owns the actual TanStack Query call.
+ */
+export interface FlightSeatMapSlot {
+    /** Map for this segment, or null while loading / errored. */
+    seatMap: SeatMap | null;
+    loading?: boolean;
+    error?: string | null;
+}
+export interface FlightSeatsStepProps {
+    outboundOffer: FlightOffer;
+    returnOffer?: FlightOffer;
+    passengers: FlightPassenger[];
+    passengerCounts: PassengerCounts;
+    /** Map fetcher invoked with each segment id the user navigates to. */
+    getSeatMap: (segment: {
+        offerId: string;
+        segmentId: string;
+    }) => FlightSeatMapSlot;
+    value: SeatPicks;
+    onChange: (next: SeatPicks) => void;
+    /** Tri-option mode the user has chosen — "skip" / "auto" / "now". */
+    mode: SeatMode;
+    onModeChange: (next: SeatMode) => void;
+}
+/**
+ * Wizz-style seat selection step. Tri-option gate up top (Skip / Auto-assign
+ * / Pick now) — the first two short-circuit straight to the next step. When
+ * the user opens "pick now", they get per-segment tabs and a per-passenger
+ * row showing each pax's currently picked seat (or "select"). Clicking a
+ * seat assigns it to the active passenger and moves the cursor on.
+ */
+export declare function FlightSeatsStep({ outboundOffer, returnOffer, passengers, passengerCounts, getSeatMap, value, onChange, mode, onModeChange, }: FlightSeatsStepProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=flight-seats-step.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"flight-seats-step.d.ts","sourceRoot":"","sources":["../../src/components/flight-seats-step.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,kBAAkB,EAClB,WAAW,EACX,eAAe,EAEf,eAAe,EAEf,OAAO,EACR,MAAM,uCAAuC,CAAA;AAO9C,KAAK,SAAS,GAAG,WAAW,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,CAAA;AAEzD,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK,CAAA;AAEvC;;;;GAIG;AACH,MAAM,WAAW,iBAAiB;IAChC,6DAA6D;IAC7D,OAAO,EAAE,OAAO,GAAG,IAAI,CAAA;IACvB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACtB;AAED,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,WAAW,CAAA;IAC1B,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,UAAU,EAAE,eAAe,EAAE,CAAA;IAC7B,eAAe,EAAE,eAAe,CAAA;IAChC,sEAAsE;IACtE,UAAU,EAAE,CAAC,OAAO,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,iBAAiB,CAAA;IAClF,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACnC,qEAAqE;IACrE,IAAI,EAAE,QAAQ,CAAA;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAA;CACvC;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,EAC9B,aAAa,EACb,WAAW,EACX,UAAU,EACV,eAAe,EACf,UAAU,EACV,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,YAAY,GACb,EAAE,oBAAoB,2CAwGtB"}

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

@@ -0,0 +1,214 @@
+// agent-quality: file-size exception -- owner: flights-react; existing UI surface stays co-located until a dedicated split preserves behavior and tests.
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "@voyant-travel/ui/lib/utils";
+import { CheckCircle2, X } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { useFlightsUiMessagesOrDefault } from "../i18n/index.js";
+import { FlightSeatMap } from "./flight-seat-map.js";
+/**
+ * Wizz-style seat selection step. Tri-option gate up top (Skip / Auto-assign
+ * / Pick now) — the first two short-circuit straight to the next step. When
+ * the user opens "pick now", they get per-segment tabs and a per-passenger
+ * row showing each pax's currently picked seat (or "select"). Clicking a
+ * seat assigns it to the active passenger and moves the cursor on.
+ */
+export function FlightSeatsStep({ outboundOffer, returnOffer, passengers, passengerCounts, getSeatMap, value, onChange, mode, onModeChange, }) {
+    const messages = useFlightsUiMessagesOrDefault();
+    const segments = useMemo(() => collectSegments(outboundOffer, returnOffer, messages), [outboundOffer, returnOffer, messages]);
+    const paxRows = useMemo(() => buildPassengerRows(passengers, passengerCounts, messages), [passengers, passengerCounts, messages]);
+    const [activeSegmentIdx, setActiveSegmentIdx] = useState(0);
+    const [activePaxIdx, setActivePaxIdx] = useState(0);
+    // Auto-advance to the next pax once a seat is picked for the current one.
+    useEffect(() => {
+        if (mode !== "now")
+            return;
+        const segId = segments[activeSegmentIdx]?.segmentId;
+        if (!segId)
+            return;
+        const pickedAll = paxRows.length > 0 &&
+            paxRows.every((p) => value.some((v) => v.passengerId === p.passengerId && v.segmentId === segId));
+        if (pickedAll) {
+            // All pax picked for this segment — advance to next segment if any.
+            if (activeSegmentIdx < segments.length - 1) {
+                setActiveSegmentIdx((i) => i + 1);
+                setActivePaxIdx(0);
+            }
+        }
+    }, [value, segments, activeSegmentIdx, paxRows, mode]);
+    const activeSegment = segments[activeSegmentIdx] ?? null;
+    return (_jsxs("div", { className: "flex flex-col gap-5", children: [_jsxs("div", { children: [_jsx("h2", { className: "font-semibold text-base", children: messages.flightSeatsStep.title }), _jsx("p", { className: "text-muted-foreground text-sm", children: messages.flightSeatsStep.description })] }), _jsx(ModePicker, { mode: mode, onChange: onModeChange, messages: messages }), mode === "now" && activeSegment && (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(SegmentTabs, { segments: segments, activeIdx: activeSegmentIdx, paxCount: paxRows.length, picks: value, onChange: (idx) => {
+                            setActiveSegmentIdx(idx);
+                            setActivePaxIdx(0);
+                        } }), _jsx(PaxBar, { paxRows: paxRows, activeIdx: activePaxIdx, picks: value, segmentId: activeSegment.segmentId, onActivate: setActivePaxIdx, onClear: (passengerId) => {
+                            onChange(value.filter((v) => !(v.passengerId === passengerId && v.segmentId === activeSegment.segmentId)));
+                        } }), _jsx(SeatMapPanel, { slot: getSeatMap({
+                            offerId: activeSegment.offerId,
+                            segmentId: activeSegment.segmentId,
+                        }), paxRows: paxRows, activePaxIdx: activePaxIdx, picks: value, segmentId: activeSegment.segmentId, messages: messages, onPick: (seat) => {
+                            const pax = paxRows[activePaxIdx];
+                            if (!pax)
+                                return;
+                            const filtered = value.filter((v) => !(v.passengerId === pax.passengerId && v.segmentId === activeSegment.segmentId));
+                            onChange([
+                                ...filtered,
+                                {
+                                    passengerId: pax.passengerId,
+                                    segmentId: activeSegment.segmentId,
+                                    seatNumber: seat.seatNumber,
+                                },
+                            ]);
+                        } })] }))] }));
+}
+const PAX_SWATCHES = [
+    "bg-primary text-primary-foreground border-primary",
+    "bg-violet-600 text-white border-violet-700",
+    "bg-amber-600 text-white border-amber-700",
+    "bg-rose-600 text-white border-rose-700",
+    "bg-teal-600 text-white border-teal-700",
+    "bg-indigo-600 text-white border-indigo-700",
+];
+function ModePicker({ mode, onChange, messages, }) {
+    return (_jsxs("div", { className: "grid gap-2 md:grid-cols-3", children: [_jsx(ModeCard, { active: mode === "skip", onClick: () => onChange("skip"), title: messages.flightSeatsStep.modes.skip.title, body: messages.flightSeatsStep.modes.skip.body }), _jsx(ModeCard, { active: mode === "auto", onClick: () => onChange("auto"), title: messages.flightSeatsStep.modes.auto.title, body: messages.flightSeatsStep.modes.auto.body, recommended: true, messages: messages }), _jsx(ModeCard, { active: mode === "now", onClick: () => onChange("now"), title: messages.flightSeatsStep.modes.now.title, body: messages.flightSeatsStep.modes.now.body })] }));
+}
+function ModeCard({ active, onClick, title, body, recommended, messages, }) {
+    return (_jsxs("button", { type: "button", onClick: onClick, className: cn("relative flex flex-col items-start gap-1 rounded-lg border bg-card p-4 text-left transition-colors", active ? "border-primary ring-2 ring-primary/20" : "hover:border-primary/40"), children: [recommended && (_jsx("span", { className: "absolute top-2 right-2 rounded-full bg-primary/10 px-2 py-0.5 font-medium text-[9px] text-primary uppercase tracking-wider", children: messages?.common.recommended })), active && _jsx(CheckCircle2, { className: "absolute top-3 right-3 h-4 w-4 text-primary" }), _jsx("span", { className: "font-medium text-sm", children: title }), _jsx("span", { className: "text-muted-foreground text-xs", children: body })] }));
+}
+function SegmentTabs({ segments, activeIdx, paxCount, picks, onChange, }) {
+    return (_jsx("div", { className: "flex items-center gap-2 overflow-x-auto rounded-md border bg-muted/20 p-1", children: segments.map((seg, idx) => {
+            const segPicks = picks.filter((p) => p.segmentId === seg.segmentId).length;
+            const complete = segPicks === paxCount && paxCount > 0;
+            const active = idx === activeIdx;
+            return (_jsxs("button", { type: "button", onClick: () => onChange(idx), className: cn("flex shrink-0 items-center gap-2 rounded px-3 py-1.5 text-sm transition-colors", active && "bg-background shadow-sm", !active && "text-muted-foreground hover:bg-background/50"), children: [complete && _jsx(CheckCircle2, { className: "h-3.5 w-3.5 text-emerald-600" }), _jsxs("span", { className: "font-medium", children: [seg.origin, " \u2192 ", seg.destination] }), _jsxs("span", { className: "font-mono text-[10px] text-muted-foreground", children: [seg.carrier, seg.flightNumber] }), _jsxs("span", { className: "text-[11px] text-muted-foreground tabular-nums", children: [segPicks, "/", paxCount] })] }, seg.segmentId));
+        }) }));
+}
+function PaxBar({ paxRows, activeIdx, picks, segmentId, onActivate, onClear, }) {
+    return (_jsx("ul", { className: "flex flex-wrap items-center gap-2", children: paxRows.map((pax, idx) => {
+            const pick = picks.find((p) => p.passengerId === pax.passengerId && p.segmentId === segmentId);
+            const active = idx === activeIdx;
+            return (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => onActivate(idx), className: cn("flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs transition-colors", active ? "border-primary bg-primary/5" : "hover:border-primary/40"), children: [_jsx("span", { className: cn("flex h-5 w-5 shrink-0 items-center justify-center rounded-full border font-mono text-[10px] font-semibold", pax.swatch), children: pax.short }), _jsx("span", { className: "font-medium", children: pax.label }), pick ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-mono text-[11px] text-foreground", children: pick.seatNumber }), _jsx(X, { className: "h-3 w-3 cursor-pointer text-muted-foreground hover:text-destructive", onClick: (e) => {
+                                        e.stopPropagation();
+                                        onClear(pax.passengerId);
+                                    } })] })) : (_jsx("span", { className: "text-muted-foreground", children: "\u2014" }))] }) }, pax.passengerId));
+        }) }));
+}
+function SeatMapPanel({ slot, paxRows, activePaxIdx, picks, segmentId, onPick, messages, }) {
+    if (slot.loading) {
+        return _jsx("div", { className: "h-72 animate-pulse rounded-2xl bg-muted/40" });
+    }
+    if (slot.error) {
+        return (_jsx("div", { className: "rounded-xl border border-destructive/40 bg-destructive/5 p-4 text-destructive text-sm", children: slot.error }));
+    }
+    if (!slot.seatMap) {
+        return (_jsx("div", { className: "rounded-xl border border-dashed p-6 text-center text-muted-foreground text-sm", children: messages.flightSeatsStep.seatMapUnavailable }));
+    }
+    const markers = picks
+        .filter((p) => p.segmentId === segmentId)
+        .map((p) => {
+        const paxIdx = paxRows.findIndex((r) => r.passengerId === p.passengerId);
+        const pax = paxRows[paxIdx];
+        if (!pax)
+            return null;
+        return { seatNumber: p.seatNumber, label: pax.short, swatch: pax.swatch };
+    })
+        .filter((p) => p !== null);
+    return (_jsx(FlightSeatMap, { seatMap: slot.seatMap, picks: markers, onSeatClick: (seat) => {
+            if (seat.status !== "available" && seat.status !== "selected")
+                return;
+            onPick(seat);
+        }, highlightedPaxLabel: paxRows[activePaxIdx]?.label }));
+}
+// ─────────────────────────────────────────────────────────────────────────────
+// Helpers
+// ─────────────────────────────────────────────────────────────────────────────
+function collectSegments(outbound, returnLeg, messages) {
+    const out = [];
+    for (const seg of itinerarySegments(outbound)) {
+        out.push({
+            offerId: outbound.offerId,
+            segmentId: seg.segmentId,
+            legLabel: messages.common.legLabels.outbound,
+            origin: seg.departure.iataCode,
+            destination: seg.arrival.iataCode,
+            carrier: seg.carrierCode,
+            flightNumber: seg.flightNumber,
+        });
+    }
+    if (returnLeg) {
+        for (const seg of itinerarySegments(returnLeg)) {
+            out.push({
+                offerId: returnLeg.offerId,
+                segmentId: seg.segmentId,
+                legLabel: messages.common.legLabels.return,
+                origin: seg.departure.iataCode,
+                destination: seg.arrival.iataCode,
+                carrier: seg.carrierCode,
+                flightNumber: seg.flightNumber,
+            });
+        }
+    }
+    return out;
+}
+function itinerarySegments(offer) {
+    const out = [];
+    for (const itin of offer.itineraries) {
+        for (const seg of itin.segments)
+            out.push(seg);
+    }
+    return out;
+}
+function buildPassengerRows(passengers, counts, messages) {
+    const rows = [];
+    const total = passengers.length > 0
+        ? passengers.length
+        : counts.adults + (counts.children ?? 0) + (counts.infants ?? 0);
+    for (let i = 0; i < total; i++) {
+        const p = passengers[i];
+        if (p) {
+            rows.push({
+                passengerId: p.passengerId,
+                label: nameOrFallback(p, i, messages),
+                short: shortLabel(p, i),
+                swatch: PAX_SWATCHES[i % PAX_SWATCHES.length] ?? PAX_SWATCHES[0],
+            });
+        }
+        else {
+            rows.push({
+                passengerId: synthPaxId(i, counts),
+                label: synthPaxLabel(i, counts, messages),
+                short: String(i + 1),
+                swatch: PAX_SWATCHES[i % PAX_SWATCHES.length] ?? PAX_SWATCHES[0],
+            });
+        }
+    }
+    return rows;
+}
+function nameOrFallback(p, idx, messages) {
+    const full = `${p.firstName} ${p.lastName}`.trim();
+    if (full)
+        return full;
+    return `${messages.common.passengerTypeLabels[p.type]} ${idx + 1}`;
+}
+function shortLabel(p, idx) {
+    const initials = `${p.firstName[0] ?? ""}${p.lastName[0] ?? ""}`.trim();
+    if (initials)
+        return initials.toUpperCase();
+    return String(idx + 1);
+}
+function synthPaxId(i, counts) {
+    if (i < counts.adults)
+        return `pax_adult_${i + 1}`;
+    const afterAdults = i - counts.adults;
+    if (afterAdults < (counts.children ?? 0))
+        return `pax_child_${afterAdults + 1}`;
+    return `pax_infant_${i - counts.adults - (counts.children ?? 0) + 1}`;
+}
+function synthPaxLabel(i, counts, messages) {
+    if (i < counts.adults)
+        return `${messages.common.passengerTypeLabels.adult} ${i + 1}`;
+    const afterAdults = i - counts.adults;
+    if (afterAdults < (counts.children ?? 0)) {
+        return `${messages.common.passengerTypeLabels.child} ${afterAdults + 1}`;
+    }
+    return `${messages.common.passengerTypeLabels.infant} ${i - counts.adults - (counts.children ?? 0) + 1}`;
+}