@planetaexo/design-system 0.3.13 → 0.3.15

package/dist/index.cjs

@@ -1707,13 +1707,71 @@ function PaymentMethodSelector({
     )) })
   ] });
 }
+var TERMS_I18N = {
+  en: {
+    before: "I have read and accept the ",
+    link: "terms and conditions",
+    after: " of the reservation.",
+    modalTitle: "Terms and Conditions",
+    closeLabel: "Close"
+  },
+  pt: {
+    before: "Li e aceito os ",
+    link: "termos e condi\xE7\xF5es",
+    after: " da reserva.",
+    modalTitle: "Termos e Condi\xE7\xF5es",
+    closeLabel: "Fechar"
+  },
+  fr: {
+    before: "J'ai lu et j'accepte les ",
+    link: "conditions g\xE9n\xE9rales",
+    after: " de la r\xE9servation.",
+    modalTitle: "Conditions G\xE9n\xE9rales",
+    closeLabel: "Fermer"
+  },
+  de: {
+    before: "Ich habe die ",
+    link: "Allgemeinen Gesch\xE4ftsbedingungen",
+    after: " gelesen und akzeptiere sie.",
+    modalTitle: "Allgemeine Gesch\xE4ftsbedingungen",
+    closeLabel: "Schlie\xDFen"
+  }
+};
+var TERMS_CONTENT = [
+  {
+    body: "These Terms and Conditions govern your booking with PlanetaEXO. By making a reservation, you agree to the following terms. Please read them carefully before confirming your booking."
+  },
+  {
+    heading: "1. Bookings and payments",
+    body: "A booking is confirmed only upon receipt of the required deposit or full payment as specified in your proposal. Prices are quoted in the currency indicated in your proposal. Full payment is due prior to departure on the date stipulated in your booking confirmation. PlanetaEXO reserves the right to cancel unconfirmed reservations and is not responsible for exchange rate fluctuations after payment is received."
+  },
+  {
+    heading: "2. Cancellation policy",
+    body: "All cancellations must be submitted in writing. The following fees apply: more than 30 days before departure \u2014 loss of deposit; 15\u201330 days before departure \u2014 50% of the total cost; fewer than 15 days before departure \u2014 100% of the total cost. Cases involving force majeure or documented medical emergencies will be evaluated individually."
+  },
+  {
+    heading: "3. Changes and modifications",
+    body: "PlanetaEXO reserves the right to modify itineraries, accommodations, or activities for reasons of safety, weather conditions, force majeure, or other circumstances beyond our control. You will be notified of any significant changes as promptly as possible. Minor adjustments do not entitle the traveller to a refund or compensation."
+  },
+  {
+    heading: "4. Travel insurance",
+    body: "We strongly recommend that all travellers obtain comprehensive travel insurance covering trip cancellation, medical emergencies, evacuation, and baggage loss prior to departure. PlanetaEXO is not liable for costs or losses that would have been covered by adequate travel insurance."
+  },
+  {
+    heading: "5. Liability",
+    body: "PlanetaEXO's liability is limited to the total amount paid by the client for the services in question. We are not responsible for indirect losses, consequential damages, or service failures caused by third-party providers (airlines, hotels, local operators) or force majeure events. Participation in adventure activities carries inherent risks; travellers acknowledge and accept these risks by confirming their booking."
+  }
+];
 function TermsSection({
   title = "Terms and conditions",
   checked,
   onChange,
-  label,
-  warningMessage
+  warningMessage,
+  locale = "en"
 }) {
+  var _a;
+  const [modalOpen, setModalOpen] = React19__namespace.useState(false);
+  const i18n = (_a = TERMS_I18N[locale]) != null ? _a : TERMS_I18N.en;
   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: [
@@ -1726,9 +1784,67 @@ function TermsSection({
           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 })
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-sans text-foreground/80 leading-snug", children: [
+        i18n.before,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setModalOpen(true),
+            className: "text-primary underline underline-offset-2 hover:text-primary/80 transition-colors",
+            children: i18n.link
+          }
+        ),
+        i18n.after
+      ] })
     ] }),
