@ecomiq/storefront 2.0.11 → 2.0.14

package/src/components/account/customer-order-detail-panel.tsx

@@ -0,0 +1,285 @@
+import { ArrowLeft, CreditCard, Loader2, MapPin, Package } from 'lucide-react'
+import {
+  customerOrderStatusTone,
+  formatCustomerOrderStatus,
+  formatOrderDate,
+  formatOrderDateTime,
+  type CustomerOrderDetail,
+} from '@ecomiq/core'
+import { Link } from '../../link'
+import { buttonVariants, cn } from '../../ui'
+import { formatMoney } from '../checkout/format'
+
+function statusBadgeClass(
+  tone: ReturnType<typeof customerOrderStatusTone>,
+): string {
+  switch (tone) {
+    case 'success':
+      return 'bg-emerald-50 text-emerald-800 ring-emerald-200'
+    case 'warning':
+      return 'bg-amber-50 text-amber-900 ring-amber-200'
+    case 'danger':
+      return 'bg-red-50 text-red-800 ring-red-200'
+    case 'info':
+      return 'bg-sky-50 text-sky-900 ring-sky-200'
+    default:
+      return 'bg-muted text-foreground ring-border'
+  }
+}
+
+export type CustomerOrderDetailPanelProps = {
+  order?: CustomerOrderDetail | null
+  isLoading: boolean
+  errorMessage?: string | null
+  backHref: string
+  /** Genera URL de producto si hay handle (p. ej. `/products/{handle}`). */
+  productHref?: (handle: string) => string
+  language?: string
+}
+
+export function CustomerOrderDetailPanel({
+  order,
+  isLoading,
+  errorMessage,
+  backHref,
+  productHref,
+  language = 'es-PE',
+}: CustomerOrderDetailPanelProps) {
+  if (isLoading) {
+    return (
+      <div className="flex items-center gap-2 rounded-lg border border-border bg-background px-4 py-10 text-sm text-muted-foreground">
+        <Loader2 className="size-4 shrink-0 animate-spin" />
+        Cargando detalle del pedido…
+      </div>
+    )
+  }
+
+  if (errorMessage) {
+    return (
+      <div className="space-y-4">
+        <Link
+          to={backHref}
+          className={cn(buttonVariants({ variant: 'outline', size: 'sm' }), 'gap-2')}
+        >
+          <ArrowLeft className="size-4" />
+          Volver a mis pedidos
+        </Link>
+        <p className="rounded-md border border-destructive/30 bg-destructive/5 px-4 py-3 text-sm text-destructive">
+          {errorMessage}
+        </p>
+      </div>
+    )
+  }
+
+  if (!order) return null
+
+  const tone = customerOrderStatusTone(order.status)
+  const timeline = [...order.statusTimeline].sort(
+    (a, b) =>
+      new Date(b.occurredAt).getTime() - new Date(a.occurredAt).getTime(),
+  )
+  const money = (value: number) =>
+    formatMoney(value, language, order.currencyCode)
+
+  return (
+    <div className="space-y-6">
+      <Link
+        to={backHref}
+        className={cn(
+          buttonVariants({ variant: 'ghost', size: 'sm' }),
+          '-ml-2 gap-2 text-muted-foreground',
+        )}
+      >
+        <ArrowLeft className="size-4" />
+        Volver a mis pedidos
+      </Link>
+
+      <div className="rounded-lg border border-border bg-background p-5 sm:p-6">
+        <div className="flex flex-wrap items-start justify-between gap-4">
+          <div>
+            <p className="text-sm text-muted-foreground">
+              Pedido del {formatOrderDate(order.orderDate)}
+            </p>
+            <h2 className="mt-1 text-xl font-semibold text-foreground sm:text-2xl">
+              Pedido n.º {order.orderNumber}
+            </h2>
+          </div>
+          <span
+            className={cn(
+              'inline-flex rounded-full px-3 py-1 text-sm font-medium ring-1 ring-inset',
+              statusBadgeClass(tone),
+            )}
+          >
+            {formatCustomerOrderStatus(order.status)}
+          </span>
+        </div>
+
+        <div className="mt-6 grid gap-6 lg:grid-cols-3">
+          <div className="space-y-6 lg:col-span-2">
+            <section>
+              <h3 className="text-base font-semibold text-foreground">Productos</h3>
+              <ul className="mt-3 divide-y divide-border rounded-lg border border-border">
+                {order.items.map((item) => {
+                  const href =
+                    item.productHandle && productHref
+                      ? productHref(item.productHandle)
+                      : null
+                  return (
+                    <li key={item.id} className="flex gap-4 p-4">
+                      <div className="size-20 shrink-0 overflow-hidden rounded-md border border-border bg-muted/40">
+                        {item.thumbnail ? (
+                          <img
+                            src={item.thumbnail}
+                            alt=""
+                            className="size-full object-cover"
+                          />
+                        ) : (
+                          <div className="flex size-full items-center justify-center text-muted-foreground">
+                            <Package className="size-8" />
+                          </div>
+                        )}
+                      </div>
+                      <div className="min-w-0 flex-1">
+                        {href ? (
+                          <Link
+                            to={href}
+                            className="font-medium text-primary hover:underline"
+                          >
+                            {item.title}
+                          </Link>
+                        ) : (
+                          <p className="font-medium text-foreground">{item.title}</p>
+                        )}
+                        {item.variantTitle ? (
+                          <p className="text-sm text-muted-foreground">
+                            {item.variantTitle}
+                          </p>
+                        ) : null}
+                        <p className="mt-1 text-sm text-muted-foreground">
+                          Cantidad: {item.quantity}
+                        </p>
+                        <p className="mt-1 text-sm font-medium text-foreground">
+                          {money(item.total)}
+                        </p>
+                      </div>
+                    </li>
+                  )
+                })}
+              </ul>
+            </section>
+
+            {timeline.length > 0 ? (
+              <section>
+                <h3 className="text-base font-semibold text-foreground">
+                  Seguimiento
+                </h3>
+                <ol className="mt-3 space-y-0 border-l-2 border-primary/30 pl-4">
+                  {timeline.map((entry, index) => (
+                    <li
+                      key={`${entry.key}-${entry.occurredAt}`}
+                      className="relative pb-6 last:pb-0"
+                    >
+                      <span
+                        className={cn(
+                          'absolute -left-[21px] top-1 size-2.5 rounded-full ring-2 ring-background',
+                          index === 0 ? 'bg-primary' : 'bg-muted-foreground/40',
+                        )}
+                      />
+                      <p className="text-sm font-medium text-foreground">
+                        {entry.label}
+                      </p>
+                      <p className="text-xs text-muted-foreground">
+                        {formatOrderDateTime(entry.occurredAt)}
+                      </p>
+                      {entry.description ? (
+                        <p className="mt-1 text-sm text-muted-foreground">
+                          {entry.description}
+                        </p>
+                      ) : null}
+                    </li>
+                  ))}
+                </ol>
+              </section>
+            ) : null}
+          </div>
+
+          <div className="space-y-4">
+            <section className="rounded-lg border border-border bg-muted/30 p-4">
+              <h3 className="flex items-center gap-2 text-sm font-semibold text-foreground">
+                <MapPin className="size-4" />
+                Dirección de envío
+              </h3>
+              <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
+                {order.shippingAddressSummary ??
+                  [
+                    order.shippingAddress?.address1,
+                    order.shippingAddress?.address2,
+                    order.shippingAddress?.district,
+                    order.shippingAddress?.province,
+                    order.shippingAddress?.postalCode,
+                  ]
+                    .filter(Boolean)
+                    .join(', ')}
+              </p>
+              {order.shippingAddress?.phone ? (
+                <p className="mt-2 text-sm text-muted-foreground">
+                  {order.shippingAddress.phone}
+                </p>
+              ) : null}
+            </section>
+
+            <section className="rounded-lg border border-border bg-muted/30 p-4">
+              <h3 className="flex items-center gap-2 text-sm font-semibold text-foreground">
+                <CreditCard className="size-4" />
+                Resumen de pago
+              </h3>
+              <dl className="mt-3 space-y-2 text-sm">
+                <div className="flex justify-between text-muted-foreground">
+                  <dt>Subtotal</dt>
+                  <dd>{money(order.subTotal)}</dd>
+                </div>
+                {order.discount > 0 ? (
+                  <div className="flex justify-between text-muted-foreground">
+                    <dt>Descuento</dt>
+                    <dd className="text-emerald-700">-{money(order.discount)}</dd>
+                  </div>
+                ) : null}
+                <div className="flex justify-between text-muted-foreground">
+                  <dt>Envío</dt>
+                  <dd>{money(order.shipping)}</dd>
+                </div>
+                {order.tax > 0 ? (
+                  <div className="flex justify-between text-muted-foreground">
+                    <dt>Impuestos</dt>
+                    <dd>{money(order.tax)}</dd>
+                  </div>
+                ) : null}
+                <div className="flex justify-between border-t border-border pt-2 font-semibold text-foreground">
+                  <dt>Total</dt>
+                  <dd>{money(order.total)}</dd>
+                </div>
+              </dl>
+              {order.payments.length > 0 ? (
+                <ul className="mt-4 space-y-2 border-t border-border pt-3 text-sm">
+                  {order.payments.map((p) => (
+                    <li key={p.id} className="text-muted-foreground">
+                      <span className="font-medium text-foreground">
+                        {p.paymentMethod}
+                      </span>
+                      {' · '}
+                      {money(p.amount)}
+                      <span className="text-muted-foreground">
+                        {' '}
+                        ({p.paymentStatus})
+                      </span>
+                    </li>
+                  ))}
+                </ul>
+              ) : null}
+            </section>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/account/customer-orders-panel.tsx

@@ -0,0 +1,192 @@
+import { ChevronRight, Loader2, Package } from 'lucide-react'
+import {
+  customerOrderStatusTone,
+  formatCustomerOrderStatus,
+  formatOrderDate,
+  type CustomerOrderListItem,
+} from '@ecomiq/core'
+import { Link } from '../../link'
+import { buttonVariants, cn } from '../../ui'
+import { formatMoney } from '../checkout/format'
+
+function statusBadgeClass(
+  tone: ReturnType<typeof customerOrderStatusTone>,
+): string {
+  switch (tone) {
+    case 'success':
+      return 'bg-emerald-50 text-emerald-800 ring-emerald-200'
+    case 'warning':
+      return 'bg-amber-50 text-amber-900 ring-amber-200'
+    case 'danger':
+      return 'bg-red-50 text-red-800 ring-red-200'
+    case 'info':
+      return 'bg-sky-50 text-sky-900 ring-sky-200'
+    default:
+      return 'bg-muted text-foreground ring-border'
+  }
+}
+
+export type CustomerOrdersPanelProps = {
+  orders?: CustomerOrderListItem[]
+  isLoading: boolean
+  errorMessage?: string | null
+  /** Prefijo de ruta, p. ej. `/account/orders` → enlace a `{base}/{orderId}`. */
+  orderDetailBasePath: string
+  shopHref?: string
+  language?: string
+}
+
+export function CustomerOrdersPanel({
+  orders,
+  isLoading,
+  errorMessage,
+  orderDetailBasePath,
+  shopHref = '/',
+  language = 'es-PE',
+}: CustomerOrdersPanelProps) {
+  const list = orders ?? []
+  const base = orderDetailBasePath.replace(/\/$/, '')
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-lg font-medium text-foreground">Mis pedidos</h2>
+        <p className="mt-1 text-sm text-muted-foreground">
+          Rastrea envíos, revisa totales y vuelve a ver lo que compraste.
+        </p>
+      </div>
+
+      {isLoading ? (
+        <div className="flex items-center gap-2 rounded-lg border border-border bg-background px-4 py-8 text-sm text-muted-foreground">
+          <Loader2 className="size-4 shrink-0 animate-spin" />
+          Cargando pedidos…
+        </div>
+      ) : null}
+
+      {errorMessage && !isLoading ? (
+        <p className="rounded-md border border-destructive/30 bg-destructive/5 px-4 py-3 text-sm text-destructive">
+          {errorMessage}
+        </p>
+      ) : null}
+
+      {!isLoading && !errorMessage && list.length === 0 ? (
+        <div className="rounded-lg border border-dashed border-border bg-muted/30 px-6 py-12 text-center">
+          <Package className="mx-auto mb-3 size-12 text-muted-foreground/70" />
+          <p className="text-base font-medium text-foreground">
+            Aún no tienes pedidos
+          </p>
+          <p className="mt-2 text-sm text-muted-foreground">
+            Cuando compres en esta tienda, aparecerán aquí con su estado de
+            envío.
+          </p>
+          <Link to={shopHref} className={cn(buttonVariants(), 'mt-6')}>
+            Seguir comprando
+          </Link>
+        </div>
+      ) : null}
+
+      {!isLoading && list.length > 0 ? (
+        <ul className="space-y-4">
+          {list.map((order) => {
+            const tone = customerOrderStatusTone(order.status)
+            const visibleItems = order.items.slice(0, 4)
+            const extraCount = Math.max(0, order.items.length - visibleItems.length)
+
+            return (
+              <li
+                key={order.orderId}
+                className="overflow-hidden rounded-lg border border-border bg-background"
+              >
+                <div className="flex flex-wrap items-center justify-between gap-3 border-b border-border bg-muted/40 px-4 py-3 sm:px-5">
+                  <div className="min-w-0 space-y-0.5">
+                    <p className="text-sm text-muted-foreground">
+                      Pedido realizado el{' '}
+                      <span className="font-medium text-foreground">
+                        {formatOrderDate(order.orderDate)}
+                      </span>
+                    </p>
+                    <p className="text-sm font-semibold text-foreground">
+                      N.º de pedido: {order.orderNumber}
+                    </p>
+                  </div>
+                  <div className="flex flex-wrap items-center gap-3">
+                    <span
+                      className={cn(
+                        'inline-flex rounded-full px-2.5 py-0.5 text-xs font-medium ring-1 ring-inset',
+                        statusBadgeClass(tone),
+                      )}
+                    >
+                      {formatCustomerOrderStatus(order.status)}
+                    </span>
+                    <p className="text-base font-semibold text-foreground">
+                      {formatMoney(order.total, language, order.currencyCode)}
+                    </p>
+                  </div>
+                </div>
+
+                <div className="px-4 py-4 sm:px-5">
+                  <div className="flex flex-wrap gap-3">
+                    {visibleItems.map((item) => (
+                      <div
+                        key={item.id}
+                        className="flex w-full max-w-[280px] gap-3 sm:w-auto sm:min-w-[220px] sm:flex-1"
+                      >
+                        <div className="size-16 shrink-0 overflow-hidden rounded-md border border-border bg-muted/40">
+                          {item.thumbnail ? (
+                            <img
+                              src={item.thumbnail}
+                              alt=""
+                              className="size-full object-cover"
+                            />
+                          ) : (
+                            <div className="flex size-full items-center justify-center text-muted-foreground">
+                              <Package className="size-6" />
+                            </div>
+                          )}
+                        </div>
+                        <div className="min-w-0 flex-1 text-sm">
+                          <p className="line-clamp-2 font-medium text-foreground">
+                            {item.title}
+                          </p>
+                          {item.variantTitle ? (
+                            <p className="text-muted-foreground">
+                              {item.variantTitle}
+                            </p>
+                          ) : null}
+                          <p className="text-muted-foreground">
+                            Cant.: {item.quantity}
+                          </p>
+                        </div>
+                      </div>
+                    ))}
+                    {extraCount > 0 ? (
+                      <p className="self-center text-sm text-muted-foreground">
+                        +{extraCount} producto{extraCount === 1 ? '' : 's'} más
+                      </p>
+                    ) : null}
+                  </div>
+
+                  {order.shippingAddressSummary ? (
+                    <p className="mt-3 line-clamp-2 text-xs text-muted-foreground">
+                      Enviar a: {order.shippingAddressSummary}
+                    </p>
+                  ) : null}
+
+                  <div className="mt-4 flex flex-wrap gap-2 border-t border-border pt-4">
+                    <Link
+                      to={`${base}/${encodeURIComponent(order.orderId)}`}
+                      className={cn(buttonVariants({ variant: 'outline', size: 'sm' }), 'gap-1')}
+                    >
+                      Ver detalles del pedido
+                      <ChevronRight className="size-4" />
+                    </Link>
+                  </div>
+                </div>
+              </li>
+            )
+          })}
+        </ul>
+      ) : null}
+    </div>
+  )
+}