@reblu/site-blocks 0.5.1 → 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 +18 -0
- package/README.md +43 -0
- package/dist/index.cjs +613 -0
- 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 +606 -0
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -13588,10 +13588,616 @@ function ShopFilters({
|
|
|
13588
13588
|
)
|
|
13589
13589
|
] });
|
|
13590
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
|
+
}
|
|
13591
14190
|
export {
|
|
13592
14191
|
ALLOWED_YOUTUBE_HOSTS,
|
|
14192
|
+
AddToCartButton,
|
|
14193
|
+
CartIcon,
|
|
14194
|
+
CartLineList,
|
|
14195
|
+
CartSummary,
|
|
14196
|
+
CheckoutForm,
|
|
14197
|
+
CheckoutLoginPrompt,
|
|
13593
14198
|
DEFAULT_SHOP_PRICE_BANDS,
|
|
13594
14199
|
MarkdownRenderer,
|
|
14200
|
+
OrderConfirmation,
|
|
13595
14201
|
ProductCard,
|
|
13596
14202
|
ProfileCard,
|
|
13597
14203
|
SafeHtml,
|