@voyantjs/bookings-ui 0.35.0 → 0.37.1

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

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "@voyantjs/ui/components/accordion";
 import { Card, CardContent } from "@voyantjs/ui/components/card";
 import { Skeleton } from "@voyantjs/ui/components/skeleton";
+import { formatMessage, useBookingsUiMessagesOrDefault } from "../../i18n/index.js";
 /**
  * Right-rail summary panel. Shows what's being booked, an
  * accordion-per-step recap of the user's input, and the live
@@ -11,72 +12,87 @@ import { Skeleton } from "@voyantjs/ui/components/skeleton";
  * they've filled in elsewhere.
  */
 export function PriceSidePanel({ pricing, isQuoting, invalidReason, entitySummary, currentStep, steps, draft, className, }) {
-    return (_jsxs(Card, { className: className, children: [entitySummary ? _jsx(EntityHeader, { summary: entitySummary }) : null, _jsxs(CardContent, { className: "space-y-4", children: [steps && steps.length > 0 && currentStep && draft ? (_jsx(StepRecap, { steps: steps, currentStep: currentStep, draft: draft })) : null, isQuoting && !pricing ? (_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-4 w-24" }), _jsx(Skeleton, { className: "h-4 w-32" }), _jsx(Skeleton, { className: "h-4 w-20" })] })) : null, invalidReason ? _jsx("p", { className: "text-destructive text-sm", children: invalidReason }) : null, pricing ? (_jsxs("div", { className: "space-y-2 border-t pt-4", children: [_jsx("ul", { className: "space-y-1 text-sm", children: pricing.lines.map((line) => (_jsxs("li", { className: "flex justify-between", children: [_jsxs("span", { children: [line.label, line.quantity ? (_jsxs("span", { className: "text-muted-foreground", children: [" \u00D7 ", line.quantity] })) : null] }), _jsx("span", { children: formatMoney(line.totalAmount, pricing.currency) })] }, `${line.kind}-${line.label}-${line.totalAmount}`))) }), pricing.taxes.length > 0 ? (_jsx("ul", { className: "space-y-1 border-t pt-2 text-sm text-muted-foreground", children: pricing.taxes.map((tax) => (_jsxs("li", { className: "flex justify-between", children: [_jsx("span", { children: tax.label }), _jsx("span", { children: formatMoney(tax.amount, pricing.currency) })] }, tax.code))) })) : null, _jsxs("div", { className: "flex justify-between border-t pt-2 font-medium", children: [_jsx("span", { children: "Total" }), _jsx("span", { children: formatMoney(pricing.total, pricing.currency) })] })] })) : null] })] }));
+    const messages = useBookingsUiMessagesOrDefault();
+    return (_jsxs(Card, { className: className, children: [entitySummary ? _jsx(EntityHeader, { summary: entitySummary }) : null, _jsxs(CardContent, { className: "space-y-4", children: [steps && steps.length > 0 && currentStep && draft ? (_jsx(StepRecap, { steps: steps, currentStep: currentStep, draft: draft })) : null, isQuoting && !pricing ? (_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-4 w-24" }), _jsx(Skeleton, { className: "h-4 w-32" }), _jsx(Skeleton, { className: "h-4 w-20" })] })) : null, invalidReason ? _jsx("p", { className: "text-destructive text-sm", children: invalidReason }) : null, pricing ? (_jsxs("div", { className: "space-y-2 border-t pt-4", children: [_jsx("ul", { className: "space-y-1 text-sm", children: pricing.lines.map((line) => (_jsxs("li", { className: "flex justify-between", children: [_jsxs("span", { children: [line.label, line.quantity ? (_jsxs("span", { className: "text-muted-foreground", children: [" \u00D7 ", line.quantity] })) : null] }), _jsx("span", { children: formatMoney(line.totalAmount, pricing.currency) })] }, `${line.kind}-${line.label}-${line.totalAmount}`))) }), pricing.taxes.length > 0 ? (_jsx("ul", { className: "space-y-1 border-t pt-2 text-sm text-muted-foreground", children: pricing.taxes.map((tax) => (_jsxs("li", { className: "flex justify-between", children: [_jsx("span", { children: tax.label }), _jsx("span", { children: formatMoney(tax.amount, pricing.currency) })] }, tax.code))) })) : null, _jsxs("div", { className: "flex justify-between border-t pt-2 font-medium", children: [_jsx("span", { children: messages.bookingJourney.sidePanel.total }), _jsx("span", { children: formatMoney(pricing.total, pricing.currency) })] })] })) : null] })] }));
 }
 function EntityHeader({ summary }) {
-    return (_jsxs("div", { className: "overflow-hidden rounded-t-xl", children: [summary.heroImageUrl ? (_jsx("img", { src: summary.heroImageUrl, alt: summary.name, className: "aspect-video w-full object-cover" })) : null, _jsxs("div", { className: "space-y-1 px-6 pt-4 pb-2", children: [_jsx("div", { className: "text-muted-foreground text-xs uppercase tracking-wide", children: "You're booking" }), _jsx("div", { className: "font-semibold leading-tight", children: summary.name }), summary.subtitle ? (_jsx("div", { className: "text-muted-foreground text-sm", children: summary.subtitle })) : null, summary.whenLabel || summary.locationLabel ? (_jsx("div", { className: "text-muted-foreground text-xs", children: [summary.whenLabel, summary.locationLabel].filter(Boolean).join(" · ") })) : null] })] }));
+    const messages = useBookingsUiMessagesOrDefault();
+    return (_jsxs("div", { className: "overflow-hidden rounded-t-xl", children: [summary.heroImageUrl ? (_jsx("img", { src: summary.heroImageUrl, alt: summary.name, className: "aspect-video w-full object-cover" })) : null, _jsxs("div", { className: "space-y-1 px-6 pt-4 pb-2", children: [_jsx("div", { className: "text-muted-foreground text-xs uppercase tracking-wide", children: messages.bookingJourney.sidePanel.youAreBooking }), _jsx("div", { className: "font-semibold leading-tight", children: summary.name }), summary.subtitle ? (_jsx("div", { className: "text-muted-foreground text-sm", children: summary.subtitle })) : null, summary.whenLabel || summary.locationLabel ? (_jsx("div", { className: "text-muted-foreground text-xs", children: [summary.whenLabel, summary.locationLabel].filter(Boolean).join(" · ") })) : null] })] }));
 }
 function StepRecap({ steps, currentStep, draft, }) {
+    const messages = useBookingsUiMessagesOrDefault();
     if (!draft)
         return null;
     // Default-open the current step. Uncontrolled — users can toggle
     // freely. Re-mounts when currentStep changes (key) so the
     // newly-active step opens automatically as the user advances.
-    return (_jsx(Accordion, { defaultValue: [currentStep], multiple: true, children: steps.map((step) => (_jsxs(AccordionItem, { value: step, children: [_jsx(AccordionTrigger, { className: "py-3", children: _jsxs("div", { className: "flex flex-1 flex-col text-left", children: [_jsx("span", { className: step === currentStep ? "font-semibold" : "text-muted-foreground font-medium", children: STEP_LABELS[step] }), _jsx(StepSummaryLine, { step: step, draft: draft })] }) }), _jsx(AccordionContent, { children: _jsx(StepDetails, { step: step, draft: draft }) })] }, step))) }, currentStep));
+    return (_jsx(Accordion, { defaultValue: [currentStep], multiple: true, children: steps.map((step) => (_jsxs(AccordionItem, { value: step, children: [_jsx(AccordionTrigger, { className: "py-3", children: _jsxs("div", { className: "flex flex-1 flex-col text-left", children: [_jsx("span", { className: step === currentStep ? "font-semibold" : "text-muted-foreground font-medium", children: stepLabel(step, messages) }), _jsx(StepSummaryLine, { step: step, draft: draft })] }) }), _jsx(AccordionContent, { children: _jsx(StepDetails, { step: step, draft: draft }) })] }, step))) }, currentStep));
 }
 function StepSummaryLine({ step, draft, }) {
-    const text = stepHeadline(step, draft);
+    const messages = useBookingsUiMessagesOrDefault();
+    const text = stepHeadline(step, draft, messages);
     if (!text)
         return null;
     return _jsx("span", { className: "text-muted-foreground text-xs", children: text });
 }
-function stepHeadline(step, draft) {
+function stepHeadline(step, draft, messages) {
     switch (step) {
         case "configure": {
             const total = paxTotal(draft);
             const slot = draft.configure?.departureSlotId ?? draft.configure?.departureDate ?? undefined;
             const range = draft.configure?.dateRange;
             const when = range?.checkIn && range?.checkOut ? `${range.checkIn} → ${range.checkOut}` : slot;
-            return when ? `${total} ${total === 1 ? "guest" : "guests"} · ${when}` : `${total} guests`;
+            const guestLabel = total === 1
+                ? messages.bookingJourney.sidePanel.guestSingular
+                : messages.bookingJourney.sidePanel.guestPlural;
+            return when ? `${total} ${guestLabel} · ${when}` : `${total} ${guestLabel}`;
         }
         case "billing": {
             const c = draft.billing.contact;
             const name = [c.firstName, c.lastName].filter(Boolean).join(" ").trim();
-            return name || c.email || "Not set";
+            return name || c.email || messages.bookingJourney.values.notSet;
         }
         case "travelers": {
             const filled = draft.travelers.filter((t) => t.firstName && t.lastName).length;
-            return `${filled} of ${draft.travelers.length} filled`;
+            return formatMessage(messages.bookingJourney.sidePanel.filledOf, {
+                filled,
+                total: draft.travelers.length,
+            });
         }
         case "accommodation": {
             const rooms = draft.accommodation?.rooms ?? [];
             if (rooms.length === 0)
                 return "";
-            return `${rooms.length} room${rooms.length === 1 ? "" : "s"}`;
+            return `${rooms.length} ${rooms.length === 1
+                ? messages.bookingJourney.sidePanel.roomSingular
+                : messages.bookingJourney.sidePanel.roomPlural}`;
         }
         case "addons": {
             const addons = draft.addons ?? [];
             if (addons.length === 0)
-                return "None";
-            return `${addons.length} add-on${addons.length === 1 ? "" : "s"}`;
+                return messages.bookingJourney.values.none;
+            return `${addons.length} ${addons.length === 1
+                ? messages.bookingJourney.sidePanel.addOnSingular
+                : messages.bookingJourney.sidePanel.addOnPlural}`;
         }
         case "payment": {
             const intent = draft.payment.intent;
             if (intent === "card")
-                return "Card";
+                return messages.bookingJourney.sidePanel.card;
             if (intent === "hold")
-                return "Hold";
+                return messages.bookingJourney.sidePanel.hold;
             if (intent === "ticket_on_credit")
-                return "On credit";
+                return messages.bookingJourney.sidePanel.onCredit;
             return "";
         }
         case "review":
-            return "Confirm and book";
+            return messages.bookingJourney.sidePanel.confirmAndBook;
         default:
             return "";
     }
 }
 function StepDetails({ step, draft, }) {
+    const messages = useBookingsUiMessagesOrDefault();
     switch (step) {
         case "configure":
             return _jsx(ConfigureDetails, { draft: draft });
@@ -91,25 +107,31 @@ function StepDetails({ step, draft, }) {
         case "payment":
             return _jsx(PaymentDetails, { draft: draft });
         case "review":
-            return (_jsx("p", { className: "text-muted-foreground text-xs", children: "Review your details and confirm to book." }));
+            return (_jsx("p", { className: "text-muted-foreground text-xs", children: messages.bookingJourney.sidePanel.reviewDetails }));
         default:
             return null;
     }
 }
 function ConfigureDetails({ draft, }) {
+    const messages = useBookingsUiMessagesOrDefault();
     const cfg = draft.configure ?? {};
     const range = cfg.dateRange;
-    return (_jsxs("dl", { className: "space-y-1 text-xs", children: [_jsx(Row, { label: "Adults", value: String(cfg.pax?.adult ?? 0) }), (cfg.pax?.child ?? 0) > 0 ? _jsx(Row, { label: "Children", value: String(cfg.pax.child) }) : null, (cfg.pax?.infant ?? 0) > 0 ? _jsx(Row, { label: "Infants", value: String(cfg.pax.infant) }) : null, cfg.departureSlotId ? _jsx(Row, { label: "Departure", value: cfg.departureSlotId }) : null, cfg.departureDate ? _jsx(Row, { label: "Date", value: cfg.departureDate }) : null, range?.checkIn ? _jsx(Row, { label: "Check-in", value: range.checkIn }) : null, range?.checkOut ? _jsx(Row, { label: "Check-out", value: range.checkOut }) : null, cfg.cabinCategoryId ? _jsx(Row, { label: "Cabin", value: cfg.cabinCategoryId }) : null] }));
+    return (_jsxs("dl", { className: "space-y-1 text-xs", children: [_jsx(Row, { label: messages.bookingJourney.sidePanel.adults, value: String(cfg.pax?.adult ?? 0) }), (cfg.pax?.child ?? 0) > 0 ? (_jsx(Row, { label: messages.bookingJourney.sidePanel.children, value: String(cfg.pax.child) })) : null, (cfg.pax?.infant ?? 0) > 0 ? (_jsx(Row, { label: messages.bookingJourney.sidePanel.infants, value: String(cfg.pax.infant) })) : null, cfg.departureSlotId ? (_jsx(Row, { label: messages.bookingJourney.sidePanel.departure, value: cfg.departureSlotId })) : null, cfg.departureDate ? (_jsx(Row, { label: messages.bookingJourney.sidePanel.date, value: cfg.departureDate })) : null, range?.checkIn ? (_jsx(Row, { label: messages.bookingJourney.sidePanel.checkIn, value: range.checkIn })) : null, range?.checkOut ? (_jsx(Row, { label: messages.bookingJourney.sidePanel.checkOut, value: range.checkOut })) : null, cfg.cabinCategoryId ? (_jsx(Row, { label: messages.bookingJourney.sidePanel.cabin, value: cfg.cabinCategoryId })) : null] }));
 }
 function BillingDetails({ draft, }) {
+    const messages = useBookingsUiMessagesOrDefault();
     const c = draft.billing.contact;
     const a = draft.billing.address;
     const addressLine = [a.line1, a.line2, a.city, a.postal, a.country].filter(Boolean).join(", ");
-    return (_jsxs("dl", { className: "space-y-1 text-xs", children: [_jsx(Row, { label: "Name", value: [c.firstName, c.lastName].filter(Boolean).join(" ") || "—" }), _jsx(Row, { label: "Email", value: c.email || "—" }), c.phone ? _jsx(Row, { label: "Phone", value: c.phone }) : null, _jsx(Row, { label: "Buyer", value: draft.billing.buyerType === "B2B" ? "Company" : "Individual" }), draft.billing.company?.name ? (_jsx(Row, { label: "Company", value: draft.billing.company.name })) : null, draft.billing.company?.vatId ? (_jsx(Row, { label: "VAT", value: draft.billing.company.vatId })) : null, addressLine ? _jsx(Row, { label: "Address", value: addressLine }) : null] }));
+    return (_jsxs("dl", { className: "space-y-1 text-xs", children: [_jsx(Row, { label: messages.bookingJourney.sidePanel.name, value: [c.firstName, c.lastName].filter(Boolean).join(" ") ||
+                    messages.bookingJourney.values.noValue }), _jsx(Row, { label: messages.bookingJourney.sidePanel.email, value: c.email || messages.bookingJourney.values.noValue }), c.phone ? _jsx(Row, { label: messages.bookingJourney.sidePanel.phone, value: c.phone }) : null, _jsx(Row, { label: messages.bookingJourney.sidePanel.buyer, value: draft.billing.buyerType === "B2B"
+                    ? messages.bookingJourney.sidePanel.company
+                    : messages.bookingJourney.sidePanel.individual }), draft.billing.company?.name ? (_jsx(Row, { label: messages.bookingJourney.sidePanel.company, value: draft.billing.company.name })) : null, draft.billing.company?.vatId ? (_jsx(Row, { label: messages.bookingJourney.sidePanel.vat, value: draft.billing.company.vatId })) : null, addressLine ? (_jsx(Row, { label: messages.bookingJourney.sidePanel.address, value: addressLine })) : null] }));
 }
 function TravelersDetails({ draft, }) {
+    const messages = useBookingsUiMessagesOrDefault();
     if (draft.travelers.length === 0) {
-        return _jsx("p", { className: "text-muted-foreground text-xs", children: "No travelers yet." });
+        return (_jsx("p", { className: "text-muted-foreground text-xs", children: messages.bookingJourney.sidePanel.noTravelersYet }));
     }
     return (_jsx("ul", { className: "space-y-3 text-xs", children: draft.travelers.map((t, i) => {
             const key = t.rowId ?? `t-${i}`;
@@ -120,44 +142,45 @@ function TravelersDetails({ draft, }) {
             const docLine = [docType, docNum, docExpiry ? `exp ${docExpiry}` : null]
                 .filter(Boolean)
                 .join(" · ");
-            return (_jsxs("li", { className: "space-y-0.5", children: [_jsxs("div", { className: "flex justify-between gap-2", children: [_jsxs("span", { className: "text-muted-foreground", children: ["Traveler ", i + 1] }), _jsx("span", { className: "truncate font-medium", children: name || "—" })] }), t.email ? _jsx("div", { className: "text-muted-foreground truncate", children: t.email }) : null, t.phone ? _jsx("div", { className: "text-muted-foreground", children: t.phone }) : null, t.dateOfBirth ? (_jsxs("div", { className: "text-muted-foreground", children: ["DOB ", t.dateOfBirth] })) : null, docLine ? _jsx("div", { className: "text-muted-foreground", children: docLine }) : null] }, key));
+            return (_jsxs("li", { className: "space-y-0.5", children: [_jsxs("div", { className: "flex justify-between gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: formatMessage(messages.bookingJourney.sidePanel.travelerNumber, {
+                                    number: i + 1,
+                                }) }), _jsx("span", { className: "truncate font-medium", children: name || messages.bookingJourney.values.noValue })] }), t.email ? _jsx("div", { className: "text-muted-foreground truncate", children: t.email }) : null, t.phone ? _jsx("div", { className: "text-muted-foreground", children: t.phone }) : null, t.dateOfBirth ? (_jsxs("div", { className: "text-muted-foreground", children: [messages.bookingJourney.sidePanel.dob, " ", t.dateOfBirth] })) : null, docLine ? _jsx("div", { className: "text-muted-foreground", children: docLine }) : null] }, key));
         }) }));
 }
 function AccommodationDetails({ draft, }) {
+    const messages = useBookingsUiMessagesOrDefault();
     const rooms = draft.accommodation?.rooms ?? [];
     if (rooms.length === 0) {
-        return _jsx("p", { className: "text-muted-foreground text-xs", children: "Not selected." });
+        return (_jsx("p", { className: "text-muted-foreground text-xs", children: messages.bookingJourney.sidePanel.notSelected }));
     }
     return (_jsx("ul", { className: "space-y-1 text-xs", children: rooms.map((r) => (_jsxs("li", { className: "flex justify-between gap-2", children: [_jsx("span", { className: "truncate", children: r.optionUnitId }), _jsxs("span", { className: "text-muted-foreground", children: ["\u00D7 ", r.quantity, r.ratePlanId ? ` · ${r.ratePlanId}` : ""] })] }, `${r.optionUnitId}-${r.ratePlanId ?? ""}-${r.quantity}`))) }));
 }
 function AddonsDetails({ draft, }) {
+    const messages = useBookingsUiMessagesOrDefault();
     const addons = draft.addons ?? [];
     if (addons.length === 0) {
-        return _jsx("p", { className: "text-muted-foreground text-xs", children: "No add-ons selected." });
+        return (_jsx("p", { className: "text-muted-foreground text-xs", children: messages.bookingJourney.sidePanel.noAddonsSelected }));
     }
     return (_jsx("ul", { className: "space-y-1 text-xs", children: addons.map((a) => (_jsxs("li", { className: "flex justify-between gap-2", children: [_jsx("span", { className: "truncate", children: a.extraId }), _jsxs("span", { className: "text-muted-foreground", children: ["\u00D7 ", a.quantity] })] }, `${a.extraId}-${a.quantity}`))) }));
 }
 function PaymentDetails({ draft, }) {
+    const messages = useBookingsUiMessagesOrDefault();
     const intent = draft.payment.intent;
     const label = intent === "card"
-        ? "Pay by card"
+        ? messages.bookingJourney.sidePanel.payByCard
         : intent === "ticket_on_credit"
-            ? "Ticket on credit"
-            : "Hold (no charge yet)";
-    return (_jsxs("dl", { className: "space-y-1 text-xs", children: [_jsx(Row, { label: "Method", value: label }), draft.payment.schedule ? (_jsx(Row, { label: "Schedule", value: String(draft.payment.schedule) })) : null] }));
+            ? messages.bookingJourney.sidePanel.ticketOnCredit
+            : messages.bookingJourney.sidePanel.holdNoChargeYet;
+    return (_jsxs("dl", { className: "space-y-1 text-xs", children: [_jsx(Row, { label: messages.bookingJourney.sidePanel.method, value: label }), draft.payment.schedule ? (_jsx(Row, { label: messages.bookingJourney.sidePanel.schedule, value: String(draft.payment.schedule) })) : null] }));
 }
 function Row({ label, value }) {
     return (_jsxs("div", { className: "flex justify-between gap-2", children: [_jsx("dt", { className: "text-muted-foreground", children: label }), _jsx("dd", { className: "truncate text-right", children: value })] }));
 }
-const STEP_LABELS = {
-    configure: "Configure",
-    billing: "Billing & contact",
-    travelers: "Travelers",
-    accommodation: "Accommodation",
-    addons: "Add-ons",
-    payment: "Payment",
-    review: "Review",
-};
+function stepLabel(step, messages) {
+    if (step === "billing")
+        return messages.bookingJourney.steps.billingAndContact;
+    return messages.bookingJourney.steps[step];
+}
 function paxTotal(draft) {
     const pax = draft.configure?.pax ?? {};
     return (pax.adult ?? 0) + (pax.child ?? 0) + (pax.infant ?? 0);

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

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

package/dist/journey/components/step-header.js

@@ -1,28 +1,12 @@
 "use client";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Button } from "@voyantjs/ui/components/button";
+import { useBookingsUiMessagesOrDefault } from "../../i18n/index.js";
 export function StepHeader({ current, visited, steps, onJumpTo, }) {
+    const messages = useBookingsUiMessagesOrDefault();
     return (_jsx("ol", { className: "flex flex-wrap gap-2", children: steps.map((step, idx) => {
             const isCurrent = step === current;
             const isVisited = visited.includes(step);
-            return (_jsx("li", { children: _jsxs(Button, { type: "button", variant: isCurrent ? "default" : isVisited ? "outline" : "ghost", size: "sm", disabled: !isVisited && !isCurrent, onClick: () => onJumpTo(step), children: [_jsxs("span", { className: "mr-1 font-mono text-xs", children: [idx + 1, "."] }), labelForStep(step)] }) }, step));
+            return (_jsx("li", { children: _jsxs(Button, { type: "button", variant: isCurrent ? "default" : isVisited ? "outline" : "ghost", size: "sm", disabled: !isVisited && !isCurrent, onClick: () => onJumpTo(step), children: [_jsxs("span", { className: "mr-1 font-mono text-xs", children: [idx + 1, "."] }), messages.bookingJourney.steps[step]] }) }, step));
         }) }));
 }
-function labelForStep(step) {
-    switch (step) {
-        case "configure":
-            return "Configure";
-        case "billing":
-            return "Billing";
-        case "travelers":
-            return "Travelers";
-        case "accommodation":
-            return "Accommodation";
-        case "addons":
-            return "Add-ons";
-        case "payment":
-            return "Payment";
-        case "review":
-            return "Review";
-    }
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@voyantjs/bookings-ui",
-  "version": "0.35.0",
+  "version": "0.37.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -51,18 +51,20 @@
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.60.0",
     "zod": "^4.3.6",
-    "@voyantjs/availability-react": "0.35.0",
-    "@voyantjs/bookings-react": "0.35.0",
-    "@voyantjs/catalog": "0.35.0",
-    "@voyantjs/catalog-react": "0.35.0",
-    "@voyantjs/crm-react": "0.35.0",
-    "@voyantjs/finance-react": "0.35.0",
-    "@voyantjs/legal-react": "0.35.0",
-    "@voyantjs/products-react": "0.35.0",
-    "@voyantjs/ui": "0.35.0"
+    "@voyantjs/availability-react": "0.37.1",
+    "@voyantjs/bookings-react": "0.37.1",
+    "@voyantjs/catalog": "0.37.1",
+    "@voyantjs/catalog-react": "0.37.1",
+    "@voyantjs/crm-react": "0.37.1",
+    "@voyantjs/crm-ui": "0.37.1",
+    "@voyantjs/finance-react": "0.37.1",
+    "@voyantjs/legal-react": "0.37.1",
+    "@voyantjs/products-react": "0.37.1",
+    "@voyantjs/suppliers-react": "0.37.1",
+    "@voyantjs/ui": "0.37.1"
   },
   "dependencies": {
-    "@voyantjs/i18n": "0.35.0"
+    "@voyantjs/i18n": "0.37.1"
   },
   "devDependencies": {
     "@tanstack/react-query": "^5.96.2",
@@ -75,16 +77,18 @@
     "typescript": "^6.0.2",
     "vitest": "^4.1.2",
     "zod": "^4.3.6",
-    "@voyantjs/availability-react": "0.35.0",
-    "@voyantjs/bookings-react": "0.35.0",
-    "@voyantjs/catalog": "0.35.0",
-    "@voyantjs/catalog-react": "0.35.0",
-    "@voyantjs/crm-react": "0.35.0",
-    "@voyantjs/finance-react": "0.35.0",
-    "@voyantjs/legal-react": "0.35.0",
-    "@voyantjs/products-react": "0.35.0",
+    "@voyantjs/availability-react": "0.37.1",
+    "@voyantjs/bookings-react": "0.37.1",
+    "@voyantjs/catalog": "0.37.1",
+    "@voyantjs/catalog-react": "0.37.1",
+    "@voyantjs/crm-react": "0.37.1",
+    "@voyantjs/crm-ui": "0.37.1",
+    "@voyantjs/finance-react": "0.37.1",
+    "@voyantjs/legal-react": "0.37.1",
+    "@voyantjs/products-react": "0.37.1",
+    "@voyantjs/suppliers-react": "0.37.1",
     "@voyantjs/voyant-typescript-config": "0.1.0",
-    "@voyantjs/ui": "0.35.0"
+    "@voyantjs/ui": "0.37.1"
   },
   "files": [
     "dist",