@voyant-travel/bookings-react 0.119.3

package/dist/components/option-units-stepper-section.js

@@ -0,0 +1,276 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useQueries } from "@tanstack/react-query";
+import { getOptionUnitsQueryOptions, useProductOptions, useVoyantProductsContext, } from "@voyant-travel/inventory-react";
+import { useSlotUnitAvailability } from "@voyant-travel/operations-react/availability";
+import { Button, Label } from "@voyant-travel/ui/components";
+import { Minus, Plus } from "lucide-react";
+import * as React from "react";
+import { useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
+export const emptyOptionUnitsStepperValue = { quantities: {} };
+/**
+ * Rooms / per-unit stepper for booking-create flows. Drives
+ * `GET /v1/operations/availability/slots/:id/unit-availability` from #235 when a
+ * departure is selected, and product option-level units before departure
+ * selection, so operators can build "2 double rooms and 1 single" drafts.
+ *
+ * The section only tracks **intent** (how many of each unit the operator
+ * wants to book). Actual hold/reservation happens when the parent submits
+ * the booking — capacity drops the moment the reservation transaction
+ * commits; the next refetch of `useSlotUnitAvailability` reflects it.
+ *
+ * ### Stepper bounds
+ *
+ * - Minimum is 0 (operator can deselect).
+ * - Maximum is the unit's `remaining` count from the server. Unlimited
+ *   pools (`remaining === null`) have no upper bound.
+ * - The server is the truth: entering `3 doubles` when only 2 remain just
+ *   disables the "+" button — we don't let the UI submit a request that
+ *   would 409 at insert time.
+ */
+export function OptionUnitsStepperSection({ value, onChange, productId, slotId, optionId, restrictToOption = false, enabled = true, onUnitsChange, labels, slotHasFiniteCapacity = false, invalidOptionUnitIds = [], }) {
+    const productsClient = useVoyantProductsContext();
+    const messages = useBookingsUiMessagesOrDefault();
+    const merged = { ...messages.roomsStepperSection.labels, ...labels };
+    const availability = useSlotUnitAvailability({ slotId, enabled: enabled && Boolean(slotId) });
+    // Always fetch option-level units for the product. They're needed
+    // both before a slot is picked AND as a fallback after picking a slot
+    // whose `availability_slots` row has no per-unit allocation rows wired
+    // (the default for product-level slots seeded by the operator).
+    const optionsQuery = useProductOptions({
+        productId,
+        status: "active",
+        limit: 100,
+        enabled: enabled && Boolean(productId),
+    });
+    const productOptions = React.useMemo(() => {
+        const options = optionsQuery.data?.data ?? [];
+        if (!optionId)
+            return options;
+        const selected = options.find((option) => option.id === optionId);
+        const rest = options.filter((option) => option.id !== optionId);
+        return selected ? [selected, ...rest] : options;
+    }, [optionsQuery.data?.data, optionId]);
+    const optionUnitQueries = useQueries({
+        queries: productOptions.map((option) => ({
+            ...getOptionUnitsQueryOptions(productsClient, {
+                optionId: option.id,
+                limit: 100,
+            }),
+            enabled: enabled && Boolean(productId),
+        })),
+    });
+    const optionUnitRows = React.useMemo(() => {
+        const rows = [];
+        productOptions.forEach((option, index) => {
+            const units = optionUnitQueries[index]?.data?.data ?? [];
+            rows.push(...units.map((unit) => optionUnitToStepperUnit(option, unit, units.length)));
+        });
+        return rows;
+    }, [productOptions, optionUnitQueries]);
+    // optionUnitId → optionId lookup, derived from the product's own option
+    // catalog. The slot-availability endpoint only returns option_unit rows
+    // for the slot's bound option and doesn't stamp the option_id on each
+    // row, so we look it up from the units we already fetched per option.
+    const optionByUnitId = React.useMemo(() => {
+        const map = new Map();
+        for (const unit of optionUnitRows) {
+            if (unit.optionId)
+                map.set(unit.optionUnitId, unit.optionId);
+        }
+        return map;
+    }, [optionUnitRows]);
+    const productUnitById = React.useMemo(() => {
+        return new Map(optionUnitRows.map((unit) => [unit.optionUnitId, unit]));
+    }, [optionUnitRows]);
+    // The slot's bound option, derived from the first availability row.
+    // `null` when the slot is product-level (no option_id) — that path goes
+    // through the product-level fallback below.
+    const slotOptionId = React.useMemo(() => resolveSlotOptionId(availability.data?.data ?? [], optionByUnitId, optionId ?? null), [availability.data?.data, optionByUnitId, optionId]);
+    const availabilityUnitRows = React.useMemo(() => (availability.data?.data ?? []).map((unit) => {
+        const productUnit = productUnitById.get(unit.optionUnitId);
+        return {
+            ...unit,
+            optionId: productUnit?.optionId ?? slotOptionId ?? optionId ?? null,
+            unitCode: productUnit?.unitCode ?? null,
+            minAge: productUnit?.minAge ?? null,
+            maxAge: productUnit?.maxAge ?? null,
+            unitType: productUnit?.unitType ?? null,
+        };
+    }), [availability.data?.data, productUnitById, slotOptionId, optionId]);
+    // Slot-bound per-unit availability stays authoritative for the slot's
+    // option (real-time `remaining` from active bookings). For *other*
+    // options the same product offers, fall back to the product-level
+    // option_units so the operator can still pick a DBL/TWN even when the
+    // slot is option-scoped to SGL. Product-level slots (no option_id) hit
+    // the no-slot-rows branch and use the product fallback for everything.
+    // See issue #960.
+    const units = React.useMemo(() => {
+        const merged = mergeStepperUnits(availabilityUnitRows, optionUnitRows, slotOptionId, Boolean(slotId));
+        // Journey: the option is already chosen, so show ONLY its units. Other
+        // options' rooms aren't bookable under the selected option (an option
+        // with no rooms of its own correctly shows none).
+        if (restrictToOption && optionId)
+            return merged.filter((unit) => unit.optionId === optionId);
+        return merged;
+    }, [availabilityUnitRows, optionUnitRows, slotOptionId, slotId, restrictToOption, optionId]);
+    const invalidOptionUnitIdSet = React.useMemo(() => new Set(invalidOptionUnitIds), [invalidOptionUnitIds]);
+    React.useEffect(() => {
+        onUnitsChange?.(units);
+    }, [onUnitsChange, units]);
+    // Person-priced options are grouped by option: operators choose pax
+    // count, then traveler rows split Adult / Child / Infant. Inventory
+    // options are different: rooms and vehicles are physical containers,
+    // so each room/vehicle unit must be selectable independently.
+    const optionRows = React.useMemo(() => {
+        const groups = new Map();
+        for (const unit of units) {
+            const key = unit.optionId ?? unit.optionUnitId;
+            const entry = groups.get(key);
+            if (entry) {
+                entry.allUnits.push(unit);
+                // Prefer an explicit ADULT unit as primary; fall back to whatever
+                // arrived first.
+                if (isAdultUnit(unit) && !isAdultUnit(entry.primary))
+                    entry.primary = unit;
+            }
+            else {
+                groups.set(key, { primary: unit, allUnits: [unit] });
+            }
+        }
+        return Array.from(groups.entries()).flatMap(([optionKey, group]) => {
+            const optionName = productOptions.find((option) => option.id === optionKey)?.name ?? group.primary.unitName;
+            const inventoryUnits = group.allUnits.filter(isInventoryUnit);
+            if (inventoryUnits.length > 0) {
+                return inventoryUnits.map((unit) => ({
+                    optionKey: unit.optionUnitId,
+                    optionName: unit.unitName,
+                    primary: unit,
+                    allUnits: [unit],
+                    totalRemaining: unit.remaining,
+                }));
+            }
+            const totalRemaining = group.allUnits.reduce((acc, unit) => {
+                if (unit.remaining === null)
+                    return null;
+                if (acc === null)
+                    return null;
+                return acc + unit.remaining;
+            }, 0);
+            return [
+                {
+                    optionKey,
+                    optionName,
+                    primary: group.primary,
+                    allUnits: group.allUnits,
+                    totalRemaining,
+                },
+            ];
+        });
+    }, [units, productOptions]);
+    if (!slotId && !productId && !optionId) {
+        return (_jsxs("div", { className: "flex flex-col gap-2 rounded-md border p-3", children: [_jsx(Label, { children: merged.heading }), _jsx("p", { className: "text-xs text-muted-foreground", children: merged.noOption })] }));
+    }
+    // Both data sources need to resolve before declaring an empty result
+    // — slot units may legitimately be empty (product-level slot), and
+    // we don't want to flash the empty state before option-level units
+    // finish loading.
+    const optionsLoaded = optionsQuery.isSuccess && optionUnitQueries.every((query) => query.isSuccess);
+    const loaded = slotId ? availability.isSuccess && optionsLoaded : optionsLoaded;
+    if (loaded && units.length === 0) {
+        return (_jsxs("div", { className: "flex flex-col gap-2 rounded-md border p-3", children: [_jsx(Label, { children: merged.heading }), _jsx("p", { className: "text-xs text-muted-foreground", children: merged.noUnits })] }));
+    }
+    const setQuantity = (unitId, qty) => {
+        const next = { ...value.quantities };
+        if (qty <= 0) {
+            delete next[unitId];
+        }
+        else {
+            next[unitId] = qty;
+        }
+        onChange({ quantities: next });
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-2 rounded-md border p-3", children: [_jsx(Label, { children: merged.heading }), _jsx("div", { className: "flex flex-col gap-2", children: optionRows.map(({ optionKey, optionName, primary, allUnits, totalRemaining }) => {
+                    const qty = value.quantities[primary.optionUnitId] ?? 0;
+                    const isInvalid = optionRowHasInvalidUnit(allUnits, invalidOptionUnitIdSet);
+                    const remainingLabel = resolveOptionRemainingLabel({
+                        totalRemaining,
+                        units: allUnits,
+                        slotHasFiniteCapacity,
+                        remaining: merged.remaining,
+                        unlimited: merged.unlimited,
+                        fillsSlotCapacity: merged.fillsSlotCapacity,
+                    });
+                    const atMax = totalRemaining !== null && qty >= totalRemaining;
+                    return (_jsxs("div", { className: `flex items-center gap-3 rounded-md border px-3 py-2 ${isInvalid ? "border-destructive/70 bg-destructive/5 ring-1 ring-destructive/20" : ""}`, "aria-invalid": isInvalid ? true : undefined, children: [_jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 text-sm font-medium", children: [_jsx("span", { children: optionName }), isInvalid ? (_jsx("span", { className: "rounded-sm bg-destructive/10 px-1.5 py-0.5 text-[10px] font-medium text-destructive", children: merged.reviewLine })) : null] }), _jsx("div", { className: "text-xs text-muted-foreground", children: remainingLabel })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7 w-7 p-0", onClick: () => setQuantity(primary.optionUnitId, Math.max(0, qty - 1)), disabled: qty <= 0, "aria-label": `${merged.decreaseUnitPrefix} ${optionName}`, children: _jsx(Minus, { className: "h-3.5 w-3.5" }) }), _jsx("span", { className: "min-w-[1.5rem] text-center text-sm tabular-nums", children: qty }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7 w-7 p-0", onClick: () => setQuantity(primary.optionUnitId, qty + 1), disabled: atMax, "aria-label": `${merged.increaseUnitPrefix} ${optionName}`, children: _jsx(Plus, { className: "h-3.5 w-3.5" }) })] })] }, optionKey));
+                }) })] }));
+}
+export function resolveOptionRemainingLabel({ totalRemaining, units, slotHasFiniteCapacity, remaining, unlimited, fillsSlotCapacity, }) {
+    if (totalRemaining !== null)
+        return `${totalRemaining} ${remaining}`;
+    if (slotHasFiniteCapacity && units.length > 0 && units.every(isPersonUnit)) {
+        return fillsSlotCapacity ?? unlimited;
+    }
+    return unlimited;
+}
+export function optionRowHasInvalidUnit(units, invalidOptionUnitIds) {
+    return units.some((unit) => invalidOptionUnitIds.has(unit.optionUnitId));
+}
+/**
+ * Returns the `optionId` the slot is bound to, derived from the first
+ * slot-availability row whose `optionUnitId` we can map to a known
+ * product option. Falls back to the caller's `fallbackOptionId` (the
+ * dialog's currently-selected option) when no rows resolve — that lets
+ * the existing `optionId` prop drive the previous-behavior path for
+ * unit pickers that haven't loaded yet.
+ */
+export function resolveSlotOptionId(slotRows, optionByUnitId, fallbackOptionId) {
+    for (const row of slotRows) {
+        const resolved = optionByUnitId.get(row.optionUnitId);
+        if (resolved)
+            return resolved;
+    }
+    return fallbackOptionId;
+}
+/**
+ * Merges slot-bound per-unit availability with the product's option-unit
+ * catalog. Slot rows are authoritative for the slot's option (they carry
+ * real-time `remaining`); product-level rows fill in the other options
+ * the product offers so the operator can still pick mixes the slot isn't
+ * explicitly tracking. When the slot is product-level (no `option_id`)
+ * or hasn't loaded slot rows yet, the product-level rows cover everything.
+ */
+export function mergeStepperUnits(slotRows, productRows, slotOptionId, hasSlot) {
+    if (!hasSlot || slotRows.length === 0 || !slotOptionId) {
+        return [...productRows];
+    }
+    const otherOptionRows = productRows.filter((row) => row.optionId !== slotOptionId);
+    return [...slotRows, ...otherOptionRows];
+}
+function isAdultUnit(unit) {
+    // The seed creates ADULT / CHILD / SENIOR unit codes; the stepper
+    // unit object doesn't carry the code, so fall back to name-matching
+    // when the upstream code isn't surfaced.
+    return /\badult\b/i.test(unit.unitName);
+}
+function isPersonUnit(unit) {
+    return unit.unitType === "person";
+}
+function isInventoryUnit(unit) {
+    return unit.unitType === "room" || unit.unitType === "vehicle";
+}
+function optionUnitToStepperUnit(option, unit, unitCount) {
+    return {
+        optionId: option.id,
+        optionUnitId: unit.id,
+        unitName: unitCount === 1 ? option.name : `${option.name} - ${unit.name}`,
+        unitCode: unit.code,
+        minAge: unit.minAge,
+        maxAge: unit.maxAge,
+        unitType: unit.unitType,
+        occupancyMax: unit.occupancyMax,
+        initial: null,
+        reserved: 0,
+        remaining: unit.maxQuantity ?? null,
+    };
+}

