@voyantjs/bookings-ui 0.20.0 → 0.21.0

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

@@ -0,0 +1,376 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * `<BookingJourney />` — the unified booking journey shell.
+ *
+ * Per `docs/architecture/booking-journey-architecture.md` §3 + §8.1.
+ *
+ * Composes:
+ *   - draft state (held at this root, mutated by step components)
+ *   - quote orchestration (debounced re-quote on every meaningful change)
+ *   - server-side draft persistence (PUT on every step transition)
+ *   - commit (Review step's Confirm button)
+ *
+ * Surface differences (CRM picker for operators vs. inline contact for
+ * customers, B2B billing default vs. B2C, payment provider hookup) live
+ * in injectable slots passed via props — same shell on every surface.
+ */
+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 { useEffect, useMemo, useRef, useState } from "react";
+import { emptyDraft, totalPax } from "../lib/draft-state.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 { PriceSidePanel } from "./side-panel.js";
+import { StepHeader } from "./step-header.js";
+export function BookingJourney(props) {
+    const surface = props.surface ?? "admin";
+    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) => {
+        if (hideConfigure && s === "configure")
+            return false;
+        return isStepVisible(s, shape);
+    }), [shape, hideConfigure]);
+    const [currentStep, setCurrentStep] = useState(() => steps[0] ?? "configure");
+    const [visited, setVisited] = useState(() => new Set([steps[0] ?? "configure"]));
+    // 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");
+        }
+    }, [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
+    useEffect(() => {
+        draftSync.save.mutate({
+            draft: { ...draft, quoteId: quote.data?.quoteId },
+            currentStep,
+            currentQuoteId: quote.data?.quoteId,
+        });
+    }, [currentStep]);
+    // 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
+    useEffect(() => {
+        if (currentStep === "configure" || !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 canAdvance = canAdvanceFromStep(currentStep, draft, shape, quote.data?.available !== false);
+    const warnings = warningsForStep(currentStep, draft, shape);
+    const idx = steps.indexOf(currentStep);
+    const next = steps[idx + 1];
+    const prev = steps[idx - 1];
+    const advance = () => {
+        if (!next || !canAdvance)
+            return;
+        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,
+            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);
+    };
+    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 ?? {
+                                    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", onClick: () => {
+                                            if (prev)
+                                                goBack();
+                                            else
+                                                props.onCancelled?.();
+                                        }, children: "Back" }), next ? (_jsx(Button, { type: "button", onClick: advance, disabled: !canAdvance, className: "ml-auto", children: "Next" })) : 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] }));
+}
+function isStepVisible(step, shape) {
+    switch (step) {
+        case "configure":
+            return shape.showsConfigure;
+        case "billing":
+            return shape.showsBilling;
+        case "travelers":
+            return shape.showsTravelers;
+        case "accommodation":
+            return shape.showsAccommodation;
+        case "addons":
+            return shape.showsAddons;
+        case "payment":
+            return shape.showsPayment;
+        case "review":
+            return shape.showsReview;
+    }
+}
+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 "billing": {
+            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.
+            return draft.travelers.every((t) => t.firstName && t.lastName);
+        }
+        default:
+            return true;
+    }
+}
+/**
+ * Soft warnings for the current step — surfaced inline above the
+ * Next button. Don't block advancement; they're hints. Per
+ * booking-journey-architecture §12.5.
+ *
+ * The hard-reject path stays in `canAdvanceFromStep` for fields
+ * that are physically required to commit (e.g. traveler names);
+ * everything else is a warning here.
+ */
+function warningsForStep(step, draft, shape) {
+    const warnings = [];
+    switch (step) {
+        case "billing": {
+            const c = draft.billing.contact;
+            if (c.phone == null || c.phone.length === 0) {
+                warnings.push("Phone number not set — useful for last-minute supplier contact.");
+            }
+            if (!draft.billing.address.country) {
+                warnings.push("Billing country not set — taxes won't compute until it's filled in.");
+            }
+            if (draft.billing.buyerType === "B2B" && !draft.billing.company?.vatId) {
+                warnings.push("VAT id missing — required for B2B reverse-charge invoicing.");
+            }
+            break;
+        }
+        case "travelers": {
+            const requiredKeys = shape.travelerFields.filter((f) => f.required).map((f) => f.key);
+            const skipBaseline = new Set(["firstName", "lastName"]);
+            const optionalRequired = requiredKeys.filter((k) => !skipBaseline.has(k));
+            for (const t of draft.travelers) {
+                for (const key of optionalRequired) {
+                    const docs = t.documents ?? {};
+                    // Email is on the row directly; everything else lives in
+                    // the document map.
+                    const value = key === "email" ? t.email : docs[key];
+                    if (value == null || value === "") {
+                        const traveler = `${t.firstName || "Traveler"} ${t.lastName || ""}`.trim();
+                        warnings.push(`${traveler}: ${labelForFieldKey(key, shape)} is required.`);
+                    }
+                }
+            }
+            break;
+        }
+        case "review": {
+            if (!draft.payment.intent) {
+                warnings.push("Payment intent not set — booking will default to hold.");
+            }
+            if (draft.travelers.length === 0) {
+                warnings.push("No travelers added — at least one is recommended for ops handoff.");
+            }
+            break;
+        }
+    }
+    return warnings;
+}
+function labelForFieldKey(key, shape) {
+    return shape.travelerFields.find((f) => f.key === key)?.label ?? key;
+}
+/**
+ * Compose a stable signature off the inputs the hold cares about.
+ * Includes entity + slot + pax so any change re-issues the hold;
+ * excludes billing / traveler details so cosmetic edits don't
+ * thrash the inventory layer.
+ */
+function makeHoldSignature(draft, entityModule, entityId) {
+    const slot = draft.configure.departureSlotId;
+    if (!slot)
+        return null;
+    const pax = totalPax(draft);
+    if (pax <= 0)
+        return null;
+    return `${entityModule}/${entityId}/${slot}/${pax}`;
+}
+function defaultMinimalShape() {
+    return {
+        ...defaultDraftShapeFlags(),
+        paxBands: DEFAULT_PAX_BANDS,
+        paxBandsAllowedTotal: paxBandsAllowedTotalFrom(DEFAULT_PAX_BANDS),
+        travelerFields: defaultTravelerFields(),
+        bookingFields: defaultBookingFields(),
+        // Engine-level allow list. Capabilities (per-deployment toggles)
+        // narrow further at render time — listing every supported intent
+        // here means consumers can opt in via PaymentProviderCapabilities
+        // without needing a custom fallbackShape.
+        paymentIntents: ["card", "bank_transfer", "hold", "inquiry", "ticket_on_credit"],
+    };
+}

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;AAE9B;;;;;;;;;;;;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,CA6JjD"}

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

