@voyantjs/bookings-ui 0.107.0 → 0.108.0

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

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * `<BookingJourney />` — the unified booking journey shell.
  *
@@ -18,17 +18,26 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DEFAULT_PAX_BANDS, defaultBookingFields, defaultDraftShapeFlags, defaultTravelerFields, paxBandsAllowedTotalFrom, } from "@voyantjs/catalog/booking-engine";
 import { useBookingCommit, useBookingDraft, useBookingDraftShape, useBookingHold, useBookingQuote, } from "@voyantjs/catalog-react/booking-engine";
 import { Button } from "@voyantjs/ui/components/button";
+import { Card, CardContent, CardHeader } from "@voyantjs/ui/components/card";
+import { Skeleton } from "@voyantjs/ui/components/skeleton";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@voyantjs/ui/components/tooltip";
+import { Loader2, Lock } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { formatMessage, useBookingsUiMessagesOrDefault } from "../../i18n/index.js";
 import { emptyDraft, totalPax } from "../lib/draft-state.js";
+import { evaluatePaxBandDependencies } from "../lib/pax-band-dependencies.js";
 import { JOURNEY_STEP_ORDER, } from "../types.js";
 import { ContractPreviewDialog } from "./contract-preview-dialog.js";
-import { AccommodationStep, AddonsStep, BillingStep, ConfigureStep, PaymentStep, ReviewStep, TravelersStep, } from "./journey-steps.js";
+import { AccommodationStep, AddonsStep, BillingStep, DepartureStep, DocumentsStep, FinalizeControls, OptionsStep, PaymentStep, ReviewStep, TravelersStep, } from "./journey-steps.js";
 import { PriceSidePanel } from "./side-panel.js";
 import { StepHeader } from "./step-header.js";
 export function BookingJourney(props) {
     const messages = useBookingsUiMessagesOrDefault();
     const surface = props.surface ?? "admin";
+    // Admin books on a single stacked page (nothing hidden); the storefront
+    // keeps the guided one-step-at-a-time wizard. Two deliberately separate
+    // flows — see BookingJourneyProps.layout.
+    const layout = props.layout ?? (surface === "admin" ? "stacked" : "wizard");
     const [draft, setDraft] = useState(() => {
         const base = emptyDraft({
             module: props.entityModule,
@@ -77,33 +86,43 @@ export function BookingJourney(props) {
     // Step navigation — only show steps the descriptor says are relevant.
     const hideConfigure = props.hideConfigure === true;
     const steps = useMemo(() => JOURNEY_STEP_ORDER.filter((s) => {
-        if (hideConfigure && s === "configure")
+        // `hideConfigure` skips the configure phase — now split across the
+        // Departure + Options steps.
+        if (hideConfigure && (s === "departure" || s === "options"))
+            return false;
+        // Internal notes + document generation are operator-only.
+        if (s === "documents" && surface !== "admin")
             return false;
         return isStepVisible(s, shape);
-    }), [shape, hideConfigure]);
-    const [currentStep, setCurrentStep] = useState(() => steps[0] ?? "configure");
-    const [visited, setVisited] = useState(() => new Set([steps[0] ?? "configure"]));
+    }), [shape, hideConfigure, surface]);
+    // The stacked admin layout drops the Review block — the side panel shows the
+    // live summary + Confirm at all times, so a separate review section is
+    // redundant.
+    const stackedSteps = useMemo(() => steps.filter((s) => s !== "review"), [steps]);
+    const [currentStep, setCurrentStep] = useState(() => steps[0] ?? "departure");
+    const [visited, setVisited] = useState(() => new Set([steps[0] ?? "departure"]));
     // If the descriptor changes and removes the current step, reset to
     // the first available step. (Edge case: shape goes from
     // owned→sourced and the relevant step set narrows.)
     useEffect(() => {
         if (!steps.includes(currentStep)) {
-            setCurrentStep(steps[0] ?? "configure");
+            setCurrentStep(steps[0] ?? "departure");
         }
     }, [steps, currentStep]);
-    // PUT the draft to the server every time the user transitions
-    // steps. Keeps the recovery surface fresh without saving on every
-    // keystroke. The mutation reads the latest draft + quote from the
-    // closure on each fire — adding them to the deps array would defeat
-    // the "save on step change only" semantics.
-    // biome-ignore lint/correctness/useExhaustiveDependencies: intentional — fires on step transition only
+    // PUT the draft to the server to keep the recovery surface fresh
+    // without saving on every keystroke. Wizard saves on each step
+    // transition; the stacked admin page has no steps, so it saves on
+    // each settled quote (a natural, debounced cadence). The mutation
+    // reads the latest draft + quote from the closure on each fire.
+    const saveTrigger = layout === "wizard" ? currentStep : (quote.data?.quoteId ?? "");
+    // biome-ignore lint/correctness/useExhaustiveDependencies: intentional — fires on save trigger only
     useEffect(() => {
         draftSync.save.mutate({
             draft: { ...draft, quoteId: quote.data?.quoteId },
             currentStep,
             currentQuoteId: quote.data?.quoteId,
         });
-    }, [currentStep]);
+    }, [saveTrigger]);
     // Commit
     const commit = useBookingCommit({
         surface,
@@ -120,7 +139,12 @@ export function BookingJourney(props) {
     const holdSignature = makeHoldSignature(draft, props.entityModule, props.entityId);
     // biome-ignore lint/correctness/useExhaustiveDependencies: signature change is the only trigger; refs + closure read latest values
     useEffect(() => {
-        if (currentStep === "configure" || !holdSignature)
+        // Wizard: don't hold while still on the configure steps. Stacked:
+        // everything's on one page, so the signature (slot + pax present)
+        // is the trigger.
+        if (layout === "wizard" && (currentStep === "departure" || currentStep === "options"))
+            return;
+        if (!holdSignature)
             return;
         if (holdState.current.signature === holdSignature)
             return;
@@ -154,8 +178,17 @@ export function BookingJourney(props) {
                 .catch(() => { });
         }
     }, [holdSignature, currentStep]);
-    const canAdvance = canAdvanceFromStep(currentStep, draft, shape, quote.data?.available !== false);
+    const available = quote.data?.available !== false;
+    const canAdvance = canAdvanceFromStep(currentStep, draft, shape, available);
     const warnings = warningsForStep(currentStep, draft, shape, messages);
+    // Stacked layout: there's no "current" step, but the section nav still
+    // nudges toward the first thing that isn't done yet, and the final
+    // Confirm is gated until every section passes its check.
+    const firstIncomplete = useMemo(() => stackedSteps.find((s) => !stackedStepComplete(s, draft, shape, available)) ??
+        stackedSteps[stackedSteps.length - 1] ??
+        stackedSteps[0] ??
+        "departure", [stackedSteps, draft, shape, available]);
+    const canCommit = useMemo(() => stackedSteps.every((s) => canAdvanceFromStep(s, draft, shape, available)), [stackedSteps, draft, shape, available]);
     const [isAdvanceGuardPending, setIsAdvanceGuardPending] = useState(false);
     const [advanceGuardError, setAdvanceGuardError] = useState(null);
     const idx = steps.indexOf(currentStep);
@@ -235,6 +268,10 @@ export function BookingJourney(props) {
         await commit.mutateAsync({
             draft: { ...draft, quoteId: quote.data.quoteId },
             quoteId: quote.data.quoteId,
+            // The owned commit reads the buyer + travelers off `party`, not the
+            // draft — without this the create rejects with "no billing person/org".
+            party: buildCommitParty(draft),
+            initialStatus: resolveInitialStatus(draft),
             paymentIntent: { type: draft.payment.intent === "card" ? "card" : "hold" },
         });
     };
@@ -278,11 +315,66 @@ export function BookingJourney(props) {
         setContractDialogOpen(false);
         await handleAccepted(acceptance);
     };
-    return (_jsxs("div", { className: props.className, children: [_jsxs("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-8 md:items-start", children: [_jsxs("div", { className: "space-y-6 md:col-span-5", children: [_jsx(StepHeader, { current: currentStep, visited: [...visited], steps: steps, shape: shape, onJumpTo: jumpTo }), currentStep === "configure" ? (_jsx(ConfigureStep, { draft: draft, setDraft: setDraft, shape: shape })) : null, currentStep === "billing" ? (_jsx(BillingStep, { draft: draft, setDraft: setDraft, shape: shape, renderLeadContactPicker: props.renderLeadContactPicker, renderExtras: props.renderBillingExtras })) : null, currentStep === "travelers" ? (_jsx(TravelersStep, { draft: draft, setDraft: setDraft, shape: shape, renderTravelerContactPicker: props.renderTravelerContactPicker })) : null, currentStep === "accommodation" ? (_jsx(AccommodationStep, { draft: draft, setDraft: setDraft, shape: shape })) : null, currentStep === "addons" ? (_jsx(AddonsStep, { draft: draft, setDraft: setDraft, shape: shape })) : null, currentStep === "payment" ? (_jsx(PaymentStep, { draft: draft, setDraft: setDraft, shape: shape, capabilities: props.paymentCapabilities ?? {
+    // Bind the picked lead + departure into the billing-extras slot so the
+    // template can run lead-aware checks (e.g. duplicate-departure warning).
+    const billingExtrasSlot = props.renderBillingExtras
+        ? () => props.renderBillingExtras?.({
+            buyerType: draft.billing.buyerType,
+            personId: draft.billing.contact.personId,
+            organizationId: draft.billing.organizationId,
+            productId: props.entityId,
+            departureSlotId: draft.configure.departureSlotId,
+            departureDate: draft.configure.departureDate,
+        })
+        : undefined;
+    // Renders one step's content. Shared by both layouts — the wizard shows
+    // exactly one at a time; the stacked page renders them all in sections.
+    const renderStep = (step) => {
+        switch (step) {
+            case "departure":
+                // First load: the descriptor arrives with the first quote. Show a
+                // skeleton rather than the generic fallback, which would flash and
+                // then shift into the real layout.
+                return !quote.data && quote.isQuoting ? (_jsx(ConfigureStepSkeleton, {})) : (_jsx(DepartureStep, { draft: draft, setDraft: setDraft, shape: shape, productId: props.entityId, renderDeparturePicker: props.renderDeparturePicker }));
+            case "options":
+                return (_jsx(OptionsStep, { draft: draft, setDraft: setDraft, shape: shape, productId: props.entityId, renderUnitsPicker: props.renderUnitsPicker }));
+            case "billing":
+                return (_jsx(BillingStep, { draft: draft, setDraft: setDraft, shape: shape, renderLeadContactPicker: props.renderLeadContactPicker, renderExtras: billingExtrasSlot, warnings: warningsForStep("billing", draft, shape, messages) }));
+            case "travelers":
+                return (_jsx(TravelersStep, { draft: draft, setDraft: setDraft, shape: shape, renderTravelerContactPicker: props.renderTravelerContactPicker, warnings: warningsForStep("travelers", draft, shape, messages) }));
+            case "accommodation":
+                return _jsx(AccommodationStep, { draft: draft, setDraft: setDraft, shape: shape });
+            case "addons":
+                return _jsx(AddonsStep, { draft: draft, setDraft: setDraft, shape: shape });
+            case "payment":
+                return (_jsx(PaymentStep, { draft: draft, setDraft: setDraft, shape: shape, capabilities: props.paymentCapabilities ?? {
+                        acceptsCard: false,
+                        acceptsHold: true,
+                        acceptsTicketOnCredit: false,
+                    }, renderProviderStep: props.renderPaymentProviderStep, surface: surface, pricing: quote.data?.pricing ?? null }));
+            case "documents":
+                return _jsx(DocumentsStep, { draft: draft, setDraft: setDraft });
+            case "review":
+                return (_jsx(ReviewStep, { draft: draft, setDraft: setDraft, isCommitting: commit.isPending || isHandlingCheckout, onConfirm: onConfirm, 
+                    // Stacked has no per-step gates, so the Confirm button enforces
+                    // the whole-booking validity itself.
+                    canConfirm: layout === "stacked" ? canCommit : undefined, renderExtras: props.renderReviewExtras, surface: surface, pricing: quote.data?.pricing ?? null, warnings: warningsForStep("review", draft, shape, messages) }));
+        }
+    };
+    if (layout === "stacked") {
+        return (_jsx(StackedJourney, { className: props.className, steps: stackedSteps, renderStep: renderStep, isStepComplete: (s) => stackedStepComplete(s, draft, shape, available), commitError: commit.error, onCancel: props.onCancelled, onConfirm: onConfirm, isCommitting: commit.isPending || isHandlingCheckout, canConfirm: canCommit, sidePanel: _jsx(PriceSidePanel, { pricing: quote.data?.pricing ?? null, isQuoting: quote.isQuoting, invalidReason: quote.data?.invalidReason, entitySummary: props.entitySummary, currentStep: firstIncomplete, steps: stackedSteps, shape: shape, draft: draft, className: props.sidePanelClassName, 
+                // Price override + voucher live with the pricing, not in Payment.
+                pricingExtras: _jsx(FinalizeControls, { draft: draft, setDraft: setDraft, pricing: quote.data?.pricing ?? null, renderVoucherPicker: props.renderVoucherPicker }) }), contractDialog: contractConfig ? (_jsx(ContractPreviewDialog, { open: contractDialogOpen, onOpenChange: setContractDialogOpen, previewUrl: contractConfig.previewUrl, acceptLanguage: contractConfig.acceptLanguage, variables: contractVariables, marketingLabel: contractConfig.marketingLabel, termsLabel: contractConfig.termsLabel, onAccept: onContractAccept })) : null }));
+    }
+    return (_jsxs("div", { className: props.className, children: [_jsxs("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-8 md:items-start", children: [_jsxs("div", { className: "space-y-6 md:col-span-5", children: [_jsx(StepHeader, { current: currentStep, visited: [...visited], steps: steps, shape: shape, onJumpTo: jumpTo }), currentStep === "departure" ? (
+                            // First load: the descriptor arrives with the first quote. Show a
+                            // skeleton rather than the generic fallback, which would flash
+                            // and then shift into the real layout.
+                            !quote.data && quote.isQuoting ? (_jsx(ConfigureStepSkeleton, {})) : (_jsx(DepartureStep, { draft: draft, setDraft: setDraft, shape: shape, productId: props.entityId, renderDeparturePicker: props.renderDeparturePicker }))) : null, currentStep === "options" ? (_jsx(OptionsStep, { draft: draft, setDraft: setDraft, shape: shape, productId: props.entityId, renderUnitsPicker: props.renderUnitsPicker })) : null, currentStep === "billing" ? (_jsx(BillingStep, { draft: draft, setDraft: setDraft, shape: shape, renderLeadContactPicker: props.renderLeadContactPicker, renderExtras: billingExtrasSlot })) : null, currentStep === "travelers" ? (_jsx(TravelersStep, { draft: draft, setDraft: setDraft, shape: shape, renderTravelerContactPicker: props.renderTravelerContactPicker })) : null, currentStep === "accommodation" ? (_jsx(AccommodationStep, { draft: draft, setDraft: setDraft, shape: shape })) : null, currentStep === "addons" ? (_jsx(AddonsStep, { draft: draft, setDraft: setDraft, shape: shape })) : null, currentStep === "payment" ? (_jsx(PaymentStep, { draft: draft, setDraft: setDraft, shape: shape, capabilities: props.paymentCapabilities ?? {
                                     acceptsCard: false,
                                     acceptsHold: true,
                                     acceptsTicketOnCredit: false,
-                                }, renderProviderStep: props.renderPaymentProviderStep })) : null, currentStep === "review" ? (_jsx(ReviewStep, { draft: draft, setDraft: setDraft, isCommitting: commit.isPending || isHandlingCheckout, onConfirm: onConfirm, renderExtras: props.renderReviewExtras, surface: surface })) : null, warnings.length > 0 ? (_jsx("ul", { className: "space-y-1 rounded border border-amber-300 bg-amber-50 p-3 text-amber-900 text-sm dark:border-amber-700 dark:bg-amber-950 dark:text-amber-100", children: warnings.map((w) => (_jsxs("li", { children: ["\u26A0 ", w] }, w))) })) : null, _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { type: "button", variant: "outline", disabled: isAdvanceGuardPending, onClick: () => {
+                                }, renderProviderStep: props.renderPaymentProviderStep, surface: surface, pricing: quote.data?.pricing ?? null })) : null, currentStep === "review" ? (_jsx(ReviewStep, { draft: draft, setDraft: setDraft, isCommitting: commit.isPending || isHandlingCheckout, onConfirm: onConfirm, renderExtras: props.renderReviewExtras, surface: surface, pricing: quote.data?.pricing ?? null })) : null, warnings.length > 0 ? (_jsx("ul", { className: "space-y-1 rounded-md border border-amber-300 bg-amber-50 p-3 text-amber-900 text-sm dark:border-amber-700 dark:bg-amber-950 dark:text-amber-100", children: warnings.map((w) => (_jsxs("li", { children: ["\u26A0 ", w] }, w))) })) : null, _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { type: "button", variant: "outline", disabled: isAdvanceGuardPending, onClick: () => {
                                             if (prev)
                                                 goBack();
                                             else
@@ -291,10 +383,101 @@ export function BookingJourney(props) {
                                             ? messages.bookingJourney.navigation.checking
                                             : messages.bookingJourney.navigation.next })) : null] }), advanceGuardError ? (_jsx("p", { className: "text-destructive text-sm", role: "alert", "aria-live": "polite", children: advanceGuardError })) : null, commit.error ? (_jsx("p", { className: "text-destructive text-sm", children: commit.error instanceof Error ? commit.error.message : String(commit.error) })) : null] }), _jsx("aside", { className: "md:sticky md:top-4 md:col-span-3", children: _jsx(PriceSidePanel, { pricing: quote.data?.pricing ?? null, isQuoting: quote.isQuoting, invalidReason: quote.data?.invalidReason, entitySummary: props.entitySummary, currentStep: currentStep, steps: steps, shape: shape, draft: draft, className: props.sidePanelClassName }) })] }), contractConfig ? (_jsx(ContractPreviewDialog, { open: contractDialogOpen, onOpenChange: setContractDialogOpen, previewUrl: contractConfig.previewUrl, acceptLanguage: contractConfig.acceptLanguage, variables: contractVariables, marketingLabel: contractConfig.marketingLabel, termsLabel: contractConfig.termsLabel, onAccept: onContractAccept })) : null] }));
 }
+/**
+ * The buyer + travelers the owned commit reads off `request.party` (the draft
+ * carries them but `extractBillingParty` only inspects `party`). B2C supplies
+ * `personId`; B2B supplies `organizationId`; traveler person links thread
+ * through so the booking attaches to the right CRM records.
+ */
+function buildCommitParty(draft) {
+    const c = draft.billing.contact;
+    return {
+        personId: c.personId,
+        organizationId: draft.billing.organizationId,
+        billing: {
+            personId: c.personId,
+            organizationId: draft.billing.organizationId,
+            contact: {
+                firstName: c.firstName,
+                lastName: c.lastName,
+                email: c.email,
+                phone: c.phone,
+            },
+        },
+        travelerParty: {
+            travelers: draft.travelers.map((t) => ({ personId: t.personId })),
+        },
+    };
+}
+/**
+ * Initial booking status from the operator's choices: an explicit "save as
+ * draft", else live — confirmed when the payment is fully marked paid,
+ * otherwise awaiting payment.
+ */
+function resolveInitialStatus(draft) {
+    if (draft.saveAsDraft)
+        return "draft";
+    const schedules = draft.paymentSchedules ?? [];
+    const fullyPaid = schedules.length > 0 && schedules.every((s) => s.status === "paid");
+    return fullyPaid ? "confirmed" : "awaiting_payment";
+}
+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.
+ */
+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] }));
+}
 function isStepVisible(step, shape) {
+    const subSteps = shape.configureSubSteps ?? [];
     switch (step) {
-        case "configure":
+        case "departure":
+            // The departure step shows whenever the journey has a configure phase
+            // (owned products always pick a departure; storefront free-date too).
             return shape.showsConfigure;
+        case "options":
+            // The options step shows only when there's something to choose —
+            // a product option, room/unit selection, or another configure
+            // sub-step (cabin, date-range, air). Simple per-person tours skip it.
+            return (shape.showsConfigure &&
+                subSteps.some((s) => s.kind !== "departure" && s.kind !== "occupancy"));
         case "billing":
             return shape.showsBilling;
         case "travelers":
@@ -305,34 +488,94 @@ function isStepVisible(step, shape) {
             return shape.showsAddons;
         case "payment":
             return shape.showsPayment;
+        case "documents":
+            // Operator-only block; shown whenever a real booking is being finalized
+            // (gated to the admin surface in the step list above).
+            return shape.showsReview;
         case "review":
             return shape.showsReview;
     }
 }
+/**
+ * First-load placeholder for the Configure step. Mirrors the real layout
+ * (departure, travelers, option) closely enough that swapping to the live
+ * descriptor causes minimal layout shift.
+ */
+function ConfigureStepSkeleton() {
+    return (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(Skeleton, { className: "h-5 w-28" }) }), _jsxs(CardContent, { className: "space-y-6", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-4 w-24" }), _jsx(Skeleton, { className: "h-10 w-full" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(Skeleton, { className: "h-4 w-20" }), _jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-3", children: [_jsx(Skeleton, { className: "h-16 w-full" }), _jsx(Skeleton, { className: "h-16 w-full" }), _jsx(Skeleton, { className: "h-16 w-full" })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-4 w-16" }), _jsx(Skeleton, { className: "h-12 w-full" })] })] })] }));
+}
 function canAdvanceFromStep(step, draft, shape, available) {
     if (!available)
         return false;
     switch (step) {
-        case "configure": {
-            const total = totalPax(draft);
-            return total >= shape.paxBandsAllowedTotal.min && total <= shape.paxBandsAllowedTotal.max;
+        case "departure": {
+            // Require a departure when the descriptor marks it required.
+            const requiresDeparture = (shape.configureSubSteps ?? []).some((s) => s.kind === "departure" && s.required);
+            if (!requiresDeparture)
+                return true;
+            return Boolean(draft.configure.departureSlotId || draft.configure.departureDate);
+        }
+        case "options": {
+            // Room products (an `option-units` sub-step) can't be booked — or
+            // priced — without at least one room, so block confirm until one is
+            // picked. Per-person products have nothing to require here.
+            const isRoomProduct = (shape.configureSubSteps ?? []).some((s) => s.kind === "option-units");
+            if (!isRoomProduct)
+                return true;
+            const rooms = (draft.configure.optionSelections ?? []).reduce((sum, s) => sum + (s.quantity ?? 0), 0);
+            return rooms > 0;
         }
         case "billing": {
+            // B2B: the picked organization is the bill-to. The CRM org picker doesn't
+            // collect an individual contact name (and the manual contact inputs are
+            // hidden), so requiring one would lock the step with no way to satisfy it.
+            if (draft.billing.buyerType === "B2B") {
+                return Boolean(draft.billing.organizationId);
+            }
             const c = draft.billing.contact;
             return c.firstName.length > 0 && c.lastName.length > 0 && c.email.length > 0;
         }
         case "travelers": {
-            // Hard-reject only on canonical traveler fields (firstName,
-            // lastName) — those are always required regardless of
-            // descriptor configuration. All other required fields surface
-            // as warnings so operators can complete the journey and fill
-            // them in later from the booking detail page.
+            // Pax counts are set on this step now: require the allowed total and
+            // that occupancy rules (e.g. "Child under 6 requires an Adult") hold.
+            const total = totalPax(draft);
+            if (total < shape.paxBandsAllowedTotal.min || total > shape.paxBandsAllowedTotal.max) {
+                return false;
+            }
+            if (evaluatePaxBandDependencies(draft.configure.pax, shape.paxBandDependencies, shape.paxBands)
+                .length > 0) {
+                return false;
+            }
+            // Hard-reject only on canonical traveler fields (firstName, lastName);
+            // other required fields surface as warnings, fillable later.
             return draft.travelers.every((t) => t.firstName && t.lastName);
         }
         default:
             return true;
     }
 }
+/**
+ * Completeness for the stacked admin accordion's AUTO-advance — stricter
+ * than `canAdvanceFromStep` so the flow pauses on sections that need a
+ * deliberate choice even though they're not hard-required to commit:
+ *  - options: a product option must be picked (when the product has them);
+ *  - payment: an intent must be chosen.
+ * Everything else defers to the shared gate. Kept separate so the wizard's
+ * Next gating (which uses `canAdvanceFromStep`) is unchanged.
+ */
+function stackedStepComplete(step, draft, shape, available) {
+    switch (step) {
+        case "options": {
+            const hasOptions = (shape.configureSubSteps ?? []).some((s) => s.kind === "product-option");
+            // No options to choose → nothing to wait for. Otherwise require a pick.
+            return hasOptions ? Boolean(draft.configure.variantId) : true;
+        }
+        case "payment":
+            return Boolean(draft.payment.intent);
+        default:
+            return canAdvanceFromStep(step, draft, shape, available);
+    }
+}
 /**
  * Soft warnings for the current step — surfaced inline above the
  * Next button. Don't block advancement; they're hints. Per

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

@@ -0,0 +1,3 @@
+import type { StepCommonProps } from "./shared.js";
+export declare function AccommodationStep({ draft, setDraft, shape }: StepCommonProps): React.ReactElement;
+//# sourceMappingURL=accommodation-step.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accommodation-step.d.ts","sourceRoot":"","sources":["../../../../src/journey/components/journey-steps/accommodation-step.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAMlD,wBAAgB,iBAAiB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,eAAe,GAAG,KAAK,CAAC,YAAY,CAgIjG"}

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

@@ -0,0 +1,71 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Separator } from "@voyantjs/ui/components";
+import { Button } from "@voyantjs/ui/components/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@voyantjs/ui/components/card";
+import { Label } from "@voyantjs/ui/components/label";
+import { formatMessage, useBookingsUiMessagesOrDefault } from "../../../i18n/index.js";
+import { setAccommodation } from "../../lib/draft-state.js";
+// ─────────────────────────────────────────────────────────────────
+// Accommodation
+// ─────────────────────────────────────────────────────────────────
+export function AccommodationStep({ draft, setDraft, shape }) {
+    const messages = useBookingsUiMessagesOrDefault();
+    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: messages.bookingJourney.accommodation.title }) }), _jsx(Separator, {}), _jsx(CardContent, { className: "space-y-4", children: rooms.length === 0 && subSteps.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-sm", children: messages.bookingJourney.accommodation.empty })) : (_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-md 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" ? (_jsx("div", { className: "rounded-md border p-3 text-muted-foreground text-sm", children: formatMessage(messages.bookingJourney.accommodation.extensionsAvailable, {
+                                count: sub.options.length,
+                                plural: sub.options.length === 1 ? "" : "s",
+                            }) }, "extensions")) : null)] })) })] }));
+}
+function RatePlanPicker({ roomId, ratePlans, selected, onSelect, }) {
+    const messages = useBookingsUiMessagesOrDefault();
+    return (_jsxs("div", { className: "space-y-2 border-t pt-3", children: [_jsx(Label, { htmlFor: `bj-rate-plan-${roomId}`, children: messages.bookingJourney.accommodation.ratePlan }), _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-md 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: [messages.bookingJourney.accommodation.cancellationPrefix, " ", plan.cancellationPolicy] })) : null, plan.inclusions && plan.inclusions.length > 0 ? (_jsxs("div", { className: "text-muted-foreground text-xs", children: [messages.bookingJourney.accommodation.includesPrefix, " ", plan.inclusions.join(", ")] })) : null] }, plan.id));
+                }) })] }));
+}

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

@@ -0,0 +1,3 @@
+import { type StepCommonProps } from "./shared.js";
+export declare function AddonsStep({ draft, setDraft, shape }: StepCommonProps): React.ReactElement;
+//# sourceMappingURL=addons-step.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"addons-step.d.ts","sourceRoot":"","sources":["../../../../src/journey/components/journey-steps/addons-step.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAY,KAAK,eAAe,EAAE,MAAM,aAAa,CAAA;AAM5D,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,eAAe,GAAG,KAAK,CAAC,YAAY,CAmD1F"}

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

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Separator } from "@voyantjs/ui/components";
+import { Button } from "@voyantjs/ui/components/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@voyantjs/ui/components/card";
+import { useBookingsUiMessagesOrDefault } from "../../../i18n/index.js";
+import { setAddons } from "../../lib/draft-state.js";
+import { bucketBy } from "./shared.js";
+// ─────────────────────────────────────────────────────────────────
+// Add-ons
+// ─────────────────────────────────────────────────────────────────
+export function AddonsStep({ draft, setDraft, shape }) {
+    const messages = useBookingsUiMessagesOrDefault();
+    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: messages.bookingJourney.addons.title }) }), _jsx(Separator, {}), _jsxs(CardContent, { className: "space-y-4", children: [all.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-sm", children: messages.bookingJourney.addons.empty })) : 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 ?? messages.bookingJourney.addons.otherBucket)
+                            : 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-md 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: "+" })] })] }));
+}

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

@@ -0,0 +1,8 @@
+import type { LeadContactPickerProps } from "../../types.js";
+import { type StepCommonProps } from "./shared.js";
+export declare function BillingStep({ draft, setDraft, renderLeadContactPicker, renderExtras, warnings, }: StepCommonProps & {
+    renderLeadContactPicker?: (props: LeadContactPickerProps) => React.ReactNode;
+    renderExtras?: () => React.ReactNode;
+    warnings?: ReadonlyArray<string>;
+}): React.ReactElement;
+//# sourceMappingURL=billing-step.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"billing-step.d.ts","sourceRoot":"","sources":["../../../../src/journey/components/journey-steps/billing-step.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAA;AAC5D,OAAO,EAAsC,KAAK,eAAe,EAAE,MAAM,aAAa,CAAA;AAMtF,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,uBAAuB,EACvB,YAAY,EACZ,QAAQ,GACT,EAAE,eAAe,GAAG;IACnB,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAA;IAC5E,YAAY,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAA;IACpC,QAAQ,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;CACjC,GAAG,KAAK,CAAC,YAAY,CAyOrB"}