@planetaexo/design-system 0.5.2 → 0.5.4

package/dist/index.d.cts

@@ -626,8 +626,26 @@ interface RegistrationSuccessCardProps {
     formatAnswer?: (field: RegistrationField, value: RegistrationFieldValue) => string;
     className?: string;
     actions?: React.ReactNode;
+    /** Logo URL displayed above the title. Pass `null` to hide the logo. */
+    logo?: string | null;
+    logoAlt?: string;
+    /** Terms section rendered at the bottom of the card. */
+    terms?: {
+        markdown: string;
+        accepted: boolean;
+    } | null;
+    adventure?: RegistrationAdventure | null;
+    booking?: RegistrationBooking | null;
+    traveller?: RegistrationTraveller | null;
+    tripInfoLabels?: {
+        sectionTitle?: string;
+        adventureLabel?: string;
+        bookingLabel?: string;
+        partnerLabel?: string;
+        travellerLabel?: string;
+    };
 }
-declare function RegistrationSuccessCard({ title, message, answersTitle, fields, answers, dateFormatter, formatAnswer, className, actions, }: RegistrationSuccessCardProps): react_jsx_runtime.JSX.Element;
+declare function RegistrationSuccessCard({ title, message, answersTitle, fields, answers, dateFormatter, formatAnswer, className, actions, logo, logoAlt, terms, adventure, booking, traveller, tripInfoLabels, }: RegistrationSuccessCardProps): react_jsx_runtime.JSX.Element;
 
 interface FloatingInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     label: string;

package/dist/index.d.ts

@@ -626,8 +626,26 @@ interface RegistrationSuccessCardProps {
     formatAnswer?: (field: RegistrationField, value: RegistrationFieldValue) => string;
     className?: string;
     actions?: React.ReactNode;
+    /** Logo URL displayed above the title. Pass `null` to hide the logo. */
+    logo?: string | null;
+    logoAlt?: string;
+    /** Terms section rendered at the bottom of the card. */
+    terms?: {
+        markdown: string;
+        accepted: boolean;
+    } | null;
+    adventure?: RegistrationAdventure | null;
+    booking?: RegistrationBooking | null;
+    traveller?: RegistrationTraveller | null;
+    tripInfoLabels?: {
+        sectionTitle?: string;
+        adventureLabel?: string;
+        bookingLabel?: string;
+        partnerLabel?: string;
+        travellerLabel?: string;
+    };
 }
-declare function RegistrationSuccessCard({ title, message, answersTitle, fields, answers, dateFormatter, formatAnswer, className, actions, }: RegistrationSuccessCardProps): react_jsx_runtime.JSX.Element;
+declare function RegistrationSuccessCard({ title, message, answersTitle, fields, answers, dateFormatter, formatAnswer, className, actions, logo, logoAlt, terms, adventure, booking, traveller, tripInfoLabels, }: RegistrationSuccessCardProps): react_jsx_runtime.JSX.Element;
 
 interface FloatingInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     label: string;

package/dist/index.js

@@ -5075,26 +5075,84 @@ function RegistrationSuccessCard({
   dateFormatter = isoOrDateToString,
   formatAnswer,
   className,
-  actions
+  actions,
+  logo,
+  logoAlt = "PlanetaEXO",
+  terms,
+  adventure,
+  booking,
+  traveller,
+  tripInfoLabels
 }) {
+  var _a, _b, _c, _d, _e;
   const sorted = [...fields].sort((a, b) => {
-    var _a, _b;
-    return ((_a = a.order) != null ? _a : 0) - ((_b = b.order) != null ? _b : 0);
+    var _a2, _b2;
+    return ((_a2 = a.order) != null ? _a2 : 0) - ((_b2 = b.order) != null ? _b2 : 0);
   }).filter((f) => Object.prototype.hasOwnProperty.call(answers, f.id));
+  const hasTripInfo = !!(adventure || booking || traveller);
+  const dateRange = adventure ? formatDateRange(adventure, dateFormatter) : null;
+  const TL = {
+    sectionTitle: (_a = tripInfoLabels == null ? void 0 : tripInfoLabels.sectionTitle) != null ? _a : "Trip info",
+    adventureLabel: (_b = tripInfoLabels == null ? void 0 : tripInfoLabels.adventureLabel) != null ? _b : "Adventure",
+    bookingLabel: (_c = tripInfoLabels == null ? void 0 : tripInfoLabels.bookingLabel) != null ? _c : "Booking",
+    partnerLabel: (_d = tripInfoLabels == null ? void 0 : tripInfoLabels.partnerLabel) != null ? _d : "Partner",
+    travellerLabel: (_e = tripInfoLabels == null ? void 0 : tripInfoLabels.travellerLabel) != null ? _e : "Traveller"
+  };
   return /* @__PURE__ */ jsxs("div", { className: cn("rounded-xl border border-border bg-card p-6 sm:p-8 flex flex-col gap-10", className), children: [
     actions && /* @__PURE__ */ jsx("div", { className: "flex gap-3 justify-end", children: actions }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3 text-center", children: [
-      /* @__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 }) }),
+      logo !== null && /* eslint-disable-next-line @next/next/no-img-element */
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: logo != null ? logo : "/logo-planetaexo.png",
+          alt: logoAlt,
+          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 }) }),
       /* @__PURE__ */ jsx("h2", { className: "text-2xl font-black uppercase tracking-wide text-foreground font-heading leading-tight", children: title }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground font-ui", children: message })
+      message && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground font-ui", children: message })
     ] }),
