@voyant-travel/bookings-react 0.119.3

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

@@ -0,0 +1,201 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Separator } from "@voyant-travel/ui/components";
+import { Button } from "@voyant-travel/ui/components/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@voyant-travel/ui/components/card";
+import { Plus } from "lucide-react";
+import { useEffect, useRef } from "react";
+import { formatMessage, useBookingsUiMessagesOrDefault } from "../../../i18n/index.js";
+import { canCopyBillingContactToTraveler, patchConfigure, setTravelers, totalPax, } from "../../lib/draft-state.js";
+import { PaxDependencyWarnings, PaxValidation } from "./configure-steps.js";
+import { computeAge, cryptoRowId, DateField, Field, JourneyWarnings, PhoneField, SelectField, } from "./shared.js";
+/** Pax counts are DERIVED from the traveler rows — each row's band is the
+ *  source of truth, so the quote always matches who's actually in the list. */
+function paxFromTravelers(travelers, bands) {
+    const counts = {};
+    for (const band of bands)
+        counts[band.code] = 0;
+    for (const traveler of travelers) {
+        counts[traveler.band] = (counts[traveler.band] ?? 0) + 1;
+    }
+    return counts;
+}
+/** Commit a new traveler list AND re-derive the band counts in one update. */
+function applyTravelers(draft, next, bands) {
+    return patchConfigure(setTravelers(draft, next), { pax: paxFromTravelers(next, bands) });
+}
+export function TravelersStep({ draft, setDraft, shape, renderTravelerContactPicker, warnings, }) {
+    const messages = useBookingsUiMessagesOrDefault();
+    const travelers = draft.travelers;
+    const bands = shape.paxBands;
+    const hasBandChoice = bands.length > 1;
+    const { min, max } = shape.paxBandsAllowedTotal;
+    // Seed the initial rows ONCE: from any pre-set band counts (detail-page
+    // hand-off) or up to the minimum party size, then keep the derived pax in
+    // sync. After this, the rows are authoritative.
+    const seeded = useRef(false);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: one-shot seed guarded by the ref -- owner: bookings-react; existing suppression is intentional pending typed cleanup.
+    useEffect(() => {
+        if (seeded.current)
+            return;
+        seeded.current = true;
+        const target = Math.max(min, totalPax(draft), travelers.length);
+        if (travelers.length >= target) {
+            // Rows already exist — just make sure the counts reflect them.
+            if (travelers.length > 0)
+                setDraft(applyTravelers(draft, travelers, bands));
+            return;
+        }
+        const rows = [...travelers];
+        while (rows.length < target) {
+            rows.push({
+                rowId: cryptoRowId(),
+                firstName: "",
+                lastName: "",
+                band: bandForSeedIndex(draft, rows.length, shape),
+            });
+        }
+        setDraft(applyTravelers(draft, rows, bands));
+    }, []);
+    const addTraveler = () => {
+        const band = (bands[0]?.code ?? "adult");
+        const next = [...travelers, { rowId: cryptoRowId(), firstName: "", lastName: "", band }];
+        setDraft(applyTravelers(draft, next, bands));
+    };
+    const removeTraveler = (idx) => {
+        setDraft(applyTravelers(draft, travelers.filter((_, i) => i !== idx), bands));
+    };
+    const atMax = max != null && travelers.length >= max;
+    return (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: messages.bookingJourney.travelers.title }) }), _jsx(Separator, {}), _jsxs(CardContent, { className: "space-y-4", children: [travelers.map((traveler, idx) => {
+                        const apply = (contact) => {
+                            const next = [...travelers];
+                            next[idx] = {
+                                ...next[idx],
+                                firstName: contact.firstName,
+                                lastName: contact.lastName,
+                                email: contact.email,
+                                phone: contact.phone,
+                                personId: contact.personId,
+                            };
+                            setDraft(applyTravelers(draft, next, bands));
+                        };
+                        return (_jsx(TravelerCard, { idx: idx, traveler: traveler, shape: shape, draft: draft, setDraft: setDraft, renderTravelerContactPicker: renderTravelerContactPicker, apply: apply, showBandSelect: hasBandChoice, onRemove: travelers.length > 1 ? () => removeTraveler(idx) : undefined }, traveler.rowId ?? idx));
+                    }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addTraveler, disabled: atMax, className: "w-full", children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), messages.bookingJourney.travelers.addTraveler] }), _jsx(PaxValidation, { draft: draft, shape: shape }), _jsx(PaxDependencyWarnings, { draft: draft, shape: shape }), _jsx(JourneyWarnings, { warnings: warnings })] })] }));
+}
+/**
+ * One traveler block — type (band) selector, 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.
+ */
+function TravelerCard({ idx, traveler, shape, draft, setDraft, renderTravelerContactPicker, apply, showBandSelect, onRemove, }) {
+    const messages = useBookingsUiMessagesOrDefault();
+    const bands = shape.paxBands;
+    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));
+    // When a contact picker is wired (operator), identity comes from the picked
+    // CRM contact — the manual name/email/phone inputs are never shown (pick an
+    // existing contact or Create new). Only surfaces (e.g. storefront) WITHOUT a
+    // picker show the manual identity fields. Travel-specific fields (DOB,
+    // documents) always show.
+    const showIdentity = !renderTravelerContactPicker;
+    const gridHasContent = showIdentity || Boolean(dobField) || dynamicFields.length > 0;
+    // 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;
+    // All row mutations go through here so the derived band counts stay in sync.
+    const patchRow = (patch) => {
+        const next = [...draft.travelers];
+        if (!next[idx])
+            return;
+        next[idx] = { ...next[idx], ...patch };
+        setDraft(applyTravelers(draft, next, bands));
+    };
+    // Picking a DOB that lands in a different band snaps the type selector to
+    // match, so pricing stays correct.
+    const onDobChange = (v) => {
+        const age = v ? computeAge(v) : null;
+        let band = traveler.band;
+        if (age != null) {
+            const target = bands.find((b) => {
+                if (b.minAge != null && age < b.minAge)
+                    return false;
+                if (b.maxAge != null && age > b.maxAge)
+                    return false;
+                return true;
+            });
+            if (target)
+                band = target.code;
+        }
+        patchRow({ dateOfBirth: v, band });
+    };
+    // Out-of-range warning — only when the DOB fits NO band (e.g. older than the
+    // supplier accepts); we can't auto-fix that, the booking would be rejected.
+    const ageOutOfBounds = computedAge != null &&
+        !bands.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.
+    const billingContact = draft.billing.contact;
+    const canCopyFromBilling = canCopyBillingContactToTraveler(billingContact);
+    const copyFromBilling = () => {
+        patchRow({
+            firstName: billingContact.firstName,
+            lastName: billingContact.lastName,
+            email: billingContact.email || undefined,
+            phone: billingContact.phone || undefined,
+            personId: billingContact.personId || undefined,
+        });
+    };
+    const travelerName = [traveler.firstName, traveler.lastName].filter(Boolean).join(" ").trim();
+    return (_jsxs("div", { className: "space-y-4 rounded-md border p-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "text-sm font-medium", children: [formatMessage(messages.bookingJourney.travelers.travelerNumber, {
+                                number: idx + 1,
+                            }), travelerName ? (_jsx("span", { className: "text-muted-foreground font-normal", children: ` · ${travelerName}` })) : null, computedAge != null ? (_jsxs("span", { className: "text-muted-foreground font-normal", children: [" · ", formatMessage(messages.bookingJourney.travelers.ageLabel, {
+                                        age: computedAge,
+                                    })] })) : null] }), _jsxs("div", { className: "flex items-center gap-1", children: [canCopyFromBilling ? (_jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7 text-muted-foreground", onClick: copyFromBilling, children: messages.bookingJourney.travelers.copyFromBilling })) : null, onRemove ? (_jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7 text-destructive hover:text-destructive", onClick: onRemove, children: messages.bookingJourney.travelers.remove })) : null] })] }), showBandSelect ? (_jsx(SelectField, { id: `bj-trav-${idx}-band`, label: messages.bookingJourney.travelers.travelerType, value: traveler.band, options: bands.map((b) => ({ value: b.code, label: b.label })), onChange: (code) => patchRow({ band: code }) })) : null, renderTravelerContactPicker ? (_jsx("div", { children: renderTravelerContactPicker({
+                    rowIndex: idx,
+                    apply,
+                    selectedPersonId: traveler.personId,
+                }) })) : null, gridHasContent ? (_jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [showIdentity ? (_jsxs(_Fragment, { children: [_jsx(Field, { id: `bj-trav-${idx}-first`, label: messages.bookingJourney.billing.firstName, value: traveler.firstName, onChange: (v) => patchRow({ firstName: v }) }), _jsx(Field, { id: `bj-trav-${idx}-last`, label: messages.bookingJourney.billing.lastName, value: traveler.lastName, onChange: (v) => patchRow({ lastName: v }) }), applicableFields.some((f) => f.key === "email") ? (_jsx(Field, { id: `bj-trav-${idx}-email`, label: messages.bookingJourney.billing.email, type: "email", value: traveler.email ?? "", onChange: (v) => patchRow({ email: v }) })) : null, phoneField ? (_jsx(PhoneField, { id: `bj-trav-${idx}-phone`, 
+                                // i18n-literal-ok Required marker appended to a descriptor-supplied field label.
+                                label: phoneField.label + (phoneField.required ? " *" : ""), value: traveler.phone ?? "", onChange: (v) => patchRow({ phone: v }) })) : null] })) : null, dobField ? (_jsxs("div", { className: "space-y-1", children: [_jsx(DateField, { id: `bj-trav-${idx}-dob`, 
+                                // i18n-literal-ok Required marker appended to a descriptor-supplied field label.
+                                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", " ", formatMessage(messages.bookingJourney.validation.ageOutOfRange, {
+                                        age: computedAge,
+                                    })] })) : null] })) : null, dynamicFields.map((field) => {
+                        const value = traveler.documents?.[field.key] ?? "";
+                        const onFieldChange = (v) => patchRow({ documents: { ...traveler.documents, [field.key]: v } });
+                        // i18n-literal-ok Required marker appended to a descriptor-supplied field label.
+                        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));
+                    })] })) : null] }));
+}
+/** Band for a freshly-seeded row at `idx`, distributing across any pre-set
+ *  band counts in order (so a detail-page hand-off of 1 adult + 1 child seeds
+ *  the right two rows). Falls back to the first band. */
+function bandForSeedIndex(draft, idx, shape) {
+    let cursor = 0;
+    for (const band of shape.paxBands) {
+        const count = draft.configure.pax?.[band.code] ?? 0;
+        if (idx < cursor + count)
+            return band.code;
+        cursor += count;
+    }
+    return (shape.paxBands[0]?.code ?? "adult");
+}

