@voyant-travel/bookings-react 0.119.3

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

@@ -0,0 +1,368 @@
+// 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 { useBookingCommit, useBookingDraft, useBookingDraftShape, useBookingHold, useBookingQuote, } from "@voyant-travel/catalog-react/booking-engine";
+import { Button } from "@voyant-travel/ui/components/button";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useBookingsUiMessagesOrDefault } from "../../i18n/index.js";
+import { emptyDraft, totalPax } from "../lib/draft-state.js";
+import { JOURNEY_STEP_ORDER, } from "../types.js";
+import { buildCommitParty, canAdvanceFromStep, defaultMinimalShape, isStepVisible, makeHoldSignature, resolveInitialStatus, stackedStepComplete, warningsForStep, } from "./booking-journey-rules.js";
+import { ConfigureStepSkeleton } from "./configure-step-skeleton.js";
+import { ContractPreviewDialog } from "./contract-preview-dialog.js";
+import { AccommodationStep, AddonsStep, BillingStep, DepartureStep, DocumentsStep, FinalizeControls, OptionsStep, PaymentStep, ReviewStep, TravelersStep, } from "./journey-steps.js";
+import { PriceSidePanel } from "./side-panel.js";
+import { StackedJourney } from "./stacked-journey.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,
+            id: props.entityId,
+            // Empty when storefront — the public engine route resolves
+            // it server-side from (entityModule, entityId).
+            sourceKind: props.sourceKind ?? "",
+            sourceConnectionId: props.sourceConnectionId,
+            sourceRef: props.sourceRef,
+        }, { buyerType: props.defaultBuyerType ?? (surface === "admin" ? "B2B" : "B2C") });
+        // Seed Configure when the caller passed pre-locked state —
+        // detail page picks departure + pax, booking flow only handles
+        // travelers + addons + payment.
+        if (props.initialConfigure) {
+            const seed = props.initialConfigure;
+            const seedPax = seed.pax;
+            base.configure = Object.assign({}, base.configure, seed, {
+                pax: { ...base.configure.pax, ...(seedPax ?? {}) },
+            });
+        }
+        if (props.initialAccommodation) {
+            const seed = props.initialAccommodation;
+            base.accommodation = Object.assign({ rooms: [], travelerAssignments: {} }, base.accommodation ?? {}, seed);
+        }
+        return base;
+    });
+    const fallbackShape = useMemo(() => props.fallbackShape ?? defaultMinimalShape(), [props.fallbackShape]);
+    // Server-side draft sync — PUT on each step transition. The shell
+    // doesn't read from the server in Phase B (drafts are recovery
+    // surface, not source of truth) but the wire is in place.
+    const draftSync = useBookingDraft({
+        surface,
+        draftId: props.draftId,
+        enableLoad: false,
+    });
+    // Live quote — debounced 250ms.
+    const quote = useBookingQuote({
+        surface,
+        draft,
+    });
+    const shape = useBookingDraftShape({
+        surface,
+        quote: quote.data,
+        fallback: fallbackShape,
+    });
+    // Step navigation — only show steps the descriptor says are relevant.
+    const hideConfigure = props.hideConfigure === true;
+    const steps = useMemo(() => JOURNEY_STEP_ORDER.filter((s) => {
+        // `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, 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] ?? "departure");
+        }
+    }, [steps, currentStep]);
+    // 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,
+        });
+    }, [saveTrigger]);
+    // Commit
+    const commit = useBookingCommit({
+        surface,
+        draftId: props.draftId,
+        onCommitted: props.onCommitted,
+    });
+    // Inventory hold — fired when the user advances past Configure
+    // with a slot + pax picked. Failures are non-blocking (the engine
+    // re-validates capacity at commit time anyway); we just don't
+    // want to silently let two shoppers race past Configure with one
+    // capacity unit between them.
+    const holdApi = useBookingHold({ surface });
+    const holdState = useRef({});
+    const holdSignature = makeHoldSignature(draft, props.entityModule, props.entityId);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: signature change is the only trigger; refs + closure read latest values -- owner: bookings-react; existing suppression is intentional pending typed cleanup.
+    useEffect(() => {
+        // 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;
+        // Inquiry mode is the lead-form path — capture the lead without
+        // burning capacity. The operator follows up before any inventory
+        // is touched.
+        if (draft.payment.intent === "inquiry")
+            return;
+        const previousToken = holdState.current.holdToken;
+        holdState.current = { signature: holdSignature };
+        void holdApi
+            .place({
+            entityModule: props.entityModule,
+            entityId: props.entityId,
+            draftId: props.draftId,
+            parameters: {
+                slotId: draft.configure.departureSlotId,
+                paxCount: totalPax(draft),
+                productId: props.entityId,
+            },
+        })
+            .then((result) => {
+            holdState.current = { holdToken: result.holdToken, signature: holdSignature };
+        })
+            .catch(() => {
+            // Non-blocking — see comment above.
+        });
+        if (previousToken) {
+            void holdApi
+                .release({ entityModule: props.entityModule, holdToken: previousToken })
+                .catch(() => { });
+        }
+    }, [holdSignature, currentStep]);
+    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);
+    const next = steps[idx + 1];
+    const prev = steps[idx - 1];
+    const advance = async () => {
+        if (!next || !canAdvance || isAdvanceGuardPending)
+            return;
+        setAdvanceGuardError(null);
+        if (props.onBeforeStepAdvance) {
+            setIsAdvanceGuardPending(true);
+            try {
+                const guardResult = await props.onBeforeStepAdvance({
+                    currentStep,
+                    nextStep: next,
+                    draft,
+                    pricing: quote.data?.pricing ?? null,
+                    quoteId: quote.data?.quoteId,
+                    surface,
+                });
+                if (guardResult &&
+                    typeof guardResult === "object" &&
+                    "draft" in guardResult &&
+                    guardResult.draft) {
+                    setDraft(guardResult.draft);
+                }
+                if (guardResult === false) {
+                    setAdvanceGuardError(messages.bookingJourney.validation.completeStepBeforeContinuing);
+                    return;
+                }
+                if (guardResult &&
+                    typeof guardResult === "object" &&
+                    "allow" in guardResult &&
+                    guardResult.allow === false) {
+                    setAdvanceGuardError(guardResult.message ?? messages.bookingJourney.validation.completeStepBeforeContinuing);
+                    return;
+                }
+            }
+            catch (error) {
+                setAdvanceGuardError(error instanceof Error
+                    ? error.message
+                    : messages.bookingJourney.validation.unableToContinue);
+                return;
+            }
+            finally {
+                setIsAdvanceGuardPending(false);
+            }
+        }
+        setCurrentStep(next);
+        setVisited((s) => new Set(s).add(next));
+    };
+    const goBack = () => {
+        if (!prev)
+            return;
+        setCurrentStep(prev);
+    };
+    const jumpTo = (step) => {
+        if (!visited.has(step) && step !== currentStep)
+            return;
+        setCurrentStep(step);
+    };
+    const [contractDialogOpen, setContractDialogOpen] = useState(false);
+    // Tracks the multi-step storefront checkout flow (book →
+    // checkout-start → redirect). The legacy in-process commit has
+    // its own `commit.isPending` so the Confirm button merges both
+    // when deciding whether to show a spinner.
+    const [isHandlingCheckout, setIsHandlingCheckout] = useState(false);
+    const contractConfig = props.contract;
+    const contractVariables = useMemo(() => {
+        if (!contractConfig)
+            return {};
+        return contractConfig.resolveVariables({ draft, pricing: quote.data?.pricing ?? null });
+    }, [contractConfig, draft, quote.data?.pricing]);
+    const commitDraft = async () => {
+        if (!quote.data?.quoteId)
+            return;
+        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" },
+        });
+    };
+    const handleAccepted = async (acceptance) => {
+        if (!props.onContractAccepted) {
+            await commitDraft();
+            return;
+        }
+        setIsHandlingCheckout(true);
+        try {
+            await props.onContractAccepted(acceptance, {
+                draft,
+                pricing: quote.data?.pricing ?? null,
+                quoteId: quote.data?.quoteId,
+            });
+        }
+        finally {
+            setIsHandlingCheckout(false);
+        }
+    };
+    const onConfirm = async () => {
+        if (!quote.data?.quoteId)
+            return;
+        // 1. Contract is wired → open the dialog. Acceptance triggers
+        //    onContractAccepted (the storefront's checkout-start path).
+        // 2. No contract but onContractAccepted is wired → call it
+        //    directly without an acceptance payload. The storefront uses
+        //    this to drive the /book + /checkout/start handoff so card
+        //    intents redirect to the PSP. Skipping the dialog when no
+        //    template is configured is intentional — the dialog is an
+        //    optional gate, not a required step.
+        // 3. Neither wired → in-process commit (the operator dashboard's
+        //    legacy path).
+        if (contractConfig) {
+            setContractDialogOpen(true);
+            return;
+        }
+        await handleAccepted(null);
+    };
+    const onContractAccept = async (acceptance) => {
+        setContractDialogOpen(false);
+        await handleAccepted(acceptance);
+    };
+    // 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, 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
+                                                props.onCancelled?.();
+                                        }, children: messages.bookingJourney.navigation.back }), next ? (_jsx(Button, { type: "button", onClick: () => void advance(), disabled: !canAdvance || isAdvanceGuardPending, className: "ml-auto", children: isAdvanceGuardPending
+                                            ? 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] }));
+}

