@reblu/site-blocks 0.5.0 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +36 -0
- package/README.md +43 -0
- package/dist/index.cjs +619 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +274 -2
- package/dist/index.d.ts +274 -2
- package/dist/index.js +612 -2
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -13425,7 +13425,10 @@ function toValueArray(value) {
|
|
|
13425
13425
|
return Array.isArray(value) ? value : [value];
|
|
13426
13426
|
}
|
|
13427
13427
|
function hasAnyActiveFilter(active) {
|
|
13428
|
-
return Object.keys(active.taxonomy ?? {}).length > 0 || Object.keys(active.attr ?? {}).length > 0 || active
|
|
13428
|
+
return Object.keys(active.taxonomy ?? {}).length > 0 || Object.keys(active.attr ?? {}).length > 0 || hasActivePriceFilter(active) || Boolean(active.onSale);
|
|
13429
|
+
}
|
|
13430
|
+
function hasActivePriceFilter(active) {
|
|
13431
|
+
return active.priceMin != null || active.priceMax != null;
|
|
13429
13432
|
}
|
|
13430
13433
|
function shouldRenderShopFilters(facets, active = {}) {
|
|
13431
13434
|
const hasFacetContent = facets.taxonomies.some((axis) => axis.terms.length > 0) || facets.attributes.some((attr) => attr.options.length > 0) || facets.price.max > facets.price.min || facets.onSale.count > 0;
|
|
@@ -13483,6 +13486,7 @@ function ShopFilters({
|
|
|
13483
13486
|
const visibleTaxonomies = facets.taxonomies.filter((axis) => axis.terms.length > 0);
|
|
13484
13487
|
const visibleAttributes = facets.attributes.filter((attr) => attr.options.length > 0);
|
|
13485
13488
|
const hasPriceSpread = facets.price.max > facets.price.min;
|
|
13489
|
+
const showPriceGroup = hasPriceSpread || hasActivePriceFilter(active);
|
|
13486
13490
|
const hasOnSale = facets.onSale.count > 0;
|
|
13487
13491
|
if (!shouldRenderShopFilters(facets, active)) {
|
|
13488
13492
|
return null;
|
|
@@ -13546,7 +13550,7 @@ function ShopFilters({
|
|
|
13546
13550
|
);
|
|
13547
13551
|
}) }, attr.key);
|
|
13548
13552
|
}),
|
|
13549
|
-
|
|
13553
|
+
showPriceGroup && /* @__PURE__ */ jsx7(FilterFieldset, { legend: t.price, children: priceBands.map((band, i) => {
|
|
13550
13554
|
const isActive = active.priceMin === band.min && active.priceMax === band.max;
|
|
13551
13555
|
const nextMin = isActive ? void 0 : band.min;
|
|
13552
13556
|
const nextMax = isActive ? void 0 : band.max;
|
|
@@ -13584,10 +13588,616 @@ function ShopFilters({
|
|
|
13584
13588
|
)
|
|
13585
13589
|
] });
|
|
13586
13590
|
}
|
|
13591
|
+
|
|
13592
|
+
// src/components/add-to-cart-button.tsx
|
|
13593
|
+
import { cn as cn8 } from "@reblu/site-ui/utils";
|
|
13594
|
+
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
13595
|
+
var DEFAULT_LABELS2 = {
|
|
13596
|
+
add: "A\xF1adir al carrito",
|
|
13597
|
+
adding: "A\xF1adiendo\u2026",
|
|
13598
|
+
outOfStock: "Agotado"
|
|
13599
|
+
};
|
|
13600
|
+
function AddToCartButton({
|
|
13601
|
+
onAddToCart,
|
|
13602
|
+
disabled,
|
|
13603
|
+
outOfStock,
|
|
13604
|
+
pending,
|
|
13605
|
+
labels,
|
|
13606
|
+
className
|
|
13607
|
+
}) {
|
|
13608
|
+
const t = { ...DEFAULT_LABELS2, ...labels };
|
|
13609
|
+
const isDisabled = Boolean(disabled || outOfStock || pending);
|
|
13610
|
+
return /* @__PURE__ */ jsx8(
|
|
13611
|
+
"button",
|
|
13612
|
+
{
|
|
13613
|
+
type: "button",
|
|
13614
|
+
onClick: onAddToCart,
|
|
13615
|
+
disabled: isDisabled,
|
|
13616
|
+
"data-slot": "add-to-cart-button",
|
|
13617
|
+
className: cn8(
|
|
13618
|
+
"inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2.5 text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
|
13619
|
+
isDisabled ? "cursor-not-allowed bg-muted text-muted-foreground" : "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
13620
|
+
className
|
|
13621
|
+
),
|
|
13622
|
+
children: outOfStock ? t.outOfStock : pending ? t.adding : t.add
|
|
13623
|
+
}
|
|
13624
|
+
);
|
|
13625
|
+
}
|
|
13626
|
+
|
|
13627
|
+
// src/components/cart-icon.tsx
|
|
13628
|
+
import { cn as cn9 } from "@reblu/site-ui/utils";
|
|
13629
|
+
import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
13630
|
+
var DEFAULT_LABELS3 = {
|
|
13631
|
+
cart: "Carrito",
|
|
13632
|
+
itemsSuffix: (count) => `${count} art\xEDculo${count === 1 ? "" : "s"}`
|
|
13633
|
+
};
|
|
13634
|
+
function CartIcon({ itemCount, href, labels, className }) {
|
|
13635
|
+
const t = { ...DEFAULT_LABELS3, ...labels };
|
|
13636
|
+
const ariaLabel = itemCount > 0 ? `${t.cart} (${t.itemsSuffix(itemCount)})` : t.cart;
|
|
13637
|
+
const displayCount = itemCount > 99 ? "99+" : String(itemCount);
|
|
13638
|
+
return /* @__PURE__ */ jsxs7(
|
|
13639
|
+
"a",
|
|
13640
|
+
{
|
|
13641
|
+
href,
|
|
13642
|
+
"aria-label": ariaLabel,
|
|
13643
|
+
"data-slot": "cart-icon",
|
|
13644
|
+
className: cn9(
|
|
13645
|
+
"relative inline-flex items-center justify-center rounded-lg p-2 text-foreground/80 transition-colors hover:bg-muted/60 hover:text-foreground",
|
|
13646
|
+
className
|
|
13647
|
+
),
|
|
13648
|
+
children: [
|
|
13649
|
+
/* @__PURE__ */ jsxs7(
|
|
13650
|
+
"svg",
|
|
13651
|
+
{
|
|
13652
|
+
viewBox: "0 0 24 24",
|
|
13653
|
+
fill: "none",
|
|
13654
|
+
stroke: "currentColor",
|
|
13655
|
+
strokeWidth: 2,
|
|
13656
|
+
strokeLinecap: "round",
|
|
13657
|
+
strokeLinejoin: "round",
|
|
13658
|
+
className: "h-5 w-5",
|
|
13659
|
+
"aria-hidden": "true",
|
|
13660
|
+
children: [
|
|
13661
|
+
/* @__PURE__ */ jsx9("circle", { cx: "9", cy: "21", r: "1" }),
|
|
13662
|
+
/* @__PURE__ */ jsx9("circle", { cx: "20", cy: "21", r: "1" }),
|
|
13663
|
+
/* @__PURE__ */ jsx9("path", { d: "M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" })
|
|
13664
|
+
]
|
|
13665
|
+
}
|
|
13666
|
+
),
|
|
13667
|
+
itemCount > 0 && /* @__PURE__ */ jsx9(
|
|
13668
|
+
"span",
|
|
13669
|
+
{
|
|
13670
|
+
"aria-hidden": "true",
|
|
13671
|
+
className: "absolute -top-0.5 -right-0.5 flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-bold leading-none tabular-nums text-primary-foreground",
|
|
13672
|
+
children: displayCount
|
|
13673
|
+
}
|
|
13674
|
+
)
|
|
13675
|
+
]
|
|
13676
|
+
}
|
|
13677
|
+
);
|
|
13678
|
+
}
|
|
13679
|
+
|
|
13680
|
+
// src/components/cart-line-list.tsx
|
|
13681
|
+
import { cn as cn10 } from "@reblu/site-ui/utils";
|
|
13682
|
+
import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
13683
|
+
var DEFAULT_LABELS4 = {
|
|
13684
|
+
quantityLabel: "Cantidad",
|
|
13685
|
+
decrease: "Reducir cantidad",
|
|
13686
|
+
increase: "Aumentar cantidad",
|
|
13687
|
+
remove: "Eliminar",
|
|
13688
|
+
unitPriceSuffix: "/ ud."
|
|
13689
|
+
};
|
|
13690
|
+
function lineKey(productId, variantId) {
|
|
13691
|
+
return `${productId}-${variantId ?? "no-variant"}`;
|
|
13692
|
+
}
|
|
13693
|
+
function CartLineList({
|
|
13694
|
+
items,
|
|
13695
|
+
onQuantityChange,
|
|
13696
|
+
onRemove,
|
|
13697
|
+
liveMessage,
|
|
13698
|
+
labels,
|
|
13699
|
+
currencyCode,
|
|
13700
|
+
locale,
|
|
13701
|
+
className
|
|
13702
|
+
}) {
|
|
13703
|
+
const t = { ...DEFAULT_LABELS4, ...labels };
|
|
13704
|
+
return /* @__PURE__ */ jsxs8("div", { className: cn10("space-y-4", className), "data-slot": "cart-line-list", children: [
|
|
13705
|
+
/* @__PURE__ */ jsx10("div", { "aria-live": "polite", className: "sr-only", children: liveMessage }),
|
|
13706
|
+
/* @__PURE__ */ jsx10("ul", { className: "space-y-4", children: items.map((item) => {
|
|
13707
|
+
const maxQty = item.maxStock ?? Infinity;
|
|
13708
|
+
const atMax = item.quantity >= maxQty;
|
|
13709
|
+
const atMin = item.quantity <= 1;
|
|
13710
|
+
return /* @__PURE__ */ jsxs8(
|
|
13711
|
+
"li",
|
|
13712
|
+
{
|
|
13713
|
+
className: "flex gap-4 rounded-xl border border-border bg-card p-4",
|
|
13714
|
+
children: [
|
|
13715
|
+
/* @__PURE__ */ jsx10("div", { className: "h-20 w-20 flex-shrink-0 overflow-hidden rounded-lg bg-muted", children: item.imageUrl ? /* @__PURE__ */ jsx10("img", { src: item.imageUrl, alt: item.name, className: "h-full w-full object-cover" }) : null }),
|
|
13716
|
+
/* @__PURE__ */ jsxs8("div", { className: "min-w-0 flex-1", children: [
|
|
13717
|
+
/* @__PURE__ */ jsx10("p", { className: "truncate text-sm font-semibold leading-tight", children: item.name }),
|
|
13718
|
+
item.variantName && /* @__PURE__ */ jsx10("p", { className: "mt-0.5 text-xs text-muted-foreground", children: item.variantName }),
|
|
13719
|
+
/* @__PURE__ */ jsxs8("p", { className: "mt-1 text-sm text-muted-foreground", children: [
|
|
13720
|
+
formatPrice(item.unitPrice, currencyCode, locale),
|
|
13721
|
+
" ",
|
|
13722
|
+
t.unitPriceSuffix
|
|
13723
|
+
] }),
|
|
13724
|
+
/* @__PURE__ */ jsxs8(
|
|
13725
|
+
"div",
|
|
13726
|
+
{
|
|
13727
|
+
role: "group",
|
|
13728
|
+
"aria-label": t.quantityLabel,
|
|
13729
|
+
className: "mt-3 flex items-center gap-3",
|
|
13730
|
+
children: [
|
|
13731
|
+
/* @__PURE__ */ jsx10(
|
|
13732
|
+
"button",
|
|
13733
|
+
{
|
|
13734
|
+
type: "button",
|
|
13735
|
+
"aria-label": t.decrease,
|
|
13736
|
+
disabled: !onQuantityChange || atMin,
|
|
13737
|
+
onClick: onQuantityChange ? () => onQuantityChange(item.productId, item.variantId, item.quantity - 1) : void 0,
|
|
13738
|
+
className: "flex h-7 w-7 items-center justify-center rounded border border-border transition hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40",
|
|
13739
|
+
children: "\u2212"
|
|
13740
|
+
}
|
|
13741
|
+
),
|
|
13742
|
+
/* @__PURE__ */ jsx10("span", { className: "w-8 text-center text-sm font-semibold tabular-nums", children: item.quantity }),
|
|
13743
|
+
/* @__PURE__ */ jsx10(
|
|
13744
|
+
"button",
|
|
13745
|
+
{
|
|
13746
|
+
type: "button",
|
|
13747
|
+
"aria-label": t.increase,
|
|
13748
|
+
disabled: !onQuantityChange || atMax,
|
|
13749
|
+
onClick: onQuantityChange ? () => onQuantityChange(item.productId, item.variantId, item.quantity + 1) : void 0,
|
|
13750
|
+
className: "flex h-7 w-7 items-center justify-center rounded border border-border transition hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40",
|
|
13751
|
+
children: "+"
|
|
13752
|
+
}
|
|
13753
|
+
),
|
|
13754
|
+
onRemove && /* @__PURE__ */ jsx10(
|
|
13755
|
+
"button",
|
|
13756
|
+
{
|
|
13757
|
+
type: "button",
|
|
13758
|
+
"aria-label": `${t.remove} ${item.name}`,
|
|
13759
|
+
onClick: () => onRemove(item.productId, item.variantId),
|
|
13760
|
+
className: "ml-2 text-muted-foreground transition-colors hover:text-destructive",
|
|
13761
|
+
children: t.remove
|
|
13762
|
+
}
|
|
13763
|
+
)
|
|
13764
|
+
]
|
|
13765
|
+
}
|
|
13766
|
+
)
|
|
13767
|
+
] }),
|
|
13768
|
+
/* @__PURE__ */ jsx10("div", { className: "flex-shrink-0 text-right", children: /* @__PURE__ */ jsx10("p", { className: "text-base font-bold", children: formatPrice(item.unitPrice * item.quantity, currencyCode, locale) }) })
|
|
13769
|
+
]
|
|
13770
|
+
},
|
|
13771
|
+
lineKey(item.productId, item.variantId)
|
|
13772
|
+
);
|
|
13773
|
+
}) })
|
|
13774
|
+
] });
|
|
13775
|
+
}
|
|
13776
|
+
|
|
13777
|
+
// src/components/cart-summary.tsx
|
|
13778
|
+
import { cn as cn11 } from "@reblu/site-ui/utils";
|
|
13779
|
+
import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
13780
|
+
var DEFAULT_LABELS5 = {
|
|
13781
|
+
subtotal: "Subtotal",
|
|
13782
|
+
discountPrefix: "Descuento",
|
|
13783
|
+
shipping: "Env\xEDo",
|
|
13784
|
+
freeShipping: "Env\xEDo gratis",
|
|
13785
|
+
shippingCalculated: "Se calcula en el pago",
|
|
13786
|
+
total: "Total"
|
|
13787
|
+
};
|
|
13788
|
+
function CartSummary({
|
|
13789
|
+
subtotal,
|
|
13790
|
+
discount,
|
|
13791
|
+
discountCode,
|
|
13792
|
+
shipping,
|
|
13793
|
+
shippingEnabled,
|
|
13794
|
+
total,
|
|
13795
|
+
labels,
|
|
13796
|
+
currencyCode,
|
|
13797
|
+
locale,
|
|
13798
|
+
className
|
|
13799
|
+
}) {
|
|
13800
|
+
const t = { ...DEFAULT_LABELS5, ...labels };
|
|
13801
|
+
const hasDiscount = Boolean(discount && discount > 0);
|
|
13802
|
+
return /* @__PURE__ */ jsxs9("dl", { className: cn11("space-y-2 text-sm", className), "data-slot": "cart-summary", children: [
|
|
13803
|
+
/* @__PURE__ */ jsxs9("div", { className: "flex justify-between text-muted-foreground", children: [
|
|
13804
|
+
/* @__PURE__ */ jsx11("dt", { children: t.subtotal }),
|
|
13805
|
+
/* @__PURE__ */ jsx11("dd", { children: formatPrice(subtotal, currencyCode, locale) })
|
|
13806
|
+
] }),
|
|
13807
|
+
hasDiscount && /* @__PURE__ */ jsxs9("div", { className: "flex justify-between text-green-600 dark:text-green-400", children: [
|
|
13808
|
+
/* @__PURE__ */ jsxs9("dt", { children: [
|
|
13809
|
+
t.discountPrefix,
|
|
13810
|
+
discountCode ? ` (${discountCode})` : ""
|
|
13811
|
+
] }),
|
|
13812
|
+
/* @__PURE__ */ jsxs9("dd", { children: [
|
|
13813
|
+
"-",
|
|
13814
|
+
formatPrice(discount, currencyCode, locale)
|
|
13815
|
+
] })
|
|
13816
|
+
] }),
|
|
13817
|
+
shippingEnabled && /* @__PURE__ */ jsxs9("div", { className: "flex justify-between text-muted-foreground", children: [
|
|
13818
|
+
/* @__PURE__ */ jsx11("dt", { children: t.shipping }),
|
|
13819
|
+
/* @__PURE__ */ jsx11("dd", { children: shipping == null || !Number.isFinite(shipping) ? t.shippingCalculated : shipping === 0 ? t.freeShipping : formatPrice(shipping, currencyCode, locale) })
|
|
13820
|
+
] }),
|
|
13821
|
+
/* @__PURE__ */ jsxs9("div", { className: "flex justify-between border-t border-border pt-2 text-base font-bold", children: [
|
|
13822
|
+
/* @__PURE__ */ jsx11("dt", { children: t.total }),
|
|
13823
|
+
/* @__PURE__ */ jsx11("dd", { children: formatPrice(total, currencyCode, locale) })
|
|
13824
|
+
] })
|
|
13825
|
+
] });
|
|
13826
|
+
}
|
|
13827
|
+
|
|
13828
|
+
// src/components/checkout-login-prompt.tsx
|
|
13829
|
+
import { cn as cn12 } from "@reblu/site-ui/utils";
|
|
13830
|
+
import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
13831
|
+
var DEFAULT_LABELS6 = {
|
|
13832
|
+
title: "Identificaci\xF3n",
|
|
13833
|
+
description: "Introduce tu email para agilizar el proceso o contin\xFAa como invitado.",
|
|
13834
|
+
emailLabel: "Email",
|
|
13835
|
+
emailPlaceholder: "tu@email.com",
|
|
13836
|
+
continueWithEmail: "Continuar con este email",
|
|
13837
|
+
checking: "Verificando\u2026",
|
|
13838
|
+
continueAsGuest: "Continuar como invitado",
|
|
13839
|
+
close: "Cerrar"
|
|
13840
|
+
};
|
|
13841
|
+
var EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
13842
|
+
function CheckoutLoginPrompt({
|
|
13843
|
+
open,
|
|
13844
|
+
email,
|
|
13845
|
+
onEmailChange,
|
|
13846
|
+
onClose,
|
|
13847
|
+
onSubmitEmail,
|
|
13848
|
+
onContinueAsGuest,
|
|
13849
|
+
checking,
|
|
13850
|
+
error,
|
|
13851
|
+
labels,
|
|
13852
|
+
className
|
|
13853
|
+
}) {
|
|
13854
|
+
if (!open) return null;
|
|
13855
|
+
const t = { ...DEFAULT_LABELS6, ...labels };
|
|
13856
|
+
const isValidEmail = EMAIL_PATTERN.test(email.trim());
|
|
13857
|
+
return /* @__PURE__ */ jsxs10(Fragment3, { children: [
|
|
13858
|
+
/* @__PURE__ */ jsx12("div", { className: "fixed inset-0 z-50 bg-black/50", onClick: onClose, "aria-hidden": "true" }),
|
|
13859
|
+
/* @__PURE__ */ jsxs10(
|
|
13860
|
+
"div",
|
|
13861
|
+
{
|
|
13862
|
+
role: "dialog",
|
|
13863
|
+
"aria-modal": "true",
|
|
13864
|
+
"aria-labelledby": "checkout-login-prompt-title",
|
|
13865
|
+
"data-slot": "checkout-login-prompt",
|
|
13866
|
+
className: cn12(
|
|
13867
|
+
"fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 space-y-5 rounded-2xl border border-border bg-background p-6 shadow-2xl",
|
|
13868
|
+
className
|
|
13869
|
+
),
|
|
13870
|
+
children: [
|
|
13871
|
+
/* @__PURE__ */ jsxs10("div", { className: "flex items-start justify-between gap-3", children: [
|
|
13872
|
+
/* @__PURE__ */ jsxs10("div", { children: [
|
|
13873
|
+
/* @__PURE__ */ jsx12("h2", { id: "checkout-login-prompt-title", className: "text-xl font-bold", children: t.title }),
|
|
13874
|
+
/* @__PURE__ */ jsx12("p", { className: "mt-1 text-sm text-muted-foreground", children: t.description })
|
|
13875
|
+
] }),
|
|
13876
|
+
/* @__PURE__ */ jsx12(
|
|
13877
|
+
"button",
|
|
13878
|
+
{
|
|
13879
|
+
type: "button",
|
|
13880
|
+
onClick: onClose,
|
|
13881
|
+
"aria-label": t.close,
|
|
13882
|
+
className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
|
|
13883
|
+
children: "\u2715"
|
|
13884
|
+
}
|
|
13885
|
+
)
|
|
13886
|
+
] }),
|
|
13887
|
+
/* @__PURE__ */ jsxs10("div", { className: "space-y-2", children: [
|
|
13888
|
+
/* @__PURE__ */ jsx12("label", { htmlFor: "checkout-login-prompt-email", className: "text-sm font-medium", children: t.emailLabel }),
|
|
13889
|
+
/* @__PURE__ */ jsx12(
|
|
13890
|
+
"input",
|
|
13891
|
+
{
|
|
13892
|
+
id: "checkout-login-prompt-email",
|
|
13893
|
+
type: "email",
|
|
13894
|
+
autoComplete: "email",
|
|
13895
|
+
value: email,
|
|
13896
|
+
onChange: (e) => onEmailChange(e.target.value),
|
|
13897
|
+
placeholder: t.emailPlaceholder,
|
|
13898
|
+
className: cn12(
|
|
13899
|
+
"w-full rounded-lg border bg-background px-3 py-2 text-sm transition focus:outline-none focus:ring-2 focus:ring-primary/20",
|
|
13900
|
+
error ? "border-destructive" : "border-border focus:border-primary"
|
|
13901
|
+
)
|
|
13902
|
+
}
|
|
13903
|
+
),
|
|
13904
|
+
error && /* @__PURE__ */ jsx12("p", { className: "text-xs text-destructive", children: error })
|
|
13905
|
+
] }),
|
|
13906
|
+
/* @__PURE__ */ jsxs10("div", { className: "space-y-2", children: [
|
|
13907
|
+
/* @__PURE__ */ jsx12(
|
|
13908
|
+
"button",
|
|
13909
|
+
{
|
|
13910
|
+
type: "button",
|
|
13911
|
+
onClick: onSubmitEmail,
|
|
13912
|
+
disabled: checking || !isValidEmail,
|
|
13913
|
+
className: cn12(
|
|
13914
|
+
"flex w-full items-center justify-center gap-2 rounded-xl px-4 py-2.5 text-sm font-semibold transition-all",
|
|
13915
|
+
checking || !isValidEmail ? "cursor-not-allowed bg-muted text-muted-foreground" : "bg-primary text-primary-foreground hover:bg-primary/90"
|
|
13916
|
+
),
|
|
13917
|
+
children: checking ? t.checking : t.continueWithEmail
|
|
13918
|
+
}
|
|
13919
|
+
),
|
|
13920
|
+
/* @__PURE__ */ jsx12(
|
|
13921
|
+
"button",
|
|
13922
|
+
{
|
|
13923
|
+
type: "button",
|
|
13924
|
+
onClick: onContinueAsGuest,
|
|
13925
|
+
className: "flex w-full items-center justify-center gap-2 rounded-xl bg-muted px-4 py-2.5 text-sm font-semibold text-muted-foreground transition-colors hover:bg-muted/70",
|
|
13926
|
+
children: t.continueAsGuest
|
|
13927
|
+
}
|
|
13928
|
+
)
|
|
13929
|
+
] })
|
|
13930
|
+
]
|
|
13931
|
+
}
|
|
13932
|
+
)
|
|
13933
|
+
] });
|
|
13934
|
+
}
|
|
13935
|
+
|
|
13936
|
+
// src/components/checkout-form.tsx
|
|
13937
|
+
import { cn as cn13 } from "@reblu/site-ui/utils";
|
|
13938
|
+
import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
13939
|
+
var DEFAULT_LABELS7 = {
|
|
13940
|
+
contactTitle: "Datos de contacto",
|
|
13941
|
+
nameLabel: "Nombre completo",
|
|
13942
|
+
namePlaceholder: "Tu nombre",
|
|
13943
|
+
emailLabel: "Email",
|
|
13944
|
+
emailPlaceholder: "tu@email.com",
|
|
13945
|
+
phoneLabel: "Tel\xE9fono",
|
|
13946
|
+
discountTitle: "C\xF3digo de descuento",
|
|
13947
|
+
discountPlaceholder: "C\xD3DIGO10",
|
|
13948
|
+
applyDiscount: "Aplicar",
|
|
13949
|
+
applyingDiscount: "Aplicando\u2026",
|
|
13950
|
+
removeDiscount: "Quitar",
|
|
13951
|
+
discountAppliedSuffix: (amount) => `\u2014 ${amount} de descuento`,
|
|
13952
|
+
submit: "Confirmar y pagar",
|
|
13953
|
+
submitting: "Procesando\u2026"
|
|
13954
|
+
};
|
|
13955
|
+
function CheckoutForm({
|
|
13956
|
+
contact,
|
|
13957
|
+
onContactChange,
|
|
13958
|
+
contactErrors,
|
|
13959
|
+
discountCode,
|
|
13960
|
+
onDiscountCodeChange,
|
|
13961
|
+
onApplyDiscount,
|
|
13962
|
+
onRemoveDiscount,
|
|
13963
|
+
appliedDiscount,
|
|
13964
|
+
discountApplying,
|
|
13965
|
+
discountError,
|
|
13966
|
+
loginPrompt,
|
|
13967
|
+
children: children2,
|
|
13968
|
+
submitting,
|
|
13969
|
+
submitDisabled,
|
|
13970
|
+
onSubmit,
|
|
13971
|
+
labels,
|
|
13972
|
+
currencyCode,
|
|
13973
|
+
locale,
|
|
13974
|
+
className
|
|
13975
|
+
}) {
|
|
13976
|
+
const t = { ...DEFAULT_LABELS7, ...labels };
|
|
13977
|
+
function patchContact(patch3) {
|
|
13978
|
+
onContactChange({ ...contact, ...patch3 });
|
|
13979
|
+
}
|
|
13980
|
+
function handleDiscountCodeKeyDown(event) {
|
|
13981
|
+
if (event.key !== "Enter") return;
|
|
13982
|
+
if (event.nativeEvent.isComposing) return;
|
|
13983
|
+
event.preventDefault();
|
|
13984
|
+
if (discountCode.trim() && !discountApplying) onApplyDiscount();
|
|
13985
|
+
}
|
|
13986
|
+
return /* @__PURE__ */ jsxs11(Fragment4, { children: [
|
|
13987
|
+
loginPrompt,
|
|
13988
|
+
/* @__PURE__ */ jsxs11(
|
|
13989
|
+
"form",
|
|
13990
|
+
{
|
|
13991
|
+
"data-testid": "checkout-form",
|
|
13992
|
+
onSubmit,
|
|
13993
|
+
className: cn13("space-y-8", className),
|
|
13994
|
+
"data-slot": "checkout-form",
|
|
13995
|
+
children: [
|
|
13996
|
+
/* @__PURE__ */ jsxs11("section", { className: "space-y-4", children: [
|
|
13997
|
+
/* @__PURE__ */ jsx13("h2", { className: "border-b border-border pb-2 text-lg font-semibold", children: t.contactTitle }),
|
|
13998
|
+
/* @__PURE__ */ jsxs11("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [
|
|
13999
|
+
/* @__PURE__ */ jsxs11("div", { className: "space-y-1", children: [
|
|
14000
|
+
/* @__PURE__ */ jsx13("label", { htmlFor: "checkout-form-name", className: "text-sm font-medium", children: t.nameLabel }),
|
|
14001
|
+
/* @__PURE__ */ jsx13(
|
|
14002
|
+
"input",
|
|
14003
|
+
{
|
|
14004
|
+
id: "checkout-form-name",
|
|
14005
|
+
type: "text",
|
|
14006
|
+
autoComplete: "name",
|
|
14007
|
+
value: contact.name,
|
|
14008
|
+
onChange: (e) => patchContact({ name: e.target.value }),
|
|
14009
|
+
placeholder: t.namePlaceholder,
|
|
14010
|
+
className: cn13(
|
|
14011
|
+
"w-full rounded-lg border bg-background px-3 py-2 text-sm transition focus:outline-none focus:ring-2 focus:ring-primary/20",
|
|
14012
|
+
contactErrors?.name ? "border-destructive" : "border-border focus:border-primary"
|
|
14013
|
+
)
|
|
14014
|
+
}
|
|
14015
|
+
),
|
|
14016
|
+
contactErrors?.name && /* @__PURE__ */ jsx13("p", { className: "text-xs text-destructive", children: contactErrors.name })
|
|
14017
|
+
] }),
|
|
14018
|
+
/* @__PURE__ */ jsxs11("div", { className: "space-y-1", children: [
|
|
14019
|
+
/* @__PURE__ */ jsx13("label", { htmlFor: "checkout-form-email", className: "text-sm font-medium", children: t.emailLabel }),
|
|
14020
|
+
/* @__PURE__ */ jsx13(
|
|
14021
|
+
"input",
|
|
14022
|
+
{
|
|
14023
|
+
id: "checkout-form-email",
|
|
14024
|
+
type: "email",
|
|
14025
|
+
autoComplete: "email",
|
|
14026
|
+
value: contact.email,
|
|
14027
|
+
onChange: (e) => patchContact({ email: e.target.value }),
|
|
14028
|
+
placeholder: t.emailPlaceholder,
|
|
14029
|
+
className: cn13(
|
|
14030
|
+
"w-full rounded-lg border bg-background px-3 py-2 text-sm transition focus:outline-none focus:ring-2 focus:ring-primary/20",
|
|
14031
|
+
contactErrors?.email ? "border-destructive" : "border-border focus:border-primary"
|
|
14032
|
+
)
|
|
14033
|
+
}
|
|
14034
|
+
),
|
|
14035
|
+
contactErrors?.email && /* @__PURE__ */ jsx13("p", { className: "text-xs text-destructive", children: contactErrors.email })
|
|
14036
|
+
] }),
|
|
14037
|
+
/* @__PURE__ */ jsxs11("div", { className: "space-y-1", children: [
|
|
14038
|
+
/* @__PURE__ */ jsx13("label", { htmlFor: "checkout-form-phone", className: "text-sm font-medium", children: t.phoneLabel }),
|
|
14039
|
+
/* @__PURE__ */ jsx13(
|
|
14040
|
+
"input",
|
|
14041
|
+
{
|
|
14042
|
+
id: "checkout-form-phone",
|
|
14043
|
+
type: "tel",
|
|
14044
|
+
autoComplete: "tel",
|
|
14045
|
+
value: contact.phone ?? "",
|
|
14046
|
+
onChange: (e) => patchContact({ phone: e.target.value }),
|
|
14047
|
+
className: cn13(
|
|
14048
|
+
"w-full rounded-lg border bg-background px-3 py-2 text-sm transition focus:outline-none focus:ring-2 focus:ring-primary/20",
|
|
14049
|
+
contactErrors?.phone ? "border-destructive" : "border-border focus:border-primary"
|
|
14050
|
+
)
|
|
14051
|
+
}
|
|
14052
|
+
),
|
|
14053
|
+
contactErrors?.phone && /* @__PURE__ */ jsx13("p", { className: "text-xs text-destructive", children: contactErrors.phone })
|
|
14054
|
+
] })
|
|
14055
|
+
] })
|
|
14056
|
+
] }),
|
|
14057
|
+
children2,
|
|
14058
|
+
/* @__PURE__ */ jsxs11("section", { className: "space-y-3", children: [
|
|
14059
|
+
/* @__PURE__ */ jsx13("h2", { className: "border-b border-border pb-2 text-lg font-semibold", children: t.discountTitle }),
|
|
14060
|
+
appliedDiscount ? /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between rounded-lg border border-green-200 bg-green-50 px-4 py-3 dark:border-green-800 dark:bg-green-900/20", children: [
|
|
14061
|
+
/* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2 text-sm text-green-700 dark:text-green-400", children: [
|
|
14062
|
+
/* @__PURE__ */ jsx13("span", { className: "font-semibold", children: appliedDiscount.code }),
|
|
14063
|
+
/* @__PURE__ */ jsx13("span", { children: t.discountAppliedSuffix(formatPrice(appliedDiscount.amount, currencyCode, locale)) })
|
|
14064
|
+
] }),
|
|
14065
|
+
/* @__PURE__ */ jsx13(
|
|
14066
|
+
"button",
|
|
14067
|
+
{
|
|
14068
|
+
type: "button",
|
|
14069
|
+
onClick: onRemoveDiscount,
|
|
14070
|
+
"aria-label": t.removeDiscount,
|
|
14071
|
+
className: "text-green-600 transition-colors hover:text-green-800 dark:text-green-400 dark:hover:text-green-200",
|
|
14072
|
+
children: t.removeDiscount
|
|
14073
|
+
}
|
|
14074
|
+
)
|
|
14075
|
+
] }) : /* @__PURE__ */ jsxs11("div", { className: "flex gap-2", children: [
|
|
14076
|
+
/* @__PURE__ */ jsx13("label", { htmlFor: "checkout-form-discount-code", className: "sr-only", children: t.discountTitle }),
|
|
14077
|
+
/* @__PURE__ */ jsx13(
|
|
14078
|
+
"input",
|
|
14079
|
+
{
|
|
14080
|
+
id: "checkout-form-discount-code",
|
|
14081
|
+
type: "text",
|
|
14082
|
+
value: discountCode,
|
|
14083
|
+
onChange: (e) => onDiscountCodeChange(e.target.value.toUpperCase()),
|
|
14084
|
+
onKeyDown: handleDiscountCodeKeyDown,
|
|
14085
|
+
placeholder: t.discountPlaceholder,
|
|
14086
|
+
className: "flex-1 rounded-lg border border-border bg-background px-3 py-2 text-sm uppercase transition focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
|
|
14087
|
+
}
|
|
14088
|
+
),
|
|
14089
|
+
/* @__PURE__ */ jsx13(
|
|
14090
|
+
"button",
|
|
14091
|
+
{
|
|
14092
|
+
type: "button",
|
|
14093
|
+
onClick: onApplyDiscount,
|
|
14094
|
+
disabled: !discountCode.trim() || discountApplying,
|
|
14095
|
+
className: "rounded-lg bg-muted px-4 py-2 text-sm font-medium text-foreground transition hover:bg-muted/70 disabled:cursor-not-allowed disabled:opacity-50",
|
|
14096
|
+
children: discountApplying ? t.applyingDiscount : t.applyDiscount
|
|
14097
|
+
}
|
|
14098
|
+
)
|
|
14099
|
+
] }),
|
|
14100
|
+
discountError && /* @__PURE__ */ jsx13("p", { className: "text-xs text-destructive", children: discountError })
|
|
14101
|
+
] }),
|
|
14102
|
+
/* @__PURE__ */ jsx13(
|
|
14103
|
+
"button",
|
|
14104
|
+
{
|
|
14105
|
+
type: "submit",
|
|
14106
|
+
disabled: submitting || submitDisabled,
|
|
14107
|
+
className: cn13(
|
|
14108
|
+
"flex w-full items-center justify-center gap-2 rounded-xl px-4 py-3 font-semibold transition-all",
|
|
14109
|
+
submitting || submitDisabled ? "cursor-not-allowed bg-muted text-muted-foreground" : "bg-primary text-primary-foreground hover:bg-primary/90"
|
|
14110
|
+
),
|
|
14111
|
+
children: submitting ? t.submitting : t.submit
|
|
14112
|
+
}
|
|
14113
|
+
)
|
|
14114
|
+
]
|
|
14115
|
+
}
|
|
14116
|
+
)
|
|
14117
|
+
] });
|
|
14118
|
+
}
|
|
14119
|
+
|
|
14120
|
+
// src/components/order-confirmation.tsx
|
|
14121
|
+
import { cn as cn14 } from "@reblu/site-ui/utils";
|
|
14122
|
+
import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
14123
|
+
var DEFAULT_LABELS8 = {
|
|
14124
|
+
pollingTitle: "Confirmando tu pedido\u2026",
|
|
14125
|
+
pollingDescription: "Estamos procesando el pago, un momento\u2026",
|
|
14126
|
+
foundTitle: "\xA1Pedido confirmado!",
|
|
14127
|
+
foundDescription: "Recibir\xE1s un email de confirmaci\xF3n con todos los detalles.",
|
|
14128
|
+
timeoutTitle: "Pago recibido",
|
|
14129
|
+
timeoutDescription: "Tu pago se ha procesado. Recibir\xE1s un email de confirmaci\xF3n en breve.",
|
|
14130
|
+
orderNumberLabel: "Pedido confirmado",
|
|
14131
|
+
totalLabel: "Total",
|
|
14132
|
+
confirmationEmailPrefix: "Te hemos enviado un email de confirmaci\xF3n a",
|
|
14133
|
+
sessionReferenceLabel: "Referencia de sesi\xF3n"
|
|
14134
|
+
};
|
|
14135
|
+
function OrderConfirmation({
|
|
14136
|
+
status,
|
|
14137
|
+
order,
|
|
14138
|
+
sessionId,
|
|
14139
|
+
labels,
|
|
14140
|
+
currencyCode,
|
|
14141
|
+
locale,
|
|
14142
|
+
className
|
|
14143
|
+
}) {
|
|
14144
|
+
const t = { ...DEFAULT_LABELS8, ...labels };
|
|
14145
|
+
const title = status === "polling" ? t.pollingTitle : order ? t.foundTitle : t.timeoutTitle;
|
|
14146
|
+
const description = status === "polling" ? t.pollingDescription : order ? t.foundDescription : t.timeoutDescription;
|
|
14147
|
+
return /* @__PURE__ */ jsxs12("div", { className: cn14("space-y-6 text-center", className), "data-slot": "order-confirmation", children: [
|
|
14148
|
+
/* @__PURE__ */ jsx14("h1", { className: "text-3xl font-bold", children: title }),
|
|
14149
|
+
/* @__PURE__ */ jsx14("p", { className: "text-lg text-muted-foreground", children: description }),
|
|
14150
|
+
order && /* @__PURE__ */ jsxs12("div", { className: "space-y-6", children: [
|
|
14151
|
+
/* @__PURE__ */ jsxs12("div", { className: "inline-block rounded-xl bg-muted px-6 py-4", children: [
|
|
14152
|
+
/* @__PURE__ */ jsx14("p", { className: "mb-1 text-xs uppercase tracking-widest text-muted-foreground", children: t.orderNumberLabel }),
|
|
14153
|
+
/* @__PURE__ */ jsx14("p", { className: "font-mono text-lg font-semibold", children: order.orderNumber })
|
|
14154
|
+
] }),
|
|
14155
|
+
/* @__PURE__ */ jsxs12("div", { className: "mx-auto max-w-sm space-y-3 rounded-xl border border-border bg-card p-5 text-left", children: [
|
|
14156
|
+
order.items.map((item, idx) => /* @__PURE__ */ jsxs12(
|
|
14157
|
+
"div",
|
|
14158
|
+
{
|
|
14159
|
+
className: "flex justify-between gap-4 text-sm",
|
|
14160
|
+
children: [
|
|
14161
|
+
/* @__PURE__ */ jsxs12("span", { className: "max-w-[60%] truncate text-muted-foreground", children: [
|
|
14162
|
+
item.product.name,
|
|
14163
|
+
item.variant ? ` (${item.variant.name})` : "",
|
|
14164
|
+
" x",
|
|
14165
|
+
item.quantity
|
|
14166
|
+
] }),
|
|
14167
|
+
/* @__PURE__ */ jsx14("span", { children: formatPrice(item.total, currencyCode, locale) })
|
|
14168
|
+
]
|
|
14169
|
+
},
|
|
14170
|
+
idx
|
|
14171
|
+
)),
|
|
14172
|
+
/* @__PURE__ */ jsx14("div", { className: "space-y-1 border-t border-border pt-3 text-sm", children: /* @__PURE__ */ jsxs12("div", { className: "flex justify-between pt-1 text-base font-bold", children: [
|
|
14173
|
+
/* @__PURE__ */ jsx14("span", { children: t.totalLabel }),
|
|
14174
|
+
/* @__PURE__ */ jsx14("span", { children: formatPrice(order.total, currencyCode, locale) })
|
|
14175
|
+
] }) })
|
|
14176
|
+
] }),
|
|
14177
|
+
/* @__PURE__ */ jsxs12("p", { className: "mx-auto max-w-sm text-sm text-muted-foreground", children: [
|
|
14178
|
+
t.confirmationEmailPrefix,
|
|
14179
|
+
" ",
|
|
14180
|
+
/* @__PURE__ */ jsx14("span", { className: "font-medium text-foreground", children: order.customerEmail }),
|
|
14181
|
+
"."
|
|
14182
|
+
] })
|
|
14183
|
+
] }),
|
|
14184
|
+
!order && status === "timeout" && sessionId && /* @__PURE__ */ jsxs12("div", { className: "inline-block rounded-xl bg-muted px-6 py-4", children: [
|
|
14185
|
+
/* @__PURE__ */ jsx14("p", { className: "mb-1 text-xs uppercase tracking-widest text-muted-foreground", children: t.sessionReferenceLabel }),
|
|
14186
|
+
/* @__PURE__ */ jsx14("p", { className: "break-all font-mono text-sm font-semibold", children: sessionId })
|
|
14187
|
+
] })
|
|
14188
|
+
] });
|
|
14189
|
+
}
|
|
13587
14190
|
export {
|
|
13588
14191
|
ALLOWED_YOUTUBE_HOSTS,
|
|
14192
|
+
AddToCartButton,
|
|
14193
|
+
CartIcon,
|
|
14194
|
+
CartLineList,
|
|
14195
|
+
CartSummary,
|
|
14196
|
+
CheckoutForm,
|
|
14197
|
+
CheckoutLoginPrompt,
|
|
13589
14198
|
DEFAULT_SHOP_PRICE_BANDS,
|
|
13590
14199
|
MarkdownRenderer,
|
|
14200
|
+
OrderConfirmation,
|
|
13591
14201
|
ProductCard,
|
|
13592
14202
|
ProfileCard,
|
|
13593
14203
|
SafeHtml,
|