@reblu/site-blocks 0.29.0 → 0.31.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @reblu/site-blocks
 
+## 0.31.0
+
+### Minor Changes
+
+- 9a83295: Guest course checkout (REB-1264). Additive only: every existing export behaves as before.
+  - `@reblu/site-contracts` exports `AcademyCheckoutRequest`, `AcademyCheckoutBilling`, `AcademyCheckoutSession` and `AcademyCheckoutErrorCode` (`POST /api/site/academy/checkout`).
+  - `@reblu/site-client` adds `client.academy.checkout(body, options?)` → `{ url, sessionId }` (Stripe URL re-checked like `shop.checkout()`); a refusal throws `AcademyCheckoutError` (an `ApiError`) with the stable `code` and `details`.
+  - `@reblu/site-next` adds `createAcademyCheckoutRoute()` in `./route-handlers`: forwards `x-reblu-visitor-ip`, fills `successUrl`/`cancelUrl` on `coursePath` and re-checks the Stripe URL. `createShopCheckoutRoute` now shares that code, unchanged in behaviour.
+  - `@reblu/site-blocks` adds the drop-in `CourseGuestCheckoutForm` (`./client`): name, surname, email, terms box, the course's consent box, optional full invoice, total and pay notice; it gives way to the request form on `ENROLLMENT_REQUEST_REQUIRED`. The root entry adds `courseSellsAsGuest` and `toAcademyCheckoutInvoiceFields`.
+
+- faf78e8: Checkout pickup point (REB-1276). `CheckoutDeliveryChoice`: switching to pickup with exactly one pickup point now selects it (`pickupLocationId` is sent); with two or more points none is preselected, as before. New `isCheckoutDeliveryComplete(value, requiresDelivery?)` tells whether the choice can be quoted (pickup needs a point), so the SITE passes `null` to `useShopQuote` instead of asking for a quote known to answer 422. New `checkoutQuoteNotice({ fulfillment, requiresDelivery?, error? })` and `<CheckoutQuoteNotice reason labels? />` render «Elige un punto de recogida» (`role=status`) for an incomplete pickup and for the `PICKUP_LOCATION_INVALID` quote error, instead of the generic total error. Also exports `DEFAULT_CHECKOUT_QUOTE_NOTICE_LABELS` and the `CheckoutQuoteNotice*` types. All additive.
+- faf78e8: `OrderConfirmation` default copy change (REB-1200, approved by the owner). The confirmed-order line no longer says «Te hemos enviado un email con tu acceso.» (wrong for physical orders and for buyers who already have an account). The default `foundDescription` is now «Tu pedido {number} está confirmado. Te hemos enviado el resumen a {email}.»: `{number}` and `{email}` are filled from the order. When the text carries `{email}`, the separate «Te hemos enviado un email de confirmación a…» line is not shown. New label `foundWithoutOrderDescription` («Tu pedido está confirmado.») is used while no order is loaded, so a placeholder is never shown raw. A SITE that passes its own `labels.foundDescription` is unaffected: a text without placeholders renders as is, with the confirmation-email line as before.
+- 49f8f4b: New page content blocks (REB-1265..1268). Additive only: every existing block type renders exactly as before.
+  - `before_after` («Antes y después»): before/after image pairs with an opt-in text under them (`showCaption` + `caption`). `@reblu/site-blocks` adds the drop-in `BeforeAfterPairs` and renders the block in `PageBlocks`. `@reblu/site-contracts` exports `BeforeAfterData`.
+  - `chips` («Etiquetas»): a short list of texts shown as chips. Drop-in `ChipList`; type `ChipsData`.
+  - `icon_cards` («Tarjetas con icono»): a responsive grid of cards with an icon from a fixed, curated set, a title and a short text. Drop-in `IconCardGrid` and `CardIconSvg`, `CARD_ICON_NAMES`; types `IconCardsData` and `CardIcon`. `feature_list` is unchanged.
+  - `image_text` («Imagen y texto»): an image beside rich text, image left or right, configurable mobile order. Drop-in `ImageTextSplit`; type `ImageTextData`. `BlockRendererProps` gains an optional `headingId`, set only for `image_text`, which draws the section heading in its text column. The legacy `TEXT_IMAGE`/`IMAGE_TEXT` layouts are unchanged.
+  - `PageBlocks` renders `data.kicker` above the section heading for the new content blocks only.
+
+### Patch Changes
+
+- Updated dependencies [9a83295]
+- Updated dependencies [49f8f4b]
+  - @reblu/site-contracts@1.29.0
+
+## 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
@@ -540,7 +571,7 @@ directly — `loading`/`paid` are drop-in aliases for the original
 | `status`              | Default copy                                    | Order details shown                                  | Extra UI                                              |
 | --------------------- | ----------------------------------------------- | ---------------------------------------------------- | ----------------------------------------------------- |
 | `loading` / `polling` | «Confirmando tu pedido…»                        | —                                                    | —                                                     |
