@planetaexo/design-system 0.17.0 → 0.19.0

package/dist/index.cjs

@@ -1476,7 +1476,9 @@ function OfferSidebar({
   onBook,
   bookLabel,
   bookDisabled,
-  labels
+  labels,
+  bookHref,
+  bookHrefLabel
 }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
@@ -1485,7 +1487,18 @@ function OfferSidebar({
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs uppercase tracking-widest text-muted-foreground font-heading mb-1", children: (_a = labels == null ? void 0 : labels.bookingTotal) != null ? _a : "Booking Total" }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-3xl font-black text-primary font-heading leading-none", children: total })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
+      bookHref ? /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href: bookHref,
+          className: cn(
+            "w-full inline-flex items-center justify-center rounded-full bg-primary py-3 text-sm font-bold tracking-wide uppercase",
+            "text-primary-foreground font-heading transition-colors hover:bg-primary/90",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          ),
+          children: bookHrefLabel != null ? bookHrefLabel : bookLabel
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           type: "button",
@@ -1930,19 +1943,37 @@ function BookingConfirmedCard({
   email,
   message,
   onBack,
-  backLabel = "Back to offer"
+  backLabel = "Back to offer",
+  bookingNumber,
+  bookingNumberLabel = "Your booking number is:",
+  viewBookingHref,
+  viewBookingLabel = "VIEW BOOKING"
 }) {
+  const hasBookingNumber = bookingNumber !== void 0 && bookingNumber !== null && bookingNumber !== "";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-2xl border border-border bg-card p-8 flex flex-col items-center gap-6 text-center", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-20 w-20 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2Icon, { className: "w-10 h-10 text-primary" }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
       /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-black text-foreground font-heading", children: title }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-muted-foreground font-sans max-w-sm mx-auto leading-relaxed", children: message != null ? message : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      hasBookingNumber && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-foreground font-sans", children: [
+        bookingNumberLabel,
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold text-foreground font-heading", children: bookingNumber })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground font-sans max-w-sm mx-auto leading-relaxed", children: message != null ? message : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         "A confirmation email has been sent to",
         " ",
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-foreground", children: email || "your email" }),
         ". Our team will be in touch shortly."
       ] }) })
     ] }),
+    viewBookingHref && /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        href: viewBookingHref,
+        className: "rounded-full bg-primary px-6 py-3 text-sm font-bold tracking-wide uppercase text-primary-foreground font-heading transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        children: viewBookingLabel
+      }
+    ),
     onBack && /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
@@ -2224,11 +2255,12 @@ function Offer({
   summaryDiscountLine,
   continueDisabled,
   labels,
+  confirmedState,
   className
 }) {
-  var _a, _b;
+  var _a, _b, _c;
   const [showBooking, setShowBooking] = React23__namespace.useState(false);
-  const isShowingCheckout = !!checkoutSlot || showBooking;
+  const isShowingCheckout = !confirmedState && (!!checkoutSlot || showBooking);
   const handleBook = () => {
     if (!checkoutSlot && !externalBookingFlow) setShowBooking(true);
     onContinue == null ? void 0 : onContinue();
@@ -2238,11 +2270,25 @@ function Offer({
     /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-black text-foreground font-heading leading-tight", children: title }),
     subtitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground font-sans space-y-1 leading-relaxed", children: subtitle }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-[1fr_280px] gap-6 lg:gap-8 items-start", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-6", children: confirmedState ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          BookingConfirmedCard,
+          {
+            title: (_a = confirmedState.title) != null ? _a : labels == null ? void 0 : labels.bookingConfirmed,
+            email: confirmedState.email,
+            message: confirmedState.message,
+            bookingNumber: confirmedState.bookingNumber,
+            bookingNumberLabel: confirmedState.bookingNumberLabel,
+            viewBookingHref: confirmedState.viewBookingHref,
+            viewBookingLabel: confirmedState.viewBookingLabel
+          }
+        ),
+        confirmedState.belowSlot
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "flex flex-col gap-5", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MapIcon, { className: "w-5 h-5 text-primary shrink-0" }),
-            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "font-bold text-foreground font-heading text-base", children: (_a = labels == null ? void 0 : labels.includedAdventures) != null ? _a : "Included Adventures" })
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "font-bold text-foreground font-heading text-base", children: (_b = labels == null ? void 0 : labels.includedAdventures) != null ? _b : "Included Adventures" })
           ] }),
           adventures.map((adventure) => /* @__PURE__ */ jsxRuntime.jsx(AdventureCard, { adventure, labels }, adventure.id))
         ] }),
@@ -2271,7 +2317,7 @@ function Offer({
             labels
           }
         ))
-      ] }),
+      ] }) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:sticky lg:top-8", children: /* @__PURE__ */ jsxRuntime.jsx(
         OfferSidebar,
         {
@@ -2280,13 +2326,15 @@ function Offer({
           onBook: handleBook,
           bookLabel: continueLabel,
           bookDisabled: continueDisabled,
-          labels
+          labels,
+          bookHref: confirmedState == null ? void 0 : confirmedState.viewBookingHref,
+          bookHrefLabel: confirmedState == null ? void 0 : confirmedState.viewBookingLabel
         }
       ) })
     ] }),
-    !isShowingCheckout && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed bottom-0 inset-x-0 z-40 border-t border-border bg-background/95 backdrop-blur-sm px-4 py-3 lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-4 max-w-5xl mx-auto", children: [
+    !isShowingCheckout && !confirmedState && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed bottom-0 inset-x-0 z-40 border-t border-border bg-background/95 backdrop-blur-sm px-4 py-3 lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-4 max-w-5xl mx-auto", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] uppercase tracking-widest text-muted-foreground font-heading", children: (_b = labels == null ? void 0 : labels.total) != null ? _b : "Total" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] uppercase tracking-widest text-muted-foreground font-heading", children: (_c = labels == null ? void 0 : labels.total) != null ? _c : "Total" }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xl font-black text-primary font-heading leading-tight", children: total })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -2294,10 +2342,12 @@ function Offer({
         {
           type: "button",
           onClick: handleBook,
+          disabled: continueDisabled,
           className: cn(
             "rounded-full bg-primary px-6 py-3 text-sm font-bold tracking-wide uppercase",
             "text-primary-foreground font-heading transition-colors hover:bg-primary/90",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            continueDisabled && "opacity-50 pointer-events-none"
           ),
           children: continueLabel
         }
@@ -6066,6 +6116,7 @@ function RegistrationSuccessCard({
   actions,
   logo,
   logoAlt = "PlanetaEXO",
+  showSuccessIcon,
   terms,
   termsLayout = "summary",
   termsLabels,
@@ -6119,7 +6170,7 @@ function RegistrationSuccessCard({
               className: "h-10 w-auto object-contain"
             }
           ),
-          logo === void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex h-14 w-14 items-center justify-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheckIcon, { size: 28 }) }),
+          (showSuccessIcon != null ? showSuccessIcon : logo === void 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex h-14 w-14 items-center justify-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheckIcon, { size: 28 }) }),
           /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-black uppercase tracking-wide text-foreground font-heading leading-tight", children: title }),
           message && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground font-ui", children: message })
         ] }),