@reblu/site-blocks 0.25.0 → 0.27.0

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @reblu/site-blocks
 
+## 0.27.0
+
+### Minor Changes
+
+- 3f76060: `CoursePurchaseTerms` shows the consent box that the course's modality calls for (REB-1240). It reads `AcademyCourseDetail.withdrawalConsent`:
+  - Digital content: the withdrawal waiver. It keeps `data-slot="course-purchase-terms-withdrawal-waiver"`, as in REB-1199.
+  - A training service: the express request to start, which does not say the withdrawal right is lost. It uses the new `data-slot="course-purchase-terms-service-start-request"`.
+  - A course in person or by webinar: no box.
+
+  Both items carry `data-kind`. Against an API that predates `withdrawalConsent`, the block still reads `withdrawalWaiverRequired`.
+
+  **Visible change:** each box is now followed by the tenant's exact text, «Texto de la casilla: «…»». Replace it, or hide it with an empty node, through the new `consentText` label. `serviceStartRequest` is also a new label.
+
+### Patch Changes
+
+- Updated dependencies [143cef1]
+  - @reblu/site-contracts@1.27.0
+
+## 0.26.0
+
+### Minor Changes
+
+- 05b1106: «Aviso legal» and «Desistimiento y devoluciones» pages, written by the tenant in nexus (REB-1201).
+  - `@reblu/site-contracts`: `Legal` gains optional `legalNotice` and `withdrawalPolicy` (Markdown or `null`). Absent from older servers.
+  - `@reblu/site-client`: `client.legal.get()` returns both documents.
+  - `@reblu/site-blocks`: new `LegalDocument` drop-in for any legal page: the SITE's title as the only `<h1>`, the tenant's Markdown sanitised below it, and the SITE's `fallback` when the page is not written yet. It never invents legal copy.
+
+- 21b7413: Withdrawal form: a buyer communicates a withdrawal from the SITE (REB-1201).
+  - `@reblu/site-contracts`: new `WithdrawalRequestInput` and `WithdrawalRequestSubmission` types for `POST /api/site/withdrawal-requests`.
+  - `@reblu/site-client`: new `client.withdrawalRequests.submit(body, options?)`, returning `{ id, receivedAt, acknowledgementSent }`.
+  - `@reblu/site-blocks`: new `WithdrawalRequestForm` drop-in in `./client` (order number, optional name, email, items, optional reason). It decides nothing about whether the right applies; when no acknowledgement email could be sent, its receipt lists what the buyer communicated.
+
+### Patch Changes
+
+- Updated dependencies [05b1106]
+- Updated dependencies [21b7413]
+  - @reblu/site-contracts@1.26.0
+
 ## 0.25.0
 
 ### Minor Changes

package/README.md

