@planetaexo/design-system 0.59.2 → 0.61.0

package/dist/index.cjs

@@ -7346,6 +7346,166 @@ function BookingOtpEmail({
     }
   );
 }
+function NotificationEmail({
+  greeting,
+  paragraphs,
+  cta,
+  details,
+  detailsHeading,
+  highlight,
+  signature,
+  logoUrl,
+  className
+}) {
+  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 hasHighlight = Array.isArray(highlight) && highlight.length > 0;
+  const hasDetails = Array.isArray(details) && details.length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        fontFamily: emailTokens.fontFamily,
+        color: emailTokens.foreground,
+        maxWidth: "600px",
+        margin: "0 auto",
+        padding: "32px",
+        border: `1px solid ${emailTokens.border}`,
+        borderRadius: "12px",
+        backgroundColor: emailTokens.white
+      },
+      className,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(EmailLogo, { src: logoUrl }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "16px", lineHeight: "1.5", margin: "0 0 16px" }, children: greeting }),
+        paragraphs.map((paragraph, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            style: { fontSize: "15px", lineHeight: "1.5", margin: "0 0 16px" },
+            children: paragraph
+          },
+          i
+        )),
+        hasHighlight && /* @__PURE__ */ jsxRuntime.jsx(
+          "table",
+          {
+            role: "presentation",
+            cellPadding: 0,
+            cellSpacing: 0,
+            border: 0,
+            style: { width: "100%", borderCollapse: "collapse", margin: "0 0 24px" },
+            children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
+              "td",
+              {
+                style: {
+                  backgroundColor: emailTokens.primaryLight,
+                  border: `1px solid ${emailTokens.border}`,
+                  borderRadius: "12px",
+                  padding: "24px 16px"
+                },
+                children: highlight.map((line, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    style: {
+                      fontSize: "15px",
+                      lineHeight: "1.5",
+                      margin: i < highlight.length - 1 ? "0 0 8px" : "0",
+                      color: emailTokens.foreground
+                    },
+                    children: line
+                  },
+                  i
+                ))
+              }
+            ) }) })
+          }
+        ),
+        hasDetails && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          detailsHeading && /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              style: {
+                fontSize: "15px",
+                lineHeight: "1.5",
+                fontWeight: 700,
+                margin: "0 0 12px"
+              },
+              children: detailsHeading
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "table",
+            {
+              role: "presentation",
+              cellPadding: 0,
+              cellSpacing: 0,
+              border: 0,
+              style: { width: "100%", borderCollapse: "collapse", margin: "0 0 24px" },
+              children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: details.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx("tr", { children: item.label ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "td",
+                  {
+                    style: {
+                      fontSize: "14px",
+                      lineHeight: "1.6",
+                      color: emailTokens.mutedForeground,
+                      padding: "4px 12px 4px 0",
+                      verticalAlign: "top",
+                      whiteSpace: "nowrap"
+                    },
+                    children: item.label
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "td",
+                  {
+                    style: {
+                      fontSize: "14px",
+                      lineHeight: "1.6",
+                      color: item.emphasizeValue ? emailTokens.primary : emailTokens.foreground,
+                      fontWeight: item.emphasizeValue ? 700 : 400,
+                      padding: "4px 0",
+                      verticalAlign: "top",
+                      width: "100%"
+                    },
+                    children: item.value
+                  }
+                )
+              ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
+                "td",
+                {
+                  colSpan: 2,
+                  style: {
+                    fontSize: "14px",
+                    lineHeight: "1.6",
+                    color: emailTokens.foreground,
+                    padding: "4px 0",
+                    verticalAlign: "top"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: emailTokens.primary, paddingRight: "8px" }, children: "\u2022" }),
+                    item.value
+                  ]
+                }
+              ) }, i)) })
+            }
+          )
+        ] }),
+        cta && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { margin: "24px 0" }, children: cta.url ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: cta.url, style: ctaStyle, children: cta.label }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: ctaStyle, role: "presentation", children: cta.label }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "14px", lineHeight: "1.5", margin: "0" }, children: signature })
+      ]
+    }
+  );
+}
 function TravellerFormInviteEmail({
   greeting,
   bodyIntro,
@@ -8332,6 +8492,7 @@ function FieldRenderer({
   onChange,
   defaultPhoneCountry,
   labels,
+  countries,
   error,
   disabled
 }) {
@@ -8566,6 +8727,7 @@ function FieldRenderer({
         required: field.required,
         value: typeof value === "string" ? value : "",
         onChange: (code) => onChange(code),
+        countries,
         disabled
       }
     );
@@ -8711,6 +8873,7 @@ function RegistrationForm({
   defaultPhoneCountry = "BR",
   dateFormatter,
   labels,
+  countries,
   className,
   readOnly = false
 }) {
@@ -8896,6 +9059,7 @@ function RegistrationForm({
                     onChange: (v) => setField(field.id, v),
                     defaultPhoneCountry,
                     labels: L,
+                    countries,
                     error: fieldErrors[field.id],
                     disabled: readOnly
                   }
@@ -9043,7 +9207,7 @@ function phoneCountryDial(code) {
   var _a, _b;
   return (_b = (_a = PHONE_COUNTRIES.find((c) => c.code === code)) == null ? void 0 : _a.dial) != null ? _b : code;
 }
-function defaultFormatAnswer(field, value, fmtDate, yesNoLabels) {
+function defaultFormatAnswer(field, value, fmtDate, yesNoLabels, countries) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
   if (value == null || value === "") return "\u2014";
   if (value instanceof Date) return fmtDate(value);
@@ -9072,7 +9236,7 @@ function defaultFormatAnswer(field, value, fmtDate, yesNoLabels) {
     }
   }
   if (field.type === "nationality" && typeof value === "string") {
-    return (_d = (_c = COUNTRIES.find((c) => c.code === value)) == null ? void 0 : _c.name) != null ? _d : value;
+    return (_d = (_c = (countries != null ? countries : COUNTRIES).find((c) => c.code === value)) == null ? void 0 : _c.name) != null ? _d : value;
   }
   if (field.type === "select" && field.options) {
     return (_f = (_e = field.options.find((o) => o.value === value)) == null ? void 0 : _e.label) != null ? _f : String(value);
@@ -9098,6 +9262,7 @@ function RegistrationSuccessCard({
   answers = {},
   dateFormatter = isoOrDateToString,
   formatAnswer,
+  countries,
   className,
   actions,
   logo,
@@ -9207,7 +9372,7 @@ function RegistrationSuccessCard({
           /* @__PURE__ */ jsxRuntime.jsx("dd", { className: "w-1/2 text-foreground text-right min-w-0 break-words", children: (formatAnswer != null ? formatAnswer : ((field, v) => defaultFormatAnswer(field, v, dateFormatter, {
             yesLabel: scLabels == null ? void 0 : scLabels.yesLabel,
             noLabel: scLabels == null ? void 0 : scLabels.noLabel
-          })))(
+          }, countries)))(
             f,
             answers[f.id]
           ) })
@@ -16576,6 +16741,7 @@ exports.ItineraryDay = ItineraryDay;
 exports.LOGO_PLANETAEXO_DATA_URI = LOGO_PLANETAEXO_DATA_URI;
 exports.LeadCapturePopup = LeadCapturePopup;
 exports.MenuTrip = MenuTrip;
+exports.NotificationEmail = NotificationEmail;
 exports.OTPCodeInput = OTPCodeInput;
 exports.Offer = Offer;
 exports.OfferAdventureCard = OfferAdventureCard;