@planetaexo/design-system 0.23.3 → 0.24.3

package/dist/index.cjs

@@ -4430,6 +4430,245 @@ function PaymentReceiptEmail({
     }
   );
 }
+var EMPTY_AGENT_FN = (_agentName) => "";
+var DEFAULT_LABELS4 = {
+  logoAlt: "PlanetaEXO",
+  greeting: (name) => `Hi ${name},`,
+  intermediateHello: "Hope you're doing well.",
+  bookingSummaryHeader: "Booking summary",
+  amountAlreadyPaidLabel: "Amount already paid",
+  remainingBalanceDueLabel: "Remaining balance due",
+  totalBookingAmountLabel: "Total booking amount",
+  ctaLabel: "Complete Payment",
+  teamSignature: "The PlanetaEXO Team",
+  closingAgent: (agentName) => `If you need any assistance or would like to discuss your payment, feel free to contact your agent ${agentName} via WhatsApp or email.`,
+  closingNoAgent: "If you need any assistance or would like to discuss your payment, feel free to contact us via WhatsApp or email.",
+  variants: {
+    dMinus1: {
+      intro: (b, d) => `This is a friendly reminder that the remaining balance for your booking #${b} with PlanetaEXO is due tomorrow (${d}).`,
+      secureLine: "To secure your booking, please complete the payment through your booking page using the button below:",
+      closingThanks: "Many thanks, and we look forward to helping you experience your next adventure with us.",
+      disregardIfPaid: "",
+      closingAlternative: EMPTY_AGENT_FN
+    },
+    dZero: {
+      intro: (b, d) => `This is a friendly reminder that the remaining balance for your booking #${b} with PlanetaEXO is due today (${d}).`,
+      secureLine: "To keep your booking confirmed, please complete the payment through your booking page using the button below:",
+      closingThanks: "Many thanks, and we look forward to welcoming you soon.",
+      disregardIfPaid: "",
+      closingAlternative: EMPTY_AGENT_FN
+    },
+    dPlus1: {
+      intro: (b, d) => `We noticed that the remaining balance for your booking #${b} with PlanetaEXO was due yesterday (${d}) and is still pending.`,
+      secureLine: "To avoid any impact on your booking confirmation, we kindly ask you to complete the payment as soon as possible through your booking page:",
+      closingThanks: "Thank you, and we hope to welcome you on your upcoming adventure soon.",
+      disregardIfPaid: "If you have already completed the payment, please disregard this message.",
+      closingAlternative: EMPTY_AGENT_FN
+    },
+    dPlus2: {
+      intro: (b, d) => `This is a final reminder regarding the remaining balance for your booking #${b} with PlanetaEXO, which was due on ${d} and is still pending.`,
+      secureLine: "To avoid any impact on your booking status or availability, we kindly ask you to complete the payment as soon as possible through your booking page:",
+      closingThanks: "Thank you for your attention, and we hope to welcome you on this adventure soon.",
+      disregardIfPaid: "If you have already completed the payment, please disregard this message.",
+      closingAlternative: (agentName) => `If you are experiencing any issues with payment or need additional time, please contact your agent ${agentName} via WhatsApp or email. We'll be happy to assist.`
+    }
+  }
+};
+function PaymentReminderEmail({
+  variant,
+  recipientName,
+  bookingNumber,
+  balanceDueDate,
+  adventures,
+  amountAlreadyPaid,
+  remainingBalanceDue,
+  totalBookingAmount,
+  viewBookingUrl,
+  agentName,
+  logoUrl,
+  labels,
+  className
+}) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
+  const lOverride = labels != null ? labels : {};
+  const variantDefaults = DEFAULT_LABELS4.variants[variant];
+  const variantOverride = (_b = (_a = lOverride.variants) == null ? void 0 : _a[variant]) != null ? _b : {};
+  const variantLabels = {
+    intro: (_c = variantOverride.intro) != null ? _c : variantDefaults.intro,
+    secureLine: (_d = variantOverride.secureLine) != null ? _d : variantDefaults.secureLine,
+    closingThanks: (_e = variantOverride.closingThanks) != null ? _e : variantDefaults.closingThanks,
+    disregardIfPaid: variantOverride.disregardIfPaid !== void 0 ? variantOverride.disregardIfPaid : variantDefaults.disregardIfPaid,
+    closingAlternative: (_f = variantOverride.closingAlternative) != null ? _f : variantDefaults.closingAlternative
+  };
+  const l = {
+    logoAlt: (_g = lOverride.logoAlt) != null ? _g : DEFAULT_LABELS4.logoAlt,
+    greeting: (_h = lOverride.greeting) != null ? _h : DEFAULT_LABELS4.greeting,
+    intermediateHello: (_i = lOverride.intermediateHello) != null ? _i : DEFAULT_LABELS4.intermediateHello,
+    bookingSummaryHeader: (_j = lOverride.bookingSummaryHeader) != null ? _j : DEFAULT_LABELS4.bookingSummaryHeader,
+    amountAlreadyPaidLabel: (_k = lOverride.amountAlreadyPaidLabel) != null ? _k : DEFAULT_LABELS4.amountAlreadyPaidLabel,
+    remainingBalanceDueLabel: (_l = lOverride.remainingBalanceDueLabel) != null ? _l : DEFAULT_LABELS4.remainingBalanceDueLabel,
+    totalBookingAmountLabel: (_m = lOverride.totalBookingAmountLabel) != null ? _m : DEFAULT_LABELS4.totalBookingAmountLabel,
+    ctaLabel: (_n = lOverride.ctaLabel) != null ? _n : DEFAULT_LABELS4.ctaLabel,
+    teamSignature: (_o = lOverride.teamSignature) != null ? _o : DEFAULT_LABELS4.teamSignature,
+    closingAgent: (_p = lOverride.closingAgent) != null ? _p : DEFAULT_LABELS4.closingAgent,
+    closingNoAgent: (_q = lOverride.closingNoAgent) != null ? _q : DEFAULT_LABELS4.closingNoAgent
+  };
+  const ctaStyle = {
+    display: "inline-block",
+    backgroundColor: emailTokens.primary,
+    color: emailTokens.primaryForeground,
+    padding: "12px 24px",
+    borderRadius: "8px",
+    fontSize: "14px",
+    fontWeight: 700,
+    textDecoration: "none",
+    fontFamily: emailTokens.fontFamily
+  };
+  const summaryRowStyle = {
+    margin: "0 0 8px",
+    fontSize: "14px",
+    color: emailTokens.foreground
+  };
+  const agentNameTrimmed = agentName == null ? void 0 : agentName.trim();
+  const closingMain = agentNameTrimmed ? l.closingAgent(agentNameTrimmed) : l.closingNoAgent;
+  const showDisregard = typeof variantLabels.disregardIfPaid === "string" && variantLabels.disregardIfPaid.trim().length > 0;
+  const closingAlternativeText = agentNameTrimmed && variantLabels.closingAlternative ? variantLabels.closingAlternative(agentNameTrimmed) : "";
+  const showClosingAlternative = closingAlternativeText.trim().length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        maxWidth: "576px",
+        margin: "0 auto",
+        backgroundColor: emailTokens.white,
+        color: emailTokens.foreground,
+        fontFamily: emailTokens.fontFamily,
+        fontSize: "16px",
+        lineHeight: "1.6",
+        border: `1px solid ${emailTokens.border}`,
+        borderRadius: "12px",
+        overflow: "hidden",
+        padding: "32px"
+      },
+      className,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(EmailLogo, { src: logoUrl, alt: l.logoAlt }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "16px" }, children: l.greeting(recipientName) }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "16px" }, children: l.intermediateHello }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "12px" }, children: variantLabels.intro(bookingNumber, balanceDueDate) }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "24px" }, children: variantLabels.secureLine }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: "32px", textAlign: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: viewBookingUrl, style: ctaStyle, children: l.ctaLabel }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "hr",
+          {
+            style: {
+              border: "none",
+              borderTop: `1px solid ${emailTokens.border}`,
+              marginBottom: "24px"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            style: {
+              marginBottom: "16px",
+              fontWeight: 700,
+              color: emailTokens.foreground,
+              fontSize: "16px"
+            },
+            children: l.bookingSummaryHeader
+          }
+        ),
+        adventures.map((adv, advIdx) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              marginBottom: "20px",
+              paddingBottom: "16px",
+              borderBottom: advIdx < adventures.length - 1 ? `1px solid ${emailTokens.border}` : "none"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  style: {
+                    margin: "0 0 8px",
+                    fontSize: "15px",
+                    fontWeight: 600,
+                    color: emailTokens.foreground
+                  },
+                  children: adv.name
+                }
+              ),
+              adv.lineItems.map((li, liIdx) => /* @__PURE__ */ jsxRuntime.jsxs("p", { style: summaryRowStyle, children: [
+                li.unitPrice,
+                " \xD7 ",
+                li.quantity,
+                " ",
+                li.categoryLabel,
+                " =",
+                " ",
+                /* @__PURE__ */ jsxRuntime.jsx("strong", { children: li.subtotal })
+              ] }, liIdx))
+            ]
+          },
+          advIdx
+        )),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "hr",
+          {
+            style: {
+              border: "none",
+              borderTop: `1px solid ${emailTokens.border}`,
+              marginBottom: "16px"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { style: summaryRowStyle, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
+            l.amountAlreadyPaidLabel,
+            ":"
+          ] }),
+          " ",
+          amountAlreadyPaid
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { style: summaryRowStyle, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
+            l.remainingBalanceDueLabel,
+            ":"
+          ] }),
+          " ",
+          remainingBalanceDue
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { style: __spreadProps(__spreadValues({}, summaryRowStyle), { marginBottom: "24px" }), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
+            l.totalBookingAmountLabel,
+            ":"
+          ] }),
+          " ",
+          totalBookingAmount
+        ] }),
+        showDisregard && /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            style: {
+              marginBottom: "16px",
+              fontSize: "14px",
+              color: emailTokens.mutedForeground,
+              fontStyle: "italic"
+            },
+            children: variantLabels.disregardIfPaid
+          }
+        ),
+        showClosingAlternative && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "16px", fontSize: "14px", color: emailTokens.bodyText }, children: closingAlternativeText }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "16px", fontSize: "14px", color: emailTokens.bodyText }, children: closingMain }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: "16px", fontSize: "14px", color: emailTokens.bodyText }, children: variantLabels.closingThanks }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginTop: 0, marginBottom: 0, fontSize: "14px", color: emailTokens.bodyText }, children: l.teamSignature })
+      ]
+    }
+  );
+}
 function BookingOtpEmail({
   greeting,
   intro,
@@ -5110,7 +5349,7 @@ function BookingForm({
     }
   );
 }
-var DEFAULT_LABELS4 = {
+var DEFAULT_LABELS5 = {
   formSubtitle: "To confirm your participation, please complete this short form. It's required for all travellers and helps us coordinate logistics with our local partners and tailor the experience to you.",
   detailsSectionTitle: "Your details",
   tripInfoSectionTitle: "Trip info",
@@ -5775,7 +6014,7 @@ function RegistrationForm({
 }) {
   var _a;
   const L = React25__namespace.useMemo(
-    () => __spreadValues(__spreadValues({}, DEFAULT_LABELS4), labels != null ? labels : {}),
+    () => __spreadValues(__spreadValues({}, DEFAULT_LABELS5), labels != null ? labels : {}),
     [labels]
   );
   const sortedFields = React25__namespace.useMemo(
@@ -7559,16 +7798,13 @@ function ItineraryDay({
     specs && specs.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-3 sm:gap-2.5", children: specs.map((spec, i) => /* @__PURE__ */ jsxRuntime.jsxs(
       "li",
       {
-        className: "flex items-start gap-3 text-base text-foreground font-ui",
+        className: "flex flex-col text-base text-foreground font-ui",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5 shrink-0 text-foreground", "aria-hidden": true, children: spec.icon }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: spec.label }),
-              spec.detail && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: spec.detail })
-            ] }),
-            spec.subdetail && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: spec.subdetail })
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: spec.label }),
+            spec.detail && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: spec.detail })
+          ] }),
+          spec.subdetail && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: spec.subdetail })
         ]
       },
       i
