@planetaexo/design-system 0.16.0 → 0.17.0

package/dist/index.d.cts

@@ -676,6 +676,12 @@ interface BookingConfirmationLabels {
     paidInFullLabel?: string;
     footerMessage?: string;
     footerContact?: (agent: string) => string;
+    /**
+     * Mensagem opcional renderizada antes do CTA quando `flow="manual"`. Usado
+     * para variantes de e-mail enviadas pelo agente manualmente (ex.: "You can
+     * access your booking at any time through the link below."). Default vazio.
+     */
+    closingMessage?: string;
 }
 interface ConfirmationLineItem {
     label: string;
@@ -752,8 +758,16 @@ interface BookingConfirmationProps {
     labels?: Partial<BookingConfirmationLabels>;
     /** className adicional no container */
     className?: string;
+    /**
+     * Variante de fluxo de envio:
+     * - `"auto"` (default) — fluxo normal (greeting + confirmação + intro + CTA topo + nextSteps + booking + footer com agente).
+     * - `"manual"` — variante para reenvio manual pelo agente: oculta `nextSteps`,
+     *   oculta CTA do topo, oculta `footerMessage`/`footerContact`, e renderiza
+     *   `closingMessage` + CTA ao FINAL do corpo.
+     */
+    flow?: "auto" | "manual";
 }
-declare function BookingConfirmation({ recipientName, logoUrl, bookingReference, adventures, summaryLineItems, subtotal, total, depositInfo, agent, viewBookingUrl, labels, className, }: BookingConfirmationProps): react_jsx_runtime.JSX.Element;
+declare function BookingConfirmation({ recipientName, logoUrl, bookingReference, adventures, summaryLineItems, subtotal, total, depositInfo, agent, viewBookingUrl, labels, className, flow, }: BookingConfirmationProps): react_jsx_runtime.JSX.Element;
 
 interface BookingConfirmationEmailLabels {
     ctaButton?: string;

package/dist/index.d.ts

@@ -676,6 +676,12 @@ interface BookingConfirmationLabels {
     paidInFullLabel?: string;
     footerMessage?: string;
     footerContact?: (agent: string) => string;
+    /**
+     * Mensagem opcional renderizada antes do CTA quando `flow="manual"`. Usado
+     * para variantes de e-mail enviadas pelo agente manualmente (ex.: "You can
+     * access your booking at any time through the link below."). Default vazio.
+     */
+    closingMessage?: string;
 }
 interface ConfirmationLineItem {
     label: string;
@@ -752,8 +758,16 @@ interface BookingConfirmationProps {
     labels?: Partial<BookingConfirmationLabels>;
     /** className adicional no container */
     className?: string;
+    /**
+     * Variante de fluxo de envio:
+     * - `"auto"` (default) — fluxo normal (greeting + confirmação + intro + CTA topo + nextSteps + booking + footer com agente).
+     * - `"manual"` — variante para reenvio manual pelo agente: oculta `nextSteps`,
+     *   oculta CTA do topo, oculta `footerMessage`/`footerContact`, e renderiza
+     *   `closingMessage` + CTA ao FINAL do corpo.
+     */
+    flow?: "auto" | "manual";
 }
-declare function BookingConfirmation({ recipientName, logoUrl, bookingReference, adventures, summaryLineItems, subtotal, total, depositInfo, agent, viewBookingUrl, labels, className, }: BookingConfirmationProps): react_jsx_runtime.JSX.Element;
+declare function BookingConfirmation({ recipientName, logoUrl, bookingReference, adventures, summaryLineItems, subtotal, total, depositInfo, agent, viewBookingUrl, labels, className, flow, }: BookingConfirmationProps): react_jsx_runtime.JSX.Element;
 
 interface BookingConfirmationEmailLabels {
     ctaButton?: string;

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: [
@@ -4028,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 })
               ] }),
@@ -4041,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) })
-        ] })
+        ] }) })
       ]
     }
   );