@ecomiq/storefront 2.1.3 → 3.0.0

package/src/sections/account-orders.tsx

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

package/src/sections/account-profile.tsx

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