@ecomiq/storefront 2.1.3 → 3.0.0

package/dist/sections/design-system.js

@@ -0,0 +1,310 @@
+import { useStorefrontText } from "../storefront-language-DrMjVbmk.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@theme/ui/button";
+import { Input } from "@theme/ui/input";
+import { Textarea } from "@theme/ui/textarea";
+import { Badge } from "@theme/ui/badge";
+import { Checkbox } from "@theme/ui/checkbox";
+import { Label } from "@theme/ui/label";
+// src/sections/design-system.tsx
+const COLORS = [
+	{
+		token: "primary",
+		name: "Principal"
+	},
+	{
+		token: "primary-foreground",
+		name: "Sobre principal"
+	},
+	{
+		token: "background",
+		name: "Fondo"
+	},
+	{
+		token: "foreground",
+		name: "Texto"
+	},
+	{
+		token: "secondary",
+		name: "Secundario"
+	},
+	{
+		token: "muted",
+		name: "Suave"
+	},
+	{
+		token: "muted-foreground",
+		name: "Texto suave"
+	},
+	{
+		token: "accent",
+		name: "Acento"
+	},
+	{
+		token: "border",
+		name: "Borde"
+	},
+	{
+		token: "destructive",
+		name: "Error"
+	}
+];
+const SCHEMES = [
+	{
+		scheme: "claro",
+		name: "Claro"
+	},
+	{
+		scheme: "oscuro",
+		name: "Oscuro"
+	},
+	{
+		scheme: "marca",
+		name: "Marca"
+	}
+];
+const CORNERS = [
+	{
+		className: "rounded-none",
+		name: "Sin redondeo"
+	},
+	{
+		className: "rounded-sm",
+		name: "Pequeño"
+	},
+	{
+		className: "rounded-md",
+		name: "Mediano"
+	},
+	{
+		className: "rounded-lg",
+		name: "Grande"
+	},
+	{
+		className: "rounded-xl",
+		name: "Muy grande"
+	},
+	{
+		className: "rounded-full",
+		name: "Círculo"
+	}
+];
+function Group({ title, children }) {
+	return /* @__PURE__ */ jsxs("section", {
+		className: "flex flex-col gap-4",
+		children: [/* @__PURE__ */ jsx("h2", {
+			className: "font-body text-xs font-medium uppercase tracking-wide text-muted-foreground",
+			children: title
+		}), children]
+	});
+}
+function DesignSystem() {
+	const storefrontTranslate = useStorefrontText();
+	return /* @__PURE__ */ jsx("div", {
+		"data-ecomiq-design": "",
+		className: "fixed inset-0 z-[100] overflow-y-auto bg-background text-foreground",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "mx-auto flex max-w-5xl flex-col gap-12 px-6 py-10",
+			children: [
+				/* @__PURE__ */ jsxs("header", {
+					className: "flex flex-col gap-1",
+					children: [/* @__PURE__ */ jsx("h1", {
+						className: "font-heading text-3xl",
+						children: "Sistema de diseño"
+					}), /* @__PURE__ */ jsx("p", {
+						className: "text-sm text-muted-foreground",
+						children: "Colores, letras y piezas de tu tema. Los cambios del panel Tema se ven aquí al instante."
+					})]
+				}),
+				/* @__PURE__ */ jsx(Group, {
+					title: "Colores",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5",
+						children: COLORS.map((color) => /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col gap-2",
+							children: [/* @__PURE__ */ jsx("div", {
+								className: "h-16 rounded-md border border-border",
+								style: { background: `var(--${color.token})` }
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "flex flex-col",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "text-sm font-medium",
+									children: color.name
+								}), /* @__PURE__ */ jsxs("code", {
+									className: "text-xs text-muted-foreground",
+									children: ["--", color.token]
+								})]
+							})]
+						}, color.token))
+					})
+				}),
+				/* @__PURE__ */ jsx(Group, {
+					title: "Esquemas",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "grid gap-3 md:grid-cols-3",
+						children: SCHEMES.map((item) => /* @__PURE__ */ jsxs("div", {
+							"data-scheme": item.scheme,
+							className: "flex flex-col gap-3 rounded-lg border border-border p-5",
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: "text-xs text-muted-foreground",
+									children: item.name
+								}),
+								/* @__PURE__ */ jsx("p", {
+									className: "font-heading text-xl",
+									children: "Nueva colección"
+								}),
+								/* @__PURE__ */ jsx("p", {
+									className: "text-sm text-muted-foreground",
+									children: "Piezas hechas para durar."
+								}),
+								/* @__PURE__ */ jsx(Button, {
+									size: "sm",
+									className: "self-start",
+									children: storefrontTranslate("Comprar")
+								})
+							]
+						}, item.scheme))
+					})
+				}),
+				/* @__PURE__ */ jsx(Group, {
+					title: "Tipografía",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-3",
+						children: [
+							/* @__PURE__ */ jsx("p", {
+								className: "font-heading text-5xl leading-tight",
+								children: "Títulos que se recuerdan"
+							}),
+							/* @__PURE__ */ jsx("p", {
+								className: "font-heading text-3xl",
+								children: "Subtítulo de sección"
+							}),
+							/* @__PURE__ */ jsx("p", {
+								className: "font-heading text-xl",
+								children: "Título de tarjeta"
+							}),
+							/* @__PURE__ */ jsx("p", {
+								className: "max-w-2xl text-base",
+								children: "Este es el texto de tu tienda: descripciones de productos, políticas y todo lo que lee tu cliente antes de comprar."
+							}),
+							/* @__PURE__ */ jsx("p", {
+								className: "text-sm text-muted-foreground",
+								children: "Texto pequeño para notas y ayudas."
+							})
+						]
+					})
+				}),
+				/* @__PURE__ */ jsxs(Group, {
+					title: "Botones",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-wrap items-center gap-3",
+						children: [
+							/* @__PURE__ */ jsx(Button, { children: storefrontTranslate("Principal") }),
+							/* @__PURE__ */ jsx(Button, {
+								variant: "secondary",
+								children: "Secundario"
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								variant: "outline",
+								children: "Con borde"
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								children: "Sin fondo"
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								variant: "link",
+								children: "Enlace"
+							})
+						]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-wrap items-center gap-3",
+						children: [
+							/* @__PURE__ */ jsx(Button, {
+								size: "sm",
+								children: "Pequeño"
+							}),
+							/* @__PURE__ */ jsx(Button, { children: "Normal" }),
+							/* @__PURE__ */ jsx(Button, {
+								size: "lg",
+								children: "Grande"
+							})
+						]
+					})]
+				}),
+				/* @__PURE__ */ jsx(Group, {
+					title: "Campos",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "grid max-w-2xl gap-4 sm:grid-cols-2",
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex flex-col gap-2",
+								children: [/* @__PURE__ */ jsx(Label, {
+									htmlFor: "ecomiq-design-email",
+									children: storefrontTranslate("Correo")
+								}), /* @__PURE__ */ jsx(Input, {
+									id: "ecomiq-design-email",
+									placeholder: storefrontTranslate("tu@correo.com")
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex flex-col gap-2",
+								children: [/* @__PURE__ */ jsx(Label, {
+									htmlFor: "ecomiq-design-note",
+									children: "Nota"
+								}), /* @__PURE__ */ jsx(Textarea, {
+									id: "ecomiq-design-note",
+									placeholder: "Escribe aquí",
+									rows: 2
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ jsx(Checkbox, {
+									id: "ecomiq-design-news",
+									defaultChecked: true
+								}), /* @__PURE__ */ jsx(Label, {
+									htmlFor: "ecomiq-design-news",
+									children: "Quiero recibir novedades"
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex flex-wrap items-center gap-2",
+								children: [
+									/* @__PURE__ */ jsx(Badge, { children: "Nuevo" }),
+									/* @__PURE__ */ jsx(Badge, {
+										variant: "secondary",
+										children: "Envío gratis"
+									}),
+									/* @__PURE__ */ jsx(Badge, {
+										variant: "outline",
+										children: storefrontTranslate("Agotado")
+									}),
+									/* @__PURE__ */ jsx(Badge, {
+										variant: "destructive",
+										children: "-20 %"
+									})
+								]
+							})
+						]
+					})
+				}),
+				/* @__PURE__ */ jsx(Group, {
+					title: "Esquinas",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "flex flex-wrap gap-4",
+						children: CORNERS.map((corner) => /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col items-center gap-2",
+							children: [/* @__PURE__ */ jsx("div", { className: `size-16 border border-border bg-muted ${corner.className}` }), /* @__PURE__ */ jsx("span", {
+								className: "text-xs text-muted-foreground",
+								children: corner.name
+							})]
+						}, corner.className))
+					})
+				})
+			]
+		})
+	});
+}
+export { DesignSystem };

