@reblu/site-blocks 0.24.0 → 0.26.0

package/dist/client.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { ReactNode } from 'react';
-import { ShopProductListItem, AcademyModulePublic, AcademyLessonPublic, DataRequestType, DataRequestInput, DataRequestSubmission } from '@reblu/site-contracts';
+import { ShopProductListItem, AcademyModulePublic, AcademyLessonPublic, DataRequestType, DataRequestInput, DataRequestSubmission, WithdrawalRequestInput, WithdrawalRequestSubmission } from '@reblu/site-contracts';
 export { DATA_REQUEST_TYPES } from '@reblu/site-contracts';
 import { H as HeadingLevel } from './_heading-BsNbc1wc.cjs';
 
@@ -460,4 +460,88 @@ interface DataRequestFormProps {
 }
 declare function DataRequestForm({ getCaptchaToken, submit, endpoint, onInteract, onSubmitted, requestTypes, labels, locale, className, }: DataRequestFormProps): react_jsx_runtime.JSX.Element;
 
-export { AddToCartButton, type AddToCartButtonLabels, type AddToCartButtonProps, type AddToCartButtonStatus, CartIcon, type CartIconLabels, type CartIconProps, Collection, type CollectionFacet, type CollectionFacetOption, type CollectionFilter, type CollectionLabels, type CollectionProps, CourseSyllabus, type CourseSyllabusLabels, type CourseSyllabusModule, type CourseSyllabusProps, DATA_REQUEST_FIELD_LIMITS, DEFAULT_COURSE_SYLLABUS_LABELS, DEFAULT_DATA_REQUEST_FORM_LABELS, DEFAULT_PRODUCT_CAROUSEL_LABELS, DataRequestForm, type DataRequestFormLabels, type DataRequestFormProps, type DataRequestSubmitResult, ProductCarousel, type ProductCarouselCustomCardProps, type ProductCarouselDefaultCardProps, type ProductCarouselLabels, type ProductCarouselProps, ShareButtons, type ShareButtonsLabels, type ShareButtonsProps, type UseCollectionOptions, type UseCollectionResult, useCollection };
+/**
+ * `WithdrawalRequestForm` — drop-in withdrawal form (REB-1201) over
+ * `POST /api/site/withdrawal-requests`. The buyer gives the order reference,
+ * their email, what they withdraw from and, optionally, a reason; base-api
+ * stores it, emails the tenant team and sends the buyer an acknowledgement.
+ *
+ * It decides nothing: it does not check the order, nor exclude any product
+ * or service. Whether the right applies is the tenant's decision, explained on
+ * its own withdrawal page (`LegalDocument` over `legal.withdrawalPolicy`).
+ *
+ * Stateful (client-only — ships from `./client`) but transport-agnostic, like
+ * `DataRequestForm`:
+ *   - `getCaptchaToken` mints the reCAPTCHA v3 token; `undefined` blocks the
+ *     submission (base-api rejects a request without one).
+ *   - `submit` sends the body. By default it POSTs JSON to the SITE's own Route
+ *     Handler (`endpoint`, default `/api/withdrawal-requests`) and unwraps the
+ *     `{ data }` envelope — the API key never reaches the browser.
+ *
+ * On success the form is replaced by a receipt. When the acknowledgement email
+ * could not be sent, the receipt repeats what was communicated so the buyer
+ * can keep it. Errors never show server text: they map by HTTP status to the
+ * fixed (overridable) copy in `labels`.
+ */
+type WithdrawalRequestSubmitResult = {
+    ok: true;
+    data: WithdrawalRequestSubmission;
+}
+/** `status` is the HTTP status, or `0` when the request never got an answer. */
+ | {
+    ok: false;
+    status: number;
+};
+/** The server's field limits (base-api `POST /api/site/withdrawal-requests`). */
+declare const WITHDRAWAL_REQUEST_FIELD_LIMITS: Readonly<{
+    orderReference: 100;
+    email: 320;
+    name: 200;
+    items: 2000;
+    reason: 2000;
+}>;
+interface WithdrawalRequestFormLabels {
+    orderReferenceLabel: string;
+    nameLabel: string;
+    emailLabel: string;
+    itemsLabel: string;
+    itemsPlaceholder: string;
+    reasonLabel: string;
+    /** Small print under the fields, e.g. how the data is used. `null` hides it. */
+    notice: ReactNode;
+    submit: string;
+    submitting: string;
+    orderReferenceRequired: string;
+    emailInvalid: string;
+    itemsRequired: string;
+    /** Receipt when the buyer was emailed a copy; receives the formatted received-at date. */
+    success: (receivedAt: string) => ReactNode;
+    /** Receipt when no copy could be emailed; the communication is listed below it. */
+    successWithoutEmail: (receivedAt: string) => ReactNode;
+    receiptOrderReference: string;
+    receiptItems: string;
+    captchaError: string;
+    validationError: string;
+    rateLimitError: string;
+    genericError: string;
+}
+declare const DEFAULT_WITHDRAWAL_REQUEST_FORM_LABELS: WithdrawalRequestFormLabels;
+interface WithdrawalRequestFormProps {
+    /** Mints the reCAPTCHA v3 token; `undefined` blocks the submission. */
+    getCaptchaToken: () => Promise<string | undefined>;
+    /** Sends the body. Defaults to a JSON POST to `endpoint`. */
+    submit?: (input: WithdrawalRequestInput) => Promise<WithdrawalRequestSubmitResult>;
+    /** The SITE's Route Handler used by the default `submit`. @default '/api/withdrawal-requests' */
+    endpoint?: string;
+    /** First interaction with the form — wire it to the deferred reCAPTCHA `arm`. */
+    onInteract?: () => void;
+    /** Called with the acknowledgement after a successful submission. */
+    onSubmitted?: (ack: WithdrawalRequestSubmission) => void;
+    labels?: Partial<WithdrawalRequestFormLabels>;
+    /** Locale for the received-at date. @default 'es-ES' */
+    locale?: string;
+    className?: string;
+}
+declare function WithdrawalRequestForm({ getCaptchaToken, submit, endpoint, onInteract, onSubmitted, labels, locale, className, }: WithdrawalRequestFormProps): react_jsx_runtime.JSX.Element;
+
+export { AddToCartButton, type AddToCartButtonLabels, type AddToCartButtonProps, type AddToCartButtonStatus, CartIcon, type CartIconLabels, type CartIconProps, Collection, type CollectionFacet, type CollectionFacetOption, type CollectionFilter, type CollectionLabels, type CollectionProps, CourseSyllabus, type CourseSyllabusLabels, type CourseSyllabusModule, type CourseSyllabusProps, DATA_REQUEST_FIELD_LIMITS, DEFAULT_COURSE_SYLLABUS_LABELS, DEFAULT_DATA_REQUEST_FORM_LABELS, DEFAULT_PRODUCT_CAROUSEL_LABELS, DEFAULT_WITHDRAWAL_REQUEST_FORM_LABELS, DataRequestForm, type DataRequestFormLabels, type DataRequestFormProps, type DataRequestSubmitResult, ProductCarousel, type ProductCarouselCustomCardProps, type ProductCarouselDefaultCardProps, type ProductCarouselLabels, type ProductCarouselProps, ShareButtons, type ShareButtonsLabels, type ShareButtonsProps, type UseCollectionOptions, type UseCollectionResult, WITHDRAWAL_REQUEST_FIELD_LIMITS, WithdrawalRequestForm, type WithdrawalRequestFormLabels, type WithdrawalRequestFormProps, type WithdrawalRequestSubmitResult, useCollection };

