@planetaexo/design-system 0.16.0 → 0.18.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;
@@ -1111,6 +1125,16 @@ interface RegistrationSuccessCardProps {
     /** Logo URL displayed above the title. Pass `null` to hide the logo. */
     logo?: string | null;
     logoAlt?: string;
+    /**
+     * Controls the green success check icon rendered above the title.
+     * - `undefined` (default): legacy behavior — check renders only when `logo === undefined`
+     *   (i.e. only when no logo is passed at all). Preserves backward compatibility for
+     *   callers that pass a custom `logo` URL expecting it to replace the check.
+     * - `true`: always renders the check icon, independently of `logo`. Use this when you
+     *   want a standalone logo (rendered outside the card) but still want the check inside.
+     * - `false`: never renders the check icon.
+     */
+    showSuccessIcon?: boolean;
     /** Terms section rendered at the bottom of the card. */
     terms?: {
         markdown: string;
@@ -1167,7 +1191,7 @@ interface RegistrationSuccessCardProps {
      */
     labels?: RegistrationFormLabels;
 }
-declare function RegistrationSuccessCard({ variant, title, message, answersTitle, fields, answers, dateFormatter, formatAnswer, className, actions, logo, logoAlt, terms, termsLayout, termsLabels, adventure, booking, traveller, tripInfoLabels, density, submissionTimestamps, submissionTimestampsLabels, labels: scLabels, }: RegistrationSuccessCardProps): react_jsx_runtime.JSX.Element;
+declare function RegistrationSuccessCard({ variant, title, message, answersTitle, fields, answers, dateFormatter, formatAnswer, className, actions, logo, logoAlt, showSuccessIcon, terms, termsLayout, termsLabels, adventure, booking, traveller, tripInfoLabels, density, submissionTimestamps, submissionTimestampsLabels, labels: scLabels, }: RegistrationSuccessCardProps): react_jsx_runtime.JSX.Element;
 
 interface FloatingInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     label: 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;
@@ -1111,6 +1125,16 @@ interface RegistrationSuccessCardProps {
     /** Logo URL displayed above the title. Pass `null` to hide the logo. */
     logo?: string | null;
     logoAlt?: string;
+    /**
+     * Controls the green success check icon rendered above the title.
+     * - `undefined` (default): legacy behavior — check renders only when `logo === undefined`
+     *   (i.e. only when no logo is passed at all). Preserves backward compatibility for
+     *   callers that pass a custom `logo` URL expecting it to replace the check.
+     * - `true`: always renders the check icon, independently of `logo`. Use this when you
+     *   want a standalone logo (rendered outside the card) but still want the check inside.
+     * - `false`: never renders the check icon.
+     */
+    showSuccessIcon?: boolean;
     /** Terms section rendered at the bottom of the card. */
     terms?: {
         markdown: string;
@@ -1167,7 +1191,7 @@ interface RegistrationSuccessCardProps {
      */
     labels?: RegistrationFormLabels;
 }
-declare function RegistrationSuccessCard({ variant, title, message, answersTitle, fields, answers, dateFormatter, formatAnswer, className, actions, logo, logoAlt, terms, termsLayout, termsLabels, adventure, booking, traveller, tripInfoLabels, density, submissionTimestamps, submissionTimestampsLabels, labels: scLabels, }: RegistrationSuccessCardProps): react_jsx_runtime.JSX.Element;
+declare function RegistrationSuccessCard({ variant, title, message, answersTitle, fields, answers, dateFormatter, formatAnswer, className, actions, logo, logoAlt, showSuccessIcon, terms, termsLayout, termsLabels, adventure, booking, traveller, tripInfoLabels, density, submissionTimestamps, submissionTimestampsLabels, labels: scLabels, }: RegistrationSuccessCardProps): react_jsx_runtime.JSX.Element;
 
 interface FloatingInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     label: 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) })
-        ] })
+        ] }) })
       ]
     }
   );
@@ -6034,6 +6045,7 @@ function RegistrationSuccessCard({
   actions,
   logo,
   logoAlt = "PlanetaEXO",
+  showSuccessIcon,
   terms,
   termsLayout = "summary",
   termsLabels,
@@ -6087,7 +6099,7 @@ function RegistrationSuccessCard({
               className: "h-10 w-auto object-contain"
             }
           ),
-          logo === void 0 && /* @__PURE__ */ jsx("div", { className: "inline-flex h-14 w-14 items-center justify-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(CircleCheckIcon, { size: 28 }) }),
+          (showSuccessIcon != null ? showSuccessIcon : logo === void 0) && /* @__PURE__ */ jsx("div", { className: "inline-flex h-14 w-14 items-center justify-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(CircleCheckIcon, { size: 28 }) }),
           /* @__PURE__ */ jsx("h2", { className: "text-2xl font-black uppercase tracking-wide text-foreground font-heading leading-tight", children: title }),
           message && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground font-ui", children: message })
         ] }),