package/dist/sections/draft-invoice.d.ts

@@ -0,0 +1,20 @@
+import { OrderDraftActionData, OrderDraftData } from "../order-draft.js";
+import "../index.js";
+import { SectionCatalog, SectionRoot } from "../settings.js";
+import "../entries/order.js";
+export declare const catalog: SectionCatalog;
+export declare const settings: {
+  invoice: {
+    eyebrow: string;
+    title: string;
+    description: string;
+    pay: string;
+    note: string;
+    split: string;
+    closed: string;
+  };
+};
+export declare function DraftInvoice({ loaderData, actionData, ...root }: {
+  loaderData: OrderDraftData;
+  actionData?: OrderDraftActionData;
+} & SectionRoot): import("react").JSX.Element;

package/dist/sections/draft-invoice.js

@@ -0,0 +1,158 @@
+import { useStorefrontText } from "../storefront-language-DrMjVbmk.js";
+import { CustomerCsrfField } from "../customer-csrf-C1oDX-Py.js";
+import { money } from "../money-DtGOtDri.js";
+import { setting } from "../settings-B0NO2A6Y.js";
+import { orderSummaryLines } from "../cart-summary-ur2VWKr-.js";
+import { Form, Link, useNavigation } from "react-router";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@theme/ui/button";
+// src/sections/draft-invoice.tsx
+const catalog = {
+	name: "Pedido por pagar",
+	description: "Productos y totales de un pedido por pagar, con el botón para pagarlo."
+};
+const settings = { invoice: {
+	eyebrow: setting.text("Factura", "Antetítulo"),
+	title: setting.text("Tu pedido", "Título"),
+	description: setting.text("Revisa los productos y paga cuando quieras.", "Descripción"),
+	pay: setting.text("Pagar pedido", "Botón"),
+	note: setting.text("Se respetarán los importes y el envío de este pedido.", "Nota"),
+	split: setting.text("Tu compra se dividió en varios pedidos. Revisa y paga cada uno.", "Pedidos separados"),
+	closed: setting.text("Este pedido ya no está disponible para pagar. Escríbenos si necesitas ayuda.", "Pedido cerrado")
+} };
+function DraftInvoice({ loaderData, actionData, ...root }) {
+	const storefrontTranslate = useStorefrontText();
+	const { draft, payable, language } = loaderData;
+	const orderPaths = actionData?.orderPaths ?? loaderData.orderPaths;
+	const busy = useNavigation().state !== "idle";
+	const price = (value) => money(value, draft.currencyCode, language);
+	return /* @__PURE__ */ jsxs("section", {
+		...root,
+		className: "mx-auto flex w-full max-w-2xl flex-col gap-8 px-4 py-12 md:py-20",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-3",
+				children: [
+					/* @__PURE__ */ jsxs("p", {
+						className: "text-xs font-medium tracking-widest text-muted-foreground uppercase",
+						children: [
+							settings.invoice.eyebrow,
+							" ",
+							draft.draftNumber
+						]
+					}),
+					/* @__PURE__ */ jsx("h1", {
+						className: "text-4xl leading-tight md:text-5xl",
+						children: settings.invoice.title
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground",
+						children: settings.invoice.description
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("ul", {
+				className: "divide-y rounded-lg border bg-card text-card-foreground",
+				children: draft.items.map((item) => /* @__PURE__ */ jsxs("li", {
+					className: "flex items-center gap-4 p-4",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "block w-16 shrink-0 overflow-hidden rounded-md bg-muted",
+							children: item.thumbnail ? /* @__PURE__ */ jsx("img", {
+								src: item.thumbnail,
+								alt: "",
+								width: 64,
+								height: 80,
+								loading: "lazy",
+								decoding: "async",
+								className: "aspect-[4/5] w-full object-cover"
+							}) : /* @__PURE__ */ jsx("span", { className: "block aspect-[4/5]" })
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: "flex flex-1 flex-col gap-0.5",
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: "font-medium",
+									children: item.title
+								}),
+								item.subtitle ? /* @__PURE__ */ jsx("span", {
+									className: "text-sm text-muted-foreground",
+									children: item.subtitle
+								}) : null,
+								/* @__PURE__ */ jsxs("span", {
+									className: "text-sm text-muted-foreground tabular-nums",
+									children: ["×", item.quantity]
+								})
+							]
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "font-medium tabular-nums",
+							children: price(item.total)
+						})
+					]
+				}, item.id))
+			}),
+			/* @__PURE__ */ jsx("dl", {
+				className: "flex flex-col gap-2.5 rounded-lg border bg-card p-6 text-sm text-card-foreground",
+				children: orderSummaryLines(draft, { discount: "Descuento" }).map((line) => line.key === "total" ? /* @__PURE__ */ jsxs("div", {
+					className: "flex items-baseline justify-between border-t pt-3 font-medium",
+					children: [/* @__PURE__ */ jsx("dt", { children: storefrontTranslate(line.label) }), /* @__PURE__ */ jsx("dd", {
+						className: "font-heading text-xl tabular-nums",
+						children: price(line.amount ?? 0)
+					})]
+				}, line.key) : /* @__PURE__ */ jsxs("div", {
+					className: "flex justify-between",
+					children: [/* @__PURE__ */ jsx("dt", {
+						className: "text-muted-foreground",
+						children: storefrontTranslate(line.label)
+					}), /* @__PURE__ */ jsx("dd", {
+						className: "tabular-nums",
+						children: line.amount === null ? storefrontTranslate(line.text ?? "") : price(line.amount)
+					})]
+				}, line.key))
+			}),
+			orderPaths.length > 0 ? /* @__PURE__ */ jsxs("nav", {
+				"aria-label": storefrontTranslate("Pedidos para pagar"),
+				className: "flex flex-col gap-3 rounded-lg border p-5",
+				children: [/* @__PURE__ */ jsx("p", { children: settings.invoice.split }), /* @__PURE__ */ jsx("ul", {
+					className: "flex flex-col gap-3",
+					children: orderPaths.map((path, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Link, {
+						to: path,
+						className: "font-medium underline underline-offset-4",
+						children: [
+							storefrontTranslate("Ver y pagar pedido"),
+							" ",
+							index + 1
+						]
+					}) }, path))
+				})]
+			}) : payable ? /* @__PURE__ */ jsxs(Form, {
+				method: "post",
+				className: "flex flex-col gap-3",
+				children: [
+					/* @__PURE__ */ jsx(CustomerCsrfField, {}),
+					actionData?.error ? /* @__PURE__ */ jsx("p", {
+						role: "alert",
+						className: "text-sm text-destructive",
+						children: storefrontTranslate(actionData.error)
+					}) : null,
+					/* @__PURE__ */ jsx(Button, {
+						type: "submit",
+						size: "lg",
+						disabled: busy,
+						children: busy ? storefrontTranslate("Preparando…") : settings.invoice.pay
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-center text-xs text-muted-foreground",
+						children: settings.invoice.note
+					})
+				]
+			}) : /* @__PURE__ */ jsx("p", {
+				role: "status",
+				className: "rounded-md bg-muted px-4 py-3 text-sm",
+				children: settings.invoice.closed
+			})
+		]
+	});
+}
+export { DraftInvoice, catalog, settings };

