@planetaexo/design-system 0.24.3 → 0.26.0

package/dist/index.js

@@ -3848,6 +3848,700 @@ ${content}
 </html>`;
 }
 var DEFAULT_LABELS = {
+  travellersHeading: "TRAVELLERS",
+  detailsHeading: "DETAILS",
+  pricesHeading: "PRICES",
+  subtotalLabel: "Subtotal",
+  travellersCountLabel: (n) => `${n} traveller(s)`,
+  lineItemSeparator: "\xD7",
+  lineItemEquals: "=",
+  includedHeading: "O que est\xE1 incluso",
+  notIncludedHeading: "O que n\xE3o est\xE1 incluso",
+  childBadge: "child",
+  adultsUnit: "adult(s)",
+  childrenUnit: "child(ren)"
+};
+function BookingAdventureCard({
+  tag,
+  name,
+  startDate,
+  endDate,
+  travellerCount,
+  slots,
+  travellers,
+  itinerary,
+  description,
+  image,
+  imageAlt,
+  location,
+  destination,
+  included,
+  notIncluded,
+  lineItems,
+  subtotal,
+  labels,
+  className
+}) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+  const l = {
+    travellersHeading: (_a = labels == null ? void 0 : labels.travellersHeading) != null ? _a : DEFAULT_LABELS.travellersHeading,
+    detailsHeading: (_b = labels == null ? void 0 : labels.detailsHeading) != null ? _b : DEFAULT_LABELS.detailsHeading,
+    pricesHeading: (_c = labels == null ? void 0 : labels.pricesHeading) != null ? _c : DEFAULT_LABELS.pricesHeading,
+    subtotalLabel: (_d = labels == null ? void 0 : labels.subtotalLabel) != null ? _d : DEFAULT_LABELS.subtotalLabel,
+    travellersCountLabel: (_e = labels == null ? void 0 : labels.travellersCountLabel) != null ? _e : DEFAULT_LABELS.travellersCountLabel,
+    lineItemSeparator: (_f = labels == null ? void 0 : labels.lineItemSeparator) != null ? _f : DEFAULT_LABELS.lineItemSeparator,
+    lineItemEquals: (_g = labels == null ? void 0 : labels.lineItemEquals) != null ? _g : DEFAULT_LABELS.lineItemEquals,
+    includedHeading: (_h = labels == null ? void 0 : labels.includedHeading) != null ? _h : DEFAULT_LABELS.includedHeading,
+    notIncludedHeading: (_i = labels == null ? void 0 : labels.notIncludedHeading) != null ? _i : DEFAULT_LABELS.notIncludedHeading,
+    childBadge: (_j = labels == null ? void 0 : labels.childBadge) != null ? _j : DEFAULT_LABELS.childBadge,
+    adultsUnit: (_k = labels == null ? void 0 : labels.adultsUnit) != null ? _k : DEFAULT_LABELS.adultsUnit,
+    childrenUnit: (_l = labels == null ? void 0 : labels.childrenUnit) != null ? _l : DEFAULT_LABELS.childrenUnit
+  };
+  const hasTravellers = !!travellers && travellers.length > 0;
+  const hasItinerary = !!itinerary && itinerary.length > 0;
+  const hasDescription = !!description && description.trim().length > 0;
+  const hasIncluded = !!included && included.length > 0;
+  const hasNotIncluded = !!notIncluded && notIncluded.length > 0;
+  const hasLineItems = lineItems.length > 0;
+  const dateRange = endDate ? `${startDate} \u2192 ${endDate}` : startDate;
+  const showSlots = !!slots;
+  const slotsText = showSlots ? [
+    slots.adults ? `${slots.adults} ${l.adultsUnit}` : null,
+    slots.children ? `${slots.children} ${l.childrenUnit}` : null
+  ].filter(Boolean).join(" \xB7 ") : "";
+  const showTravellersCount = !showSlots && typeof travellerCount === "number" && travellerCount > 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        borderRadius: "16px",
+        border: `1px solid ${emailTokens.border}`,
+        backgroundColor: emailTokens.white,
+        overflow: "hidden"
+      },
+      className,
+      children: [
+        image && /* @__PURE__ */ jsx("div", { style: { overflow: "hidden", backgroundColor: emailTokens.muted }, children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: image,
+            alt: imageAlt != null ? imageAlt : name,
+            style: { width: "100%", height: "auto", display: "block" }
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { style: { padding: "20px" }, children: [
+          tag && /* @__PURE__ */ jsx("div", { style: { marginBottom: "10px" }, children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                display: "inline-block",
+                backgroundColor: emailTokens.primaryLight,
+                color: emailTokens.primary,
+                padding: "2px 8px",
+                borderRadius: "6px",
+                fontSize: "12px",
+                fontWeight: 600,
+                letterSpacing: "0.05em"
+              },
+              children: tag
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            "h3",
+            {
+              style: {
+                fontSize: "20px",
+                fontWeight: 700,
+                color: emailTokens.foreground,
+                lineHeight: "1.3",
+                margin: "0 0 10px 0"
+              },
+              children: name
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "table",
+            {
+              cellPadding: 0,
+              cellSpacing: 0,
+              style: { borderCollapse: "collapse", marginBottom: "10px" },
+              children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    style: {
+                      verticalAlign: "middle",
+                      paddingRight: "6px",
+                      width: "16px"
+                    },
+                    children: /* @__PURE__ */ jsx("span", { style: { display: "inline-block", fontSize: "14px", lineHeight: "1" }, children: "\u{1F4C5}" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    style: {
+                      verticalAlign: "middle",
+                      fontSize: "14px",
+                      color: emailTokens.mutedForeground,
+                      lineHeight: "1"
+                    },
+                    children: dateRange
+                  }
+                )
+              ] }) })
+            }
+          ),
+          location && /* @__PURE__ */ jsx(
+            "table",
+            {
+              cellPadding: 0,
+              cellSpacing: 0,
+              style: { borderCollapse: "collapse", marginBottom: "10px" },
+              children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    style: {
+                      verticalAlign: "middle",
+                      paddingRight: "6px",
+                      width: "16px"
+                    },
+                    children: /* @__PURE__ */ jsx("span", { style: { display: "inline-block", fontSize: "14px", lineHeight: "1" }, children: "\u{1F4CD}" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    style: {
+                      verticalAlign: "middle",
+                      fontSize: "14px",
+                      color: emailTokens.mutedForeground,
+                      lineHeight: "1"
+                    },
+                    children: location
+                  }
+                )
+              ] }) })
+            }
+          ),
+          showSlots && slotsText && /* @__PURE__ */ jsx(
+            "table",
+            {
+              cellPadding: 0,
+              cellSpacing: 0,
+              style: { borderCollapse: "collapse", marginBottom: "10px" },
+              children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    style: {
+                      verticalAlign: "middle",
+                      paddingRight: "6px",
+                      width: "16px"
+                    },
+                    children: /* @__PURE__ */ jsx("span", { style: { display: "inline-block", fontSize: "14px", lineHeight: "1" }, children: "\u{1F465}" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    style: {
+                      verticalAlign: "middle",
+                      fontSize: "14px",
+                      color: emailTokens.mutedForeground,
+                      lineHeight: "1"
+                    },
+                    children: slotsText
+                  }
+                )
+              ] }) })
+            }
+          ),
+          showTravellersCount && /* @__PURE__ */ jsx(
+            "table",
+            {
+              cellPadding: 0,
+              cellSpacing: 0,
+              style: { borderCollapse: "collapse", marginBottom: "10px" },
+              children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    style: {
+                      verticalAlign: "middle",
+                      paddingRight: "6px",
+                      width: "16px"
+                    },
+                    children: /* @__PURE__ */ jsx("span", { style: { display: "inline-block", fontSize: "14px", lineHeight: "1" }, children: "\u{1F465}" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    style: {
+                      verticalAlign: "middle",
+                      fontSize: "14px",
+                      color: emailTokens.mutedForeground,
+                      lineHeight: "1"
+                    },
+                    children: l.travellersCountLabel(travellerCount)
+                  }
+                )
+              ] }) })
+            }
+          ),
+          destination && /* @__PURE__ */ jsx(
+            "table",
+            {
+              cellPadding: 0,
+              cellSpacing: 0,
+              style: { borderCollapse: "collapse", marginBottom: "10px" },
+              children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    style: {
+                      verticalAlign: "middle",
+                      paddingRight: "6px",
+                      width: "16px"
+                    },
+                    children: /* @__PURE__ */ jsx("span", { style: { display: "inline-block", fontSize: "14px", lineHeight: "1" }, children: "\u{1F9ED}" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    style: {
+                      verticalAlign: "middle",
+                      fontSize: "14px",
+                      color: emailTokens.mutedForeground,
+                      lineHeight: "1"
+                    },
+                    children: destination
+                  }
+                )
+              ] }) })
+            }
+          ),
+          hasTravellers && /* @__PURE__ */ jsxs("div", { style: { marginTop: "4px" }, children: [
+            /* @__PURE__ */ jsx(
+              "hr",
+              {
+                style: {
+                  border: "none",
+                  borderTop: `1px solid ${emailTokens.border}`,
+                  marginBottom: "10px"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                style: {
+                  fontSize: "10px",
+                  fontWeight: 700,
+                  color: emailTokens.mutedForeground,
+                  textTransform: "uppercase",
+                  letterSpacing: "0.1em",
+                  margin: "0 0 8px 0"
+                },
+                children: l.travellersHeading
+              }
+            ),
+            travellers.map((tr, i) => {
+              var _a2;
+              const isObj = typeof tr === "object";
+              const fullName = isObj ? tr.fullName : tr;
+              const isChild = isObj && tr.isChild === true;
+              const childLabel = isObj ? (_a2 = tr.childBadgeLabel) != null ? _a2 : l.childBadge : l.childBadge;
+              return /* @__PURE__ */ jsx(
+                "table",
+                {
+                  cellPadding: 0,
+                  cellSpacing: 0,
+                  style: {
+                    borderCollapse: "collapse",
+                    width: "100%",
+                    marginBottom: "6px"
+                  },
+                  children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                    /* @__PURE__ */ jsx("td", { style: { verticalAlign: "middle" }, children: /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          fontSize: "14px",
+                          fontWeight: 500,
+                          color: emailTokens.foreground
+                        },
+                        children: fullName
+                      }
+                    ) }),
+                    isChild && /* @__PURE__ */ jsx("td", { style: { verticalAlign: "middle", textAlign: "right" }, children: /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          fontSize: "10px",
+                          fontWeight: 600,
+                          color: emailTokens.mutedForeground,
+                          backgroundColor: emailTokens.muted,
+                          borderRadius: "9999px",
+                          padding: "2px 8px",
+                          textTransform: "uppercase",
+                          letterSpacing: "0.05em"
+                        },
+                        children: childLabel
+                      }
+                    ) })
+                  ] }) })
+                },
+                i
+              );
+            })
+          ] }),
+          (hasDescription || hasItinerary) && /* @__PURE__ */ jsxs("div", { style: { marginTop: "4px" }, children: [
+            /* @__PURE__ */ jsx(
+              "hr",
+              {
+                style: {
+                  border: "none",
+                  borderTop: `1px solid ${emailTokens.border}`,
+                  marginBottom: "10px"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                style: {
+                  fontSize: "10px",
+                  fontWeight: 700,
+                  color: emailTokens.mutedForeground,
+                  textTransform: "uppercase",
+                  letterSpacing: "0.1em",
+                  margin: "0 0 8px 0"
+                },
+                children: l.detailsHeading
+              }
+            ),
+            hasDescription ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  fontSize: "14px",
+                  color: emailTokens.bodyText,
+                  lineHeight: "1.4",
+                  margin: 0
+                },
+                dangerouslySetInnerHTML: { __html: description }
+              }
+            ) : itinerary.map((line, i) => /* @__PURE__ */ jsx(
+              "p",
+              {
+                style: {
+                  fontSize: "14px",
+                  color: emailTokens.bodyText,
+                  lineHeight: "1.4",
+                  margin: "0 0 6px 0"
+                },
+                children: line
+              },
+              i
+            ))
+          ] }),
+          hasIncluded && /* @__PURE__ */ jsxs("div", { style: { marginTop: "10px" }, children: [
+            /* @__PURE__ */ jsx(
+              "h4",
+              {
+                style: {
+                  fontSize: "14px",
+                  fontWeight: 700,
+                  color: emailTokens.foreground,
+                  margin: "0 0 8px 0"
+                },
+                children: l.includedHeading
+              }
+            ),
+            included.map((item, i) => /* @__PURE__ */ jsx(
+              "table",
+              {
+                cellPadding: 0,
+                cellSpacing: 0,
+                style: {
+                  borderCollapse: "collapse",
+                  width: "100%",
+                  marginBottom: "6px"
+                },
+                children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                  /* @__PURE__ */ jsx("td", { style: { verticalAlign: "top", paddingRight: "8px", width: "16px" }, children: /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        display: "inline-block",
+                        fontSize: "14px",
+                        color: emailTokens.primary,
+                        lineHeight: "1.2",
+                        fontWeight: 700
+                      },
+                      children: "\u2713"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx("td", { style: { verticalAlign: "top", fontSize: "14px", color: emailTokens.bodyText }, children: item })
+                ] }) })
+              },
+              i
+            ))
+          ] }),
+          hasNotIncluded && /* @__PURE__ */ jsxs("div", { style: { marginTop: "10px" }, children: [
+            /* @__PURE__ */ jsx(
+              "h4",
+              {
+                style: {
+                  fontSize: "14px",
+                  fontWeight: 700,
+                  color: emailTokens.foreground,
+                  margin: "0 0 8px 0"
+                },
+                children: l.notIncludedHeading
+              }
+            ),
+            notIncluded.map((item, i) => /* @__PURE__ */ jsx(
+              "table",
+              {
+                cellPadding: 0,
+                cellSpacing: 0,
+                style: {
+                  borderCollapse: "collapse",
+                  width: "100%",
+                  marginBottom: "6px"
+                },
+                children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                  /* @__PURE__ */ jsx("td", { style: { verticalAlign: "top", paddingRight: "8px", width: "16px" }, children: /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        display: "inline-block",
+                        fontSize: "14px",
+                        color: emailTokens.destructive,
+                        lineHeight: "1.2",
+                        fontWeight: 700
+                      },
+                      children: "\u2717"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx("td", { style: { verticalAlign: "top", fontSize: "14px", color: emailTokens.bodyText }, children: item })
+                ] }) })
+              },
+              i
+            ))
+          ] }),
+          hasLineItems && /* @__PURE__ */ jsxs("div", { style: { marginTop: "4px" }, children: [
+            /* @__PURE__ */ jsx(
+              "hr",
+              {
+                style: {
+                  border: "none",
+                  borderTop: `1px solid ${emailTokens.border}`,
+                  marginBottom: "10px"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                style: {
+                  fontSize: "10px",
+                  fontWeight: 700,
+                  color: emailTokens.mutedForeground,
+                  textTransform: "uppercase",
+                  letterSpacing: "0.1em",
+                  margin: "0 0 8px 0"
+                },
+                children: l.pricesHeading
+              }
+            ),
+            lineItems.map((li, j) => {
+              var _a2, _b2, _c2;
+              const useLabel = typeof li.label === "string" && li.label.length > 0;
+              const valueText = li.subtotal;
+              const rightStyle = {
+                verticalAlign: "middle",
+                textAlign: "right",
+                fontSize: "14px",
+                fontWeight: 500,
+                whiteSpace: "nowrap",
+                color: li.isDiscount ? emailTokens.green : emailTokens.foreground
+              };
+              return /* @__PURE__ */ jsx(
+                "table",
+                {
+                  cellPadding: 0,
+                  cellSpacing: 0,
+                  style: {
+                    borderCollapse: "collapse",
+                    width: "100%",
+                    marginBottom: "4px"
+                  },
+                  children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                    /* @__PURE__ */ jsx(
+                      "td",
+                      {
+                        style: {
+                          verticalAlign: "middle",
+                          fontSize: "14px",
+                          color: emailTokens.mutedForeground
+                        },
+                        children: useLabel ? li.label : `${(_a2 = li.unitPrice) != null ? _a2 : ""} ${l.lineItemSeparator} ${(_b2 = li.quantity) != null ? _b2 : ""} ${(_c2 = li.categoryLabel) != null ? _c2 : ""} ${l.lineItemEquals}`
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("td", { style: rightStyle, children: [
+                      li.isDiscount ? "\u2212" : "",
+                      valueText
+                    ] })
+                  ] }) })
+                },
+                j
+              );
+            }),
+            subtotal && /* @__PURE__ */ jsx(
+              "table",
+              {
+                cellPadding: 0,
+                cellSpacing: 0,
+                style: {
+                  borderCollapse: "collapse",
+                  width: "100%",
+                  paddingTop: "8px",
+                  marginTop: "4px",
+                  borderTop: `1px solid ${emailTokens.border}`
+                },
+                children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                  /* @__PURE__ */ jsx(
+                    "td",
+                    {
+                      style: {
+                        verticalAlign: "middle",
+                        fontSize: "14px",
+                        fontWeight: 700,
+                        color: emailTokens.foreground
+                      },
+                      children: l.subtotalLabel
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "td",
+                    {
+                      style: {
+                        verticalAlign: "middle",
+                        textAlign: "right",
+                        fontSize: "14px",
+                        fontWeight: 700,
+                        color: emailTokens.foreground,
+                        whiteSpace: "nowrap"
+                      },
+                      children: subtotal
+                    }
+                  )
+                ] }) })
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+var DEFAULT_LABELS2 = {
+  heading: "PAYMENT DETAILS"
+};
+function PaymentDetailsBlock({
+  rows,
+  footerBanner,
+  labels,
+  className
+}) {
+  var _a;
+  const l = {
+    heading: (_a = labels == null ? void 0 : labels.heading) != null ? _a : DEFAULT_LABELS2.heading
+  };
+  const hasBanner = !!footerBanner;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        borderRadius: "12px",
+        border: `1px solid ${emailTokens.border}`,
+        overflow: "hidden"
+      },
+      className,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              padding: "12px 16px",
+              backgroundColor: emailTokens.muted,
+              borderBottom: `1px solid ${emailTokens.border}`
+            },
+            children: /* @__PURE__ */ jsx(
+              "p",
+              {
+                style: {
+                  fontSize: "10px",
+                  fontWeight: 700,
+                  color: emailTokens.mutedForeground,
+                  textTransform: "uppercase",
+                  letterSpacing: "0.1em",
+                  margin: 0
+                },
+                children: l.heading
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("table", { style: { width: "100%", fontSize: "14px", borderCollapse: "collapse" }, children: /* @__PURE__ */ jsxs("tbody", { children: [
+          rows.map((row, i) => {
+            const isLast = i === rows.length - 1;
+            const showBorder = !isLast;
+            const valueStyle = {
+              padding: "10px 16px",
+              textAlign: "right",
+              fontWeight: row.emphasis ? 700 : 500,
+              color: row.emphasis ? emailTokens.primary : emailTokens.foreground,
+              whiteSpace: "nowrap"
+            };
+            return /* @__PURE__ */ jsxs(
+              "tr",
+              {
+                style: showBorder ? { borderBottom: `1px solid ${emailTokens.border}` } : {},
+                children: [
+                  /* @__PURE__ */ jsx("td", { style: { padding: "10px 16px", color: emailTokens.mutedForeground }, children: row.label }),
+                  /* @__PURE__ */ jsx("td", { style: valueStyle, children: row.value })
+                ]
+              },
+              i
+            );
+          }),
+          hasBanner && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+            "td",
+            {
+              colSpan: 2,
+              style: {
+                padding: "12px 16px",
+                textAlign: "center",
+                fontWeight: 600,
+                color: emailTokens.green,
+                backgroundColor: emailTokens.greenBg
+              },
+              children: footerBanner.text
+            }
+          ) })
+        ] }) })
+      ]
+    }
+  );
+}
+var DEFAULT_LABELS3 = {
   ctaButton: "View booking details",
   logoAlt: "PlanetaEXO",
   greeting: (recipientName) => `Hi ${recipientName},`,
@@ -3899,7 +4593,7 @@ function BookingConfirmation({
   className,
   flow = "auto"
 }) {
-  const l = __spreadValues(__spreadValues({}, DEFAULT_LABELS), labels);
+  const l = __spreadValues(__spreadValues({}, DEFAULT_LABELS3), labels);
   const allTravellers = adventures.flatMap((a) => {
     var _a;
     return (_a = a.travellers) != null ? _a : [];
@@ -3987,115 +4681,57 @@ function BookingConfirmation({
         ] }),
         /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } }),
         /* @__PURE__ */ jsx("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "32px" }, children: adventures.map((adventure, adIdx) => {
-          var _a, _b, _c, _d, _e;
-          return /* @__PURE__ */ jsxs(
+          var _a, _b, _c, _d;
+          const locationToPass = adventure.location && !adventure.destinationName ? adventure.location : void 0;
+          const destinationToPass = (_a = adventure.destinationName) != null ? _a : adventure.partner;
+          const tagToPass = (_b = adventure.code) != null ? _b : adventure.reference;
+          const travellersToPass = (_c = adventure.travellers) == null ? void 0 : _c.map((tr) => ({
+            fullName: `${tr.firstName} ${tr.lastName}`,
+            isChild: tr.isChild,
+            childBadgeLabel: l.childBadge
+          }));
+          const lineItemsToPass = ((_d = adventure.lineItems) != null ? _d : []).map((it) => ({
+            label: it.label,
+            subtotal: it.price,
+            isDiscount: it.isDiscount
+          }));
+          return /* @__PURE__ */ jsx(
             "div",
             {
               style: {
-                borderRadius: "16px",
-                border: `1px solid ${emailTokens.border}`,
-                backgroundColor: emailTokens.white,
-                overflow: "hidden",
                 marginBottom: adIdx < adventures.length - 1 ? "24px" : "0"
               },
-              children: [
-                adventure.image && /* @__PURE__ */ jsx("div", { style: { overflow: "hidden", backgroundColor: emailTokens.muted }, children: /* @__PURE__ */ jsx(
-                  "img",
-                  {
-                    src: adventure.image,
-                    alt: (_a = adventure.imageAlt) != null ? _a : adventure.title,
-                    style: { width: "100%", height: "auto", display: "block" }
+              children: /* @__PURE__ */ jsx(
+                BookingAdventureCard,
+                {
+                  tag: tagToPass,
+                  name: adventure.title,
+                  startDate: adventure.dateFrom,
+                  endDate: adventure.dateTo,
+                  slots: adventure.slots,
+                  travellers: travellersToPass,
+                  description: adventure.description,
+                  image: adventure.image,
+                  imageAlt: adventure.imageAlt,
+                  location: locationToPass,
+                  destination: destinationToPass,
+                  included: adventure.included,
+                  notIncluded: adventure.notIncluded,
+                  lineItems: lineItemsToPass,
+                  subtotal: adventure.subtotal,
+                  labels: {
+                    travellersHeading: l.travellersLabel,
+                    detailsHeading: l.itineraryLabel,
+                    pricesHeading: l.pricingLabel,
+                    subtotalLabel: l.subtotalLabel,
+                    includedHeading: l.includedLabel,
+                    notIncludedHeading: l.notIncludedLabel,
+                    childBadge: l.childBadge,
+                    adultsUnit: l.adultsUnit,
+                    childrenUnit: l.childrenUnit
                   }
-                ) }),
-                /* @__PURE__ */ jsxs("div", { style: { padding: "20px" }, children: [
-                  ((_b = adventure.code) != null ? _b : adventure.reference) && /* @__PURE__ */ jsx("div", { style: { marginBottom: "10px" }, children: /* @__PURE__ */ jsx("span", { style: {
-                    display: "inline-block",
-                    backgroundColor: emailTokens.primaryLight,
-                    color: emailTokens.primary,
-                    padding: "2px 8px",
-                    borderRadius: "6px",
-                    fontSize: "12px",
-                    fontWeight: "600",
-                    letterSpacing: "0.05em"
-                  }, children: (_c = adventure.code) != null ? _c : adventure.reference }) }),
-                  /* @__PURE__ */ jsx("h3", { style: { fontSize: "20px", fontWeight: "700", color: emailTokens.foreground, lineHeight: "1.3", margin: "0 0 10px 0" }, children: adventure.title }),
-                  /* @__PURE__ */ jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", marginBottom: "10px" }, children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", { children: [
-                    /* @__PURE__ */ jsx("td", { style: { verticalAlign: "middle", paddingRight: "6px", width: "16px" }, children: /* @__PURE__ */ jsx("span", { style: { display: "inline-block", fontSize: "14px", lineHeight: "1" }, children: "\u{1F4C5}" }) }),
-                    /* @__PURE__ */ jsxs("td", { style: { verticalAlign: "middle", fontSize: "14px", color: emailTokens.mutedForeground, lineHeight: "1" }, children: [
-                      adventure.dateFrom,
-                      " \u2192 ",
-                      adventure.dateTo
-                    ] })
-                  ] }) }) }),
-                  adventure.location && !adventure.destinationName && /* @__PURE__ */ jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", marginBottom: "10px" }, children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", { children: [
-                    /* @__PURE__ */ jsx("td", { style: { verticalAlign: "middle", paddingRight: "6px", width: "16px" }, children: /* @__PURE__ */ jsx("span", { style: { display: "inline-block", fontSize: "14px", lineHeight: "1" }, children: "\u{1F4CD}" }) }),
-                    /* @__PURE__ */ jsx("td", { style: { verticalAlign: "middle", fontSize: "14px", color: emailTokens.mutedForeground, lineHeight: "1" }, children: adventure.location })
-                  ] }) }) }),
-                  adventure.slots && /* @__PURE__ */ jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", marginBottom: "10px" }, children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", { children: [
-                    /* @__PURE__ */ jsx("td", { style: { verticalAlign: "middle", paddingRight: "6px", width: "16px" }, children: /* @__PURE__ */ jsx("span", { style: { display: "inline-block", fontSize: "14px", lineHeight: "1" }, children: "\u{1F465}" }) }),
-                    /* @__PURE__ */ jsx("td", { style: { verticalAlign: "middle", fontSize: "14px", color: emailTokens.mutedForeground, lineHeight: "1" }, children: [
-                      adventure.slots.adults ? `${adventure.slots.adults} ${l.adultsUnit}` : null,
-                      adventure.slots.children ? `${adventure.slots.children} ${l.childrenUnit}` : null
-                    ].filter(Boolean).join(" \xB7 ") })
-                  ] }) }) }),
-                  ((_d = adventure.destinationName) != null ? _d : adventure.partner) && /* @__PURE__ */ jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", marginBottom: "10px" }, children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", { children: [
-                    /* @__PURE__ */ jsx("td", { style: { verticalAlign: "middle", paddingRight: "6px", width: "16px" }, children: /* @__PURE__ */ jsx("span", { style: { display: "inline-block", fontSize: "14px", lineHeight: "1" }, children: "\u{1F9ED}" }) }),
-                    /* @__PURE__ */ jsx("td", { style: { verticalAlign: "middle", fontSize: "14px", color: emailTokens.mutedForeground, lineHeight: "1" }, children: (_e = adventure.destinationName) != null ? _e : adventure.partner })
-                  ] }) }) }),
-                  adventure.travellers && adventure.travellers.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginTop: "4px" }, children: [
-                    /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, marginBottom: "10px" } }),
-                    /* @__PURE__ */ jsx("p", { style: { fontSize: "10px", fontWeight: "700", color: emailTokens.mutedForeground, textTransform: "uppercase", letterSpacing: "0.1em", margin: "0 0 8px 0" }, children: l.travellersLabel }),
-                    adventure.travellers.map((traveller) => /* @__PURE__ */ jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", width: "100%", marginBottom: "6px" }, children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", { children: [
-                      /* @__PURE__ */ jsx("td", { style: { verticalAlign: "middle" }, children: /* @__PURE__ */ jsxs("span", { style: { fontSize: "14px", fontWeight: "500", color: emailTokens.foreground }, children: [
-                        traveller.firstName,
-                        " ",
-                        traveller.lastName
-                      ] }) }),
-                      traveller.isChild && /* @__PURE__ */ jsx("td", { style: { verticalAlign: "middle", textAlign: "right" }, children: /* @__PURE__ */ jsx("span", { style: { fontSize: "10px", fontWeight: "600", color: emailTokens.mutedForeground, backgroundColor: emailTokens.muted, borderRadius: "9999px", padding: "2px 8px", textTransform: "uppercase", letterSpacing: "0.05em" }, children: l.childBadge }) })
-                    ] }) }) }, traveller.id))
-                  ] }),
-                  adventure.description && /* @__PURE__ */ jsxs("div", { style: { marginTop: "4px" }, children: [
-                    /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, marginBottom: "10px" } }),
-                    /* @__PURE__ */ jsx("p", { style: { fontSize: "10px", fontWeight: "700", color: emailTokens.mutedForeground, textTransform: "uppercase", letterSpacing: "0.1em", margin: "0 0 8px 0" }, children: l.itineraryLabel }),
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        style: { fontSize: "14px", color: emailTokens.bodyText, lineHeight: "1.4", margin: 0 },
-                        dangerouslySetInnerHTML: { __html: adventure.description }
-                      }
-                    )
-                  ] }),
-                  adventure.included && adventure.included.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginTop: "10px" }, children: [
-                    /* @__PURE__ */ jsx("h4", { style: { fontSize: "14px", fontWeight: "700", color: emailTokens.foreground, margin: "0 0 8px 0" }, children: l.includedLabel }),
-                    adventure.included.map((item, i) => /* @__PURE__ */ jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", width: "100%", marginBottom: "6px" }, children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", { children: [
-                      /* @__PURE__ */ jsx("td", { style: { verticalAlign: "top", paddingRight: "8px", width: "16px" }, children: /* @__PURE__ */ jsx("span", { style: { display: "inline-block", fontSize: "14px", color: emailTokens.primary, lineHeight: "1.2", fontWeight: 700 }, children: "\u2713" }) }),
-                      /* @__PURE__ */ jsx("td", { style: { verticalAlign: "top", fontSize: "14px", color: emailTokens.bodyText }, children: item })
-                    ] }) }) }, i))
-                  ] }),
-                  adventure.notIncluded && adventure.notIncluded.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginTop: "10px" }, children: [
-                    /* @__PURE__ */ jsx("h4", { style: { fontSize: "14px", fontWeight: "700", color: emailTokens.foreground, margin: "0 0 8px 0" }, children: l.notIncludedLabel }),
-                    adventure.notIncluded.map((item, i) => /* @__PURE__ */ jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", width: "100%", marginBottom: "6px" }, children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", { children: [
-                      /* @__PURE__ */ jsx("td", { style: { verticalAlign: "top", paddingRight: "8px", width: "16px" }, children: /* @__PURE__ */ jsx("span", { style: { display: "inline-block", fontSize: "14px", color: emailTokens.destructive, lineHeight: "1.2", fontWeight: 700 }, children: "\u2717" }) }),
-                      /* @__PURE__ */ jsx("td", { style: { verticalAlign: "top", fontSize: "14px", color: emailTokens.bodyText }, children: item })
-                    ] }) }) }, i))
-                  ] }),
-                  adventure.lineItems && adventure.lineItems.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginTop: "4px" }, children: [
-                    /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, marginBottom: "10px" } }),
-                    /* @__PURE__ */ jsx("p", { style: { fontSize: "10px", fontWeight: "700", color: emailTokens.mutedForeground, textTransform: "uppercase", letterSpacing: "0.1em", margin: "0 0 8px 0" }, children: l.pricingLabel }),
-                    adventure.lineItems.map((item, j) => /* @__PURE__ */ jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", width: "100%", marginBottom: "4px" }, children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", { children: [
-                      /* @__PURE__ */ jsx("td", { style: { verticalAlign: "middle", fontSize: "14px", color: emailTokens.mutedForeground }, children: item.label }),
-                      /* @__PURE__ */ jsxs("td", { style: { verticalAlign: "middle", textAlign: "right", fontSize: "14px", fontWeight: "500", whiteSpace: "nowrap", color: item.isDiscount ? emailTokens.green : emailTokens.foreground }, children: [
-                        item.isDiscount ? "\u2212" : "",
-                        item.price
-                      ] })
-                    ] }) }) }, j)),
-                    adventure.subtotal && /* @__PURE__ */ jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", width: "100%", paddingTop: "8px", marginTop: "4px", borderTop: `1px solid ${emailTokens.border}` }, children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", { children: [
-                      /* @__PURE__ */ jsx("td", { style: { verticalAlign: "middle", fontSize: "14px", fontWeight: "700", color: emailTokens.foreground }, children: l.subtotalLabel }),
-                      /* @__PURE__ */ jsx("td", { style: { verticalAlign: "middle", textAlign: "right", fontSize: "14px", fontWeight: "700", color: emailTokens.foreground, whiteSpace: "nowrap" }, children: adventure.subtotal })
-                    ] }) }) })
-                  ] })
-                ] })
-              ]
+                }
+              )
             },
             adventure.id
           );
@@ -4120,24 +4756,32 @@ function BookingConfirmation({
               /* @__PURE__ */ jsx("td", { style: { padding: "16px", textAlign: "right", fontWeight: "700", color: emailTokens.primary, fontSize: "20px", whiteSpace: "nowrap" }, children: total })
             ] })
           ] }) }) }),
-          depositInfo && /* @__PURE__ */ jsxs("div", { style: { borderRadius: "12px", border: `1px solid ${emailTokens.border}`, marginTop: "16px", overflow: "hidden" }, children: [
-            /* @__PURE__ */ jsx("div", { style: { padding: "12px 16px", backgroundColor: emailTokens.muted, borderBottom: `1px solid ${emailTokens.border}` }, children: /* @__PURE__ */ jsx("p", { style: { fontSize: "10px", fontWeight: "700", color: emailTokens.mutedForeground, textTransform: "uppercase", letterSpacing: "0.1em", margin: 0 }, children: l.paymentDetailsHeading }) }),
-            /* @__PURE__ */ jsx("table", { style: { width: "100%", fontSize: "14px", borderCollapse: "collapse" }, children: /* @__PURE__ */ jsxs("tbody", { children: [
-              /* @__PURE__ */ jsxs("tr", { style: { borderBottom: `1px solid ${emailTokens.border}` }, children: [
-                /* @__PURE__ */ jsx("td", { style: { padding: "10px 16px", color: emailTokens.mutedForeground }, children: l.depositLabel(depositInfo.depositPercent) }),
-                /* @__PURE__ */ jsx("td", { style: { padding: "10px 16px", textAlign: "right", fontWeight: "500", color: emailTokens.foreground, whiteSpace: "nowrap" }, children: depositInfo.depositAmount })
-              ] }),
-              /* @__PURE__ */ jsxs("tr", { style: depositInfo.isPaidInFull ? {} : { borderBottom: `1px solid ${emailTokens.border}` }, children: [
-                /* @__PURE__ */ jsx("td", { style: { padding: "10px 16px", color: emailTokens.mutedForeground }, children: l.remainingBalanceLabel }),
-                /* @__PURE__ */ jsx("td", { style: { padding: "10px 16px", textAlign: "right", fontWeight: "500", color: emailTokens.foreground, whiteSpace: "nowrap" }, children: depositInfo.remainingAmount })
-              ] }),
-              !depositInfo.isPaidInFull && /* @__PURE__ */ jsxs("tr", { children: [
-                /* @__PURE__ */ jsx("td", { style: { padding: "10px 16px", color: emailTokens.mutedForeground }, children: l.balanceDueLabel }),
-                /* @__PURE__ */ jsx("td", { style: { padding: "10px 16px", textAlign: "right", fontWeight: "500", color: emailTokens.foreground, whiteSpace: "nowrap" }, children: depositInfo.balanceDueDate })
-              ] }),
-              depositInfo.isPaidInFull && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 2, style: { padding: "12px 16px", textAlign: "center", fontWeight: "600", color: emailTokens.green, backgroundColor: emailTokens.greenBg }, children: l.paidInFullLabel }) })
-            ] }) })
-          ] })
+          depositInfo && /* @__PURE__ */ jsx("div", { style: { marginTop: "16px" }, children: /* @__PURE__ */ jsx(
+            PaymentDetailsBlock,
+            {
+              labels: { heading: l.paymentDetailsHeading },
+              rows: (() => {
+                const rows = [
+                  {
+                    label: l.depositLabel(depositInfo.depositPercent),
+                    value: depositInfo.depositAmount
+                  },
+                  {
+                    label: l.remainingBalanceLabel,
+                    value: depositInfo.remainingAmount
+                  }
+                ];
+                if (!depositInfo.isPaidInFull) {
+                  rows.push({
+                    label: l.balanceDueLabel,
+                    value: depositInfo.balanceDueDate
+                  });
+                }
+                return rows;
+              })(),
+              footerBanner: depositInfo.isPaidInFull ? { text: l.paidInFullLabel, kind: "success" } : void 0
+            }
+          ) })
         ] }),
         /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } }),
         /* @__PURE__ */ jsx("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "40px" }, children: isManualFlow ? (
@@ -4154,7 +4798,7 @@ function BookingConfirmation({
     }
   );
 }
-var DEFAULT_LABELS2 = {
+var DEFAULT_LABELS4 = {
   ctaButton: "Add travellers to your booking",
   logoAlt: "PlanetaEXO",
   greeting: (recipientName) => `Hi ${recipientName},`,
@@ -4187,7 +4831,7 @@ function BookingConfirmationEmail({
   nextStepsImportant,
   directBookingLinkLabel
 }) {
-  const l = __spreadValues(__spreadValues({}, DEFAULT_LABELS2), labels);
+  const l = __spreadValues(__spreadValues({}, DEFAULT_LABELS4), labels);
   const ctaStyle = {
     display: "inline-block",
     backgroundColor: emailTokens.primary,
@@ -4274,7 +4918,7 @@ function BookingConfirmationEmail({
     }
   );
 }
-var DEFAULT_LABELS3 = {
+var DEFAULT_LABELS5 = {
   logoAlt: "PlanetaEXO",
   greeting: (name) => `Hi ${name},`,
   receiptHeading: "Payment receipt",
@@ -4313,7 +4957,7 @@ function PaymentReceiptEmail({
   labels,
   className
 }) {
-  const l = __spreadValues(__spreadValues({}, DEFAULT_LABELS3), labels);
+  const l = __spreadValues(__spreadValues({}, DEFAULT_LABELS5), labels);
   const travellersLine = travellers.filter((s) => s.trim().length > 0).join(", ");
   const interestRow = chargedAmount && chargedAmount !== amount;
   const receiptRows = [
@@ -4409,8 +5053,24 @@ function PaymentReceiptEmail({
     }
   );
 }
-var EMPTY_AGENT_FN = (_agentName) => "";
-var DEFAULT_LABELS4 = {
+var INLINE_LINK_STYLE = {
+  color: emailTokens.primary,
+  textDecoration: "underline"
+};
+function renderWhatsappLink(contact, label) {
+  if (contact.whatsappUrl) {
+    return /* @__PURE__ */ jsx("a", { href: contact.whatsappUrl, style: INLINE_LINK_STYLE, children: label });
+  }
+  return label;
+}
+function renderEmailLink(contact, label) {
+  if (contact.email) {
+    return /* @__PURE__ */ jsx("a", { href: `mailto:${contact.email}`, style: INLINE_LINK_STYLE, children: label });
+  }
+  return label;
+}
+var EMPTY_CLOSING_ALTERNATIVE = (_agentName, _contact) => null;
+var DEFAULT_LABELS6 = {
   logoAlt: "PlanetaEXO",
   greeting: (name) => `Hi ${name},`,
   intermediateHello: "Hope you're doing well.",
@@ -4418,38 +5078,64 @@ var DEFAULT_LABELS4 = {
   amountAlreadyPaidLabel: "Amount already paid",
   remainingBalanceDueLabel: "Remaining balance due",
   totalBookingAmountLabel: "Total booking amount",
+  paymentDetailsHeading: "PAYMENT DETAILS",
   ctaLabel: "Complete Payment",
   teamSignature: "The PlanetaEXO Team",
-  closingAgent: (agentName) => `If you need any assistance or would like to discuss your payment, feel free to contact your agent ${agentName} via WhatsApp or email.`,
+  closingAgent: (agentName, contact) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    "If you need any assistance or would like to discuss your payment, feel free to contact your agent ",
+    agentName,
+    " via ",
+    renderWhatsappLink(contact, "WhatsApp"),
+    " or ",
+    renderEmailLink(contact, "email"),
+    "."
+  ] }),
   closingNoAgent: "If you need any assistance or would like to discuss your payment, feel free to contact us via WhatsApp or email.",
+  adventureCard: {
+    travellersHeading: "TRAVELLERS",
+    detailsHeading: "DETAILS",
+    pricesHeading: "PRICES",
+    subtotalLabel: "Subtotal",
+    travellersCountLabel: (n) => `${n} traveller(s)`,
+    lineItemSeparator: "\xD7",
+    lineItemEquals: "="
+  },
   variants: {
     dMinus1: {
       intro: (b, d) => `This is a friendly reminder that the remaining balance for your booking #${b} with PlanetaEXO is due tomorrow (${d}).`,
       secureLine: "To secure your booking, please complete the payment through your booking page using the button below:",
       closingThanks: "Many thanks, and we look forward to helping you experience your next adventure with us.",
       disregardIfPaid: "",