-    !checked && warningMessage && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-amber-400 flex items-center gap-1", children: warningMessage })
+    !checked && warningMessage && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-amber-400 flex items-center gap-1", children: warningMessage }),
+    /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: modalOpen, onOpenChange: setModalOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { className: "max-w-2xl w-full max-h-[80vh] overflow-y-auto", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(DialogTitle, { className: "font-heading text-xl", children: [
+        i18n.modalTitle,
+        " \u2014 PlanetaEXO"
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 space-y-5 text-sm font-sans text-foreground/80 leading-relaxed", children: TERMS_CONTENT.map((section, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        section.heading && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-bold text-foreground font-heading mb-1", children: section.heading }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { children: section.body })
+      ] }, i)) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6 flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(
+        DialogClose,
+        {
+          className: "px-4 py-2 rounded-lg bg-primary text-white text-sm font-heading font-semibold hover:bg-primary/90 transition-colors",
+          children: i18n.closeLabel
+        }
+      ) })
+    ] }) })
+  ] });
+}
+function BookingConfirmedCard({
+  title = "Booking confirmed!",
+  email,
+  message,
+  onBack,
+  backLabel = "Back to offer"
+}) {
+  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.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: [
+        "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."
+      ] }) })
+    ] }),
+    onBack && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onBack,
+        className: "rounded-full border border-primary px-6 py-2.5 text-sm font-bold text-primary font-heading hover:bg-primary/10 transition-colors",
+        children: backLabel
+      }
+    )
   ] });
 }
 var WIZARD_STEPS = [
@@ -1774,7 +1890,6 @@ function BookingWizard({
   const [payAmount, setPayAmount] = React19__namespace.useState("full");
   const [payMethod, setPayMethod] = React19__namespace.useState("stripe");
   const [termsAccepted, setTermsAccepted] = React19__namespace.useState(false);
-  const [termsModalOpen, setTermsModalOpen] = React19__namespace.useState(false);
   const setR = (k, v) => setResponsible((p) => __spreadProps(__spreadValues({}, p), { [k]: v }));
   const setT = (i, k, v) => setTravellers((prev) => prev.map((t, idx) => idx === i ? __spreadProps(__spreadValues({}, t), { [k]: v }) : t));
   const setTDob = (i, v) => setTravellers((prev) => prev.map((t, idx) => idx === i ? __spreadProps(__spreadValues({}, t), { dateOfBirth: v }) : t));
@@ -1814,34 +1929,7 @@ function BookingWizard({
   const depositLabel = depositInfo ? `Pay deposit (${depositInfo.depositPercent}%) \u2014 ${depositInfo.depositAmount}` : "Pay deposit";
   const fullLabel = `Pay full amount \u2014 ${total}`;
   if (step === "confirmed") {
-    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.jsx("h3", { className: "text-2xl font-black text-foreground font-heading", children: "Booking confirmed!" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-2 text-sm text-muted-foreground font-sans max-w-sm mx-auto leading-relaxed", children: [
-          "A confirmation email has been sent to",
-          " ",
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-foreground", children: responsible.email || "your email" }),
-          ". Our team will be in touch shortly."
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-border bg-muted/30 px-6 py-4 w-full max-w-xs", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground font-sans uppercase tracking-wider", children: "Booking reference" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-lg font-black text-primary font-heading mt-1", children: [
-          "PEX-",
-          Math.random().toString(36).slice(2, 8).toUpperCase()
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: onCancel,
-          className: "rounded-full border border-primary px-6 py-2.5 text-sm font-bold text-primary font-heading hover:bg-primary/10 transition-colors",
-          children: "Back to offer"
-        }
-      )
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsx(BookingConfirmedCard, { email: responsible.email, onBack: onCancel });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
     BookingShell,
@@ -1972,53 +2060,9 @@ function BookingWizard({
             TermsSection,
             {
               checked: termsAccepted,
-              onChange: setTermsAccepted,
-              label: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                "I have read and accept the",
-                " ",
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => setTermsModalOpen(true),
-                    className: "underline underline-offset-2 text-primary hover:text-primary/80 transition-colors font-semibold",
-                    children: "terms and conditions"
-                  }
-                ),
-                " ",
-                "of the reservation."
-              ] })
+              onChange: setTermsAccepted
             }
-          ),
-          /* @__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: [
-              /* @__PURE__ */ jsxRuntime.jsx("p", { children: 'These terms and conditions ("Terms") govern the booking of travel experiences offered through Planeta EXO ("Company"). By confirming a booking, you agree to these Terms in full.' }),
-              /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-bold text-foreground font-heading text-base", children: "1. Bookings and payments" }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { children: "A booking is confirmed upon receipt of the required deposit or full payment. The deposit amount is specified in your offer. The remaining balance must be paid by the balance due date stated in your offer." }),
-              /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-bold text-foreground font-heading text-base", children: "2. Cancellation policy" }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Cancellations made more than 60 days before departure are eligible for a full refund of the deposit. Cancellations between 30 and 60 days forfeit 50% of the deposit. Cancellations within 30 days of departure are non-refundable." }),
-              /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-bold text-foreground font-heading text-base", children: "3. Changes and modifications" }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { children: "The Company reserves the right to modify itineraries due to weather, safety, or operational reasons. Equivalent alternatives will be offered wherever possible." }),
-              /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-bold text-foreground font-heading text-base", children: "4. Travel insurance" }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Comprehensive travel insurance is strongly recommended. The Company is not liable for costs arising from trip interruption, medical emergencies, or personal loss." }),
-              /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-bold text-foreground font-heading text-base", children: "5. Liability" }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Participation in adventure activities carries inherent risk. By booking, you acknowledge and accept these risks. The Company's liability is limited to the total booking amount." }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsxRuntime.jsx(
-                DialogClose,
-                {
-                  render: /* @__PURE__ */ jsxRuntime.jsx(
-                    "button",
-                    {
-                      type: "button",
-                      className: "rounded-full bg-primary px-6 py-2.5 text-sm font-bold text-primary-foreground font-heading hover:bg-primary/90 transition-colors"
-                    }
-                  ),
-                  children: "Close"
-                }
-              ) })
-            ] })
-          ] }) })
+          )
         ] })
       ] })
     }
@@ -7167,6 +7211,7 @@ exports.ActivityCard = ActivityCard;
 exports.Alert = Alert;
 exports.BookingConfirmation = BookingConfirmation;
 exports.BookingConfirmationEmail = BookingConfirmationEmail;
+exports.BookingConfirmedCard = BookingConfirmedCard;
 exports.BookingDetails = BookingDetails;
 exports.BookingForm = BookingForm;
 exports.BookingShell = BookingShell;