@planetaexo/design-system 0.15.1 → 0.17.0

package/dist/index.js

@@ -3787,7 +3787,8 @@ var DEFAULT_LABELS = {
   balanceDueLabel: "Balance due",
   paidInFullLabel: "\u2705 Paid in full",
   footerMessage: "All travellers have been registered for this booking. Each person will receive a separate email with their individual details and any pre-departure information.",
-  footerContact: (agent) => `If you have any questions, just reply to this email or contact ${agent} \u2014 happy to help.`
+  footerContact: (agent) => `If you have any questions, just reply to this email or contact ${agent} \u2014 happy to help.`,
+  closingMessage: "You can access your booking at any time through the link below."
 };
 function BookingConfirmation({
   recipientName,
@@ -3801,13 +3802,15 @@ function BookingConfirmation({
   agent,
   viewBookingUrl,
   labels,
-  className
+  className,
+  flow = "auto"
 }) {
   const l = __spreadValues(__spreadValues({}, DEFAULT_LABELS), labels);
   const allTravellers = adventures.flatMap((a) => {
     var _a;
     return (_a = a.travellers) != null ? _a : [];
   });
+  const isManualFlow = flow === "manual";
   const ctaStyle = {
     display: "inline-block",
     backgroundColor: emailTokens.primary,
@@ -3840,31 +3843,33 @@ function BookingConfirmation({
         /* @__PURE__ */ jsx(EmailLogo, { src: logoUrl, alt: l.logoAlt, paddingTop: "40px", paddingX: "32px" }),
         /* @__PURE__ */ jsxs("div", { style: { paddingLeft: "32px", paddingRight: "32px" }, children: [
           /* @__PURE__ */ jsx("p", { style: { marginBottom: "20px", marginTop: 0, fontSize: "16px" }, children: l.greeting(recipientName) }),
-          /* @__PURE__ */ jsx("p", { style: { marginBottom: "20px", marginTop: 0, fontSize: "16px" }, children: l.confirmationMessage }),
-          /* @__PURE__ */ jsx("p", { style: { marginBottom: "32px", marginTop: 0, fontSize: "16px" }, children: l.detailsIntro }),
-          /* @__PURE__ */ jsx("div", { style: { marginBottom: "40px" }, children: ViewBookingCta })
+          /* @__PURE__ */ jsx("p", { style: { marginBottom: isManualFlow ? "32px" : "20px", marginTop: 0, fontSize: "16px" }, children: l.confirmationMessage }),
+          !isManualFlow && /* @__PURE__ */ jsx("p", { style: { marginBottom: "32px", marginTop: 0, fontSize: "16px" }, children: l.detailsIntro }),
+          !isManualFlow && /* @__PURE__ */ jsx("div", { style: { marginBottom: "40px" }, children: ViewBookingCta })
         ] }),
         /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } }),
-        /* @__PURE__ */ jsxs("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "32px" }, children: [
-          /* @__PURE__ */ jsx("p", { style: { marginTop: 0, marginBottom: "20px", fontWeight: "700", color: emailTokens.foreground, fontSize: "18px", fontFamily: emailTokens.fontFamily }, children: l.nextStepsHeading }),
-          /* @__PURE__ */ jsx("div", { style: { borderRadius: "12px", border: `1px solid ${emailTokens.border}`, padding: "20px" }, children: l.nextSteps.map((step, i) => /* @__PURE__ */ jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", width: "100%", marginBottom: i < l.nextSteps.length - 1 ? "16px" : "0" }, children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", { children: [
-            /* @__PURE__ */ jsx("td", { style: { verticalAlign: "top", width: "32px", paddingRight: "14px" }, children: /* @__PURE__ */ jsx("span", { style: {
-              display: "inline-block",
-              height: "24px",
-              width: "24px",
-              lineHeight: "24px",
-              textAlign: "center",
-              borderRadius: "9999px",
-              backgroundColor: emailTokens.primaryLight,
-              fontSize: "12px",
-              fontWeight: "700",
-              color: emailTokens.primary,
-              marginTop: "2px"
-            }, children: i + 1 }) }),
-            /* @__PURE__ */ jsx("td", { style: { verticalAlign: "top" }, children: /* @__PURE__ */ jsx("p", { style: { fontSize: "14px", color: emailTokens.bodyText, lineHeight: "1.6", margin: 0 }, children: step }) })
-          ] }) }) }, i)) })
+        !isManualFlow && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "32px" }, children: [
+            /* @__PURE__ */ jsx("p", { style: { marginTop: 0, marginBottom: "20px", fontWeight: "700", color: emailTokens.foreground, fontSize: "18px", fontFamily: emailTokens.fontFamily }, children: l.nextStepsHeading }),
+            /* @__PURE__ */ jsx("div", { style: { borderRadius: "12px", border: `1px solid ${emailTokens.border}`, padding: "20px" }, children: l.nextSteps.map((step, i) => /* @__PURE__ */ jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", width: "100%", marginBottom: i < l.nextSteps.length - 1 ? "16px" : "0" }, children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", { children: [
+              /* @__PURE__ */ jsx("td", { style: { verticalAlign: "top", width: "32px", paddingRight: "14px" }, children: /* @__PURE__ */ jsx("span", { style: {
+                display: "inline-block",
+                height: "24px",
+                width: "24px",
+                lineHeight: "24px",
+                textAlign: "center",
+                borderRadius: "9999px",
+                backgroundColor: emailTokens.primaryLight,
+                fontSize: "12px",
+                fontWeight: "700",
+                color: emailTokens.primary,
+                marginTop: "2px"
+              }, children: i + 1 }) }),
+              /* @__PURE__ */ jsx("td", { style: { verticalAlign: "top" }, children: /* @__PURE__ */ jsx("p", { style: { fontSize: "14px", color: emailTokens.bodyText, lineHeight: "1.6", margin: 0 }, children: step }) })
+            ] }) }) }, i)) })
+          ] }),
+          /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } })
         ] }),