+    hasTripInfo && /* @__PURE__ */ jsx(FormSection2, { title: TL.sectionTitle, children: /* @__PURE__ */ jsxs("dl", { className: "flex flex-col gap-y-3 text-sm font-ui", children: [
+      adventure && /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-x-4", children: [
+        /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: TL.adventureLabel }),
+        /* @__PURE__ */ jsx("dd", { className: "text-foreground font-medium text-right min-w-0 break-words", children: adventure.name })
+      ] }),
+      dateRange && /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-x-4", children: [
+        /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: (adventure == null ? void 0 : adventure.startDate) && (adventure == null ? void 0 : adventure.endDate) ? "Dates" : "Date" }),
+        /* @__PURE__ */ jsx("dd", { className: "text-foreground text-right min-w-0", children: dateRange })
+      ] }),
+      (adventure == null ? void 0 : adventure.partnerName) && /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-x-4", children: [
+        /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: TL.partnerLabel }),
+        /* @__PURE__ */ jsx("dd", { className: "text-foreground text-right min-w-0", children: adventure.partnerName })
+      ] }),
+      booking && /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-x-4", children: [
+        /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: TL.bookingLabel }),
+        /* @__PURE__ */ jsx("dd", { className: "text-foreground font-mono tabular-nums text-right min-w-0", children: booking.id })
+      ] }),
+      traveller && /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-x-4", children: [
+        /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: TL.travellerLabel }),
+        /* @__PURE__ */ jsx("dd", { className: "text-foreground font-medium text-right min-w-0 break-words", children: traveller.fullName })
+      ] })
+    ] }) }),
     sorted.length > 0 && /* @__PURE__ */ jsx(FormSection2, { title: answersTitle, children: /* @__PURE__ */ jsx("dl", { className: "flex flex-col gap-y-3 text-sm font-ui", children: sorted.map((f) => /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-x-4", children: [
       /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: f.label }),
       /* @__PURE__ */ jsx("dd", { className: "text-foreground text-right min-w-0 break-words", children: (formatAnswer != null ? formatAnswer : ((field, v) => defaultFormatAnswer(field, v, dateFormatter)))(
         f,
         answers[f.id]
       ) })
-    ] }, f.id)) }) })
+    ] }, f.id)) }) }),
+    terms && /* @__PURE__ */ jsxs(FormSection2, { title: "Terms & Conditions", children: [
+      /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-border bg-muted/30 p-4 max-h-48 overflow-y-auto", children: /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap text-sm leading-relaxed text-foreground font-ui", children: terms.markdown }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm font-ui", children: [
+        /* @__PURE__ */ jsx("div", { className: cn(
+          "inline-flex h-5 w-5 items-center justify-center rounded-full text-white text-xs",
+          terms.accepted ? "bg-primary" : "bg-destructive"
+        ), children: terms.accepted ? "\u2713" : "\u2717" }),
+        /* @__PURE__ */ jsx("span", { className: terms.accepted ? "text-primary font-medium" : "text-destructive font-medium", children: terms.accepted ? "Accepted" : "Not accepted" })
+      ] })
+    ] })
   ] });
 }
 var OTPCodeInput = ({