@planetaexo/design-system 0.58.2 → 0.59.0

package/dist/index.js

@@ -1305,7 +1305,7 @@ function AdventureCard({
   labels,
   interactionsDisabled
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
   const isControlled = (_b = (_a = adventure.optionals) == null ? void 0 : _a.some((o) => o.onCheckedChange !== void 0)) != null ? _b : false;
   const [checkedInternal, setCheckedInternal] = React31.useState(
     new Set((_d = (_c = adventure.optionals) == null ? void 0 : _c.filter((o) => o.defaultChecked).map((o) => o.id)) != null ? _d : [])
@@ -1507,22 +1507,48 @@ function AdventureCard({
           ), children: adventure.detailsSlot })
         ] })
       ] }),
+      adventure.rooms && adventure.rooms.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2.5 mt-1", children: [
+        /* @__PURE__ */ jsx("h4", { className: "text-base font-bold text-foreground font-heading", children: (_p = adventure.accommodationsLabel) != null ? _p : "Accommodations" }),
+        /* @__PURE__ */ 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__ */ jsxs("li", { className: "flex items-start gap-3", children: [
+            room.imageUrl && // eslint-disable-next-line @next/next/no-img-element
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: room.imageUrl,
+                alt: room.roomName,
+                className: "w-20 h-16 object-cover rounded shrink-0"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-base font-semibold text-foreground", children: `${room.qty}\xD7 ${room.roomName}` }),
+              /* @__PURE__ */ jsxs("div", { className: "text-sm text-foreground/70 flex items-center gap-2 flex-wrap", children: [
+                /* @__PURE__ */ jsx("span", { children: room.accommodationName }),
+                /* @__PURE__ */ 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__ */ jsx("p", { className: "text-sm text-foreground/70 mt-1 leading-snug", children: room.description })
+            ] })
+          ] }, i);
+        }) })
+      ] }),
       adventure.included && adventure.included.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2.5 mt-1", children: [
-        /* @__PURE__ */ jsx("h4", { className: "text-base font-bold text-foreground font-heading", children: (_p = adventure.includedLabel) != null ? _p : "What's included" }),
+        /* @__PURE__ */ jsx("h4", { className: "text-base font-bold text-foreground font-heading", children: (_q = adventure.includedLabel) != null ? _q : "What's included" }),
         /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1.5", children: adventure.included.map((item, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-base text-foreground/80 font-sans", children: [
           /* @__PURE__ */ jsx(CheckIcon, { className: "w-4 h-4 text-primary shrink-0 mt-1" }),
           item
         ] }, i)) })
       ] }),
       adventure.notIncluded && adventure.notIncluded.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2.5 mt-1", children: [
-        /* @__PURE__ */ jsx("h4", { className: "text-base font-bold text-foreground font-heading", children: (_q = adventure.notIncludedLabel) != null ? _q : "What's not included" }),
+        /* @__PURE__ */ jsx("h4", { className: "text-base font-bold text-foreground font-heading", children: (_r = adventure.notIncludedLabel) != null ? _r : "What's not included" }),
         /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1.5", children: adventure.notIncluded.map((item, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-base text-foreground/80 font-sans", children: [
           /* @__PURE__ */ jsx(XIcon, { className: "w-4 h-4 text-destructive shrink-0 mt-1" }),
           item
         ] }, i)) })
       ] }),
       adventure.cancellationPolicy && adventure.cancellationPolicy.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2.5 mt-1", children: [
