@planetaexo/design-system 0.9.5 → 0.10.1

package/dist/index.js

@@ -4,7 +4,7 @@ import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { XIcon, ChevronDownIcon, CalendarIcon, SearchIcon, ChevronRightIcon, ArrowLeftIcon, CheckCircle2Icon, MapIcon, LogOutIcon, MessageCircleIcon, UsersIcon, CreditCardIcon, AlertCircleIcon, MinusIcon, PlusIcon, CircleCheckIcon, ChevronLeftIcon, ClockIcon, ChevronUpIcon, UserIcon, MenuIcon, SunIcon, MoonIcon, MapPinIcon, PackageIcon, InfoIcon, Loader2Icon, SendIcon, CheckCircleIcon, CheckIcon, MailIcon, PhoneIcon, CompassIcon, UserPlusIcon, ExternalLinkIcon, CopyIcon, PencilIcon, Trash2Icon, UserMinusIcon, AlertTriangleIcon, CarIcon, ZoomInIcon, StarIcon, LayoutGridIcon } from 'lucide-react';
+import { XIcon, ChevronDownIcon, CalendarIcon, SearchIcon, ChevronRightIcon, ArrowLeftIcon, CheckCircle2Icon, MapIcon, LogOutIcon, UsersIcon, CreditCardIcon, AlertCircleIcon, MinusIcon, PlusIcon, CircleCheckIcon, ChevronLeftIcon, ClockIcon, ChevronUpIcon, UserIcon, MenuIcon, SunIcon, MoonIcon, MapPinIcon, PackageIcon, InfoIcon, Loader2Icon, SendIcon, CheckCircleIcon, CheckIcon, MailIcon, PhoneIcon, MessageCircleIcon, CompassIcon, UserPlusIcon, ExternalLinkIcon, CopyIcon, PencilIcon, Trash2Icon, UserMinusIcon, AlertTriangleIcon, CarIcon, ZoomInIcon, StarIcon, LayoutGridIcon } from 'lucide-react';
 import { Separator as Separator$1 } from '@base-ui/react/separator';
 import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
 import { Button as Button$1 } from '@base-ui/react/button';
@@ -1352,7 +1352,7 @@ function AdventureCard({ adventure }) {
       (adventure.description || adventure.detailsSlot) && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(Separator, { className: "my-1" }),
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("p", { className: "text-[10px] font-bold text-muted-foreground font-heading uppercase tracking-widest mb-3", children: (_f = adventure.itineraryLabel) != null ? _f : "Itinerary" }),
+          /* @__PURE__ */ jsx("p", { className: "text-[10px] font-bold text-muted-foreground font-heading uppercase tracking-widest mb-3", children: (_f = adventure.itineraryLabel) != null ? _f : "Details" }),
           adventure.description && !adventure.detailsSlot && /* @__PURE__ */ jsx("p", { className: "text-base text-foreground/80 leading-snug font-sans", children: adventure.description }),
           adventure.detailsSlot && /* @__PURE__ */ jsx("div", { className: cn(
             "text-foreground",
@@ -2195,13 +2195,206 @@ function Offer({
     ] }) })
   ] });
 }