package/dist/journey/components/configure-step-skeleton.d.ts

@@ -0,0 +1,8 @@
+import type * as React from "react";
+/**
+ * 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.
+ */
+export declare function ConfigureStepSkeleton(): React.ReactElement;
+//# sourceMappingURL=configure-step-skeleton.d.ts.map

package/dist/journey/components/configure-step-skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"configure-step-skeleton.d.ts","sourceRoot":"","sources":["../../../src/journey/components/configure-step-skeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAEnC;;;;GAIG;AACH,wBAAgB,qBAAqB,IAAI,KAAK,CAAC,YAAY,CA0B1D"}

package/dist/journey/components/configure-step-skeleton.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardContent, CardHeader } from "@voyant-travel/ui/components/card";
+import { Skeleton } from "@voyant-travel/ui/components/skeleton";
+/**
+ * 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.
+ */
+export 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" })] })] })] }));
+}

package/dist/journey/components/contract-preview-dialog.d.ts

@@ -0,0 +1,47 @@
+import * as React from "react";
+/**
+ * Contract preview dialog. Renders a contract template with the
+ * draft variables prefilled and gates the journey on two
+ * checkboxes — terms acceptance and an optional marketing opt-in.
+ *
+ * The dialog is template-driven: the storefront wires a
+ * `templateSlug` plus a `resolveVariables(draft)` function that maps
+ * the booking draft to the template's variable schema. The dialog
+ * fetches the rendered HTML from
+ * `POST /v1/public/legal/contracts/templates/by-slug/:slug/preview`
+ * and renders it in an iframe (sandboxed — same-origin removed) so
+ * inline styles in the contract HTML don't leak into the page.
+ */
+export interface ContractPreviewDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Variables to interpolate into the template body. */
+    variables: Record<string, unknown>;
+    /**
+     * URL of the public render endpoint. The storefront wraps the
+     * journey and supplies an absolute URL so the dialog stays
+     * agnostic about where the API base lives.
+     */
+    previewUrl: string;
+    /** Optional Accept-Language header for locale resolution. */
+    acceptLanguage?: string;
+    /** Fired when the user clicks Accept after ticking the gates. */
+    onAccept: (acceptance: ContractAcceptance) => void;
+    /** Optional marketing-opt-in label. When omitted, marketing
+     *  consent isn't required to accept. */
+    marketingLabel?: string;
+    termsLabel?: React.ReactNode;
+}
+export interface ContractAcceptance {
+    templateId: string;
+    templateSlug: string;
+    templateName: string;
+    acceptedTerms: true;
+    acceptedMarketing: boolean;
+    acceptedAt: string;
+    /** The exact rendered HTML the user accepted — captured for the
+     *  audit trail so we can reproduce what they saw. */
+    renderedHtml: string;
+}
+export declare function ContractPreviewDialog({ open, onOpenChange, variables, previewUrl, acceptLanguage, onAccept, marketingLabel, termsLabel, }: ContractPreviewDialogProps): React.ReactElement;
+//# sourceMappingURL=contract-preview-dialog.d.ts.map

