@reblu/site-blocks 0.29.0 → 0.30.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @reblu/site-blocks
 
+## 0.30.0
+
+### Minor Changes
+
+- 3b096d4: `CartLineList` gains an optional `lineIncludes` render prop (REB-1208): it adds a collapsed «Qué incluye» disclosure under a line (`labels.includesSummary`). New drop-in `CartLineIncludes` (term/description list plus optional `note`) and `bundleComponentsToIncludes`, which maps `ShopProductDetail.bundleComponents` to its entries. Omitting the prop renders the cart exactly as before.
+
 ## 0.29.0
 
 ### Minor Changes

package/README.md

@@ -327,7 +327,8 @@ for the wiring steps and a full example app).
 | `AddToCartButton`     | `./client` | `onAddToCart?`, `disabled?`, `outOfStock?`, `pending?`, `error?`, `item?`, `successDurationMs?`, `onAdded?`, `onError?` | No — carries a built-in confirmed/error timer (`useState`/`useEffect`), see below |
 | `CartIcon`            | `./client` | `itemCount`, `href`, `hydrated?`, `bumpOnAdd?`                                                                          | No — the bump animation needs state, see below                                    |
 | `AddedToCartToast`    | `.`        | `productName`, `cartHref`, `status?`, `quantity?`, `imageUrl?`                                                          | Yes                                                                               |
-| `CartLineList`        | `.`        | `items`, `onQuantityChange?`, `onRemove?`, `liveMessage?`, `notice?`, `lineMessage?`                                    | Yes                                                                               |
+| `CartLineList`        | `.`        | `items`, `onQuantityChange?`, `onRemove?`, `liveMessage?`, `notice?`, `lineMessage?`, `lineIncludes?`                   | Yes                                                                               |
+| `CartLineIncludes`    | `.`        | `entries`, `note?`                                                                                                      | Yes                                                                               |
 | `CartAdjustmentsNotice` | `.`      | `removed?`, `quantityChanges?`, `priceChanges?`, `labels?`                                                              | Yes                                                                               |
 | `CartSummary`         | `.`        | `subtotal`, `discount?`, `autoDiscount?`, `shipping?`, `shippingEnabled?`, `total`, `notice?`                           | Yes                                                                               |
 | `CheckoutLoginPrompt` | `.`        | `open`, `email`, `onEmailChange`, `onClose`, `onSubmitEmail`, `onContinueAsGuest`                                       | Yes (renders `null` when `open` is false)                                         |
@@ -530,6 +531,36 @@ function). `currencyCode`/`locale` format the prices.
 `CartLineList`'s `lineMessage={(item) => …}` renders a message under a line,
 e.g. `validation.getLineError(item.productId, item.variantId)?.message`.
 
+### «Qué incluye» per line — `lineIncludes` + `CartLineIncludes` (REB-1208)
+
+`CartLineList`'s `lineIncludes={(item) => …}` adds a collapsed
+`<details>` under a line whose summary reads «Qué incluye»
+(`labels.includesSummary`). Return `null`/`undefined` for lines with nothing
+to show; omit the prop and the cart renders exactly as before.
+
+`CartLineIncludes` is the drop-in body: a term/description list plus an
+optional `note`. Build its entries from the product's own data — nothing is
+fixed per product type. For a bundle, `bundleComponentsToIncludes` maps
+`ShopProductDetail.bundleComponents` to name / `x{quantity}` rows:
+
+```tsx
+import { CartLineIncludes, CartLineList, bundleComponentsToIncludes } from '@reblu/site-blocks'
+
+// `detailsById`: the SITE's ShopProductDetail per productId (already fetched for the ficha).
+<CartLineList
+  items={items}
+  lineIncludes={(item) => {
+    const product = detailsById[item.productId]
+    if (!product) return null
+    const entries = [
+      ...bundleComponentsToIncludes(product.bundleComponents),
+      // …plus any other `{ label, value }` row built from the product's own data.
+    ]
+    return entries.length > 0 ? <CartLineIncludes entries={entries} /> : null
+  }}
+/>
+```
+
 ### `OrderConfirmation` states (REB-837)
 
 `status` accepts `@reblu/site-next/shop`'s `useShopOrderStatus` hook result

package/dist/index.cjs