package/dist/journey/components/journey-steps.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Step components rendered inside `<BookingJourney />`. Each takes a
+ * draft + setDraft pair plus the active descriptor; updates flow up
+ * via setDraft and the shell re-quotes on the next debounce tick.
+ *
+ * Per booking-journey-architecture §3.
+ *
+ * This module is a thin barrel — the implementations live in the
+ * `./journey-steps/` directory, split by step. Consumers import the
+ * same public symbols from here as before.
+ */
+export { AccommodationStep } from "./journey-steps/accommodation-step.js";
+export { AddonsStep } from "./journey-steps/addons-step.js";
+export { BillingStep } from "./journey-steps/billing-step.js";
+export { DepartureStep, OptionsStep } from "./journey-steps/configure-steps.js";
+export { DocumentsStep } from "./journey-steps/documents-step.js";
+export { FinalizeControls, PaymentStep } from "./journey-steps/payment-step.js";
+export { ReviewStep } from "./journey-steps/review-step.js";
+export { JourneyWarnings } from "./journey-steps/shared.js";
+export { TravelersStep } from "./journey-steps/travelers-step.js";
+//# sourceMappingURL=journey-steps.d.ts.map

package/dist/journey/components/journey-steps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"journey-steps.d.ts","sourceRoot":"","sources":["../../../src/journey/components/journey-steps.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAA;AACzE,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAA;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAA;AAC7D,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAA;AAC/E,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAA;AACjE,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAA;AAC/E,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAA;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAA"}

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