-      closingAlternative: EMPTY_AGENT_FN
+      closingAlternative: EMPTY_CLOSING_ALTERNATIVE
     },
     dZero: {
       intro: (b, d) => `This is a friendly reminder that the remaining balance for your booking #${b} with PlanetaEXO is due today (${d}).`,
       secureLine: "To keep your booking confirmed, please complete the payment through your booking page using the button below:",
       closingThanks: "Many thanks, and we look forward to welcoming you soon.",
       disregardIfPaid: "",
-      closingAlternative: EMPTY_AGENT_FN
+      closingAlternative: EMPTY_CLOSING_ALTERNATIVE
     },
     dPlus1: {
       intro: (b, d) => `We noticed that the remaining balance for your booking #${b} with PlanetaEXO was due yesterday (${d}) and is still pending.`,
       secureLine: "To avoid any impact on your booking confirmation, we kindly ask you to complete the payment as soon as possible through your booking page:",
       closingThanks: "Thank you, and we hope to welcome you on your upcoming adventure soon.",
       disregardIfPaid: "If you have already completed the payment, please disregard this message.",
-      closingAlternative: EMPTY_AGENT_FN
+      closingAlternative: EMPTY_CLOSING_ALTERNATIVE
     },
     dPlus2: {
       intro: (b, d) => `This is a final reminder regarding the remaining balance for your booking #${b} with PlanetaEXO, which was due on ${d} and is still pending.`,
       secureLine: "To avoid any impact on your booking status or availability, we kindly ask you to complete the payment as soon as possible through your booking page:",
       closingThanks: "Thank you for your attention, and we hope to welcome you on this adventure soon.",
       disregardIfPaid: "If you have already completed the payment, please disregard this message.",
-      closingAlternative: (agentName) => `If you are experiencing any issues with payment or need additional time, please contact your agent ${agentName} via WhatsApp or email. We'll be happy to assist.`
+      closingAlternative: (agentName, contact) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        "If you are experiencing any issues with payment or need additional time, please contact your agent ",
+        agentName,
+        " via ",
+        renderWhatsappLink(contact, "WhatsApp"),
+        " or ",
+        renderEmailLink(contact, "email"),
+        ". We'll be happy to assist."
+      ] })
     }
   }
 };