@@ -0,0 +1,119 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from "@voyantjs/ui/components/button";
+import { Checkbox } from "@voyantjs/ui/components/checkbox";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, } from "@voyantjs/ui/components/dialog";
+import { Skeleton } from "@voyantjs/ui/components/skeleton";
+import * as React from "react";
+export function ContractPreviewDialog({ open, onOpenChange, variables, previewUrl, acceptLanguage, onAccept, marketingLabel, termsLabel, }) {
+    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
+    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(`Preview request failed: ${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("Preview response missing rendered body or template metadata");
+            }
+            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 ?? "Booking contract" }), _jsx("p", { className: "text-muted-foreground text-sm", children: "Please review the contract below. You can scroll through the document, then tick the boxes and click Accept to continue." })] }), _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: ["Couldn't load the contract preview: ", errorMessage] }) })) : null, loadState === "ready" ? (_jsx("iframe", { title: `${template?.name ?? "Contract"} preview`, 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: "I have read and agree to the terms of this contract. I understand that this booking is binding once accepted." })) })] }), _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 ??
+                                                "I'd like to receive occasional travel offers and updates by email. (You can unsubscribe at any time.)" })] })] }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), children: "Cancel" }), _jsx(Button, { type: "button", disabled: !canAccept, onClick: handleAccept, children: "Accept and continue" })] })] })] }) }));
+}
+/**
+ * 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.d.ts

@@ -0,0 +1,47 @@
+/**
+ * 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.
+ */
+import type { BookingDraftShape } from "@voyantjs/catalog/booking-engine";
+import { type Draft } from "../lib/draft-state.js";
+import type { LeadContactPickerProps, PaymentProviderCapabilities, PaymentProviderStepRenderProps, TravelerContactPickerProps } from "../types.js";
+interface StepCommonProps {
+    draft: Draft;
+    setDraft: (next: Draft) => void;
+    shape: BookingDraftShape;
+}
+export declare function ConfigureStep({ draft, setDraft, shape, }: StepCommonProps & {
+    renderExtras?: () => React.ReactNode;
+}): React.ReactElement;
+export declare function BillingStep({ draft, setDraft, renderLeadContactPicker, renderExtras, }: StepCommonProps & {
+    renderLeadContactPicker?: (props: LeadContactPickerProps) => React.ReactNode;
+    renderExtras?: () => React.ReactNode;
+}): React.ReactElement;
+export declare function TravelersStep({ draft, setDraft, shape, renderTravelerContactPicker, }: StepCommonProps & {
+    renderTravelerContactPicker?: (props: TravelerContactPickerProps) => React.ReactNode;
+}): React.ReactElement;
+export declare function AccommodationStep({ draft, setDraft, shape }: StepCommonProps): React.ReactElement;
+export declare function AddonsStep({ draft, setDraft, shape }: StepCommonProps): React.ReactElement;
+export declare function PaymentStep({ draft, setDraft, shape, capabilities, renderProviderStep, }: StepCommonProps & {
+    capabilities: PaymentProviderCapabilities;
+    renderProviderStep?: (props: PaymentProviderStepRenderProps) => React.ReactNode;
+}): React.ReactElement;
+export declare function ReviewStep({ draft, setDraft, isCommitting, onConfirm, renderExtras, surface, }: {
+    draft: Draft;
+    setDraft: (next: Draft) => void;
+    isCommitting: boolean;
+    onConfirm: () => void;
+    renderExtras?: () => React.ReactNode;
+    /**
+     * Drives the notes field. Public storefronts collect
+     * customer-facing "anything we should know?" notes; operator
+     * surfaces collect operator-only internal notes. Defaults to
+     * `admin` so existing operator usage stays unchanged.
+     */
+    surface?: "admin" | "public";
+}): React.ReactElement;
+export {};
+//# 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":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAA;AAYzE,OAAO,EACL,KAAK,KAAK,EASX,MAAM,uBAAuB,CAAA;AAC9B,OAAO,KAAK,EACV,sBAAsB,EACtB,2BAA2B,EAC3B,8BAA8B,EAC9B,0BAA0B,EAC3B,MAAM,aAAa,CAAA;AAEpB,UAAU,eAAe;IACvB,KAAK,EAAE,KAAK,CAAA;IACZ,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAA;IAC/B,KAAK,EAAE,iBAAiB,CAAA;CACzB;AAMD,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,KAAK,GACN,EAAE,eAAe,GAAG;IACnB,YAAY,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAA;CACrC,GAAG,KAAK,CAAC,YAAY,CAYrB;AA+UD,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,uBAAuB,EACvB,YAAY,GACb,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;CACrC,GAAG,KAAK,CAAC,YAAY,CA8JrB;AAMD,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,KAAK,EACL,2BAA2B,GAC5B,EAAE,eAAe,GAAG;IACnB,2BAA2B,CAAC,EAAE,CAAC,KAAK,EAAE,0BAA0B,KAAK,KAAK,CAAC,SAAS,CAAA;CACrF,GAAG,KAAK,CAAC,YAAY,CAiFrB;AAmTD,wBAAgB,iBAAiB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,eAAe,GAAG,KAAK,CAAC,YAAY,CAmGjG;AA6DD,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,eAAe,GAAG,KAAK,CAAC,YAAY,CA8C1F;AAyDD,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,KAAK,EACL,YAAY,EACZ,kBAAkB,GACnB,EAAE,eAAe,GAAG;IACnB,YAAY,EAAE,2BAA2B,CAAA;IACzC,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,8BAA8B,KAAK,KAAK,CAAC,SAAS,CAAA;CAChF,GAAG,KAAK,CAAC,YAAY,CAuFrB;AA8ED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,YAAY,EACZ,OAAO,GACR,EAAE;IACD,KAAK,EAAE,KAAK,CAAA;IACZ,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAA;IAC/B,YAAY,EAAE,OAAO,CAAA;IACrB,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAA;IACpC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAC7B,GAAG,KAAK,CAAC,YAAY,CA2DrB"}