@@ -0,0 +1,20 @@
+/**
+ * Step components rendered inside `<BookingJourney />`. Each takes a
+ * draft + setDraft pair plus the active descriptor; updates flow up
+ * via setDraft and the shell re-quotes on the next debounce tick.
+ *
+ * Per booking-journey-architecture §3.
+ *
+ * This module is a thin barrel — the implementations live in the
+ * `./journey-steps/` directory, split by step. Consumers import the
+ * same public symbols from here as before.
+ */
+export { AccommodationStep } from "./journey-steps/accommodation-step.js";
+export { AddonsStep } from "./journey-steps/addons-step.js";
+export { BillingStep } from "./journey-steps/billing-step.js";
+export { DepartureStep, OptionsStep } from "./journey-steps/configure-steps.js";
+export { DocumentsStep } from "./journey-steps/documents-step.js";
+export { FinalizeControls, PaymentStep } from "./journey-steps/payment-step.js";
+export { ReviewStep } from "./journey-steps/review-step.js";
+export { JourneyWarnings } from "./journey-steps/shared.js";
+export { TravelersStep } from "./journey-steps/travelers-step.js";

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

@@ -0,0 +1,17 @@
+import { useBookingsUiMessagesOrDefault } from "../../i18n/index.js";
+import type { JourneyStep, 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, shape, draft, className, pricingExtras, }: SidePanelState & {
+    className?: string;
+    /** Operator-only price controls (override + voucher) rendered with the
+     *  pricing, where they're most in context. */
+    pricingExtras?: React.ReactNode;
+}): React.ReactElement;
+export declare function stepHeadline(step: JourneyStep, draft: NonNullable<SidePanelState["draft"]>, messages: ReturnType<typeof useBookingsUiMessagesOrDefault>): string;
+//# 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,EAAiB,8BAA8B,EAAE,MAAM,qBAAqB,CAAA;AACnF,OAAO,KAAK,EAAwB,WAAW,EAAE,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,KAAK,EACL,SAAS,EACT,aAAa,GACd,EAAE,cAAc,GAAG;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;kDAC8C;IAC9C,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAChC,GAAG,KAAK,CAAC,YAAY,CA2FrB;AAoFD,wBAAgB,YAAY,CAC1B,IAAI,EAAE,WAAW,EACjB,KAAK,EAAE,WAAW,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,EAC3C,QAAQ,EAAE,UAAU,CAAC,OAAO,8BAA8B,CAAC,GAC1D,MAAM,CAgER"}

package/dist/journey/components/side-panel.js