package/dist/journey/components/contract-preview-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"contract-preview-dialog.d.ts","sourceRoot":"","sources":["../../../src/journey/components/contract-preview-dialog.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,0BAA0B;IACzC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,uDAAuD;IACvD,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAClC;;;;OAIG;IACH,UAAU,EAAE,MAAM,CAAA;IAClB,6DAA6D;IAC7D,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,iEAAiE;IACjE,QAAQ,EAAE,CAAC,UAAU,EAAE,kBAAkB,KAAK,IAAI,CAAA;IAClD;4CACwC;IACxC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC7B;AAED,MAAM,WAAW,kBAAkB;IACjC,UAAU,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,MAAM,CAAA;IACpB,YAAY,EAAE,MAAM,CAAA;IACpB,aAAa,EAAE,IAAI,CAAA;IACnB,iBAAiB,EAAE,OAAO,CAAA;IAC1B,UAAU,EAAE,MAAM,CAAA;IAClB;yDACqD;IACrD,YAAY,EAAE,MAAM,CAAA;CACrB;AAgBD,wBAAgB,qBAAqB,CAAC,EACpC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,UAAU,EACV,cAAc,EACd,QAAQ,EACR,cAAc,EACd,UAAU,GACX,EAAE,0BAA0B,GAAG,KAAK,CAAC,YAAY,CA2JjD"}