-| `paid` / `found`      | «¡Pedido confirmado!»                           | Full summary (items, total, confirmation-email line) | —                                                     |
+| `paid` / `found`      | «¡Pedido confirmado!» + «Tu pedido {number} está confirmado. Te hemos enviado el resumen a {email}.» | Full summary (items, total; the confirmation-email line only when `foundDescription` has no `{email}`) | —                                                     |
 | `failed`              | «El pago no se ha completado»                   | None                                                 | "Volver al carrito" link when `cartHref` is given     |
 | `refunded`            | «Este pedido ha sido reembolsado»               | Order number only (neutral reference)                | —                                                     |
 | `partially_refunded`  | «…reembolsado parcialmente»                     | Order number only                                    | —                                                     |
@@ -560,6 +591,18 @@ reference (`labels.orderReferenceLabel`); `failed`/`not_found`/`error`
 render no order details at all, even if an `order` object happens to be
 present.
 
+**REB-1200 — default copy change.** The confirmed line used to read «Te
+hemos enviado un email con tu acceso.» for every order, physical ones too, and
+buyers who already had an account got no new access. The default
+`foundDescription` is now «Tu pedido {number} está confirmado. Te hemos
+enviado el resumen a {email}.» (`{number}` = `order.orderNumber`, `{email}` =
+`order.customerEmail`). Because it names the email, the separate «Te hemos
+enviado un email de confirmación a…» line is not shown under it. With no order
+loaded yet, `foundWithoutOrderDescription` («Tu pedido está confirmado.») is
+shown instead of a raw placeholder. A SITE that passes its own
+`labels.foundDescription` is unaffected: a text without `{email}` keeps the
+confirmation-email line, exactly as before.
+
 Every title/description is overridable via `labels` (see
 `OrderConfirmationLabels`). See `@reblu/site-next`'s README
 "`useShopOrderStatus` — the order-confirmation flow" for the full wiring