@@ -0,0 +1,245 @@
+// agent-quality: file-size exception -- owner: bookings-react; existing UI surface stays co-located until a dedicated split preserves behavior and tests.
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "@voyant-travel/ui/components/accordion";
+import { Card, CardContent } from "@voyant-travel/ui/components/card";
+import { Skeleton } from "@voyant-travel/ui/components/skeleton";
+import { formatMessage, useBookingsUiMessagesOrDefault } from "../../i18n/index.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 function PriceSidePanel({ pricing, isQuoting, invalidReason, entitySummary, currentStep, steps, shape, draft, className, pricingExtras, }) {
+    const messages = useBookingsUiMessagesOrDefault();
+    // Only surface pricing once the user has configured what actually drives
+    // the price — otherwise the quote's baseline shows a misleading total
+    // (e.g. a per-pax "from" price before any room is picked). Room products
+    // (an `option-units` sub-step) require a room selection; everything else
+    // requires at least one traveler.
+    const configuredPax = draft?.configure?.pax
+        ? Object.values(draft.configure.pax).reduce((sum, n) => sum + (n ?? 0), 0)
+        : 0;
+    const isRoomProduct = (shape?.configureSubSteps ?? []).some((s) => s.kind === "option-units");
+    const roomsPicked = (draft?.configure?.optionSelections?.length ?? 0) > 0;
+    const showPricing = isRoomProduct ? roomsPicked : configuredPax > 0;
+    const pricingHint = isRoomProduct
+        ? messages.bookingJourney.sidePanel.pricingHintRooms
+        : messages.bookingJourney.sidePanel.pricingHint;
+    // Departure shows directly under the product title — it's the most-glanced
+    // fact, so it doesn't belong buried in the recap accordion.
+    const departureText = draft ? stepHeadline("departure", draft, messages) : "";
+    return (_jsxs(Card, { className: className, children: [entitySummary?.heroImageUrl ? (_jsx("img", { src: entitySummary.heroImageUrl, alt: entitySummary.name, className: "aspect-video w-full object-cover" })) : null, entitySummary ? (_jsx(EntityHeader, { summary: entitySummary, departureText: departureText })) : null, _jsxs(CardContent, { className: "space-y-4", children: [steps && steps.length > 0 && currentStep && draft ? (_jsx(StepRecap, { steps: steps, currentStep: currentStep, draft: draft })) : null, invalidReason ? _jsx("p", { className: "text-destructive text-sm", children: invalidReason }) : null, !showPricing ? (_jsx("p", { className: "border-t pt-4 text-muted-foreground text-sm", children: pricingHint })) : isQuoting && !pricing ? (_jsxs("div", { className: "space-y-2 border-t pt-4", children: [_jsx(Skeleton, { className: "h-4 w-24" }), _jsx(Skeleton, { className: "h-4 w-32" }), _jsx(Skeleton, { className: "h-4 w-20" })] })) : null, showPricing && pricing ? (_jsxs("div", { className: "space-y-2 border-t pt-4", children: [_jsx("ul", { className: "space-y-1 text-sm", children: pricing.lines.map((line) => (_jsxs("li", { className: "flex justify-between", children: [_jsxs("span", { children: [line.label, line.quantity ? (_jsxs("span", { className: "text-muted-foreground", children: [" \u00D7 ", line.quantity] })) : null] }), _jsx("span", { children: formatMoney(line.totalAmount, pricing.currency) })] }, `${line.kind}-${line.label}-${line.totalAmount}`))) }), pricing.taxes.length > 0 ? (_jsx("ul", { className: "space-y-1 border-t pt-2 text-sm text-muted-foreground", children: pricing.taxes.map((tax) => (_jsxs("li", { className: "flex justify-between", children: [_jsxs("span", { children: [tax.label, tax.rate > 0 ? ` (${formatTaxRate(tax.rate)})` : ""] }), _jsx("span", { children: formatMoney(tax.amount, pricing.currency) })] }, tax.code))) })) : null, _jsxs("div", { className: "flex justify-between border-t pt-2 font-medium", children: [_jsx("span", { children: messages.bookingJourney.sidePanel.total }), _jsx("span", { children: formatMoney(pricing.total, pricing.currency) })] })] })) : null, pricingExtras ? _jsx("div", { className: "border-t pt-4", children: pricingExtras }) : null] })] }));
+}
+function EntityHeader({ summary, departureText, }) {
+    // Text block only — the hero image is rendered as a direct Card child above.
+    return (_jsxs("div", { className: "space-y-1 px-6 pt-4 pb-2", children: [_jsx("div", { className: "font-semibold leading-tight", children: summary.name }), departureText ? _jsx("div", { className: "text-muted-foreground text-sm", children: departureText }) : null, summary.subtitle ? (_jsx("div", { className: "text-muted-foreground text-sm", children: summary.subtitle })) : null, summary.whenLabel || summary.locationLabel ? (_jsx("div", { className: "text-muted-foreground text-xs", children: [summary.whenLabel, summary.locationLabel].filter(Boolean).join(" · ") })) : null] }));
+}
+function StepRecap({ steps, currentStep, draft, }) {
+    const messages = useBookingsUiMessagesOrDefault();
+    if (!draft)
+        return null;
+    // Departure shows in the header; payment + documents aren't worth a recap
+    // row — so the accordion covers the substantive in-between steps only.
+    const recapSteps = steps.filter((step) => step !== "departure" && step !== "payment" && step !== "documents");
+    if (recapSteps.length === 0)
+        return null;
+    // Default-open the current step. Uncontrolled — users can toggle
+    // freely. Re-mounts when currentStep changes (key) so the
+    // newly-active step opens automatically as the user advances.
+    return (_jsx(Accordion, { defaultValue: [currentStep], multiple: true, children: recapSteps.map((step) => (_jsxs(AccordionItem, { value: step, children: [_jsx(AccordionTrigger, { className: "py-3", children: _jsxs("div", { className: "flex flex-1 flex-col text-left", children: [_jsx("span", { className: step === currentStep ? "font-semibold" : "text-muted-foreground font-medium", children: stepLabel(step, messages) }), _jsx(StepSummaryLine, { step: step, draft: draft })] }) }), _jsx(AccordionContent, { children: _jsx(StepDetails, { step: step, draft: draft }) })] }, step))) }, currentStep));
+}
+function StepSummaryLine({ step, draft, }) {
+    const messages = useBookingsUiMessagesOrDefault();
+    const text = stepHeadline(step, draft, messages);
+    if (!text)
+        return null;
+    return _jsx("span", { className: "text-muted-foreground text-xs", children: text });
+}
+export function stepHeadline(step, draft, messages) {
+    switch (step) {
+        case "departure": {
+            const range = draft.configure?.dateRange;
+            if (range?.checkIn && range?.checkOut)
+                return `${range.checkIn} → ${range.checkOut}`;
+            // Never surface the raw slot id — show the departure date.
+            return draft.configure?.departureDate
+                ? formatConfigureDate(draft.configure.departureDate)
+                : "";
+        }
+        case "options": {
+            const rooms = (draft.configure?.optionSelections ?? []).reduce((sum, s) => sum + (s.quantity ?? 0), 0);
+            if (rooms <= 0)
+                return "";
+            return `${rooms} ${rooms === 1
+                ? messages.bookingJourney.sidePanel.roomSingular
+                : messages.bookingJourney.sidePanel.roomPlural}`;
+        }
+        case "billing": {
+            const c = draft.billing.contact;
+            const name = [c.firstName, c.lastName].filter(Boolean).join(" ").trim();
+            return name || c.email || messages.bookingJourney.values.notSet;
+        }
+        case "travelers": {
+            const filled = draft.travelers.filter((t) => t.firstName && t.lastName).length;
+            return formatMessage(messages.bookingJourney.sidePanel.filledOf, {
+                filled,
+                total: draft.travelers.length,
+            });
+        }
+        case "accommodation": {
+            const rooms = draft.accommodation?.rooms ?? [];
+            if (rooms.length === 0)
+                return "";
+            return `${rooms.length} ${rooms.length === 1
+                ? messages.bookingJourney.sidePanel.roomSingular
+                : messages.bookingJourney.sidePanel.roomPlural}`;
+        }
+        case "addons": {
+            const addons = draft.addons ?? [];
+            if (addons.length === 0)
+                return messages.bookingJourney.values.none;
+            return `${addons.length} ${addons.length === 1
+                ? messages.bookingJourney.sidePanel.addOnSingular
+                : messages.bookingJourney.sidePanel.addOnPlural}`;
+        }
+        case "payment": {
+            const intent = draft.payment.intent;
+            if (intent === "card")
+                return messages.bookingJourney.sidePanel.card;
+            if (intent === "hold")
+                return messages.bookingJourney.sidePanel.hold;
+            if (intent === "ticket_on_credit")
+                return messages.bookingJourney.sidePanel.onCredit;
+            return "";
+        }
+        case "review":
+            return messages.bookingJourney.sidePanel.confirmAndBook;
+        default:
+            return "";
+    }
+}
+function StepDetails({ step, draft, }) {
+    const messages = useBookingsUiMessagesOrDefault();
+    switch (step) {
+        case "departure":
+            return _jsx(DepartureDetails, { draft: draft });
+        case "options":
+            return _jsx(OptionsDetails, { draft: draft });
+        case "billing":
+            return _jsx(BillingDetails, { draft: draft });
+        case "travelers":
+            return _jsx(TravelersDetails, { draft: draft });
+        case "accommodation":
+            return _jsx(AccommodationDetails, { draft: draft });
+        case "addons":
+            return _jsx(AddonsDetails, { draft: draft });
+        case "payment":
+            return _jsx(PaymentDetails, { draft: draft });
+        case "review":
+            return (_jsx("p", { className: "text-muted-foreground text-xs", children: messages.bookingJourney.sidePanel.reviewDetails }));
+        default:
+            return null;
+    }
+}
+function DepartureDetails({ draft, }) {
+    const messages = useBookingsUiMessagesOrDefault();
+    const cfg = draft.configure ?? {};
+    const range = cfg.dateRange;
+    return (_jsxs("dl", { className: "space-y-1 text-xs", children: [cfg.departureDate ? (_jsx(Row, { label: messages.bookingJourney.sidePanel.departure, value: formatConfigureDate(cfg.departureDate) })) : null, range?.checkIn ? (_jsx(Row, { label: messages.bookingJourney.sidePanel.checkIn, value: range.checkIn })) : null, range?.checkOut ? (_jsx(Row, { label: messages.bookingJourney.sidePanel.checkOut, value: range.checkOut })) : null] }));
+}
+function OptionsDetails({ draft, }) {
+    const messages = useBookingsUiMessagesOrDefault();
+    const cfg = draft.configure ?? {};
+    const selections = (cfg.optionSelections ?? []).filter((s) => (s.quantity ?? 0) > 0);
+    return (_jsxs("dl", { className: "space-y-1 text-xs", children: [selections.map((selection) => (_jsx(Row, { label: selection.optionUnitName ?? selection.optionName ?? selection.optionId, value: `× ${selection.quantity}` }, selection.optionUnitId ?? selection.optionId))), cfg.cabinCategoryId ? (_jsx(Row, { label: messages.bookingJourney.sidePanel.cabin, value: cfg.cabinCategoryId })) : null] }));
+}
+function BillingDetails({ draft, }) {
+    const messages = useBookingsUiMessagesOrDefault();
+    const c = draft.billing.contact;
+    const a = draft.billing.address;
+    const addressLine = [a.line1, a.line2, a.city, a.postal, a.country].filter(Boolean).join(", ");
+    return (_jsxs("dl", { className: "space-y-1 text-xs", children: [_jsx(Row, { label: messages.bookingJourney.sidePanel.name, value: [c.firstName, c.lastName].filter(Boolean).join(" ") ||
+                    messages.bookingJourney.values.noValue }), _jsx(Row, { label: messages.bookingJourney.sidePanel.email, value: c.email || messages.bookingJourney.values.noValue }), c.phone ? _jsx(Row, { label: messages.bookingJourney.sidePanel.phone, value: c.phone }) : null, _jsx(Row, { label: messages.bookingJourney.sidePanel.buyer, value: draft.billing.buyerType === "B2B"
+                    ? messages.bookingJourney.sidePanel.company
+                    : messages.bookingJourney.sidePanel.individual }), draft.billing.company?.name ? (_jsx(Row, { label: messages.bookingJourney.sidePanel.company, value: draft.billing.company.name })) : null, draft.billing.company?.vatId ? (_jsx(Row, { label: messages.bookingJourney.sidePanel.vat, value: draft.billing.company.vatId })) : null, addressLine ? (_jsx(Row, { label: messages.bookingJourney.sidePanel.address, value: addressLine })) : null] }));
+}
+function TravelersDetails({ draft, }) {
+    const messages = useBookingsUiMessagesOrDefault();
+    if (draft.travelers.length === 0) {
+        return (_jsx("p", { className: "text-muted-foreground text-xs", children: messages.bookingJourney.sidePanel.noTravelersYet }));
+    }
+    return (_jsx("ul", { className: "space-y-3 text-xs", children: draft.travelers.map((t, i) => {
+            const key = t.rowId ?? `t-${i}`;
+            const name = [t.firstName, t.lastName].filter(Boolean).join(" ").trim();
+            const docType = t.documents?.documentType;
+            const docNum = t.documents?.documentNumber;
+            const docExpiry = t.documents?.documentExpiry;
+            const docLine = [docType, docNum, docExpiry ? `exp ${docExpiry}` : null]
+                .filter(Boolean)
+                .join(" · ");
+            return (_jsxs("li", { className: "space-y-0.5", children: [_jsxs("div", { className: "flex justify-between gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: formatMessage(messages.bookingJourney.sidePanel.travelerNumber, {
+                                    number: i + 1,
+                                }) }), _jsx("span", { className: "truncate font-medium", children: name || messages.bookingJourney.values.noValue })] }), t.email ? _jsx("div", { className: "text-muted-foreground truncate", children: t.email }) : null, t.phone ? _jsx("div", { className: "text-muted-foreground", children: t.phone }) : null, t.dateOfBirth ? (_jsxs("div", { className: "text-muted-foreground", children: [messages.bookingJourney.sidePanel.dob, " ", t.dateOfBirth] })) : null, docLine ? _jsx("div", { className: "text-muted-foreground", children: docLine }) : null] }, key));
+        }) }));
+}
+function AccommodationDetails({ draft, }) {
+    const messages = useBookingsUiMessagesOrDefault();
+    const rooms = draft.accommodation?.rooms ?? [];
+    if (rooms.length === 0) {
+        return (_jsx("p", { className: "text-muted-foreground text-xs", children: messages.bookingJourney.sidePanel.notSelected }));
+    }
+    return (_jsx("ul", { className: "space-y-1 text-xs", children: rooms.map((r) => (_jsxs("li", { className: "flex justify-between gap-2", children: [_jsx("span", { className: "truncate", children: r.optionUnitId }), _jsxs("span", { className: "text-muted-foreground", children: ["\u00D7 ", r.quantity, r.ratePlanId ? ` · ${r.ratePlanId}` : ""] })] }, `${r.optionUnitId}-${r.ratePlanId ?? ""}-${r.quantity}`))) }));
+}
+function AddonsDetails({ draft, }) {
+    const messages = useBookingsUiMessagesOrDefault();
+    const addons = draft.addons ?? [];
+    if (addons.length === 0) {
+        return (_jsx("p", { className: "text-muted-foreground text-xs", children: messages.bookingJourney.sidePanel.noAddonsSelected }));
+    }
+    return (_jsx("ul", { className: "space-y-1 text-xs", children: addons.map((a) => (_jsxs("li", { className: "flex justify-between gap-2", children: [_jsx("span", { className: "truncate", children: a.extraId }), _jsxs("span", { className: "text-muted-foreground", children: ["\u00D7 ", a.quantity] })] }, `${a.extraId}-${a.quantity}`))) }));
+}
+function PaymentDetails({ draft, }) {
+    const messages = useBookingsUiMessagesOrDefault();
+    const intent = draft.payment.intent;
+    const label = intent === "card"
+        ? messages.bookingJourney.sidePanel.payByCard
+        : intent === "ticket_on_credit"
+            ? messages.bookingJourney.sidePanel.ticketOnCredit
+            : messages.bookingJourney.sidePanel.holdNoChargeYet;
+    return (_jsxs("dl", { className: "space-y-1 text-xs", children: [_jsx(Row, { label: messages.bookingJourney.sidePanel.method, value: label }), draft.payment.schedule ? (_jsx(Row, { label: messages.bookingJourney.sidePanel.schedule, value: String(draft.payment.schedule) })) : null] }));
+}
+function Row({ label, value }) {
+    return (_jsxs("div", { className: "flex justify-between gap-2", children: [_jsx("dt", { className: "text-muted-foreground", children: label }), _jsx("dd", { className: "truncate text-right", children: value })] }));
+}
+function stepLabel(step, messages) {
+    if (step === "billing")
+        return messages.bookingJourney.steps.billingAndContact;
+    return messages.bookingJourney.steps[step];
+}
+function formatMoney(cents, currency) {
+    try {
+        return new Intl.NumberFormat(undefined, { style: "currency", currency }).format(cents / 100);
+    }
+    catch {
+        return `${(cents / 100).toFixed(2)} ${currency}`;
+    }
+}
+/** Tax rate is stored as a fraction (0.19 → "19%"). Trim trailing zeros. */
+function formatTaxRate(rate) {
+    return `${Number((rate * 100).toFixed(2))}%`;
+}
+/** Format an ISO date (YYYY-MM-DD or full ISO) for the recap, falling back
+ *  to the raw value when unparseable. Never surfaces a raw slot id. */
+function formatConfigureDate(iso) {
+    const date = new Date(iso);
+    if (Number.isNaN(date.getTime()))
+        return iso;
+    return new Intl.DateTimeFormat(undefined, {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+    }).format(date);
+}

