@voyantjs/bookings-ui 0.107.0 → 0.108.0

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

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

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

@@ -4,44 +4,18 @@
  * via setDraft and the shell re-quotes on the next debounce tick.
  *
  * Per booking-journey-architecture §3.
+ *
+ * This module is a thin barrel — the implementations live in the
+ * `./journey-steps/` directory, split by step. Consumers import the
+ * same public symbols from here as before.
  */
-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 {};
+export { AccommodationStep } from "./journey-steps/accommodation-step.js";
+export { AddonsStep } from "./journey-steps/addons-step.js";
+export { BillingStep } from "./journey-steps/billing-step.js";
+export { DepartureStep, OptionsStep } from "./journey-steps/configure-steps.js";
+export { DocumentsStep } from "./journey-steps/documents-step.js";
+export { FinalizeControls, PaymentStep } from "./journey-steps/payment-step.js";
+export { ReviewStep } from "./journey-steps/review-step.js";
+export { JourneyWarnings } from "./journey-steps/shared.js";
+export { TravelersStep } from "./journey-steps/travelers-step.js";
 //# sourceMappingURL=journey-steps.d.ts.map

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

@@ -1 +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,EAEL,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,CAarB;AA6ZD,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,CA+JrB;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,CAgFrB;AAkUD,wBAAgB,iBAAiB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,eAAe,GAAG,KAAK,CAAC,YAAY,CAsGjG;AAkED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,eAAe,GAAG,KAAK,CAAC,YAAY,CAkD1F;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,CAoFrB;AAwDD,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,CAgErB"}
+{"version":3,"file":"journey-steps.d.ts","sourceRoot":"","sources":["../../../src/journey/components/journey-steps.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAA;AACzE,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAA;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAA;AAC7D,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAA;AAC/E,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAA;AACjE,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAA;AAC/E,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAA;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAA"}