@ecomiq/storefront 2.1.4 → 3.0.0

package/dist/sections/account-orders.js

@@ -0,0 +1,359 @@
+import { money } from "../money-DtGOtDri.js";
+import { useStorefrontLocale, useStorefrontText } from "../storefront-language-DrMjVbmk.js";
+import { PayButton, PaymentPreview, ReorderButton, useOrderHeadline, useOrderStepDetail } from "../order-display-DTt5WBbc.js";
+import { mainPayment, orderStepLabel, orderStepOf } from "../order-view-9IlBg5AF.js";
+import { orderFiltersQuery } from "../account-Dx4e3syi.js";
+import { useOrderPages } from "../order-pages-Dm6l5m0m.js";
+import { Form, Link, useLocation, useNavigate } from "react-router";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@theme/ui/button";
+import { Input } from "@theme/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@theme/ui/select";
+// src/sections/account-orders.tsx
+const catalog = {
+	name: "Mis pedidos",
+	description: "Pedidos del cliente con búsqueda, filtros, estado y pago."
+};
+const STATUSES = [
+	{
+		value: null,
+		label: "Todos"
+	},
+	{
+		value: "open",
+		label: "En curso"
+	},
+	{
+		value: "delivered",
+		label: "Entregados"
+	},
+	{
+		value: "cancelled",
+		label: "Cancelados"
+	}
+];
+function Collage({ items }) {
+	const shown = items.slice(0, 4);
+	const hidden = items.length - shown.length;
+	const tile = (index) => {
+		if (shown.length === 1) return "col-span-2 row-span-2";
+		if (shown.length === 2) return "row-span-2";
+		if (shown.length === 3 && index === 0) return "row-span-2";
+		return "";
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "grid aspect-[5/4] grid-cols-2 grid-rows-2 gap-1 overflow-hidden rounded-md",
+		children: [shown.map((item, index) => /* @__PURE__ */ jsxs("span", {
+			className: `relative min-h-0 overflow-hidden bg-muted ${tile(index)}`,
+			children: [item.thumbnail ? /* @__PURE__ */ jsx("img", {
+				src: item.thumbnail,
+				alt: "",
+				loading: "lazy",
+				decoding: "async",
+				className: "size-full object-cover"
+			}) : null, hidden > 0 && index === shown.length - 1 ? /* @__PURE__ */ jsxs("span", {
+				className: "absolute inset-0 flex items-center justify-center bg-foreground/55 text-lg font-semibold text-background",
+				children: ["+", hidden + 1]
+			}) : null]
+		}, item.id)), shown.length === 0 ? /* @__PURE__ */ jsx("span", { className: "col-span-2 row-span-2 bg-muted" }) : null]
+	});
+}
+function Thumbnails({ items }) {
+	const shown = items.slice(0, 4);
+	const hidden = items.length - shown.length;
+	const size = items.length <= 2 ? "size-24 sm:size-28" : "size-16";
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex gap-2",
+		children: shown.map((item, index) => /* @__PURE__ */ jsxs("span", {
+			className: `relative shrink-0 overflow-hidden rounded-md border bg-muted ${size}`,
+			children: [item.thumbnail ? /* @__PURE__ */ jsx("img", {
+				src: item.thumbnail,
+				alt: "",
+				loading: "lazy",
+				decoding: "async",
+				className: "size-full object-cover"
+			}) : null, hidden > 0 && index === shown.length - 1 ? /* @__PURE__ */ jsxs("span", {
+				className: "absolute inset-0 flex items-center justify-center bg-foreground/55 text-sm font-semibold text-background",
+				children: ["+", hidden + 1]
+			}) : null]
+		}, item.id))
+	});
+}
+function OrderCard({ order }) {
+	const storefrontTranslate = useStorefrontText();
+	const { locale } = useStorefrontLocale();
+	const stepDetail = useOrderStepDetail();
+	const step = orderStepOf(order);
+	const detail = stepDetail(step, order.items);
+	const payment = mainPayment(order.payments);
+	const units = order.items.reduce((sum, item) => sum + item.quantity, 0);
+	return /* @__PURE__ */ jsxs(Link, {
+		to: `/account/orders/${order.orderId}`,
+		className: "group flex h-full flex-col gap-4 rounded-lg border bg-card p-4 text-card-foreground",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-0.5",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: `font-heading text-xl ${step === "cancelled" ? "text-muted-foreground" : ""}`,
+					children: storefrontTranslate(orderStepLabel(step))
+				}), detail === null ? null : /* @__PURE__ */ jsx("p", {
+					className: "text-sm text-muted-foreground",
+					children: detail
+				})]
+			}),
+			/* @__PURE__ */ jsx(Collage, { items: order.items }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mt-auto grid grid-cols-[minmax(0,1fr)_auto] gap-x-4 gap-y-1 text-sm",
+				children: [
+					/* @__PURE__ */ jsx("p", {
+						className: "font-medium group-hover:underline",
+						children: storefrontTranslate("Pedido {value0}", { value0: order.orderNumber })
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-right font-medium tabular-nums",
+						children: money(order.total, order.currencyCode, locale)
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground",
+						children: units === 1 ? storefrontTranslate("1 producto") : storefrontTranslate("{value0} productos", { value0: units })
+					}),
+					payment ? /* @__PURE__ */ jsx(PaymentPreview, {
+						payment,
+						className: "justify-end text-muted-foreground"
+					}) : null
+				]
+			})
+		]
+	});
+}
+function OrderListCard({ order }) {
+	const storefrontTranslate = useStorefrontText();
+	const { locale } = useStorefrontLocale();
+	const headline = useOrderHeadline();
+	const payment = mainPayment(order.payments);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative flex flex-col gap-4 rounded-lg border bg-card p-4 text-card-foreground transition-colors hover:border-foreground/30 sm:p-5",
+		children: [/* @__PURE__ */ jsx(Thumbnails, { items: order.items }), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-end justify-between gap-x-4 gap-y-3",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-col gap-1",
+				children: [/* @__PURE__ */ jsx(Link, {
+					to: `/account/orders/${order.orderId}`,
+					className: `font-heading text-lg after:absolute after:inset-0 after:rounded-lg ${orderStepOf(order) === "cancelled" ? "text-muted-foreground" : ""}`,
+					children: headline(order)
+				}), /* @__PURE__ */ jsxs("p", {
+					className: "flex flex-wrap items-center gap-x-1.5 text-sm text-muted-foreground",
+					children: [
+						/* @__PURE__ */ jsx("span", { children: storefrontTranslate("Pedido {value0}", { value0: order.orderNumber }) }),
+						/* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							children: "·"
+						}),
+						/* @__PURE__ */ jsx("span", { children: money(order.total, order.currencyCode, locale) }),
+						payment ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							children: "·"
+						}), /* @__PURE__ */ jsx(PaymentPreview, { payment })] }) : null
+					]
+				})]
+			}), order.total - order.totalPaid > 0 && orderStepOf(order) !== "cancelled" ? /* @__PURE__ */ jsx(PayButton, {
+				path: `/account/orders/${order.orderId}`,
+				label: storefrontTranslate("Pagar"),
+				variant: "outline"
+			}) : /* @__PURE__ */ jsx(ReorderButton, {
+				items: order.items,
+				variant: "outline"
+			})]
+		})]
+	});
+}
+const VIEW_ICONS = {
+	list: "M4 6h16M4 12h16M4 18h16",
+	grid: "M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z"
+};
+function AccountOrders({ loaderData }) {
+	const storefrontTranslate = useStorefrontText();
+	const { pathname } = useLocation();
+	const navigate = useNavigate();
+	const { orders, more } = useOrderPages(loaderData);
+	const { filters } = loaderData;
+	const filtered = filters.q !== "" || filters.status !== null;
+	const href = (next) => {
+		const query = orderFiltersQuery(next).toString();
+		return query === "" ? pathname : `${pathname}?${query}`;
+	};
+	if (orders.length === 0 && !filtered) return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-start gap-4 rounded-lg border bg-card p-8 text-card-foreground md:p-10",
+		children: [
+			/* @__PURE__ */ jsx("h2", {
+				className: "text-2xl",
+				children: storefrontTranslate("Aún no tienes pedidos")
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-sm text-muted-foreground",
+				children: storefrontTranslate("Cuando compres, verás aquí el estado de cada pedido.")
+			}),
+			/* @__PURE__ */ jsx(Link, {
+				to: "/products",
+				className: "text-sm font-medium underline underline-offset-4",
+				children: storefrontTranslate("Ver productos")
+			})
+		]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "@container flex flex-col gap-6",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-4",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-3xl",
+					children: storefrontTranslate("Pedidos")
+				}), /* @__PURE__ */ jsx("div", {
+					className: "hidden gap-1 sm:flex",
+					role: "group",
+					"aria-label": storefrontTranslate("Vista"),
+					children: ["list", "grid"].map((view) => /* @__PURE__ */ jsx(Link, {
+						to: href({
+							...filters,
+							view
+						}),
+						"aria-pressed": filters.view === view,
+						"aria-label": storefrontTranslate(view === "list" ? "Ver como lista" : "Ver como cuadrícula"),
+						className: `flex size-9 items-center justify-center rounded-md transition-colors ${filters.view === view ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground"}`,
+						children: /* @__PURE__ */ jsx("svg", {
+							"aria-hidden": "true",
+							viewBox: "0 0 24 24",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: "1.8",
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							className: "size-4",
+							children: /* @__PURE__ */ jsx("path", { d: VIEW_ICONS[view] })
+						})
+					}, view))
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-4",
+				children: [/* @__PURE__ */ jsxs(Form, {
+					method: "get",
+					action: pathname,
+					className: "flex gap-2",
+					role: "search",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "relative min-w-0 flex-1",
+							children: [/* @__PURE__ */ jsxs("svg", {
+								"aria-hidden": "true",
+								viewBox: "0 0 24 24",
+								fill: "none",
+								stroke: "currentColor",
+								strokeWidth: "1.8",
+								strokeLinecap: "round",
+								className: "pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground",
+								children: [/* @__PURE__ */ jsx("circle", {
+									cx: "11",
+									cy: "11",
+									r: "7"
+								}), /* @__PURE__ */ jsx("path", { d: "m20 20-3.5-3.5" })]
+							}), /* @__PURE__ */ jsx(Input, {
+								type: "search",
+								name: "q",
+								defaultValue: filters.q,
+								placeholder: storefrontTranslate("Buscar"),
+								"aria-label": storefrontTranslate("Buscar pedidos"),
+								maxLength: 100,
+								className: "pl-9"
+							})]
+						}),
+						filters.status !== null ? /* @__PURE__ */ jsx("input", {
+							type: "hidden",
+							name: "status",
+							value: filters.status
+						}) : null,
+						filters.sort === "oldest" ? /* @__PURE__ */ jsx("input", {
+							type: "hidden",
+							name: "sort",
+							value: "oldest"
+						}) : null,
+						filters.view === "grid" ? /* @__PURE__ */ jsx("input", {
+							type: "hidden",
+							name: "view",
+							value: "grid"
+						}) : null,
+						/* @__PURE__ */ jsxs(Select, {
+							value: filters.sort,
+							onValueChange: (sort) => navigate(href({
+								...filters,
+								sort: sort === "oldest" ? "oldest" : "newest"
+							})),
+							children: [/* @__PURE__ */ jsx(SelectTrigger, {
+								"aria-label": storefrontTranslate("Ordenar pedidos"),
+								className: "h-auto shrink-0 self-stretch data-[size=default]:h-auto",
+								children: /* @__PURE__ */ jsx(SelectValue, { children: storefrontTranslate(filters.sort === "oldest" ? "Más antiguos" : "Más recientes") })
+							}), /* @__PURE__ */ jsxs(SelectContent, { children: [/* @__PURE__ */ jsx(SelectItem, {
+								value: "newest",
+								children: storefrontTranslate("Más recientes")
+							}), /* @__PURE__ */ jsx(SelectItem, {
+								value: "oldest",
+								children: storefrontTranslate("Más antiguos")
+							})] })]
+						})
+					]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "border-b",
+					children: /* @__PURE__ */ jsx("nav", {
+						className: "-mb-px flex gap-6 overflow-x-auto",
+						"aria-label": storefrontTranslate("Filtrar pedidos"),
+						children: STATUSES.map((status) => {
+							const current = status.value === filters.status;
+							return /* @__PURE__ */ jsx(Link, {
+								to: href({
+									...filters,
+									status: status.value
+								}),
+								"aria-current": current ? "page" : void 0,
+								className: `shrink-0 whitespace-nowrap border-b-2 pb-3 text-sm transition-colors ${current ? "border-foreground font-medium text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"}`,
+								children: storefrontTranslate(status.label)
+							}, status.label);
+						})
+					})
+				})]
+			}),
+			orders.length === 0 ? /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col items-start gap-3 py-6",
+				children: [
+					/* @__PURE__ */ jsx("p", {
+						className: "font-heading text-xl",
+						children: storefrontTranslate("Ningún pedido coincide")
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-sm text-muted-foreground",
+						children: storefrontTranslate("Prueba con otro número de pedido, producto o estado.")
+					}),
+					/* @__PURE__ */ jsx(Link, {
+						to: pathname,
+						className: "text-sm font-medium underline underline-offset-4",
+						children: storefrontTranslate("Quitar filtros")
+					})
+				]
+			}) : filters.view === "grid" ? /* @__PURE__ */ jsx("ul", {
+				className: "grid gap-4 @lg:grid-cols-2",
+				children: orders.map((order) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(OrderCard, { order }) }, order.orderId))
+			}) : /* @__PURE__ */ jsx("ul", {
+				className: "flex flex-col gap-3",
+				children: orders.map((order) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(OrderListCard, { order }) }, order.orderId))
+			}),
+			more ? /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "outline",
+				className: "self-center",
+				disabled: more.loading,
+				onClick: () => more.load(),
+				children: more.loading ? storefrontTranslate("Cargando…") : storefrontTranslate("Ver más pedidos")
+			}) : null
+		]
+	});
+}
+export { AccountOrders, catalog };