package/dist/components/payment-schedule-section.d.ts

@@ -0,0 +1,91 @@
+export type PaymentScheduleMode = "full" | "split";
+export interface PaymentInstallment {
+    /** Stable React key, regenerated on row add. */
+    id: string;
+    /** Amount for this installment. In Full mode the field is implicit (uses the booking total). */
+    amountCents: number | null;
+    dueDate: string | null;
+    alreadyPaid: boolean;
+    paymentDate: string | null;
+    paymentMethod: string;
+    paymentReference: string;
+}
+export interface PaymentScheduleValue {
+    mode: PaymentScheduleMode;
+    /**
+     * Full mode keeps a single installment whose amount mirrors the
+     * booking total at submit time. Split keeps two or more installments
+     * the operator types amounts + due dates for.
+     */
+    installments: PaymentInstallment[];
+}
+export declare function createInstallment(overrides?: Partial<PaymentInstallment>): PaymentInstallment;
+export declare const emptyPaymentScheduleValue: PaymentScheduleValue;
+/**
+ * Factory for the initial `PaymentScheduleValue` when the booking has a
+ * known departure (slot or product start date). The single Full-mode
+ * installment defaults to the departure day so operators don't have to
+ * re-pick it on every fresh form, and so the dueDate field doesn't
+ * surface today's date for a trip starting weeks/months later.
+ *
+ * When `departureDate` is null/undefined we fall back to `emptyPaymentScheduleValue`
+ * which uses today.
+ */
+export declare function createPaymentScheduleValue(departureDate: string | null | undefined): PaymentScheduleValue;
+export interface PaymentScheduleSectionProps {
+    value: PaymentScheduleValue;
+    onChange: (value: PaymentScheduleValue) => void;
+    /**
+     * Booking total in cents. Used to drive the Full-mode amount (which
+     * mirrors the total at submit) and to default split-mode amounts to
+     * an even share when the operator switches modes / adds rows.
+     */
+    totalAmountCents?: number;
+    /**
+     * ISO date of the booking's departure / service start. When provided,
+     * split-mode installments default to dates between today and the
+     * departure (rather than `today + 30·i`, which can land *after*
+     * departure for short lead times).
+     */
+    departureDate?: string | null;
+    /** Used only for display formatting (e.g., "EUR"). No server-side effect. */
+    currency?: string;
+    labels?: {
+        heading?: string;
+        modeUnpaid?: string;
+        modeFull?: string;
+        modeAdvance?: string;
+        modeSplit?: string;
+        dueDate?: string;
+        amount?: string;
+        firstInstallment?: string;
+        secondInstallment?: string;
+        preset5050?: string;
+        unpaidHint?: string;
+        totalDue?: string;
+        scheduledTotal?: string;
+        remaining?: string;
+        alreadyPaid?: string;
+        paymentDate?: string;
+        paymentMethod?: string;
+        paymentReference?: string;
+        addInstallment?: string;
+        removeInstallment?: string;
+    };
+}
+/**
+ * Payment schedule picker for booking-create flows. The operator picks
+ * Full (one due date for the whole amount) or Split (N installments,
+ * default two with 50/50, but the "+" button adds as many as needed).
+ *
+ * Switching modes prefills sensible defaults: Full → today's due date;
+ * Split → today + today+30 with a 50/50 amount split. Everything
+ * remains editable so this is just a low-friction starting point.
+ *
+ * The section produces a controlled `PaymentScheduleValue` — actually
+ * creating `booking_payment_schedules` rows happens in the parent at
+ * submit time, after the booking exists (schedules have a FK to
+ * `bookings.id`).
+ */
+export declare function PaymentScheduleSection({ value, onChange, totalAmountCents, departureDate, currency, labels, }: PaymentScheduleSectionProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=payment-schedule-section.d.ts.map

package/dist/components/payment-schedule-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"payment-schedule-section.d.ts","sourceRoot":"","sources":["../../src/components/payment-schedule-section.tsx"],"names":[],"mappings":"AAsBA,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,OAAO,CAAA;AAElD,MAAM,WAAW,kBAAkB;IACjC,gDAAgD;IAChD,EAAE,EAAE,MAAM,CAAA;IACV,gGAAgG;IAChG,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,WAAW,EAAE,OAAO,CAAA;IACpB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,aAAa,EAAE,MAAM,CAAA;IACrB,gBAAgB,EAAE,MAAM,CAAA;CACzB;AAED,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,mBAAmB,CAAA;IACzB;;;;OAIG;IACH,YAAY,EAAE,kBAAkB,EAAE,CAAA;CACnC;AAkBD,wBAAgB,iBAAiB,CAAC,SAAS,GAAE,OAAO,CAAC,kBAAkB,CAAM,GAAG,kBAAkB,CAWjG;AAED,eAAO,MAAM,yBAAyB,EAAE,oBAGvC,CAAA;AAED;;;;;;;;;GASG;AACH,wBAAgB,0BAA0B,CACxC,aAAa,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GACvC,oBAAoB,CAKtB;AAED,MAAM,WAAW,2BAA2B;IAC1C,KAAK,EAAE,oBAAoB,CAAA;IAC3B,QAAQ,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAA;IAC/C;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,gBAAgB,CAAC,EAAE,MAAM,CAAA;QACzB,iBAAiB,CAAC,EAAE,MAAM,CAAA;QAC1B,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,cAAc,CAAC,EAAE,MAAM,CAAA;QACvB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,aAAa,CAAC,EAAE,MAAM,CAAA;QACtB,gBAAgB,CAAC,EAAE,MAAM,CAAA;QACzB,cAAc,CAAC,EAAE,MAAM,CAAA;QACvB,iBAAiB,CAAC,EAAE,MAAM,CAAA;KAC3B,CAAA;CACF;AA+CD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,QAAQ,EACR,gBAAgB,EAChB,aAAa,EACb,QAAQ,EACR,MAAM,GACP,EAAE,2BAA2B,2CAgQ7B"}

