@planetaexo/design-system 0.16.0 → 0.17.0

package/dist/index.cjs

@@ -3808,7 +3808,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,
@@ -3822,13 +3823,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,
@@ -3861,31 +3864,33 @@ function BookingConfirmation({
         /* @__PURE__ */ jsxRuntime.jsx(EmailLogo, { src: logoUrl, alt: l.logoAlt, paddingTop: "40px", paddingX: "32px" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { paddingLeft: "32px", paddingRight: "32px" }, children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "20px", marginTop: 0, fontSize: "16px" }, children: l.greeting(recipientName) }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "20px", marginTop: 0, fontSize: "16px" }, children: l.confirmationMessage }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "32px", marginTop: 0, fontSize: "16px" }, children: l.detailsIntro }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: "40px" }, children: ViewBookingCta })
+          /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: isManualFlow ? "32px" : "20px", marginTop: 0, fontSize: "16px" }, children: l.confirmationMessage }),
+          !isManualFlow && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "32px", marginTop: 0, fontSize: "16px" }, children: l.detailsIntro }),
+          !isManualFlow && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: "40px" }, children: ViewBookingCta })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "32px" }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginTop: 0, marginBottom: "20px", fontWeight: "700", color: emailTokens.foreground, fontSize: "18px", fontFamily: emailTokens.fontFamily }, children: l.nextStepsHeading }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { borderRadius: "12px", border: `1px solid ${emailTokens.border}`, padding: "20px" }, children: l.nextSteps.map((step, i) => /* @__PURE__ */ jsxRuntime.jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", width: "100%", marginBottom: i < l.nextSteps.length - 1 ? "16px" : "0" }, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "top", width: "32px", paddingRight: "14px" }, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "top" }, children: /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "14px", color: emailTokens.bodyText, lineHeight: "1.6", margin: 0 }, children: step }) })
-          ] }) }) }, i)) })
+        !isManualFlow && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "32px" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginTop: 0, marginBottom: "20px", fontWeight: "700", color: emailTokens.foreground, fontSize: "18px", fontFamily: emailTokens.fontFamily }, children: l.nextStepsHeading }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { borderRadius: "12px", border: `1px solid ${emailTokens.border}`, padding: "20px" }, children: l.nextSteps.map((step, i) => /* @__PURE__ */ jsxRuntime.jsx("table", { cellPadding: "0", cellSpacing: "0", style: { borderCollapse: "collapse", width: "100%", marginBottom: i < l.nextSteps.length - 1 ? "16px" : "0" }, children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "top", width: "32px", paddingRight: "14px" }, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("td", { style: { verticalAlign: "top" }, children: /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "14px", color: emailTokens.bodyText, lineHeight: "1.6", margin: 0 }, children: step }) })
+            ] }) }) }, i)) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "32px" }, children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginTop: 0, marginBottom: "20px", fontWeight: "700", color: emailTokens.foreground, fontSize: "18px", fontFamily: emailTokens.fontFamily }, children: l.bookingSummaryHeading }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: { borderRadius: "12px", border: `1px solid ${emailTokens.border}`, overflow: "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx("table", { style: { width: "100%", fontSize: "14px", borderCollapse: "collapse" }, children: /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
@@ -4049,11 +4054,11 @@ function BookingConfirmation({
                 /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", color: emailTokens.mutedForeground }, children: l.depositLabel(depositInfo.depositPercent) }),
                 /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", textAlign: "right", fontWeight: "500", color: emailTokens.foreground, whiteSpace: "nowrap" }, children: depositInfo.depositAmount })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: { borderBottom: `1px solid ${emailTokens.border}` }, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: depositInfo.isPaidInFull ? {} : { borderBottom: `1px solid ${emailTokens.border}` }, children: [
                 /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", color: emailTokens.mutedForeground }, children: l.remainingBalanceLabel }),
                 /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", textAlign: "right", fontWeight: "500", color: emailTokens.foreground, whiteSpace: "nowrap" }, children: depositInfo.remainingAmount })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: depositInfo.isPaidInFull ? { borderBottom: `1px solid ${emailTokens.border}` } : {}, children: [
+              !depositInfo.isPaidInFull && /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
                 /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", color: emailTokens.mutedForeground }, children: l.balanceDueLabel }),
                 /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", textAlign: "right", fontWeight: "500", color: emailTokens.foreground, whiteSpace: "nowrap" }, children: depositInfo.balanceDueDate })
               ] }),
@@ -4062,10 +4067,16 @@ function BookingConfirmation({
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { border: "none", borderTop: `1px solid ${emailTokens.border}`, margin: "0 32px" } }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "40px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "40px" }, children: isManualFlow ? (
+          // Manual flow: closing message + CTA no rodapé (substitui footerMessage/footerContact).
+          /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginTop: 0, marginBottom: "32px", fontSize: "16px" }, children: l.closingMessage }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { children: ViewBookingCta })
+          ] })
+        ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginTop: 0, marginBottom: "20px", fontSize: "16px" }, children: l.footerMessage }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginTop: 0, marginBottom: 0, fontSize: "16px" }, children: l.footerContact(agent) })
-        ] })
+        ] }) })
       ]
     }
   );