package/dist/journey/components/stacked-journey.d.ts

@@ -0,0 +1,30 @@
+import type * as React from "react";
+import type { JourneyStep } from "../types.js";
+/**
+ * The admin's guided single-page layout — every section is a block on one
+ * page, but content stays collapsed until the previous section is complete,
+ * so the operator fills them in sequence and focuses on one at a time.
+ *
+ *  - LOCKED (a prior section isn't done): a muted, disabled summary row.
+ *  - ACTIVE (the first not-yet-done section): expanded with its full
+ *    content + a "Continue" button (enabled once the section is valid).
+ *  - DONE (passed via Continue): collapses to a one-line summary row with a
+ *    check — click to re-open and edit, so nothing entered is ever lost.
+ *
+ * Completeness derives from the same per-step gate the wizard uses; the
+ * final Review section's Confirm is gated on the whole booking.
+ */
+export declare function StackedJourney({ className, steps, renderStep, isStepComplete, commitError, onCancel, onConfirm, isCommitting, canConfirm, sidePanel, contractDialog, }: {
+    className?: string;
+    steps: ReadonlyArray<JourneyStep>;
+    renderStep: (step: JourneyStep) => React.ReactNode;
+    isStepComplete: (step: JourneyStep) => boolean;
+    commitError: unknown;
+    onCancel?: () => void;
+    onConfirm?: () => void;
+    isCommitting?: boolean;
+    canConfirm?: boolean;
+    sidePanel: React.ReactNode;
+    contractDialog: React.ReactNode;
+}): React.ReactElement;
+//# sourceMappingURL=stacked-journey.d.ts.map

