@voyant-travel/bookings-react 0.119.3

package/dist/components/person-picker-section.js

@@ -0,0 +1,160 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useOrganization, useOrganizations, usePeople, usePerson, } from "@voyant-travel/relationships-react";
+import { OrganizationForm, PersonForm } from "@voyant-travel/relationships-react/ui";
+import { Button, Label, Sheet, SheetBody, SheetContent, SheetHeader, SheetTitle, } from "@voyant-travel/ui/components";
+import { Combobox, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, } from "@voyant-travel/ui/components/combobox";
+import { Building2, Pencil, User, UserPlus } from "lucide-react";
+import * as React from "react";
+import { useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
+export const emptyNewPerson = {
+    firstName: "",
+    lastName: "",
+    email: "",
+    phone: "",
+};
+export const emptyPersonPickerValue = {
+    billTo: "person",
+    mode: "existing",
+    personId: "",
+    newPerson: emptyNewPerson,
+    organizationId: null,
+};
+/**
+ * Billing target picker for booking create.
+ *
+ * State is fully controlled. The embedded create sheets use the CRM forms and
+ * select the newly-created person or organization after save.
+ */
+export function PersonPickerSection({ value, onChange, enabled = true, showOrganization = true, hideTargetToggle = false, labels, }) {
+    const [personSearch, setPersonSearch] = React.useState("");
+    const [orgSearch, setOrgSearch] = React.useState("");
+    const cachedPeopleRef = React.useRef(new Map());
+    const cachedOrgsRef = React.useRef(new Map());
+    const [personInputValue, setPersonInputValue] = React.useState("");
+    const [orgInputValue, setOrgInputValue] = React.useState("");
+    const [personSheetOpen, setPersonSheetOpen] = React.useState(false);
+    const [personSheetMode, setPersonSheetMode] = React.useState("create");
+    const [orgSheetOpen, setOrgSheetOpen] = React.useState(false);
+    const [orgSheetMode, setOrgSheetMode] = React.useState("create");
+    const messages = useBookingsUiMessagesOrDefault();
+    const merged = { ...messages.personPickerSection.labels, ...labels };
+    const billingTarget = value.billTo ?? "person";
+    const { data: peopleData } = usePeople({
+        search: personSearch || undefined,
+        limit: 20,
+        enabled: enabled && billingTarget === "person",
+    });
+    const selectedPersonQuery = usePerson(value.personId || undefined, {
+        enabled: enabled && billingTarget === "person" && Boolean(value.personId),
+    });
+    const people = React.useMemo(() => {
+        const map = new Map(cachedPeopleRef.current);
+        for (const person of peopleData?.data ?? [])
+            map.set(person.id, person);
+        if (selectedPersonQuery.data)
+            map.set(selectedPersonQuery.data.id, selectedPersonQuery.data);
+        cachedPeopleRef.current = map;
+        return Array.from(map.values());
+    }, [peopleData?.data, selectedPersonQuery.data]);
+    const peopleMap = React.useMemo(() => new Map(people.map((person) => [person.id, person])), [people]);
+    const { data: orgsData } = useOrganizations({
+        search: orgSearch || undefined,
+        limit: 20,
+        enabled: enabled && showOrganization && billingTarget === "organization",
+    });
+    const selectedOrgQuery = useOrganization(value.organizationId || undefined, {
+        enabled: enabled && billingTarget === "organization" && Boolean(value.organizationId),
+    });
+    const orgs = React.useMemo(() => {
+        const map = new Map(cachedOrgsRef.current);
+        for (const org of orgsData?.data ?? [])
+            map.set(org.id, org);
+        if (selectedOrgQuery.data)
+            map.set(selectedOrgQuery.data.id, selectedOrgQuery.data);
+        cachedOrgsRef.current = map;
+        return Array.from(map.values());
+    }, [orgsData?.data, selectedOrgQuery.data]);
+    const orgsMap = React.useMemo(() => new Map(orgs.map((org) => [org.id, org])), [orgs]);
+    const setPerson = (patch) => onChange({ ...value, ...patch });
+    const resolvePersonLabel = React.useCallback((personId) => formatPerson(peopleMap.get(personId) ?? cachedPeopleRef.current.get(personId)), [peopleMap]);
+    const resolveOrgLabel = React.useCallback((organizationId) => orgsMap.get(organizationId)?.name ?? cachedOrgsRef.current.get(organizationId)?.name ?? "", [orgsMap]);
+    const selectedPersonLabel = value.personId ? resolvePersonLabel(value.personId) : "";
+    const selectedOrgLabel = value.organizationId ? resolveOrgLabel(value.organizationId) : "";
+    React.useEffect(() => {
+        if (selectedPersonLabel)
+            setPersonInputValue(selectedPersonLabel);
+    }, [selectedPersonLabel]);
+    React.useEffect(() => {
+        if (selectedOrgLabel)
+            setOrgInputValue(selectedOrgLabel);
+    }, [selectedOrgLabel]);
+    return (_jsxs(_Fragment, { children: [showOrganization && !hideTargetToggle ? (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: merged.billTo }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsxs(Button, { type: "button", variant: billingTarget === "person" ? "default" : "outline", onClick: () => setPerson({ billTo: "person", organizationId: null }), disabled: !enabled, children: [_jsx(User, { className: "mr-2 h-4 w-4" }), merged.billToPerson] }), _jsxs(Button, { type: "button", variant: billingTarget === "organization" ? "default" : "outline", onClick: () => setPerson({ billTo: "organization", personId: "" }), disabled: !enabled, children: [_jsx(Building2, { className: "mr-2 h-4 w-4" }), merged.billToOrganization] })] })] })) : null, billingTarget === "person" ? (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { children: [merged.person, " ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsxs("div", { className: "flex items-center gap-1", children: [value.personId ? (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7", onClick: () => {
+                                            setPersonSheetMode("edit");
+                                            setPersonSheetOpen(true);
+                                        }, disabled: !enabled || !selectedPersonQuery.data, children: [_jsx(Pencil, { className: "mr-1 h-3.5 w-3.5" }), merged.editPerson] })) : null, _jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7", onClick: () => {
+                                            setPersonSheetMode("create");
+                                            setPersonSheetOpen(true);
+                                        }, disabled: !enabled, children: [_jsx(UserPlus, { className: "mr-1 h-3.5 w-3.5" }), merged.createNewPerson] })] })] }), _jsxs(Combobox, { items: people.map((person) => person.id), value: value.personId || null, inputValue: personInputValue, autoHighlight: true, disabled: !enabled, itemToStringLabel: (id) => resolvePersonLabel(id) || id, itemToStringValue: (id) => id, onInputValueChange: (next) => {
+                            setPersonInputValue(next);
+                            setPersonSearch(next);
+                            if (!next)
+                                setPerson({ personId: "" });
+                        }, onValueChange: (next) => {
+                            const personId = next ?? "";
+                            setPerson({ personId });
+                            setPersonInputValue(personId ? resolvePersonLabel(personId) : "");
+                        }, children: [_jsx(ComboboxInput, { placeholder: merged.personSearchPlaceholder, showClear: !!value.personId }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: merged.personEmpty }), _jsx(ComboboxList, { children: _jsx(ComboboxCollection, { children: (id) => {
+                                                const person = peopleMap.get(id);
+                                                if (!person)
+                                                    return null;
+                                                return (_jsx(ComboboxItem, { value: person.id, children: _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate font-medium", children: formatPersonName(person) }), person.email ? (_jsx("span", { className: "truncate text-xs text-muted-foreground", children: person.email })) : null] }) }, person.id));
+                                            } }) })] })] })] })) : (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { children: [merged.organization, " ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsxs("div", { className: "flex items-center gap-1", children: [value.organizationId ? (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7", onClick: () => {
+                                            setOrgSheetMode("edit");
+                                            setOrgSheetOpen(true);
+                                        }, disabled: !enabled || !selectedOrgQuery.data, children: [_jsx(Pencil, { className: "mr-1 h-3.5 w-3.5" }), merged.editOrganization] })) : null, _jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7", onClick: () => {
+                                            setOrgSheetMode("create");
+                                            setOrgSheetOpen(true);
+                                        }, disabled: !enabled, children: [_jsx(Building2, { className: "mr-1 h-3.5 w-3.5" }), merged.createNewOrganization] })] })] }), _jsxs(Combobox, { items: orgs.map((org) => org.id), value: value.organizationId ?? null, inputValue: orgInputValue, autoHighlight: true, disabled: !enabled, itemToStringLabel: (id) => resolveOrgLabel(id) || id, itemToStringValue: (id) => id, onInputValueChange: (next) => {
+                            setOrgInputValue(next);
+                            setOrgSearch(next);
+                            if (!next)
+                                setPerson({ organizationId: null });
+                        }, onValueChange: (next) => {
+                            const organizationId = next ?? null;
+                            setPerson({ organizationId });
+                            setOrgInputValue(organizationId ? resolveOrgLabel(organizationId) : "");
+                        }, children: [_jsx(ComboboxInput, { placeholder: merged.organizationSearchPlaceholder, showClear: !!value.organizationId }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: merged.organizationEmpty }), _jsx(ComboboxList, { children: _jsx(ComboboxCollection, { children: (id) => {
+                                                const org = orgsMap.get(id);
+                                                if (!org)
+                                                    return null;
+                                                return (_jsx(ComboboxItem, { value: org.id, children: _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate font-medium", children: org.name }), org.legalName ? (_jsx("span", { className: "truncate text-xs text-muted-foreground", children: org.legalName })) : null] }) }, org.id));
+                                            } }) })] })] })] })), _jsx(Sheet, { open: personSheetOpen, onOpenChange: setPersonSheetOpen, children: _jsxs(SheetContent, { side: "right", size: "lg", children: [_jsx(SheetHeader, { children: _jsx(SheetTitle, { children: personSheetMode === "edit"
+                                    ? merged.editPersonSheetTitle
+                                    : merged.createPersonSheetTitle }) }), _jsx(SheetBody, { children: _jsx(PersonForm, { mode: personSheetMode === "edit" && selectedPersonQuery.data
+                                    ? { kind: "edit", person: selectedPersonQuery.data }
+                                    : { kind: "create" }, onCancel: () => setPersonSheetOpen(false), onSuccess: (saved) => {
+                                    setPerson({ billTo: "person", personId: saved.id, organizationId: null });
+                                    setPersonInputValue(formatPerson(saved));
+                                    setPersonSheetOpen(false);
+                                } }) })] }) }), _jsx(Sheet, { open: orgSheetOpen, onOpenChange: setOrgSheetOpen, children: _jsxs(SheetContent, { side: "right", size: "lg", children: [_jsx(SheetHeader, { children: _jsx(SheetTitle, { children: orgSheetMode === "edit"
+                                    ? merged.editOrganizationSheetTitle
+                                    : merged.createOrganizationSheetTitle }) }), _jsx(SheetBody, { children: _jsx(OrganizationForm, { mode: orgSheetMode === "edit" && selectedOrgQuery.data
+                                    ? { kind: "edit", organization: selectedOrgQuery.data }
+                                    : { kind: "create" }, onCancel: () => setOrgSheetOpen(false), onSuccess: (saved) => {
+                                    setPerson({ billTo: "organization", personId: "", organizationId: saved.id });
+                                    setOrgInputValue(saved.name);
+                                    setOrgSheetOpen(false);
+                                } }) })] }) })] }));
+}
+function formatPersonName(person) {
+    if (!person)
+        return "";
+    return [person.firstName, person.lastName].filter(Boolean).join(" ").trim();
+}
+function formatPerson(person) {
+    if (!person)
+        return "";
+    const name = formatPersonName(person);
+    return person.email ? `${name} · ${person.email}` : name;
+}

