@reblu/site-blocks 0.19.0 → 0.21.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @reblu/site-blocks
 
+## 0.21.0
+
+### Minor Changes
+
+- 76e64f3: Free-preview lessons for the public, and a redesigned course programme (REB-1135).
+  - New RSC-safe `LessonPreview`: the hosted video player in an `<iframe>` plus the lesson body through the sanitising Markdown pipeline, over `getLessonPreview()` from `@reblu/site-next/academy-server`. Spanish copy overridable via `DEFAULT_LESSON_PREVIEW_LABELS`. The SITE's CSP needs `frame-src https://player.mux.com`.
+  - `CourseSyllabus` redesign: rotating chevron icon, a video/reading icon per lesson, lesson durations as «m:ss» / «h:mm:ss» aligned right, the course total in the summary, «Expandir todo / Contraer todo», and «Vista previa gratuita» as a call to action through the new `getPreviewHref`, `previewHrefTemplate` or `onPreview` props. Every existing `data-slot` is kept; new slots: `course-syllabus-header`, `course-syllabus-toggle-all`, `course-syllabus-chevron`, `course-syllabus-lesson-icon`, `course-syllabus-lesson-duration`, `course-syllabus-preview`. New labels: `expandAll`, `collapseAll`, `videoLesson`, `textLesson`. Visible change: lesson durations read «10:00» instead of «10 min».
+
+### Patch Changes
+
+- Updated dependencies [76e64f3]
+  - @reblu/site-contracts@1.21.0
+
+## 0.20.0
+
+### Minor Changes
+
+- 4ca8816: New `CourseSyllabus` on `@reblu/site-blocks/client`: the programme of a public course page over `AcademyCourseDetail.modules`. The header shows the number of modules and lessons. Each module with lessons is an expandable button (`aria-expanded`, `aria-controls`) showing its lesson count and total duration, and lists its published lessons in order with their duration and free-preview badge. Modules without lessons render as a plain row. Spanish default copy, overridable through `labels` (`DEFAULT_COURSE_SYLLABUS_LABELS`).
+- 25d8189: Automatic staff discount (REB-1131). When the buyer has a server-validated staff session, base-api applies the active «Solo personal» code that gives the largest discount, with no code typed. Buyers without a staff session see no change.
+  - `@reblu/site-contracts`: adds the `ShopStaffAutoDiscount` type, `{ code, label, amount }`. It is an optional `autoDiscount` field on `ShopCartValidation`, `ShopDiscountApplication` and `ShopCheckoutSession`, and is absent for everyone else.
+  - `@reblu/site-next`: `createShopValidateCartRoute()` now forwards the `sb-*` auth cookies, the same as checkout and apply-discount. Opt out with `{ forwardAuthCookies: false }`. `validateCart()` returns `outcome.autoDiscount` when the server applied one.
+  - `@reblu/site-blocks`: `CartSummary` and `CheckoutForm` accept `autoDiscount` and show «Descuento de personal aplicado» with its amount. `CheckoutForm` shows no remove action for it, and the code field stays available. The text can be changed with `labels.staffDiscountApplied`. Without the prop, both components render exactly as before.
+
+### Patch Changes
+
+- 6a0f8e6: `OrderConfirmation`: the default `foundDescription` now reads «Te hemos enviado un email con tu acceso.» Every shop buyer gets a customer account, and the order confirmation email carries a one-time link into it, where paid digital downloads live. The confirmation page never serves files. A SITE that passes its own `labels.foundDescription` is unaffected.
+- Updated dependencies [25d8189]
+  - @reblu/site-contracts@1.20.0
+
 ## 0.19.0
 
 ### Minor Changes

package/README.md