-        /* @__PURE__ */ jsx("h4", { className: "text-base font-bold text-foreground font-heading", children: (_r = adventure.cancellationPolicyLabel) != null ? _r : "Cancellation policy" }),
+        /* @__PURE__ */ jsx("h4", { className: "text-base font-bold text-foreground font-heading", children: (_s = adventure.cancellationPolicyLabel) != null ? _s : "Cancellation policy" }),
         /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1.5", children: adventure.cancellationPolicy.map((item, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-base text-muted-foreground font-sans", children: [
           /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-primary shrink-0 mt-2.5" }),
           item
@@ -4071,7 +4097,14 @@ var DEFAULT_LABELS = {
   notIncludedHeading: "O que n\xE3o est\xE1 incluso",
   childBadge: "child",
   adultsUnit: "adult(s)",
-  childrenUnit: "child(ren)"
+  childrenUnit: "child(ren)",
+  accommodationsHeading: "ACCOMMODATIONS",
+  bedArrangementLabels: {
+    DOUBLE: "Double",
+    TWIN: "Twin",
+    SINGLE: "Single",
+    TRIPLE: "Triple"
+  }
 };
 function BookingAdventureCard({
   tag,
@@ -4091,10 +4124,11 @@ function BookingAdventureCard({
   notIncluded,
   lineItems,
   subtotal,
+  rooms,
   labels,
   className
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
   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,
@@ -4107,7 +4141,14 @@ function BookingAdventureCard({
     notIncludedHeading: (_i = labels == null ? void 0 : labels.notIncludedHeading) != null ? _i : DEFAULT_LABELS.notIncludedHeading,
     childBadge: (_j = labels == null ? void 0 : labels.childBadge) != null ? _j : DEFAULT_LABELS.childBadge,
     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
+    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,
+    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
+    }
   };
   const hasTravellers = !!travellers && travellers.length > 0;
   const hasItinerary = !!itinerary && itinerary.length > 0;
@@ -4115,6 +4156,7 @@ function BookingAdventureCard({
   const hasIncluded = !!included && included.length > 0;
   const hasNotIncluded = !!notIncluded && notIncluded.length > 0;
   const hasLineItems = lineItems.length > 0;
+  const hasRooms = !!rooms && rooms.length > 0;
   const dateRange = endDate ? `${startDate} \u2192 ${endDate}` : startDate;
   const showSlots = !!slots;
   const slotsText = showSlots ? [
@@ -4411,6 +4453,118 @@ function BookingAdventureCard({
               );
             })
           ] }),
+          hasRooms && /* @__PURE__ */ jsxs("div", { style: { marginTop: "4px" }, children: [
+            /* @__PURE__ */ jsx(
+              "hr",
+              {
+                style: {
+                  border: "none",
+                  borderTop: `1px solid ${emailTokens.border}`,
+                  marginBottom: "10px"
+                }
+              }
+            ),
+            /* @__PURE__ */ 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__ */ jsx(
+              "table",
+              {
+                cellPadding: 0,
+                cellSpacing: 0,
+                style: {
+                  borderCollapse: "collapse",
+                  width: "100%",
+                  marginBottom: i < rooms.length - 1 ? "10px" : "0"
+                },
+                children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                  room.imageUrl && /* @__PURE__ */ jsx(
+                    "td",
+                    {
+                      style: {
+                        width: "80px",
+                        verticalAlign: "top",
+                        paddingRight: "10px"
+                      },
+                      children: /* @__PURE__ */ jsx(
+                        "img",
+                        {
+                          src: room.imageUrl,
+                          alt: room.roomName,
+                          style: {
+                            width: "80px",
+                            height: "60px",
+                            objectFit: "cover",
+                            display: "block",
+                            borderRadius: "6px"
+                          }
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("td", { style: { verticalAlign: "top" }, children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          fontSize: "14px",
+                          fontWeight: 600,
+                          color: emailTokens.foreground,
+                          marginBottom: "2px"
+                        },
+                        children: `${room.qty}\xD7 ${room.roomName}`
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("div", { style: { fontSize: "12px", color: emailTokens.mutedForeground }, children: [
+                      room.accommodationName,
+                      /* @__PURE__ */ 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__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          fontSize: "12px",
+                          color: emailTokens.bodyText,
+                          marginTop: "4px",
+                          lineHeight: "1.4"
+                        },
+                        children: room.description
+                      }
+                    )
+                  ] })
+                ] }) })
+              },
+              i
+            ))
+          ] }),
           (hasDescription || hasItinerary) && /* @__PURE__ */ jsxs("div", { style: { marginTop: "4px" }, children: [
             /* @__PURE__ */ jsx(
               "hr",
@@ -4663,8 +4817,21 @@ function BookingAdventureCard({
     }
   );
 }
-function BookingSummary({ heading, rows, footer, className }) {
-  var _a, _b;
+var DEFAULT_BED_LABELS = {
+  DOUBLE: "Double",
+  TWIN: "Twin",
+  SINGLE: "Single",
+  TRIPLE: "Triple"
+};
+function BookingSummary({ heading, rows, rooms, roomsHeading, bedArrangementLabels, footer, className }) {
+  var _a, _b, _c, _d, _e, _f;
+  const hasRooms = !!rooms && rooms.length > 0;
+  const bedLabels = {
+    DOUBLE: (_a = bedArrangementLabels == null ? void 0 : bedArrangementLabels.DOUBLE) != null ? _a : DEFAULT_BED_LABELS.DOUBLE,
+    TWIN: (_b = bedArrangementLabels == null ? void 0 : bedArrangementLabels.TWIN) != null ? _b : DEFAULT_BED_LABELS.TWIN,
+    SINGLE: (_c = bedArrangementLabels == null ? void 0 : bedArrangementLabels.SINGLE) != null ? _c : DEFAULT_BED_LABELS.SINGLE,
+    TRIPLE: (_d = bedArrangementLabels == null ? void 0 : bedArrangementLabels.TRIPLE) != null ? _d : DEFAULT_BED_LABELS.TRIPLE
+  };
   return /* @__PURE__ */ jsxs("div", { className, style: { marginBottom: "24px" }, children: [
     heading && /* @__PURE__ */ jsx(
       "p",
@@ -4699,7 +4866,7 @@ function BookingSummary({ heading, rows, footer, className }) {
             children: /* @__PURE__ */ jsxs("tbody", { children: [
               rows.map((row, i) => {
                 var _a2;
-                const isLastRowWithoutFooter = i === rows.length - 1 && !footer;
+                const isLastRowWithoutFooter = i === rows.length - 1 && !footer && !hasRooms;
                 return /* @__PURE__ */ jsxs(
                   "tr",
                   {
@@ -4737,6 +4904,50 @@ function BookingSummary({ heading, rows, footer, className }) {
                   i
                 );
               }),
+              hasRooms && /* @__PURE__ */ jsx(
+                "tr",
+                {
+                  style: !footer ? {} : { borderBottom: `1px solid ${emailTokens.border}` },
+                  children: /* @__PURE__ */ jsxs(
+                    "td",
+                    {
+                      colSpan: 2,
+                      style: {
+                        padding: "12px 20px",
+                        backgroundColor: emailTokens.muted
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            style: {
+                              fontSize: "10px",
+                              fontWeight: 700,
+                              color: emailTokens.mutedForeground,
+                              textTransform: "uppercase",
+                              letterSpacing: "0.1em",
+                              marginBottom: "6px"
+                            },
+                            children: roomsHeading != null ? roomsHeading : "Accommodations"
+                          }
+                        ),
+                        rooms.map((room, i) => /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            style: {
+                              fontSize: "14px",
+                              color: emailTokens.foreground,
+                              marginBottom: i < rooms.length - 1 ? "4px" : 0
+                            },
+                            children: `${room.qty}\xD7 ${room.roomName} \u2014 ${bedLabels[room.bedArrangement]}`
+                          },
+                          i
+                        ))
+                      ]
+                    }
+                  )
+                }
+              ),
               footer && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
                 "td",
                 {
@@ -4744,8 +4955,8 @@ function BookingSummary({ heading, rows, footer, className }) {
                   style: {
                     padding: "12px 20px",
                     textAlign: "center",
-                    fontWeight: (_a = footer.fontWeight) != null ? _a : 600,
-                    color: (_b = footer.color) != null ? _b : emailTokens.foreground,
+                    fontWeight: (_e = footer.fontWeight) != null ? _e : 600,
+                    color: (_f = footer.color) != null ? _f : emailTokens.foreground,
                     backgroundColor: footer.backgroundColor
                   },
                   children: footer.text
@@ -6412,6 +6623,13 @@ var DEFAULT_LABELS9 = {
   datesLabel: "Dates",
   numberOfPeopleLabel: "Number of Travellers",
   optionalsLabel: "Optionals",
+  accommodationsHeading: "Accommodations",
+  bedArrangementLabels: {
+    DOUBLE: "Double",
+    TWIN: "Twin",
+    SINGLE: "Single",
+    TRIPLE: "Triple"
+  },
   registrationPendingNotice: "The travellers' registration details will be sent to you as soon as all travellers have completed their forms.",
   mustReplyToConfirm: "Please reply to this email to confirm the booking.",
   closingAgent: (agentName, contact) => /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -6435,6 +6653,7 @@ function PartnerBookingCreatedEmail({
   dateRange,
   travellersCount,
   optionals,
+  rooms,
   booker,
   agent,
   logoUrl,
@@ -6499,7 +6718,16 @@ function PartnerBookingCreatedEmail({
         /* @__PURE__ */ jsx("p", { style: { marginBottom: "16px" }, children: l.greeting(partnerName) }),
         /* @__PURE__ */ jsx("p", { style: { marginBottom: "24px" }, children: l.intro(adventureName) }),
         sectionDivider,
-        /* @__PURE__ */ jsx(BookingSummary, { heading: l.summaryHeading, rows: summaryRows }),
+        /* @__PURE__ */ jsx(
+          BookingSummary,
+          {
+            heading: l.summaryHeading,
+            rows: summaryRows,
+            rooms,
+            roomsHeading: l.accommodationsHeading,
+            bedArrangementLabels: l.bedArrangementLabels
+          }
+        ),
         sectionDivider,
         /* @__PURE__ */ jsxs(
           "div",
@@ -10060,6 +10288,7 @@ function Picture(_a) {
     "onLoad",
     "onError"
   ]);
+  var _a2;
   const ref = React31.useRef(null);
   const [visible, setVisible] = React31.useState(eager);
   const [loaded, setLoaded] = React31.useState(false);
@@ -10088,6 +10317,7 @@ function Picture(_a) {
   const webp = webpVariantUrl(src);
   const realSrc = visible ? src : PLACEHOLDER_SRC;
   const decodingResolved = decoding != null ? decoding : eager ? void 0 : "async";
+  const fetchPriorityResolved = (_a2 = imgProps.fetchPriority) != null ? _a2 : eager ? void 0 : "low";
   const handleLoad = (e) => {
     if (visible) setLoaded(true);
     onLoad == null ? void 0 : onLoad(e);
@@ -10113,6 +10343,7 @@ function Picture(_a) {
           onLoad: handleLoad,
           onError: handleError
         }, imgProps), {
+          fetchPriority: fetchPriorityResolved,
           style: mergedStyle
         })
       )
@@ -10135,6 +10366,7 @@ function Picture(_a) {
           onLoad: handleLoad,
           onError: handleError
         }, imgProps), {
+          fetchPriority: fetchPriorityResolved,
           style: mergedStyle
         })
       )