@planetaexo/design-system 0.9.1 → 0.9.3

package/dist/index.d.cts

@@ -727,11 +727,16 @@ interface RegistrationFormProps {
 declare const TERMS_ACCEPT_KEY = "__registrationTermsAccepted";
 declare function RegistrationForm({ logo, logoAlt, heroImage, heroImageAlt, title, subtitle, adventure, booking, traveller, fields, values, defaultValues, onChange, onSubmit, onValidate, externalErrors, terms, includeTerms, loading, error, defaultPhoneCountry, dateFormatter, labels, className, readOnly, }: RegistrationFormProps): react_jsx_runtime.JSX.Element;
 interface RegistrationSuccessCardProps {
+    /**
+     * `"full"` (default): renders trip info, submitted answers and terms sections.
+     * `"minimal"`: renders only logo/icon, title, message and the `actions` slot.
+     */
+    variant?: "full" | "minimal";
     title?: string;
     message?: string;
     answersTitle?: string;
-    fields: RegistrationField[];
-    answers: RegistrationFormValues;
+    fields?: RegistrationField[];
+    answers?: RegistrationFormValues;
     dateFormatter?: (date: Date | string | undefined) => string;
     formatAnswer?: (field: RegistrationField, value: RegistrationFieldValue) => string;
     className?: string;
@@ -744,6 +749,19 @@ interface RegistrationSuccessCardProps {
         markdown: string;
         accepted: boolean;
     } | null;
+    /**
+     * Layout of the "Terms & Conditions" section.
+     * - `"summary"` (default): shows only the accepted/not-accepted indicator.
+     * - `"full"`: shows the indicator **and** the full `terms.markdown` content
+     *   (plain text, preserving line breaks). Used by the PDF export.
+     */
+    termsLayout?: "summary" | "full";
+    /** i18n-friendly labels for the Terms section. Defaults to English. */
+    termsLabels?: {
+        title?: string;
+        accepted?: string;
+        notAccepted?: string;
+    };
     adventure?: RegistrationAdventure | null;
     booking?: RegistrationBooking | null;
     traveller?: RegistrationTraveller | null;
@@ -755,7 +773,7 @@ interface RegistrationSuccessCardProps {
         travellerLabel?: string;
     };
 }
-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;
+declare function RegistrationSuccessCard({ variant, title, message, answersTitle, fields, answers, dateFormatter, formatAnswer, className, actions, logo, logoAlt, terms, termsLayout, termsLabels, adventure, booking, traveller, tripInfoLabels, }: RegistrationSuccessCardProps): react_jsx_runtime.JSX.Element;
 
 interface FloatingInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     label: string;

package/dist/index.d.ts

@@ -727,11 +727,16 @@ interface RegistrationFormProps {
 declare const TERMS_ACCEPT_KEY = "__registrationTermsAccepted";
 declare function RegistrationForm({ logo, logoAlt, heroImage, heroImageAlt, title, subtitle, adventure, booking, traveller, fields, values, defaultValues, onChange, onSubmit, onValidate, externalErrors, terms, includeTerms, loading, error, defaultPhoneCountry, dateFormatter, labels, className, readOnly, }: RegistrationFormProps): react_jsx_runtime.JSX.Element;
 interface RegistrationSuccessCardProps {
+    /**
+     * `"full"` (default): renders trip info, submitted answers and terms sections.
+     * `"minimal"`: renders only logo/icon, title, message and the `actions` slot.
+     */
+    variant?: "full" | "minimal";
     title?: string;
     message?: string;
     answersTitle?: string;
-    fields: RegistrationField[];
-    answers: RegistrationFormValues;
+    fields?: RegistrationField[];
+    answers?: RegistrationFormValues;
     dateFormatter?: (date: Date | string | undefined) => string;
     formatAnswer?: (field: RegistrationField, value: RegistrationFieldValue) => string;
     className?: string;
@@ -744,6 +749,19 @@ interface RegistrationSuccessCardProps {
         markdown: string;
         accepted: boolean;
     } | null;
+    /**
+     * Layout of the "Terms & Conditions" section.
+     * - `"summary"` (default): shows only the accepted/not-accepted indicator.
+     * - `"full"`: shows the indicator **and** the full `terms.markdown` content
+     *   (plain text, preserving line breaks). Used by the PDF export.
+     */
+    termsLayout?: "summary" | "full";
+    /** i18n-friendly labels for the Terms section. Defaults to English. */
+    termsLabels?: {
+        title?: string;
+        accepted?: string;
+        notAccepted?: string;
+    };
     adventure?: RegistrationAdventure | null;
     booking?: RegistrationBooking | null;
     traveller?: RegistrationTraveller | null;
@@ -755,7 +773,7 @@ interface RegistrationSuccessCardProps {
         travellerLabel?: string;
     };
 }
-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;
+declare function RegistrationSuccessCard({ variant, title, message, answersTitle, fields, answers, dateFormatter, formatAnswer, className, actions, logo, logoAlt, terms, termsLayout, termsLabels, adventure, booking, traveller, tripInfoLabels, }: RegistrationSuccessCardProps): react_jsx_runtime.JSX.Element;
 
 interface FloatingInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     label: string;

package/dist/index.js

@@ -5538,11 +5538,12 @@ function isoOrDateToString(v) {
   return d.toISOString().slice(0, 10);
 }
 function RegistrationSuccessCard({
+  variant = "full",
   title = "Thanks \u2014 your answers have been received.",
   message = "We'll get in touch if anything else is needed.",
   answersTitle = "Your submitted answers",
-  fields,
-  answers,
+  fields = [],
+  answers = {},
   dateFormatter = isoOrDateToString,
   formatAnswer,
   className,
@@ -5550,17 +5551,20 @@ function RegistrationSuccessCard({
   logo,
   logoAlt = "PlanetaEXO",
   terms,
+  termsLayout = "summary",
+  termsLabels,
   adventure,
   booking,
   traveller,
   tripInfoLabels
 }) {
-  var _a, _b, _c, _d, _e;
-  const sorted = [...fields].sort((a, b) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const isMinimal = variant === "minimal";
+  const sorted = isMinimal ? [] : [...fields].sort((a, b) => {
     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 hasTripInfo = !isMinimal && !!(adventure || booking || traveller);
   const dateRange = adventure ? formatDateRange(adventure, dateFormatter) : null;
   const TL = {
     sectionTitle: (_a = tripInfoLabels == null ? void 0 : tripInfoLabels.sectionTitle) != null ? _a : "Trip info",
@@ -5586,40 +5590,43 @@ function RegistrationSuccessCard({
       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 })
+      adventure && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-x-4", children: [
+        /* @__PURE__ */ jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: TL.adventureLabel }),
+        /* @__PURE__ */ jsx("dd", { className: "w-1/2 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 })
+      dateRange && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-x-4", children: [
+        /* @__PURE__ */ jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: (adventure == null ? void 0 : adventure.startDate) && (adventure == null ? void 0 : adventure.endDate) ? "Dates" : "Date" }),
+        /* @__PURE__ */ jsx("dd", { className: "w-1/2 text-foreground text-right min-w-0 break-words", 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 })
+      (adventure == null ? void 0 : adventure.partnerName) && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-x-4", children: [
+        /* @__PURE__ */ jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: TL.partnerLabel }),
+        /* @__PURE__ */ jsx("dd", { className: "w-1/2 text-foreground text-right min-w-0 break-words", 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 })
+      booking && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-x-4", children: [
+        /* @__PURE__ */ jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: TL.bookingLabel }),
+        /* @__PURE__ */ jsx("dd", { className: "w-1/2 text-foreground font-mono tabular-nums text-right min-w-0 break-words", 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 })
+      traveller && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-x-4", children: [
+        /* @__PURE__ */ jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: TL.travellerLabel }),
+        /* @__PURE__ */ jsx("dd", { className: "w-1/2 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)))(
+    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 gap-x-4", children: [
+      /* @__PURE__ */ jsx("dt", { className: "w-1/2 text-muted-foreground break-words", children: f.label }),
+      /* @__PURE__ */ 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)))(
         f,
         answers[f.id]
       ) })
     ] }, f.id)) }) }),
-    terms && /* @__PURE__ */ jsx(FormSection2, { title: "Terms & Conditions", children: /* @__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 font-bold",
-        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" })
+    !isMinimal && terms && /* @__PURE__ */ jsx(FormSection2, { title: (_f = termsLabels == null ? void 0 : termsLabels.title) != null ? _f : "Terms & Conditions", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 text-sm font-ui", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: cn(
+          "inline-flex h-5 w-5 items-center justify-center rounded-full text-white text-xs font-bold",
+          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 ? (_g = termsLabels == null ? void 0 : termsLabels.accepted) != null ? _g : "Accepted" : (_h = termsLabels == null ? void 0 : termsLabels.notAccepted) != null ? _h : "Not accepted" })
+      ] }),
+      termsLayout === "full" && terms.markdown.trim().length > 0 && /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-border bg-muted/30 p-4", children: /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap break-words text-sm leading-relaxed text-foreground font-ui", children: terms.markdown }) })
     ] }) })
   ] });
 }