@@ -9271,10 +9507,7 @@ function TripPage({
                 ] })
               ] }),
               itineraryDays && itineraryDays.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("section", { id: "trip-section-itinerary", className: "scroll-mt-20", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: "text-xl font-bold text-foreground font-heading mb-6 flex items-center gap-2", children: [
-                  (sectionIcons == null ? void 0 : sectionIcons.itinerary) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary [&>svg]:h-5 [&>svg]:w-5", children: sectionIcons.itinerary }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ClockIcon, { className: "h-5 w-5 text-primary" }),
-                  "Itinerary"
-                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-bold text-foreground font-heading mb-6", children: "Itinerary" }),
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-12", children: itineraryDays.map((day) => /* @__PURE__ */ jsxRuntime.jsx(
                   ItineraryDay,
                   __spreadProps(__spreadValues({}, day), {
@@ -9283,10 +9516,7 @@ function TripPage({
                   day.dayNumber
                 )) })
               ] }) : itinerary && itinerary.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("section", { id: "trip-section-itinerary", className: "scroll-mt-20", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: "text-xl font-bold text-foreground font-heading mb-6 flex items-center gap-2", children: [
-                  (sectionIcons == null ? void 0 : sectionIcons.itinerary) ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary [&>svg]:h-5 [&>svg]:w-5", children: sectionIcons.itinerary }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ClockIcon, { className: "h-5 w-5 text-primary" }),
-                  "Itinerary"
-                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-bold text-foreground font-heading mb-6", children: "Itinerary" }),
                 /* @__PURE__ */ jsxRuntime.jsx(ItineraryTimeline, { steps: itinerary })
               ] }),
               included && included.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("section", { id: "trip-section-included", className: "scroll-mt-20", children: [
@@ -10422,6 +10652,7 @@ exports.PaymentAmountSelector = PaymentAmountSelector;
 exports.PaymentMethodSelector = PaymentMethodSelector;
 exports.PaymentModalShell = PaymentModalShell;
 exports.PaymentReceiptEmail = PaymentReceiptEmail;
+exports.PaymentReminderEmail = PaymentReminderEmail;
 exports.PhoneCountrySelect = PhoneCountrySelect;
 exports.PhotoGallery = PhotoGallery;
 exports.PricingTrip = PricingTrip;