@ecomiq/storefront 2.1.3 → 3.0.0

package/dist/sections/account-addresses.js

@@ -0,0 +1,375 @@
+import { useStorefrontText } from "../storefront-language-DrMjVbmk.js";
+import { AddressForm } from "../account-forms-AVk71ko7.js";
+import { addressDefaults } from "../address-defaults-BqjRhS82.js";
+import { placeValue, useGeoCascade } from "../catalog-hooks-B7ZP4wYY.js";
+import { useNavigation } from "react-router";
+import { useState } from "react";
+import { Fragment as Fragment$1, 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";
+import { Badge } from "@theme/ui/badge";
+// src/sections/account-addresses.tsx
+const catalog = {
+	name: "Mis direcciones",
+	description: "Lista, agrega y edita las direcciones del cliente."
+};
+function Labeled({ label, className = "", children }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: `flex flex-col gap-1.5 text-sm ${className}`,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "font-medium",
+			children: label
+		}), children]
+	});
+}
+function Choice({ name, label, value, items, disabled, required, onChange }) {
+	const storefrontTranslate = useStorefrontText();
+	return /* @__PURE__ */ jsx(Labeled, {
+		label,
+		children: /* @__PURE__ */ jsxs(Select, {
+			name,
+			required,
+			disabled,
+			value,
+			onValueChange: onChange,
+			children: [/* @__PURE__ */ jsx(SelectTrigger, {
+				"aria-label": label,
+				className: "h-11 w-full data-[size=default]:h-11",
+				children: /* @__PURE__ */ jsx(SelectValue, {
+					placeholder: storefrontTranslate("Elige…"),
+					children: items.find((item) => item.value === value)?.name
+				})
+			}), /* @__PURE__ */ jsx(SelectContent, {
+				className: "max-h-72",
+				children: items.map((item) => /* @__PURE__ */ jsx(SelectItem, {
+					value: item.value,
+					children: item.name
+				}, item.value))
+			})]
+		})
+	});
+}
+function PlaceSelect({ name, label, items, value, disabled, onChange }) {
+	return /* @__PURE__ */ jsx(Choice, {
+		name,
+		label,
+		required: true,
+		disabled,
+		value: placeValue(value),
+		items: items.map((item) => ({
+			value: placeValue(item),
+			name: item.name
+		})),
+		onChange
+	});
+}
+function AddressFields({ countries, defaults, label }) {
+	const storefrontTranslate = useStorefrontText();
+	const geo = useGeoCascade({
+		...defaults,
+		country: defaults.country ?? countries[0]?.code
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "grid gap-4 sm:grid-cols-2",
+		children: [
+			/* @__PURE__ */ jsx(Labeled, {
+				label: storefrontTranslate("Nombre de la dirección"),
+				className: "sm:col-span-2",
+				children: /* @__PURE__ */ jsx(Input, {
+					name: "label",
+					defaultValue: label,
+					placeholder: storefrontTranslate("Casa, oficina…"),
+					maxLength: 50
+				})
+			}),
+			countries.length > 1 ? /* @__PURE__ */ jsx("div", {
+				className: "sm:col-span-2",
+				children: /* @__PURE__ */ jsx(Choice, {
+					name: "country",
+					label: storefrontTranslate("País"),
+					value: geo.country,
+					items: countries.map((item) => ({
+						value: item.code,
+						name: item.name
+					})),
+					onChange: geo.setCountry
+				})
+			}) : /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name: "country",
+				value: geo.country
+			}),
+			geo.structured ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsx(PlaceSelect, {
+					name: "department",
+					label: storefrontTranslate("Departamento"),
+					items: geo.places.departments,
+					value: geo.department,
+					onChange: geo.setDepartmentValue
+				}),
+				/* @__PURE__ */ jsx(PlaceSelect, {
+					name: "province",
+					label: storefrontTranslate("Provincia"),
+					items: geo.places.provinces,
+					value: geo.province,
+					disabled: geo.department === null,
+					onChange: geo.setProvinceValue
+				}),
+				/* @__PURE__ */ jsx(PlaceSelect, {
+					name: "district",
+					label: storefrontTranslate("Distrito"),
+					items: geo.places.districts,
+					value: geo.district,
+					disabled: geo.province === null,
+					onChange: geo.setDistrictValue
+				})
+			] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Labeled, {
+				label: storefrontTranslate("Región"),
+				children: /* @__PURE__ */ jsx(Input, {
+					name: "department",
+					defaultValue: defaults.department ?? "",
+					required: true
+				})
+			}), /* @__PURE__ */ jsx(Labeled, {
+				label: storefrontTranslate("Ciudad"),
+				children: /* @__PURE__ */ jsx(Input, {
+					name: "district",
+					defaultValue: defaults.district ?? "",
+					required: true
+				})
+			})] }),
+			/* @__PURE__ */ jsx(Labeled, {
+				label: storefrontTranslate("Dirección"),
+				className: "sm:col-span-2",
+				children: /* @__PURE__ */ jsx(Input, {
+					name: "line",
+					autoComplete: "street-address",
+					defaultValue: defaults.line ?? "",
+					required: true
+				})
+			}),
+			/* @__PURE__ */ jsx(Labeled, {
+				label: storefrontTranslate("Referencia (opcional)"),
+				children: /* @__PURE__ */ jsx(Input, {
+					name: "reference",
+					defaultValue: defaults.reference ?? ""
+				})
+			}),
+			/* @__PURE__ */ jsx(Labeled, {
+				label: storefrontTranslate("Celular"),
+				children: /* @__PURE__ */ jsx(Input, {
+					name: "phone",
+					type: "tel",
+					autoComplete: "tel",
+					defaultValue: defaults.phone ?? ""
+				})
+			})
+		]
+	});
+}
+function AddressEditor({ address, countries, primary, onDone }) {
+	const storefrontTranslate = useStorefrontText();
+	const busy = useNavigation().state !== "idle";
+	return /* @__PURE__ */ jsxs(AddressForm, {
+		addressId: address?.id,
+		className: "flex flex-col gap-5 rounded-lg border bg-card p-5 text-card-foreground md:col-span-2 md:p-6",
+		onSubmit: onDone,
+		children: [
+			/* @__PURE__ */ jsx("h3", {
+				className: "font-heading text-lg",
+				children: address ? storefrontTranslate("Editar dirección") : storefrontTranslate("Nueva dirección")
+			}),
+			/* @__PURE__ */ jsx(AddressFields, {
+				countries,
+				defaults: addressDefaults(address),
+				label: address?.addressKey ?? ""
+			}),
+			/* @__PURE__ */ jsxs("label", {
+				className: "flex items-center gap-3 text-sm",
+				children: [/* @__PURE__ */ jsx("input", {
+					type: "checkbox",
+					name: "default",
+					defaultChecked: address?.isDefault ?? primary,
+					className: "size-4 accent-primary"
+				}), storefrontTranslate("Usar como dirección principal")]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap gap-2",
+				children: [/* @__PURE__ */ jsx(Button, {
+					type: "submit",
+					disabled: busy,
+					children: busy ? storefrontTranslate("Guardando…") : storefrontTranslate("Guardar dirección")
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					onClick: onDone,
+					children: storefrontTranslate("Cancelar")
+				})]
+			})
+		]
+	});
+}
+function AddressCard({ address, onEdit }) {
+	const storefrontTranslate = useStorefrontText();
+	const [confirming, setConfirming] = useState(false);
+	const locality = [
+		address.district,
+		address.province,
+		address.department
+	].filter(Boolean).join(", ");
+	const phone = address.cellPhone ?? address.phone;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full flex-col gap-4 rounded-lg border bg-card p-5 text-sm text-card-foreground md:p-6",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-3",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "font-heading text-lg capitalize",
+					children: address.addressKey
+				}), address.isDefault ? /* @__PURE__ */ jsx(Badge, {
+					variant: "secondary",
+					children: storefrontTranslate("Principal")
+				}) : null]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1",
+				children: [
+					/* @__PURE__ */ jsx("p", { children: address.addressLine }),
+					address.reference ? /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground",
+						children: address.reference
+					}) : null,
+					locality !== "" ? /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground",
+						children: locality
+					}) : null,
+					phone ? /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground",
+						children: phone
+					}) : null
+				]
+			}),
+			confirming ? /* @__PURE__ */ jsxs("div", {
+				className: "mt-auto flex flex-wrap items-center gap-3 border-t pt-4",
+				children: [
+					/* @__PURE__ */ jsx("span", { children: storefrontTranslate("¿Eliminar esta dirección?") }),
+					/* @__PURE__ */ jsx(AddressForm, {
+						intent: "delete",
+						addressId: address.id,
+						children: /* @__PURE__ */ jsx("button", {
+							type: "submit",
+							className: "font-medium text-destructive underline underline-offset-4",
+							children: storefrontTranslate("Eliminar")
+						})
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "text-muted-foreground underline underline-offset-4",
+						onClick: () => setConfirming(false),
+						children: storefrontTranslate("Cancelar")
+					})
+				]
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: "mt-auto flex flex-wrap gap-x-4 gap-y-2 border-t pt-4",
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "font-medium underline underline-offset-4",
+						onClick: onEdit,
+						children: storefrontTranslate("Editar")
+					}),
+					!address.isDefault ? /* @__PURE__ */ jsx(AddressForm, {
+						intent: "default",
+						addressId: address.id,
+						children: /* @__PURE__ */ jsx("button", {
+							type: "submit",
+							className: "underline underline-offset-4",
+							children: storefrontTranslate("Hacer principal")
+						})
+					}) : null,
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "text-muted-foreground underline underline-offset-4 hover:text-destructive",
+						onClick: () => setConfirming(true),
+						children: storefrontTranslate("Eliminar")
+					})
+				]
+			})
+		]
+	});
+}
+function AccountAddresses({ loaderData, actionData }) {
+	const storefrontTranslate = useStorefrontText();
+	const { addresses, countries } = loaderData;
+	const [editing, setEditing] = useState(null);
+	const navigation = useNavigation();
+	const error = actionData?.error ?? null;
+	const sorted = [...addresses].sort((a, b) => Number(b.isDefault) - Number(a.isDefault));
+	const adding = editing === "new";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-6",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-baseline justify-between gap-4",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-3xl",
+					children: storefrontTranslate("Direcciones")
+				}), adding ? null : /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					onClick: () => setEditing("new"),
+					disabled: navigation.state !== "idle",
+					children: storefrontTranslate("Agregar dirección")
+				})]
+			}),
+			error ? /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "rounded-md bg-destructive/10 px-4 py-3 text-sm text-destructive",
+				children: storefrontTranslate(error)
+			}) : null,
+			addresses.length === 0 && !adding ? /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col items-start gap-3 rounded-lg border bg-card p-8 text-card-foreground",
+				children: [
+					/* @__PURE__ */ jsx("p", {
+						className: "font-heading text-xl",
+						children: storefrontTranslate("Aún no guardas direcciones")
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-sm text-muted-foreground",
+						children: storefrontTranslate("Guarda una dirección para comprar más rápido.")
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						onClick: () => setEditing("new"),
+						children: storefrontTranslate("Agregar dirección")
+					})
+				]
+			}) : null,
+			/* @__PURE__ */ jsxs("ul", {
+				className: "grid gap-4 md:grid-cols-2",
+				children: [adding ? /* @__PURE__ */ jsx("li", {
+					className: "md:col-span-2",
+					children: /* @__PURE__ */ jsx(AddressEditor, {
+						address: null,
+						countries,
+						primary: addresses.length === 0,
+						onDone: () => setEditing(null)
+					})
+				}) : null, sorted.map((address) => editing === address.id ? /* @__PURE__ */ jsx("li", {
+					className: "md:col-span-2",
+					children: /* @__PURE__ */ jsx(AddressEditor, {
+						address,
+						countries,
+						primary: false,
+						onDone: () => setEditing(null)
+					})
+				}, address.id) : /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(AddressCard, {
+					address,
+					onEdit: () => setEditing(address.id)
+				}) }, address.id))]
+			})
+		]
+	});
+}
+export { AccountAddresses, catalog };

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

@@ -0,0 +1,12 @@
+import { OrderRequestActionData } from "../account.js";
+import "../index.js";
+import { SectionCatalog } from "../settings.js";
+import "../entries/account.js";
+import { CustomerOrderDetail } from "@ecomiq/core";
+export declare const catalog: SectionCatalog;
+export declare function AccountOrder({ loaderData, actionData }: {
+  loaderData: {
+    order: CustomerOrderDetail;
+  };
+  actionData?: OrderRequestActionData;
+}): import("react").JSX.Element;