@@ -24,6 +24,7 @@ __export(src_exports, {
   AddedToCartToast: () => AddedToCartToast,
   ArbitrationBadge: () => ArbitrationBadge,
   CartAdjustmentsNotice: () => CartAdjustmentsNotice,
+  CartLineIncludes: () => CartLineIncludes,
   CartLineList: () => CartLineList,
   CartSummary: () => CartSummary,
   CheckoutDeliveryChoice: () => CheckoutDeliveryChoice,
@@ -73,6 +74,7 @@ __export(src_exports, {
   TrustBadges: () => TrustBadges,
   buildFaqPageJsonLd: () => buildFaqPageJsonLd,
   buildShareUrls: () => buildShareUrls,
+  bundleComponentsToIncludes: () => bundleComponentsToIncludes,
   collectFaqItems: () => collectFaqItems,
   defaultCheckoutFulfillment: () => defaultCheckoutFulfillment,
   formatPrice: () => formatPrice,
@@ -15167,15 +15169,43 @@ function CourseCatalogFilters({
 
 // src/components/cart-line-list.tsx
 var import_utils17 = require("@reblu/site-ui/utils");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime21 = (
+  // eslint-disable-next-line react/no-array-index-key -- entries are positional, SITE-built rows
+  require("react/jsx-runtime")
+);
 var DEFAULT_LABELS2 = {
   quantityLabel: "Cantidad",
   decrease: "Reducir cantidad",
   increase: "Aumentar cantidad",
   remove: "Eliminar",
   unitPriceSuffix: "/ ud.",
-  cancelledNotice: "Pago cancelado: tu carrito sigue aqu\xED"
+  cancelledNotice: "Pago cancelado: tu carrito sigue aqu\xED",
+  includesSummary: "Qu\xE9 incluye"
 };
+function CartLineIncludes({ entries, note, className }) {
+  const hasNote = note != null && note !== false && note !== "";
+  if (entries.length === 0 && !hasNote) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    "div",
+    {
+      className: (0, import_utils17.cn)("mt-2 space-y-2 rounded-lg bg-muted px-4 py-3 text-sm", className),
+      "data-slot": "cart-line-includes",
+      children: [
+        entries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("dl", { className: "grid grid-cols-[max-content_1fr] gap-x-4 gap-y-1.5", children: entries.map((entry, idx) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "contents", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("dt", { className: "font-semibold text-muted-foreground", children: entry.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("dd", { className: "m-0", children: entry.value })
+        ] }, idx)) }),
+        hasNote && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-muted-foreground", children: note })
+      ]
+    }
+  );
+}
+function bundleComponentsToIncludes(components) {
+  return components.map(({ quantity, component }) => ({
+    label: component.name,
+    value: `x${quantity}`
+  }));
+}
 function lineKey(productId, variantId) {
   return `${productId}-${variantId ?? "no-variant"}`;
 }
@@ -15186,6 +15216,7 @@ function CartLineList({
   liveMessage,
   notice,
   lineMessage,
+  lineIncludes,
   labels,
   currencyCode,
   locale,
@@ -15209,6 +15240,7 @@ function CartLineList({
       const atMax = item.quantity >= maxQty;
       const atMin = item.quantity <= 1;
       const message = lineMessage?.(item);
+      const includes = lineIncludes?.(item);
       return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
         "li",
         {
@@ -15273,7 +15305,11 @@ function CartLineList({
                   "data-slot": "cart-line-list-line-message",
                   children: message
                 }
-              )
+              ),
+              includes != null && includes !== false && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("details", { className: "mt-2", "data-slot": "cart-line-list-includes", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("summary", { className: "cursor-pointer text-sm font-semibold text-primary", children: t.includesSummary }),
+                includes
+              ] })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex-shrink-0 text-right", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-base font-bold", children: formatPrice(item.unitPrice * item.quantity, currencyCode, locale) }) })
           ]
@@ -16633,6 +16669,7 @@ var import_site_contracts = require("@reblu/site-contracts");
   AddedToCartToast,
   ArbitrationBadge,
   CartAdjustmentsNotice,
+  CartLineIncludes,
   CartLineList,
   CartSummary,
   CheckoutDeliveryChoice,
@@ -16682,6 +16719,7 @@ var import_site_contracts = require("@reblu/site-contracts");
   TrustBadges,
   buildFaqPageJsonLd,
   buildShareUrls,
+  bundleComponentsToIncludes,
   collectFaqItems,
   defaultCheckoutFulfillment,
   formatPrice,