@@ -25,6 +25,7 @@ colour on the red background. See `docs/theming/theming.md`.
 | `sanitizeHtml`                                                                                                | `.`        | Sanitises an HTML string before `dangerouslySetInnerHTML` — the **HTML boundary**. See "Security boundaries" below.          |
 | `MarkdownRenderer`                                                                                            | `.`        | Canonical Blog renderer: `marked` → **hast-util-sanitize** (XSS) → component map, with a YouTube-domain allowlist. RSC-safe. |
 | `CourseDescription`                                                                                           | `.`        | Drop-in for the rich-text course `description` (`client.academy.bySlug()`). Server Component. See "Rich-text descriptions".  |
+| `LessonPreview`, `DEFAULT_LESSON_PREVIEW_LABELS`                                                              | `.`        | A public free-preview lesson: hosted video player + sanitised body (`getLessonPreview()`). Server Component. See "Free-preview lesson".  |
 | `Treatment`, `ParentPage`, `ProfileCard`, `ProductCard`                                                       | `.`        | Presentational organisms over the SITE API contracts. RSC-safe. `Specialty`: deprecated alias, see below.                    |
 | `ProfessionalFields`                                                                                          | `.`        | The tenant's own professional fields (`professional.fields`) on a team card or profile. RSC-safe. See below.                 |
 | `ShopFilters`                                                                                                 | `.`        | Plug-and-play shop filter chrome over `GET /api/site/shop/facets`. RSC-safe. See "Shop filters" below.                       |
@@ -39,6 +40,7 @@ colour on the red background. See `docs/theming/theming.md`.
 | `AddToCartButton`, `CartIcon`                                                                                 | `./client` | Add-to-cart feedback (REB-837) — **moved here from `.`**, see below.                                                         |
 | `DataRequestForm`                                                                                             | `./client` | Drop-in public GDPR rights form over `POST /api/site/data-requests` (REB-980). See "GDPR rights form" below.                |
 | `ProductCarousel`                                                                                             | `./client` | Scroll-snap product strip with prev/next arrows («Productos relacionados»). See "Product carousel" below.                     |
+| `CourseSyllabus`, `DEFAULT_COURSE_SYLLABUS_LABELS`                                                            | `./client` | A course's programme: expandable modules listing their lessons (`client.academy.bySlug()`). See "Course programme" below.   |
 
 ## Boundary
 
@@ -324,13 +326,31 @@ for the wiring steps and a full example app).
 | `AddedToCartToast`    | `.`        | `productName`, `cartHref`, `status?`, `quantity?`, `imageUrl?`                                                          | Yes                                                                               |
 | `CartLineList`        | `.`        | `items`, `onQuantityChange?`, `onRemove?`, `liveMessage?`, `notice?`, `lineMessage?`                                    | Yes                                                                               |
 | `CartAdjustmentsNotice` | `.`      | `removed?`, `quantityChanges?`, `priceChanges?`, `labels?`                                                              | Yes                                                                               |
-| `CartSummary`         | `.`        | `subtotal`, `discount?`, `shipping?`, `shippingEnabled?`, `total`, `notice?`                                            | Yes                                                                               |
+| `CartSummary`         | `.`        | `subtotal`, `discount?`, `autoDiscount?`, `shipping?`, `shippingEnabled?`, `total`, `notice?`                           | Yes                                                                               |
 | `CheckoutLoginPrompt` | `.`        | `open`, `email`, `onEmailChange`, `onClose`, `onSubmitEmail`, `onContinueAsGuest`                                       | Yes (renders `null` when `open` is false)                                         |
-| `CheckoutForm`        | `.`        | `contact`, `onContactChange`, `discountCode`, `onDiscountCodeChange`, `onApplyDiscount`, `onRemoveDiscount`, `onSubmit` | Yes                                                                               |
+| `CheckoutForm`        | `.`        | `contact`, `onContactChange`, `discountCode`, `onDiscountCodeChange`, `onApplyDiscount`, `onRemoveDiscount`, `onSubmit`, `autoDiscount?` | Yes                                                                               |
 | `OrderConfirmation`   | `.`        | `status`, `order`, `cartHref?`, `onRecheck?`                                                                            | Yes                                                                               |
 | `OrderInvoiceLink`    | `.`        | `invoice` (`order.invoice`), `labels?`                                                                                  | Yes (renders `null` without an invoice)                                           |
 | `FullInvoiceFields`   | `.`        | `value`, `onChange`, `overCap`, `errors?`, `countries?`, `labels?`                                                      | Yes (controlled, no hooks)                                                        |
 
