@planetaexo/design-system 0.30.0 → 0.31.0

package/dist/index.cjs

@@ -4599,7 +4599,7 @@ var DEFAULT_LABELS3 = {
   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({
+function BookingPaymentConfirmationEmail({
   recipientName,
   logoUrl,
   bookingReference,
@@ -4819,32 +4819,93 @@ function BookingConfirmation({
     }
   );
 }
-function BookingSummary({ heading, rows, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: { marginBottom: "32px" }, children: [
+function BookingSummary({ heading, rows, footer, className }) {
+  var _a, _b;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: { marginBottom: "24px" }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "p",
       {
         style: {
-          marginBottom: "16px",
-          fontWeight: "700",
+          marginBottom: "12px",
+          fontWeight: 700,
           color: emailTokens.foreground,
+          fontSize: "16px",
           fontFamily: emailTokens.fontFamily
         },
         children: heading
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      "table",
+      "div",
       {
         style: {
-          width: "100%",
-          fontSize: "14px",
-          borderCollapse: "collapse"
+          borderRadius: "12px",
+          border: `1px solid ${emailTokens.border}`,
+          overflow: "hidden"
         },
-        children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: rows.map((row, i) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: i > 0 ? { borderTop: `1px solid ${emailTokens.border}` } : {}, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "4px 16px 4px 0", color: emailTokens.mutedForeground }, children: row.label }),
-          /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "4px 0", fontWeight: "500", color: emailTokens.foreground }, children: row.value })
-        ] }, i)) })
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "table",
+          {
+            style: {
+              width: "100%",
+              fontSize: "14px",
+              borderCollapse: "collapse"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
+              rows.map((row, i) => {
+                var _a2;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "tr",
+                  {
+                    style: i > 0 ? { borderTop: `1px solid ${emailTokens.border}` } : {},
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "td",
+                        {
+                          style: {
+                            padding: "10px 16px",
+                            color: emailTokens.mutedForeground,
+                            verticalAlign: "top"
+                          },
+                          children: row.label
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.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
+                }
+              ) })
+            ] })
+          }
+        )
       }
     )
   ] });
