@voyantjs/bookings-ui 0.19.0 → 0.21.0

package/dist/journey/components/journey-steps.js

@@ -0,0 +1,582 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from "@voyantjs/ui/components/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@voyantjs/ui/components/card";
+import { CountryCombobox } from "@voyantjs/ui/components/country-combobox";
+import { DatePicker } from "@voyantjs/ui/components/date-picker";
+import { Input } from "@voyantjs/ui/components/input";
+import { Label } from "@voyantjs/ui/components/label";
+import { PhoneInput } from "@voyantjs/ui/components/phone-input";
+import { RadioGroup, RadioGroupItem } from "@voyantjs/ui/components/radio-group";
+import { Textarea } from "@voyantjs/ui/components/textarea";
+import { Loader2 } from "lucide-react";
+import { patchBilling, patchConfigure, patchPaxCount, setAccommodation, setAddons, setPayment, setTravelers, totalPax, } from "../lib/draft-state.js";
+// ─────────────────────────────────────────────────────────────────
+// Configure
+// ─────────────────────────────────────────────────────────────────
+export function ConfigureStep({ draft, setDraft, shape, }) {
+    return (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Configure" }) }), _jsxs(CardContent, { className: "space-y-6", children: [_jsx(PaxBands, { draft: draft, setDraft: setDraft, shape: shape }), _jsx(DepartureFields, { draft: draft, setDraft: setDraft, shape: shape })] })] }));
+}
+function PaxBands({ draft, setDraft, shape }) {
+    return (_jsxs("div", { className: "space-y-3", children: [_jsx(Label, { children: "Travelers" }), _jsx("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-3", children: shape.paxBands.map((band) => {
+                    const value = draft.configure.pax?.[band.code] ?? 0;
+                    return (_jsxs("div", { className: "flex items-center justify-between rounded border p-3", children: [_jsxs("div", { children: [_jsx("div", { className: "font-medium", children: band.label }), band.minAge != null || band.maxAge != null ? (_jsx("div", { className: "text-muted-foreground text-xs", children: ageHint(band.minAge, band.maxAge) })) : null] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", type: "button", disabled: value <= band.minCount, onClick: () => setDraft(patchPaxCount(draft, band.code, value - 1)), children: "\u2212" }), _jsx("span", { className: "min-w-6 text-center", children: value }), _jsx(Button, { variant: "outline", size: "sm", type: "button", disabled: value >= band.maxCount, onClick: () => setDraft(patchPaxCount(draft, band.code, value + 1)), children: "+" })] })] }, band.code));
+                }) }), _jsx(PaxValidation, { draft: draft, shape: shape })] }));
+}
+function PaxValidation({ draft, shape, }) {
+    const total = totalPax(draft);
+    const { min, max } = shape.paxBandsAllowedTotal;
+    if (total < min) {
+        return (_jsxs("p", { className: "text-sm text-amber-600", children: ["Add at least ", min, " traveler", min === 1 ? "" : "s", " to continue."] }));
+    }
+    if (total > max) {
+        return _jsxs("p", { className: "text-sm text-destructive", children: ["Max ", max, " travelers per booking."] });
+    }
+    return null;
+}
+function DepartureFields({ draft, setDraft, shape }) {
+    const subSteps = shape.configureSubSteps ?? [];
+    // Render every sub-step kind the descriptor declares. Cruise
+    // (cabin-category, cabin-number) lands here in Phase F.
+    if (subSteps.length === 0) {
+        return _jsx(DepartureBasic, { draft: draft, setDraft: setDraft });
+    }
+    return (_jsx("div", { className: "space-y-4", children: subSteps.map((sub) => {
+            // Sub-step kinds are unique per descriptor — kind serves as
+            // a stable key.
+            if (sub.kind === "departure") {
+                return _jsx(DepartureBasic, { draft: draft, setDraft: setDraft }, "departure");
+            }
+            if (sub.kind === "date-range") {
+                return (_jsx(DateRangeFields, { draft: draft, setDraft: setDraft, minNights: sub.minNights, maxNights: sub.maxNights }, "date-range"));
+            }
+            if (sub.kind === "cabin-category") {
+                return (_jsx(CabinCategoryFields, { draft: draft, setDraft: setDraft, categories: sub.categories }, "cabin-category"));
+            }
+            if (sub.kind === "cabin-number") {
+                return (_jsx(CabinNumberFields, { draft: draft, setDraft: setDraft, perCategory: sub.perCategory }, "cabin-number"));
+            }
+            if (sub.kind === "air-arrangement") {
+                return _jsx(AirArrangementFields, { draft: draft, setDraft: setDraft }, "air-arrangement");
+            }
+            // "occupancy" — already rendered as PaxBands above; no sub-row.
+            return null;
+        }) }));
+}
+function DepartureBasic({ draft, setDraft, }) {
+    return (_jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [_jsx(DateField, { id: "bj-departure-date", label: "Departure date", value: draft.configure.departureDate ?? "", onChange: (v) => setDraft(patchConfigure(draft, { departureDate: v })), range: "future" }), _jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "bj-departure-time", children: "Time (optional)" }), _jsx(Input, { id: "bj-departure-time", type: "time", value: draft.configure.departureTime ?? "", onChange: (e) => setDraft(patchConfigure(draft, { departureTime: e.target.value })) })] })] }));
+}
+function DateRangeFields({ draft, setDraft, minNights, maxNights, }) {
+    const range = draft.configure.dateRange;
+    return (_jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [_jsx(DateField, { id: "bj-checkin", label: "Check-in", value: range?.checkIn ?? "", onChange: (v) => setDraft(patchConfigure(draft, {
+                    dateRange: { checkIn: v, checkOut: range?.checkOut ?? "" },
+                })), range: "future" }), _jsx(DateField, { id: "bj-checkout", label: `Check-out (${minNights}–${maxNights} nights)`, value: range?.checkOut ?? "", onChange: (v) => setDraft(patchConfigure(draft, {
+                    dateRange: { checkIn: range?.checkIn ?? "", checkOut: v },
+                })), range: "future" })] }));
+}
+function CabinCategoryFields({ draft, setDraft, categories, }) {
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Cabin category" }), _jsx("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: categories.map((cat) => {
+                    const selected = draft.configure.cabinCategoryId === cat.id;
+                    return (_jsxs("button", { type: "button", className: `rounded border p-3 text-left ${selected ? "border-primary ring-2 ring-primary" : ""}`, onClick: () => setDraft(patchConfigure(draft, { cabinCategoryId: cat.id, cabinNumberId: undefined })), children: [_jsx("div", { className: "font-medium", children: cat.name }), cat.description ? (_jsx("div", { className: "text-muted-foreground text-xs", children: cat.description })) : null] }, cat.id));
+                }) })] }));
+}
+function AirArrangementFields({ draft, setDraft, }) {
+    const current = draft.configure.airArrangement;
+    const options = [
+        {
+            value: "cruise_line",
+            label: "Cruise-line-arranged flights",
+            description: "The cruise line books your flights in a coordinated package. Operator follows up with the air desk.",
+        },
+        {
+            value: "independent",
+            label: "Independent flights",
+            description: "Book flights yourself or via a separate flight booking line.",
+        },
+        {
+            value: "none",
+            label: "No flights needed",
+            description: "Regional cruise / driving to the port.",
+        },
+    ];
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Air arrangements" }), _jsx("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-3", children: options.map((opt) => {
+                    const selected = current === opt.value;
+                    return (_jsxs("button", { type: "button", className: `rounded border p-3 text-left text-sm ${selected ? "border-primary ring-2 ring-primary" : ""}`, onClick: () => setDraft(patchConfigure(draft, { airArrangement: opt.value })), children: [_jsx("div", { className: "font-medium", children: opt.label }), _jsx("div", { className: "text-muted-foreground text-xs", children: opt.description })] }, opt.value));
+                }) })] }));
+}
+function CabinNumberFields({ draft, setDraft, perCategory, }) {
+    const catId = draft.configure.cabinCategoryId;
+    if (!catId)
+        return null;
+    const cabins = perCategory[catId] ?? [];
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Cabin number" }), _jsx("div", { className: "grid grid-cols-2 gap-2 sm:grid-cols-4", children: cabins.map((cabin) => {
+                    const selected = draft.configure.cabinNumberId === cabin.id;
+                    return (_jsx("button", { type: "button", className: `rounded border p-2 text-sm ${selected ? "border-primary ring-2 ring-primary" : ""}`, onClick: () => setDraft(patchConfigure(draft, { cabinNumberId: cabin.id })), children: cabin.label }, cabin.id));
+                }) })] }));
+}
+// ─────────────────────────────────────────────────────────────────
+// Billing
+// ─────────────────────────────────────────────────────────────────
+export function BillingStep({ draft, setDraft, renderLeadContactPicker, renderExtras, }) {
+    const billing = draft.billing;
+    const apply = (contact) => {
+        setDraft(patchBilling(draft, {
+            contact: {
+                firstName: contact.firstName,
+                lastName: contact.lastName,
+                email: contact.email ?? "",
+                phone: contact.phone,
+            },
+        }));
+    };
+    return (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Billing & lead contact" }) }), _jsxs(CardContent, { className: "space-y-6", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Buyer type" }), _jsxs(RadioGroup, { value: billing.buyerType, onValueChange: (v) => setDraft(patchBilling(draft, { buyerType: v })), className: "flex gap-4", children: [_jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx(RadioGroupItem, { value: "B2C" }), " Individual (B2C)"] }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx(RadioGroupItem, { value: "B2B" }), " Company (B2B)"] })] })] }), renderLeadContactPicker ? _jsx("div", { children: renderLeadContactPicker({ apply }) }) : null, _jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [_jsx(Field, { id: "bj-billing-firstName", label: "First name", value: billing.contact.firstName, onChange: (v) => setDraft(patchBilling(draft, { contact: { ...billing.contact, firstName: v } })) }), _jsx(Field, { id: "bj-billing-lastName", label: "Last name", value: billing.contact.lastName, onChange: (v) => setDraft(patchBilling(draft, { contact: { ...billing.contact, lastName: v } })) }), _jsx(Field, { id: "bj-billing-email", label: "Email", type: "email", value: billing.contact.email, onChange: (v) => setDraft(patchBilling(draft, { contact: { ...billing.contact, email: v } })) }), _jsx(PhoneField, { id: "bj-billing-phone", label: "Phone", value: billing.contact.phone ?? "", onChange: (v) => setDraft(patchBilling(draft, { contact: { ...billing.contact, phone: v } })) })] }), _jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [_jsx(Field, { id: "bj-billing-line1", label: "Address line 1", value: billing.address.line1 ?? "", onChange: (v) => setDraft(patchBilling(draft, { address: { ...billing.address, line1: v } })) }), _jsx(Field, { id: "bj-billing-line2", label: "Address line 2 (optional)", value: billing.address.line2 ?? "", onChange: (v) => setDraft(patchBilling(draft, { address: { ...billing.address, line2: v } })) }), _jsx(Field, { id: "bj-billing-city", label: "City", value: billing.address.city ?? "", onChange: (v) => setDraft(patchBilling(draft, { address: { ...billing.address, city: v } })) }), _jsx(Field, { id: "bj-billing-postal", label: "Postal code", value: billing.address.postal ?? "", onChange: (v) => setDraft(patchBilling(draft, { address: { ...billing.address, postal: v } })) }), _jsxs("div", { className: "space-y-1 sm:col-span-2", children: [_jsx(Label, { htmlFor: "bj-billing-country", children: "Country" }), _jsx(CountryCombobox, { value: billing.address.country ?? null, onChange: (code) => setDraft(patchBilling(draft, {
+                                            address: { ...billing.address, country: code ?? "" },
+                                        })) })] })] }), billing.buyerType === "B2B" ? (_jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [_jsx(Field, { id: "bj-billing-companyName", label: "Company name", value: billing.company?.name ?? "", onChange: (v) => setDraft(patchBilling(draft, {
+                                    company: { ...(billing.company ?? { name: "" }), name: v },
+                                })) }), _jsx(Field, { id: "bj-billing-vatId", label: "VAT id", value: billing.company?.vatId ?? "", onChange: (v) => setDraft(patchBilling(draft, {
+                                    company: { ...(billing.company ?? { name: "" }), vatId: v },
+                                })) })] })) : null, renderExtras ? _jsx("div", { children: renderExtras() }) : null] })] }));
+}
+// ─────────────────────────────────────────────────────────────────
+// Travelers
+// ─────────────────────────────────────────────────────────────────
+export function TravelersStep({ draft, setDraft, shape, renderTravelerContactPicker, }) {
+    const total = totalPax(draft);
+    // Auto-resize the travelers list to match pax counts. Newly-added
+    // rows pick a band based on the lowest-count band that's not yet
+    // saturated — naive but predictable.
+    const ensured = ensureTravelerRows(draft, total, shape);
+    if (ensured !== draft.travelers) {
+        setDraft(setTravelers(draft, ensured));
+    }
+    // Bands are bookkeeping for the pricing engine — the user only
+    // sees a flat list of travelers. Adding a traveler bumps the
+    // adult-band counter by default; the row's band is reassigned
+    // automatically once a DOB is entered (see TravelerCard's onDob).
+    const defaultAddBand = shape.paxBands.find((b) => b.code === "adult") ?? shape.paxBands[0];
+    const totalCap = shape.paxBandsAllowedTotal.max;
+    const canAddMore = ensured.length < totalCap && Boolean(defaultAddBand);
+    const removeTraveler = (rowIdx) => {
+        const band = ensured[rowIdx]?.band;
+        if (!band)
+            return;
+        const current = draft.configure.pax?.[band] ?? 0;
+        const spec = shape.paxBands.find((b) => b.code === band);
+        if (spec && current <= spec.minCount)
+            return;
+        setDraft(patchPaxCount(draft, band, current - 1));
+    };
+    const addTraveler = () => {
+        if (!defaultAddBand)
+            return;
+        const current = draft.configure.pax?.[defaultAddBand.code] ?? 0;
+        if (current >= defaultAddBand.maxCount)
+            return;
+        setDraft(patchPaxCount(draft, defaultAddBand.code, current + 1));
+    };
+    return (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Travelers" }) }), _jsxs(CardContent, { className: "space-y-4", children: [ensured.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-sm", children: "Pick traveler counts in the Configure step to start adding details." })) : null, ensured.map((traveler, idx) => {
+                        const apply = (contact) => {
+                            const next = [...ensured];
+                            next[idx] = {
+                                ...next[idx],
+                                firstName: contact.firstName,
+                                lastName: contact.lastName,
+                                email: contact.email,
+                                phone: contact.phone,
+                            };
+                            setDraft(setTravelers(draft, next));
+                        };
+                        const bandSpec = shape.paxBands.find((b) => b.code === traveler.band);
+                        const currentBandCount = draft.configure.pax?.[traveler.band] ?? 0;
+                        const canRemove = !bandSpec || currentBandCount > bandSpec.minCount;
+                        return (_jsx(TravelerCard, { idx: idx, traveler: traveler, shape: shape, draft: draft, setDraft: setDraft, renderTravelerContactPicker: renderTravelerContactPicker, apply: apply, onRemove: canRemove ? () => removeTraveler(idx) : undefined }, traveler.rowId ?? idx));
+                    }), canAddMore ? (_jsx("div", { className: "border-t pt-3", children: _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: addTraveler, children: "+ Add traveler" }) })) : null] })] }));
+}
+/**
+ * One traveler block — name, optional contact, age, and any
+ * descriptor-driven document fields. Honors `appliesToBands` so DOB
+ * is required for child / infant bands and adult-only fields like
+ * passport drop off the form for non-adult travelers.
+ *
+ * The first three canonical keys (firstName/lastName/email) are
+ * rendered inline as fixed widgets; the rest comes off
+ * `shape.travelerFields` so verticals can extend the set without
+ * touching the wizard.
+ */
+function TravelerCard({ idx, traveler, shape, draft, setDraft, renderTravelerContactPicker, apply, onRemove, }) {
+    // The band is bookkeeping — only show fields that apply to this
+    // band per the descriptor, but never expose the band tag in the UI.
+    // The user just sees a flat traveler list.
+    const applicableFields = shape.travelerFields.filter((f) => {
+        if (!f.appliesToBands || f.appliesToBands.length === 0)
+            return true;
+        return f.appliesToBands.includes(traveler.band);
+    });
+    const dobField = applicableFields.find((f) => f.key === "dateOfBirth");
+    const phoneField = applicableFields.find((f) => f.key === "phone");
+    const dynamicFields = applicableFields.filter((f) => !["firstName", "lastName", "email", "phone", "dateOfBirth"].includes(f.key));
+    // Live age from DOB — surfaces in the header so the user gets
+    // feedback as they pick a date.
+    const computedAge = traveler.dateOfBirth ? computeAge(traveler.dateOfBirth) : null;
+    // The DOB drives band assignment. When the user picks a date that
+    // would land in a different band, we silently reband the row and
+    // shift the pax counters so the engine quotes the right price.
+    // No "Move to X" prompts — the system just does the right thing.
+    const onDobChange = (v) => {
+        const age = v ? computeAge(v) : null;
+        let next = updateTravelerImmutable(draft, idx, { dateOfBirth: v });
+        if (age != null) {
+            const targetBand = shape.paxBands.find((b) => {
+                if (b.minAge != null && age < b.minAge)
+                    return false;
+                if (b.maxAge != null && age > b.maxAge)
+                    return false;
+                return true;
+            });
+            if (targetBand && targetBand.code !== traveler.band) {
+                next = rebandTraveler(next, idx, traveler.band, targetBand.code);
+            }
+        }
+        setDraft(next);
+    };
+    // Out-of-range warning — only fires when the entered DOB doesn't
+    // fit ANY of the descriptor's bands (e.g. older than the supplier
+    // accepts). We can't auto-fix that one — the booking would be
+    // rejected and the user needs to know.
+    const ageOutOfBounds = computedAge != null &&
+        !shape.paxBands.some((b) => {
+            if (b.minAge != null && computedAge < b.minAge)
+                return false;
+            if (b.maxAge != null && computedAge > b.maxAge)
+                return false;
+            return true;
+        });
+    // Quick-fill from billing — useful when the lead booker is also a
+    // traveler (the common B2C case). Doesn't touch travel-document
+    // fields since those are personal to each traveler.
+    const billingContact = draft.billing.contact;
+    const canCopyFromBilling = Boolean(billingContact.firstName || billingContact.email);
+    const copyFromBilling = () => {
+        updateTraveler(draft, setDraft, idx, {
+            firstName: billingContact.firstName,
+            lastName: billingContact.lastName,
+            email: billingContact.email || undefined,
+            phone: billingContact.phone || undefined,
+        });
+    };
+    return (_jsxs("div", { className: "rounded border p-4 space-y-3", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [_jsx("div", { className: "space-y-0.5", children: _jsxs("div", { className: "font-medium", children: ["Traveler ", idx + 1, computedAge != null ? (_jsxs("span", { className: "text-muted-foreground font-normal", children: [" \u00B7 age ", computedAge] })) : null] }) }), _jsxs("div", { className: "flex items-center gap-2", children: [canCopyFromBilling ? (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: copyFromBilling, children: "Copy from billing" })) : null, renderTravelerContactPicker
+                                ? renderTravelerContactPicker({ rowIndex: idx, apply })
+                                : null, onRemove ? (_jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "text-destructive hover:text-destructive", onClick: onRemove, children: "Remove" })) : null] })] }), _jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [_jsx(Field, { id: `bj-trav-${idx}-first`, label: "First name", value: traveler.firstName, onChange: (v) => updateTraveler(draft, setDraft, idx, { firstName: v }) }), _jsx(Field, { id: `bj-trav-${idx}-last`, label: "Last name", value: traveler.lastName, onChange: (v) => updateTraveler(draft, setDraft, idx, { lastName: v }) }), applicableFields.some((f) => f.key === "email") ? (_jsx(Field, { id: `bj-trav-${idx}-email`, label: "Email", type: "email", value: traveler.email ?? "", onChange: (v) => updateTraveler(draft, setDraft, idx, { email: v }) })) : null, phoneField ? (_jsx(PhoneField, { id: `bj-trav-${idx}-phone`, label: phoneField.label + (phoneField.required ? " *" : ""), value: traveler.phone ?? "", onChange: (v) => updateTraveler(draft, setDraft, idx, { phone: v }) })) : null, dobField ? (_jsxs("div", { className: "space-y-1", children: [_jsx(DateField, { id: `bj-trav-${idx}-dob`, label: dobField.label + (dobField.required ? " *" : ""), value: traveler.dateOfBirth ?? "", onChange: onDobChange, range: "past" }), ageOutOfBounds ? (_jsxs("p", { className: "text-amber-600 text-xs dark:text-amber-400", children: ["\u26A0 Age ", computedAge, " is outside the accepted range for this product."] })) : null] })) : null, dynamicFields.map((field) => {
+                        const value = traveler.documents?.[field.key] ?? "";
+                        const onFieldChange = (v) => updateTraveler(draft, setDraft, idx, {
+                            documents: { ...traveler.documents, [field.key]: v },
+                        });
+                        const labelText = field.label + (field.required ? " *" : "");
+                        if (field.type === "select" && field.options) {
+                            return (_jsx(SelectField, { id: `bj-trav-${idx}-${field.key}`, label: labelText, value: value, options: field.options, onChange: onFieldChange }, field.key));
+                        }
+                        if (field.type === "date") {
+                            return (_jsx(DateField, { id: `bj-trav-${idx}-${field.key}`, label: labelText, value: value, onChange: onFieldChange, range: field.key === "documentExpiry" ? "document" : "future" }, field.key));
+                        }
+                        return (_jsx(Field, { id: `bj-trav-${idx}-${field.key}`, label: labelText, type: "text", value: value, onChange: onFieldChange }, field.key));
+                    })] })] }));
+}
+function ensureTravelerRows(draft, total, shape) {
+    // Return the same reference when no resize is needed — the caller
+    // uses identity equality to decide whether to call setDraft, and a
+    // fresh array on every render would loop infinitely (set during
+    // render → re-render → set again).
+    if (draft.travelers.length === total)
+        return draft.travelers;
+    const list = [...draft.travelers];
+    while (list.length > total)
+        list.pop();
+    while (list.length < total) {
+        const idx = list.length;
+        const band = pickBandForIndex(draft, idx, shape);
+        list.push({
+            rowId: cryptoRowId(),
+            firstName: "",
+            lastName: "",
+            band,
+        });
+    }
+    return list;
+}
+function pickBandForIndex(draft, idx, shape) {
+    // Pick by remaining quota: distribute travelers in band order based
+    // on counts in `configure.pax`.
+    let cursor = 0;
+    for (const band of shape.paxBands) {
+        const count = draft.configure.pax?.[band.code] ?? 0;
+        if (idx < cursor + count) {
+            return band.code ?? "adult";
+        }
+        cursor += count;
+    }
+    return "adult";
+}
+function updateTraveler(draft, setDraft, idx, patch) {
+    setDraft(updateTravelerImmutable(draft, idx, patch));
+}
+/**
+ * Patch one traveler row and return a new draft. Useful when the
+ * caller wants to chain multiple draft updates (e.g. setting DOB +
+ * rebanding) into a single setDraft call.
+ */
+function updateTravelerImmutable(draft, idx, patch) {
+    const next = [...draft.travelers];
+    if (!next[idx])
+        return draft;
+    next[idx] = { ...next[idx], ...patch };
+    return setTravelers(draft, next);
+}
+/**
+ * Move one traveler row from one band to another, keeping the pax
+ * counters consistent. Used by the auto-reband path on DOB change.
+ */
+function rebandTraveler(draft, idx, fromBand, toBand) {
+    const fromCount = draft.configure.pax?.[fromBand] ?? 0;
+    const toCount = draft.configure.pax?.[toBand] ?? 0;
+    let next = updateTravelerImmutable(draft, idx, { band: toBand });
+    next = patchPaxCount(next, fromBand, Math.max(0, fromCount - 1));
+    next = patchPaxCount(next, toBand, toCount + 1);
+    return next;
+}
+// ─────────────────────────────────────────────────────────────────
+// Accommodation
+// ─────────────────────────────────────────────────────────────────
+export function AccommodationStep({ draft, setDraft, shape }) {
+    const subSteps = shape.accommodation?.subSteps ?? [];
+    const rooms = shape.accommodation?.roomOptions ?? [];
+    const accommodation = draft.accommodation ?? { rooms: [], travelerAssignments: {} };
+    return (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Accommodation" }) }), _jsx(CardContent, { className: "space-y-4", children: rooms.length === 0 && subSteps.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-sm", children: "No accommodation options for this product." })) : (_jsxs("div", { className: "space-y-3", children: [rooms.map((room) => {
+                            const current = accommodation.rooms.find((r) => r.optionUnitId === room.id);
+                            const ratePlans = room.ratePlans ?? [];
+                            return (_jsxs("div", { className: "space-y-3 rounded border p-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("div", { className: "font-medium", children: room.name }), room.description ? (_jsx("div", { className: "text-muted-foreground text-xs", children: room.description })) : null] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", type: "button", onClick: () => {
+                                                            const list = accommodation.rooms.filter((r) => r.optionUnitId !== room.id);
+                                                            const qty = (current?.quantity ?? 0) - 1;
+                                                            if (qty > 0) {
+                                                                list.push({
+                                                                    optionUnitId: room.id,
+                                                                    quantity: qty,
+                                                                    ratePlanId: current?.ratePlanId,
+                                                                });
+                                                            }
+                                                            setDraft(setAccommodation(draft, { ...accommodation, rooms: list }));
+                                                        }, children: "\u2212" }), _jsx("span", { className: "min-w-6 text-center", children: current?.quantity ?? 0 }), _jsx(Button, { variant: "outline", size: "sm", type: "button", onClick: () => {
+                                                            const list = accommodation.rooms.filter((r) => r.optionUnitId !== room.id);
+                                                            const qty = (current?.quantity ?? 0) + 1;
+                                                            // Auto-select the only rate plan when there's
+                                                            // exactly one — saves a click on the common case.
+                                                            const ratePlanId = current?.ratePlanId ??
+                                                                (ratePlans.length === 1 ? ratePlans[0]?.id : undefined);
+                                                            list.push({ optionUnitId: room.id, quantity: qty, ratePlanId });
+                                                            setDraft(setAccommodation(draft, { ...accommodation, rooms: list }));
+                                                        }, children: "+" })] })] }), current && current.quantity > 0 && ratePlans.length > 0 ? (_jsx(RatePlanPicker, { roomId: room.id, ratePlans: ratePlans, selected: current.ratePlanId, onSelect: (planId) => {
+                                            const list = accommodation.rooms.map((r) => r.optionUnitId === room.id ? { ...r, ratePlanId: planId } : r);
+                                            setDraft(setAccommodation(draft, { ...accommodation, rooms: list }));
+                                        } })) : null] }, room.id));
+                        }), subSteps.map((sub) => sub.kind === "extensions" ? (_jsxs("div", { className: "rounded border p-3 text-muted-foreground text-sm", children: [sub.options.length, " extension option", sub.options.length === 1 ? "" : "s", " ", "available \u2014 UI lands in Phase F."] }, "extensions")) : null)] })) })] }));
+}
+function RatePlanPicker({ roomId, ratePlans, selected, onSelect, }) {
+    return (_jsxs("div", { className: "space-y-2 border-t pt-3", children: [_jsx(Label, { htmlFor: `bj-rate-plan-${roomId}`, children: "Rate plan" }), _jsx("div", { className: "space-y-2", children: ratePlans.map((plan) => {
+                    const isSelected = plan.id === selected;
+                    return (_jsxs("button", { type: "button", onClick: () => onSelect(plan.id), className: `w-full rounded border p-2 text-left text-sm ${isSelected ? "border-primary ring-2 ring-primary" : ""}`, children: [_jsx("div", { className: "font-medium", children: plan.name }), plan.description ? (_jsx("div", { className: "text-muted-foreground text-xs", children: plan.description })) : null, plan.cancellationPolicy ? (_jsxs("div", { className: "text-muted-foreground text-xs", children: ["Cancellation: ", plan.cancellationPolicy] })) : null, plan.inclusions && plan.inclusions.length > 0 ? (_jsxs("div", { className: "text-muted-foreground text-xs", children: ["Includes: ", plan.inclusions.join(", ")] })) : null] }, plan.id));
+                }) })] }));
+}
+// ─────────────────────────────────────────────────────────────────
+// Add-ons
+// ─────────────────────────────────────────────────────────────────
+export function AddonsStep({ draft, setDraft, shape }) {
+    const flat = shape.addons?.catalog ?? [];
+    const groups = shape.addons?.groups ?? [];
+    const all = [...flat, ...groups.flatMap((g) => g.items)];
+    return (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Add-ons" }) }), _jsxs(CardContent, { className: "space-y-4", children: [all.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-sm", children: "No add-ons available for this product." })) : null, groups.map((group) => {
+                        // Group by port/day when the descriptor asks — cruise
+                        // excursions arrive grouped by port name.
+                        const buckets = group.groupBy === "port" || group.groupBy === "day"
+                            ? bucketBy(group.items, (i) => i.groupKey ?? "Other")
+                            : new Map([["", group.items]]);
+                        return (_jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "font-medium text-sm", children: group.label }), [...buckets.entries()].map(([bucket, items]) => (_jsxs("div", { className: "space-y-2", children: [bucket ? (_jsx("div", { className: "text-muted-foreground text-xs uppercase", children: bucket })) : null, items.map((item) => (_jsx(AddonRow, { draft: draft, setDraft: setDraft, item: item }, item.id)))] }, bucket || "all")))] }, group.label));
+                    }), flat.length > 0 && groups.length === 0 ? (_jsx("div", { className: "space-y-2", children: flat.map((item) => (_jsx(AddonRow, { draft: draft, setDraft: setDraft, item: item }, item.id))) })) : null] })] }));
+}
+function AddonRow({ draft, setDraft, item, }) {
+    const current = draft.addons.find((a) => a.extraId === item.id);
+    return (_jsxs("div", { className: "flex items-center justify-between rounded border p-3", children: [_jsxs("div", { children: [_jsx("div", { className: "font-medium", children: item.name }), item.description ? (_jsx("div", { className: "text-muted-foreground text-xs", children: item.description })) : null] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", type: "button", onClick: () => {
+                            const list = draft.addons.filter((a) => a.extraId !== item.id);
+                            const qty = (current?.quantity ?? 0) - 1;
+                            if (qty > 0)
+                                list.push({ extraId: item.id, quantity: qty });
+                            setDraft(setAddons(draft, list));
+                        }, children: "\u2212" }), _jsx("span", { className: "min-w-6 text-center", children: current?.quantity ?? 0 }), _jsx(Button, { variant: "outline", size: "sm", type: "button", onClick: () => {
+                            const list = draft.addons.filter((a) => a.extraId !== item.id);
+                            const qty = (current?.quantity ?? 0) + 1;
+                            list.push({ extraId: item.id, quantity: qty });
+                            setDraft(setAddons(draft, list));
+                        }, children: "+" })] })] }));
+}
+// ─────────────────────────────────────────────────────────────────
+// Payment
+// ─────────────────────────────────────────────────────────────────
+export function PaymentStep({ draft, setDraft, shape, capabilities, renderProviderStep, }) {
+    // The descriptor lists what the *engine* supports; capabilities
+    // narrow further to what the *deployment* turned on. Both must
+    // accept an intent for the user to see it.
+    const allowed = shape.paymentIntents.filter((i) => isCapabilityEnabled(i, capabilities));
+    const intent = draft.payment.intent;
+    // Snap the draft's intent to the first allowed value when the
+    // current pick isn't on the list — covers descriptor changes
+    // mid-flow (e.g. owned→sourced switch narrows the list).
+    if (allowed.length > 0 && !allowed.includes(intent)) {
+        setDraft(setPayment(draft, { ...draft.payment, intent: allowed[0] }));
+    }
+    return (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Payment" }) }), _jsxs(CardContent, { className: "space-y-4", children: [allowed.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-sm", children: "No payment methods are available for this booking." })) : (_jsx(RadioGroup, { value: intent, onValueChange: (v) => setDraft(setPayment(draft, { ...draft.payment, intent: v })), className: "grid grid-cols-1 gap-2", children: allowed.map((i) => {
+                            const meta = intentMeta(i);
+                            const selected = i === intent;
+                            return (_jsxs("label", { className: "flex cursor-pointer items-start gap-3 rounded border p-3 text-sm transition-colors " +
+                                    (selected ? "border-primary bg-primary/5" : "border-input hover:bg-muted/50"), children: [_jsx(RadioGroupItem, { value: i, className: "mt-0.5" }), _jsxs("div", { className: "space-y-0.5", children: [_jsx("div", { className: "font-medium", children: meta.label }), _jsx("div", { className: "text-muted-foreground text-xs", children: meta.description })] })] }, i));
+                        }) })), intent === "card" ? (renderProviderStep ? (_jsx("div", { children: renderProviderStep({
+                            intent,
+                            schedule: draft.payment.schedule,
+                            capabilities,
+                        }) })) : (_jsx("p", { className: "text-muted-foreground text-sm", children: "You'll be redirected to our secure payment page after confirming the booking." }))) : null, intent === "bank_transfer" ? _jsx(BankTransferDetails, { capabilities: capabilities }) : null, intent === "inquiry" ? (_jsx("p", { className: "rounded border border-amber-300 bg-amber-50 p-3 text-amber-900 text-xs dark:border-amber-700 dark:bg-amber-950 dark:text-amber-100", children: "We'll send your details to the operator without locking inventory or taking payment. They'll get back to you with availability and a quote \u2014 typically within one business day." })) : null] })] }));
+}
+function BankTransferDetails({ capabilities, }) {
+    const note = capabilities.config?.bankTransferNote;
+    return (_jsxs("div", { className: "rounded border bg-muted/30 p-3 text-sm", children: [_jsx("p", { className: "font-medium", children: "Bank transfer instructions" }), _jsx("p", { className: "text-muted-foreground text-xs", children: typeof note === "string" && note.length > 0
+                    ? note
+                    : "After you submit, you'll receive an email with our bank details and a payment reference. Inventory is held pending payment." })] }));
+}
+function isCapabilityEnabled(intent, capabilities) {
+    switch (intent) {
+        case "card":
+            return capabilities.acceptsCard;
+        case "hold":
+            return capabilities.acceptsHold;
+        case "bank_transfer":
+            return capabilities.acceptsBankTransfer === true;
+        case "ticket_on_credit":
+            return capabilities.acceptsTicketOnCredit;
+        case "inquiry":
+            return capabilities.acceptsInquiry === true;
+    }
+}
+function intentMeta(intent) {
+    switch (intent) {
+        case "card":
+            return {
+                label: "Pay by card",
+                description: "Charged immediately. Inventory is reserved on confirmation.",
+            };
+        case "bank_transfer":
+            return {
+                label: "Bank transfer",
+                description: "We'll send you bank details and a reference. Inventory is held while we wait for the transfer.",
+            };
+        case "hold":
+            return {
+                label: "Hold for now",
+                description: "Reserve inventory without paying. The operator follows up to collect payment.",
+            };
+        case "ticket_on_credit":
+            return {
+                label: "Agency credit account",
+                description: "Charge against an agency's credit line. Operator surfaces only.",
+            };
+        case "inquiry":
+            return {
+                label: "Send as inquiry",
+                description: "No payment, no inventory hold. The operator gets back to you with availability and a quote.",
+            };
+    }
+}
+// ─────────────────────────────────────────────────────────────────
+// Review
+// ─────────────────────────────────────────────────────────────────
+export function ReviewStep({ draft, setDraft, isCommitting, onConfirm, renderExtras, surface, }) {
+    const isPublic = surface === "public";
+    return (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: "Review & confirm" }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("div", { className: "font-medium", children: "Lead contact" }), _jsxs("div", { className: "text-muted-foreground text-sm", children: [draft.billing.contact.firstName, " ", draft.billing.contact.lastName, " \u2014", " ", draft.billing.contact.email] })] }), _jsxs("div", { children: [_jsx("div", { className: "font-medium", children: "Travelers" }), _jsx("ul", { className: "text-muted-foreground text-sm", children: draft.travelers.map((t, i) => (_jsxs("li", { children: [t.firstName, " ", t.lastName, " (", t.band, ")"] }, t.rowId ?? i))) })] }), isPublic ? (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "bj-customer-notes", children: "Notes" }), _jsx(Textarea, { id: "bj-customer-notes", placeholder: "Anything we should know? (allergies, accessibility needs, special occasion\u2026)", value: draft.customerNotes ?? "", onChange: (e) => setDraft({ ...draft, customerNotes: e.target.value }) })] })) : (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "bj-internal-notes", children: "Internal notes (operator-only)" }), _jsx(Textarea, { id: "bj-internal-notes", value: draft.internalNotes ?? "", onChange: (e) => setDraft({ ...draft, internalNotes: e.target.value }) })] })), renderExtras ? _jsx("div", { children: renderExtras() }) : null, _jsx(Button, { onClick: onConfirm, disabled: isCommitting, children: isCommitting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Confirming\u2026"] })) : ("Confirm booking") })] })] }));
+}
+// ─────────────────────────────────────────────────────────────────
+// Helpers
+// ─────────────────────────────────────────────────────────────────
+function Field({ id, label, value, onChange, type, placeholder, }) {
+    return (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: id, children: label }), _jsx(Input, { id: id, type: type ?? "text", value: value, placeholder: placeholder, onChange: (e) => onChange(e.target.value) })] }));
+}
+function PhoneField({ id, label, value, onChange, }) {
+    return (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: id, children: label }), _jsx(PhoneInput, { id: id, defaultCountry: "GB", international: true, value: value || undefined, onChange: (v) => onChange(v ? String(v) : "") })] }));
+}
+/**
+ * Date field that uses the shared `<DatePicker />` from
+ * `@voyantjs/ui` with a month + year dropdown caption so users can
+ * jump across decades without arrow-clicking. The `range` hint picks
+ * a reasonable startMonth/endMonth window per use case:
+ *
+ *   - `"past"`     — DOB-style picks (today back ~120 years)
+ *   - `"future"`   — departure / check-in / check-out (today forward ~5 years)
+ *   - `"document"` — passport / ID expiry (today forward ~20 years)
+ */
+function DateField({ id, label, value, onChange, range = "future", }) {
+    const today = new Date();
+    const todayMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+    const startMonth = range === "past"
+        ? new Date(today.getFullYear() - 120, 0, 1)
+        : range === "document"
+            ? todayMonth
+            : todayMonth;
+    const endMonth = range === "past"
+        ? new Date(today.getFullYear() + 1, 11, 1)
+        : range === "document"
+            ? new Date(today.getFullYear() + 20, 11, 1)
+            : new Date(today.getFullYear() + 5, 11, 1);
+    const defaultMonth = range === "past" && !value ? new Date(today.getFullYear() - 30, 0, 1) : undefined;
+    return (_jsxs("div", { className: "space-y-1", id: id, children: [_jsx(Label, { children: label }), _jsx(DatePicker, { value: value || null, onChange: (v) => onChange(v ?? ""), captionLayout: "dropdown", startMonth: startMonth, endMonth: endMonth, defaultMonth: defaultMonth, displayFormat: "PPP" })] }));
+}
+function SelectField({ id, label, value, options, onChange, }) {
+    return (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: id, children: label }), _jsxs("select", { id: id, className: "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", value: value, onChange: (e) => onChange(e.target.value), children: [_jsx("option", { value: "", children: "Select\u2026" }), options.map((opt) => (_jsx("option", { value: opt.value, children: opt.label }, opt.value)))] })] }));
+}
+/**
+ * Years between an ISO date-of-birth and today. Returns `null` for
+ * unparseable input or future dates so the UI can hide the badge
+ * gracefully rather than rendering "age -3".
+ */
+function computeAge(dob) {
+    const d = new Date(dob);
+    if (Number.isNaN(d.getTime()))
+        return null;
+    const now = new Date();
+    let age = now.getFullYear() - d.getFullYear();
+    const m = now.getMonth() - d.getMonth();
+    if (m < 0 || (m === 0 && now.getDate() < d.getDate()))
+        age -= 1;
+    return age >= 0 ? age : null;
+}
+function ageHint(min, max) {
+    if (min != null && max != null)
+        return `${min}–${max}y`;
+    if (min != null)
+        return `${min}y+`;
+    if (max != null)
+        return `up to ${max}y`;
+    return "";
+}
+function bucketBy(items, keyFn) {
+    const map = new Map();
+    for (const item of items) {
+        const key = keyFn(item);
+        let bucket = map.get(key);
+        if (!bucket) {
+            bucket = [];
+            map.set(key, bucket);
+        }
+        bucket.push(item);
+    }
+    return map;
+}
+function cryptoRowId() {
+    if (typeof globalThis.crypto !== "undefined" && globalThis.crypto.randomUUID) {
+        return globalThis.crypto.randomUUID();
+    }
+    return `r_${Math.random().toString(36).slice(2, 10)}`;
+}

package/dist/journey/components/side-panel.d.ts

@@ -0,0 +1,12 @@
+import type { SidePanelState } from "../types.js";
+/**
+ * Right-rail summary panel. Shows what's being booked, an
+ * accordion-per-step recap of the user's input, and the live
+ * pricing breakdown at the bottom. The current step's accordion is
+ * expanded by default; users can click any step to peek at what
+ * they've filled in elsewhere.
+ */
+export declare function PriceSidePanel({ pricing, isQuoting, invalidReason, entitySummary, currentStep, steps, draft, className, }: SidePanelState & {
+    className?: string;
+}): React.ReactElement;
+//# sourceMappingURL=side-panel.d.ts.map

package/dist/journey/components/side-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-panel.d.ts","sourceRoot":"","sources":["../../../src/journey/components/side-panel.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAqC,cAAc,EAAE,MAAM,aAAa,CAAA;AAEpF;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,SAAS,EACT,aAAa,EACb,aAAa,EACb,WAAW,EACX,KAAK,EACL,KAAK,EACL,SAAS,GACV,EAAE,cAAc,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,KAAK,CAAC,YAAY,CAsD9D"}