package/dist/sections/order-tracking.d.ts

@@ -0,0 +1,19 @@
+import { TrackingData } from "../public-pages.js";
+import { SectionCatalog, SectionRoot } from "../settings.js";
+import "../index.js";
+export declare const catalog: SectionCatalog;
+export declare const settings: {
+  tracking: {
+    eyebrow: string;
+    title: string;
+    description: string;
+    field: string;
+    button: string;
+    missing: string;
+    shipment: string;
+    carrier: string;
+  };
+};
+export declare function OrderTracking({ loaderData, ...root }: {
+  loaderData: TrackingData;
+} & SectionRoot): import("react").JSX.Element;

package/dist/sections/order-tracking.js

@@ -0,0 +1,141 @@
+import { setting } from "../settings-B0NO2A6Y.js";
+import { Form } from "react-router";
+import { formatTrackingStatus } from "@ecomiq/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@theme/ui/button";
+import { Input } from "@theme/ui/input";
+// src/sections/order-tracking.tsx
+const catalog = {
+	name: "Seguimiento",
+	description: "Buscador por código para seguir el envío de un pedido."
+};
+const settings = { tracking: {
+	eyebrow: setting.text("Envíos", "Antetítulo"),
+	title: setting.text("Sigue tu pedido", "Título"),
+	description: setting.text("Ingresa el código de seguimiento que te enviamos por correo.", "Descripción"),
+	field: setting.text("Código de seguimiento", "Campo"),
+	button: setting.text("Buscar", "Botón"),
+	missing: setting.text("No encontramos ese código. Revísalo e intenta de nuevo.", "Código no encontrado"),
+	shipment: setting.text("Envío", "Envío sin courier"),
+	carrier: setting.text("Ver en el courier", "Enlace al courier")
+} };
+function OrderTracking({ loaderData, ...root }) {
+	const { code, tracking, missing, language, timeZone } = loaderData;
+	const date = new Intl.DateTimeFormat(language, {
+		day: "numeric",
+		month: "short",
+		hour: "2-digit",
+		minute: "2-digit",
+		timeZone
+	});
+	return /* @__PURE__ */ jsxs("section", {
+		...root,
+		className: "mx-auto flex w-full max-w-2xl flex-col gap-8 px-4 py-12 md:py-20",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-3",
+				children: [
+					/* @__PURE__ */ jsx("p", {
+						className: "text-xs font-medium tracking-widest text-muted-foreground uppercase",
+						children: settings.tracking.eyebrow
+					}),
+					/* @__PURE__ */ jsx("h1", {
+						className: "text-4xl leading-tight md:text-5xl",
+						children: settings.tracking.title
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground",
+						children: settings.tracking.description
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs(Form, {
+				method: "get",
+				action: "/track",
+				className: "flex flex-col gap-2 sm:flex-row",
+				children: [/* @__PURE__ */ jsx(Input, {
+					name: "code",
+					defaultValue: code,
+					placeholder: settings.tracking.field,
+					"aria-label": settings.tracking.field,
+					required: true
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "submit",
+					children: settings.tracking.button
+				})]
+			}),
+			missing ? /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "rounded-md bg-destructive/10 px-4 py-3 text-sm text-destructive",
+				children: settings.tracking.missing
+			}) : null,
+			tracking ? /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-6 rounded-lg border bg-card p-6 text-card-foreground md:p-8",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-wrap items-start justify-between gap-3",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col gap-1",
+							children: [/* @__PURE__ */ jsxs("p", {
+								className: "text-sm text-muted-foreground",
+								children: [
+									tracking.carrierName ?? settings.tracking.shipment,
+									" · ",
+									tracking.trackingNumber
+								]
+							}), /* @__PURE__ */ jsx("p", {
+								className: "font-heading text-3xl",
+								children: formatTrackingStatus(tracking.status)
+							})]
+						}), tracking.trackingLink ? /* @__PURE__ */ jsx("a", {
+							href: tracking.trackingLink,
+							target: "_blank",
+							rel: "noopener noreferrer",
+							className: "text-sm font-medium underline underline-offset-4",
+							children: settings.tracking.carrier
+						}) : null]
+					}),
+					tracking.message ? /* @__PURE__ */ jsx("p", {
+						className: "text-sm text-muted-foreground",
+						children: tracking.message
+					}) : null,
+					/* @__PURE__ */ jsx("ol", {
+						className: "flex flex-col",
+						children: tracking.events.map((event, index) => /* @__PURE__ */ jsxs("li", {
+							className: "relative flex gap-4 pb-6 text-sm last:pb-0",
+							children: [
+								index < tracking.events.length - 1 ? /* @__PURE__ */ jsx("span", {
+									"aria-hidden": "true",
+									className: "absolute top-4 left-[5px] h-full w-px bg-border"
+								}) : null,
+								/* @__PURE__ */ jsx("span", {
+									"aria-hidden": "true",
+									className: "relative mt-1.5 size-2.5 shrink-0 rounded-full bg-primary"
+								}),
+								/* @__PURE__ */ jsxs("span", {
+									className: "flex flex-col gap-0.5",
+									children: [
+										/* @__PURE__ */ jsx("span", {
+											className: "font-medium",
+											children: event.name
+										}),
+										event.description ? /* @__PURE__ */ jsx("span", {
+											className: "text-muted-foreground",
+											children: event.description
+										}) : null,
+										event.date ? /* @__PURE__ */ jsx("time", {
+											dateTime: event.date,
+											className: "text-xs text-muted-foreground",
+											children: date.format(new Date(event.date))
+										}) : null
+									]
+								})
+							]
+						}, `${event.name}-${index}`))
+					})
+				]
+			}) : null
+		]
+	});
+}
+export { OrderTracking, catalog, settings };