@@ -4855,7 +4916,7 @@ var DEFAULT_LABELS4 = {
   greeting: (recipientName) => `Hi ${recipientName},`,
   thankYouMessage: "Thank you for booking your adventure with PlanetaEXO \u2014 we\u2019re really looking forward to your adventure.",
   addTravellersInstruction: "To move forward, the first step is to add all travellers included in your booking. Once you do this, each person \u2014 including you \u2014 will receive an email with a link to complete their individual registration.",
-  summaryHeading: "\u{1F4DD} Here\u2019s a quick summary of your booking:",
+  summaryHeading: "\u{1F4DD} Booking Summary",
   bookingNumberLabel: "Booking Number:",
   activityLabel: "Activity:",
   adventureLabel: "Adventure:",
@@ -4866,7 +4927,7 @@ var DEFAULT_LABELS4 = {
   closingMessage: "If you have any questions, just reply to this email \u2014 happy to help.",
   nextStepsHeading: "Next steps:"
 };
-function BookingConfirmationEmail({
+function BookingCreatedEmail({
   recipientName,
   addTravellersUrl,
   logoUrl,
@@ -4896,7 +4957,7 @@ function BookingConfirmationEmail({
   };
   const AddTravellersCta = addTravellersUrl ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: addTravellersUrl, style: ctaStyle, children: l.ctaButton }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: ctaStyle, role: "presentation", children: l.ctaButton });
   const tableRows = [
-    { label: l.bookingNumberLabel, value: bookingNumber },
+    { label: l.bookingNumberLabel, value: bookingNumber, valueColor: emailTokens.primary },
     ...activity && activity.trim().length > 0 ? [{ label: l.activityLabel, value: activity }] : [],
     { label: l.adventureLabel, value: adventure },
     { label: l.startingDateLabel, value: startingDate },
@@ -5047,12 +5108,12 @@ var DEFAULT_LABELS5 = {
   logoAlt: "PlanetaEXO",
   greeting: (n) => `Hi ${n},`,
   intermediateHello: "Hope you're doing well.",
-  bookingSummaryHeader: "Booking summary",
-  bookingNumberLabel: "Booking number",
-  adventuresCountLabel: (c) => `${c} adventure${c === 1 ? "" : "s"}`,
-  travellersCountLabel: (c) => `${c} traveller${c === 1 ? "" : "s"}`,
+  bookingSummaryHeader: "\u{1F4DD} Booking Summary",
+  bookingNumberLabel: "Booking Number",
+  adventuresCountLabel: (c) => String(c),
+  travellersCountLabel: (c) => String(c),
   adventuresRowLabel: "Adventures",
-  travellersRowLabel: "Total travellers",
+  travellersRowLabel: "Total Travellers",
   agentRowLabel: "Agent",
   progressHeader: "Registration progress",
   startsLabel: "Starts",
@@ -5111,7 +5172,7 @@ var DEFAULT_LABELS5 = {
       contextNote: "Please ensure all pending registrations are completed as soon as possible.",
       importantNote: "Important: Registration is mandatory and required for participation in the adventure.",
       progressIntro: "Review your booking page to complete missing information:",
-      multiTravellerNote: "If your booking includes multiple travellers, please ensure every traveller completes their registration before departure.",
+      multiTravellerNote: "",
       pleaseNoteHeader: "",
       pleaseNoteBullets: [],
       bookerCoordinationNote: "",
@@ -5126,7 +5187,7 @@ var DEFAULT_LABELS5 = {
       finalReminderTagline: "This is a final reminder.",
       importantNote: "Traveller registration is mandatory. Without completed registration forms, we may be unable to confirm logistics and travellers may not be allowed to board transfers, flights, boats, or participate in activities.",
       progressIntro: "Please complete all pending registrations immediately through your booking page:",
-      disregardIfCompleted: "If registrations have already been completed, please disregard this email.",
+      disregardIfCompleted: "",
       closingThanks: "We look forward to welcoming you soon.",
       contextNote: "",
       pleaseNoteHeader: "",
@@ -5178,7 +5239,7 @@ function RegistrationReminderEmail({
     fontFamily: emailTokens.fontFamily
   };
   const summaryRows = [
-    { label: l.bookingNumberLabel, value: `#${bookingNumber}` },
+    { label: l.bookingNumberLabel, value: bookingNumber, valueColor: emailTokens.primary },
     { label: l.adventuresRowLabel, value: l.adventuresCountLabel(totalAdventures) },
     { label: l.travellersRowLabel, value: l.travellersCountLabel(totalTravellers) },
     ...(agent == null ? void 0 : agent.name) ? [{ label: l.agentRowLabel, value: agent.name }] : []
@@ -5188,9 +5249,24 @@ function RegistrationReminderEmail({
   const showEarlyBenefit = hasText(v.earlyCompletionBenefit);
   const showImportant = hasText(v.importantNote);
   const showFinalTagline = hasText(v.finalReminderTagline);
-  const showMultiTraveller = hasText(v.multiTravellerNote);
+  hasText(v.multiTravellerNote);
   const showDisregard = hasText(v.disregardIfCompleted);
   const showClosingThanks = hasText(v.closingThanks);
+  const sectionDivider = /* @__PURE__ */ jsxRuntime.jsx(
+    "hr",
+    {
+      style: {
+        border: "none",
+        borderTop: `1px solid ${emailTokens.border}`,
+        marginTop: 0,
+        marginBottom: "24px"
+      }
+    }
+  );
+  const hasIntroBlock = hasText(v.intro) || hasText(v.contextNote);
+  const hasPleaseNote = showPleaseNote;
+  const hasD7Highlight = showImportant && slug === "d_minus_7";
+  const hasD2Highlight = showFinalTagline || showImportant && slug === "d_minus_2";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -5214,45 +5290,18 @@ function RegistrationReminderEmail({
         hasText(l.intermediateHello) && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "16px" }, children: l.intermediateHello }),
         hasText(v.intro) && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "16px" }, children: v.intro }),
         hasText(v.contextNote) && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "16px" }, children: v.contextNote }),
-        showPleaseNote && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "24px" }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "8px", fontWeight: 700, color: emailTokens.foreground }, children: v.pleaseNoteHeader }),
-          /* @__PURE__ */ jsxRuntime.jsx("ul", { style: { paddingLeft: "20px", margin: 0 }, children: v.pleaseNoteBullets.map((b, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { style: { marginBottom: "6px", color: emailTokens.bodyText }, children: b }, i)) })
-        ] }),
-        showBookerCoord && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "16px" }, children: v.bookerCoordinationNote }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "hr",
-          {
-            style: {
-              border: "none",
-              borderTop: `1px solid ${emailTokens.border}`,
-              marginBottom: "24px"
-            }
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(BookingSummary, { heading: l.bookingSummaryHeader, rows: summaryRows }),
-        showImportant && slug === "d_minus_7" && /* @__PURE__ */ jsxRuntime.jsx(
-          "p",
-          {
-            style: {
-              marginBottom: "20px",
-              padding: "12px 16px",
-              borderRadius: "8px",
-              backgroundColor: "#fef3c7",
-              color: "#78350f",
-              fontWeight: 600
-            },
-            children: v.importantNote
-          }
-        ),
+        hasIntroBlock && sectionDivider,
+        slug === "d_minus_30" && /* @__PURE__ */ jsxRuntime.jsx(BookingSummary, { heading: l.bookingSummaryHeader, rows: summaryRows }),
+        slug === "d_minus_15" && showBookerCoord && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "16px" }, children: v.bookerCoordinationNote }),
         hasItems(adventures) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "p",
             {
               style: {
-                marginTop: "8px",
+                marginTop: 0,
                 marginBottom: "12px",
                 fontWeight: 700,
-                fontSize: "15px",
+                fontSize: "16px",
                 color: emailTokens.foreground
               },
               children: l.progressHeader
@@ -5318,8 +5367,8 @@ function RegistrationReminderEmail({
             `${adv.name}-${i}`
           ))
         ] }),