package/dist/client.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { ReactNode } from 'react';
-import { ShopProductListItem, AcademyModulePublic, AcademyLessonPublic, DataRequestType, DataRequestInput, DataRequestSubmission } from '@reblu/site-contracts';
+import { ShopProductListItem, AcademyModulePublic, AcademyLessonPublic, DataRequestType, DataRequestInput, DataRequestSubmission, WithdrawalRequestInput, WithdrawalRequestSubmission } from '@reblu/site-contracts';
 export { DATA_REQUEST_TYPES } from '@reblu/site-contracts';
 import { H as HeadingLevel } from './_heading-BsNbc1wc.js';
 
@@ -460,4 +460,88 @@ interface DataRequestFormProps {
 }
 declare function DataRequestForm({ getCaptchaToken, submit, endpoint, onInteract, onSubmitted, requestTypes, labels, locale, className, }: DataRequestFormProps): react_jsx_runtime.JSX.Element;
 
-export { AddToCartButton, type AddToCartButtonLabels, type AddToCartButtonProps, type AddToCartButtonStatus, CartIcon, type CartIconLabels, type CartIconProps, Collection, type CollectionFacet, type CollectionFacetOption, type CollectionFilter, type CollectionLabels, type CollectionProps, CourseSyllabus, type CourseSyllabusLabels, type CourseSyllabusModule, type CourseSyllabusProps, DATA_REQUEST_FIELD_LIMITS, DEFAULT_COURSE_SYLLABUS_LABELS, DEFAULT_DATA_REQUEST_FORM_LABELS, DEFAULT_PRODUCT_CAROUSEL_LABELS, DataRequestForm, type DataRequestFormLabels, type DataRequestFormProps, type DataRequestSubmitResult, ProductCarousel, type ProductCarouselCustomCardProps, type ProductCarouselDefaultCardProps, type ProductCarouselLabels, type ProductCarouselProps, ShareButtons, type ShareButtonsLabels, type ShareButtonsProps, type UseCollectionOptions, type UseCollectionResult, useCollection };
+/**
+ * `WithdrawalRequestForm` — drop-in withdrawal form (REB-1201) over
+ * `POST /api/site/withdrawal-requests`. The buyer gives the order reference,
+ * their email, what they withdraw from and, optionally, a reason; base-api
+ * stores it, emails the tenant team and sends the buyer an acknowledgement.
+ *
+ * It decides nothing: it does not check the order, nor exclude any product
+ * or service. Whether the right applies is the tenant's decision, explained on
+ * its own withdrawal page (`LegalDocument` over `legal.withdrawalPolicy`).
+ *
+ * Stateful (client-only — ships from `./client`) but transport-agnostic, like
+ * `DataRequestForm`:
+ *   - `getCaptchaToken` mints the reCAPTCHA v3 token; `undefined` blocks the
+ *     submission (base-api rejects a request without one).
+ *   - `submit` sends the body. By default it POSTs JSON to the SITE's own Route
+ *     Handler (`endpoint`, default `/api/withdrawal-requests`) and unwraps the
+ *     `{ data }` envelope — the API key never reaches the browser.
+ *
+ * On success the form is replaced by a receipt. When the acknowledgement email
+ * could not be sent, the receipt repeats what was communicated so the buyer
+ * can keep it. Errors never show server text: they map by HTTP status to the
+ * fixed (overridable) copy in `labels`.
+ */
+type WithdrawalRequestSubmitResult = {
+    ok: true;
+    data: WithdrawalRequestSubmission;
+}
+/** `status` is the HTTP status, or `0` when the request never got an answer. */
+ | {
+    ok: false;
+    status: number;
+};
+/** The server's field limits (base-api `POST /api/site/withdrawal-requests`). */
+declare const WITHDRAWAL_REQUEST_FIELD_LIMITS: Readonly<{
+    orderReference: 100;
+    email: 320;
+    name: 200;
+    items: 2000;
+    reason: 2000;
+}>;
+interface WithdrawalRequestFormLabels {
+    orderReferenceLabel: string;
+    nameLabel: string;
+    emailLabel: string;
+    itemsLabel: string;
+    itemsPlaceholder: string;
+    reasonLabel: string;
+    /** Small print under the fields, e.g. how the data is used. `null` hides it. */
+    notice: ReactNode;
+    submit: string;
+    submitting: string;
+    orderReferenceRequired: string;
+    emailInvalid: string;
+    itemsRequired: string;
+    /** Receipt when the buyer was emailed a copy; receives the formatted received-at date. */
+    success: (receivedAt: string) => ReactNode;
+    /** Receipt when no copy could be emailed; the communication is listed below it. */
+    successWithoutEmail: (receivedAt: string) => ReactNode;
+    receiptOrderReference: string;
+    receiptItems: string;
+    captchaError: string;
+    validationError: string;
+    rateLimitError: string;
+    genericError: string;
+}
+declare const DEFAULT_WITHDRAWAL_REQUEST_FORM_LABELS: WithdrawalRequestFormLabels;
+interface WithdrawalRequestFormProps {
+    /** Mints the reCAPTCHA v3 token; `undefined` blocks the submission. */
+    getCaptchaToken: () => Promise<string | undefined>;
+    /** Sends the body. Defaults to a JSON POST to `endpoint`. */
+    submit?: (input: WithdrawalRequestInput) => Promise<WithdrawalRequestSubmitResult>;
+    /** The SITE's Route Handler used by the default `submit`. @default '/api/withdrawal-requests' */
+    endpoint?: string;
+    /** First interaction with the form — wire it to the deferred reCAPTCHA `arm`. */
+    onInteract?: () => void;
+    /** Called with the acknowledgement after a successful submission. */
+    onSubmitted?: (ack: WithdrawalRequestSubmission) => void;
+    labels?: Partial<WithdrawalRequestFormLabels>;
+    /** Locale for the received-at date. @default 'es-ES' */
+    locale?: string;
+    className?: string;
+}
+declare function WithdrawalRequestForm({ getCaptchaToken, submit, endpoint, onInteract, onSubmitted, labels, locale, className, }: WithdrawalRequestFormProps): react_jsx_runtime.JSX.Element;
+
+export { AddToCartButton, type AddToCartButtonLabels, type AddToCartButtonProps, type AddToCartButtonStatus, CartIcon, type CartIconLabels, type CartIconProps, Collection, type CollectionFacet, type CollectionFacetOption, type CollectionFilter, type CollectionLabels, type CollectionProps, CourseSyllabus, type CourseSyllabusLabels, type CourseSyllabusModule, type CourseSyllabusProps, DATA_REQUEST_FIELD_LIMITS, DEFAULT_COURSE_SYLLABUS_LABELS, DEFAULT_DATA_REQUEST_FORM_LABELS, DEFAULT_PRODUCT_CAROUSEL_LABELS, DEFAULT_WITHDRAWAL_REQUEST_FORM_LABELS, DataRequestForm, type DataRequestFormLabels, type DataRequestFormProps, type DataRequestSubmitResult, ProductCarousel, type ProductCarouselCustomCardProps, type ProductCarouselDefaultCardProps, type ProductCarouselLabels, type ProductCarouselProps, ShareButtons, type ShareButtonsLabels, type ShareButtonsProps, type UseCollectionOptions, type UseCollectionResult, WITHDRAWAL_REQUEST_FIELD_LIMITS, WithdrawalRequestForm, type WithdrawalRequestFormLabels, type WithdrawalRequestFormProps, type WithdrawalRequestSubmitResult, useCollection };