package/dist/journey/components/stacked-journey.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stacked-journey.d.ts","sourceRoot":"","sources":["../../../src/journey/components/stacked-journey.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAEnC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAW9C;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,KAAK,EACL,UAAU,EACV,cAAc,EACd,WAAW,EACX,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,UAAU,EACV,SAAS,EACT,cAAc,GACf,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,aAAa,CAAC,WAAW,CAAC,CAAA;IACjC,UAAU,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,KAAK,CAAC,SAAS,CAAA;IAClD,cAAc,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,OAAO,CAAA;IAC9C,WAAW,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,cAAc,EAAE,KAAK,CAAC,SAAS,CAAA;CAChC,GAAG,KAAK,CAAC,YAAY,CAiGrB"}

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

@@ -0,0 +1,50 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from "@voyant-travel/ui/components/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@voyant-travel/ui/components/tooltip";
+import { Loader2, Lock } from "lucide-react";
+import { useBookingsUiMessagesOrDefault } from "../../i18n/index.js";
+const sectionId = (step) => `bj-section-${step}`;
+/**
+ * The sequential gates in the stacked layout: each must be filled before the
+ * next sections unlock. Once all three are done, the remaining sections
+ * (options, extras, payment) all open together.
+ */
+const GATE_STEPS = new Set(["departure", "billing", "travelers"]);
+/**
+ * The admin's guided single-page layout — every section is a block on one
+ * page, but content stays collapsed until the previous section is complete,
+ * so the operator fills them in sequence and focuses on one at a time.
+ *
+ *  - LOCKED (a prior section isn't done): a muted, disabled summary row.
+ *  - ACTIVE (the first not-yet-done section): expanded with its full
+ *    content + a "Continue" button (enabled once the section is valid).
+ *  - DONE (passed via Continue): collapses to a one-line summary row with a
+ *    check — click to re-open and edit, so nothing entered is ever lost.
+ *
+ * Completeness derives from the same per-step gate the wizard uses; the
+ * final Review section's Confirm is gated on the whole booking.
+ */
+export function StackedJourney({ className, steps, renderStep, isStepComplete, commitError, onCancel, onConfirm, isCommitting, canConfirm, sidePanel, contractDialog, }) {
+    const messages = useBookingsUiMessagesOrDefault();
+    const nav = messages.bookingJourney.navigation;
+    // Progressive unlock gated only on the SEQUENTIAL gates (departure →
+    // billing → travelers). Once those are filled, the remaining sections
+    // (options, extras, payment) all unlock together — they're independent
+    // refinements, not a strict sequence. Unlocked sections stay open so the
+    // operator keeps full context of everything they've filled.
+    const firstIncompleteGate = steps.find((s) => GATE_STEPS.has(s) && !isStepComplete(s));
+    const unlockThroughIndex = firstIncompleteGate
+        ? steps.indexOf(firstIncompleteGate)
+        : steps.length - 1;
+    return (_jsxs("div", { className: className, children: [_jsxs("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-8 md:items-start", children: [_jsxs("div", { className: "space-y-3 md:col-span-5", children: [steps.map((step, i) => {
+                                // Locked: a section beyond the active gate — a muted, disabled row
+                                // until the operator clears the gates above it.
+                                if (i > unlockThroughIndex) {
+                                    return (_jsxs("div", { id: sectionId(step), className: "flex w-full scroll-mt-4 items-center gap-3 rounded-md border p-4 opacity-60", children: [_jsx("span", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground text-xs", children: i + 1 }), _jsx("div", { className: "min-w-0 flex-1 font-medium text-sm", children: messages.bookingJourney.steps[step] }), _jsx(Lock, { className: "h-4 w-4 text-muted-foreground" })] }, step));
+                                }
+                                // Unlocked: full section content, stays open once reached. Its
+                                // warnings render inside the step's own card (scoped to the block).
+                                return (_jsx("section", { id: sectionId(step), className: "scroll-mt-4", children: renderStep(step) }, step));
+                            }), commitError ? (_jsx("p", { className: "text-destructive text-sm", children: commitError instanceof Error ? commitError.message : String(commitError) })) : null, _jsxs("div", { className: "flex items-center gap-2 pt-1", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onCancel?.(), children: nav.cancel }), onConfirm ? (canConfirm === false ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx("span", { className: "ml-auto inline-flex" }), children: _jsx(Button, { type: "button", disabled: true, children: messages.bookingJourney.review.confirmBooking }) }), _jsx(TooltipContent, { children: messages.bookingJourney.review.completeToConfirm })] })) : (_jsx(Button, { type: "button", className: "ml-auto", onClick: onConfirm, disabled: isCommitting === true, children: isCommitting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), messages.bookingJourney.review.confirming] })) : (messages.bookingJourney.review.confirmBooking) }))) : null] })] }), _jsx("aside", { className: "md:sticky md:top-4 md:col-span-3", children: sidePanel })] }), contractDialog] }));
+}

package/dist/journey/components/step-header.d.ts

@@ -0,0 +1,7 @@
+import type { JourneyHeaderState, JourneyStep } from "../types.js";
+interface StepHeaderProps extends JourneyHeaderState {
+    onJumpTo: (step: JourneyStep) => void;
+}
+export declare function StepHeader({ current, visited, steps, onJumpTo, }: StepHeaderProps): React.ReactElement;
+export {};
+//# sourceMappingURL=step-header.d.ts.map

package/dist/journey/components/step-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"step-header.d.ts","sourceRoot":"","sources":["../../../src/journey/components/step-header.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAElE,UAAU,eAAgB,SAAQ,kBAAkB;IAClD,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAA;CACtC;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,OAAO,EACP,KAAK,EACL,QAAQ,GACT,EAAE,eAAe,GAAG,KAAK,CAAC,YAAY,CAwBtC"}