-        showEarlyBenefit && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "16px", color: emailTokens.bodyText }, children: v.earlyCompletionBenefit }),
-        (showFinalTagline || showImportant && slug === "d_minus_2") && /* @__PURE__ */ jsxRuntime.jsxs(
+        slug === "d_minus_15" && showEarlyBenefit && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "16px", color: emailTokens.bodyText }, children: v.earlyCompletionBenefit }),
+        slug === "d_minus_2" && hasD2Highlight && /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             style: {
@@ -5332,12 +5381,47 @@ function RegistrationReminderEmail({
             },
             children: [
               showFinalTagline && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, marginBottom: showImportant ? "8px" : 0, fontWeight: 700 }, children: v.finalReminderTagline }),
-              showImportant && slug === "d_minus_2" && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0 }, children: v.importantNote })
+              showImportant && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0 }, children: v.importantNote })
             ]
           }
         ),
-        showMultiTraveller && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "16px", color: emailTokens.bodyText }, children: v.multiTravellerNote }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: "24px", textAlign: "left" }, children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: ctaUrl, style: ctaStyle, children: l.ctaLabel }) }),
+        slug === "d_minus_7" && hasD7Highlight && /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            style: {
+              marginBottom: "20px",
+              padding: "12px 16px",
+              borderRadius: "8px",
+              backgroundColor: "#fef3c7",
+              color: "#78350f",
+              fontWeight: 600
+            },
+            children: v.importantNote
+          }
+        ),
+        slug !== "d_minus_30" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          sectionDivider,
+          /* @__PURE__ */ jsxRuntime.jsx(BookingSummary, { heading: l.bookingSummaryHeader, rows: summaryRows })
+        ] }),
+        hasPleaseNote && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          sectionDivider,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              style: {
+                marginTop: 0,
+                marginBottom: "12px",
+                fontWeight: 700,
+                fontSize: "16px",
+                color: emailTokens.foreground
+              },
+              children: v.pleaseNoteHeader
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("ul", { style: { paddingLeft: "20px", margin: 0, marginBottom: "24px" }, children: v.pleaseNoteBullets.map((b, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { style: { marginBottom: "6px", color: emailTokens.bodyText }, children: b }, i)) })
+        ] }),
+        sectionDivider,
         /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "16px", fontSize: "14px", fontWeight: 700, color: emailTokens.bodyText }, children: (agent == null ? void 0 : agent.name) ? l.closingAgent(agent.name, {
           whatsappUrl: agent.whatsappUrl,
           email: agent.email
@@ -5456,37 +5540,16 @@ function PaymentReceiptEmail({
             ] }) })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "12px", fontWeight: 700, color: emailTokens.foreground, fontSize: "16px" }, children: l.summaryHeading }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+          BookingSummary,
           {
-            style: {
-              borderRadius: "12px",
-              border: `1px solid ${emailTokens.border}`,
-              overflow: "hidden",
-              marginBottom: "24px"
-            },
-            children: /* @__PURE__ */ jsxRuntime.jsx("table", { style: { width: "100%", fontSize: "14px", borderCollapse: "collapse" }, children: /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
-              summaryRows.map((row, i) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: i > 0 ? { borderTop: `1px solid ${emailTokens.border}` } : {}, children: [
-                /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", color: emailTokens.mutedForeground, verticalAlign: "top" }, children: row.label }),
-                /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "10px 16px", textAlign: "right", fontWeight: 500, color: emailTokens.foreground, whiteSpace: "nowrap" }, children: row.value })
-              ] }, i)),
-              isPaidInFull && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.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
-                }
-              ) })
-            ] }) })
+            heading: l.summaryHeading,
+            rows: summaryRows,
+            footer: isPaidInFull ? {
+              text: l.paidInFullMessage,
+              color: emailTokens.green,
+              backgroundColor: emailTokens.greenBg
+            } : void 0
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "16px", fontSize: "14px", color: emailTokens.bodyText }, children: l.closingMessage }),
@@ -5738,6 +5801,17 @@ function PaymentReminderEmail({
             ]
           }
         ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "hr",
+          {
+            style: {
+              border: "none",
+              borderTop: `1px solid ${emailTokens.border}`,
+              marginTop: 0,
+              marginBottom: "24px"
+            }
+          }
+        ),
         showDisregard && /* @__PURE__ */ jsxRuntime.jsx(
           "p",
           {
@@ -11705,12 +11779,12 @@ exports.AgentContactCard = AgentContactCard;
 exports.Alert = Alert;
 exports.BirthDateField = BirthDateField;
 exports.BookingAdventureCard = BookingAdventureCard;
-exports.BookingConfirmation = BookingConfirmation;
-exports.BookingConfirmationEmail = BookingConfirmationEmail;
 exports.BookingConfirmedCard = BookingConfirmedCard;
+exports.BookingCreatedEmail = BookingCreatedEmail;
 exports.BookingDetails = BookingDetails;
 exports.BookingForm = BookingForm;
 exports.BookingOtpEmail = BookingOtpEmail;
+exports.BookingPaymentConfirmationEmail = BookingPaymentConfirmationEmail;
 exports.BookingShell = BookingShell;
 exports.BookingSummary = BookingSummary;
 exports.Button = Button;