-        /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } }),
         /* @__PURE__ */ jsxs("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "32px" }, children: [
           /* @__PURE__ */ jsx("p", { style: { marginTop: 0, marginBottom: "20px", fontWeight: "700", color: emailTokens.foreground, fontSize: "18px", fontFamily: emailTokens.fontFamily }, children: l.bookingSummaryHeading }),
           /* @__PURE__ */ jsx("div", { style: { borderRadius: "12px", border: `1px solid ${emailTokens.border}`, overflow: "hidden" }, children: /* @__PURE__ */ jsx("table", { style: { width: "100%", fontSize: "14px", borderCollapse: "collapse" }, children: /* @__PURE__ */ jsxs("tbody", { children: [
@@ -3888,7 +3893,7 @@ 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;
+          var _a, _b, _c, _d, _e;
           return /* @__PURE__ */ jsxs(
             "div",
             {
@@ -3909,7 +3914,7 @@ function BookingConfirmation({
                   }
                 ) }),
                 /* @__PURE__ */ jsxs("div", { style: { padding: "20px" }, children: [
-                  adventure.reference && /* @__PURE__ */ jsx("div", { style: { marginBottom: "10px" }, children: /* @__PURE__ */ jsx("span", { style: {
+                  ((_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,
@@ -3918,46 +3923,30 @@ function BookingConfirmation({
                     fontSize: "12px",
                     fontWeight: "600",
                     letterSpacing: "0.05em"
-                  }, children: adventure.reference }) }),
+                  }, 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: "14px" }, children: /* @__PURE__ */ jsxs("svg", { style: { display: "block", width: "14px", height: "14px", color: emailTokens.primary }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                      /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", ry: "2" }),
-                      /* @__PURE__ */ jsx("line", { x1: "16", x2: "16", y1: "2", y2: "6" }),
-                      /* @__PURE__ */ jsx("line", { x1: "8", x2: "8", y1: "2", y2: "6" }),
-                      /* @__PURE__ */ jsx("line", { x1: "3", x2: "21", y1: "10", y2: "10" })
-                    ] }) }),
+                    /* @__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 && /* @__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: "14px" }, children: /* @__PURE__ */ jsxs("svg", { style: { display: "block", width: "14px", height: "14px", color: emailTokens.primary }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                      /* @__PURE__ */ jsx("path", { d: "M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" }),
-                      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "10", r: "3" })
-                    ] }) }),
+                  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: "14px" }, children: /* @__PURE__ */ jsxs("svg", { style: { display: "block", width: "14px", height: "14px", color: emailTokens.primary }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                      /* @__PURE__ */ jsx("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }),
-                      /* @__PURE__ */ jsx("circle", { cx: "9", cy: "7", r: "4" }),
-                      /* @__PURE__ */ jsx("path", { d: "M22 21v-2a4 4 0 0 0-3-3.87" }),
-                      /* @__PURE__ */ jsx("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })
-                    ] }) }),
+                    /* @__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 ") })
                   ] }) }) }),
-                  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: "14px" }, children: /* @__PURE__ */ jsxs("svg", { style: { display: "block", width: "14px", height: "14px", color: emailTokens.primary }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
-                      /* @__PURE__ */ jsx("polygon", { points: "16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76" })
-                    ] }) }),
-                    /* @__PURE__ */ jsx("td", { style: { verticalAlign: "middle", fontSize: "14px", color: emailTokens.mutedForeground, lineHeight: "1" }, children: adventure.partner })
+                  ((_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" } }),
@@ -3985,17 +3974,14 @@ function BookingConfirmation({
                   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("svg", { style: { display: "block", width: "16px", height: "16px", color: emailTokens.primary, marginTop: "2px" }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }) }),
+                      /* @__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__ */ jsxs("svg", { style: { display: "block", width: "16px", height: "16px", color: emailTokens.destructive, marginTop: "2px" }, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                        /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
-                        /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
-                      ] }) }),
+                      /* @__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))
                   ] }),
@@ -4047,11 +4033,11 @@ function BookingConfirmation({
                 /* @__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: { borderBottom: `1px solid ${emailTokens.border}` }, children: [
+              /* @__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 })
               ] }),
-              /* @__PURE__ */ jsxs("tr", { style: depositInfo.isPaidInFull ? { borderBottom: `1px solid ${emailTokens.border}` } : {}, children: [
+              !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 })
               ] }),