package/dist/components/price-breakdown-section.d.ts

@@ -0,0 +1,83 @@
+export interface PriceBreakdownLine {
+    unitId: string;
+    pricingCategoryId?: string | null;
+    label: string;
+    quantity: number;
+    /** Per-unit price for the matched tier/row. `null` = on-request pricing. */
+    unitAmountCents: number | null;
+    /** `unitAmountCents * quantity` or null when on-request. */
+    totalAmountCents: number | null;
+    /**
+     * Populated when a non-default tier matched — operator-visible "N × 100 EUR
+     * — group rate" kind of hint. Null for the default tier / single-price row.
+     */
+    tierLabel: string | null;
+    isGroupRate: boolean;
+}
+export interface PriceBreakdownValue {
+    catalogAmountCents: number | null;
+    confirmedAmountCents: number | null;
+    currency: string | null;
+    priceOverrideReason: string;
+    isManualOverride: boolean;
+    requiresReason: boolean;
+    lines: PriceBreakdownLine[];
+}
+export interface PriceBreakdownSectionProps {
+    productId?: string;
+    optionId?: string | null;
+    /** Quantity per option_unit id, typically from OptionUnitsStepperSection. */
+    unitQuantities: Record<string, number>;
+    /** Display labels keyed by option_unit id. */
+    unitLabels?: Record<string, string>;
+    /** Traveler pricing quantities keyed by option_unit id and pricing_category id. */
+    pricingCategoryQuantities?: Record<string, Record<string, number>>;
+    /** Display labels keyed by pricing_category id. */
+    pricingCategoryLabels?: Record<string, string>;
+    /**
+     * Force a specific catalog. Defaults to the public catalog the storefront
+     * uses — matches what a customer would see.
+     */
+    catalogId?: string | null;
+    labels?: {
+        heading?: string;
+        total?: string;
+        onRequest?: string;
+        groupRate?: string;
+        empty?: string;
+        noPricing?: string;
+        confirmedTotal?: string;
+        manualTotal?: string;
+        useCatalogTotal?: string;
+        overrideReason?: string;
+        overrideReasonPlaceholder?: string;
+        overrideReasonRequired?: string;
+    };
+    onChange?: (value: PriceBreakdownValue) => void;
+    /**
+     * When true, the section drops its bordered card wrapper and the
+     * heading label — for embedding inside another card (e.g. the
+     * booking-summary panel) where the parent owns the chrome.
+     */
+    flat?: boolean;
+}
+interface UnitPriceLookupRow {
+    unitId: string;
+    pricingCategoryId?: string | null;
+}
+export declare function createUnitPriceLookup<TUnitPrice extends UnitPriceLookupRow>(unitPrices: ReadonlyArray<TUnitPrice>): (unitId: string, pricingCategoryId: string | null) => TUnitPrice | undefined;
+/**
+ * Live price-breakdown preview for booking-create flows. Read-only — uses
+ * `usePricingPreview` (#237) to fetch the catalog-resolved snapshot the
+ * storefront also uses, then computes lines against the operator's current
+ * unit quantities so the operator sees the same numbers the customer would.
+ *
+ * ### Pricing mode handling
+ *
+ * - `per_unit` — multiply the matched tier's `sellAmountCents` by quantity.
+ * - `free` / `included` — render 0.00 without an on-request badge.
+ * - `on_request` / anything else — render "On request"; total excludes it.
+ */
+export declare function PriceBreakdownSection({ productId, optionId, unitQuantities, unitLabels, pricingCategoryQuantities, pricingCategoryLabels, catalogId, labels, onChange, flat, }: PriceBreakdownSectionProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=price-breakdown-section.d.ts.map

package/dist/components/price-breakdown-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"price-breakdown-section.d.ts","sourceRoot":"","sources":["../../src/components/price-breakdown-section.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAA;IACd,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;IAChB,4EAA4E;IAC5E,eAAe,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,4DAA4D;IAC5D,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAA;IAC/B;;;OAGG;IACH,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,WAAW,EAAE,OAAO,CAAA;CACrB;AAED,MAAM,WAAW,mBAAmB;IAClC,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAA;IACjC,oBAAoB,EAAE,MAAM,GAAG,IAAI,CAAA;IACnC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,mBAAmB,EAAE,MAAM,CAAA;IAC3B,gBAAgB,EAAE,OAAO,CAAA;IACzB,cAAc,EAAE,OAAO,CAAA;IACvB,KAAK,EAAE,kBAAkB,EAAE,CAAA;CAC5B;AAED,MAAM,WAAW,0BAA0B;IACzC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,6EAA6E;IAC7E,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACtC,8CAA8C;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACnC,mFAAmF;IACnF,yBAAyB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;IAClE,mDAAmD;IACnD,qBAAqB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC9C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,cAAc,CAAC,EAAE,MAAM,CAAA;QACvB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,eAAe,CAAC,EAAE,MAAM,CAAA;QACxB,cAAc,CAAC,EAAE,MAAM,CAAA;QACvB,yBAAyB,CAAC,EAAE,MAAM,CAAA;QAClC,sBAAsB,CAAC,EAAE,MAAM,CAAA;KAChC,CAAA;IACD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAA;IAC/C;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAQD,UAAU,kBAAkB;IAC1B,MAAM,EAAE,MAAM,CAAA;IACd,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAClC;AAED,wBAAgB,qBAAqB,CAAC,UAAU,SAAS,kBAAkB,EACzE,UAAU,EAAE,aAAa,CAAC,UAAU,CAAC,GACpC,CAAC,MAAM,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,GAAG,IAAI,KAAK,UAAU,GAAG,SAAS,CAwB9E;AAoBD;;;;;;;;;;;GAWG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,QAAQ,EACR,cAAc,EACd,UAAU,EACV,yBAAyB,EACzB,qBAAqB,EACrB,SAAS,EACT,MAAM,EACN,QAAQ,EACR,IAAY,GACb,EAAE,0BAA0B,kDA2U5B"}

package/dist/components/price-breakdown-section.js

@@ -0,0 +1,278 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useProduct } from "@voyant-travel/inventory-react";
+import { Button, Label, Textarea } from "@voyant-travel/ui/components";
+import { CurrencyInput } from "@voyant-travel/ui/components/currency-input";
+import * as React from "react";
+import { useBookingsUiI18nOrDefault, useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
+import { usePricingPreview } from "../index.js";
+export function createUnitPriceLookup(unitPrices) {
+    const defaultUnitPricesByUnit = new Map();
+    const unitPricesByUnitAndCategory = new Map();
+    for (const unitPrice of unitPrices) {
+        if (unitPrice.pricingCategoryId) {
+            unitPricesByUnitAndCategory.set(`${unitPrice.unitId}:${unitPrice.pricingCategoryId}`, unitPrice);
+            continue;
+        }
+        if (!defaultUnitPricesByUnit.has(unitPrice.unitId)) {
+            defaultUnitPricesByUnit.set(unitPrice.unitId, unitPrice);
+        }
+    }
+    return (unitId, pricingCategoryId) => {
+        if (!pricingCategoryId)
+            return defaultUnitPricesByUnit.get(unitId);
+        return (unitPricesByUnitAndCategory.get(`${unitId}:${pricingCategoryId}`) ??
+            defaultUnitPricesByUnit.get(unitId));
+    };
+}
+/**
+ * Picks the tier whose quantity range contains `qty`. Tiers are expected
+ * oldest-to-newest, `minQuantity`-ascending. Ties are broken by first-match —
+ * the server sorts by sort_order and then min_quantity, so the selection here
+ * mirrors the storefront engine.
+ */
+function matchTier(tiers, qty) {
+    for (const tier of tiers) {
+        if (qty >= tier.minQuantity &&
+            (tier.maxQuantity === null || qty <= tier.maxQuantity) // i18n-literal-ok numeric bounds
+        ) {
+            return tier;
+        }
+    }
+    return null;
+}
+/**
+ * Live price-breakdown preview for booking-create flows. Read-only — uses
+ * `usePricingPreview` (#237) to fetch the catalog-resolved snapshot the
+ * storefront also uses, then computes lines against the operator's current
+ * unit quantities so the operator sees the same numbers the customer would.
+ *
+ * ### Pricing mode handling
+ *
+ * - `per_unit` — multiply the matched tier's `sellAmountCents` by quantity.
+ * - `free` / `included` — render 0.00 without an on-request badge.
+ * - `on_request` / anything else — render "On request"; total excludes it.
+ */
+export function PriceBreakdownSection({ productId, optionId, unitQuantities, unitLabels, pricingCategoryQuantities, pricingCategoryLabels, catalogId, labels, onChange, flat = false, }) {
+    const { formatCurrency, formatNumber } = useBookingsUiI18nOrDefault();
+    const messages = useBookingsUiMessagesOrDefault();
+    const merged = { ...messages.priceBreakdownSection.labels, ...labels };
+    const preview = usePricingPreview({
+        productId: productId ?? "",
+        optionId: optionId ?? null,
+        catalogId: catalogId ?? null,
+        enabled: Boolean(productId),
+    });
+    const productQuery = useProduct(productId, { enabled: Boolean(productId) });
+    const quantitiesKey = React.useMemo(() => JSON.stringify(unitQuantities), [unitQuantities]);
+    const [manualAmountCents, setManualAmountCents] = React.useState(null);
+    const [overrideReason, setOverrideReason] = React.useState("");
+    // biome-ignore lint/correctness/useExhaustiveDependencies: #935 reset manual confirmation when the priced selection changes
+    React.useEffect(() => {
+        setManualAmountCents(null);
+        setOverrideReason("");
+    }, [productId, optionId, catalogId, quantitiesKey]);
+    const snapshot = preview.data?.data;
+    const fallbackProduct = productQuery.data;
+    const fallbackUnitAmountCents = fallbackProduct?.sellAmountCents ?? null;
+    const currency = snapshot?.catalog.currencyCode ?? fallbackProduct?.sellCurrency ?? null;
+    const formatAmount = React.useCallback((cents) => currency
+        ? formatCurrency(cents / 100, currency)
+        : formatNumber(cents / 100, {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        }), [currency, formatCurrency, formatNumber]);
+    const { lines, total } = React.useMemo(() => {
+        const out = [];
+        let runningTotal = 0;
+        let anyOnRequest = false;
+        if (!snapshot) {
+            if (fallbackUnitAmountCents === null)
+                return { lines: out, total: null };
+            for (const [unitId, quantity] of Object.entries(unitQuantities)) {
+                if (quantity <= 0)
+                    continue;
+                const lineTotal = fallbackUnitAmountCents * quantity;
+                out.push({
+                    unitId,
+                    label: unitLabels?.[unitId] ?? fallbackProduct?.name ?? unitId,
+                    quantity,
+                    unitAmountCents: fallbackUnitAmountCents,
+                    totalAmountCents: lineTotal,
+                    tierLabel: null,
+                    isGroupRate: false,
+                });
+                runningTotal += lineTotal;
+            }
+            return { lines: out, total: runningTotal };
+        }
+        // Pick the default price rule for the resolved option (snapshot already
+        // filters options by the caller's optionId; rules keep isDefault-first
+        // ordering from the server).
+        const rulesByOption = new Map();
+        for (const rule of snapshot.rules) {
+            const existing = rulesByOption.get(rule.optionId) ?? [];
+            existing.push(rule);
+            rulesByOption.set(rule.optionId, existing);
+        }
+        const findUnitPrice = createUnitPriceLookup(snapshot.unitPrices);
+        for (const [unitId, quantity] of Object.entries(unitQuantities)) {
+            if (quantity <= 0)
+                continue;
+            const categoryEntries = Object.entries(pricingCategoryQuantities?.[unitId] ?? {}).filter(([, categoryQuantity]) => categoryQuantity > 0);
+            const selections = categoryEntries.length > 0
+                ? categoryEntries.map(([pricingCategoryId, categoryQuantity]) => ({
+                    pricingCategoryId,
+                    quantity: categoryQuantity,
+                    unitPrice: findUnitPrice(unitId, pricingCategoryId),
+                }))
+                : [
+                    {
+                        pricingCategoryId: null,
+                        quantity,
+                        unitPrice: findUnitPrice(unitId, null),
+                    },
+                ];
+            for (const selection of selections) {
+                const up = selection.unitPrice;
+                if (!up) {
+                    // The unit isn't priced in this catalog — show it on-request so the
+                    // operator knows they need to quote manually.
+                    out.push({
+                        unitId,
+                        pricingCategoryId: selection.pricingCategoryId,
+                        label: unitLabels?.[unitId] ?? unitId,
+                        quantity: selection.quantity,
+                        unitAmountCents: null,
+                        totalAmountCents: null,
+                        tierLabel: null,
+                        isGroupRate: false,
+                    });
+                    anyOnRequest = true;
+                    continue;
+                }
+                const categoryLabel = selection.pricingCategoryId
+                    ? pricingCategoryLabels?.[selection.pricingCategoryId]
+                    : null;
+                const unitLabel = unitLabels?.[unitId] ?? up.unitName ?? unitId;
+                const label = categoryLabel ? `${unitLabel} · ${categoryLabel}` : unitLabel;
+                if (up.pricingMode === "on_request") {
+                    out.push({
+                        unitId,
+                        pricingCategoryId: selection.pricingCategoryId,
+                        label,
+                        quantity: selection.quantity,
+                        unitAmountCents: null,
+                        totalAmountCents: null,
+                        tierLabel: merged.onRequest,
+                        isGroupRate: false,
+                    });
+                    anyOnRequest = true;
+                    continue;
+                }
+                if (up.pricingMode === "free" || up.pricingMode === "included") {
+                    out.push({
+                        unitId,
+                        pricingCategoryId: selection.pricingCategoryId,
+                        label,
+                        quantity: selection.quantity,
+                        unitAmountCents: 0,
+                        totalAmountCents: 0,
+                        tierLabel: null,
+                        isGroupRate: false,
+                    });
+                    continue;
+                }
+                // per_unit (and anything else that falls through to explicit amounts).
+                const matchedTier = matchTier(up.tiers, selection.quantity);
+                const unitAmount = matchedTier?.sellAmountCents ?? up.sellAmountCents;
+                if (unitAmount === null) {
+                    out.push({
+                        unitId,
+                        pricingCategoryId: selection.pricingCategoryId,
+                        label,
+                        quantity: selection.quantity,
+                        unitAmountCents: null,
+                        totalAmountCents: null,
+                        tierLabel: merged.onRequest,
+                        isGroupRate: false,
+                    });
+                    anyOnRequest = true;
+                    continue;
+                }
+                const lineTotal = unitAmount * selection.quantity;
+                const isGroupRate = matchedTier !== null && matchedTier.minQuantity > 1;
+                out.push({
+                    unitId,
+                    pricingCategoryId: selection.pricingCategoryId,
+                    label,
+                    quantity: selection.quantity,
+                    unitAmountCents: unitAmount,
+                    totalAmountCents: lineTotal,
+                    tierLabel: isGroupRate ? merged.groupRate : null,
+                    isGroupRate,
+                });
+                runningTotal += lineTotal;
+            }
+        }
+        return { lines: out, total: anyOnRequest ? null : runningTotal };
+    }, [
+        snapshot,
+        fallbackProduct?.name,
+        fallbackUnitAmountCents,
+        unitQuantities,
+        unitLabels,
+        pricingCategoryQuantities,
+        pricingCategoryLabels,
+        merged.onRequest,
+        merged.groupRate,
+    ]);
+    const confirmedAmountCents = manualAmountCents ?? total;
+    const isManualOverride = manualAmountCents != null && (total === null || manualAmountCents !== total);
+    const requiresReason = isManualOverride && overrideReason.trim().length === 0;
+    React.useEffect(() => {
+        onChange?.({
+            catalogAmountCents: total,
+            confirmedAmountCents,
+            currency,
+            priceOverrideReason: overrideReason,
+            isManualOverride,
+            requiresReason,
+            lines,
+        });
+    }, [
+        confirmedAmountCents,
+        currency,
+        isManualOverride,
+        lines,
+        onChange,
+        overrideReason,
+        requiresReason,
+        total,
+    ]);
+    const manualTotalControls = (_jsxs("div", { className: "flex flex-col gap-2 border-t pt-2", children: [_jsxs("div", { className: "grid gap-2 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-end", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-xs", children: merged.manualTotal }), _jsx(CurrencyInput, { value: manualAmountCents, onChange: setManualAmountCents, currency: currency ?? undefined, 
+                                // CurrencyInput already renders the currency symbol + code
+                                // as addons; the placeholder must be the bare number so we
+                                // don't end up with `€ €790.00 EUR` showing.
+                                placeholder: total === null
+                                    ? merged.onRequest
+                                    : formatNumber(total / 100, {
+                                        minimumFractionDigits: 2,
+                                        maximumFractionDigits: 2,
+                                    }) })] }), manualAmountCents != null ? (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setManualAmountCents(null), children: merged.useCatalogTotal })) : null] }), isManualOverride ? (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-xs", children: merged.overrideReason }), _jsx(Textarea, { value: overrideReason, onChange: (event) => setOverrideReason(event.target.value), placeholder: merged.overrideReasonPlaceholder, rows: 2 }), requiresReason ? (_jsx("p", { className: "text-xs text-destructive", children: merged.overrideReasonRequired })) : null] })) : null] }));
+    // Empty states
+    if (!productId)
+        return null;
+    const wrapperClassName = flat
+        ? "flex flex-col gap-2" // i18n-literal-ok: tailwind utilities
+        : "flex flex-col gap-2 rounded-md border p-3"; // i18n-literal-ok: tailwind utilities
+    if ((preview.isError || (preview.isSuccess && !snapshot)) && fallbackUnitAmountCents === null) {
+        return (_jsxs("div", { className: wrapperClassName, children: [flat ? null : _jsx(Label, { children: merged.heading }), _jsx("p", { className: "text-xs text-muted-foreground", children: merged.noPricing }), manualTotalControls] }));
+    }
+    if (lines.length === 0) {
+        return (_jsxs("div", { className: wrapperClassName, children: [flat ? null : _jsx(Label, { children: merged.heading }), _jsx("p", { className: "text-xs text-muted-foreground", children: merged.empty }), manualTotalControls] }));
+    }
+    return (_jsxs("div", { className: wrapperClassName, children: [flat ? null : _jsx(Label, { children: merged.heading }), _jsx("div", { className: "flex flex-col gap-1.5", children: lines.map((line) => (_jsxs("div", { className: "flex items-baseline justify-between text-sm", children: [_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsxs("span", { className: "tabular-nums", children: [formatNumber(line.quantity), "x"] }), _jsx("span", { children: line.label }), line.tierLabel ? (_jsxs("span", { className: "text-xs text-muted-foreground", children: ["\u00B7 ", line.tierLabel] })) : null] }), _jsx("div", { className: "tabular-nums", children: line.totalAmountCents === null
+                                ? merged.onRequest
+                                : formatAmount(line.totalAmountCents) })] }, line.unitId))) }), _jsxs("div", { className: "mt-1 flex items-baseline justify-between border-t pt-2 text-sm font-medium", children: [_jsx("span", { children: merged.total }), _jsx("span", { className: "tabular-nums", children: total === null ? merged.onRequest : formatAmount(total) })] }), _jsxs("div", { className: "flex items-baseline justify-between text-sm font-medium", children: [_jsx("span", { children: merged.confirmedTotal }), _jsx("span", { className: "tabular-nums", children: confirmedAmountCents === null ? merged.onRequest : formatAmount(confirmedAmountCents) })] }), manualTotalControls] }));
+}