package/dist/journey/components/contract-preview-dialog.js

@@ -0,0 +1,124 @@
+"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 { Checkbox } from "@voyant-travel/ui/components/checkbox";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, } from "@voyant-travel/ui/components/dialog";
+import { Skeleton } from "@voyant-travel/ui/components/skeleton";
+import * as React from "react";
+import { formatMessage, useBookingsUiMessagesOrDefault } from "../../i18n/index.js";
+export function ContractPreviewDialog({ open, onOpenChange, variables, previewUrl, acceptLanguage, onAccept, marketingLabel, termsLabel, }) {
+    const messages = useBookingsUiMessagesOrDefault();
+    const [loadState, setLoadState] = React.useState("idle");
+    const [errorMessage, setErrorMessage] = React.useState(null);
+    const [renderedHtml, setRenderedHtml] = React.useState("");
+    const [template, setTemplate] = React.useState(null);
+    const [acceptedTerms, setAcceptedTerms] = React.useState(false);
+    // Marketing consent defaults to opted-in; the customer can untick
+    // before accepting. Terms still require an explicit tick.
+    const [acceptedMarketing, setAcceptedMarketing] = React.useState(true);
+    // Stringify the variables once so the effect re-fetches only on
+    // meaningful changes — equivalent to a deep-equality check, but
+    // cheap enough to run every render.
+    const variablesKey = React.useMemo(() => JSON.stringify(variables), [variables]);
+    const variablesRef = React.useRef(variables);
+    variablesRef.current = variables;
+    // biome-ignore lint/correctness/useExhaustiveDependencies: variablesKey is the meaningful-change signal; the actual variables are read off variablesRef so the effect doesn't re-fire on every render -- owner: bookings-react; existing suppression is intentional pending typed cleanup.
+    React.useEffect(() => {
+        if (!open)
+            return;
+        let cancelled = false;
+        setLoadState("loading");
+        setErrorMessage(null);
+        setAcceptedTerms(false);
+        setAcceptedMarketing(true);
+        void fetch(previewUrl, {
+            method: "POST",
+            credentials: "include",
+            headers: {
+                "content-type": "application/json",
+                ...(acceptLanguage ? { "accept-language": acceptLanguage } : {}),
+            },
+            body: JSON.stringify({ variables: variablesRef.current }),
+        })
+            .then(async (res) => {
+            if (!res.ok) {
+                throw new Error(formatMessage(messages.bookingJourney.contract.previewRequestFailed, {
+                    status: res.status,
+                }));
+            }
+            const json = (await res.json());
+            if (cancelled)
+                return;
+            const body = json.data?.rendered ?? "";
+            const tmpl = json.data?.template;
+            if (!body || !tmpl) {
+                throw new Error(messages.bookingJourney.contract.previewMissing);
+            }
+            setRenderedHtml(body);
+            setTemplate({ id: tmpl.id, slug: tmpl.slug, name: tmpl.name });
+            setLoadState("ready");
+        })
+            .catch((err) => {
+            if (cancelled)
+                return;
+            setErrorMessage(err instanceof Error ? err.message : String(err));
+            setLoadState("error");
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [open, previewUrl, acceptLanguage, variablesKey]);
+    const canAccept = loadState === "ready" && acceptedTerms && Boolean(template);
+    const handleAccept = () => {
+        if (!canAccept || !template)
+            return;
+        onAccept({
+            templateId: template.id,
+            templateSlug: template.slug,
+            templateName: template.name,
+            acceptedTerms: true,
+            acceptedMarketing,
+            acceptedAt: new Date().toISOString(),
+            renderedHtml,
+        });
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "flex h-[85vh] w-[95vw] max-w-4xl flex-col gap-0 p-0", children: [_jsxs(DialogHeader, { className: "border-b p-6 pb-4", children: [_jsx(DialogTitle, { children: template?.name ?? messages.bookingJourney.contract.defaultTitle }), _jsx("p", { className: "text-muted-foreground text-sm", children: messages.bookingJourney.contract.description })] }), _jsxs("div", { className: "flex-1 overflow-hidden bg-muted/30", children: [loadState === "loading" ? (_jsxs("div", { className: "space-y-3 p-6", children: [_jsx(Skeleton, { className: "h-6 w-1/2" }), _jsx(Skeleton, { className: "h-4 w-full" }), _jsx(Skeleton, { className: "h-4 w-5/6" }), _jsx(Skeleton, { className: "h-4 w-4/5" }), _jsx(Skeleton, { className: "h-4 w-full" })] })) : null, loadState === "error" ? (_jsx("div", { className: "p-6", children: _jsxs("p", { className: "text-destructive text-sm", children: [messages.bookingJourney.contract.errorPrefix, " ", errorMessage] }) })) : null, loadState === "ready" ? (_jsx("iframe", { title: formatMessage(messages.bookingJourney.contract.iframeTitle, {
+                                name: template?.name ?? messages.bookingJourney.contract.defaultTitle,
+                            }), srcDoc: wrapPreviewHtml(renderedHtml), sandbox: "", className: "h-full w-full border-0 bg-white" })) : null] }), _jsxs(DialogFooter, { className: "border-t p-6 sm:flex-col sm:items-stretch sm:gap-3", children: [_jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("label", { className: "flex items-start gap-2", children: [_jsx(Checkbox, { checked: acceptedTerms, onCheckedChange: (v) => setAcceptedTerms(v === true), className: "mt-0.5" }), _jsx("span", { children: termsLabel ?? _jsx(_Fragment, { children: messages.bookingJourney.contract.termsLabel }) })] }), _jsxs("label", { className: "flex items-start gap-2", children: [_jsx(Checkbox, { checked: acceptedMarketing, onCheckedChange: (v) => setAcceptedMarketing(v === true), className: "mt-0.5" }), _jsx("span", { children: marketingLabel ?? messages.bookingJourney.contract.marketingLabel })] })] }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), children: messages.bookingJourney.contract.cancel }), _jsx(Button, { type: "button", disabled: !canAccept, onClick: handleAccept, children: messages.bookingJourney.contract.acceptAndContinue })] })] })] }) }));
+}
+/**
+ * Wrap the rendered template body in a self-contained light-theme HTML
+ * document. Templates author their own typography but rarely set a
+ * background, so without this the iframe inherits the browser default
+ * (transparent) and we'd see whatever shows through — which on the
+ * storefront's dark dialog reads as black-on-black.
+ */
+function wrapPreviewHtml(body) {
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<style>
+  :root { color-scheme: light; }
+  html, body { margin: 0; background: #ffffff; color: #111827; }
+  body {
+    padding: 1.5rem 2rem;
+    font-family: ui-serif, Georgia, "Times New Roman", serif;
+    font-size: 15px;
+    line-height: 1.6;
+  }
+  h1, h2, h3 { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; color: #0f172a; }
+  h1 { font-size: 1.5rem; margin: 0 0 1rem; }
+  h2 { font-size: 1.15rem; margin: 1.5rem 0 0.5rem; }
+  p { margin: 0.5rem 0; }
+  ul, ol { padding-left: 1.5rem; }
+  strong { color: #0f172a; }
+  a { color: #2563eb; }
+  table { border-collapse: collapse; width: 100%; margin: 0.75rem 0; }
+  th, td { border: 1px solid #e5e7eb; padding: 0.5rem 0.75rem; text-align: left; }
+  th { background: #f9fafb; }
+</style>
+</head>
+<body>${body}</body>
+</html>`;
+}

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"}