package/dist/sections/account-profile.d.ts

@@ -0,0 +1,16 @@
+import { ProfileActionData } from "../account.js";
+import "../index.js";
+import { SectionCatalog } from "../settings.js";
+import "../entries/account.js";
+import { CustomerMe } from "@ecomiq/core";
+export declare const catalog: SectionCatalog;
+export declare function AccountProfile({ loaderData, actionData }: {
+  loaderData: {
+    me: CustomerMe;
+    countries: {
+      code: string;
+      name: string;
+    }[];
+  };
+  actionData?: ProfileActionData;
+}): import("react").JSX.Element;

package/dist/sections/account-profile.js

@@ -0,0 +1,123 @@
+import { useStorefrontText } from "../storefront-language-DrMjVbmk.js";
+import { CustomerDocumentFields } from "../customer-document-fields-C1K-_DAD.js";
+import { ProfileForm } from "../account-forms-AVk71ko7.js";
+import { useNavigation } from "react-router";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@theme/ui/button";
+import { Input } from "@theme/ui/input";
+// src/sections/account-profile.tsx
+const catalog = {
+	name: "Mi perfil",
+	description: "Nombre, celular y documento del cliente."
+};
+function Labeled({ label, hint, className = "", children }) {
+	return /* @__PURE__ */ jsxs("label", {
+		className: `flex flex-col gap-1.5 text-sm ${className}`,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "font-medium",
+				children: label
+			}),
+			children,
+			hint ? /* @__PURE__ */ jsx("span", {
+				className: "text-xs text-muted-foreground",
+				children: hint
+			}) : null
+		]
+	});
+}
+function AccountProfile({ loaderData, actionData }) {
+	const storefrontTranslate = useStorefrontText();
+	const { me, countries } = loaderData;
+	const busy = useNavigation().state !== "idle";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-6",
+		children: [/* @__PURE__ */ jsx("h2", {
+			className: "text-3xl",
+			children: storefrontTranslate("Datos personales")
+		}), /* @__PURE__ */ jsxs(ProfileForm, {
+			className: "flex max-w-2xl flex-col gap-4",
+			children: [
+				actionData?.error ? /* @__PURE__ */ jsx("p", {
+					role: "alert",
+					className: "rounded-md bg-destructive/10 px-4 py-3 text-sm text-destructive",
+					children: storefrontTranslate(actionData.error)
+				}) : null,
+				actionData?.saved ? /* @__PURE__ */ jsx("p", {
+					role: "status",
+					className: "rounded-md bg-muted px-4 py-3 text-sm",
+					children: storefrontTranslate("Datos guardados.")
+				}) : null,
+				/* @__PURE__ */ jsxs("section", {
+					className: "flex flex-col gap-4 rounded-lg border bg-card p-5 text-card-foreground md:p-6",
+					children: [/* @__PURE__ */ jsx("h3", {
+						className: "font-heading text-lg",
+						children: storefrontTranslate("Tus datos")
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "grid gap-4 sm:grid-cols-2",
+						children: [
+							/* @__PURE__ */ jsx(Labeled, {
+								label: storefrontTranslate("Nombre"),
+								children: /* @__PURE__ */ jsx(Input, {
+									name: "firstName",
+									autoComplete: "given-name",
+									defaultValue: me.firstName ?? "",
+									maxLength: 100
+								})
+							}),
+							/* @__PURE__ */ jsx(Labeled, {
+								label: storefrontTranslate("Apellido"),
+								children: /* @__PURE__ */ jsx(Input, {
+									name: "lastName",
+									autoComplete: "family-name",
+									defaultValue: me.lastName ?? "",
+									maxLength: 100
+								})
+							}),
+							/* @__PURE__ */ jsx(Labeled, {
+								label: storefrontTranslate("Celular"),
+								children: /* @__PURE__ */ jsx(Input, {
+									name: "phone",
+									type: "tel",
+									autoComplete: "tel",
+									defaultValue: me.phone ?? ""
+								})
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex flex-col gap-1.5 text-sm",
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										className: "font-medium",
+										children: storefrontTranslate("Correo")
+									}),
+									/* @__PURE__ */ jsx("p", {
+										className: "flex h-10 items-center text-muted-foreground",
+										children: me.email ?? "—"
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "text-xs text-muted-foreground",
+										children: storefrontTranslate("Escríbenos si necesitas cambiarlo.")
+									})
+								]
+							})
+						]
+					})]
+				}),
+				/* @__PURE__ */ jsx("section", {
+					className: "rounded-lg border bg-card p-5 text-card-foreground md:p-6",
+					children: /* @__PURE__ */ jsx(CustomerDocumentFields, {
+						customer: me,
+						countries
+					})
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					type: "submit",
+					className: "w-fit",
+					disabled: busy,
+					children: busy ? storefrontTranslate("Guardando…") : storefrontTranslate("Guardar cambios")
+				})
+			]
+		})]
+	});
+}
+export { AccountProfile, catalog };

package/dist/sections/checkout.d.ts

@@ -0,0 +1,24 @@
+import { CheckoutActionData, CheckoutData } from "../checkout.js";
+import "../index.js";
+import { SectionCatalog, SectionProps, SectionRoot } from "../settings.js";
+import "../entries/checkout.js";
+export declare const catalog: SectionCatalog;
+export declare const settings: {
+  checkout: {
+    layout: "single" | "steps";
+    summary: "left" | "right";
+    main: string;
+    aside: string;
+    logo: "center" | "left";
+    secure: boolean;
+    marks: boolean;
+    encrypted: boolean;
+    fields: "filled" | "outline";
+    corners: "round" | "soft" | "square";
+    button: "fit" | "full";
+  };
+};
+export declare function Checkout({ data, result, ...root }: {
+  data: CheckoutData;
+  result?: CheckoutActionData;
+} & SectionProps<typeof settings.checkout> & SectionRoot): import("react").JSX.Element;