@planetaexo/design-system 0.3.3 → 0.3.4

package/dist/index.cjs

@@ -1556,6 +1556,103 @@ function BookingShell({
     ] })
   ] });
 }
+function PaymentAmountSelector({
+  title = "What do you want to pay now?",
+  depositLabel,
+  fullLabel,
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-bold text-foreground font-heading", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2", children: ["deposit", "full"].map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onChange(opt),
+        className: cn(
+          "rounded-lg border-2 px-4 py-3 text-sm text-left font-sans transition-colors",
+          value === opt ? "border-primary bg-primary/5 text-foreground font-semibold" : "border-border bg-background text-muted-foreground hover:border-primary/40"
+        ),
+        children: opt === "deposit" ? depositLabel : fullLabel
+      },
+      opt
+    )) })
+  ] });
+}
+function PaymentMethodSelector({
+  title = "Payment method",
+  methods,
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-border p-4 flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: methods.map((m) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        disabled: m.disabled,
+        onClick: () => !m.disabled && onChange(m.id),
+        className: cn(
+          "flex items-start gap-3 rounded-lg border-2 px-4 py-3 text-left transition-colors",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          value === m.id ? "border-primary bg-primary/5" : "border-border bg-background hover:border-primary/40"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
+                value === m.id ? "border-primary" : "border-border"
+              ),
+              children: value === m.id && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-2 w-2 rounded-full bg-primary" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-col gap-0.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: cn(
+                  "text-sm font-semibold font-sans",
+                  value === m.id ? "text-primary" : "text-foreground"
+                ),
+                children: m.label
+              }
+            ),
+            m.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground font-sans", children: m.description })
+          ] })
+        ]
+      },
+      m.id
+    )) })
+  ] });
+}
+function TermsSection({
+  title = "Terms and conditions",
+  checked,
+  onChange,
+  label,
+  warningMessage
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-border p-4 flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-start gap-2.5 cursor-pointer", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked,
+          onChange: (e) => onChange(e.target.checked),
+          className: "h-4 w-4 shrink-0 mt-0.5 rounded border-border accent-primary cursor-pointer"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-sans text-foreground/80 leading-snug", children: label })
+    ] }),
+    !checked && warningMessage && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-amber-400 flex items-center gap-1", children: warningMessage })
+  ] });
+}
 var WIZARD_STEPS = [
   { id: "responsible", label: "Responsible party details" },
   { id: "travellers", label: "Travellers" },
@@ -1772,70 +1869,33 @@ function BookingWizard({
         ] }),
         step === "payment" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5", children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground font-sans", children: "When you confirm, we will open secure online payment (Stripe). Choose deposit vs full amount below when applicable." }),
-          depositInfo && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-bold text-foreground font-heading", children: "What do you want to pay now?" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2", children: ["deposit", "full"].map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => setPayAmount(opt),
-                className: cn(
-                  "rounded-lg border-2 px-4 py-3 text-sm text-left font-sans transition-colors",
-                  payAmount === opt ? "border-primary bg-primary/5 text-foreground font-semibold" : "border-border bg-background text-muted-foreground hover:border-primary/40"
-                ),
-                children: opt === "deposit" ? depositLabel : fullLabel
-              },
-              opt
-            )) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-border p-4 flex flex-col gap-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "$" }),
-              " Payment method"
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: [
-              { id: "stripe", label: "Credit / Debit card", sub: "Secure payment via Stripe" },
-              { id: "pix", label: "PIX", sub: "Instant transfer \u2014 Brazil only" },
-              { id: "bank", label: "Bank transfer", sub: "Wire / TED / DOC" }
-            ].map((m) => /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
-              {
-                type: "button",
-                onClick: () => setPayMethod(m.id),
-                className: cn(
-                  "flex items-start gap-3 rounded-lg border-2 px-4 py-3 text-left transition-colors",
-                  payMethod === m.id ? "border-primary bg-primary/5" : "border-border bg-background hover:border-primary/40"
-                ),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
-                    "mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
-                    payMethod === m.id ? "border-primary" : "border-border"
-                  ), children: payMethod === m.id && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-2 w-2 rounded-full bg-primary" }) }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-col gap-0.5", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
-                      "text-sm font-semibold font-sans",
-                      payMethod === m.id ? "text-primary" : "text-foreground"
-                    ), children: m.label }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground font-sans", children: m.sub })
-                  ] })
-                ]
-              },
-              m.id
-            )) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-border p-4 flex flex-col gap-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest", children: "Terms and conditions" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-start gap-2.5 cursor-pointer", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
-                {
-                  type: "checkbox",
-                  checked: termsAccepted,
-                  onChange: (e) => setTermsAccepted(e.target.checked),
-                  className: "h-4 w-4 shrink-0 mt-0.5 rounded border-border accent-primary cursor-pointer"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-sans text-foreground/80 leading-snug", children: [
+          depositInfo && /* @__PURE__ */ jsxRuntime.jsx(
+            PaymentAmountSelector,
+            {
+              depositLabel,
+              fullLabel,
+              value: payAmount,
+              onChange: setPayAmount
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            PaymentMethodSelector,
+            {
+              methods: [
+                { id: "stripe", label: "Credit / Debit card", description: "Secure payment via Stripe" },
+                { id: "pix", label: "PIX", description: "Instant transfer \u2014 Brazil only" },
+                { id: "bank", label: "Bank transfer", description: "Wire / TED / DOC" }
+              ],
+              value: payMethod,
+              onChange: (v) => setPayMethod(v)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TermsSection,
+            {
+              checked: termsAccepted,
+              onChange: setTermsAccepted,
+              label: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                 "I have read and accept the",
                 " ",
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -1850,8 +1910,8 @@ function BookingWizard({
                 " ",
                 "of the reservation."
               ] })
-            ] })
-          ] }),
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: termsModalOpen, onOpenChange: setTermsModalOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "!max-w-[80vw] w-[80vw] max-h-[85vh] overflow-y-auto", children: [
             /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "font-heading text-xl", children: "Terms and Conditions" }) }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 text-sm font-sans text-foreground/80 leading-relaxed", children: [
@@ -6746,10 +6806,13 @@ exports.LeadCapturePopup = LeadCapturePopup;
 exports.MenuTrip = MenuTrip;
 exports.Offer = Offer;
 exports.OfferAdventureCard = OfferAdventureCard;
+exports.PaymentAmountSelector = PaymentAmountSelector;
+exports.PaymentMethodSelector = PaymentMethodSelector;
 exports.PhoneCountrySelect = PhoneCountrySelect;
 exports.PhotoGallery = PhotoGallery;
 exports.PricingTrip = PricingTrip;
 exports.SiteHeader = SiteHeader;
+exports.TermsSection = TermsSection;
 exports.ThemeToggle = ThemeToggle;
 exports.TripCard = TripCard;
 exports.TripHeader = TripHeader;