@@ -4060,10 +4046,16 @@ function BookingConfirmation({
           ] })
         ] }),
         /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } }),
-        /* @__PURE__ */ jsxs("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "40px" }, children: [
+        /* @__PURE__ */ jsx("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "40px" }, children: isManualFlow ? (
+          // Manual flow: closing message + CTA no rodapé (substitui footerMessage/footerContact).
+          /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("p", { style: { marginTop: 0, marginBottom: "32px", fontSize: "16px" }, children: l.closingMessage }),
+            /* @__PURE__ */ jsx("div", { children: ViewBookingCta })
+          ] })
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("p", { style: { marginTop: 0, marginBottom: "20px", fontSize: "16px" }, children: l.footerMessage }),
           /* @__PURE__ */ jsx("p", { style: { marginTop: 0, marginBottom: 0, fontSize: "16px" }, children: l.footerContact(agent) })
-        ] })
+        ] }) })
       ]
     }
   );
@@ -4188,6 +4180,141 @@ function BookingConfirmationEmail({
     }
   );
 }
+var DEFAULT_LABELS3 = {
+  logoAlt: "PlanetaEXO",
+  greeting: (name) => `Hi ${name},`,
+  receiptHeading: "Payment receipt",
+  bookingNumberLabel: "Booking number",
+  paymentMethodLabel: "Payment method",
+  paymentDateLabel: "Payment date",
+  amountLabel: "Amount",
+  chargedAmountLabel: "Charged amount",
+  interestSurchargeLabel: "Interest / surcharge",
+  statusLabel: "Status",
+  travellersLabel: "Travellers",
+  summaryHeading: "Booking summary",
+  totalOrderLabel: "Total order",
+  totalPaidLabel: "Total paid",
+  remainingBalanceLabel: "Remaining balance",
+  balanceDueDateLabel: "Balance due",
+  paidInFullMessage: "\u2705 Paid in full",
+  closingMessage: "If you have any questions, just reply to this email \u2014 happy to help.",
+  teamSignature: "PlanetaEXO Team"
+};
+function PaymentReceiptEmail({
+  recipientName,
+  bookingNumber,
+  paymentMethodLabel,
+  paymentDate,
+  amount,
+  chargedAmount,
+  statusLabel,
+  travellers,
+  totalOrderAmount,
+  totalPaidCumulative,
+  remainingBalance,
+  balanceDueDate,
+  isPaidInFull,
+  logoUrl,
+  labels,
+  className
+}) {
+  const l = __spreadValues(__spreadValues({}, DEFAULT_LABELS3), labels);
+  const travellersLine = travellers.filter((s) => s.trim().length > 0).join(", ");
+  const interestRow = chargedAmount && chargedAmount !== amount;
+  const receiptRows = [
+    { label: l.bookingNumberLabel, value: bookingNumber },
+    { label: l.paymentMethodLabel, value: paymentMethodLabel },
+    { label: l.paymentDateLabel, value: paymentDate },
+    { label: l.amountLabel, value: amount },
+    ...interestRow ? [{ label: l.chargedAmountLabel, value: chargedAmount }] : [],
+    { label: l.statusLabel, value: statusLabel },
+    ...travellersLine.length > 0 ? [{ label: l.travellersLabel, value: travellersLine }] : []
+  ];
+  const summaryRows = [
+    { label: l.totalOrderLabel, value: totalOrderAmount },
+    { label: l.totalPaidLabel, value: totalPaidCumulative },
+    { label: l.remainingBalanceLabel, value: remainingBalance },
+    ...balanceDueDate ? [{ label: l.balanceDueDateLabel, value: balanceDueDate }] : []
+  ];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        maxWidth: "576px",
+        margin: "0 auto",
+        backgroundColor: emailTokens.white,
+        color: emailTokens.foreground,
+        fontFamily: emailTokens.fontFamily,
+        fontSize: "16px",
+        lineHeight: "1.6",
+        border: `1px solid ${emailTokens.border}`,
+        borderRadius: "12px",
+        overflow: "hidden",
+        padding: "32px"
+      },
+      className,
+      children: [
+        /* @__PURE__ */ jsx(EmailLogo, { src: logoUrl, alt: l.logoAlt }),
+        /* @__PURE__ */ jsx("p", { style: { marginBottom: "16px" }, children: l.greeting(recipientName) }),
+        /* @__PURE__ */ jsx("p", { style: { marginBottom: "12px", fontWeight: 700, color: emailTokens.foreground, fontSize: "16px" }, children: l.receiptHeading }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              borderRadius: "12px",
+              border: `1px solid ${emailTokens.border}`,
+              padding: "20px",
+              marginBottom: "24px"
+            },
+            children: /* @__PURE__ */ jsx("table", { style: { width: "100%", fontSize: "14px", borderCollapse: "collapse" }, children: /* @__PURE__ */ jsxs("tbody", { children: [
+              receiptRows.map((row, i) => /* @__PURE__ */ jsxs("tr", { style: i > 0 ? { borderTop: `1px solid ${emailTokens.border}` } : {}, children: [
+                /* @__PURE__ */ jsx("td", { style: { padding: "8px 12px 8px 0", color: emailTokens.mutedForeground, verticalAlign: "top", whiteSpace: "nowrap" }, children: row.label }),
+                /* @__PURE__ */ jsx("td", { style: { padding: "8px 0", fontWeight: 500, color: emailTokens.foreground, verticalAlign: "top" }, children: row.value })
+              ] }, i)),
+              interestRow && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 2, style: { paddingTop: "8px", fontSize: "12px", color: emailTokens.mutedForeground, fontStyle: "italic" }, children: l.interestSurchargeLabel }) })
+            ] }) })
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { style: { marginBottom: "12px", fontWeight: 700, color: emailTokens.foreground, fontSize: "16px" }, children: l.summaryHeading }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              borderRadius: "12px",
+              border: `1px solid ${emailTokens.border}`,
+              overflow: "hidden",
+              marginBottom: "24px"
+            },
+            children: /* @__PURE__ */ jsx("table", { style: { width: "100%", fontSize: "14px", borderCollapse: "collapse" }, children: /* @__PURE__ */ jsxs("tbody", { children: [
+              summaryRows.map((row, i) => /* @__PURE__ */ jsxs("tr", { style: i > 0 ? { borderTop: `1px solid ${emailTokens.border}` } : {}, children: [
+                /* @__PURE__ */ jsx("td", { style: { padding: "10px 16px", color: emailTokens.mutedForeground, verticalAlign: "top" }, children: row.label }),
+                /* @__PURE__ */ jsx("td", { style: { padding: "10px 16px", textAlign: "right", fontWeight: 500, color: emailTokens.foreground, whiteSpace: "nowrap" }, children: row.value })
+              ] }, i)),
+              isPaidInFull && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+                "td",
+                {
+                  colSpan: 2,
+                  style: {
+                    padding: "12px 16px",
+                    textAlign: "center",
+                    fontWeight: 600,
+                    color: emailTokens.green,
+                    backgroundColor: emailTokens.greenBg,
+                    borderTop: `1px solid ${emailTokens.border}`
+                  },
+                  children: l.paidInFullMessage
+                }
+              ) })
+            ] }) })
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { style: { marginBottom: "16px", fontSize: "14px", color: emailTokens.bodyText }, children: l.closingMessage }),
+        /* @__PURE__ */ jsx("p", { style: { marginTop: 0, marginBottom: 0, fontSize: "14px", color: emailTokens.bodyText }, children: l.teamSignature })
+      ]
+    }
+  );
+}
 function BookingOtpEmail({
   greeting,
   intro,
@@ -4868,7 +4995,7 @@ function BookingForm({
     }
   );
 }
-var DEFAULT_LABELS3 = {
+var DEFAULT_LABELS4 = {
   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",
@@ -5532,7 +5659,7 @@ function RegistrationForm({
 }) {
   var _a;
   const L = React23.useMemo(
-    () => __spreadValues(__spreadValues({}, DEFAULT_LABELS3), labels != null ? labels : {}),
+    () => __spreadValues(__spreadValues({}, DEFAULT_LABELS4), labels != null ? labels : {}),
     [labels]
   );
   const sortedFields = React23.useMemo(
@@ -9595,6 +9722,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, 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, PaymentReceiptEmail, 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