@@ -4464,13 +5150,14 @@ function PaymentReminderEmail({
   totalBookingAmount,
   viewBookingUrl,
   agentName,
+  agentContactLinks,
   logoUrl,
   labels,
   className
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
   const lOverride = labels != null ? labels : {};
-  const variantDefaults = DEFAULT_LABELS4.variants[variant];
+  const variantDefaults = DEFAULT_LABELS6.variants[variant];
   const variantOverride = (_b = (_a = lOverride.variants) == null ? void 0 : _a[variant]) != null ? _b : {};
   const variantLabels = {
     intro: (_c = variantOverride.intro) != null ? _c : variantDefaults.intro,
@@ -4480,17 +5167,19 @@ function PaymentReminderEmail({
     closingAlternative: (_f = variantOverride.closingAlternative) != null ? _f : variantDefaults.closingAlternative
   };
   const l = {
-    logoAlt: (_g = lOverride.logoAlt) != null ? _g : DEFAULT_LABELS4.logoAlt,
-    greeting: (_h = lOverride.greeting) != null ? _h : DEFAULT_LABELS4.greeting,
-    intermediateHello: (_i = lOverride.intermediateHello) != null ? _i : DEFAULT_LABELS4.intermediateHello,
-    bookingSummaryHeader: (_j = lOverride.bookingSummaryHeader) != null ? _j : DEFAULT_LABELS4.bookingSummaryHeader,
-    amountAlreadyPaidLabel: (_k = lOverride.amountAlreadyPaidLabel) != null ? _k : DEFAULT_LABELS4.amountAlreadyPaidLabel,
-    remainingBalanceDueLabel: (_l = lOverride.remainingBalanceDueLabel) != null ? _l : DEFAULT_LABELS4.remainingBalanceDueLabel,
-    totalBookingAmountLabel: (_m = lOverride.totalBookingAmountLabel) != null ? _m : DEFAULT_LABELS4.totalBookingAmountLabel,
-    ctaLabel: (_n = lOverride.ctaLabel) != null ? _n : DEFAULT_LABELS4.ctaLabel,
-    teamSignature: (_o = lOverride.teamSignature) != null ? _o : DEFAULT_LABELS4.teamSignature,
-    closingAgent: (_p = lOverride.closingAgent) != null ? _p : DEFAULT_LABELS4.closingAgent,
-    closingNoAgent: (_q = lOverride.closingNoAgent) != null ? _q : DEFAULT_LABELS4.closingNoAgent
+    logoAlt: (_g = lOverride.logoAlt) != null ? _g : DEFAULT_LABELS6.logoAlt,
+    greeting: (_h = lOverride.greeting) != null ? _h : DEFAULT_LABELS6.greeting,
+    intermediateHello: (_i = lOverride.intermediateHello) != null ? _i : DEFAULT_LABELS6.intermediateHello,
+    bookingSummaryHeader: (_j = lOverride.bookingSummaryHeader) != null ? _j : DEFAULT_LABELS6.bookingSummaryHeader,
+    amountAlreadyPaidLabel: (_k = lOverride.amountAlreadyPaidLabel) != null ? _k : DEFAULT_LABELS6.amountAlreadyPaidLabel,
+    remainingBalanceDueLabel: (_l = lOverride.remainingBalanceDueLabel) != null ? _l : DEFAULT_LABELS6.remainingBalanceDueLabel,
+    totalBookingAmountLabel: (_m = lOverride.totalBookingAmountLabel) != null ? _m : DEFAULT_LABELS6.totalBookingAmountLabel,
+    paymentDetailsHeading: (_n = lOverride.paymentDetailsHeading) != null ? _n : DEFAULT_LABELS6.paymentDetailsHeading,
+    ctaLabel: (_o = lOverride.ctaLabel) != null ? _o : DEFAULT_LABELS6.ctaLabel,
+    teamSignature: (_p = lOverride.teamSignature) != null ? _p : DEFAULT_LABELS6.teamSignature,
+    closingAgent: (_q = lOverride.closingAgent) != null ? _q : DEFAULT_LABELS6.closingAgent,
+    closingNoAgent: (_r = lOverride.closingNoAgent) != null ? _r : DEFAULT_LABELS6.closingNoAgent,
+    adventureCard: __spreadValues(__spreadValues({}, DEFAULT_LABELS6.adventureCard), (_s = lOverride.adventureCard) != null ? _s : {})
   };
   const ctaStyle = {
     display: "inline-block",
@@ -4503,16 +5192,15 @@ function PaymentReminderEmail({
     textDecoration: "none",
     fontFamily: emailTokens.fontFamily
   };
-  const summaryRowStyle = {
-    margin: "0 0 8px",
-    fontSize: "14px",
-    color: emailTokens.foreground
-  };
   const agentNameTrimmed = agentName == null ? void 0 : agentName.trim();
-  const closingMain = agentNameTrimmed ? l.closingAgent(agentNameTrimmed) : l.closingNoAgent;
+  const contact = agentContactLinks != null ? agentContactLinks : {};
+  let closingMainNode;
+  if (variant === "dPlus2") {
+    closingMainNode = agentNameTrimmed ? variantLabels.closingAlternative(agentNameTrimmed, contact) : l.closingNoAgent;
+  } else {
+    closingMainNode = agentNameTrimmed ? l.closingAgent(agentNameTrimmed, contact) : l.closingNoAgent;
+  }
   const showDisregard = typeof variantLabels.disregardIfPaid === "string" && variantLabels.disregardIfPaid.trim().length > 0;
-  const closingAlternativeText = agentNameTrimmed && variantLabels.closingAlternative ? variantLabels.closingAlternative(agentNameTrimmed) : "";
-  const showClosingAlternative = closingAlternativeText.trim().length > 0;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -4559,75 +5247,53 @@ function PaymentReminderEmail({
             children: l.bookingSummaryHeader
           }
         ),
-        adventures.map((adv, advIdx) => /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              marginBottom: "20px",
-              paddingBottom: "16px",
-              borderBottom: advIdx < adventures.length - 1 ? `1px solid ${emailTokens.border}` : "none"
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                "p",
+        adventures.map((adv, advIdx) => {
+          var _a2;
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                marginBottom: advIdx < adventures.length - 1 ? "16px" : "20px"
+              },
+              children: /* @__PURE__ */ jsx(
+                BookingAdventureCard,
                 {
-                  style: {
-                    margin: "0 0 8px",
-                    fontSize: "15px",
-                    fontWeight: 600,
-                    color: emailTokens.foreground
-                  },
-                  children: adv.name
+                  tag: adv.tag,
+                  name: adv.name,
+                  startDate: (_a2 = adv.startDate) != null ? _a2 : "",
+                  endDate: adv.endDate,
+                  travellerCount: adv.travellerCount,
+                  travellers: adv.travellers,
+                  itinerary: adv.itinerary,
+                  lineItems: adv.lineItems.map((li) => ({
+                    unitPrice: li.unitPrice,
+                    quantity: li.quantity,
+                    categoryLabel: li.categoryLabel,
+                    subtotal: li.subtotal
+                  })),
+                  subtotal: adv.subtotal,
+                  labels: l.adventureCard
                 }
-              ),
-              adv.lineItems.map((li, liIdx) => /* @__PURE__ */ jsxs("p", { style: summaryRowStyle, children: [
-                li.unitPrice,
-                " \xD7 ",
-                li.quantity,
-                " ",
-                li.categoryLabel,
-                " =",
-                " ",
-                /* @__PURE__ */ jsx("strong", { children: li.subtotal })
-              ] }, liIdx))
-            ]
-          },
-          advIdx
-        )),
-        /* @__PURE__ */ jsx(
-          "hr",
+              )
+            },
+            advIdx
+          );
+        }),
+        /* @__PURE__ */ jsx("div", { style: { marginTop: "8px", marginBottom: "24px" }, children: /* @__PURE__ */ jsx(
+          PaymentDetailsBlock,
           {
-            style: {
-              border: "none",
-              borderTop: `1px solid ${emailTokens.border}`,
-              marginBottom: "16px"
-            }
+            labels: { heading: l.paymentDetailsHeading },
+            rows: [
+              { label: l.amountAlreadyPaidLabel, value: amountAlreadyPaid },
+              {
+                label: l.remainingBalanceDueLabel,
+                value: remainingBalanceDue,
+                emphasis: true
+              },
+              { label: l.totalBookingAmountLabel, value: totalBookingAmount }
+            ]
           }
-        ),
-        /* @__PURE__ */ jsxs("p", { style: summaryRowStyle, children: [
-          /* @__PURE__ */ jsxs("strong", { children: [
-            l.amountAlreadyPaidLabel,
-            ":"
-          ] }),
-          " ",
-          amountAlreadyPaid
-        ] }),
-        /* @__PURE__ */ jsxs("p", { style: summaryRowStyle, children: [
-          /* @__PURE__ */ jsxs("strong", { children: [
-            l.remainingBalanceDueLabel,
-            ":"
-          ] }),
-          " ",
-          remainingBalanceDue
-        ] }),
-        /* @__PURE__ */ jsxs("p", { style: __spreadProps(__spreadValues({}, summaryRowStyle), { marginBottom: "24px" }), children: [
-          /* @__PURE__ */ jsxs("strong", { children: [
-            l.totalBookingAmountLabel,
-            ":"
-          ] }),
-          " ",
-          totalBookingAmount
-        ] }),
+        ) }),
         showDisregard && /* @__PURE__ */ jsx(
           "p",
           {
@@ -4640,8 +5306,7 @@ function PaymentReminderEmail({
             children: variantLabels.disregardIfPaid
           }
         ),
-        showClosingAlternative && /* @__PURE__ */ jsx("p", { style: { marginBottom: "16px", fontSize: "14px", color: emailTokens.bodyText }, children: closingAlternativeText }),
-        /* @__PURE__ */ jsx("p", { style: { marginBottom: "16px", fontSize: "14px", color: emailTokens.bodyText }, children: closingMain }),
+        /* @__PURE__ */ jsx("p", { style: { marginBottom: "16px", fontSize: "14px", color: emailTokens.bodyText }, children: closingMainNode }),
         /* @__PURE__ */ jsx("p", { style: { marginBottom: "16px", fontSize: "14px", color: emailTokens.bodyText }, children: variantLabels.closingThanks }),
         /* @__PURE__ */ jsx("p", { style: { marginTop: 0, marginBottom: 0, fontSize: "14px", color: emailTokens.bodyText }, children: l.teamSignature })
       ]
@@ -5328,7 +5993,7 @@ function BookingForm({
     }
   );
 }