+**Automatic staff discount (REB-1131).** For a signed-in staff member,
+base-api applies the best «Solo personal» code by itself and reports it as
+`autoDiscount` on validate-cart, apply-discount and checkout. Pass it to both
+components and they show «Descuento de personal aplicado» with its amount
+(override with `labels.staffDiscountApplied`). `CheckoutForm` offers no remove
+action for it and keeps the code field: a typed code replaces it only when the
+server finds it larger. Without `autoDiscount`, both render exactly as before.
+
+```tsx
+const outcome = await validateCart() // @reblu/site-next/cart
+// After an apply-discount call, prefer its `autoDiscount` (absent when the
+// typed code won).
+const autoDiscount = discountResponse?.autoDiscount ?? outcome.autoDiscount ?? null
+
+<CartSummary subtotal={subtotal} autoDiscount={autoDiscount} total={subtotal - (autoDiscount?.amount ?? 0)} />
+<CheckoutForm {...checkoutProps} autoDiscount={autoDiscount} />
+```
+
 **REB-837 breaking move**: `AddToCartButton` and `CartIcon` now carry real
 internal state (the confirmed/error timer, the bump-on-add guard) and ship
 from `@reblu/site-blocks/client` instead of the root `.` entry. Update the
@@ -887,6 +907,110 @@ It renders the package's `ProductCard` by default. To use your own card, pass
   `headingClassName` replaces the heading's typography (see the className rule
   above). It renders nothing for an empty list.
 
