@planetaexo/design-system 0.65.0 → 0.66.0

package/dist/index.cjs

@@ -1327,7 +1327,7 @@ function AdventureCard({
   labels,
   interactionsDisabled
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
   const isControlled = (_b = (_a = adventure.optionals) == null ? void 0 : _a.some((o) => o.onCheckedChange !== void 0)) != null ? _b : false;
   const [checkedInternal, setCheckedInternal] = React32__namespace.useState(
     new Set((_d = (_c = adventure.optionals) == null ? void 0 : _c.filter((o) => o.defaultChecked).map((o) => o.id)) != null ? _d : [])
@@ -1501,6 +1501,29 @@ function AdventureCard({
           }
         )
       ] }),
+      adventure.rooms && adventure.rooms.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-5 mt-1", children: adventure.rooms.map((room, i) => {
+        var _a2, _b2;
+        const bedLabel = (_b2 = (_a2 = adventure.bedArrangementLabels) == null ? void 0 : _a2[room.bedArrangement]) != null ? _b2 : room.bedArrangement === "DOUBLE" ? "Double" : room.bedArrangement === "TWIN" ? "Twin" : room.bedArrangement === "SINGLE" ? "Single" : "Triple";
+        const heading = adventure.accommodationRoomHeading ? adventure.accommodationRoomHeading(room.roomName) : `Accommodation: ${room.roomName}`;
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-lg font-semibold text-foreground font-heading", children: heading }),
+          room.imageUrl && // eslint-disable-next-line @next/next/no-img-element
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: room.imageUrl,
+              alt: room.roomName,
+              className: "w-full h-auto max-w-full rounded"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base font-semibold text-foreground", children: `${room.qty}\xD7 ${room.roomName}` }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-foreground/70 flex items-center gap-2 flex-wrap", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: room.accommodationName }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block px-2 py-0.5 text-xs font-semibold bg-primary/10 text-primary rounded uppercase tracking-wide", children: bedLabel })
+          ] }),
+          room.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-foreground/70 leading-snug", children: room.description })
+        ] }, i);
+      }) }),
       (adventure.description || adventure.detailsSlot) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "my-1" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -1529,48 +1552,22 @@ function AdventureCard({
           ), children: adventure.detailsSlot })
         ] })
       ] }),
-      adventure.rooms && adventure.rooms.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2.5 mt-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-base font-bold text-foreground font-heading", children: (_p = adventure.accommodationsLabel) != null ? _p : "Accommodations" }),
-        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-3", children: adventure.rooms.map((room, i) => {
-          var _a2, _b2;
-          const bedLabel = (_b2 = (_a2 = adventure.bedArrangementLabels) == null ? void 0 : _a2[room.bedArrangement]) != null ? _b2 : room.bedArrangement === "DOUBLE" ? "Double" : room.bedArrangement === "TWIN" ? "Twin" : room.bedArrangement === "SINGLE" ? "Single" : "Triple";
-          return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-start gap-3", children: [
-            room.imageUrl && // eslint-disable-next-line @next/next/no-img-element
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
-              {
-                src: room.imageUrl,
-                alt: room.roomName,
-                className: "w-20 h-16 object-cover rounded shrink-0"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base font-semibold text-foreground", children: `${room.qty}\xD7 ${room.roomName}` }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-foreground/70 flex items-center gap-2 flex-wrap", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: room.accommodationName }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block px-2 py-0.5 text-xs font-semibold bg-primary/10 text-primary rounded uppercase tracking-wide", children: bedLabel })
-              ] }),
-              room.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-foreground/70 mt-1 leading-snug", children: room.description })
-            ] })
-          ] }, i);
-        }) })
-      ] }),
       adventure.included && adventure.included.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2.5 mt-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-base font-bold text-foreground font-heading", children: (_q = adventure.includedLabel) != null ? _q : "What's included" }),
+        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-base font-bold text-foreground font-heading", children: (_p = adventure.includedLabel) != null ? _p : "What's included" }),
         /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-1.5", children: adventure.included.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-start gap-2 text-base text-foreground/80 font-sans", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, { className: "w-4 h-4 text-primary shrink-0 mt-1" }),
           item
         ] }, i)) })
       ] }),
       adventure.notIncluded && adventure.notIncluded.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2.5 mt-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-base font-bold text-foreground font-heading", children: (_r = adventure.notIncludedLabel) != null ? _r : "What's not included" }),