@@ -25,7 +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".  |
-| `CoursePurchaseTerms`, `DEFAULT_COURSE_PURCHASE_TERMS_LABELS`                                                 | `.`        | What the buyer sees before paying: withdrawal waiver, access duration, refund guarantee. Server Component. See "Course purchase terms". |
+| `CoursePurchaseTerms`, `DEFAULT_COURSE_PURCHASE_TERMS_LABELS`                                                 | `.`        | What the buyer sees before paying: consent box by course modality, access duration, refund guarantee. Server Component. See "Course purchase terms". |
 | `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.                 |
@@ -1128,11 +1128,16 @@ export default async function Page({ params }) {
   `lesson-preview-badge`, `lesson-preview-duration`, `lesson-preview-player`,
   `lesson-preview-content`.
 
-## Course purchase terms — `CoursePurchaseTerms` (REB-1199)
+## Course purchase terms — `CoursePurchaseTerms` (REB-1199, REB-1240)
 
 What a buyer must see before paying for a course, from `client.academy.bySlug()`:
 
-- **Withdrawal waiver** (`withdrawalWaiverRequired`): checkout asks for a separate box in which the buyer requests immediate access and waives the 14-day withdrawal right.
+- **Consent box** (`withdrawalConsent`, REB-1240): which box checkout asks for, as set by the course's modality (`deliveryModality`), followed by the tenant's exact text:
+  - `DIGITAL_CONTENT_WAIVER`, for digital content: the buyer requests immediate access and waives the 14-day withdrawal right (`labels.withdrawalWaiver`);
+  - `SERVICE_START_REQUEST`, for a training service: the buyer expressly asks for the training to start within the 14 days. It does not say the right is lost (`labels.serviceStartRequest`);
+  - `null`, for example in person or webinar: nothing is shown.
+
+  Against an API that predates `withdrawalConsent`, the block falls back to `withdrawalWaiverRequired` (waiver line only).
 - **Access duration** (`accessDurationMonths`): months of access after enrolment. `null` means no end date, and nothing is shown.
 - **Refund guarantee** (`refundGuarantee`): the course's terms. `null` means none, and nothing is shown.
 
@@ -1150,11 +1155,15 @@ const course = await client.academy.bySlug(slug)
   course={course}
   labels={{
     withdrawalWaiver: 'Immediate access: you waive the 14-day withdrawal right.',
+    serviceStartRequest: 'You ask the training to start within the 14-day withdrawal period.',
+    consentText: (text) => ` Box text: “${text}”`,
     accessDuration: (months) => `Access for ${months} months.`,
   }}
 />
 ```
 
+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.
+
 ## Page blocks
 
 `PageBlocks` renders a page's registry blocks (`PageDetail.blocks` from
@@ -1315,6 +1324,45 @@ renderer (`headingOffset` demotes its headings under yours).
 `markdownToPlainText` drops images and anything the sanitiser strips, and cuts
 at a word boundary with `…` within `maxLength`.
 
+## Legal pages — `LegalDocument` (REB-1201)
+
+Every legal page is Markdown the tenant writes in nexus › Configuración › Legal
+and `client.legal.get()` serves: `legalNotice` («Aviso legal»),
+`withdrawalPolicy` («Desistimiento y devoluciones», one page with a section per
+purchase modality), `privacyPolicy`, `termsAndConditions`, `cookiePolicy`. Drop
+each one into its own route; link them from your footer, and the withdrawal page
+from your checkout:
+
+```tsx
+// app/desistimiento/page.tsx
+import { LegalDocument } from '@reblu/site-blocks'
+
+export default async function WithdrawalPolicyPage() {
+  const legal = await client.legal.get()
+  return (
+    <main>
+      <LegalDocument
+        title='Desistimiento y devoluciones'
+        content={legal.withdrawalPolicy}
+        fallback={<p>El contenido de esta página aún no ha sido configurado.</p>}
+      />
+    </main>
+  )
+}
+```
+
+`LegalDocument` (Server Component, RSC-safe):
+
+- renders `title` as the page's only `<h1>` and lands the document's shallowest
+  heading at `<h2>`, keeping the relative depth of every section below it;
+- runs the Markdown through the same sanitised pipeline as `MarkdownRenderer`;
+- for `null` (not written yet, or an older server without the field), blank, or
+  sanitised-away content renders your `fallback` under the title — or nothing
+  without one. It never invents legal copy;
+- styling hooks: `className`, `titleClassName` (replaces the default
+  `text-3xl font-bold`), `contentClassName`, `titleId`, and
+  `data-slot='legal-document'` on the `<article>`.
+
 ## Contact form interest question — `ContactInterestField` (REB-759)
 
 The tenant's own optional question on the contact form, e.g. «¿Qué tratamiento
@@ -1418,6 +1466,66 @@ statuses this form maps — see the `@reblu/site-next` README.
   `locale`, and the offered rights with `requestTypes`.
 - `onSubmitted(ack)` fires after success — e.g. for analytics.
 
