@reblu/site-blocks 0.28.0 → 0.29.0

package/dist/index.js

@@ -16100,9 +16100,399 @@ function FullInvoiceFields({
   ] });
 }
 
-// src/components/contact-interest-field.tsx
+// src/components/checkout-delivery-choice.tsx
 import { cn as cn24 } from "@reblu/site-ui/utils";
 import { jsx as jsx30, jsxs as jsxs28 } from "react/jsx-runtime";
+var EMPTY_CHECKOUT_ADDRESS = {
+  firstName: "",
+  lastName: "",
+  street: "",
+  postalCode: "",
+  city: "",
+  region: ""
+};
+var DEFAULT_CHECKOUT_DELIVERY_CHOICE_LABELS = {
+  legend: "Entrega",
+  free: "Gratis",
+  pickupPointsLegend: "Punto de recogida",
+  addressLegend: "Direcci\xF3n de entrega",
+  firstName: "Nombre",
+  lastName: "Apellidos",
+  street: "Direcci\xF3n",
+  postalCode: "C\xF3digo postal",
+  city: "Ciudad",
+  region: "Provincia"
+};
+var INPUT_CLASS = "w-full rounded-lg border bg-background px-3 py-2 text-sm transition focus:outline-none focus:ring-2 focus:ring-primary/20";
+var ADDRESS_FIELDS = [
+  { key: "firstName", autoComplete: "shipping given-name", required: true },
+  { key: "lastName", autoComplete: "shipping family-name", required: true },
+  { key: "street", autoComplete: "shipping street-address", required: true, wide: true },
+  { key: "postalCode", autoComplete: "shipping postal-code", required: true },
+  { key: "city", autoComplete: "shipping address-level2", required: true },
+  { key: "region", autoComplete: "shipping address-level1", required: false }
+];
+function pickupDescription(location2) {
+  return [
+    `${location2.address}, ${location2.postalCode} ${location2.city}`,
+    location2.openingHoursText,
+    location2.pickupReadyText
+  ].filter(Boolean).join(". ");
+}
+function CheckoutDeliveryChoice({
+  delivery,
+  copy,
+  value,
+  onChange,
+  address,
+  onAddressChange,
+  addressErrors,
+  error,
+  quote,
+  requiresDelivery = true,
+  labels,
+  currencyCode,
+  locale,
+  id: uid = "checkout-delivery",
+  className
+}) {
+  const t = { ...DEFAULT_CHECKOUT_DELIVERY_CHOICE_LABELS, ...labels };
+  const { homeDelivery, pickup } = delivery.methods;
+  if (!requiresDelivery || !homeDelivery && !pickup) return null;
+  const price = (cents) => formatPrice(cents, currencyCode, locale);
+  const quotedShipping = quote?.fulfillment.type === "SHIPPING" ? quote.shipping : null;
+  const homeCost = quotedShipping ? quotedShipping.isFree ? t.free : price(quotedShipping.cost) : delivery.shippingEnabled && delivery.defaultShippingCost ? price(delivery.defaultShippingCost) : t.free;
+  const isPickup = value?.type === "PICKUP";
+  const isShipping = value?.type === "SHIPPING";
+  const errorId = `${uid}-delivery-error`;
+  return /* @__PURE__ */ jsxs28(
+    "fieldset",
+    {
+      "data-slot": "checkout-delivery",
+      "aria-describedby": error ? errorId : void 0,
+      className: cn24("space-y-4", className),
+      children: [
+        /* @__PURE__ */ jsx30("legend", { className: "mb-2 text-lg font-semibold", children: t.legend }),
+        /* @__PURE__ */ jsxs28("div", { className: "grid gap-3 sm:grid-cols-2", children: [
+          homeDelivery ? /* @__PURE__ */ jsxs28("label", { className: "flex cursor-pointer items-start gap-3 rounded-xl border border-border p-4 has-[:checked]:border-primary", children: [
+            /* @__PURE__ */ jsx30(
+              "input",
+              {
+                type: "radio",
+                name: `${uid}-method`,
+                checked: isShipping,
+                onChange: () => onChange({ type: "SHIPPING" }),
+                className: "mt-0.5 size-4 accent-primary"
+              }
+            ),
+            /* @__PURE__ */ jsxs28("span", { className: "flex-1 space-y-1", children: [
+              /* @__PURE__ */ jsxs28("span", { className: "flex justify-between gap-2 font-medium", children: [
+                /* @__PURE__ */ jsx30("span", { children: copy.shippingOptionLabel }),
+                /* @__PURE__ */ jsx30("span", { className: "tabular-nums", children: homeCost })
+              ] }),
+              delivery.estimatedDeliveryText ? /* @__PURE__ */ jsx30("span", { className: "block text-sm text-muted-foreground", children: delivery.estimatedDeliveryText }) : null
+            ] })
+          ] }) : null,
+          pickup ? /* @__PURE__ */ jsxs28("label", { className: "flex cursor-pointer items-start gap-3 rounded-xl border border-border p-4 has-[:checked]:border-primary", children: [
+            /* @__PURE__ */ jsx30(
+              "input",
+              {
+                type: "radio",
+                name: `${uid}-method`,
+                checked: isPickup,
+                onChange: () => onChange({ type: "PICKUP" }),
+                className: "mt-0.5 size-4 accent-primary"
+              }
+            ),
+            /* @__PURE__ */ jsxs28("span", { className: "flex flex-1 justify-between gap-2 font-medium", children: [
+              /* @__PURE__ */ jsx30("span", { children: copy.pickupOptionLabel }),
+              /* @__PURE__ */ jsx30("span", { children: t.free })
+            ] })
+          ] }) : null
+        ] }),
+        error ? /* @__PURE__ */ jsx30("p", { id: errorId, role: "alert", className: "text-sm text-destructive", children: error }) : null,
+        isPickup ? /* @__PURE__ */ jsxs28("div", { role: "radiogroup", "aria-labelledby": `${uid}-points`, className: "space-y-2", children: [
+          /* @__PURE__ */ jsx30("p", { id: `${uid}-points`, className: "text-sm font-medium", children: t.pickupPointsLegend }),
+          delivery.pickupLocations.map((location2) => {
+            const descId = `${uid}-point-${location2.id}`;
+            return /* @__PURE__ */ jsxs28(
+              "label",
+              {
+                className: "flex cursor-pointer items-start gap-3 rounded-lg border border-border p-3 has-[:checked]:border-primary",
+                children: [
+                  /* @__PURE__ */ jsx30(
+                    "input",
+                    {
+                      type: "radio",
+                      name: `${uid}-point`,
+                      checked: value?.pickupLocationId === location2.id,
+                      onChange: () => onChange({ type: "PICKUP", pickupLocationId: location2.id }),
+                      "aria-describedby": descId,
+                      className: "mt-0.5 size-4 accent-primary"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs28("span", { className: "space-y-0.5 text-sm", children: [
+                    /* @__PURE__ */ jsx30("span", { className: "block font-medium", children: location2.name }),
+                    /* @__PURE__ */ jsx30("span", { id: descId, className: "block text-muted-foreground", children: pickupDescription(location2) })
+                  ] })
+                ]
+              },
+              location2.id
+            );
+          })
+        ] }) : null,
+        isShipping ? /* @__PURE__ */ jsxs28("fieldset", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx30("legend", { className: "mb-2 text-sm font-medium", children: t.addressLegend }),
+          /* @__PURE__ */ jsx30("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: ADDRESS_FIELDS.map(({ key: key2, autoComplete, required, wide }) => {
+            const fieldId = `${uid}-${key2}`;
+            const fieldError = addressErrors?.[key2];
+            return /* @__PURE__ */ jsxs28("div", { className: cn24("space-y-1", wide && "sm:col-span-2"), children: [
+              /* @__PURE__ */ jsx30("label", { htmlFor: fieldId, className: "text-sm font-medium", children: t[key2] }),
+              /* @__PURE__ */ jsx30(
+                "input",
+                {
+                  id: fieldId,
+                  type: "text",
+                  required,
+                  autoComplete,
+                  value: address[key2],
+                  onChange: (e) => onAddressChange({ ...address, [key2]: e.target.value }),
+                  "aria-invalid": fieldError ? true : void 0,
+                  "aria-describedby": fieldError ? `${fieldId}-error` : void 0,
+                  className: cn24(
+                    INPUT_CLASS,
+                    fieldError ? "border-destructive" : "border-border focus:border-primary"
+                  )
+                }
+              ),
+              fieldError ? /* @__PURE__ */ jsx30("p", { id: `${fieldId}-error`, className: "text-sm text-destructive", children: fieldError }) : null
+            ] }, key2);
+          }) })
+        ] }) : null
+      ]
+    }
+  );
+}
+function defaultCheckoutFulfillment(delivery) {
+  if (!delivery) return null;
+  if (delivery.methods.homeDelivery) return { type: "SHIPPING" };
+  if (!delivery.methods.pickup) return null;
+  const [only, ...rest] = delivery.pickupLocations;
+  return only && rest.length === 0 ? { type: "PICKUP", pickupLocationId: only.id } : { type: "PICKUP" };
+}
+function quoteRequiresDelivery(quote) {
+  return quote ? quote.lines.some((line) => line.isShippable) : true;
+}
+function toCheckoutFulfillmentFields(value, address, requiresDelivery = true) {
+  if (!value || !requiresDelivery) return { fulfillment: { type: "SHIPPING" } };
+  if (value.type === "PICKUP") {
+    return { fulfillment: value.pickupLocationId ? { type: "PICKUP", pickupLocationId: value.pickupLocationId } : { type: "PICKUP" } };
+  }
+  const shippingAddress = {
+    firstName: address.firstName.trim(),
+    lastName: address.lastName.trim(),
+    street: address.street.trim(),
+    postalCode: address.postalCode.trim(),
+    city: address.city.trim(),
+    ...address.region.trim() ? { region: address.region.trim() } : {}
+  };
+  return { fulfillment: { type: "SHIPPING" }, shippingAddress };
+}
+
+// src/components/checkout-quote-summary.tsx
+import { cn as cn25 } from "@reblu/site-ui/utils";
+import { Fragment as Fragment6, jsx as jsx31, jsxs as jsxs29 } from "react/jsx-runtime";
+var DEFAULT_CHECKOUT_QUOTE_SUMMARY_LABELS = {
+  subtotal: "Subtotal",
+  discount: (codeOrLabel, isAutomatic) => isAutomatic ? codeOrLabel : `Descuento (${codeOrLabel})`,
+  free: "Gratis",
+  delivery: "Entrega",
+  remainingForFree: (amount) => `Te faltan ${amount} para el env\xEDo gratis`,
+  taxIncluded: (label) => `De los cuales ${label}`,
+  total: "Total",
+  taxesIncludedNote: "Impuestos incluidos",
+  quantityTimesUnit: (quantity, unit) => `${quantity} \xD7 ${unit}`
+};
+function Row({
+  name,
+  value,
+  className
+}) {
+  return /* @__PURE__ */ jsxs29("div", { "data-slot": "checkout-quote-row", className: cn25("flex justify-between gap-4", className), children: [
+    /* @__PURE__ */ jsx31("dt", { children: name }),
+    /* @__PURE__ */ jsx31("dd", { className: "shrink-0 tabular-nums", children: value })
+  ] });
+}
+function CheckoutQuoteSummary({
+  quote,
+  heading,
+  headingLevel = 2,
+  labels,
+  currencyCode,
+  locale,
+  className
+}) {
+  const t = { ...DEFAULT_CHECKOUT_QUOTE_SUMMARY_LABELS, ...labels };
+  const price = (cents) => formatPrice(cents, currencyCode, locale);
+  const { fulfillment, shipping, tax, discount } = quote;
+  const Tag = `h${headingLevel}`;
+  return /* @__PURE__ */ jsxs29("section", { "data-slot": "checkout-quote-summary", className: slotClassName("space-y-4", "", className), children: [
+    heading ? /* @__PURE__ */ jsx31(Tag, { className: "text-lg font-semibold", children: heading }) : null,
+    /* @__PURE__ */ jsx31("ul", { className: "space-y-3 text-sm", children: quote.lines.map((line) => /* @__PURE__ */ jsxs29("li", { className: "flex justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs29("div", { className: "min-w-0 space-y-0.5", children: [
+        /* @__PURE__ */ jsx31("p", { className: "font-medium", children: line.name }),
+        line.variantName ? /* @__PURE__ */ jsx31("p", { className: "text-muted-foreground", children: line.variantName }) : null,
+        /* @__PURE__ */ jsxs29("p", { className: "flex flex-wrap items-center gap-2 text-muted-foreground", children: [
+          line.kindLabel ? /* @__PURE__ */ jsx31("span", { "data-slot": "checkout-quote-kind", className: "rounded-full border border-border px-2 py-0.5 text-xs font-medium text-foreground", children: line.kindLabel }) : null,
+          /* @__PURE__ */ jsx31("span", { children: t.quantityTimesUnit(line.quantity, price(line.unitPrice)) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx31("span", { className: "shrink-0 tabular-nums", children: price(line.total) })
+    ] }, `${line.productId}-${line.variantId ?? ""}`)) }),
+    /* @__PURE__ */ jsxs29("dl", { className: "space-y-2 border-t border-border pt-3 text-sm", children: [
+      /* @__PURE__ */ jsx31(Row, { name: t.subtotal, value: price(quote.subtotal) }),
+      discount && discount.amount > 0 ? /* @__PURE__ */ jsx31(
+        Row,
+        {
+          className: "text-green-700 dark:text-green-400",
+          name: t.discount(discount.isAutomatic ? discount.label ?? discount.code : discount.code, discount.isAutomatic),
+          value: `\u2212${price(discount.amount)}`
+        }
+      ) : null,
+      fulfillment.type ? /* @__PURE__ */ jsx31(
+        Row,
+        {
+          name: /* @__PURE__ */ jsxs29(Fragment6, { children: [
+            fulfillment.label ?? t.delivery,
+            fulfillment.type === "PICKUP" && fulfillment.pickupLocation ? /* @__PURE__ */ jsx31("span", { className: "block text-muted-foreground", children: fulfillment.pickupLocation.name }) : null
+          ] }),
+          value: fulfillment.type === "PICKUP" || shipping.isFree ? t.free : price(shipping.cost)
+        }
+      ) : null,
+      tax.isLineVisible ? tax.breakdown.map((entry) => /* @__PURE__ */ jsx31(
+        Row,
+        {
+          className: tax.isIncluded ? "text-muted-foreground" : void 0,
+          name: tax.isIncluded ? t.taxIncluded(entry.label) : entry.label,
+          value: price(entry.amount)
+        },
+        entry.label
+      )) : null,
+      /* @__PURE__ */ jsx31(Row, { className: "border-t border-border pt-2 text-base font-bold", name: t.total, value: price(quote.total) })
+    ] }),
+    tax.isIncluded ? /* @__PURE__ */ jsx31("p", { className: "text-sm text-muted-foreground", children: t.taxesIncludedNote }) : null,
+    fulfillment.type === "SHIPPING" && !shipping.isFree && shipping.remainingForFree ? /* @__PURE__ */ jsx31("p", { className: "text-sm text-muted-foreground", children: t.remainingForFree(price(shipping.remainingForFree)) }) : null,
+    fulfillment.type && quote.deliveryEstimateText ? /* @__PURE__ */ jsx31("p", { "data-slot": "checkout-quote-estimate", className: "text-sm text-muted-foreground", children: quote.deliveryEstimateText }) : null,
+    quote.discountError ? /* @__PURE__ */ jsx31("p", { role: "status", className: "text-sm text-destructive", children: quote.discountError.message }) : null,
+    quote.blockingReason ? /* @__PURE__ */ jsx31("p", { role: "alert", className: "rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-sm text-destructive", children: quote.blockingReason.message }) : null
+  ] });
+}
+
+// src/components/checkout-terms-acceptance.tsx
+import { cn as cn26 } from "@reblu/site-ui/utils";
+import { Fragment as Fragment7, jsx as jsx32, jsxs as jsxs30 } from "react/jsx-runtime";
+function splitTermsLabel(label) {
+  const at = label.indexOf("{terms}");
+  return at === -1 ? [`${label} `, ""] : [label.slice(0, at), label.slice(at + "{terms}".length)];
+}
+function CheckoutTermsAcceptance({
+  copy,
+  termsHref,
+  checked,
+  onCheckedChange,
+  error,
+  newTabHint = "(se abre en una pesta\xF1a nueva)",
+  id,
+  className
+}) {
+  if (!copy.termsVersion) return null;
+  const boxId = id ?? "checkout-terms";
+  const errorId = `${boxId}-error`;
+  const [before, after] = splitTermsLabel(copy.termsCheckboxLabel).map(
+    (part) => part.replaceAll("{tenant}", copy.tenantName)
+  );
+  const newTab = copy.isTermsLinkNewTab;
+  return /* @__PURE__ */ jsxs30("div", { "data-slot": "checkout-terms", className: cn26("space-y-1", className), children: [
+    /* @__PURE__ */ jsxs30("div", { className: "flex items-start gap-3", children: [
+      /* @__PURE__ */ jsx32(
+        "input",
+        {
+          id: boxId,
+          type: "checkbox",
+          required: true,
+          checked,
+          onChange: (e) => onCheckedChange(e.target.checked),
+          "aria-invalid": error ? true : void 0,
+          "aria-describedby": error ? errorId : void 0,
+          className: "mt-0.5 size-5 shrink-0 cursor-pointer accent-primary"
+        }
+      ),
+      /* @__PURE__ */ jsxs30("label", { htmlFor: boxId, className: "text-sm leading-relaxed", children: [
+        before,
+        /* @__PURE__ */ jsxs30(
+          "a",
+          {
+            href: copy.termsLinkUrl ?? termsHref,
+            ...newTab ? { target: "_blank", rel: "noopener noreferrer" } : {},
+            className: "font-medium underline underline-offset-2 hover:text-primary",
+            children: [
+              copy.termsLinkText,
+              newTab ? /* @__PURE__ */ jsxs30(Fragment7, { children: [
+                " ",
+                /* @__PURE__ */ jsx32("span", { className: "sr-only", children: newTabHint })
+              ] }) : null
+            ]
+          }
+        ),
+        after
+      ] })
+    ] }),
+    error ? /* @__PURE__ */ jsx32("p", { id: errorId, className: "pl-8 text-sm text-destructive", children: error }) : null
+  ] });
+}
+function toCheckoutTermsFields(copy, accepted) {
+  const version = copy?.termsVersion;
+  return version ? { acceptsTerms: accepted, termsVersionId: version.id } : {};
+}
+
+// src/components/checkout-pay-action.tsx
+import { cn as cn27 } from "@reblu/site-ui/utils";
+import { jsx as jsx33, jsxs as jsxs31 } from "react/jsx-runtime";
+function CheckoutPayAction({
+  label,
+  notice,
+  submitting = false,
+  submittingLabel = "Procesando\u2026",
+  disabled = false,
+  id = "checkout-pay",
+  className,
+  buttonClassName,
+  noticeClassName
+}) {
+  const noticeId = `${id}-notice`;
+  const isDisabled = submitting || disabled;
+  return /* @__PURE__ */ jsxs31("div", { "data-slot": "checkout-pay-action", className: cn27("space-y-3", className), children: [
+    /* @__PURE__ */ jsx33(
+      "button",
+      {
+        type: "submit",
+        disabled: isDisabled,
+        "aria-busy": submitting || void 0,
+        "aria-describedby": notice ? noticeId : void 0,
+        className: buttonClassName ?? cn27(
+          "flex w-full items-center justify-center gap-2 rounded-xl px-4 py-3 text-base font-semibold transition-all",
+          isDisabled ? "cursor-not-allowed bg-muted text-muted-foreground" : "cursor-pointer bg-primary text-primary-foreground hover:bg-primary/90"
+        ),
+        children: submitting ? submittingLabel : label
+      }
+    ),
+    notice ? /* @__PURE__ */ jsx33("p", { id: noticeId, "data-slot": "checkout-pay-notice", className: noticeClassName ?? "text-sm text-muted-foreground", children: notice }) : null
+  ] });
+}
+
+// src/components/contact-interest-field.tsx
+import { cn as cn28 } from "@reblu/site-ui/utils";
+import { jsx as jsx34, jsxs as jsxs32 } from "react/jsx-runtime";
 function ContactInterestField({
   interest,
   value,
@@ -16119,18 +16509,18 @@ function ContactInterestField({
     else next2.delete(option2);
     onChange(interest.options.filter((candidate) => next2.has(candidate)));
   };
-  return /* @__PURE__ */ jsxs28("fieldset", { "data-slot": "contact-interest", className: cn24("space-y-2", className), children: [
-    /* @__PURE__ */ jsx30("legend", { className: "text-sm font-medium", children: interest.label }),
-    /* @__PURE__ */ jsx30("div", { className: "flex flex-col gap-2", children: interest.options.map((option2, index) => {
+  return /* @__PURE__ */ jsxs32("fieldset", { "data-slot": "contact-interest", className: cn28("space-y-2", className), children: [
+    /* @__PURE__ */ jsx34("legend", { className: "text-sm font-medium", children: interest.label }),
+    /* @__PURE__ */ jsx34("div", { className: "flex flex-col gap-2", children: interest.options.map((option2, index) => {
       const id = `${idPrefix}-${index}`;
-      return /* @__PURE__ */ jsxs28(
+      return /* @__PURE__ */ jsxs32(
         "label",
         {
           htmlFor: id,
           "data-slot": "contact-interest-option",
           className: "flex items-center gap-2 text-sm",
           children: [
-            /* @__PURE__ */ jsx30(
+            /* @__PURE__ */ jsx34(
               "input",
               {
                 id,
@@ -16158,13 +16548,19 @@ export {
   CartAdjustmentsNotice,
   CartLineList,
   CartSummary,
+  CheckoutDeliveryChoice,
   CheckoutForm,
   CheckoutLoginPrompt,
+  CheckoutPayAction,
+  CheckoutQuoteSummary,
+  CheckoutTermsAcceptance,
   ContactInterestField,
   CourseCatalogFilters,
   CourseDescription,
   CoursePurchaseTerms,
   DATA_REQUEST_TYPES,
+  DEFAULT_CHECKOUT_DELIVERY_CHOICE_LABELS,
+  DEFAULT_CHECKOUT_QUOTE_SUMMARY_LABELS,
   DEFAULT_COURSE_CATALOG_FILTERS_LABELS,
   DEFAULT_COURSE_PRICE_BANDS,
   DEFAULT_COURSE_PURCHASE_TERMS_LABELS,
@@ -16176,6 +16572,7 @@ export {
   DEFAULT_TRUST_BADGE_HEADINGS,
   DEFAULT_TRUST_BADGE_TYPE_ORDER,
   DEFAULT_TRUST_ICONS,
+  EMPTY_CHECKOUT_ADDRESS,
   EMPTY_FULL_INVOICE_VALUE,
   FaqAccordion,
   FullInvoiceFields,
@@ -16199,17 +16596,21 @@ export {
   buildFaqPageJsonLd,
   buildShareUrls,
   collectFaqItems,
+  defaultCheckoutFulfillment,
   formatPrice,
   getShopErrorMessage,
   isAllowedYouTubeHost,
   isOverSimplifiedInvoiceCap,
   markdownToPlainText,
   markdownToSafeHtml,
+  quoteRequiresDelivery,
   readingTime,
   sanitizeHtml,
   shopIssuesInvoices,
   shouldRenderShopFilters,
-  toCheckoutInvoiceFields
+  toCheckoutFulfillmentFields,
+  toCheckoutInvoiceFields,
+  toCheckoutTermsFields
 };
 /*! Bundled license information: