@voyantjs/flights-ui 0.30.6 → 0.31.0

package/README.md

@@ -0,0 +1,66 @@
+# @voyantjs/flights-ui
+
+Importable React UI components and page compositions for Voyant flights. Bundler-consumed (Vite, Next.js, webpack, etc.).
+
+## Install
+
+```bash
+pnpm add @voyantjs/flights-ui @voyantjs/flights-react @voyantjs/flights @voyantjs/crm-react @voyantjs/ui @tanstack/react-query react react-dom
+```
+
+`@voyantjs/ui` provides the design-system primitives. `@voyantjs/flights-react`
+provides the data-layer hooks. CRM-backed contact and billing pickers use
+`@voyantjs/crm-react`.
+
+## Pages
+
+`FlightsPage` renders the search, filter, per-leg round-trip picker, offer
+detail sheet, and booking handoff. The route owns URL validation and navigation:
+
+```tsx
+import { FlightsPage } from "@voyantjs/flights-ui"
+
+<FlightsPage
+  search={search}
+  onSearchChange={(next, options) => updateRouteSearch(next, options)}
+  onBookOffer={({ outboundOfferId, returnOfferId, passengers, cabin }) =>
+    goToBooking({ outboundOfferId, returnOfferId, passengers, cabin })
+  }
+/>
+```
+
+`FlightBookingPage` renders the repricing, ancillaries, seat-map, passenger,
+billing, payment, and confirmation flow around `FlightBookingShell`. The route
+or app supplies booking and navigation callbacks:
+
+```tsx
+import { FlightBookingPage } from "@voyantjs/flights-ui"
+
+<FlightBookingPage
+  outboundOfferId={offerId}
+  returnOfferId={returnOfferId}
+  passengers={{ adults: 1, children: 0, infants: 0 }}
+  paymentCapabilities={{ chargeSavedCard: false, newCard: false }}
+  onBackToSearch={() => navigateToFlights()}
+  onBook={(request) => bookFlight(request)}
+  onBooked={(order) => navigateToBooking(order.orderId)}
+/>
+```
+
+Router behavior, booking submission, payment capabilities, billing-default
+persistence, and contact creation are callbacks or slots so applications keep
+deployment-specific ownership.
+
+## I18n
+
+Components render English by default. To localize them, wrap your UI in
+`FlightsUiMessagesProvider` and import only the locales your app supports.
+
+```tsx
+import { FlightsUiMessagesProvider } from "@voyantjs/flights-ui"
+import { flightsUiEn } from "@voyantjs/flights-ui/i18n/en"
+import { flightsUiRo } from "@voyantjs/flights-ui/i18n/ro"
+```
+
+English-only apps should import only `./i18n/en`. Bilingual apps can import
+`./i18n/en` and `./i18n/ro`.

package/dist/components/billing-pickers.d.ts

@@ -0,0 +1,19 @@
+import type { BillingValue } from "./flight-billing-step.js";
+export interface BillingPersonPickerProps {
+    apply: (prefill: Partial<BillingValue>) => void;
+    onPersonSelected?: (personId: string | null) => void;
+}
+/**
+ * Billing-step CRM person picker. It searches `/v1/crm/people`, prefers a
+ * billing/primary address, and maps the selected person into `BillingValue`.
+ */
+export declare function BillingPersonPicker({ apply, onPersonSelected }: BillingPersonPickerProps): import("react/jsx-runtime").JSX.Element;
+export interface BillingOrgPickerProps {
+    apply: (prefill: Partial<BillingValue>) => void;
+}
+/**
+ * Billing-step CRM organization picker. It searches organizations and maps
+ * the selected organization, address, and contact points into `BillingValue`.
+ */
+export declare function BillingOrgPicker({ apply }: BillingOrgPickerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=billing-pickers.d.ts.map

package/dist/components/billing-pickers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"billing-pickers.d.ts","sourceRoot":"","sources":["../../src/components/billing-pickers.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE5D,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAA;IAC/C,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;CACrD;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,gBAAgB,EAAE,EAAE,wBAAwB,2CA6ExF;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAA;CAChD;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,EAAE,qBAAqB,2CA0EhE"}

package/dist/components/billing-pickers.js

@@ -0,0 +1,148 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useOrganizations, usePeople } from "@voyantjs/crm-react";
+import { Button } from "@voyantjs/ui/components/button";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "@voyantjs/ui/components/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@voyantjs/ui/components/popover";
+import { Building2, ChevronDown, Users } from "lucide-react";
+import { useState } from "react";
+import { useFlightsUiMessagesOrDefault } from "../i18n/index.js";
+/**
+ * Billing-step CRM person picker. It searches `/v1/crm/people`, prefers a
+ * billing/primary address, and maps the selected person into `BillingValue`.
+ */
+export function BillingPersonPicker({ apply, onPersonSelected }) {
+    const messages = useFlightsUiMessagesOrDefault().billingPickers;
+    const [open, setOpen] = useState(false);
+    const [search, setSearch] = useState("");
+    const peopleQuery = usePeople({
+        search: search.trim() || undefined,
+        limit: 30,
+        enabled: open,
+    });
+    const people = (peopleQuery.data?.data ?? []).filter((person) => isAdult(person.birthday));
+    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.personTrigger, _jsx(ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" })] }), _jsx(PopoverContent, { className: "w-[340px] p-0", align: "end", children: _jsxs(Command, { shouldFilter: false, children: [_jsx(CommandInput, { value: search, onValueChange: setSearch, placeholder: messages.personSearchPlaceholder }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: peopleQuery.isLoading ? messages.peopleSearching : messages.peopleEmpty }), _jsx(CommandGroup, { children: people.map((person) => {
+                                        const fullName = `${person.firstName} ${person.lastName}`.trim();
+                                        return (_jsx(CommandItem, { value: `${fullName} ${person.email ?? ""}`, onSelect: async () => {
+                                                const address = await fetchPreferredAddress("person", person.id);
+                                                apply({
+                                                    mode: "personal",
+                                                    firstName: person.firstName,
+                                                    lastName: person.lastName,
+                                                    email: person.email ?? "",
+                                                    phone: person.phone ?? undefined,
+                                                    line1: address?.line1 ?? "",
+                                                    line2: address?.line2 ?? undefined,
+                                                    city: address?.city ?? "",
+                                                    region: address?.region ?? undefined,
+                                                    postalCode: address?.postalCode ?? undefined,
+                                                    countryCode: address?.country ?? "",
+                                                });
+                                                onPersonSelected?.(person.id);
+                                                setOpen(false);
+                                                setSearch("");
+                                            }, children: _jsxs("div", { className: "flex min-w-0 flex-1 flex-col leading-tight", children: [_jsx("span", { className: "truncate font-medium text-sm", children: fullName || messages.emptyName }), person.email && (_jsx("span", { className: "truncate text-muted-foreground text-xs", children: person.email }))] }) }, person.id));
+                                    }) })] })] }) })] }));
+}
+/**
+ * Billing-step CRM organization picker. It searches organizations and maps
+ * the selected organization, address, and contact points into `BillingValue`.
+ */
+export function BillingOrgPicker({ apply }) {
+    const messages = useFlightsUiMessagesOrDefault().billingPickers;
+    const [open, setOpen] = useState(false);
+    const [search, setSearch] = useState("");
+    const orgsQuery = useOrganizations({
+        search: search.trim() || undefined,
+        limit: 30,
+        enabled: open,
+    });
+    const orgs = orgsQuery.data?.data ?? [];
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsxs(PopoverTrigger, { render: _jsx(Button, { type: "button", variant: "outline", size: "sm", className: "gap-2" }), children: [_jsx(Building2, { className: "h-3.5 w-3.5" }), messages.orgTrigger, _jsx(ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" })] }), _jsx(PopoverContent, { className: "w-[340px] p-0", align: "end", children: _jsxs(Command, { shouldFilter: false, children: [_jsx(CommandInput, { value: search, onValueChange: setSearch, placeholder: messages.orgSearchPlaceholder }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: orgsQuery.isLoading ? messages.orgsSearching : messages.orgsEmpty }), _jsx(CommandGroup, { children: orgs.map((org) => (_jsx(CommandItem, { value: org.name, onSelect: async () => {
+                                            const [address, contactPoints] = await Promise.all([
+                                                fetchPreferredAddress("organization", org.id),
+                                                fetchContactPoints("organization", org.id),
+                                            ]);
+                                            apply({
+                                                mode: "company",
+                                                companyName: org.name,
+                                                ...(org.vatNumber ? { vatNumber: org.vatNumber } : {}),
+                                                email: contactPoints.email ?? "",
+                                                ...(contactPoints.phone ? { phone: contactPoints.phone } : {}),
+                                                line1: address?.line1 ?? "",
+                                                line2: address?.line2 ?? undefined,
+                                                city: address?.city ?? "",
+                                                region: address?.region ?? undefined,
+                                                postalCode: address?.postalCode ?? undefined,
+                                                countryCode: address?.country ?? "",
+                                            });
+                                            setOpen(false);
+                                            setSearch("");
+                                        }, children: _jsxs("div", { className: "flex min-w-0 flex-1 flex-col leading-tight", children: [_jsx("span", { className: "truncate font-medium text-sm", children: org.name }), org.legalName && (_jsx("span", { className: "truncate text-muted-foreground text-xs", children: org.legalName }))] }) }, org.id))) })] })] }) })] }));
+}
+function isAdult(birthday) {
+    if (!birthday)
+        return true;
+    const dob = new Date(birthday);
+    if (Number.isNaN(dob.getTime()))
+        return true;
+    const now = new Date();
+    let years = now.getFullYear() - dob.getFullYear();
+    const beforeBirthdayThisYear = now.getMonth() < dob.getMonth() ||
+        (now.getMonth() === dob.getMonth() && now.getDate() < dob.getDate());
+    if (beforeBirthdayThisYear)
+        years -= 1;
+    return years >= 18;
+}
+async function fetchContactPoints(entity, id) {
+    const entityType = entity === "person" ? "person" : "organization";
+    try {
+        const res = await fetch(`/v1/identity/entities/${entityType}/${encodeURIComponent(id)}/contact-points`, { headers: { accept: "application/json" } });
+        if (!res.ok)
+            return { email: null, phone: null };
+        const json = (await res.json());
+        const list = json.data ?? [];
+        return {
+            email: pickContactPoint(list, "email"),
+            phone: pickContactPoint(list, "phone"),
+        };
+    }
+    catch {
+        return { email: null, phone: null };
+    }
+}
+function pickContactPoint(list, kind) {
+    const matches = list.filter((contactPoint) => contactPoint.kind === kind);
+    if (matches.length === 0)
+        return null;
+    const billing = matches.find((contactPoint) => contactPoint.label === "billing");
+    if (billing)
+        return billing.value;
+    const primary = matches.find((contactPoint) => contactPoint.isPrimary);
+    if (primary)
+        return primary.value;
+    return matches[0]?.value ?? null;
+}
+async function fetchPreferredAddress(entity, id) {
+    const path = entity === "person" ? "people" : "organizations";
+    try {
+        const res = await fetch(`/v1/crm/${path}/${encodeURIComponent(id)}/addresses`, {
+            headers: { accept: "application/json" },
+        });
+        if (!res.ok)
+            return null;
+        const json = (await res.json());
+        const list = json.data ?? [];
+        if (list.length === 0)
+            return null;
+        const billing = list.find((address) => address.label === "billing");
+        if (billing)
+            return billing;
+        const primary = list.find((address) => address.label === "primary") ??
+            list.find((address) => address.isPrimary);
+        return primary ?? list[0] ?? null;
+    }
+    catch {
+        return null;
+    }
+}

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

@@ -0,0 +1,25 @@
+import type { FlightBookRequest, FlightOrder, PassengerCounts } from "@voyantjs/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,kCAAkC,CAAA;AAkBzC,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"}

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

@@ -0,0 +1,175 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useQueries, useQueryClient } from "@tanstack/react-query";
+import { flightsQueryKeys, getFlightSeatMapQueryOptions, useAirlines, useAirports, useFlightAncillaries, useFlightOfferPrice, useSavedPaymentMethods, useVoyantFlightsContext, } from "@voyantjs/flights-react";
+import { Button } from "@voyantjs/ui/components/button";
+import { cn } from "@voyantjs/ui/lib/utils";
+import { ChevronLeft, Plane } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { useFlightsUiMessagesOrDefault } from "../i18n/index.js";
+import { BillingOrgPicker, BillingPersonPicker } from "./billing-pickers.js";
+import { FlightBookingShell, } from "./flight-booking-shell.js";
+import { PassengerContactPicker } from "./passenger-contact-picker.js";
+export function FlightBookingPage({ outboundOfferId, returnOfferId, passengers, onBackToSearch, onBook, onBooked, onEditOutbound, onEditReturn, onSaveBillingDefaults, paymentCapabilities, renderPassengerPicker, renderBillingPersonPicker, renderBillingOrgPicker, onAddPassengerContact, className, }) {
+    const messages = useFlightsUiMessagesOrDefault().flightBookingPage;
+    const qc = useQueryClient();
+    const airlinesQuery = useAirlines();
+    const airportsQuery = useAirports({ limit: 200 });
+    const carrierName = (code) => airlinesQuery.data?.data.find((airline) => airline.iataCode === code)?.name;
+    const airportName = (code) => {
+        const airport = airportsQuery.data?.data.find((item) => item.iataCode === code);
+        return airport ? `${airport.city} (${airport.iataCode})` : undefined;
+    };
+    const [outbound, setOutbound] = useState(() => readOfferFromCache(qc, outboundOfferId));
+    const [returnLeg, setReturnLeg] = useState(() => returnOfferId ? readOfferFromCache(qc, returnOfferId) : null);
+    const [livePriceError, setLivePriceError] = useState(null);
+    const [pricedReady, setPricedReady] = useState(false);
+    const [selectedPersonId, setSelectedPersonId] = useState(null);
+    const priceMutation = useFlightOfferPrice();
+    // biome-ignore lint/correctness/useExhaustiveDependencies: re-price once on mount per offer pair
+    useEffect(() => {
+        let cancelled = false;
+        const repriceLeg = async (offer, setter) => {
+            if (!offer)
+                return null;
+            try {
+                const result = await priceMutation.mutateAsync({ offerId: offer.offerId, offer });
+                if (cancelled)
+                    return null;
+                if (!result.valid)
+                    return result.invalidReason ?? "This offer is no longer available.";
+                setter(result.offer);
+                return null;
+            }
+            catch (err) {
+                return err instanceof Error ? err.message : String(err);
+            }
+        };
+        Promise.all([repriceLeg(outbound, setOutbound), repriceLeg(returnLeg, setReturnLeg)]).then(([err1, err2]) => {
+            if (cancelled)
+                return;
+            const err = err1 ?? err2;
+            if (err)
+                setLivePriceError(err);
+            else
+                setPricedReady(true);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [outboundOfferId, returnOfferId]);
+    const outboundAncillaries = useFlightAncillaries(outbound ? { offerId: outbound.offerId, offer: outbound } : null, { enabled: pricedReady && outbound != null });
+    const returnAncillaries = useFlightAncillaries(returnLeg ? { offerId: returnLeg.offerId, offer: returnLeg } : null, { enabled: pricedReady && returnLeg != null });
+    const ancillaries = {
+        outboundCatalog: outboundAncillaries.data?.catalog ?? null,
+        returnCatalog: returnAncillaries.data?.catalog ?? null,
+        loading: outboundAncillaries.isLoading || (returnLeg != null && returnAncillaries.isLoading),
+    };
+    const seatMaps = useSeatMapFetcher({ outbound, returnLeg, enabled: pricedReady });
+    const savedMethodsQuery = useSavedPaymentMethods(selectedPersonId, {
+        enabled: !!selectedPersonId,
+    });
+    const savedPaymentMethods = {
+        methods: (savedMethodsQuery.data?.data ?? []).map((method) => ({
+            id: method.id,
+            label: [brandHumanLabel(method.brand), method.last4 ? `....${method.last4}` : null]
+                .filter(Boolean)
+                .join(" "),
+            provider: null,
+            instrumentType: method.brand === "bank_transfer" ? "bank_account" : "credit_card",
+            status: "active",
+            brand: method.brand,
+            last4: method.last4,
+            expiryMonth: method.expMonth ?? null,
+            expiryYear: method.expYear ?? null,
+            isDefault: method.isDefault,
+        })),
+        loading: savedMethodsQuery.isLoading,
+    };
+    const documentsRequired = useMemo(() => detectInternational(outbound) || detectInternational(returnLeg), [outbound, returnLeg]);
+    const selection = useMemo(() => {
+        if (!outbound)
+            return null;
+        if (returnOfferId && !returnLeg)
+            return null;
+        return returnLeg ? { outbound, return: returnLeg } : { outbound };
+    }, [outbound, returnLeg, returnOfferId]);
+    if (!selection) {
+        return (_jsx("div", { className: cn("mx-auto w-full max-w-2xl px-6 py-10", className), children: _jsxs("div", { className: "rounded-xl border border-dashed bg-card p-8 text-center", children: [_jsx(Plane, { className: "mx-auto mb-3 h-8 w-8 text-muted-foreground" }), _jsx("h2", { className: "font-medium text-base", children: messages.offerNotInSessionTitle }), _jsx("p", { className: "mx-auto mt-2 max-w-md text-muted-foreground text-sm", children: messages.offerNotInSessionDescription }), _jsxs(Button, { className: "mt-4", onClick: onBackToSearch, children: [_jsx(ChevronLeft, { className: "mr-1 h-4 w-4" }), messages.backToFlightSearch] })] }) }));
+    }
+    if (livePriceError) {
+        return (_jsx("div", { className: cn("mx-auto w-full max-w-2xl px-6 py-10", className), children: _jsxs("div", { className: "rounded-xl border border-destructive/40 bg-destructive/5 p-6 text-center text-destructive text-sm", children: [_jsx("p", { className: "font-medium", children: livePriceError }), _jsxs(Button, { variant: "outline", className: "mt-4", onClick: onBackToSearch, children: [_jsx(ChevronLeft, { className: "mr-1 h-4 w-4" }), messages.backToFlightSearch] })] }) }));
+    }
+    const defaultPassengerPicker = (_slot, onPicked) => (_jsx(PassengerContactPicker, { onPick: onPicked, onAddContact: onAddPassengerContact, onPersonSelected: setSelectedPersonId }));
+    return (_jsxs("div", { className: cn("mx-auto flex w-full max-w-screen-2xl flex-col gap-6 px-6 py-6 lg:px-8", className), children: [_jsxs("header", { className: "flex items-center justify-between gap-4", children: [_jsxs("div", { children: [_jsx("h1", { className: "font-semibold text-2xl", children: messages.title }), _jsx("p", { className: "text-muted-foreground text-sm", children: selection.return ? messages.descriptionTrip : messages.descriptionOffer })] }), _jsxs(Button, { variant: "ghost", onClick: onBackToSearch, children: [_jsx(ChevronLeft, { className: "mr-1 h-4 w-4" }), messages.backToResults] })] }), _jsx(FlightBookingShell, { selection: selection, passengers: passengers, carrierName: carrierName, airportName: airportName, ancillaries: ancillaries, seatMaps: seatMaps, savedPaymentMethods: savedPaymentMethods, paymentCapabilities: paymentCapabilities, documentsRequired: documentsRequired, renderPassengerPicker: renderPassengerPicker ?? defaultPassengerPicker, renderBillingPersonPicker: (apply) => renderBillingPersonPicker ? (renderBillingPersonPicker(apply, { onPersonSelected: setSelectedPersonId })) : (_jsx(BillingPersonPicker, { apply: apply, onPersonSelected: setSelectedPersonId })), renderBillingOrgPicker: (apply) => renderBillingOrgPicker ? (renderBillingOrgPicker(apply)) : (_jsx(BillingOrgPicker, { apply: apply })), onSaveBillingDefaults: onSaveBillingDefaults, onCancel: onBackToSearch, onEditOutbound: onEditOutbound ?? onBackToSearch, onEditReturn: onEditReturn ?? onBackToSearch, onBook: onBook, onBooked: onBooked })] }));
+}
+function brandHumanLabel(brand) {
+    switch (brand) {
+        case "visa":
+            return "Visa";
+        case "mastercard":
+            return "Mastercard";
+        case "amex":
+            return "Amex";
+        case "revolut":
+            return "Revolut Pay";
+        case "bank_transfer":
+            return "Bank transfer";
+        default:
+            return brand;
+    }
+}
+function readOfferFromCache(qc, offerId) {
+    const cached = qc.getQueryData(flightsQueryKeys.offerDetail(offerId));
+    return cached?.offer ?? null;
+}
+function detectInternational(offer) {
+    if (!offer)
+        return false;
+    const first = offer.itineraries[0]?.segments[0];
+    const lastItinerary = offer.itineraries[offer.itineraries.length - 1];
+    const last = lastItinerary?.segments[lastItinerary.segments.length - 1];
+    if (!first || !last)
+        return false;
+    return first.departure.iataCode.slice(0, 1) !== last.arrival.iataCode.slice(0, 1);
+}
+function useSeatMapFetcher({ outbound, returnLeg, enabled, }) {
+    const client = useVoyantFlightsContext();
+    const segmentInputs = useMemo(() => {
+        const list = [];
+        const addFrom = (offer) => {
+            if (!offer)
+                return;
+            for (const itinerary of offer.itineraries) {
+                for (const segment of itinerary.segments) {
+                    list.push({ offerId: offer.offerId, segmentId: segment.segmentId, offer });
+                }
+            }
+        };
+        addFrom(outbound);
+        addFrom(returnLeg);
+        return list;
+    }, [outbound, returnLeg]);
+    const results = useQueries({
+        queries: segmentInputs.map((input) => ({
+            ...getFlightSeatMapQueryOptions(client, input),
+            enabled,
+            staleTime: 5 * 60_000,
+        })),
+    });
+    const slotsBySegment = useMemo(() => {
+        const map = new Map();
+        segmentInputs.forEach((input, index) => {
+            const result = results[index];
+            map.set(input.segmentId, {
+                seatMap: result?.data?.seatMap ?? null,
+                loading: result?.isLoading,
+                error: result?.error instanceof Error ? result.error.message : null,
+            });
+        });
+        return map;
+    }, [segmentInputs, results]);
+    return useMemo(() => ({
+        getSeatMap: ({ segmentId }) => slotsBySegment.get(segmentId) ?? { seatMap: null, error: "Segment not found" },
+    }), [slotsBySegment]);
+}

package/dist/components/flights-page.d.ts

@@ -0,0 +1,39 @@
+import type { CabinClass, PassengerCounts } from "@voyantjs/flights/contract/types";
+import { type TripType } from "./flight-search-form.js";
+import { type PopularRoute } from "./popular-routes.js";
+export interface FlightsPageSearchParams {
+    tripType?: TripType;
+    from?: string;
+    to?: string;
+    depart?: string;
+    ret?: string;
+    leg?: "outbound" | "return";
+    outboundOfferId?: string;
+    returnOfferId?: string;
+    pax_a?: number;
+    pax_c?: number;
+    pax_i?: number;
+    cabin?: CabinClass;
+    carriers?: string[];
+    maxStops?: number;
+    maxPrice?: number;
+    page?: number;
+}
+export interface FlightsPageSearchChangeOptions {
+    replace?: boolean;
+}
+export interface FlightBookingNavigationTarget {
+    outboundOfferId: string;
+    returnOfferId?: string;
+    passengers: PassengerCounts;
+    cabin: CabinClass;
+}
+export interface FlightsPageProps {
+    search: FlightsPageSearchParams;
+    onSearchChange: (next: FlightsPageSearchParams, options?: FlightsPageSearchChangeOptions) => void;
+    onBookOffer: (target: FlightBookingNavigationTarget) => void;
+    routes?: PopularRoute[];
+    className?: string;
+}
+export declare function FlightsPage({ search, onSearchChange, onBookOffer, routes, className, }: FlightsPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=flights-page.d.ts.map

package/dist/components/flights-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flights-page.d.ts","sourceRoot":"","sources":["../../src/components/flights-page.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,UAAU,EAGV,eAAe,EAChB,MAAM,kCAAkC,CAAA;AA8BzC,OAAO,EAAoB,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AACzE,OAAO,EAA0B,KAAK,YAAY,EAAiB,MAAM,qBAAqB,CAAA;AAM9F,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAA;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,8BAA8B;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,WAAW,6BAA6B;IAC5C,eAAe,EAAE,MAAM,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,UAAU,EAAE,eAAe,CAAA;IAC3B,KAAK,EAAE,UAAU,CAAA;CAClB;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,uBAAuB,CAAA;IAC/B,cAAc,EAAE,CAAC,IAAI,EAAE,uBAAuB,EAAE,OAAO,CAAC,EAAE,8BAA8B,KAAK,IAAI,CAAA;IACjG,WAAW,EAAE,CAAC,MAAM,EAAE,6BAA6B,KAAK,IAAI,CAAA;IAC5D,MAAM,CAAC,EAAE,YAAY,EAAE,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,cAAc,EACd,WAAW,EACX,MAA+B,EAC/B,SAAS,GACV,EAAE,gBAAgB,2CAyYlB"}