+        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-base font-bold text-foreground font-heading", children: (_q = adventure.notIncludedLabel) != null ? _q : "What's not included" }),
         /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-1.5", children: adventure.notIncluded.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-start gap-2 text-base text-foreground/80 font-sans", children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "w-4 h-4 text-destructive shrink-0 mt-1" }),
           item
         ] }, i)) })
       ] }),
       adventure.cancellationPolicy && adventure.cancellationPolicy.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2.5 mt-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-base font-bold text-foreground font-heading", children: (_s = adventure.cancellationPolicyLabel) != null ? _s : "Cancellation policy" }),
+        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-base font-bold text-foreground font-heading", children: (_r = adventure.cancellationPolicyLabel) != null ? _r : "Cancellation policy" }),
         /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-1.5", children: adventure.cancellationPolicy.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-start gap-2 text-base text-muted-foreground font-sans", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-primary shrink-0 mt-2.5" }),
           item
@@ -4147,6 +4144,7 @@ var DEFAULT_LABELS = {
   adultsUnit: "adult(s)",
   childrenUnit: "child(ren)",
   accommodationsHeading: "ACCOMMODATIONS",
+  accommodationRoomHeading: (name) => `Accommodation: ${name}`,
   bedArrangementLabels: {
     DOUBLE: "Double",
     TWIN: "Twin",
@@ -4174,10 +4172,11 @@ function BookingAdventureCard({
   lineItems,
   subtotal,
   rooms,
+  roomLayout = "compact",
   labels,
   className
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v;
   const l = {
     travellersHeading: (_a = labels == null ? void 0 : labels.travellersHeading) != null ? _a : DEFAULT_LABELS.travellersHeading,
     detailsHeading: (_b = labels == null ? void 0 : labels.detailsHeading) != null ? _b : DEFAULT_LABELS.detailsHeading,
@@ -4192,11 +4191,12 @@ function BookingAdventureCard({
     adultsUnit: (_k = labels == null ? void 0 : labels.adultsUnit) != null ? _k : DEFAULT_LABELS.adultsUnit,
     childrenUnit: (_l = labels == null ? void 0 : labels.childrenUnit) != null ? _l : DEFAULT_LABELS.childrenUnit,
     accommodationsHeading: (_m = labels == null ? void 0 : labels.accommodationsHeading) != null ? _m : DEFAULT_LABELS.accommodationsHeading,
+    accommodationRoomHeading: (_n = labels == null ? void 0 : labels.accommodationRoomHeading) != null ? _n : DEFAULT_LABELS.accommodationRoomHeading,
     bedArrangementLabels: {
-      DOUBLE: (_o = (_n = labels == null ? void 0 : labels.bedArrangementLabels) == null ? void 0 : _n.DOUBLE) != null ? _o : DEFAULT_LABELS.bedArrangementLabels.DOUBLE,
-      TWIN: (_q = (_p = labels == null ? void 0 : labels.bedArrangementLabels) == null ? void 0 : _p.TWIN) != null ? _q : DEFAULT_LABELS.bedArrangementLabels.TWIN,
-      SINGLE: (_s = (_r = labels == null ? void 0 : labels.bedArrangementLabels) == null ? void 0 : _r.SINGLE) != null ? _s : DEFAULT_LABELS.bedArrangementLabels.SINGLE,
-      TRIPLE: (_u = (_t = labels == null ? void 0 : labels.bedArrangementLabels) == null ? void 0 : _t.TRIPLE) != null ? _u : DEFAULT_LABELS.bedArrangementLabels.TRIPLE
+      DOUBLE: (_p = (_o = labels == null ? void 0 : labels.bedArrangementLabels) == null ? void 0 : _o.DOUBLE) != null ? _p : DEFAULT_LABELS.bedArrangementLabels.DOUBLE,
+      TWIN: (_r = (_q = labels == null ? void 0 : labels.bedArrangementLabels) == null ? void 0 : _q.TWIN) != null ? _r : DEFAULT_LABELS.bedArrangementLabels.TWIN,
+      SINGLE: (_t = (_s = labels == null ? void 0 : labels.bedArrangementLabels) == null ? void 0 : _s.SINGLE) != null ? _t : DEFAULT_LABELS.bedArrangementLabels.SINGLE,
+      TRIPLE: (_v = (_u = labels == null ? void 0 : labels.bedArrangementLabels) == null ? void 0 : _u.TRIPLE) != null ? _v : DEFAULT_LABELS.bedArrangementLabels.TRIPLE
     }
   };
   const hasTravellers = !!travellers && travellers.length > 0;
@@ -4535,7 +4535,116 @@ function BookingAdventureCard({
               );
             })
           ] }),
-          hasRooms && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "4px" }, children: [
+          hasRooms && roomLayout === "feature" && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "4px" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "hr",
+              {
+                style: {
+                  border: "none",
+                  borderTop: `1px solid ${emailTokens.border}`,
+                  marginBottom: "10px"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                style: {
+                  fontSize: "10px",
+                  fontWeight: 700,
+                  color: emailTokens.mutedForeground,
+                  textTransform: "uppercase",
+                  letterSpacing: "0.1em",
+                  margin: "0 0 10px 0"
+                },
+                children: l.accommodationsHeading
+              }
+            ),
+            rooms.map((room, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                style: {
+                  marginBottom: i < rooms.length - 1 ? "16px" : "0"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "p",
+                    {
+                      style: {
+                        fontSize: "16px",
+                        fontWeight: 700,
+                        color: emailTokens.foreground,
+                        lineHeight: "1.3",
+                        margin: "0 0 8px 0"
+                      },
+                      children: l.accommodationRoomHeading(room.roomName)
+                    }
+                  ),
+                  room.imageUrl && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: "8px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "img",
+                    {
+                      src: room.imageUrl,
+                      alt: room.roomName,
+                      style: {
+                        width: "100%",
+                        height: "auto",
+                        maxWidth: "100%",
+                        display: "block",
+                        borderRadius: "8px"
+                      }
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      style: {
+                        fontSize: "14px",
+                        fontWeight: 600,
+                        color: emailTokens.foreground,
+                        marginBottom: "2px"
+                      },
+                      children: `${room.qty}\xD7 ${room.roomName}`
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: "12px", color: emailTokens.mutedForeground }, children: [
+                    room.accommodationName,
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        style: {
+                          display: "inline-block",
+                          marginLeft: "8px",
+                          padding: "1px 6px",
+                          fontSize: "10px",
+                          fontWeight: 600,
+                          color: emailTokens.primary,
+                          backgroundColor: emailTokens.primaryLight,
+                          borderRadius: "4px",
+                          textTransform: "uppercase",
+                          letterSpacing: "0.05em"
+                        },
+                        children: l.bedArrangementLabels[room.bedArrangement]
+                      }
+                    )
+                  ] }),
+                  room.description && /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      style: {
+                        fontSize: "12px",
+                        color: emailTokens.bodyText,
+                        marginTop: "4px",
+                        lineHeight: "1.4"
+                      },
+                      children: room.description
+                    }
+                  )
+                ]
+              },
+              i
+            ))
+          ] }),
+          hasRooms && roomLayout === "compact" && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "4px" }, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "hr",
               {
@@ -5174,6 +5283,14 @@ var DEFAULT_LABELS3 = {
   pricingLabel: "Pricing",
   subtotalLabel: "Subtotal",
   totalLabel: "Total",
+  accommodationsLabel: "ACCOMMODATIONS",
+  accommodationRoomHeading: (name) => `Accommodation: ${name}`,
+  bedArrangementLabels: {
+    DOUBLE: "Double",
+    TWIN: "Twin",
+    SINGLE: "Single",
+    TRIPLE: "Triple"
+  },
   paymentSummaryHeading: "\u{1F4B0} Payment Summary",
   paymentDetailsHeading: "Payment Details",
   depositLabel: (percent) => `Deposit (${percent}%)`,
@@ -5342,6 +5459,7 @@ function BookingPaymentConfirmationEmail({
                   lineItems: lineItemsToPass,
                   subtotal: adventure.subtotal,
                   rooms: adventure.rooms,
+                  roomLayout: "feature",
                   labels: {
                     travellersHeading: l.travellersLabel,
                     detailsHeading: l.itineraryLabel,
@@ -5351,7 +5469,10 @@ function BookingPaymentConfirmationEmail({
                     notIncludedHeading: l.notIncludedLabel,
                     childBadge: l.childBadge,
                     adultsUnit: l.adultsUnit,
-                    childrenUnit: l.childrenUnit
+                    childrenUnit: l.childrenUnit,
+                    accommodationsHeading: l.accommodationsLabel,
+                    accommodationRoomHeading: l.accommodationRoomHeading,
+                    bedArrangementLabels: l.bedArrangementLabels
                   }
                 }
               )