@@ -596,6 +639,7 @@ configuration edited in nexus (`ShopConfig.delivery`, `ShopConfig.checkout`,
 | Block | Reads | Renders |
 | ----- | ----- | ------- |
 | `CheckoutDeliveryChoice` | `config.delivery`, `config.checkout` | Home delivery (cost, estimate, address form) or free pickup (points with address, hours, ready-in text). Only the methods the tenant offers; nothing for a cart that ships nothing. |
+| `CheckoutQuoteNotice` | `checkoutQuoteNotice(...)` | «Elige un punto de recogida» (`role=status`) in place of the summary and of the total error while pickup has no point, or when the quote answers `PICKUP_LOCATION_INVALID` (REB-1276). |
 | `CheckoutQuoteSummary` | `ShopQuote` | Lines (kind, `qty × unit`), subtotal, discount, delivery row, tax rows, total, «Impuestos incluidos», remaining for free shipping, delivery term; `role=status` for an unusable code, `role=alert` when the order cannot be paid. |
 | `CheckoutTermsAcceptance` | `config.checkout` | The required, unticked box with `{terms}` as the link to the full document and `{tenant}` filled. Nothing when no terms are published. |
 | `CheckoutPayAction` | `config.checkout.continueToPaymentLabel`, `quote.payNotice` | The submit button and the notice with the amount under it (`text-sm`, the button's description). |
@@ -613,11 +657,14 @@ import type { ShopConfig } from '@reblu/site-contracts'
 import {
   CheckoutDeliveryChoice,
   CheckoutPayAction,
+  CheckoutQuoteNotice,
   CheckoutQuoteSummary,
   CheckoutTermsAcceptance,
   EMPTY_CHECKOUT_ADDRESS,
   defaultCheckoutFulfillment,
+  checkoutQuoteNotice,
   getShopErrorMessage,
+  isCheckoutDeliveryComplete,
   quoteRequiresDelivery,
   toCheckoutFulfillmentFields,
   toCheckoutTermsFields,
@@ -629,9 +676,13 @@ export function SingleStepCheckout({ config }: { config: ShopConfig }) {
   const [address, setAddress] = useState(EMPTY_CHECKOUT_ADDRESS)
   const [acceptsTerms, setAcceptsTerms] = useState(false)
   const lines = items.map(({ productId, variantId, quantity }) => ({ productId, variantId, quantity }))
+  // Pickup with no point is known to be incomplete: ask no quote for it (REB-1276).
   const { quote, status, error, refresh } = useShopQuote(
-    lines.length ? { items: lines, fulfillment: toCheckoutFulfillmentFields(fulfillment, address).fulfillment } : null,
+    lines.length && isCheckoutDeliveryComplete(fulfillment)
+      ? { items: lines, fulfillment: toCheckoutFulfillmentFields(fulfillment, address).fulfillment }
+      : null,
   )
+  const notice = checkoutQuoteNotice({ fulfillment, requiresDelivery: quoteRequiresDelivery(quote), error })
   // A cart that ships nothing hides the choice: send no address (blank = 400).
   const delivery = toCheckoutFulfillmentFields(fulfillment, address, quoteRequiresDelivery(quote))
 
@@ -673,8 +724,9 @@ export function SingleStepCheckout({ config }: { config: ShopConfig }) {
         ) : null}
       </div>
       <aside className='space-y-5'>
-        {quote ? <CheckoutQuoteSummary quote={quote} heading='Resumen' /> : null}
-        {status === 'error' ? (
+        {notice ? <CheckoutQuoteNotice reason={notice} /> : null}
+        {!notice && quote ? <CheckoutQuoteSummary quote={quote} heading='Resumen' /> : null}
+        {!notice && status === 'error' ? (
           <p role='alert'>
             {error?.message ?? 'No hemos podido calcular el total.'}{' '}
             <button type='button' onClick={() => void refresh()}>Reintentar</button>
@@ -720,6 +772,14 @@ Notes:
   of the hidden block (the server refuses a blank address with 400): the server records no delivery
   for such a cart, and the request stays on the current contract (REB-1227
   removes the old shape).
+- Pickup point (REB-1276): switching to pickup with exactly one point selects
+  it (`pickupLocationId` is sent); with two or more, none is preselected.
+  While pickup has no point, `isCheckoutDeliveryComplete(fulfillment)` is
+  `false`: pass `null` to `useShopQuote` (no request that is known to answer
+  422) and render `CheckoutQuoteNotice` with `checkoutQuoteNotice(...)`. The
+  same notice covers a `PICKUP_LOCATION_INVALID` quote error (a point
+  deactivated meanwhile), never the generic total error. Replace its text with
+  `labels={{ pickupLocationRequired: '…' }}`.
 - The full-invoice texts are the tenant's too: pass
   `labels={{ toggle: config.checkout.fullInvoiceCheckboxLabel, underCapNotice: config.checkout.fullInvoiceHelpText }}`
   to `FullInvoiceFields`.
@@ -1351,6 +1411,53 @@ const course = await client.academy.bySlug(slug)
 
 The waiver item keeps `data-slot='course-purchase-terms-withdrawal-waiver'` (as in REB-1199); the express request to start uses `data-slot='course-purchase-terms-service-start-request'`. Both carry `data-kind` with the kind.
 
+## Guest course checkout — `CourseGuestCheckoutForm` (REB-1264)
+
+A course that needs no validation is bought in one step by a visitor without
+a session: name, surname, email, the tenant's terms box, the course's consent
+box (`withdrawalConsent`, required on the `course` prop — `null` when there
+is none — and its `version` is sent), the optional full invoice
+(fields hidden until the buyer opts in, or required over the cap), the total
+and the pay notice. On success the buyer goes to Stripe; the account is
+created after payment. On `ENROLLMENT_REQUEST_REQUIRED` the form gives way to
+`requestForm`. It says the same for every email and never mentions an account.
+
+```tsx
+// Server Component — the course page
+import { courseSellsAsGuest } from '@reblu/site-blocks'
+import { CourseGuestCheckoutForm } from '@reblu/site-blocks/client'
+import { AcademyEnrollmentForm } from '@reblu/site-next/academy'
+
+const [course, shop] = await Promise.all([client.academy.bySlug(slug), client.shop.config()])
+const requestForm = (
+  <AcademyEnrollmentForm enrollmentRequestUrl='/api/academy/enrollment-request' courseSlug={course.slug} />
+)
+
+return courseSellsAsGuest(course) ? (
+  <CourseGuestCheckoutForm
+    // `withdrawalConsent` is required: `null` = the course has no box
+    course={{ ...course, withdrawalConsent: course.withdrawalConsent ?? null }}
+    copy={shop.checkout} // terms box, «Continuar al pago», pay notice, invoice texts
+    termsHref='/condiciones'
+    simplifiedInvoiceCapCents={shop.simplifiedInvoiceCapCents}
+    issuesInvoices={shop.simplifiedInvoiceCapCents != null}
+    requestForm={requestForm}
+  />
+) : (
+  requestForm
+)
+```
+
+It posts to the SITE's own `/api/academy/checkout` (`endpoint`) — mount
+`createAcademyCheckoutRoute()` from `@reblu/site-next/route-handlers` there —
+or pass `submit` to send it yourself (`client.academy.checkout`). `{total}`
+and `{tenant}` in `copy.payNotice` are filled with the course price. Every
+refusal code has a default message (`DEFAULT_COURSE_GUEST_CHECKOUT_ERROR_MESSAGES`,
+override with `errorMessages`); `INVALID_BILLING` field errors land on their
+invoice field; `onError` gets each refusal (e.g. reload on
+`TERMS_VERSION_CHANGED` / `CONSENT_VERSION_CHANGED`). `toAcademyCheckoutInvoiceFields`
+(root entry) builds the `billing` block for a SITE with its own form.
+
 ## Page blocks
 
 `PageBlocks` renders a page's registry blocks (`PageDetail.blocks` from
@@ -1387,6 +1494,9 @@ that applies the parent section's mirrored fields (REB-849):
   luminance; any other value keeps the theme foreground.
 - **`cta`** — rendered after the body as a link styled with `buttonVariants`;
   external CTAs open in a new tab with `rel="noopener noreferrer"`.
+- **`data.kicker`** — on the content blocks below (REB-1265..1268), a short
+  line rendered above the heading (`data-slot="page-block-kicker"`). Only
+  those block types render it; every other block's markup is unchanged.
 
 | Prop                | Default              | Purpose                                                    |
 | ------------------- | -------------------- | ---------------------------------------------------------- |
@@ -1427,9 +1537,110 @@ function TeamCard({ block, headingLevel, embedHref }: BlockRendererProps<'profil
 <PageBlocks blocks={page.blocks} components={{ profile_embed: TeamCard }} />
 ```
 
-Every renderer receives `{ block, headingLevel, embedHref }`. Overrides may be
+Every renderer receives `{ block, headingLevel, embedHref }` (plus
+`headingId` for `image_text`, which draws the section heading itself). Overrides may be
 async Server Components, or Client Components when they need interactivity.
 
+### Content blocks (REB-1265..1268)
+
+Drop-in components for the content blocks a tenant builds in the nexus page
+editor. `PageBlocks` uses each one as the default renderer of its block type;
+you can also place them on any page yourself, passing the block's `data`.
+All are Server Components, take colours from theme tokens only, and lazy-load
+every image. The platform ships no tenant copy: the only built-in strings are
+neutral labels you can override.
+
+#### `BeforeAfterPairs` — block `before_after` («Antes y después»)
+
+Before/after image pairs. Each pair stacks on mobile and sits side by side from
+`sm`; pairs flow two per row from `lg`. The text under the pairs is opt-in: it
+renders **only** when `showCaption` is `true` **and** `caption` is not blank.
+
+```tsx
+import { BeforeAfterPairs } from '@reblu/site-blocks'
+
+// `block.data` of a `before_after` block from `page.blocks`
+<BeforeAfterPairs
+  pairs={block.data.pairs}
+  showCaption={block.data.showCaption}
+  caption={block.data.caption}
+  labels={{ before: 'Before', after: 'After' }} // default: DEFAULT_BEFORE_AFTER_LABELS
+/>
+```
+
+| Prop          | Default                       | Purpose                                                  |
+| ------------- | ----------------------------- | -------------------------------------------------------- |
+| `pairs`       | —                             | `{ beforeUrl, afterUrl, alt? }[]`. Empty with no caption renders nothing. |
+| `showCaption` | `false`                       | The tenant's «Mostrar texto al pie» toggle.              |
+| `caption`     | —                             | Free tenant text (legal note, consent…), line breaks kept. |
+| `labels`      | `DEFAULT_BEFORE_AFTER_LABELS` | `{ before, after }` shown under each image.              |
+
+#### `ChipList` — block `chips` («Etiquetas»)
+
+A short list of texts shown as chips. They wrap onto new lines on small
+screens and use the `primary` theme token (tinted background, primary text).
+Blank items are skipped; an empty list renders nothing.
+
+```tsx
+import { ChipList } from '@reblu/site-blocks'
+
+<ChipList items={block.data.items} />
+```
+
+#### `IconCardGrid` — block `icon_cards` («Tarjetas con icono»)
+
+Cards with an icon, a title and a short text, in a responsive grid: one column
+on mobile, two from `sm`, three from `lg`. The icon is a name from a fixed,
+curated set (`CARD_ICON_NAMES`, the `CardIcon` type) — tenants pick it in nexus,
+never upload one. The SVGs are inlined (Lucide geometry, ISC) and drawn in
+`currentColor` on a `primary`-tinted tile. An icon name this version does not
+know renders the card without an icon.
+
+```tsx
+import { IconCardGrid, CardIconSvg } from '@reblu/site-blocks'
+
+<IconCardGrid intro={block.data.intro} items={block.data.items} headingLevel={3} />
+
+// One icon on its own, e.g. in a custom card:
+<CardIconSvg icon='shield-check' className='h-6 w-6 text-primary' />
+```
+
+| Prop           | Default | Purpose                                          |
+| -------------- | ------- | ------------------------------------------------ |
+| `items`        | —       | `{ icon, title, text? }[]` — `data.items`.       |
+| `intro`        | —       | `data.intro`, a line above the grid.             |
+| `headingLevel` | `3`     | Level of each card title.                        |
+
+`feature_list` is unchanged: it still renders its plain list.
+
+#### `ImageTextSplit` — block `image_text` («Imagen y texto»)
+
+An image beside rich text. Stacked on mobile — the image first, or the text
+first with `mobileOrder='text_first'` — and side by side from `md`, with the
+image on `imageSide` (`'left'` or `'right'`). The kicker and the section
+heading sit at the top of the text column, so in `PageBlocks` this block draws
+the section heading itself: its renderer receives `headingId` (the
+`aria-labelledby` target) and the section's own `headingLevel`. `html` is the
+section's rich text, derived by base-api on save; it is sanitised here and its
+headings nest below the heading.
+
+```tsx
+import { ImageTextSplit } from '@reblu/site-blocks'
+
+<ImageTextSplit
+  imageUrl={block.data.imageUrl}
+  alt={block.data.alt}
+  imageSide={block.data.imageSide}
+  mobileOrder={block.data.mobileOrder}
+  html={block.data.html}
+  kicker={block.data.kicker}
+  heading={block.heading}
+  headingLevel={2}
+/>
+```
+
+The legacy `sections[]` layouts `TEXT_IMAGE` / `IMAGE_TEXT` are unchanged.
+
 ### `FaqAccordion`
 
 Native `<details>`/`<summary>` — opens and closes with no JavaScript, keyboard