@planetaexo/design-system 0.31.0 → 0.33.0

package/dist/index.d.cts

@@ -1090,16 +1090,21 @@ interface BookingSummaryProps {
 /**
  * Bloco "Booking summary" reusável entre os e-mails transacionais.
  *
- * Visual: card encaixotado (borderRadius 12px + border 1px) com padding 10px
- * nas células, separadores entre rows, value alinhado à direita com
- * `whiteSpace: nowrap`. Heading em 16px / fontWeight 700, externo ao card.
+ * Visual (canônico, espelhando o markup original do BookingPaymentConfirmationEmail):
+ * - heading 18px / fontWeight 700 / marginBottom 20px
+ * - card encaixotado (borderRadius 12px + border 1px)
+ * - cells com padding 12px 20px
+ * - label com `backgroundColor: t.muted` (coluna esquerda destacada)
+ * - value alinhado à esquerda; `valueColor` opcional por row (ex.: Booking Number em verde)
+ * - quando valueColor === t.primary, fontWeight do value vira 600 (paridade BookingPaymentConfirmation)
+ * - separador entre rows via `borderBottom` (na última row sem footer fica sem borda)
  *
- * Histórico: bloco originalmente inline em `BookingCreatedEmail.tsx`
- * (extraído na v0.29.0 — então chamado `BookingConfirmationEmail`) e duplicado
- * também inline em `PaymentReceiptEmail.tsx` com visual ligeiramente diferente.
- * Consolidado num único componente na v0.30.x — todos os e-mails
- * (`BookingCreatedEmail`, `PaymentReceiptEmail`, `RegistrationReminderEmail`)
- * usam exatamente o mesmo markup.
+ * Histórico: bloco originalmente inline em `BookingCreatedEmail.tsx` (extraído na
+ * v0.29.0) e duplicado também inline em `PaymentReceiptEmail.tsx` e
+ * `BookingPaymentConfirmationEmail.tsx`. Consolidado num único componente na
+ * v0.32.x — todos os 4 e-mails (`BookingPaymentConfirmationEmail`,
+ * `BookingCreatedEmail`, `PaymentReceiptEmail`, `RegistrationReminderEmail`)
+ * agora usam exatamente o mesmo markup.
  */
 declare function BookingSummary({ heading, rows, footer, className }: BookingSummaryProps): react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -1090,16 +1090,21 @@ interface BookingSummaryProps {
 /**
  * Bloco "Booking summary" reusável entre os e-mails transacionais.
  *
- * Visual: card encaixotado (borderRadius 12px + border 1px) com padding 10px
- * nas células, separadores entre rows, value alinhado à direita com
- * `whiteSpace: nowrap`. Heading em 16px / fontWeight 700, externo ao card.
+ * Visual (canônico, espelhando o markup original do BookingPaymentConfirmationEmail):
+ * - heading 18px / fontWeight 700 / marginBottom 20px
+ * - card encaixotado (borderRadius 12px + border 1px)
+ * - cells com padding 12px 20px
+ * - label com `backgroundColor: t.muted` (coluna esquerda destacada)
+ * - value alinhado à esquerda; `valueColor` opcional por row (ex.: Booking Number em verde)
+ * - quando valueColor === t.primary, fontWeight do value vira 600 (paridade BookingPaymentConfirmation)
+ * - separador entre rows via `borderBottom` (na última row sem footer fica sem borda)
  *
- * Histórico: bloco originalmente inline em `BookingCreatedEmail.tsx`
- * (extraído na v0.29.0 — então chamado `BookingConfirmationEmail`) e duplicado
- * também inline em `PaymentReceiptEmail.tsx` com visual ligeiramente diferente.
- * Consolidado num único componente na v0.30.x — todos os e-mails
- * (`BookingCreatedEmail`, `PaymentReceiptEmail`, `RegistrationReminderEmail`)
- * usam exatamente o mesmo markup.
+ * Histórico: bloco originalmente inline em `BookingCreatedEmail.tsx` (extraído na
+ * v0.29.0) e duplicado também inline em `PaymentReceiptEmail.tsx` e
+ * `BookingPaymentConfirmationEmail.tsx`. Consolidado num único componente na
+ * v0.32.x — todos os 4 e-mails (`BookingPaymentConfirmationEmail`,
+ * `BookingCreatedEmail`, `PaymentReceiptEmail`, `RegistrationReminderEmail`)
+ * agora usam exatamente o mesmo markup.
  */
 declare function BookingSummary({ heading, rows, footer, className }: BookingSummaryProps): react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -4451,6 +4451,98 @@ function BookingAdventureCard({
     }
   );
 }
+function BookingSummary({ heading, rows, footer, className }) {
+  var _a, _b;
+  return /* @__PURE__ */ jsxs("div", { className, style: { marginBottom: "24px" }, children: [
+    /* @__PURE__ */ jsx(
+      "p",
+      {
+        style: {
+          marginTop: 0,
+          marginBottom: "20px",
+          fontWeight: 700,
+          color: emailTokens.foreground,
+          fontSize: "18px",
+          fontFamily: emailTokens.fontFamily
+        },
+        children: heading
+      }
+    ),
+    /* @__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: [
+              rows.map((row, i) => {
+                var _a2;
+                const isLastRowWithoutFooter = i === rows.length - 1 && !footer;
+                return /* @__PURE__ */ jsxs(
+                  "tr",
+                  {
+                    style: !isLastRowWithoutFooter ? { borderBottom: `1px solid ${emailTokens.border}` } : {},
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "td",
+                        {
+                          style: {
+                            padding: "12px 20px",
+                            color: emailTokens.mutedForeground,
+                            backgroundColor: emailTokens.muted,
+                            verticalAlign: "top"
+                          },
+                          children: row.label
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "td",
+                        {
+                          style: {
+                            padding: "12px 20px",
+                            fontWeight: row.valueColor === emailTokens.primary ? 600 : 500,
+                            color: (_a2 = row.valueColor) != null ? _a2 : emailTokens.foreground,
+                            verticalAlign: "top"
+                          },
+                          children: row.value
+                        }
+                      )
+                    ]
+                  },
+                  i
+                );
+              }),
+              footer && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+                "td",
+                {
+                  colSpan: 2,
+                  style: {
+                    padding: "12px 20px",
+                    textAlign: "center",
+                    fontWeight: (_a = footer.fontWeight) != null ? _a : 600,
+                    color: (_b = footer.color) != null ? _b : emailTokens.foreground,
+                    backgroundColor: footer.backgroundColor
+                  },
+                  children: footer.text
+                }
+              ) })
+            ] })
+          }
+        )
+      }
+    )
+  ] });
+}
 var DEFAULT_LABELS2 = {
   heading: "PAYMENT DETAILS"
 };