package/dist/client.js

@@ -1279,6 +1279,277 @@ function DataRequestForm({
     }
   );
 }
+
+// src/components/withdrawal-request-form.tsx
+import { useEffect as useEffect5, useId as useId4, useRef as useRef5, useState as useState8 } from "react";
+import { cn as cn10 } from "@reblu/site-ui/utils";
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs8 } from "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__ */ jsxs8(Fragment3, { children: [
+    "Hemos recibido tu desistimiento el ",
+    receivedAt,
+    ". Te hemos enviado una copia por email."
+  ] }),
+  successWithoutEmail: (receivedAt) => /* @__PURE__ */ jsxs8(Fragment3, { 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 = useId4();
+  const [orderReference, setOrderReference] = useState8("");
+  const [name, setName] = useState8("");
+  const [email, setEmail] = useState8("");
+  const [items, setItems] = useState8("");
+  const [reason, setReason] = useState8("");
+  const [errors, setErrors] = useState8({});
+  const [formError, setFormError] = useState8(null);
+  const [submitting, setSubmitting] = useState8(false);
+  const [receipt, setReceipt] = useState8(null);
+  const statusRef = useRef5(null);
+  useEffect5(() => {
+    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__ */ jsx10(
+      "div",
+      {
+        ref: statusRef,
+        tabIndex: -1,
+        role: "status",
+        "data-slot": "withdrawal-request-form-success",
+        className: cn10("space-y-3 rounded-lg border border-border p-6 text-sm", className),
+        children: receipt.ack.acknowledgementSent ? /* @__PURE__ */ jsx10("p", { children: t.success(receivedAt) }) : /* @__PURE__ */ jsxs8(Fragment3, { children: [
+          /* @__PURE__ */ jsx10("p", { children: t.successWithoutEmail(receivedAt) }),
+          /* @__PURE__ */ jsxs8("dl", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsxs8("div", { children: [
+              /* @__PURE__ */ jsx10("dt", { className: "font-medium", children: t.receiptOrderReference }),
+              /* @__PURE__ */ jsx10("dd", { children: receipt.orderReference })
+            ] }),
+            /* @__PURE__ */ jsxs8("div", { children: [
+              /* @__PURE__ */ jsx10("dt", { className: "font-medium", children: t.receiptItems }),
+              /* @__PURE__ */ jsx10("dd", { className: "whitespace-pre-line", children: receipt.items })
+            ] })
+          ] })
+        ] })
+      }
+    );
+  }
+  const errorId = (field) => errors[field] ? `${id}-${field}-error` : void 0;
+  const fieldError = (field) => errors[field] ? /* @__PURE__ */ jsx10("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__ */ jsxs8(
+    "form",
+    {
+      noValidate: true,
+      onSubmit: handleSubmit,
+      onFocusCapture: onInteract,
+      onPointerDown: onInteract,
+      "data-slot": "withdrawal-request-form",
+      className: cn10("space-y-4", className),
+      children: [
+        /* @__PURE__ */ jsxs8("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx10("label", { htmlFor: `${id}-orderReference`, className: "text-sm font-medium", children: t.orderReferenceLabel }),
+          /* @__PURE__ */ jsx10(
+            "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: cn10(FIELD_CLASS2, borderFor("orderReference"))
+            }
+          ),
+          fieldError("orderReference")
+        ] }),
+        /* @__PURE__ */ jsxs8("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx10("label", { htmlFor: `${id}-name`, className: "text-sm font-medium", children: t.nameLabel }),
+          /* @__PURE__ */ jsx10(
+            "input",
+            {
+              id: `${id}-name`,
+              type: "text",
+              autoComplete: "name",
+              maxLength: WITHDRAWAL_REQUEST_FIELD_LIMITS.name,
+              value: name,
+              onChange: (e) => setName(e.target.value),
+              className: cn10(FIELD_CLASS2, "border-border")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs8("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx10("label", { htmlFor: `${id}-email`, className: "text-sm font-medium", children: t.emailLabel }),
+          /* @__PURE__ */ jsx10(
+            "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: cn10(FIELD_CLASS2, borderFor("email"))
+            }
+          ),
+          fieldError("email")
+        ] }),
+        /* @__PURE__ */ jsxs8("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx10("label", { htmlFor: `${id}-items`, className: "text-sm font-medium", children: t.itemsLabel }),
+          /* @__PURE__ */ jsx10(
+            "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: cn10(FIELD_CLASS2, borderFor("items"))
+            }
+          ),
+          fieldError("items")
+        ] }),
+        /* @__PURE__ */ jsxs8("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx10("label", { htmlFor: `${id}-reason`, className: "text-sm font-medium", children: t.reasonLabel }),
+          /* @__PURE__ */ jsx10(
+            "textarea",
+            {
+              id: `${id}-reason`,
+              rows: 3,
+              maxLength: WITHDRAWAL_REQUEST_FIELD_LIMITS.reason,
+              value: reason,
+              onChange: (e) => setReason(e.target.value),
+              className: cn10(FIELD_CLASS2, "border-border")
+            }
+          )
+        ] }),
+        t.notice ? /* @__PURE__ */ jsx10("p", { className: "text-xs text-muted-foreground", children: t.notice }) : null,
+        formError && /* @__PURE__ */ jsx10("p", { role: "alert", className: "text-sm text-destructive", children: formError }),
+        /* @__PURE__ */ jsx10(
+          "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
+          }
+        )
+      ]
+    }
+  );
+}
 export {
   AddToCartButton,
   CartIcon,
@@ -1289,9 +1560,12 @@ export {
   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.js.map