+## Course programme — `CourseSyllabus` (REB-1134, redesigned in REB-1135)
+
+The programme of a public course page: every module, and inside each module the
+lessons that make it up. The header reads «Programa» and «3 módulos · 12
+lecciones · 2 h 40 min», with an «Expandir todo / Contraer todo» control. Each
+module row shows a number badge, its lesson count and, when every lesson in it
+has a duration, the module's total («4 lecciones · 1 h 20 min»), and a chevron
+that rotates when open. Opening a module lists its lessons in order: a video or
+reading icon, the title, the duration right-aligned as «m:ss» / «h:mm:ss», and on
+free-preview lessons «Vista previa gratuita» as a call to action.
+
+```tsx
+import { CourseSyllabus } from '@reblu/site-blocks/client'
+
+// `course` is an `AcademyCourseDetail` from `client.academy.bySlug(slug)`.
+// From a Server Component page, use the serialisable template:
+<CourseSyllabus
+  modules={course.modules}
+  previewHrefTemplate={`/formacion/${course.slug}/preview/{lessonSlug}`}
+/>
+
+// From a Client Component you can pass functions instead:
+<CourseSyllabus
+  modules={course.modules}
+  getPreviewHref={(lesson) => `/formacion/${course.slug}/preview/${lesson.slug}`}
+  // or: onPreview={(lesson) => openPreviewModal(lesson.slug)}
+/>
+```
+
+- **Free preview call to action.** `getPreviewHref(lesson)` (or the
+  serialisable `previewHrefTemplate`, with `{lessonSlug}` and `{lessonId}`)
+  renders a link; `onPreview(lesson)` renders a button (e.g. to open a modal).
+  Both apply only to lessons with `isFreePreview`. With neither, the flag is a
+  plain label. The link/button is named «Vista previa gratuita: {título}». Point
+  it at a page that renders `LessonPreview` (see "Free-preview lesson").
+- **Public data only.** It renders what the API serves. The API returns
+  published lessons only, and never a video, playback or attachment id, a
+  signed URL or the lesson content.
+- **Accessibility.** The block is a `region` named by its heading. A module
+  with lessons is a `<button>` with `aria-expanded` and `aria-controls`
+  pointing at its lesson list. Tab reaches «Expandir todo», then each module;
+  Enter and Space open and close it, and an open module's preview links follow
+  it in the tab order. Modules open independently and start closed. Icons are
+  `aria-hidden`; each lesson's type is announced as «Vídeo» / «Lectura».
+  Durations are `<time datetime="PT10M0S">`.
+- **Modules without lessons** render as a plain row with the title, not a
+  button. A payload without `lessons` renders the same way.
+- **Copy.** The defaults are Spanish (`DEFAULT_COURSE_SYLLABUS_LABELS`).
+  Override any of them with `labels={{ heading, moduleSingular, modulePlural,
+  lessonSingular, lessonPlural, freePreview, hours, minutes, expandAll,
+  collapseAll, videoLesson, textLesson }}`.
+- **Styling.** Uses only the SDK tokens (`border`, `card`, `muted`, `primary`,
+  `ring`). `headingLevel` (default `2`), `headingClassName` (replaces the
+  heading's typography, see the className rule above) and `className`. Style
+  the parts with `[data-slot="course-syllabus"]`, `course-syllabus-header`,
+  `course-syllabus-summary`, `course-syllabus-toggle-all`,
+  `course-syllabus-module`, `course-syllabus-chevron`, `course-syllabus-lessons`,
+  `course-syllabus-lesson`, `course-syllabus-lesson-icon` (`data-type="video" |
+  "text"`), `course-syllabus-lesson-title`, `course-syllabus-lesson-duration`
+  and `course-syllabus-preview`. No slot was renamed in REB-1135. It renders
+  nothing for a course without modules.
+
+## Free-preview lesson — `LessonPreview` (REB-1135)
+
+A lesson the owner marked «Vista previa gratuita», for visitors who have not
+paid or enrolled: the video and the lesson body. Fetch it on the server with
+`getLessonPreview` (`@reblu/site-next/academy-server`), which returns `null`
+for any lesson the public may not see.
+
+```tsx
+// app/formacion/[slug]/preview/[lessonSlug]/page.tsx — a Server Component
+import { notFound } from 'next/navigation'
+import { LessonPreview } from '@reblu/site-blocks'
+import { getLessonPreview } from '@reblu/site-next/academy-server'
+import { client } from '@/lib/reblu' // your server-side RebluClient
+
+export const dynamic = 'force-dynamic' // the video token is short-lived: never ISR
+
+export default async function Page({ params }) {
+  const { slug, lessonSlug } = await params
+  const lesson = await getLessonPreview(client, slug, lessonSlug)
+  if (!lesson) notFound()
+  return <LessonPreview lesson={lesson} headingLevel={1} />
+}
+```
+
+- **Player.** `video.embedUrl` is the provider's hosted player, already carrying
+  its short-lived token, rendered in an `<iframe>` named «Vídeo: {título}» —
+  no video library in the SDK. Only `https:` URLs are embedded. Add
+  `frame-src https://player.mux.com` to the SITE's Content-Security-Policy.
+  `video` is `null` for a text-only lesson (no player is rendered).
+- **Body.** `content` is Markdown, rendered through the same sanitising
+  pipeline as `CourseDescription`: no raw HTML, no scripts, no `javascript:`
+  links. Its headings sit one level below the lesson title. An empty body
+  renders nothing.
+- **Semantics.** An `<article>` named by the title; the duration is a
+  `<time>`. Server Component (RSC-safe), from the root entry.
+- **Copy.** Spanish defaults (`DEFAULT_LESSON_PREVIEW_LABELS`), override with
+  `labels={{ badge, player, duration }}`.
+- **Styling.** `headingLevel` (default `2`), `headingId`, `headingClassName`,
+  `contentClassName`, `className`; slots `lesson-preview`,
+  `lesson-preview-badge`, `lesson-preview-duration`, `lesson-preview-player`,
+  `lesson-preview-content`.
+
 ## Page blocks
 
 `PageBlocks` renders a page's registry blocks (`PageDetail.blocks` from