package/dist/components/payment-schedule-section.js

@@ -0,0 +1,206 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Checkbox, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyant-travel/ui/components";
+import { CurrencyInput } from "@voyant-travel/ui/components/currency-input";
+import { DatePicker } from "@voyant-travel/ui/components/date-picker";
+import { Plus, X } from "lucide-react";
+import { useBookingsUiI18nOrDefault, useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
+let installmentSeq = 0;
+function nextInstallmentId() {
+    installmentSeq += 1;
+    return `inst_${installmentSeq}_${Math.random().toString(36).slice(2, 6)}`;
+}
+function todayIso() {
+    return new Date().toISOString().slice(0, 10);
+}
+function plusDaysIso(base, days) {
+    const d = new Date(base);
+    d.setDate(d.getDate() + days);
+    return d.toISOString().slice(0, 10);
+}
+export function createInstallment(overrides = {}) {
+    return {
+        id: nextInstallmentId(),
+        amountCents: null,
+        dueDate: null,
+        alreadyPaid: false,
+        paymentDate: null,
+        paymentMethod: "bank_transfer", // i18n-literal-ok payment-method enum
+        paymentReference: "",
+        ...overrides,
+    };
+}
+export const emptyPaymentScheduleValue = {
+    mode: "full",
+    installments: [createInstallment({ dueDate: todayIso() })],
+};
+/**
+ * Factory for the initial `PaymentScheduleValue` when the booking has a
+ * known departure (slot or product start date). The single Full-mode
+ * installment defaults to the departure day so operators don't have to
+ * re-pick it on every fresh form, and so the dueDate field doesn't
+ * surface today's date for a trip starting weeks/months later.
+ *
+ * When `departureDate` is null/undefined we fall back to `emptyPaymentScheduleValue`
+ * which uses today.
+ */
+export function createPaymentScheduleValue(departureDate) {
+    return {
+        mode: "full",
+        installments: [createInstallment({ dueDate: departureDate ?? todayIso() })],
+    };
+}
+/**
+ * Distribute `total` evenly across `count` installments. Last row picks
+ * up the remainder so the sum is exact (e.g. 100 / 3 → 33, 33, 34).
+ */
+function distributeEvenly(total, count) {
+    if (count <= 0)
+        return [];
+    const base = Math.floor(total / count);
+    const out = Array.from({ length: count }, () => base);
+    const remainder = total - base * count;
+    if (remainder > 0 && out.length > 0) {
+        const last = out.length - 1;
+        out[last] = (out[last] ?? 0) + remainder;
+    }
+    return out;
+}
+/**
+ * Pick a default due date for installment #`index` (0-based) within a
+ * series of `count` installments. When the booking has a known
+ * departure date, the series spreads evenly between today and one day
+ * before departure (so every installment is collected pre-trip).
+ * Without a departure date we fall back to `today + 30·i`.
+ */
+function defaultDueDateForIndex(index, count, departureDate) {
+    const today = todayIso();
+    if (count <= 1)
+        return today;
+    const departure = (departureDate ?? "").trim();
+    const validDeparture = departure && Number.isFinite(new Date(departure).getTime());
+    if (!validDeparture)
+        return plusDaysIso(today, index * 30);
+    // Last installment lands one day before departure so the final
+    // collection cleared the rail before the customer travels.
+    const lastDay = plusDaysIso(departure, -1);
+    const span = (new Date(lastDay).getTime() - new Date(today).getTime()) / (1000 * 60 * 60 * 24);
+    if (span <= 0) {
+        // Departure is today or tomorrow — collapse every installment onto today.
+        return today;
+    }
+    const offset = Math.round((index * span) / (count - 1));
+    return plusDaysIso(today, offset);
+}
+/**
+ * Payment schedule picker for booking-create flows. The operator picks
+ * Full (one due date for the whole amount) or Split (N installments,
+ * default two with 50/50, but the "+" button adds as many as needed).
+ *
+ * Switching modes prefills sensible defaults: Full → today's due date;
+ * Split → today + today+30 with a 50/50 amount split. Everything
+ * remains editable so this is just a low-friction starting point.
+ *
+ * The section produces a controlled `PaymentScheduleValue` — actually
+ * creating `booking_payment_schedules` rows happens in the parent at
+ * submit time, after the booking exists (schedules have a FK to
+ * `bookings.id`).
+ */
+export function PaymentScheduleSection({ value, onChange, totalAmountCents, departureDate, currency, labels, }) {
+    const messages = useBookingsUiMessagesOrDefault();
+    const { formatCurrency, formatNumber } = useBookingsUiI18nOrDefault();
+    const merged = { ...messages.paymentScheduleSection.labels, ...labels };
+    const set = (patch) => onChange({ ...value, ...patch });
+    const total = typeof totalAmountCents === "number" ? totalAmountCents : null;
+    const modes = [
+        { id: "full", label: merged.modeFull },
+        { id: "split", label: merged.modeSplit },
+    ];
+    const switchMode = (nextMode) => {
+        if (nextMode === value.mode)
+            return;
+        if (nextMode === "full") {
+            const preserved = value.installments[0];
+            onChange({
+                mode: "full",
+                installments: [
+                    createInstallment({
+                        dueDate: preserved?.dueDate ?? todayIso(),
+                        alreadyPaid: preserved?.alreadyPaid ?? false,
+                        paymentDate: preserved?.paymentDate ?? null,
+                        paymentMethod: preserved?.paymentMethod ?? "bank_transfer",
+                        paymentReference: preserved?.paymentReference ?? "",
+                    }),
+                ],
+            });
+            return;
+        }
+        // → split. Seed with two installments if we don't already have ≥2.
+        const seedCount = Math.max(2, value.installments.length);
+        const evenAmounts = total != null ? distributeEvenly(total, seedCount) : [];
+        const installments = Array.from({ length: seedCount }, (_, idx) => {
+            const existing = value.installments[idx];
+            return createInstallment({
+                amountCents: existing?.amountCents ?? evenAmounts[idx] ?? null,
+                dueDate: existing?.dueDate ?? defaultDueDateForIndex(idx, seedCount, departureDate),
+                alreadyPaid: existing?.alreadyPaid ?? false,
+                paymentDate: existing?.paymentDate ?? null,
+                paymentMethod: existing?.paymentMethod ?? "bank_transfer",
+                paymentReference: existing?.paymentReference ?? "",
+            });
+        });
+        onChange({ mode: "split", installments });
+    };
+    const updateInstallment = (idx, patch) => {
+        const next = value.installments.map((row, i) => (i === idx ? { ...row, ...patch } : row));
+        set({ installments: next });
+    };
+    const addInstallment = () => {
+        const count = value.installments.length + 1;
+        const evenAmounts = total != null ? distributeEvenly(total, count) : [];
+        const next = value.installments.map((row, i) => ({
+            ...row,
+            amountCents: total != null ? (evenAmounts[i] ?? row.amountCents) : row.amountCents,
+        }));
+        next.push(createInstallment({
+            amountCents: total != null ? (evenAmounts[count - 1] ?? null) : null,
+            dueDate: defaultDueDateForIndex(count - 1, count, departureDate),
+        }));
+        set({ installments: next });
+    };
+    const removeInstallment = (idx) => {
+        if (value.installments.length <= 2)
+            return;
+        const remaining = value.installments.filter((_, i) => i !== idx);
+        // Redistribute amounts so the remaining rows still cover the booking
+        // total — otherwise the "Remaining" tracker reports a phantom gap
+        // that doesn't correspond to anything the operator can act on.
+        const evenAmounts = total != null ? distributeEvenly(total, remaining.length) : [];
+        const next = remaining.map((row, i) => ({
+            ...row,
+            amountCents: total != null ? (evenAmounts[i] ?? row.amountCents) : row.amountCents,
+        }));
+        set({ installments: next });
+    };
+    const scheduledTotal = value.mode === "full"
+        ? (total ?? 0)
+        : value.installments.reduce((sum, row) => sum + (row.amountCents ?? 0), 0);
+    const remaining = total === null ? null : Math.max(0, total - scheduledTotal);
+    const formatAmount = (cents) => {
+        if (cents === null)
+            return "-";
+        return currency
+            ? formatCurrency(cents / 100, currency)
+            : formatNumber(cents / 100, {
+                minimumFractionDigits: 2,
+                maximumFractionDigits: 2,
+            });
+    };
+    const paymentMethodLabels = messages.bookingPaymentsSummary.paymentMethodLabels;
+    const renderPaidFields = (idx, installment) => {
+        const checkboxId = `payment-schedule-installment-${idx}-already-paid`;
+        return (_jsxs("div", { className: "flex flex-col gap-2 rounded-md border border-dashed p-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: checkboxId, checked: installment.alreadyPaid, onCheckedChange: (next) => updateInstallment(idx, { alreadyPaid: next === true }) }), _jsx(Label, { htmlFor: checkboxId, className: "cursor-pointer text-xs", children: merged.alreadyPaid })] }), installment.alreadyPaid ? (_jsxs("div", { className: "grid gap-2 sm:grid-cols-3", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-xs", children: merged.paymentDate }), _jsx(DatePicker, { value: installment.paymentDate ?? "", onChange: (nextValue) => updateInstallment(idx, { paymentDate: nextValue }) })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-xs", children: merged.paymentMethod }), _jsxs(Select, { value: installment.paymentMethod, onValueChange: (nextValue) => updateInstallment(idx, { paymentMethod: nextValue ?? "bank_transfer" }), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: ["bank_transfer", "credit_card", "cash", "voucher", "other"].map((method) => (_jsx(SelectItem, { value: method, children: paymentMethodLabels[method === "credit_card" ? "card" : method] }, method))) })] })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-xs", children: merged.paymentReference }), _jsx(Input, { value: installment.paymentReference, onChange: (event) => updateInstallment(idx, { paymentReference: event.target.value }) })] })] })) : null] }));
+    };
+    const fullInstallment = value.installments[0] ?? createInstallment({ dueDate: todayIso() });
+    return (_jsxs("div", { className: "flex flex-col gap-3 rounded-md border p-3", children: [_jsx(Label, { children: merged.heading }), _jsxs("div", { className: "grid gap-2 rounded-md bg-muted/40 p-2 text-xs sm:grid-cols-3", children: [_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground", children: merged.totalDue }), _jsx("span", { className: "font-medium tabular-nums", children: formatAmount(total) })] }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground", children: merged.scheduledTotal }), _jsx("span", { className: "font-medium tabular-nums", children: formatAmount(scheduledTotal) })] }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground", children: merged.remaining }), _jsx("span", { className: "font-medium tabular-nums", children: formatAmount(remaining) })] })] }), _jsx("div", { className: "flex flex-wrap items-center gap-2", children: modes.map((mode) => (_jsx(Button, { type: "button", size: "sm", variant: value.mode === mode.id ? "default" : "ghost", onClick: () => switchMode(mode.id), children: mode.label }, mode.id))) }), value.mode === "full" && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-xs", children: merged.dueDate }), _jsx(DatePicker, { value: fullInstallment.dueDate ?? "", onChange: (nextValue) => updateInstallment(0, { dueDate: nextValue }) })] }), renderPaidFields(0, fullInstallment)] })), value.mode === "split" && (_jsxs("div", { className: "flex flex-col gap-3", children: [value.installments.map((installment, idx) => (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-xs font-medium", children: merged.firstInstallment.replace(/\b1\b|first|primul|1st/i, String(idx + 1)) }), value.installments.length > 2 ? (_jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": merged.removeInstallment, onClick: () => removeInstallment(idx), children: _jsx(X, { className: "h-3.5 w-3.5" }) })) : null] }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsx(CurrencyInput, { placeholder: merged.amount, value: installment.amountCents, onChange: (next) => updateInstallment(idx, { amountCents: next }), currency: currency }), _jsx(DatePicker, { value: installment.dueDate ?? "", onChange: (nextValue) => updateInstallment(idx, { dueDate: nextValue }) })] }), renderPaidFields(idx, installment)] }, installment.id))), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addInstallment, className: "self-start", children: [_jsx(Plus, { className: "mr-1 h-3.5 w-3.5" }), merged.addInstallment] })] }))] }));
+}

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

