@ecomiq/storefront 2.1.4 → 3.0.1

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

@@ -1,285 +0,0 @@
-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

@@ -1,192 +0,0 @@
-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>
-  )
-}