-var DEFAULT_LABELS5 = {
+var DEFAULT_LABELS7 = {
   formSubtitle: "To confirm your participation, please complete this short form. It's required for all travellers and helps us coordinate logistics with our local partners and tailor the experience to you.",
   detailsSectionTitle: "Your details",
   tripInfoSectionTitle: "Trip info",
@@ -5993,7 +6658,7 @@ function RegistrationForm({
 }) {
   var _a;
   const L = React25.useMemo(
-    () => __spreadValues(__spreadValues({}, DEFAULT_LABELS5), labels != null ? labels : {}),
+    () => __spreadValues(__spreadValues({}, DEFAULT_LABELS7), labels != null ? labels : {}),
     [labels]
   );
   const sortedFields = React25.useMemo(
@@ -10591,6 +11256,6 @@ function LeadCapturePopup({
   );
 }
 
-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, ItineraryDay, LOGO_PLANETAEXO_DATA_URI, LeadCapturePopup, MenuTrip, OTPCodeInput, Offer, OfferAdventureCard, PaymentAmountSelector, PaymentMethodSelector, PaymentModalShell, PaymentReceiptEmail, PaymentReminderEmail, PhoneCountrySelect, PhotoGallery, PricingTrip, RegistrationForm, RegistrationSuccessCard, SiteHeader, TERMS_ACCEPT_KEY, TermsSection, ThemeToggle, Toast, TransferDetailsBlock, TravellerFormInviteEmail, TripCard, TripHeader, TripPage, TrustpilotEmbed, buttonVariants, cn, emailTokens, getStripeAppearance, itineraryDaySpecIcons, stripeAppearance, wrapEmailHtml };
+export { ActivityCard, AgentContactCard, Alert, BirthDateField, BookingAdventureCard, 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, ItineraryDay, LOGO_PLANETAEXO_DATA_URI, LeadCapturePopup, MenuTrip, OTPCodeInput, Offer, OfferAdventureCard, PaymentAmountSelector, PaymentDetailsBlock, PaymentMethodSelector, PaymentModalShell, PaymentReceiptEmail, PaymentReminderEmail, PhoneCountrySelect, PhotoGallery, PricingTrip, RegistrationForm, RegistrationSuccessCard, SiteHeader, TERMS_ACCEPT_KEY, TermsSection, ThemeToggle, Toast, TransferDetailsBlock, TravellerFormInviteEmail, TripCard, TripHeader, TripPage, TrustpilotEmbed, buttonVariants, cn, emailTokens, getStripeAppearance, itineraryDaySpecIcons, stripeAppearance, wrapEmailHtml };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map