@@ -0,0 +1,71 @@
+export type PersonPickerMode = "existing" | "new";
+export type BillingTargetMode = "person" | "organization";
+export interface NewPersonValue {
+    firstName: string;
+    lastName: string;
+    email: string;
+    phone: string;
+}
+export interface PersonPickerValue {
+    billTo?: BillingTargetMode;
+    mode: PersonPickerMode;
+    /** Set when mode === "existing". */
+    personId: string;
+    /** Used when mode === "new". */
+    newPerson: NewPersonValue;
+    /** `null` = no organization attached. */
+    organizationId: string | null;
+}
+export declare const emptyNewPerson: NewPersonValue;
+export declare const emptyPersonPickerValue: PersonPickerValue;
+export interface PersonPickerSectionProps {
+    value: PersonPickerValue;
+    onChange: (value: PersonPickerValue) => void;
+    enabled?: boolean;
+    showOrganization?: boolean;
+    /**
+     * Hide the person-vs-organization toggle while still allowing org mode
+     * (driven by `value.billTo`). Use when an outer control already chooses
+     * the target — e.g. the journey's Buyer type radio.
+     */
+    hideTargetToggle?: boolean;
+    labels?: {
+        person?: string;
+        organization?: string;
+        billTo?: string;
+        billToPerson?: string;
+        billToOrganization?: string;
+        createNewPerson?: string;
+        createNewOrganization?: string;
+        createPersonSheetTitle?: string;
+        createOrganizationSheetTitle?: string;
+        editPerson?: string;
+        editOrganization?: string;
+        editPersonSheetTitle?: string;
+        editOrganizationSheetTitle?: string;
+        selectExistingPerson?: string;
+        personSearchPlaceholder?: string;
+        personSelectPlaceholder?: string;
+        personEmpty?: string;
+        firstName?: string;
+        firstNamePlaceholder?: string;
+        lastName?: string;
+        lastNamePlaceholder?: string;
+        email?: string;
+        emailPlaceholder?: string;
+        phone?: string;
+        phonePlaceholder?: string;
+        organizationSearchPlaceholder?: string;
+        organizationSelectPlaceholder?: string;
+        organizationEmpty?: string;
+        organizationNone?: string;
+    };
+}
+/**
+ * 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 declare function PersonPickerSection({ value, onChange, enabled, showOrganization, hideTargetToggle, labels, }: PersonPickerSectionProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=person-picker-section.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"person-picker-section.d.ts","sourceRoot":"","sources":["../../src/components/person-picker-section.tsx"],"names":[],"mappings":"AAiCA,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,KAAK,CAAA;AACjD,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,cAAc,CAAA;AAEzD,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,CAAC,EAAE,iBAAiB,CAAA;IAC1B,IAAI,EAAE,gBAAgB,CAAA;IACtB,oCAAoC;IACpC,QAAQ,EAAE,MAAM,CAAA;IAChB,gCAAgC;IAChC,SAAS,EAAE,cAAc,CAAA;IACzB,yCAAyC;IACzC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAA;CAC9B;AAED,eAAO,MAAM,cAAc,EAAE,cAK5B,CAAA;AAED,eAAO,MAAM,sBAAsB,EAAE,iBAMpC,CAAA;AAED,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,iBAAiB,CAAA;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,MAAM,CAAC,EAAE;QACP,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,kBAAkB,CAAC,EAAE,MAAM,CAAA;QAC3B,eAAe,CAAC,EAAE,MAAM,CAAA;QACxB,qBAAqB,CAAC,EAAE,MAAM,CAAA;QAC9B,sBAAsB,CAAC,EAAE,MAAM,CAAA;QAC/B,4BAA4B,CAAC,EAAE,MAAM,CAAA;QACrC,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,gBAAgB,CAAC,EAAE,MAAM,CAAA;QACzB,oBAAoB,CAAC,EAAE,MAAM,CAAA;QAC7B,0BAA0B,CAAC,EAAE,MAAM,CAAA;QACnC,oBAAoB,CAAC,EAAE,MAAM,CAAA;QAC7B,uBAAuB,CAAC,EAAE,MAAM,CAAA;QAChC,uBAAuB,CAAC,EAAE,MAAM,CAAA;QAChC,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,oBAAoB,CAAC,EAAE,MAAM,CAAA;QAC7B,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,mBAAmB,CAAC,EAAE,MAAM,CAAA;QAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,gBAAgB,CAAC,EAAE,MAAM,CAAA;QACzB,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,gBAAgB,CAAC,EAAE,MAAM,CAAA;QACzB,6BAA6B,CAAC,EAAE,MAAM,CAAA;QACtC,6BAA6B,CAAC,EAAE,MAAM,CAAA;QACtC,iBAAiB,CAAC,EAAE,MAAM,CAAA;QAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAA;KAC1B,CAAA;CACF;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,QAAQ,EACR,OAAc,EACd,gBAAuB,EACvB,gBAAwB,EACxB,MAAM,GACP,EAAE,wBAAwB,2CAiV1B"}