+## Withdrawal form — `WithdrawalRequestForm` (REB-1201)
+
+Drop-in form for the buyer to communicate a withdrawal: order number, optional
+name, email, what they withdraw from and an optional reason. base-api stores
+it, emails the tenant team (the contact-form recipients, else the contact
+email) and sends the buyer an acknowledgement — their copy on a durable
+medium. Put it on your withdrawal page, under the tenant's text
+(`LegalDocument` over `legal.withdrawalPolicy`):
+
+```tsx
+'use client'
+import { useCallback, useState } from 'react'
+import { WithdrawalRequestForm } from '@reblu/site-blocks/client'
+import {
+  DeferredRecaptchaProvider,
+  useDeferredRecaptchaToken,
+} from '@reblu/site-next/recaptcha-provider'
+
+function Form({ onArm }: { onArm: () => void }) {
+  const getCaptchaToken = useDeferredRecaptchaToken('withdrawal_request', { onArm })
+  return <WithdrawalRequestForm getCaptchaToken={getCaptchaToken} onInteract={onArm} />
+}
+
+export function WithdrawalRequestSection({ siteKey }: { siteKey: string }) {
+  const [armed, setArmed] = useState(false)
+  const arm = useCallback(() => setArmed(true), [])
+  return (
+    <DeferredRecaptchaProvider siteKey={siteKey} armed={armed}>
+      <Form onArm={arm} />
+    </DeferredRecaptchaProvider>
+  )
+}
+```
+
+```ts
+// app/api/withdrawal-requests/route.ts — server side, the API key never reaches the browser
+import { createProxyRoute } from '@reblu/site-next/route-handlers'
+
+export const POST = createProxyRoute('/api/site/withdrawal-requests', { method: 'POST' })
+```
+
+- **It decides nothing.** The form does not check the order and excludes no
+  product or service; whether the right applies is the tenant team's call,
+  explained on the tenant's own withdrawal page.
+- **The receipt.** On success the form is replaced by a `role="status"` receipt
+  with the received-at date. When `acknowledgementSent` is `false` (the tenant
+  has no email delivery configured, or it failed) the receipt also lists the
+  order and the items, so the buyer can keep it.
+- **Gate it on the reCAPTCHA key alone**, like `DataRequestForm`: base-api
+  rejects a request without a token, and the channel must stay open even with
+  the contact form off.
+- **No server text reaches the visitor.** `400` → `validationError`, `422` →
+  `captchaError`, `429` → `rateLimitError`, anything else → `genericError`.
+- **Limits.** The inputs carry `maxLength` at the server limits
+  (`WITHDRAWAL_REQUEST_FIELD_LIMITS`: order 100, email 320, name 200, items
+  2000, reason 2000).
+- **Copy** defaults to Spanish; override any string with `labels` (`notice:
+  null` hides the small print), the date locale with `locale`. Pass `submit` for
+  your own transport, `endpoint` for another route path.
+
 ## Security boundaries
 
 Two sinks, two different helpers, in two different packages — do not reach for

package/dist/client.cjs

@@ -40,9 +40,12 @@ __export(client_exports, {
   DEFAULT_COURSE_SYLLABUS_LABELS: () => DEFAULT_COURSE_SYLLABUS_LABELS,
   DEFAULT_DATA_REQUEST_FORM_LABELS: () => DEFAULT_DATA_REQUEST_FORM_LABELS,
   DEFAULT_PRODUCT_CAROUSEL_LABELS: () => DEFAULT_PRODUCT_CAROUSEL_LABELS,
+  DEFAULT_WITHDRAWAL_REQUEST_FORM_LABELS: () => DEFAULT_WITHDRAWAL_REQUEST_FORM_LABELS,
   DataRequestForm: () => DataRequestForm,
   ProductCarousel: () => ProductCarousel,
   ShareButtons: () => ShareButtons,
+  WITHDRAWAL_REQUEST_FIELD_LIMITS: () => WITHDRAWAL_REQUEST_FIELD_LIMITS,
+  WithdrawalRequestForm: () => WithdrawalRequestForm,
   useCollection: () => useCollection
 });
 module.exports = __toCommonJS(client_exports);