+function getInitial(name) {
+  return name && name.length > 0 ? name.charAt(0).toUpperCase() : "?";
+}
+function CompactAgentCard({
+  name,
+  avatar,
+  email,
+  whatsappUrl,
+  label,
+  nameFallback,
+  legacyContactUrl,
+  legacyContactLabel,
+  className
+}) {
+  const hasAgent = !!name;
+  const displayName = hasAgent ? name : nameFallback != null ? nameFallback : "No agent assigned";
+  const showLegacyContact = hasAgent && !email && !whatsappUrl && !!legacyContactUrl;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-xl border border-border bg-card p-4 flex items-center gap-3.5 min-w-0",
+        className
+      ),
+      children: [
+        hasAgent && avatar ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: avatar,
+              alt: displayName,
+              className: "h-10 w-10 shrink-0 rounded-full object-cover ring-2 ring-primary/20"
+            }
+          )
+        ) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex h-10 w-10 shrink-0 items-center justify-center rounded-full font-heading font-bold text-sm uppercase",
+              hasAgent ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"
+            ),
+            children: getInitial(name)
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest", children: label != null ? label : "Your Agent" }),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "text-sm font-sans truncate",
+                hasAgent ? "font-semibold text-foreground" : "italic text-muted-foreground"
+              ),
+              children: displayName
+            }
+          )
+        ] }),
+        hasAgent && (email || whatsappUrl) && /* @__PURE__ */ jsxs("div", { className: "ml-auto shrink-0 flex items-center gap-1.5", children: [
+          email && /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: `mailto:${email}`,
+              className: "flex items-center justify-center h-8 w-8 rounded-full bg-primary/10 text-primary transition-colors hover:bg-primary/20",
+              "aria-label": `Email ${displayName}`,
+              title: email,
+              children: /* @__PURE__ */ jsx(MailIcon, { className: "w-3.5 h-3.5" })
+            }
+          ),
+          whatsappUrl && /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: whatsappUrl,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "flex items-center justify-center h-8 w-8 rounded-full bg-[#25D366]/15 text-[#25D366] transition-colors hover:bg-[#25D366]/25",
+              "aria-label": `WhatsApp ${displayName}`,
+              children: /* @__PURE__ */ jsx("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" }) })
+            }
+          )
+        ] }),
+        showLegacyContact && /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: legacyContactUrl,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "ml-auto shrink-0 flex items-center gap-1.5 rounded-full bg-primary/10 px-3.5 py-1.5 text-xs font-semibold text-primary font-ui transition-colors hover:bg-primary/20",
+            children: [
+              /* @__PURE__ */ jsx(MessageCircleIcon, { className: "w-3.5 h-3.5" }),
+              legacyContactLabel != null ? legacyContactLabel : "Contact"
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function WideAgentCard({
+  name,
+  avatar,
+  email,
+  whatsappUrl,
+  label,
+  nameFallback,
+  helperText,
+  className
+}) {
+  const hasAgent = !!name;
+  const displayName = hasAgent ? name : nameFallback != null ? nameFallback : "No agent assigned";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-2xl border border-border bg-card p-5 flex flex-col gap-4",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3 text-center", children: [
+          hasAgent && avatar ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: avatar,
+                alt: displayName,
+                className: "w-16 h-16 rounded-full object-cover ring-2 ring-primary/20"
+              }
+            )
+          ) : /* @__PURE__ */ jsx("div", { className: "w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-xl font-bold text-primary font-heading", children: getInitial(name) }) }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            label && /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground font-sans", children: label }),
+            /* @__PURE__ */ jsxs("p", { className: "text-sm font-sans text-foreground mt-0.5", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-bold text-foreground font-heading", children: displayName }),
+              helperText && /* @__PURE__ */ jsxs(Fragment, { children: [
+                " ",
+                helperText
+              ] })
+            ] })
+          ] })
+        ] }),
+        (whatsappUrl || email) && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Separator, {}),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+            whatsappUrl && /* @__PURE__ */ jsxs(
+              "a",
+              {
+                href: whatsappUrl,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "flex items-center gap-2.5 rounded-lg border border-border px-4 py-2.5 text-sm font-sans text-foreground hover:bg-muted/50 transition-colors",
+                children: [
+                  /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 shrink-0 text-[#25D366]", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" }) }),
+                  "WhatsApp"
+                ]
+              }
+            ),
+            email && /* @__PURE__ */ jsxs(
+              "a",
+              {
+                href: `mailto:${email}`,
+                className: "flex items-center gap-2.5 rounded-lg border border-border px-4 py-2.5 text-sm font-sans text-foreground hover:bg-muted/50 transition-colors",
+                children: [
+                  /* @__PURE__ */ jsx(MailIcon, { className: "w-4 h-4 shrink-0 text-primary" }),
+                  "Email"
+                ]
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function AgentContactCard(props) {
+  if (props.layout === "wide") return /* @__PURE__ */ jsx(WideAgentCard, __spreadValues({}, props));
+  return /* @__PURE__ */ jsx(CompactAgentCard, __spreadValues({}, props));
+}
 var STATUS_STYLES = {
   pending: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400",
   confirmed: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400",
   cancelled: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400",
-  completed: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400"
+  completed: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400",
+  pendingRegistration: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400",
+  pendingPayment: "bg-warning/15 text-warning-foreground dark:bg-warning/20 dark:text-warning",
+  pendingPaymentOverdue: "bg-destructive/15 text-destructive dark:bg-destructive/25 dark:text-destructive",
+  complete: "bg-success/15 text-success dark:bg-success/20 dark:text-success"
+};
+var STATUS_DEFAULT_LABELS = {
+  pending: "Pending",
+  confirmed: "Confirmed",
+  cancelled: "Cancelled",
+  completed: "Completed",
+  pendingRegistration: "Pending registration",
+  pendingPayment: "Pending payment",
+  pendingPaymentOverdue: "Payment overdue",
+  complete: "Complete"
 };
-function StatusBadge({ status }) {
+function StatusBadge({ status, label }) {
+  var _a;
   return /* @__PURE__ */ jsx(
     "span",
     {
@@ -2209,7 +2402,7 @@ function StatusBadge({ status }) {
         "inline-flex items-center rounded-full px-3 py-1 text-xs font-bold font-heading uppercase tracking-wider",
         STATUS_STYLES[status]
       ),
-      children: status
+      children: (_a = label != null ? label : STATUS_DEFAULT_LABELS[status]) != null ? _a : status
     }
   );
 }
@@ -2264,7 +2457,7 @@ function AdventureSection({
   onRequestOpenDeleteModal,
   cannotRemoveLastTravellerLabel
 }) {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const [detailsOpen, setDetailsOpen] = React22.useState(false);
   const handleCopyUrl = (url) => {
     if (onCopyFormLink) {
@@ -2336,7 +2529,7 @@ function AdventureSection({
     ] }),
     detailsOpen && /* @__PURE__ */ jsxs("div", { className: "border-t border-border px-5 lg:px-6 py-5 flex flex-col gap-5 bg-muted/10", children: [
       (adventure.detailsSlot || adventure.description) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ jsx("h4", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest", children: "Itinerary" }),
+        /* @__PURE__ */ jsx("h4", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest", children: (_e = adventure.itineraryLabel) != null ? _e : "Details" }),
         adventure.detailsSlot ? /* @__PURE__ */ jsx(
           "div",
           {
@@ -2441,8 +2634,8 @@ function AdventureSection({
               className: "flex items-center gap-1.5 rounded-full border border-border px-3 py-1.5 text-xs font-ui text-primary hover:border-primary hover:bg-primary/5 transition-colors",
               children: [
                 /* @__PURE__ */ jsx(PlusIcon, { className: "w-3 h-3" }),
-                /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: (_e = adventure.addTravellerLabel) != null ? _e : "More travellers" }),
-                /* @__PURE__ */ jsx("span", { className: "sm:hidden", children: (_g = (_f = adventure.addTravellerShortLabel) != null ? _f : adventure.addTravellerLabel) != null ? _g : "Add" })
+                /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: (_f = adventure.addTravellerLabel) != null ? _f : "More travellers" }),
+                /* @__PURE__ */ jsx("span", { className: "sm:hidden", children: (_h = (_g = adventure.addTravellerShortLabel) != null ? _g : adventure.addTravellerLabel) != null ? _h : "Add" })
               ]
             }
           )
@@ -2936,7 +3129,8 @@ function OrderSummary({
   summaryLineItems,
   subtotal,
   total,
-  depositInfo
+  depositInfo,
+  balanceDueLabel
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-border bg-card p-5 lg:p-6 flex flex-col gap-4", children: [
     /* @__PURE__ */ jsx("h3", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest", children: "Order Summary" }),
@@ -3032,7 +3226,7 @@ function OrderSummary({
         /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground font-sans", children: depositInfo.remainingAmount })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground font-sans", children: "Balance due" }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground font-sans", children: balanceDueLabel != null ? balanceDueLabel : "Balance due" }),
         /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground font-sans", children: depositInfo.balanceDueDate })
       ] })
     ] })
@@ -3041,13 +3235,18 @@ function OrderSummary({
 function BookingDetails({
   bookingId,
   status,
+  statusLabel,
   createdAt,
   contact,
+  agent,
   agentName,
   agentContactUrl,
   agentNameFallback,
   agentLabel,
   agentContactLabel,
+  contactSectionLabel,
+  payBalanceLabel,
+  balanceDueLabel,
   cannotRemoveLastTravellerLabel,
   adventures,
   summaryLineItems,
@@ -3077,7 +3276,7 @@ function BookingDetails({
   signOutLabel,
   className
 }) {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const people = totalPeople(adventures);
   const hasSubmitAddTraveller = !!onSubmitAddTraveller;
   const hasSubmitEditTraveller = !!onSubmitEditTraveller;
@@ -3192,56 +3391,27 @@ function BookingDetails({
                 createdAt
               ] })
             ] }),
-            /* @__PURE__ */ jsx(StatusBadge, { status })
+            /* @__PURE__ */ jsx(StatusBadge, { status, label: statusLabel })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-3", children: [
             /* @__PURE__ */ jsxs(InfoCard, { label: "Contact", children: [
               /* @__PURE__ */ jsx("p", { className: "font-semibold", children: contact.name }),
               contact.email && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground font-sans truncate", children: contact.email })
             ] }),
-            (() => {
-              const hasAgent = !!agentName;
-              const displayName = hasAgent ? agentName : agentNameFallback != null ? agentNameFallback : "No agent assigned";
-              const initial = hasAgent ? agentName.charAt(0) : "?";
-              return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-border bg-card p-4 flex items-center gap-3.5 min-w-0", children: [
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: cn(
-                      "flex h-10 w-10 shrink-0 items-center justify-center rounded-full font-heading font-bold text-sm uppercase",
-                      hasAgent ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"
-                    ),
-                    children: initial
-                  }
-                ),
-                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 min-w-0", children: [
-                  /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest", children: agentLabel != null ? agentLabel : "Your Agent" }),
-                  /* @__PURE__ */ jsx(
-                    "p",
-                    {
-                      className: cn(
-                        "text-sm font-sans truncate",
-                        hasAgent ? "font-semibold text-foreground" : "italic text-muted-foreground"
-                      ),
-                      children: displayName
-                    }
-                  )
-                ] }),
-                hasAgent && agentContactUrl && /* @__PURE__ */ jsxs(
-                  "a",
-                  {
-                    href: agentContactUrl,
-                    target: "_blank",
-                    rel: "noopener noreferrer",
-                    className: "ml-auto shrink-0 flex items-center gap-1.5 rounded-full bg-primary/10 px-3.5 py-1.5 text-xs font-semibold text-primary font-ui transition-colors hover:bg-primary/20",
-                    children: [
-                      /* @__PURE__ */ jsx(MessageCircleIcon, { className: "w-3.5 h-3.5" }),
-                      agentContactLabel != null ? agentContactLabel : "Contact"
-                    ]
-                  }
-                )
-              ] });
-            })(),
+            /* @__PURE__ */ jsx(
+              AgentContactCard,
+              {
+                layout: "compact",
+                name: (_a = agent == null ? void 0 : agent.name) != null ? _a : agentName,
+                avatar: agent == null ? void 0 : agent.avatar,
+                email: agent == null ? void 0 : agent.email,
+                whatsappUrl: agent == null ? void 0 : agent.whatsappUrl,
+                label: agentLabel,
+                nameFallback: agentNameFallback,
+                legacyContactUrl: agentContactUrl,
+                legacyContactLabel: agentContactLabel
+              }
+            ),
             /* @__PURE__ */ jsxs(InfoCard, { label: "Total People", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ jsx(UsersIcon, { className: "w-4 h-4 text-primary shrink-0" }),
@@ -3292,11 +3462,12 @@ function BookingDetails({
               summaryLineItems,
               subtotal,
               total,
-              depositInfo
+              depositInfo,
+              balanceDueLabel
             }
           ),
           /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-border bg-card p-5 lg:p-6 flex flex-col gap-4", children: [
-            /* @__PURE__ */ jsx("h3", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest", children: "Responsible Person" }),
+            /* @__PURE__ */ jsx("h3", { className: "text-xs font-bold text-muted-foreground font-heading uppercase tracking-widest", children: contactSectionLabel != null ? contactSectionLabel : "Responsible Person" }),
             /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 sm:grid-cols-3 gap-x-6 gap-y-3", children: [
               /* @__PURE__ */ jsxs("div", { children: [
                 /* @__PURE__ */ jsx("p", { className: "text-xs font-bold text-muted-foreground/60 font-heading uppercase tracking-widest mb-0.5", children: "Name" }),
@@ -3304,15 +3475,15 @@ function BookingDetails({
               ] }),
               /* @__PURE__ */ jsxs("div", { children: [
                 /* @__PURE__ */ jsx("p", { className: "text-xs font-bold text-muted-foreground/60 font-heading uppercase tracking-widest mb-0.5", children: "Email" }),
-                /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground font-sans truncate", children: (_a = contact.email) != null ? _a : "\u2014" })
+                /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground font-sans truncate", children: (_b = contact.email) != null ? _b : "\u2014" })
               ] }),
               /* @__PURE__ */ jsxs("div", { children: [
                 /* @__PURE__ */ jsx("p", { className: "text-xs font-bold text-muted-foreground/60 font-heading uppercase tracking-widest mb-0.5", children: "Phone" }),
-                /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground font-sans", children: (_b = contact.phone) != null ? _b : "\u2014" })
+                /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground font-sans", children: (_c = contact.phone) != null ? _c : "\u2014" })
               ] }),
               /* @__PURE__ */ jsxs("div", { children: [
                 /* @__PURE__ */ jsx("p", { className: "text-xs font-bold text-muted-foreground/60 font-heading uppercase tracking-widest mb-0.5", children: "Country" }),
-                /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground font-sans", children: (_c = contact.country) != null ? _c : "\u2014" })
+                /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground font-sans", children: (_d = contact.country) != null ? _d : "\u2014" })
               ] }),
               contact.passport && /* @__PURE__ */ jsxs("div", { children: [
                 /* @__PURE__ */ jsx("p", { className: "text-xs font-bold text-muted-foreground/60 font-heading uppercase tracking-widest mb-0.5", children: "Passport / CPF" }),
@@ -3323,24 +3494,38 @@ function BookingDetails({
           (onPayBalance || onCancelRequest) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
             depositInfo && !depositInfo.isPaidInFull && // Se consumer passar remainingAmountValue, só mostra botão quando saldo > 0.
             // Quando undefined, mantém comportamento antigo (backward compat).
-            (depositInfo.remainingAmountValue === void 0 || depositInfo.remainingAmountValue > 0) && onPayBalance && /* @__PURE__ */ jsxs(
-              "button",
-              {
-                type: "button",
-                onClick: onPayBalance,
-                className: cn(
-                  "w-full rounded-full bg-primary py-3.5 text-center text-sm font-bold uppercase tracking-wide",
-                  "text-primary-foreground font-heading transition-colors hover:bg-primary/90",
-                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                  "flex items-center justify-center gap-2"
-                ),
-                children: [
-                  /* @__PURE__ */ jsx(CreditCardIcon, { className: "w-4 h-4" }),
-                  "Pay remaining balance \u2014 ",
-                  depositInfo.remainingAmount
-                ]
-              }
-            ),
+            (depositInfo.remainingAmountValue === void 0 || depositInfo.remainingAmountValue > 0) && onPayBalance && /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col items-center gap-1.5", children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: onPayBalance,
+                  className: cn(
+                    "w-full rounded-full py-3.5 text-center text-sm font-bold uppercase tracking-wide font-heading",
+                    depositInfo.isOverdue ? "bg-destructive text-destructive-foreground hover:bg-destructive/90" : "bg-primary text-primary-foreground hover:bg-primary/90",
+                    "transition-colors",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    "flex items-center justify-center gap-2"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(CreditCardIcon, { className: "w-4 h-4" }),
+                    payBalanceLabel != null ? payBalanceLabel : "Pay remaining balance",
+                    " \u2014 ",
+                    depositInfo.remainingAmount
+                  ]
+                }
+              ),
+              depositInfo.dueDateLabel && /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-xs font-sans",
+                    depositInfo.isOverdue ? "text-destructive font-semibold" : "text-muted-foreground"
+                  ),
+                  children: depositInfo.dueDateLabel
+                }
+              )
+            ] }),
             onCancelRequest && status !== "cancelled" && /* @__PURE__ */ jsxs(
               "button",
               {
@@ -3492,7 +3677,7 @@ var DEFAULT_LABELS = {
   childrenUnit: "child(ren)",
   travellersLabel: "Travellers",
   childBadge: "child",
-  itineraryLabel: "Itinerary",
+  itineraryLabel: "Details",
   includedLabel: "O que est\xE1 incluso",
   notIncludedLabel: "O que n\xE3o est\xE1 incluso",
   pricingLabel: "Pricing",
@@ -9200,6 +9385,6 @@ function LeadCapturePopup({
   );
 }
 
-export { ActivityCard, Alert, BirthDateField, BookingConfirmation, BookingConfirmationEmail, BookingConfirmedCard, BookingDetails, BookingForm, BookingOtpEmail, BookingShell, Button, COUNTRIES, CounterField, CountrySearchField, DEFAULT_HEADER_LINKS, DEFAULT_LANGUAGES, DatePickerField, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, FilterPanel, FloatingInput, FloatingSelect, Itinerary, LOGO_PLANETAEXO_DATA_URI, LeadCapturePopup, MenuTrip, OTPCodeInput, Offer, OfferAdventureCard, PaymentAmountSelector, PaymentMethodSelector, PaymentModalShell, PhoneCountrySelect, PhotoGallery, PricingTrip, RegistrationForm, RegistrationSuccessCard, SiteHeader, TERMS_ACCEPT_KEY, TermsSection, ThemeToggle, Toast, TravellerFormInviteEmail, TripCard, TripHeader, TripPage, buttonVariants, cn, emailTokens, getStripeAppearance, stripeAppearance, wrapEmailHtml };
+export { ActivityCard, AgentContactCard, Alert, BirthDateField, BookingConfirmation, BookingConfirmationEmail, BookingConfirmedCard, BookingDetails, BookingForm, BookingOtpEmail, BookingShell, Button, COUNTRIES, CounterField, CountrySearchField, DEFAULT_HEADER_LINKS, DEFAULT_LANGUAGES, DatePickerField, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, FilterPanel, FloatingInput, FloatingSelect, Itinerary, LOGO_PLANETAEXO_DATA_URI, LeadCapturePopup, MenuTrip, OTPCodeInput, Offer, OfferAdventureCard, PaymentAmountSelector, PaymentMethodSelector, PaymentModalShell, PhoneCountrySelect, PhotoGallery, PricingTrip, RegistrationForm, RegistrationSuccessCard, SiteHeader, TERMS_ACCEPT_KEY, TermsSection, ThemeToggle, Toast, TravellerFormInviteEmail, TripCard, TripHeader, TripPage, buttonVariants, cn, emailTokens, getStripeAppearance, stripeAppearance, wrapEmailHtml };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map