package/dist/components/product-picker-section.d.ts

@@ -0,0 +1,29 @@
+export interface ProductPickerValue {
+    productId: string;
+    /** `null` means "no specific option" — the product has options but none was picked. */
+    optionId: string | null;
+}
+export interface ProductPickerSectionProps {
+    value: ProductPickerValue;
+    onChange: (value: ProductPickerValue) => void;
+    /** When true, skip data fetches (dialog closed / parent gated). */
+    enabled?: boolean;
+    /** When true, hide the product picker and fix the productId (e.g., launched from a product page). */
+    lockProduct?: boolean;
+    /** When false, product options are selected downstream as quantities instead of a single global choice. */
+    showOptionPicker?: boolean;
+    labels?: {
+        product?: string;
+        productSearchPlaceholder?: string;
+        productSelectPlaceholder?: string;
+        option?: string;
+        optionNone?: string;
+    };
+}
+/**
+ * Controlled product + option picker. Splits `value` + `onChange` so apps can
+ * replace the whole section (e.g., with a typeahead against a custom catalog)
+ * without reimplementing the cascade logic, or keep this one and swap labels.
+ */
+export declare function ProductPickerSection({ value, onChange, enabled, lockProduct, showOptionPicker, labels, }: ProductPickerSectionProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-picker-section.d.ts.map

package/dist/components/product-picker-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-picker-section.d.ts","sourceRoot":"","sources":["../../src/components/product-picker-section.tsx"],"names":[],"mappings":"AA+BA,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,CAAA;IACjB,uFAAuF;IACvF,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;CACxB;AAED,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,kBAAkB,CAAA;IACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAA;IAC7C,mEAAmE;IACnE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,qGAAqG;IACrG,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,2GAA2G;IAC3G,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,wBAAwB,CAAC,EAAE,MAAM,CAAA;QACjC,wBAAwB,CAAC,EAAE,MAAM,CAAA;QACjC,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,UAAU,CAAC,EAAE,MAAM,CAAA;KACpB,CAAA;CACF;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,QAAQ,EACR,OAAc,EACd,WAAmB,EACnB,gBAAuB,EACvB,MAAM,GACP,EAAE,yBAAyB,2CAyI3B"}

package/dist/components/product-picker-section.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useProduct, useProductOptions, useProducts, } from "@voyant-travel/inventory-react";
+import { Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyant-travel/ui/components";
+import { Combobox, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, } from "@voyant-travel/ui/components/combobox";
+import * as React from "react";
+import { useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
+import { productMatchesPickerSearch } from "./booking-create-utils.js";
+const OPTION_NONE = "__none__";
+/**
+ * Controlled product + option picker. Splits `value` + `onChange` so apps can
+ * replace the whole section (e.g., with a typeahead against a custom catalog)
+ * without reimplementing the cascade logic, or keep this one and swap labels.
+ */
+export function ProductPickerSection({ value, onChange, enabled = true, lockProduct = false, showOptionPicker = true, labels, }) {
+    const [productSearch, setProductSearch] = React.useState("");
+    const cachedProductsRef = React.useRef(new Map());
+    const messages = useBookingsUiMessagesOrDefault();
+    const merged = { ...messages.productPickerSection.labels, ...labels };
+    const { data: productsData } = useProducts({
+        search: productSearch || undefined,
+        limit: 20,
+        enabled: enabled && !lockProduct,
+    });
+    const selectedProductQuery = useProduct(value.productId || undefined, {
+        enabled: enabled && Boolean(value.productId),
+    });
+    const products = React.useMemo(() => {
+        const map = new Map(cachedProductsRef.current);
+        for (const product of productsData?.data ?? [])
+            map.set(product.id, product);
+        if (selectedProductQuery.data)
+            map.set(selectedProductQuery.data.id, selectedProductQuery.data);
+        cachedProductsRef.current = map;
+        return Array.from(map.values());
+    }, [productsData?.data, selectedProductQuery.data]);
+    const productMap = React.useMemo(() => new Map(products.map((product) => [product.id, product])), [products]);
+    const resolveProductLabel = React.useCallback((productId) => productMap.get(productId)?.name ?? cachedProductsRef.current.get(productId)?.name ?? "", [productMap]);
+    const selectedProductLabel = value.productId ? resolveProductLabel(value.productId) : "";
+    const [productInputValue, setProductInputValue] = React.useState(selectedProductLabel);
+    React.useEffect(() => {
+        if (selectedProductLabel)
+            setProductInputValue(selectedProductLabel);
+    }, [selectedProductLabel]);
+    const { data: optionsData } = useProductOptions({
+        productId: value.productId || undefined,
+        limit: 50,
+        enabled: enabled && showOptionPicker && Boolean(value.productId),
+    });
+    const options = optionsData?.data ?? [];
+    return (_jsxs(_Fragment, { children: [!lockProduct && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs(Label, { children: [merged.product, " ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsxs(Combobox, { items: products.map((product) => product.id), value: value.productId || null, inputValue: productInputValue, autoHighlight: true, disabled: !enabled, filter: (id, query) => productMatchesPickerSearch(productMap.get(id), query), itemToStringLabel: (id) => resolveProductLabel(id) || id, itemToStringValue: (id) => id, onInputValueChange: (next) => {
+                            setProductInputValue(next);
+                            setProductSearch(next);
+                            if (!next)
+                                onChange({ productId: "", optionId: null });
+                        }, onValueChange: (next) => {
+                            const productId = next ?? "";
+                            onChange({ productId, optionId: null });
+                            setProductInputValue(productId ? resolveProductLabel(productId) : "");
+                        }, children: [_jsx(ComboboxInput, { placeholder: merged.productSearchPlaceholder, showClear: !!value.productId }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: merged.productEmpty }), _jsx(ComboboxList, { children: _jsx(ComboboxCollection, { children: (id) => {
+                                                const product = productMap.get(id);
+                                                if (!product)
+                                                    return null;
+                                                return (_jsx(ComboboxItem, { value: product.id, children: _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate font-medium", children: product.name }), _jsxs("span", { className: "truncate text-xs text-muted-foreground", children: [product.sellCurrency, product.sellAmountCents != null
+                                                                        ? ` · ${product.sellAmountCents / 100}`
+                                                                        : ""] })] }) }, product.id));
+                                            } }) })] })] })] })), showOptionPicker && value.productId && options.length > 0 && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: merged.option }), _jsxs(Select, { items: [
+                            { label: merged.optionNone, value: OPTION_NONE },
+                            ...options.map((o) => ({ label: o.name, value: o.id })),
+                        ], value: value.optionId ?? OPTION_NONE, onValueChange: (v) => onChange({
+                            productId: value.productId,
+                            optionId: v === OPTION_NONE ? null : (v ?? null),
+                        }), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: OPTION_NONE, children: merged.optionNone }), options.map((o) => (_jsx(SelectItem, { value: o.id, children: o.name }, o.id)))] })] })] }))] }));
+}