@@ -1324,6 +1327,277 @@ function DataRequestForm({
     }
   );
 }
+
+// src/components/withdrawal-request-form.tsx
+var import_react7 = require("react");
+var import_utils10 = require("@reblu/site-ui/utils");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var WITHDRAWAL_REQUEST_FIELD_LIMITS = Object.freeze({
+  orderReference: 100,
+  email: 320,
+  name: 200,
+  items: 2e3,
+  reason: 2e3
+});
+var DEFAULT_WITHDRAWAL_REQUEST_FORM_LABELS = {
+  orderReferenceLabel: "N\xFAmero de pedido",
+  nameLabel: "Nombre y apellidos (opcional)",
+  emailLabel: "Email",
+  itemsLabel: "Qu\xE9 productos o servicios quieres devolver o cancelar",
+  itemsPlaceholder: "Indica los productos, bonos o cursos y las unidades",
+  reasonLabel: "Motivo (opcional)",
+  notice: "Usaremos estos datos solo para gestionar tu desistimiento.",
+  submit: "Enviar desistimiento",
+  submitting: "Enviando\u2026",
+  orderReferenceRequired: "Indica el n\xFAmero de pedido.",
+  emailInvalid: "Introduce un email v\xE1lido.",
+  itemsRequired: "Indica de qu\xE9 productos o servicios desistes.",
+  success: (receivedAt) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+    "Hemos recibido tu desistimiento el ",
+    receivedAt,
+    ". Te hemos enviado una copia por email."
+  ] }),
+  successWithoutEmail: (receivedAt) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+    "Hemos recibido tu desistimiento el ",
+    receivedAt,
+    ". Guarda esta pantalla como justificante de lo que nos has comunicado:"
+  ] }),
+  receiptOrderReference: "Pedido",
+  receiptItems: "Productos o servicios",
+  captchaError: "No hemos podido verificar que no eres un robot. Recarga la p\xE1gina e int\xE9ntalo de nuevo.",
+  validationError: "Revisa los datos del formulario e int\xE9ntalo de nuevo.",
+  rateLimitError: "Has enviado demasiadas solicitudes. Espera unos minutos e int\xE9ntalo de nuevo.",
+  genericError: "No hemos podido enviar tu desistimiento. Int\xE9ntalo de nuevo m\xE1s tarde."
+};
+var FIELD_ORDER2 = ["orderReference", "email", "items"];
+var EMAIL_PATTERN2 = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+async function postToRoute2(endpoint, input) {
+  try {
+    const res = await fetch(endpoint, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(input)
+    });
+    if (!res.ok) return { ok: false, status: res.status };
+    const json = await res.json();
+    return json.data ? { ok: true, data: json.data } : { ok: false, status: res.status };
+  } catch {
+    return { ok: false, status: 0 };
+  }
+}
+function rejectionMessage2(status, t) {
+  if (status === 400) return t.validationError;
+  if (status === 422) return t.captchaError;
+  if (status === 429) return t.rateLimitError;
+  return t.genericError;
+}
+var FIELD_CLASS2 = "w-full rounded-lg border bg-background px-3 py-2 text-sm transition focus:outline-none focus:ring-2 focus:ring-primary/20";
+function WithdrawalRequestForm({
+  getCaptchaToken,
+  submit,
+  endpoint = "/api/withdrawal-requests",
+  onInteract,
+  onSubmitted,
+  labels,
+  locale = "es-ES",
+  className
+}) {
+  const t = { ...DEFAULT_WITHDRAWAL_REQUEST_FORM_LABELS, ...labels };
+  const id = (0, import_react7.useId)();
+  const [orderReference, setOrderReference] = (0, import_react7.useState)("");
+  const [name, setName] = (0, import_react7.useState)("");
+  const [email, setEmail] = (0, import_react7.useState)("");
+  const [items, setItems] = (0, import_react7.useState)("");
+  const [reason, setReason] = (0, import_react7.useState)("");
+  const [errors, setErrors] = (0, import_react7.useState)({});
+  const [formError, setFormError] = (0, import_react7.useState)(null);
+  const [submitting, setSubmitting] = (0, import_react7.useState)(false);
+  const [receipt, setReceipt] = (0, import_react7.useState)(null);
+  const statusRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useEffect)(() => {
+    if (receipt) statusRef.current?.focus();
+  }, [receipt]);
+  async function handleSubmit(event) {
+    event.preventDefault();
+    if (submitting) return;
+    setFormError(null);
+    const next = {};
+    if (!orderReference.trim()) next.orderReference = t.orderReferenceRequired;
+    if (!EMAIL_PATTERN2.test(email.trim())) next.email = t.emailInvalid;
+    if (!items.trim()) next.items = t.itemsRequired;
+    setErrors(next);
+    const firstInvalid = FIELD_ORDER2.find((field) => next[field]);
+    if (firstInvalid) {
+      document.getElementById(`${id}-${firstInvalid}`)?.focus();
+      return;
+    }
+    setSubmitting(true);
+    try {
+      const captcha = await getCaptchaToken().catch(() => void 0);
+      if (!captcha) {
+        setFormError(t.captchaError);
+        return;
+      }
+      const input = {
+        orderReference: orderReference.trim(),
+        email: email.trim(),
+        ...name.trim() ? { name: name.trim() } : {},
+        items: items.trim(),
+        ...reason.trim() ? { reason: reason.trim() } : {},
+        captcha
+      };
+      const result = await (submit ?? ((body) => postToRoute2(endpoint, body)))(input).catch(
+        () => ({ ok: false, status: 0 })
+      );
+      if (!result.ok) {
+        setFormError(rejectionMessage2(result.status, t));
+        return;
+      }
+      setReceipt({ ack: result.data, orderReference: input.orderReference, items: input.items });
+      onSubmitted?.(result.data);
+    } finally {
+      setSubmitting(false);
+    }
+  }
+  if (receipt) {
+    const receivedAt = new Intl.DateTimeFormat(locale, {
+      dateStyle: "long",
+      timeStyle: "short"
+    }).format(new Date(receipt.ack.receivedAt));
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "div",
+      {
+        ref: statusRef,
+        tabIndex: -1,
+        role: "status",
+        "data-slot": "withdrawal-request-form-success",
+        className: (0, import_utils10.cn)("space-y-3 rounded-lg border border-border p-6 text-sm", className),
+        children: receipt.ack.acknowledgementSent ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { children: t.success(receivedAt) }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { children: t.successWithoutEmail(receivedAt) }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("dl", { className: "space-y-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("dt", { className: "font-medium", children: t.receiptOrderReference }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("dd", { children: receipt.orderReference })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("dt", { className: "font-medium", children: t.receiptItems }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("dd", { className: "whitespace-pre-line", children: receipt.items })
+            ] })
+          ] })
+        ] })
+      }
+    );
+  }
+  const errorId = (field) => errors[field] ? `${id}-${field}-error` : void 0;
+  const fieldError = (field) => errors[field] ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { id: `${id}-${field}-error`, className: "text-xs text-destructive", children: errors[field] }) : null;
+  const borderFor = (field) => errors[field] ? "border-destructive" : "border-border";
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "form",
+    {
+      noValidate: true,
+      onSubmit: handleSubmit,
+      onFocusCapture: onInteract,
+      onPointerDown: onInteract,
+      "data-slot": "withdrawal-request-form",
+      className: (0, import_utils10.cn)("space-y-4", className),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { htmlFor: `${id}-orderReference`, className: "text-sm font-medium", children: t.orderReferenceLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "input",
+            {
+              id: `${id}-orderReference`,
+              type: "text",
+              maxLength: WITHDRAWAL_REQUEST_FIELD_LIMITS.orderReference,
+              value: orderReference,
+              onChange: (e) => setOrderReference(e.target.value),
+              "aria-invalid": errors.orderReference ? true : void 0,
+              "aria-describedby": errorId("orderReference"),
+              className: (0, import_utils10.cn)(FIELD_CLASS2, borderFor("orderReference"))
+            }
+          ),
+          fieldError("orderReference")
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { htmlFor: `${id}-name`, className: "text-sm font-medium", children: t.nameLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "input",
+            {
+              id: `${id}-name`,
+              type: "text",
+              autoComplete: "name",
+              maxLength: WITHDRAWAL_REQUEST_FIELD_LIMITS.name,
+              value: name,
+              onChange: (e) => setName(e.target.value),
+              className: (0, import_utils10.cn)(FIELD_CLASS2, "border-border")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { htmlFor: `${id}-email`, className: "text-sm font-medium", children: t.emailLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "input",
+            {
+              id: `${id}-email`,
+              type: "email",
+              autoComplete: "email",
+              maxLength: WITHDRAWAL_REQUEST_FIELD_LIMITS.email,
+              value: email,
+              onChange: (e) => setEmail(e.target.value),
+              "aria-invalid": errors.email ? true : void 0,
+              "aria-describedby": errorId("email"),
+              className: (0, import_utils10.cn)(FIELD_CLASS2, borderFor("email"))
+            }
+          ),
+          fieldError("email")
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { htmlFor: `${id}-items`, className: "text-sm font-medium", children: t.itemsLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "textarea",
+            {
+              id: `${id}-items`,
+              rows: 3,
+              maxLength: WITHDRAWAL_REQUEST_FIELD_LIMITS.items,
+              value: items,
+              onChange: (e) => setItems(e.target.value),
+              placeholder: t.itemsPlaceholder,
+              "aria-invalid": errors.items ? true : void 0,
+              "aria-describedby": errorId("items"),
+              className: (0, import_utils10.cn)(FIELD_CLASS2, borderFor("items"))
+            }
+          ),
+          fieldError("items")
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { htmlFor: `${id}-reason`, className: "text-sm font-medium", children: t.reasonLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "textarea",
+            {
+              id: `${id}-reason`,
+              rows: 3,
+              maxLength: WITHDRAWAL_REQUEST_FIELD_LIMITS.reason,
+              value: reason,
+              onChange: (e) => setReason(e.target.value),
+              className: (0, import_utils10.cn)(FIELD_CLASS2, "border-border")
+            }
+          )
+        ] }),
+        t.notice ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-xs text-muted-foreground", children: t.notice }) : null,
+        formError && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { role: "alert", className: "text-sm text-destructive", children: formError }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "button",
+          {
+            type: "submit",
+            disabled: submitting,
+            className: "cursor-pointer rounded-lg bg-primary px-6 py-2 text-sm font-semibold text-primary-foreground disabled:cursor-not-allowed disabled:opacity-60",
+            children: submitting ? t.submitting : t.submit
+          }
+        )
+      ]
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddToCartButton,
@@ -1335,9 +1609,12 @@ function DataRequestForm({
   DEFAULT_COURSE_SYLLABUS_LABELS,
   DEFAULT_DATA_REQUEST_FORM_LABELS,
   DEFAULT_PRODUCT_CAROUSEL_LABELS,
+  DEFAULT_WITHDRAWAL_REQUEST_FORM_LABELS,
   DataRequestForm,
   ProductCarousel,
   ShareButtons,
+  WITHDRAWAL_REQUEST_FIELD_LIMITS,
+  WithdrawalRequestForm,
   useCollection
 });
 //# sourceMappingURL=client.cjs.map