@@ -4658,27 +4750,18 @@ function BookingPaymentConfirmationEmail({
           ] }),
           /* @__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: [
-            /* @__PURE__ */ jsxs("tr", { style: { borderBottom: `1px solid ${emailTokens.border}` }, children: [
-              /* @__PURE__ */ jsx("td", { style: { padding: "12px 20px", color: emailTokens.mutedForeground, backgroundColor: emailTokens.muted }, children: l.bookingNumberLabel }),
-              /* @__PURE__ */ jsx("td", { style: { padding: "12px 20px", fontWeight: "600", color: emailTokens.primary }, children: bookingReference })
-            ] }),
-            /* @__PURE__ */ jsxs("tr", { style: { borderBottom: `1px solid ${emailTokens.border}` }, children: [
-              /* @__PURE__ */ jsx("td", { style: { padding: "12px 20px", color: emailTokens.mutedForeground, backgroundColor: emailTokens.muted }, children: l.adventuresLabel }),
-              /* @__PURE__ */ jsx("td", { style: { padding: "12px 20px", fontWeight: "500", color: emailTokens.foreground }, children: adventures.length })
-            ] }),
-            /* @__PURE__ */ jsxs("tr", { style: { borderBottom: `1px solid ${emailTokens.border}` }, children: [
-              /* @__PURE__ */ jsx("td", { style: { padding: "12px 20px", color: emailTokens.mutedForeground, backgroundColor: emailTokens.muted }, children: l.totalTravellersLabel }),
-              /* @__PURE__ */ jsx("td", { style: { padding: "12px 20px", fontWeight: "500", color: emailTokens.foreground }, children: allTravellers.length })
-            ] }),
-            /* @__PURE__ */ jsxs("tr", { children: [
-              /* @__PURE__ */ jsx("td", { style: { padding: "12px 20px", color: emailTokens.mutedForeground, backgroundColor: emailTokens.muted }, children: l.agentLabel }),
-              /* @__PURE__ */ jsx("td", { style: { padding: "12px 20px", fontWeight: "500", color: emailTokens.foreground }, children: agent })
-            ] })
-          ] }) }) })
-        ] }),
+        /* @__PURE__ */ jsx("div", { style: { paddingLeft: "32px", paddingRight: "32px", paddingTop: "32px", paddingBottom: "32px" }, children: /* @__PURE__ */ jsx(
+          BookingSummary,
+          {
+            heading: l.bookingSummaryHeading,
+            rows: [
+              { label: l.bookingNumberLabel, value: bookingReference, valueColor: emailTokens.primary },
+              { label: l.adventuresLabel, value: adventures.length },
+              { label: l.totalTravellersLabel, value: allTravellers.length },
+              { label: l.agentLabel, value: agent }
+            ]
+          }
+        ) }),
         /* @__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;
@@ -4798,97 +4881,6 @@ function BookingPaymentConfirmationEmail({
     }
   );
 }
-function BookingSummary({ heading, rows, footer, className }) {
-  var _a, _b;
-  return /* @__PURE__ */ jsxs("div", { className, style: { marginBottom: "24px" }, children: [
-    /* @__PURE__ */ jsx(
-      "p",
-      {
-        style: {
-          marginBottom: "12px",
-          fontWeight: 700,
-          color: emailTokens.foreground,
-          fontSize: "16px",
-          fontFamily: emailTokens.fontFamily
-        },
-        children: heading
-      }
-    ),
-    /* @__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: [
-              rows.map((row, i) => {
-                var _a2;
-                return /* @__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: (_a2 = row.valueColor) != null ? _a2 : emailTokens.foreground,
-                            whiteSpace: "nowrap"
-                          },
-                          children: row.value
-                        }
-                      )
-                    ]
-                  },
-                  i
-                );
-              }),
-              footer && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
-                "td",
-                {
-                  colSpan: 2,
-                  style: {
-                    padding: "12px 16px",
-                    textAlign: "center",
-                    fontWeight: (_a = footer.fontWeight) != null ? _a : 600,
-                    color: (_b = footer.color) != null ? _b : emailTokens.foreground,
-                    backgroundColor: footer.backgroundColor,
-                    borderTop: `1px solid ${emailTokens.border}`
-                  },
-                  children: footer.text
-                }
-              ) })
-            ] })
-          }
-        )
-      }
-    )
-  ] });
-}
 var DEFAULT_LABELS4 = {
   ctaButton: "Add travellers to your booking",
   logoAlt: "PlanetaEXO",
@@ -5094,7 +5086,7 @@ var DEFAULT_LABELS5 = {
   adventuresRowLabel: "Adventures",
   travellersRowLabel: "Total Travellers",
   agentRowLabel: "Agent",
-  progressHeader: "Registration progress",
+  progressHeader: "\u{1F4CB} Registration progress",
   startsLabel: "Starts",
   completedFractionLabel: (c, total) => `Completed: ${c} / ${total} travellers`,
   ctaLabel: "View Booking & Registrations",
@@ -5114,7 +5106,7 @@ var DEFAULT_LABELS5 = {
       subject: "Complete Traveller Registration for Your Upcoming Adventure",
       intro: "Your adventure with PlanetaEXO is getting closer, and there is one important step remaining before departure.",
       contextNote: "To help us prepare logistics and ensure your experience runs smoothly, all travellers must complete their registration before the adventure starts.",
-      pleaseNoteHeader: "Please note:",
+      pleaseNoteHeader: "\u2139\uFE0F Please note:",
       pleaseNoteBullets: [
         "Registration is mandatory for each traveller included in the booking",
         "If your booking includes multiple adventures, registration must be completed for each adventure separately",
@@ -5278,10 +5270,11 @@ function RegistrationReminderEmail({
             {
               style: {
                 marginTop: 0,
-                marginBottom: "12px",
+                marginBottom: "20px",
                 fontWeight: 700,
-                fontSize: "16px",
-                color: emailTokens.foreground
+                fontSize: "18px",
+                color: emailTokens.foreground,
+                fontFamily: emailTokens.fontFamily
               },
               children: l.progressHeader
             }
@@ -5390,10 +5383,11 @@ function RegistrationReminderEmail({
             {
               style: {
                 marginTop: 0,
-                marginBottom: "12px",
+                marginBottom: "20px",
                 fontWeight: 700,
-                fontSize: "16px",
-                color: emailTokens.foreground
+                fontSize: "18px",
+                color: emailTokens.foreground,
+                fontFamily: emailTokens.fontFamily
               },
               children: v.pleaseNoteHeader
             }